@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/input/mixins/focus-mixin.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Options for focus behavior
+ */
+export interface FocusOptions {
+    preventScroll?: boolean;
+    selectText?: boolean;
+}
+/**
+ * Options for blur behavior
+ */
+export interface BlurOptions {
+    relatedTarget?: Element | null;
+}
+/**
+ * Interface for components that support focus operations
+ */
+export interface FocusCapable {
+    /**
+     * Focus the input element
+     * @param options - Focus options
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Blur the input element
+     * @param options - Blur options
+     */
+    blur(options?: BlurOptions): void;
+    /**
+     * Check if the input is currently focused
+     * @returns True if focused
+     */
+    isFocused(): boolean;
+}
+/**
+ * Mixin that provides focus management capabilities to input components
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with focus capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyInput extends FocusMixin(LitElement) {
+ *   @query('input') input!: HTMLInputElement;
+ *
+ *   handleClick() {
+ *     this.focus({ selectText: true });
+ *   }
+ * }
+ * ```
+ */
+export declare const FocusMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<FocusCapable> & T;
+export {};
+//# sourceMappingURL=focus-mixin.d.ts.map

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

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Mixin that provides focus management capabilities to input components
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with focus capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyInput extends FocusMixin(LitElement) {
+ *   @query('input') input!: HTMLInputElement;
+ *
+ *   handleClick() {
+ *     this.focus({ selectText: true });
+ *   }
+ * }
+ * ```
+ */
+export const FocusMixin = (superClass) => {
+    class FocusMixinClass extends superClass {
+        /**
+         * Get the input element - must be implemented by the component
+         */
+        get inputElement() {
+            var _a;
+            // Light DOM query
+            const input = this.querySelector('#input, input, textarea');
+            if (input) {
+                return input;
+            }
+            // Fallback to shadowRoot for components still using Shadow DOM
+            const shadowInput = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#input, input, textarea');
+            if (shadowInput) {
+                return shadowInput;
+            }
+            throw new Error('FocusMixin requires an input or textarea element');
+        }
+        focus(options = {}) {
+            const input = this.inputElement;
+            if (input) {
+                input.focus({ preventScroll: options.preventScroll });
+                if (options.selectText) {
+                    input.select();
+                }
+            }
+        }
+        blur() {
+            const input = this.inputElement;
+            if (input) {
+                input.blur();
+            }
+        }
+        isFocused() {
+            const input = this.inputElement;
+            return input ? document.activeElement === input : false;
+        }
+    }
+    // Cast return type to the superClass type passed in
+    return FocusMixinClass;
+};
+//# sourceMappingURL=focus-mixin.js.map

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

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { SelectionMixin } from './selection-mixin.js';
+export { FocusMixin } from './focus-mixin.js';
+export { NumberMixin } from './number-mixin.js';
+export type { SelectionCapable } from './selection-mixin.js';
+export type { FocusCapable, FocusOptions, BlurOptions } from './focus-mixin.js';
+export type { NumberCapable } from './number-mixin.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { SelectionMixin } from './selection-mixin.js';
+export { FocusMixin } from './focus-mixin.js';
+export { NumberMixin } from './number-mixin.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/input/mixins/number-mixin.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @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 number operations
+ */
+export interface NumberCapable {
+    /**
+     * Increment the number value
+     */
+    increment(): void;
+    /**
+     * Decrement the number value
+     */
+    decrement(): void;
+    /**
+     * Set the step attribute for number inputs
+     * @param step - The step value
+     */
+    setStep(step: string | undefined): void;
+    /**
+     * Validate if a step value is valid
+     * @param step - The step value to validate
+     * @returns True if valid
+     */
+    isValidStep(step: string | undefined): boolean;
+}
+/**
+ * Mixin that provides number input capabilities to input components
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with number capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyInput extends NumberMixin(LitElement) {
+ *   @query('input') input!: HTMLInputElement;
+ *
+ *   handleUpClick() {
+ *     this.increment();
+ *   }
+ * }
+ * ```
+ */
+export declare const NumberMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<NumberCapable> & T;
+export {};
+//# sourceMappingURL=number-mixin.d.ts.map

