tuix-webcomponents 0.1.0 → 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-checkbox.enums.js","sourceRoot":"","sources":["../../../../src/tuix-checkbox/enums/tuix-checkbox.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,uCAAmB,CAAA;IACnB,yCAAqB,CAAA;IACrB,mCAAe,CAAA;AACjB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B;AAED,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,kCAAa,CAAA;IACb,oCAAe,CAAA;AACjB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK;IACzC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW;IAChD,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,KAAK;IAC7C,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,WAAW,CAAC,WAAW;IACpD,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK;CAC5C,CAAC","sourcesContent":["import { palette } from '../../utils/colors';\nimport { darkPalette } from '../../utils/darkColors';\n\nexport enum CheckboxIconMode {\n  DEFAULT = 'default',\n  DISABLED = 'disabled',\n  ERROR = 'error',\n}\n\nexport enum CheckboxLabelSide {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nexport const CheckboxIconColorLight = {\n  [CheckboxIconMode.DEFAULT]: palette.white,\n  [CheckboxIconMode.DISABLED]: palette.primary_300,\n  [CheckboxIconMode.ERROR]: palette.white,\n};\n\nexport const CheckboxIconColorDark = {\n  [CheckboxIconMode.DEFAULT]: darkPalette.white,\n  [CheckboxIconMode.DISABLED]: darkPalette.primary_100,\n  [CheckboxIconMode.ERROR]: darkPalette.white,\n};\n"]}

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

@@ -2,12 +2,17 @@ import { css, unsafeCSS } from 'lit';
 import { hostStyles } from '../tuix-input/TuixInput.styles';
 import { palette } from '../utils/colors';
 import { ScreenSizes } from '../utils/screenSizes.enum';
+import { darkPalette } from '../utils/darkColors';
 export const dropdownHostStyles = css `
   ${hostStyles}
   :host {
     --t-field-color-option: ${unsafeCSS(palette.white)};
     --t-field-color-main: ${unsafeCSS(palette.main)};
   }
+
+  :host([dark]) {
+    --t-field-color-option: ${unsafeCSS(darkPalette.black)};
+  }
 `;
 export const dropdownMainContainerStyles = css `
   .t-dropdown-full-container {
@@ -25,8 +30,7 @@ export const dropdownOptionStyles = css `
     position: absolute;
     top: calc(100% + 2px);
     left: 0;
-    border: 1px solid #ccc;
-    border-top: none;
+    border: none;
     border-radius: 0 0 5px 5px;
     background-color: var(--t-field-color-option);
     display: none;

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;AAExD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;IACjC,UAAU;;8BAEgB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;4BAC1B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;CAElD,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;CAS7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;wBAuBf,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;uCA2Bf,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';\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\nexport const dropdownMainContainerStyles = css`\n  .t-dropdown-full-container {\n    position: relative;\n    font-family: 'rubik', sans-serif;\n    cursor: pointer;\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: 1px solid #ccc;\n    border-top: none;\n    border-radius: 0 0 5px 5px;\n    background-color: var(--t-field-color-option);\n    display: none;\n    overflow-y: auto;\n    max-height: 200px;\n    color: var(--t-field-color-text);\n    box-shadow: 0px 2px 8px 0px rgba(66, 79, 101, 0.16);\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    display: block;\n  }\n  .t-options-container.show.t-with-description {\n    top: calc(100% + 2px - 1.5rem);\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  }\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,KAAK,CAAC;;CAEzD,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;CAS7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;wBAsBf,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;uCA2Bf,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.black)};\n  }\n`;\n\nexport const dropdownMainContainerStyles = css`\n  .t-dropdown-full-container {\n    position: relative;\n    font-family: 'rubik', sans-serif;\n    cursor: pointer;\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    display: none;\n    overflow-y: auto;\n    max-height: 200px;\n    color: var(--t-field-color-text);\n    box-shadow: 0px 2px 8px 0px rgba(66, 79, 101, 0.16);\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    display: block;\n  }\n  .t-options-container.show.t-with-description {\n    top: calc(100% + 2px - 1.5rem);\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  }\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"]}

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

@@ -3,8 +3,9 @@ import { IconName, IconSizeVariant } from './enums/tuix-icon.enums';
 export declare class TuixIcon extends LitElement {
     static styles: import("lit").CSSResult;
     name: IconName;
-    color: string;
+    color?: string;
     size: IconSizeVariant;
+    dark: boolean;
     private _getSelectedColor;
     private _getIconTemplate;
     render(): TemplateResult<1>;

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

@@ -98,6 +98,10 @@ export const iconContentMap = {
     [IconName.CHEVRON_UP]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
   <path d="M18 15L12 9L6 15" stroke="#25282B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
+  `,
+    [IconName.CHECK]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M20 6L9 17L4 12" 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;CACF,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};\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;CACF,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};\n"]}

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

@@ -9,13 +9,14 @@ 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)) {
+            selectedColor = palette[selectedColor];
         }
         return selectedColor;
     }
@@ -58,6 +59,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;IA8Bf,CAAC;IA5BS,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,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;SACxC;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;;AArDM,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,CAuDpB;SAvDY,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      selectedColor = palette[selectedColor];\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,7 +19,8 @@ export declare enum IconName {
     LOADER = "loader",
     CIRCLE_CHECK = "circle-check",
     CHEVRON_DOWN = "chevron-down",
-    CHEVRON_UP = "chevron-up"
+    CHEVRON_UP = "chevron-up",
+    CHECK = "check"
 }
 export declare enum IconColor {
     primary_50 = "#F2F2F8",

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

@@ -27,6 +27,7 @@ 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) {

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;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  CHECK = 'check',\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"]}

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

@@ -7,7 +7,10 @@ export declare class TuixIconButton extends LitElement {
     variant: MainVariant;
     disabled: boolean;
     icon?: IconName;
-    private _getIconColor;
+    dark: boolean;
+    iconColor: string;
+    private _getTextColor;
+    private _updateIconColor;
     private _handleClick;
     private _iconTemplate;
     protected render(): TemplateResult;

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

@@ -1,11 +1,10 @@
 import { __decorate } from "tslib";
 import { LitElement, css, html, nothing } from 'lit';
 import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } 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 { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles';
 import { buttonTextColor } from '../tuix-button/enums/tuix-button.enums';
 import { MainVariant } from '../utils/mainVariant.enum';
 let TuixIconButton = class TuixIconButton extends LitElement {
@@ -13,30 +12,42 @@ let TuixIconButton = class TuixIconButton extends LitElement {
         super(...arguments);
         this.variant = MainVariant.PRIMARY;
         this.disabled = false;
+        this.dark = false;
+        this.iconColor = '';
     }
-    _getIconColor() {
-        let iconColor = '';
-        iconColor = buttonTextColor[this.variant];
-        if (this.disabled)
-            iconColor = palette.primary_200;
-        return iconColor;
+    _getTextColor() {
+        var _a;
+        const element = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.button');
+        if (!element)
+            return buttonTextColor[this.variant];
+        const computedStyle = getComputedStyle(element);
+        return computedStyle.color;
+    }
+    _updateIconColor() {
+        if (!this.icon)
+            return;
+        this.iconColor = this._getTextColor();
     }
     _handleClick() {
         this.dispatchEvent(new CustomEvent('click', { bubbles: true }));
     }
     _iconTemplate(iconName) {
+        this._updateIconColor();
         return html `<tuix-icon
       size="${IconSizeVariant.MEDIUM}"
       name="${iconName}"
-      color="${this._getIconColor()}"
+      color="${this.iconColor}"
     ></tuix-icon>`;
     }
     render() {
         return html `
       <button
         @click=${this._handleClick}
-        class="button ${this.variant}"
+        @mouseenter=${this._updateIconColor}
+        @mouseleave=${this._updateIconColor}
+        @blur=${this._updateIconColor}
         ?disabled="${this.disabled}"
+        class="button"
       >
         ${this.icon ? this._iconTemplate(this.icon) : nothing}
       </button>
@@ -62,6 +73,7 @@ TuixIconButton.styles = [
         }
       }
     `,
+    hostButtonStyles,
     buttonColorStyles,
 ];
 __decorate([
@@ -73,6 +85,12 @@ __decorate([
 __decorate([
     property({ type: IconName })
 ], TuixIconButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixIconButton.prototype, "dark", void 0);
+__decorate([
+    state()
+], TuixIconButton.prototype, "iconColor", void 0);
 TuixIconButton = __decorate([
     customElement('tuix-icon-button')
 ], TuixIconButton);

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

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

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

@@ -143,8 +143,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 {
@@ -251,11 +252,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 {

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

@@ -1 +1 @@
-{"version":3,"file":"TuixInput.styles.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { palette } from '../utils/colors';\nimport { darkPalette } from '../utils/darkColors';\nimport { hexToRgb } from '../utils/hex-rgb';\n\nconst inputVars = {\n  gapX: '10px',\n  iconDesktopSize: '1.5rem',\n  iconTabletSize: '1rem',\n  paddingX: '1.25rem',\n};\n\nconst rgbDarkValidation = hexToRgb(darkPalette.validation);\nconst rgbDarkError = hexToRgb(darkPalette.error);\n\nexport const hostStyles = css`\n  :host {\n    --t-field-color-form: ${unsafeCSS(palette.primary_50)};\n    --t-field-color-title: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-text: ${unsafeCSS(palette.dark)};\n    --t-field-color-description: ${unsafeCSS(palette.neutral_600)};\n    --t-field-color-stroke-hover: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-stroke-focus: ${unsafeCSS(palette.main)};\n    --t-field-color-text-disabled: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-stroke-validation: ${unsafeCSS(palette.validation_200)};\n    --t-field-color-bg-validation: ${unsafeCSS(palette.validation_50)};\n    --t-field-color-stroke-loading: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-bg-error: ${unsafeCSS(palette.error_50)};\n    --t-field-color-stroke-error: ${unsafeCSS(palette.error_200)};\n    --t-field-input-cursor: auto;\n  }\n  :host([dark]) {\n    --t-field-color-form: ${unsafeCSS(darkPalette.primary_950)};\n    --t-field-color-text: ${unsafeCSS(darkPalette.primary_100)};\n    --t-field-color-description: ${unsafeCSS(darkPalette.neutral_200)};\n    --t-field-color-stroke-focus: ${unsafeCSS(darkPalette.secondary)};\n    --t-field-color-text-disabled: ${unsafeCSS(darkPalette.primary_800)};\n    --t-field-color-stroke-validation: ${unsafeCSS(darkPalette.validation_200)};\n    --t-field-color-bg-validation: rgba(\n      ${rgbDarkValidation.r},\n      ${rgbDarkValidation.g},\n      ${rgbDarkValidation.b},\n      0.2\n    );\n    --t-field-color-bg-error: rgba(\n      ${rgbDarkError.r},\n      ${rgbDarkError.g},\n      ${rgbDarkError.b},\n      0.2\n    );\n    --t-field-color-stroke-error: ${unsafeCSS(darkPalette.error_200)};\n  }\n`;\n\nexport const inputComponentStyles = css`\n  .t-input-container {\n    position: relative;\n    --t-padding-x-desktop-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconDesktopSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n    --t-padding-x-tablet-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconTabletSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n  }\n  .t-input {\n    padding: 1rem ${unsafeCSS(inputVars.paddingX)};\n    border-radius: 4px;\n    font-family: 'rubik', sans-serif;\n    cursor: var(--t-field-input-cursor);\n  }\n  .t-input.with-title {\n    padding-top: 1.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .t-input.with-icon-right {\n    padding-right: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input {\n      padding-top: 0.875rem;\n      padding-bottom: 0.875rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.375rem;\n      padding-bottom: 0.375rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      padding-top: 0.75rem;\n      padding-bottom: 0.75rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.25rem;\n      padding-bottom: 0.25rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n`;\n\nexport const inputFontStyles = css`\n  .t-input::placeholder,\n  .t-input,\n  .t-title {\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input::placeholder {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    .t-input::placeholder {\n      line-height: 1rem;\n    }\n  }\n`;\n\nexport const inputColorStyles = css`\n  .t-input {\n    background-color: var(--t-field-color-form);\n    border: 1px solid var(--t-field-color-form);\n    color: var(--t-field-color-text);\n  }\n  .t-input-container:hover .t-input,\n  .t-input:hover {\n    border: 1px solid var(--t-field-color-stroke-hover);\n  }\n  .t-input:focus {\n    border: 1px solid var(--t-field-color-stroke-focus);\n    outline: 1px solid var(--t-field-color-stroke-focus);\n  }\n  .t-input[disabled] {\n    pointer-events: none;\n    color: var(--t-field-color-text-disabled);\n  }\n  .t-input.with-title::placeholder {\n    color: transparent;\n  }\n  .t-input::placeholder,\n  .t-input.with-title:focus::placeholder {\n    color: var(--t-field-color-title);\n  }\n  .t-input.with-warning {\n    border: 1px solid var(--t-field-color-stroke-validation);\n    background-color: var(--t-field-color-bg-validation);\n  }\n  .t-input.with-error {\n    border: 1px solid var(--t-field-color-stroke-error);\n    background-color: var(--t-field-color-bg-error);\n  }\n  .t-input.with-loading {\n    border: 1px solid var(--t-field-color-stroke-loading);\n  }\n`;\n\nexport const inputTitleStyles = css`\n  .t-title {\n    position: absolute;\n    top: 50%;\n    left: 1.25rem;\n    font-family: 'rubik', sans-serif;\n    color: var(--t-field-color-title);\n    transform: translateY(-50%);\n    transition-duration: 0.3s;\n    pointer-events: none;\n  }\n  .t-textarea-container .t-title {\n    top: 1rem;\n    transform: none;\n  }\n  .t-input.with-title:focus + .t-title,\n  .t-input.with-title:not(:placeholder-shown) + .t-title {\n    font-size: 0.75rem;\n    font-weight: 400;\n    line-height: 1rem;\n    transform: translateY(0);\n    top: 0.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-title {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.375rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.875rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.25rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.75rem;\n    }\n  }\n`;\n\nexport const inputIconStyles = css`\n  .t-icon-set-container.t-icon-click {\n    cursor: pointer;\n  }\n  .t-input-container .t-icon-set-container {\n    height: ${unsafeCSS(inputVars.iconDesktopSize)};\n    width: ${unsafeCSS(inputVars.iconDesktopSize)};\n  }\n  .t-input-container .t-icon-set-container.t-icon-right {\n    position: absolute;\n    top: 50%;\n    right: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-input-container .t-icon-set-container.t-icon-left {\n    position: absolute;\n    top: 50%;\n    left: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-icon-inactive {\n    display: inline;\n  }\n  .t-icon-active {\n    display: none;\n  }\n  .t-icon-disabled {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-inactive,\n  .t-input:hover ~ .t-icon-set-container .t-icon-inactive,\n  .t-input:focus ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-active,\n  .t-input:hover ~ .t-icon-set-container .t-icon-active,\n  .t-input:focus ~ .t-icon-set-container .t-icon-active {\n    display: inline;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {\n    display: inline;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input-container .t-icon-set-container {\n      height: ${unsafeCSS(inputVars.iconTabletSize)};\n      width: ${unsafeCSS(inputVars.iconTabletSize)};\n    }\n  }\n`;\n\nexport const inputSearchStyles = css`\n  .t-input[type='search'] {\n    padding-left: var(--t-padding-x-desktop-with-icon);\n  }\n  .t-input[type='search'] + .t-title {\n    left: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input[type='search'] {\n      padding-left: var(--t-padding-x-tablet-with-icon);\n    }\n    .t-input[type='search'] + .t-title {\n      left: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n`;\n\nexport const inputDescriptionStyles = css`\n  .t-input-description-container {\n    margin-top: 0.5rem;\n    font-family: 'rubik', sans-serif;\n    font-size: 0.75rem;\n    line-height: 1rem;\n    color: var(--t-field-color-description);\n    display: flex;\n    justify-content: space-between;\n  }\n  .t-input-description-container .t-letter-counter {\n    align-self: flex-end;\n  }\n  .t-input-description-container .t-input-description {\n    display: flex;\n    gap: 0.5rem;\n  }\n`;\n"]}
+{"version":3,"file":"TuixInput.styles.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,MAAM;IACZ,eAAe,EAAE,QAAQ;IACzB,cAAc,EAAE,MAAM;IACtB,QAAQ,EAAE,SAAS;CACpB,CAAC;AAEF,MAAM,iBAAiB,GAAG,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAC3D,MAAM,YAAY,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAEjD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;4BAED,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC;6BAC5B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;4BAC/B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;mCAChB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC9B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;qCACtB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;yCAC1B,SAAS,CAAC,OAAO,CAAC,cAAc,CAAC;qCACrC,SAAS,CAAC,OAAO,CAAC,aAAa,CAAC;sCAC/B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;gCACpC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC;oCACvB,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;;;;4BAIpC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;4BAClC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;mCAC3B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;oCACjC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;qCAC/B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;yCAC9B,SAAS,CAAC,WAAW,CAAC,cAAc,CAAC;;QAEtE,iBAAiB,CAAC,CAAC;QACnB,iBAAiB,CAAC,CAAC;QACnB,iBAAiB,CAAC,CAAC;;;;QAInB,YAAY,CAAC,CAAC;QACd,YAAY,CAAC,CAAC;QACd,YAAY,CAAC,CAAC;;;oCAGc,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;CAEnE,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;QAI/B,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC;UACrE,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;;;QAG3B,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,SAAS,CAAC,SAAS,CAAC,cAAc,CAAC;UACpE,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;;;;oBAIf,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC;;;;;;;;;;;;uCAYV,WAAW,CAAC,MAAM;;;;;;;;;;;;;uCAalB,WAAW,CAAC,MAAM;;;;;;;;;;;;;CAaxD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;uCAQK,WAAW,CAAC,MAAM;;;;;;;;;;uCAUlB,WAAW,CAAC,MAAM;;;;;;;;;CASxD,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqClC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;uCAuBI,WAAW,CAAC,MAAM;;;;;;;;;;;;;uCAalB,WAAW,CAAC,MAAM;;;;;;;;;CASxD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;cAKpB,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC;aACrC,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC;;;;;aAKpC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC;;;;;;YAM9B,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAgCF,WAAW,CAAC,MAAM;;gBAEzC,SAAS,CAAC,SAAS,CAAC,cAAc,CAAC;eACpC,SAAS,CAAC,SAAS,CAAC,cAAc,CAAC;;;CAGjD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;uCAOG,WAAW,CAAC,MAAM;;;;;;;;;;;;;;CAcxD,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBxC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { palette } from '../utils/colors';\nimport { darkPalette } from '../utils/darkColors';\nimport { hexToRgb } from '../utils/hex-rgb';\n\nconst inputVars = {\n  gapX: '10px',\n  iconDesktopSize: '1.5rem',\n  iconTabletSize: '1rem',\n  paddingX: '1.25rem',\n};\n\nconst rgbDarkValidation = hexToRgb(darkPalette.validation);\nconst rgbDarkError = hexToRgb(darkPalette.error);\n\nexport const hostStyles = css`\n  :host {\n    --t-field-color-form: ${unsafeCSS(palette.primary_50)};\n    --t-field-color-title: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-text: ${unsafeCSS(palette.dark)};\n    --t-field-color-description: ${unsafeCSS(palette.neutral_600)};\n    --t-field-color-stroke-hover: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-stroke-focus: ${unsafeCSS(palette.main)};\n    --t-field-color-text-disabled: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-stroke-validation: ${unsafeCSS(palette.validation_200)};\n    --t-field-color-bg-validation: ${unsafeCSS(palette.validation_50)};\n    --t-field-color-stroke-loading: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-bg-error: ${unsafeCSS(palette.error_50)};\n    --t-field-color-stroke-error: ${unsafeCSS(palette.error_200)};\n    --t-field-input-cursor: auto;\n  }\n  :host([dark]) {\n    --t-field-color-form: ${unsafeCSS(darkPalette.primary_950)};\n    --t-field-color-text: ${unsafeCSS(darkPalette.primary_100)};\n    --t-field-color-description: ${unsafeCSS(darkPalette.neutral_200)};\n    --t-field-color-stroke-focus: ${unsafeCSS(darkPalette.secondary)};\n    --t-field-color-text-disabled: ${unsafeCSS(darkPalette.primary_800)};\n    --t-field-color-stroke-validation: ${unsafeCSS(darkPalette.validation_200)};\n    --t-field-color-bg-validation: rgba(\n      ${rgbDarkValidation.r},\n      ${rgbDarkValidation.g},\n      ${rgbDarkValidation.b},\n      0.2\n    );\n    --t-field-color-bg-error: rgba(\n      ${rgbDarkError.r},\n      ${rgbDarkError.g},\n      ${rgbDarkError.b},\n      0.2\n    );\n    --t-field-color-stroke-error: ${unsafeCSS(darkPalette.error_200)};\n  }\n`;\n\nexport const inputComponentStyles = css`\n  .t-input-container {\n    position: relative;\n    --t-padding-x-desktop-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconDesktopSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n    --t-padding-x-tablet-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconTabletSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n  }\n  .t-input {\n    padding: 1rem ${unsafeCSS(inputVars.paddingX)};\n    border-radius: 4px;\n    font-family: 'rubik', sans-serif;\n    cursor: var(--t-field-input-cursor);\n  }\n  .t-input.with-title {\n    padding-top: 1.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .t-input.with-icon-right {\n    padding-right: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input {\n      padding-top: 0.875rem;\n      padding-bottom: 0.875rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.375rem;\n      padding-bottom: 0.375rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      padding-top: 0.75rem;\n      padding-bottom: 0.75rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.25rem;\n      padding-bottom: 0.25rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n`;\n\nexport const inputFontStyles = css`\n  .t-input::placeholder,\n  .t-input,\n  .t-title {\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input::placeholder {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    .t-input::placeholder {\n      line-height: 1rem;\n    }\n  }\n`;\n\nexport const inputColorStyles = css`\n  .t-input {\n    background-color: var(--t-field-color-form);\n    border: 1px solid var(--t-field-color-form);\n    color: var(--t-field-color-text);\n  }\n  .t-input-container:hover .t-input,\n  .t-input:hover {\n    border: 1px solid var(--t-field-color-stroke-hover);\n  }\n  .t-input:focus {\n    border: 1px solid var(--t-field-color-stroke-focus);\n    outline: 1px solid var(--t-field-color-stroke-focus);\n  }\n  .t-input[disabled]:disabled {\n    cursor: not-allowed;\n    border: none;\n    color: var(--t-field-color-text-disabled);\n  }\n  .t-input.with-title::placeholder {\n    color: transparent;\n  }\n  .t-input::placeholder,\n  .t-input.with-title:focus::placeholder {\n    color: var(--t-field-color-title);\n  }\n  .t-input.with-warning {\n    border: 1px solid var(--t-field-color-stroke-validation);\n    background-color: var(--t-field-color-bg-validation);\n  }\n  .t-input.with-error {\n    border: 1px solid var(--t-field-color-stroke-error);\n    background-color: var(--t-field-color-bg-error);\n  }\n  .t-input.with-loading {\n    border: 1px solid var(--t-field-color-stroke-loading);\n  }\n`;\n\nexport const inputTitleStyles = css`\n  .t-title {\n    position: absolute;\n    top: 50%;\n    left: 1.25rem;\n    font-family: 'rubik', sans-serif;\n    color: var(--t-field-color-title);\n    transform: translateY(-50%);\n    transition-duration: 0.3s;\n    pointer-events: none;\n  }\n  .t-textarea-container .t-title {\n    top: 1rem;\n    transform: none;\n  }\n  .t-input.with-title:focus + .t-title,\n  .t-input.with-title:not(:placeholder-shown) + .t-title {\n    font-size: 0.75rem;\n    font-weight: 400;\n    line-height: 1rem;\n    transform: translateY(0);\n    top: 0.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-title {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.375rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.875rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.25rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.75rem;\n    }\n  }\n`;\n\nexport const inputIconStyles = css`\n  .t-icon-set-container.t-icon-click {\n    cursor: pointer;\n  }\n  .t-input-container .t-icon-set-container {\n    height: ${unsafeCSS(inputVars.iconDesktopSize)};\n    width: ${unsafeCSS(inputVars.iconDesktopSize)};\n  }\n  .t-input-container .t-icon-set-container.t-icon-right {\n    position: absolute;\n    top: 50%;\n    right: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-input-container .t-icon-set-container.t-icon-left {\n    position: absolute;\n    top: 50%;\n    left: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-icon-inactive {\n    display: inline;\n  }\n  .t-icon-active {\n    display: none;\n  }\n  .t-icon-disabled {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-inactive,\n  .t-input:hover ~ .t-icon-set-container .t-icon-inactive,\n  .t-input:focus ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-active,\n  .t-input:hover ~ .t-icon-set-container .t-icon-active,\n  .t-input:focus ~ .t-icon-set-container .t-icon-active {\n    display: inline;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-active {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {\n    display: inline;\n    cursor: not-allowed;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input-container .t-icon-set-container {\n      height: ${unsafeCSS(inputVars.iconTabletSize)};\n      width: ${unsafeCSS(inputVars.iconTabletSize)};\n    }\n  }\n`;\n\nexport const inputSearchStyles = css`\n  .t-input[type='search'] {\n    padding-left: var(--t-padding-x-desktop-with-icon);\n  }\n  .t-input[type='search'] + .t-title {\n    left: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input[type='search'] {\n      padding-left: var(--t-padding-x-tablet-with-icon);\n    }\n    .t-input[type='search'] + .t-title {\n      left: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n`;\n\nexport const inputDescriptionStyles = css`\n  .t-input-description-container {\n    margin-top: 0.5rem;\n    font-family: 'rubik', sans-serif;\n    font-size: 0.75rem;\n    line-height: 1rem;\n    color: var(--t-field-color-description);\n    display: flex;\n    justify-content: space-between;\n  }\n  .t-input-description-container .t-letter-counter {\n    align-self: flex-end;\n  }\n  .t-input-description-container .t-input-description {\n    display: flex;\n    gap: 0.5rem;\n  }\n`;\n"]}

package/dist/src/tuix-link/TuixLink.d.ts

@@ -7,5 +7,7 @@ export declare class TuixLink extends LitElement {
     target: LinkTarget;
     variant: MainVariant;
     disabled: boolean;
+    dark: boolean;
+    private _getOptionalClasses;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/tuix-link/TuixLink.js

@@ -5,6 +5,7 @@ import { palette } from '../utils/colors';
 import { ScreenSizes } from '../utils/screenSizes.enum';
 import { MainVariant } from '../utils/mainVariant.enum';
 import { LinkTarget } from './enums/linkTarget.enum';
+import { classMap } from 'lit/directives/class-map.js';
 let TuixLink = class TuixLink extends LitElement {
     constructor() {
         super(...arguments);
@@ -12,12 +13,22 @@ let TuixLink = class TuixLink extends LitElement {
         this.target = LinkTarget.Blank;
         this.variant = MainVariant.PRIMARY;
         this.disabled = false;
+        this.dark = false;
+    }
+    _getOptionalClasses() {
+        const variantClass = `${this.variant}`;
+        return {
+            link: true,
+            disabled: this.disabled,
+            [variantClass]: true,
+            [MainVariant.SECONDARY]: this.dark,
+        };
     }
     render() {
         return html `
       <a
         target="${this.disabled ? LinkTarget.Self : this.target}"
-        class="link ${this.variant} ${this.disabled ? 'disabled' : ''}"
+        class="${classMap(this._getOptionalClasses())}"
         href="${this.disabled ? 'javascript:void(0)' : this.href}"
       >
         <slot></slot>
@@ -65,6 +76,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], TuixLink.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixLink.prototype, "dark", void 0);
 TuixLink = __decorate([
     customElement('tuix-link')
 ], TuixLink);

package/dist/src/tuix-link/TuixLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixLink.js","sourceRoot":"","sources":["../../../src/tuix-link/TuixLink.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QA+BE,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,UAAU,CAAC,KAAK,CAAC;QAG1B,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;IAanB,CAAC;IAXC,MAAM;QACJ,OAAO,IAAI,CAAA;;kBAEG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;sBACzC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;gBACrD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;;;;KAI3D,CAAC;IACJ,CAAC;;AAnDM,eAAM,GAAG,GAAG,CAAA;;;;;;;eAON,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;;eAMvB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;yCAEE,WAAW,CAAC,MAAM;;;;;;;;;eAS5C,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;GAG1C,AA3BY,CA2BX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;wCACL;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCACF;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAxCN,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAqDpB;SArDY,QAAQ","sourcesContent":["import { html, css, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { LinkTarget } from './enums/linkTarget.enum';\n\n@customElement('tuix-link')\nexport class TuixLink extends LitElement {\n  static styles = css`\n    a.link {\n      font-family: 'rubik', sans-serif;\n      font-size: 1rem;\n      font-weight: 400;\n      line-height: 1.25rem;\n      text-decoration: none;\n      color: ${unsafeCSS(palette.main)};\n    }\n    a.link:hover {\n      text-decoration: underline;\n    }\n    a.link.secondary {\n      color: ${unsafeCSS(palette.white)};\n    }\n    @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n      a.link {\n        font-size: 0.875rem;\n        font-weight: 400;\n        line-height: 1rem;\n      }\n    }\n    a.link.disabled {\n      text-decoration: underline;\n      color: ${unsafeCSS(palette.primary_300)};\n      cursor: not-allowed;\n    }\n  `;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: LinkTarget })\n  target = LinkTarget.Blank;\n\n  @property({ type: MainVariant })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  render() {\n    return html`\n      <a\n        target=\"${this.disabled ? LinkTarget.Self : this.target}\"\n        class=\"link ${this.variant} ${this.disabled ? 'disabled' : ''}\"\n        href=\"${this.disabled ? 'javascript:void(0)' : this.href}\"\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TuixLink.js","sourceRoot":"","sources":["../../../src/tuix-link/TuixLink.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGlE,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QA+BE,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,UAAU,CAAC,KAAK,CAAC;QAG1B,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;IAuBf,CAAC;IArBS,mBAAmB;QACzB,MAAM,YAAY,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QACvC,OAAO;YACL,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,CAAC,YAAY,CAAC,EAAE,IAAI;YACpB,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI;SACnC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;kBAEG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;iBAC9C,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;;;;KAI3D,CAAC;IACJ,CAAC;;AAhEM,eAAM,GAAG,GAAG,CAAA;;;;;;;eAON,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;;eAMvB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;yCAEE,WAAW,CAAC,MAAM;;;;;;;;;eAS5C,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;GAG1C,AA3BY,CA2BX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;wCACL;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCACF;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACf;AA3CF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAkEpB;SAlEY,QAAQ","sourcesContent":["import { html, css, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { LinkTarget } from './enums/linkTarget.enum';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\n@customElement('tuix-link')\nexport class TuixLink extends LitElement {\n  static styles = css`\n    a.link {\n      font-family: 'rubik', sans-serif;\n      font-size: 1rem;\n      font-weight: 400;\n      line-height: 1.25rem;\n      text-decoration: none;\n      color: ${unsafeCSS(palette.main)};\n    }\n    a.link:hover {\n      text-decoration: underline;\n    }\n    a.link.secondary {\n      color: ${unsafeCSS(palette.white)};\n    }\n    @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n      a.link {\n        font-size: 0.875rem;\n        font-weight: 400;\n        line-height: 1rem;\n      }\n    }\n    a.link.disabled {\n      text-decoration: underline;\n      color: ${unsafeCSS(palette.primary_300)};\n      cursor: not-allowed;\n    }\n  `;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: LinkTarget })\n  target = LinkTarget.Blank;\n\n  @property({ type: MainVariant })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  dark = false;\n\n  private _getOptionalClasses(): ClassInfo {\n    const variantClass = `${this.variant}`;\n    return {\n      link: true,\n      disabled: this.disabled,\n      [variantClass]: true,\n      [MainVariant.SECONDARY]: this.dark,\n    };\n  }\n\n  render() {\n    return html`\n      <a\n        target=\"${this.disabled ? LinkTarget.Self : this.target}\"\n        class=\"${classMap(this._getOptionalClasses())}\"\n        href=\"${this.disabled ? 'javascript:void(0)' : this.href}\"\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"]}

package/dist/src/tuix-paper/TuixPaper.d.ts

@@ -2,6 +2,8 @@ import { LitElement, TemplateResult } from 'lit';
 import { ShadowVariants } from './enums/tuix-paper.enum';
 export declare class TuixPaper extends LitElement {
     elevation: ShadowVariants;
+    dark: boolean;
     static styles: import("lit").CSSResult;
+    private _getOptionalClasses;
     render(): TemplateResult;
 }

package/dist/src/tuix-paper/TuixPaper.js

@@ -2,13 +2,25 @@ import { __decorate } from "tslib";
 import { LitElement, css, html, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ShadowVariants } from './enums/tuix-paper.enum';
+import { classMap } from 'lit/directives/class-map.js';
 let TuixPaper = class TuixPaper extends LitElement {
     constructor() {
         super(...arguments);
         this.elevation = ShadowVariants.Variant_1;
+        this.dark = false;
+    }
+    _getOptionalClasses() {
+        const elevationClass = `elevation `;
+        const variantClass = `variant_${this.elevation}`;
+        const darkClass = `dark_${this.elevation}`;
+        return {
+            [elevationClass]: true,
+            [variantClass]: !this.dark,
+            [darkClass]: this.dark,
+        };
     }
     render() {
-        return html ` <div class="elevation variant_${this.elevation}">
+        return html ` <div class="${classMap(this._getOptionalClasses())}">
       <slot></slot>
     </div>`;
     }
@@ -26,6 +38,9 @@ TuixPaper.styles = css `
             .elevation.variant_${variant} {
               box-shadow: 0px ${Math.pow(2, index)}px ${Math.pow(2, (index + 2))}px rgba(66, 79, 101, 0.16);
             }
+            .elevation.dark_${variant} {
+              background-color: ${unsafeCSS(`rgb(${23 + 3 * (index)}, ${23 + 3 * (index)}, ${26 + 5 * (index)})`)};
+            }
           `;
 })
     .join('\n'))}
@@ -33,6 +48,9 @@ TuixPaper.styles = css `
 __decorate([
     property({ type: ShadowVariants })
 ], TuixPaper.prototype, "elevation", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixPaper.prototype, "dark", void 0);
 TuixPaper = __decorate([
     customElement('tuix-paper')
 ], TuixPaper);

package/dist/src/tuix-paper/TuixPaper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixPaper.js","sourceRoot":"","sources":["../../../src/tuix-paper/TuixPaper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAEE,cAAS,GAAmB,cAAc,CAAC,SAAS,CAAC;IA2BvD,CAAC;IALC,MAAM;QACJ,OAAO,IAAI,CAAA,kCAAkC,IAAI,CAAC,SAAS;;WAEpD,CAAC;IACV,CAAC;;AAxBD,kBAAkB;AACX,gBAAM,GAAG,GAAG,CAAA;;;;;;MAMf,SAAS,CACT,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;KACnC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;IACtB,OAAO;iCACgB,OAAO;gCACR,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;;WAErE,CAAC;AACJ,CAAC,CAAC;KACD,IAAI,CAAC,IAAI,CAAC,CACd;GACF,AAjBY,CAiBX;AApBF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC;4CACkB;AAF1C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA6BrB;SA7BY,SAAS","sourcesContent":["import { LitElement, TemplateResult, css, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ShadowVariants } from './enums/tuix-paper.enum';\n\n@customElement('tuix-paper')\nexport class TuixPaper extends LitElement {\n  @property({ type: ShadowVariants })\n  elevation: ShadowVariants = ShadowVariants.Variant_1;\n\n  // prettier-ignore\n  static styles = css`\n    .elevation {\n      border-radius: 20px;\n      padding: 16px 32px;\n    }\n\n    ${unsafeCSS(\n      Object.values(ShadowVariants).slice(1)\n        .map((variant, index) => {\n          return `\n            .elevation.variant_${variant} {\n              box-shadow: 0px ${Math.pow(2, index)}px ${Math.pow(2, (index + 2))}px rgba(66, 79, 101, 0.16);\n            }\n          `;\n        })\n        .join('\\n')\n    )}\n  `;\n\n  render(): TemplateResult {\n    return html` <div class=\"elevation variant_${this.elevation}\">\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"TuixPaper.js","sourceRoot":"","sources":["../../../src/tuix-paper/TuixPaper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGlE,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAEE,cAAS,GAAmB,cAAc,CAAC,SAAS,CAAC;QAGrD,SAAI,GAAG,KAAK,CAAC;IAyCf,CAAC;IAhBS,mBAAmB;QACzB,MAAM,cAAc,GAAG,YAAY,CAAC;QACpC,MAAM,YAAY,GAAG,WAAW,IAAI,CAAC,SAAS,EAAE,CAAC;QACjD,MAAM,SAAS,GAAG,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;QAC3C,OAAO;YACL,CAAC,cAAc,CAAC,EAAE,IAAI;YACtB,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI;YAC1B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI;SACvB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,gBAAgB,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;;WAExD,CAAC;IACV,CAAC;;AAtCD,kBAAkB;AACX,gBAAM,GAAG,GAAG,CAAA;;;;;;MAMf,SAAS,CACT,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;KACnC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;IACtB,OAAO;iCACgB,OAAO;gCACR,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;;8BAElD,OAAO;kCACH,SAAS,CAAC,OAAO,EAAE,GAAG,CAAC,GAAC,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,GAAC,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,GAAC,CAAC,KAAK,CAAC,GAAG,CAAC;;WAEhG,CAAC;AACJ,CAAC,CAAC;KACD,IAAI,CAAC,IAAI,CAAC,CACd;GACF,AApBY,CAoBX;AA1BF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC;4CACkB;AAGrD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACf;AALF,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA8CrB;SA9CY,SAAS","sourcesContent":["import { LitElement, TemplateResult, css, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ShadowVariants } from './enums/tuix-paper.enum';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\n@customElement('tuix-paper')\nexport class TuixPaper extends LitElement {\n  @property({ type: ShadowVariants })\n  elevation: ShadowVariants = ShadowVariants.Variant_1;\n\n  @property({ type: Boolean })\n  dark = false;\n\n  // prettier-ignore\n  static styles = css`\n    .elevation {\n      border-radius: 20px;\n      padding: 16px 32px;\n    }\n\n    ${unsafeCSS(\n      Object.values(ShadowVariants).slice(1)\n        .map((variant, index) => {\n          return `\n            .elevation.variant_${variant} {\n              box-shadow: 0px ${Math.pow(2, index)}px ${Math.pow(2, (index + 2))}px rgba(66, 79, 101, 0.16);\n            }\n            .elevation.dark_${variant} {\n              background-color: ${unsafeCSS(`rgb(${23 + 3*(index)}, ${23 + 3*(index)}, ${26 + 5*(index)})`)};\n            }\n          `;\n        })\n        .join('\\n')\n    )}\n  `;\n\n  private _getOptionalClasses(): ClassInfo {\n    const elevationClass = `elevation `;\n    const variantClass = `variant_${this.elevation}`;\n    const darkClass = `dark_${this.elevation}`;\n    return {\n      [elevationClass]: true,\n      [variantClass]: !this.dark,\n      [darkClass]: this.dark,\n    };\n  }\n\n  render(): TemplateResult {\n    return html` <div class=\"${classMap(this._getOptionalClasses())}\">\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/dist/src/tuix-radio-button/TuixRadioButton.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
+import { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface';
+export declare class TuixRadioButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    dark: boolean;
+    error: boolean;
+    options: TuixRadioButtonOption[];
+    labelSide: CheckboxLabelSide;
+    selectedOption: TuixRadioButtonOption | null;
+    private _onRadioButtonChange;
+    private _getFullContainerClasses;
+    private _formatTemplate;
+    render(): import("lit-html").TemplateResult<1>;
+}