tuix-webcomponents 0.0.21 → 0.0.24

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

@@ -0,0 +1,361 @@
+import { __decorate } from "tslib";
+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.js';
+import { dropdownHostStyles, dropdownMainContainerStyles, dropdownOptionStyles, } from './TuixDropdown.styles.js';
+import { DescriptionType } from '../tuix-input/enums/tuix-input.enums.js';
+import { DropdownType } from './enums/tuix-dropdown.enums.js';
+let TuixDropdown = class TuixDropdown extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = undefined;
+        this.options = [];
+        this.placeholder = '';
+        this.title = '';
+        this.disabled = false;
+        this.dark = false;
+        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) => {
+            if (!event.composedPath().includes(this)) {
+                this._isOptionsVisible = false;
+            }
+        };
+    }
+    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);
+        super.disconnectedCallback();
+    }
+    _onEnterPress(event) {
+        if (event.key === 'Enter') {
+            this._toggleOptions();
+        }
+    }
+    _onKeyDownOption(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                return this._handleArrowDown();
+            case 'ArrowUp':
+                return this._handleArrowUp();
+            case 'Escape':
+                this._isOptionsVisible = false;
+                break;
+        }
+    }
+    _onKeyPressOption(event) {
+        if (event.key === 'Enter') {
+            this._onClickOption(event);
+        }
+    }
+    _onMouseOverOption(event) {
+        const optionTarget = event.target;
+        this._focusTargetOption(optionTarget);
+    }
+    _onClickOption(event) {
+        const optionTarget = event.target;
+        this._value = optionTarget.innerText;
+        this._isOptionsVisible = false;
+        this._unselectPreviousOption();
+        optionTarget.classList.add('t-option-selected');
+        this._previousSelectedOption = optionTarget;
+        this._handleSelectEvent(event);
+    }
+    _onInputSingle(e) {
+        this._handleInputBase(e, 'input-single');
+    }
+    _handleSelectEvent(event) {
+        const optionIndex = event.target.getAttribute('data-value');
+        const selectedValue = this.options[Number(optionIndex)];
+        this.dispatchEvent(new CustomEvent('select', {
+            detail: {
+                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) {
+        if (!this._searchingOption) {
+            this._searchingOption = true;
+        }
+        this._extendOptionsList(e.detail.value);
+        this._isOptionsVisible = true;
+        this.dispatchEvent(new CustomEvent(eventName, {
+            detail: {
+                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() {
+        const nextOption = this._previousFocusedOption
+            ?.nextElementSibling;
+        if (nextOption) {
+            this._focusTargetOption(nextOption);
+        }
+    }
+    _handleArrowUp() {
+        const previousOption = this._previousFocusedOption
+            ?.previousElementSibling;
+        if (previousOption) {
+            this._focusTargetOption(previousOption);
+        }
+    }
+    _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() {
+        if (this.disabled) {
+            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() {
+        if (this.type === DropdownType.SEARCH) {
+            if (this._previousSelectedOption) {
+                this._focusTargetOption(this._previousSelectedOption, false);
+            }
+            return;
+        }
+        if (!this._isOptionsVisible || !this._optionsContainer) {
+            this._inputDropdown?.shadowRoot?.querySelector('input')?.focus();
+            return;
+        }
+        if (this._previousSelectedOption) {
+            this._focusTargetOption(this._previousSelectedOption);
+        }
+        else {
+            const firstOption = this._optionsContainer
+                .firstElementChild;
+            if (firstOption) {
+                this._focusTargetOption(firstOption);
+            }
+        }
+    }
+    _unselectPreviousOption() {
+        if (this._previousSelectedOption) {
+            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._hasCompleteDescription(),
+        };
+    }
+    _triggerUpdateByExternalValueChange() {
+        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 optionTarget = this._optionsContainer?.children[index];
+        optionTarget?.classList.add('t-option-selected');
+        this._previousSelectedOption = optionTarget || null;
+        this._value = optionTarget ? this._getOptionName(this.options[index]) : '';
+    }
+    _resetPreviousSelection() {
+        this._value = '';
+        this._unselectPreviousOption();
+    }
+    _getOptionsTemplate() {
+        if (this.type === DropdownType.SINGLE || this._searchingOption === false) {
+            this._extendOptionsList();
+        }
+        return this._extendedOptions?.map((option, index) => {
+            return html `<div
+        class="${classMap({
+                't-dropdown-option': true,
+                't-option-filtered': option.filtered,
+            })}"
+        @click="${this._onClickOption}"
+        data-value="${index}"
+        tabindex="0"
+        @keydown="${this._onKeyDownOption}"
+        @keypress="${this._onKeyPressOption}"
+        @mouseover="${this._onMouseOverOption}"
+      >
+        ${option.name}
+      </div>`;
+        });
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('_isOptionsVisible')) {
+            this._focusOptionsContainer();
+        }
+        else if (changedProperties.has('value')) {
+            this._triggerUpdateByExternalValueChange();
+        }
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('options')) {
+            this._resetPreviousSelection();
+        }
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this._triggerUpdateByExternalValueChange();
+    }
+    render() {
+        return html `<div class="t-dropdown-full-container">
+      <div class="t-dropdown-container">
+        <tuix-input
+          .value="${this._value}"
+          class="t-input-dropdown"
+          iconRight="${this._isOptionsVisible
+            ? IconName.CHEVRON_UP
+            : IconName.CHEVRON_DOWN}"
+          placeholder="${this.placeholder}"
+          title="${this.title}"
+          .description="${this.description}"
+          descriptionType="${this.descriptionType}"
+          ?disabled="${this.disabled}"
+          ?dark="${this.dark}"
+          ?readonly="${this.type !== DropdownType.SEARCH}"
+          @on-click="${this._toggleOptions}"
+          @keypress="${this._onEnterPress}"
+          @on-change="${this._onInputSingle}"
+        >
+        </tuix-input>
+      </div>
+      <div class="${classMap(this._getOptionsContainerClasses())}">
+        ${this._getOptionsTemplate()}
+      </div>
+    </div>`;
+    }
+};
+__decorate([
+    property({ type: Object })
+], TuixDropdown.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], TuixDropdown.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], TuixDropdown.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], TuixDropdown.prototype, "title", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixDropdown.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixDropdown.prototype, "dark", void 0);
+__decorate([
+    property({ type: String })
+], TuixDropdown.prototype, "description", void 0);
+__decorate([
+    property({ type: DescriptionType })
+], TuixDropdown.prototype, "descriptionType", void 0);
+__decorate([
+    property({ type: String })
+], TuixDropdown.prototype, "type", void 0);
+__decorate([
+    state()
+], TuixDropdown.prototype, "_value", void 0);
+__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);
+__decorate([
+    query('.t-dropdown-container .t-input-dropdown')
+], TuixDropdown.prototype, "_inputDropdown", void 0);
+TuixDropdown = __decorate([
+    customElement('tuix-dropdown')
+], TuixDropdown);
+export { TuixDropdown };

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

@@ -0,0 +1,3 @@
+export declare const dropdownHostStyles: import("lit").CSSResult;
+export declare const dropdownMainContainerStyles: import("lit").CSSResult;
+export declare const dropdownOptionStyles: import("lit").CSSResult;

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

@@ -0,0 +1,125 @@
+import { css, unsafeCSS } from 'lit';
+import { hostStyles } from '../tuix-input/TuixInput.styles.js';
+import { Palette } from '../utils/colors.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { DarkPalette } from '../utils/darkColors.js';
+export const dropdownHostStyles = css `
+  ${hostStyles}
+  :host {
+    --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;
+  }
+  .t-dropdown-container .t-input-dropdown {
+    --t-field-input-cursor: pointer;
+  }
+`;
+export const dropdownOptionStyles = css `
+  .t-options-container {
+    width: 100%;
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 0;
+    border: none;
+    border-radius: 0 0 5px 5px;
+    background-color: var(--t-field-color-option);
+    visibility: collapse;
+    overflow-y: auto;
+    max-height: 250px;
+    color: var(--t-field-color-text);
+    box-shadow: 0px 2px 8px 0px ${unsafeCSS(Palette.SHADOW)};
+    z-index: 9999;
+  }
+  .t-options-container::-webkit-scrollbar {
+    width: 0.75rem;
+  }
+  .t-options-container::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  .t-options-container::-webkit-scrollbar-thumb {
+    background-color: ${unsafeCSS(Palette.PRIMARY_100)};
+    border-radius: 0.25rem;
+    border: 0.188rem solid transparent;
+    background-clip: content-box;
+  }
+  .t-options-container.show {
+    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: var(--t-field-padding-y) 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    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);
+  }
+  .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: 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.813rem;
+      line-height: 1rem;
+      --t-field-padding-y: 1rem;
+      --t-field-padding-top: 1.375rem;
+    }
+  }
+`;

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

@@ -0,0 +1,4 @@
+export declare enum DropdownType {
+    SINGLE = "single",
+    SEARCH = "search"
+}

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

@@ -0,0 +1,5 @@
+export var DropdownType;
+(function (DropdownType) {
+    DropdownType["SINGLE"] = "single";
+    DropdownType["SEARCH"] = "search";
+})(DropdownType || (DropdownType = {}));

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

@@ -0,0 +1,15 @@
+import { type CustomEventTuixInput } from '../../tuix-input/interfaces/tuix-input.interface.js';
+import { type DetailValue } from '../../utils/interfaces/detail-value.interface.js';
+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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,15 @@
+import { LitElement, TemplateResult } from 'lit';
+import { IconName, IconSizeVariant } from './enums/tuix-icon.enums.js';
+import { TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
+export declare class TuixIcon extends LitElement {
+    static styles: import("lit").CSSResult;
+    name: IconName;
+    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

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