@swiftwc/ui 0.0.0-dev.7 → 0.0.0-dev.8

package/generated/events/confirmation-dialog.d.ts

@@ -0,0 +1,9 @@
+export type ReturnDetail = {
+    returnValue: string;
+    positionAnchor: string;
+};
+declare global {
+    interface HTMLElementEventMap {
+        return: CustomEvent<ReturnDetail>;
+    }
+}

package/generated/events/date-picker.d.ts

@@ -0,0 +1,8 @@
+export type DatePickerSelectionDetail = {
+    selection: string;
+};
+declare global {
+    interface HTMLElementEventMap {
+        selection: CustomEvent<DatePickerSelectionDetail>;
+    }
+}

package/generated/events/date-picker.js

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

package/generated/events/index.d.ts

@@ -0,0 +1,7 @@
+export * from './confirmation-dialog';
+export * from './date-picker';
+export * from './lifecycle-observer';
+export * from './picker-view';
+export * from './scroll-view';
+export * from './tab-view';
+export * from './text-field';

package/generated/events/index.js

@@ -0,0 +1,7 @@
+export * from './confirmation-dialog';
+export * from './date-picker';
+export * from './lifecycle-observer';
+export * from './picker-view';
+export * from './scroll-view';
+export * from './tab-view';
+export * from './text-field';

package/generated/events/lifecycle-observer.d.ts

@@ -0,0 +1,10 @@
+import { type ScrollView } from '../components';
+export type PageShowHideDetail = {
+    page: ScrollView;
+};
+declare global {
+    interface HTMLElementEventMap {
+        pageshow: CustomEvent<PageShowHideDetail>;
+        pagehide: CustomEvent<PageShowHideDetail>;
+    }
+}

package/generated/events/lifecycle-observer.js

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

package/generated/events/picker-view.d.ts

@@ -0,0 +1,8 @@
+export type PickerSelectionDetail = {
+    selection: string;
+};
+declare global {
+    interface HTMLElementEventMap {
+        selection: CustomEvent<PickerSelectionDetail>;
+    }
+}

package/generated/events/picker-view.js

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

package/generated/events/scroll-view.d.ts

@@ -0,0 +1,10 @@
+import { type ScrollView } from '../components';
+export type PageRevealSwapDetail = {
+    page: ScrollView;
+};
+declare global {
+    interface HTMLElementEventMap {
+        pagereveal: CustomEvent<PageRevealSwapDetail>;
+        pageswap: CustomEvent<PageRevealSwapDetail>;
+    }
+}

package/generated/events/scroll-view.js

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

package/generated/events/tab-view.d.ts

@@ -0,0 +1,24 @@
+import { type NavigationSplitView, type NavigationStack } from '../components';
+import { type TabBarPlacement } from '../components/tab-view';
+export type TabDetail = {
+    tag: string;
+};
+export type TabViewDetail = {
+    selection: (NavigationStack | NavigationSplitView)[];
+};
+export type TabViewAdaptableTabBarPlacementDetail = {
+    oldValue?: TabBarPlacement;
+    newValue?: TabBarPlacement;
+};
+declare global {
+    interface HTMLElementEventMap {
+        tabshow: CustomEvent<TabDetail>;
+        tabhide: CustomEvent<TabDetail>;
+        tabreveal: CustomEvent<TabDetail>;
+        tabswap: CustomEvent<TabDetail>;
+        beforetabreveal: CustomEvent<TabDetail>;
+        beforetabswap: CustomEvent<TabDetail>;
+        'tab-view:toggle': CustomEvent<TabViewDetail>;
+        'tab-view:adaptable-tab-bar-placement-change': CustomEvent<TabViewAdaptableTabBarPlacementDetail>;
+    }
+}

package/generated/events/tab-view.js

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

package/generated/events/text-field.d.ts

@@ -0,0 +1,8 @@
+export type TextFieldCommitDetail = {
+    text: string;
+};
+declare global {
+    interface HTMLElementEventMap {
+        commit: CustomEvent<TextFieldCommitDetail>;
+    }
+}

package/generated/events/text-field.js

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

package/generated/i18n/index.d.ts

