tuix-webcomponents 0.0.21 → 0.0.24

package/dist/src/tuix-text/TuixText.js

@@ -1,158 +1,66 @@
 import { __decorate } from "tslib";
-import { html, css, LitElement } from 'lit';
+import { html, css, LitElement, unsafeCSS } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { customElement, property } from 'lit/decorators.js';
-import { TextType, TextColor } from '../enums/tuix-text.enums.js';
-import { ColorText } from '../utils/colors.js';
+import { TextSize, TextVariant, colorText, colorTextDark, } from './enums/tuix-text.enums.js';
+import { linkFontStyles, textStyles } from './TuixText.styles.js';
+import { buttonSizeStyles } from '../tuix-button/TuixButton.styles.js';
+import slottedClassName from '../utils/slottedClassName.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { LINK_TEXT_COLOR_VAR_NAME } from '../tuix-link/TuixLink.styles.js';
 let TuixText = class TuixText extends LitElement {
-    getTextClass() {
-        return `${this.type} ${this.size}`;
+    constructor() {
+        super(...arguments);
+        this.size = TextSize.Body1;
+        this.color = TextVariant.PRIMARY;
+        this.dark = false;
+        this._getStyleMap = () => {
+            return {
+                color: `var(${LINK_TEXT_COLOR_VAR_NAME}, ${this._getTextColor()})`,
+            };
+        };
+        this._getClassMap = () => {
+            return {
+                text: true,
+                [this.size]: true,
+            };
+        };
+    }
+    static { this.styles = [
+        css `
+      ${unsafeCSS(slottedClassName('text'))} {
+        font-family: 'Rubik', sans-serif;
+        display: inline;
+        margin: 0;
+      }
+    `,
+        textStyles,
+        linkFontStyles,
+        buttonSizeStyles,
+    ]; }
+    _getTextColor() {
+        const colorMap = this.dark ? colorTextDark : colorText;
+        return colorMap[this.color || TextVariant.PRIMARY];
     }
     render() {
         return html ` <div
-      class="text ${this.getTextClass()}"
-      style="${styleMap({
-            color: ColorText[this.color || TextColor.Primary],
-        })}"
+      class="${classMap(this._getClassMap())}"
+      style="${styleMap(this._getStyleMap())}"
     >
       <slot></slot>
     </div>`;
     }
 };
-TuixText.styles = [
-    css `
-      .text {
-        font-family: 'Rubik', sans-serif;
-      }
-
-      .text.headline.xl {
-        font-size: 4rem;
-        font-weight: 600;
-        line-height: 4.4rem;
-      }
-
-      .text.headline.l {
-        font-size: 3.5rem;
-        font-weight: 600;
-        line-height: 4.2rem;
-      }
-
-      .text.headline.m {
-        font-size: 2.25rem;
-        font-weight: 500;
-        line-height: 2.7rem;
-      }
-
-      .text.headline.s {
-        font-size: 1.5rem;
-        font-weight: 500;
-        line-height: 1.8rem;
-      }
-
-      .text.headline.xs {
-        font-size: 1.125rem;
-        font-weight: 500;
-        line-height: 1.35;
-      }
-
-      .text.body.m {
-        font-size: 1rem;
-        font-weight: 300;
-        line-height: 1.4rem;
-      }
-
-      .text.body.s {
-        font-size: 0.875rem;
-        font-weight: 300;
-        line-height: 1.225rem;
-      }
-
-      .text.button_link.xl {
-        font-size: 1.25rem;
-        font-weight: 400;
-        line-height: 1.5rem;
-      }
-
-      .text.button_link.l {
-        font-size: 1.25rem;
-        font-weight: 400;
-        line-height: 1.5rem;
-      }
-
-      @media only screen and (max-width: 40rem) {
-        .text.button_link.m {
-          font-size: 1rem;
-          font-weight: 400;
-          line-height: 1.25rem;
-        }
-
-        .text.body.m {
-          line-height: 1.3rem;
-        }
-
-        .text.body.s {
-          line-height: 1.1375rem;
-        }
-
-        .text.headline.xl {
-          font-size: 3rem;
-          line-height: 3.3rem;
-        }
-        .text.headline.l {
-          font-size: 2rem;
-          line-height: 2.4rem;
-        }
-        .text.headline.m {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
-        }
-        .text.headline.s {
-          font-size: 1.125rem;
-          line-height: 1.35rem;
-        }
-        .text.headline.xs {
-          font-size: 1rem;
-          line-height: 1.2rem;
-        }
-      }
-
-      @media only screen and (max-width: 20rem) {
-        .text.button_link.s {
-          font-size: 0.875rem;
-          font-weight: 400;
-          line-height: 1rem;
-        }
-        .text.button_link.xs {
-          font-size: 0.875rem;
-          font-weight: 400;
-          line-height: 1rem;
-        }
-        .text.headline.xl {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
-        }
-        .text.headline.l {
-          font-size: 1.375rem;
-          line-height: 1.65rem;
-        }
-        .text.headline.m {
-          font-size: 1.25rem;
-          line-height: 1.5rem;
-        }
-      }
-    `,
-];
 __decorate([
-    property({ type: String })
+    property({ type: TextSize })
 ], TuixText.prototype, "size", void 0);
 __decorate([
-    property({ type: TextColor })
+    property({ type: TextVariant })
 ], TuixText.prototype, "color", void 0);
 __decorate([
-    property({ type: TextType })
-], TuixText.prototype, "type", void 0);
+    property({ type: Boolean, reflect: true })
+], TuixText.prototype, "dark", void 0);
 TuixText = __decorate([
     customElement('tuix-text')
 ], TuixText);
 export { TuixText };
