tuix-webcomponents 0.0.22 → 0.0.25

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

@@ -0,0 +1,59 @@
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
+import { Palette } from '../../utils/colors';
+import { DarkPalette } from '../../utils/darkColors';
+export var ToastType;
+(function (ToastType) {
+    ToastType["NONE"] = "none";
+    ToastType["TEXT"] = "text";
+    ToastType["WARNING"] = "warning";
+    ToastType["ERROR"] = "error";
+    ToastType["SUCCESS"] = "success";
+})(ToastType || (ToastType = {}));
+export const toastBgColorMap = {
+    [ToastType.TEXT]: Palette.WHITE,
+    [ToastType.WARNING]: Palette.VALIDATION_50,
+    [ToastType.ERROR]: Palette.ERROR_50,
+    [ToastType.SUCCESS]: Palette.SUCCESS_50,
+};
+export const toastBgDarkColorMap = {
+    [ToastType.TEXT]: Palette.PRIMARY_950,
+    [ToastType.WARNING]: DarkPalette.VALIDATION_50,
+    [ToastType.ERROR]: DarkPalette.ERROR_50,
+    [ToastType.SUCCESS]: DarkPalette.SUCCESS_50,
+};
+export const iconPropertiesMap = {
+    [ToastType.TEXT]: {
+        name: IconName.ARROW_DOWN,
+        color: Palette.BLACK,
+    },
+    [ToastType.WARNING]: {
+        name: IconName.TRIANGLE_EXCLAMATION,
+        color: Palette.VALIDATION,
+    },
+    [ToastType.ERROR]: {
+        name: IconName.CIRCLE_EXCLAMATION,
+        color: Palette.ERROR,
+    },
+    [ToastType.SUCCESS]: {
+        name: IconName.CIRCLE_CHECK,
+        color: Palette.SUCCESS,
+    },
+};
+export const iconDarkPropertiesMap = {
+    [ToastType.TEXT]: {
+        name: IconName.ARROW_DOWN,
+        color: Palette.WHITE,
+    },
+    [ToastType.WARNING]: {
+        name: IconName.TRIANGLE_EXCLAMATION,
+        color: DarkPalette.VALIDATION,
+    },
+    [ToastType.ERROR]: {
+        name: IconName.CIRCLE_EXCLAMATION,
+        color: DarkPalette.ERROR,
+    },
+    [ToastType.SUCCESS]: {
+        name: IconName.CIRCLE_CHECK,
+        color: DarkPalette.SUCCESS,
+    },
+};

package/dist/src/tuix-toggle-button/TuixToggleButton.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import '../tuix-text/TuixText.js';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
+export declare class TuixToggleButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    checked: boolean;
+    disabled: boolean;
+    dark: boolean;
+    label: string;
+    labelSide: CheckboxLabelSide;
+    private _onToggleButtonChange;
+    private _getFullContainerClasses;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/tuix-toggle-button/TuixToggleButton.js

@@ -0,0 +1,86 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import '../tuix-text/TuixText.js';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
+import { toggleButtonCheckmarkStyles, toggleButtonContainerStyles, toggleButtonHostStyles, toggleButtonInnerStyles, toggleButtonLabelStyles, } from './TuixToggleButton.styles';
+let TuixToggleButton = class TuixToggleButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.disabled = false;
+        this.dark = false;
+        this.label = '';
+        this.labelSide = CheckboxLabelSide.RIGHT;
+    }
+    static { this.styles = [
+        toggleButtonHostStyles,
+        toggleButtonContainerStyles,
+        toggleButtonCheckmarkStyles,
+        toggleButtonInnerStyles,
+        toggleButtonLabelStyles,
+    ]; }
+    _onToggleButtonChange(event) {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+                value: event.target.checked,
+                label: this.label,
+            },
+            bubbles: true,
+        }));
+    }
+    _getFullContainerClasses() {
+        return {
+            't-toggle-button-full-container': true,
+            't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,
+        };
+    }
+    render() {
+        return html `<label class="${classMap(this._getFullContainerClasses())}">
+      <div class="t-toggle-button-container">
+        <input
+          type="checkbox"
+          class="t-toggle-button"
+          .checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          @change="${this._onToggleButtonChange}"
+        />
+        <div class="t-toggle-button-checkmark">
+          <div class="t-toggle-button-inner"></div>
+        </div>
+      </div>
+      <div class="t-toggle-button-label">
+        <slot>
+          <tuix-text
+            size="${TextSize.FieldPlaceholder}"
+            color="${TextVariant.PRIMARY}"
+            ?dark="${this.dark}"
+          >
+            ${this.label}
+          </tuix-text>
+        </slot>
+      </div>
+    </label>`;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], TuixToggleButton.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixToggleButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixToggleButton.prototype, "dark", void 0);
+__decorate([
+    property({ type: String })
+], TuixToggleButton.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TuixToggleButton.prototype, "labelSide", void 0);
+TuixToggleButton = __decorate([
+    customElement('tuix-toggle-button')
+], TuixToggleButton);
+export { TuixToggleButton };

