tuix-webcomponents 0.0.22 → 0.0.25

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

@@ -1,7 +1,8 @@
 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 '../tuix-input/TuixInput.js';
 import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
 import { dropdownHostStyles, dropdownMainContainerStyles, dropdownOptionStyles, } from './TuixDropdown.styles';
 import { DescriptionType } from '../tuix-input/enums/tuix-input.enums';
@@ -15,11 +16,12 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         this.title = '';
         this.disabled = false;
         this.dark = false;
-        this.description = undefined;
         this.descriptionType = DescriptionType.TEXT;
         this.type = DropdownType.SINGLE;
         this._value = '';
         this._isOptionsVisible = false;
+        this._searchingOption = false;
+        this._extendedOptions = [];
         this._previousSelectedOption = null;
         this._previousFocusedOption = null;
         this._handleClickOutside = (event) => {
@@ -28,9 +30,15 @@ let TuixDropdown = class TuixDropdown extends LitElement {
             }
         };
     }
+    static { this.styles = [
+        dropdownHostStyles,
+        dropdownMainContainerStyles,
+        dropdownOptionStyles,
+    ]; }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener('click', this._handleClickOutside);
+        this.addEventListener('blur', this._handleBlur.bind(this));
     }
     disconnectedCallback() {
         window.removeEventListener('click', this._handleClickOutside);
@@ -78,39 +86,81 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         const selectedValue = this.options[Number(optionIndex)];
         this.dispatchEvent(new CustomEvent('select', {
             detail: {
-                value: selectedValue,
+                value: this._getOptionValue(selectedValue),
             },
             bubbles: true,
         }));
+        if (this.type === DropdownType.SEARCH) {
+            this._extendOptionsList(this._getOptionName(selectedValue));
+            this._searchingOption = false;
+        }
+    }
+    _handleBlur() {
+        if (this.type === DropdownType.SEARCH && this._searchingOption) {
+            const optionIndex = this._previousSelectedOption?.getAttribute('data-value');
+            const selectedValue = typeof optionIndex === 'string'
+                ? this.options[Number(optionIndex)]
+                : '';
+            this._value = this._getOptionName(selectedValue);
+            this._extendOptionsList();
+        }
+    }
+    _getOptionName(option) {
+        return String(typeof option === 'object' ? option?.name : option);
+    }
+    _getOptionValue(option) {
+        return typeof option === 'object' ? option.value : option;
+    }
+    _findIndex(option) {
+        return this._extendedOptions.findIndex(opt => opt.value === this._getOptionValue(option));
     }
     _handleInputBase(e, eventName) {
-        var _a;
+        if (!this._searchingOption) {
+            this._searchingOption = true;
+        }
+        this._extendOptionsList(e.detail.value);
+        this._isOptionsVisible = true;
         this.dispatchEvent(new CustomEvent(eventName, {
             detail: {
-                value: (_a = e.detail) === null || _a === void 0 ? void 0 : _a.value,
+                value: e.detail.value,
             },
             bubbles: true,
         }));
+        this._value = e.detail.value;
+    }
+    _extendOptionsList(value = '') {
+        value = value.trim();
+        this._extendedOptions = this.options.map(option => {
+            const optionName = this._getOptionName(option);
+            return {
+                name: optionName,
+                value: this._getOptionValue(option),
+                filtered: this.type === DropdownType.SEARCH &&
+                    value !== '' &&
+                    !optionName.toLowerCase().includes(value.toLowerCase()),
+            };
+        });
     }
     _handleArrowDown() {
-        var _a;
-        const nextOption = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
+        const nextOption = this._previousFocusedOption
+            ?.nextElementSibling;
         if (nextOption) {
             this._focusTargetOption(nextOption);
         }
     }
     _handleArrowUp() {
-        var _a;
-        const previousOption = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
+        const previousOption = this._previousFocusedOption
+            ?.previousElementSibling;
         if (previousOption) {
             this._focusTargetOption(previousOption);
         }
     }