-//# sourceMappingURL=TuixText.js.map

package/dist/src/tuix-text/TuixText.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const linkFontStyles: import("lit").CSSResult;
+export declare const textStyles: import("lit").CSSResult;

package/dist/src/tuix-text/TuixText.styles.js

@@ -0,0 +1,195 @@
+import { css, unsafeCSS } from 'lit';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { TextSize } from './enums/tuix-text.enums.js';
+import slottedClassName from '../utils/slottedClassName.js';
+export const linkFontStyles = css `
+  ${unsafeCSS(`
+  ${slottedClassName(TextSize.Link)} {
+    font-family: 'Rubik', sans-serif;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+  }
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    ${slottedClassName(TextSize.Link)} {
+      font-size: 0.938rem;
+      line-height: 1.125rem;
+    }
+  }
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    ${slottedClassName(TextSize.Link)} {
+      font-size: 0.875rem;
+      line-height: 1rem;
+    }
+  }
+`)}
+`;
+export const textStyles = css `
+  ${unsafeCSS(`
+  ${slottedClassName(TextSize.XXL)} {
+    font-size: 6rem;
+    font-weight: 600;
+    line-height: 6.25rem;
+  }
+  ${slottedClassName(TextSize.XL)} {
+    font-size: 3.375rem;
+    font-weight: 600;
+    line-height: 3.688rem;
+  }
+
+  ${slottedClassName(TextSize.L)} {
+    font-size: 2.813rem;
+    font-weight: 600;
+    line-height: 3.375rem;
+  }
+
+  ${slottedClassName(TextSize.M)} {
+    font-size: 2.313rem;
+    font-weight: 600;
+    line-height: 2.75rem;
+  }
+
+  ${slottedClassName(TextSize.S)} {
+    font-size: 1.938rem;
+    font-weight: 600;
+    line-height: 2.313rem;
+  }
+
+  ${slottedClassName(TextSize.XS)} {
+    font-size: 1.313rem;
+    font-weight: 600;
+    line-height: 1.563rem;
+  }
+
+  ${slottedClassName(TextSize.Body1)} {
+    font-size: 1.125rem;
+    font-weight: 300;
+    line-height: 1.688rem;
+  }
+
+  ${slottedClassName(TextSize.Body2)} {
+    font-size: 0.938rem;
+    font-weight: 300;
+    line-height: 1.313rem;
+  }
+
+  ${slottedClassName(TextSize.BulletList)} {
+    font-size: 1.125rem;
+    font-weight: 300;
+    line-height: 1.375rem;
+  }
+
+  ${slottedClassName(TextSize.FieldPlaceholder)} {
+    font-size: 1rem;
+    font-weight: 300;
+    line-height: 1.25rem;
+  }
+
+  ${slottedClassName(TextSize.FieldTitle)} {
+    font-size: 0.75rem;
+    font-weight: 300;
+    line-height: 0.875rem;
+  }
+
+  ${slottedClassName(TextSize.FieldDescription)} {
+    font-size: 0.75rem;
+    font-weight: 300;
+    line-height: 0.875rem;
+  }
+
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    ${slottedClassName(TextSize.XXL)} {
+      font-size: 3rem;
+      font-weight: 600;
+      line-height: 3.3125rem;
+    }
+    ${slottedClassName(TextSize.XL)} {
+      font-size: 3rem;
+      line-height: 3.313rem;
+    }
+    ${slottedClassName(TextSize.L)} {
+      font-size: 2.5rem;
+      line-height: 3rem;
+    }
+    ${slottedClassName(TextSize.M)} {
+      font-size: 2.063rem;
+      line-height: 2.5rem;
+    }
+    ${slottedClassName(TextSize.S)} {
+      font-size: 1.75rem;
+      line-height: 2.125rem;
+    }
+    ${slottedClassName(TextSize.XS)} {
+      font-size: 1.188rem;
+      line-height: 1.438rem;
+    }
+
+    ${slottedClassName(TextSize.Body1)} {
+      font-size: 1rem;
+      line-height: 1.5rem;
+    }
+
+    ${slottedClassName(TextSize.Body2)} {
+      font-size: 0.875rem;
+      line-height: 1.125rem;
+    }
+
+    ${slottedClassName(TextSize.BulletList)} {
+      font-size: 1rem;
+      line-height: 1.1875rem;
+    }
+
+    ${slottedClassName(TextSize.FieldPlaceholder)} {
+      font-size: 0.938rem;
+      line-height: 1.125rem;
+    }
+  }
+
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    ${slottedClassName(TextSize.XXL)} {
+      font-size: 1.8125rem;
+      font-weight: 600;
+      line-height: 2rem;
+    }
+    ${slottedClassName(TextSize.XL)} {
+      font-size: 2.625rem;
+      line-height: 2.875rem;
+    }
+    ${slottedClassName(TextSize.L)} {
+      font-size: 2.188rem;
+      line-height: 2.4375rem;
+    }
+    ${slottedClassName(TextSize.M)} {
+      font-size: 1.813rem;
+      line-height: 2rem;
+    }
+    ${slottedClassName(TextSize.S)} {
+      font-size: 1.5rem;
+      line-height: 1.625rem;
+    }
+    ${slottedClassName(TextSize.XS)} {
+      font-size: 1.063rem;
+      line-height: 1.1875rem;
+    }
+    ${slottedClassName(TextSize.Body1)} {
+      font-size: 0.875rem;
+      font-weight: 300;
+      line-height: 1.313rem;
+    }
+    ${slottedClassName(TextSize.Body2)} {
+      font-size: 0.75rem;
+      line-height: 1rem;
+    }
+    ${slottedClassName(TextSize.BulletList)} {
+      font-size: 0.875rem;
+      font-weight: 300;
+      line-height: 1.0625rem;
+    }
+    ${slottedClassName(TextSize.FieldPlaceholder)} {
+      font-size: 0.875rem;
+      font-weight: 300;
+      line-height: 1rem;
+    }
+  }
+`)}
+`;

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

