@swiftwc/ui 0.0.0-dev.2 → 0.0.0-dev.21

package/generated/internal/utils/debounce.js

@@ -0,0 +1,13 @@
+import timeout from './timeout';
+export default function (fn, delay = 300, immediate = false) {
+    const { next, pending } = timeout();
+    return function (...args) {
+        const context = this, callNow = immediate && !pending();
+        next(() => {
+            if (!immediate)
+                fn.apply(context, args);
+        }, delay);
+        if (callNow)
+            fn.apply(context, args);
+    };
+}

package/generated/internal/utils/frame.d.ts

@@ -0,0 +1 @@
+export default function (element?: Element): Promise<number | undefined>;

package/generated/internal/utils/frame.js

@@ -0,0 +1,6 @@
+export default function (element) {
+    return new Promise((r) => self.requestAnimationFrame(r)).then((t) => {
+        if (!element || element.isConnected)
+            return t;
+    });
+}

package/generated/internal/utils/index.d.ts

@@ -1 +1,20 @@
-export { default as kebabCase } from "./kebab-case";
+import cash from './cash';
+export { default as add } from './add';
+export { default as buttonRole } from './button-role';
+export { default as clamp } from './clamp';
+export { default as compareBigDecimals } from './compare-big-decimals';
+export { default as cssTime } from './css-time';
+export { default as debounce } from './debounce';
+export { default as frame } from './frame';
+export { default as isInside } from './is-inside';
+export { default as kebabCase } from './kebab-case';
+export { default as listActive } from './list-active';
+export { default as microtask } from './microtask';
+export { default as onoff } from './onoff';
+export { default as set } from './set';
+export { default as sleep } from './sleep';
+export { default as slowHideShow } from './slow-hide-show';
+export { default as timeout } from './timeout';
+export { default as touchGlass } from './touch-glass';
+export { default as toolbarRepositioner } from './toolbar-repositioner';
+export declare const $: typeof cash;

package/generated/internal/utils/index.js

@@ -1 +1,21 @@
-export { default as kebabCase } from "./kebab-case";
+// import * as _intl from './intl'
+import cash from './cash';
+export { default as add } from './add';
+export { default as buttonRole } from './button-role';
+export { default as clamp } from './clamp';
+export { default as compareBigDecimals } from './compare-big-decimals';
+export { default as cssTime } from './css-time';
+export { default as debounce } from './debounce';
+export { default as frame } from './frame';
+export { default as isInside } from './is-inside';
+export { default as kebabCase } from './kebab-case';
+export { default as listActive } from './list-active';
+export { default as microtask } from './microtask';
+export { default as onoff } from './onoff';
+export { default as set } from './set';
+export { default as sleep } from './sleep';
+export { default as slowHideShow } from './slow-hide-show';
+export { default as timeout } from './timeout';
+export { default as touchGlass } from './touch-glass';
+export { default as toolbarRepositioner } from './toolbar-repositioner';
+export const $ = cash;

package/generated/internal/utils/is-inside.d.ts

@@ -0,0 +1 @@
+export default function (x: number, y: number, rect: DOMRect): boolean;

package/generated/internal/utils/is-inside.js

@@ -0,0 +1,4 @@
+export default function (x, y, rect) {
+    const { left, right, top, bottom } = rect;
+    return x >= left && x <= right && y >= top && y <= bottom;
+}

package/generated/internal/utils/kebab-case.d.ts

@@ -1 +1 @@
-export default function (str: String): string;
+export default function (str: string): string;

package/generated/internal/utils/kebab-case.js

@@ -1,11 +1,11 @@
 export default function (str) {
     return (str
         // Replace uppercase letters with - + lowercase
-        .replace(/([A-Z])/g, "-$1")
+        .replace(/([A-Z])/g, '-$1')
         // Replace spaces and underscores with -
-        .replace(/[\s_]+/g, "-")
+        .replace(/[\s_]+/g, '-')
         // Convert to lowercase
         .toLowerCase()
         // Remove leading/trailing dashes
-        .replace(/^-+|-+$/g, ""));
+        .replace(/^-+|-+$/g, ''));
 }

