@mhmo91/schmancy 0.2.118 → 0.2.121

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

@@ -0,0 +1,250 @@
+import { LitElement, PropertyValueMap } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sch-input': SchmancyInputV2;
+    }
+}
+type EventDetails = {
+    value: string;
+};
+/**
+ * Custom events the component may emit:
+ * - 'input': on every keystroke
+ * - 'change': on native blur/change
+ * - 'enter': specifically when user presses Enter
+ */
+export type SchmancyInputInputEventV2 = CustomEvent<EventDetails>;
+export type SchmancyInputChangeEventV2 = CustomEvent<EventDetails>;
+export type SchmancyInputEnterEventV2 = CustomEvent<EventDetails>;
+/**
+ * Size variants for the input.
+ * - sm: Small, compact input (40px height)
+ * - md: Medium input (50px height, default)
+ * - lg: Large, spacious input (60px height)
+ */
+export type InputSize = 'sm' | 'md' | 'lg';
+declare const SchmancyInputV2_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>;
+/**
+ * Enhanced version of the SchmancyInput component with improved form integration
+ * and compatibility with legacy API.
+ *
+ * This component uses the native form association API and maintains parity with
+ * native input behaviors while providing a stylish, accessible interface.
+ */
+export default class SchmancyInputV2 extends SchmancyInputV2_base {
+    /** Auto-incrementing counter for generating unique IDs */
+    static _idCounter: number;
+    id: string;
+    /**
+     * 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 input. (e.g. 'text', 'password', 'email', etc.)
+     */
+    type: HTMLInputElement['type'];
+    /**
+     * Name attribute (for form submissions). By default, a unique fallback.
+     */
+    name: string;
+    placeholder: string;
+    /** Current value of the input. */
+    value: string;
+    /** 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;
+    /**
+     * 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';
+    minlength?: number;
+    maxlength?: number;
+    min?: string;
+    max?: string;
+    step?: number;
+    /** If true, auto-focus this input on first render. */
+    autofocus: boolean;
+    /** Autocomplete/autofill hints. */
+    autocomplete: AutoFill;
+    /**
+     * 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;
+    /**
+     * The size of the input.
+     * - 'sm': Small, compact size
+     * - 'md': Medium size (default)
+     * - 'lg': Large size
+     */
+    size: InputSize;
+    /**
+     * Controls when validation should show.
+     * - 'always' - Always show validation
+     * - 'touched' - Only show after field has been focused and then blurred
+     * - 'dirty' - Only show after value has changed
+     * - 'submitted' - Only show after form submission
+     */
+    validateOn: 'always' | 'touched' | 'dirty' | 'submitted';
+    /**
+     * For datalist support
+     */
+    list?: string;
+    /**
+     * The validation message to display (mimics native input.validationMessage)
+     */
+    validationMessage: string;
+    private inputElement;
+    private inputRef;
+    /**
+     * For integration with browser's autofill support
+     */
+    private isAutofilled;
+    /**
+     * Track user interaction state for validation
+     */
+    private touched;
+    private dirty;
+    private submitted;
+    /**
+     * Store the default value for reset behavior
+     */
+    private defaultValue;
+    static formAssociated: boolean;
+    protected static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    private internals?;
+    private formResetObserver?;
+    constructor();
+    /**
+     * 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;
+    /**
+     * Connect to the closest form element and set up form integration
+     */
+    connectedCallback(): void;
+    /**
+     * Set up form integration with ElementInternals
+     */
+    private setupFormIntegration;
+    /**
+     * Set up external label association for native HTML label support
+     */
+    private setupExternalLabelAssociation;
+    disconnectedCallback(): void;
+    /**
+     * Reset the input to its default state
+     */
+    private resetToDefault;
+    /**
+     * Determines if validation errors should be shown based on current state
+     * and validation strategy
+     */
+    private shouldShowValidation;
+    /**
+     * Update validity state based on current error state
+     */
+    private updateValidityState;
+    /**
+     * Validate input based on required, pattern, etc.
+     * This mimics native validation behavior
+     */
+    private validateInput;
+    /**
+     * Check validity without showing validation UI
+     */
+    checkValidity(): boolean;
+    /**
+     * Show validation UI and check validity
+     */
+    reportValidity(): boolean;
+    /**
+     * Set a custom validation error message
+     */
+    setCustomValidity(message: string): void;
+    firstUpdated(): void;
+    /**
+     * Set up input event handling for value changes
+     */
+    private setupInputEvents;
+    /**
+     * Set up focus/blur event handling
+     */
+    private setupFocusBlurEvents;
+    /**
+     * Set up autofill detection
+     */
+    private setupAutofillDetection;
+    /**
+     * Set up enter key event handling
+     */
+    private setupEnterKeyEvents;
+    /** Selects all text within the input. */
+    select(): void;
+    /** Returns the native validity state of the inner <input>. */
+    getValidity(): ValidityState | undefined;
+    /**
+     * Sets the selection range. Mirrors native input.setSelectionRange
+     */
+    setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void;
+    /**
+     * Returns the selected text within the input (start position)
+     */
+    get selectionStart(): number | null;
+    /**
+     * Returns the selected text within the input (end position)
+     */
+    get selectionEnd(): number | null;
+    /**
+     * Returns the direction of selection
+     */
+    get selectionDirection(): 'forward' | 'backward' | 'none' | null;
+    /**
+     * Sets the range of text to be selected.
+     */
+    setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
+    /**
+     * Override to forward focus to the internal <input>.
+     * Also dispatch a 'focus' event for external listeners.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Override to forward clicks to the internal <input>.
+     * Also dispatch a 'click' event for external listeners.
+     */
+    click(): void;
+    /** Forward blur to the internal <input>. */
+    blur(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

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

@@ -13,6 +13,7 @@ export declare class SchmancySelect extends SchmancySelect_base {
     multi: boolean;
     label: string;
     hint: string;
+    validateOn: 'always' | 'touched' | 'dirty' | 'submitted';
     private isOpen;
     private valueLabel;
     private isValid;
@@ -21,13 +22,21 @@ export declare class SchmancySelect extends SchmancySelect_base {
     private inputRef;
     private options;
     private cleanupPositioner?;
-    private _userInteracted;
+    _userInteracted: boolean;
+    private _touched;
+    private _dirty;
+    private _submitted;
     constructor();
     get form(): HTMLFormElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
     updated(changedProps: PropertyValues): void;
+    /**
+     * Determines if validation errors should be shown based on current state
+     * and validation strategy
+     */
+    private shouldShowValidation;
     private syncSelection;
     private setupOptionsAccessibility;
     private positionDropdown;

package/types/src/steps/index.d.ts

@@ -0,0 +1,3 @@
+export * from './schmancy-step';
+export * from './schmancy-steps-container';
+export * from './steps.context';

package/types/src/steps/schmancy-step.d.ts

@@ -0,0 +1,52 @@
+declare const SchmancyStep_base: CustomElementConstructor & import("../../mixins").Constructor<import("lit").LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
+export declare class SchmancyStep extends SchmancyStep_base {
+    /**
+     * The step's position (1-based). This is used to compare against
+     * the container's current step to decide if it's "complete",
+     * "current", or "upcoming".
+     */
+    position: number;
+    title: string;
+    description: string;
+    completed: boolean;
+    /**
+     * NEW: Lock API to disable users from going back.
+     * When set to true, clicking on a previous (completed) step is ignored.
+     */
+    lockBack: boolean;
+    /**
+     * Consume the shared StepsController from context.
+     */
+    private steps;
+    /**
+     * Local reactive copy of the container's current step number.
+     */
+    private currentStep;
+    /**
+     * Keep a reference to our subscription so we can unsubscribe cleanly.
+     */
+    private subscription?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Update the host element's flex properties based on active state
+     */
+    private updateFlexProperties;
+    /**
+     * Compute visual status for styling purposes. Note that if a step is explicitly
+     * marked as completed, it always appears as complete even if it's active.
+     */
+    get status(): 'complete' | 'current' | 'upcoming';
+    /**
+     * Click handler to allow navigation between completed (or active) steps.
+     * With lockBack enabled, clicking on a previous step is ignored.
+     */
+    private _onStepClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-step': SchmancyStep;
+    }
+}
+export {};

package/types/src/steps/schmancy-steps-container.d.ts

@@ -0,0 +1,17 @@
+import { StepsController } from './steps.context';
+declare const SchmancyStepsContainer_base: CustomElementConstructor & import("../../mixins").Constructor<import("lit").LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
+export declare class SchmancyStepsContainer extends SchmancyStepsContainer_base {
+    private controller;
+    stepsController: StepsController;
+    set currentStep(value: number);
+    get currentStep(): number;
+    private _currentStep;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-steps-container': SchmancyStepsContainer;
+    }
+}
+export {};

package/types/src/steps/steps.context.d.ts

@@ -0,0 +1,12 @@
+export declare class StepsController {
+    private _currentStep;
+    get currentStep$(): import("rxjs").Observable<number>;
+    get currentStep(): number;
+    setStep(step: number): void;
+}
+/**
+ * The actual context object. We provide/consume this in the container and steps.
+ */
+export declare const stepsContext: {
+    __context__: StepsController;
+};

package/types/src/store/action-creator.d.ts

@@ -0,0 +1,8 @@
+export type Action<T = any> = {
+    type: string;
+    payload?: T;
+};
+export type ActionCreator<P = void, R = void> = P extends void ? () => R : (payload: P) => R;
+export type ActionCreatorMap<T> = {
+    [K in keyof T]: T[K] extends (...args: infer A) => infer R ? (...args: A) => R : never;
+};

package/types/src/store/clear.d.ts

@@ -0,0 +1 @@
+export default function contextClear(): void;

package/types/src/store/context-collection.d.ts

@@ -0,0 +1,74 @@
+import { BehaviorSubject } from 'rxjs';
+import { ICollectionStore, StorageType, StoreError } from './types';
+/**
+ * Enhanced collection store with better TypeScript support
+ */
+export default class SchmancyCollectionStore<V = any> implements ICollectionStore<V> {
+    private storageType;
+    private key;
+    static type: string;
+    private static instances;
+    private _ready;
+    private _destroy$;
+    $: BehaviorSubject<Map<string, V>>;
+    error$: BehaviorSubject<StoreError<unknown>>;
+    readonly defaultValue: Map<string, V>;
+    private storage;
+    /**
+     * Get ready state
+     */
+    get ready(): boolean;
+    /**
+     * Set ready state
+     */
+    set ready(value: boolean);
+    /**
+     * Private constructor to enforce singleton pattern
+     */
+    private constructor();
+    /**
+     * Static method to get or create an instance with proper typing
+     */
+    static getInstance<V = any>(storage: StorageType, key: string, defaultValue: Map<string, V>): SchmancyCollectionStore<V>;
+    /**
+     * Get the current value
+     */
+    get value(): Map<string, V>;
+    /**
+     * Set a value in the collection with proper typing
+     */
+    set<T = V>(key: string, value: T): void;
+    /**
+     * Delete a value from the collection
+     */
+    delete(key: string): void;
+    /**
+     * Clear the collection
+     */
+    clear(): void;
+    replace(newValue: Map<string, V>): void;
+    /**
+     * Update the state with error handling
+     */
+    private updateState;
+    /**
+     * Initialize from persistent storage
+     */
+    private initializeFromStorage;
+    /**
+     * Load data from IndexedDB with better typing
+     */
+    private loadFromIndexedDB;
+    /**
+     * Set up persistence to storage
+     */
+    private setupPersistence;
+    /**
+     * Setup development tools for debugging
+     */
+    private setupDevTools;
+    /**
+     * Clean up resources
+     */
+    destroy(): void;
+}

package/types/src/store/context-create.d.ts

@@ -0,0 +1,8 @@
+import { ICollectionStore, IStore, StorageType } from './types';
+import { SchmancyStoreObject } from './context-object';
+import SchmancyCollectionStore from './context-collection';
+/**
+ * Creates a context for managing state with better type safety
+ */
+export declare function createContext<T extends Record<string, any>>(initialData: T, storage: StorageType, key: string): IStore<T> & SchmancyStoreObject<T>;
+export declare function createContext<V>(initialData: Map<string, V>, storage: StorageType, key: string): ICollectionStore<V> & SchmancyCollectionStore<V>;

package/types/src/store/context-object.d.ts

@@ -0,0 +1,69 @@
+import { BehaviorSubject } from 'rxjs';
+import { IStore, StorageType, StoreError } from './types';
+/**
+ * Enhanced store object with better TypeScript support
+ */
+export declare class SchmancyStoreObject<T extends Record<string, any>> implements IStore<T> {
+    private storageType;
+    private key;
+    static type: string;
+    private static instances;
+    private _ready;
+    private _destroy$;
+    $: BehaviorSubject<T>;
+    error$: BehaviorSubject<StoreError<unknown>>;
+    readonly defaultValue: T;
+    private storage;
+    /**
+     * Get store ready state
+     */
+    get ready(): boolean;
+    /**
+     * Set store ready state
+     */
+    set ready(value: boolean);
+    /**
+     * Private constructor to enforce singleton pattern
+     */
+    private constructor();
+    /**
+     * Static method to get or create an instance with strong typing
+     */
+    static getInstance<T extends Record<string, any>>(storage: StorageType, key: string, defaultValue: T): SchmancyStoreObject<T>;
+    /**
+     * Get the current value from the store
+     */
+    get value(): T;
+    /**
+     * Set state with proper typing
+     */
+    set(value: Partial<T>, merge?: boolean): void;
+    /**
+     * Reset the store to its default value
+     */
+    clear(): void;
+    /**
+     * Replace the store with a new value
+     */
+    replace(newValue: T): void;
+    /**
+     * Delete a specific key from the store with type checking
+     */
+    delete<K extends keyof T>(key: K): void;
+    /**
+     * Update the state with proper error handling
+     */
+    private updateState;
+    /**
+     * Initialize the store from persistent storage
+     */
+    private initializeFromStorage;
+    /**
+     * Setup development tools for debugging
+     */
+    private setupDevTools;
+    /**
+     * Clean up resources
+     */
+    destroy(): void;
+}

package/types/src/store/filter-directive.d.ts

@@ -0,0 +1,32 @@
+/** Supported comparison operators. */
+type ComparisonOperator = '==' | '!=' | '>' | '<' | '>=' | '<=' | 'includes' | 'notIncludes' | 'startsWith' | 'endsWith' | 'in' | 'notIn' | 'any';
+/**
+ * Query condition which can be either a tuple:
+ * [field, operator, expected]
+ * or an object:
+ * { key, operator, value }
+ */
+export type QueryCondition = [field: string, op: ComparisonOperator, expected: unknown, strict?: boolean] | {
+    key: string;
+    operator: ComparisonOperator;
+    value: unknown;
+    strict?: boolean;
+};
+/**
+ * Filter a Map of items given an array of query conditions.
+ * For each query condition:
+ * - If the expected value is empty/null/undefined, it is treated as a match.
+ * - For non-fuzzy operators, the condition must strictly match.
+ * - For the "any" operator, a fuzzy similarity score is computed.
+ *   Items with a fuzzy score below a given threshold (e.g., 0.3) are excluded.
+ *
+ * The overall item score is the average of the scores from all conditions.
+ * The results are sorted in descending order of relevance.
+ *
+ * @param items - A Map containing items to filter.
+ * @param queries - An array of query conditions to apply.
+ * @returns An array of items that match all query conditions, sorted by relevance.
+ */
+export declare const filterMapItems: <T extends Record<string, any>>(items: Map<string, T>, queries?: QueryCondition[]) => T[];
+export declare const filterMap: <T extends Record<string, any>>(items: Map<string, T>, queries?: QueryCondition[]) => T[];
+export {};

package/types/src/store/index.d.ts

@@ -0,0 +1,8 @@
+export * from './context-collection';
+export * from './context-create';
+export * from './context-object';
+export * from './filter-directive';
+export * from './selector-hook';
+export * from './selectors';
+export * from './storage-manager';
+export * from './types';

package/types/src/store/selector-hook.d.ts

@@ -0,0 +1,15 @@
+import { ICollectionStore, IStore } from './types';
+type PropertyDescriptor<T> = {
+    get?: () => T;
+    set?: (value: T) => void;
+    value?: T;
+    configurable?: boolean;
+    enumerable?: boolean;
+    writable?: boolean;
+};
+interface SelectOptions {
+    required?: boolean;
+    updateOnly?: boolean;
+}
+export declare function select<T, R>(store: IStore<T> | ICollectionStore<T>, selectorFn?: (state: any) => R, options?: SelectOptions): (proto: Record<string, any>, propName: string, _descriptor?: PropertyDescriptor<R>) => void;
+export {};

package/types/src/store/selectors.d.ts

@@ -0,0 +1,50 @@
+import { Observable } from 'rxjs';
+import { IStore, ICollectionStore } from './types';
+/**
+ * Creates a selector that derives a value from store state
+ *
+ * @param store The store to observe
+ * @param selectorFn Function that transforms the state
+ * @returns An observable of the selected state that only emits when the derived value changes
+ */
+export declare function createSelector<T, R>(store: IStore<T>, selectorFn: (state: T) => R): Observable<R>;
+/**
+ * Creates a selector for collection stores that derives a value from the collection
+ *
+ * @param store The collection store to observe
+ * @param selectorFn Function that transforms the collection
+ * @returns An observable of the selected state that only emits when the derived value changes
+ */
+export declare function createCollectionSelector<T, R>(store: ICollectionStore<T>, selectorFn: (state: Map<string, T>) => R): Observable<R>;
+/**
+ * Creates a selector that filters items from a collection
+ *
+ * @param store The collection store
+ * @param filterFn Function that returns true for items to include
+ * @returns An observable of filtered items as an array
+ */
+export declare function createFilterSelector<T>(store: ICollectionStore<T>, filterFn: (item: T, key: string) => boolean): Observable<T[]>;
+/**
+ * Creates a selector that retrieves a single item from a collection
+ *
+ * @param store The collection store
+ * @param itemKey The key of the item to select
+ * @returns An observable of the selected item that emits when the item changes
+ */
+export declare function createItemSelector<T>(store: ICollectionStore<T>, itemKey: string): Observable<T | undefined>;
+/**
+ * Creates a selector that counts items in a collection, optionally filtered
+ *
+ * @param store The collection store
+ * @param filterFn Optional function to filter which items to count
+ * @returns An observable of the count
+ */
+export declare function createCountSelector<T>(store: ICollectionStore<T>, filterFn?: (item: T, key: string) => boolean): Observable<number>;
+/**
+ * Creates a compound selector that depends on multiple other selectors
+ *
+ * @param selectors Array of source selectors
+ * @param combinerFn Function that combines all selector results
+ * @returns An observable of the combined result
+ */
+export declare function createCompoundSelector<R, T extends any[]>(selectors: Observable<any>[], combinerFn: (...values: T) => R): Observable<R>;