package/dist/src/components/input/mixins/number-mixin.js

@@ -0,0 +1,128 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Mixin that provides number input capabilities to input components
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with number capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyInput extends NumberMixin(LitElement) {
+ *   @query('input') input!: HTMLInputElement;
+ *
+ *   handleUpClick() {
+ *     this.increment();
+ *   }
+ * }
+ * ```
+ */
+export const NumberMixin = (superClass) => {
+    class NumberMixinClass extends superClass {
+        /**
+         * Get the input element - must be implemented by the component
+         */
+        get inputElement() {
+            var _a;
+            // Light DOM query
+            const input = this.querySelector('#input, input');
+            if (input) {
+                return input;
+            }
+            // Fallback to shadowRoot for components still using Shadow DOM
+            const shadowInput = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#input, input');
+            if (shadowInput) {
+                return shadowInput;
+            }
+            throw new Error('NumberMixin requires an input element');
+        }
+        /**
+         * Dispatch an input event - will be overridden by components that have _dispatchInputEvent
+         */
+        dispatchInputEvent(eventName, detail) {
+            // Try to use the component's _dispatchInputEvent method if available
+            if ('_dispatchInputEvent' in this && typeof this._dispatchInputEvent === 'function') {
+                this._dispatchInputEvent(eventName, detail);
+            }
+            else {
+                // Fallback to standard event dispatch
+                this.dispatchEvent(new CustomEvent(eventName, {
+                    detail,
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+        }
+        increment() {
+            try {
+                const input = this.inputElement;
+                if (!input.value) {
+                    const min = input.getAttribute('min');
+                    input.value = min ? min : '0';
+                }
+                input.stepUp();
+                const newValue = input.value;
+                this.dispatchInputEvent('nr-input', {
+                    value: newValue,
+                    target: input,
+                    action: 'increment'
+                });
+                if ('value' in this) {
+                    this.value = newValue;
+                }
+            }
+            catch (error) {
+                console.warn('Failed to increment value:', error);
+                this.dispatchInputEvent('nr-increment-error', {
+                    error,
+                    value: this.inputElement.value,
+                    target: this.inputElement
+                });
+            }
+        }
+        decrement() {
+            try {
+                const input = this.inputElement;
+                input.stepDown();
+                const newValue = input.value;
+                this.dispatchInputEvent('nr-input', {
+                    value: newValue,
+                    target: input,
+                    action: 'decrement'
+                });
+                if ('value' in this) {
+                    this.value = newValue;
+                }
+            }
+            catch (error) {
+                console.warn('Failed to decrement value:', error);
+                this.dispatchInputEvent('nr-decrement-error', {
+                    error,
+                    value: this.inputElement.value,
+                    target: this.inputElement
+                });
+            }
+        }
+        setStep(step) {
+            const input = this.inputElement;
+            if (step && this.isValidStep(step)) {
+                input.setAttribute('step', step);
+            }
+            else {
+                input.removeAttribute('step');
+            }
+        }
+        isValidStep(step) {
+            if (!step)
+                return true;
+            const stepValue = Number.parseFloat(step);
+            return !Number.isNaN(stepValue) && stepValue > 0;
+        }
+    }
+    // Cast return type to the superClass type passed in
+    return NumberMixinClass;
+};
+//# sourceMappingURL=number-mixin.js.map

package/dist/src/components/input/mixins/selection-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 text selection operations
+ */
+export interface SelectionCapable {
+    /**
+     * Select all text in the input
+     */
+    selectAll(): void;
+    /**
+     * Select a range of text in the input
+     * @param start - Start position
+     * @param end - End position
+     */
+    selectRange(start: number, end: number): void;
+    /**
+     * Get the current cursor position
+     * @returns The cursor position or null if not available
+     */
+    getCursorPosition(): number | null;
+    /**
+     * Set the cursor position
+     * @param position - The position to set
+     */
+    setCursorPosition(position: number): void;
+    /**
+     * Get the currently selected text
+     * @returns The selected text or empty string
+     */
+    getSelectedText(): string;
+}
+/**
+ * Mixin that provides text selection capabilities to input components
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with selection capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyInput extends SelectionMixin(LitElement) {
+ *   @query('input') input!: HTMLInputElement;
+ *
+ *   handleDoubleClick() {
+ *     this.selectAll();
+ *   }
+ * }
+ * ```
+ */
+export declare const SelectionMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<SelectionCapable> & T;
+export {};
+//# sourceMappingURL=selection-mixin.d.ts.map