-    _focusTargetOption(targetOption) {
-        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');
-        targetOption === null || targetOption === void 0 ? void 0 : targetOption.focus();
+    _focusTargetOption(targetOption, extrict = true) {
+        this._previousFocusedOption?.classList?.remove('t-option-hover');
+        targetOption?.classList.add('t-option-hover');
+        if (extrict) {
+            targetOption?.focus();
+        }
         this._previousFocusedOption = targetOption;
     }
     _toggleOptions() {
@@ -118,11 +168,25 @@ let TuixDropdown = class TuixDropdown extends LitElement {
             return;
         }
         this._isOptionsVisible = !this._isOptionsVisible;
+        if (this._isOptionsVisible &&
+            this.type === DropdownType.SEARCH &&
+            this._previousSelectedOption) {
+            this._optionsContainer?.scrollTo({
+                top: this._previousSelectedOption.offsetTop,
+                behavior: 'auto',
+            });
+            this._inputDropdown?.shadowRoot?.querySelector('input')?.select();
+        }
     }
     _focusOptionsContainer() {
-        var _a, _b, _c;
+        if (this.type === DropdownType.SEARCH) {
+            if (this._previousSelectedOption) {
+                this._focusTargetOption(this._previousSelectedOption, false);
+            }
+            return;
+        }
         if (!this._isOptionsVisible || !this._optionsContainer) {
-            (_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();
+            this._inputDropdown?.shadowRoot?.querySelector('input')?.focus();
             return;
         }
         if (this._previousSelectedOption) {
@@ -137,41 +201,59 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         }
     }
     _unselectPreviousOption() {
-        var _a;
         if (this._previousSelectedOption) {
-            (_a = this._previousSelectedOption.classList) === null || _a === void 0 ? void 0 : _a.remove('t-option-selected');
+            this._previousSelectedOption.classList?.remove('t-option-selected');
             this._previousSelectedOption = null;
         }
     }
+    _hasCompleteDescription() {
+        const isValidDescriptionType = Object.values(DescriptionType).includes(this.descriptionType);
+        return (isValidDescriptionType &&
+            (this.descriptionType === DescriptionType.TEXT
+                ? !!this.description
+                : true));
+    }
     _getOptionsContainerClasses() {
         return {
             't-options-container': true,
             show: this._isOptionsVisible,
-            't-with-description': !!this.descriptionType,
+            't-with-description': this._hasCompleteDescription(),
         };
     }
     _triggerUpdateByExternalValueChange() {
-        var _a;
         this._unselectPreviousOption();
         if (!this.value) {
+            this._value = '';
+            this._extendOptionsList();
+            return;
+        }
+        const index = this._findIndex(this.value);
+        if (this.type === DropdownType.SEARCH) {
+            this._extendOptionsList('');
+        }
+        if (index < 0) {
             this._value = '';
             return;
         }
-        const index = this.options.indexOf(this.value);
-        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');
+        const optionTarget = this._optionsContainer?.children[index];
+        optionTarget?.classList.add('t-option-selected');
         this._previousSelectedOption = optionTarget || null;
-        this._value = optionTarget ? String(this.value) : '';
+        this._value = optionTarget ? this._getOptionName(this.options[index]) : '';
     }
     _resetPreviousSelection() {
         this._value = '';
         this._unselectPreviousOption();
     }
     _getOptionsTemplate() {
-        var _a;
-        return (_a = this.options) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
+        if (this.type === DropdownType.SINGLE || this._searchingOption === false) {
+            this._extendOptionsList();
+        }
+        return this._extendedOptions?.map((option, index) => {
             return html `<div
-        class="t-dropdown-option"
+        class="${classMap({
+                't-dropdown-option': true,
+                't-option-filtered': option.filtered,
+            })}"
         @click="${this._onClickOption}"
         data-value="${index}"
         tabindex="0"
@@ -179,7 +261,7 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         @keypress="${this._onKeyPressOption}"
         @mouseover="${this._onMouseOverOption}"
       >
-        ${option}
+        ${option.name}
       </div>`;
         });
     }
@@ -196,6 +278,10 @@ let TuixDropdown = class TuixDropdown extends LitElement {
             this._resetPreviousSelection();
         }
     }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this._triggerUpdateByExternalValueChange();
+    }
     render() {
         return html `<div class="t-dropdown-full-container">
       <div class="t-dropdown-container">
@@ -212,9 +298,9 @@ let TuixDropdown = class TuixDropdown extends LitElement {
           ?disabled="${this.disabled}"
           ?dark="${this.dark}"
           ?readonly="${this.type !== DropdownType.SEARCH}"
-          @click="${this._toggleOptions}"
+          @on-click="${this._toggleOptions}"
           @keypress="${this._onEnterPress}"
-          @input-single="${this._onInputSingle}"
+          @on-change="${this._onInputSingle}"
         >
         </tuix-input>
       </div>
@@ -224,13 +310,8 @@ let TuixDropdown = class TuixDropdown extends LitElement {
     </div>`;
     }
 };