package/generated/internal/utils/list-active.d.ts

@@ -0,0 +1,7 @@
+export default function (t: HTMLElement): {
+    types: string;
+    listener: EventListener;
+    addOptions: {
+        passive: boolean;
+    };
+}[];

package/generated/internal/utils/list-active.js

@@ -0,0 +1,83 @@
+const touchList = new WeakMap();
+function onDown({ target }) {
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const el = target.closest('button,summary');
+    if (!el)
+        return;
+    touchList.set(el, setTimeout(() => {
+        if (!touchList.has(el))
+            return;
+        el.classList.add('active');
+    }, 70));
+    el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
+    el.closest('scroll-view')?.addEventListener('scroll', onScroll, { once: true, passive: true });
+}
+function onOver({ target, buttons }) {
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const el = target.closest('button,summary');
+    if (!el)
+        return;
+    if (0 === buttons)
+        return;
+    el.classList.add('active');
+    el.removeEventListener('pointerover', onOver);
+    el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
+}
+function onLeave({ target }) {
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const el = target.closest('button,summary');
+    if (!el)
+        return;
+    el.addEventListener('pointerover', onOver, { once: true, passive: true });
+    // self.requestAnimationFrame(() => {
+    el.removeEventListener('pointerleave', onLeave);
+    el.closest('scroll-view')?.removeEventListener('scroll', onScroll);
+    el.classList.remove('active');
+    if (touchList.has(el))
+        clearTimeout(touchList.get(el));
+    touchList.delete(el);
+    // })
+}
+function onCancel({ target }) {
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const el = target.closest('button,summary');
+    if (!el)
+        return;
+    // self.requestAnimationFrame(() => {
+    el.removeEventListener('pointerleave', onLeave);
+    el.removeEventListener('pointerover', onOver);
+    el.closest('scroll-view')?.removeEventListener('scroll', onScroll);
+    el.classList.remove('active');
+    if (touchList.has(el))
+        clearTimeout(touchList.get(el));
+    touchList.delete(el);
+    // })
+}
+function onScroll({ target }) {
+    if (!(target instanceof HTMLElement && target))
+        return;
+    for (const el of target.querySelectorAll('button,summary') ?? []) {
+        el.classList.remove('active');
+        if (touchList.has(el))
+            clearTimeout(touchList.get(el));
+        touchList.delete(el);
+        el.removeEventListener('pointerleave', onLeave);
+        el.removeEventListener('pointerover', onOver);
+    }
+}
+const makePointerdownHandler = (target) => {
+    return onDown;
+}, makePointerCancelHandler = (target) => {
+    return onCancel;
+};
+export default function (t) {
+    const downListener = makePointerdownHandler(t), offListener = makePointerCancelHandler(t);
+    return [
+        { types: 'pointerdown', listener: downListener, addOptions: { passive: true } },
+        { types: 'pointerup pointercancel', listener: offListener, addOptions: { passive: true } },
+    ];
+}

package/generated/internal/utils/microtask.d.ts

@@ -0,0 +1 @@
+export default function (): Promise<void>;

package/generated/internal/utils/microtask.js

@@ -0,0 +1,3 @@
+export default function () {
+    return Promise.resolve();
+}

package/generated/internal/utils/onoff.d.ts