package/dist/src/components/input/mixins/selection-mixin.js

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Mixin that provides text selection capabilities to input components
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with selection capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyInput extends SelectionMixin(LitElement) {
+ *   @query('input') input!: HTMLInputElement;
+ *
+ *   handleDoubleClick() {
+ *     this.selectAll();
+ *   }
+ * }
+ * ```
+ */
+export const SelectionMixin = (superClass) => {
+    class SelectionMixinClass extends superClass {
+        /**
+         * Get the input element - must be implemented by the component
+         */
+        get inputElement() {
+            var _a;
+            // Light DOM query
+            const input = this.querySelector('#input, input, textarea');
+            if (input) {
+                return input;
+            }
+            // Fallback to shadowRoot for components still using Shadow DOM
+            const shadowInput = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#input, input, textarea');
+            if (shadowInput) {
+                return shadowInput;
+            }
+            throw new Error('SelectionMixin requires an input or textarea element');
+        }
+        selectAll() {
+            const input = this.inputElement;
+            if (input) {
+                input.select();
+            }
+        }
+        selectRange(start, end) {
+            const input = this.inputElement;
+            if (input && input.setSelectionRange) {
+                input.focus();
+                input.setSelectionRange(start, end);
+            }
+        }
+        getCursorPosition() {
+            const input = this.inputElement;
+            if (input && typeof input.selectionStart === 'number') {
+                return input.selectionStart;
+            }
+            return null;
+        }
+        setCursorPosition(position) {
+            const input = this.inputElement;
+            if (input && input.setSelectionRange) {
+                input.focus();
+                input.setSelectionRange(position, position);
+            }
+        }
+        getSelectedText() {
+            const input = this.inputElement;
+            if (input && input.selectionStart !== null && input.selectionEnd !== null) {
+                return input.value.substring(input.selectionStart, input.selectionEnd);
+            }
+            return '';
+        }
+    }
+    // Cast return type to the superClass type passed in
+    return SelectionMixinClass;
+};
+//# sourceMappingURL=selection-mixin.js.map

package/dist/src/components/input/test/nr-input_test.d.ts

@@ -0,0 +1,2 @@
+import '../input.component';
+//# sourceMappingURL=nr-input_test.d.ts.map

package/dist/src/components/input/test/nr-input_test.js

@@ -0,0 +1,159 @@
+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 { EMPTY_STRING } from '../input.types';
+import '../input.component';
+suite('NrInputElement', () => {
+    test('default properties', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-input> </nr-input>`);
+        const inputContainer = el.shadowRoot.querySelector('#input-container');
+        const input = el.shadowRoot.querySelector('input');
+        const slot = el.shadowRoot.querySelector('slot');
+        const assignedNode = slot.assignedNodes();
+        expect(el.disabled).to.be.false;
+        expect(el.state).to.equal("default" /* INPUT_STATE.Default */);
+        expect(el.value).to.equal(EMPTY_STRING);
+        expect(el.size).to.equal("medium" /* INPUT_SIZE.Medium */);
+        expect(el.type).to.equal("text" /* INPUT_TYPE.TEXT */);
+        expect(el.placeholder).to.equal(EMPTY_STRING);
+        expect(el.min).to.be.undefined;
+        expect(el.max).to.be.undefined;
+        expect(el.step).to.be.undefined;
+        expect(input).to.not.have.attribute('min');
+        expect(input).to.not.have.attribute('max');
+        expect(input).to.not.have.attribute('step');
+        expect(input.disabled).to.be.false;
+        expect(input.type).to.equal("text" /* INPUT_TYPE.TEXT */);
+        expect(input.value).to.equal(EMPTY_STRING);
+        expect(input.placeholder).to.equal(EMPTY_STRING);
+        expect(inputContainer).to.have.attribute('data-size', "medium" /* INPUT_SIZE.Medium */);
+        expect(inputContainer.querySelector('#warning-icon')).to.be.null;
+        expect(inputContainer.querySelector('#error-icon')).to.be.null;
+        expect(inputContainer.querySelector('#password-icon')).to.be.null;
+        expect(inputContainer.querySelector('#number-icons')).to.be.null;
+        expect(assignedNode.length).to.equal(0);
+    }));
+    test('input type password', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-input type="password"> </nr-input>`);
+        const inputContainer = el.shadowRoot.querySelector('#input-container');
+        let passwordIcon = inputContainer.querySelector('#password-icon');
+        expect(inputContainer.querySelector('#number-icons')).to.be.null;
+        expect(passwordIcon).to.exist;
+        expect(passwordIcon).to.have.attribute('name', 'eye');
+        passwordIcon.click();
+        yield el.updateComplete;
+        expect(el.inputType).to.equal('text');
+        passwordIcon = inputContainer.querySelector('#password-icon');
+        expect(passwordIcon).to.have.attribute('name', 'eye-slash');
+    }));
+    suite('input type number', () => {
+        test('init number input ', () => __awaiter(void 0, void 0, void 0, function* () {
+            const step = 5;
+            const min = 10;
+            const max = 100;
+            const el = yield fixture(html `<nr-input type="number" step=${step} min=${min} max=${max}> </nr-input>`);
+            const inputContainer = el.shadowRoot.querySelector('#input-container');
+            const input = el.shadowRoot.querySelector('input');
+            const passwordIcon = inputContainer.querySelector('#password-icon');
+            const numberIcon = inputContainer.querySelector('#number-icons');
+            expect(passwordIcon).to.be.null;
+            expect(numberIcon).to.exist;
+            expect(input).to.have.attribute('min', min.toString());
+            expect(input).to.have.attribute('max', max.toString());
+            expect(input).to.have.attribute('step', step.toString());
+        }));
+        test('increment number', () => __awaiter(void 0, void 0, void 0, function* () {
+            const step = 5;
+            const min = 10;
+            const el = yield fixture(html `<nr-input type="number" step=${step} min=${min}> </nr-input>`);
+            const inputContainer = el.shadowRoot.querySelector('#input-container');
+            const input = el.shadowRoot.querySelector('input');
+            const numberIcon = inputContainer.querySelector('#number-icons');
+            const plusButton = numberIcon.querySelector("[name='plus']");
+            plusButton.click();
+            expect(input.value).to.equal((min + step).toString());
+        }));
+        test('decrement number', () => __awaiter(void 0, void 0, void 0, function* () {
+            const step = 5;
+            const el = yield fixture(html `<nr-input type="number" step=${step}> </nr-input>`);
+            const inputContainer = el.shadowRoot.querySelector('#input-container');
+            const input = el.shadowRoot.querySelector('input');
+            const inputValue = input.value;
+            const numberIcon = inputContainer.querySelector('#number-icons');
+            const minusButton = numberIcon.querySelector("[name='minus']");
+            minusButton.click();
+            expect(input.value).to.equal((+inputValue - step).toString());
+        }));
+    });
+    suite('input with state', () => {
+        test('warning input', () => __awaiter(void 0, void 0, void 0, function* () {
+            const inputState = "warning" /* INPUT_STATE.Warning */;
+            const el = yield fixture(html `<nr-input state=${inputState}> </nr-input>`);
+            const inputContainer = el.shadowRoot.querySelector('#input-container');
+            expect(inputContainer.querySelector('#warning-icon')).to.exist;
+            expect(inputContainer.querySelector('#error-icon')).to.not.exist;
+        }));
+        test('error input', () => __awaiter(void 0, void 0, void 0, function* () {
+            const inputState = "error" /* INPUT_STATE.Error */;
+            const el = yield fixture(html `<nr-input state=${inputState}> </nr-input>`);
+            const inputContainer = el.shadowRoot.querySelector('#input-container');
+            expect(inputContainer.querySelector('#warning-icon')).to.not.exist;
+            expect(inputContainer.querySelector('#error-icon')).to.exist;
+        }));
+    });
+    suite('input with size', () => {
+        test('large input', () => __awaiter(void 0, void 0, void 0, function* () {
+            const inputSize = "large" /* INPUT_SIZE.Large */;
+            const el = yield fixture(html `<nr-input size=${inputSize}> </nr-input>`);
+            const inputContainer = el.shadowRoot.querySelector('#input-container');
+            expect(inputContainer).to.have.attribute('data-size', inputSize);
+        }));
+        test('medium input', () => __awaiter(void 0, void 0, void 0, function* () {
+            const inputSize = "medium" /* INPUT_SIZE.Medium */;
+            const el = yield fixture(html `<nr-input size=${inputSize}> </nr-input>`);
+            const inputContainer = el.shadowRoot.querySelector('#input-container');
+            expect(inputContainer).to.have.attribute('data-size', inputSize);
+        }));
+    });
+    test('input with placeholder', () => __awaiter(void 0, void 0, void 0, function* () {
+        const placeholder = 'text of placeholder';
+        const el = yield fixture(html `<nr-input placeholder=${placeholder}> </nr-input>`);
+        const input = el.shadowRoot.querySelector('input');
+        expect(input).to.have.attribute('placeholder', placeholder);
+    }));
+    test('input with label', () => __awaiter(void 0, void 0, void 0, function* () {
+        const inputLabel = 'input label';
+        const el = yield fixture(html `<nr-input> <span slot="label">${inputLabel}</span> </nr-input>`);
+        const slot = el.shadowRoot.querySelector('slot');
+        const assignedNode = slot.assignedNodes();
+        expect(assignedNode[0]).to.have.attribute('slot', 'label');
+        expect(assignedNode[0].textContent).to.equal(inputLabel);
+    }));
+    test('input with helper text', () => __awaiter(void 0, void 0, void 0, function* () {
+        const inputHelper = 'input helper';
+        const el = yield fixture(html `<nr-input> <span slot="helper-text">${inputHelper}</span> </nr-input>`);
+        const slot = el.shadowRoot.querySelectorAll('slot');
+        const assignedNode = slot[1].assignedNodes();
+        expect(assignedNode[0]).to.have.attribute('slot', 'helper-text');
+        expect(assignedNode[0].textContent).to.equal(inputHelper);
+    }));
+    test('input disabled', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-input disabled></nr-input>`);
+        const input = el.shadowRoot.querySelector('input');
+        expect(input.disabled).to.be.true;
+        let inputFocus = false;
+        input.addEventListener('focus', () => {
+            inputFocus = true;
+        });
+        input.focus();
+        expect(inputFocus).to.equal(false);
+    }));
+});
+//# sourceMappingURL=nr-input_test.js.map

package/dist/src/components/input/utils/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { InputValidationUtils } from './input-validation.utils.js';
+export { InputRenderUtils } from './input-renderers.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/input/utils/index.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { InputValidationUtils } from './input-validation.utils.js';
+export { InputRenderUtils } from './input-renderers.js';
+//# sourceMappingURL=index.js.map