@@ -0,0 +1,36 @@
+export declare enum TextSize {
+    XXL = "xxl",
+    XL = "xl",
+    L = "l",
+    M = "m",
+    S = "s",
+    XS = "xs",
+    Body1 = "body1",
+    Body2 = "body2",
+    BulletList = "bullet_list",
+    Link = "link",
+    Button = "button",
+    FieldPlaceholder = "field_placeholder",
+    FieldTitle = "field_title",
+    FieldDescription = "field_description"
+}
+export declare enum TextVariant {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    MAIN = "main",
+    DARK_MAIN = "dark_main",
+    GREY = "grey",
+    LIGHT_GREY = "light_grey",
+    DISABLED = "disabled",
+    VALIDATION = "validation",
+    ERROR = "error",
+    SUCCESS = "success",
+    LIGHT = "light",
+    DARK = "dark",
+    DARK_BLUE = "dark_blue",
+    TITLE_BLUE = "title_blue",
+    SECTION = "section",
+    STROKE = "stroke"
+}
+export declare const colorText: Record<TextVariant, string>;
+export declare const colorTextDark: Record<TextVariant, string>;

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

@@ -0,0 +1,72 @@
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
+export var TextSize;
+(function (TextSize) {
+    TextSize["XXL"] = "xxl";
+    TextSize["XL"] = "xl";
+    TextSize["L"] = "l";
+    TextSize["M"] = "m";
+    TextSize["S"] = "s";
+    TextSize["XS"] = "xs";
+    TextSize["Body1"] = "body1";
+    TextSize["Body2"] = "body2";
+    TextSize["BulletList"] = "bullet_list";
+    TextSize["Link"] = "link";
+    TextSize["Button"] = "button";
+    TextSize["FieldPlaceholder"] = "field_placeholder";
+    TextSize["FieldTitle"] = "field_title";
+    TextSize["FieldDescription"] = "field_description";
+})(TextSize || (TextSize = {}));
+export var TextVariant;
+(function (TextVariant) {
+    TextVariant["PRIMARY"] = "primary";
+    TextVariant["SECONDARY"] = "secondary";
+    TextVariant["MAIN"] = "main";
+    TextVariant["DARK_MAIN"] = "dark_main";
+    TextVariant["GREY"] = "grey";
+    TextVariant["LIGHT_GREY"] = "light_grey";
+    TextVariant["DISABLED"] = "disabled";
+    TextVariant["VALIDATION"] = "validation";
+    TextVariant["ERROR"] = "error";
+    TextVariant["SUCCESS"] = "success";
+    TextVariant["LIGHT"] = "light";
+    TextVariant["DARK"] = "dark";
+    TextVariant["DARK_BLUE"] = "dark_blue";
+    TextVariant["TITLE_BLUE"] = "title_blue";
+    TextVariant["SECTION"] = "section";
+    TextVariant["STROKE"] = "stroke";
+})(TextVariant || (TextVariant = {}));
+export const colorText = {
+    [TextVariant.MAIN]: Palette.MAIN,
+    [TextVariant.DARK_MAIN]: Palette.DARK_MAIN,
+    [TextVariant.PRIMARY]: Palette.BLACK,
+    [TextVariant.SECONDARY]: Palette.WHITE,
+    [TextVariant.STROKE]: Palette.PRIMARY_400,
+    [TextVariant.GREY]: Palette.NEUTRAL_600,
+    [TextVariant.LIGHT_GREY]: Palette.NEUTRAL_200,
+    [TextVariant.DISABLED]: Palette.PRIMARY_100,
+    [TextVariant.SECTION]: Palette.PRIMARY_700,
+    [TextVariant.VALIDATION]: Palette.VALIDATION,
+    [TextVariant.ERROR]: Palette.ERROR,
+    [TextVariant.SUCCESS]: Palette.SUCCESS,
+    [TextVariant.LIGHT]: Palette.WHITE,
+    [TextVariant.DARK]: Palette.BLACK,
+    [TextVariant.DARK_BLUE]: Palette.DARK_MAIN,
+    [TextVariant.TITLE_BLUE]: Palette.DARK_MAIN,
+};
+export const colorTextDark = {
+    ...colorText,
+    [TextVariant.MAIN]: DarkPalette.MAIN,
+    [TextVariant.DARK_MAIN]: DarkPalette.NEUTRAL_600,
+    [TextVariant.PRIMARY]: DarkPalette.PRIMARY_50,
+    [TextVariant.SECONDARY]: Palette.BLACK,
+    [TextVariant.GREY]: DarkPalette.NEUTRAL_600,
+    [TextVariant.DISABLED]: Palette.PRIMARY_200,
+    [TextVariant.VALIDATION]: DarkPalette.VALIDATION,
+    [TextVariant.ERROR]: DarkPalette.ERROR,
+    [TextVariant.SUCCESS]: DarkPalette.SUCCESS,
+    [TextVariant.LIGHT]: DarkPalette.PRIMARY_50,
+    [TextVariant.DARK_BLUE]: DarkPalette.PRIMARY_800,
+    [TextVariant.TITLE_BLUE]: DarkPalette.PRIMARY_300,
+    [TextVariant.SECTION]: Palette.PRIMARY_300,
+};

