tuix-webcomponents 0.63.0 → 0.64.0

package/dist/src/tuix-checkbox/TuixCheckbox.styles.js

@@ -1,132 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-import { Palette } from '../utils/colors';
-import { DarkPalette } from '../utils/darkColors';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-export const hostStyles = css `
-  :host {
-    --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};
-    --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};
-    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};
-    --t-text-color-error: ${unsafeCSS(Palette.ERROR)};
-    --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};
-    --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};
-    --t-text-color-label: ${unsafeCSS(Palette.BLACK)};
-    --t-label-right-default-justify: flex-start;
-    --t-label-left-default-justify: space-between;
-  }
-  :host([dark]) {
-    --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};
-    --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};
-    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};
-    --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};
-    --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};
-    --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};
-    --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};
-  }
-`;
-export const checkboxContainerStyles = css `
-  .t-checkbox-full-container {
-    display: flex;
-    justify-content: var(--t-label-right-default-justify, flex-start);
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-  :host([disabled]) .t-checkbox-full-container {
-    cursor: not-allowed;
-  }
-  .t-checkbox-container {
-    --t-checkbox-size-box: 1.5rem;
-    --t-checkbox-shadow-width: 2px;
-    --t-checkbox-border-radius: 0.25rem;
-    display: block;
-    position: relative;
-    height: var(--t-checkbox-size-box);
-    width: var(--t-checkbox-size-box);
-    min-width: var(--t-checkbox-size-box);
-  }
-  .t-checkbox-container .t-checkbox {
-    position: absolute;
-    opacity: 0;
-    height: 0;
-    width: 0;
-  }
-  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    .t-checkbox-container {
-      --t-checkbox-size-box: 1rem;
-      --t-checkbox-shadow-width: 1px;
-      --t-checkbox-border-radius: 0.125rem;
-      margin-top: 1px;
-    }
-  }
-`;
-export const checkboxCheckmarkStyles = css `
-  .t-checkbox-container .t-checkbox-checkmark {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    height: var(--t-checkbox-size-box);
-    width: var(--t-checkbox-size-box);
-    border-radius: var(--t-checkbox-border-radius);
-    background-color: var(--t-bg-color-primary);
-    border: 1px solid var(--t-stroke-color-grey);
-    box-sizing: border-box;
-  }
-  .t-checkbox-container .t-checkbox-checkmark tuix-icon {
-    margin: auto;
-    display: none;
-    width: calc(var(--t-checkbox-size-box) - 0.5rem);
-    height: calc(var(--t-checkbox-size-box) - 0.5rem);
-  }
-  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {
-    background-color: var(--t-main-color-tuix);
-    border: none;
-  }
-  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {
-    box-shadow: 0 0 0px var(--t-checkbox-shadow-width)
-      var(--t-stroke-color-focus);
-    border: 1px solid var(--t-main-color-tuix);
-  }
-  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {
-    display: block;
-  }
-  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {
-    border: 1px solid var(--t-main-color-tuix);
-  }
-  .t-checkbox-full-container.t-with-error
-    .t-checkbox-container
-    .t-checkbox-checkmark {
-    border: 1px solid var(--t-text-color-error);
-  }
-  .t-checkbox-full-container.t-with-error
-    .t-checkbox-container
-    .t-checkbox:checked
-    ~ .t-checkbox-checkmark {
-    background-color: var(--t-text-color-error);
-    border: none;
-  }
-
-  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {
-    background-color: var(--t-bg-color-disabled);
-    border: none;
-    box-shadow: none;
-  }
-`;
-export const checkboxLabelStyles = css `
-  .t-checkbox-label {
-    display: block;
-    color: var(--t-text-color-label);
-    margin-left: 0.625rem;
-  }
-  .t-checkbox-full-container.t-with-label-left {
-    flex-direction: row-reverse;
-    justify-content: var(--t-label-left-default-justify, space-between);
-  }
-  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {
-    margin-right: 0.625rem;
-    margin-left: 0;
-  }
-`;

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

@@ -1,21 +0,0 @@
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
-export declare enum CheckboxIconMode {
-    DEFAULT = "default",
-    DISABLED = "disabled",
-    ERROR = "error"
-}
-export declare enum CheckboxLabelSide {
-    LEFT = "left",
-    RIGHT = "right"
-}
-export declare const CheckboxIconColorLight: {
-    default: Palette;
-    disabled: Palette;
-    error: Palette;
-};
-export declare const CheckboxIconColorDark: {
-    default: DarkPalette;
-    disabled: DarkPalette;
-    error: DarkPalette;
-};

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

