tuix-webcomponents 0.65.0 → 0.67.0

package/package-build/src/tuix-icon/enums/tuix-icon.enums.d.ts

@@ -1,62 +0,0 @@
-export declare enum IconSizeVariant {
-    SMALL = "small",
-    MEDIUM = "medium",
-    LARGE = "large",
-    FULL = "full"
-}
-export declare const iconSize: Record<IconSizeVariant, string>;
-export declare enum IconName {
-    ARROW_DOWN = "arrow-down",
-    ARROW_LEFT = "arrow-left",
-    ARROW_UP = "arrow-up",
-    ARROW_RIGHT = "arrow-right",
-    SEARCH = "search",
-    EYE_ON = "eye-on",
-    EYE_OFF = "eye-off",
-    EYE_CLOSE_LINE = "eye-close-line",
-    TRIANGLE_EXCLAMATION = "triangle-exclamation",
-    CIRCLE_X = "circle-x",
-    LOADER = "loader",
-    CIRCLE_CHECK = "circle-check",
-    CHEVRON_DOWN = "chevron-down",
-    CHEVRON_UP = "chevron-up",
-    CHEVRON_LEFT = "chevron-left",
-    CHEVRON_RIGHT = "chevron-right",
-    CHECK = "check",
-    NAV_HAMBURGUER = "nav-hamburguer",
-    SUN = "sun",
-    MOON = "moon",
-    BOOKMARK = "bookmark",
-    UPLOAD = "upload",
-    DOWNLOAD = "download",
-    MAP_PIN = "map-pin",
-    PHONE = "phone",
-    MAIL = "mail",
-    FACEBOOK = "facebook",
-    TWITTER = "twitter",
-    LINKEDIN = "linkedin",
-    SHARE = "share",
-    COPY = "copy",
-    GOOGLE = "google",
-    BELL = "bell",
-    GEAR = "gear",
-    LOGOUT = "logout",
-    CIRCLE_EXCLAMATION = "circle-exclamation",
-    CAMERA = "camera",
-    PENCIL = "pencil",
-    X = "x",
-    PLUS = "plus",
-    INVOICE = "invoice",
-    DELETE = "delete",
-    TRIANGLE_ARROW_DOWN = "triangle-arrow-down",
-    USERS = "users",
-    CLOCK = "clock",
-    CHECK_CLOCK = "check-clock",
-    GLOBE = "globe",
-    CALENDAR = "calendar",
-    STATS = "stats",
-    HOLIDAYS = "holidays",
-    TRENDING_UP = "trending-up",
-    ARCHIVE = "archive",
-    ACCESS_TOKEN = "access-token"
-}

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

