tuix-webcomponents 0.64.0 → 0.65.0

package/package-build/src/tuix-icon/TuixIcon.js

@@ -0,0 +1,79 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { IconName, IconSizeVariant, iconSize } from './enums/tuix-icon.enums';
+import { iconTemplate } from './TuixIcon.icons';
+import { Palette } from '../utils/colors';
+import { TextVariant, colorText, colorTextDark, } from '../tuix-text/enums/tuix-text.enums';
+let TuixIcon = class TuixIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = IconName.ARROW_DOWN;
+        this.size = IconSizeVariant.SMALL;
+        this.dark = false;
+    }
+    static { this.styles = css `
+    .icon-component {
+      width: 24px;
+      height: 24px;
+      display: block;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  `; }
+    _getSelectedColor(color) {
+        let selectedColor = color || this.color || TextVariant.PRIMARY;
+        if (Object.values(TextVariant).includes(selectedColor)) {
+            const colorMap = this.dark ? colorTextDark : colorText;
+            const nameColor = colorMap[selectedColor];
+            return nameColor;
+        }
+        if (Object.prototype.hasOwnProperty.call(Palette, selectedColor)) {
+            const nameColor = selectedColor;
+            selectedColor = Palette[nameColor];
+        }
+        return selectedColor;
+    }
+    _getSelectedFill() {
+        return this.fill ? this._getSelectedColor(this.fill) : undefined;
+    }
+    _getIconTemplate() {
+        return iconTemplate(this.name, this._getSelectedColor(), this._getSelectedFill());
+    }
+    render() {
+        const selectedSize = iconSize[this.size] ?? iconSize[IconSizeVariant.SMALL];
+        const dynamicStyles = {
+            width: selectedSize,
+            height: selectedSize,
+        };
+        return html `
+      <div class="icon-component" style="${styleMap(dynamicStyles)}">
+        ${this._getIconTemplate()}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: IconName })
+], TuixIcon.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], TuixIcon.prototype, "color", void 0);
+__decorate([
+    property({ type: IconSizeVariant })
+], TuixIcon.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixIcon.prototype, "dark", void 0);
+__decorate([
+    property({ type: String })
+], TuixIcon.prototype, "fill", void 0);
+TuixIcon = __decorate([
+    customElement('tuix-icon')
+], TuixIcon);
+export { TuixIcon };

package/package-build/src/tuix-icon/enums/tuix-icon.enums.d.ts

@@ -0,0 +1,62 @@
+export declare enum IconSizeVariant {
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    FULL = "full"
+}
+export declare const iconSize: Record<IconSizeVariant, string>;
+export declare enum IconName {
+    ARROW_DOWN = "arrow-down",
+    ARROW_LEFT = "arrow-left",
+    ARROW_UP = "arrow-up",
+    ARROW_RIGHT = "arrow-right",
+    SEARCH = "search",
+    EYE_ON = "eye-on",
+    EYE_OFF = "eye-off",
+    EYE_CLOSE_LINE = "eye-close-line",
+    TRIANGLE_EXCLAMATION = "triangle-exclamation",
+    CIRCLE_X = "circle-x",
+    LOADER = "loader",
+    CIRCLE_CHECK = "circle-check",
+    CHEVRON_DOWN = "chevron-down",
+    CHEVRON_UP = "chevron-up",
+    CHEVRON_LEFT = "chevron-left",
+    CHEVRON_RIGHT = "chevron-right",
+    CHECK = "check",
+    NAV_HAMBURGUER = "nav-hamburguer",
+    SUN = "sun",
+    MOON = "moon",
+    BOOKMARK = "bookmark",
+    UPLOAD = "upload",
+    DOWNLOAD = "download",
+    MAP_PIN = "map-pin",
+    PHONE = "phone",
+    MAIL = "mail",
+    FACEBOOK = "facebook",
+    TWITTER = "twitter",
+    LINKEDIN = "linkedin",
+    SHARE = "share",
+    COPY = "copy",
+    GOOGLE = "google",
+    BELL = "bell",
+    GEAR = "gear",
+    LOGOUT = "logout",
+    CIRCLE_EXCLAMATION = "circle-exclamation",
+    CAMERA = "camera",
+    PENCIL = "pencil",
+    X = "x",
+    PLUS = "plus",
+    INVOICE = "invoice",
+    DELETE = "delete",
+    TRIANGLE_ARROW_DOWN = "triangle-arrow-down",
+    USERS = "users",
+    CLOCK = "clock",
+    CHECK_CLOCK = "check-clock",
+    GLOBE = "globe",
+    CALENDAR = "calendar",
+    STATS = "stats",
+    HOLIDAYS = "holidays",
+    TRENDING_UP = "trending-up",
+    ARCHIVE = "archive",
+    ACCESS_TOKEN = "access-token"
+}

package/package-build/src/tuix-icon/enums/tuix-icon.enums.js

@@ -0,0 +1,69 @@
+export var IconSizeVariant;
+(function (IconSizeVariant) {
+    IconSizeVariant["SMALL"] = "small";
+    IconSizeVariant["MEDIUM"] = "medium";
+    IconSizeVariant["LARGE"] = "large";
+    IconSizeVariant["FULL"] = "full";
+})(IconSizeVariant || (IconSizeVariant = {}));
+export const iconSize = {
+    [IconSizeVariant.SMALL]: '16px',
+    [IconSizeVariant.MEDIUM]: '24px',
+    [IconSizeVariant.LARGE]: '32px',
+    [IconSizeVariant.FULL]: '100%',
+};
+export var IconName;
+(function (IconName) {
+    IconName["ARROW_DOWN"] = "arrow-down";
+    IconName["ARROW_LEFT"] = "arrow-left";
+    IconName["ARROW_UP"] = "arrow-up";
+    IconName["ARROW_RIGHT"] = "arrow-right";
+    IconName["SEARCH"] = "search";
+    IconName["EYE_ON"] = "eye-on";
+    IconName["EYE_OFF"] = "eye-off";
+    IconName["EYE_CLOSE_LINE"] = "eye-close-line";
+    IconName["TRIANGLE_EXCLAMATION"] = "triangle-exclamation";
+    IconName["CIRCLE_X"] = "circle-x";
+    IconName["LOADER"] = "loader";
+    IconName["CIRCLE_CHECK"] = "circle-check";
+    IconName["CHEVRON_DOWN"] = "chevron-down";
+    IconName["CHEVRON_UP"] = "chevron-up";
+    IconName["CHEVRON_LEFT"] = "chevron-left";
+    IconName["CHEVRON_RIGHT"] = "chevron-right";
+    IconName["CHECK"] = "check";
+    IconName["NAV_HAMBURGUER"] = "nav-hamburguer";
+    IconName["SUN"] = "sun";
+    IconName["MOON"] = "moon";
+    IconName["BOOKMARK"] = "bookmark";
+    IconName["UPLOAD"] = "upload";
+    IconName["DOWNLOAD"] = "download";
+    IconName["MAP_PIN"] = "map-pin";
+    IconName["PHONE"] = "phone";
+    IconName["MAIL"] = "mail";
+    IconName["FACEBOOK"] = "facebook";
+    IconName["TWITTER"] = "twitter";
+    IconName["LINKEDIN"] = "linkedin";
+    IconName["SHARE"] = "share";
+    IconName["COPY"] = "copy";
+    IconName["GOOGLE"] = "google";
+    IconName["BELL"] = "bell";
+    IconName["GEAR"] = "gear";
+    IconName["LOGOUT"] = "logout";
+    IconName["CIRCLE_EXCLAMATION"] = "circle-exclamation";
+    IconName["CAMERA"] = "camera";
+    IconName["PENCIL"] = "pencil";
+    IconName["X"] = "x";
+    IconName["PLUS"] = "plus";
+    IconName["INVOICE"] = "invoice";
+    IconName["DELETE"] = "delete";
+    IconName["TRIANGLE_ARROW_DOWN"] = "triangle-arrow-down";
+    IconName["USERS"] = "users";
+    IconName["CLOCK"] = "clock";
+    IconName["CHECK_CLOCK"] = "check-clock";
+    IconName["GLOBE"] = "globe";
+    IconName["CALENDAR"] = "calendar";
+    IconName["STATS"] = "stats";
+    IconName["HOLIDAYS"] = "holidays";
+    IconName["TRENDING_UP"] = "trending-up";
+    IconName["ARCHIVE"] = "archive";
+    IconName["ACCESS_TOKEN"] = "access-token";
+})(IconName || (IconName = {}));

package/package-build/src/tuix-icon-button/TuixIconButton.d.ts

@@ -0,0 +1,9 @@
+import { type TemplateResult } from 'lit';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
+export declare class TuixIconButton extends TuixBaseButton {
+    static styles: import("lit").CSSResult[];
+    icon: IconName;
+    protected _updateIconColor(): void;
+    protected _buttonContent(): TemplateResult;
+}

package/package-build/src/tuix-icon-button/TuixIconButton.js

@@ -0,0 +1,51 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { customElement, property } from 'lit/decorators.js';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles';
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
+let TuixIconButton = class TuixIconButton extends TuixBaseButton {
+    constructor() {
+        super(...arguments);
+        this.icon = IconName.ARROW_DOWN;
+    }
+    static { this.styles = [
+        css `
+      .button {
+        padding: 16px;
+        border-radius: 4px;
+        border: none;
+      }
+
+      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+        .button {
+          padding: 12px;
+        }
+      }
+
+      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+        .button {
+          padding: 8px;
+        }
+      }
+    `,
+        hostButtonStyles,
+        buttonColorStyles,
+    ]; }
+    _updateIconColor() {
+        if (!this.icon)
+            return;
+        this.iconColor = this._getTextColor();
+    }
+    _buttonContent() {
+        return html `${this._iconTemplate(this.icon, IconSizeVariant.MEDIUM)}`;
+    }
+};
+__decorate([
+    property({ type: IconName })
+], TuixIconButton.prototype, "icon", void 0);
+TuixIconButton = __decorate([
+    customElement('tuix-icon-button')
+], TuixIconButton);
+export { TuixIconButton };

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

@@ -0,0 +1,52 @@
+import { LitElement, type TemplateResult, CSSResult, type PropertyValueMap } 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 {
+    _inputId: string;
+    static styles: CSSResult[];
+    disabled: boolean;
+    iconRight?: IconName;
+    value: string;
+    placeholder: string;
+    title: string;
+    type: InputType;
+    maxlength?: number;
+    description?: string;
+    descriptionType: DescriptionType;
+    dark: boolean;
+    readonly: boolean;
+    autofocus: boolean;
+    private _inputElement;
+    private _type;
+    private _letterCounter;
+    private _previousType;
+    private _previousValue;
+    private _generalIconColorsLight;
+    private _generalIconColorsDark;
+    private _handleInputBase;
+    private _handleClickOnInput;
+    private _handleInput;
+    private _handleBlur;
+    private _handlePasswordIconClick;
+    private _formatIconSet;
+    private _updateLetterCounter;
+    private _getInputTextFeatureTemplate;
+    private _getInputSearchFeatureTemplate;
+    private _getInputPasswordFeatureTemplate;
+    private _getFeatureTemplateByInputType;
+    private _getInputElementClasses;
+    private _getInputContainerClasses;
+    private _getMainContainerClasses;
+    private _setIdInput;
+    private _getInputTemplate;
+    private _getLetterCounterTemplate;
+    private _hasLetterCounter;
+    private _getTextAreaTemplate;
+    private _getIconDescriptionTemplate;
+    private _getDescriptionTemplate;
+    private _hasValidDescriptionType;
+    private _getDescriptionContainerTemplate;
+    protected render(): TemplateResult;
+    protected updated(changedProperties: PropertyValueMap<unknown>): void;
+}

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

@@ -0,0 +1,370 @@
+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';
+import { InputState, } from './interfaces/tuix-input.interface.js';
+import { v4 as uuidv4 } from 'uuid';
+let TuixInput = class TuixInput extends LitElement {
+    constructor() {
+        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 = this.value?.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,
+        };
+    }
+    static { this.styles = [
+        hostStyles,
+        inputComponentStyles,
+        inputFontStyles,
+        inputColorStyles,
+        inputTitleStyles,
+        inputIconStyles,
+        inputSearchStyles,
+        inputDescriptionStyles,
+    ]; }
+    _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() {
+        if (this.maxlength != undefined && this.type === InputType.TEXT_AREA) {
+            this._letterCounter = Number(this._inputElement.value?.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() {
+        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
+        >${this.description ?? 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();
+            }
+        }
+    }
+};
+__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 };