package/dist/src/tuix-toast/TuixToast.d.ts

@@ -0,0 +1,18 @@
+import { LitElement, type PropertyValueMap } from 'lit';
+import '../tuix-icon/TuixIcon.js';
+import '../tuix-paper/TuixPaper.js';
+import '../tuix-text/TuixText.js';
+import { ToastType, type ToastTypeExcludingNone } from './enums/tuix-toast.enums.js';
+export declare class TuixToast extends LitElement {
+    static styles: import("lit").CSSResult[];
+    type: ToastType;
+    visibilityDuration: number;
+    dark: boolean;
+    lastType: ToastTypeExcludingNone;
+    updated(changedProperties: PropertyValueMap<unknown>): void;
+    private _handleOnClose;
+    private _saveType;
+    private _getStyleMap;
+    private _getIcon;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,103 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import '../tuix-icon/TuixIcon.js';
+import '../tuix-paper/TuixPaper.js';
+import '../tuix-text/TuixText.js';
+import { IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { BorderRadiusPaper, PaperElevation, } from '../tuix-paper/enums/tuix-paper.enum.js';
+import { Palette } from '../utils/colors.js';
+import { iconDarkPropertiesMap, iconPropertiesMap, toastBgColorMap, toastBgDarkColorMap, ToastType, } from './enums/tuix-toast.enums.js';
+import { commonToastStyles, mobileToastStyles, tabletToastStyles, } from './TuixToast.styles.js';
+let TuixToast = class TuixToast extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = ToastType.NONE;
+        this.visibilityDuration = 4000;
+        this.dark = false;
+        this.lastType = ToastType.SUCCESS;
+        this._saveType = () => {
+            if (this.type !== ToastType.NONE) {
+                this.lastType = this.type;
+            }
+        };
+        this._getStyleMap = () => {
+            this._saveType();
+            const bgColorMap = this.dark ? toastBgDarkColorMap : toastBgColorMap;
+            const backgroundColor = bgColorMap[this.lastType];
+            return { backgroundColor };
+        };
+        this._getIcon = () => {
+            this._saveType();
+            if (this.lastType === ToastType.TEXT)
+                return;
+            const { name: iconName, color: iconColor } = this.dark
+                ? iconDarkPropertiesMap[this.lastType]
+                : iconPropertiesMap[this.lastType];
+            return html `
+      <tuix-icon
+        size="${IconSizeVariant.MEDIUM}"
+        name="${iconName}"
+        color="${iconColor}"
+      ></tuix-icon>
+    `;
+        };
+    }
+    static { this.styles = [commonToastStyles, tabletToastStyles, mobileToastStyles]; }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (this.type === ToastType.NONE || this.visibilityDuration === 0)
+            return;
+        setTimeout(() => {
+            this.type = ToastType.NONE;
+            this._handleOnClose();
+        }, this.visibilityDuration);
+    }
+    _handleOnClose() {
+        if (this.visibilityDuration === 0)
+            return;
+        this.dispatchEvent(new CustomEvent('on-close', {
+            bubbles: true,
+        }));
+    }
+    render() {
+        return html `
+      <tuix-paper
+        elevation=${PaperElevation.VARIANT_4}
+        border-radius=${BorderRadiusPaper.SOFT}
+        ?dark=${this.dark}
+      >
+        <div
+          style="${styleMap({
+            backgroundColor: this.dark ? Palette.BLACK : Palette.WHITE,
+            borderRadius: BorderRadiusPaper.SOFT,
+        })}"
+        >
+          <div class="toast-container" style="${styleMap(this._getStyleMap())}">
+            ${this._getIcon()}
+            <tuix-text ?dark=${this.dark}>
+              <slot></slot>
+            </tuix-text>
+          </div>
+        </div>
+      </tuix-paper>
+    `;
+    }
+};
+__decorate([
+    property({ type: ToastType, reflect: true })
+], TuixToast.prototype, "type", void 0);
+__decorate([
+    property({ type: Number, attribute: 'visibility-duration' })
+], TuixToast.prototype, "visibilityDuration", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixToast.prototype, "dark", void 0);
+__decorate([
+    state()
+], TuixToast.prototype, "lastType", void 0);
+TuixToast = __decorate([
+    customElement('tuix-toast')
+], TuixToast);
+export { TuixToast };

