tuix-webcomponents 0.63.0 → 0.64.0

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

@@ -1,125 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-import { hostStyles } from '../tuix-input/TuixInput.styles';
-import { Palette } from '../utils/colors';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { DarkPalette } from '../utils/darkColors';
-export const dropdownHostStyles = css `
-  ${hostStyles}
-  :host {
-    --t-field-color-option: ${unsafeCSS(Palette.WHITE)};
-    --t-field-color-main: ${unsafeCSS(Palette.MAIN)};
-  }
-
-  :host .t-input-dropdown {
-    --t-field-font-weight: 300;
-    --t-field-font-size: 1rem;
-    --t-field-padding-x: 1rem;
-    --t-field-title-left-position: 1rem;
-  }
-
-  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-    :host .t-input-dropdown {
-      --t-field-font-size: 0.938rem;
-      --t-field-line-height: 1.125rem;
-    }
-  }
-
-  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    :host .t-input-dropdown {
-      --t-field-font-size: 0.813rem;
-      --t-field-line-height: 1rem;
-    }
-  }
-
-  :host([dark]) {
-    --t-field-color-option: ${unsafeCSS(DarkPalette.ELEVATION_2)};
-  }
-`;
-export const dropdownMainContainerStyles = css `
-  .t-dropdown-full-container {
-    position: relative;
-    font-family: 'Rubik', sans-serif;
-  }
-  .t-dropdown-container .t-input-dropdown {
-    --t-field-input-cursor: pointer;
-  }
-`;
-export const dropdownOptionStyles = css `
-  .t-options-container {
-    width: 100%;
-    position: absolute;
-    top: calc(100% + 2px);
-    left: 0;
-    border: none;
-    border-radius: 0 0 5px 5px;
-    background-color: var(--t-field-color-option);
-    visibility: collapse;
-    overflow-y: auto;
-    max-height: 250px;
-    color: var(--t-field-color-text);
-    box-shadow: 0px 2px 8px 0px ${unsafeCSS(Palette.SHADOW)};
-    z-index: 9999;
-  }
-  .t-options-container::-webkit-scrollbar {
-    width: 0.75rem;
-  }
-  .t-options-container::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-  .t-options-container::-webkit-scrollbar-thumb {
-    background-color: ${unsafeCSS(Palette.PRIMARY_100)};
-    border-radius: 0.25rem;
-    border: 0.188rem solid transparent;
-    background-clip: content-box;
-  }
-  .t-options-container.show {
-    visibility: visible;
-  }
-  .t-options-container.show.t-with-description {
-    top: calc(100% + 2px - 1.5rem);
-  }
-  @media only screen and (max-height: 500px) {
-    .t-options-container {
-      max-height: 50vh;
-    }
-  }
-  .t-dropdown-option {
-    padding: var(--t-field-padding-y) 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    line-height: 1.25rem;
-    font-weight: 300;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-  .t-dropdown-option.t-option-hover {
-    background-color: var(--t-field-color-form);
-  }
-  .t-dropdown-option.t-option-selected {
-    color: var(--t-field-color-main);
-  }
-  .t-dropdown-option.t-option-filtered {
-    display: none;
-  }
-  .t-dropdown-option:focus {
-    outline: none;
-  }
-  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-    .t-dropdown-option {
-      font-size: 0.938rem;
-      line-height: 1.125rem;
-      --t-field-padding-y: 1.063rem;
-      --t-field-padding-top: 1.5rem;
-    }
-  }
-  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    .t-dropdown-option {
-      font-size: 0.813rem;
-      line-height: 1rem;
-      --t-field-padding-y: 1rem;
-      --t-field-padding-top: 1.375rem;
-    }
-  }
-`;

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

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

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

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

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

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

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';
-import { TextVariant } from '../tuix-text/enums/tuix-text.enums';
-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 { html } from 'lit';
-import { IconName } from './enums/tuix-icon.enums';
-export declare const iconTemplate: (name?: IconName, color?: string, fill?: string) => ReturnType<typeof html>;
-type IconContentMapType = Record<IconName, string>;
-export declare const iconContentMap: IconContentMapType;
-export {};

package/dist/src/tuix-icon/TuixIcon.js

@@ -1,79 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { IconName, IconSizeVariant, iconSize } from './enums/tuix-icon.enums';
-import { iconTemplate } from './TuixIcon.icons';
-import { Palette } from '../utils/colors';
-import { TextVariant, colorText, colorTextDark, } from '../tuix-text/enums/tuix-text.enums';
-let TuixIcon = class TuixIcon extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.name = IconName.ARROW_DOWN;
-        this.size = IconSizeVariant.SMALL;
-        this.dark = false;
-    }
-    static { this.styles = css `
-    .icon-component {
-      width: 24px;
-      height: 24px;
-      display: block;
-    }
-
-    svg {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-  `; }
-    _getSelectedColor(color) {
-        let selectedColor = color || this.color || TextVariant.PRIMARY;
-        if (Object.values(TextVariant).includes(selectedColor)) {
-            const colorMap = this.dark ? colorTextDark : colorText;
-            const nameColor = colorMap[selectedColor];
-            return nameColor;
-        }
-        if (Object.prototype.hasOwnProperty.call(Palette, selectedColor)) {
-            const nameColor = selectedColor;
-            selectedColor = Palette[nameColor];
-        }
-        return selectedColor;
-    }
-    _getSelectedFill() {
-        return this.fill ? this._getSelectedColor(this.fill) : undefined;
-    }
-    _getIconTemplate() {
-        return iconTemplate(this.name, this._getSelectedColor(), this._getSelectedFill());
-    }
-    render() {
-        const selectedSize = iconSize[this.size] ?? iconSize[IconSizeVariant.SMALL];
-        const dynamicStyles = {
-            width: selectedSize,
-            height: selectedSize,
-        };
-        return html `
-      <div class="icon-component" style="${styleMap(dynamicStyles)}">
-        ${this._getIconTemplate()}
-      </div>
-    `;
-    }
-};
-__decorate([
-    property({ type: IconName })
-], TuixIcon.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], TuixIcon.prototype, "color", void 0);
-__decorate([
-    property({ type: IconSizeVariant })
-], TuixIcon.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean })
-], TuixIcon.prototype, "dark", void 0);
-__decorate([
-    property({ type: String })
-], TuixIcon.prototype, "fill", void 0);
-TuixIcon = __decorate([
-    customElement('tuix-icon')
-], TuixIcon);
-export { TuixIcon };

package/dist/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/dist/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/dist/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/dist/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/dist/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;
-}