-TuixDropdown.styles = [
-    dropdownHostStyles,
-    dropdownMainContainerStyles,
-    dropdownOptionStyles,
-];
 __decorate([
-    property({ type: Object, reflect: true })
+    property({ type: Object })
 ], TuixDropdown.prototype, "value", void 0);
 __decorate([
     property({ type: Array })
@@ -242,10 +323,10 @@ __decorate([
     property({ type: String })
 ], TuixDropdown.prototype, "title", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixDropdown.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixDropdown.prototype, "dark", void 0);
 __decorate([
     property({ type: String })
@@ -262,6 +343,12 @@ __decorate([
 __decorate([
     state()
 ], TuixDropdown.prototype, "_isOptionsVisible", void 0);
+__decorate([
+    state()
+], TuixDropdown.prototype, "_searchingOption", void 0);
+__decorate([
+    state()
+], TuixDropdown.prototype, "_extendedOptions", void 0);
 __decorate([
     query('.t-options-container')
 ], TuixDropdown.prototype, "_optionsContainer", void 0);
@@ -272,4 +359,3 @@ TuixDropdown = __decorate([
     customElement('tuix-dropdown')
 ], TuixDropdown);
 export { TuixDropdown };
-//# sourceMappingURL=TuixDropdown.js.map

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

@@ -1,19 +1,44 @@
 import { css, unsafeCSS } from 'lit';
 import { hostStyles } from '../tuix-input/TuixInput.styles';
-import { palette } from '../utils/colors';
+import { Palette } from '../utils/colors';
 import { ScreenSizes } from '../utils/screenSizes.enum';
+import { DarkPalette } from '../utils/darkColors';
 export const dropdownHostStyles = css `
   ${hostStyles}
   :host {
-    --t-field-color-option: ${unsafeCSS(palette.white)};
-    --t-field-color-main: ${unsafeCSS(palette.main)};
+    --t-field-color-option: ${unsafeCSS(Palette.WHITE)};
+    --t-field-color-main: ${unsafeCSS(Palette.MAIN)};
+  }
+
+  :host .t-input-dropdown {
+    --t-field-font-weight: 300;
+    --t-field-font-size: 1rem;
+    --t-field-padding-x: 1rem;
+    --t-field-title-left-position: 1rem;
+  }
+
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    :host .t-input-dropdown {
+      --t-field-font-size: 0.938rem;
+      --t-field-line-height: 1.125rem;
+    }
+  }
+
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    :host .t-input-dropdown {
+      --t-field-font-size: 0.813rem;
+      --t-field-line-height: 1rem;
+    }
+  }
+
+  :host([dark]) {
+    --t-field-color-option: ${unsafeCSS(DarkPalette.ELEVATION_2)};
   }
 `;
 export const dropdownMainContainerStyles = css `
   .t-dropdown-full-container {
     position: relative;
-    font-family: 'rubik', sans-serif;
-    cursor: pointer;
+    font-family: 'Rubik', sans-serif;
   }
   .t-dropdown-container .t-input-dropdown {
     --t-field-input-cursor: pointer;
@@ -25,15 +50,15 @@ export const dropdownOptionStyles = css `
     position: absolute;
     top: calc(100% + 2px);
     left: 0;
-    border: 1px solid #ccc;
-    border-top: none;
+    border: none;
     border-radius: 0 0 5px 5px;
     background-color: var(--t-field-color-option);
-    display: none;
+    visibility: collapse;
     overflow-y: auto;
-    max-height: 200px;
+    max-height: 250px;
     color: var(--t-field-color-text);
-    box-shadow: 0px 2px 8px 0px rgba(66, 79, 101, 0.16);
+    box-shadow: 0px 2px 8px 0px ${unsafeCSS(Palette.SHADOW)};
+    z-index: 9999;
   }
   .t-options-container::-webkit-scrollbar {
     width: 0.75rem;
@@ -42,23 +67,32 @@ export const dropdownOptionStyles = css `
     background-color: transparent;
   }
   .t-options-container::-webkit-scrollbar-thumb {
-    background-color: ${unsafeCSS(palette.primary_100)};
+    background-color: ${unsafeCSS(Palette.PRIMARY_100)};
     border-radius: 0.25rem;
     border: 0.188rem solid transparent;
     background-clip: content-box;
   }
   .t-options-container.show {
-    display: block;
+    visibility: visible;
   }
   .t-options-container.show.t-with-description {
     top: calc(100% + 2px - 1.5rem);
   }
+  @media only screen and (max-height: 500px) {
+    .t-options-container {
+      max-height: 50vh;
+    }
+  }
   .t-dropdown-option {
-    padding: 0.75rem 1rem;
+    padding: var(--t-field-padding-y) 1rem;
     cursor: pointer;
     font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5rem;
+    line-height: 1.25rem;
+    font-weight: 300;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
   }
   .t-dropdown-option.t-option-hover {
     background-color: var(--t-field-color-form);
@@ -66,20 +100,26 @@ export const dropdownOptionStyles = css `
   .t-dropdown-option.t-option-selected {
     color: var(--t-field-color-main);
   }
+  .t-dropdown-option.t-option-filtered {
+    display: none;
+  }
   .t-dropdown-option:focus {
     outline: none;
   }
   @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
     .t-dropdown-option {
-      font-size: 1rem;
-      line-height: 1.25rem;
+      font-size: 0.938rem;
+      line-height: 1.125rem;
+      --t-field-padding-y: 1.063rem;
+      --t-field-padding-top: 1.5rem;
     }
   }
   @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
     .t-dropdown-option {
-      font-size: 0.875rem;
+      font-size: 0.813rem;
       line-height: 1rem;
+      --t-field-padding-y: 1rem;
+      --t-field-padding-top: 1.375rem;
     }
   }
 `;
-//# sourceMappingURL=TuixDropdown.styles.js.map

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

@@ -2,9 +2,3 @@ export declare enum DropdownType {
     SINGLE = "single",
     SEARCH = "search"
 }
-export declare enum OptionVarType {
-    STRING = "string",
-    NUMBER = "number",
-    BOOLEAN = "boolean",
-    UNKNOW = "unknow"
-}

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

@@ -3,11 +3,3 @@ export var DropdownType;
     DropdownType["SINGLE"] = "single";
     DropdownType["SEARCH"] = "search";
 })(DropdownType || (DropdownType = {}));
-export var OptionVarType;
-(function (OptionVarType) {
-    OptionVarType["STRING"] = "string";
-    OptionVarType["NUMBER"] = "number";
-    OptionVarType["BOOLEAN"] = "boolean";
-    OptionVarType["UNKNOW"] = "unknow";
-})(OptionVarType || (OptionVarType = {}));
-//# sourceMappingURL=tuix-dropdown.enums.js.map

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

@@ -1 +1,15 @@
-export type TuixDropdownOption = string | number | boolean;
+import { type CustomEventTuixInput } from '../../tuix-input/interfaces/tuix-input.interface';
+import { type DetailValue } from '../../utils/interfaces/detail-value.interface';
+export type TuixDropdownPlainOption = string | number | boolean;
+export interface TuixDropdownObjectOption {
+    name: string;
+    value: TuixDropdownPlainOption;
+}
+export type TuixDropdownOption = TuixDropdownPlainOption | TuixDropdownObjectOption;
+export interface TuixDropdownExtendedOption {
+    name: string;
+    value: TuixDropdownPlainOption;
+    filtered: boolean;
+}
+export type CustomEventTuixDropdownSelect<T extends TuixDropdownOption = TuixDropdownOption> = CustomEvent<DetailValue<T>>;
+export type CustomEventTuixDropdownInput = CustomEventTuixInput;

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

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

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

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

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

@@ -1,6 +1,6 @@
-import { TemplateResult } from 'lit';
+import { html } from 'lit';
 import { IconName } from './enums/tuix-icon.enums';
-export declare const iconTemplate: (name?: IconName, color?: string) => TemplateResult;
+export declare const iconTemplate: (name?: IconName, color?: string, fill?: string) => ReturnType<typeof html>;
 type IconContentMapType = Record<IconName, string>;
 export declare const iconContentMap: IconContentMapType;
 export {};