@nuralyui/input 0.0.4 → 0.0.5

package/input.component.js

@@ -10,12 +10,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, nothing } 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';
-let HyInputElement = class HyInputElement extends LitElement {
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import '../icon/icon.component.js';
+let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.disabled = false;
@@ -27,54 +38,158 @@ let HyInputElement = class HyInputElement extends LitElement {
         this.autocomplete = 'off';
         this.withCopy = false;
         this.inputType = EMPTY_STRING;
+        /**
+         * Required components that must be registered for this component to work properly
+         */
+        this.requiredComponents = ['hy-icon'];
+    }
+    /**
+     * Check for required dependencies when component is connected to DOM
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.validateDependencies();
     }
     willUpdate(_changedProperties) {
         if (_changedProperties.has('type')) {
             this.inputType = this.type;
-            if (this.inputType == "number" /* INPUT_TYPE.NUMBER */)
-                if (this.min && !this.value)
-                    this.value = this.min;
+            if (this.inputType === "number" /* INPUT_TYPE.NUMBER */ && this.min && !this.value) {
+                this.value = this.min;
+            }
+        }
+    }
+    updated(_changedProperties) {
+        if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max')) {
+            const input = this.input;
+            if (input) {
+                if (this.step)
+                    input.setAttribute('step', this.step);
+                else
+                    input.removeAttribute('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');
+            }
         }
     }
     _increment() {
         this.input.stepUp();
-        this.dispatchEvent(new CustomEvent('valueChange', {
-            detail: this.input,
+        this.value = this.input.value; // Sync the property
+        this.dispatchEvent(new CustomEvent('nr-input', {
+            detail: {
+                value: this.value,
+                target: this.input,
+                action: 'increment'
+            },
+            bubbles: true
         }));
     }
     _decrement() {
         this.input.stepDown();
-        this.dispatchEvent(new CustomEvent('valueChange', {
-            detail: this.input,
+        this.value = this.input.value; // Sync the property
+        this.dispatchEvent(new CustomEvent('nr-input', {
+            detail: {
+                value: this.value,
+                target: this.input,
+                action: 'decrement'
+            },
+            bubbles: true
         }));
     }
     _valueChange(e) {
-        this.dispatchEvent(new CustomEvent('valueChange', {
-            detail: e.target,
+        const target = e.target;
+        this.value = target.value;
+        this.dispatchEvent(new CustomEvent('nr-input', {
+            detail: {
+                value: this.value,
+                target: target,
+                originalEvent: e
+            },
+            bubbles: true
         }));
     }
     handleKeyDown(keyDownEvent) {
         if (keyDownEvent.key === 'Enter') {
-            this.dispatchEvent(new CustomEvent('enter-pressed', {
-                detail: keyDownEvent.target,
+            this.dispatchEvent(new CustomEvent('nr-enter', {
+                detail: {
+                    target: keyDownEvent.target,
+                    value: this.value,
+                    originalEvent: keyDownEvent
+                },
+                bubbles: true
             }));
         }
     }
+    _handleIconKeydown(keyDownEvent) {
+        if (keyDownEvent.key === 'Enter' || keyDownEvent.key === ' ') {
+            keyDownEvent.preventDefault();
+            const target = keyDownEvent.target;
+            if (target.id === 'copy-icon') {
+                this.onCopy();
+            }
+            else if (target.id === 'password-icon') {
+                this._togglePasswordIcon();
+            }
+            else if (target.closest('#number-icons')) {
+                if (target.getAttribute('name') === 'plus') {
+                    this._increment();
+                }
+                else if (target.getAttribute('name') === 'minus') {
+                    this._decrement();
+                }
+            }
+        }
+    }
     onCopy() {
-        const input = this.shadowRoot.getElementById('input');
-        input.select();
-        navigator.clipboard.writeText(input.value);
+        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
+                }));
+            }
+            catch (error) {
+                this.dispatchEvent(new CustomEvent('nr-copy-error', {
+                    detail: { error },
+                    bubbles: true
+                }));
+            }
+        });
+    }
+    _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');
+        }
+        return describedBy.join(' ') || '';
     }
     _focusEvent(e) {
-        this.dispatchEvent(new CustomEvent('focused', {
-            detail: e.target,
+        this.dispatchEvent(new CustomEvent('nr-focus', {
+            detail: {
+                target: e.target,
+                value: this.value
+            },
+            bubbles: true
         }));
     }
     _togglePasswordIcon() {
-        if (this.inputType == "password" /* INPUT_TYPE.PASSWORD */)
+        if (this.inputType === "password" /* INPUT_TYPE.PASSWORD */) {
             this.inputType = "text" /* INPUT_TYPE.TEXT */;
-        else if (this.inputType == "text" /* INPUT_TYPE.TEXT */)
+        }
+        else if (this.inputType === "text" /* INPUT_TYPE.TEXT */ && this.type === "password" /* INPUT_TYPE.PASSWORD */) {
             this.inputType = "password" /* INPUT_TYPE.PASSWORD */;
+        }
     }
     render() {
         return html `
@@ -85,11 +200,10 @@ let HyInputElement = class HyInputElement extends LitElement {
           .disabled=${this.disabled}
           .value=${this.value}
           .placeholder=${this.placeholder}
-          .step=${this.step ? this.step : nothing}
-          .min=${this.min ? this.min : nothing}
-          .max=${this.max ? this.max : nothing}
           .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}
@@ -99,7 +213,11 @@ let HyInputElement = class HyInputElement extends LitElement {
             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, [
@@ -118,7 +236,11 @@ let HyInputElement = class HyInputElement extends LitElement {
                   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>`,
                 ],
                 [
@@ -127,7 +249,11 @@ let HyInputElement = class HyInputElement extends LitElement {
                   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>`,
                 ],
             ])
@@ -146,48 +272,48 @@ let HyInputElement = class HyInputElement extends LitElement {
     `;
     }
 };
-HyInputElement.styles = styles;
+NrInputElement.styles = styles;
 __decorate([
     property({ type: Boolean, reflect: true })
-], HyInputElement.prototype, "disabled", void 0);
+], NrInputElement.prototype, "disabled", void 0);
 __decorate([
     property({ type: String, reflect: true })
-], HyInputElement.prototype, "state", void 0);
+], NrInputElement.prototype, "state", void 0);
 __decorate([
     property({ type: String })
-], HyInputElement.prototype, "value", void 0);
+], NrInputElement.prototype, "value", void 0);
 __decorate([
     property({ type: String })
-], HyInputElement.prototype, "size", void 0);
+], NrInputElement.prototype, "size", void 0);
 __decorate([
     property({ reflect: true })
-], HyInputElement.prototype, "type", void 0);
+], NrInputElement.prototype, "type", void 0);
 __decorate([
     property({ type: String })
-], HyInputElement.prototype, "step", void 0);
+], NrInputElement.prototype, "step", void 0);
 __decorate([
     property({ type: String })
-], HyInputElement.prototype, "min", void 0);
+], NrInputElement.prototype, "min", void 0);
 __decorate([
     property({ type: String })
-], HyInputElement.prototype, "max", void 0);
+], NrInputElement.prototype, "max", void 0);
 __decorate([
     property({ type: String })
-], HyInputElement.prototype, "placeholder", void 0);
+], NrInputElement.prototype, "placeholder", void 0);
 __decorate([
     property({ type: String })
-], HyInputElement.prototype, "autocomplete", void 0);
+], NrInputElement.prototype, "autocomplete", void 0);
 __decorate([
-    property()
-], HyInputElement.prototype, "withCopy", void 0);
+    property({ type: Boolean, reflect: true })
+], NrInputElement.prototype, "withCopy", void 0);
 __decorate([
     state()
-], HyInputElement.prototype, "inputType", void 0);
+], NrInputElement.prototype, "inputType", void 0);
 __decorate([
     query('#input')
-], HyInputElement.prototype, "input", void 0);
-HyInputElement = __decorate([
-    customElement('hy-input')
-], HyInputElement);
-export { HyInputElement };
+], NrInputElement.prototype, "input", void 0);
+NrInputElement = __decorate([
+    customElement('nr-input')
+], NrInputElement);
+export { NrInputElement };
 //# sourceMappingURL=input.component.js.map

