npm - tuix-webcomponents - Versions diffs - 0.72.0 → 0.73.0 - Mend

tuix-webcomponents 0.72.0 → 0.73.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

package/README.md CHANGED Viewed

@@ -12,8 +12,8 @@ npm i tuix-webcomponents
 ### Webbundle version
-Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-76fb234@0.72.0.js
-Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-76fb234@0.72.0.css
+Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-c1c2572@0.73.0.js
+Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-c1c2572@0.73.0.css
 ### React .tsx with SSR

package/dist/assets/tuix-styles.css CHANGED Viewed

@@ -27,32 +27,20 @@
   --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-#f5f5fa: PRIMARY_50;
   --tuix-dark-color-primary-100: #EBEAF4;
-  --tuix-dark-color-#ebeaf4: PRIMARY_100;
   --tuix-dark-color-primary-200: #D1D1E6;
-  --tuix-dark-color-#d1d1e6: PRIMARY_200;
   --tuix-dark-color-primary-300: #A8A9D1;
-  --tuix-dark-color-#a8a9d1: PRIMARY_300;
   --tuix-dark-color-main: #7A7CB6;
   --tuix-dark-color-dark-main: #33355B;
-  --tuix-dark-color-#33355b: DARK_MAIN;
   --tuix-dark-color-primary-600: #454584;
-  --tuix-dark-color-#454584: PRIMARY_600;
   --tuix-dark-color-primary-700: #3A396B;
-  --tuix-dark-color-#3a396b: PRIMARY_700;
   --tuix-dark-color-primary-800: #32325A;
-  --tuix-dark-color-#32325a: PRIMARY_800;
   --tuix-dark-color-primary-900: #2E2D4D;
-  --tuix-dark-color-#2e2d4d: PRIMARY_900;
   --tuix-dark-color-primary-950: #1F1E33;
-  --tuix-dark-color-#1f1e33: PRIMARY_950;
   --tuix-dark-color-secondary: #BBADFF;
-  --tuix-dark-color-#bbadff: SECONDARY;
   --tuix-dark-color-white: rgba(255, 255, 255, 0.87);
   --tuix-dark-color-black: #121212;
   --tuix-dark-color-neutral-200: #C9C8D3;
-  --tuix-dark-color-#c9c8d3: NEUTRAL_200;
   --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);
@@ -62,7 +50,6 @@
   --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-#ffd8d8: ERROR_200;
   --tuix-dark-color-section-bg: #0E0E0E;
   --tuix-dark-color-elevation-1: #17171A;
   --tuix-dark-color-elevation-2: #1A1A1F;

package/dist/src/index.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import { LitElement, type TemplateResult } from 'lit';
+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';

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+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 {

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

@@ -10,8 +10,25 @@ let TuixButton = class TuixButton extends TuixBaseButton {
         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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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.js CHANGED Viewed

@@ -4,3 +4,4 @@ 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 ADDED Viewed

@@ -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 CHANGED Viewed

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

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

	@@ -0,0 +1 @@
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 CHANGED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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.js CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type DetailValue } from '../../utils/interfaces/detail-value.interface.js';
+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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -1,5 +1,5 @@
-import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
-import type { TuixDropdownExtendedOption, TuixDropdownOption } from './interfaces/tuix-dropdown.interface.js';
+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 {

package/dist/src/tuix-dropdown/TuixDropdown.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { LitElement, html, } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
@@ -29,11 +29,6 @@ let TuixDropdown = class TuixDropdown extends LitElement {
             }
         };
     }
