tuix-webcomponents 0.73.0 → 0.75.0

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

@@ -12,7 +12,6 @@ import { InputState, } from './interfaces/tuix-input.interface.js';
 import { v4 as uuidv4 } from 'uuid';
 let TuixInput = class TuixInput extends LitElement {
     constructor() {
-        var _a;
         super(...arguments);
         this._inputId = this._setIdInput();
         this.disabled = false;
@@ -25,7 +24,7 @@ let TuixInput = class TuixInput extends LitElement {
         this.readonly = false;
         this.autofocus = false;
         this._type = this.type;
-        this._letterCounter = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        this._letterCounter = this.value?.length || 0;
         this._previousType = this.type;
         this._previousValue = '';
         this._generalIconColorsLight = {
@@ -39,6 +38,16 @@ let TuixInput = class TuixInput extends LitElement {
             [InputState.DISABLED]: DarkPalette.PRIMARY_800,
         };
     }
+    static { this.styles = [
+        hostStyles,
+        inputComponentStyles,
+        inputFontStyles,
+        inputColorStyles,
+        inputTitleStyles,
+        inputIconStyles,
+        inputSearchStyles,
+        inputDescriptionStyles,
+    ]; }
     _handleInputBase(e, eventName) {
         this.dispatchEvent(new CustomEvent(eventName, {
             detail: {
@@ -92,9 +101,8 @@ let TuixInput = class TuixInput extends LitElement {
     </div>`;
     }
     _updateLetterCounter() {
-        var _a;
         if (this.maxlength != undefined && this.type === InputType.TEXT_AREA) {
-            this._letterCounter = Number((_a = this._inputElement.value) === null || _a === void 0 ? void 0 : _a.length);
+            this._letterCounter = Number(this._inputElement.value?.length);
         }
     }
     _getInputTextFeatureTemplate() {
@@ -244,7 +252,6 @@ let TuixInput = class TuixInput extends LitElement {
     </tuix-icon>`;
     }
     _getDescriptionTemplate() {
-        var _a;
         const isValidDescriptionType = this._hasValidDescriptionType();
         if (!isValidDescriptionType) {
             return html `<div></div>`;
@@ -259,7 +266,7 @@ let TuixInput = class TuixInput extends LitElement {
         return html `<div class="t-input-description">
       ${this._getIconDescriptionTemplate()}
       <span
-        >${(_a = this.description) !== null && _a !== void 0 ? _a : defaultDescription[this.descriptionType]}</span
+        >${this.description ?? defaultDescription[this.descriptionType]}</span
       >
     </div>`;
     }
@@ -312,16 +319,6 @@ let TuixInput = class TuixInput extends LitElement {
         }
     }
 };
-TuixInput.styles = [
-    hostStyles,
-    inputComponentStyles,
-    inputFontStyles,
-    inputColorStyles,
-    inputTitleStyles,
-    inputIconStyles,
-    inputSearchStyles,
-    inputDescriptionStyles,
-];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TuixInput.prototype, "disabled", void 0);
@@ -371,4 +368,3 @@ TuixInput = __decorate([
     customElement('tuix-input')
 ], TuixInput);
 export { TuixInput };
-//# sourceMappingURL=TuixInput.js.map

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

@@ -293,4 +293,3 @@ export const inputDescriptionStyles = css `
     gap: 0.5rem;
   }
 `;
-//# sourceMappingURL=TuixInput.styles.js.map

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

@@ -39,4 +39,3 @@ export const IconDescriptionColorDark = {
     [DescriptionType.SUCCESS]: DarkPalette.SUCCESS,
     [DescriptionType.LOADING]: DarkPalette.PRIMARY_300,
 };
-//# sourceMappingURL=tuix-input.enums.js.map

package/dist/src/tuix-input/interfaces/tuix-input.interface.d.ts

@@ -1,13 +1,14 @@
 import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
-import { DetailValue } from '../../utils/interfaces/detail-value.interface.js';
+import { type DetailValue } from '../../utils/interfaces/detail-value.interface.js';
 import { InputIconLocation } from '../enums/tuix-input.enums.js';
 import { DarkPalette } from '../../utils/darkColors.js';
 import { Palette } from '../../utils/colors.js';
-export declare enum InputState {
-    INACTIVE = "inactive",
-    ACTIVE = "active",
-    DISABLED = "disabled"
-}
+export declare const InputState: {
+    INACTIVE: string;
+    ACTIVE: string;
+    DISABLED: string;
+};
+export type InputState = (typeof InputState)[keyof typeof InputState];
 export interface FormatIconSetParams {
     iconName: IconName;
     colorByState: Record<InputState, DarkPalette | Palette>;

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

@@ -1,7 +1,5 @@
-export var InputState;
-(function (InputState) {
-    InputState["INACTIVE"] = "inactive";
-    InputState["ACTIVE"] = "active";
-    InputState["DISABLED"] = "disabled";
-})(InputState || (InputState = {}));
-//# sourceMappingURL=tuix-input.interface.js.map
+export const InputState = {
+    INACTIVE: 'inactive',
+    ACTIVE: 'active',
+    DISABLED: 'disabled',
+};

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

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { MainVariant } from '../utils/mainVariant.enum.js';
 import { LinkTarget } from './enums/linkTarget.enum.js';
 export declare class TuixLink extends LitElement {

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

@@ -14,6 +14,7 @@ let TuixLink = class TuixLink extends LitElement {
         this.disabled = false;
         this.dark = false;
     }
+    static { this.styles = [linkStyles, linkFontStyles]; }
     _getClassMap() {
         return {
             link: true,
@@ -49,7 +50,6 @@ let TuixLink = class TuixLink extends LitElement {
         }
     }
 };
-TuixLink.styles = [linkStyles, linkFontStyles];
 __decorate([
     property({ type: String })
 ], TuixLink.prototype, "href", void 0);
@@ -69,4 +69,3 @@ TuixLink = __decorate([
     customElement('tuix-link')
 ], TuixLink);
 export { TuixLink };
-//# sourceMappingURL=TuixLink.js.map

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

@@ -53,4 +53,3 @@ export const linkStyles = css `
   }  
 `)}
 `;
-//# sourceMappingURL=TuixLink.styles.js.map

package/dist/src/tuix-link/enums/linkTarget.enum.js

@@ -5,4 +5,3 @@ export var LinkTarget;
     LinkTarget["PARENT"] = "_parent";
     LinkTarget["TOP"] = "_top";
 })(LinkTarget || (LinkTarget = {}));
-//# sourceMappingURL=linkTarget.enum.js.map

package/dist/src/tuix-modal/TuixModal.js

@@ -12,6 +12,7 @@ let TuixModal = class TuixModal extends LitElement {
         this.dark = false;
         this.scrollable = false;
     }
+    static { this.styles = [commonModalStyles, mobileModalStyles]; }
     _onClose() {
         this.visible = false;
         this.dispatchEvent(new CustomEvent('on-close', { bubbles: true }));
@@ -47,7 +48,6 @@ let TuixModal = class TuixModal extends LitElement {
     `;
     }
 };
-TuixModal.styles = [commonModalStyles, mobileModalStyles];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TuixModal.prototype, "visible", void 0);
@@ -61,4 +61,3 @@ TuixModal = __decorate([
     customElement('tuix-modal')
 ], TuixModal);
 export { TuixModal };
-//# sourceMappingURL=TuixModal.js.map

package/dist/src/tuix-modal/TuixModal.styles.js

@@ -53,4 +53,3 @@ export const mobileModalStyles = css `
     }
   }
 `;
-//# sourceMappingURL=TuixModal.styles.js.map

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

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

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

@@ -12,6 +12,7 @@ let TuixPaper = class TuixPaper extends LitElement {
         this.borderRadius = BorderRadiusPaper.NONE;
         this.dark = false;
     }
+    static { this.styles = [paperStyles]; }
     _getOptionalClasses() {
         const variantClass = `variant_${this.elevation}`;
         const darkClass = `dark_${this.elevation}`;
@@ -30,7 +31,6 @@ let TuixPaper = class TuixPaper extends LitElement {
     </div>`;
     }
 };
-TuixPaper.styles = [paperStyles];
 __decorate([
     property({ type: PaperElevation })
 ], TuixPaper.prototype, "elevation", void 0);
@@ -44,4 +44,3 @@ TuixPaper = __decorate([
     customElement('tuix-paper')
 ], TuixPaper);
 export { TuixPaper };
-//# sourceMappingURL=TuixPaper.js.map

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

@@ -28,4 +28,3 @@ export const paperStyles = css `
   }
 `)}
 `;
-//# sourceMappingURL=TuixPaper.styles.js.map

package/dist/src/tuix-paper/enums/tuix-paper.enum.js

@@ -13,4 +13,3 @@ export var BorderRadiusPaper;
     BorderRadiusPaper["MEDIUM"] = "10px";
     BorderRadiusPaper["STRONG"] = "20px";
 })(BorderRadiusPaper || (BorderRadiusPaper = {}));
-//# sourceMappingURL=tuix-paper.enum.js.map

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums.js';
-import { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface.js';
+import type { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface.js';
 export declare class TuixRadioButton extends LitElement {
     static styles: import("lit").CSSResult[];
     disabled: boolean;

package/dist/src/tuix-radio-button/TuixRadioButton.js

@@ -15,6 +15,13 @@ let TuixRadioButton = class TuixRadioButton extends LitElement {
         this.labelSide = CheckboxLabelSide.RIGHT;
         this.selectedOption = null;
     }
+    static { this.styles = [
+        radioHostStyles,
+        radioButtonContainerStyles,
+        radioButtonStyles,
+        radioButtonInnerStyles,
+        radioButtonLabelStyles,
+    ]; }
     _onRadioButtonChange(event) {
         this.dispatchEvent(new CustomEvent('change', {
             detail: {
@@ -64,13 +71,6 @@ let TuixRadioButton = class TuixRadioButton extends LitElement {
         return html `${this.options.map((option, index) => this._formatTemplate(option, index))}`;
     }
 };
-TuixRadioButton.styles = [
-    radioHostStyles,
-    radioButtonContainerStyles,
-    radioButtonStyles,
-    radioButtonInnerStyles,
-    radioButtonLabelStyles,
-];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TuixRadioButton.prototype, "disabled", void 0);
@@ -93,4 +93,3 @@ TuixRadioButton = __decorate([
     customElement('tuix-radio-button')
 ], TuixRadioButton);
 export { TuixRadioButton };
-//# sourceMappingURL=TuixRadioButton.js.map

package/dist/src/tuix-radio-button/TuixRadioButton.styles.js

@@ -133,4 +133,3 @@ export const radioButtonLabelStyles = css `
     margin-left: 0;
   }
 `;
-//# sourceMappingURL=TuixRadioButton.styles.js.map

package/dist/src/tuix-radio-button/interfaces/tuix-radio-button.interface.d.ts

@@ -1,3 +1,3 @@
-import { DetailValue } from '../../utils/interfaces/detail-value.interface.js';
+import { type DetailValue } from '../../utils/interfaces/detail-value.interface.js';
 export type TuixRadioButtonOption = string | number;
 export type CustomEventTuixRadioButton<T extends TuixRadioButtonOption = TuixRadioButtonOption> = CustomEvent<DetailValue<T>>;

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

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

package/dist/src/tuix-table/TuixTable.js

@@ -22,9 +22,8 @@ let TuixTable = class TuixTable extends LitElement {
         this._isMobileView = false;
         this._headerPercents = [];
         this._onScreenSizeChange = () => {
-            var _a, _b;
-            this._isTabletView = !!((_a = this._mqTablet) === null || _a === void 0 ? void 0 : _a.matches);
-            this._isMobileView = !!((_b = this._mqMobile) === null || _b === void 0 ? void 0 : _b.matches);
+            this._isTabletView = !!this._mqTablet?.matches;
+            this._isMobileView = !!this._mqMobile?.matches;
         };
         this._nextPage = () => {
             if (this.currentPage === this.totalPages)
@@ -65,6 +64,7 @@ let TuixTable = class TuixTable extends LitElement {
             }));
         };
     }
+    static { this.styles = [tableStyles, threeDots]; }
     connectedCallback() {
         super.connectedCallback();
         this._mqTablet = window.matchMedia(`(max-width:${ScreenSizes.TABLET}px)`);
@@ -75,26 +75,22 @@ let TuixTable = class TuixTable extends LitElement {
         this._computeHeaderPercents();
     }
     disconnectedCallback() {
-        var _a, _b;
         super.disconnectedCallback();
-        (_a = this._mqTablet) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this._onScreenSizeChange);
-        (_b = this._mqMobile) === null || _b === void 0 ? void 0 : _b.removeEventListener('change', this._onScreenSizeChange);
+        this._mqTablet?.removeEventListener('change', this._onScreenSizeChange);
+        this._mqMobile?.removeEventListener('change', this._onScreenSizeChange);
     }
     updated(changedProps) {
         if (changedProps.has('headers'))
             this._computeHeaderPercents();
     }
     get _effectiveTotalItems() {
-        var _a;
-        return (_a = this.totalItems) !== null && _a !== void 0 ? _a : this.data.length;
+        return this.totalItems ?? this.data.length;
     }
     get _effectiveCurrentPage() {
-        var _a;
-        return (_a = this.currentPage) !== null && _a !== void 0 ? _a : 1;
+        return this.currentPage ?? 1;
     }
     get _effectivePageSize() {
-        var _a;
-        return (_a = this.currentSize) !== null && _a !== void 0 ? _a : this.pageSizeOptions[0];
+        return this.currentSize ?? this.pageSizeOptions[0];
     }
     get totalPages() {
         const denom = this._effectivePageSize;
@@ -323,7 +319,6 @@ let TuixTable = class TuixTable extends LitElement {
             : html `${this._renderTable()}`;
     }
 };
-TuixTable.styles = [tableStyles, threeDots];
 __decorate([
     property({ type: Boolean })
 ], TuixTable.prototype, "paginated", void 0);
@@ -370,4 +365,3 @@ TuixTable = __decorate([
     customElement('tuix-table')
 ], TuixTable);
 export { TuixTable };
-//# sourceMappingURL=TuixTable.js.map

package/dist/src/tuix-table/TuixTable.styles.js

@@ -195,4 +195,3 @@ export const threeDots = css `
     padding: 16px 0;
   }
 `;
-//# sourceMappingURL=TuixTable.styles.js.map

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

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

package/dist/src/tuix-text/TuixText.js

@@ -26,6 +26,18 @@ let TuixText = class TuixText extends LitElement {
             };
         };
     }
+    static { this.styles = [
+        css `
+      ${unsafeCSS(slottedClassName('text'))} {
+        font-family: 'Rubik', sans-serif;
+        display: inline;
+        margin: 0;
+      }
+    `,
+        textStyles,
+        linkFontStyles,
+        buttonSizeStyles,
+    ]; }
     _getTextColor() {
         const colorMap = this.dark ? colorTextDark : colorText;
         return colorMap[this.color || TextVariant.PRIMARY];
@@ -39,18 +51,6 @@ let TuixText = class TuixText extends LitElement {
     </div>`;
     }
 };
-TuixText.styles = [
-    css `
-      ${unsafeCSS(slottedClassName('text'))} {
-        font-family: 'Rubik', sans-serif;
-        display: inline;
-        margin: 0;
-      }
-    `,
-    textStyles,
-    linkFontStyles,
-    buttonSizeStyles,
-];
 __decorate([
     property({ type: TextSize })
 ], TuixText.prototype, "size", void 0);
@@ -64,4 +64,3 @@ TuixText = __decorate([
     customElement('tuix-text')
 ], TuixText);
 export { TuixText };
-//# sourceMappingURL=TuixText.js.map

package/dist/src/tuix-text/TuixText.styles.js

@@ -156,4 +156,3 @@ export const textStyles = css `
   }
 `)}
 `;
-//# sourceMappingURL=TuixText.styles.js.map

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

@@ -61,4 +61,3 @@ export const colorTextDark = {
     [TextVariant.DARK_BLUE]: DarkPalette.PRIMARY_800,
     [TextVariant.TITLE_BLUE]: DarkPalette.PRIMARY_300,
 };
-//# sourceMappingURL=tuix-text.enums.js.map

package/dist/src/tuix-toast/TuixToast.d.ts

@@ -1,5 +1,5 @@
-import { LitElement, PropertyValueMap } from 'lit';
-import { ToastType, ToastTypeExcludingNone } from './enums/tuix-toast.enums.js';
+import { LitElement, type PropertyValueMap } from 'lit';
+import { ToastType, type ToastTypeExcludingNone } from './enums/tuix-toast.enums.js';
 export declare class TuixToast extends LitElement {
     static styles: import("lit").CSSResult[];
     type: ToastType;

package/dist/src/tuix-toast/TuixToast.js

@@ -41,6 +41,7 @@ let TuixToast = class TuixToast extends LitElement {
     `;
         };
     }
+    static { this.styles = [commonToastStyles, tabletToastStyles, mobileToastStyles]; }
     updated(changedProperties) {
         super.updated(changedProperties);
         if (this.type === ToastType.NONE || this.visibilityDuration === 0)
@@ -81,7 +82,6 @@ let TuixToast = class TuixToast extends LitElement {
     `;
     }
 };
-TuixToast.styles = [commonToastStyles, tabletToastStyles, mobileToastStyles];
 __decorate([
     property({ type: ToastType, reflect: true })
 ], TuixToast.prototype, "type", void 0);
@@ -98,4 +98,3 @@ TuixToast = __decorate([
     customElement('tuix-toast')
 ], TuixToast);
 export { TuixToast };
-//# sourceMappingURL=TuixToast.js.map

package/dist/src/tuix-toast/TuixToast.styles.js

@@ -41,4 +41,3 @@ export const mobileToastStyles = css `
     }
   }
 `;
-//# sourceMappingURL=TuixToast.styles.js.map

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

@@ -57,4 +57,3 @@ export const iconDarkPropertiesMap = {
         color: DarkPalette.SUCCESS,
     },
 };
-//# sourceMappingURL=tuix-toast.enums.js.map

package/dist/src/tuix-toggle-button/TuixToggleButton.js

@@ -14,6 +14,13 @@ let TuixToggleButton = class TuixToggleButton extends LitElement {
         this.label = '';
         this.labelSide = CheckboxLabelSide.RIGHT;
     }
+    static { this.styles = [
+        toggleButtonHostStyles,
+        toggleButtonContainerStyles,
+        toggleButtonCheckmarkStyles,
+        toggleButtonInnerStyles,
+        toggleButtonLabelStyles,
+    ]; }
     _onToggleButtonChange(event) {
         this.dispatchEvent(new CustomEvent('change', {
             detail: {
@@ -57,13 +64,6 @@ let TuixToggleButton = class TuixToggleButton extends LitElement {
     </label>`;
     }
 };
-TuixToggleButton.styles = [
-    toggleButtonHostStyles,
-    toggleButtonContainerStyles,
-    toggleButtonCheckmarkStyles,
-    toggleButtonInnerStyles,
-    toggleButtonLabelStyles,
-];
 __decorate([
     property({ type: Boolean })
 ], TuixToggleButton.prototype, "checked", void 0);
@@ -83,4 +83,3 @@ TuixToggleButton = __decorate([
     customElement('tuix-toggle-button')
 ], TuixToggleButton);
 export { TuixToggleButton };
-//# sourceMappingURL=TuixToggleButton.js.map

package/dist/src/tuix-toggle-button/TuixToggleButton.styles.js

@@ -132,4 +132,3 @@ export const toggleButtonLabelStyles = css `
     margin-left: 0;
   }
 `;
-//# sourceMappingURL=TuixToggleButton.styles.js.map

package/dist/src/tuix-toggle-button/interfaces/tuix-toggle.interface.d.ts

@@ -1,2 +1,2 @@
-import { CustomEventTuixCheckbox } from '../../tuix-checkbox/interfaces/tuix-checkbox.interface.js';
+import { type CustomEventTuixCheckbox } from '../../tuix-checkbox/interfaces/tuix-checkbox.interface.js';
 export type CustomEventTuixToggle = CustomEventTuixCheckbox;

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

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

package/dist/src/utils/colors.js

@@ -28,4 +28,3 @@ export var Palette;
     Palette["SECTION_BG"] = "#FAFAFA";
     Palette["SHADOW"] = "rgba(66, 79, 101, 0.16)";
 })(Palette || (Palette = {}));
-//# sourceMappingURL=colors.js.map

package/dist/src/utils/darkColors.js

@@ -30,4 +30,3 @@ export var DarkPalette;
     DarkPalette["ELEVATION_3"] = "#1D1E24";
     DarkPalette["ELEVATION_4"] = "#212128";
 })(DarkPalette || (DarkPalette = {}));
-//# sourceMappingURL=darkColors.js.map

package/dist/src/utils/hex-rgb.js

@@ -13,4 +13,3 @@ export const hexToRgb = (hex) => {
             b: 0,
         };
 };
-//# sourceMappingURL=hex-rgb.js.map

package/dist/src/utils/interfaces/detail-value.interface.js

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

package/dist/src/utils/mainVariant.enum.js

@@ -3,4 +3,3 @@ export var MainVariant;
     MainVariant["PRIMARY"] = "primary";
     MainVariant["SECONDARY"] = "secondary";
 })(MainVariant || (MainVariant = {}));
-//# sourceMappingURL=mainVariant.enum.js.map

package/dist/src/utils/screenSizes.enum.js

@@ -3,4 +3,3 @@ export var ScreenSizes;
     ScreenSizes[ScreenSizes["TABLET"] = 1280] = "TABLET";
     ScreenSizes[ScreenSizes["MOBILE"] = 640] = "MOBILE";
 })(ScreenSizes || (ScreenSizes = {}));
-//# sourceMappingURL=screenSizes.enum.js.map

package/dist/src/utils/slottedClassName.js

@@ -1,2 +1 @@
 export default (className) => `.${className}, .${className} ::slotted(*)`;
-//# sourceMappingURL=slottedClassName.js.map