@nuralyui/input 0.0.5 → 0.0.7

package/input.component.js

@@ -19,30 +19,54 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { LitElement, html, nothing } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { styles } from './input.style.js';
-import { EMPTY_STRING } from './input.constant.js';
-import { choose } from 'lit/directives/choose.js';
+import { EMPTY_STRING } from './input.types.js';
 import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { InputValidationUtils } from './utils/input-validation.utils.js';
+import { InputRenderUtils } from './utils/input-renderers.js';
 import '../icon/icon.component.js';
 let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.disabled = false;
+        this.readonly = false;
         this.state = "default" /* INPUT_STATE.Default */;
         this.value = EMPTY_STRING;
         this.size = "medium" /* INPUT_SIZE.Medium */;
+        this.variant = "underlined" /* INPUT_VARIANT.Underlined */;
         this.type = "text" /* INPUT_TYPE.TEXT */;
         this.placeholder = EMPTY_STRING;
         this.autocomplete = 'off';
         this.withCopy = false;
+        this.allowClear = false;
+        this.showCount = false;
         this.inputType = EMPTY_STRING;
+        this.hasAddonBefore = false;
+        this.hasAddonAfter = false;
+        this.focused = false;
         /**
          * Required components that must be registered for this component to work properly
          */
         this.requiredComponents = ['hy-icon'];
     }
+    /**
+     * Get the character count display text
+     */
+    get characterCountDisplay() {
+        const currentLength = this.value.length;
+        if (this.maxLength) {
+            return `${currentLength}/${this.maxLength}`;
+        }
+        return `${currentLength}`;
+    }
+    /**
+     * Check if character count is over the limit
+     */
+    get isOverCharacterLimit() {
+        return this.maxLength ? this.value.length > this.maxLength : false;
+    }
     /**
      * Check for required dependencies when component is connected to DOM
      */
@@ -57,9 +81,16 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
                 this.value = this.min;
             }
         }
+        // Validate numeric properties when they change
+        if (_changedProperties.has('type') ||
+            _changedProperties.has('min') ||
+            _changedProperties.has('max') ||
+            _changedProperties.has('step')) {
+            InputValidationUtils.validateNumericProperties(this.type, this.min, this.max, this.step);
+        }
     }
     updated(_changedProperties) {
-        if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max')) {
+        if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max') || _changedProperties.has('maxLength')) {
             const input = this.input;
             if (input) {
                 if (this.step)
@@ -74,63 +105,293 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
                     input.setAttribute('max', this.max);
                 else
                     input.removeAttribute('max');
+                if (this.maxLength)
+                    input.setAttribute('maxlength', this.maxLength.toString());
+                else
+                    input.removeAttribute('maxlength');
             }
         }
     }
