@momentum-design/components 0.22.1 → 0.22.3

package/dist/components/tab/tab.component.js

@@ -0,0 +1,180 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './tab.styles';
+import { DEFAULTS } from './tab.constants';
+import { getIconNameWithoutStyle } from '../button/button.utils';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
+/**
+ * `mdc-tab` is Tab component to be used within the Tabgroup.
+ *
+ * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.
+ *
+ * The `slot="badge"` can be used to add a badge to the tab.
+ *
+ * For `icon`, the `mdc-icon` component is used to render the icon.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @tagname mdc-tab
+ *
+ * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.
+ * @cssproperty --mdc-tab-height - Height of the tab.
+ * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.
+ * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.
+ * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.
+ * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.
+ * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab
+ *  in hover state.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab
+ *  in rest state.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.
+ * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.
+ * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.
+ * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.
+ * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.
+ * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.
+ * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.
+ * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.
+ * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.
+ * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.
+ * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.
+ * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.
+ * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.
+ * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.
+ * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab
+ *  in disabled state
+ * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.
+ * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab
+ *  in rest state.
+ * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.
+ * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.
+ * @cssproperty --mdc-tab-padding-left - Padding left for the tab.
+ * @cssproperty --mdc-tab-padding-right - Padding right for the tab.
+ * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.
+ * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.
+ * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.
+ * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.
+ * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.
+ * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.
+ * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.
+ * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
+ */
+class Tab extends IconNameMixin(Buttonsimple) {
+    constructor() {
+        super();
+        /**
+         * Tab can have two variants:
+         * - `glass`
+         * - `line`
+         * - `pill`
+         *
+         * It defines the background and foreground color of the tab.
+         * @default pill
+         */
+        this.variant = DEFAULTS.TAB_VARIANT;
+        this.role = 'tab';
+        this.softDisabled = undefined;
+        this.size = undefined;
+        this.type = undefined;
+    }
+    /**
+     * Modifies the icon name based on the active state.
+     * If the tab is active, the icon name is suffixed with '-filled'.
+     * If the tab is inactive, the icon name is restored to its original value.
+     * If '-filled' icon is not available, the icon name remains unchanged.
+     *
+     * @param active - The active state.
+     */
+    modifyIconName(active) {
+        if (this.iconName) {
+            if (active) {
+                this.prevIconName = this.iconName;
+                this.iconName = `${getIconNameWithoutStyle(this.iconName)}-filled`;
+            }
+            else if (this.prevIconName) {
+                this.iconName = this.prevIconName;
+            }
+        }
+    }
+    /**
+     * Sets the aria-selected attribute based on the active state of the Tab.
+     * If the tab is active, the filled version of the icon is displayed,
+     * else the icon is restored to its original value.
+     *
+     * @param element - The tab element.
+     * @param active - The active state of the tab.
+     */
+    setActive(element, active) {
+        element.setAttribute('aria-selected', active ? 'true' : 'false');
+        this.modifyIconName(active);
+    }
+    executeAction() {
+        // Toggle the active state of the tab.
+        this.active = !this.active;
+    }
+    render() {
+        return html `
+      <div part="container">
+        <slot name="badge" part="badge"></slot>
+        ${this.iconName
+            ? html ` <mdc-icon name="${this.iconName}" size="1" length-unit="rem" part="icon"></mdc-icon>`
+            : nothing}
+        ${this.text
+            ? html ` <mdc-text
+              type=${this.active ? TYPE.BODY_MIDSIZE_BOLD : TYPE.BODY_MIDSIZE_MEDIUM}
+              tagname=${VALID_TEXT_TAGS.SPAN}
+              data-text=${this.text}
+              part="text"
+              >${this.text}</mdc-text
+            >`
+            : nothing}
+      </div>
+      <div part="indicator"></div>
+    `;
+    }
+}
+Tab.styles = [...Buttonsimple.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Tab.prototype, "text", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Tab.prototype, "variant", void 0);
+export default Tab;

