tuix-webcomponents 0.0.22 → 0.0.24

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

@@ -24,29 +24,73 @@ export var IconName;
     IconName["TRIANGLE_EXCLAMATION"] = "triangle-exclamation";
     IconName["CIRCLE_X"] = "circle-x";
     IconName["LOADER"] = "loader";
+    IconName["LOADER_CIRCLE"] = "loader-circle";
     IconName["CIRCLE_CHECK"] = "circle-check";
     IconName["CHEVRON_DOWN"] = "chevron-down";
     IconName["CHEVRON_UP"] = "chevron-up";
+    IconName["CHEVRON_LEFT"] = "chevron-left";
+    IconName["CHEVRON_RIGHT"] = "chevron-right";
+    IconName["CHECK"] = "check";
+    IconName["NAV_HAMBURGUER"] = "nav-hamburguer";
+    IconName["SUN"] = "sun";
+    IconName["MOON"] = "moon";
+    IconName["BOOKMARK"] = "bookmark";
+    IconName["UPLOAD"] = "upload";
+    IconName["DOWNLOAD"] = "download";
+    IconName["MAP_PIN"] = "map-pin";
+    IconName["PHONE"] = "phone";
+    IconName["MAIL"] = "mail";
+    IconName["MAILS"] = "mails";
+    IconName["LAYERS"] = "layers";
+    IconName["SEND"] = "send";
+    IconName["FILE"] = "file";
+    IconName["FORMAT_LIST"] = "format-list";
+    IconName["SAVE"] = "save";
+    IconName["SQUARE_CODE"] = "square-code";
+    IconName["BRACES"] = "braces";
+    IconName["ADD_MAIL"] = "add-mail";
+    IconName["MAIL_LOGO"] = "mail-logo";
+    IconName["BUILDING"] = "building";
+    IconName["CODE"] = "code";
+    IconName["USER_PLUS"] = "user-plus";
+    IconName["FACEBOOK"] = "facebook";
+    IconName["TWITTER"] = "twitter";
+    IconName["LINKEDIN"] = "linkedin";
+    IconName["SHARE"] = "share";
+    IconName["COPY"] = "copy";
+    IconName["GOOGLE"] = "google";
+    IconName["BELL"] = "bell";
+    IconName["GEAR"] = "gear";
+    IconName["LOGOUT"] = "logout";
+    IconName["CIRCLE_EXCLAMATION"] = "circle-exclamation";
+    IconName["CAMERA"] = "camera";
+    IconName["PENCIL"] = "pencil";
+    IconName["X"] = "x";
+    IconName["PLUS"] = "plus";
+    IconName["INVOICE"] = "invoice";
+    IconName["DELETE"] = "delete";
+    IconName["TRIANGLE_ARROW_DOWN"] = "triangle-arrow-down";
+    IconName["USERS"] = "users";
+    IconName["CLOCK"] = "clock";
+    IconName["CHECK_CLOCK"] = "check-clock";
+    IconName["GLOBE"] = "globe";
+    IconName["CALENDAR"] = "calendar";
+    IconName["STATS"] = "stats";
+    IconName["HOLIDAYS"] = "holidays";
+    IconName["TRENDING_UP"] = "trending-up";
+    IconName["ARCHIVE"] = "archive";
+    IconName["ACCESS_TOKEN"] = "access-token";
+    IconName["RESIZE"] = "resize";
+    IconName["CHAT"] = "chat";
+    IconName["MESSAGE_CIRCLE"] = "message-circle";
+    IconName["BOOK"] = "book";
+    IconName["MORE_HORIZONTAL"] = "more-horizontal";
+    IconName["BOT"] = "bot";
+    IconName["SCROLL_DOWN"] = "scroll-down";
+    IconName["PLAY"] = "play";
+    IconName["EXTERNAL_LINK"] = "external-link";
+    IconName["TRIANGLE_RIGHT"] = "triangle-right";
+    IconName["FILE_PLUS"] = "file-plus";
+    IconName["FILE_TEXT"] = "file-text";
+    IconName["HIGHLIGHT"] = "highlight";
 })(IconName || (IconName = {}));
