tuix-webcomponents 0.7.0 → 0.9.0

package/dist/src/tuix-checkbox/TuixCheckbox.js

@@ -3,6 +3,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
 import { checkboxCheckmarkStyles, checkboxContainerStyles, checkboxLabelStyles, hostStyles, } from './TuixCheckbox.styles';
 import { CheckboxIconColorDark, CheckboxIconColorLight, CheckboxIconMode, CheckboxLabelSide, } from './enums/tuix-checkbox.enums';
 let TuixCheckbox = class TuixCheckbox extends LitElement {
@@ -52,7 +53,7 @@ let TuixCheckbox = class TuixCheckbox extends LitElement {
         />
         <div class="t-checkbox-checkmark">
           <tuix-icon
-            size="${IconSizeVariant.SMALL}"
+            size="${IconSizeVariant.FULL}"
             name="${IconName.CHECK}"
             color="${this.dark
             ? CheckboxIconColorDark[this._getIconMode()]
@@ -61,7 +62,17 @@ let TuixCheckbox = class TuixCheckbox extends LitElement {
           </tuix-icon>
         </div>
       </div>
-      <div class="t-checkbox-label"><slot>${this.label}</slot></div>
+      <div class="t-checkbox-label">
+        <slot>
+          <tuix-text
+            size="${TextSize.Field1}"
+            color="${TextVariant.PRIMARY}"
+            ?dark="${this.dark}"
+          >
+            ${this.label}
+          </tuix-text>
+        </slot>
+      </div>
     </label>`;
     }
 };

package/dist/src/tuix-checkbox/TuixCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixCheckbox.js","sourceRoot":"","sources":["../../../src/tuix-checkbox/TuixCheckbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport {\n  checkboxCheckmarkStyles,\n  checkboxContainerStyles,\n  checkboxLabelStyles,\n  hostStyles,\n} from './TuixCheckbox.styles';\nimport {\n  CheckboxIconColorDark,\n  CheckboxIconColorLight,\n  CheckboxIconMode,\n  CheckboxLabelSide,\n} from './enums/tuix-checkbox.enums';\n\n@customElement('tuix-checkbox')\nexport class TuixCheckbox extends LitElement {\n  static styles = [\n    hostStyles,\n    checkboxContainerStyles,\n    checkboxCheckmarkStyles,\n    checkboxLabelStyles,\n  ];\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  labelSide = CheckboxLabelSide.RIGHT;\n\n  private _onCheckboxChange(event: InputEvent) {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          value: (event.target as HTMLInputElement).checked,\n          label: this.label,\n        },\n        bubbles: true,\n      })\n    );\n  }\n\n  private _getIconMode() {\n    if (this.disabled) {\n      return CheckboxIconMode.DISABLED;\n    }\n    if (this.error) {\n      return CheckboxIconMode.ERROR;\n    }\n    return CheckboxIconMode.DEFAULT;\n  }\n\n  private _getFullContainerClasses(): ClassInfo {\n    return {\n      't-checkbox-full-container': true,\n      't-with-error': this.error && !this.disabled,\n      't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,\n    };\n  }\n\n  protected render(): TemplateResult {\n    return html`<label class=\"${classMap(this._getFullContainerClasses())}\">\n      <div class=\"t-checkbox-container\">\n        <input\n          type=\"checkbox\"\n          class=\"t-checkbox\"\n          .checked=\"${this.checked}\"\n          ?disabled=\"${this.disabled}\"\n          @change=\"${this._onCheckboxChange}\"\n        />\n        <div class=\"t-checkbox-checkmark\">\n          <tuix-icon\n            size=\"${IconSizeVariant.SMALL}\"\n            name=\"${IconName.CHECK}\"\n            color=\"${this.dark\n              ? CheckboxIconColorDark[this._getIconMode()]\n              : CheckboxIconColorLight[this._getIconMode()]}\"\n          >\n          </tuix-icon>\n        </div>\n      </div>\n      <div class=\"t-checkbox-label\"><slot>${this.label}</slot></div>\n    </label>`;\n  }\n}\n"]}
+{"version":3,"file":"TuixCheckbox.js","sourceRoot":"","sources":["../../../src/tuix-checkbox/TuixCheckbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';\nimport {\n  checkboxCheckmarkStyles,\n  checkboxContainerStyles,\n  checkboxLabelStyles,\n  hostStyles,\n} from './TuixCheckbox.styles';\nimport {\n  CheckboxIconColorDark,\n  CheckboxIconColorLight,\n  CheckboxIconMode,\n  CheckboxLabelSide,\n} from './enums/tuix-checkbox.enums';\n\n@customElement('tuix-checkbox')\nexport class TuixCheckbox extends LitElement {\n  static styles = [\n    hostStyles,\n    checkboxContainerStyles,\n    checkboxCheckmarkStyles,\n    checkboxLabelStyles,\n  ];\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  labelSide = CheckboxLabelSide.RIGHT;\n\n  private _onCheckboxChange(event: InputEvent) {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          value: (event.target as HTMLInputElement).checked,\n          label: this.label,\n        },\n        bubbles: true,\n      })\n    );\n  }\n\n  private _getIconMode() {\n    if (this.disabled) {\n      return CheckboxIconMode.DISABLED;\n    }\n    if (this.error) {\n      return CheckboxIconMode.ERROR;\n    }\n    return CheckboxIconMode.DEFAULT;\n  }\n\n  private _getFullContainerClasses(): ClassInfo {\n    return {\n      't-checkbox-full-container': true,\n      't-with-error': this.error && !this.disabled,\n      't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,\n    };\n  }\n\n  protected render(): TemplateResult {\n    return html`<label class=\"${classMap(this._getFullContainerClasses())}\">\n      <div class=\"t-checkbox-container\">\n        <input\n          type=\"checkbox\"\n          class=\"t-checkbox\"\n          .checked=\"${this.checked}\"\n          ?disabled=\"${this.disabled}\"\n          @change=\"${this._onCheckboxChange}\"\n        />\n        <div class=\"t-checkbox-checkmark\">\n          <tuix-icon\n            size=\"${IconSizeVariant.FULL}\"\n            name=\"${IconName.CHECK}\"\n            color=\"${this.dark\n              ? CheckboxIconColorDark[this._getIconMode()]\n              : CheckboxIconColorLight[this._getIconMode()]}\"\n          >\n          </tuix-icon>\n        </div>\n      </div>\n      <div class=\"t-checkbox-label\">\n        <slot>\n          <tuix-text\n            size=\"${TextSize.Field1}\"\n            color=\"${TextVariant.PRIMARY}\"\n            ?dark=\"${this.dark}\"\n          >\n            ${this.label}\n          </tuix-text>\n        </slot>\n      </div>\n    </label>`;\n  }\n}\n"]}

package/dist/src/tuix-checkbox/TuixCheckbox.styles.js

@@ -1,6 +1,7 @@
 import { css, unsafeCSS } from 'lit';
 import { Palette } from '../utils/colors';
 import { DarkPalette } from '../utils/darkColors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
 export const hostStyles = css `
   :host {
     --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};
@@ -25,6 +26,7 @@ export const checkboxContainerStyles = css `
   .t-checkbox-full-container {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -35,10 +37,13 @@ export const checkboxContainerStyles = css `
     cursor: not-allowed;
   }
   .t-checkbox-container {
+    --t-checkbox-size-box: 1.5rem;
+    --t-checkbox-shadow-width: 2px;
+    --t-checkbox-border-radius: 0.25rem;
     display: block;
     position: relative;
-    height: 1.5rem;
-    width: 1.5rem;
+    height: var(--t-checkbox-size-box);
+    width: var(--t-checkbox-size-box);
   }
   .t-checkbox-container .t-checkbox {
     position: absolute;
@@ -46,6 +51,13 @@ export const checkboxContainerStyles = css `
     height: 0;
     width: 0;
   }
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    .t-checkbox-container {
+      --t-checkbox-size-box: 1rem;
+      --t-checkbox-shadow-width: 1px;
+      --t-checkbox-border-radius: 0.125rem;
+    }
+  }
 `;
 export const checkboxCheckmarkStyles = css `
   .t-checkbox-container .t-checkbox-checkmark {
@@ -53,35 +65,38 @@ export const checkboxCheckmarkStyles = css `
     top: 0;
     left: 0;
     display: flex;
-    height: 1.5rem;
-    width: 1.5rem;
-    border-radius: 0.25rem;
+    height: var(--t-checkbox-size-box);
+    width: var(--t-checkbox-size-box);
+    border-radius: var(--t-checkbox-border-radius);
     background-color: var(--t-bg-color-primary);
-    border: 2px solid var(--t-stroke-color-grey);
+    border: 1px solid var(--t-stroke-color-grey);
     box-sizing: border-box;
   }
   .t-checkbox-container .t-checkbox-checkmark tuix-icon {
     margin: auto;
     display: none;
+    width: calc(var(--t-checkbox-size-box) - 0.5rem);
+    height: calc(var(--t-checkbox-size-box) - 0.5rem);
   }
   .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {
     background-color: var(--t-main-color-tuix);
     border: none;
   }
   .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {
-    box-shadow: 0 0 0px 2px var(--t-stroke-color-focus);
-    border: 2px solid var(--t-main-color-tuix);
+    box-shadow: 0 0 0px var(--t-checkbox-shadow-width)
+      var(--t-stroke-color-focus);
+    border: 1px solid var(--t-main-color-tuix);
   }
   .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {
     display: block;
   }
   .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {
-    border: 2px solid var(--t-main-color-tuix);
+    border: 1px solid var(--t-main-color-tuix);
   }
   .t-checkbox-full-container.t-with-error
     .t-checkbox-container
     .t-checkbox-checkmark {
-    border: 2px solid var(--t-text-color-error);
+    border: 1px solid var(--t-text-color-error);
   }
   .t-checkbox-full-container.t-with-error
     .t-checkbox-container
@@ -90,6 +105,7 @@ export const checkboxCheckmarkStyles = css `
     background-color: var(--t-text-color-error);
     border: none;
   }