@@ -0,0 +1,45 @@
+/**
+ * const el = document.querySelector('button')!
+ *
+ * @example
+ * // 1. Single — no event arg
+ * onoff('click', () => console.log('clicked'), el)
+ *
+ * @example
+ * // 2. Single — with event arg
+ * onoff('click', (e) => console.log(e.target), el)
+ *
+ * @example
+ * // 3. Single — with options
+ * onoff('click', (e) => console.log(e), el, { passive: true, once: true })
+ *
+ * @example
+ * // 4. Single — capture as boolean
+ * onoff('click', (e) => console.log(e), el, true)
+ *
+ * @example
+ * // 5. Array — shared t
+ * onoff([
+ *   { types: 'click', listener: (e) => console.log('click', e) },
+ *   { types: 'mouseover mouseout', listener: (e) => console.log('hover', e) },
+ * ], el)
+ *
+ * @example
+ * // 6. Using on/off
+ * const { on, off } = onoff('scroll', (e) => console.log(e), el, { passive: true })
+ * on()   // start listening
+ * off()  // stop listening
+ */
+type Options = boolean | AddEventListenerOptions;
+interface EventConfig {
+    types: string;
+    listener: EventListener;
+    addOptions?: Options;
+}
+declare function single(types: string, listener: EventListener, t?: EventTarget, addOptions?: Options): {
+    on: () => () => void;
+    off: () => void;
+};
+export default function (configs: EventConfig[], t?: EventTarget): ReturnType<typeof single>;
+export default function (types: string, listener: EventListener, t?: EventTarget, addOptions?: Options): ReturnType<typeof single>;
+export {};

package/generated/internal/utils/onoff.js

@@ -0,0 +1,31 @@
+function single(types, listener, t, addOptions) {
+    const events = types?.split(' ');
+    const removeOptions = typeof addOptions === 'boolean' ? addOptions : addOptions !== undefined && 'capture' in addOptions ? { capture: addOptions.capture } : undefined;
+    const off = () => {
+        for (const event of events)
+            t?.removeEventListener(event, listener, removeOptions);
+    }, on = () => {
+        for (const event of events)
+            t?.addEventListener(event, listener, addOptions);
+        return off;
+    };
+    return {
+        on,
+        off,
+    };
+}
+export default function (typesOrConfigs, listenerOrT, t, addOptions) {
+    if (Array.isArray(typesOrConfigs)) {
+        const element = listenerOrT, results = typesOrConfigs.map((c) => single(c.types, c.listener, element, c.addOptions)); //, c.t ?? element, c.addOptions))
+        const off = () => results.forEach((r) => r.off()), on = () => {
+            for (const r of results)
+                r.on();
+            return off;
+        };
+        return {
+            on,
+            off,
+        };
+    }
+    return single(typesOrConfigs, listenerOrT, t, addOptions);
+}

package/generated/internal/utils/set.d.ts

@@ -0,0 +1 @@
+export default function <T extends object, K extends keyof T>(obj: T, key: K, value: T[K]): boolean;

package/generated/internal/utils/set.js

@@ -0,0 +1,7 @@
+export default function (obj, key, value) {
+    if (!Object.is(obj[key], value)) {
+        obj[key] = value;
+        return true;
+    }
+    return false;
+}

package/generated/internal/utils/sleep.d.ts

@@ -0,0 +1 @@
+export default function (ms: number): Promise<void>;

package/generated/internal/utils/sleep.js

@@ -0,0 +1,3 @@
+export default function (ms) {
+    return new Promise((r) => self.setTimeout(r, ms));
+}

package/generated/internal/utils/slow-hide-show.d.ts

@@ -0,0 +1 @@
+export default function (to: 'show' | 'hide', el?: HTMLElement): void;

package/generated/internal/utils/slow-hide-show.js

@@ -0,0 +1,16 @@
+import frame from './frame';
+export default function (to, el) {
+    const transcleanup = ({ propertyName }) => {
+        if ('opacity' !== propertyName)
+            return;
+        el?.removeAttribute('slow');
+    };
+    for (const eventType of ['transitionend', 'transitioncancel'])
+        el?.addEventListener(eventType, transcleanup, {
+            once: true,
+        });
+    el?.setAttribute('slow', '');
+    frame(el).then(() => {
+        el?.setAttribute('slow', to);
+    }); //self.requestAnimationFrame(() => el?.setAttribute('slow', to))
+}

package/generated/internal/utils/timeout.d.ts