package/input.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, PropertyValues, html, nothing} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './input.style.js';\nimport {INPUT_TYPE, INPUT_STATE, INPUT_SIZE, EMPTY_STRING} from './input.constant.js';\nimport {choose} from 'lit/directives/choose.js';\n\n@customElement('hy-input')\nexport class HyInputElement extends LitElement {\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: String, reflect: true})\n  state = INPUT_STATE.Default;\n\n  @property({type: String})\n  value = EMPTY_STRING;\n\n  @property({type: String})\n  size = INPUT_SIZE.Medium;\n\n  @property({reflect: true})\n  type = INPUT_TYPE.TEXT;\n\n  @property({type: String})\n  step!: string;\n\n  @property({type: String})\n  min!: string;\n\n  @property({type: String})\n  max!: string;\n\n  @property({type: String})\n  placeholder = EMPTY_STRING;\n\n  @property({type: String})\n  autocomplete = 'off';\n\n  @property()\n  withCopy = false;\n\n  @state()\n  inputType = EMPTY_STRING;\n\n  @query('#input')\n  input!: HTMLInputElement;\n\n  override willUpdate(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('type')) {\n      this.inputType = this.type;\n      if (this.inputType == INPUT_TYPE.NUMBER) if (this.min && !this.value) this.value = this.min;\n    }\n  }\n\n  private _increment() {\n    this.input.stepUp();\n    this.dispatchEvent(\n      new CustomEvent('valueChange', {\n        detail: this.input,\n      })\n    );\n  }\n  private _decrement() {\n    this.input.stepDown();\n    this.dispatchEvent(\n      new CustomEvent('valueChange', {\n        detail: this.input,\n      })\n    );\n  }\n\n  private _valueChange(e: Event) {\n    this.dispatchEvent(\n      new CustomEvent('valueChange', {\n        detail: e.target,\n      })\n    );\n  }\n  private handleKeyDown(keyDownEvent: KeyboardEvent) {\n    if (keyDownEvent.key === 'Enter') {\n      this.dispatchEvent(\n        new CustomEvent('enter-pressed', {\n          detail: keyDownEvent.target,\n        })\n      );\n    }\n  }\n  private onCopy() {\n    const input = this.shadowRoot!.getElementById('input')! as HTMLInputElement;\n    input.select();\n    navigator.clipboard.writeText(input.value);\n  }\n\n  private _focusEvent(e: Event) {\n    this.dispatchEvent(\n      new CustomEvent('focused', {\n        detail: e.target,\n      })\n    );\n  }\n\n  _togglePasswordIcon() {\n    if (this.inputType == INPUT_TYPE.PASSWORD) this.inputType = INPUT_TYPE.TEXT;\n    else if (this.inputType == INPUT_TYPE.TEXT) this.inputType = INPUT_TYPE.PASSWORD;\n  }\n\n  override render() {\n    return html`\n      <slot name=\"label\"></slot>\n      <div data-size=${this.size} id=\"input-container\">\n        <input\n          id=\"input\"\n          .disabled=${this.disabled}\n          .value=${this.value}\n          .placeholder=${this.placeholder}\n          .step=${this.step ? this.step : nothing}\n          .min=${this.min ? this.min : nothing}\n          .max=${this.max ? this.max : nothing}\n          .type=\"${this.inputType}\"\n          .autocomplete=${this.autocomplete}\n          @input=${this._valueChange}\n          @focus=${this._focusEvent}\n          @keydown=${this.handleKeyDown}\n        />\n        ${this.withCopy\n          ? html`<hy-icon\n            name=\"copy\"\n            type=\"regular\"\n            id=\"copy-icon\"\n            @click=${!this.disabled ? this.onCopy : nothing}\n          ></hy-icon>`\n          : nothing}\n        ${choose(this.state, [\n          [INPUT_STATE.Default, () => undefined],\n          [INPUT_STATE.Warning, () => html`<hy-icon name=\"warning\" id=\"warning-icon\"></hy-icon>`],\n          [INPUT_STATE.Error, () => html`<hy-icon name=\"exclamation-circle\" id=\"error-icon\"></hy-icon>`],\n        ])}\n        ${this.state == INPUT_STATE.Default && this.type == INPUT_TYPE.CALENDAR\n          ? html`<hy-icon name=\"calendar\" type=\"regular\" id=\"calendar-icon\"></hy-icon>`\n          : nothing}\n        ${this.type == INPUT_TYPE.PASSWORD\n          ? choose(this.inputType, [\n            [\n              INPUT_TYPE.TEXT,\n              () =>\n                html`<hy-icon\n                  name=\"eye-slash\"\n                  type=\"regular\"\n                  id=\"password-icon\"\n                  @click=${!this.disabled ? this._togglePasswordIcon : nothing}\n                ></hy-icon>`,\n            ],\n            [\n              INPUT_TYPE.PASSWORD,\n              () =>\n                html`<hy-icon\n                  name=\"eye\"\n                  type=\"regular\"\n                  id=\"password-icon\"\n                  @click=${!this.disabled ? this._togglePasswordIcon : nothing}\n                ></hy-icon>`,\n            ],\n          ])\n          : this.type == INPUT_TYPE.NUMBER\n            ? html`\n              <div id=\"number-icons\">\n                ${this.state != INPUT_STATE.Default ? html`<span id=\"icons-separator\">|</span>` : nothing}\n                <hy-icon name=\"minus\" @click=${!this.disabled ? this._decrement : nothing}></hy-icon>\n                <span id=\"icons-separator\">|</span>\n                <hy-icon name=\"plus\" @click=${!this.disabled ? this._increment : nothing}></hy-icon>\n              </div>\n            `\n            : nothing}\n      </div>\n      <slot name=\"helper-text\"></slot>\n    `;\n  }\n\n  static override styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hy-input': HyInputElement;\n  }\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'hy-input':\n        | React.DetailedHTMLProps<React.HTMLAttributes<HyInputElement>, HyInputElement>\n        | Partial<HyInputElement>;\n    }\n  }\n}"]}
+{"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './input.style.js';\nimport { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, EMPTY_STRING } from './input.constant.js';\nimport { choose } from 'lit/directives/choose.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport '../icon/icon.component.js';\n\n@customElement('nr-input')\nexport class NrInputElement extends NuralyUIBaseMixin(LitElement) {\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: String, reflect: true})\n  state = INPUT_STATE.Default;\n\n  @property({type: String})\n  value = EMPTY_STRING;\n\n  @property({type: String})\n  size = INPUT_SIZE.Medium;\n\n  @property({reflect: true})\n  type = INPUT_TYPE.TEXT;\n\n  @property({type: String})\n  step?: string;\n\n  @property({type: String})\n  min?: string;\n\n  @property({type: String})\n  max?: string;\n\n  @property({type: String})\n  placeholder = EMPTY_STRING;\n\n  @property({type: String})\n  autocomplete = 'off';\n\n  @property({type: Boolean, reflect: true})\n  withCopy = false;\n\n  @state()\n  inputType = EMPTY_STRING;\n\n  @query('#input')\n  input!: HTMLInputElement;\n\n  /**\n   * Required components that must be registered for this component to work properly\n   */\n  override requiredComponents = ['hy-icon'];\n\n  /**\n   * Check for required dependencies when component is connected to DOM\n   */\n  override connectedCallback() {\n    super.connectedCallback();\n    this.validateDependencies();\n  }\n\n  override willUpdate(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('type')) {\n      this.inputType = this.type;\n      if (this.inputType === INPUT_TYPE.NUMBER && this.min && !this.value) {\n        this.value = this.min;\n      }\n    }\n  }\n\n  override updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max')) {\n      const input = this.input;\n      if (input) {\n        if (this.step) input.setAttribute('step', this.step);\n        else input.removeAttribute('step');\n        \n        if (this.min) input.setAttribute('min', this.min);\n        else input.removeAttribute('min');\n        \n        if (this.max) input.setAttribute('max', this.max);\n        else input.removeAttribute('max');\n      }\n    }\n  }\n\n  private _increment() {\n    this.input.stepUp();\n    this.value = this.input.value; // Sync the property\n    this.dispatchEvent(\n      new CustomEvent('nr-input', {\n        detail: { \n          value: this.value, \n          target: this.input,\n          action: 'increment'\n        },\n        bubbles: true\n      })\n    );\n  }\n  private _decrement() {\n    this.input.stepDown();\n    this.value = this.input.value; // Sync the property\n    this.dispatchEvent(\n      new CustomEvent('nr-input', {\n        detail: { \n          value: this.value, \n          target: this.input,\n          action: 'decrement'\n        },\n        bubbles: true\n      })\n    );\n  }\n\n  private _valueChange(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    \n    this.dispatchEvent(\n      new CustomEvent('nr-input', {\n        detail: { \n          value: this.value, \n          target: target,\n          originalEvent: e \n        },\n        bubbles: true\n      })\n    );\n  }\n  private handleKeyDown(keyDownEvent: KeyboardEvent) {\n    if (keyDownEvent.key === 'Enter') {\n      this.dispatchEvent(\n        new CustomEvent('nr-enter', {\n          detail: {\n            target: keyDownEvent.target,\n            value: this.value,\n            originalEvent: keyDownEvent\n          },\n          bubbles: true\n        })\n      );\n    }\n  }\n\n  private _handleIconKeydown(keyDownEvent: KeyboardEvent) {\n    if (keyDownEvent.key === 'Enter' || keyDownEvent.key === ' ') {\n      keyDownEvent.preventDefault();\n      const target = keyDownEvent.target as HTMLElement;\n      \n      if (target.id === 'copy-icon') {\n        this.onCopy();\n      } else if (target.id === 'password-icon') {\n        this._togglePasswordIcon();\n      } else if (target.closest('#number-icons')) {\n        if (target.getAttribute('name') === 'plus') {\n          this._increment();\n        } else if (target.getAttribute('name') === 'minus') {\n          this._decrement();\n        }\n      }\n    }\n  }\n  private async onCopy() {\n    try {\n      const input = this.shadowRoot!.getElementById('input')! as HTMLInputElement;\n      input.select();\n      await navigator.clipboard.writeText(input.value);\n      \n      this.dispatchEvent(new CustomEvent('nr-copy-success', {\n        detail: { value: input.value },\n        bubbles: true\n      }));\n    } catch (error) {\n      this.dispatchEvent(new CustomEvent('nr-copy-error', {\n        detail: { error },\n        bubbles: true\n      }));\n    }\n  }\n\n  private _getAriaDescribedBy(): string {\n    const describedBy: string[] = [];\n    \n    // Check if helper text slot has content\n    const helperSlot = this.shadowRoot?.querySelector('slot[name=\"helper-text\"]');\n    if (helperSlot && (helperSlot as HTMLSlotElement).assignedNodes().length > 0) {\n      describedBy.push('helper-text');\n    }\n    \n    return describedBy.join(' ') || '';\n  }\n\n  private _focusEvent(e: Event) {\n    this.dispatchEvent(\n      new CustomEvent('nr-focus', {\n        detail: {\n          target: e.target,\n          value: this.value\n        },\n        bubbles: true\n      })\n    );\n  }\n\n  _togglePasswordIcon() {\n    if (this.inputType === INPUT_TYPE.PASSWORD) {\n      this.inputType = INPUT_TYPE.TEXT;\n    } else if (this.inputType === INPUT_TYPE.TEXT && this.type === INPUT_TYPE.PASSWORD) {\n      this.inputType = INPUT_TYPE.PASSWORD;\n    }\n  }\n\n  override render() {\n    return html`\n      <slot name=\"label\"></slot>\n      <div data-size=${this.size} id=\"input-container\">\n        <input\n          id=\"input\"\n          .disabled=${this.disabled}\n          .value=${this.value}\n          .placeholder=${this.placeholder}\n          .type=\"${this.inputType}\"\n          .autocomplete=${this.autocomplete}\n          aria-invalid=${this.state === INPUT_STATE.Error ? 'true' : 'false'}\n          aria-describedby=${this._getAriaDescribedBy()}\n          @input=${this._valueChange}\n          @focus=${this._focusEvent}\n          @keydown=${this.handleKeyDown}\n        />\n        ${this.withCopy\n          ? html`<hy-icon\n            name=\"copy\"\n            type=\"regular\"\n            id=\"copy-icon\"\n            role=\"button\"\n            aria-label=\"Copy input value\"\n            tabindex=\"0\"\n            @click=${!this.disabled ? this.onCopy : nothing}\n            @keydown=${this._handleIconKeydown}\n          ></hy-icon>`\n          : nothing}\n        ${choose(this.state, [\n          [INPUT_STATE.Default, () => undefined],\n          [INPUT_STATE.Warning, () => html`<hy-icon name=\"warning\" id=\"warning-icon\"></hy-icon>`],\n          [INPUT_STATE.Error, () => html`<hy-icon name=\"exclamation-circle\" id=\"error-icon\"></hy-icon>`],\n        ])}\n        ${this.state == INPUT_STATE.Default && this.type == INPUT_TYPE.CALENDAR\n          ? html`<hy-icon name=\"calendar\" type=\"regular\" id=\"calendar-icon\"></hy-icon>`\n          : nothing}\n        ${this.type == INPUT_TYPE.PASSWORD\n          ? choose(this.inputType, [\n            [\n              INPUT_TYPE.TEXT,\n              () =>\n                html`<hy-icon\n                  name=\"eye-slash\"\n                  type=\"regular\"\n                  id=\"password-icon\"\n                  role=\"button\"\n                  aria-label=\"Hide password\"\n                  tabindex=\"0\"\n                  @click=${!this.disabled ? this._togglePasswordIcon : nothing}\n                  @keydown=${this._handleIconKeydown}\n                ></hy-icon>`,\n            ],\n            [\n              INPUT_TYPE.PASSWORD,\n              () =>\n                html`<hy-icon\n                  name=\"eye\"\n                  type=\"regular\"\n                  id=\"password-icon\"\n                  role=\"button\"\n                  aria-label=\"Show password\"\n                  tabindex=\"0\"\n                  @click=${!this.disabled ? this._togglePasswordIcon : nothing}\n                  @keydown=${this._handleIconKeydown}\n                ></hy-icon>`,\n            ],\n          ])\n          : this.type == INPUT_TYPE.NUMBER\n            ? html`\n              <div id=\"number-icons\">\n                ${this.state != INPUT_STATE.Default ? html`<span id=\"icons-separator\">|</span>` : nothing}\n                <hy-icon name=\"minus\" @click=${!this.disabled ? this._decrement : nothing}></hy-icon>\n                <span id=\"icons-separator\">|</span>\n                <hy-icon name=\"plus\" @click=${!this.disabled ? this._increment : nothing}></hy-icon>\n              </div>\n            `\n            : nothing}\n      </div>\n      <slot name=\"helper-text\"></slot>\n    `;\n  }\n\n  static override styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-input': NrInputElement;\n  }\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'nr-input':\n        | React.DetailedHTMLProps<React.HTMLAttributes<NrInputElement>, NrInputElement>\n        | Partial<NrInputElement>;\n    }\n  }\n}"]}

package/input.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AA2MA,eAAO,MAAM,MAAM,2BAA+C,CAAC"}
+{"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AA0VA,eAAO,MAAM,MAAM,2BAA+C,CAAC"}