tuix-webcomponents 0.62.0 → 0.64.0

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

@@ -1,368 +0,0 @@
-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 { 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;
-            }
-        };
-    }
-    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() {
-        var _a;
-        if (this.type === DropdownType.SEARCH && this._searchingOption) {
-            const optionIndex = (_a = this._previousSelectedOption) === null || _a === void 0 ? void 0 : _a.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 === null || option === void 0 ? void 0 : 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() {
-        var _a;
-        const nextOption = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
-        if (nextOption) {
-            this._focusTargetOption(nextOption);
-        }
-    }
-    _handleArrowUp() {
-        var _a;
-        const previousOption = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
-        if (previousOption) {
-            this._focusTargetOption(previousOption);
-        }
-    }
-    _focusTargetOption(targetOption, extrict = true) {
-        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 === null || targetOption === void 0 ? void 0 : targetOption.focus();
-        }
-        this._previousFocusedOption = targetOption;
-    }
-    _toggleOptions() {
-        var _a, _b, _c, _d;
-        if (this.disabled) {
-            return;
-        }
-        this._isOptionsVisible = !this._isOptionsVisible;
-        if (this._isOptionsVisible &&
-            this.type === DropdownType.SEARCH &&
-            this._previousSelectedOption) {
-            (_a = this._optionsContainer) === null || _a === void 0 ? void 0 : _a.scrollTo({
-                top: this._previousSelectedOption.offsetTop,
-                behavior: 'auto',
-            });
-            (_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);
-            }
-            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();
-            return;
-        }
-        if (this._previousSelectedOption) {
-            this._focusTargetOption(this._previousSelectedOption);
-        }
-        else {
-            const firstOption = this._optionsContainer
-                .firstElementChild;
-            if (firstOption) {
-                this._focusTargetOption(firstOption);
-            }
-        }
-    }
-    _unselectPreviousOption() {
-        var _a;
-        if (this._previousSelectedOption) {
-            (_a = this._previousSelectedOption.classList) === null || _a === void 0 ? void 0 : _a.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() {
-        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 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]) : '';
-    }
-    _resetPreviousSelection() {
-        this._value = '';
-        this._unselectPreviousOption();
-    }
-    _getOptionsTemplate() {
-        var _a;
-        if (this.type === DropdownType.SINGLE || this._searchingOption === false) {
-            this._extendOptionsList();
-        }
-        return (_a = this._extendedOptions) === null || _a === void 0 ? void 0 : _a.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>`;
-    }
-};
-TuixDropdown.styles = [
-    dropdownHostStyles,
-    dropdownMainContainerStyles,
-    dropdownOptionStyles,
-];
-__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 };
-//# sourceMappingURL=TuixDropdown.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

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

@@ -1,126 +0,0 @@
-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;
-    }
-  }
-`;
-//# sourceMappingURL=TuixDropdown.styles.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"tuix-dropdown.enums.js","sourceRoot":"","sources":["../../../../src/tuix-dropdown/enums/tuix-dropdown.enums.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,iCAAiB,CAAA;IACjB,iCAAiB,CAAA;AACnB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB","sourcesContent":["export enum DropdownType {\n  SINGLE = 'single',\n  SEARCH = 'search',\n}\n"]}

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"tuix-dropdown.interface.js","sourceRoot":"","sources":["../../../../src/tuix-dropdown/interfaces/tuix-dropdown.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { CustomEventTuixInput } from '../../tuix-input/interfaces/tuix-input.interface';\nimport { DetailValue } from '../../utils/interfaces/detail-value.interface';\n\nexport type TuixDropdownPlainOption = string | number | boolean;\n\nexport interface TuixDropdownObjectOption {\n  name: string;\n  value: TuixDropdownPlainOption;\n}\n\nexport type TuixDropdownOption =\n  | TuixDropdownPlainOption\n  | TuixDropdownObjectOption;\n\nexport interface TuixDropdownExtendedOption {\n  name: string;\n  value: TuixDropdownPlainOption;\n  filtered: boolean;\n}\n\nexport type CustomEventTuixDropdownSelect<\n  T extends TuixDropdownOption = TuixDropdownOption\n> = CustomEvent<DetailValue<T>>;\n\nexport type CustomEventTuixDropdownInput = CustomEventTuixInput;\n"]}

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

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

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