@mhmo91/schmancy 0.2.37 → 0.2.39

package/types/src/autocomplete/autocomplete.d.ts

@@ -1,120 +1,43 @@
-import SchmancyInput from '@schmancy/input/input';
-import SchmancyOption from '@schmancy/option/option';
-import type { SchmancyInputChangeEvent } from '..';
 export type SchmancyAutocompleteChangeEvent = CustomEvent<{
     value: string | string[];
 }>;
 declare const SchmancyAutocomplete_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 export default class SchmancyAutocomplete extends SchmancyAutocomplete_base {
-    /**
-     * Whether input is required for form validity.
-     */
     required: boolean;
-    /**
-     * Placeholder text for the input.
-     */
     placeholder: string;
-    /**
-     * Programmatic value of the autocomplete. Setting this
-     * after the element is rendered will now update the display.
-     */
     value: string;
-    /**
-     * Label for the input (floating label or similar).
-     */
     label: string;
     /**
-     * Max height of the dropdown options container.
+     * ⚠️ If you still want an explicit fallback for maximum dropdown height,
+     * you can keep this, but the `size()` middleware will already set a
+     * dynamic max-height based on viewport space.
      */
     maxHeight: string;
-    /**
-     * Whether multiple selections are allowed.
-     */
     multi: boolean;
-    /**
-     * A local property to store the *display* value (label text).
-     * This is separate from the raw `value`.
-     */
-    valueLabel: string;
+    /** Direct reference to the <input> inside <schmancy-input>. */
     inputRef: import("lit-html/directives/ref").Ref<HTMLInputElement>;
-    /**
-     * The main <ul> with id="options".
-     */
-    optionsContainer: HTMLUListElement;
-    /**
-     * The "no results found" <li> element.
-     */
-    empty: HTMLLIElement;
-    /**
-     * The SchmancyInput element (your visible text input).
-     */
-    input: SchmancyInput;
-    /**
-     * All the <schmancy-option> children assigned via the default slot.
-     */
-    options: SchmancyOption[];
+    private optionsContainer;
+    private empty;
+    private input;
+    private options;
     private readonly searchTerm$;
+    private startY;
     connectedCallback(): void;
-    /**
-     * firstUpdated (similar to componentDidMount in React).
-     * We can do an initial sync of the input's display text
-     * if a `value` was pre-set.
-     */
     firstUpdated(): void;
-    /**
-     * This will be invoked *any time* a reactive property changes
-     * after the first render. We specifically check if `value` changed,
-     * so we can update the display text (and selected states) if needed.
-     */
     protected updated(changedProps: Map<string | number | symbol, unknown>): void;
-    /**
-     * If user assigned new <schmancy-option> children, or changed them,
-     * we also want to ensure the "no results" is correct and that
-     * our input text is still in sync.
-     */
     private handleSlotChange;
-    /**
-     * For multi-select, ensure that any `value` strings
-     * are reflected in the child <schmancy-option>'s `selected` property.
-     * For single select, do similarly for the one matching option.
-     */
     private syncSelectionFromValue;
+    private updateInputValue;
     /**
-     * Takes the current `value` (and child <schmancy-option>s) and updates
-     * the displayed text in the schmancy-input. Called whenever we need
-     * to re-sync the visible input text to the actual data.
-     */
-    updateInputValue(): void;
-    /**
-     * Show the dropdown list, using Floating UI for positioning.
-     */
-    showOptions(): Promise<void>;
-    /**
-     * Hide the dropdown immediately (no animation).
-     */
-    hideOptions(): void;
-    /**
-     * Called whenever the user types in the schmancy-input.
-     */
-    handleInputChange(event: SchmancyInputChangeEvent): void;
-    /**
-     * Called whenever user clicks or taps an <schmancy-option>.
-     */
-    handleOptionClick(value: string): void;
-    /**
-     * Check validity of the selected value(s) to satisfy forms.
+     * MAIN: Show the dropdown, using Floating UI to size it
+     * to the available space, and at least as wide as the input.
      */
+    private showOptions;
+    private hideOptions;
+    private handleInputChange;
+    private handleOptionClick;
     checkValidity(): boolean;
-    /**
-     * Actually cause form validation checks if needed.
-     */
     reportValidity(): boolean;
-    /**
-     * Attempt to prevent iOS scrolling the background page
-     * while swiping within the options list.  (NB: This logic
-     * currently needs a bit more nuance to be robust.)
-     */
-    private startY;
     private handleTouchStart;
     private preventScroll;
     render(): import("lit-html").TemplateResult<1>;

package/types/src/chips/chip.d.ts

@@ -1,10 +1,8 @@
 import '@material/web/chips/chip-set.js';
 import '@material/web/chips/filter-chip.js';
-import { ChipSet } from '@material/web/chips/internal/chip-set';
 import { LitElement } from 'lit';
 declare const SchmancyChip_base: CustomElementConstructor & import("@mixins/index").Constructor<LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 export default class SchmancyChip extends SchmancyChip_base {
-    chipSet: ChipSet;
     label: string;
     value: string;
     selected: boolean;

package/types/src/date-range/date-range.d.ts

@@ -27,41 +27,40 @@ export default class SchmancyDateRange extends SchmancyDateRange_base {
             dateTo: string;
         };
         step: moment.unitOfTime.DurationConstructor;
-        selected?: boolean;
     }>;
     connectedCallback(): void;
     updated(changedProps: Map<string, unknown>): void;
     /**
-     * Returns the date format string based on the current type.
+     * Format strings for the internal <input> and for display text.
      */
     private getDateFormat;
-    /**
-     * Returns the display format for showing dates.
-     */
     private getDisplayFormat;
     /**
-     * Initializes the preset date ranges.
+     * Build up a list of preset ranges (yesterday, today, etc.).
      */
     private initPresetRanges;
     /**
-     * Updates the selectedDateRange state based on the current dateFrom and dateTo values.
+     * Based on the current dateFrom/dateTo, see if it matches a preset.
+     * Otherwise display a "Custom" range: "Jan 01, 2023 - Jan 07, 2023".
      */
     private updateSelectedDateRange;
     /**
-     * Updates the internal date range state and dispatches a change event.
+     * Update the internal date range and fire a 'change' event to notify external code.
      */
-    setDateRange(fromDate: string, toDate: string): void;
+    private setDateRange;
     /**
-     * Called when a preset is selected. Updates the date range and closes the menu.
+     * Called when user selects a preset from the list.
+     * Updates date range and closes the menu.
      */
-    handlePresetChange(presetLabel: string): void;
+    private handlePresetChange;
     /**
-     * Called when the user applies a manual date change.
+     * Applies the date range from the inputs.
+     * Closes the menu when done.
      */
-    handleDateRangeChange(): void;
+    private handleDateRangeChange;
     /**
-     * Shifts the current date range by multiplying the range length with the given factor.
-     * Use a negative factor to shift backward.
+     * Shift the current date range forward or backward by the same number of days.
+     * If the range is 7 days wide, shift 7 days, etc.
      */
     private shiftDateRange;
     render(): import("lit-html").TemplateResult<1>;

package/types/src/input/input.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValueMap } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'schmancy-input': SchmancyInput;
@@ -7,105 +7,81 @@ declare global {
 type EventDetails = {
     value: string;
 };
-export type SchmancyInputChangeEvent = CustomEvent<EventDetails>;
-declare const SchmancyInput_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 /**
- * `schmancy-input` – A custom input component.
+ * Custom events the component may emit:
+ * - 'input': on every keystroke
+ * - 'change': on native blur/change
+ * - 'enter': specifically when user presses Enter
  */
+export type SchmancyInputInputEvent = CustomEvent<EventDetails>;
+export type SchmancyInputChangeEvent = CustomEvent<EventDetails>;
+export type SchmancyInputEnterEvent = CustomEvent<EventDetails>;
+/** Common autocomplete/autofill hints. Extend as needed. */
+type AutoFill = 'on' | 'off' | 'name' | 'username' | 'email' | 'new-password' | 'current-password' | 'organization-title' | 'none';
+declare const SchmancyInput_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 export default class SchmancyInput extends SchmancyInput_base {
+    /** If user does NOT set `id`, we'll autogenerate one. */
+    static _idCounter: number;
+    id: string;
     /**
-     * The label of the control.
-     * @attr
-     * @type {string}
-     * @default ''
+     * The label for the control. If populated, we render a `<label for="...">`.
+     * If empty, we add an `aria-label` to the <input> for better screenreader support.
      */
     label: string;
     /**
-     * The type of the control.
-     * @attr
-     * @default 'text'
+     * The type of input. (e.g. 'text', 'password', 'email', etc.)
      */
     type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color' | 'file';
-    clickable: boolean;
     /**
-     * The name of the control.
-     * @attr
-     * @default 'name_' + Date.now()
+     * Name attribute (for form submissions). By default, a unique fallback.
      */
     name: string;
-    /**
-     * The placeholder of the control.
-     * @attr
-     * @default ''
-     */
     placeholder: string;
-    /**
-     * The value of the control.
-     * @attr
-     * @default ''
-     */
+    /** Current value of the input. */
     value: string;
-    /**
-     * The pattern attribute of the control.
-     * @attr
-     */
+    /** Pattern validation attribute. */
     pattern?: string;
+    /** Whether the control is required for form validation. */
     required: boolean;
+    /** Whether the control is disabled. */
     disabled: boolean;
+    /** Whether the input is read-only. */
     readonly: boolean;
+    /** If true, we visually show a pointer cursor even if readOnly. */
+    clickable: boolean;
+    /** Whether browser spellcheck is enabled. */
     spellcheck: boolean;
-    align: 'left' | 'center' | 'right';
     /**
-     * The inputmode attribute of the control.
-     * @attr
-     * @default undefined
+     * Text alignment within the input.
+     * - 'left' | 'center' | 'right'
      */
+    align: 'left' | 'center' | 'right';
+    /** inputmode attribute (affects on-screen keyboards in mobile). */
     inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
-    /**
-     * The minlength attribute of the control.
-     * @attr
-     */
     minlength?: number;
-    /**
-     * The maxlength attribute of the control.
-     * @attr
-     */
     maxlength?: number;
-    /**
-     * The min attribute of the control.
-     * @attr
-     */
     min?: string;
-    /**
-     * The max attribute of the control.
-     * @attr
-     */
     max?: string;
-    /**
-     * The step attribute of the control.
-     * @attr
-     */
     step?: number;
-    /**
-     * The autofocus attribute of the control.
-     * @attr
-     * @default false
-     */
+    /** If true, auto-focus this input on first render. */
     autofocus: boolean;
-    /**
-     * The autocomplete attribute of the control.
-     * @attr
-     */
+    /** Autocomplete/autofill hints. */
     autocomplete: AutoFill;
     /**
-     * tabIndex for focusing by tab key.
+     * tabIndex for focusing by tab key. Typically 0 or -1.
      */
     tabIndex: number;
+    /**
+     * A small hint text or error message to display under the input.
+     */
     hint?: string;
+    /**
+     * If true, we style the input as an error state, and possibly display
+     * the hint as an error message.
+     */
     error: boolean;
-    inputElement: HTMLInputElement;
-    inputRef: import("lit-html/directives/ref").Ref<HTMLInputElement>;
-    /** Form-associated custom elements support. */
+    private inputElement;
+    private inputRef;
     static formAssociated: boolean;
     protected static shadowRootOptions: {
         delegatesFocus: boolean;
@@ -115,35 +91,39 @@ export default class SchmancyInput extends SchmancyInput_base {
     };
     private internals?;
     constructor();
-    get form(): HTMLFormElement;
     /**
-     * (Optional) Whenever value changes, sync with form internals for
-     * form submission (if you're using form-associated custom elements).
+     * If user did not provide an ID, auto-generate one so <label for="...">
+     * and various aria-* attributes can reference it.
      */
+    protected willUpdate(changedProps: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /** The form this element is associated with, if any. */
+    get form(): HTMLFormElement;
     protected updated(changedProps: Map<string, unknown>): void;
-    /** Checks for validity of the control and shows the browser message if it's invalid. */
-    reportValidity(): boolean;
-    /** Checks for validity of the control and emits the invalid event if it is invalid. */
+    /**
+     * Native form methods:
+     * - checkValidity()
+     * - reportValidity()
+     * - setCustomValidity()
+     */
     checkValidity(): boolean;
-    /** Sets a custom validity message. */
+    reportValidity(): boolean;
     setCustomValidity(message: string): void;
     firstUpdated(): void;
     /** Selects all text within the input. */
     select(): void;
-    /** Returns the internal validity state object. */
+    /** Returns the native validity state of the inner <input>. */
     getValidity(): ValidityState | undefined;
     /**
-     * Override focus so that focusing <schmancy-input> actually focuses
-     * the internal <input>.
+     * Override to forward focus to the internal <input>.
+     * Also dispatch a 'focus' event for external listeners.
      */
     focus(options?: FocusOptions): void;
     /**
-     * Same with click; bubble a click out if needed, but delegate to internal input.
+     * Override to forward clicks to the internal <input>.
+     * Also dispatch a 'click' event for external listeners.
      */
     click(): void;
-    /**
-     * Same with blur; bubble the event.
-     */
+    /** Forward blur to the internal <input>. */
     blur(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }

package/types/src/layout/flex/flex.d.ts

@@ -2,10 +2,33 @@ import Layout from '../layout/layout';
 export declare class SchmancyFlex extends Layout {
     static styles: any[];
     layout: boolean;
+    /**
+     * The flex direction property:
+     *  - "row" | "row-reverse" | "col" | "col-reverse"
+     */
     flow: 'row' | 'row-reverse' | 'col' | 'col-reverse';
+    /**
+     * The flex-wrap property:
+     *  - "wrap" | "nowrap" | "wrap-reverse"
+     */
     wrap: 'wrap' | 'nowrap' | 'wrap-reverse';
+    /**
+     * Align-items property:
+     *  - "start" (flex-start), "center", "end" (flex-end), "stretch", "baseline"
+     */
     align: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-    justify: 'start' | 'center' | 'end' | 'stretch' | 'between';
+    /**
+     * Justify-content property:
+     *  - "start", "center", "end", "between"
+     *  (Note: "stretch" doesn't exist as a Tailwind justify- class;
+     *  for horizontal stretching, you typically rely on width or gap.)
+     */
+    justify: 'start' | 'center' | 'end' | 'between';
+    /**
+     * Gap sizes:
+     *  - "none" (0), "sm" (2), "md" (4), "lg" (8)
+     *  (Feel free to add more if your Tailwind config has them.)
+     */
     gap: 'none' | 'sm' | 'md' | 'lg';
     render(): import("lit-html").TemplateResult<1>;
 }

package/types/src/option/option.d.ts

@@ -7,8 +7,8 @@ export default class SchmancyOption extends SchmancyOption_base {
     value: string;
     label: string | undefined;
     selected: boolean;
-    handleOptionClick(option: string): void;
-    protected render(): unknown;
+    private handleOptionClick;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/types/src/select/select.d.ts

@@ -1,28 +1,50 @@
-import SchmancyOption from '@schmancy/option/option';
 export type SchmancySelectChangeEvent = CustomEvent<{
     value: string | string[];
 }>;
 declare const SchmancySelect_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
-export default class SchmancySelect extends SchmancySelect_base {
+export declare class SchmancySelect extends SchmancySelect_base {
     required: boolean;
     placeholder: string;
     value: string;
+    selectedValues: string[];
     multi: boolean;
     label: string;
-    valueLabel: string;
-    ul: HTMLUListElement;
-    overlay: HTMLElement;
-    options: SchmancyOption[];
+    private isOpen;
+    private valueLabel;
+    private ul;
+    private options;
+    private cleanupPositioner?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     firstUpdated(): void;
-    updateDisplayLabel(): void;
-    handleOptionClick(value: string): void;
-    showOptions(): Promise<void>;
-    hideOptions(): void;
+    /**
+     * Whenever new <schmancy-option> children get slotted in,
+     * or whenever properties change, ensure the correct .selected states
+     * and display text are applied.
+     */
+    private syncSelection;
+    /**
+     * We can also set up any ARIA attributes here.
+     * Note that we’re toggling `aria-selected` for screen readers,
+     * but the highlight in CSS is triggered by the option’s `selected` property.
+     */
+    private setupOptionsAccessibility;
+    /**
+     * Use @floating-ui/dom to position the <ul> under the "trigger" input.
+     */
+    private positionDropdown;
+    /**
+     * Keydown logic for opening/closing the dropdown and navigating options.
+     */
+    private handleKeyDown;
+    private focusOption;
+    private openDropdown;
+    private closeDropdown;
+    /**
+     * Main method for toggling or setting selected items.
+     */
+    private handleOptionSelect;
+    private dispatchChange;
     render(): import("lit-html").TemplateResult<1>;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-select': SchmancySelect;
-    }
-}
 export {};