tuix-webcomponents 0.69.0 → 0.70.0

package/README.md

@@ -12,8 +12,8 @@ npm i tuix-webcomponents
 
 ### Webbundle version
 
-Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-d19e71d@0.69.0.js  
-Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-d19e71d@0.69.0.css
+Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-b93dcb2@0.70.0.js  
+Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-b93dcb2@0.70.0.css
 
 ### React .tsx with SSR
 

package/dist/assets/tuix-styles.css

@@ -0,0 +1,58 @@
+:root {
+  --tuix-light-color-primary-50: #F5F5FA;
+  --tuix-light-color-primary-100: #EBEAF4;
+  --tuix-light-color-primary-200: #D1D1E6;
+  --tuix-light-color-primary-300: #A8A9D1;
+  --tuix-light-color-primary-400: #7A7CB6;
+  --tuix-light-color-main: #585A9D;
+  --tuix-light-color-dark-main: #33355B;
+  --tuix-light-color-primary-600: #454584;
+  --tuix-light-color-primary-700: #3A396B;
+  --tuix-light-color-primary-800: #32325A;
+  --tuix-light-color-primary-900: #2E2D4D;
+  --tuix-light-color-primary-950: #1F1E33;
+  --tuix-light-color-secondary: #BBADFF;
+  --tuix-light-color-white: #FFFFFF;
+  --tuix-light-color-black: #121212;
+  --tuix-light-color-neutral-200: #C9C8D3;
+  --tuix-light-color-neutral-600: #8A8894;
+  --tuix-light-color-success: #439F6E;
+  --tuix-light-color-success-50: #F1F9F5;
+  --tuix-light-color-validation: #FFB82E;
+  --tuix-light-color-validation-50: #FFFBF4;
+  --tuix-light-color-validation-200: #FFEAC1;
+  --tuix-light-color-error: #F93232;
+  --tuix-light-color-error-50: #FFF5F5;
+  --tuix-light-color-error-200: #FFD8D8;
+  --tuix-light-color-section-bg: #FAFAFA;
+  --tuix-light-color-shadow: rgba(66, 79, 101, 0.16);
+  --tuix-dark-color-primary-50: #F5F5FA;
+  --tuix-dark-color-primary-100: #EBEAF4;
+  --tuix-dark-color-primary-200: #D1D1E6;
+  --tuix-dark-color-primary-300: #A8A9D1;
+  --tuix-dark-color-main: #7A7CB6;
+  --tuix-dark-color-dark-main: #33355B;
+  --tuix-dark-color-primary-600: #454584;
+  --tuix-dark-color-primary-700: #3A396B;
+  --tuix-dark-color-primary-800: #32325A;
+  --tuix-dark-color-primary-900: #2E2D4D;
+  --tuix-dark-color-primary-950: #1F1E33;
+  --tuix-dark-color-secondary: #BBADFF;
+  --tuix-dark-color-white: rgba(255, 255, 255, 0.87);
+  --tuix-dark-color-black: #121212;
+  --tuix-dark-color-neutral-200: #C9C8D3;
+  --tuix-dark-color-neutral-600: rgba(255, 255, 255, 0.60);
+  --tuix-dark-color-success: #82C5A9;
+  --tuix-dark-color-success-50: rgba(241, 249, 245, 0.30);
+  --tuix-dark-color-validation: #FFD489;
+  --tuix-dark-color-validation-50: rgba(255, 212, 137, 0.20);
+  --tuix-dark-color-validation-200: #FFEAC1;
+  --tuix-dark-color-error: #FF8486;
+  --tuix-dark-color-error-50: rgba(255, 132, 134, 0.20);
+  --tuix-dark-color-error-200: #FFD8D8;
+  --tuix-dark-color-section-bg: #0E0E0E;
+  --tuix-dark-color-elevation-1: #17171A;
+  --tuix-dark-color-elevation-2: #1A1A1F;
+  --tuix-dark-color-elevation-3: #1D1E24;
+  --tuix-dark-color-elevation-4: #212128;
+}

package/dist/src/index.d.ts

