u2ui 1.0.0

package/el/alert/alert copy.js

@@ -0,0 +1,224 @@
+
+const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
+
+const style = `
+@import url('${icoCssUrl}');
+:host:not([dismissable])::part(close) { display:none; } /* TODO: does not work in chrome */
+:host(:not([dismissable]))::part(close) { display:none; } /* TODO: does not work in chrome */
+:host {
+    --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
+}
+#container {
+    display:flex;
+    flex-direction: row-reverse;
+    flex-wrap:wrap;
+    gap: 0 1em;
+}
+#body {
+    display:flex;
+    align-items: center;
+    flex: 1 1 20rem;
+    flex-wrap: wrap;
+    gap: 1em;
+}
+#close {
+    flex: 0 0 auto;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: 1.5em;
+    cursor: pointer;
+    line-height: 1;
+}
+#content {
+    flex:1 1 15em;
+}
+slot {
+    display:block;
+}
+slot[name=icon] {
+    font-size:1.7em;
+    color:var(--color);
+    &::slotted(*), & > u2-ico {
+        display:block;
+        font-size:inherit;
+    }
+}
+slot[name=action] {
+    display: flex;
+    justify-content: end;                    
+    flex-wrap: wrap;
+    gap: .5em;
+    flex: 0 1 auto;
+    margin-inline-start: auto;
+}
+/* slot[name=action]:empty-slot { display:none; } not possible */`;
+
+
+class alert extends HTMLElement {
+    constructor() {
+        super();
+
+        import('../../attr/focusgroup/focusgroup.js');
+        import('../ico/ico.js');
+
+        this.attachShadow({mode: 'open'});
+        this.shadowRoot.innerHTML = `
+            <style>${style}</style>
+            <div id=container>
+                <button id=close part=close aria-label=close>
+                    <svg viewBox="0 0 15 15" style="display:block;width:.7em" aria-hidden="true"><path d="M1.5 1.5l12 12m-12 0l12-12" stroke="currentColor"></path></svg>
+                </button>
+                <div id=body>
+                    <slot name=icon part=icon></slot>
+                    <slot id=content></slot>
+                    <slot name=action u2-focusgroup></slot>
+                </div>
+            </div>
+        `;
+    }
+    connectedCallback() {
+        // const variant = this.getAttribute('variant');
+        // const icon = this.getAttribute('icon') || variantData[variant]?.icon || 'info';
+        // this.shadowRoot.querySelector('[name=icon]').innerHTML = `<u2-ico icon=${icon}></u2-ico>`;
+        // this.shadowRoot.getElementById('container').setAttribute('role', variantData[variant]?.role || 'status');
+        this.shadowRoot.querySelector('#close').onclick = () => this.hide();
+    }
+    static observedAttributes = ['icon', 'variant'];
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (name==='variant') {
+            const variant = this.getAttribute('variant');
+            this.shadowRoot.getElementById('container').setAttribute('role', variantData[variant]?.role || 'status');
+        }
+        if (name==='variant' || name==='icon') {
+            const variant = this.getAttribute('variant');
+            const icon = this.getAttribute('icon') || variantData[variant]?.icon || 'info';
+            this.shadowRoot.querySelector('[name=icon]').innerHTML = `<u2-ico icon=${icon}></u2-ico>`;
+        }
+    }
+
+    // show() { // todo
+    //     this.setAttribute('open', '');
+    //     this.setAttribute('aria-live', 'assertive');
+    //     getToolsContainer().appendChild(this);
+
+    //     // autohide and role=alertdialog if no actions
+    //     const hasActions = this.querySelector('[slot=action]')?.assignedElements().length > 0;
+    //     if (hasActions) {
+    //         this.setAttribute('role', 'alertdialog');
+    //     } else {
+    //         clearTimeout(this.hideTimeout);
+    //         this.hideTimeout = setTimeout(() => this.hide(), 5000);
+    //     }
+    //     return new Promise((resolve) => {
+    //         this.resolve = resolve;
+    //     });
+    // }
+    hide() {
+        this.removeAttribute('open');
+        this.resolve?.();
+    }
+}
+
+const variant2Icon = {info:'info',success:'check',warn:'warning',error:'error'};
+const variantData = {
+    info: {
+        icon: 'info',
+        role: 'status',
+    },
+    success: {
+        icon: 'check',
+        role: 'status',
+    },
+    warn: {
+        icon: 'warning',
+        role: 'alert',
+    },
+    error: {
+        icon: 'error',
+        role: 'alert',
+    }
+};
+
+customElements.define('u2-alert', alert);
+
+/*
+alert = function(message, type, options) {
+    const el = document.createElement('u2-alert');
+    el.textContent = message;
+    options.icon && el.setAttribute('icon', options.icon);
+    el.setAttribute('type', type??'info');
+    return el.show();
+}
+export info = (message, options) => alert(message, 'info', options);
+export success = (message, options) => alert(message, 'success', options);
+export warn = (message, options) => alert(message, 'warn', options);
+export error = (message, options) => alert(message, 'error', options);
+*/
+
+
+
+/*
+function getToolsContainer() {
+    const el = document.getElementById('u2-notification-stack');
+    if (el) return el;
+    const div = document.createElement('div');
+    div.id = 'u2-notification-stack';
+    document.body.appendChild(div);
+    return div;
+}
+*/
+
+
+// class Waiter {
+//     constructor(callback, duration) {
+//         this.callback = callback;
+//         this.duration = duration;
+//         this.startTime = null;
+//         this.timerId = null;
+//         this.onProgress = null;
+//         this.pauseTime = false; // Zeitpunkt, zu dem die Pause gestartet wurde
+//         this.remaining = duration; // Verbleibende Zeit bis zum Ablauf des Timers
+//     }
+//     start() {
+//         this.pauseTime = null;
+//         this.startTime = Date.now();
+//         this._startTimer();
+//         return new Promise((resolve) => {
+//             this.resolve = resolve;
+//         });
+//     }
+//     pause() {
+//         if (this.pauseTime) return;
+//         clearTimeout(this.timerId);
+//         this.pauseTime = Date.now();
+//         this.remaining -= this.pauseTime - this.startTime; // Aktualisiere die verbleibende Zeit
+//     }
+//     _startTimer() {
+//         this.timerId = setTimeout(() => {
+//             this.callback?.();
+//             this._clear();
+//         }, this.remaining);
+//         if (this.onProgress) this._emitProgress();
+//     }
+//     _emitProgress() {
+//         const interval = 100; // Wie oft der Fortschritt aktualisiert wird (in ms)
+//         const intervalId = setInterval(() => {
+//             const now = Date.now();
+//             const passed = now - this.startTime;
+//             const left = this.duration - passed;
+//             const progress = Math.min((passed / this.duration), 1);
+//             this.onProgress({ left, passed, progress });
+//             if (passed >= this.duration) clearInterval(intervalId);
+//         }, interval);
+//     }
+//     _clear() {
+//         clearTimeout(this.timerId);
+//         this.resolve();
+//         this.startTime = null;
+//         this.timerId = null;
+//         this.pauseTime = false;
+//         this.remaining = this.duration; // Zurücksetzen der verbleibenden Zeit
+//     }
+// }