-    _increment() {
-        this.input.stepUp();
-        this.value = this.input.value; // Sync the property
-        this.dispatchEvent(new CustomEvent('nr-input', {
-            detail: {
-                value: this.value,
-                target: this.input,
-                action: 'increment'
-            },
+    firstUpdated() {
+        this._checkInitialSlotContent();
+    }
+    /**
+     * Check initial slot content on first render
+     */
+    _checkInitialSlotContent() {
+        // Check for addon-before content
+        const addonBeforeElements = this.querySelectorAll('[slot="addon-before"]');
+        this.hasAddonBefore = addonBeforeElements.length > 0;
+        // Check for addon-after content  
+        const addonAfterElements = this.querySelectorAll('[slot="addon-after"]');
+        this.hasAddonAfter = addonAfterElements.length > 0;
+    }
+    /**
+     * Handle slot changes to determine addon visibility
+     */
+    _handleSlotChange(e) {
+        const slot = e.target;
+        const slotName = slot.name;
+        if (slotName === 'addon-before') {
+            this.hasAddonBefore = slot.assignedElements().length > 0;
+        }
+        else if (slotName === 'addon-after') {
+            this.hasAddonAfter = slot.assignedElements().length > 0;
+        }
+    }
+    // ========================================
+    // FOCUS MANAGEMENT METHODS
+    // ========================================
+    /**
+     * Focus the input with advanced options
+     */
+    focus(options) {
+        if (!this.input)
+            return;
+        const focusOptions = Object.assign({ preventScroll: false }, options);
+        // Focus the input element
+        this.input.focus({ preventScroll: focusOptions.preventScroll });
+        // Handle cursor positioning
+        if (focusOptions.cursor !== undefined) {
+            this.setCursorPosition(focusOptions.cursor);
+        }
+        // Handle text selection
+        if (focusOptions.select) {
+            this.selectAll();
+        }
+    }
+    /**
+     * Blur the input with advanced options
+     */
+    blur(options) {
+        if (!this.input)
+            return;
+        const currentPosition = this.getCursorPosition();
+        this.input.blur();
+        // Restore cursor position if requested
+        if ((options === null || options === void 0 ? void 0 : options.restoreCursor) && currentPosition !== -1) {
+            // We'll restore it on next focus
+            this.input.dataset.restoreCursor = currentPosition.toString();
+        }
+    }
+    /**
+     * Select all text in the input
+     */
+    selectAll() {
+        if (!this.input)
+            return;
+        // Ensure the input is focused first
+        if (document.activeElement !== this.input) {
+            this.input.focus();
+        }
+        // Wait for next frame to ensure focus is complete
+        requestAnimationFrame(() => {
+            if (!this.input)
+                return;
+            this.input.select();
+        });
+    }
+    /**
+     * Select a range of text in the input
+     */
+    selectRange(start, end) {
+        if (!this.input)
+            return;
+        // Ensure the input is focused first
+        if (document.activeElement !== this.input) {
+            this.input.focus();
+        }
+        // Wait for next frame to ensure focus is complete
+        requestAnimationFrame(() => {
+            if (!this.input)
+                return;
+            const maxLength = this.input.value.length;
+            const validStart = Math.max(0, Math.min(start, maxLength));
+            const validEnd = Math.max(validStart, Math.min(end, maxLength));
+            this.input.setSelectionRange(validStart, validEnd);
+        });
+    }
+    /**
+     * Get the current cursor position
+     */
+    getCursorPosition() {
+        if (!this.input)
+            return -1;
+        return this.input.selectionStart || 0;
+    }
+    /**
+     * Set the cursor position
+     */
+    setCursorPosition(position) {
+        if (!this.input)
+            return;
+        // Ensure the input is focused first
+        if (document.activeElement !== this.input) {
+            this.input.focus();
+        }
+        requestAnimationFrame(() => {
+            if (!this.input)
+                return;
+            let pos;
+            const valueLength = this.value.length;
+            switch (position) {
+                case 'start':
+                    pos = 0;
+                    break;
+                case 'end':
+                    pos = valueLength;
+                    break;
+                case 'all':
+                    this.selectAll();
+                    return;
+                default:
+                    pos = typeof position === 'number' ? Math.min(Math.max(0, position), valueLength) : 0;
+            }
+            this.input.setSelectionRange(pos, pos);
+        });
+    }
+    /**
+     * Get the currently selected text
+     */
+    getSelectedText() {
+        if (!this.input)
+            return '';
+        const start = this.input.selectionStart || 0;
+        const end = this.input.selectionEnd || 0;
+        return this.value.substring(start, end);
+    }
+    /**
+     * Check if the input is currently focused
+     */
+    isFocused() {
+        return this.focused && document.activeElement === this.input;
+    }
+    // ========================================
+    // EVENT HANDLING METHODS
+    // ========================================
+    /**
+     * Centralized event dispatcher to ensure consistent event structure
+     */
+    _dispatchInputEvent(eventName, detail) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            detail,
             bubbles: true
         }));
     }
