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

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

@@ -1,26 +0,0 @@
-/**
- * @summary A container view that arranges data in rows and columns, optionally letting the user select one or more of them.
- *
- * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template — Sets the template areas when the table is in compact mode
- *
- * @slot — The default slot.
- * @slot header-leading
- * @slot header-principal
- * @slot header-trailing
- * @slot column
- * @slot footer-leading
- * @slot footer-principal
- * @slot footer-trailing
- */
-export declare class TableView extends HTMLElement {
-    #private;
-    static get template(): DocumentFragment;
-    constructor();
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'table-view': TableView;
-    }
-}

package/generated/components/table-view.js

@@ -1,161 +0,0 @@
-var _a;
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, devFlags, listActive, onoff } from '../internal/utils';
-import { queryMorph } from '../morphdom';
-import { Snapshot } from '../snapshot';
-import { html } from '../tpl';
-/**
- * @summary A container view that arranges data in rows and columns, optionally letting the user select one or more of them.
- *
- * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template — Sets the template areas when the table is in compact mode
- *
- * @slot — The default slot.
- * @slot header-leading
- * @slot header-principal
- * @slot header-trailing
- * @slot column
- * @slot footer-leading
- * @slot footer-principal
- * @slot footer-trailing
- */
-export class TableView extends HTMLElement {
-    #styleObserver;
-    #compactToolbarItem;
-    static #template;
-    static get template() {
-        return (this.#template ??= $(html `<div part="root table-container">
-        <div part="root table-header-stack">
-          <div part="root table-header-leading-stack">
-            <slot name="header-leading"></slot>
-          </div>
-          <div part="root table-header-principal-stack">
-            <slot name="header-principal"></slot>
-          </div>
-          <div part="root table-header-trailing-stack">
-            <slot name="header-trailing"></slot>
-          </div>
-        </div>
-        <div part="root table-column-stack">
-          <slot name="column"></slot>
-        </div>
-        <slot><p>empty</p></slot>
-        <div part="root table-footer-stack">
-          <div part="root table-footer-leading-stack">
-            <slot name="footer-leading"></slot>
-          </div>
-          <div part="root table-footer-principal-stack">
-            <slot name="footer-principal"></slot>
-          </div>
-          <div part="root table-footer-trailing-stack">
-            <slot name="footer-trailing"></slot>
-          </div>
-        </div>
-      </div>`));
-    }
-    #shadowRoot;
-    #slots = new Map();
-    constructor() {
-        super();
-        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
-            this.#slots?.set(slot.name, slot);
-        CleanupRegistry.register(this, () => {
-            this.#slots = new Map();
-        });
-        this.#slots?.get('column')?.addEventListener('slotchange', this.#handleColumnSlotchange);
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(this);
-        this.#styleObserver?.disconnect();
-        this.#observers.unobserveAll();
-        this.#compactToolbarItem = undefined;
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
-        CleanupRegistry.register(this, onoff(listActive(this), this).on());
-        this.#styleObserver = new CSSStyleObserver({
-            properties: ['--adaptable-table-style-index'],
-        });
-        const target = this.#shadowRoot.querySelector('[part*=table-container]') ?? undefined;
-        if (!target)
-            return;
-        this.#styleObserver.observe(target, this.#handleStyleChange);
-        Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
-    }
-    #handleColumnSlotchange = ({ type, target: slot }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(slot instanceof HTMLSlotElement))
-            return;
-        const assigned = slot.assignedElements();
-        this.#observers.syncObservations(assigned);
-        // if (0 < assigned.length)
-        this.#renderColumns([]);
-    };
-    #renderColumns = (entries) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ mutation`);
-        if (!this.#compactToolbarItem) {
-            this.#compactToolbarItem = $(html `<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
-            CleanupRegistry.unregister(this, 'compact_toolbar');
-            CleanupRegistry.register(this, onoff('click', this.#handleMenuClick, this.#compactToolbarItem).on(), 'compact_toolbar');
-        }
-        this.#compactToolbarItem.innerHTML = `<label-view slot="label" system-image="dots-three"></label-view>`;
-        for (const node of this.#slots?.get('column')?.assignedElements({ flatten: true }) ?? []) {
-            if (!node.matches('[is=table-column]'))
-                continue;
-            const btn = $(html `<button type="button" tabindex="0">
-            <v-stack spacing="0" alignment="leading">
-              <label-view></label-view>
-              <label-view font="callout" foreground="secondary"></label-view>
-            </v-stack>
-          </button>`, '>1'), title = btn.querySelector('label-view:first-child') ?? undefined, subTitle = btn.querySelector('label-view:last-child') ?? undefined;
-            queryMorph(':not([slot])', html `<span>${node.textContent.trim()}</span>`, title, { removeIf: !node.textContent.trim() });
-            queryMorph(':not([slot])', html `<span>${node.ariaSort ?? ''}</span>`, subTitle, { removeIf: !(node.ariaSort ?? '') });
-            this.#compactToolbarItem.appendChild(btn);
-        }
-    };
-    #observers = new MutationObserverSet(this.#renderColumns);
-    #handleStyleChange = () => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ style`);
-        const target = this.#shadowRoot.querySelector('[part*=table-container]') ?? undefined;
-        if (!target)
-            return;
-        const style = self.getComputedStyle(target);
-        const adaptableTableStyle = style.getPropertyValue('--adaptable-table-style') || 'compact';
-        switch (adaptableTableStyle) {
-            case 'expanded':
-                if (this.#compactToolbarItem?.isConnected)
-                    this.#compactToolbarItem?.remove();
-                break;
-            default:
-                if (!this.#compactToolbarItem)
-                    break;
-                if (!this.#slots
-                    ?.get('column')
-                    ?.assignedElements()
-                    .filter((el) => el.matches(':is(button[is=table-column])')).length)
-                    break;
-                if (!this.#compactToolbarItem?.isConnected)
-                    this.insertAdjacentElement('beforeend', this.#compactToolbarItem);
-                break;
-        }
-    };
-    #handleMenuClick = ({ target }) => {
-        if (!(target instanceof HTMLElement))
-            return;
-        const btn = target.closest('button');
-        if (!btn)
-            return;
-        const siblings = [...(btn.parentNode?.querySelectorAll(':scope>button') ?? [])], index = siblings.indexOf(btn);
-        this.querySelector(`:scope>[slot=column]:nth-of-type(${index + 1})`)?.click();
-    };
-}
-_a = TableView;

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

@@ -1,42 +0,0 @@
-import { FormAssociatedBase } from '../internal/class/form-associated-base';
-declare const keyboardTypes: readonly ["decimal-pad", "number-pad", "default"];
-export type KeyboardType = (typeof keyboardTypes)[number];
-/**
- * @summary A control that displays an editable text area.
- *
- * @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
- *
- * @slot label
- * @slot {HTMLOptionElement[]} validity-options
- */
-export declare class TextField extends FormAssociatedBase {
-    #private;
-    static get observedAttributes(): string[];
-    static get template(): DocumentFragment;
-    constructor();
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-    get keyboardType(): KeyboardType;
-    get text(): string;
-    set text(v: string);
-    /**
-     * Form participation property
-     */
-    get name(): string;
-    get value(): string;
-    get valueAsNumber(): number | "";
-    get negativeNumbersAllowed(): boolean;
-    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 {
-        'text-field': TextField;
-    }
-}
-export {};