zs3-ui-components 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "zs3-ui-components",
-    "version": "1.2.2",
+    "version": "1.2.3",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

package/dist/components/zs3-BaseComponent.senseRouter.d.ts

@@ -1,318 +0,0 @@
-/**
- * Opcions per al mètode emit
- */
-export interface EmitOptions {
-    /** Si és true, no es bloqueja l'event quan el component està disabled/loading */
-    skipDisabledCheck?: boolean;
-    /** Si és true, l'event és cancelable */
-    cancelable?: boolean;
-    /** Si és true, l'event fa bubbling */
-    bubbles?: boolean;
-    /** Si és true, l'event travessa shadow DOM boundaries */
-    composed?: boolean;
-}
-/**
- * Interfície per opcions de configuració del component base
- */
-export interface BaseComponentOptions {
-    useShadowDOM?: boolean;
-    shadowMode?: 'open' | 'closed';
-    delegatesFocus?: boolean;
-    slotAssignment?: 'manual' | 'named';
-    clonable?: boolean;
-    serializable?: boolean;
-}
-/**
- * Tipus per atributs observats
- */
-export type AttributeChangeCallback = (name: string, oldValue: string | null, newValue: string | null) => void;
-/**
- * Base component class for ZS3 components.
- * Provides common functionality shared across all ZS3 components.
- * Follows modern Web Components standards and best practices.
- *
- * @example
- * class MyComponent extends $BaseComponent {
- *   static observedAttributes = ['value', 'disabled'];
- *
- *   constructor() {
- *     super({ useShadowDOM: true, shadowMode: 'open' });
- *   }
- *
- *   render() {
- *     this.shadowRoot.innerHTML = `<div>Content</div>`;
- *   }
- * }
- */
-export declare abstract class $BaseComponent extends HTMLElement {
-    /**
-     * Shadow root reference (if using Shadow DOM)
-     */
-    protected _shadowRoot: ShadowRoot | null;
-    /**
-     * Component initialization state
-     */
-    protected _initialized: boolean;
-    /**
-     * Component mounted state
-     */
-    protected _mounted: boolean;
-    /**
-     * Attribute change handlers
-     */
-    protected _attributeHandlers: Map<string, AttributeChangeCallback>;
-    /**
-     * Event cleanup functions
-     */
-    protected _cleanupFunctions: Array<() => void>;
-    /**
-     * Theme change handler reference
-     */
-    private _themeChangeHandler;
-    /**
-     * Locale change handler reference
-     */
-    private _localeChangeHandler;
-    /**
-     * Component configuration options
-     */
-    protected _options: BaseComponentOptions;
-    /**
-     * Selector de l'element intern sobre el qual s'aplica l'efecte float.
-     * Els components fills han de definir aquesta propietat si volen suportar float.
-     * @example this._floatTargetSelector = 'button' // per zs3-button
-     * @example this._floatTargetSelector = '.toolbar' // per zs3-toolbar
-     */
-    protected _floatTargetSelector: string | null;
-    /**
-     * Selector de l'element contenidor que es mourà.
-     * Els components fills han de definir aquesta propietat si volen suportar move.
-     * @example this._moveContainerSelector = '.window' // per zs3-window
-     */
-    protected _moveContainerSelector: string | null;
-    /**
-     * Selector de l'element sobre el qual es fa el click per arrossegar (drag handle).
-     * Si no es defineix, s'usa el mateix element que _moveContainerSelector.
-     * @example this._moveDragSelector = '.title-bar' // per zs3-window
-     */
-    protected _moveDragSelector: string | null;
-    /**
-     * Initializes the base component
-     * @param options - Configuration options for the component
-     */
-    constructor(options?: BaseComponentOptions);
-    /**
-     * Initialize component (called in constructor)
-     * Override this method to perform setup logic
-     */
-    protected initialize(): void;
-    /**
-     * Get the root element (shadow root or element itself)
-     */
-    protected get root(): ShadowRoot | HTMLElement;
-    /**
-     * Query selector within the component's root
-     * @param selector - CSS selector to query
-     * @returns Found element or null
-     */
-    protected qs<T extends HTMLElement = HTMLElement>(selector: string): T | null;
-    /**
-     * Query all matching elements within the component's root
-     * @param selector - CSS selector to query
-     * @returns NodeList of found elements
-     */
-    protected qsAll<T extends HTMLElement = HTMLElement>(selector: string): NodeListOf<T>;
-    /**
-     * Register an attribute change handler
-     * @param attributeName - Name of the attribute to observe
-     * @param handler - Callback function
-     */
-    protected onAttributeChange(attributeName: string, handler: AttributeChangeCallback): void;
-    /**
-     * Add event listener with automatic cleanup
-     * @param element - Element to attach listener to
-     * @param event - Event name
-     * @param handler - Event handler
-     * @param options - Event listener options
-     */
-    protected addManagedEventListener<K extends keyof HTMLElementEventMap>(element: HTMLElement | Window | Document, event: K | string, handler: EventListener, options?: AddEventListenerOptions): void;
-    /**
-     * Emit a custom event
-     * @param eventName - Name of the event
-     * @param detail - Event detail data
-     * @param options - Emit options
-     */
-    protected emit<T>(eventName: string, detail?: T, options?: EmitOptions): boolean;
-    /**
-     * Emit lifecycle event (internal use)
-     * Uses emit with skipDisabledCheck=true since lifecycle events
-     * should always fire regardless of disabled/loading state
-     * @param eventName - Event name
-     * @param detail - Event detail
-     */
-    protected emitLifecycleEvent(eventName: string, detail?: Record<string, unknown>): void;
-    /**
-     * Get attribute as boolean
-     * @param name - Attribute name
-     * @param defaultValue - Default value if attribute is not set
-     */
-    getBooleanAttribute(name: string, defaultValue?: boolean): boolean;
-    /**
-     * Get attribute as number
-     * @param name - Attribute name
-     * @param defaultValue - Default value if attribute is not set or invalid
-     */
-    getNumberAttribute(name: string, defaultValue?: number): number;
-    /**
-     * Get attribute as array (comma-separated)
-     * @param name - Attribute name
-     * @param defaultValue - Default value if attribute is not set
-     */
-    protected getArrayAttribute(name: string, defaultValue?: string[]): string[];
-    /**
-     * Set boolean attribute
-     * @param name - Attribute name
-     * @param value - Boolean value
-     */
-    setBooleanAttribute(name: string, value: boolean): void;
-    /**
-     * Aplica l'efecte float al component si està configurat.
-     * Aquest mètode es crida automàticament després de mount i després de cada render.
-     * Els components fills han de definir `_floatTargetSelector` per activar aquesta funcionalitat.
-     */
-    protected applyFloatEffect(): void;
-    /**
-     * Aplica l'efecte move (drag & drop) al component si està configurat.
-     * Aquest mètode es crida automàticament després de mount i després de cada render.
-     * Els components fills han de definir `_moveContainerSelector` per activar aquesta funcionalitat.
-     * - Si `_moveContainerSelector` és ':host', es mou el component sencer.
-     * - Opcionalment poden definir `_moveDragSelector` per especificar un element diferent per fer el drag.
-     *
-     * L'atribut `move` pot tenir els valors: 'x' (horitzontal), 'y' (vertical), 'xy' (ambdós)
-     */
-    protected applyMoveEffect(): void;
-    /**
-     * Request an animation frame update
-     * Useful for batching DOM updates
-     */
-    protected requestUpdate(): Promise<void>;
-    /**
-     * Debounce a function call
-     * @param fn - Function to debounce
-     * @param delay - Delay in milliseconds
-     */
-    protected debounce<T extends (...args: unknown[]) => unknown>(fn: T, delay: number): (...args: Parameters<T>) => void;
-    /**
-     * Safely update innerHTML with sanitization warning
-     * @param html - HTML string to set
-     * @param target - Target element (defaults to root)
-     */
-    protected setHTML(html: string, target?: HTMLElement | ShadowRoot): void;
-    /**
-     * Called when the element is inserted into the DOM
-     * Standard Web Components lifecycle method
-     */
-    connectedCallback(): void;
-    /**
-     * Called when the element is removed from the DOM
-     * Standard Web Components lifecycle method
-     */
-    disconnectedCallback(): void;
-    /**
-     * Called when the element is adopted into a new document
-     * Standard Web Components lifecycle method
-     */
-    adoptedCallback(): void;
-    /**
-     * Called when an observed attribute changes
-     * Standard Web Components lifecycle method
-     * @param name - Attribute name
-     * @param oldValue - Previous value
-     * @param newValue - New value
-     */
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    /**
-     * Hook called before component is mounted
-     * Override this in subclasses for custom logic
-     */
-    protected beforeMount(): void;
-    /**
-     * Hook called after component is mounted
-     * Override this in subclasses for custom logic
-     */
-    protected afterMount(): void;
-    /**
-     * Hook called before component is unmounted
-     * Override this in subclasses for cleanup logic
-     */
-    protected beforeUnmount(): void;
-    /**
-     * Hook called when component is adopted to new document
-     * Override this in subclasses for custom logic
-     */
-    protected onAdopted(): void;
-    /**
-     * Internal handler for theme change events
-     * @param e - Theme change event
-     */
-    private handleThemeChange;
-    /**
-     * Hook called when theme changes
-     * Override this in subclasses for custom theme handling
-     * @param theme - New theme name
-     */
-    protected onThemeChange(_theme: string): void;
-    /**
-     * Internal handler for locale change events
-     * @param e - Locale change event
-     */
-    private handleLocaleChange;
-    /**
-     * Hook called when locale changes
-     * Override this in subclasses for custom locale handling
-     * @param locale - New locale code
-     */
-    protected onLocaleChange(_locale: string): void;
-    /**
-     * Translate a key using the i18n system
-     * @param key - Translation key
-     * @param params - Optional parameters for interpolation
-     * @returns Translated string or key if not found
-     */
-    protected t(key: string, params?: Record<string, string | number>): string;
-    /**
-     * Check if a translation exists
-     * @param key - Translation key
-     * @returns True if translation exists
-     */
-    protected hasTranslation(key: string): boolean;
-    /**
-     * Get translated attribute value
-     * If i18n-{attrName} attribute exists, translate that key
-     * Otherwise return the original attribute value or default
-     * @param attrName - Attribute name
-     * @param defaultValue - Default value if no attribute
-     */
-    protected getTranslatedAttribute(attrName: string, defaultValue?: string): string;
-    /**
-     * Hook called when an attribute changes
-     * Override this in subclasses for custom logic
-     * @param name - Attribute name
-     * @param oldValue - Previous value
-     * @param newValue - New value
-     */
-    protected onAttributeChanged(_name: string, _oldValue: string | null, _newValue: string | null): void;
-    /**
-     * Render the component
-     * This should be overridden by subclasses to define rendering logic
-     */
-    abstract render(): void;
-    /**
-     * Get component state (for debugging)
-     */
-    getState(): Record<string, unknown>;
-    /**
-     * Force re-render
-     */
-    forceUpdate(): void;
-}