+
   .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {
     background-color: var(--t-bg-color-disabled);
     border: none;
@@ -99,10 +115,6 @@ export const checkboxCheckmarkStyles = css `
 export const checkboxLabelStyles = css `
   .t-checkbox-label {
     display: block;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    font-weight: 300;
-    font-family: 'Rubik', sans-serif;
     color: var(--t-text-color-label);
     margin-left: 0.625rem;
   }

package/dist/src/tuix-checkbox/TuixCheckbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixCheckbox.styles.js","sourceRoot":"","sources":["../../../src/tuix-checkbox/TuixCheckbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;2BAEF,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;4BACtB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;6BACvB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;4BAC/B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;8BACtB,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;6BAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;4BAC/B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;;2BAGzB,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC;4BAC1B,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;6BAC3B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;4BACnC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;8BAC1B,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;6BACjC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;4BACnC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;;CAEvD,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBzC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDzC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBrC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\n\nexport const hostStyles = css`\n  :host {\n    --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-text-color-error: ${unsafeCSS(Palette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-text-color-label: ${unsafeCSS(Palette.BLACK)};\n  }\n  :host([dark]) {\n    --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};\n  }\n`;\n\nexport const checkboxContainerStyles = css`\n  .t-checkbox-full-container {\n    display: flex;\n    justify-content: space-between;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-checkbox-full-container {\n    cursor: not-allowed;\n  }\n  .t-checkbox-container {\n    display: block;\n    position: relative;\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n  .t-checkbox-container .t-checkbox {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n`;\n\nexport const checkboxCheckmarkStyles = css`\n  .t-checkbox-container .t-checkbox-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: 1.5rem;\n    width: 1.5rem;\n    border-radius: 0.25rem;\n    background-color: var(--t-bg-color-primary);\n    border: 2px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n  }\n  .t-checkbox-container .t-checkbox-checkmark tuix-icon {\n    margin: auto;\n    display: none;\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {\n    background-color: var(--t-main-color-tuix);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {\n    box-shadow: 0 0 0px 2px var(--t-stroke-color-focus);\n    border: 2px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {\n    display: block;\n  }\n  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {\n    border: 2px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox-checkmark {\n    border: 2px solid var(--t-text-color-error);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox:checked\n    ~ .t-checkbox-checkmark {\n    background-color: var(--t-text-color-error);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`;\n\nexport const checkboxLabelStyles = css`\n  .t-checkbox-label {\n    display: block;\n    font-size: 1rem;\n    line-height: 1.5rem;\n    font-weight: 300;\n    font-family: 'Rubik', sans-serif;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-checkbox-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n  }\n  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`;\n"]}
+{"version":3,"file":"TuixCheckbox.styles.js","sourceRoot":"","sources":["../../../src/tuix-checkbox/TuixCheckbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;2BAEF,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;4BACtB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;6BACvB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;4BAC/B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;8BACtB,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;6BAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;4BAC/B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;;2BAGzB,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC;4BAC1B,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;6BAC3B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;4BACnC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;8BAC1B,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;6BACjC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;4BACnC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;;CAEvD,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCA6BH,WAAW,CAAC,MAAM;;;;;;;CAOxD,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDzC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;CAarC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\nexport const hostStyles = css`\n  :host {\n    --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-text-color-error: ${unsafeCSS(Palette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-text-color-label: ${unsafeCSS(Palette.BLACK)};\n  }\n  :host([dark]) {\n    --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};\n  }\n`;\n\nexport const checkboxContainerStyles = css`\n  .t-checkbox-full-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-checkbox-full-container {\n    cursor: not-allowed;\n  }\n  .t-checkbox-container {\n    --t-checkbox-size-box: 1.5rem;\n    --t-checkbox-shadow-width: 2px;\n    --t-checkbox-border-radius: 0.25rem;\n    display: block;\n    position: relative;\n    height: var(--t-checkbox-size-box);\n    width: var(--t-checkbox-size-box);\n  }\n  .t-checkbox-container .t-checkbox {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-checkbox-container {\n      --t-checkbox-size-box: 1rem;\n      --t-checkbox-shadow-width: 1px;\n      --t-checkbox-border-radius: 0.125rem;\n    }\n  }\n`;\n\nexport const checkboxCheckmarkStyles = css`\n  .t-checkbox-container .t-checkbox-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: var(--t-checkbox-size-box);\n    width: var(--t-checkbox-size-box);\n    border-radius: var(--t-checkbox-border-radius);\n    background-color: var(--t-bg-color-primary);\n    border: 1px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n  }\n  .t-checkbox-container .t-checkbox-checkmark tuix-icon {\n    margin: auto;\n    display: none;\n    width: calc(var(--t-checkbox-size-box) - 0.5rem);\n    height: calc(var(--t-checkbox-size-box) - 0.5rem);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {\n    background-color: var(--t-main-color-tuix);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {\n    box-shadow: 0 0 0px var(--t-checkbox-shadow-width)\n      var(--t-stroke-color-focus);\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {\n    display: block;\n  }\n  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {\n    border: 1px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox-checkmark {\n    border: 1px solid var(--t-text-color-error);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox:checked\n    ~ .t-checkbox-checkmark {\n    background-color: var(--t-text-color-error);\n    border: none;\n  }\n\n  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`;\n\nexport const checkboxLabelStyles = css`\n  .t-checkbox-label {\n    display: block;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-checkbox-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n  }\n  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`;\n"]}

package/dist/src/tuix-dropdown/TuixDropdown.styles.js

@@ -66,7 +66,7 @@ export const dropdownOptionStyles = css `
     padding: 0.75rem 1rem;
     cursor: pointer;
     font-size: 1rem;
-    font-weight: 400;
+    font-weight: 300;
     line-height: 1.5rem;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -82,16 +82,10 @@ export const dropdownOptionStyles = css `
   .t-dropdown-option:focus {
     outline: none;
   }
-  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-    .t-dropdown-option {
-      font-size: 1rem;
-      line-height: 1.25rem;
-    }
-  }
   @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
     .t-dropdown-option {
       font-size: 0.875rem;
-      line-height: 1rem;
+      line-height: 1.25rem;
     }
   }
 `;

package/dist/src/tuix-dropdown/TuixDropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixDropdown.styles.js","sourceRoot":"","sources":["../../../src/tuix-dropdown/TuixDropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;IACjC,UAAU;;8BAEgB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;4BAC1B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;8BAIrB,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;;CAE/D,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;CAQ7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;kCAaL,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;wBAUnC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAoCf,WAAW,CAAC,MAAM;;;;;;uCAMlB,WAAW,CAAC,MAAM;;;;;;CAMxD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-input/TuixInput.styles';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { DarkPalette } from '../utils/darkColors';\n\nexport const dropdownHostStyles = css`\n  ${hostStyles}\n  :host {\n    --t-field-color-option: ${unsafeCSS(Palette.WHITE)};\n    --t-field-color-main: ${unsafeCSS(Palette.MAIN)};\n  }\n\n  :host([dark]) {\n    --t-field-color-option: ${unsafeCSS(DarkPalette.ELEVATION_2)};\n  }\n`;\n\nexport const dropdownMainContainerStyles = css`\n  .t-dropdown-full-container {\n    position: relative;\n    font-family: 'Rubik', sans-serif;\n  }\n  .t-dropdown-container .t-input-dropdown {\n    --t-field-input-cursor: pointer;\n  }\n`;\n\nexport const dropdownOptionStyles = css`\n  .t-options-container {\n    width: 100%;\n    position: absolute;\n    top: calc(100% + 2px);\n    left: 0;\n    border: none;\n    border-radius: 0 0 5px 5px;\n    background-color: var(--t-field-color-option);\n    visibility: collapse;\n    overflow-y: auto;\n    max-height: 250px;\n    color: var(--t-field-color-text);\n    box-shadow: 0px 2px 8px 0px ${unsafeCSS(Palette.SHADOW)};\n    z-index: 9999;\n  }\n  .t-options-container::-webkit-scrollbar {\n    width: 0.75rem;\n  }\n  .t-options-container::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n  .t-options-container::-webkit-scrollbar-thumb {\n    background-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    border-radius: 0.25rem;\n    border: 0.188rem solid transparent;\n    background-clip: content-box;\n  }\n  .t-options-container.show {\n    visibility: visible;\n  }\n  .t-options-container.show.t-with-description {\n    top: calc(100% + 2px - 1.5rem);\n  }\n  @media only screen and (max-height: 500px) {\n    .t-options-container {\n      max-height: 50vh;\n    }\n  }\n  .t-dropdown-option {\n    padding: 0.75rem 1rem;\n    cursor: pointer;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .t-dropdown-option.t-option-hover {\n    background-color: var(--t-field-color-form);\n  }\n  .t-dropdown-option.t-option-selected {\n    color: var(--t-field-color-main);\n  }\n  .t-dropdown-option:focus {\n    outline: none;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-dropdown-option {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-dropdown-option {\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"TuixDropdown.styles.js","sourceRoot":"","sources":["../../../src/tuix-dropdown/TuixDropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;IACjC,UAAU;;8BAEgB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;4BAC1B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;8BAIrB,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;;CAE/D,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;CAQ7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;kCAaL,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;wBAUnC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAoCf,WAAW,CAAC,MAAM;;;;;;CAMxD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-input/TuixInput.styles';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { DarkPalette } from '../utils/darkColors';\n\nexport const dropdownHostStyles = css`\n  ${hostStyles}\n  :host {\n    --t-field-color-option: ${unsafeCSS(Palette.WHITE)};\n    --t-field-color-main: ${unsafeCSS(Palette.MAIN)};\n  }\n\n  :host([dark]) {\n    --t-field-color-option: ${unsafeCSS(DarkPalette.ELEVATION_2)};\n  }\n`;\n\nexport const dropdownMainContainerStyles = css`\n  .t-dropdown-full-container {\n    position: relative;\n    font-family: 'Rubik', sans-serif;\n  }\n  .t-dropdown-container .t-input-dropdown {\n    --t-field-input-cursor: pointer;\n  }\n`;\n\nexport const dropdownOptionStyles = css`\n  .t-options-container {\n    width: 100%;\n    position: absolute;\n    top: calc(100% + 2px);\n    left: 0;\n    border: none;\n    border-radius: 0 0 5px 5px;\n    background-color: var(--t-field-color-option);\n    visibility: collapse;\n    overflow-y: auto;\n    max-height: 250px;\n    color: var(--t-field-color-text);\n    box-shadow: 0px 2px 8px 0px ${unsafeCSS(Palette.SHADOW)};\n    z-index: 9999;\n  }\n  .t-options-container::-webkit-scrollbar {\n    width: 0.75rem;\n  }\n  .t-options-container::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n  .t-options-container::-webkit-scrollbar-thumb {\n    background-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    border-radius: 0.25rem;\n    border: 0.188rem solid transparent;\n    background-clip: content-box;\n  }\n  .t-options-container.show {\n    visibility: visible;\n  }\n  .t-options-container.show.t-with-description {\n    top: calc(100% + 2px - 1.5rem);\n  }\n  @media only screen and (max-height: 500px) {\n    .t-options-container {\n      max-height: 50vh;\n    }\n  }\n  .t-dropdown-option {\n    padding: 0.75rem 1rem;\n    cursor: pointer;\n    font-size: 1rem;\n    font-weight: 300;\n    line-height: 1.5rem;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .t-dropdown-option.t-option-hover {\n    background-color: var(--t-field-color-form);\n  }\n  .t-dropdown-option.t-option-selected {\n    color: var(--t-field-color-main);\n  }\n  .t-dropdown-option:focus {\n    outline: none;\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-dropdown-option {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n  }\n`;\n"]}

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

@@ -130,6 +130,12 @@ export const iconContentMap = {
   </svg>`,
     [IconName.MOON]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
   <path d="M20.9999 12.79C20.8426 14.4922 20.2038 16.1144 19.1581 17.4668C18.1125 18.8192 16.7034 19.8458 15.0956 20.4265C13.4878 21.0073 11.7479 21.1181 10.0794 20.7461C8.41092 20.3741 6.8829 19.5345 5.67413 18.3258C4.46536 17.117 3.62584 15.589 3.25381 13.9205C2.88178 12.252 2.99262 10.5121 3.57336 8.9043C4.15411 7.29651 5.18073 5.88737 6.53311 4.84175C7.8855 3.79614 9.5077 3.15731 11.2099 3C10.2133 4.34827 9.73375 6.00945 9.85843 7.68141C9.98312 9.35338 10.7038 10.9251 11.8893 12.1106C13.0748 13.2961 14.6465 14.0168 16.3185 14.1415C17.9905 14.2662 19.6516 13.7866 20.9999 12.79Z" stroke="#25282B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+    [IconName.CHEVRON_LEFT]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M15 18L9 12L15 6" stroke="#25282B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+    [IconName.CHEVRON_RIGHT]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M9 18L15 12L9 6" stroke="#25282B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>`,
 };
 //# sourceMappingURL=TuixIcon.icons.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TuixIcon.icons.js","sourceRoot":"","sources":["../../../src/tuix-icon/TuixIcon.icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,IAAe,EACf,QAAgB,OAAO,CAAC,KAAK,EACb,EAAE;IAClB,MAAM,QAAQ,GAAG,IAAI,IAAI,QAAQ,CAAC,UAAU,CAAC;IAC7C,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE7C,IAAI,WAAW,EAAE;QACf,MAAM,cAAc,GAAG,IAAI,CAAA;QACvB,UAAU,CACV,WAAW;aACR,OAAO,CAAC,wBAAwB,EAAE,SAAS,KAAK,GAAG,CAAC;aACpD,OAAO,CAAC,iBAAiB,EAAE,WAAW,KAAK,GAAG,CAAC,CACnD;KACF,CAAC;QACF,OAAO,cAAc,CAAC;KACvB;IAED,OAAO,IAAI,CAAA,EAAE,CAAC;AAChB,CAAC,CAAC;AAIF,gEAAgE;AAChE,MAAM,CAAC,MAAM,cAAc,GAAuB;IAChD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;;;;GAItB;IACD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;;;;GAItB;IACD,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;;;;GAIpB;IACD,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;;;;GAIvB;IACD,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;;;;GAIlB;IACD,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;;;;GAIlB;IACD,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;;;;;;;;;;;GAWnB;IACD,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;;;GAG1B;IACD,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE;;;;;GAKhC;IACD,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;;;;;GAKpB;IACD,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;;;;;;;;;;GAUlB;IACD,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;;;;GAIxB;IACD,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;;;GAGxB;IACD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;;;GAGtB;IACD,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;;;GAGjB;IACD,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;;;;;;SAMpB;IACP,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;;;;;;;;;;;;;;;;;SAiBT;IACP,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;SAEV;CACR,CAAC","sourcesContent":["import { TemplateResult, html } from 'lit';\nimport { Palette } from '../utils/colors';\nimport { IconName } from './enums/tuix-icon.enums';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const iconTemplate = (\n  name?: IconName,\n  color: string = Palette.BLACK\n): TemplateResult => {\n  const iconName = name || IconName.ARROW_DOWN;\n  const iconContent = iconContentMap[iconName];\n\n  if (iconContent) {\n    const templateResult = html`\n      ${unsafeHTML(\n        iconContent\n          .replace(/fill=\"(?!none\")[^\"]+\"/g, `fill=\"${color}\"`)\n          .replace(/stroke=\"[^\"]+\"/g, `stroke=\"${color}\"`)\n      )}\n    `;\n    return templateResult;\n  }\n\n  return html``;\n};\n\ntype IconContentMapType = Record<IconName, string>;\n\n// Add new icons simply copy and paste the svg file content here\nexport const iconContentMap: IconContentMapType = {\n  [IconName.ARROW_DOWN]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 5V19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M19 12L12 19L5 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_LEFT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M19 12H5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 19L5 12L12 5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_UP]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 19V5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M5 12L12 5L19 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_RIGHT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M5 12H19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 5L19 12L12 19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.SEARCH]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M20.9999 20.9999L16.6499 16.6499\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.EYE_ON]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.EYE_OFF]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <g clip-path=\"url(#clip0_2207_3897)\">\n  <path d=\"M9.9 4.24002C10.5883 4.0789 11.2931 3.99836 12 4.00003C19 4.00003 23 12 23 12C22.393 13.1356 21.6691 14.2048 20.84 15.19M14.12 14.12C13.8454 14.4148 13.5141 14.6512 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1752 15.0074 10.8016 14.8565C10.4281 14.7056 10.0887 14.4811 9.80385 14.1962C9.51897 13.9113 9.29439 13.572 9.14351 13.1984C8.99262 12.8249 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2219 9.18488 10.8539C9.34884 10.4859 9.58525 10.1547 9.88 9.88003M17.94 17.94C16.2306 19.243 14.1491 19.9649 12 20C5 20 1 12 1 12C2.24389 9.68192 3.96914 7.65663 6.06 6.06003L17.94 17.94Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M1 1L23 23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  <defs>\n  <clipPath id=\"clip0_2207_3897\">\n  <rect width=\"24\" height=\"24\" fill=\"white\"/>\n  </clipPath>\n  </defs>\n  </svg>\n  `,\n  [IconName.EYE_CLOSE_LINE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M9.34178 18.7821L7.41078 18.2641L8.19778 15.3251C7.01975 14.8906 5.9249 14.2575 4.96078 13.4531L2.80778 15.6071L1.39278 14.1921L3.54678 12.0391C2.33086 10.5829 1.51387 8.83587 1.17578 6.96911L3.14378 6.61011C3.90278 10.8121 7.57878 14.0001 11.9998 14.0001C16.4198 14.0001 20.0968 10.8121 20.8558 6.61011L22.8238 6.96811C22.4861 8.83512 21.6695 10.5825 20.4538 12.0391L22.6068 14.1921L21.1918 15.6071L19.0388 13.4531C18.0747 14.2575 16.9798 14.8906 15.8018 15.3251L16.5888 18.2651L14.6578 18.7821L13.8698 15.8421C12.6321 16.0542 11.3674 16.0542 10.1298 15.8421L9.34178 18.7821Z\" fill=\"black\"/>\n  </svg>\n  `,\n  [IconName.TRIANGLE_EXCLAMATION]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M10.2898 3.85996L1.81978 18C1.64514 18.3024 1.55274 18.6453 1.55177 18.9945C1.55079 19.3437 1.64127 19.6871 1.8142 19.9905C1.98714 20.2939 2.2365 20.5467 2.53748 20.7238C2.83847 20.9009 3.18058 20.9961 3.52978 21H20.4698C20.819 20.9961 21.1611 20.9009 21.4621 20.7238C21.7631 20.5467 22.0124 20.2939 22.1854 19.9905C22.3583 19.6871 22.4488 19.3437 22.4478 18.9945C22.4468 18.6453 22.3544 18.3024 22.1798 18L13.7098 3.85996C13.5315 3.56607 13.2805 3.32308 12.981 3.15444C12.6814 2.98581 12.3435 2.89722 11.9998 2.89722C11.656 2.89722 11.3181 2.98581 11.0186 3.15444C10.7191 3.32308 10.468 3.56607 10.2898 3.85996V3.85996Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 9V13\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 17H12.01\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CIRCLE_X]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M15 9L9 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M9 9L15 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.LOADER]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 2V6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 18V22\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M4.93018 4.92993L7.76018 7.75993\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.2402 16.24L19.0702 19.07\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M2 12H6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 12H22\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M4.93018 19.07L7.76018 16.24\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.2402 7.75993L19.0702 4.92993\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CIRCLE_CHECK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M22 11.0801V12.0001C21.9988 14.1565 21.3005 16.2548 20.0093 17.9819C18.7182 19.7091 16.9033 20.9726 14.8354 21.584C12.7674 22.1954 10.5573 22.122 8.53447 21.3747C6.51168 20.6274 4.78465 19.2462 3.61096 17.4372C2.43727 15.6281 1.87979 13.4882 2.02168 11.3364C2.16356 9.18467 2.99721 7.13643 4.39828 5.49718C5.79935 3.85793 7.69279 2.71549 9.79619 2.24025C11.8996 1.76502 14.1003 1.98245 16.07 2.86011\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M22 4L12 14.01L9 11.01\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHEVRON_DOWN]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M6 9L12 15L18 9\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHEVRON_UP]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M18 15L12 9L6 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHECK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M20 6L9 17L4 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.NAV_HAMBURGUER]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"24/ outlined / action / main / menu\">\n  <path id=\"Vector\" d=\"M3 12H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path id=\"Vector_2\" d=\"M3 6H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path id=\"Vector_3\" d=\"M3 18H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  </svg>`,\n  [IconName.SUN]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <g clip-path=\"url(#clip0_2207_4056)\">\n    <path d=\"M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M12 1V3\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M12 21V23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M4.22021 4.21997L5.64021 5.63997\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M18.3599 18.3601L19.7799 19.7801\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M1 12H3\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M21 12H23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M4.22021 19.7801L5.64021 18.3601\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M18.3599 5.63997L19.7799 4.21997\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_2207_4056\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n  </svg>`,\n  [IconName.MOON]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M20.9999 12.79C20.8426 14.4922 20.2038 16.1144 19.1581 17.4668C18.1125 18.8192 16.7034 19.8458 15.0956 20.4265C13.4878 21.0073 11.7479 21.1181 10.0794 20.7461C8.41092 20.3741 6.8829 19.5345 5.67413 18.3258C4.46536 17.117 3.62584 15.589 3.25381 13.9205C2.88178 12.252 2.99262 10.5121 3.57336 8.9043C4.15411 7.29651 5.18073 5.88737 6.53311 4.84175C7.8855 3.79614 9.5077 3.15731 11.2099 3C10.2133 4.34827 9.73375 6.00945 9.85843 7.68141C9.98312 9.35338 10.7038 10.9251 11.8893 12.1106C13.0748 13.2961 14.6465 14.0168 16.3185 14.1415C17.9905 14.2662 19.6516 13.7866 20.9999 12.79Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n};\n"]}
+{"version":3,"file":"TuixIcon.icons.js","sourceRoot":"","sources":["../../../src/tuix-icon/TuixIcon.icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,IAAe,EACf,QAAgB,OAAO,CAAC,KAAK,EACb,EAAE;IAClB,MAAM,QAAQ,GAAG,IAAI,IAAI,QAAQ,CAAC,UAAU,CAAC;IAC7C,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE7C,IAAI,WAAW,EAAE;QACf,MAAM,cAAc,GAAG,IAAI,CAAA;QACvB,UAAU,CACV,WAAW;aACR,OAAO,CAAC,wBAAwB,EAAE,SAAS,KAAK,GAAG,CAAC;aACpD,OAAO,CAAC,iBAAiB,EAAE,WAAW,KAAK,GAAG,CAAC,CACnD;KACF,CAAC;QACF,OAAO,cAAc,CAAC;KACvB;IAED,OAAO,IAAI,CAAA,EAAE,CAAC;AAChB,CAAC,CAAC;AAIF,gEAAgE;AAChE,MAAM,CAAC,MAAM,cAAc,GAAuB;IAChD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;;;;GAItB;IACD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;;;;GAItB;IACD,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;;;;GAIpB;IACD,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;;;;GAIvB;IACD,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;;;;GAIlB;IACD,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;;;;GAIlB;IACD,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;;;;;;;;;;;GAWnB;IACD,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;;;GAG1B;IACD,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE;;;;;GAKhC;IACD,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;;;;;GAKpB;IACD,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;;;;;;;;;;GAUlB;IACD,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;;;;GAIxB;IACD,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;;;GAGxB;IACD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;;;GAGtB;IACD,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;;;GAGjB;IACD,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;;;;;;SAMpB;IACP,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;;;;;;;;;;;;;;;;;SAiBT;IACP,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;SAEV;IACP,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;;SAElB;IACP,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;;SAEnB;CACR,CAAC","sourcesContent":["import { TemplateResult, html } from 'lit';\nimport { Palette } from '../utils/colors';\nimport { IconName } from './enums/tuix-icon.enums';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const iconTemplate = (\n  name?: IconName,\n  color: string = Palette.BLACK\n): TemplateResult => {\n  const iconName = name || IconName.ARROW_DOWN;\n  const iconContent = iconContentMap[iconName];\n\n  if (iconContent) {\n    const templateResult = html`\n      ${unsafeHTML(\n        iconContent\n          .replace(/fill=\"(?!none\")[^\"]+\"/g, `fill=\"${color}\"`)\n          .replace(/stroke=\"[^\"]+\"/g, `stroke=\"${color}\"`)\n      )}\n    `;\n    return templateResult;\n  }\n\n  return html``;\n};\n\ntype IconContentMapType = Record<IconName, string>;\n\n// Add new icons simply copy and paste the svg file content here\nexport const iconContentMap: IconContentMapType = {\n  [IconName.ARROW_DOWN]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 5V19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M19 12L12 19L5 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_LEFT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M19 12H5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 19L5 12L12 5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_UP]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 19V5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M5 12L12 5L19 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_RIGHT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M5 12H19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 5L19 12L12 19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.SEARCH]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M20.9999 20.9999L16.6499 16.6499\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.EYE_ON]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.EYE_OFF]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <g clip-path=\"url(#clip0_2207_3897)\">\n  <path d=\"M9.9 4.24002C10.5883 4.0789 11.2931 3.99836 12 4.00003C19 4.00003 23 12 23 12C22.393 13.1356 21.6691 14.2048 20.84 15.19M14.12 14.12C13.8454 14.4148 13.5141 14.6512 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1752 15.0074 10.8016 14.8565C10.4281 14.7056 10.0887 14.4811 9.80385 14.1962C9.51897 13.9113 9.29439 13.572 9.14351 13.1984C8.99262 12.8249 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2219 9.18488 10.8539C9.34884 10.4859 9.58525 10.1547 9.88 9.88003M17.94 17.94C16.2306 19.243 14.1491 19.9649 12 20C5 20 1 12 1 12C2.24389 9.68192 3.96914 7.65663 6.06 6.06003L17.94 17.94Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M1 1L23 23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  <defs>\n  <clipPath id=\"clip0_2207_3897\">\n  <rect width=\"24\" height=\"24\" fill=\"white\"/>\n  </clipPath>\n  </defs>\n  </svg>\n  `,\n  [IconName.EYE_CLOSE_LINE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M9.34178 18.7821L7.41078 18.2641L8.19778 15.3251C7.01975 14.8906 5.9249 14.2575 4.96078 13.4531L2.80778 15.6071L1.39278 14.1921L3.54678 12.0391C2.33086 10.5829 1.51387 8.83587 1.17578 6.96911L3.14378 6.61011C3.90278 10.8121 7.57878 14.0001 11.9998 14.0001C16.4198 14.0001 20.0968 10.8121 20.8558 6.61011L22.8238 6.96811C22.4861 8.83512 21.6695 10.5825 20.4538 12.0391L22.6068 14.1921L21.1918 15.6071L19.0388 13.4531C18.0747 14.2575 16.9798 14.8906 15.8018 15.3251L16.5888 18.2651L14.6578 18.7821L13.8698 15.8421C12.6321 16.0542 11.3674 16.0542 10.1298 15.8421L9.34178 18.7821Z\" fill=\"black\"/>\n  </svg>\n  `,\n  [IconName.TRIANGLE_EXCLAMATION]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M10.2898 3.85996L1.81978 18C1.64514 18.3024 1.55274 18.6453 1.55177 18.9945C1.55079 19.3437 1.64127 19.6871 1.8142 19.9905C1.98714 20.2939 2.2365 20.5467 2.53748 20.7238C2.83847 20.9009 3.18058 20.9961 3.52978 21H20.4698C20.819 20.9961 21.1611 20.9009 21.4621 20.7238C21.7631 20.5467 22.0124 20.2939 22.1854 19.9905C22.3583 19.6871 22.4488 19.3437 22.4478 18.9945C22.4468 18.6453 22.3544 18.3024 22.1798 18L13.7098 3.85996C13.5315 3.56607 13.2805 3.32308 12.981 3.15444C12.6814 2.98581 12.3435 2.89722 11.9998 2.89722C11.656 2.89722 11.3181 2.98581 11.0186 3.15444C10.7191 3.32308 10.468 3.56607 10.2898 3.85996V3.85996Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 9V13\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 17H12.01\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CIRCLE_X]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M15 9L9 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M9 9L15 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.LOADER]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 2V6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 18V22\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M4.93018 4.92993L7.76018 7.75993\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.2402 16.24L19.0702 19.07\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M2 12H6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 12H22\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M4.93018 19.07L7.76018 16.24\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.2402 7.75993L19.0702 4.92993\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CIRCLE_CHECK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M22 11.0801V12.0001C21.9988 14.1565 21.3005 16.2548 20.0093 17.9819C18.7182 19.7091 16.9033 20.9726 14.8354 21.584C12.7674 22.1954 10.5573 22.122 8.53447 21.3747C6.51168 20.6274 4.78465 19.2462 3.61096 17.4372C2.43727 15.6281 1.87979 13.4882 2.02168 11.3364C2.16356 9.18467 2.99721 7.13643 4.39828 5.49718C5.79935 3.85793 7.69279 2.71549 9.79619 2.24025C11.8996 1.76502 14.1003 1.98245 16.07 2.86011\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M22 4L12 14.01L9 11.01\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHEVRON_DOWN]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M6 9L12 15L18 9\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHEVRON_UP]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M18 15L12 9L6 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHECK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M20 6L9 17L4 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.NAV_HAMBURGUER]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"24/ outlined / action / main / menu\">\n  <path id=\"Vector\" d=\"M3 12H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path id=\"Vector_2\" d=\"M3 6H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path id=\"Vector_3\" d=\"M3 18H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  </svg>`,\n  [IconName.SUN]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <g clip-path=\"url(#clip0_2207_4056)\">\n    <path d=\"M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M12 1V3\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M12 21V23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M4.22021 4.21997L5.64021 5.63997\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M18.3599 18.3601L19.7799 19.7801\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M1 12H3\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M21 12H23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M4.22021 19.7801L5.64021 18.3601\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M18.3599 5.63997L19.7799 4.21997\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_2207_4056\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n  </svg>`,\n  [IconName.MOON]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M20.9999 12.79C20.8426 14.4922 20.2038 16.1144 19.1581 17.4668C18.1125 18.8192 16.7034 19.8458 15.0956 20.4265C13.4878 21.0073 11.7479 21.1181 10.0794 20.7461C8.41092 20.3741 6.8829 19.5345 5.67413 18.3258C4.46536 17.117 3.62584 15.589 3.25381 13.9205C2.88178 12.252 2.99262 10.5121 3.57336 8.9043C4.15411 7.29651 5.18073 5.88737 6.53311 4.84175C7.8855 3.79614 9.5077 3.15731 11.2099 3C10.2133 4.34827 9.73375 6.00945 9.85843 7.68141C9.98312 9.35338 10.7038 10.9251 11.8893 12.1106C13.0748 13.2961 14.6465 14.0168 16.3185 14.1415C17.9905 14.2662 19.6516 13.7866 20.9999 12.79Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CHEVRON_LEFT]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M15 18L9 12L15 6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n  [IconName.CHEVRON_RIGHT]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M9 18L15 12L9 6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>`,\n};\n"]}

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

@@ -20,6 +20,8 @@ export declare enum IconName {
     CIRCLE_CHECK = "circle-check",
     CHEVRON_DOWN = "chevron-down",
     CHEVRON_UP = "chevron-up",
+    CHEVRON_LEFT = "chevron-left",
+    CHEVRON_RIGHT = "chevron-right",
     CHECK = "check",
     NAV_HAMBURGUER = "nav-hamburguer",
     SUN = "sun",

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

@@ -27,6 +27,8 @@ export var IconName;
     IconName["CIRCLE_CHECK"] = "circle-check";
     IconName["CHEVRON_DOWN"] = "chevron-down";
     IconName["CHEVRON_UP"] = "chevron-up";
+    IconName["CHEVRON_LEFT"] = "chevron-left";
+    IconName["CHEVRON_RIGHT"] = "chevron-right";
     IconName["CHECK"] = "check";
     IconName["NAV_HAMBURGUER"] = "nav-hamburguer";
     IconName["SUN"] = "sun";

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,QAmBX;AAnBD,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;IACf,6CAAiC,CAAA;IACjC,uBAAW,CAAA;IACX,yBAAa,CAAA;AACf,CAAC,EAnBW,QAAQ,KAAR,QAAQ,QAmBnB","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  NAV_HAMBURGUER = 'nav-hamburguer',\n  SUN = 'sun',\n  MOON = 'moon',\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,QAqBX;AArBD,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,yCAA6B,CAAA;IAC7B,2CAA+B,CAAA;IAC/B,2BAAe,CAAA;IACf,6CAAiC,CAAA;IACjC,uBAAW,CAAA;IACX,yBAAa,CAAA;AACf,CAAC,EArBW,QAAQ,KAAR,QAAQ,QAqBnB","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  CHEVRON_LEFT = 'chevron-left',\n  CHEVRON_RIGHT = 'chevron-right',\n  CHECK = 'check',\n  NAV_HAMBURGUER = 'nav-hamburguer',\n  SUN = 'sun',\n  MOON = 'moon',\n}\n"]}

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

@@ -35,6 +35,7 @@ export declare class TuixInput extends LitElement {
     private _getFeatureTemplateByInputType;
     private _getInputElementClasses;
     private _getInputContainerClasses;
+    private _getMainContainerClasses;
     private _getInputTemplate;
     private _getLetterCounterTemplate;
     private _hasLetterCounter;

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

@@ -147,6 +147,7 @@ let TuixInput = class TuixInput extends LitElement {
             : false;
         return {
             't-input': true,
+            't-textarea': this.type === InputType.TEXT_AREA,
             'with-title': !!this.title,
             'with-icon-right': hasIconRight,
             [`with-${this.descriptionType}`]: this.descriptionType !== DescriptionType.TEXT,
@@ -158,6 +159,11 @@ let TuixInput = class TuixInput extends LitElement {
             't-textarea-container': this.type === InputType.TEXT_AREA,
         };
     }
+    _getMainContainerClasses() {
+        return {
+            't-textarea-main-container': this.type === InputType.TEXT_AREA,
+        };
+    }
     _getInputTemplate() {
         return html `<input
       type="text"
@@ -265,7 +271,8 @@ let TuixInput = class TuixInput extends LitElement {
             this._preivousValue = this.value;
             this._letterCounter = this.value.length;
         }
-        return html `<div
+        return html `<div class="${classMap(this._getMainContainerClasses())}">
+      <div
         class="${classMap(this._getInputContainerClasses())}"
         @click="${this._handleClickOnInput}"
       >
@@ -273,7 +280,8 @@ let TuixInput = class TuixInput extends LitElement {
             ? this._getTextAreaTemplate()
             : this._getInputTemplate()}
       </div>
-      ${this._getDescriptionContainerTemplate()} `;
+      ${this._getDescriptionContainerTemplate()}
+    </div>`;
     }
 };
 TuixInput.styles = [

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, 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"]}
+{"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      't-textarea': this.type === InputType.TEXT_AREA,\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 _getMainContainerClasses() {\n    return {\n      't-textarea-main-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._getMainContainerClasses())}\">\n      <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    </div>`;\n  }\n}\n"]}