@@ -1,10 +1,10 @@
-export { type CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';
-export type { CustomEventTuixCheckbox, DetailValueCheckbox, } from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';
-export type { CustomEventTuixDropdownInput, CustomEventTuixDropdownSelect, TuixDropdownOption, TuixDropdownObjectOption, TuixDropdownPlainOption, } from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';
-export type { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';
-export type { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';
-export type { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';
-export type { DetailValue } from './utils/interfaces/detail-value.interface.js';
+export { CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';
+export { CustomEventTuixCheckbox, DetailValueCheckbox, } from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';
+export { CustomEventTuixDropdownInput, CustomEventTuixDropdownSelect, TuixDropdownOption, TuixDropdownObjectOption, TuixDropdownPlainOption, } from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';
+export { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';
+export { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';
+export { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';
+export { DetailValue } from './utils/interfaces/detail-value.interface.js';
 export { TuixText } from './tuix-text/TuixText.js';
 export { TuixIcon } from './tuix-icon/TuixIcon.js';
 export { TuixButton } from './tuix-button/TuixButton.js';
@@ -17,7 +17,7 @@ export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
 export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
 export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
 export { TuixTable } from './tuix-table/TuixTable.js';
-export type { IDataTableHeader, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
+export { IDataTableHeader, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
 export { TuixToast } from './tuix-toast/TuixToast.js';
 export { TuixModal } from './tuix-modal/TuixModal.js';
 export { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';

package/dist/src/index.js

@@ -40,3 +40,4 @@ export function loadFonts() {
     document.head.appendChild(link2);
     document.head.appendChild(link3);
 }
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAKtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EACL,QAAQ,EACR,eAAe,GAChB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,eAAe,EACf,SAAS,GACV,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,UAAU,SAAS;IACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,8BAA8B,CAAC;IAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,2BAA2B,CAAC;IACzC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI;QACR,2JAA2J,CAAC;IAC9J,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC","sourcesContent":["export { CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';\nexport {\n  CustomEventTuixCheckbox,\n  DetailValueCheckbox,\n} from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';\nexport {\n  CustomEventTuixDropdownInput,\n  CustomEventTuixDropdownSelect,\n  TuixDropdownOption,\n  TuixDropdownObjectOption,\n  TuixDropdownPlainOption,\n} from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';\nexport { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';\nexport { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';\nexport { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';\nexport { DetailValue } from './utils/interfaces/detail-value.interface.js';\nexport { TuixText } from './tuix-text/TuixText.js';\nexport { TuixIcon } from './tuix-icon/TuixIcon.js';\nexport { TuixButton } from './tuix-button/TuixButton.js';\nexport { TuixPaper } from './tuix-paper/TuixPaper.js';\nexport { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';\nexport { TuixLink } from './tuix-link/TuixLink.js';\nexport { TuixInput } from './tuix-input/TuixInput.js';\nexport { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';\nexport { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';\nexport { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';\nexport { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';\nexport { TuixTable } from './tuix-table/TuixTable.js';\nexport {\n  IDataTableHeader,\n  TuixTableElement,\n} from './tuix-table/interfaces/tuix-table.interface.js';\nexport { TuixToast } from './tuix-toast/TuixToast.js';\nexport { TuixModal } from './tuix-modal/TuixModal.js';\nexport { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';\nexport { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';\nexport { MainVariant } from './utils/mainVariant.enum.js';\nexport { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';\nexport { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';\nexport { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';\nexport {\n  IconName,\n  IconSizeVariant,\n} from './tuix-icon/enums/tuix-icon.enums.js';\nexport {\n  DescriptionType,\n  InputType,\n} from './tuix-input/enums/tuix-input.enums.js';\nexport { Palette } from './utils/colors.js';\nexport { DarkPalette } from './utils/darkColors.js';\nexport { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';\nexport { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';\nexport { ScreenSizes } from './utils/screenSizes.enum.js';\n\nexport function loadFonts() {\n  const link1 = document.createElement('link');\n  link1.rel = 'preconnect';\n  link1.href = 'https://fonts.googleapis.com';\n  const link2 = document.createElement('link');\n  link2.rel = 'preconnect';\n  link2.href = 'https://fonts.gstatic.com';\n  const link3 = document.createElement('link');\n  link3.rel = 'stylesheet';\n  link3.href =\n    'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';\n  document.head.appendChild(link1);\n  document.head.appendChild(link2);\n  document.head.appendChild(link3);\n}\n"]}

package/dist/src/tuix-button/TuixBaseButton.d.ts

@@ -1,6 +1,6 @@
-import { LitElement, type TemplateResult } from 'lit';
-import { MainVariant } from '../utils/mainVariant.enum';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { LitElement, TemplateResult } from 'lit';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
 import '../tuix-icon/TuixIcon.js';
 export declare abstract class TuixBaseButton extends LitElement {
     variant: MainVariant;

package/dist/src/tuix-button/TuixBaseButton.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { MainVariant } from '../utils/mainVariant.enum';
+import { MainVariant } from '../utils/mainVariant.enum.js';
 import { property, state } from 'lit/decorators.js';
-import { buttonTextColor } from './enums/tuix-button.enums';
+import { buttonTextColor } from './enums/tuix-button.enums.js';
 import '../tuix-icon/TuixIcon.js';
 export class TuixBaseButton extends LitElement {
     constructor() {
@@ -16,7 +16,8 @@ export class TuixBaseButton extends LitElement {
         this._updateIconColor();
     }
     _getTextColor() {
-        const element = this.shadowRoot?.querySelector('.button');
+        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);
@@ -58,3 +59,4 @@ __decorate([
 __decorate([
     state()
 ], TuixBaseButton.prototype, "iconColor", void 0);
+//# sourceMappingURL=TuixBaseButton.js.map

package/dist/src/tuix-button/TuixBaseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixBaseButton.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixBaseButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,OAAO,0BAA0B,CAAC;AAElC,MAAM,OAAgB,cAAe,SAAQ,UAAU;IAAvD;;QAEE,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGH,cAAS,GAAG,EAAE,CAAC;IA6C3B,CAAC;IA3CC,OAAO;QACL,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAES,aAAa;;QACrB,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;IAIS,YAAY;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxE,CAAC;IAES,aAAa,CACrB,QAAkB,EAClB,QAAyB;QAEzB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,OAAO,IAAI,CAAA;cACD,QAAQ;cACR,QAAQ;eACP,IAAI,CAAC,SAAS;kBACX,CAAC;IACjB,CAAC;IAIS,MAAM;QACd,OAAO,IAAI,CAAA;eACA,IAAI,CAAC,YAAY;oBACZ,IAAI,CAAC,gBAAgB;oBACrB,IAAI,CAAC,gBAAgB;cAC3B,IAAI,CAAC,gBAAgB;mBAChB,IAAI,CAAC,QAAQ;;;QAGxB,IAAI,CAAC,cAAc,EAAE;cACf,CAAC;IACb,CAAC;CACF;AAtDC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACjB;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC9B;AAGH;IADT,KAAK,EAAE;iDACiB","sourcesContent":["import { LitElement, TemplateResult, html } from 'lit';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { property, state } from 'lit/decorators.js';\nimport { buttonTextColor } from './enums/tuix-button.enums';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport '../tuix-icon/TuixIcon.js';\n\nexport abstract class TuixBaseButton extends LitElement {\n  @property({ type: MainVariant, reflect: true })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @state()\n  protected iconColor = '';\n\n  updated() {\n    this._updateIconColor();\n  }\n\n  protected _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  protected abstract _updateIconColor(): void;\n\n  protected _handleClick() {\n    this.dispatchEvent(new CustomEvent('customClick', { bubbles: true }));\n  }\n\n  protected _iconTemplate(\n    iconName: IconName,\n    iconSize: IconSizeVariant\n  ): TemplateResult {\n    this._updateIconColor();\n    return html`<tuix-icon\n      size=\"${iconSize}\"\n      name=\"${iconName}\"\n      color=\"${this.iconColor}\"\n    ></tuix-icon>`;\n  }\n\n  protected abstract _buttonContent(): TemplateResult;\n\n  protected render(): TemplateResult {\n    return html`<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._buttonContent()}\n    </button>`;\n  }\n}\n"]}

package/dist/src/tuix-button/TuixButton.d.ts

@@ -1,6 +1,6 @@
-import { type TemplateResult } from 'lit';
-import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
-import { TuixBaseButton } from './TuixBaseButton';
+import { TemplateResult } from 'lit';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { TuixBaseButton } from './TuixBaseButton.js';
 export declare class TuixButton extends TuixBaseButton {
     static styles: import("lit").CSSResult[];
     full: boolean;

package/dist/src/tuix-button/TuixButton.js

@@ -1,17 +1,34 @@
 import { __decorate } from "tslib";
 import { css, html, nothing } from 'lit';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
-import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles.js';
 import { customElement, property } from 'lit/decorators.js';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { TuixBaseButton } from './TuixBaseButton';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { TuixBaseButton } from './TuixBaseButton.js';
 let TuixButton = class TuixButton extends TuixBaseButton {
     constructor() {
         super(...arguments);
         this.full = false;
     }
-    static { this.styles = [
-        css `
+    _updateIconColor() {
+        if (!this.iconLeft && !this.iconRight)
+            return;
+        this.iconColor = this._getTextColor();
+    }
+    _buttonContent() {
+        let iconSize = IconSizeVariant.MEDIUM;
+        if (screen.width <= ScreenSizes.TABLET) {
+            iconSize = IconSizeVariant.SMALL;
+        }
+        return html ` <div class="container">
+      ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}
+      <slot></slot>
+      ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}
+    </div>`;
+    }
+};
+TuixButton.styles = [
+    css `
       :host([full]) .button {
         width: 100%;
       }
@@ -48,27 +65,10 @@ let TuixButton = class TuixButton extends TuixBaseButton {
         }
       }
     `,
-        hostButtonStyles,
-        buttonColorStyles,
-        buttonSizeStyles,
-    ]; }
-    _updateIconColor() {
-        if (!this.iconLeft && !this.iconRight)
-            return;
-        this.iconColor = this._getTextColor();
-    }
-    _buttonContent() {
-        let iconSize = IconSizeVariant.MEDIUM;
-        if (screen.width <= ScreenSizes.TABLET) {
-            iconSize = IconSizeVariant.SMALL;
-        }
-        return html ` <div class="container">
-      ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}
-      <slot></slot>
-      ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}
-    </div>`;
-    }
-};
+    hostButtonStyles,
+    buttonColorStyles,
+    buttonSizeStyles,
+];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TuixButton.prototype, "full", void 0);
@@ -82,3 +82,4 @@ TuixButton = __decorate([
     customElement('tuix-button')
 ], TuixButton);
 export { TuixButton };
+//# sourceMappingURL=TuixButton.js.map

package/dist/src/tuix-button/TuixButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixButton.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,cAAc;IAA9C;;QA6CE,SAAI,GAAG,KAAK,CAAC;IAyBf,CAAC;IAjBoB,gBAAgB;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAEkB,cAAc;QAC/B,IAAI,QAAQ,GAAG,eAAe,CAAC,MAAM,CAAC;QAEtC,IAAI,MAAM,CAAC,KAAK,IAAI,WAAW,CAAC,MAAM,EAAE;YACtC,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC;SAClC;QACD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;;QAErE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;WACpE,CAAC;IACV,CAAC;;AApEM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;2CAWoC,WAAW,CAAC,MAAM;;;;;;2CAMlB,WAAW,CAAC,MAAM;;;;;;;;;;;;;;2CAclB,WAAW,CAAC,MAAM;;;;;KAKxD;IACD,gBAAgB;IAChB,iBAAiB;IACjB,gBAAgB;CACjB,AAzCY,CAyCX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAC9B;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;6CACR;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;4CACT;AAnDT,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAsEtB;SAtEY,UAAU","sourcesContent":["import { TemplateResult, css, html, nothing } from 'lit';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport {\n  buttonSizeStyles,\n  buttonColorStyles,\n  hostButtonStyles,\n} from './TuixButton.styles';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { TuixBaseButton } from './TuixBaseButton';\n\n@customElement('tuix-button')\nexport class TuixButton extends TuixBaseButton {\n  static styles = [\n    css`\n      :host([full]) .button {\n        width: 100%;\n      }\n      .button {\n        padding: 16px 32px;\n        border-radius: 4px;\n        border: none;\n        font-family: 'Rubik', sans-serif;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n        .button {\n          padding: 14px 32px;\n        }\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .button {\n          padding: 12px 24px;\n        }\n      }\n\n      .container {\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        gap: 8px;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .container {\n          gap: 6px;\n        }\n      }\n    `,\n    hostButtonStyles,\n    buttonColorStyles,\n    buttonSizeStyles,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  full = false;\n\n  @property({ type: IconName })\n  iconRight?: IconName;\n\n  @property({ type: IconName })\n  iconLeft?: IconName;\n\n  protected override _updateIconColor() {\n    if (!this.iconLeft && !this.iconRight) return;\n    this.iconColor = this._getTextColor();\n  }\n\n  protected override _buttonContent(): TemplateResult {\n    let iconSize = IconSizeVariant.MEDIUM;\n\n    if (screen.width <= ScreenSizes.TABLET) {\n      iconSize = IconSizeVariant.SMALL;\n    }\n    return html` <div class=\"container\">\n      ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}\n      <slot></slot>\n      ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}\n    </div>`;\n  }\n}\n"]}

package/dist/src/tuix-button/TuixButton.styles.js

@@ -1,10 +1,10 @@
 import { css, unsafeCSS } from 'lit';
-import { Palette } from '../utils/colors';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { DarkPalette } from '../utils/darkColors';
-import { MainVariant } from '../utils/mainVariant.enum';
-import slottedClassName from '../utils/slottedClassName';
-import { TextSize } from '../tuix-text/enums/tuix-text.enums';
+import { Palette } from '../utils/colors.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { DarkPalette } from '../utils/darkColors.js';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import slottedClassName from '../utils/slottedClassName.js';
+import { TextSize } from '../tuix-text/enums/tuix-text.enums.js';
 export const hostButtonStyles = css `
   :host {
     --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};
@@ -105,3 +105,4 @@ export const buttonColorStyles = css `
     cursor: not-allowed;
   }
 `;
+//# sourceMappingURL=TuixButton.styles.js.map

package/dist/src/tuix-button/TuixButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,gBAAgB,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;gCAEH,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;kCACrB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;+BAC3B,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;6BAC9B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;uCACd,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;mCAC3B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;sCAC5B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;uCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;wCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;yCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;gCAGvC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC;6BAC9B,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;mCACtB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;sCAC5B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;uCACtB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;kCACnC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;wCAClB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;yCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;CAEtE,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;IAC/B,SAAS,CAAC;IACV,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;uCAKE,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;uCAMA,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;CAMtC,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;oBAChB,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;oBAK9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;oBAI9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;oBAI9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;oBAK9B,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;;oBAMhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;oBAIhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;oBAChC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;CAKjD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { DarkPalette } from '../utils/darkColors';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport slottedClassName from '../utils/slottedClassName';\nimport { TextSize } from '../tuix-text/enums/tuix-text.enums';\n\nexport const hostButtonStyles = css`\n  :host {\n    --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};\n    --t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};\n    --t-button-text-color: ${unsafeCSS(Palette.WHITE)};\n    --t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};\n  }\n  :host([dark]) {\n    --t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};\n    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};\n    --t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n    --t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};\n    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};\n    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n  }\n`;\n\nexport const buttonSizeStyles = css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.Button)} {\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.2rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    ${slottedClassName(TextSize.Button)} {\n      font-size: 0.888rem;\n      font-weight: 400;\n      line-height: 1.065rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    ${slottedClassName(TextSize.Button)} {\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 1rem;\n    }\n  }\n`)}\n`;\n\nexport const buttonColorStyles = css`\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {\n    background-color: var(--t-button-primary-color);\n    outline: none;\n    color: var(--t-button-text-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {\n    background-color: var(--t-button-hover-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {\n    background-color: var(--t-button-hover-primary-color);\n    outline: 2px solid var(--t-button-accent-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {\n    background-color: var(--t-button-active-primary-color);\n    outline: none;\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {\n    background-color: var(--t-button-secondary-color);\n    outline: 1px solid var(--t-button-hover-primary-color);\n    color: var(--t-button-text-secondary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {\n    background-color: var(--t-button-hover-secondary-color);\n    outline: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {\n    background-color: var(--t-button-hover-secondary-color);\n    outline: 2px solid var(--t-button-accent-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {\n    background-color: var(--t-button-active-secondary-color);\n    outline: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {\n    outline: 1px solid var(--t-button-text-muted-color);\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {\n    background-color: var(--t-button-disabled-bg-color);\n    color: var(--t-button-text-muted-color);\n    cursor: not-allowed;\n  }\n`;\n"]}

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

@@ -1,2 +1,2 @@
-import { MainVariant } from '../../utils/mainVariant.enum';
+import { MainVariant } from '../../utils/mainVariant.enum.js';
 export declare const buttonTextColor: Record<MainVariant, string>;

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

@@ -1,6 +1,7 @@
-import { Palette } from '../../utils/colors';
-import { MainVariant } from '../../utils/mainVariant.enum';
+import { Palette } from '../../utils/colors.js';
+import { MainVariant } from '../../utils/mainVariant.enum.js';
 export const buttonTextColor = {
     [MainVariant.PRIMARY]: Palette.WHITE,
     [MainVariant.SECONDARY]: Palette.MAIN,
 };
+//# sourceMappingURL=tuix-button.enums.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-button.enums.js","sourceRoot":"","sources":["../../../../src/tuix-button/enums/tuix-button.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAgC;IAC1D,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK;IACpC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,IAAI;CACtC,CAAC","sourcesContent":["import { Palette } from '../../utils/colors';\nimport { MainVariant } from '../../utils/mainVariant.enum';\n\nexport const buttonTextColor: Record<MainVariant, string> = {\n  [MainVariant.PRIMARY]: Palette.WHITE,\n  [MainVariant.SECONDARY]: Palette.MAIN,\n};\n"]}

package/dist/src/tuix-button/interfaces/tuix-button.interface.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=tuix-button.interface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-button.interface.js","sourceRoot":"","sources":["../../../../src/tuix-button/interfaces/tuix-button.interface.ts"],"names":[],"mappings":"","sourcesContent":["export type CustomEventTuixButton = CustomEvent<undefined>;\n"]}

package/dist/src/tuix-checkbox/TuixCheckbox.d.ts

@@ -1,5 +1,5 @@
-import { LitElement, type TemplateResult } from 'lit';
-import { CheckboxLabelSide } from './enums/tuix-checkbox.enums';
+import { LitElement, TemplateResult } from 'lit';
+import { CheckboxLabelSide } from './enums/tuix-checkbox.enums.js';
 export declare class TuixCheckbox extends LitElement {
     static styles: import("lit").CSSResult[];
     checked: boolean;

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

@@ -2,10 +2,10 @@ import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
-import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
-import { checkboxCheckmarkStyles, checkboxContainerStyles, checkboxLabelStyles, hostStyles, } from './TuixCheckbox.styles';
-import { CheckboxIconColorDark, CheckboxIconColorLight, CheckboxIconMode, CheckboxLabelSide, } from './enums/tuix-checkbox.enums';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
+import { checkboxCheckmarkStyles, checkboxContainerStyles, checkboxLabelStyles, hostStyles, } from './TuixCheckbox.styles.js';
+import { CheckboxIconColorDark, CheckboxIconColorLight, CheckboxIconMode, CheckboxLabelSide, } from './enums/tuix-checkbox.enums.js';
 let TuixCheckbox = class TuixCheckbox extends LitElement {
     constructor() {
         super(...arguments);
@@ -16,12 +16,6 @@ let TuixCheckbox = class TuixCheckbox extends LitElement {
         this.label = '';
         this.labelSide = CheckboxLabelSide.RIGHT;
     }
-    static { this.styles = [
-        hostStyles,
-        checkboxContainerStyles,
-        checkboxCheckmarkStyles,
-        checkboxLabelStyles,
-    ]; }
     _onCheckboxChange(event) {
         this.dispatchEvent(new CustomEvent('change', {
             detail: {
@@ -82,6 +76,12 @@ let TuixCheckbox = class TuixCheckbox extends LitElement {
     </label>`;
     }
 };
+TuixCheckbox.styles = [
+    hostStyles,
+    checkboxContainerStyles,
+    checkboxCheckmarkStyles,
+    checkboxLabelStyles,
+];
 __decorate([
     property({ type: Boolean })
 ], TuixCheckbox.prototype, "checked", void 0);
@@ -104,3 +104,4 @@ TuixCheckbox = __decorate([
     customElement('tuix-checkbox')
 ], TuixCheckbox);
 export { TuixCheckbox };
+//# sourceMappingURL=TuixCheckbox.js.map

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

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

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

@@ -1,7 +1,7 @@
 import { css, unsafeCSS } from 'lit';
-import { Palette } from '../utils/colors';
-import { DarkPalette } from '../utils/darkColors';
-import { ScreenSizes } from '../utils/screenSizes.enum';
+import { Palette } from '../utils/colors.js';
+import { DarkPalette } from '../utils/darkColors.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
 export const hostStyles = css `
   :host {
     --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};
@@ -130,3 +130,4 @@ export const checkboxLabelStyles = css `
     margin-left: 0;
   }
 `;
+//# sourceMappingURL=TuixCheckbox.styles.js.map

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

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

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

@@ -1,5 +1,5 @@
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export declare enum CheckboxIconMode {
     DEFAULT = "default",
     DISABLED = "disabled",

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

@@ -1,5 +1,5 @@
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export var CheckboxIconMode;
 (function (CheckboxIconMode) {
     CheckboxIconMode["DEFAULT"] = "default";
@@ -21,3 +21,4 @@ export const CheckboxIconColorDark = {
     [CheckboxIconMode.DISABLED]: DarkPalette.PRIMARY_100,
     [CheckboxIconMode.ERROR]: DarkPalette.WHITE,
 };
+//# sourceMappingURL=tuix-checkbox.enums.js.map

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-checkbox/interfaces/tuix-checkbox.interface.d.ts

@@ -1,4 +1,4 @@
-import { type DetailValue } from '../../utils/interfaces/detail-value.interface';
+import { DetailValue } from '../../utils/interfaces/detail-value.interface.js';
 export interface DetailValueCheckbox extends DetailValue<boolean> {
     label?: string;
 }

package/dist/src/tuix-checkbox/interfaces/tuix-checkbox.interface.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=tuix-checkbox.interface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-checkbox.interface.js","sourceRoot":"","sources":["../../../../src/tuix-checkbox/interfaces/tuix-checkbox.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { DetailValue } from '../../utils/interfaces/detail-value.interface';\n\nexport interface DetailValueCheckbox extends DetailValue<boolean> {\n  label?: string;\n}\n\nexport type CustomEventTuixCheckbox = CustomEvent<DetailValueCheckbox>;\n"]}

package/dist/src/tuix-dropdown/TuixDropdown.d.ts

@@ -1,7 +1,7 @@
-import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
-import type { TuixDropdownExtendedOption, TuixDropdownOption } from './interfaces/tuix-dropdown.interface';
-import { DescriptionType } from '../tuix-input/enums/tuix-input.enums';
-import { DropdownType } from './enums/tuix-dropdown.enums';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { TuixDropdownExtendedOption, TuixDropdownOption } from './interfaces/tuix-dropdown.interface.js';
+import { DescriptionType } from '../tuix-input/enums/tuix-input.enums.js';
+import { DropdownType } from './enums/tuix-dropdown.enums.js';
 export declare class TuixDropdown extends LitElement {
     static styles: import("lit").CSSResult[];
     value?: TuixDropdownOption;