@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,3 @@
+export * from './input.component.js';
+export * as Validations from './validation.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,3 @@
+export * from './input.component.js';
+export * as Validations from './validation.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/input/input.component.d.ts

@@ -0,0 +1,174 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, type PropertyValues } from 'lit';
+import { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, INPUT_VARIANT, ValidationRule, InputValidationResult } from './input.types.js';
+import { InputValidationHost, InputEventHost } from './controllers/index.js';
+declare const NrInputElement_base: (new (...args: any[]) => import("./mixins/number-mixin.js").NumberCapable) & (new (...args: any[]) => import("./mixins/focus-mixin.js").FocusCapable) & (new (...args: any[]) => import("./mixins/selection-mixin.js").SelectionCapable) & (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * Versatile input component with validation, multiple types, and interactive features.
+ *
+ * @example
+ * ```html
+ * <nr-input type="text" placeholder="Enter name"></nr-input>
+ * <nr-input type="password"></nr-input>
+ * <nr-input type="number" min="0" max="100"></nr-input>
+ * ```
+ *
+ * @fires nr-input - Value changes
+ * @fires nr-focus - Input focused
+ * @fires nr-blur - Input blurred
+ * @fires nr-enter - Enter key pressed
+ * @fires nr-clear - Clear button clicked
+ *
+ * @slot label - Input label
+ * @slot helper-text - Helper text
+ * @slot addon-before - Content before input
+ * @slot addon-after - Content after input
+ */
+export declare class NrInputElement extends NrInputElement_base implements InputValidationHost, InputEventHost {
+    static styles: import("lit").CSSResult[];
+    private validationController;
+    private eventController;
+    /** Disables the input */
+    disabled: boolean;
+    /** Makes the input read-only */
+    readonly: boolean;
+    /** Visual state (default, success, warning, error) */
+    state: INPUT_STATE;
+    /** Current input value */
+    value: string;
+    /** Input size (small, medium, large) */
+    size: INPUT_SIZE;
+    /** Visual variant (outlined, underlined, filled) */
+    variant: INPUT_VARIANT;
+    /** Input type (text, password, number, email, etc.) */
+    type: INPUT_TYPE;
+    /** Step value for number inputs */
+    step?: string;
+    /** Minimum value for number inputs */
+    min?: string;
+    /** Maximum value for number inputs */
+    max?: string;
+    /** Placeholder text */
+    placeholder: string;
+    /** HTML autocomplete attribute */
+    autocomplete: string;
+    /** Field name for form submission */
+    name?: string;
+    /** Required field indicator */
+    required?: boolean;
+    /** Shows copy button */
+    withCopy: boolean;
+    /** Shows clear button */
+    allowClear: boolean;
+    /** Shows character counter */
+    showCount: boolean;
+    /** Maximum character limit */
+    maxLength?: number;
+    /** Array of validation rules */
+    rules: ValidationRule[];
+    /** Validate on change */
+    validateOnChangeInput: boolean;
+    /** Validate on blur */
+    validateOnBlurInput: boolean;
+    /** Show validation status icon */
+    hasFeedback: boolean;
+    /** Allow validation warnings */
+    allowWarnings: boolean;
+    /** Custom validation trigger */
+    validationTrigger: 'change' | 'blur' | 'submit';
+    /** Validation debounce delay in milliseconds */
+    validationDebounce?: number;
+    /** Input label for better error messages */
+    label?: string;
+    /** Debounce delay in milliseconds for input events */
+    debounce: number;
+    /** Validation message */
+    validationMessage?: string;
+    inputType: string;
+    hasAddonBefore: boolean;
+    hasAddonAfter: boolean;
+    focused: boolean;
+    private get _input();
+    get characterCountDisplay(): string;
+    get isOverCharacterLimit(): boolean;
+    protected get input(): HTMLInputElement;
+    protected get inputElement(): HTMLInputElement;
+    requiredComponents: string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handle validation events from the controller
+     */
+    private _handleValidationEvent;
+    willUpdate(_changedProperties: PropertyValues): void;
+    updated(_changedProperties: PropertyValues): void;
+    firstUpdated(): void;
+    private _checkInitialSlotContent;
+    private _handleSlotChange;
+    private _handleKeyDown;
+    private _valueChange;
+    private _focusEvent;
+    private _blurEvent;
+    private _handleIconKeydown;
+    private _onCopy;
+    private _onClear;
+    private _increment;
+    private _decrement;
+    private _togglePasswordIcon;
+    private _getAriaDescribedBy;
+    /**
+     * Setup default validation rules based on input properties
+     */
+    /**
+     * Override the form mixin's validateValue method with controller logic
+     */
+    protected validateValue(_value: string): boolean;
+    /**
+     * Add validation rule dynamically
+     */
+    addRule(rule: ValidationRule): void;
+    /**
+     * Remove validation rule
+     */
+    removeRule(predicate: (rule: ValidationRule) => boolean): void;
+    /**
+     * Clear all validation rules
+     */
+    clearRules(): void;
+    /**
+     * Get current validation status
+     */
+    getValidationStatus(): {
+        isValid: boolean;
+        isValidating: boolean;
+        errors: string[];
+        warnings: string[];
+    };
+    /**
+     * Trigger validation manually
+     */
+    validateInput(): Promise<boolean>;
+    /**
+     * Set validation state externally (for form integration)
+     */
+    setValidationStatus(result: InputValidationResult): void;
+    /**
+     * Get validation classes for CSS styling
+     */
+    protected getValidationClasses(): Record<string, boolean>;
+    /**
+     * Render validation feedback icon
+     */
+    private renderValidationIcon;
+    /**
+     * Render validation message
+     */
+    private renderValidationMessage;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=input.component.d.ts.map

package/dist/src/components/input/input.component.js

@@ -0,0 +1,490 @@
+/**
+ * @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;
+};
+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 { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './input.style.js';
+import { EMPTY_STRING } from './input.types.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { InputValidationUtils, InputRenderUtils } from './utils/index.js';
+import { SelectionMixin, FocusMixin, NumberMixin } from './mixins/index.js';
+import { InputValidationController, InputEventController } from './controllers/index.js';
+/**
+ * Versatile input component with validation, multiple types, and interactive features.
+ *
+ * @example
+ * ```html
+ * <nr-input type="text" placeholder="Enter name"></nr-input>
+ * <nr-input type="password"></nr-input>
+ * <nr-input type="number" min="0" max="100"></nr-input>
+ * ```
+ *
+ * @fires nr-input - Value changes
+ * @fires nr-focus - Input focused
+ * @fires nr-blur - Input blurred
+ * @fires nr-enter - Enter key pressed
+ * @fires nr-clear - Clear button clicked
+ *
+ * @slot label - Input label
+ * @slot helper-text - Helper text
+ * @slot addon-before - Content before input
+ * @slot addon-after - Content after input
+ */
+let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(SelectionMixin(NuralyUIBaseMixin(LitElement)))) {
+    constructor() {
+        super(...arguments);
+        this.validationController = new InputValidationController(this);
+        this.eventController = new InputEventController(this);
+        /** Disables the input */
+        this.disabled = false;
+        /** Makes the input read-only */
+        this.readonly = false;
+        /** Visual state (default, success, warning, error) */
+        this.state = "default" /* INPUT_STATE.Default */;
+        /** Current input value */
+        this.value = EMPTY_STRING;
+        /** Input size (small, medium, large) */
+        this.size = "medium" /* INPUT_SIZE.Medium */;
+        /** Visual variant (outlined, underlined, filled) */
+        this.variant = "outlined" /* INPUT_VARIANT.Outlined */;
+        /** Input type (text, password, number, email, etc.) */
+        this.type = "text" /* INPUT_TYPE.TEXT */;
+        /** Placeholder text */
+        this.placeholder = EMPTY_STRING;
+        /** HTML autocomplete attribute */
+        this.autocomplete = 'off';
+        /** Shows copy button */
+        this.withCopy = false;
+        /** Shows clear button */
+        this.allowClear = false;
+        /** Shows character counter */
+        this.showCount = false;
+        /** Array of validation rules */
+        this.rules = [];
+        /** Validate on change */
+        this.validateOnChangeInput = true;
+        /** Validate on blur */
+        this.validateOnBlurInput = true;
+        /** Show validation status icon */
+        this.hasFeedback = false;
+        /** Allow validation warnings */
+        this.allowWarnings = false;
+        /** Custom validation trigger */
+        this.validationTrigger = 'change';
+        /** Debounce delay in milliseconds for input events */
+        this.debounce = 0;
+        this.inputType = EMPTY_STRING;
+        this.hasAddonBefore = false;
+        this.hasAddonAfter = false;
+        this.focused = false;
+        this.requiredComponents = ['nr-icon'];
+        /**
+         * Handle validation events from the controller
+         */
+        this._handleValidationEvent = (event) => {
+            const customEvent = event;
+            const detail = customEvent.detail;
+            this.validationMessage = detail.validationMessage || '';
+            let newState = "default" /* INPUT_STATE.Default */;
+            if (detail.validationResult.hasError) {
+                newState = "error" /* INPUT_STATE.Error */;
+            }
+            else if (detail.validationResult.hasWarning && this.allowWarnings) {
+                newState = "warning" /* INPUT_STATE.Warning */;
+            }
+            else if (detail.validationResult.isValid && this.value && this.hasFeedback) {
+                newState = "success" /* INPUT_STATE.Success */;
+            }
+            if (this.state !== newState) {
+                this.state = newState;
+            }
+            this.requestUpdate();
+        };
+        this._handleKeyDown = (keyDownEvent) => {
+            this.eventController.handleKeyDown(keyDownEvent);
+        };
+        this._valueChange = (e) => {
+            this.eventController.handleValueChange(e);
+        };
+        this._focusEvent = (e) => {
+            this.eventController.handleFocus(e);
+        };
+        this._blurEvent = (e) => {
+            this.eventController.handleBlur(e);
+        };
+        this._handleIconKeydown = (keyDownEvent) => {
+            this.eventController.handleIconKeydown(keyDownEvent);
+        };
+    }
+    get _input() {
+        return this.shadowRoot.querySelector('#input');
+    }
+    get characterCountDisplay() {
+        const currentLength = this.value.length;
+        if (this.maxLength) {
+            return `${currentLength}/${this.maxLength}`;
+        }
+        return `${currentLength}`;
+    }
+    get isOverCharacterLimit() {
+        return this.maxLength ? this.value.length > this.maxLength : false;
+    }
+    get input() {
+        return this._input;
+    }
+    get inputElement() {
+        return this._input;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('nr-validation', this._handleValidationEvent);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        super.disconnectedCallback();
+        this.removeEventListener('nr-validation', this._handleValidationEvent);
+        (_b = (_a = this.validationController).clearDebounceTimer) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_d = (_c = this.eventController).clearDebounceTimer) === null || _d === void 0 ? void 0 : _d.call(_c);
+    }
+    willUpdate(_changedProperties) {
+        super.willUpdate(_changedProperties);
+        if (_changedProperties.has('type') || !this.inputType) {
+            this.inputType = this.type;
+        }
+        if (_changedProperties.has('type') || _changedProperties.has('min')) {
+            if (this.type === "number" /* INPUT_TYPE.NUMBER */ && this.min && !this.value) {
+                this.value = this.min;
+            }
+        }
+        if (_changedProperties.has('type') ||
+            _changedProperties.has('min') ||
+            _changedProperties.has('max') ||
+            _changedProperties.has('step')) {
+            InputValidationUtils.validateNumericProperties(this.type, this.min, this.max, this.step);
+        }
+        if (_changedProperties.has('type') ||
+            _changedProperties.has('required') ||
+            _changedProperties.has('maxLength') ||
+            _changedProperties.has('min') ||
+            _changedProperties.has('max')) {
+            this.validationController.setupValidationRules();
+        }
+    }
+    updated(_changedProperties) {
+        if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max') || _changedProperties.has('maxLength')) {
+            const input = this.input;
+            if (input) {
+                this.setStep(this.step);
+                if (this.min)
+                    input.setAttribute('min', this.min);
+                else
+                    input.removeAttribute('min');
+                if (this.max)
+                    input.setAttribute('max', this.max);
+                else
+                    input.removeAttribute('max');
+                if (this.maxLength)
+                    input.setAttribute('maxlength', this.maxLength.toString());
+                else
+                    input.removeAttribute('maxlength');
+            }
+        }
+        // Sync input element value when property changes externally
+        if (_changedProperties.has('value')) {
+            const input = this.input;
+            if (input && input.value !== this.value) {
+                input.value = this.value;
+            }
+        }
+    }
+    firstUpdated() {
+        this._checkInitialSlotContent();
+    }
+    _checkInitialSlotContent() {
+        const addonBeforeElements = this.querySelectorAll('[slot="addon-before"]');
+        this.hasAddonBefore = addonBeforeElements.length > 0;
+        const addonAfterElements = this.querySelectorAll('[slot="addon-after"]');
+        this.hasAddonAfter = addonAfterElements.length > 0;
+    }
+    _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;
+        }
+    }
+    _onCopy() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.eventController.handleCopy();
+        });
+    }
+    _onClear() {
+        this.eventController.handleClear();
+    }
+    _increment() {
+        this.eventController.handleIncrement();
+    }
+    _decrement() {
+        this.eventController.handleDecrement();
+    }
+    _togglePasswordIcon() {
+        this.eventController.handleTogglePassword();
+    }
+    _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(' ') || '';
+    }
+    /**
+     * Setup default validation rules based on input properties
+     */
+    /**
+     * Override the form mixin's validateValue method with controller logic
+     */
+    validateValue(_value) {
+        return this.validationController.validate();
+    }
+    /**
+     * Add validation rule dynamically
+     */
+    addRule(rule) {
+        this.validationController.addInputRule(rule);
+    }
+    /**
+     * Remove validation rule
+     */
+    removeRule(predicate) {
+        this.validationController.removeInputRule(predicate);
+    }
+    /**
+     * Clear all validation rules
+     */
+    clearRules() {
+        this.validationController.clearInputRules();
+    }
+    /**
+     * Get current validation status
+     */
+    getValidationStatus() {
+        return this.validationController.getValidationStatus();
+    }
+    /**
+     * Trigger validation manually
+     */
+    validateInput() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = this.validationController.validate();
+            if (this.validationController.isValidating) {
+                return new Promise((resolve) => {
+                    const checkValidation = () => {
+                        if (!this.validationController.isValidating) {
+                            resolve(this.validationController.isValid);
+                        }
+                        else {
+                            setTimeout(checkValidation, 50);
+                        }
+                    };
+                    checkValidation();
+                });
+            }
+            return result;
+        });
+    }
+    /**
+     * Set validation state externally (for form integration)
+     */
+    setValidationStatus(result) {
+        this.validationController.setValidationStatus(result);
+    }
+    /**
+     * Get validation classes for CSS styling
+     */
+    getValidationClasses() {
+        return this.validationController.getValidationClasses();
+    }
+    /**
+     * Render validation feedback icon
+     */
+    renderValidationIcon() {
+        return this.validationController.renderValidationIcon();
+    }
+    /**
+     * Render validation message
+     */
+    renderValidationMessage() {
+        return this.validationController.renderValidationMessage();
+    }
+    render() {
+        const validationClasses = this.getValidationClasses();
+        const validationRenderState = this.validationController.getValidationRenderState();
+        return html `
+      <slot name="label"></slot>
+      <div class="input-wrapper ${Object.entries(validationClasses).filter(([, value]) => value).map(([key]) => key).join(' ')}" 
+           part="input-wrapper" 
+           data-theme="${this.currentTheme}"
+           ?data-validating="${validationRenderState.isValidating}">
+        ${InputRenderUtils.renderAddonBefore(this.hasAddonBefore, (e) => this._handleSlotChange(e))}
+        <div data-size=${this.size} id="input-container" part="input-container">
+          ${InputRenderUtils.renderPrefix()}
+          <input
+            id="input"
+            part="input"
+            .disabled=${this.disabled}
+            .readOnly=${this.readonly}
+            .value=${this.value}
+            .placeholder=${this.placeholder}
+            .type="${this.inputType}"
+            .autocomplete=${this.autocomplete}
+            aria-invalid=${validationRenderState.validationResult.hasError ? '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))}
+          ${validationRenderState.hasValidationFeedback ? this.renderValidationIcon() : 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.renderValidationMessage()}
+      ${this.showCount ? html `
+        <div class="character-count" part="character-count" ?data-over-limit=${this.isOverCharacterLimit}>
+          ${this.characterCountDisplay}
+        </div>
+      ` : ''}
+    `;
+    }
+};
+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);
+__decorate([
+    property({ type: String, reflect: true })
+], NrInputElement.prototype, "value", void 0);
+__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);
+__decorate([
+    property({ type: String })
+], NrInputElement.prototype, "step", void 0);
+__decorate([
+    property({ type: String })
+], NrInputElement.prototype, "min", void 0);
+__decorate([
+    property({ type: String })
+], NrInputElement.prototype, "max", void 0);
+__decorate([
+    property({ type: String })
+], NrInputElement.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], NrInputElement.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: String })
+], NrInputElement.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrInputElement.prototype, "required", void 0);
+__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([
+    property({ type: Array })
+], NrInputElement.prototype, "rules", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'validate-on-change' })
+], NrInputElement.prototype, "validateOnChangeInput", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'validate-on-blur' })
+], NrInputElement.prototype, "validateOnBlurInput", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-feedback' })
+], NrInputElement.prototype, "hasFeedback", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'allow-warnings' })
+], NrInputElement.prototype, "allowWarnings", void 0);
+__decorate([
+    property({ type: String, attribute: 'validation-trigger' })
+], NrInputElement.prototype, "validationTrigger", void 0);
+__decorate([
+    property({ type: Number, attribute: 'validation-debounce' })
+], NrInputElement.prototype, "validationDebounce", void 0);
+__decorate([
+    property({ type: String })
+], NrInputElement.prototype, "label", void 0);
+__decorate([
+    property({ type: Number })
+], NrInputElement.prototype, "debounce", void 0);
+__decorate([
+    state()
+], NrInputElement.prototype, "validationMessage", 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);
+NrInputElement = __decorate([
+    customElement('nr-input')
+], NrInputElement);
+export { NrInputElement };
+//# sourceMappingURL=input.component.js.map

package/dist/src/components/input/input.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult[];
+//# sourceMappingURL=input.style.d.ts.map