@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/checkbox/mixins/checkbox-focus-mixin.js

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Mixin that provides focus management capabilities to checkbox components
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with checkbox focus capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyCheckbox extends CheckboxFocusMixin(LitElement) {
+ *   handleClick() {
+ *     this.focus();
+ *   }
+ * }
+ * ```
+ */
+export const CheckboxFocusMixin = (superClass) => {
+    class CheckboxFocusMixinClass extends superClass {
+        /**
+         * Get the checkbox input element
+         */
+        get checkboxElement() {
+            var _a;
+            const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input[type="checkbox"]');
+            if (!input) {
+                throw new Error('CheckboxFocusMixin requires a checkbox input element');
+            }
+            return input;
+        }
+        focus(options = {}) {
+            const input = this.checkboxElement;
+            if (input) {
+                input.focus({ preventScroll: options.preventScroll });
+            }
+        }
+        blur() {
+            const input = this.checkboxElement;
+            if (input) {
+                input.blur();
+            }
+        }
+        isFocused() {
+            const input = this.checkboxElement;
+            return input ? document.activeElement === input : false;
+        }
+        get nativeElement() {
+            var _a;
+            return ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input[type="checkbox"]')) || null;
+        }
+    }
+    return CheckboxFocusMixinClass;
+};
+//# sourceMappingURL=checkbox-focus-mixin.js.map

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { CheckboxFocusMixin, } from './checkbox-focus-mixin.js';
+export { CheckboxEventMixin, } from './checkbox-event-mixin.js';
+export type { CheckboxFocusCapable, CheckboxFocusOptions } from './checkbox-focus-mixin.js';
+export type { CheckboxEventCapable, CheckboxChangeEventDetail, CheckboxFocusEventDetail, CheckboxKeyboardEventDetail, CheckboxMouseEventDetail } from './checkbox-event-mixin.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { CheckboxFocusMixin, } from './checkbox-focus-mixin.js';
+export { CheckboxEventMixin, } from './checkbox-event-mixin.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/checkbox/test/checkbox_test.d.ts

@@ -0,0 +1,2 @@
+import '../checkbox.component';
+//# sourceMappingURL=checkbox_test.d.ts.map

package/dist/src/components/checkbox/test/checkbox_test.js

@@ -0,0 +1,88 @@
+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 { html, fixture, expect } from '@open-wc/testing';
+import '../checkbox.component';
+suite('nr-checkbox', () => {
+    test('init checkbox', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-checkbox></nr-checkbox>`);
+        const input = el.shadowRoot.querySelector('input[type="checkbox"]');
+        const inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
+        expect(el.disabled).to.be.false;
+        expect(el.indeterminate).to.be.false;
+        expect(el.disabled).to.be.false;
+        expect(input).to.exist;
+        expect(inputContent).to.equal('""');
+    }));
+    test('should reflect the checked attribute', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-checkbox checked></nr-checkbox>`);
+        const input = el.shadowRoot.querySelector('input');
+        const inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
+        expect(el.checked).to.be.true;
+        expect(input.checked).to.be.true;
+        expect(inputContent).to.not.be.empty;
+        expect(inputContent).to.contain('✔');
+        expect(inputContent).to.not.contain('-');
+    }));
+    test('should reflect the disabled attribute', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-checkbox disabled></nr-checkbox>`);
+        const input = el.shadowRoot.querySelector('input');
+        expect(el.disabled).to.be.true;
+        expect(input.disabled).to.be.true;
+    }));
+    test('should reflect indeterminate attribubute', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-checkbox indeterminate></nr-checkbox>`);
+        const input = el.shadowRoot.querySelector('input');
+        const inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
+        expect(el.indeterminate).to.be.true;
+        expect(inputContent).to.not.be.empty;
+        expect(inputContent).to.contain('-');
+        expect(inputContent).to.not.contain('✔');
+    }));
+    test('should toggle checked state on change', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-checkbox></nr-checkbox>`);
+        let input = el.shadowRoot.querySelector('input');
+        let inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
+        expect(el.checked).to.be.false;
+        expect(inputContent).to.equal('""');
+        input.click();
+        yield el.updateComplete;
+        input = el.shadowRoot.querySelector('input');
+        inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
+        expect(el.checked).to.be.true;
+        expect(inputContent).to.contain('✔');
+        input.click();
+        yield el.updateComplete;
+        input = el.shadowRoot.querySelector('input');
+        inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
+        expect(el.checked).to.be.false;
+        expect(inputContent).to.equal('""');
+    }));
+    test('should dispatch "nr-change" event on change', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-checkbox></nr-checkbox>`);
+        const input = el.shadowRoot.querySelector('input');
+        let checkboxChangedDispatched = false;
+        el.addEventListener('nr-change', () => {
+            checkboxChangedDispatched = true;
+        });
+        input.click();
+        expect(checkboxChangedDispatched).to.be.true;
+    }));
+    test('should not dispatch "nr-change" event on change when checkbox is disabled', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-checkbox disabled></nr-checkbox>`);
+        const input = el.shadowRoot.querySelector('input');
+        let checkboxChangedDispatched = false;
+        el.addEventListener('nr-change', () => {
+            checkboxChangedDispatched = true;
+        });
+        input.click();
+        expect(checkboxChangedDispatched).to.be.false;
+    }));
+});
+//# sourceMappingURL=checkbox_test.js.map