package/dist/src/tuix-toggle-button/TuixToggleButton.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const toggleButtonHostStyles: import("lit").CSSResult;
+export declare const toggleButtonContainerStyles: import("lit").CSSResult;
+export declare const toggleButtonCheckmarkStyles: import("lit").CSSResult;
+export declare const toggleButtonInnerStyles: import("lit").CSSResult;
+export declare const toggleButtonLabelStyles: import("lit").CSSResult;

package/dist/src/tuix-toggle-button/TuixToggleButton.styles.js

@@ -0,0 +1,134 @@
+import { css, unsafeCSS } from 'lit';
+import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';
+import { Palette } from '../utils/colors';
+import { DarkPalette } from '../utils/darkColors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+export const toggleButtonHostStyles = css `
+  ${hostStyles}
+  :host {
+    --t-bg-color-primary: ${unsafeCSS(Palette.PRIMARY_300)};
+    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};
+    --t-toggle-shadow-color-focus: rgba(142, 141, 208, 0.16);
+  }
+  :host([dark]) {
+    --t-bg-color-primary: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-bg-color-inner: ${unsafeCSS(DarkPalette.WHITE)};
+  }
+  :host([dark][disabled]) {
+    --t-bg-color-inner: ${unsafeCSS(DarkPalette.MAIN)};
+  }
+`;
+export const toggleButtonContainerStyles = css `
+  .t-toggle-button-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-toggle-button-full-container {
+    cursor: not-allowed;
+  }
+  .t-toggle-button-container {
+    --t-toggle-button-size-box: 3rem;
+    --t-toggle-button-shadow-width: 2px;
+    --t-toggle-inner-radio: 1rem;
+    display: block;
+    position: relative;
+    height: calc(var(--t-toggle-button-size-box) / 2);
+    width: var(--t-toggle-button-size-box);
+    min-width: var(--t-toggle-button-size-box);
+  }
+  .t-toggle-button-container .t-toggle-button {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+  .t-radio-button-full-container:not(.t-with-label-left) {
+    justify-content: flex-start;
+  }
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    .t-toggle-button-container {
+      --t-toggle-button-size-box: 2rem;
+      --t-toggle-button-shadow-width: 1px;
+      --t-toggle-inner-radio: 0.75rem;
+      margin-top: 1px;
+    }
+  }
+`;
+export const toggleButtonCheckmarkStyles = css `
+  .t-toggle-button-container .t-toggle-button-checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    height: calc(var(--t-toggle-button-size-box) / 2);
+    width: var(--t-toggle-button-size-box);
+    border-radius: 0.75rem;
+    background-color: var(--t-bg-color-primary);
+    box-sizing: border-box;
+  }
+  .t-toggle-button-container
+    .t-toggle-button:checked
+    ~ .t-toggle-button-checkmark {
+    background-color: var(--t-main-color-tuix);
+  }
+  .t-toggle-button-full-container:hover
+    .t-toggle-button-container
+    .t-toggle-button-checkmark {
+    box-shadow: 0px 4px 4px 0px var(--t-toggle-shadow-color-focus);
+  }
+  .t-toggle-button-container
+    .t-toggle-button:focus
+    ~ .t-toggle-button-checkmark {
+    box-shadow: 0 0 0px var(--t-toggle-button-shadow-width)
+      var(--t-stroke-color-focus);
+  }
+  .t-toggle-button-container
+    .t-toggle-button:disabled
+    ~ .t-toggle-button-checkmark {
+    background-color: var(--t-bg-color-disabled);
+    box-shadow: none;
+  }
+`;
+export const toggleButtonInnerStyles = css `
+  .t-toggle-button-container .t-toggle-button-checkmark .t-toggle-button-inner {
+    background-color: var(--t-bg-color-inner, ${unsafeCSS(Palette.WHITE)});
+    margin: auto auto auto calc(var(--t-toggle-button-shadow-width) * 2);
+    height: var(--t-toggle-inner-radio);
+    width: var(--t-toggle-inner-radio);
+    border-radius: 50%;
+    display: block;
+    transition: 0.3s;
+  }
+  .t-toggle-button-container
+    .t-toggle-button:checked
+    ~ .t-toggle-button-checkmark
+    .t-toggle-button-inner {
+    transform: translateX(
+      calc(
+        var(--t-toggle-button-size-box) - var(--t-toggle-inner-radio) -
+          var(--t-toggle-button-shadow-width) * 4
+      )
+    );
+  }
+`;
+export const toggleButtonLabelStyles = css `
+  .t-toggle-button-label {
+    display: block;
+    color: var(--t-text-color-label);
+    margin-left: 0.625rem;
+  }
+  .t-toggle-button-full-container.t-with-label-left {
+    flex-direction: row-reverse;
+    justify-content: var(--t-label-left-default-justify, space-between);
+  }
+  .t-toggle-button-full-container.t-with-label-left .t-toggle-button-label {
+    margin-right: 0.625rem;
+    margin-left: 0;
+  }
+`;

package/dist/src/tuix-toggle-button/interfaces/tuix-toggle.interface.d.ts

@@ -0,0 +1,2 @@
+import { type CustomEventTuixCheckbox } from '../../tuix-checkbox/interfaces/tuix-checkbox.interface';
+export type CustomEventTuixToggle = CustomEventTuixCheckbox;

package/dist/src/tuix-toggle-button/interfaces/tuix-toggle.interface.js

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

package/dist/src/utils/colors.d.ts

@@ -1,12 +1,30 @@
-export declare const palette: Record<string, string>;
-export declare enum TextVariant {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
-    GREY = "grey",
-    LIGHT_GREY = "light_grey",
-    DISABLED = "disabled",
-    VALIDATION = "validation",
-    ERROR = "error",
-    SUCCESS = "success"
+export declare enum Palette {
+    PRIMARY_50 = "#F2F3FA",
+    PRIMARY_100 = "#E3E5F4",
+    PRIMARY_200 = "#C7CAE8",
+    PRIMARY_300 = "#AAAFE0",
+    PRIMARY_400 = "#8B90D2",
+    MAIN = "#585A9D",
+    DARK_MAIN = "#6F73B8",
+    PRIMARY_600 = "#4E508E",
+    PRIMARY_700 = "#404277",
+    PRIMARY_800 = "#32345F",
+    PRIMARY_900 = "#22233F",
+    PRIMARY_950 = "#1F1E33",
+    SECONDARY = "#BBADFF",
+    WHITE = "#FFFFFF",
+    BLACK = "#121212",
+    NEUTRAL_200 = "#FAFAFA",
+    NEUTRAL_600 = "#b6b6b6",
+    SUCCESS = "#439F6E",
+    SUCCESS_50 = "#F1F9F5",
+    VALIDATION = "#FFB82E",
+    VALIDATION_50 = "#FFFBF4",
+    VALIDATION_200 = "#FFEAC1",
+    ERROR = "#F93232",
+    ERROR_50 = "#FFF5F5",
+    ERROR_200 = "#FFD8D8",
+    SECTION_BG = "#FAFAFA",
+    DISABLED_BG = "#EBEAF4",
+    SHADOW = "rgba(66, 79, 101, 0.16)"
 }
-export declare const colorText: Record<TextVariant, string>;

package/dist/src/utils/colors.js

@@ -1,46 +1,31 @@
-export const palette = {
-    primary_50: '#F5F5FA',
-    primary_100: '#EBEAF4',
-    primary_200: '#D1D1E6',
-    primary_300: '#A8A9D1',
-    main: '#585A9D',
-    primary_600: '#454584',
-    primary_700: '#3A396B',
-    primary_800: '#32325A',
-    primary_900: '#2E2D4D',
-    primary_950: '#1F1E33',
-    secondary: '#BBADFF',
-    white: '#FFFFFF',
-    black: '#121212',
-    neutral_200: '#C9C8D3',
-    neutral_600: '#8A8894',
-    success: '#439F6E',
-    validation: '#FFB82E',
-    validation_50: '#FFFBF4',
-    validation_200: '#FFEAC1',
-    error: '#F93232',
-    error_50: '#FFF5F5',
-    error_200: '#FFD8D8',
-};
-export var TextVariant;
-(function (TextVariant) {
-    TextVariant["PRIMARY"] = "primary";
-    TextVariant["SECONDARY"] = "secondary";
-    TextVariant["GREY"] = "grey";
-    TextVariant["LIGHT_GREY"] = "light_grey";
-    TextVariant["DISABLED"] = "disabled";
-    TextVariant["VALIDATION"] = "validation";
-    TextVariant["ERROR"] = "error";
-    TextVariant["SUCCESS"] = "success";
-})(TextVariant || (TextVariant = {}));
-export const colorText = {
-    [TextVariant.PRIMARY]: palette.black,
-    [TextVariant.SECONDARY]: palette.white,
-    [TextVariant.GREY]: palette.neutral_600,
-    [TextVariant.LIGHT_GREY]: palette.neutral_200,
-    [TextVariant.DISABLED]: palette.primary_200,
-    [TextVariant.VALIDATION]: palette.validation,
-    [TextVariant.ERROR]: palette.error,
-    [TextVariant.SUCCESS]: palette.success,
-};
-//# sourceMappingURL=colors.js.map
+export var Palette;
+(function (Palette) {
+    Palette["PRIMARY_50"] = "#F2F3FA";
+    Palette["PRIMARY_100"] = "#E3E5F4";
+    Palette["PRIMARY_200"] = "#C7CAE8";
+    Palette["PRIMARY_300"] = "#AAAFE0";
+    Palette["PRIMARY_400"] = "#8B90D2";
+    Palette["MAIN"] = "#585A9D";
+    Palette["DARK_MAIN"] = "#6F73B8";
+    Palette["PRIMARY_600"] = "#4E508E";
+    Palette["PRIMARY_700"] = "#404277";
+    Palette["PRIMARY_800"] = "#32345F";
+    Palette["PRIMARY_900"] = "#22233F";
+    Palette["PRIMARY_950"] = "#1F1E33";
+    Palette["SECONDARY"] = "#BBADFF";
+    Palette["WHITE"] = "#FFFFFF";
+    Palette["BLACK"] = "#121212";
+    Palette["NEUTRAL_200"] = "#FAFAFA";
+    Palette["NEUTRAL_600"] = "#b6b6b6";
+    Palette["SUCCESS"] = "#439F6E";
+    Palette["SUCCESS_50"] = "#F1F9F5";
+    Palette["VALIDATION"] = "#FFB82E";
+    Palette["VALIDATION_50"] = "#FFFBF4";
+    Palette["VALIDATION_200"] = "#FFEAC1";
+    Palette["ERROR"] = "#F93232";
+    Palette["ERROR_50"] = "#FFF5F5";
+    Palette["ERROR_200"] = "#FFD8D8";
+    Palette["SECTION_BG"] = "#FAFAFA";
+    Palette["DISABLED_BG"] = "#EBEAF4";
+    Palette["SHADOW"] = "rgba(66, 79, 101, 0.16)";
+})(Palette || (Palette = {}));

package/dist/src/utils/darkColors.d.ts

@@ -1 +1,32 @@
-export declare const darkPalette: Record<string, string>;
+export declare enum DarkPalette {
+    PRIMARY_50 = "#F4F5FB",
+    PRIMARY_100 = "#E3E5F4",
+    PRIMARY_200 = "#C7CAE8",
+    PRIMARY_300 = "#AAAFE0",
+    PRIMARY_400 = "#8B90D2",
+    MAIN = "#6F73B8",
+    DARK_MAIN = "#6F73B8",
+    PRIMARY_600 = "#5C60A4",
+    PRIMARY_700 = "#4A4E8E",
+    PRIMARY_800 = "#32355F",
+    PRIMARY_900 = "#181A32",
+    PRIMARY_950 = "#1F1E33",
+    SECONDARY = "#BBADFF",
+    WHITE = "#FFFFFF",
+    BLACK = "#0F1117",
+    NEUTRAL_200 = "#C9C8D3",
+    NEUTRAL_600 = "#8A8894",
+    SUCCESS = "#439F6E",
+    SUCCESS_50 = "rgba(241, 249, 245, 0.30)",
+    VALIDATION = "#FFD489",
+    VALIDATION_50 = "rgba(255, 212, 137, 0.20)",
+    VALIDATION_200 = "#FFEAC1",
+    ERROR = "#FF8486",
+    ERROR_50 = "rgba(255, 132, 134, 0.20)",
+    ERROR_200 = "#FFD8D8",
+    SECTION_BG = "#0E0E0E",
+    ELEVATION_1 = "#141722",
+    ELEVATION_2 = "#181C29",
+    ELEVATION_3 = "#1D2131",
+    ELEVATION_4 = "#23273A"
+}

package/dist/src/utils/darkColors.js

@@ -1,11 +1,33 @@
-import { palette } from './colors';
-export const darkPalette = {
-    ...palette,
-    main: '#7A7CB6',
-    success: '#82C5A9',
-    validation: '#FFD489',
-    error: '#FF8486',
-    error_50: '#FFF5F5',
-    error_200: '#FFD8D8',
-};
-//# sourceMappingURL=darkColors.js.map
+export var DarkPalette;
+(function (DarkPalette) {
+    DarkPalette["PRIMARY_50"] = "#F4F5FB";
+    DarkPalette["PRIMARY_100"] = "#E3E5F4";
+    DarkPalette["PRIMARY_200"] = "#C7CAE8";
+    DarkPalette["PRIMARY_300"] = "#AAAFE0";
+    DarkPalette["PRIMARY_400"] = "#8B90D2";
+    DarkPalette["MAIN"] = "#6F73B8";
+    DarkPalette["DARK_MAIN"] = "#6F73B8";
+    DarkPalette["PRIMARY_600"] = "#5C60A4";
+    DarkPalette["PRIMARY_700"] = "#4A4E8E";
+    DarkPalette["PRIMARY_800"] = "#32355F";
+    DarkPalette["PRIMARY_900"] = "#181A32";
+    DarkPalette["PRIMARY_950"] = "#1F1E33";
+    DarkPalette["SECONDARY"] = "#BBADFF";
+    DarkPalette["WHITE"] = "#FFFFFF";
+    DarkPalette["BLACK"] = "#0F1117";
+    DarkPalette["NEUTRAL_200"] = "#C9C8D3";
+    DarkPalette["NEUTRAL_600"] = "#8A8894";
+    DarkPalette["SUCCESS"] = "#439F6E";
+    DarkPalette["SUCCESS_50"] = "rgba(241, 249, 245, 0.30)";
+    DarkPalette["VALIDATION"] = "#FFD489";
+    DarkPalette["VALIDATION_50"] = "rgba(255, 212, 137, 0.20)";
+    DarkPalette["VALIDATION_200"] = "#FFEAC1";
+    DarkPalette["ERROR"] = "#FF8486";
+    DarkPalette["ERROR_50"] = "rgba(255, 132, 134, 0.20)";
+    DarkPalette["ERROR_200"] = "#FFD8D8";
+    DarkPalette["SECTION_BG"] = "#0E0E0E";
+    DarkPalette["ELEVATION_1"] = "#141722";
+    DarkPalette["ELEVATION_2"] = "#181C29";
+    DarkPalette["ELEVATION_3"] = "#1D2131";
+    DarkPalette["ELEVATION_4"] = "#23273A";
+})(DarkPalette || (DarkPalette = {}));

package/dist/src/utils/hex-rgb.js

@@ -13,4 +13,3 @@ export const hexToRgb = (hex) => {
             b: 0,
         };
 };
-//# sourceMappingURL=hex-rgb.js.map

package/dist/src/utils/interfaces/detail-value.interface.d.ts

@@ -0,0 +1,3 @@
+export interface DetailValue<T = unknown> {
+    value: T;
+}

package/dist/src/utils/interfaces/detail-value.interface.js

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

package/dist/src/utils/mainVariant.enum.js

@@ -3,4 +3,3 @@ export var MainVariant;
     MainVariant["PRIMARY"] = "primary";
     MainVariant["SECONDARY"] = "secondary";
 })(MainVariant || (MainVariant = {}));
-//# sourceMappingURL=mainVariant.enum.js.map

package/dist/src/utils/screenSizes.enum.d.ts

@@ -1,4 +1,4 @@
 export declare enum ScreenSizes {
-    TABLET = 640,
-    MOBILE = 320
+    TABLET = 1280,
+    MOBILE = 640
 }

package/dist/src/utils/screenSizes.enum.js

@@ -1,7 +1,5 @@
-// Sizes in px
 export var ScreenSizes;
 (function (ScreenSizes) {
-    ScreenSizes[ScreenSizes["TABLET"] = 640] = "TABLET";
-    ScreenSizes[ScreenSizes["MOBILE"] = 320] = "MOBILE";
+    ScreenSizes[ScreenSizes["TABLET"] = 1280] = "TABLET";
+    ScreenSizes[ScreenSizes["MOBILE"] = 640] = "MOBILE";
 })(ScreenSizes || (ScreenSizes = {}));
-//# sourceMappingURL=screenSizes.enum.js.map

package/dist/src/utils/slottedClassName.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (className: string) => string;
+export default _default;

package/dist/src/utils/slottedClassName.js

@@ -0,0 +1 @@
+export default (className) => `.${className}, .${className} ::slotted(*)`;