Feat/register flow

icon-button.js → button-social.js

@@ -1,4 +1,5 @@
-class BotonSocial extends HTMLElement {
+class SocialButton extends HTMLElement {
+    static TAG = 'button-social'
     static css = `
         :host {
             all: initial;
@@ -43,7 +44,7 @@ class BotonSocial extends HTMLElement {
         const style = document.createElement("style");
         const container = document.createElement("div");
 
-        style.innerHTML = BotonSocial.css;
+        style.innerHTML = SocialButton.css;
         container.innerHTML = `
             <img src="${this.getAttribute("src") || 'public/google.svg'}" alt="${this.getAttribute("alt") || "Social Button"}">
         `;
@@ -52,4 +53,4 @@ class BotonSocial extends HTMLElement {
     }
 }
 
-customElements.define('button-social', BotonSocial);
+customElements.define(SocialButton.TAG, SocialButton);

button.js

@@ -1,8 +1,10 @@
-
-
 class ButtonVirto extends HTMLElement {
     static TAG = 'button-virto'
     static css = `
+    :host {
+        display: inline-block;
+        width: 100%;
+    }
     button {
         font-family: Outfit, sans-serif;
         cursor: pointer;
@@ -11,34 +13,60 @@ class ButtonVirto extends HTMLElement {
         min-height: 44px;
         padding: 12px;
         border-radius: 1000px;
-        border: 1px solid var(--colors-alpha-dark-100, #1A1A1A1F)
-        opacity: 0px;
+        border: 1px solid #1A1A1A1F;
+        opacity: 1;
         background-color: var(--color-fill-btn);
         color: var(--color-bg);
         transition: background-color 500ms ease;
-        &:hover, &:focus {
-            background-color: var(--color-accent);
-        }
     }
-
-`;
+    button:hover {
+        background-color: var(--color-accent);
+    }
+    :host([variant="secondary"]) button {
+        background-color: var(--color-input);
+        color: var(--color-txt);
+        border: 1px solid var(--color-alt-rgb);
+    }
+    :host([variant="secondary"]) button:hover,
+    :host([variant="secondary"]) button:focus {
+        background-color: var(--color-fill-social-btn);
+    }
+    `;
 
     constructor() {
       super();
       this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+      this.render();
+    }
+
+    render() {
       const style = document.createElement("style");
       const btn = document.createElement("button");
 
-      style.innerHTML = ButtonVirto.css;
-      btn.innerText = this.getAttribute("label") || "Button";
+      style.textContent = ButtonVirto.css;
+      btn.textContent = this.getAttribute("label") || "Button";
+      this.shadowRoot.innerHTML = '';
       this.shadowRoot.append(style, btn);
     }
 
-    connectedCallback() {
-        this.addEventListener('click', function () {
-            alert('auch')
-        })
+    static get observedAttributes() {
+        return ['label', 'variant'];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'label' && this.shadowRoot) {
+            const btn = this.shadowRoot.querySelector('button');
+            if (btn) {
+                btn.textContent = newValue || "Button";
+            }
+        }
+        if (name === 'variant') {
+            this.render();
+        }
     }
-  }
+}
 
-  customElements.define(ButtonVirto.TAG, ButtonVirto);
+customElements.define(ButtonVirto.TAG, ButtonVirto);

checkbox.js

@@ -0,0 +1,68 @@
+class CustomCheckbox extends HTMLElement {
+    static TAG = 'checkbox-virto';
+    static css = `
+    :host {
+        display: block;
+        width: 100%;
+    }
+    .checkbox-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+    }
+    input[type="checkbox"] {
+        appearance: none;
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+        background-color: var(--checkbox-bg, #e0e0e0);
+        border: 1px solid var(--checkbox-border, #ccc);
+        display: grid;
+        place-content: center;
+        margin-right: 10px;
+    }
+    input[type="checkbox"]:checked {
+        background-color: var(--checkbox-checked-bg, #24AF37);
+        border-color: var(--checkbox-checked-border, #24AF37);
+    }
+    input[type="checkbox"]:checked::before {
+        content: '✔';
+        color: var(--checkbox-check-color, white);
+        font-size: 14px;
+    }
+    label {
+        color: var(--checkbox-label-color, #333);
+        font-size: 16px;
+        text-align: center;
+    }
+    `;
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    render() {
+        const style = document.createElement('style');
+        style.textContent = CustomCheckbox.css;
+
+        const container = document.createElement('div');
+        container.className = 'checkbox-container';
+
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+
+        const label = document.createElement('label');
+        label.textContent = this.getAttribute('label') || 'Checkbox Label';
+
+        container.append(checkbox, label);
+        this.shadowRoot.append(style, container);
+    }
+}
+
+customElements.define(CustomCheckbox.TAG, CustomCheckbox);

dialog.js

@@ -1,74 +1,121 @@
-class DialogoModal extends HTMLElement {
-    static css = `
-        :host {
-            all: initial;
-            display: flex;
-            flex: 1;
-            justify-content: center;
-            align-items: center;
-            height: 100dvh;
-            overflow-x: auto;
-        }
+import 'https://early.webawesome.com/[email protected]/dist/components/dialog/dialog.js';
 
-        div {
-            display: flex;
-            flex-direction: column;
-            gap: 1em;
-            font-family: Outfit, sans-serif;
-            width: 100%;
-            max-width: 528px;
-            height: fit-content;
-            background: linear-gradient(0deg, rgba(231, 247, 232, 0.5), rgba(231, 247, 232, 0.5)),
-                        radial-gradient(84.04% 109.28% at 10.3% 12.14%, rgba(86, 201, 96, 0.5) 0%, rgba(198, 235, 199, 0) 98.5%);
-            border-radius: 12px;
-            box-shadow: 0px 2px var(--Blurblur-3, 3px) -1px rgba(26, 26, 26, 0.08),
-                        0px 1px var(--Blurblur-0, 0px) 0px rgba(26, 26, 26, 0.08);
-            backdrop-filter: blur(32px);
-            padding: 1em;
-            gap: clamp(4px, 1vw, var(--spacing7, 14px));
-            opacity: 1;
-        }
+const tagFn = fn => (strings, ...parts) => fn(parts.reduce((tpl, value, i) => `${tpl}${strings[i]}${value}`, '').concat(strings[parts.length]));
+const html = tagFn(s => new DOMParser().parseFromString(`<template>${s}</template>`, 'text/html').querySelector('template'));
+const css = tagFn(s => s);
 
-        header {
-            display: flex;
-            align-items: center;
-            gap: 1em;
-        }
+const dialogTp = html`
+    <wa-dialog light-dismiss with-header with-footer>
+    <div slot="label">
+        <slot name="logo"></slot>
+        <slot name="title"></slot>
+    </div>
+    <hr> 
+    <slot></slot>
+    <div slot="footer">
+        <button-virto data-dialog="close" label="Close"></button-virto>
+        <button-virto class="dialog-next" data-dialog="next" label="Next"></button-virto>
+    </div>
+    </wa-dialog>
+`;
 
-        header h2 {
-            font-size: 1.4em;
-            font-weight: 600;
-            margin: 0;
-        }
+const dialogCss = css`
+:host, wa-dialog { font-family: 'Outfit', sans-serif !important; }
 
-        hr {
-            border: none;
-            border-radius: 1px;
-            border-top: 1px solid var(--color-accent);
-            margin: 1em 0;
-        }
-    `;
+wa-dialog::part(base) {
+    font-family: 'Outfit', sans-serif;
+    font-weight: 400;
+    padding: 1em;
+    background: var(--color-dialog-bg);
+    border-radius: 12px;
+    box-shadow: 0px 2px var(--Blurblur-3, 3px) -1px rgba(26, 26, 26, 0.08),
+             0px 1px var(--Blurblur-0, 0px) 0px rgba(26, 26, 26, 0.08);
+}
+
+wa-dialog::part(header) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+wa-dialog::part(header-actions) {
+    order: 1;
+}
+
+wa-dialog::part(title) {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+}
+
+wa-dialog::part(footer) {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+}
+
+hr  { 
+    border-top: 1px solid var(--color-accent); 
+}
 
+[slot="label"] {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+}
+
+[slot="footer"] {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+`;
+
+export class DialogoModal extends HTMLElement {
+    static TAG = 'dialog-virto';
+
     constructor() {
         super();
-        this.attachShadow({ mode: 'open' });
-        const style = document.createElement("style");
-        const dialog = document.createElement("div");
-
-        style.innerHTML = DialogoModal.css;
-        this.username = "";
-
-        dialog.innerHTML = `
-            <header>
-                <slot name="logo"></slot>
-                <h2>${this.getAttribute("label") || "Login to Virto"}</h2>
-            </header>
-            <hr>
-            <slot name="action"></slot>
-        `;
-
-        this.shadowRoot.append(style, dialog);
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.appendChild(dialogTp.content.cloneNode(true));
+
+        const style = document.createElement('style');
+        style.textContent = dialogCss;
+        this.shadowRoot.appendChild(style);
+    }
+
+    connectedCallback() {
+        this.dialog = this.shadowRoot.querySelector('wa-dialog');
+        this.nextButton = this.shadowRoot.querySelector("[data-dialog='next']");
+        this.closeButton = this.shadowRoot.querySelector("[data-dialog='close']");
+
+        this.nextButton.addEventListener("click", () => this.next());
+        this.closeButton.addEventListener("click", () => this.close());
+
+        customElements.whenDefined('wa-dialog').then(() => {
+            console.log('wa-dialog is defined');
+        });
+    }
+
+    async open() {
+        await this.dialog.updateComplete;
+        this.dialog.open = true;
+    }
+
+    async close() {
+        await this.dialog.updateComplete;
+        this.dialog.open = false;
+    }
+
+    async next() {
+        const allDialogs = document.querySelectorAll("dialog-virto");
+        const currentIndex = Array.from(allDialogs).indexOf(this);
+        if (currentIndex + 1 < allDialogs.length) {
+            await this.close();
+            await allDialogs[currentIndex + 1].open();
+        }
     }
 }
 
-customElements.define('dialog-virto', DialogoModal);
+customElements.define(DialogoModal.TAG, DialogoModal);