package/dist/src/components/collapse/controllers/accordion.controller.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCollapseController, CollapseControllerHost } from './base.controller.js';
+/**
+ * Extended host interface for accordion functionality
+ */
+export interface CollapseAccordionHost extends CollapseControllerHost {
+    accordion?: boolean;
+    allowMultiple?: boolean;
+}
+/**
+ * Accordion controller for collapse component
+ * Handles accordion behavior (single section open at a time)
+ */
+export declare class CollapseAccordionController extends BaseCollapseController {
+    /**
+     * Handle section toggle with accordion logic
+     */
+    handleSectionToggle(index: number, isOpening: boolean): void;
+    /**
+     * Close all sections except the specified one
+     */
+    private closeOtherSections;
+    /**
+     * Ensure only one section is open (accordion mode)
+     */
+    enforceAccordionMode(): void;
+    /**
+     * Open specific section (accordion mode)
+     */
+    openSection(index: number): void;
+    /**
+     * Close specific section
+     */
+    closeSection(index: number): void;
+    /**
+     * Close all sections
+     */
+    closeAllSections(): void;
+    /**
+     * Open all sections (only if not in accordion mode or allowMultiple is true)
+     */
+    openAllSections(): void;
+    /**
+     * Get the currently active (open) section in accordion mode
+     */
+    getActiveSectionIndex(): number;
+    /**
+     * Check if accordion mode is enabled
+     */
+    isAccordionMode(): boolean;
+    /**
+     * Check if multiple sections can be open
+     */
+    allowsMultiple(): boolean;
+}
+//# sourceMappingURL=accordion.controller.d.ts.map

package/dist/src/components/collapse/controllers/accordion.controller.js

