tuix-webcomponents 0.1.0 → 0.3.0

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

@@ -4,18 +4,20 @@ import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { IconName, IconSizeVariant, iconSize } from './enums/tuix-icon.enums';
 import { iconTemplate } from './TuixIcon.icons';
-import { palette } from '../utils/colors';
+import { Palette } from '../utils/colors';
 let TuixIcon = class TuixIcon extends LitElement {
     constructor() {
         super(...arguments);
         this.name = IconName.ARROW_DOWN;
-        this.color = palette.black;
         this.size = IconSizeVariant.SMALL;
+        this.dark = false;
     }
     _getSelectedColor() {
-        let selectedColor = this.color;
-        if (Object.prototype.hasOwnProperty.call(palette, this.color)) {
-            selectedColor = palette[this.color];
+        const defaultValue = this.dark ? Palette.WHITE : Palette.BLACK;
+        let selectedColor = this.color || defaultValue;
+        if (Object.prototype.hasOwnProperty.call(Palette, selectedColor)) {
+            const nameColor = selectedColor;
+            selectedColor = Palette[nameColor];
         }
         return selectedColor;
     }
@@ -58,6 +60,9 @@ __decorate([
 __decorate([
     property({ type: IconSizeVariant })
 ], TuixIcon.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixIcon.prototype, "dark", void 0);
 TuixIcon = __decorate([
     customElement('tuix-icon')
 ], TuixIcon);

package/dist/src/tuix-icon/TuixIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixIcon.js","sourceRoot":"","sources":["../../../src/tuix-icon/TuixIcon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAG1C,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAgBE,SAAI,GAAG,QAAQ,CAAC,UAAU,CAAC;QAG3B,UAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAGtB,SAAI,GAAG,eAAe,CAAC,KAAK,CAAC;IA6B/B,CAAC;IA3BS,iBAAiB;QACvB,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/B,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE;YAC7D,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACrC;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;IAEO,gBAAgB;QACtB,OAAO,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;;QACJ,MAAM,YAAY,GAAG,MAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mCAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAE5E,MAAM,aAAa,GAAG;YACpB,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,YAAY;SACrB,CAAC;QAEF,OAAO,IAAI,CAAA;2CAC4B,QAAQ,CAAC,aAAa,CAAC;UACxD,IAAI,CAAC,gBAAgB,EAAE;;KAE5B,CAAC;IACJ,CAAC;;AAjDM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;GAYlB,AAZY,CAYX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;sCACF;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;sCACP;AAtBlB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmDpB;SAnDY,QAAQ","sourcesContent":["import { LitElement, TemplateResult, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { IconName, IconSizeVariant, iconSize } from './enums/tuix-icon.enums';\nimport { iconTemplate } from './TuixIcon.icons';\nimport { palette } from '../utils/colors';\n\n@customElement('tuix-icon')\nexport class TuixIcon extends LitElement {\n  static styles = css`\n    .icon-component {\n      width: 24px;\n      height: 24px;\n      display: block;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `;\n\n  @property({ type: IconName })\n  name = IconName.ARROW_DOWN;\n\n  @property({ type: String })\n  color = palette.black;\n\n  @property({ type: IconSizeVariant })\n  size = IconSizeVariant.SMALL;\n\n  private _getSelectedColor() {\n    let selectedColor = this.color;\n    if (Object.prototype.hasOwnProperty.call(palette, this.color)) {\n      selectedColor = palette[this.color];\n    }\n\n    return selectedColor;\n  }\n\n  private _getIconTemplate(): TemplateResult {\n    return iconTemplate(this.name, this._getSelectedColor());\n  }\n\n  render() {\n    const selectedSize = iconSize[this.size] ?? iconSize[IconSizeVariant.SMALL];\n\n    const dynamicStyles = {\n      width: selectedSize,\n      height: selectedSize,\n    };\n\n    return html`\n      <div class=\"icon-component\" style=\"${styleMap(dynamicStyles)}\">\n        ${this._getIconTemplate()}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TuixIcon.js","sourceRoot":"","sources":["../../../src/tuix-icon/TuixIcon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAG1C,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAgBE,SAAI,GAAG,QAAQ,CAAC,UAAU,CAAC;QAM3B,SAAI,GAAG,eAAe,CAAC,KAAK,CAAC;QAG7B,SAAI,GAAG,KAAK,CAAC;IA+Bf,CAAC;IA7BS,iBAAiB;QACvB,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;QAC/D,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,YAAY,CAAC;QAC/C,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE;YAChE,MAAM,SAAS,GAAG,aAAqC,CAAC;YACxD,aAAa,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;SACpC;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;IAEO,gBAAgB;QACtB,OAAO,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;;QACJ,MAAM,YAAY,GAAG,MAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mCAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAE5E,MAAM,aAAa,GAAG;YACpB,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,YAAY;SACrB,CAAC;QAEF,OAAO,IAAI,CAAA;2CAC4B,QAAQ,CAAC,aAAa,CAAC;UACxD,IAAI,CAAC,gBAAgB,EAAE;;KAE5B,CAAC;IACJ,CAAC;;AAtDM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;GAYlB,AAZY,CAYX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;sCACF;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;sCACP;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACf;AAzBF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAwDpB;SAxDY,QAAQ","sourcesContent":["import { LitElement, TemplateResult, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { IconName, IconSizeVariant, iconSize } from './enums/tuix-icon.enums';\nimport { iconTemplate } from './TuixIcon.icons';\nimport { Palette } from '../utils/colors';\n\n@customElement('tuix-icon')\nexport class TuixIcon extends LitElement {\n  static styles = css`\n    .icon-component {\n      width: 24px;\n      height: 24px;\n      display: block;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `;\n\n  @property({ type: IconName })\n  name = IconName.ARROW_DOWN;\n\n  @property({ type: String })\n  color?: string;\n\n  @property({ type: IconSizeVariant })\n  size = IconSizeVariant.SMALL;\n\n  @property({ type: Boolean })\n  dark = false;\n\n  private _getSelectedColor() {\n    const defaultValue = this.dark ? Palette.WHITE : Palette.BLACK;\n    let selectedColor = this.color || defaultValue;\n    if (Object.prototype.hasOwnProperty.call(Palette, selectedColor)) {\n      const nameColor = selectedColor as keyof typeof Palette;\n      selectedColor = Palette[nameColor];\n    }\n\n    return selectedColor;\n  }\n\n  private _getIconTemplate(): TemplateResult {\n    return iconTemplate(this.name, this._getSelectedColor());\n  }\n\n  render() {\n    const selectedSize = iconSize[this.size] ?? iconSize[IconSizeVariant.SMALL];\n\n    const dynamicStyles = {\n      width: selectedSize,\n      height: selectedSize,\n    };\n\n    return html`\n      <div class=\"icon-component\" style=\"${styleMap(dynamicStyles)}\">\n        ${this._getIconTemplate()}\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -19,25 +19,6 @@ export declare enum IconName {
     LOADER = "loader",
     CIRCLE_CHECK = "circle-check",
     CHEVRON_DOWN = "chevron-down",
-    CHEVRON_UP = "chevron-up"
-}
-export declare enum IconColor {
-    primary_50 = "#F2F2F8",
-    primary_100 = "#D7D7EA",
-    primary_200 = "#BEC0DA",
-    primary = "#585A9D",
-    primary_700 = "#494B83",
-    primary_900 = "#33355B",
-    secondary = "#BBADFF",
-    white = "#FFFFFF",
-    black = "#000000",
-    neutral_200 = "#C9C8D3",
-    neutral_600 = "#8A8894",
-    success = "#439F6E",
-    validation = "#FFB82E",
-    validation_50 = "FFFBF4",
-    validation_200 = "FFEAC1",
-    error = "#F93232",
-    error_50 = "#FFF5F5",
-    error_200 = "#FFD8D8"
+    CHEVRON_UP = "chevron-up",
+    CHECK = "check"
 }

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

@@ -27,26 +27,6 @@ export var IconName;
     IconName["CIRCLE_CHECK"] = "circle-check";
     IconName["CHEVRON_DOWN"] = "chevron-down";
     IconName["CHEVRON_UP"] = "chevron-up";
+    IconName["CHECK"] = "check";
 })(IconName || (IconName = {}));
-export var IconColor;
-(function (IconColor) {
-    IconColor["primary_50"] = "#F2F2F8";
-    IconColor["primary_100"] = "#D7D7EA";
-    IconColor["primary_200"] = "#BEC0DA";
-    IconColor["primary"] = "#585A9D";
-    IconColor["primary_700"] = "#494B83";
-    IconColor["primary_900"] = "#33355B";
-    IconColor["secondary"] = "#BBADFF";
-    IconColor["white"] = "#FFFFFF";
-    IconColor["black"] = "#000000";
-    IconColor["neutral_200"] = "#C9C8D3";
-    IconColor["neutral_600"] = "#8A8894";
-    IconColor["success"] = "#439F6E";
-    IconColor["validation"] = "#FFB82E";
-    IconColor["validation_50"] = "FFFBF4";
-    IconColor["validation_200"] = "FFEAC1";
-    IconColor["error"] = "#F93232";
-    IconColor["error_50"] = "#FFF5F5";
-    IconColor["error_200"] = "#FFD8D8";
-})(IconColor || (IconColor = {}));
 //# sourceMappingURL=tuix-icon.enums.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tuix-icon.enums.js","sourceRoot":"","sources":["../../../../src/tuix-icon/enums/tuix-icon.enums.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,eAKX;AALD,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,kCAAe,CAAA;IACf,gCAAa,CAAA;AACf,CAAC,EALW,eAAe,KAAf,eAAe,QAK1B;AAED,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACvD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM;IAC/B,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,MAAM;IAChC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM;IAC/B,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM;CAC/B,CAAC;AAEF,MAAM,CAAN,IAAY,QAeX;AAfD,WAAY,QAAQ;IAClB,qCAAyB,CAAA;IACzB,qCAAyB,CAAA;IACzB,iCAAqB,CAAA;IACrB,uCAA2B,CAAA;IAC3B,6BAAiB,CAAA;IACjB,6BAAiB,CAAA;IACjB,+BAAmB,CAAA;IACnB,6CAAiC,CAAA;IACjC,yDAA6C,CAAA;IAC7C,iCAAqB,CAAA;IACrB,6BAAiB,CAAA;IACjB,yCAA6B,CAAA;IAC7B,yCAA6B,CAAA;IAC7B,qCAAyB,CAAA;AAC3B,CAAC,EAfW,QAAQ,KAAR,QAAQ,QAenB;AAED,MAAM,CAAN,IAAY,SAmBX;AAnBD,WAAY,SAAS;IACnB,mCAAsB,CAAA;IACtB,oCAAuB,CAAA;IACvB,oCAAuB,CAAA;IACvB,gCAAmB,CAAA;IACnB,oCAAuB,CAAA;IACvB,oCAAuB,CAAA;IACvB,kCAAqB,CAAA;IACrB,8BAAiB,CAAA;IACjB,8BAAiB,CAAA;IACjB,oCAAuB,CAAA;IACvB,oCAAuB,CAAA;IACvB,gCAAmB,CAAA;IACnB,mCAAsB,CAAA;IACtB,qCAAwB,CAAA;IACxB,sCAAyB,CAAA;IACzB,8BAAiB,CAAA;IACjB,iCAAoB,CAAA;IACpB,kCAAqB,CAAA;AACvB,CAAC,EAnBW,SAAS,KAAT,SAAS,QAmBpB","sourcesContent":["export enum IconSizeVariant {\n  SMALL = 'small',\n  MEDIUM = 'medium',\n  LARGE = 'large',\n  FULL = 'full',\n}\n\nexport const iconSize: Record<IconSizeVariant, string> = {\n  [IconSizeVariant.SMALL]: '16px',\n  [IconSizeVariant.MEDIUM]: '24px',\n  [IconSizeVariant.LARGE]: '32px',\n  [IconSizeVariant.FULL]: '100%',\n};\n\nexport enum IconName {\n  ARROW_DOWN = 'arrow-down',\n  ARROW_LEFT = 'arrow-left',\n  ARROW_UP = 'arrow-up',\n  ARROW_RIGHT = 'arrow-right',\n  SEARCH = 'search',\n  EYE_ON = 'eye-on',\n  EYE_OFF = 'eye-off',\n  EYE_CLOSE_LINE = 'eye-close-line',\n  TRIANGLE_EXCLAMATION = 'triangle-exclamation',\n  CIRCLE_X = 'circle-x',\n  LOADER = 'loader',\n  CIRCLE_CHECK = 'circle-check',\n  CHEVRON_DOWN = 'chevron-down',\n  CHEVRON_UP = 'chevron-up',\n}\n\nexport enum IconColor {\n  primary_50 = '#F2F2F8',\n  primary_100 = '#D7D7EA',\n  primary_200 = '#BEC0DA',\n  primary = '#585A9D',\n  primary_700 = '#494B83',\n  primary_900 = '#33355B',\n  secondary = '#BBADFF',\n  white = '#FFFFFF',\n  black = '#000000',\n  neutral_200 = '#C9C8D3',\n  neutral_600 = '#8A8894',\n  success = '#439F6E',\n  validation = '#FFB82E',\n  validation_50 = 'FFFBF4',\n  validation_200 = 'FFEAC1',\n  error = '#F93232',\n  error_50 = '#FFF5F5',\n  error_200 = '#FFD8D8',\n}\n"]}
+{"version":3,"file":"tuix-icon.enums.js","sourceRoot":"","sources":["../../../../src/tuix-icon/enums/tuix-icon.enums.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,eAKX;AALD,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,kCAAe,CAAA;IACf,gCAAa,CAAA;AACf,CAAC,EALW,eAAe,KAAf,eAAe,QAK1B;AAED,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACvD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM;IAC/B,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,MAAM;IAChC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM;IAC/B,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM;CAC/B,CAAC;AAEF,MAAM,CAAN,IAAY,QAgBX;AAhBD,WAAY,QAAQ;IAClB,qCAAyB,CAAA;IACzB,qCAAyB,CAAA;IACzB,iCAAqB,CAAA;IACrB,uCAA2B,CAAA;IAC3B,6BAAiB,CAAA;IACjB,6BAAiB,CAAA;IACjB,+BAAmB,CAAA;IACnB,6CAAiC,CAAA;IACjC,yDAA6C,CAAA;IAC7C,iCAAqB,CAAA;IACrB,6BAAiB,CAAA;IACjB,yCAA6B,CAAA;IAC7B,yCAA6B,CAAA;IAC7B,qCAAyB,CAAA;IACzB,2BAAe,CAAA;AACjB,CAAC,EAhBW,QAAQ,KAAR,QAAQ,QAgBnB","sourcesContent":["export enum IconSizeVariant {\n  SMALL = 'small',\n  MEDIUM = 'medium',\n  LARGE = 'large',\n  FULL = 'full',\n}\n\nexport const iconSize: Record<IconSizeVariant, string> = {\n  [IconSizeVariant.SMALL]: '16px',\n  [IconSizeVariant.MEDIUM]: '24px',\n  [IconSizeVariant.LARGE]: '32px',\n  [IconSizeVariant.FULL]: '100%',\n};\n\nexport enum IconName {\n  ARROW_DOWN = 'arrow-down',\n  ARROW_LEFT = 'arrow-left',\n  ARROW_UP = 'arrow-up',\n  ARROW_RIGHT = 'arrow-right',\n  SEARCH = 'search',\n  EYE_ON = 'eye-on',\n  EYE_OFF = 'eye-off',\n  EYE_CLOSE_LINE = 'eye-close-line',\n  TRIANGLE_EXCLAMATION = 'triangle-exclamation',\n  CIRCLE_X = 'circle-x',\n  LOADER = 'loader',\n  CIRCLE_CHECK = 'circle-check',\n  CHEVRON_DOWN = 'chevron-down',\n  CHEVRON_UP = 'chevron-up',\n  CHECK = 'check',\n}\n"]}

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

@@ -1,14 +1,9 @@
-import { LitElement, TemplateResult } from 'lit';
+import { TemplateResult } from 'lit';
 import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
-import '../tuix-icon/TuixIcon.js';
-import { MainVariant } from '../utils/mainVariant.enum';
-export declare class TuixIconButton extends LitElement {
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
+export declare class TuixIconButton extends TuixBaseButton {
     static styles: import("lit").CSSResult[];
-    variant: MainVariant;
-    disabled: boolean;
-    icon?: IconName;
-    private _getIconColor;
-    private _handleClick;
-    private _iconTemplate;
-    protected render(): TemplateResult;
+    icon: IconName;
+    protected _updateIconColor(): void;
+    protected _buttonContent(): TemplateResult;
 }

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

@@ -1,46 +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 } from 'lit/decorators.js';
-import '../tuix-icon/TuixIcon.js';
-import { palette } from '../utils/colors';
 import { ScreenSizes } from '../utils/screenSizes.enum';
-import { buttonColorStyles } 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 { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles';
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
+let TuixIconButton = class TuixIconButton extends TuixBaseButton {
     constructor() {
         super(...arguments);
-        this.variant = MainVariant.PRIMARY;
-        this.disabled = false;
+        this.icon = IconName.ARROW_DOWN;
     }
-    _getIconColor() {
-        let iconColor = '';
-        iconColor = buttonTextColor[this.variant];
-        if (this.disabled)
-            iconColor = palette.primary_200;
-        return iconColor;
+    _updateIconColor() {
+        if (!this.icon)
+            return;
+        this.iconColor = this._getTextColor();
     }
-    _handleClick() {
-        this.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-    }
-    _iconTemplate(iconName) {
-        return html `<tuix-icon
-      size="${IconSizeVariant.MEDIUM}"
-      name="${iconName}"
-      color="${this._getIconColor()}"
-    ></tuix-icon>`;
-    }
-    render() {
-        return html `
-      <button
-        @click=${this._handleClick}
-        class="button ${this.variant}"
-        ?disabled="${this.disabled}"
-      >
-        ${this.icon ? this._iconTemplate(this.icon) : nothing}
-      </button>
-    `;
+    _buttonContent() {
+        return html `${this._iconTemplate(this.icon, IconSizeVariant.MEDIUM)}`;
     }
 };
 TuixIconButton.styles = [
@@ -48,6 +24,7 @@ TuixIconButton.styles = [
       .button {
         padding: 16px;
         border-radius: 4px;
+        border: none;
       }
 
       @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
@@ -62,14 +39,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);

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,MAAM,mBAAmB,CAAC;AAC5D,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAwBE,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;IAoCnB,CAAC;IA/BS,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,IAAI,CAAC,QAAQ;YAAE,SAAS,GAAG,OAAO,CAAC,WAAW,CAAC;QAEnD,OAAO,SAAS,CAAC;IACnB,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,OAAO,IAAI,CAAA;cACD,eAAe,CAAC,MAAM;cACtB,QAAoB;eACnB,IAAI,CAAC,aAAa,EAAE;kBACjB,CAAC;IACjB,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,YAAY;wBACV,IAAI,CAAC,OAAO;qBACf,IAAI,CAAC,QAAQ;;UAExB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO;;KAExD,CAAC;IACJ,CAAC;;AA7DM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;2CAMoC,WAAW,CAAC,MAAM;;;;;;2CAMlB,WAAW,CAAC,MAAM;;;;;KAKxD;IACD,iBAAiB;CAClB,AApBY,CAoBX;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;AA9BL,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA+D1B;SA/DY,cAAc","sourcesContent":["import { LitElement, TemplateResult, css, html, nothing } from 'lit';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../tuix-icon/TuixIcon.js';\nimport { palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { buttonColorStyles } 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    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  private _getIconColor(): string {\n    let iconColor = '';\n    iconColor = buttonTextColor[this.variant];\n    if (this.disabled) iconColor = palette.primary_200;\n\n    return iconColor;\n  }\n\n  private _handleClick() {\n    this.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n  }\n\n  private _iconTemplate(iconName: IconName): TemplateResult {\n    return html`<tuix-icon\n      size=\"${IconSizeVariant.MEDIUM}\"\n      name=\"${iconName as IconName}\"\n      color=\"${this._getIconColor()}\"\n    ></tuix-icon>`;\n  }\n\n  protected render(): TemplateResult {\n    return html`\n      <button\n        @click=${this._handleClick}\n        class=\"button ${this.variant}\"\n        ?disabled=\"${this.disabled}\"\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":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,wBAAwB,EACxB,yBAAyB,EACzB,iBAAiB,EACjB,SAAS,GACV,MAAM,6BAA6B,CAAC;AAOrC,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;;QAaE,aAAQ,GAAG,KAAK,CAAC;QAMjB,UAAK,GAAG,EAAE,CAAC;QAGX,gBAAW,GAAG,EAAE,CAAC;QAGjB,UAAK,GAAG,EAAE,CAAC;QAGX,SAAI,GAAG,SAAS,CAAC,IAAI,CAAC;QAGtB,cAAS,GAAG,SAAS,CAAC;QAGtB,gBAAW,GAAG,SAAS,CAAC;QAGxB,oBAAe,GAAG,eAAe,CAAC,IAAI,CAAC;QAGvC,SAAI,GAAG,KAAK,CAAC;QAGb,aAAQ,GAAG,KAAK,CAAC;QAMT,UAAK,GAAG,IAAI,CAAC,IAAI,CAAC;QAGlB,mBAAc,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,KAAI,CAAC,CAAC;QAEzC,kBAAa,GAAG,IAAI,CAAC,IAAI,CAAC;QAE1B,mBAAc,GAAG,EAAE,CAAC;QAEpB,4BAAuB,GAAoB;YACjD,QAAQ,EAAE,OAAO,CAAC,KAAK;YACvB,MAAM,EAAE,OAAO,CAAC,IAAI;YACpB,QAAQ,EAAE,OAAO,CAAC,WAAW;SAC9B,CAAC;QAEM,2BAAsB,GAAoB;YAChD,QAAQ,EAAE,WAAW,CAAC,WAAW;YACjC,MAAM,EAAE,WAAW,CAAC,IAAI;YACxB,QAAQ,EAAE,WAAW,CAAC,WAAW;SAClC,CAAC;IA0QJ,CAAC;IAxQS,gBAAgB,CAAC,CAAa,EAAE,SAAiB;QACvD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,SAAS,EAAE;YACzB,MAAM,EAAE;gBACN,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK;aAC5C;YACD,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;QACzC,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEO,aAAa,CAAC,CAAa;QACjC,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;IACrC,CAAC;IAEO,wBAAwB;QAC9B,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,QAAQ,EAAE;YACrC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC;YAC5B,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;SACzD;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC;YAChC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;SAC7D;IACH,CAAC;IAEO,cAAc,CAAC,EACrB,QAAQ,EACR,YAAY,EACZ,QAAQ,GAAG,iBAAiB,CAAC,KAAK,EAClC,YAAY,GAAG,SAAS,GACJ;QACpB,MAAM,uBAAuB,GAAG;YAC9B,sBAAsB,EAAE,IAAI;YAC5B,cAAc,EAAE,CAAC,CAAC,YAAY;YAC9B,CAAC,UAAU,QAAQ,EAAE,CAAC,EAAE,IAAI;SAC7B,CAAC;QACF,OAAO,IAAI,CAAA;eACA,QAAQ,CAAC,uBAAuB,CAAC;gBAChC,YAAY;;QAEpB,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,GAAG,CAChC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;kBACd,eAAe,CAAC,IAAI;kBACpB,QAAQ;mBACP,KAAK;0BACE,KAAK;sBACT,CACf;WACI,CAAC;IACV,CAAC;IAEO,oBAAoB;;QAC1B,IAAI,IAAI,CAAC,SAAS,IAAI,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,SAAS,EAAE;YACpE,IAAI,CAAC,cAAc,GAAG,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,0CAAE,MAAM,CAAC;SACxD;IACH,CAAC;IAEO,4BAA4B;QAClC,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,SAAS;YAC1B,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;gBAClB,QAAQ,EAAE,IAAI,CAAC,SAAS;gBACxB,YAAY,EAAE,IAAI,CAAC,IAAI;oBACrB,CAAC,CAAC,IAAI,CAAC,sBAAsB;oBAC7B,CAAC,CAAC,IAAI,CAAC,uBAAuB;aACjC,CAAC;YACJ,CAAC,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;IAEO,8BAA8B;QACpC,MAAM,qBAAqB,GAAoB;YAC7C,QAAQ,EAAE,OAAO,CAAC,KAAK;YACvB,MAAM,EAAE,OAAO,CAAC,KAAK;YACrB,QAAQ,EAAE,OAAO,CAAC,WAAW;SAC9B,CAAC;QACF,MAAM,oBAAoB,GAAoB;YAC5C,QAAQ,EAAE,WAAW,CAAC,WAAW;YACjC,MAAM,EAAE,WAAW,CAAC,WAAW;YAC/B,QAAQ,EAAE,WAAW,CAAC,WAAW;SAClC,CAAC;QACF,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,CAAC;YAChC,QAAQ,EAAE,QAAQ,CAAC,MAAM;YACzB,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB;YACtE,QAAQ,EAAE,iBAAiB,CAAC,IAAI;SACjC,CAAC,EAAE,CAAC;IACP,CAAC;IAEO,gCAAgC;QACtC,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,CAAC;YAChC,QAAQ,EACN,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,QAAQ;gBAC/B,CAAC,CAAC,QAAQ,CAAC,cAAc;gBACzB,CAAC,CAAC,QAAQ,CAAC,MAAM;YACrB,YAAY,EAAE,IAAI,CAAC,IAAI;gBACrB,CAAC,CAAC,IAAI,CAAC,sBAAsB;gBAC7B,CAAC,CAAC,IAAI,CAAC,uBAAuB;YAChC,YAAY,EAAE,IAAI,CAAC,wBAAwB;SAC5C,CAAC,GAAG,CAAC;IACR,CAAC;IAEO,8BAA8B;QACpC,QAAQ,IAAI,CAAC,IAAI,EAAE;YACjB,KAAK,SAAS,CAAC,MAAM;gBACnB,OAAO,IAAI,CAAC,8BAA8B,EAAE,CAAC;YAC/C,KAAK,SAAS,CAAC,IAAI;gBACjB,OAAO,IAAI,CAAC,4BAA4B,EAAE,CAAC;YAC7C,KAAK,SAAS,CAAC,QAAQ;gBACrB,OAAO,IAAI,CAAC,gCAAgC,EAAE,CAAC;YACjD;gBACE,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;SAC3B;IACH,CAAC;IAEO,uBAAuB;QAC7B,MAAM,YAAY,GAChB,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI;YAC9D,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS;YAClB,CAAC,CAAC,KAAK,CAAC;QACZ,OAAO;YACL,SAAS,EAAE,IAAI;YACf,YAAY,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;YAC1B,iBAAiB,EAAE,YAAY;YAC/B,CAAC,QAAQ,IAAI,CAAC,eAAe,EAAE,CAAC,EAC9B,IAAI,CAAC,eAAe,KAAK,eAAe,CAAC,IAAI;SAChD,CAAC;IACJ,CAAC;IAEO,yBAAyB;QAC/B,OAAO;YACL,mBAAmB,EAAE,IAAI;YACzB,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,SAAS;SAC1D,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA;;eAEA,QAAQ,CAAC,IAAI,CAAC,uBAAuB,EAAE,CAAC;mBACpC,IAAI,CAAC,QAAQ;mBACb,IAAI,CAAC,QAAQ;gBAChB,IAAI,CAAC,KAAK;eACX,IAAI,CAAC,IAAI;qBACH,IAAI,CAAC,WAAW,IAAI,GAAG;mBACzB,IAAI,CAAC,SAAS;gBACjB,IAAI,CAAC,YAAY;iBAChB,IAAI,CAAC,aAAa;;;MAG7B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO;MACrE,IAAI,CAAC,8BAA8B,EAAE;KACtC,CAAC;IACJ,CAAC;IAEO,yBAAyB;QAC/B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE;YAC7B,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;SACzB;QACD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,SAAS,EAAE;YAChD,CAAC,CAAC,OAAO;YACL,CAAC;IACX,CAAC;IAEO,iBAAiB;QACvB,OAAO,CACL,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,SAAS;YACjC,OAAO,IAAI,CAAC,SAAS,KAAK,QAAQ;YAClC,IAAI,CAAC,SAAS,IAAI,CAAC,CACpB,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,OAAO,IAAI,CAAA;iBACE,QAAQ,CAAC,IAAI,CAAC,uBAAuB,EAAE,CAAC;qBACpC,IAAI,CAAC,QAAQ;qBACb,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAC,KAAK;uBACL,IAAI,CAAC,WAAW;qBAClB,IAAI,CAAC,SAAS;kBACjB,IAAI,CAAC,YAAY;mBAChB,IAAI,CAAC,aAAa;;QAE7B,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,KAAK,QAAQ;YAChD,CAAC,CAAC,OAAO,GAAG,CAAC;IACnB,CAAC;IAEO,2BAA2B;QACjC,IACE,CAAC,IAAI,CAAC,eAAe;YACrB,IAAI,CAAC,eAAe,KAAK,eAAe,CAAC,IAAI,EAC7C;YACA,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;SACzB;QACD,OAAO,IAAI,CAAA;cACD,eAAe,CAAC,KAAK;cACrB,qBAAqB,CAAC,IAAI,CAAC,eAAe,CAAC;eAC1C,IAAI,CAAC,IAAI;YAChB,CAAC,CAAC,wBAAwB,CAAC,IAAI,CAAC,eAAe,CAAC;YAChD,CAAC,CAAC,yBAAyB,CAAC,IAAI,CAAC,eAAe,CAAC;;iBAExC,CAAC;IAChB,CAAC;IAEO,uBAAuB;;QAC7B,MAAM,sBAAsB,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAC/D,IAAI,CAAC,sBAAsB,EAAE;YAC3B,OAAO,IAAI,CAAA,aAAa,CAAC;SAC1B;QACD,MAAM,kBAAkB,GAAG;YACzB,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,SAAS;YACpC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,OAAO;YAChC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,SAAS;YACpC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,SAAS;YACpC,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,EAAE;SAC3B,CAAC;QACF,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,2BAA2B,EAAE;;WAE/B,MAAA,IAAI,CAAC,WAAW,mCAAI,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC;;WAE5D,CAAC;IACV,CAAC;IAEO,wBAAwB;QAC9B,OAAO,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvE,CAAC;IAEO,gCAAgC;QACtC,MAAM,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAClD,MAAM,cAAc,GAClB,IAAI,CAAC,wBAAwB,EAAE;YAC/B,CAAC,IAAI,CAAC,eAAe,KAAK,eAAe,CAAC,IAAI;gBAC5C,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW;gBACpB,CAAC,CAAC,IAAI,CAAC,CAAC;QACZ,IAAI,CAAC,gBAAgB,IAAI,CAAC,cAAc,EAAE;YACxC,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;SACzB;QACD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,uBAAuB,EAAE,IAAI,IAAI,CAAC,yBAAyB,EAAE;WAC/D,CAAC;IACV,CAAC;IAES,MAAM;QACd,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,IAAI,EAAE;YACpC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC;YAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;SACxB;QACD,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,CAAC,KAAK,EAAE;YACtC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;SACzC;QACD,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC;UAC9D,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,SAAS;YACjC,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC7B,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE;;QAE5B,IAAI,CAAC,gCAAgC,EAAE,GAAG,CAAC;IACjD,CAAC;;AA5UM,gBAAM,GAAG;IACd,UAAU;IACV,oBAAoB;IACpB,eAAe;IACf,gBAAgB;IAChB,gBAAgB;IAChB,eAAe;IACf,iBAAiB;IACjB,sBAAsB;CACvB,AATY,CASX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;4CACR;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACR;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACpB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;kDACG;AAGvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACX;AAGT;IADP,KAAK,CAAC,6BAA6B,CAAC;gDACI;AAGjC;IADP,KAAK,EAAE;wCACkB;AAGlB;IADP,KAAK,EAAE;iDACyC;AApDtC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA8UrB;SA9UY,SAAS","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;
@@ -143,8 +145,9 @@ export const inputColorStyles = css `
     border: 1px solid var(--t-field-color-stroke-focus);
     outline: 1px solid var(--t-field-color-stroke-focus);
   }
-  .t-input[disabled] {
-    pointer-events: none;
+  .t-input[disabled]:disabled {
+    cursor: not-allowed;
+    border: none;
     color: var(--t-field-color-text-disabled);
   }
   .t-input.with-title::placeholder {
@@ -176,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;
@@ -213,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;
@@ -251,11 +259,15 @@ export const inputIconStyles = css `
   .t-input:focus ~ .t-icon-set-container .t-icon-active {
     display: inline;
   }
+  .t-input[disabled] ~ .t-icon-set-container .t-icon-active {
+    display: none;
+  }
   .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {
     display: none;
   }
   .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {
     display: inline;
+    cursor: not-allowed;
   }
   @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
     .t-input-container .t-icon-set-container {