@@ -1,69 +0,0 @@
-export var IconSizeVariant;
-(function (IconSizeVariant) {
-    IconSizeVariant["SMALL"] = "small";
-    IconSizeVariant["MEDIUM"] = "medium";
-    IconSizeVariant["LARGE"] = "large";
-    IconSizeVariant["FULL"] = "full";
-})(IconSizeVariant || (IconSizeVariant = {}));
-export const iconSize = {
-    [IconSizeVariant.SMALL]: '16px',
-    [IconSizeVariant.MEDIUM]: '24px',
-    [IconSizeVariant.LARGE]: '32px',
-    [IconSizeVariant.FULL]: '100%',
-};
-export var IconName;
-(function (IconName) {
-    IconName["ARROW_DOWN"] = "arrow-down";
-    IconName["ARROW_LEFT"] = "arrow-left";
-    IconName["ARROW_UP"] = "arrow-up";
-    IconName["ARROW_RIGHT"] = "arrow-right";
-    IconName["SEARCH"] = "search";
-    IconName["EYE_ON"] = "eye-on";
-    IconName["EYE_OFF"] = "eye-off";
-    IconName["EYE_CLOSE_LINE"] = "eye-close-line";
-    IconName["TRIANGLE_EXCLAMATION"] = "triangle-exclamation";
-    IconName["CIRCLE_X"] = "circle-x";
-    IconName["LOADER"] = "loader";
-    IconName["CIRCLE_CHECK"] = "circle-check";
-    IconName["CHEVRON_DOWN"] = "chevron-down";
-    IconName["CHEVRON_UP"] = "chevron-up";
-    IconName["CHEVRON_LEFT"] = "chevron-left";
-    IconName["CHEVRON_RIGHT"] = "chevron-right";
-    IconName["CHECK"] = "check";
-    IconName["NAV_HAMBURGUER"] = "nav-hamburguer";
-    IconName["SUN"] = "sun";
-    IconName["MOON"] = "moon";
-    IconName["BOOKMARK"] = "bookmark";
-    IconName["UPLOAD"] = "upload";
-    IconName["DOWNLOAD"] = "download";
-    IconName["MAP_PIN"] = "map-pin";
-    IconName["PHONE"] = "phone";
-    IconName["MAIL"] = "mail";
-    IconName["FACEBOOK"] = "facebook";
-    IconName["TWITTER"] = "twitter";
-    IconName["LINKEDIN"] = "linkedin";
-    IconName["SHARE"] = "share";
-    IconName["COPY"] = "copy";
-    IconName["GOOGLE"] = "google";
-    IconName["BELL"] = "bell";
-    IconName["GEAR"] = "gear";
-    IconName["LOGOUT"] = "logout";
-    IconName["CIRCLE_EXCLAMATION"] = "circle-exclamation";
-    IconName["CAMERA"] = "camera";
-    IconName["PENCIL"] = "pencil";
-    IconName["X"] = "x";
-    IconName["PLUS"] = "plus";
-    IconName["INVOICE"] = "invoice";
-    IconName["DELETE"] = "delete";
-    IconName["TRIANGLE_ARROW_DOWN"] = "triangle-arrow-down";
-    IconName["USERS"] = "users";
-    IconName["CLOCK"] = "clock";
-    IconName["CHECK_CLOCK"] = "check-clock";
-    IconName["GLOBE"] = "globe";
-    IconName["CALENDAR"] = "calendar";
-    IconName["STATS"] = "stats";
-    IconName["HOLIDAYS"] = "holidays";
-    IconName["TRENDING_UP"] = "trending-up";
-    IconName["ARCHIVE"] = "archive";
-    IconName["ACCESS_TOKEN"] = "access-token";
-})(IconName || (IconName = {}));

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

@@ -1,9 +0,0 @@
-import { type TemplateResult } from 'lit';
-import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
-import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
-export declare class TuixIconButton extends TuixBaseButton {
-    static styles: import("lit").CSSResult[];
-    icon: IconName;
-    protected _updateIconColor(): void;
-    protected _buttonContent(): TemplateResult;
-}

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

@@ -1,51 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html } from 'lit';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
-import { customElement, property } from 'lit/decorators.js';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles';
-import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
-let TuixIconButton = class TuixIconButton extends TuixBaseButton {
-    constructor() {
-        super(...arguments);
-        this.icon = IconName.ARROW_DOWN;
-    }
-    static { this.styles = [
-        css `
-      .button {
-        padding: 16px;
-        border-radius: 4px;
-        border: none;
-      }
-
-      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-        .button {
-          padding: 12px;
-        }
-      }
-
-      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-        .button {
-          padding: 8px;
-        }
-      }
-    `,
-        hostButtonStyles,
-        buttonColorStyles,
-    ]; }
-    _updateIconColor() {
-        if (!this.icon)
-            return;
-        this.iconColor = this._getTextColor();
-    }
-    _buttonContent() {
-        return html `${this._iconTemplate(this.icon, IconSizeVariant.MEDIUM)}`;
-    }
-};
-__decorate([
-    property({ type: IconName })
-], TuixIconButton.prototype, "icon", void 0);
-TuixIconButton = __decorate([
-    customElement('tuix-icon-button')
-], TuixIconButton);
-export { TuixIconButton };

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

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

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

