@nuraly/lumenui 0.2.1 → 0.2.2

package/dist/src/components/form/controllers/validation.controller.js

@@ -0,0 +1,236 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { FormValidationState, FORM_EVENTS } from '../form.types.js';
+/**
+ * Controller that coordinates validation across all form fields
+ * This does NOT perform validation - it coordinates existing component validations
+ */
+export class FormValidationController {
+    constructor(host) {
+        this.host = host;
+        this.fields = new Map();
+        this.validationState = FormValidationState.Pristine;
+        this.validationPromise = null;
+    }
+    /**
+     * Register a form field for validation coordination
+     */
+    registerField(element) {
+        var _a;
+        const name = element.name || element.getAttribute('name') || `field-${Date.now()}`;
+        const field = {
+            element,
+            name,
+            value: element.value,
+            isValid: element.getValidationStatus().isValid,
+            validationMessage: element.validationMessage || '',
+            required: (_a = element.required) !== null && _a !== void 0 ? _a : false,
+            touched: false,
+            dirty: false
+        };
+        this.fields.set(name, field);
+        // Listen for field changes
+        this.addFieldListeners(element, name);
+    }
+    /**
+     * Unregister a form field
+     */
+    unregisterField(name) {
+        const field = this.fields.get(name);
+        if (field) {
+            this.removeFieldListeners(field.element);
+            this.fields.delete(name);
+        }
+    }
+    /**
+     * Add event listeners to a form field
+     */
+    addFieldListeners(element, fieldName) {
+        element.addEventListener('nr-validation', (event) => this.handleFieldValidation(fieldName, event));
+    }
+    /**
+     * Remove event listeners from a form field
+     */
+    removeFieldListeners(_element) {
+        // Remove all event listeners (implementation depends on your needs)
+        // You might want to store listener references for proper cleanup
+    }
+    /**
+     * Handle field validation event
+     */
+    handleFieldValidation(fieldName, event) {
+        const field = this.fields.get(fieldName);
+        if (!field)
+            return;
+        if (event && event.detail) {
+            // Use the detailed validation information from the nr-validation event
+            field.isValid = event.detail.isValid || false;
+            field.validationMessage = event.detail.validationMessage || '';
+        }
+        else {
+            // Fallback to ValidatableComponent validation
+            const status = field.element.getValidationStatus();
+            field.isValid = status.isValid;
+            field.validationMessage = field.element.validationMessage || '';
+        }
+        // Update form validation state based on all fields
+        this.updateFormValidationState();
+    }
+    /**
+     * Update form validation state based on current field states
+     */
+    updateFormValidationState() {
+        const invalidFields = this.getInvalidFields();
+        const isFormValid = invalidFields.length === 0;
+        this.validationState = isFormValid ? FormValidationState.Valid : FormValidationState.Invalid;
+        const result = {
+            isValid: isFormValid,
+            invalidFields,
+            validationErrors: this.buildValidationErrors(),
+            summary: isFormValid ? 'Form is valid' : `${invalidFields.length} field(s) have errors`
+        };
+        this.dispatchValidationEvent(result);
+    }
+    /**
+     * Build validation errors object from current field states
+     */
+    buildValidationErrors() {
+        const errors = {};
+        for (const [name, field] of this.fields) {
+            if (!field.isValid && field.validationMessage) {
+                errors[name] = field.validationMessage;
+            }
+        }
+        return errors;
+    }
+    /**
+     * Validate all form fields (coordinates existing validations)
+     */
+    validateForm() {
+        // Return existing promise if validation is in progress
+        if (this.validationPromise !== null) {
+            return this.validationPromise;
+        }
+        this.validationState = FormValidationState.Pending;
+        this.validationPromise = this.performValidation();
+        return this.validationPromise;
+    }
+    /**
+     * Perform the actual validation coordination
+     */
+    performValidation() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const invalidFields = [];
+            const validationErrors = {};
+            // Check each field's validation state
+            for (const [name, field] of this.fields) {
+                // Trigger validation on the field component itself
+                const status = field.element.getValidationStatus();
+                const isValid = status.isValid;
+                field.isValid = isValid;
+                field.validationMessage = field.element.validationMessage || '';
+                if (!isValid) {
+                    invalidFields.push(field);
+                    validationErrors[name] = field.validationMessage;
+                }
+            }
+            const isFormValid = invalidFields.length === 0;
+            this.validationState = isFormValid ? FormValidationState.Valid : FormValidationState.Invalid;
+            const result = {
+                isValid: isFormValid,
+                invalidFields,
+                validationErrors,
+                summary: isFormValid ? 'Form is valid' : `${invalidFields.length} field(s) have errors`
+            };
+            this.dispatchValidationEvent(result);
+            this.validationPromise = null;
+            return result;
+        });
+    }
+    /**
+     * Get current validation state
+     */
+    getValidationState() {
+        return this.validationState;
+    }
+    /**
+     * Get all registered fields
+     */
+    getFields() {
+        return Array.from(this.fields.values());
+    }
+    /**
+     * Get invalid fields
+     */
+    getInvalidFields() {
+        return Array.from(this.fields.values()).filter(field => !field.isValid);
+    }
+    /**
+     * Check if form is valid
+     */
+    isValid() {
+        return this.validationState === FormValidationState.Valid &&
+            Array.from(this.fields.values()).every(field => field.isValid);
+    }
+    /**
+     * Focus first invalid field
+     */
+    focusFirstInvalidField() {
+        const invalidField = Array.from(this.fields.values()).find(field => !field.isValid);
+        if (invalidField && typeof invalidField.element.focus === 'function') {
+            invalidField.element.focus();
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Reset all fields
+     */
+    reset() {
+        for (const field of this.fields.values()) {
+            // Reset using ValidatableComponent interface if available
+            if ('clearValidation' in field.element && typeof field.element.clearValidation === 'function') {
+                field.element.clearValidation();
+            }
+            // Reset value if component supports it
+            if ('value' in field.element) {
+                field.element.value = '';
+            }
+            field.touched = false;
+            field.dirty = false;
+            field.isValid = true;
+            field.validationMessage = '';
+        }
+        this.validationState = FormValidationState.Pristine;
+        this.dispatchResetEvent();
+    }
+    /**
+     * Dispatch validation event
+     */
+    dispatchValidationEvent(result) {
+        var _a, _b;
+        (_b = (_a = this.host).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, FORM_EVENTS.VALIDATION_CHANGED, {
+            validationResult: result
+        });
+    }
+    /**
+     * Dispatch reset event
+     */
+    dispatchResetEvent() {
+        var _a, _b;
+        (_b = (_a = this.host).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, FORM_EVENTS.RESET, {});
+    }
+}
+//# sourceMappingURL=validation.controller.js.map

package/dist/src/components/form/interfaces/validation.interface.d.ts

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Standard interface that all form-compatible components should implement
+ * This ensures consistent validation API across all form field components
+ */
+export interface FormFieldValidation {
+    /** Component name for form submission */
+    name?: string;
+    /** Current field value */
+    value: any;
+    /** Required field indicator */
+    required?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Readonly state */
+    readonly?: boolean;
+    /** Current validation message */
+    validationMessage?: string;
+    /**
+     * Validate the field and return true if valid
+     */
+    validate?(): boolean;
+    /**
+     * Check if the field satisfies HTML5 constraints
+     */
+    checkValidity?(): boolean;
+    /**
+     * Report validation state (shows validation UI)
+     */
+    reportValidity?(): boolean;
+    /**
+     * Set custom validation message
+     */
+    setCustomValidity?(message: string): void;
+    /**
+     * Reset field to initial state
+     */
+    reset?(): void;
+    /**
+     * Focus the field
+     */
+    focus?(): void;
+}
+/**
+ * Enhanced validation interface for components with advanced validation features
+ */
+export interface AdvancedFormFieldValidation extends FormFieldValidation {
+    /** Validation state details */
+    isValid?: boolean;
+    isTouched?: boolean;
+    isDirty?: boolean;
+    /** Validation rules */
+    validationRules?: ValidationRule[];
+    /** Custom validators */
+    customValidators?: CustomValidator[];
+    /**
+     * Get detailed validation result
+     */
+    getValidationResult?(): {
+        isValid: boolean;
+        errors: string[];
+        warnings: string[];
+    };
+    /**
+     * Add custom validation rule
+     */
+    addValidationRule?(rule: ValidationRule): void;
+    /**
+     * Remove validation rule
+     */
+    removeValidationRule?(ruleId: string): void;
+}
+/**
+ * Validation rule definition
+ */
+export interface ValidationRule {
+    id: string;
+    message: string;
+    validator: (value: any) => boolean;
+    severity?: 'error' | 'warning';
+}
+/**
+ * Custom validator function
+ */
+export interface CustomValidator {
+    id: string;
+    validate: (value: any, element: any) => {
+        isValid: boolean;
+        message: string;
+    };
+}
+/**
+ * Validation event details
+ */
+export interface ValidationEventDetail {
+    isValid: boolean;
+    value: any;
+    message: string;
+    errors: string[];
+    warnings?: string[];
+    field?: string;
+    timestamp: number;
+}
+/**
+ * Form field registration info
+ */
+export interface FormFieldRegistration {
+    element: HTMLElement & FormFieldValidation;
+    name: string;
+    type: string;
+    initialValue: any;
+    registrationTime: number;
+}
+//# sourceMappingURL=validation.interface.d.ts.map

package/dist/src/components/form/interfaces/validation.interface.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=validation.interface.js.map

package/dist/src/components/icon/mixins/clickable-mixin.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Interface for components that support clickable icon functionality
+ */
+export interface ClickableCapable {
+    /**
+     * Whether the icon is clickable/interactive
+     */
+    clickable: boolean;
+    /**
+     * Whether the icon is disabled
+     */
+    disabled: boolean;
+    /**
+     * Handle click events on the icon
+     */
+    handleIconClick(event: MouseEvent): void;
+    /**
+     * Handle keyboard events for accessibility
+     */
+    handleIconKeydown(event: KeyboardEvent): void;
+    /**
+     * Get appropriate role for accessibility
+     */
+    getIconRole(): string;
+    /**
+     * Get appropriate tabindex for accessibility
+     */
+    getIconTabIndex(): string;
+    /**
+     * Get appropriate aria-disabled attribute
+     */
+    getAriaDisabled(): string | undefined;
+}
+/**
+ * Mixin that provides clickable icon functionality with proper event handling
+ * and accessibility support.
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with clickable capabilities
+ *
+ * @example
+ * ```typescript
+ * export class IconComponent extends ClickableMixin(NuralyUIBaseMixin(LitElement)) {
+ *   // Component implementation
+ * }
+ * ```
+ */
+export declare const ClickableMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ClickableCapable> & T;
+export {};
+//# sourceMappingURL=clickable-mixin.d.ts.map

package/dist/src/components/icon/mixins/clickable-mixin.js

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from 'lit/decorators.js';
+/**
+ * Mixin that provides clickable icon functionality with proper event handling
+ * and accessibility support.
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with clickable capabilities
+ *
+ * @example
+ * ```typescript
+ * export class IconComponent extends ClickableMixin(NuralyUIBaseMixin(LitElement)) {
+ *   // Component implementation
+ * }
+ * ```
+ */
+export const ClickableMixin = (superClass) => {
+    class ClickableMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /** Whether the icon is clickable/interactive */
+            this.clickable = false;
+            /** Whether the icon is disabled */
+            this.disabled = false;
+        }
+        /**
+         * Handle click events on the icon
+         */
+        handleIconClick(event) {
+            if (this.disabled || !this.clickable) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            // Dispatch custom click event with icon details
+            this.dispatchCustomEvent('icon-click', {
+                iconName: this.name,
+                iconType: this.type,
+                originalEvent: event,
+                timestamp: Date.now()
+            });
+        }
+        /**
+         * Handle keyboard events for accessibility
+         */
+        handleIconKeydown(event) {
+            if (this.disabled || !this.clickable) {
+                return;
+            }
+            // Check if it's an activation key (Enter or Space)
+            // Use isActivationKey from EventHandlerMixin if available, otherwise fallback
+            const isActivationKey = typeof this.isActivationKey === 'function'
+                ? this.isActivationKey(event)
+                : (event.key === 'Enter' || event.key === ' ');
+            if (isActivationKey) {
+                event.preventDefault();
+                event.stopPropagation();
+                // Simulate click event
+                this.handleIconClick(event);
+                // Dispatch keyboard activation event with improved naming consistency
+                if (typeof this.dispatchCustomEvent === 'function') {
+                    this.dispatchCustomEvent('icon-keyboard-activation', {
+                        iconName: this.name,
+                        iconType: this.type,
+                        key: event.key,
+                        originalEvent: event,
+                        timestamp: Date.now()
+                    });
+                }
+            }
+        }
+        /**
+         * Get appropriate role for accessibility
+         */
+        getIconRole() {
+            return this.clickable ? 'button' : 'img';
+        }
+        /**
+         * Get appropriate tabindex for accessibility
+         */
+        getIconTabIndex() {
+            if (!this.clickable)
+                return '-1';
+            return this.disabled ? '-1' : '0';
+        }
+        /**
+         * Get appropriate aria-disabled attribute
+         */
+        getAriaDisabled() {
+            return this.clickable && this.disabled ? 'true' : undefined;
+        }
+    }
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], ClickableMixinClass.prototype, "clickable", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], ClickableMixinClass.prototype, "disabled", void 0);
+    return ClickableMixinClass;
+};
+//# sourceMappingURL=clickable-mixin.js.map