@@ -0,0 +1,132 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCollapseController } from './base.controller.js';
+/**
+ * Accordion controller for collapse component
+ * Handles accordion behavior (single section open at a time)
+ */
+export class CollapseAccordionController extends BaseCollapseController {
+    /**
+     * Handle section toggle with accordion logic
+     */
+    handleSectionToggle(index, isOpening) {
+        if (!this.host.accordion) {
+            // Not in accordion mode, allow normal toggle
+            return;
+        }
+        if (isOpening && !this.host.allowMultiple) {
+            // Close all other sections when opening one in accordion mode
+            this.closeOtherSections(index);
+        }
+    }
+    /**
+     * Close all sections except the specified one
+     */
+    closeOtherSections(exceptIndex) {
+        this.host.sections.forEach((section, index) => {
+            if (index !== exceptIndex && section.open && section.collapsible !== false) {
+                this.updateSection(index, { open: false });
+            }
+        });
+    }
+    /**
+     * Ensure only one section is open (accordion mode)
+     */
+    enforceAccordionMode() {
+        if (!this.host.accordion || this.host.allowMultiple) {
+            return;
+        }
+        const openSections = this.getOpenSections();
+        // If more than one section is open, close all but the first
+        if (openSections.length > 1) {
+            const sectionsToUpdate = openSections.slice(1).map(index => ({
+                index,
+                updates: { open: false }
+            }));
+            this.updateSections(sectionsToUpdate);
+        }
+    }
+    /**
+     * Open specific section (accordion mode)
+     */
+    openSection(index) {
+        const section = this.getSection(index);
+        if (!section || section.disabled || section.collapsible === false) {
+            return;
+        }
+        if (this.host.accordion && !this.host.allowMultiple) {
+            // Close all other sections first
+            this.closeOtherSections(index);
+        }
+        this.updateSection(index, { open: true });
+    }
+    /**
+     * Close specific section
+     */
+    closeSection(index) {
+        const section = this.getSection(index);
+        if (!section || section.disabled || section.collapsible === false) {
+            return;
+        }
+        this.updateSection(index, { open: false });
+    }
+    /**
+     * Close all sections
+     */
+    closeAllSections() {
+        const sectionsToUpdate = this.host.sections
+            .map((section, index) => ({ section, index }))
+            .filter(({ section }) => section.open && section.collapsible !== false && !section.disabled)
+            .map(({ index }) => ({ index, updates: { open: false } }));
+        if (sectionsToUpdate.length > 0) {
+            this.updateSections(sectionsToUpdate);
+        }
+    }
+    /**
+     * Open all sections (only if not in accordion mode or allowMultiple is true)
+     */
+    openAllSections() {
+        if (this.host.accordion && !this.host.allowMultiple) {
+            // In accordion mode with single selection, open only the first valid section
+            const firstValidIndex = this.host.sections.findIndex(section => section.collapsible !== false && !section.disabled);
+            if (firstValidIndex !== -1) {
+                this.openSection(firstValidIndex);
+            }
+            return;
+        }
+        // Open all valid sections
+        const sectionsToUpdate = this.host.sections
+            .map((section, index) => ({ section, index }))
+            .filter(({ section }) => !section.open && section.collapsible !== false && !section.disabled)
+            .map(({ index }) => ({ index, updates: { open: true } }));
+        if (sectionsToUpdate.length > 0) {
+            this.updateSections(sectionsToUpdate);
+        }
+    }
+    /**
+     * Get the currently active (open) section in accordion mode
+     */
+    getActiveSectionIndex() {
+        if (!this.host.accordion) {
+            return -1;
+        }
+        const openSections = this.getOpenSections();
+        return openSections.length > 0 ? openSections[0] : -1;
+    }
+    /**
+     * Check if accordion mode is enabled
+     */
+    isAccordionMode() {
+        return !!this.host.accordion;
+    }
+    /**
+     * Check if multiple sections can be open
+     */
+    allowsMultiple() {
+        return !!this.host.allowMultiple;
+    }
+}
+//# sourceMappingURL=accordion.controller.js.map

package/dist/src/components/collapse/controllers/animation.controller.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCollapseController, CollapseControllerHost } from './base.controller.js';
+/**
+ * Animation controller for collapse component
+ * Handles smooth expand/collapse animations
+ */
+export declare class CollapseAnimationController extends BaseCollapseController {
+    private animatingSections;
+    private animationDuration;
+    constructor(host: CollapseControllerHost);
+    /**
+     * Animate section toggle
+     */
+    animateToggle(index: number, isOpening: boolean): Promise<void>;
+    /**
+     * Animate expand
+     */
+    private animateExpand;
+    /**
+     * Animate collapse
+     */
+    private animateCollapse;
+    /**
+     * Get content element for a section
+     */
+    private getContentElement;
+    /**
+     * Check if section is currently animating
+     */
+    isAnimating(index: number): boolean;
+    /**
+     * Set animation duration
+     */
+    setAnimationDuration(duration: number): void;
+}
+//# sourceMappingURL=animation.controller.d.ts.map

