tuix-webcomponents 0.0.20 → 0.0.22

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

@@ -0,0 +1,46 @@
+import { LitElement, TemplateResult } from 'lit';
+import '../tuix-icon/TuixIcon.js';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
+import { DescriptionType, InputType } from './enums/tuix-input.enums.js';
+export declare class TuixInput extends LitElement {
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    iconRight?: IconName;
+    value: string;
+    placeholder: string;
+    title: string;
+    type: InputType;
+    maxlength: undefined;
+    description: undefined;
+    descriptionType: DescriptionType;
+    dark: boolean;
+    readonly: boolean;
+    private _inputElement;
+    private _type;
+    private _letterCounter;
+    private _previousType;
+    private _preivousValue;
+    private _generalIconColorsLight;
+    private _generalIconColorsDark;
+    private _handleInputBase;
+    private _handleInput;
+    private _handleChange;
+    private _handlePasswordIconClick;
+    private _formatIconSet;
+    private _updateLetterCounter;
+    private _getInputTextFeatureTemplate;
+    private _getInputSearchFeatureTemplate;
+    private _getInputPasswordFeatureTemplate;
+    private _getFeatureTemplateByInputType;
+    private _getInputElementClasses;
+    private _getInputContainerClasses;
+    private _getInputTemplate;
+    private _getLetterCounterTemplate;
+    private _hasLetterCounter;
+    private _getTextAreaTemplate;
+    private _getIconDescriptionTemplate;
+    private _getDescriptionTemplate;
+    private _hasValidDescriptionType;
+    private _getDescriptionContainerTemplate;
+    protected render(): TemplateResult;
+}

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