package/el/alert/alert.css

@@ -0,0 +1,73 @@
+body {
+    --color-red: oklch(70% 0.138 25);
+    --color-green: oklch(70% 0.138 165);
+    --color-yellow: oklch(70% 0.138 84);
+    --color-blue: oklch(70% 0.138 223);
+
+    --color-red: hsl( 0, var(--hsl-s), var(--hsl-l));
+    --color-green: hsl( 130, var(--hsl-s), var(--hsl-l));
+    --color-yellow: hsl( 50, var(--hsl-s), var(--hsl-l));
+    --color-blue: hsl( 223, var(--hsl-s), var(--hsl-l));
+}
+
+
+u2-alert {
+    display:block;
+    padding: 1em;
+    margin-block: 1em;
+    border: var(--line-width,1px) solid var(--color);
+}
+u2-alert:not([open]) {
+    display:none;
+}
+
+u2-alert[variant=success] { --color: var(--color-green); }
+u2-alert[variant=warn] { --color: var(--color-yellow); }
+u2-alert[variant=error] { --color: var(--color-red); }
+u2-alert[variant=info] { --color: var(--color-blue); }
+
+
+#u2NotificationStack {
+    display:flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: stretch;
+    font-size:max(.9rem, 12px);
+
+
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    gap:.8em;
+    max-width: 28rem;
+    width: 100%;
+    
+    overflow:auto;
+
+    padding: 2vmin;
+    z-index: 1000;
+    pointer-events:none;
+    & > * {
+        pointer-events: initial;
+        margin:0;
+    }
+}
+
+/* animation *
+@keyframes alert-animation {
+    from {
+        transform: scale(0.8);
+        opacity: 0.2;
+        margin-bottom:-4rem;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+u2-alert[open] {
+    will-change: transform, opacity, margin;
+    animation: alert-animation 0.2s ease-in;
+}
+/**/

