@swiftwc/ui 0.0.0-dev.99 → 1.0.0-canary.0

package/generated/components/navigation-large-title.js

@@ -1,188 +0,0 @@
-var _a;
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { add, devFlags, frame, onoff, slowHideShow, timeout } from '../internal/utils';
-import { Snapshot } from '../snapshot';
-const observing = new WeakSet();
-function observeResizeEnd(el, callback, stableFrames = 4) {
-    let rafId = null;
-    let lastRect = el.getBoundingClientRect();
-    let stableCount = 0;
-    function check() {
-        const rect = el.getBoundingClientRect();
-        if (rect.width === lastRect.width && rect.height === lastRect.height) {
-            stableCount++;
-        }
-        else {
-            stableCount = 0;
-            lastRect = rect;
-        }
-        if (stableCount >= stableFrames) {
-            rafId = null;
-            callback(rect);
-            return;
-        }
-        rafId = self.requestAnimationFrame(check);
-    }
-    const observer = new ResizeObserver(() => {
-        stableCount = 0;
-        if (rafId === null) {
-            lastRect = el.getBoundingClientRect();
-            rafId = self.requestAnimationFrame(check);
-        }
-    });
-    observer.observe(el);
-    return () => {
-        observer.disconnect();
-        if (rafId)
-            self.cancelAnimationFrame(rafId);
-    };
-}
-function parseRootMargin(rootMargin = '0px 0px 0px 0px') {
-    const parts = rootMargin.split(/\s+/).map((v) => parseInt(v));
-    switch (parts.length) {
-        case 1:
-            return [parts[0], parts[0], parts[0], parts[0]];
-        case 2:
-            return [parts[0], parts[1], parts[0], parts[1]];
-        case 3:
-            return [parts[0], parts[1], parts[2], parts[1]];
-        case 4:
-            return parts;
-        default:
-            return [0, 0, 0, 0];
-    }
-}
-function isIntersectingWithContainer(el, container, rootMargin = '0px 0px 0px 0px') {
-    if (!(el instanceof Element) || !(container instanceof Element))
-        return false;
-    const elRect = el.getBoundingClientRect();
-    const contRect = container.getBoundingClientRect();
-    const [topMargin, rightMargin, bottomMargin, leftMargin] = parseRootMargin(rootMargin);
-    const marginRect = {
-        top: contRect.top + topMargin,
-        right: contRect.right - rightMargin,
-        bottom: contRect.bottom - bottomMargin,
-        left: contRect.left + leftMargin,
-    };
-    return !(elRect.bottom < marginRect.top || elRect.top > marginRect.bottom || elRect.right < marginRect.left || elRect.left > marginRect.right);
-}
-/**
- *
- * @attr {grouped} background-style
- * @attr {boolean} padding
- * @attr {boolean} navigation-bar-auto-hide
- *
- */
-export class NavigationLargeTitle extends HTMLElement {
-    #styleObserver;
-    #scrollObserver;
-    #scrollSafetyTimer = timeout();
-    #rootMarginTop = '0px';
-    constructor() {
-        super();
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
-        this.#clearScrollState();
-        this.#styleObserver?.disconnect();
-        CleanupRegistry.unregister(this);
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
-        const root = this.closest('scroll-view') ?? undefined;
-        if (!root)
-            return;
-        if (!root?.hasAttribute('navigation-bar-title-display-mode'))
-            root?.setAttribute('navigation-bar-title-display-mode', 'large');
-        frame(this).then(() => {
-            // if (!r) return // NOTE: Required or BREAKS transitions  // self.requestAnimationFrame(() => {
-            this.#styleObserver = new CSSStyleObserver();
-            this.#styleObserver.observe(this, this.#handleStyleChange);
-            Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange)); //Snapshot.waitReady.then(this.#handleStyleChange)
-            // this.#observer?.observe(this)
-            CleanupRegistry.register(this, onoff([
-                { types: 'scroll', listener: this.#handleScroll, addOptions: { passive: true } },
-                { types: 'scrollend', listener: this.#handleScrollend, addOptions: { passive: true } },
-            ], root).on());
-            observeResizeEnd(root, () => {
-                const isIntersecting = isIntersectingWithContainer(this, root, `${this.#rootMarginTop} 0px 0px 0px`);
-                this.#applySlowness(root, isIntersecting);
-            });
-        });
-    }
-    #handleStyleChange = () => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ style`);
-        const root = this.closest('scroll-view') ?? undefined;
-        if (!root)
-            return;
-        const style = self.getComputedStyle(this);
-        const blockSizeProp = style.getPropertyValue('--navigation-bar-block-size') || '0', //`${document.documentElement.computedStyleMap().get(`--navigation-bar-block-size`) ?? '0'}`, //
-        blockSize = parseFloat(blockSizeProp) * (blockSizeProp.endsWith('rem') ? parseFloat(style.getPropertyValue('--root-font-size')) || 16 : 1);
-        // blockSize = parseFloat(blockSizeProp) * (blockSizeProp.endsWith('rem') ? parseFloat(self.getComputedStyle(document.documentElement).fontSize) : 1)
-        const rootMarginTop = `${blockSize}px`;
-        if (this.#rootMarginTop === rootMarginTop)
-            return;
-        this.#rootMarginTop = rootMarginTop;
-        // Tear down old observer cleanly before replacing it
-        const wasObserving = observing.delete(this);
-        this.#scrollObserver?.disconnect();
-        this.#scrollObserver = new IntersectionObserver(this.#handleIntersect, {
-            root,
-            rootMargin: `-${this.#rootMarginTop} 0px 0px 0px`,
-            threshold: [0, 1],
-        });
-        // Re-observe immediately if we were mid-scroll
-        if (wasObserving) {
-            observing.add(this);
-            this.#scrollObserver.observe(this);
-        }
-    };
-    #clearScrollState = () => {
-        if (observing.delete(this))
-            this.#scrollObserver?.unobserve(this);
-        this.#scrollSafetyTimer.cancel();
-    };
-    #handleScroll = (evt) => {
-        if (add(observing, this))
-            this.#scrollObserver?.observe(this);
-        this.#scrollSafetyTimer.next(() => this.#clearScrollState(), 2000); // reset watchdog every scroll event
-    };
-    #handleScrollend = (evt) => {
-        this.#clearScrollState();
-    };
-    // #handleResizeend: EventListener = (evt: Event) => {
-    //   const root = evt.target as HTMLElement
-    //   const isIntersecting = isIntersectingWithContainer(this, root, `${this.#rootMarginTop} 0px 0px 0px`)
-    //   this.#applySlowness(root, isIntersecting)
-    // }
-    #handleIntersect = (entries, { root }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
-        if (!(root instanceof HTMLElement))
-            return;
-        for (const { isIntersecting } of entries)
-            this.#applySlowness(root, isIntersecting);
-        // for (const { isIntersecting } of entries) {
-        //   const value = isIntersecting ? 'large' : 'inline'
-        //   if (value === root?.getAttribute('navigation-bar-title-display-mode')) continue
-        //   root?.setAttribute('navigation-bar-title-display-mode', value)
-        //   if (this.closest('[hidden]')) continue // if (0 === this.offsetHeight + this.offsetWidth) continue
-        //   if (this.hasAttribute('navigation-bar-auto-hide')) slowHideShow(isIntersecting ? 'show' : 'hide', this)
-        // }
-    };
-    #applySlowness = (root, isIntersecting) => {
-        const value = isIntersecting ? 'large' : 'inline';
-        if (this.closest('[hidden]'))
-            return; // if (0 === this.offsetHeight + this.offsetWidth) continue
-        if (value === root?.getAttribute('navigation-bar-title-display-mode'))
-            return;
-        root?.setAttribute('navigation-bar-title-display-mode', value);
-        if (this.hasAttribute('navigation-bar-auto-hide'))
-            slowHideShow(isIntersecting ? 'show' : 'hide', this);
-    };
-}
-_a = NavigationLargeTitle;

