tuix-webcomponents 0.0.21 → 0.0.24

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

@@ -0,0 +1,89 @@
+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",
+    LOADER_CIRCLE = "loader-circle",
+    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",
+    MAILS = "mails",
+    LAYERS = "layers",
+    SEND = "send",
+    FILE = "file",
+    FORMAT_LIST = "format-list",
+    SAVE = "save",
+    SQUARE_CODE = "square-code",
+    BRACES = "braces",
+    ADD_MAIL = "add-mail",
+    MAIL_LOGO = "mail-logo",
+    BUILDING = "building",
+    CODE = "code",
+    USER_PLUS = "user-plus",
+    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",
+    RESIZE = "resize",
+    CHAT = "chat",
+    MESSAGE_CIRCLE = "message-circle",
+    BOOK = "book",
+    MORE_HORIZONTAL = "more-horizontal",
+    BOT = "bot",
+    SCROLL_DOWN = "scroll-down",
+    PLAY = "play",
+    EXTERNAL_LINK = "external-link",
+    TRIANGLE_RIGHT = "triangle-right",
+    FILE_PLUS = "file-plus",
+    FILE_TEXT = "file-text",
+    HIGHLIGHT = "highlight"
+}

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

@@ -0,0 +1,96 @@
+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["LOADER_CIRCLE"] = "loader-circle";
+    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["MAILS"] = "mails";
+    IconName["LAYERS"] = "layers";
+    IconName["SEND"] = "send";
+    IconName["FILE"] = "file";
+    IconName["FORMAT_LIST"] = "format-list";
+    IconName["SAVE"] = "save";
+    IconName["SQUARE_CODE"] = "square-code";
+    IconName["BRACES"] = "braces";
+    IconName["ADD_MAIL"] = "add-mail";
+    IconName["MAIL_LOGO"] = "mail-logo";
+    IconName["BUILDING"] = "building";
+    IconName["CODE"] = "code";
+    IconName["USER_PLUS"] = "user-plus";
+    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["RESIZE"] = "resize";
+    IconName["CHAT"] = "chat";
+    IconName["MESSAGE_CIRCLE"] = "message-circle";
+    IconName["BOOK"] = "book";
+    IconName["MORE_HORIZONTAL"] = "more-horizontal";
+    IconName["BOT"] = "bot";
+    IconName["SCROLL_DOWN"] = "scroll-down";
+    IconName["PLAY"] = "play";
+    IconName["EXTERNAL_LINK"] = "external-link";
+    IconName["TRIANGLE_RIGHT"] = "triangle-right";
+    IconName["FILE_PLUS"] = "file-plus";
+    IconName["FILE_TEXT"] = "file-text";
+    IconName["HIGHLIGHT"] = "highlight";
+})(IconName || (IconName = {}));

package/dist/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.js';
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton.js';
+export declare class TuixIconButton extends TuixBaseButton {
+    static styles: import("lit").CSSResult[];
+    icon: IconName;
+    protected _updateIconColor(): void;
+    protected _buttonContent(): TemplateResult;
+}

package/dist/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.js';
+import { customElement, property } from 'lit/decorators.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles.js';
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton.js';
+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/dist/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.js';
+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/dist/src/tuix-input/TuixInput.js

@@ -0,0 +1,374 @@
+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() {
+        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: {
+                // The listener is on the input itself, so the target is always one
+                // of the two; the fallback keeps the detail a string, which is what
+                // `CustomEventTuixInput` promises, rather than `false`.
+                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 };

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;