package/el/alert/alert.js

@@ -0,0 +1,187 @@
+
+const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
+
+const style = `
+@import url('${icoCssUrl}');
+:host:not([dismissable])::part(close) { display:none; } /* TODO: does not work in chrome */
+:host(:not([dismissable]))::part(close) { display:none; } /* TODO: does not work in chrome */
+:host {
+    --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
+    container-type: inline-size;
+}
+
+#container {
+    display:grid;
+    gap: .5em .9em;    
+    grid-template-columns: auto 1fr auto;
+}
+
+
+slot {
+    display:block;
+}
+slot[name=icon] {
+    align-self: center;
+    font-size:1.7em;
+    color:var(--color);
+    &::slotted(*), & > u2-ico {
+        display:block;
+        font-size:inherit;
+    }
+}
+#close {
+    flex: 0 0 auto;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: 1.5em;
+    cursor: pointer;
+    line-height: 1;
+}
+#body {
+    display:flex;
+    flex-wrap:wrap;
+    align-items: center;
+    gap: .6em 1em;
+
+    & #content {
+        flex:1 1 15em;
+    }
+
+    & slot[name=action] {
+        flex: 0 1 auto;
+        display: flex;
+        justify-content: end;                    
+        flex-wrap: wrap;
+        gap: .5em;
+        margin-inline-start: auto;
+        &::slotted(button) {
+            margin:0 !important;
+        }
+    }
+}
+
+@container (max-width: 23em) {
+    slot[name=icon] {
+        align-self: start;
+    }
+    #body {
+        grid-column-start: -1;
+        grid-column-end: 1;
+    }
+    #close {
+        align-self: start;
+        grid-row-start: 1;
+        grid-column-start: 3;
+    }
+}
+
+
+/* slot[name=action]:empty-slot { display:none; } not possible */`;
+
+
+class alert extends HTMLElement {
+    constructor() {
+        super();
+ 
+        import('../../attr/focusgroup/focusgroup.js');
+        import('../ico/ico.js');
+
+        this.attachShadow({mode: 'open'});
+        this.shadowRoot.innerHTML = `
+            <style>${style}</style>
+            <div id=container>
+                <slot name=icon part=icon></slot>
+                <div id=body>
+                    <slot id=content></slot>
+                    <slot name=action u2-focusgroup></slot>
+                </div>
+                <button id=close part=close aria-label=close>
+                    <svg viewBox="0 0 15 15" style="display:block;width:.7em" aria-hidden="true"><path d="M1.5 1.5l12 12m-12 0l12-12" stroke="currentColor"></path></svg>
+                </button>
+            </div>
+        `;
+    }
+    connectedCallback() {
+        this.shadowRoot.querySelector('#close').onclick = () => this.hide();
+    }
+    static observedAttributes = ['icon', 'variant'];
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (name==='variant') {
+            const variant = this.getAttribute('variant');
+            this.shadowRoot.getElementById('container').setAttribute('role', variantData[variant]?.role || 'status');
+        }
+        if (name==='variant' || name==='icon') {
+            const variant = this.getAttribute('variant');
+            const icon = this.getAttribute('icon') || variantData[variant]?.icon || 'info';
+            this.shadowRoot.querySelector('[name=icon]').innerHTML = `<u2-ico icon=${icon}></u2-ico>`;
+        }
+    }
+
+    hide() {
+        this.removeAttribute('open');
+        this.resolve?.();
+    }
+
+    /* as toast */
+    toast() {
+        const duration = this.getAttribute('duration') || 15000;
+        this.setAttribute('open', '');
+        this.setAttribute('aria-live', 'assertive');
+        getToolsContainer().appendChild(this);
+
+        const hasActions = this.querySelector('[slot=action]')?.assignedElements().length > 0;
+        if (hasActions) {
+            this.setAttribute('role', 'alertdialog');
+        } else {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = setTimeout(() => this.hide(), duration);
+        }
+        return new Promise((resolve) => {
+            this.resolve = resolve;
+        });
+    }
+}
+
+const variantData = {
+    info: {
+        icon: 'info',
+        role: 'status',
+    },
+    success: {
+        icon: 'check',
+        role: 'status',
+    },
+    warn: {
+        icon: 'warning',
+        role: 'alert',
+    },
+    error: {
+        icon: 'error',
+        role: 'alert',
+    }
+};
+
+customElements.define('u2-alert', alert);
+
+alert = function(message, variant, options={}) {
+    const el = document.createElement('u2-alert');
+    el.textContent = message;
+    options.icon && el.setAttribute('icon', options.icon);
+    el.setAttribute('variant', variant??'info');
+    return el.toast();
+}
+export const info = (message, options) => alert(message, 'info', options);
+export const success = (message, options) => alert(message, 'success', options);
+export const warn = (message, options) => alert(message, 'warn', options);
+export const error = (message, options) => alert(message, 'error', options);
+
+function getToolsContainer() {
+    const el = document.getElementById('u2NotificationStack');
+    if (el) return el;
+    const div = document.createElement('div');
+    div.id = 'u2NotificationStack';
+    document.body.appendChild(div);
+    return div;
+}