package/dist/src/components/icon/mixins/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './clickable-mixin.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/icon/mixins/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './clickable-mixin.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/iconpicker/controllers/event.controller.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { IconPickerIcon } from '../icon-picker.types.js';
+interface EventHost extends ReactiveControllerHost {
+    dispatchEvent(event: Event): boolean;
+}
+export declare class IconPickerEventController implements ReactiveController {
+    host: EventHost;
+    constructor(host: EventHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Dispatch icon change event
+     */
+    dispatchChangeEvent(value: string, icon: IconPickerIcon | null): void;
+    /**
+     * Dispatch search event
+     */
+    dispatchSearchEvent(query: string): void;
+    /**
+     * Dispatch clear event
+     */
+    dispatchClearEvent(): void;
+    /**
+     * Dispatch open event
+     */
+    dispatchOpenEvent(): void;
+    /**
+     * Dispatch close event
+     */
+    dispatchCloseEvent(): void;
+}
+export {};
+//# sourceMappingURL=event.controller.d.ts.map

package/dist/src/components/iconpicker/controllers/event.controller.js

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export class IconPickerEventController {
+    constructor(host) {
+        (this.host = host).addController(this);
+    }
+    hostConnected() {
+        // Initialization
+    }
+    hostDisconnected() {
+        // Cleanup
+    }
+    /**
+     * Dispatch icon change event
+     */
+    dispatchChangeEvent(value, icon) {
+        const detail = { value, icon };
+        this.host.dispatchEvent(new CustomEvent('nr-icon-picker-change', {
+            detail,
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Dispatch search event
+     */
+    dispatchSearchEvent(query) {
+        this.host.dispatchEvent(new CustomEvent('nr-icon-picker-search', {
+            detail: { query },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Dispatch clear event
+     */
+    dispatchClearEvent() {
+        this.host.dispatchEvent(new CustomEvent('nr-icon-picker-clear', {
+            detail: {},
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Dispatch open event
+     */
+    dispatchOpenEvent() {
+        this.host.dispatchEvent(new CustomEvent('nr-icon-picker-open', {
+            detail: {},
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Dispatch close event
+     */
+    dispatchCloseEvent() {
+        this.host.dispatchEvent(new CustomEvent('nr-icon-picker-close', {
+            detail: {},
+            bubbles: true,
+            composed: true
+        }));
+    }
+}
+//# sourceMappingURL=event.controller.js.map

package/dist/src/components/iconpicker/controllers/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { IconPickerSelectionController } from './selection.controller.js';
+export { IconPickerSearchController } from './search.controller.js';
+export { IconPickerEventController } from './event.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/iconpicker/controllers/index.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { IconPickerSelectionController } from './selection.controller.js';
+export { IconPickerSearchController } from './search.controller.js';
+export { IconPickerEventController } from './event.controller.js';
+//# sourceMappingURL=index.js.map