@@ -1,370 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, nothing, } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import '../tuix-icon/TuixIcon.js';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
-import { Palette } from '../utils/colors.js';
-import { DarkPalette } from '../utils/darkColors.js';
-import { hostStyles, inputColorStyles, inputComponentStyles, inputDescriptionStyles, inputFontStyles, inputIconStyles, inputSearchStyles, inputTitleStyles, } from './TuixInput.styles.js';
-import { DescriptionType, IconByDescriptionType, IconDescriptionColorDark, IconDescriptionColorLight, InputIconLocation, InputType, } from './enums/tuix-input.enums.js';
-import { InputState, } from './interfaces/tuix-input.interface.js';
-import { v4 as uuidv4 } from 'uuid';
-let TuixInput = class TuixInput extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._inputId = this._setIdInput();
-        this.disabled = false;
-        this.value = '';
-        this.placeholder = '';
-        this.title = '';
-        this.type = InputType.TEXT;
-        this.descriptionType = DescriptionType.TEXT;
-        this.dark = false;
-        this.readonly = false;
-        this.autofocus = false;
-        this._type = this.type;
-        this._letterCounter = this.value?.length || 0;
-        this._previousType = this.type;
-        this._previousValue = '';
-        this._generalIconColorsLight = {
-            [InputState.INACTIVE]: Palette.BLACK,
-            [InputState.ACTIVE]: Palette.MAIN,
-            [InputState.DISABLED]: Palette.PRIMARY_300,
-        };
-        this._generalIconColorsDark = {
-            [InputState.INACTIVE]: DarkPalette.PRIMARY_100,
-            [InputState.ACTIVE]: DarkPalette.MAIN,
-            [InputState.DISABLED]: DarkPalette.PRIMARY_800,
-        };
-    }
-    static { this.styles = [
-        hostStyles,
-        inputComponentStyles,
-        inputFontStyles,
-        inputColorStyles,
-        inputTitleStyles,
-        inputIconStyles,
-        inputSearchStyles,
-        inputDescriptionStyles,
-    ]; }
-    _handleInputBase(e, eventName) {
-        this.dispatchEvent(new CustomEvent(eventName, {
-            detail: {
-                value: (e.target instanceof HTMLInputElement ||
-                    e.target instanceof HTMLTextAreaElement) &&
-                    e.target.value,
-            },
-            bubbles: true,
-        }));
-    }
-    _handleClickOnInput() {
-        if (this.disabled)
-            return;
-        this.dispatchEvent(new CustomEvent('on-click', {
-            bubbles: true,
-        }));
-    }
-    _handleInput(e) {
-        this._handleInputBase(e, 'on-change');
-        this._updateLetterCounter();
-    }
-    _handleBlur(e) {
-        this._handleInputBase(e, 'on-blur');
-    }
-    _handlePasswordIconClick() {
-        if (this._type === InputType.PASSWORD) {
-            this._type = InputType.TEXT;
-            this._inputElement.setAttribute('type', InputType.TEXT);
-        }
-        else {
-            this._type = InputType.PASSWORD;
-            this._inputElement.setAttribute('type', InputType.PASSWORD);
-        }
-    }
-    _formatIconSet({ iconName, colorByState, location = InputIconLocation.RIGHT, clickHandler = undefined, }) {
-        const iconSetContainerClasses = {
-            't-icon-set-container': true,
-            't-icon-click': !!clickHandler,
-            [`t-icon-${location}`]: true,
-        };
-        return html `<div
-      class="${classMap(iconSetContainerClasses)}"
-      @click="${clickHandler}"
-    >
-      ${Object.entries(colorByState).map(([state, color]) => html `<tuix-icon
-          size="${IconSizeVariant.FULL}"
-          name="${iconName}"
-          color="${color}"
-          class="t-icon-${state}"
-        ></tuix-icon>`)}
-    </div>`;
-    }
-    _updateLetterCounter() {
-        if (this.maxlength != undefined && this.type === InputType.TEXT_AREA) {
-            this._letterCounter = Number(this._inputElement.value?.length);
-        }
-    }
-    _getInputTextFeatureTemplate() {
-        return html `${this.iconRight
-            ? this._formatIconSet({
-                iconName: this.iconRight,
-                colorByState: this.dark
-                    ? this._generalIconColorsDark
-                    : this._generalIconColorsLight,
-            })
-            : nothing}`;
-    }
-    _getInputSearchFeatureTemplate() {
-        const searchIconColorsLight = {
-            [InputState.INACTIVE]: Palette.BLACK,
-            [InputState.ACTIVE]: Palette.BLACK,
-            [InputState.DISABLED]: Palette.PRIMARY_300,
-        };
-        const searchIconColorsDark = {
-            [InputState.INACTIVE]: DarkPalette.PRIMARY_100,
-            [InputState.ACTIVE]: DarkPalette.PRIMARY_100,
-            [InputState.DISABLED]: DarkPalette.PRIMARY_800,
-        };
-        return html `${this._formatIconSet({
-            iconName: IconName.SEARCH,
-            colorByState: this.dark ? searchIconColorsDark : searchIconColorsLight,
-            location: InputIconLocation.LEFT,
-        })}`;
-    }
-    _getInputPasswordFeatureTemplate() {
-        return html `${this._formatIconSet({
-            iconName: this._type === InputType.PASSWORD
-                ? IconName.EYE_CLOSE_LINE
-                : IconName.EYE_ON,
-            colorByState: this.dark
-                ? this._generalIconColorsDark
-                : this._generalIconColorsLight,
-            clickHandler: this._handlePasswordIconClick,
-        })} `;
-    }
-    _getFeatureTemplateByInputType() {
-        switch (this.type) {
-            case InputType.SEARCH:
-                return this._getInputSearchFeatureTemplate();
-            case InputType.TEXT:
-                return this._getInputTextFeatureTemplate();
-            case InputType.PASSWORD:
-                return this._getInputPasswordFeatureTemplate();
-            default:
-                return html `${nothing}`;
-        }
-    }
-    _getInputElementClasses() {
-        const hasIconRight = this.type === InputType.PASSWORD || this.type === InputType.TEXT
-            ? !!this.iconRight
-            : false;
-        return {
-            't-input': true,
-            't-textarea': this.type === InputType.TEXT_AREA,
-            'with-title': !!this.title,
-            'with-icon-right': hasIconRight,
-            [`with-${this.descriptionType}`]: this.descriptionType !== DescriptionType.TEXT,
-        };
-    }
-    _getInputContainerClasses() {
-        return {
-            't-input-container': true,
-            't-textarea-container': this.type === InputType.TEXT_AREA,
-        };
-    }
-    _getMainContainerClasses() {
-        return {
-            't-textarea-main-container': this.type === InputType.TEXT_AREA,
-        };
-    }
-    _setIdInput() {
-        return uuidv4();
-    }
-    _getInputTemplate() {
-        return html `<input
-      id=${this._inputId}
-      type="text"
-      class="${classMap(this._getInputElementClasses())}"
-      ?disabled="${this.disabled}"
-      ?readonly="${this.readonly}"
-      .value="${this.value}"
-      .type="${this.type}"
-      placeholder="${this.placeholder || ' '}"
-      maxlength="${this.maxlength}"
-      @input="${this._handleInput}"
-      @blur="${this._handleBlur}"
-    >
-    </input>
-    ${this.title
-            ? html `<label for=${this._inputId} class="t-title"
-            >${this.title}</label
-          >`
-            : nothing}
-    ${this._getFeatureTemplateByInputType()}
-    `;
-    }
-    _getLetterCounterTemplate() {
-        if (!this._hasLetterCounter()) {
-            return html `${nothing}`;
-        }
-        return html `<div class="t-letter-counter">
-      ${this.maxlength
-            ? html `${this._letterCounter}/${this.maxlength}`
-            : nothing}
-    </div> `;
-    }
-    _hasLetterCounter() {
-        return (this.type === InputType.TEXT_AREA &&
-            typeof this.maxlength === 'number' &&
-            this.maxlength >= 0);
-    }
-    _getTextAreaTemplate() {
-        return html `<textarea
-        id="${this._inputId}"
-        class="${classMap(this._getInputElementClasses())}"
-        ?disabled="${this.disabled}"
-        ?readonly="${this.readonly}"
-        .value="${this.value}"
-        placeholder="${this.placeholder}"
-        maxlength="${this.maxlength}"
-        @input="${this._handleInput}"
-        @blur="${this._handleBlur}"
-      ></textarea>
-      ${this.title
-            ? html `<label for=${this._inputId} class="t-title"
-            >${this.title}</label
-          >`
-            : nothing} `;
-    }
-    _getIconDescriptionTemplate() {
-        if (!this.descriptionType ||
-            this.descriptionType === DescriptionType.TEXT) {
-            return html `${nothing}`;
-        }
-        return html `<tuix-icon
-      size="${IconSizeVariant.SMALL}"
-      name="${IconByDescriptionType[this.descriptionType]}"
-      color="${this.dark
-            ? IconDescriptionColorDark[this.descriptionType]
-            : IconDescriptionColorLight[this.descriptionType]}"
-    >
-    </tuix-icon>`;
-    }
-    _getDescriptionTemplate() {
-        const isValidDescriptionType = this._hasValidDescriptionType();
-        if (!isValidDescriptionType) {
-            return html `<div></div>`;
-        }
-        const defaultDescription = {
-            [DescriptionType.WARNING]: 'Warning',
-            [DescriptionType.ERROR]: 'Error',
-            [DescriptionType.SUCCESS]: 'Success',
-            [DescriptionType.LOADING]: 'Loading',
-            [DescriptionType.TEXT]: '',
-        };
-        return html `<div class="t-input-description">
-      ${this._getIconDescriptionTemplate()}
-      <span
-        >${this.description ?? defaultDescription[this.descriptionType]}</span
-      >
-    </div>`;
-    }
-    _hasValidDescriptionType() {
-        return Object.values(DescriptionType).includes(this.descriptionType);
-    }
-    _getDescriptionContainerTemplate() {
-        const hasLetterCounter = this._hasLetterCounter();
-        const hasDescription = this._hasValidDescriptionType() &&
-            (this.descriptionType === DescriptionType.TEXT
-                ? !!this.description
-                : true);
-        if (!hasLetterCounter && !hasDescription) {
-            return html `${nothing}`;
-        }
-        return html `<div class="t-input-description-container">
-      ${this._getDescriptionTemplate()} ${this._getLetterCounterTemplate()}
-    </div>`;
-    }
-    render() {
-        if (this._previousType !== this.type) {
-            this._previousType = this.type;
-            this._type = this.type;
-        }
-        if (this._previousValue !== this.value) {
-            this._previousValue = this.value;
-            this._letterCounter = this.value.length;
-        }
-        return html `<div class="${classMap(this._getMainContainerClasses())}">
-      <div
-        class="${classMap(this._getInputContainerClasses())}"
-        @click="${this._handleClickOnInput}"
-      >
-        ${this.type === InputType.TEXT_AREA
-            ? this._getTextAreaTemplate()
-            : this._getInputTemplate()}
-      </div>
-      ${this._getDescriptionContainerTemplate()}
-    </div>`;
-    }
-    updated(changedProperties) {
-        for (const [propName] of changedProperties) {
-            if (this.disabled || this.readonly)
-                break;
-            if (String(propName) !== 'autofocus')
-                continue;
-            if (this.autofocus) {
-                this._inputElement.focus();
-            }
-        }
-    }
-};
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TuixInput.prototype, "disabled", void 0);
-__decorate([
-    property({ type: IconName })
-], TuixInput.prototype, "iconRight", void 0);
-__decorate([
-    property({ type: String })
-], TuixInput.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], TuixInput.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: String })
-], TuixInput.prototype, "title", void 0);
-__decorate([
-    property({ type: InputType })
-], TuixInput.prototype, "type", void 0);
-__decorate([
-    property({ type: Number })
-], TuixInput.prototype, "maxlength", void 0);
-__decorate([
-    property({ type: String })
-], TuixInput.prototype, "description", void 0);
-__decorate([
-    property({ type: DescriptionType })
-], TuixInput.prototype, "descriptionType", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TuixInput.prototype, "dark", void 0);
-__decorate([
-    property({ type: Boolean })
-], TuixInput.prototype, "readonly", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TuixInput.prototype, "autofocus", void 0);
-__decorate([
-    query('.t-input-container .t-input')
-], TuixInput.prototype, "_inputElement", void 0);
-__decorate([
-    state()
-], TuixInput.prototype, "_type", void 0);
-__decorate([
-    state()
-], TuixInput.prototype, "_letterCounter", void 0);
-TuixInput = __decorate([
-    customElement('tuix-input')
-], TuixInput);
-export { TuixInput };

package/package-build/src/tuix-input/TuixInput.styles.d.ts

@@ -1,8 +0,0 @@
-export declare const hostStyles: import("lit").CSSResult;
-export declare const inputComponentStyles: import("lit").CSSResult;
-export declare const inputFontStyles: import("lit").CSSResult;
-export declare const inputColorStyles: import("lit").CSSResult;
-export declare const inputTitleStyles: import("lit").CSSResult;
-export declare const inputIconStyles: import("lit").CSSResult;
-export declare const inputSearchStyles: import("lit").CSSResult;
-export declare const inputDescriptionStyles: import("lit").CSSResult;