tuix-webcomponents 0.62.0 → 0.64.0

package/dist/src/tuix-input/TuixInput.js

@@ -1,374 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, nothing, } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import '../tuix-icon/TuixIcon.js';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
-import { Palette } from '../utils/colors.js';
-import { DarkPalette } from '../utils/darkColors.js';
-import { hostStyles, inputColorStyles, inputComponentStyles, inputDescriptionStyles, inputFontStyles, inputIconStyles, inputSearchStyles, inputTitleStyles, } from './TuixInput.styles.js';
-import { DescriptionType, IconByDescriptionType, IconDescriptionColorDark, IconDescriptionColorLight, InputIconLocation, InputType, } from './enums/tuix-input.enums.js';
-import { InputState, } from './interfaces/tuix-input.interface.js';
-import { v4 as uuidv4 } from 'uuid';
-let TuixInput = class TuixInput extends LitElement {
-    constructor() {
-        var _a;
-        super(...arguments);
-        this._inputId = this._setIdInput();
-        this.disabled = false;
-        this.value = '';
-        this.placeholder = '';
-        this.title = '';
-        this.type = InputType.TEXT;
-        this.descriptionType = DescriptionType.TEXT;
-        this.dark = false;
-        this.readonly = false;
-        this.autofocus = false;
-        this._type = this.type;
-        this._letterCounter = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
-        this._previousType = this.type;
-        this._previousValue = '';
-        this._generalIconColorsLight = {
-            [InputState.INACTIVE]: Palette.BLACK,
-            [InputState.ACTIVE]: Palette.MAIN,
-            [InputState.DISABLED]: Palette.PRIMARY_300,
-        };
-        this._generalIconColorsDark = {
-            [InputState.INACTIVE]: DarkPalette.PRIMARY_100,
-            [InputState.ACTIVE]: DarkPalette.MAIN,
-            [InputState.DISABLED]: DarkPalette.PRIMARY_800,
-        };
-    }
-    _handleInputBase(e, eventName) {
-        this.dispatchEvent(new CustomEvent(eventName, {
-            detail: {
-                value: (e.target instanceof HTMLInputElement ||
-                    e.target instanceof HTMLTextAreaElement) &&
-                    e.target.value,
-            },
-            bubbles: true,
-        }));
-    }
-    _handleClickOnInput() {
-        if (this.disabled)
-            return;
-        this.dispatchEvent(new CustomEvent('on-click', {
-            bubbles: true,
-        }));
-    }
-    _handleInput(e) {
-        this._handleInputBase(e, 'on-change');
-        this._updateLetterCounter();
-    }
-    _handleBlur(e) {
-        this._handleInputBase(e, 'on-blur');
-    }
-    _handlePasswordIconClick() {
-        if (this._type === InputType.PASSWORD) {
-            this._type = InputType.TEXT;
-            this._inputElement.setAttribute('type', InputType.TEXT);
-        }
-        else {
-            this._type = InputType.PASSWORD;
-            this._inputElement.setAttribute('type', InputType.PASSWORD);
-        }
-    }
-    _formatIconSet({ iconName, colorByState, location = InputIconLocation.RIGHT, clickHandler = undefined, }) {
-        const iconSetContainerClasses = {
-            't-icon-set-container': true,
-            't-icon-click': !!clickHandler,
-            [`t-icon-${location}`]: true,
-        };
-        return html `<div
-      class="${classMap(iconSetContainerClasses)}"
-      @click="${clickHandler}"
-    >
-      ${Object.entries(colorByState).map(([state, color]) => html `<tuix-icon
-          size="${IconSizeVariant.FULL}"
-          name="${iconName}"
-          color="${color}"
-          class="t-icon-${state}"
-        ></tuix-icon>`)}
-    </div>`;
-    }
-    _updateLetterCounter() {
-        var _a;
-        if (this.maxlength != undefined && this.type === InputType.TEXT_AREA) {
-            this._letterCounter = Number((_a = this._inputElement.value) === null || _a === void 0 ? void 0 : _a.length);
-        }
-    }
-    _getInputTextFeatureTemplate() {
-        return html `${this.iconRight
-            ? this._formatIconSet({
-                iconName: this.iconRight,
-                colorByState: this.dark
-                    ? this._generalIconColorsDark
-                    : this._generalIconColorsLight,
-            })
-            : nothing}`;
-    }
-    _getInputSearchFeatureTemplate() {
-        const searchIconColorsLight = {
-            [InputState.INACTIVE]: Palette.BLACK,
-            [InputState.ACTIVE]: Palette.BLACK,
-            [InputState.DISABLED]: Palette.PRIMARY_300,
-        };
-        const searchIconColorsDark = {
-            [InputState.INACTIVE]: DarkPalette.PRIMARY_100,
-            [InputState.ACTIVE]: DarkPalette.PRIMARY_100,
-            [InputState.DISABLED]: DarkPalette.PRIMARY_800,
-        };
-        return html `${this._formatIconSet({
-            iconName: IconName.SEARCH,
-            colorByState: this.dark ? searchIconColorsDark : searchIconColorsLight,
-            location: InputIconLocation.LEFT,
-        })}`;
-    }
-    _getInputPasswordFeatureTemplate() {
-        return html `${this._formatIconSet({
-            iconName: this._type === InputType.PASSWORD
-                ? IconName.EYE_CLOSE_LINE
-                : IconName.EYE_ON,
-            colorByState: this.dark
-                ? this._generalIconColorsDark
-                : this._generalIconColorsLight,
-            clickHandler: this._handlePasswordIconClick,
-        })} `;
-    }
-    _getFeatureTemplateByInputType() {
-        switch (this.type) {
-            case InputType.SEARCH:
-                return this._getInputSearchFeatureTemplate();
-            case InputType.TEXT:
-                return this._getInputTextFeatureTemplate();
-            case InputType.PASSWORD:
-                return this._getInputPasswordFeatureTemplate();
-            default:
-                return html `${nothing}`;
-        }
-    }
-    _getInputElementClasses() {
-        const hasIconRight = this.type === InputType.PASSWORD || this.type === InputType.TEXT
-            ? !!this.iconRight
-            : false;
-        return {
-            't-input': true,
-            't-textarea': this.type === InputType.TEXT_AREA,
-            'with-title': !!this.title,
-            'with-icon-right': hasIconRight,
-            [`with-${this.descriptionType}`]: this.descriptionType !== DescriptionType.TEXT,
-        };
-    }
-    _getInputContainerClasses() {
-        return {
-            't-input-container': true,
-            't-textarea-container': this.type === InputType.TEXT_AREA,
-        };
-    }
-    _getMainContainerClasses() {
-        return {
-            't-textarea-main-container': this.type === InputType.TEXT_AREA,
-        };
-    }
-    _setIdInput() {
-        return uuidv4();
-    }
-    _getInputTemplate() {
-        return html `<input
-      id=${this._inputId}
-      type="text"
-      class="${classMap(this._getInputElementClasses())}"
-      ?disabled="${this.disabled}"
-      ?readonly="${this.readonly}"
-      .value="${this.value}"
-      .type="${this.type}"
-      placeholder="${this.placeholder || ' '}"
-      maxlength="${this.maxlength}"
-      @input="${this._handleInput}"
-      @blur="${this._handleBlur}"
-    >
-    </input>
-    ${this.title
-            ? html `<label for=${this._inputId} class="t-title"
-            >${this.title}</label
-          >`
-            : nothing}
-    ${this._getFeatureTemplateByInputType()}
-    `;
-    }
-    _getLetterCounterTemplate() {
-        if (!this._hasLetterCounter()) {
-            return html `${nothing}`;
-        }
-        return html `<div class="t-letter-counter">
-      ${this.maxlength
-            ? html `${this._letterCounter}/${this.maxlength}`
-            : nothing}
-    </div> `;
-    }
-    _hasLetterCounter() {
-        return (this.type === InputType.TEXT_AREA &&
-            typeof this.maxlength === 'number' &&
-            this.maxlength >= 0);
-    }
-    _getTextAreaTemplate() {
-        return html `<textarea
-        id="${this._inputId}"
-        class="${classMap(this._getInputElementClasses())}"
-        ?disabled="${this.disabled}"
-        ?readonly="${this.readonly}"
-        .value="${this.value}"
-        placeholder="${this.placeholder}"
-        maxlength="${this.maxlength}"
-        @input="${this._handleInput}"
-        @blur="${this._handleBlur}"
-      ></textarea>
-      ${this.title
-            ? html `<label for=${this._inputId} class="t-title"
-            >${this.title}</label
-          >`
-            : nothing} `;
-    }
-    _getIconDescriptionTemplate() {
-        if (!this.descriptionType ||
-            this.descriptionType === DescriptionType.TEXT) {
-            return html `${nothing}`;
-        }
-        return html `<tuix-icon
-      size="${IconSizeVariant.SMALL}"
-      name="${IconByDescriptionType[this.descriptionType]}"
-      color="${this.dark
-            ? IconDescriptionColorDark[this.descriptionType]
-            : IconDescriptionColorLight[this.descriptionType]}"
-    >
-    </tuix-icon>`;
-    }
-    _getDescriptionTemplate() {
-        var _a;
-        const isValidDescriptionType = this._hasValidDescriptionType();
-        if (!isValidDescriptionType) {
-            return html `<div></div>`;
-        }
-        const defaultDescription = {
-            [DescriptionType.WARNING]: 'Warning',
-            [DescriptionType.ERROR]: 'Error',
-            [DescriptionType.SUCCESS]: 'Success',
-            [DescriptionType.LOADING]: 'Loading',
-            [DescriptionType.TEXT]: '',
-        };
-        return html `<div class="t-input-description">
-      ${this._getIconDescriptionTemplate()}
-      <span
-        >${(_a = this.description) !== null && _a !== void 0 ? _a : defaultDescription[this.descriptionType]}</span
-      >
-    </div>`;
-    }
-    _hasValidDescriptionType() {
-        return Object.values(DescriptionType).includes(this.descriptionType);
-    }
-    _getDescriptionContainerTemplate() {
-        const hasLetterCounter = this._hasLetterCounter();
-        const hasDescription = this._hasValidDescriptionType() &&
-            (this.descriptionType === DescriptionType.TEXT
-                ? !!this.description
-                : true);
-        if (!hasLetterCounter && !hasDescription) {
-            return html `${nothing}`;
-        }
-        return html `<div class="t-input-description-container">
-      ${this._getDescriptionTemplate()} ${this._getLetterCounterTemplate()}
-    </div>`;
-    }
-    render() {
-        if (this._previousType !== this.type) {
-            this._previousType = this.type;
-            this._type = this.type;
-        }
-        if (this._previousValue !== this.value) {
-            this._previousValue = this.value;
-            this._letterCounter = this.value.length;
-        }
-        return html `<div class="${classMap(this._getMainContainerClasses())}">
-      <div
-        class="${classMap(this._getInputContainerClasses())}"
-        @click="${this._handleClickOnInput}"
-      >
-        ${this.type === InputType.TEXT_AREA
-            ? this._getTextAreaTemplate()
-            : this._getInputTemplate()}
-      </div>
-      ${this._getDescriptionContainerTemplate()}
-    </div>`;
-    }
-    updated(changedProperties) {
-        for (const [propName] of changedProperties) {
-            if (this.disabled || this.readonly)
-                break;
-            if (String(propName) !== 'autofocus')
-                continue;
-            if (this.autofocus) {
-                this._inputElement.focus();
-            }
-        }
-    }
-};
-TuixInput.styles = [
-    hostStyles,
-    inputComponentStyles,
-    inputFontStyles,
-    inputColorStyles,
-    inputTitleStyles,
-    inputIconStyles,
-    inputSearchStyles,
-    inputDescriptionStyles,
-];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TuixInput.prototype, "disabled", void 0);
-__decorate([
-    property({ type: IconName })
-], TuixInput.prototype, "iconRight", void 0);
-__decorate([
-    property({ type: String })
-], TuixInput.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], TuixInput.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: String })
-], TuixInput.prototype, "title", void 0);
-__decorate([
-    property({ type: InputType })
-], TuixInput.prototype, "type", void 0);
-__decorate([
-    property({ type: Number })
-], TuixInput.prototype, "maxlength", void 0);
-__decorate([
-    property({ type: String })
-], TuixInput.prototype, "description", void 0);
-__decorate([
-    property({ type: DescriptionType })
-], TuixInput.prototype, "descriptionType", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TuixInput.prototype, "dark", void 0);
-__decorate([
-    property({ type: Boolean })
-], TuixInput.prototype, "readonly", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TuixInput.prototype, "autofocus", void 0);
-__decorate([
-    query('.t-input-container .t-input')
-], TuixInput.prototype, "_inputElement", void 0);
-__decorate([
-    state()
-], TuixInput.prototype, "_type", void 0);
-__decorate([
-    state()
-], TuixInput.prototype, "_letterCounter", void 0);
-TuixInput = __decorate([
-    customElement('tuix-input')
-], TuixInput);
-export { TuixInput };
-//# sourceMappingURL=TuixInput.js.map