-    static { this.styles = [
-        dropdownHostStyles,
-        dropdownMainContainerStyles,
-        dropdownOptionStyles,
-    ]; }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener('click', this._handleClickOutside);
@@ -95,8 +90,9 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         }
     }
     _handleBlur() {
+        var _a;
         if (this.type === DropdownType.SEARCH && this._searchingOption) {
-            const optionIndex = this._previousSelectedOption?.getAttribute('data-value');
+            const optionIndex = (_a = this._previousSelectedOption) === null || _a === void 0 ? void 0 : _a.getAttribute('data-value');
             const selectedValue = typeof optionIndex === 'string'
                 ? this.options[Number(optionIndex)]
                 : '';
@@ -105,7 +101,7 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         }
     }
     _getOptionName(option) {
-        return String(typeof option === 'object' ? option?.name : option);
+        return String(typeof option === 'object' ? option === null || option === void 0 ? void 0 : option.name : option);
     }
     _getOptionValue(option) {
         return typeof option === 'object' ? option.value : option;
@@ -141,28 +137,30 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         });
     }
     _handleArrowDown() {
-        const nextOption = this._previousFocusedOption
-            ?.nextElementSibling;
+        var _a;
+        const nextOption = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
         if (nextOption) {
             this._focusTargetOption(nextOption);
         }
     }
     _handleArrowUp() {
-        const previousOption = this._previousFocusedOption
-            ?.previousElementSibling;
+        var _a;
+        const previousOption = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
         if (previousOption) {
             this._focusTargetOption(previousOption);
         }
     }
     _focusTargetOption(targetOption, extrict = true) {
-        this._previousFocusedOption?.classList?.remove('t-option-hover');
-        targetOption?.classList.add('t-option-hover');
+        var _a, _b;
+        (_b = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('t-option-hover');
+        targetOption === null || targetOption === void 0 ? void 0 : targetOption.classList.add('t-option-hover');
         if (extrict) {
-            targetOption?.focus();
+            targetOption === null || targetOption === void 0 ? void 0 : targetOption.focus();
         }
         this._previousFocusedOption = targetOption;
     }
     _toggleOptions() {
+        var _a, _b, _c, _d;
         if (this.disabled) {
             return;
         }
@@ -170,14 +168,15 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         if (this._isOptionsVisible &&
             this.type === DropdownType.SEARCH &&
             this._previousSelectedOption) {
-            this._optionsContainer?.scrollTo({
+            (_a = this._optionsContainer) === null || _a === void 0 ? void 0 : _a.scrollTo({
                 top: this._previousSelectedOption.offsetTop,
                 behavior: 'auto',
             });
-            this._inputDropdown?.shadowRoot?.querySelector('input')?.select();
+            (_d = (_c = (_b = this._inputDropdown) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('input')) === null || _d === void 0 ? void 0 : _d.select();
         }
     }
     _focusOptionsContainer() {
+        var _a, _b, _c;
         if (this.type === DropdownType.SEARCH) {
             if (this._previousSelectedOption) {
                 this._focusTargetOption(this._previousSelectedOption, false);
@@ -185,7 +184,7 @@ let TuixDropdown = class TuixDropdown extends LitElement {
             return;
         }
         if (!this._isOptionsVisible || !this._optionsContainer) {
-            this._inputDropdown?.shadowRoot?.querySelector('input')?.focus();
+            (_c = (_b = (_a = this._inputDropdown) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.focus();
             return;
         }
         if (this._previousSelectedOption) {
@@ -200,8 +199,9 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         }
     }
     _unselectPreviousOption() {
+        var _a;
         if (this._previousSelectedOption) {
-            this._previousSelectedOption.classList?.remove('t-option-selected');
+            (_a = this._previousSelectedOption.classList) === null || _a === void 0 ? void 0 : _a.remove('t-option-selected');
             this._previousSelectedOption = null;
         }
     }
@@ -220,6 +220,7 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         };
     }
     _triggerUpdateByExternalValueChange() {
+        var _a;
         this._unselectPreviousOption();
         if (!this.value) {
             this._value = '';
@@ -234,8 +235,8 @@ let TuixDropdown = class TuixDropdown extends LitElement {
             this._value = '';
             return;
         }
-        const optionTarget = this._optionsContainer?.children[index];
-        optionTarget?.classList.add('t-option-selected');
+        const optionTarget = (_a = this._optionsContainer) === null || _a === void 0 ? void 0 : _a.children[index];
+        optionTarget === null || optionTarget === void 0 ? void 0 : optionTarget.classList.add('t-option-selected');
         this._previousSelectedOption = optionTarget || null;
         this._value = optionTarget ? this._getOptionName(this.options[index]) : '';
     }
@@ -244,10 +245,11 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         this._unselectPreviousOption();
     }
     _getOptionsTemplate() {
+        var _a;
         if (this.type === DropdownType.SINGLE || this._searchingOption === false) {
             this._extendOptionsList();
         }
-        return this._extendedOptions?.map((option, index) => {
+        return (_a = this._extendedOptions) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
             return html `<div
         class="${classMap({
                 't-dropdown-option': true,
@@ -309,6 +311,11 @@ let TuixDropdown = class TuixDropdown extends LitElement {
     </div>`;
     }
 };
+TuixDropdown.styles = [
+    dropdownHostStyles,
+    dropdownMainContainerStyles,
+    dropdownOptionStyles,
+];
 __decorate([
     property({ type: Object })
 ], TuixDropdown.prototype, "value", void 0);
@@ -358,3 +365,4 @@ TuixDropdown = __decorate([
     customElement('tuix-dropdown')
 ], TuixDropdown);
 export { TuixDropdown };
+//# sourceMappingURL=TuixDropdown.js.map

package/dist/src/tuix-dropdown/TuixDropdown.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TuixDropdown.js","sourceRoot":"","sources":["../../../src/tuix-dropdown/TuixDropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, TemplateResult, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { IconName } from '../tuix-icon/enums/tuix-icon.enums';\nimport {\n dropdownHostStyles,\n dropdownMainContainerStyles,\n dropdownOptionStyles,\n} from './TuixDropdown.styles';\nimport {\n TuixDropdownExtendedOption,\n TuixDropdownOption,\n TuixDropdownPlainOption,\n} from './interfaces/tuix-dropdown.interface';\nimport { DescriptionType } from '../tuix-input/enums/tuix-input.enums';\nimport { DropdownType } from './enums/tuix-dropdown.enums';\n\n@customElement('tuix-dropdown')\nexport class TuixDropdown extends LitElement {\n static styles = [\n dropdownHostStyles,\n dropdownMainContainerStyles,\n dropdownOptionStyles,\n ];\n\n @property({ type: Object })\n value?: TuixDropdownOption = undefined;\n\n @property({ type: Array })\n options: TuixDropdownOption[] = [];\n\n @property({ type: String })\n placeholder = '';\n\n @property({ type: String })\n title = '';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n dark = false;\n\n @property({ type: String })\n description?: string;\n\n @property({ type: DescriptionType })\n descriptionType = DescriptionType.TEXT;\n\n @property({ type: String })\n type = DropdownType.SINGLE;\n\n @state()\n private _value = '';\n\n @state()\n private _isOptionsVisible = false;\n\n @state()\n private _searchingOption = false;\n\n @state()\n _extendedOptions: TuixDropdownExtendedOption[] = [];\n\n @query('.t-options-container')\n private _optionsContainer: HTMLElement | undefined;\n\n @query('.t-dropdown-container .t-input-dropdown')\n private _inputDropdown: HTMLElement | undefined;\n\n private _previousSelectedOption: HTMLElement | null = null;\n\n private _previousFocusedOption: HTMLElement | null = null;\n\n connectedCallback() {\n super.connectedCallback();\n window.addEventListener('click', this._handleClickOutside);\n this.addEventListener('blur', this._handleBlur.bind(this));\n }\n\n disconnectedCallback() {\n window.removeEventListener('click', this._handleClickOutside);\n super.disconnectedCallback();\n }\n\n private _onEnterPress(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this._toggleOptions();\n }\n }\n\n private _onKeyDownOption(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowDown':\n return this._handleArrowDown();\n case 'ArrowUp':\n return this._handleArrowUp();\n case 'Escape':\n this._isOptionsVisible = false;\n break;\n }\n }\n\n private _onKeyPressOption(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this._onClickOption(event);\n }\n }\n\n private _onMouseOverOption(event: MouseEvent) {\n const optionTarget = event.target as HTMLElement;\n this._focusTargetOption(optionTarget);\n }\n\n private _onClickOption(event: MouseEvent | KeyboardEvent) {\n const optionTarget = event.target as HTMLElement;\n this._value = optionTarget.innerText;\n this._isOptionsVisible = false;\n this._unselectPreviousOption();\n optionTarget.classList.add('t-option-selected');\n this._previousSelectedOption = optionTarget;\n this._handleSelectEvent(event);\n }\n\n protected _onInputSingle(e: CustomEvent) {\n this._handleInputBase(e, 'input-single');\n }\n\n protected _handleSelectEvent(event: MouseEvent | KeyboardEvent) {\n const optionIndex = (event.target as HTMLOptionElement).getAttribute(\n 'data-value'\n );\n const selectedValue = this.options[Number(optionIndex)];\n this.dispatchEvent(\n new CustomEvent('select', {\n detail: {\n value: this._getOptionValue(selectedValue),\n },\n bubbles: true,\n })\n );\n if (this.type === DropdownType.SEARCH) {\n this._extendOptionsList(this._getOptionName(selectedValue));\n this._searchingOption = false;\n }\n }\n\n private _handleBlur() {\n if (this.type === DropdownType.SEARCH && this._searchingOption) {\n const optionIndex =\n this._previousSelectedOption?.getAttribute('data-value');\n const selectedValue =\n typeof optionIndex === 'string'\n ? this.options[Number(optionIndex)]\n : '';\n this._value = this._getOptionName(selectedValue);\n this._extendOptionsList();\n }\n }\n\n private _getOptionName(option: TuixDropdownOption): string {\n return String(typeof option === 'object' ? option?.name : option);\n }\n\n private _getOptionValue(option: TuixDropdownOption): TuixDropdownPlainOption {\n return typeof option === 'object' ? option.value : option;\n }\n\n private _findIndex(option: TuixDropdownOption): number {\n return this._extendedOptions.findIndex(\n opt => opt.value === this._getOptionValue(option)\n );\n }\n\n private _handleInputBase(e: CustomEvent, eventName: string) {\n if (!this._searchingOption) {\n this._searchingOption = true;\n }\n this._extendOptionsList(e.detail.value);\n this._isOptionsVisible = true;\n this.dispatchEvent(\n new CustomEvent(eventName, {\n detail: {\n value: e.detail.value,\n },\n bubbles: true,\n })\n );\n this._value = e.detail.value;\n }\n\n private _extendOptionsList(value = '') {\n value = value.trim();\n this._extendedOptions = this.options.map(option => {\n const optionName = this._getOptionName(option);\n return {\n name: optionName,\n value: this._getOptionValue(option),\n filtered:\n this.type === DropdownType.SEARCH &&\n value !== '' &&\n !optionName.toLowerCase().includes(value.toLowerCase()),\n };\n });\n }\n\n private _handleArrowDown() {\n const nextOption = this._previousFocusedOption\n ?.nextElementSibling as HTMLElement;\n if (nextOption) {\n this._focusTargetOption(nextOption);\n }\n }\n\n private _handleArrowUp() {\n const previousOption = this._previousFocusedOption\n ?.previousElementSibling as HTMLElement;\n if (previousOption) {\n this._focusTargetOption(previousOption);\n }\n }\n\n private _handleClickOutside = (event: MouseEvent) => {\n if (!event.composedPath().includes(this)) {\n this._isOptionsVisible = false;\n }\n };\n\n private _focusTargetOption(targetOption: HTMLElement, extrict = true) {\n this._previousFocusedOption?.classList?.remove('t-option-hover');\n targetOption?.classList.add('t-option-hover');\n if (extrict) {\n targetOption?.focus();\n }\n this._previousFocusedOption = targetOption;\n }\n\n private _toggleOptions() {\n if (this.disabled) {\n return;\n }\n this._isOptionsVisible = !this._isOptionsVisible;\n if (\n this._isOptionsVisible &&\n this.type === DropdownType.SEARCH &&\n this._previousSelectedOption\n ) {\n this._optionsContainer?.scrollTo({\n top: this._previousSelectedOption.offsetTop,\n behavior: 'auto',\n });\n this._inputDropdown?.shadowRoot?.querySelector('input')?.select();\n }\n }\n\n private _focusOptionsContainer() {\n if (this.type === DropdownType.SEARCH) {\n if (this._previousSelectedOption) {\n this._focusTargetOption(this._previousSelectedOption, false);\n }\n return;\n }\n if (!this._isOptionsVisible || !this._optionsContainer) {\n this._inputDropdown?.shadowRoot?.querySelector('input')?.focus();\n return;\n }\n if (this._previousSelectedOption) {\n this._focusTargetOption(this._previousSelectedOption);\n } else {\n const firstOption = this._optionsContainer\n .firstElementChild as HTMLElement;\n if (firstOption) {\n this._focusTargetOption(firstOption);\n }\n }\n }\n\n private _unselectPreviousOption() {\n if (this._previousSelectedOption) {\n this._previousSelectedOption.classList?.remove('t-option-selected');\n this._previousSelectedOption = null;\n }\n }\n\n private _hasCompleteDescription(): boolean {\n const isValidDescriptionType = Object.values(DescriptionType).includes(\n this.descriptionType\n );\n return (\n isValidDescriptionType &&\n (this.descriptionType === DescriptionType.TEXT\n ? !!this.description\n : true)\n );\n }\n\n private _getOptionsContainerClasses(): ClassInfo {\n return {\n 't-options-container': true,\n show: this._isOptionsVisible,\n 't-with-description': this._hasCompleteDescription(),\n };\n }\n\n private _triggerUpdateByExternalValueChange() {\n this._unselectPreviousOption();\n if (!this.value) {\n this._value = '';\n this._extendOptionsList();\n return;\n }\n const index = this._findIndex(this.value);\n if (this.type === DropdownType.SEARCH) {\n this._extendOptionsList('');\n }\n if (index < 0) {\n this._value = '';\n return;\n }\n const optionTarget = this._optionsContainer?.children[index] as HTMLElement;\n optionTarget?.classList.add('t-option-selected');\n this._previousSelectedOption = optionTarget || null;\n this._value = optionTarget ? this._getOptionName(this.options[index]) : '';\n }\n\n private _resetPreviousSelection() {\n this._value = '';\n this._unselectPreviousOption();\n }\n\n private _getOptionsTemplate(): TemplateResult[] {\n if (this.type === DropdownType.SINGLE || this._searchingOption === false) {\n this._extendOptionsList();\n }\n return this._extendedOptions?.map((option, index) => {\n return html`<div\n class=\"${classMap({\n 't-dropdown-option': true,\n 't-option-filtered': option.filtered,\n })}\"\n @click=\"${this._onClickOption}\"\n data-value=\"${index}\"\n tabindex=\"0\"\n @keydown=\"${this._onKeyDownOption}\"\n @keypress=\"${this._onKeyPressOption}\"\n @mouseover=\"${this._onMouseOverOption}\"\n >\n ${option.name}\n </div>`;\n });\n }\n\n protected updated(changedProperties: Map<string, any>) {\n if (changedProperties.has('_isOptionsVisible')) {\n this._focusOptionsContainer();\n } else if (changedProperties.has('value')) {\n this._triggerUpdateByExternalValueChange();\n }\n }\n\n protected willUpdate(changedProperties: PropertyValues<this>) {\n if (changedProperties.has('options')) {\n this._resetPreviousSelection();\n }\n }\n\n protected firstUpdated(changedProperties: PropertyValues<this>) {\n super.firstUpdated(changedProperties);\n this._triggerUpdateByExternalValueChange();\n }\n\n protected render(): TemplateResult {\n return html`<div class=\"t-dropdown-full-container\">\n <div class=\"t-dropdown-container\">\n <tuix-input\n .value=\"${this._value}\"\n class=\"t-input-dropdown\"\n iconRight=\"${this._isOptionsVisible\n ? IconName.CHEVRON_UP\n : IconName.CHEVRON_DOWN}\"\n placeholder=\"${this.placeholder}\"\n title=\"${this.title}\"\n .description=\"${this.description}\"\n descriptionType=\"${this.descriptionType}\"\n ?disabled=\"${this.disabled}\"\n ?dark=\"${this.dark}\"\n ?readonly=\"${this.type !== DropdownType.SEARCH}\"\n @on-click=\"${this._toggleOptions}\"\n @keypress=\"${this._onEnterPress}\"\n @on-change=\"${this._onInputSingle}\"\n >\n </tuix-input>\n </div>\n <div class=\"${classMap(this._getOptionsContainerClasses())}\">\n ${this._getOptionsTemplate()}\n </div>\n </div>`;\n }\n}\n"]}

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

@@ -123,3 +123,4 @@ export const dropdownOptionStyles = css `
     }
   }
 `;
+//# sourceMappingURL=TuixDropdown.styles.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"TuixDropdown.styles.js","sourceRoot":"","sources":["../../../src/tuix-dropdown/TuixDropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;IACjC,UAAU;;8BAEgB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;4BAC1B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;;;;;;uCAUZ,WAAW,CAAC,MAAM;;;;;;;uCAOlB,WAAW,CAAC,MAAM;;;;;;;;8BAQ3B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;;CAE/D,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;CAQ7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;kCAaL,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;wBAUnC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAuCf,WAAW,CAAC,MAAM;;;;;;;;uCAQlB,WAAW,CAAC,MAAM;;;;;;;;CAQxD,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 .t-input-dropdown {\n --t-field-font-weight: 300;\n --t-field-font-size: 1rem;\n --t-field-padding-x: 1rem;\n --t-field-title-left-position: 1rem;\n }\n\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n :host .t-input-dropdown {\n --t-field-font-size: 0.938rem;\n --t-field-line-height: 1.125rem;\n }\n }\n\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n :host .t-input-dropdown {\n --t-field-font-size: 0.813rem;\n --t-field-line-height: 1rem;\n }\n }\n\n :host([dark]) {\n --t-field-color-option: ${unsafeCSS(DarkPalette.ELEVATION_2)};\n }\n`;\n\nexport const dropdownMainContainerStyles = css`\n .t-dropdown-full-container {\n position: relative;\n font-family: 'Rubik', sans-serif;\n }\n .t-dropdown-container .t-input-dropdown {\n --t-field-input-cursor: pointer;\n }\n`;\n\nexport const dropdownOptionStyles = css`\n .t-options-container {\n width: 100%;\n position: absolute;\n top: calc(100% + 2px);\n left: 0;\n border: none;\n border-radius: 0 0 5px 5px;\n background-color: var(--t-field-color-option);\n visibility: collapse;\n overflow-y: auto;\n max-height: 250px;\n color: var(--t-field-color-text);\n box-shadow: 0px 2px 8px 0px ${unsafeCSS(Palette.SHADOW)};\n z-index: 9999;\n }\n .t-options-container::-webkit-scrollbar {\n width: 0.75rem;\n }\n .t-options-container::-webkit-scrollbar-track {\n background-color: transparent;\n }\n .t-options-container::-webkit-scrollbar-thumb {\n background-color: ${unsafeCSS(Palette.PRIMARY_100)};\n border-radius: 0.25rem;\n border: 0.188rem solid transparent;\n background-clip: content-box;\n }\n .t-options-container.show {\n visibility: visible;\n }\n .t-options-container.show.t-with-description {\n top: calc(100% + 2px - 1.5rem);\n }\n @media only screen and (max-height: 500px) {\n .t-options-container {\n max-height: 50vh;\n }\n }\n .t-dropdown-option {\n padding: var(--t-field-padding-y) 1rem;\n cursor: pointer;\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 300;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n .t-dropdown-option.t-option-hover {\n background-color: var(--t-field-color-form);\n }\n .t-dropdown-option.t-option-selected {\n color: var(--t-field-color-main);\n }\n .t-dropdown-option.t-option-filtered {\n display: none;\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: 0.938rem;\n line-height: 1.125rem;\n --t-field-padding-y: 1.063rem;\n --t-field-padding-top: 1.5rem;\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-dropdown-option {\n font-size: 0.813rem;\n line-height: 1rem;\n --t-field-padding-y: 1rem;\n --t-field-padding-top: 1.375rem;\n }\n }\n`;\n"]}

package/dist/src/tuix-dropdown/enums/tuix-dropdown.enums.js CHANGED Viewed

@@ -3,3 +3,4 @@ export var DropdownType;
     DropdownType["SINGLE"] = "single";
     DropdownType["SEARCH"] = "search";
 })(DropdownType || (DropdownType = {}));
+//# sourceMappingURL=tuix-dropdown.enums.js.map