@@ -0,0 +1,327 @@
+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';
+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';
+let TuixInput = class TuixInput extends LitElement {
+    constructor() {
+        var _a;
+        super(...arguments);
+        this.disabled = false;
+        this.value = '';
+        this.placeholder = '';
+        this.title = '';
+        this.type = InputType.TEXT;
+        this.maxlength = undefined;
+        this.description = undefined;
+        this.descriptionType = DescriptionType.TEXT;
+        this.dark = false;
+        this.readonly = false;
+        this._type = this.type;
+        this._letterCounter = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        this._previousType = this.type;
+        this._preivousValue = '';
+        this._generalIconColorsLight = {
+            inactive: palette.black,
+            active: palette.main,
+            disabled: palette.primary_300,
+        };
+        this._generalIconColorsDark = {
+            inactive: darkPalette.primary_100,
+            active: darkPalette.main,
+            disabled: darkPalette.primary_800,
+        };
+    }
+    _handleInputBase(e, eventName) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            detail: {
+                value: e.target.value,
+            },
+            bubbles: true,
+        }));
+    }
+    _handleInput(e) {
+        this._handleInputBase(e, 'input-single');
+        this._updateLetterCounter();
+    }
+    _handleChange(e) {
+        this._handleInputBase(e, 'change');
+    }
+    _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 = (_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 = {
+            inactive: palette.black,
+            active: palette.black,
+            disabled: palette.primary_300,
+        };
+        const searchIconColorsDark = {
+            inactive: darkPalette.primary_100,
+            active: darkPalette.primary_100,
+            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,
+            '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,
+        };
+    }
+    _getInputTemplate() {
+        return html `<input
+      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}"
+      @change="${this._handleChange}"
+    >
+    </input>
+    ${this.title ? html `<div class="t-title">${this.title}</div>` : 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
+        class="${classMap(this._getInputElementClasses())}"
+        ?disabled="${this.disabled}"
+        ?readonly="${this.readonly}"
+        .value="${this.value}"
+        placeholder="${this.placeholder}"
+        maxlength="${this.maxlength}"
+        @input="${this._handleInput}"
+        @change="${this._handleChange}"
+      ></textarea>
+      ${this.title
+            ? html `<div class="t-title">${this.title}</div>`
+            : 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._preivousValue !== this.value) {
+            this._preivousValue = this.value;
+            this._letterCounter = this.value.length;
+        }
+        return html `<div class="${classMap(this._getInputContainerClasses())}">
+        ${this.type === InputType.TEXT_AREA
+            ? this._getTextAreaTemplate()
+            : this._getInputTemplate()}
+      </div>
+      ${this._getDescriptionContainerTemplate()} `;
+    }
+};
+TuixInput.styles = [
+    hostStyles,
+    inputComponentStyles,
+    inputFontStyles,
+    inputColorStyles,
+    inputTitleStyles,
+    inputIconStyles,
+    inputSearchStyles,
+    inputDescriptionStyles,
+];
+__decorate([
+    property({ type: Boolean })
+], 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, reflect: true })
+], 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 })
+], TuixInput.prototype, "dark", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixInput.prototype, "readonly", 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

@@ -0,0 +1 @@
+{"version":3,"file":"TuixInput.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, nothing } 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  InputIconColors,\n} from './interfaces/tuix-input.interface.js';\n\n@customElement('tuix-input')\nexport class TuixInput extends LitElement {\n  static styles = [\n    hostStyles,\n    inputComponentStyles,\n    inputFontStyles,\n    inputColorStyles,\n    inputTitleStyles,\n    inputIconStyles,\n    inputSearchStyles,\n    inputDescriptionStyles,\n  ];\n\n  @property({ type: Boolean })\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, reflect: true })\n  maxlength = undefined;\n\n  @property({ type: String })\n  description = undefined;\n\n  @property({ type: DescriptionType })\n  descriptionType = DescriptionType.TEXT;\n\n  @property({ type: Boolean })\n  dark = false;\n\n  @property({ type: Boolean })\n  readonly = 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 _preivousValue = '';\n\n  private _generalIconColorsLight: InputIconColors = {\n    inactive: palette.black,\n    active: palette.main,\n    disabled: palette.primary_300,\n  };\n\n  private _generalIconColorsDark: InputIconColors = {\n    inactive: darkPalette.primary_100,\n    active: darkPalette.main,\n    disabled: darkPalette.primary_800,\n  };\n\n  private _handleInputBase(e: InputEvent, eventName: string) {\n    this.dispatchEvent(\n      new CustomEvent(eventName, {\n        detail: {\n          value: (e.target as HTMLInputElement).value,\n        },\n        bubbles: true,\n      })\n    );\n  }\n\n  private _handleInput(e: InputEvent) {\n    this._handleInputBase(e, 'input-single');\n    this._updateLetterCounter();\n  }\n\n  private _handleChange(e: InputEvent) {\n    this._handleInputBase(e, 'change');\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 = 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: InputIconColors = {\n      inactive: palette.black,\n      active: palette.black,\n      disabled: palette.primary_300,\n    };\n    const searchIconColorsDark: InputIconColors = {\n      inactive: darkPalette.primary_100,\n      active: darkPalette.primary_100,\n      disabled: darkPalette.primary_800,\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      '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 _getInputTemplate(): TemplateResult {\n    return html`<input\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      @change=\"${this._handleChange}\"\n    >\n    </input>\n    ${this.title ? html`<div class=\"t-title\">${this.title}</div>` : nothing}\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        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        @change=\"${this._handleChange}\"\n      ></textarea>\n      ${this.title\n        ? html`<div class=\"t-title\">${this.title}</div>`\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._preivousValue !== this.value) {\n      this._preivousValue = this.value;\n      this._letterCounter = this.value.length;\n    }\n    return html`<div class=\"${classMap(this._getInputContainerClasses())}\">\n        ${this.type === InputType.TEXT_AREA\n          ? this._getTextAreaTemplate()\n          : this._getInputTemplate()}\n      </div>\n      ${this._getDescriptionContainerTemplate()} `;\n  }\n}\n"]}

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

@@ -0,0 +1,8 @@
+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;