-export var IconColor;
-(function (IconColor) {
-    IconColor["primary_50"] = "#F2F2F8";
-    IconColor["primary_100"] = "#D7D7EA";
-    IconColor["primary_200"] = "#BEC0DA";
-    IconColor["primary"] = "#585A9D";
-    IconColor["primary_700"] = "#494B83";
-    IconColor["primary_900"] = "#33355B";
-    IconColor["secondary"] = "#BBADFF";
-    IconColor["white"] = "#FFFFFF";
-    IconColor["black"] = "#000000";
-    IconColor["neutral_200"] = "#C9C8D3";
-    IconColor["neutral_600"] = "#8A8894";
-    IconColor["success"] = "#439F6E";
-    IconColor["validation"] = "#FFB82E";
-    IconColor["validation_50"] = "FFFBF4";
-    IconColor["validation_200"] = "FFEAC1";
-    IconColor["error"] = "#F93232";
-    IconColor["error_50"] = "#FFF5F5";
-    IconColor["error_200"] = "#FFD8D8";
-})(IconColor || (IconColor = {}));
-//# sourceMappingURL=tuix-icon.enums.js.map

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

@@ -1,14 +1,9 @@
-import { LitElement, TemplateResult } from 'lit';
-import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
-import '../tuix-icon/TuixIcon.js';
-import { MainVariant } from '../utils/mainVariant.enum';
-export declare class TuixIconButton extends LitElement {
+import { type TemplateResult } from 'lit';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton.js';
+export declare class TuixIconButton extends TuixBaseButton {
     static styles: import("lit").CSSResult[];
-    variant: MainVariant;
-    disabled: boolean;
-    icon?: IconName;
-    private _getIconColor;
-    private _handleClick;
-    private _iconTemplate;
-    protected render(): TemplateResult;
+    icon: IconName;
+    protected _updateIconColor(): void;
+    protected _buttonContent(): TemplateResult;
 }

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

@@ -1,53 +1,21 @@
 import { __decorate } from "tslib";
-import { LitElement, css, html, nothing } from 'lit';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { css, html } from 'lit';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { customElement, property } from 'lit/decorators.js';
-import '../tuix-icon/TuixIcon.js';
-import { palette } from '../utils/colors';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { buttonColorStyles } from '../tuix-button/TuixButton.styles';
-import { buttonTextColor } from '../tuix-button/enums/tuix-button.enums';
-import { MainVariant } from '../utils/mainVariant.enum';
-let TuixIconButton = class TuixIconButton extends LitElement {
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles.js';
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton.js';
+let TuixIconButton = class TuixIconButton extends TuixBaseButton {
     constructor() {
         super(...arguments);
-        this.variant = MainVariant.PRIMARY;
-        this.disabled = false;
+        this.icon = IconName.ARROW_DOWN;
     }
-    _getIconColor() {
-        let iconColor = '';
-        iconColor = buttonTextColor[this.variant];
-        if (this.disabled)
-            iconColor = palette.primary_200;
-        return iconColor;
-    }
-    _handleClick() {
-        this.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-    }
-    _iconTemplate(iconName) {
-        return html `<tuix-icon
-      size="${IconSizeVariant.MEDIUM}"
-      name="${iconName}"
-      color="${this._getIconColor()}"
-    ></tuix-icon>`;
-    }
-    render() {
-        return html `
-      <button
-        @click=${this._handleClick}
-        class="button ${this.variant}"
-        ?disabled="${this.disabled}"
-      >
-        ${this.icon ? this._iconTemplate(this.icon) : nothing}
-      </button>
-    `;
-    }
-};
-TuixIconButton.styles = [
-    css `
+    static { this.styles = [
+        css `
       .button {
         padding: 16px;
         border-radius: 4px;
+        border: none;
       }
 
       @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
@@ -62,14 +30,18 @@ TuixIconButton.styles = [
         }
       }
     `,
-    buttonColorStyles,
-];
-__decorate([
-    property({ type: MainVariant })
-], TuixIconButton.prototype, "variant", void 0);
-__decorate([
-    property({ type: Boolean })
-], TuixIconButton.prototype, "disabled", void 0);
+        hostButtonStyles,
+        buttonColorStyles,
+    ]; }
+    _updateIconColor() {
+        if (!this.icon)
+            return;
+        this.iconColor = this._getTextColor();
+    }
+    _buttonContent() {
+        return html `${this._iconTemplate(this.icon, IconSizeVariant.MEDIUM)}`;
+    }
+};
 __decorate([
     property({ type: IconName })
 ], TuixIconButton.prototype, "icon", void 0);
@@ -77,4 +49,3 @@ TuixIconButton = __decorate([
     customElement('tuix-icon-button')
 ], TuixIconButton);
 export { TuixIconButton };
-//# sourceMappingURL=TuixIconButton.js.map

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

@@ -1,30 +1,33 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, type TemplateResult, CSSResult, type PropertyValueMap } from 'lit';
 import '../tuix-icon/TuixIcon.js';
-import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { DescriptionType, InputType } from './enums/tuix-input.enums.js';
 export declare class TuixInput extends LitElement {
-    static styles: import("lit").CSSResult[];
+    _inputId: string;
+    static styles: CSSResult[];
     disabled: boolean;
     iconRight?: IconName;
     value: string;
     placeholder: string;
     title: string;
     type: InputType;
-    maxlength: undefined;
-    description: undefined;
+    maxlength?: number;
+    description?: string;
     descriptionType: DescriptionType;
     dark: boolean;
     readonly: boolean;
+    autofocus: boolean;
     private _inputElement;
     private _type;
     private _letterCounter;
     private _previousType;
-    private _preivousValue;
+    private _previousValue;
     private _generalIconColorsLight;
     private _generalIconColorsDark;
     private _handleInputBase;
+    private _handleClickOnInput;
     private _handleInput;
-    private _handleChange;
+    private _handleBlur;
     private _handlePasswordIconClick;
     private _formatIconSet;
     private _updateLetterCounter;
@@ -34,6 +37,8 @@ export declare class TuixInput extends LitElement {
     private _getFeatureTemplateByInputType;
     private _getInputElementClasses;
     private _getInputContainerClasses;
+    private _getMainContainerClasses;
+    private _setIdInput;
     private _getInputTemplate;
     private _getLetterCounterTemplate;
     private _hasLetterCounter;
@@ -43,4 +48,5 @@ export declare class TuixInput extends LitElement {
     private _hasValidDescriptionType;
     private _getDescriptionContainerTemplate;
     protected render(): TemplateResult;
+    protected updated(changedProperties: PropertyValueMap<unknown>): void;
 }

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

@@ -1,56 +1,80 @@
 import { __decorate } from "tslib";
-import { LitElement, html, nothing } from 'lit';
+import { LitElement, html, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import '../tuix-icon/TuixIcon.js';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
-import { palette } from '../utils/colors.js';
-import { darkPalette } from '../utils/darkColors.js';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../utils/colors.js';
+import { DarkPalette } from '../utils/darkColors.js';
 import { hostStyles, inputColorStyles, inputComponentStyles, inputDescriptionStyles, inputFontStyles, inputIconStyles, inputSearchStyles, inputTitleStyles, } from './TuixInput.styles.js';
 import { DescriptionType, IconByDescriptionType, IconDescriptionColorDark, IconDescriptionColorLight, InputIconLocation, InputType, } from './enums/tuix-input.enums.js';
+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;
         this.value = '';
         this.placeholder = '';
         this.title = '';
         this.type = InputType.TEXT;
-        this.maxlength = undefined;
-        this.description = undefined;
         this.descriptionType = DescriptionType.TEXT;
         this.dark = false;
         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._preivousValue = '';
+        this._previousValue = '';
         this._generalIconColorsLight = {
-            inactive: palette.black,
-            active: palette.main,
-            disabled: palette.primary_300,
+            [InputState.INACTIVE]: Palette.BLACK,
+            [InputState.ACTIVE]: Palette.MAIN,
+            [InputState.DISABLED]: Palette.PRIMARY_300,
         };
         this._generalIconColorsDark = {
-            inactive: darkPalette.primary_100,
-            active: darkPalette.main,
-            disabled: darkPalette.primary_800,
+            [InputState.INACTIVE]: DarkPalette.PRIMARY_100,
+            [InputState.ACTIVE]: DarkPalette.MAIN,
+            [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: {
-                value: e.target.value,
+                // The listener is on the input itself, so the target is always one
+                // of the two; the fallback keeps the detail a string, which is what
+                // `CustomEventTuixInput` promises, rather than `false`.
+                value: e.target instanceof HTMLInputElement ||
+                    e.target instanceof HTMLTextAreaElement
+                    ? e.target.value
+                    : '',
             },
             bubbles: true,
         }));
     }
+    _handleClickOnInput() {
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent('on-click', {
+            bubbles: true,
+        }));
+    }
     _handleInput(e) {
-        this._handleInputBase(e, 'input-single');
+        this._handleInputBase(e, 'on-change');
         this._updateLetterCounter();
     }
-    _handleChange(e) {
-        this._handleInputBase(e, 'change');
+    _handleBlur(e) {
+        this._handleInputBase(e, 'on-blur');
     }
     _handlePasswordIconClick() {
         if (this._type === InputType.PASSWORD) {
@@ -81,9 +105,8 @@ let TuixInput = class TuixInput extends LitElement {
     </div>`;
     }
     _updateLetterCounter() {
-        var _a;
         if (this.maxlength != undefined && this.type === InputType.TEXT_AREA) {
-            this._letterCounter = (_a = this._inputElement.value) === null || _a === void 0 ? void 0 : _a.length;
+            this._letterCounter = Number(this._inputElement.value?.length);
         }
     }
     _getInputTextFeatureTemplate() {
@@ -98,14 +121,14 @@ let TuixInput = class TuixInput extends LitElement {
     }
     _getInputSearchFeatureTemplate() {
         const searchIconColorsLight = {
-            inactive: palette.black,
-            active: palette.black,
-            disabled: palette.primary_300,
+            [InputState.INACTIVE]: Palette.BLACK,
+            [InputState.ACTIVE]: Palette.BLACK,
+            [InputState.DISABLED]: Palette.PRIMARY_300,
         };
         const searchIconColorsDark = {
-            inactive: darkPalette.primary_100,
-            active: darkPalette.primary_100,
-            disabled: darkPalette.primary_800,
+            [InputState.INACTIVE]: DarkPalette.PRIMARY_100,
+            [InputState.ACTIVE]: DarkPalette.PRIMARY_100,
+            [InputState.DISABLED]: DarkPalette.PRIMARY_800,
         };
         return html `${this._formatIconSet({
             iconName: IconName.SEARCH,
@@ -142,6 +165,7 @@ let TuixInput = class TuixInput extends LitElement {
             : false;
         return {
             't-input': true,
+            't-textarea': this.type === InputType.TEXT_AREA,
             'with-title': !!this.title,
             'with-icon-right': hasIconRight,
             [`with-${this.descriptionType}`]: this.descriptionType !== DescriptionType.TEXT,
@@ -153,8 +177,17 @@ let TuixInput = class TuixInput extends LitElement {
             't-textarea-container': this.type === InputType.TEXT_AREA,
         };
     }
+    _getMainContainerClasses() {
+        return {
+            't-textarea-main-container': this.type === InputType.TEXT_AREA,
+        };
+    }
+    _setIdInput() {
+        return uuidv4();
+    }
     _getInputTemplate() {
         return html `<input
+      id=${this._inputId}
       type="text"
       class="${classMap(this._getInputElementClasses())}"
       ?disabled="${this.disabled}"
@@ -164,10 +197,14 @@ let TuixInput = class TuixInput extends LitElement {
       placeholder="${this.placeholder || ' '}"
       maxlength="${this.maxlength}"
       @input="${this._handleInput}"
-      @change="${this._handleChange}"
+      @blur="${this._handleBlur}"
     >
     </input>
-    ${this.title ? html `<div class="t-title">${this.title}</div>` : nothing}
+    ${this.title
+            ? html `<label for=${this._inputId} class="t-title"
+            >${this.title}</label
+          >`
+            : nothing}
     ${this._getFeatureTemplateByInputType()}
     `;
     }
@@ -188,6 +225,7 @@ let TuixInput = class TuixInput extends LitElement {
     }
     _getTextAreaTemplate() {
         return html `<textarea
+        id="${this._inputId}"
         class="${classMap(this._getInputElementClasses())}"
         ?disabled="${this.disabled}"
         ?readonly="${this.readonly}"
@@ -195,10 +233,12 @@ let TuixInput = class TuixInput extends LitElement {
         placeholder="${this.placeholder}"
         maxlength="${this.maxlength}"
         @input="${this._handleInput}"
-        @change="${this._handleChange}"
+        @blur="${this._handleBlur}"
       ></textarea>
       ${this.title
-            ? html `<div class="t-title">${this.title}</div>`
+            ? html `<label for=${this._inputId} class="t-title"
+            >${this.title}</label
+          >`
             : nothing} `;
     }
     _getIconDescriptionTemplate() {
@@ -216,7 +256,6 @@ let TuixInput = class TuixInput extends LitElement {
     </tuix-icon>`;
     }
     _getDescriptionTemplate() {
-        var _a;
         const isValidDescriptionType = this._hasValidDescriptionType();
         if (!isValidDescriptionType) {
             return html `<div></div>`;
@@ -231,7 +270,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>`;
     }
@@ -256,30 +295,36 @@ let TuixInput = class TuixInput extends LitElement {
             this._previousType = this.type;
             this._type = this.type;
         }
-        if (this._preivousValue !== this.value) {
-            this._preivousValue = this.value;
+        if (this._previousValue !== this.value) {
+            this._previousValue = this.value;
             this._letterCounter = this.value.length;
         }
-        return html `<div class="${classMap(this._getInputContainerClasses())}">
+        return html `<div class="${classMap(this._getMainContainerClasses())}">
+      <div
+        class="${classMap(this._getInputContainerClasses())}"
+        @click="${this._handleClickOnInput}"
+      >
         ${this.type === InputType.TEXT_AREA
             ? this._getTextAreaTemplate()
             : this._getInputTemplate()}
       </div>
-      ${this._getDescriptionContainerTemplate()} `;
+      ${this._getDescriptionContainerTemplate()}
+    </div>`;
+    }
+    updated(changedProperties) {
+        for (const [propName] of changedProperties) {
+            if (this.disabled || this.readonly)
+                break;
+            if (String(propName) !== 'autofocus')
+                continue;
+            if (this.autofocus) {
+                this._inputElement.focus();
+            }
+        }
     }
 };
-TuixInput.styles = [
-    hostStyles,
-    inputComponentStyles,
-    inputFontStyles,
-    inputColorStyles,
-    inputTitleStyles,
-    inputIconStyles,
-    inputSearchStyles,
-    inputDescriptionStyles,
-];
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixInput.prototype, "disabled", void 0);
 __decorate([
     property({ type: IconName })
@@ -297,7 +342,7 @@ __decorate([
     property({ type: InputType })
 ], TuixInput.prototype, "type", void 0);
 __decorate([
-    property({ type: Number, reflect: true })
+    property({ type: Number })
 ], TuixInput.prototype, "maxlength", void 0);
 __decorate([
     property({ type: String })
@@ -306,11 +351,14 @@ __decorate([
     property({ type: DescriptionType })
 ], TuixInput.prototype, "descriptionType", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixInput.prototype, "dark", void 0);
 __decorate([
     property({ type: Boolean })
 ], TuixInput.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixInput.prototype, "autofocus", void 0);
 __decorate([
     query('.t-input-container .t-input')
 ], TuixInput.prototype, "_inputElement", void 0);
@@ -324,4 +372,3 @@ TuixInput = __decorate([
     customElement('tuix-input')
 ], TuixInput);
 export { TuixInput };
-//# sourceMappingURL=TuixInput.js.map