@@ -0,0 +1,24 @@
+type LocaleInput = Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale;
+type I18nProps = {
+    tag?: LocaleInput;
+    options?: Intl.LocaleOptions;
+    locale: Intl.Locale;
+    decimalSeparator: string;
+    dateSeparator: string;
+    dateOrder: string[];
+};
+export declare class I18n {
+    #private;
+    static on: EventTarget;
+    static _props: I18nProps;
+    static get tag(): LocaleInput | undefined;
+    static set tag(val: LocaleInput | undefined);
+    static get options(): Intl.LocaleOptions | undefined;
+    static set options(val: Intl.LocaleOptions | undefined);
+    static get locale(): Intl.Locale;
+    static get decimalSeparator(): string;
+    static get dateSeparator(): string;
+    static get dateOrder(): string[];
+    static setOwnConfig(options?: Intl.LocaleOptions): void;
+}
+export {};

package/generated/i18n/index.js

@@ -0,0 +1,139 @@
+export class I18n {
+    static #readyCalled = false;
+    static #tag = 'en';
+    static #options;
+    static #locale = new Intl.Locale('en');
+    static #observer;
+    static #decimalSeparator = '.';
+    static #dateSeparator = '/';
+    static #dateOrder = ['month', 'day', 'year'];
+    static on = new EventTarget();
+    // ----------------------------
+    // Lazy init
+    // ----------------------------
+    static #ensureReady() {
+        if (!this.#readyCalled)
+            this.setOwnConfig();
+    }
+    // ----------------------------
+    // Proxy with typed target
+    // ----------------------------
+    static _props = new Proxy({}, {
+        get: (_, prop) => {
+            this.#ensureReady();
+            switch (prop) {
+                case 'tag':
+                    return this.#tag;
+                case 'options':
+                    return this.#options;
+                case 'locale':
+                    return this.#locale;
+                case 'decimalSeparator':
+                    return this.#decimalSeparator;
+                case 'dateSeparator':
+                    return this.#dateSeparator;
+                case 'dateOrder':
+                    return this.#dateOrder;
+            }
+        },
+        set: (_, prop, value) => {
+            switch (prop) {
+                case 'tag':
+                    this.#observer?.disconnect();
+                    this.#observer = undefined;
+                    this.#tag = value;
+                    this.#getOwnConfig();
+                    break;
+                case 'options':
+                    this.#options = value;
+                    this.#getOwnConfig();
+                    break;
+            }
+            return true;
+        },
+    });
+    // ----------------------------
+    // Accessors
+    // ----------------------------
+    static get tag() {
+        return this._props.tag;
+    }
+    static set tag(val) {
+        this._props.tag = val;
+    }
+    static get options() {
+        return this._props.options;
+    }
+    static set options(val) {
+        this._props.options = val;
+    }
+    static get locale() {
+        return this._props.locale;
+    }
+    static get decimalSeparator() {
+        return this._props.decimalSeparator;
+    }
+    static get dateSeparator() {
+        return this._props.dateSeparator;
+    }
+    static get dateOrder() {
+        return this._props.dateOrder;
+    }
+    // ----------------------------
+    // Core logic
+    // ----------------------------
+    static setOwnConfig(options) {
+        if (!this.#readyCalled)
+            this.#readyCalled = true;
+        this.#tag = document.documentElement.lang;
+        this.#options = options;
+        this.#observer?.disconnect();
+        this.#observer = new MutationObserver(this.#handleMutation.bind(this));
+        this.#observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['lang'],
+        });
+        this.#getOwnConfig();
+    }
+    static #handleMutation() {
+        if (!this.#observer)
+            return;
+        this.#tag = document.documentElement.lang;
+        this.#getOwnConfig();
+        this.on.dispatchEvent(new CustomEvent('change'));
+    }
+    static #getOwnConfig() {
+        try {
+            this.#locale = new Intl.Locale(this.#tag ?? 'en', this.#options);
+        }
+        catch {
+            this.#locale = new Intl.Locale('en');
+        }
+        console.debug(this.#locale);
+        try {
+            const nf = new Intl.NumberFormat(this.#locale);
+            const parts = nf.formatToParts(1.1);
+            this.#decimalSeparator = parts.find(({ type }) => type === 'decimal')?.value ?? '.';
+        }
+        catch {
+            this.#decimalSeparator = '.';
+        }
+        console.debug(this.#decimalSeparator);
+        try {
+            const df = new Intl.DateTimeFormat(this.#locale);
+            const parts = df.formatToParts(new Date(2000, 11, 31));
+            this.#dateOrder = parts.filter(({ type }) => type !== 'literal')?.map(({ type }) => type) ?? ['month', 'day', 'year'];
+            this.#dateSeparator =
+                parts
+                    .filter(({ type }) => type === 'literal')
+                    .map(({ value }) => value)
+                    .at(0) ?? '/';
+        }
+        catch {
+            this.#dateOrder = ['month', 'day', 'year'];
+            this.#dateSeparator = '/';
+        }
+        console.debug(`${I18n.name} ${this.#dateSeparator}`);
+        console.debug(`${I18n.name} ${this.#dateOrder}`);
+    }
+}

package/generated/internal/class/cleanup-registry.d.ts

@@ -0,0 +1,5 @@
+export declare class CleanupRegistry {
+    #private;
+    static register(target: Element, heldValue: () => void, unregisterToken?: string | symbol): void;
+    static unregister(target: Element, token?: string | symbol): void;
+}

package/generated/internal/class/cleanup-registry.js

@@ -0,0 +1,38 @@
+export class CleanupRegistry {
+    static #cleanups = new WeakMap();
+    static #DEFAULT = Symbol('__default__');
+    static register(target, heldValue, unregisterToken = this.#DEFAULT) {
+        let tokens = this.#cleanups.get(target);
+        if (!tokens)
+            this.#cleanups.set(target, (tokens = new Map()));
+        let fns = tokens.get(unregisterToken);
+        if (!fns)
+            tokens.set(unregisterToken, (fns = new Set()));
+        fns.add(heldValue);
+    }
+    static unregister(target, token) {
+        const tokens = this.#cleanups.get(target);
+        if (!tokens)
+            return;
+        if (undefined === token) {
+            for (const fns of tokens.values())
+                for (const fn of fns)
+                    fn();
+            this.#cleanups.delete(target);
+        }
+        else if ('string' === typeof token && token.endsWith('*')) {
+            const prefix = token.slice(0, -1);
+            for (const [key, fns] of tokens)
+                if ('string' === typeof key && key.startsWith(prefix)) {
+                    for (const fn of fns)
+                        fn();
+                    tokens.delete(key);
+                }
+        }
+        else {
+            for (const fn of tokens.get(token) ?? [])
+                fn();
+            tokens.delete(token);
+        }
+    }
+}

package/generated/internal/class/css-style-observer.d.ts

@@ -0,0 +1,8 @@
+export declare class CSSStyleObserver {
+    #private;
+    constructor(options?: {
+        properties: string[];
+    });
+    observe(target: Node, callback: (evt: TransitionEvent) => void): Promise<void>;
+    disconnect(): Promise<void>;
+}

package/generated/internal/class/css-style-observer.js

@@ -0,0 +1,25 @@
+var _a;
+import { onoff } from '../../internal/utils';
+export class CSSStyleObserver {
+    #cleanups;
+    #options;
+    constructor(options = {
+        properties: ['perspective-origin'], // --other-number-@property
+    }) {
+        this.#options = options;
+    }
+    async observe(target, callback) {
+        const listener = this.#handleTransitionrun.bind(this, callback);
+        this.#cleanups = onoff('transitionrun', listener, target).on();
+    }
+    async disconnect() {
+        this.#cleanups?.();
+    }
+    #handleTransitionrun = (callback, evt) => {
+        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (!this.#options?.properties.some((prop) => evt.propertyName.startsWith(prop)))
+            return;
+        callback?.(evt);
+    };
+}
+_a = CSSStyleObserver;

package/generated/internal/class/form-associated-base.d.ts

@@ -0,0 +1,20 @@
+export declare function getInternals(instance: FormAssociatedBase): ElementInternals;
+export declare function makeSlotchangeHandler(t: FormAssociatedBase): {
+    types: string;
+    listener: (evt: Event) => void;
+}[];
+export declare abstract class FormAssociatedBase extends HTMLElement {
+    abstract setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
+    static get formAssociated(): boolean;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    get type(): string;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity: () => boolean;
+    reportValidity: () => boolean;
+    shake: (times?: number, distance?: number, duration?: number) => Promise<void>;
+}

package/generated/internal/class/form-associated-base.js

@@ -0,0 +1,93 @@
+import { CleanupRegistry } from './cleanup-registry';
+import { MutationObserverSingleton } from './mutation-observer-singleton';
+const internals = new WeakMap();
+const trackedElements = new WeakMap();
+const observers = new MutationObserverSingleton();
+export function getInternals(instance) {
+    const i = internals.get(instance);
+    if (!i)
+        throw new Error('Not a FormAssociatedBase instance');
+    return i;
+}
+export function makeSlotchangeHandler(t) {
+    const handleSlotchange = (evt) => {
+        console.debug(`${makeSlotchangeHandler.name} ⚡️ ${evt?.type}`);
+        const slot = evt.target, assigned = slot.assignedElements({ flatten: true });
+        observers.syncObservations(trackedElements.get(t) ?? new Set(), assigned, handleTagMutation, ['value', 'label']);
+        // for (const el of trackedElements.get(t) ?? [])
+        //   if (!assigned.includes(el)) {
+        //     observers.unobserve(el)
+        //     trackedElements.get(t)?.delete(el)
+        //   }
+        // for (const el of assigned) {
+        //   if (!trackedElements.get(t)?.has(el))
+        //     observers.observe(el, handleTagMutation, {
+        //       attributes: true,
+        //       characterData: true,
+        //       subtree: true,
+        //       childList: true,
+        //       attributeFilter: ['value', 'label'],
+        //     })
+        //   trackedElements.get(t)?.add(el)
+        // }
+        if (0 < assigned.length)
+            handleTagMutation();
+    }, handleTagMutation = (entry) => {
+        console.debug(`${handleTagMutation.name} ⚡️ mutation`);
+        t.setValidity(t.validity, t.validationMessage);
+    };
+    return [{ types: 'slotchange', listener: handleSlotchange }];
+}
+export class FormAssociatedBase extends HTMLElement {
+    static get formAssociated() {
+        return true;
+    }
+    constructor() {
+        super();
+        internals.set(this, this.attachInternals());
+        trackedElements.set(this, new Set());
+    }
+    disconnectedCallback() {
+        console.debug(`${FormAssociatedBase.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+        observers.clearObservationsSet(trackedElements.get(this) ?? new Set());
+        // for (const el of trackedElements.get(this) ?? []) observers.unobserve(el)
+        // trackedElements.get(this)?.clear() // trackedElements.delete(this)
+    }
+    connectedCallback() {
+        console.debug(`${FormAssociatedBase.name} ⚡️ connect`);
+    }
+    get type() {
+        return this.localName;
+    }
+    get form() {
+        return getInternals(this).form;
+    }
+    get validity() {
+        return getInternals(this).validity;
+    }
+    get validationMessage() {
+        return getInternals(this).validationMessage;
+    }
+    get willValidate() {
+        return getInternals(this).willValidate;
+    }
+    checkValidity = () => {
+        return getInternals(this).checkValidity();
+    };
+    reportValidity = () => {
+        return getInternals(this).reportValidity();
+    };
+    shake = async (times = 3, distance = 8, duration = 400) => {
+        const frames = [{ transform: 'translateX(0)' }];
+        for (let i = 0; i < times; i++)
+            frames.push({ transform: `translateX(-${distance}px)` }, { transform: `translateX(${distance}px)` });
+        frames.push({ transform: 'translateX(0)' });
+        try {
+            await this.animate(frames, { duration, easing: 'ease-in-out' }).finished;
+        }
+        catch {
+            //
+        }
+    };
+}

package/generated/internal/class/mutation-observer-singleton.d.ts

@@ -0,0 +1,10 @@
+export declare class MutationObserverSingleton {
+    #private;
+    readonly observer: Promise<MutationObserver>;
+    constructor();
+    observe(target: Node, callback: (entry: MutationRecord) => void, options: MutationObserverInit): Promise<void>;
+    unobserve(target: Node): Promise<void>;
+    /** Observes automatically all elements using a Set provided by outside. Calls renderCallback on EVERY change. */
+    syncObservations(set: Set<Element>, nodes: Element[], renderCallback: () => void, attributeFilter?: string[]): Promise<void>;
+    clearObservationsSet(set: Set<Element>): Promise<void>;
+}

package/generated/internal/class/mutation-observer-singleton.js

@@ -0,0 +1,46 @@
+import { Snapshot } from '../../snapshot';
+export class MutationObserverSingleton {
+    #observers = new WeakMap();
+    observer;
+    constructor() {
+        this.observer = Snapshot.waitReady.then(() => {
+            return new MutationObserver((entries) => {
+                for (const entry of entries)
+                    this.#observers.get(entry.target)?.(entry);
+            });
+        });
+    }
+    async observe(target, callback, options) {
+        this.#observers.set(target, callback);
+        (await this.observer).observe(target, options);
+    }
+    async unobserve(target) {
+        ;
+        (await this.observer).disconnect();
+        this.#observers.delete(target);
+    }
+    /** Observes automatically all elements using a Set provided by outside. Calls renderCallback on EVERY change. */
+    async syncObservations(set, nodes, renderCallback, attributeFilter) {
+        for (const el of set)
+            if (!nodes.includes(el)) {
+                this.unobserve(el);
+                set.delete(el);
+            }
+        for (const el of nodes) {
+            if (!set.has(el))
+                this.observe(el, renderCallback, {
+                    attributes: true,
+                    characterData: true,
+                    subtree: true,
+                    childList: true,
+                    ...(attributeFilter && { attributeFilter }),
+                });
+            set.add(el);
+        }
+    }
+    async clearObservationsSet(set) {
+        for (const el of set)
+            this.unobserve(el);
+        set.clear();
+    }
+}

package/generated/internal/class/navigation-path.d.ts

@@ -0,0 +1,15 @@
+import type * as Components from '../../components';
+import { type NavigationHost, type NavigationPage, type NavigationToolbarConfiguration } from '../privateNamespace';
+export declare class NavigationPath {
+    #private;
+    get component(): NavigationHost | undefined;
+    get body(): Components.ScrollView | null | undefined;
+    get page(): NavigationPage | null | undefined;
+    get toolBarConfig(): NavigationToolbarConfiguration[] | undefined;
+    get slot(): NavigationHost | null | undefined;
+    constructor(any?: HTMLElement);
+    hydrate(): this;
+    children(): Generator<NavigationPath>;
+    parents(): Generator<NavigationPath>;
+    [Symbol.iterator](): Generator<NavigationPath>;
+}

package/generated/internal/class/navigation-path.js

@@ -0,0 +1,84 @@
+/**
+ * Gets current host (closest)
+ */
+function closestHost(any) {
+    return any?.closest('body-view,[is=sheet-view],navigation-stack,navigation-split-view') ?? undefined;
+}
+export class NavigationPath {
+    #component;
+    #slot;
+    #body;
+    #page;
+    #toolBarConfig;
+    get component() {
+        return this.#component;
+    }
+    get body() {
+        if (undefined === this.#body)
+            this.#queryBody();
+        return this.#body;
+    }
+    get page() {
+        if (undefined === this.#page)
+            this.#queryPage();
+        return this.#page;
+    }
+    get toolBarConfig() {
+        if (undefined === this.#toolBarConfig)
+            this.#queryToolBarConfig();
+        return this.#toolBarConfig;
+    }
+    get slot() {
+        if (undefined === this.#slot)
+            this.#querySlot();
+        return this.#slot;
+    }
+    constructor(any) {
+        this.#component = closestHost(any);
+    }
+    #queryBody() {
+        this.#body = closestHost(this.#component)?.querySelector(`:scope>scroll-view,:scope>[is=sidebar-view]>scroll-view`) ?? null;
+    }
+    #queryPage() {
+        this.#page = this.#component?.querySelector(':scope>scroll-view,:scope>[is=sidebar-view]') ?? null;
+    }
+    #queryToolBarConfig() {
+        this.#toolBarConfig = [
+            ...(this.#component?.querySelectorAll(`:scope>tool-bar>tool-bar-item,:scope>tool-bar>tool-bar-item-group,:scope>[is=sidebar-view]>tool-bar>tool-bar-item,:scope>[is=sidebar-view]>tool-bar>tool-bar-item-group`) ?? []),
+        ];
+    }
+    #querySlot() {
+        this.#slot =
+            this.#component?.querySelector(':scope>body-view:not([hidden]),:scope>[is=sheet-view]:not([hidden]),:scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])') ?? null;
+    }
+    hydrate() {
+        this.#queryBody();
+        this.#queryPage();
+        this.#queryToolBarConfig();
+        this.#querySlot();
+        return this;
+    }
+    *children() {
+        if (!this.slot)
+            return;
+        const child = new NavigationPath(this.slot);
+        yield child;
+        yield* child.children();
+    }
+    *parents() {
+        if (!this.#component)
+            return;
+        let el = this.#component.parentElement;
+        while (el) {
+            const host = closestHost(el);
+            if (!host)
+                break;
+            yield new NavigationPath(host);
+            el = host.parentElement;
+        }
+    }
+    *[Symbol.iterator]() {
+        yield this;
+        yield* this.children();
+    }
+}

package/generated/internal/class/navigation-view.d.ts

@@ -0,0 +1,8 @@
+export declare class NavigationView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}