package/dist/src/tuix-toast/TuixToast.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const commonToastStyles: import("lit").CSSResult;
+export declare const tabletToastStyles: import("lit").CSSResult;
+export declare const mobileToastStyles: import("lit").CSSResult;

package/dist/src/tuix-toast/TuixToast.styles.js

@@ -0,0 +1,43 @@
+import { css } from 'lit';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+export const commonToastStyles = css `
+  :host {
+    position: fixed;
+    bottom: -100%;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: bottom 600ms linear;
+    width: 640px;
+    z-index: 99;
+  }
+
+  :host([type='text']),
+  :host([type='warning']),
+  :host([type='error']),
+  :host([type='success']) {
+    bottom: 1.5rem;
+  }
+
+  .toast-container {
+    padding: 12px 16px;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    border-radius: 4px;
+  }
+`;
+export const tabletToastStyles = css `
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    :host {
+      width: 520px;
+    }
+  }
+`;
+export const mobileToastStyles = css `
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    :host {
+      max-width: 343px;
+      width: 90%;
+    }
+  }
+`;

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

@@ -0,0 +1,20 @@
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
+export declare enum ToastType {
+    NONE = "none",
+    TEXT = "text",
+    WARNING = "warning",
+    ERROR = "error",
+    SUCCESS = "success"
+}
+export type ToastTypeExcludingNone = Exclude<ToastType, ToastType.NONE>;
+interface IconProperties {
+    name: IconName;
+    color: Palette | DarkPalette;
+}
+export declare const toastBgColorMap: Record<ToastTypeExcludingNone, string>;
+export declare const toastBgDarkColorMap: Record<ToastTypeExcludingNone, string>;
+export declare const iconPropertiesMap: Record<ToastTypeExcludingNone, IconProperties>;
+export declare const iconDarkPropertiesMap: Record<ToastTypeExcludingNone, IconProperties>;
+export {};