@momentum-design/components 0.23.2 → 0.24.0

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

@@ -1,5 +1,5 @@
-import { CSSResult } from 'lit';
-import { Variant } from './tab.types';
+import { CSSResult, PropertyValues } from 'lit';
+import type { Variant } from './tab.types';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 declare const Tab_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
 /**
@@ -89,7 +89,7 @@ declare class Tab extends Tab_base {
      */
     text?: string;
     /**
-     * Tab can have two variants:
+     * Tab can have three variants:
      * - `glass`
      * - `line`
      * - `pill`
@@ -112,6 +112,14 @@ declare class Tab extends Tab_base {
      * @param active - The active state.
      */
     private modifyIconName;
+    /**
+     * Sets the variant attribute for the tab component.
+     * If the provided variant is not included in the TAB_VARIANTS,
+     * it defaults to the value specified in DEFAULTS.VARIANT.
+     *
+     * @param variant - The variant to set.
+     */
+    private setVariant;
     /**
      * 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,
@@ -122,6 +130,7 @@ declare class Tab extends Tab_base {
      */
     protected setActive(element: HTMLElement, active: boolean): void;
     protected executeAction(): void;
+    update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -10,7 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './tab.styles';
-import { DEFAULTS } from './tab.constants';
+import { DEFAULTS, TAB_VARIANTS } from './tab.constants';
 import { getIconNameWithoutStyle } from '../button/button.utils';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
@@ -98,7 +98,7 @@ class Tab extends IconNameMixin(Buttonsimple) {
     constructor() {
         super();
         /**
-         * Tab can have two variants:
+         * Tab can have three variants:
          * - `glass`
          * - `line`
          * - `pill`
@@ -106,7 +106,7 @@ class Tab extends IconNameMixin(Buttonsimple) {
          * It defines the background and foreground color of the tab.
          * @default pill
          */
-        this.variant = DEFAULTS.TAB_VARIANT;
+        this.variant = DEFAULTS.VARIANT;
         this.role = 'tab';
         this.softDisabled = undefined;
         this.size = undefined;
@@ -131,6 +131,16 @@ class Tab extends IconNameMixin(Buttonsimple) {
             }
         }
     }
+    /**
+     * Sets the variant attribute for the tab component.
+     * If the provided variant is not included in the TAB_VARIANTS,
+     * it defaults to the value specified in DEFAULTS.VARIANT.
+     *
+     * @param variant - The variant to set.
+     */
+    setVariant(variant) {
+        this.setAttribute('variant', Object.values(TAB_VARIANTS).includes(variant) ? variant : DEFAULTS.VARIANT);
+    }
     /**
      * 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,
@@ -147,6 +157,12 @@ class Tab extends IconNameMixin(Buttonsimple) {
         // Toggle the active state of the tab.
         this.active = !this.active;
     }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('variant')) {
+            this.setVariant(this.variant);
+        }
+    }
     render() {
         return html `
       <div part="container">

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

@@ -5,6 +5,6 @@ declare const TAB_VARIANTS: {
     readonly PILL: "pill";
 };
 declare const DEFAULTS: {
-    readonly TAB_VARIANT: "pill";
+    readonly VARIANT: "pill";
 };
 export { DEFAULTS, TAG_NAME, TAB_VARIANTS };

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

@@ -6,6 +6,6 @@ const TAB_VARIANTS = {
     PILL: 'pill',
 };
 const DEFAULTS = {
-    TAB_VARIANT: TAB_VARIANTS.PILL,
+    VARIANT: TAB_VARIANTS.PILL,
 };
 export { DEFAULTS, TAG_NAME, TAB_VARIANTS };