@swiftwc/ui 0.0.0-dev.1 → 0.0.0-dev.100

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

@@ -0,0 +1,188 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,18 @@
+/**
+ * @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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,68 @@
+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 {};