package/dist/src/components/collapse/controllers/animation.controller.js

@@ -0,0 +1,125 @@
+/**
+ * @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 { BaseCollapseController } from './base.controller.js';
+/**
+ * Animation controller for collapse component
+ * Handles smooth expand/collapse animations
+ */
+export class CollapseAnimationController extends BaseCollapseController {
+    constructor(host) {
+        super(host);
+        this.animatingSections = new Set();
+        this.animationDuration = 300; // ms
+    }
+    /**
+     * Animate section toggle
+     */
+    animateToggle(index, isOpening) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const section = this.getSection(index);
+            if (!section || this.animatingSections.has(index)) {
+                return;
+            }
+            this.animatingSections.add(index);
+            try {
+                const contentElement = this.getContentElement(index);
+                if (!contentElement)
+                    return;
+                if (isOpening) {
+                    yield this.animateExpand(contentElement);
+                }
+                else {
+                    yield this.animateCollapse(contentElement);
+                }
+            }
+            finally {
+                this.animatingSections.delete(index);
+            }
+        });
+    }
+    /**
+     * Animate expand
+     */
+    animateExpand(element) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const fullHeight = element.scrollHeight;
+            element.style.height = '0px';
+            element.style.overflow = 'hidden';
+            element.style.transition = `height ${this.animationDuration}ms ease-out`;
+            // Force reflow
+            element.getAnimations();
+            element.style.height = `${fullHeight}px`;
+            return new Promise((resolve) => {
+                const handleTransitionEnd = () => {
+                    element.style.height = '';
+                    element.style.overflow = '';
+                    element.style.transition = '';
+                    element.removeEventListener('transitionend', handleTransitionEnd);
+                    resolve();
+                };
+                element.addEventListener('transitionend', handleTransitionEnd);
+                // Fallback timeout
+                setTimeout(handleTransitionEnd, this.animationDuration + 50);
+            });
+        });
+    }
+    /**
+     * Animate collapse
+     */
+    animateCollapse(element) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const currentHeight = element.scrollHeight;
+            element.style.height = `${currentHeight}px`;
+            element.style.overflow = 'hidden';
+            element.style.transition = `height ${this.animationDuration}ms ease-out`;
+            // Force reflow
+            element.getAnimations();
+            element.style.height = '0px';
+            return new Promise((resolve) => {
+                const handleTransitionEnd = () => {
+                    element.style.height = '';
+                    element.style.overflow = '';
+                    element.style.transition = '';
+                    element.removeEventListener('transitionend', handleTransitionEnd);
+                    resolve();
+                };
+                element.addEventListener('transitionend', handleTransitionEnd);
+                // Fallback timeout
+                setTimeout(handleTransitionEnd, this.animationDuration + 50);
+            });
+        });
+    }
+    /**
+     * Get content element for a section
+     */
+    getContentElement(index) {
+        var _a;
+        const hostElement = this.host;
+        return ((_a = hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.collapse-content[data-section-index="${index}"]`)) || null;
+    }
+    /**
+     * Check if section is currently animating
+     */
+    isAnimating(index) {
+        return this.animatingSections.has(index);
+    }
+    /**
+     * Set animation duration
+     */
+    setAnimationDuration(duration) {
+        this.animationDuration = Math.max(0, duration);
+    }
+}
+//# sourceMappingURL=animation.controller.js.map

package/dist/src/components/collapse/controllers/base.controller.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveControllerHost } from 'lit';
+import { CollapseSection } from '../collapse.type.js';
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Base controller interface for collapse components
+ */
+export interface CollapseControllerHost extends ReactiveControllerHost {
+    sections: CollapseSection[];
+    accordion?: boolean;
+    allowMultiple?: boolean;
+    animation?: string;
+    requestUpdate(): void;
+    updateSection?(index: number, updates: Partial<CollapseSection>): void;
+    updateSections?(updates: Array<{
+        index: number;
+        updates: Partial<CollapseSection>;
+    }>): void;
+}
+/**
+ * Base controller for collapse component functionality
+ */
+export declare abstract class BaseCollapseController extends BaseComponentController<CollapseControllerHost> {
+    /**
+     * Get section by index safely
+     */
+    protected getSection(index: number): CollapseSection | undefined;
+    /**
+     * Update a specific section
+     */
+    protected updateSection(index: number, updates: Partial<CollapseSection>): void;
+    /**
+     * Update multiple sections at once (more efficient for batch operations)
+     */
+    protected updateSections(updates: Array<{
+        index: number;
+        updates: Partial<CollapseSection>;
+    }>): void;
+    /**
+     * Get all open sections
+     */
+    protected getOpenSections(): number[];
+}
+//# sourceMappingURL=base.controller.d.ts.map

package/dist/src/components/collapse/controllers/base.controller.js

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Base controller for collapse component functionality
+ */
+export class BaseCollapseController extends BaseComponentController {
+    /**
+     * Get section by index safely
+     */
+    getSection(index) {
+        return this.host.sections[index];
+    }
+    /**
+     * Update a specific section
+     */
+    updateSection(index, updates) {
+        // Use the host's updateSection method if available (preferred for consistency)
+        if (this.host.updateSection) {
+            this.host.updateSection(index, updates);
+            return;
+        }
+        // Fallback to direct update
+        const section = this.getSection(index);
+        if (section) {
+            // Create a new array with the updated section to trigger reactivity
+            const newSections = [...this.host.sections];
+            newSections[index] = Object.assign(Object.assign({}, section), updates);
+            this.host.sections = newSections;
+            this.host.requestUpdate();
+        }
+    }
+    /**
+     * Update multiple sections at once (more efficient for batch operations)
+     */
+    updateSections(updates) {
+        // Use the host's updateSections method if available (preferred for consistency)
+        if (this.host.updateSections) {
+            this.host.updateSections(updates);
+            return;
+        }
+        // Fallback to direct batch update
+        const newSections = [...this.host.sections];
+        let hasChanges = false;
+        updates.forEach(({ index, updates: sectionUpdates }) => {
+            const section = this.getSection(index);
+            if (section) {
+                newSections[index] = Object.assign(Object.assign({}, section), sectionUpdates);
+                hasChanges = true;
+            }
+        });
+        if (hasChanges) {
+            this.host.sections = newSections;
+            this.host.requestUpdate();
+        }
+    }
+    /**
+     * Get all open sections
+     */
+    getOpenSections() {
+        return this.host.sections
+            .map((section, index) => section.open ? index : -1)
+            .filter(index => index !== -1);
+    }
+}
+//# sourceMappingURL=base.controller.js.map

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

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseCollapseController } from './base.controller.js';
+export { CollapseAnimationController } from './animation.controller.js';
+export { CollapseKeyboardController } from './keyboard.controller.js';
+export { CollapseAccordionController } from './accordion.controller.js';
+export type { CollapseControllerHost } from './base.controller.js';
+export type { CollapseAccordionHost } from './accordion.controller.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// Export all collapse controllers
+export { BaseCollapseController } from './base.controller.js';
+export { CollapseAnimationController } from './animation.controller.js';
+export { CollapseKeyboardController } from './keyboard.controller.js';
+export { CollapseAccordionController } from './accordion.controller.js';
+//# sourceMappingURL=index.js.map