@@ -1,23 +0,0 @@
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
-export var CheckboxIconMode;
-(function (CheckboxIconMode) {
-    CheckboxIconMode["DEFAULT"] = "default";
-    CheckboxIconMode["DISABLED"] = "disabled";
-    CheckboxIconMode["ERROR"] = "error";
-})(CheckboxIconMode || (CheckboxIconMode = {}));
-export var CheckboxLabelSide;
-(function (CheckboxLabelSide) {
-    CheckboxLabelSide["LEFT"] = "left";
-    CheckboxLabelSide["RIGHT"] = "right";
-})(CheckboxLabelSide || (CheckboxLabelSide = {}));
-export const CheckboxIconColorLight = {
-    [CheckboxIconMode.DEFAULT]: Palette.WHITE,
-    [CheckboxIconMode.DISABLED]: Palette.PRIMARY_300,
-    [CheckboxIconMode.ERROR]: Palette.WHITE,
-};
-export const CheckboxIconColorDark = {
-    [CheckboxIconMode.DEFAULT]: DarkPalette.WHITE,
-    [CheckboxIconMode.DISABLED]: DarkPalette.PRIMARY_100,
-    [CheckboxIconMode.ERROR]: DarkPalette.WHITE,
-};

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

@@ -1,5 +0,0 @@
-import { type DetailValue } from '../../utils/interfaces/detail-value.interface';
-export interface DetailValueCheckbox extends DetailValue<boolean> {
-    label?: string;
-}
-export type CustomEventTuixCheckbox = CustomEvent<DetailValueCheckbox>;

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

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

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

@@ -1,55 +0,0 @@
-import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
-import type { TuixDropdownExtendedOption, TuixDropdownOption } from './interfaces/tuix-dropdown.interface';
-import { DescriptionType } from '../tuix-input/enums/tuix-input.enums';
-import { DropdownType } from './enums/tuix-dropdown.enums';
-export declare class TuixDropdown extends LitElement {
-    static styles: import("lit").CSSResult[];
-    value?: TuixDropdownOption;
-    options: TuixDropdownOption[];
-    placeholder: string;
-    title: string;
-    disabled: boolean;
-    dark: boolean;
-    description?: string;
-    descriptionType: DescriptionType;
-    type: DropdownType;
-    private _value;
-    private _isOptionsVisible;
-    private _searchingOption;
-    _extendedOptions: TuixDropdownExtendedOption[];
-    private _optionsContainer;
-    private _inputDropdown;
-    private _previousSelectedOption;
-    private _previousFocusedOption;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private _onEnterPress;
-    private _onKeyDownOption;
-    private _onKeyPressOption;
-    private _onMouseOverOption;
-    private _onClickOption;
-    protected _onInputSingle(e: CustomEvent): void;
-    protected _handleSelectEvent(event: MouseEvent | KeyboardEvent): void;
-    private _handleBlur;
-    private _getOptionName;
-    private _getOptionValue;
-    private _findIndex;
-    private _handleInputBase;
-    private _extendOptionsList;
-    private _handleArrowDown;
-    private _handleArrowUp;
-    private _handleClickOutside;
-    private _focusTargetOption;
-    private _toggleOptions;
-    private _focusOptionsContainer;
-    private _unselectPreviousOption;
-    private _hasCompleteDescription;
-    private _getOptionsContainerClasses;
-    private _triggerUpdateByExternalValueChange;
-    private _resetPreviousSelection;
-    private _getOptionsTemplate;
-    protected updated(changedProperties: Map<string, any>): void;
-    protected willUpdate(changedProperties: PropertyValues<this>): void;
-    protected firstUpdated(changedProperties: PropertyValues<this>): void;
-    protected render(): TemplateResult;
-}

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

@@ -1,360 +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';
-import { dropdownHostStyles, dropdownMainContainerStyles, dropdownOptionStyles, } from './TuixDropdown.styles';
-import { DescriptionType } from '../tuix-input/enums/tuix-input.enums';
-import { DropdownType } from './enums/tuix-dropdown.enums';
-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

@@ -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;