tuix-webcomponents 0.2.0 → 0.3.0

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

@@ -1,57 +1,22 @@
 import { __decorate } from "tslib";
-import { LitElement, css, html, nothing } from 'lit';
+import { css, html } from 'lit';
 import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
-import { customElement, property, state } from 'lit/decorators.js';
-import '../tuix-icon/TuixIcon.js';
+import { customElement, property } from 'lit/decorators.js';
 import { ScreenSizes } from '../utils/screenSizes.enum';
 import { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles';
-import { buttonTextColor } from '../tuix-button/enums/tuix-button.enums';
-import { MainVariant } from '../utils/mainVariant.enum';
-let TuixIconButton = class TuixIconButton extends LitElement {
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
+let TuixIconButton = class TuixIconButton extends TuixBaseButton {
     constructor() {
         super(...arguments);
-        this.variant = MainVariant.PRIMARY;
-        this.disabled = false;
-        this.dark = false;
-        this.iconColor = '';
-    }
-    _getTextColor() {
-        var _a;
-        const element = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.button');
-        if (!element)
-            return buttonTextColor[this.variant];
-        const computedStyle = getComputedStyle(element);
-        return computedStyle.color;
+        this.icon = IconName.ARROW_DOWN;
     }
     _updateIconColor() {
         if (!this.icon)
             return;
         this.iconColor = this._getTextColor();
     }
-    _handleClick() {
-        this.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-    }
-    _iconTemplate(iconName) {
-        this._updateIconColor();
-        return html `<tuix-icon
-      size="${IconSizeVariant.MEDIUM}"
-      name="${iconName}"
-      color="${this.iconColor}"
-    ></tuix-icon>`;
-    }
-    render() {
-        return html `
-      <button
-        @click=${this._handleClick}
-        @mouseenter=${this._updateIconColor}
-        @mouseleave=${this._updateIconColor}
-        @blur=${this._updateIconColor}
-        ?disabled="${this.disabled}"
-        class="button"
-      >
-        ${this.icon ? this._iconTemplate(this.icon) : nothing}
-      </button>
-    `;
+    _buttonContent() {
+        return html `${this._iconTemplate(this.icon, IconSizeVariant.MEDIUM)}`;
     }
 };
 TuixIconButton.styles = [
@@ -59,6 +24,7 @@ TuixIconButton.styles = [
       .button {
         padding: 16px;
         border-radius: 4px;
+        border: none;
       }
 
       @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
@@ -76,21 +42,9 @@ TuixIconButton.styles = [
     hostButtonStyles,
     buttonColorStyles,
 ];
-__decorate([
-    property({ type: MainVariant })
-], TuixIconButton.prototype, "variant", void 0);
-__decorate([
-    property({ type: Boolean })
-], TuixIconButton.prototype, "disabled", void 0);
 __decorate([
     property({ type: IconName })
 ], TuixIconButton.prototype, "icon", void 0);
-__decorate([
-    property({ type: Boolean })
-], TuixIconButton.prototype, "dark", void 0);
-__decorate([
-    state()
-], TuixIconButton.prototype, "iconColor", void 0);
 TuixIconButton = __decorate([
     customElement('tuix-icon-button')
 ], TuixIconButton);

package/dist/src/tuix-icon-button/TuixIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixIconButton.js","sourceRoot":"","sources":["../../../src/tuix-icon-button/TuixIconButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EACL,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAyBE,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAMjB,SAAI,GAAG,KAAK,CAAC;QAGb,cAAS,GAAG,EAAE,CAAC;IAyCjB,CAAC;IAvCS,aAAa;;QACnB,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,SAAS,CAAC,CAAC;QAC1D,IAAI,CAAC,OAAO;YAAE,OAAO,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnD,MAAM,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAChD,OAAO,aAAa,CAAC,KAAK,CAAC;IAC7B,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QACvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAClE,CAAC;IAEO,aAAa,CAAC,QAAkB;QACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,OAAO,IAAI,CAAA;cACD,eAAe,CAAC,MAAM;cACtB,QAAoB;eACnB,IAAI,CAAC,SAAS;kBACX,CAAC;IACjB,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,YAAY;sBACZ,IAAI,CAAC,gBAAgB;sBACrB,IAAI,CAAC,gBAAgB;gBAC3B,IAAI,CAAC,gBAAgB;qBAChB,IAAI,CAAC,QAAQ;;;UAGxB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO;;KAExD,CAAC;IACJ,CAAC;;AA5EM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;2CAMoC,WAAW,CAAC,MAAM;;;;;;2CAMlB,WAAW,CAAC,MAAM;;;;;KAKxD;IACD,gBAAgB;IAChB,iBAAiB;CAClB,AArBY,CAqBX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;+CACF;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;4CACb;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACf;AAGb;IADC,KAAK,EAAE;iDACO;AArCJ,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA8E1B;SA9EY,cAAc","sourcesContent":["import { LitElement, TemplateResult, css, html, nothing } from 'lit';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '../tuix-icon/TuixIcon.js';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport {\n  buttonColorStyles,\n  hostButtonStyles,\n} from '../tuix-button/TuixButton.styles';\nimport { buttonTextColor } from '../tuix-button/enums/tuix-button.enums';\nimport { MainVariant } from '../utils/mainVariant.enum';\n\n@customElement('tuix-icon-button')\nexport class TuixIconButton extends LitElement {\n  static styles = [\n    css`\n      .button {\n        padding: 16px;\n        border-radius: 4px;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n        .button {\n          padding: 12px;\n        }\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .button {\n          padding: 8px;\n        }\n      }\n    `,\n    hostButtonStyles,\n    buttonColorStyles,\n  ];\n\n  @property({ type: MainVariant })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: IconName })\n  icon?: IconName;\n\n  @property({ type: Boolean })\n  dark = false;\n\n  @state()\n  iconColor = '';\n\n  private _getTextColor() {\n    const element = this.shadowRoot?.querySelector('.button');\n    if (!element) return buttonTextColor[this.variant];\n    const computedStyle = getComputedStyle(element);\n    return computedStyle.color;\n  }\n\n  private _updateIconColor() {\n    if (!this.icon) return;\n    this.iconColor = this._getTextColor();\n  }\n\n  private _handleClick() {\n    this.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n  }\n\n  private _iconTemplate(iconName: IconName): TemplateResult {\n    this._updateIconColor();\n    return html`<tuix-icon\n      size=\"${IconSizeVariant.MEDIUM}\"\n      name=\"${iconName as IconName}\"\n      color=\"${this.iconColor}\"\n    ></tuix-icon>`;\n  }\n\n  protected render(): TemplateResult {\n    return html`\n      <button\n        @click=${this._handleClick}\n        @mouseenter=${this._updateIconColor}\n        @mouseleave=${this._updateIconColor}\n        @blur=${this._updateIconColor}\n        ?disabled=\"${this.disabled}\"\n        class=\"button\"\n      >\n        ${this.icon ? this._iconTemplate(this.icon) : nothing}\n      </button>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TuixIconButton.js","sourceRoot":"","sources":["../../../src/tuix-icon-button/TuixIconButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EACL,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAG/D,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,cAAc;IAAlD;;QA0BE,SAAI,GAAG,QAAQ,CAAC,UAAU,CAAC;IAU7B,CAAC;IARoB,gBAAgB;QACjC,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QACvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAEkB,cAAc;QAC/B,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC;IACxE,CAAC;;AAlCM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;2CAOoC,WAAW,CAAC,MAAM;;;;;;2CAMlB,WAAW,CAAC,MAAM;;;;;KAKxD;IACD,gBAAgB;IAChB,iBAAiB;CAClB,AAtBY,CAsBX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;4CACF;AA1BhB,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAoC1B;SApCY,cAAc","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport {\n  buttonColorStyles,\n  hostButtonStyles,\n} from '../tuix-button/TuixButton.styles';\nimport { TuixBaseButton } from '../tuix-button/TuixBaseButton';\n\n@customElement('tuix-icon-button')\nexport class TuixIconButton extends TuixBaseButton {\n  static styles = [\n    css`\n      .button {\n        padding: 16px;\n        border-radius: 4px;\n        border: none;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n        .button {\n          padding: 12px;\n        }\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .button {\n          padding: 8px;\n        }\n      }\n    `,\n    hostButtonStyles,\n    buttonColorStyles,\n  ];\n\n  @property({ type: IconName })\n  icon = IconName.ARROW_DOWN;\n\n  protected override _updateIconColor() {\n    if (!this.icon) return;\n    this.iconColor = this._getTextColor();\n  }\n\n  protected override _buttonContent(): TemplateResult {\n    return html`${this._iconTemplate(this.icon, IconSizeVariant.MEDIUM)}`;\n  }\n}\n"]}

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

@@ -10,8 +10,8 @@ export declare class TuixInput extends LitElement {
     placeholder: string;
     title: string;
     type: InputType;
-    maxlength: undefined;
-    description: undefined;
+    maxlength?: number;
+    description?: string;
     descriptionType: DescriptionType;
     dark: boolean;
     readonly: boolean;
@@ -23,6 +23,7 @@ export declare class TuixInput extends LitElement {
     private _generalIconColorsLight;
     private _generalIconColorsDark;
     private _handleInputBase;
+    private _handleClickOnInput;
     private _handleInput;
     private _handleChange;
     private _handlePasswordIconClick;

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

@@ -4,8 +4,8 @@ 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 { 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 {
@@ -17,8 +17,6 @@ let TuixInput = class TuixInput extends LitElement {
         this.placeholder = '';
         this.title = '';
         this.type = InputType.TEXT;
-        this.maxlength = undefined;
-        this.description = undefined;
         this.descriptionType = DescriptionType.TEXT;
         this.dark = false;
         this.readonly = false;
@@ -27,14 +25,14 @@ let TuixInput = class TuixInput extends LitElement {
         this._previousType = this.type;
         this._preivousValue = '';
         this._generalIconColorsLight = {
-            inactive: palette.black,
-            active: palette.main,
-            disabled: palette.primary_300,
+            inactive: Palette.BLACK,
+            active: Palette.MAIN,
+            disabled: Palette.PRIMARY_300,
         };
         this._generalIconColorsDark = {
-            inactive: darkPalette.primary_100,
-            active: darkPalette.main,
-            disabled: darkPalette.primary_800,
+            inactive: DarkPalette.PRIMARY_100,
+            active: DarkPalette.MAIN,
+            disabled: DarkPalette.PRIMARY_800,
         };
     }
     _handleInputBase(e, eventName) {
@@ -45,6 +43,13 @@ let TuixInput = class TuixInput extends LitElement {
             bubbles: true,
         }));
     }
+    _handleClickOnInput() {
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent('click-on-input', {
+            bubbles: true,
+        }));
+    }
     _handleInput(e) {
         this._handleInputBase(e, 'input-single');
         this._updateLetterCounter();
@@ -98,14 +103,14 @@ let TuixInput = class TuixInput extends LitElement {
     }
     _getInputSearchFeatureTemplate() {
         const searchIconColorsLight = {
-            inactive: palette.black,
-            active: palette.black,
-            disabled: palette.primary_300,
+            inactive: Palette.BLACK,
+            active: Palette.BLACK,
+            disabled: Palette.PRIMARY_300,
         };
         const searchIconColorsDark = {
-            inactive: darkPalette.primary_100,
-            active: darkPalette.primary_100,
-            disabled: darkPalette.primary_800,
+            inactive: DarkPalette.PRIMARY_100,
+            active: DarkPalette.PRIMARY_100,
+            disabled: DarkPalette.PRIMARY_800,
         };
         return html `${this._formatIconSet({
             iconName: IconName.SEARCH,
@@ -260,7 +265,10 @@ let TuixInput = class TuixInput extends LitElement {
             this._preivousValue = this.value;
             this._letterCounter = this.value.length;
         }
-        return html `<div class="${classMap(this._getInputContainerClasses())}">
+        return html `<div
+        class="${classMap(this._getInputContainerClasses())}"
+        @click="${this._handleClickOnInput}"
+      >
         ${this.type === InputType.TEXT_AREA
             ? this._getTextAreaTemplate()
             : this._getInputTemplate()}
@@ -279,7 +287,7 @@ TuixInput.styles = [
     inputDescriptionStyles,
 ];
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixInput.prototype, "disabled", void 0);
 __decorate([
     property({ type: IconName })
@@ -297,7 +305,7 @@ __decorate([
     property({ type: InputType })
 ], TuixInput.prototype, "type", void 0);
 __decorate([
-    property({ type: Number, reflect: true })
+    property({ type: Number })
 ], TuixInput.prototype, "maxlength", void 0);
 __decorate([
     property({ type: String })
@@ -306,7 +314,7 @@ __decorate([
     property({ type: DescriptionType })
 ], TuixInput.prototype, "descriptionType", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixInput.prototype, "dark", void 0);
 __decorate([
     property({ type: Boolean })

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

@@ -1 +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"]}
+{"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, 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  @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 _handleClickOnInput() {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('click-on-input', {\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\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  }\n}\n"]}

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

@@ -1,7 +1,7 @@
 import { css, unsafeCSS } from 'lit';
 import { ScreenSizes } from '../utils/screenSizes.enum';
-import { palette } from '../utils/colors';
-import { darkPalette } from '../utils/darkColors';
+import { Palette } from '../utils/colors';
+import { DarkPalette } from '../utils/darkColors';
 import { hexToRgb } from '../utils/hex-rgb';
 const inputVars = {
     gapX: '10px',
@@ -9,31 +9,31 @@ const inputVars = {
     iconTabletSize: '1rem',
     paddingX: '1.25rem',
 };
-const rgbDarkValidation = hexToRgb(darkPalette.validation);
-const rgbDarkError = hexToRgb(darkPalette.error);
+const rgbDarkValidation = hexToRgb(DarkPalette.VALIDATION);
+const rgbDarkError = hexToRgb(DarkPalette.ERROR);
 export const hostStyles = css `
   :host {
-    --t-field-color-form: ${unsafeCSS(palette.primary_50)};
-    --t-field-color-title: ${unsafeCSS(palette.primary_300)};
-    --t-field-color-text: ${unsafeCSS(palette.dark)};
-    --t-field-color-description: ${unsafeCSS(palette.neutral_600)};
-    --t-field-color-stroke-hover: ${unsafeCSS(palette.primary_300)};
-    --t-field-color-stroke-focus: ${unsafeCSS(palette.main)};
-    --t-field-color-text-disabled: ${unsafeCSS(palette.primary_300)};
-    --t-field-color-stroke-validation: ${unsafeCSS(palette.validation_200)};
-    --t-field-color-bg-validation: ${unsafeCSS(palette.validation_50)};
-    --t-field-color-stroke-loading: ${unsafeCSS(palette.primary_300)};
-    --t-field-color-bg-error: ${unsafeCSS(palette.error_50)};
-    --t-field-color-stroke-error: ${unsafeCSS(palette.error_200)};
+    --t-field-color-form: ${unsafeCSS(Palette.PRIMARY_50)};
+    --t-field-color-title: ${unsafeCSS(Palette.PRIMARY_300)};
+    --t-field-color-text: ${unsafeCSS(Palette.BLACK)};
+    --t-field-color-description: ${unsafeCSS(Palette.NEUTRAL_600)};
+    --t-field-color-stroke-hover: ${unsafeCSS(Palette.PRIMARY_300)};
+    --t-field-color-stroke-focus: ${unsafeCSS(Palette.MAIN)};
+    --t-field-color-text-disabled: ${unsafeCSS(Palette.PRIMARY_300)};
+    --t-field-color-stroke-validation: ${unsafeCSS(Palette.VALIDATION_200)};
+    --t-field-color-bg-validation: ${unsafeCSS(Palette.VALIDATION_50)};
+    --t-field-color-stroke-loading: ${unsafeCSS(Palette.PRIMARY_300)};
+    --t-field-color-bg-error: ${unsafeCSS(Palette.ERROR_50)};
+    --t-field-color-stroke-error: ${unsafeCSS(Palette.ERROR_200)};
     --t-field-input-cursor: auto;
   }
   :host([dark]) {
-    --t-field-color-form: ${unsafeCSS(darkPalette.primary_950)};
-    --t-field-color-text: ${unsafeCSS(darkPalette.primary_100)};
-    --t-field-color-description: ${unsafeCSS(darkPalette.neutral_200)};
-    --t-field-color-stroke-focus: ${unsafeCSS(darkPalette.secondary)};
-    --t-field-color-text-disabled: ${unsafeCSS(darkPalette.primary_800)};
-    --t-field-color-stroke-validation: ${unsafeCSS(darkPalette.validation_200)};
+    --t-field-color-form: ${unsafeCSS(DarkPalette.PRIMARY_950)};
+    --t-field-color-text: ${unsafeCSS(DarkPalette.PRIMARY_100)};
+    --t-field-color-description: ${unsafeCSS(DarkPalette.NEUTRAL_200)};
+    --t-field-color-stroke-focus: ${unsafeCSS(DarkPalette.SECONDARY)};
+    --t-field-color-text-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-field-color-stroke-validation: ${unsafeCSS(DarkPalette.VALIDATION_200)};
     --t-field-color-bg-validation: rgba(
       ${rgbDarkValidation.r},
       ${rgbDarkValidation.g},
@@ -46,7 +46,7 @@ export const hostStyles = css `
       ${rgbDarkError.b},
       0.2
     );
-    --t-field-color-stroke-error: ${unsafeCSS(darkPalette.error_200)};
+    --t-field-color-stroke-error: ${unsafeCSS(DarkPalette.ERROR_200)};
   }
 `;
 export const inputComponentStyles = css `
@@ -66,6 +66,8 @@ export const inputComponentStyles = css `
     border-radius: 4px;
     font-family: 'rubik', sans-serif;
     cursor: var(--t-field-input-cursor);
+    width: 100%;
+    box-sizing: border-box;
   }
   .t-input.with-title {
     padding-top: 1.5rem;
@@ -177,6 +179,10 @@ export const inputTitleStyles = css `
     transform: translateY(-50%);
     transition-duration: 0.3s;
     pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
   }
   .t-textarea-container .t-title {
     top: 1rem;
@@ -214,12 +220,13 @@ export const inputTitleStyles = css `
   }
 `;
 export const inputIconStyles = css `
-  .t-icon-set-container.t-icon-click {
-    cursor: pointer;
-  }
   .t-input-container .t-icon-set-container {
     height: ${unsafeCSS(inputVars.iconDesktopSize)};
     width: ${unsafeCSS(inputVars.iconDesktopSize)};
+    cursor: var(--t-field-input-cursor);
+  }
+  .t-icon-set-container.t-icon-click {
+    cursor: pointer;
   }
   .t-input-container .t-icon-set-container.t-icon-right {
     position: absolute;

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

@@ -1 +1 @@
-{"version":3,"file":"TuixInput.styles.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { palette } from '../utils/colors';\nimport { darkPalette } from '../utils/darkColors';\nimport { hexToRgb } from '../utils/hex-rgb';\n\nconst inputVars = {\n  gapX: '10px',\n  iconDesktopSize: '1.5rem',\n  iconTabletSize: '1rem',\n  paddingX: '1.25rem',\n};\n\nconst rgbDarkValidation = hexToRgb(darkPalette.validation);\nconst rgbDarkError = hexToRgb(darkPalette.error);\n\nexport const hostStyles = css`\n  :host {\n    --t-field-color-form: ${unsafeCSS(palette.primary_50)};\n    --t-field-color-title: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-text: ${unsafeCSS(palette.dark)};\n    --t-field-color-description: ${unsafeCSS(palette.neutral_600)};\n    --t-field-color-stroke-hover: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-stroke-focus: ${unsafeCSS(palette.main)};\n    --t-field-color-text-disabled: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-stroke-validation: ${unsafeCSS(palette.validation_200)};\n    --t-field-color-bg-validation: ${unsafeCSS(palette.validation_50)};\n    --t-field-color-stroke-loading: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-bg-error: ${unsafeCSS(palette.error_50)};\n    --t-field-color-stroke-error: ${unsafeCSS(palette.error_200)};\n    --t-field-input-cursor: auto;\n  }\n  :host([dark]) {\n    --t-field-color-form: ${unsafeCSS(darkPalette.primary_950)};\n    --t-field-color-text: ${unsafeCSS(darkPalette.primary_100)};\n    --t-field-color-description: ${unsafeCSS(darkPalette.neutral_200)};\n    --t-field-color-stroke-focus: ${unsafeCSS(darkPalette.secondary)};\n    --t-field-color-text-disabled: ${unsafeCSS(darkPalette.primary_800)};\n    --t-field-color-stroke-validation: ${unsafeCSS(darkPalette.validation_200)};\n    --t-field-color-bg-validation: rgba(\n      ${rgbDarkValidation.r},\n      ${rgbDarkValidation.g},\n      ${rgbDarkValidation.b},\n      0.2\n    );\n    --t-field-color-bg-error: rgba(\n      ${rgbDarkError.r},\n      ${rgbDarkError.g},\n      ${rgbDarkError.b},\n      0.2\n    );\n    --t-field-color-stroke-error: ${unsafeCSS(darkPalette.error_200)};\n  }\n`;\n\nexport const inputComponentStyles = css`\n  .t-input-container {\n    position: relative;\n    --t-padding-x-desktop-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconDesktopSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n    --t-padding-x-tablet-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconTabletSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n  }\n  .t-input {\n    padding: 1rem ${unsafeCSS(inputVars.paddingX)};\n    border-radius: 4px;\n    font-family: 'rubik', sans-serif;\n    cursor: var(--t-field-input-cursor);\n  }\n  .t-input.with-title {\n    padding-top: 1.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .t-input.with-icon-right {\n    padding-right: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input {\n      padding-top: 0.875rem;\n      padding-bottom: 0.875rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.375rem;\n      padding-bottom: 0.375rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      padding-top: 0.75rem;\n      padding-bottom: 0.75rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.25rem;\n      padding-bottom: 0.25rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n`;\n\nexport const inputFontStyles = css`\n  .t-input::placeholder,\n  .t-input,\n  .t-title {\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input::placeholder {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    .t-input::placeholder {\n      line-height: 1rem;\n    }\n  }\n`;\n\nexport const inputColorStyles = css`\n  .t-input {\n    background-color: var(--t-field-color-form);\n    border: 1px solid var(--t-field-color-form);\n    color: var(--t-field-color-text);\n  }\n  .t-input-container:hover .t-input,\n  .t-input:hover {\n    border: 1px solid var(--t-field-color-stroke-hover);\n  }\n  .t-input:focus {\n    border: 1px solid var(--t-field-color-stroke-focus);\n    outline: 1px solid var(--t-field-color-stroke-focus);\n  }\n  .t-input[disabled]:disabled {\n    cursor: not-allowed;\n    border: none;\n    color: var(--t-field-color-text-disabled);\n  }\n  .t-input.with-title::placeholder {\n    color: transparent;\n  }\n  .t-input::placeholder,\n  .t-input.with-title:focus::placeholder {\n    color: var(--t-field-color-title);\n  }\n  .t-input.with-warning {\n    border: 1px solid var(--t-field-color-stroke-validation);\n    background-color: var(--t-field-color-bg-validation);\n  }\n  .t-input.with-error {\n    border: 1px solid var(--t-field-color-stroke-error);\n    background-color: var(--t-field-color-bg-error);\n  }\n  .t-input.with-loading {\n    border: 1px solid var(--t-field-color-stroke-loading);\n  }\n`;\n\nexport const inputTitleStyles = css`\n  .t-title {\n    position: absolute;\n    top: 50%;\n    left: 1.25rem;\n    font-family: 'rubik', sans-serif;\n    color: var(--t-field-color-title);\n    transform: translateY(-50%);\n    transition-duration: 0.3s;\n    pointer-events: none;\n  }\n  .t-textarea-container .t-title {\n    top: 1rem;\n    transform: none;\n  }\n  .t-input.with-title:focus + .t-title,\n  .t-input.with-title:not(:placeholder-shown) + .t-title {\n    font-size: 0.75rem;\n    font-weight: 400;\n    line-height: 1rem;\n    transform: translateY(0);\n    top: 0.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-title {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.375rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.875rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.25rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.75rem;\n    }\n  }\n`;\n\nexport const inputIconStyles = css`\n  .t-icon-set-container.t-icon-click {\n    cursor: pointer;\n  }\n  .t-input-container .t-icon-set-container {\n    height: ${unsafeCSS(inputVars.iconDesktopSize)};\n    width: ${unsafeCSS(inputVars.iconDesktopSize)};\n  }\n  .t-input-container .t-icon-set-container.t-icon-right {\n    position: absolute;\n    top: 50%;\n    right: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-input-container .t-icon-set-container.t-icon-left {\n    position: absolute;\n    top: 50%;\n    left: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-icon-inactive {\n    display: inline;\n  }\n  .t-icon-active {\n    display: none;\n  }\n  .t-icon-disabled {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-inactive,\n  .t-input:hover ~ .t-icon-set-container .t-icon-inactive,\n  .t-input:focus ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-active,\n  .t-input:hover ~ .t-icon-set-container .t-icon-active,\n  .t-input:focus ~ .t-icon-set-container .t-icon-active {\n    display: inline;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-active {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {\n    display: inline;\n    cursor: not-allowed;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input-container .t-icon-set-container {\n      height: ${unsafeCSS(inputVars.iconTabletSize)};\n      width: ${unsafeCSS(inputVars.iconTabletSize)};\n    }\n  }\n`;\n\nexport const inputSearchStyles = css`\n  .t-input[type='search'] {\n    padding-left: var(--t-padding-x-desktop-with-icon);\n  }\n  .t-input[type='search'] + .t-title {\n    left: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input[type='search'] {\n      padding-left: var(--t-padding-x-tablet-with-icon);\n    }\n    .t-input[type='search'] + .t-title {\n      left: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n`;\n\nexport const inputDescriptionStyles = css`\n  .t-input-description-container {\n    margin-top: 0.5rem;\n    font-family: 'rubik', sans-serif;\n    font-size: 0.75rem;\n    line-height: 1rem;\n    color: var(--t-field-color-description);\n    display: flex;\n    justify-content: space-between;\n  }\n  .t-input-description-container .t-letter-counter {\n    align-self: flex-end;\n  }\n  .t-input-description-container .t-input-description {\n    display: flex;\n    gap: 0.5rem;\n  }\n`;\n"]}
+{"version":3,"file":"TuixInput.styles.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\nimport { hexToRgb } from '../utils/hex-rgb';\n\nconst inputVars = {\n  gapX: '10px',\n  iconDesktopSize: '1.5rem',\n  iconTabletSize: '1rem',\n  paddingX: '1.25rem',\n};\n\nconst rgbDarkValidation = hexToRgb(DarkPalette.VALIDATION);\nconst rgbDarkError = hexToRgb(DarkPalette.ERROR);\n\nexport const hostStyles = css`\n  :host {\n    --t-field-color-form: ${unsafeCSS(Palette.PRIMARY_50)};\n    --t-field-color-title: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-text: ${unsafeCSS(Palette.BLACK)};\n    --t-field-color-description: ${unsafeCSS(Palette.NEUTRAL_600)};\n    --t-field-color-stroke-hover: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-stroke-focus: ${unsafeCSS(Palette.MAIN)};\n    --t-field-color-text-disabled: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-stroke-validation: ${unsafeCSS(Palette.VALIDATION_200)};\n    --t-field-color-bg-validation: ${unsafeCSS(Palette.VALIDATION_50)};\n    --t-field-color-stroke-loading: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-bg-error: ${unsafeCSS(Palette.ERROR_50)};\n    --t-field-color-stroke-error: ${unsafeCSS(Palette.ERROR_200)};\n    --t-field-input-cursor: auto;\n  }\n  :host([dark]) {\n    --t-field-color-form: ${unsafeCSS(DarkPalette.PRIMARY_950)};\n    --t-field-color-text: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-field-color-description: ${unsafeCSS(DarkPalette.NEUTRAL_200)};\n    --t-field-color-stroke-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-field-color-text-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-field-color-stroke-validation: ${unsafeCSS(DarkPalette.VALIDATION_200)};\n    --t-field-color-bg-validation: rgba(\n      ${rgbDarkValidation.r},\n      ${rgbDarkValidation.g},\n      ${rgbDarkValidation.b},\n      0.2\n    );\n    --t-field-color-bg-error: rgba(\n      ${rgbDarkError.r},\n      ${rgbDarkError.g},\n      ${rgbDarkError.b},\n      0.2\n    );\n    --t-field-color-stroke-error: ${unsafeCSS(DarkPalette.ERROR_200)};\n  }\n`;\n\nexport const inputComponentStyles = css`\n  .t-input-container {\n    position: relative;\n    --t-padding-x-desktop-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconDesktopSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n    --t-padding-x-tablet-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconTabletSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n  }\n  .t-input {\n    padding: 1rem ${unsafeCSS(inputVars.paddingX)};\n    border-radius: 4px;\n    font-family: 'rubik', sans-serif;\n    cursor: var(--t-field-input-cursor);\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .t-input.with-title {\n    padding-top: 1.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .t-input.with-icon-right {\n    padding-right: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input {\n      padding-top: 0.875rem;\n      padding-bottom: 0.875rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.375rem;\n      padding-bottom: 0.375rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      padding-top: 0.75rem;\n      padding-bottom: 0.75rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.25rem;\n      padding-bottom: 0.25rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n`;\n\nexport const inputFontStyles = css`\n  .t-input::placeholder,\n  .t-input,\n  .t-title {\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input::placeholder {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    .t-input::placeholder {\n      line-height: 1rem;\n    }\n  }\n`;\n\nexport const inputColorStyles = css`\n  .t-input {\n    background-color: var(--t-field-color-form);\n    border: 1px solid var(--t-field-color-form);\n    color: var(--t-field-color-text);\n  }\n  .t-input-container:hover .t-input,\n  .t-input:hover {\n    border: 1px solid var(--t-field-color-stroke-hover);\n  }\n  .t-input:focus {\n    border: 1px solid var(--t-field-color-stroke-focus);\n    outline: 1px solid var(--t-field-color-stroke-focus);\n  }\n  .t-input[disabled]:disabled {\n    cursor: not-allowed;\n    border: none;\n    color: var(--t-field-color-text-disabled);\n  }\n  .t-input.with-title::placeholder {\n    color: transparent;\n  }\n  .t-input::placeholder,\n  .t-input.with-title:focus::placeholder {\n    color: var(--t-field-color-title);\n  }\n  .t-input.with-warning {\n    border: 1px solid var(--t-field-color-stroke-validation);\n    background-color: var(--t-field-color-bg-validation);\n  }\n  .t-input.with-error {\n    border: 1px solid var(--t-field-color-stroke-error);\n    background-color: var(--t-field-color-bg-error);\n  }\n  .t-input.with-loading {\n    border: 1px solid var(--t-field-color-stroke-loading);\n  }\n`;\n\nexport const inputTitleStyles = css`\n  .t-title {\n    position: absolute;\n    top: 50%;\n    left: 1.25rem;\n    font-family: 'rubik', sans-serif;\n    color: var(--t-field-color-title);\n    transform: translateY(-50%);\n    transition-duration: 0.3s;\n    pointer-events: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .t-textarea-container .t-title {\n    top: 1rem;\n    transform: none;\n  }\n  .t-input.with-title:focus + .t-title,\n  .t-input.with-title:not(:placeholder-shown) + .t-title {\n    font-size: 0.75rem;\n    font-weight: 400;\n    line-height: 1rem;\n    transform: translateY(0);\n    top: 0.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-title {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.375rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.875rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.25rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.75rem;\n    }\n  }\n`;\n\nexport const inputIconStyles = css`\n  .t-input-container .t-icon-set-container {\n    height: ${unsafeCSS(inputVars.iconDesktopSize)};\n    width: ${unsafeCSS(inputVars.iconDesktopSize)};\n    cursor: var(--t-field-input-cursor);\n  }\n  .t-icon-set-container.t-icon-click {\n    cursor: pointer;\n  }\n  .t-input-container .t-icon-set-container.t-icon-right {\n    position: absolute;\n    top: 50%;\n    right: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-input-container .t-icon-set-container.t-icon-left {\n    position: absolute;\n    top: 50%;\n    left: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-icon-inactive {\n    display: inline;\n  }\n  .t-icon-active {\n    display: none;\n  }\n  .t-icon-disabled {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-inactive,\n  .t-input:hover ~ .t-icon-set-container .t-icon-inactive,\n  .t-input:focus ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-active,\n  .t-input:hover ~ .t-icon-set-container .t-icon-active,\n  .t-input:focus ~ .t-icon-set-container .t-icon-active {\n    display: inline;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-active {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {\n    display: inline;\n    cursor: not-allowed;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input-container .t-icon-set-container {\n      height: ${unsafeCSS(inputVars.iconTabletSize)};\n      width: ${unsafeCSS(inputVars.iconTabletSize)};\n    }\n  }\n`;\n\nexport const inputSearchStyles = css`\n  .t-input[type='search'] {\n    padding-left: var(--t-padding-x-desktop-with-icon);\n  }\n  .t-input[type='search'] + .t-title {\n    left: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input[type='search'] {\n      padding-left: var(--t-padding-x-tablet-with-icon);\n    }\n    .t-input[type='search'] + .t-title {\n      left: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n`;\n\nexport const inputDescriptionStyles = css`\n  .t-input-description-container {\n    margin-top: 0.5rem;\n    font-family: 'rubik', sans-serif;\n    font-size: 0.75rem;\n    line-height: 1rem;\n    color: var(--t-field-color-description);\n    display: flex;\n    justify-content: space-between;\n  }\n  .t-input-description-container .t-letter-counter {\n    align-self: flex-end;\n  }\n  .t-input-description-container .t-input-description {\n    display: flex;\n    gap: 0.5rem;\n  }\n`;\n"]}

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

@@ -1,4 +1,6 @@
 import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
+import { Palette } from '../../utils/colors';
+import { DarkPalette } from '../../utils/darkColors';
 export declare enum InputType {
     TEXT = "text",
     SEARCH = "search",
@@ -23,14 +25,14 @@ export declare const IconByDescriptionType: {
     loading: IconName;
 };
 export declare const IconDescriptionColorLight: {
-    warning: string;
-    error: string;
-    success: string;
-    loading: string;
+    warning: Palette;
+    error: Palette;
+    success: Palette;
+    loading: Palette;
 };
 export declare const IconDescriptionColorDark: {
-    warning: string;
-    error: string;
-    success: string;
-    loading: string;
+    warning: DarkPalette;
+    error: DarkPalette;
+    success: DarkPalette;
+    loading: DarkPalette;
 };

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

@@ -1,6 +1,6 @@
 import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { palette } from '../../utils/colors';
-import { darkPalette } from '../../utils/darkColors';
+import { Palette } from '../../utils/colors';
+import { DarkPalette } from '../../utils/darkColors';
 export var InputType;
 (function (InputType) {
     InputType["TEXT"] = "text";
@@ -28,15 +28,15 @@ export const IconByDescriptionType = {
     [DescriptionType.LOADING]: IconName.LOADER,
 };
 export const IconDescriptionColorLight = {
-    [DescriptionType.WARNING]: palette.validation,
-    [DescriptionType.ERROR]: palette.error,
-    [DescriptionType.SUCCESS]: palette.success,
-    [DescriptionType.LOADING]: palette.primary_300,
+    [DescriptionType.WARNING]: Palette.VALIDATION,
+    [DescriptionType.ERROR]: Palette.ERROR,
+    [DescriptionType.SUCCESS]: Palette.SUCCESS,
+    [DescriptionType.LOADING]: Palette.PRIMARY_300,
 };
 export const IconDescriptionColorDark = {
-    [DescriptionType.WARNING]: darkPalette.validation,
-    [DescriptionType.ERROR]: darkPalette.error,
-    [DescriptionType.SUCCESS]: darkPalette.success,
-    [DescriptionType.LOADING]: darkPalette.primary_300,
+    [DescriptionType.WARNING]: DarkPalette.VALIDATION,
+    [DescriptionType.ERROR]: DarkPalette.ERROR,
+    [DescriptionType.SUCCESS]: DarkPalette.SUCCESS,
+    [DescriptionType.LOADING]: DarkPalette.PRIMARY_300,
 };
 //# sourceMappingURL=tuix-input.enums.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tuix-input.enums.js","sourceRoot":"","sources":["../../../../src/tuix-input/enums/tuix-input.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,8BAAiB,CAAA;IACjB,kCAAqB,CAAA;IACrB,mCAAsB,CAAA;AACxB,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAED,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,kCAAa,CAAA;IACb,oCAAe,CAAA;AACjB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,eAMX;AAND,WAAY,eAAe;IACzB,gCAAa,CAAA;IACb,sCAAmB,CAAA;IACnB,kCAAe,CAAA;IACf,sCAAmB,CAAA;IACnB,sCAAmB,CAAA;AACrB,CAAC,EANW,eAAe,KAAf,eAAe,QAM1B;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,oBAAoB;IACxD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,QAAQ;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,YAAY;IAChD,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,MAAM;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU;IAC7C,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK;IACtC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU;IACjD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO;IAC9C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW;CACnD,CAAC","sourcesContent":["import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';\nimport { palette } from '../../utils/colors';\nimport { darkPalette } from '../../utils/darkColors';\n\nexport enum InputType {\n  TEXT = 'text',\n  SEARCH = 'search',\n  PASSWORD = 'password',\n  TEXT_AREA = 'textarea',\n}\n\nexport enum InputIconLocation {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nexport enum DescriptionType {\n  TEXT = 'text',\n  WARNING = 'warning',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  LOADING = 'loading',\n}\n\nexport const IconByDescriptionType = {\n  [DescriptionType.WARNING]: IconName.TRIANGLE_EXCLAMATION,\n  [DescriptionType.ERROR]: IconName.CIRCLE_X,\n  [DescriptionType.SUCCESS]: IconName.CIRCLE_CHECK,\n  [DescriptionType.LOADING]: IconName.LOADER,\n};\n\nexport const IconDescriptionColorLight = {\n  [DescriptionType.WARNING]: palette.validation,\n  [DescriptionType.ERROR]: palette.error,\n  [DescriptionType.SUCCESS]: palette.success,\n  [DescriptionType.LOADING]: palette.primary_300,\n};\n\nexport const IconDescriptionColorDark = {\n  [DescriptionType.WARNING]: darkPalette.validation,\n  [DescriptionType.ERROR]: darkPalette.error,\n  [DescriptionType.SUCCESS]: darkPalette.success,\n  [DescriptionType.LOADING]: darkPalette.primary_300,\n};\n"]}
+{"version":3,"file":"tuix-input.enums.js","sourceRoot":"","sources":["../../../../src/tuix-input/enums/tuix-input.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,8BAAiB,CAAA;IACjB,kCAAqB,CAAA;IACrB,mCAAsB,CAAA;AACxB,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAED,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,kCAAa,CAAA;IACb,oCAAe,CAAA;AACjB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,eAMX;AAND,WAAY,eAAe;IACzB,gCAAa,CAAA;IACb,sCAAmB,CAAA;IACnB,kCAAe,CAAA;IACf,sCAAmB,CAAA;IACnB,sCAAmB,CAAA;AACrB,CAAC,EANW,eAAe,KAAf,eAAe,QAM1B;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,oBAAoB;IACxD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,QAAQ;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,YAAY;IAChD,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,MAAM;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU;IAC7C,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK;IACtC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU;IACjD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO;IAC9C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW;CACnD,CAAC","sourcesContent":["import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';\nimport { Palette } from '../../utils/colors';\nimport { DarkPalette } from '../../utils/darkColors';\n\nexport enum InputType {\n  TEXT = 'text',\n  SEARCH = 'search',\n  PASSWORD = 'password',\n  TEXT_AREA = 'textarea',\n}\n\nexport enum InputIconLocation {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nexport enum DescriptionType {\n  TEXT = 'text',\n  WARNING = 'warning',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  LOADING = 'loading',\n}\n\nexport const IconByDescriptionType = {\n  [DescriptionType.WARNING]: IconName.TRIANGLE_EXCLAMATION,\n  [DescriptionType.ERROR]: IconName.CIRCLE_X,\n  [DescriptionType.SUCCESS]: IconName.CIRCLE_CHECK,\n  [DescriptionType.LOADING]: IconName.LOADER,\n};\n\nexport const IconDescriptionColorLight = {\n  [DescriptionType.WARNING]: Palette.VALIDATION,\n  [DescriptionType.ERROR]: Palette.ERROR,\n  [DescriptionType.SUCCESS]: Palette.SUCCESS,\n  [DescriptionType.LOADING]: Palette.PRIMARY_300,\n};\n\nexport const IconDescriptionColorDark = {\n  [DescriptionType.WARNING]: DarkPalette.VALIDATION,\n  [DescriptionType.ERROR]: DarkPalette.ERROR,\n  [DescriptionType.SUCCESS]: DarkPalette.SUCCESS,\n  [DescriptionType.LOADING]: DarkPalette.PRIMARY_300,\n};\n"]}

package/dist/src/tuix-input/interfaces/tuix-input.interface.d.ts

@@ -1,4 +1,5 @@
 import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
+import { DetailValue } from '../../utils/interfaces/detail-value.interface';
 import { InputIconLocation } from '../enums/tuix-input.enums';
 export interface InputIconColors {
     inactive: string;
@@ -11,3 +12,4 @@ export interface FormatIconSetParams {
     location?: InputIconLocation;
     clickHandler?: (e: MouseEvent) => void;
 }
+export type CustomEventTuixInput = CustomEvent<DetailValue<string>>;

package/dist/src/tuix-input/interfaces/tuix-input.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"tuix-input.interface.js","sourceRoot":"","sources":["../../../../src/tuix-input/interfaces/tuix-input.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';\nimport { InputIconLocation } from '../enums/tuix-input.enums';\n\nexport interface InputIconColors {\n  inactive: string;\n  active: string;\n  disabled: string;\n}\n\nexport interface FormatIconSetParams {\n  iconName: IconName;\n  colorByState: InputIconColors;\n  location?: InputIconLocation;\n  clickHandler?: (e: MouseEvent) => void;\n}\n"]}
+{"version":3,"file":"tuix-input.interface.js","sourceRoot":"","sources":["../../../../src/tuix-input/interfaces/tuix-input.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';\nimport { DetailValue } from '../../utils/interfaces/detail-value.interface';\nimport { InputIconLocation } from '../enums/tuix-input.enums';\n\nexport interface InputIconColors {\n  inactive: string;\n  active: string;\n  disabled: string;\n}\n\nexport interface FormatIconSetParams {\n  iconName: IconName;\n  colorByState: InputIconColors;\n  location?: InputIconLocation;\n  clickHandler?: (e: MouseEvent) => void;\n}\n\nexport type CustomEventTuixInput = CustomEvent<DetailValue<string>>;\n"]}