package/el/alert/manifest.json

@@ -0,0 +1,77 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+        {
+            "kind": "javascript-module",
+            "path": "alert.js",
+            "declarations": [
+                {
+                    "kind": "class",
+                    "description": "",
+                    "name": "alert",
+                    "members": [
+                    ],
+                    "events": [
+                    ],
+                    "attributes": [
+                        {
+                            "name": "variant",
+                            "u2-type": ["info","success","warn","error"]
+                        },
+                        {
+                            "name": "dismissable",
+                            "u2-type": "boolean"
+                        },
+                        {
+                            "name": "icon",
+                            "u2Examples": ["home","star","favorite","share","link"]
+                        },
+                        {
+                            "name": "open",
+                            "u2-type": "boolean"
+                        }
+                    ],
+                    "slots": [
+                        {
+                            "name": "action",
+                            "description": "Slot to add action buttons"
+                        }
+                    ],
+                    "CSSProperties": [
+                        {
+                            "name": "--color",
+                            "description": "The color of the alert, if not set, it will be determined by the variant.",
+                            "syntax": "<color>"
+                        }
+                    ],
+                    "CSSParts": [
+                        {
+                            "name": "icon",
+                            "description": "The icon part of the alert"
+                        },
+                        {
+                            "name": "close",
+                            "description": "The close (dismiss) button part of the alert"
+                        }
+                    ],
+                    "superclass": {
+                        "name": "HTMLElement"
+                    },
+                    "tagName": "u2-alert",
+                    "customElement": true
+                }
+            ],
+            "exports": [
+                {
+                    "kind": "custom-element-definition",
+                    "name": "u2-alert",
+                    "declaration": {
+                        "name": "MyElement",
+                        "module": "my-project/my-element.js"
+                    }
+                }
+            ]
+        }
+    ]
+}

package/el/alert/tests/minimal.html

@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+    <!-- <script src="../../../u2/tests/test-init.js" type=module async></script> -->
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+    <script src="../alert.js" type=module async></script>                 
+    <link rel=stylesheet href="../alert.css">
+
+<body>
+
+<section class=main>
+
+    <u2-alert open variant="" dismissable icon="bug_report">
+        This is a dismissable alert with an custom icon.
+        <button slot=action>OK</button>
+    </u2-alert>
+
+</section>
+
+
+<style class=main>
+    u2-alert {
+        border-width: 0 0 0 3px;
+    }
+    u2-alert::part(close) {
+        opacity:0.3;
+    }
+    u2-alert::part(icon) {
+        font-size:2em;
+    }            
+</style>