package/dist/components/tab/tab.constants.d.ts

@@ -0,0 +1,10 @@
+declare const TAG_NAME: "mdc-tab";
+declare const TAB_VARIANTS: {
+    readonly GLASS: "glass";
+    readonly LINE: "line";
+    readonly PILL: "pill";
+};
+declare const DEFAULTS: {
+    readonly TAB_VARIANT: "pill";
+};
+export { DEFAULTS, TAG_NAME, TAB_VARIANTS };

package/dist/components/tab/tab.constants.js

@@ -0,0 +1,11 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('tab');
+const TAB_VARIANTS = {
+    GLASS: 'glass',
+    LINE: 'line',
+    PILL: 'pill',
+};
+const DEFAULTS = {
+    TAB_VARIANT: TAB_VARIANTS.PILL,
+};
+export { DEFAULTS, TAG_NAME, TAB_VARIANTS };

package/dist/components/tab/tab.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

package/dist/components/tab/tab.styles.js

@@ -0,0 +1,247 @@
+import { css } from 'lit';
+import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
+const styles = [hostFitContentStyles, css `
+
+  :host {
+    --mdc-tab-content-gap: 0.5rem;
+    --mdc-tab-height: 2rem;
+
+    --mdc-tab-glass-active-background-color-disabled: var(--mds-color-theme-button-primary-disabled);
+    --mdc-tab-glass-active-background-color-hover: var(--mds-color-theme-button-primary-hover);
+    --mdc-tab-glass-active-background-color-normal: var(--mds-color-theme-button-primary-normal);
+    --mdc-tab-glass-active-background-color-pressed: var(--mds-color-theme-button-primary-pressed);
+
+    --mdc-tab-glass-active-color: var(--mds-color-theme-inverted-text-primary-normal);
+    --mdc-tab-glass-active-color-disabled: var(--mds-color-theme-inverted-text-primary-disabled);
+
+    --mdc-tab-glass-border-radius: 0.5rem;
+
+    --mdc-tab-glass-inactive-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
+    --mdc-tab-glass-inactive-background-color-hover: var(--mds-color-theme-button-secondary-hover);
+    --mdc-tab-glass-inactive-background-color-normal: var(--mds-color-theme-button-secondary-normal);
+    --mdc-tab-glass-inactive-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
+
+    --mdc-tab-glass-inactive-color: var(--mds-color-theme-text-secondary-normal);
+    --mdc-tab-glass-inactive-color-disabled: var(--mds-color-theme-text-primary-disabled);
+
+    --mdc-tab-line-active-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
+    --mdc-tab-line-active-background-color-hover: var(--mds-color-theme-button-secondary-hover);
+    --mdc-tab-line-active-background-color-normal: var(--mds-color-theme-button-secondary-normal);
+    --mdc-tab-line-active-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
+
+    --mdc-tab-line-active-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-tab-line-active-color-disabled: var(--mds-color-theme-text-primary-disabled);
+
+    --mdc-tab-line-active-indicator-color: var(--mds-color-theme-outline-input-active);
+    --mdc-tab-line-active-indicator-color-disabled: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-tab-line-active-indicator-height: 0.125rem;
+    --mdc-tab-line-active-indicator-width: 100%;
+
+    --mdc-tab-line-border-bottom-left-radius: 0;
+    --mdc-tab-line-border-bottom-right-radius: 0;
+    --mdc-tab-line-border-top-left-radius: 0.25rem;
+    --mdc-tab-line-border-top-right-radius: 0.25rem;
+
+    --mdc-tab-line-inactive-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
+    --mdc-tab-line-inactive-background-color-hover: var(--mds-color-theme-button-secondary-hover);
+    --mdc-tab-line-inactive-background-color-normal: var(--mds-color-theme-button-secondary-normal);
+    --mdc-tab-line-inactive-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
+
+    --mdc-tab-line-inactive-color: var(--mds-color-theme-text-secondary-normal);
+    --mdc-tab-line-inactive-color-disabled: var(--mds-color-theme-text-primary-disabled);
+
+    --mdc-tab-padding-left: 0.75rem;
+    --mdc-tab-padding-right: 0.75rem;
+
+    --mdc-tab-pill-active-background-color-disabled: var(--mds-color-theme-button-secondary-active-normal);
+    --mdc-tab-pill-active-background-color-hover: var(--mds-color-theme-button-secondary-active-hover);
+    --mdc-tab-pill-active-background-color-normal: var(--mds-color-theme-button-secondary-active-normal);
+    --mdc-tab-pill-active-background-color-pressed: var(--mds-color-theme-button-secondary-active-pressed);
+
+    --mdc-tab-pill-active-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-tab-pill-active-color-disabled: var(--mds-color-theme-text-primary-disabled);
+
+    --mdc-tab-pill-border-radius: 0.5rem;
+
+    --mdc-tab-pill-inactive-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
+    --mdc-tab-pill-inactive-background-color-hover: var(--mds-color-theme-button-secondary-hover);
+    --mdc-tab-pill-inactive-background-color-normal: var(--mds-color-theme-button-secondary-normal);
+    --mdc-tab-pill-inactive-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
+
+    --mdc-tab-pill-inactive-color: var(--mds-color-theme-text-secondary-normal);
+    --mdc-tab-pill-inactive-color-disabled: var(--mds-color-theme-text-primary-disabled);
+
+    flex-direction: column;
+    height: var(--mdc-tab-height);
+    padding-left: var(--mdc-tab-padding-left);
+    padding-right: var(--mdc-tab-padding-right);
+    position: relative;
+    border: none;
+  }
+
+  :host::part(container) {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: var(--mdc-tab-content-gap);
+    justify-content: center;
+    width: fit-content;
+  }
+
+  :host::part(text) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  :host::part(text)::after{
+    content: attr(data-text);
+    height: 0;
+    visibility: hidden;
+    overflow: hidden;
+    user-select: none;
+    pointer-events: none;
+    /* body-midsize-bold font styling */
+    font-size: var(--mds-font-apps-body-midsize-bold-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-bold-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-bold-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-bold-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-bold-text-case);
+  }
+
+  :host::part(indicator) {
+    width: var(--mdc-tab-line-active-indicator-width);
+    height: var(--mdc-tab-line-active-indicator-height);
+    bottom: 0;
+    position: absolute;
+    visibility: hidden;
+  }
+
+  :host([disabled]) {
+    cursor: default;
+  }
+
+  :host([variant="glass"]) {
+    background-color: var(--mdc-tab-glass-inactive-background-color-normal);
+    border-radius: var(--mdc-tab-glass-border-radius);
+    color: var(--mdc-tab-glass-inactive-color);
+  }
+
+  :host([variant="glass"]:hover) {
+    background-color: var(--mdc-tab-glass-inactive-background-color-hover);
+  }
+
+  :host([variant="glass"]:active) {
+    background-color: var(--mdc-tab-glass-inactive-background-color-pressed);
+  }
+
+  :host([variant="glass"][disabled]) {
+    background-color: var(--mdc-tab-glass-inactive-background-color-disabled);
+    color: var(--mdc-tab-glass-inactive-color-disabled);
+  }
+
+  :host([variant="glass"][active]) {
+    background-color: var(--mdc-tab-glass-active-background-color-normal);
+    color: var(--mdc-tab-glass-active-color);
+  }
+
+  :host([variant="glass"][active]:hover) {
+    background-color: var(--mdc-tab-glass-active-background-color-hover);
+  }
+
+  :host([variant="glass"][active]:active) {
+    background-color: var(--mdc-tab-glass-active-background-color-pressed);
+  }
+
+  :host([variant="glass"][active][disabled]) {
+    background-color: var(--mdc-tab-glass-active-background-color-disabled);
+    color: var(--mdc-tab-glass-active-color-disabled);
+  }
+
+  :host([variant="line"]) {
+    background-color: var(--mdc-tab-line-inactive-background-color-normal);
+    border-top-left-radius: var(--mdc-tab-line-border-top-left-radius);
+    border-top-right-radius: var(--mdc-tab-line-border-top-right-radius);
+    border-bottom-left-radius: var(--mdc-tab-line-border-bottom-left-radius);
+    border-bottom-right-radius: var(--mdc-tab-line-border-bottom-right-radius);
+    color: var(--mdc-tab-line-inactive-color);
+  }
+
+  :host([variant="line"]:hover) {
+    background-color: var(--mdc-tab-line-inactive-background-color-hover);
+  }
+
+  :host([variant="line"]:active) {
+    background-color: var(--mdc-tab-line-inactive-background-color-pressed);
+  }
+
+  :host([variant="line"][disabled]) {
+    background-color: var(--mdc-tab-line-inactive-background-color-disabled);
+    color: var(--mdc-tab-line-inactive-color-disabled);
+  }
+
+  :host([variant="line"][active]) {
+    background-color: var(--mdc-tab-line-active-background-color-normal);
+    color: var(--mdc-tab-line-active-color);
+  }
+
+  :host([variant="line"][active])::part(indicator) {
+    background-color:var(--mdc-tab-line-active-indicator-color);
+    visibility: visible;
+  }
+
+  :host([variant="line"][active]:hover) {
+    background-color: var(--mdc-tab-line-active-background-color-hover);
+  }
+
+  :host([variant="line"][active]:active) {
+    background-color: var(--mdc-tab-line-active-background-color-pressed);
+  }
+
+  :host([variant="line"][active][disabled]) {
+    background-color: var(--mdc-tab-line-active-background-color-disabled);
+    color: var(--mdc-tab-line-active-color-disabled);
+  }
+
+  :host([variant="line"][active][disabled])::part(indicator) {
+    background-color:var(--mdc-tab-line-active-indicator-color-disabled);
+  }
+
+  :host([variant="pill"]) {
+    background-color: var(--mdc-tab-pill-inactive-background-color-normal);
+    border-radius: var(--mdc-tab-pill-border-radius);
+    color: var(--mdc-tab-pill-inactive-color);
+  }
+
+  :host([variant="pill"]:hover) {
+    background-color: var(--mdc-tab-pill-inactive-background-color-hover);
+  }
+
+  :host([variant="pill"]:active) {
+    background-color: var(--mdc-tab-pill-inactive-background-color-pressed);
+  }
+
+  :host([variant="pill"][disabled]) {
+    background-color: var(--mdc-tab-pill-inactive-background-color-disabled);
+    color: var(--mdc-tab-pill-inactive-color-disabled);
+  }
+
+  :host([variant="pill"][active]) {
+    background-color: var(--mdc-tab-pill-active-background-color-normal);
+    color: var(--mdc-tab-pill-active-color);
+  }
+
+  :host([variant="pill"][active]:hover) {
+    background-color: var(--mdc-tab-pill-active-background-color-hover);
+  }
+
+  :host([variant="pill"][active]:active) {
+    background-color: var(--mdc-tab-pill-active-background-color-pressed);
+  }
+
+  :host([variant="pill"][active][disabled]) {
+    background-color: var(--mdc-tab-pill-active-background-color-disabled);
+    color: var(--mdc-tab-pill-active-color-disabled);
+  }
+
+`, ...hostFocusRingStyles()];
+export default styles;

package/dist/components/tab/tab.types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '../../utils/types';
+import { TAB_VARIANTS } from './tab.constants';
+export type Variant = ValueOf<typeof TAB_VARIANTS>;

package/dist/components/tab/tab.types.js

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