tuix-webcomponents 0.67.0 → 0.69.0

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

@@ -0,0 +1,52 @@
+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/dist/src/tuix-input/TuixInput.js

@@ -0,0 +1,370 @@
+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/dist/src/tuix-input/TuixInput.styles.d.ts

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