package/dist/src/tuix-input/TuixInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TuixInput.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  TemplateResult,\n  html,\n  nothing,\n  CSSResult,\n  PropertyValueMap,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '../tuix-icon/TuixIcon.js';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport { Palette } from '../utils/colors.js';\nimport { DarkPalette } from '../utils/darkColors.js';\nimport {\n  hostStyles,\n  inputColorStyles,\n  inputComponentStyles,\n  inputDescriptionStyles,\n  inputFontStyles,\n  inputIconStyles,\n  inputSearchStyles,\n  inputTitleStyles,\n} from './TuixInput.styles.js';\nimport {\n  DescriptionType,\n  IconByDescriptionType,\n  IconDescriptionColorDark,\n  IconDescriptionColorLight,\n  InputIconLocation,\n  InputType,\n} from './enums/tuix-input.enums.js';\nimport {\n  FormatIconSetParams,\n  InputState,\n} from './interfaces/tuix-input.interface.js';\nimport { v4 as uuidv4 } from 'uuid';\n\n@customElement('tuix-input')\nexport class TuixInput extends LitElement {\n  _inputId: string = this._setIdInput();\n\n  static styles: CSSResult[] = [\n    hostStyles,\n    inputComponentStyles,\n    inputFontStyles,\n    inputColorStyles,\n    inputTitleStyles,\n    inputIconStyles,\n    inputSearchStyles,\n    inputDescriptionStyles,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: IconName })\n  iconRight?: IconName;\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: InputType })\n  type = InputType.TEXT;\n\n  @property({ type: Number })\n  maxlength?: number;\n\n  @property({ type: String })\n  description?: string;\n\n  @property({ type: DescriptionType })\n  descriptionType = DescriptionType.TEXT;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean, reflect: true })\n  autofocus = false;\n\n  @query('.t-input-container .t-input')\n  private _inputElement!: HTMLInputElement;\n\n  @state()\n  private _type = this.type;\n\n  @state()\n  private _letterCounter = this.value?.length || 0;\n\n  private _previousType = this.type;\n\n  private _previousValue = '';\n\n  private _generalIconColorsLight: Record<InputState, Palette> = {\n    [InputState.INACTIVE]: Palette.BLACK,\n    [InputState.ACTIVE]: Palette.MAIN,\n    [InputState.DISABLED]: Palette.PRIMARY_300,\n  };\n\n  private _generalIconColorsDark: Record<InputState, DarkPalette> = {\n    [InputState.INACTIVE]: DarkPalette.PRIMARY_100,\n    [InputState.ACTIVE]: DarkPalette.MAIN,\n    [InputState.DISABLED]: DarkPalette.PRIMARY_800,\n  };\n\n  private _handleInputBase(e: InputEvent, eventName: string) {\n    this.dispatchEvent(\n      new CustomEvent(eventName, {\n        detail: {\n          value:\n            (e.target instanceof HTMLInputElement ||\n              e.target instanceof HTMLTextAreaElement) &&\n            e.target.value,\n        },\n        bubbles: true,\n      })\n    );\n  }\n\n  private _handleClickOnInput() {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('on-click', {\n        bubbles: true,\n      })\n    );\n  }\n\n  private _handleInput(e: InputEvent) {\n    this._handleInputBase(e, 'on-change');\n    this._updateLetterCounter();\n  }\n\n  private _handleBlur(e: InputEvent) {\n    this._handleInputBase(e, 'on-blur');\n  }\n\n  private _handlePasswordIconClick() {\n    if (this._type === InputType.PASSWORD) {\n      this._type = InputType.TEXT;\n      this._inputElement.setAttribute('type', InputType.TEXT);\n    } else {\n      this._type = InputType.PASSWORD;\n      this._inputElement.setAttribute('type', InputType.PASSWORD);\n    }\n  }\n\n  private _formatIconSet({\n    iconName,\n    colorByState,\n    location = InputIconLocation.RIGHT,\n    clickHandler = undefined,\n  }: FormatIconSetParams) {\n    const iconSetContainerClasses = {\n      't-icon-set-container': true,\n      't-icon-click': !!clickHandler,\n      [`t-icon-${location}`]: true,\n    };\n    return html`<div\n      class=\"${classMap(iconSetContainerClasses)}\"\n      @click=\"${clickHandler}\"\n    >\n      ${Object.entries(colorByState).map(\n        ([state, color]) => html`<tuix-icon\n          size=\"${IconSizeVariant.FULL}\"\n          name=\"${iconName}\"\n          color=\"${color}\"\n          class=\"t-icon-${state}\"\n        ></tuix-icon>`\n      )}\n    </div>`;\n  }\n\n  private _updateLetterCounter() {\n    if (this.maxlength != undefined && this.type === InputType.TEXT_AREA) {\n      this._letterCounter = Number(this._inputElement.value?.length);\n    }\n  }\n\n  private _getInputTextFeatureTemplate(): TemplateResult {\n    return html`${this.iconRight\n      ? this._formatIconSet({\n          iconName: this.iconRight,\n          colorByState: this.dark\n            ? this._generalIconColorsDark\n            : this._generalIconColorsLight,\n        })\n      : nothing}`;\n  }\n\n  private _getInputSearchFeatureTemplate(): TemplateResult {\n    const searchIconColorsLight: Record<InputState, Palette> = {\n      [InputState.INACTIVE]: Palette.BLACK,\n      [InputState.ACTIVE]: Palette.BLACK,\n      [InputState.DISABLED]: Palette.PRIMARY_300,\n    };\n\n    const searchIconColorsDark: Record<InputState, DarkPalette> = {\n      [InputState.INACTIVE]: DarkPalette.PRIMARY_100,\n      [InputState.ACTIVE]: DarkPalette.PRIMARY_100,\n      [InputState.DISABLED]: DarkPalette.PRIMARY_800,\n    };\n\n    return html`${this._formatIconSet({\n      iconName: IconName.SEARCH,\n      colorByState: this.dark ? searchIconColorsDark : searchIconColorsLight,\n      location: InputIconLocation.LEFT,\n    })}`;\n  }\n\n  private _getInputPasswordFeatureTemplate(): TemplateResult {\n    return html`${this._formatIconSet({\n      iconName:\n        this._type === InputType.PASSWORD\n          ? IconName.EYE_CLOSE_LINE\n          : IconName.EYE_ON,\n      colorByState: this.dark\n        ? this._generalIconColorsDark\n        : this._generalIconColorsLight,\n      clickHandler: this._handlePasswordIconClick,\n    })} `;\n  }\n\n  private _getFeatureTemplateByInputType(): TemplateResult {\n    switch (this.type) {\n      case InputType.SEARCH:\n        return this._getInputSearchFeatureTemplate();\n      case InputType.TEXT:\n        return this._getInputTextFeatureTemplate();\n      case InputType.PASSWORD:\n        return this._getInputPasswordFeatureTemplate();\n      default:\n        return html`${nothing}`;\n    }\n  }\n\n  private _getInputElementClasses() {\n    const hasIconRight =\n      this.type === InputType.PASSWORD || this.type === InputType.TEXT\n        ? !!this.iconRight\n        : false;\n    return {\n      't-input': true,\n      't-textarea': this.type === InputType.TEXT_AREA,\n      'with-title': !!this.title,\n      'with-icon-right': hasIconRight,\n      [`with-${this.descriptionType}`]:\n        this.descriptionType !== DescriptionType.TEXT,\n    };\n  }\n\n  private _getInputContainerClasses() {\n    return {\n      't-input-container': true,\n      't-textarea-container': this.type === InputType.TEXT_AREA,\n    };\n  }\n\n  private _getMainContainerClasses() {\n    return {\n      't-textarea-main-container': this.type === InputType.TEXT_AREA,\n    };\n  }\n\n  private _setIdInput() {\n    return uuidv4();\n  }\n\n  private _getInputTemplate(): TemplateResult {\n    return html`<input\n      id=${this._inputId}\n      type=\"text\"\n      class=\"${classMap(this._getInputElementClasses())}\"\n      ?disabled=\"${this.disabled}\"\n      ?readonly=\"${this.readonly}\"\n      .value=\"${this.value}\"\n      .type=\"${this.type}\"\n      placeholder=\"${this.placeholder || ' '}\"\n      maxlength=\"${this.maxlength}\"\n      @input=\"${this._handleInput}\"\n      @blur=\"${this._handleBlur}\"\n    >\n    </input>\n    ${\n      this.title\n        ? html`<label for=${this._inputId} class=\"t-title\"\n            >${this.title}</label\n          >`\n        : nothing\n    }\n    ${this._getFeatureTemplateByInputType()}\n    `;\n  }\n\n  private _getLetterCounterTemplate(): TemplateResult {\n    if (!this._hasLetterCounter()) {\n      return html`${nothing}`;\n    }\n    return html`<div class=\"t-letter-counter\">\n      ${this.maxlength\n        ? html`${this._letterCounter}/${this.maxlength}`\n        : nothing}\n    </div> `;\n  }\n\n  private _hasLetterCounter(): boolean {\n    return (\n      this.type === InputType.TEXT_AREA &&\n      typeof this.maxlength === 'number' &&\n      this.maxlength >= 0\n    );\n  }\n\n  private _getTextAreaTemplate(): TemplateResult {\n    return html`<textarea\n        id=\"${this._inputId}\"\n        class=\"${classMap(this._getInputElementClasses())}\"\n        ?disabled=\"${this.disabled}\"\n        ?readonly=\"${this.readonly}\"\n        .value=\"${this.value}\"\n        placeholder=\"${this.placeholder}\"\n        maxlength=\"${this.maxlength}\"\n        @input=\"${this._handleInput}\"\n        @blur=\"${this._handleBlur}\"\n      ></textarea>\n      ${this.title\n        ? html`<label for=${this._inputId} class=\"t-title\"\n            >${this.title}</label\n          >`\n        : nothing} `;\n  }\n\n  private _getIconDescriptionTemplate(): TemplateResult {\n    if (\n      !this.descriptionType ||\n      this.descriptionType === DescriptionType.TEXT\n    ) {\n      return html`${nothing}`;\n    }\n    return html`<tuix-icon\n      size=\"${IconSizeVariant.SMALL}\"\n      name=\"${IconByDescriptionType[this.descriptionType]}\"\n      color=\"${this.dark\n        ? IconDescriptionColorDark[this.descriptionType]\n        : IconDescriptionColorLight[this.descriptionType]}\"\n    >\n    </tuix-icon>`;\n  }\n\n  private _getDescriptionTemplate(): TemplateResult {\n    const isValidDescriptionType = this._hasValidDescriptionType();\n    if (!isValidDescriptionType) {\n      return html`<div></div>`;\n    }\n    const defaultDescription = {\n      [DescriptionType.WARNING]: 'Warning',\n      [DescriptionType.ERROR]: 'Error',\n      [DescriptionType.SUCCESS]: 'Success',\n      [DescriptionType.LOADING]: 'Loading',\n      [DescriptionType.TEXT]: '',\n    };\n    return html`<div class=\"t-input-description\">\n      ${this._getIconDescriptionTemplate()}\n      <span\n        >${this.description ?? defaultDescription[this.descriptionType]}</span\n      >\n    </div>`;\n  }\n\n  private _hasValidDescriptionType(): boolean {\n    return Object.values(DescriptionType).includes(this.descriptionType);\n  }\n\n  private _getDescriptionContainerTemplate(): TemplateResult {\n    const hasLetterCounter = this._hasLetterCounter();\n    const hasDescription =\n      this._hasValidDescriptionType() &&\n      (this.descriptionType === DescriptionType.TEXT\n        ? !!this.description\n        : true);\n    if (!hasLetterCounter && !hasDescription) {\n      return html`${nothing}`;\n    }\n    return html`<div class=\"t-input-description-container\">\n      ${this._getDescriptionTemplate()} ${this._getLetterCounterTemplate()}\n    </div>`;\n  }\n\n  protected render(): TemplateResult {\n    if (this._previousType !== this.type) {\n      this._previousType = this.type;\n      this._type = this.type;\n    }\n    if (this._previousValue !== this.value) {\n      this._previousValue = this.value;\n      this._letterCounter = this.value.length;\n    }\n    return html`<div class=\"${classMap(this._getMainContainerClasses())}\">\n      <div\n        class=\"${classMap(this._getInputContainerClasses())}\"\n        @click=\"${this._handleClickOnInput}\"\n      >\n        ${this.type === InputType.TEXT_AREA\n          ? this._getTextAreaTemplate()\n          : this._getInputTemplate()}\n      </div>\n      ${this._getDescriptionContainerTemplate()}\n    </div>`;\n  }\n\n  protected updated(changedProperties: PropertyValueMap<unknown>) {\n    for (const [propName] of changedProperties) {\n      if (this.disabled || this.readonly) break;\n      if (String(propName) !== 'autofocus') continue;\n      if (this.autofocus) {\n        this._inputElement.focus();\n      }\n    }\n  }\n}\n"]}

package/dist/src/tuix-input/TuixInput.styles.d.ts

@@ -1,8 +0,0 @@
-export declare const hostStyles: import("lit").CSSResult;
-export declare const inputComponentStyles: import("lit").CSSResult;
-export declare const inputFontStyles: import("lit").CSSResult;
-export declare const inputColorStyles: import("lit").CSSResult;
-export declare const inputTitleStyles: import("lit").CSSResult;
-export declare const inputIconStyles: import("lit").CSSResult;
-export declare const inputSearchStyles: import("lit").CSSResult;
-export declare const inputDescriptionStyles: import("lit").CSSResult;