@@ -0,0 +1,5 @@
+export default function (): {
+    next: (fn: () => void, ms: number) => void;
+    cancel: () => void;
+    pending: () => boolean;
+};

package/generated/internal/utils/timeout.js

@@ -0,0 +1,16 @@
+export default function () {
+    let id;
+    const cancel = () => {
+        if (!id)
+            return;
+        self.clearTimeout(id);
+        id = undefined;
+    }, next = (fn, ms) => {
+        cancel();
+        id = self.setTimeout(() => {
+            fn();
+            id = undefined;
+        }, ms);
+    }, pending = () => undefined !== id;
+    return { next, cancel, pending };
+}

package/generated/internal/utils/toolbar-repositioner.d.ts

@@ -0,0 +1 @@
+export default function (el: HTMLElement, evt: MediaQueryListEvent): void;

package/generated/internal/utils/toolbar-repositioner.js

@@ -0,0 +1,12 @@
+export default function (el, evt) {
+    if (evt.matches) {
+        const newSlot = el.getAttribute('preferred-fine-modal-placement') ?? 'bottom-bar-trailing';
+        if (el.slot !== newSlot)
+            el.dataset.previousSlot = el.slot; // save for later restoration if diff
+        el.slot = el.getAttribute('preferred-fine-modal-placement') ?? 'bottom-bar-trailing';
+    }
+    else if (el.dataset.previousSlot) {
+        el.slot = el.dataset.previousSlot ?? '';
+        delete el.dataset.previousSlot;
+    }
+}

package/generated/internal/utils/touch-glass.d.ts

@@ -0,0 +1,7 @@
+export default function (t: HTMLElement, targetCallback: (target: HTMLElement) => HTMLElement, checkCallback: (evt: PointerEvent) => boolean): {
+    types: string;
+    listener: EventListener;
+    addOptions: {
+        passive: boolean;
+    };
+}[];

package/generated/internal/utils/touch-glass.js

@@ -0,0 +1,19 @@
+const makePointerdownHandler = (target, targetCallback, checkCallback) => {
+    return function (evt) {
+        // if (event.pointerType !== 'touch')  return
+        if (!checkCallback(evt))
+            return;
+        targetCallback(target).toggleAttribute('touch-glass', true);
+    };
+}, makePointercancelHandler = (target, targetCallback) => {
+    return function (evt) {
+        targetCallback(target).toggleAttribute('touch-glass', false);
+    };
+};
+export default function (t, targetCallback, checkCallback) {
+    const downListener = makePointerdownHandler(t, targetCallback, checkCallback), cancelListener = makePointercancelHandler(t, targetCallback);
+    return [
+        { types: 'pointerdown', listener: downListener, addOptions: { passive: true } },
+        { types: 'pointerup pointercancel pointerleave', listener: cancelListener, addOptions: { passive: true } },
+    ];
+}

package/generated/namespace-browser/base.d.ts

