@esportsplus/ui 0.55.0 → 0.56.3

package/build/components/email-typo-fix/index.js

@@ -0,0 +1,416 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import input from '../input/index.js';
+import './scss/index.scss';
+const template_09hr2em2 = template_u1.template(`<div class='email-typo-fix'><label class='email-typo-fix-label'></label><div class='email-typo-fix-control'></div><div aria-live='polite' class='email-typo-fix-note'><div class='email-typo-fix-suggest '><button class='email-typo-fix-accept' type='button'><span class='email-typo-fix-accept-text'> Did you mean <span class='email-typo-fix-address'></span>? </span></button><button class='email-typo-fix-dismiss' type='button'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='m4.5 4.5 7 7M11.5 4.5l-7 7' /></svg></button></div><p class='email-typo-fix-hint '><span class='email-typo-fix-hint-text'>`);
+const template_09hr2eme = template_u1.template(`<!--$--><span class='email-typo-fix-address-fix'></span><!--$-->`);
+const template_09hr2emj = template_u1.template(`Link sent to <span class='email-typo-fix-address'></span>.`);
+class ReactiveObject_09hr2em0 extends reactivity_u0.ReactiveObject {
+    #checked;
+    #dismissals = this[reactivity_u0.SIGNAL](0);
+    #morphing = this[reactivity_u0.SIGNAL](false);
+    constructor(_p0) {
+        super(null);
+        this.#checked = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get checked() {
+        return reactivity_u0.read(this.#checked);
+    }
+    set checked(_v0) {
+        reactivity_u0.write(this.#checked, _v0);
+    }
+    get dismissals() {
+        return reactivity_u0.read(this.#dismissals);
+    }
+    set dismissals(_v1) {
+        reactivity_u0.write(this.#dismissals, _v1);
+    }
+    get morphing() {
+        return reactivity_u0.read(this.#morphing);
+    }
+    set morphing(_v2) {
+        reactivity_u0.write(this.#morphing, _v2);
+    }
+}
+const COMMON = [
+    'gmail.com',
+    'yahoo.com',
+    'hotmail.com',
+    'outlook.com',
+    'icloud.com',
+    'aol.com',
+    'live.com',
+    'msn.com',
+    'proton.me',
+    'protonmail.com',
+    'me.com',
+    'mac.com',
+    'googlemail.com',
+    'yandex.com',
+    'gmx.com',
+    'hey.com',
+    'fastmail.com',
+    'zoho.com',
+    'comcast.net',
+    'yahoo.co.uk',
+    'hotmail.co.uk'
+];
+const DEBOUNCE = 900;
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const EMAIL_TYPO_FIX_FIELD = Symbol.for('@esportsplus/ui/email-typo-fix.field');
+const KNOWN = new Set([
+    ...COMMON,
+    'email.com',
+    'gmx.de',
+    'gmx.net',
+    'hey.co',
+    'live.co.uk',
+    'mail.com',
+    'pm.me',
+    'web.de',
+    'ymail.com'
+]);
+const MORPH_MS = 1300;
+const SPRING = {
+    duration: 620,
+    easing: 'linear(0, 0.036, 0.114, 0.215, 0.321, 0.424, 0.513, 0.597, 0.669, 0.727, 0.779, 0.822, 0.855, 0.884, 0.908, 0.927, 0.941, 0.954, 0.963, 0.971, 0.977, 0.982, 0.986, 0.989, 0.991, 0.993, 0.995, 0.996, 0.997, 0.997, 1)'
+};
+const TLD_SLIPS = {
+    cim: 'com',
+    cmo: 'com',
+    comm: 'com',
+    con: 'com',
+    cpm: 'com',
+    ent: 'net',
+    ner: 'net',
+    nte: 'net',
+    ocm: 'com',
+    ogr: 'org',
+    orh: 'org',
+    rog: 'org',
+    vom: 'com',
+    xom: 'com'
+};
+let uid = 0;
+function difference(from, to) {
+    let end = 0, start = 0, tail = 0;
+    while (start < Math.min(from.length, to.length) && from[start] === to[start]) {
+        start++;
+    }
+    while (tail < Math.min(from.length, to.length) - start && from[from.length - 1 - tail] === to[to.length - 1 - tail]) {
+        tail++;
+    }
+    end = Math.max(start + 1, to.length - tail);
+    return { end, start };
+}
+function distance(a, b) {
+    let d = [];
+    for (let i = 0; i <= a.length; i++) {
+        d.push([]);
+        for (let j = 0; j <= b.length; j++) {
+            d[i].push(i === 0 ? j : j === 0 ? i : 0);
+        }
+    }
+    for (let i = 1; i <= a.length; i++) {
+        for (let j = 1; j <= b.length; j++) {
+            d[i][j] = Math.min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+            if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) {
+                d[i][j] = Math.min(d[i][j], d[i - 2][j - 2] + 1);
+            }
+        }
+    }
+    return d[a.length][b.length];
+}
+function plan(from, to) {
+    let kept = new Map(), lcs = [], m = to.length, n = from.length;
+    for (let i = 0; i <= n; i++) {
+        lcs.push(new Array(m + 1).fill(0));
+    }
+    for (let i = n - 1; i >= 0; i--) {
+        for (let j = m - 1; j >= 0; j--) {
+            lcs[i][j] = from[i] === to[j] ? lcs[i + 1][j + 1] + 1 : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
+        }
+    }
+    for (let i = 0, j = 0; i < n && j < m;) {
+        if (from[i] === to[j]) {
+            kept.set(j++, i++);
+        }
+        else if (lcs[i + 1][j] >= lcs[i][j + 1]) {
+            i++;
+        }
+        else {
+            j++;
+        }
+    }
+    let after = [], used = new Set(kept.values());
+    for (let j = 0; j < m; j++) {
+        let char = to[j], i = kept.get(j);
+        if (i !== undefined) {
+            after.push({ char, key: `k${i}`, kind: 'keep' });
+            continue;
+        }
+        let spare = -1;
+        for (let k = 0; k < n; k++) {
+            if (from[k] === char && !used.has(k)) {
+                spare = k;
+                break;
+            }
+        }
+        if (spare >= 0) {
+            used.add(spare);
+            after.push({ char, key: `k${spare}`, kind: 'move' });
+        }
+        else {
+            after.push({ char, key: `n${j}`, kind: 'new' });
+        }
+    }
+    return after;
+}
+function suggest(email) {
+    let at = email.lastIndexOf('@');
+    if (at < 1) {
+        return null;
+    }
+    let domain = email.slice(at + 1).toLowerCase(), local = email.slice(0, at);
+    if (domain.length < 4 || !domain.includes('.') || KNOWN.has(domain)) {
+        return null;
+    }
+    let best = null, closest = Infinity;
+    for (let i = 0, n = COMMON.length; i < n; i++) {
+        let d = distance(domain, COMMON[i]);
+        if (d < closest) {
+            best = COMMON[i];
+            closest = d;
+        }
+    }
+    if (best && closest <= (best.length >= 9 ? 2 : 1)) {
+        return `${local}@${best}`;
+    }
+    let dot = domain.lastIndexOf('.'), fix = TLD_SLIPS[domain.slice(dot + 1)];
+    return fix ? `${local}@${domain.slice(0, dot)}.${fix}` : null;
+}
+export default Object.assign(function ({ hint = 'We will send a sign-in link here.', label = 'Work email', placeholder = 'you@company.com', value = '', state = reactivity_u0.reactive({ active: false, error: '', sent: '', value }), ...attributes }) {
+    let control, dismissed = new Set(), id = `email-typo-fix-${++uid}`, local = new ReactiveObject_09hr2em0(state.value), morph = null, note, panel = '', previous = state.value, reduced = matchMedia('(prefers-reduced-motion: reduce)');
+    function accept() {
+        let field = element(), to = suggestion();
+        if (!to || !field) {
+            return;
+        }
+        let from = state.value.trim();
+        stop();
+        if (!reduced.matches && field.scrollWidth <= field.clientWidth) {
+            animate(from, to);
+        }
+        state.value = to;
+        local.checked = to;
+        let target = field;
+        requestAnimationFrame(() => {
+            target.focus();
+            target.setSelectionRange(to.length, to.length);
+        });
+    }
+    function animate(from, to) {
+        let field = element();
+        if (!control || !field) {
+            return;
+        }
+        let computed = getComputedStyle(field), overlay = document.createElement('span'), range = difference(from, to), spans = new Map();
+        overlay.ariaHidden = 'true';
+        overlay.className = 'email-typo-fix-morph';
+        overlay.style.paddingInline = `${parseFloat(computed.paddingLeft) + parseFloat(computed.borderLeftWidth)}px ${parseFloat(computed.paddingRight) + parseFloat(computed.borderRightWidth)}px`;
+        for (let i = 0, n = from.length; i < n; i++) {
+            let span = glyph(from[i]);
+            spans.set(`k${i}`, span);
+            overlay.append(span);
+        }
+        control.append(overlay);
+        morph = {
+            overlay,
+            timer: setTimeout(stop, MORPH_MS),
+            to
+        };
+        local.morphing = true;
+        requestAnimationFrame(() => requestAnimationFrame(() => {
+            if (morph?.overlay !== overlay) {
+                return;
+            }
+            let after = plan(from, to), before = new Map(), changed = 0, placed = new Set();
+            for (let [, span] of spans) {
+                before.set(span, span.offsetLeft);
+            }
+            let exits = [], order = [];
+            for (let i = 0, n = after.length; i < n; i++) {
+                let span = spans.get(after[i].key);
+                if (!span || after[i].kind === 'new') {
+                    span = glyph(after[i].char);
+                }
+                placed.add(span);
+                order.push(span);
+            }
+            for (let [, span] of spans) {
+                if (!placed.has(span)) {
+                    exits.push(span);
+                }
+            }
+            for (let i = 0, n = exits.length; i < n; i++) {
+                let span = exits[i];
+                span.style.left = `${before.get(span)}px`;
+                span.classList.add('email-typo-fix-morph-glyph--leaving');
+                span.animate({ opacity: [1, 0], transform: ['perspective(120px) rotateX(0deg)', 'perspective(120px) rotateX(90deg)'], translate: ['0 0', '0 -30%'] }, { duration: 160, easing: EASE_OUT, fill: 'forwards' });
+            }
+            overlay.replaceChildren(...order, ...exits);
+            for (let i = 0, n = after.length; i < n; i++) {
+                let delay = after[i].kind === 'keep' ? 0 : (changed++) * 40, span = order[i];
+                if (i >= range.start && i < range.end) {
+                    let underline = document.createElement('span');
+                    underline.className = 'email-typo-fix-morph-underline';
+                    span.append(underline);
+                    underline.animate([{ opacity: 0 }, { offset: 0.25, opacity: 1 }, { offset: 0.6, opacity: 1 }, { opacity: 0 }], { delay: 240, duration: 1100, easing: 'ease-out', fill: 'both' });
+                }
+                if (after[i].kind === 'new') {
+                    span.animate({ opacity: [0, 1], transform: ['perspective(120px) rotateX(-90deg)', 'perspective(120px) rotateX(0deg)'], translate: ['0 30%', '0 0'] }, { ...SPRING, delay, fill: 'backwards' });
+                    continue;
+                }
+                let dx = (before.get(span) ?? span.offsetLeft) - span.offsetLeft;
+                if (dx) {
+                    span.animate({ transform: [`translateX(${dx}px)`, 'none'] }, { ...SPRING, delay, fill: 'backwards' });
+                }
+                if (after[i].kind === 'move') {
+                    span.animate({ translate: ['0 0', '0 -40%', '0 0'] }, { delay, duration: 420, easing: 'cubic-bezier(0.77, 0, 0.175, 1)' });
+                }
+            }
+        }));
+    }
+    function dismiss() {
+        dismissed.add(state.value.toLowerCase());
+        local.dismissals++;
+        element()?.focus();
+    }
+    function element() {
+        return control?.querySelector('.email-typo-fix-field') ?? undefined;
+    }
+    function glyph(char) {
+        let span = document.createElement('span');
+        span.className = 'email-typo-fix-morph-glyph';
+        span.textContent = char;
+        return span;
+    }
+    function show(target) {
+        target?.animate(reduced.matches
+            ? { opacity: [0, 1] }
+            : { filter: ['blur(4px)', 'blur(0)'], opacity: [0, 1], translate: ['0 -4px', '0 0'] }, { duration: 220, easing: EASE_OUT });
+    }
+    function stop() {
+        if (!morph) {
+            return;
+        }
+        clearTimeout(morph.timer);
+        morph.overlay.remove();
+        morph = null;
+        local.morphing = false;
+    }
+    function suggestion() {
+        let value = state.value;
+        if (local.checked !== value || (local.dismissals && dismissed.has(value.toLowerCase()))) {
+            return null;
+        }
+        return suggest(value.trim());
+    }
+    effect(() => {
+        let value = state.value;
+        untrack(() => {
+            if (value === previous) {
+                return;
+            }
+            let keystroke = Math.abs(value.length - previous.length) <= 1 && (value.startsWith(previous) || previous.startsWith(value));
+            previous = value;
+            if (!keystroke) {
+                local.checked = value;
+            }
+            if (morph && value !== morph.to) {
+                stop();
+            }
+        });
+    });
+    effect(() => {
+        let checked = local.checked, value = state.value;
+        if (checked === value) {
+            return;
+        }
+        let timer = setTimeout(() => {
+            local.checked = value;
+        }, DEBOUNCE);
+        onCleanup(() => clearTimeout(timer));
+    });
+    effect(() => {
+        let next = suggestion() ? 'suggest' : state.sent ? `sent-${state.sent}` : 'hint';
+        untrack(() => {
+            if (panel && panel !== next) {
+                show(next === 'suggest' ? note?.querySelector('.email-typo-fix-suggest') : note?.querySelector('.email-typo-fix-hint'));
+            }
+            panel = next;
+        });
+    });
+    onCleanup(() => {
+        clearTimeout(morph?.timer);
+    });
+    return (() => {
+        let root_09hr2em1 = template_09hr2em2(), element_09hr2em3 = root_09hr2em1.firstChild, element_09hr2em4 = element_09hr2em3.firstElementChild, element_09hr2em5 = element_09hr2em4.nextElementSibling, element_09hr2em6 = element_09hr2em5.nextElementSibling, element_09hr2em7 = element_09hr2em6.firstElementChild, element_09hr2em8 = element_09hr2em7.firstElementChild, element_09hr2em9 = element_09hr2em8.firstElementChild.firstElementChild, element_09hr2ema = element_09hr2em8.nextElementSibling, element_09hr2emb = element_09hr2em7.nextElementSibling, element_09hr2emc = element_09hr2emb.firstElementChild;
+        template_u1.setProperties(element_09hr2em3, this?.attributes);
+        template_u1.setProperties(element_09hr2em3, attributes);
+        template_u1.setList(element_09hr2em3, 'class', () => local.morphing && '--morphing');
+        template_u1.setProperty(element_09hr2em4, 'for', id);
+        template_u1.slot(element_09hr2em4, label, 1);
+        template_u1.onrender(element_09hr2em5, (element) => { control = element; });
+        template_u1.slot(element_09hr2em5, input.call({ attributes: { ...this?.attributes?.[EMAIL_TYPO_FIX_FIELD], ...attributes[EMAIL_TYPO_FIX_FIELD] } }, {
+            'aria-describedby': `${id}-note`,
+            autocapitalize: 'none',
+            autocomplete: 'email',
+            class: 'email-typo-fix-field',
+            id,
+            inputmode: 'email',
+            onblur: () => {
+                local.checked = state.value;
+            },
+            oninput: (e) => {
+                stop();
+                state.sent = '';
+                state.value = e.currentTarget.value;
+            },
+            placeholder,
+            spellcheck: false,
+            state,
+            type: 'text',
+            value: () => state.value
+        }), 1);
+        template_u1.setProperty(element_09hr2em6, 'id', template_u1.interpolate([(id), "-note"]));
+        template_u1.onrender(element_09hr2em6, (element) => { note = element; });
+        template_u1.setList(element_09hr2em7, 'class', () => suggestion() && '--active');
+        template_u1.setProperty(element_09hr2em7, 'inert', () => !suggestion());
+        template_u1.delegate(element_09hr2em8, 'click', accept);
+        new template_u1.EffectSlot(element_09hr2em9, () => {
+            let to = suggestion();
+            if (!to) {
+                return '';
+            }
+            let { end, start } = difference(state.value.trim(), to);
+            return (() => {
+                let root_09hr2emd = template_09hr2eme(), element_09hr2emf = root_09hr2emd.firstChild, element_09hr2emg = element_09hr2emf.nextSibling, element_09hr2emh = element_09hr2emg.nextSibling;
+                template_u1.slot(element_09hr2emf, to.slice(0, start));
+                template_u1.slot(element_09hr2emg, to.slice(start, end), 1);
+                template_u1.slot(element_09hr2emh, to.slice(end));
+                return root_09hr2emd;
+            })();
+        }, 1);
+        template_u1.setProperty(element_09hr2ema, 'aria-label', () => `No, keep ${state.value.trim()}`);
+        template_u1.delegate(element_09hr2ema, 'click', dismiss);
+        template_u1.setList(element_09hr2emb, 'class', () => !suggestion() && '--active');
+        new template_u1.EffectSlot(element_09hr2emc, () => state.sent ? (() => {
+            let root_09hr2emi = template_09hr2emj(), element_09hr2emk = root_09hr2emi.firstChild.nextSibling;
+            template_u1.slot(element_09hr2emk, state.sent, 1);
+            return root_09hr2emi;
+        })() : hint, 1);
+        return root_09hr2em1;
+    })();
+}, { field: EMAIL_TYPO_FIX_FIELD, suggest });

package/build/components/email-typo-fix/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.email-typo-fix{--address-color:var(--color-text-500);--button-hover-background:var(--color-grey-400);--color:var(--color-text-500);--field-background:var(--color-grey-400);--field-border-radius:var(--border-radius-500);--field-height:44px;--fix-underline-color:oklch(from var(--color-text-500) l c h / .4);--font-size:var(--font-size-400);--hint-font-size:var(--font-size-300);--label-font-size:var(--font-size-300);--label-font-weight:var(--font-weight-500);--muted-color:var(--color-text-300);--note-height:40px;--outline-color:var(--color-text-500);--panel-leave-duration:.12s;--suggestion-font-size:var(--font-size-300);color:var(--color);flex-direction:column;display:flex}.email-typo-fix-accept,.email-typo-fix-dismiss{border-radius:var(--border-radius-400);color:var(--muted-color);cursor:pointer;transition:background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);background:0 0;border:0;outline:none}.email-typo-fix-accept:hover,.email-typo-fix-dismiss:hover{background:var(--button-hover-background)}.email-typo-fix-accept:active,.email-typo-fix-dismiss:active{scale:.96}.email-typo-fix-accept:focus-visible,.email-typo-fix-dismiss:focus-visible{outline:var(--border-width-500) solid var(--outline-color)}.email-typo-fix-accept{font:inherit;font-size:var(--suggestion-font-size);text-align:start;flex:1;align-items:center;min-width:0;height:40px;margin-inline-start:-8px;padding-inline:8px;line-height:1.43;display:flex}.email-typo-fix-accept-text{-webkit-line-clamp:2;overflow-wrap:anywhere;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.email-typo-fix-address{color:var(--address-color)}.email-typo-fix-address-fix{font-weight:var(--font-weight-600);text-decoration:underline;-webkit-text-decoration-color:var(--fix-underline-color);-webkit-text-decoration-color:var(--fix-underline-color);text-decoration-color:var(--fix-underline-color);text-underline-offset:3px;text-decoration-thickness:2px}.email-typo-fix-control{font-size:var(--font-size);margin-top:8px;position:relative}.email-typo-fix-dismiss{flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:flex}.email-typo-fix-dismiss:hover{color:var(--address-color)}.email-typo-fix-dismiss svg{width:14px;height:14px}.email-typo-fix-control>.email-typo-fix-field{--background-default:var(--field-background);--border-radius:var(--field-border-radius);--color-default:currentColor;font-kerning:none;font-size:inherit;font-variant-ligatures:none;height:var(--field-height);outline:none;min-height:0;padding-block:0}.email-typo-fix-control>.email-typo-fix-field:focus-visible{outline:var(--border-width-500) solid var(--outline-color)}.email-typo-fix-control>.email-typo-fix-field::placeholder{color:var(--muted-color)}.email-typo-fix.--morphing .email-typo-fix-control>.email-typo-fix-field{caret-color:#0000;color:#0000}.email-typo-fix-hint,.email-typo-fix-suggest{filter:blur(2px);opacity:0;transition:filter var(--panel-leave-duration) var(--transition-timing-function), opacity var(--panel-leave-duration) var(--transition-timing-function);visibility:hidden;align-items:center;margin:0;display:flex;position:absolute;inset:0}.email-typo-fix-hint.--active,.email-typo-fix-suggest.--active{filter:none;opacity:1;visibility:visible}.email-typo-fix-hint{color:var(--muted-color);font-size:var(--hint-font-size)}.email-typo-fix-hint-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.email-typo-fix-label{font-size:var(--label-font-size);font-weight:var(--label-font-weight)}.email-typo-fix-morph{color:var(--color);font-kerning:none;font-variant-ligatures:none;pointer-events:none;white-space:pre;align-items:center;display:flex;position:absolute;inset:0}.email-typo-fix-morph-glyph{display:inline-block;position:relative}.email-typo-fix-morph-glyph--leaving{position:absolute}.email-typo-fix-morph-underline{background:var(--fix-underline-color);opacity:0;bottom:-3px;border-radius:999px;height:2px;position:absolute;inset-inline:0}.email-typo-fix-note{height:var(--note-height);gap:4px;margin-top:8px;position:relative}.email-typo-fix-suggest{gap:4px}@media (prefers-reduced-motion:reduce){.email-typo-fix-accept:active,.email-typo-fix-dismiss:active{scale:1}.email-typo-fix-hint,.email-typo-fix-suggest{filter:none}}}
+/*$vite$:1*/

package/build/components/expanding-card/index.d.ts

@@ -0,0 +1,26 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+declare const EXPANDING_CARD_CARD: unique symbol;
+type A = Attributes & {
+    [EXPANDING_CARD_CARD]?: Attributes;
+    items: Item[];
+    state?: State;
+};
+type Item = {
+    detail: string;
+    id: string;
+    meta: string;
+    summary: string;
+    title: string;
+};
+type State = {
+    open: string | null;
+};
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { items, state, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly card: typeof EXPANDING_CARD_CARD;
+};
+export default _default;
+export type { Item as ExpandingCardItem, State as ExpandingCardState };