-    _decrement() {
-        this.input.stepDown();
-        this.value = this.input.value; // Sync the property
-        this.dispatchEvent(new CustomEvent('nr-input', {
-            detail: {
+    _handleKeyDown(keyDownEvent) {
+        // Prevent all key input when readonly
+        if (this.readonly) {
+            const allowedReadonlyKeys = [
+                'Tab', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+                'Home', 'End', 'PageUp', 'PageDown'
+            ];
+            if (keyDownEvent.ctrlKey || keyDownEvent.metaKey) {
+                const allowedCombinations = ['KeyA', 'KeyC'];
+                if (allowedCombinations.includes(keyDownEvent.code)) {
+                    return;
+                }
+            }
+            if (!allowedReadonlyKeys.includes(keyDownEvent.key)) {
+                keyDownEvent.preventDefault();
+                return;
+            }
+        }
+        // Handle Enter key
+        if (keyDownEvent.key === 'Enter') {
+            this._dispatchInputEvent('nr-enter', {
+                target: keyDownEvent.target,
                 value: this.value,
-                target: this.input,
-                action: 'decrement'
-            },
-            bubbles: true
-        }));
+                originalEvent: keyDownEvent
+            });
+            return;
+        }
+        // Prevent non-numeric input for number type
+        if (this.type === "number" /* INPUT_TYPE.NUMBER */) {
+            InputValidationUtils.preventNonNumericInput(keyDownEvent, this.min);
+            if (keyDownEvent.defaultPrevented) {
+                this._dispatchInputEvent('nr-invalid-key', {
+                    key: keyDownEvent.key,
+                    target: keyDownEvent.target,
+                    value: this.value,
+                    originalEvent: keyDownEvent
+                });
+            }
+        }
     }
     _valueChange(e) {
+        if (this.readonly) {
+            e.preventDefault();
+            return;
+        }
         const target = e.target;
-        this.value = target.value;
-        this.dispatchEvent(new CustomEvent('nr-input', {
-            detail: {
-                value: this.value,
+        const newValue = target.value;
+        // Check character limit
+        if (this.maxLength && newValue.length > this.maxLength) {
+            this._dispatchInputEvent('nr-character-limit-exceeded', {
+                value: newValue,
                 target: target,
+                limit: this.maxLength,
                 originalEvent: e
-            },
-            bubbles: true
-        }));
+            });
+            // Note: HTML maxlength attribute usually prevents this, but we dispatch event for awareness
+        }
+        if (this.type === "number" /* INPUT_TYPE.NUMBER */ && newValue) {
+            const validation = InputValidationUtils.validateNumericValue(newValue, this.min, this.max);
+            if (!validation.isValid) {
+                console.warn(validation.warnings[0]);
+                this._dispatchInputEvent('nr-validation-error', {
+                    value: newValue,
+                    target: target,
+                    error: validation.warnings[0],
+                    originalEvent: e
+                });
+                return;
+            }
+            validation.warnings.forEach(warning => console.warn(warning));
+        }
+        this.value = newValue;
+        this._dispatchInputEvent('nr-input', {
+            value: this.value,
+            target: target,
+            originalEvent: e
+        });
     }
-    handleKeyDown(keyDownEvent) {
-        if (keyDownEvent.key === 'Enter') {
-            this.dispatchEvent(new CustomEvent('nr-enter', {
-                detail: {
-                    target: keyDownEvent.target,
-                    value: this.value,
-                    originalEvent: keyDownEvent
-                },
-                bubbles: true
-            }));
+    _focusEvent(e) {
+        this.focused = true;
+        // Handle cursor restoration if requested
+        const input = e.target;
+        if (input.dataset.restoreCursor) {
+            const position = parseInt(input.dataset.restoreCursor, 10);
+            this.setCursorPosition(position);
+            delete input.dataset.restoreCursor;
         }
+        const focusDetail = {
+            focused: true,
+            cursorPosition: this.getCursorPosition(),
+            selectedText: this.getSelectedText()
+        };
+        this._dispatchInputEvent('nr-focus', Object.assign({ target: e.target, value: this.value }, focusDetail));
+        this._dispatchInputEvent('nr-focus-change', focusDetail);
+    }
+    _blurEvent(e) {
+        this.focused = false;
+        const focusDetail = {
+            focused: false,
+            cursorPosition: this.getCursorPosition(),
+            selectedText: this.getSelectedText()
+        };
+        this._dispatchInputEvent('nr-blur', Object.assign({ target: e.target, value: this.value }, focusDetail));
+        this._dispatchInputEvent('nr-focus-change', focusDetail);
     }
     _handleIconKeydown(keyDownEvent) {
         if (keyDownEvent.key === 'Enter' || keyDownEvent.key === ' ') {
             keyDownEvent.preventDefault();
             const target = keyDownEvent.target;
             if (target.id === 'copy-icon') {
-                this.onCopy();
+                this._onCopy();
+            }
+            else if (target.id === 'clear-icon') {
+                this._onClear();
             }
             else if (target.id === 'password-icon') {
                 this._togglePasswordIcon();
@@ -145,43 +406,80 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
             }
         }
     }
-    onCopy() {
+    _onCopy() {
         return __awaiter(this, void 0, void 0, function* () {
             try {
                 const input = this.shadowRoot.getElementById('input');
                 input.select();
                 yield navigator.clipboard.writeText(input.value);
-                this.dispatchEvent(new CustomEvent('nr-copy-success', {
-                    detail: { value: input.value },
-                    bubbles: true
-                }));
+                this._dispatchInputEvent('nr-copy-success', { value: input.value });
             }
             catch (error) {
-                this.dispatchEvent(new CustomEvent('nr-copy-error', {
-                    detail: { error },
-                    bubbles: true
-                }));
+                this._dispatchInputEvent('nr-copy-error', { error });
             }
         });
     }
-    _getAriaDescribedBy() {
-        var _a;
-        const describedBy = [];
-        // Check if helper text slot has content
-        const helperSlot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="helper-text"]');
-        if (helperSlot && helperSlot.assignedNodes().length > 0) {
-            describedBy.push('helper-text');
+    _onClear() {
+        if (this.disabled || this.readonly) {
+            return;
         }
-        return describedBy.join(' ') || '';
+        const previousValue = this.value;
+        this.value = EMPTY_STRING;
+        // Update the input element value
+        if (this.input) {
+            this.input.value = EMPTY_STRING;
+        }
+        this._dispatchInputEvent('nr-clear', {
+            previousValue,
+            target: this.input
+        });
+        // Also dispatch input event for consistency
+        this._dispatchInputEvent('nr-input', {
+            value: this.value,
+            target: this.input,
+            action: 'clear'
+        });
     }
-    _focusEvent(e) {
-        this.dispatchEvent(new CustomEvent('nr-focus', {
-            detail: {
-                target: e.target,
-                value: this.value
-            },
-            bubbles: true
-        }));
+    // ========================================
+    // OPERATION METHODS
+    // ========================================
+    _increment() {
+        try {
+            this.input.stepUp();
+            this.value = this.input.value;
+            this._dispatchInputEvent('nr-input', {
+                value: this.value,
+                target: this.input,
+                action: 'increment'
+            });
+        }
+        catch (error) {
+            console.warn('Failed to increment value:', error);
+            this._dispatchInputEvent('nr-increment-error', {
+                error,
+                value: this.value,
+                target: this.input
+            });
+        }
+    }
+    _decrement() {
+        try {
+            this.input.stepDown();
+            this.value = this.input.value;
+            this._dispatchInputEvent('nr-input', {
+                value: this.value,
+                target: this.input,
+                action: 'decrement'
+            });
+        }
+        catch (error) {
+            console.warn('Failed to decrement value:', error);
+            this._dispatchInputEvent('nr-decrement-error', {
+                error,
+                value: this.value,
+                target: this.input
+            });
+        }
     }
     _togglePasswordIcon() {
         if (this.inputType === "password" /* INPUT_TYPE.PASSWORD */) {
@@ -191,84 +489,56 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
             this.inputType = "password" /* INPUT_TYPE.PASSWORD */;
         }
     }
+    _getAriaDescribedBy() {
+        var _a;
+        const describedBy = [];
+        const helperSlot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="helper-text"]');
+        if (helperSlot && helperSlot.assignedNodes().length > 0) {
+            describedBy.push('helper-text');
+        }
+        return describedBy.join(' ') || '';
+    }
+    // ========================================
+    // RENDER METHODS
+    // ========================================
     render() {
         return html `
       <slot name="label"></slot>
-      <div data-size=${this.size} id="input-container">
-        <input
-          id="input"
-          .disabled=${this.disabled}
-          .value=${this.value}
-          .placeholder=${this.placeholder}
-          .type="${this.inputType}"
-          .autocomplete=${this.autocomplete}
-          aria-invalid=${this.state === "error" /* INPUT_STATE.Error */ ? 'true' : 'false'}
-          aria-describedby=${this._getAriaDescribedBy()}
-          @input=${this._valueChange}
-          @focus=${this._focusEvent}
-          @keydown=${this.handleKeyDown}
-        />
-        ${this.withCopy
-            ? html `<hy-icon
-            name="copy"
-            type="regular"
-            id="copy-icon"
-            role="button"
-            aria-label="Copy input value"
-            tabindex="0"
-            @click=${!this.disabled ? this.onCopy : nothing}
-            @keydown=${this._handleIconKeydown}
-          ></hy-icon>`
-            : nothing}
-        ${choose(this.state, [
-            ["default" /* INPUT_STATE.Default */, () => undefined],
-            ["warning" /* INPUT_STATE.Warning */, () => html `<hy-icon name="warning" id="warning-icon"></hy-icon>`],
-            ["error" /* INPUT_STATE.Error */, () => html `<hy-icon name="exclamation-circle" id="error-icon"></hy-icon>`],
-        ])}
-        ${this.state == "default" /* INPUT_STATE.Default */ && this.type == "calendar" /* INPUT_TYPE.CALENDAR */
-            ? html `<hy-icon name="calendar" type="regular" id="calendar-icon"></hy-icon>`
-            : nothing}
-        ${this.type == "password" /* INPUT_TYPE.PASSWORD */
-            ? choose(this.inputType, [
-                [
-                    "text" /* INPUT_TYPE.TEXT */,
-                    () => html `<hy-icon
-                  name="eye-slash"
-                  type="regular"
-                  id="password-icon"
-                  role="button"
-                  aria-label="Hide password"
-                  tabindex="0"
-                  @click=${!this.disabled ? this._togglePasswordIcon : nothing}
-                  @keydown=${this._handleIconKeydown}
-                ></hy-icon>`,
-                ],
-                [
-                    "password" /* INPUT_TYPE.PASSWORD */,
-                    () => html `<hy-icon
-                  name="eye"
-                  type="regular"
-                  id="password-icon"
-                  role="button"
-                  aria-label="Show password"
-                  tabindex="0"
-                  @click=${!this.disabled ? this._togglePasswordIcon : nothing}
-                  @keydown=${this._handleIconKeydown}
-                ></hy-icon>`,
-                ],
-            ])
-            : this.type == "number" /* INPUT_TYPE.NUMBER */
-                ? html `
-              <div id="number-icons">
-                ${this.state != "default" /* INPUT_STATE.Default */ ? html `<span id="icons-separator">|</span>` : nothing}
-                <hy-icon name="minus" @click=${!this.disabled ? this._decrement : nothing}></hy-icon>
-                <span id="icons-separator">|</span>
-                <hy-icon name="plus" @click=${!this.disabled ? this._increment : nothing}></hy-icon>
-              </div>
-            `
-                : nothing}
+      <div class="input-wrapper" data-theme="${this.currentTheme}">
+        ${InputRenderUtils.renderAddonBefore(this.hasAddonBefore, (e) => this._handleSlotChange(e))}
+        <div data-size=${this.size} id="input-container">
+          ${InputRenderUtils.renderPrefix()}
+          <input
+            id="input"
+            .disabled=${this.disabled}
+            .readOnly=${this.readonly}
+            .value=${this.value}
+            .placeholder=${this.placeholder}
+            .type="${this.inputType}"
+            .autocomplete=${this.autocomplete}
+            aria-invalid=${this.state === "error" /* INPUT_STATE.Error */ ? 'true' : 'false'}
+            aria-describedby=${this._getAriaDescribedBy()}
+            @input=${this._valueChange}
+            @focus=${this._focusEvent}
+            @blur=${this._blurEvent}
+            @keydown=${this._handleKeyDown}
+          />
+          ${InputRenderUtils.renderSuffix()}
+          ${InputRenderUtils.renderCopyIcon(this.withCopy, this.disabled, this.readonly, () => this._onCopy(), (e) => this._handleIconKeydown(e))}
+          ${InputRenderUtils.renderClearIcon(this.allowClear, this.value, this.disabled, this.readonly, () => this._onClear(), (e) => this._handleIconKeydown(e))}
+          ${InputRenderUtils.renderStateIcon(this.state)}
+          ${InputRenderUtils.renderCalendarIcon(this.state, this.type)}
+          ${InputRenderUtils.renderPasswordIcon(this.type, this.inputType, this.disabled, this.readonly, () => this._togglePasswordIcon(), (e) => this._handleIconKeydown(e))}
+          ${InputRenderUtils.renderNumberIcons(this.type, this.state, this.disabled, this.readonly, () => this._increment(), () => this._decrement(), (e) => this._handleIconKeydown(e))}
+        </div>
+        ${InputRenderUtils.renderAddonAfter(this.hasAddonAfter, (e) => this._handleSlotChange(e))}
       </div>
       <slot name="helper-text"></slot>
+      ${this.showCount ? html `
+        <div class="character-count" ?data-over-limit=${this.isOverCharacterLimit}>
+          ${this.characterCountDisplay}
+        </div>
+      ` : ''}
     `;
     }
 };
@@ -276,6 +546,9 @@ NrInputElement.styles = styles;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NrInputElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrInputElement.prototype, "readonly", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], NrInputElement.prototype, "state", void 0);
@@ -285,6 +558,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NrInputElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NrInputElement.prototype, "variant", void 0);
 __decorate([
     property({ reflect: true })
 ], NrInputElement.prototype, "type", void 0);
@@ -306,9 +582,27 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NrInputElement.prototype, "withCopy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrInputElement.prototype, "allowClear", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrInputElement.prototype, "showCount", void 0);
+__decorate([
+    property({ type: Number })
+], NrInputElement.prototype, "maxLength", void 0);
 __decorate([
     state()
 ], NrInputElement.prototype, "inputType", void 0);
+__decorate([
+    state()
+], NrInputElement.prototype, "hasAddonBefore", void 0);
+__decorate([
+    state()
+], NrInputElement.prototype, "hasAddonAfter", void 0);
+__decorate([
+    state()
+], NrInputElement.prototype, "focused", void 0);
 __decorate([
     query('#input')
 ], NrInputElement.prototype, "input", void 0);