package/generated/components/navigation-split-view.d.ts

@@ -1,15 +0,0 @@
-import { NavigationView } from '../internal/class/navigation-view';
-/**
- * @summary A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.
- */
-export declare class NavigationSplitView extends NavigationView {
-    constructor();
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'navigation-split-view': NavigationSplitView;
-    }
-}

package/generated/components/navigation-split-view.js

@@ -1,25 +0,0 @@
-import { NavigationView } from '../internal/class/navigation-view';
-import { devFlags } from '../internal/utils';
-/**
- * @summary A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.
- */
-export class NavigationSplitView extends NavigationView {
-    constructor() {
-        super();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        super.attributeChangedCallback(name, oldValue, newValue);
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${NavigationSplitView.name} ⚡️ disconnect`);
-        super.disconnectedCallback();
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${NavigationSplitView.name} ⚡️ connect`);
-        super.connectedCallback();
-    }
-}

package/generated/components/navigation-stack.d.ts

@@ -1,15 +0,0 @@
-import { NavigationView } from '../internal/class/navigation-view';
-/**
- * @summary A container view that shows a main screen and lets the user open other screens on top of it.
- */
-export declare class NavigationStack extends NavigationView {
-    constructor();
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'navigation-stack': NavigationStack;
-    }
-}

package/generated/components/navigation-stack.js

@@ -1,29 +0,0 @@
-import { NavigationView } from '../internal/class/navigation-view';
-import { devFlags } from '../internal/utils';
-/**
- * @summary A container view that shows a main screen and lets the user open other screens on top of it.
- */
-export class NavigationStack extends NavigationView {
-    constructor() {
-        super();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        super.attributeChangedCallback(name, oldValue, newValue);
-        switch (name) {
-            case 'hidden':
-                break;
-        }
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${NavigationStack.name} ⚡️ disconnect`);
-        super.disconnectedCallback();
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${NavigationStack.name} ⚡️ connect`);
-        super.connectedCallback();
-    }
-}

