@vollowx/seele 0.13.5 → 0.13.7

package/src/base/select.js

@@ -1,4 +1,5 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+var _a;
+import { __decorate } from "tslib";
 import { LitElement, isServer, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { InternalsAttached } from './mixins/internals-attached.js';
@@ -16,12 +17,15 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
  *
  * TODO: Render multiple values
  * FIXME: `aria-expanded` set twice by both Lit and Menu
- */ export class Select extends Base {
+ */
+export class Select extends Base {
+    static { _a = VALUE; }
     get value() {
         return this[VALUE];
     }
     set value(value) {
-        if (isServer) return;
+        if (isServer)
+            return;
         this.lastUserSetValue = value;
         this.select(value);
     }
@@ -40,76 +44,88 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
         this.selectIndex(index);
     }
     get selectedOptions() {
-        return (this.getSelectedOptions() ?? []).map(([option])=>option);
+        return (this.getSelectedOptions() ?? []).map(([option]) => option);
     }
     render() {
-        return html`${this.renderField()}${this.renderMenu()}`;
+        return html `${this.renderField()}${this.renderMenu()}`;
     }
     /**
-   * Example content:
-   *
-   * ```html
-   * <your-field
-   *   id="field"
-   *   part="field"
-   *   @click=${this.toggle}
-   *   @keydown=${this.handleFieldKeydown}
-   *   tabindex=${this.disabled ? '-1' : '0'}
-   *   role="combobox"
-   *   aria-haspopup="listbox"
-   *   aria-expanded=${this.open}
-   *   aria-controls="menu"
-   *   aria-disabled=${this.disabled}
-   *   aria-required=${this.required}
-   * >
-   *   ${this.renderFieldContent()}
-   * </your-field>
-   * ```
-   */ renderField() {
-        return html``;
+     * Example content:
+     *
+     * ```html
+     * <your-field
+     *   id="field"
+     *   part="field"
+     *   @click=${this.toggle}
+     *   @keydown=${this.handleFieldKeydown}
+     *   tabindex=${this.disabled ? '-1' : '0'}
+     *   role="combobox"
+     *   aria-haspopup="listbox"
+     *   aria-expanded=${this.open}
+     *   aria-controls="menu"
+     *   aria-disabled=${this.disabled}
+     *   aria-required=${this.required}
+     * >
+     *   ${this.renderFieldContent()}
+     * </your-field>
+     * ```
+     */
+    renderField() {
+        return html ``;
     }
     /**
-   * Example content:
-   *
-   * ```html
-   * <your-menu
-   *   id="menu"
-   *   for="field"
-   *   type="listbox"
-   *   data-tabindex="-1"
-   *   ?quick="${this.quick}"
-   *   offset="${this.offset}"
-   *   align="${this.align}"
-   *   align-strategy="${this.alignStrategy}"
-   *   keep-open-blur
-   *   no-focus-control
-   *   ?open="${this.open}"
-   *   @item-focus="${this.handleMenuItemFocus}"
-   *   @select="${this.handleMenuSelect}"
-   * >
-   *   <slot part="items" @slotchange=${this.handleSlotChange}></slot>
-   * </your-menu>
-   * ```
-   */ renderMenu() {
-        return html``;
+     * Example content:
+     *
+     * ```html
+     * <your-menu
+     *   id="menu"
+     *   for="field"
+     *   type="listbox"
+     *   data-tabindex="-1"
+     *   ?quick="${this.quick}"
+     *   offset="${this.offset}"
+     *   align="${this.align}"
+     *   align-strategy="${this.alignStrategy}"
+     *   keep-open-blur
+     *   no-focus-control
+     *   ?open="${this.open}"
+     *   @item-focus="${this.handleMenuItemFocus}"
+     *   @select="${this.handleMenuSelect}"
+     * >
+     *   <slot part="items" @slotchange=${this.handleSlotChange}></slot>
+     * </your-menu>
+     * ```
+     */
+    renderMenu() {
+        return html ``;
     }
     renderFieldContent() {
-        return html`<span part="value">${this.displayText || html` `}</span>`;
+        return html `<span part="value">${this.displayText || html ` `}</span>`;
     }
-    constructor(){
-        super(), // Form-related
-        this.required = false, // Passed to field
-        this.error = false, // Passed to menu
-        this.quick = false, this.offset = 0, this.align = 'bottom-start', this.alignStrategy = 'absolute', this.open = false, /**
-   * Text to display in the field. Only set for SSR.
-   */ this.displayText = '', this[VALUE] = '', this.lastUserSetValue = null, this.lastUserSetSelectedIndex = null, this.lastSelectedOption = null, this.lastSelectedOptionRecords = [], this.#dispatchChangeEvent = ()=>{
-            this.dispatchEvent(new Event('input', {
-                bubbles: true,
-                composed: true
-            }));
-            this.dispatchEvent(new Event('change', {
-                bubbles: true
-            }));
+    constructor() {
+        super();
+        // Form-related
+        this.required = false;
+        // Passed to field
+        this.error = false;
+        // Passed to menu
+        this.quick = false;
+        this.offset = 0;
+        this.align = 'bottom-start';
+        this.alignStrategy = 'absolute';
+        this.open = false;
+        /**
+         * Text to display in the field. Only set for SSR.
+         */
+        this.displayText = '';
+        this[_a] = '';
+        this.lastUserSetValue = null;
+        this.lastUserSetSelectedIndex = null;
+        this.lastSelectedOption = null;
+        this.lastSelectedOptionRecords = [];
+        this.#dispatchChangeEvent = () => {
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            this.dispatchEvent(new Event('change', { bubbles: true }));
         };
         if (!isServer) {
             this.addEventListener('focusout', this._handleFocusOut);
@@ -122,8 +138,10 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
         }
         // Case for when the DOM is streaming, there are no children, and a child
         // has [selected] set on it, we need to wait for DOM to render something.
-        if (!this.lastSelectedOptionRecords.length && !isServer && !this.$options.length) {
-            setTimeout(()=>{
+        if (!this.lastSelectedOptionRecords.length &&
+            !isServer &&
+            !this.$options.length) {
+            setTimeout(() => {
                 this.updateValueAndDisplayText();
             }, 0);
         }
@@ -140,18 +158,21 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
         if (changed.has('open')) {
             if (this.open) {
                 this.#focusSelectedItemOrFirst();
-            } else {
+            }
+            else {
                 this.$field.setAttribute('aria-activedescendant', '');
             }
         }
     }
     /**
-   * TODO: Handle clear action
-   */ _handleFieldKeydown(event) {
-        if (this.disabled) return;
+     * TODO: Handle clear action
+     */
+    _handleFieldKeydown(event) {
+        if (this.disabled)
+            return;
         const eventClone = new KeyboardEvent(event.type, event);
-        eventClone.preventDefault = ()=>event.preventDefault();
-        eventClone.stopPropagation = ()=>event.stopPropagation();
+        eventClone.preventDefault = () => event.preventDefault();
+        eventClone.stopPropagation = () => event.stopPropagation();
         this.$menu.$menu.dispatchEvent(eventClone);
     }
     _handleMenuSelect(event) {
@@ -177,7 +198,7 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
     }
     selectItem(item) {
         const selectedOptions = this.getSelectedOptions() ?? [];
-        selectedOptions.forEach(([option])=>{
+        selectedOptions.forEach(([option]) => {
             if (item !== option) {
                 option.selected = false;
             }
@@ -188,9 +209,12 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
     initUserSelection() {
         if (this.lastUserSetValue && !this.lastSelectedOptionRecords.length) {
             this.select(this.lastUserSetValue);
-        } else if (this.lastUserSetSelectedIndex !== null && !this.lastSelectedOptionRecords.length) {
+        }
+        else if (this.lastUserSetSelectedIndex !== null &&
+            !this.lastSelectedOptionRecords.length) {
             this.selectIndex(this.lastUserSetSelectedIndex);
-        } else {
+        }
+        else {
             this.updateValueAndDisplayText();
         }
     }
@@ -203,7 +227,8 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
             this.lastSelectedOption = firstSelectedOption;
             this[VALUE] = firstSelectedOption.value;
             this.displayText = firstSelectedOption.displayText;
-        } else {
+        }
+        else {
             changed = this.lastSelectedOption !== null;
             this.lastSelectedOption = null;
             this[VALUE] = '';
@@ -218,12 +243,9 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
     getSelectedOptions() {
         const items = this.$options;
         const records = [];
-        items.forEach((item, index)=>{
+        items.forEach((item, index) => {
             if (item.selected) {
-                records.push([
-                    item,
-                    index
-                ]);
+                records.push([item, index]);
             }
         });
         this.lastSelectedOptionRecords = records;
@@ -235,7 +257,8 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
         if (selectedOptions && selectedOptions.length > 0) {
             const [item] = selectedOptions[0];
             this.$menu.focusItem(item);
-        } else {
+        }
+        else {
             this.$menu.focusFirstItem();
         }
     }
@@ -246,7 +269,7 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
         this.value = state;
     }
     select(value) {
-        const item = this.$options.find((option)=>option.value === value);
+        const item = this.$options.find((option) => option.value === value);
         if (item) {
             this.selectItem(item);
         }
@@ -258,71 +281,50 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
         }
     }
     reset() {
-        for (const option of this.$options){
+        for (const option of this.$options) {
             option.selected = option.hasAttribute('selected');
         }
         this.updateValueAndDisplayText();
     }
     toggle() {
-        if (this.disabled) return;
+        if (this.disabled)
+            return;
         this.open = !this.open;
     }
 }
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], Select.prototype, "required", void 0);
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Select.prototype, "error", void 0);
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Select.prototype, "quick", void 0);
-_ts_decorate([
-    property({
-        type: Number
-    })
+__decorate([
+    property({ type: Number })
 ], Select.prototype, "offset", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], Select.prototype, "align", void 0);
-_ts_decorate([
-    property({
-        type: String,
-        reflect: true,
-        attribute: 'align-strategy'
-    })
+__decorate([
+    property({ type: String, reflect: true, attribute: 'align-strategy' })
 ], Select.prototype, "alignStrategy", void 0);
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Select.prototype, "open", void 0);
-_ts_decorate([
-    property({
-        attribute: 'display-text'
-    })
+__decorate([
+    property({ attribute: 'display-text' })
 ], Select.prototype, "displayText", void 0);
-_ts_decorate([
+__decorate([
     property()
 ], Select.prototype, "value", null);
-_ts_decorate([
-    property({
-        type: Number,
-        attribute: 'selected-index'
-    })
+__decorate([
+    property({ type: Number, attribute: 'selected-index' })
 ], Select.prototype, "selectedIndex", null);
-_ts_decorate([
+__decorate([
     query('[part="field"]')
 ], Select.prototype, "$field", void 0);
-_ts_decorate([
+__decorate([
     query('[part="menu"]')
 ], Select.prototype, "$menu", void 0);

package/src/base/slider.d.ts

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright 2018-2023 Google, Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, PropertyValues } from 'lit';
+declare const Base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/focus-delegated.js").FocusDelegatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+export declare class Slider extends Base {
+    min: number;
+    max: number;
+    value?: number;
+    valueStart?: number;
+    valueEnd?: number;
+    valueLabel: string;
+    valueLabelStart: string;
+    valueLabelEnd: string;
+    ariaLabelStart: string;
+    ariaValueTextStart: string;
+    ariaLabelEnd: string;
+    ariaValueTextEnd: string;
+    step: number;
+    ticks: boolean;
+    labeled: boolean;
+    range: boolean;
+    get nameStart(): string;
+    set nameStart(name: string);
+    get nameEnd(): string;
+    set nameEnd(name: string);
+    protected readonly inputStart: HTMLInputElement | null;
+    protected readonly inputEnd: HTMLInputElement | null;
+    protected readonly handleStart: HTMLDivElement | null;
+    protected readonly handleEnd: HTMLDivElement | null;
+    protected startOnTop: boolean;
+    protected handlesOverlapping: boolean;
+    protected renderValueStart?: number;
+    protected renderValueEnd?: number;
+    protected get renderAriaLabelStart(): string;
+    protected get renderAriaValueTextStart(): string;
+    protected get renderAriaLabelEnd(): string;
+    protected get renderAriaValueTextEnd(): string;
+    protected renderInput({ start, value, ariaLabel, ariaValueText, ariaMin, ariaMax, }: {
+        start: boolean;
+        value?: number;
+        ariaLabel: string;
+        ariaValueText: string;
+        ariaMin: number;
+        ariaMax: number;
+    }): import("lit-html").TemplateResult<1>;
+    private isRedispatchingEvent;
+    private action?;
+    ariaLabel: string | null;
+    ariaValueText: string | null;
+    constructor();
+    focus(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    protected handleFocus(event: Event): void;
+    protected handleKeydown(event: KeyboardEvent): void;
+    protected handleKeyup(event: KeyboardEvent): void;
+    protected handleDown(event: PointerEvent): void;
+    protected handleUp(event: PointerEvent): Promise<void>;
+    protected handleInput(event: InputEvent): void;
+    protected handleChange(event: Event): void;
+    private startAction;
+    private finishAction;
+    private updateOnTop;
+    private needsClamping;
+    private isActionFlipped;
+    private flipAction;
+    private clampAction;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | Array<[string, string]> | null): void;
+    protected updateFormValue(): void;
+}
+export {};