@@ -0,0 +1,36 @@
+export declare abstract class DialogBase extends HTMLDialogElement {
+    static polyfillExtends: "dialog";
+    static polyfillConnectedCallback(el: HTMLDialogElement): void;
+    static polyfillDisconnectedCallback(el: HTMLDialogElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export declare abstract class ButtonBase extends HTMLButtonElement {
+    static polyfillExtends: "button";
+    static polyfillConnectedCallback(el: HTMLButtonElement): void;
+    static polyfillDisconnectedCallback(el: HTMLButtonElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export declare abstract class DetailsBase extends HTMLDetailsElement {
+    static polyfillExtends: "details";
+    static polyfillConnectedCallback(el: HTMLDetailsElement): void;
+    static polyfillDisconnectedCallback(el: HTMLDetailsElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export declare abstract class FormBase extends HTMLFormElement {
+    static polyfillExtends: "form";
+    static polyfillConnectedCallback(el: HTMLFormElement): void;
+    static polyfillDisconnectedCallback(el: HTMLFormElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/generated/namespace-browser/base.js

@@ -0,0 +1,92 @@
+export class DialogBase extends HTMLDialogElement {
+    static polyfillExtends = 'dialog';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}
+export class ButtonBase extends HTMLButtonElement {
+    static polyfillExtends = 'button';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}
+export class DetailsBase extends HTMLDetailsElement {
+    static polyfillExtends = 'details';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}
+export class FormBase extends HTMLFormElement {
+    static polyfillExtends = 'form';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}

package/generated/namespace-browser/index.d.ts

@@ -0,0 +1,7 @@
+export type WebComponentCtor = typeof HTMLElement & {
+    observedAttributes?: string[];
+    polyfillExtends?: string;
+    polyfillConnectedCallback(el: HTMLElement): void;
+    polyfillDisconnectedCallback(el: HTMLElement): void;
+    polyfillAttributeChangedCallback?(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+};

package/generated/namespace-browser/index.js

@@ -0,0 +1 @@
+export {};

package/generated/snapshot/index.d.ts

@@ -0,0 +1,9 @@
+export declare class Snapshot {
+    #private;
+    static get breakpoints(): ReadonlyMap<string, boolean> | undefined;
+    static on: EventTarget;
+    static readonly waitReady: Promise<[unknown, void]>;
+    static waitReadyFor<T extends HTMLElement>(element: T): Promise<T | null>;
+    static get config(): Record<string, string> | undefined;
+    static setOwnConfig(): Promise<void>;
+}

package/generated/snapshot/index.js

@@ -0,0 +1,58 @@
+import { onoff } from '../internal/utils';
+export class Snapshot {
+    static #readyCalled = false;
+    static #config;
+    static #listeners;
+    static #breakpoints;
+    static get breakpoints() {
+        return this.#breakpoints;
+    }
+    static on = new EventTarget();
+    static waitReady = Promise.all([
+        'complete' === document.readyState ? Promise.resolve() : new Promise((r) => self.addEventListener('load', r, { once: true })),
+        (async () => {
+            if (!this.#readyCalled)
+                await this.setOwnConfig();
+        })(), // Lazy config read promise, triggered on first access
+    ]);
+    static async waitReadyFor(element) {
+        if (!element.isConnected)
+            return null;
+        await this.waitReady;
+        return element.isConnected ? element : null;
+    }
+    static get config() {
+        return this.#config;
+    }
+    static async setOwnConfig() {
+        if (!this.#readyCalled)
+            this.#readyCalled = true;
+        if ('complete' !== document.readyState)
+            await new Promise((r) => self.addEventListener('load', r, { once: true }));
+        this.#getOwnConfig();
+    }
+    static #getOwnConfig() {
+        const style = self.getComputedStyle(document.documentElement, '::before'), content = style.getPropertyValue('content'), unquoted = content.replace(/^"(.*)"$/, '$1'); // Remove quotes around the content
+        try {
+            this.#config = Object.fromEntries(new URLSearchParams(unquoted).entries()); // {"none": ""}
+        }
+        catch {
+            console.error('could-not-parse-config');
+        }
+        for (const off of this.#listeners ?? [])
+            off?.();
+        this.#listeners = new Set();
+        const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${this.#config['ipad-sheet-view-inline-size']}) and (min-height: ${this.#config['ipad-sheet-view-height']})`);
+        this.#breakpoints = new Map([['fine_dialog_sheet', mediaQueryList.matches]]);
+        this.#listeners.add(onoff('change', (evt) => this.#handleMediaChange(evt, 'fine_dialog_sheet:change'), mediaQueryList).on());
+        console.debug(this.#config);
+    }
+    static #handleMediaChange = ({ type, matches, media }, kind) => {
+        console.debug(`${Snapshot.name} ⚡️ ${type}`);
+        this.#breakpoints?.set('fine_dialog_sheet', matches);
+        this.on.dispatchEvent(new MediaQueryListEvent(kind, {
+            matches,
+            media,
+        }));
+    };
+}