package/generated/components/navigation-title.d.ts

@@ -1,18 +0,0 @@
-/**
- * @summary A container view.
- *
- * @attr {boolean} padding
- */
-export declare class NavigationTitle extends HTMLElement {
-    #private;
-    static get observedAttributes(): string[];
-    constructor();
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'navigation-title': NavigationTitle;
-    }
-}

package/generated/components/navigation-title.js

@@ -1,72 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var NavigationTitle_1;
-import { microtaskOnConnected } from '../internal/decorators';
-import { devFlags } from '../internal/utils';
-import { queryMorph } from '../morphdom';
-import { html } from '../tpl';
-/**
- * @summary A container view.
- *
- * @attr {boolean} padding
- */
-let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElement {
-    static get observedAttributes() {
-        return ['value', 'subtitle', 'system-image', 'system-image-weight'];
-    }
-    constructor() {
-        super();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${NavigationTitle_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        this.#render(this.getAttribute('value'), this.getAttribute('subtitle'), this.getAttribute('system-image'), this.getAttribute('system-image-weight'));
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${NavigationTitle_1.name} ⚡️ disconnect`);
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${NavigationTitle_1.name} ⚡️ connect`);
-    }
-    #render = (title, subtitle, systemImage, systemImageWeight) => {
-        queryMorph(':not([slot])', html `
-        <navigation-large-title>
-          <v-stack alignment="fill">
-            ${systemImage ? html `<image-view system-name="${systemImage}" system-weight="${systemImageWeight}" foreground="blue"></image-view>` : null}
-            <v-stack spacing="0" alignment="fill">
-              ${title
-            ? html `<label-view line-limit="1" truncation-mode="tail" font="headline">
-                    <span>${title}</span>
-                  </label-view>`
-            : null}
-              ${subtitle
-            ? html `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout">
-                    <span>${subtitle}</span>
-                  </label-view>`
-            : null}
-            </v-stack>
-          </v-stack>
-        </navigation-large-title>
-      `, this);
-    };
-};
-NavigationTitle = NavigationTitle_1 = __decorate([
-    microtaskOnConnected((el) => {
-        const sibling = el.closest('scroll-view'), value = el.getAttribute('value'), subtitle = el.getAttribute('subtitle');
-        if (null === value)
-            sibling?.removeAttribute('navigation-inline-title');
-        else
-            sibling?.setAttribute('navigation-inline-title', value);
-        if (null === subtitle)
-            sibling?.removeAttribute('navigation-inline-subtitle');
-        else
-            sibling?.setAttribute('navigation-inline-subtitle', subtitle);
-    })
-], NavigationTitle);
-export { NavigationTitle };

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

@@ -1,68 +0,0 @@
-import { FormAssociatedBase } from '../internal/class/form-associated-base';
-declare const pickerStyles: readonly ["menu", "inline", "navigation-link", "sheet", "automatic"];
-export type PickerStyle = (typeof pickerStyles)[number];
-export type DictEntry = {
-    value: string;
-    title?: string;
-    subtitle?: string;
-    systemImage?: string;
-    children: DictEntry[];
-};
-export type Dictionary = DictEntry[];
-/**
- * @summary A control that selects one value from a set of options.
- *
- * @attr {menu|inline|navigation-link|sheet|automatic} picker-style
- *
- * @attr help — Adds a help tooltip to the trigger of the picker, if style supports one
- *
- * @attr {DictEntry[]} dictionary — Renders all options using this array
- *
- * @attr {vertical|horizontal|auto} label-value-placement
- *
- * @slot — The default slot.
- * @slot label
- * @slot list
- * @slot {HTMLOptionElement[]} validity-options
- */
-export declare class PickerView extends FormAssociatedBase {
-    #private;
-    static get ATTR(): {
-        PLACEHOLDER: string;
-        PLACEHOLDER_ICON: string;
-        LABEL: string;
-        PICKER_STYLE: string;
-        SELECTION: string;
-        SEARCHABLE: string;
-        CURRENT_VALUE_LABEL: string;
-        CURRENT_VALUE_ICON: string;
-        TRIGGER_HELP: string;
-        DICTIONARY: string;
-        REQUIRED: string;
-    };
-    static get observedAttributes(): string[];
-    get selection(): string;
-    set selection(v: string);
-    get template(): DocumentFragment;
-    constructor();
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-    get pickerStyle(): PickerStyle;
-    /**
-     * Form participation property
-     */
-    get name(): string;
-    setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
-    setCustomValidity: (message: string) => void;
-    formStateRestoreCallback(state: string, reason: string): void;
-    formAssociatedCallback(form: HTMLFormElement): void;
-    formDisabledCallback(disabled: boolean): void;
-    formResetCallback(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'picker-view': PickerView;
-    }
-}
-export {};