@momentum-design/components 0.12.5 → 0.12.7

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

@@ -145,11 +145,6 @@ declare class Button extends Component {
      * @param active - The active state.
      */
     private modifyIconName;
-    /**
-     * Sets the class of 'icon' for icon buttons.
-     * @param type - The type of the button.
-     */
-    private setClassBasedOnType;
     /**
      * Sets the variant attribute for the button component.
      * If the provided variant is not included in the BUTTON_VARIANTS,
@@ -174,7 +169,7 @@ declare class Button extends Component {
      */
     private setColor;
     /**
-     * Sets or removes the aria-pressed attribute based on the active state.
+     * Sets the aria-pressed attribute based on the active state.
      *
      * @param element - The target element.
      * @param active - The active state.

package/dist/components/button/button.component.js

@@ -157,7 +157,6 @@ class Button extends Component {
         }
         if (changedProperties.has('typeInternal')) {
             this.setSize(this.size);
-            this.setClassBasedOnType(this.typeInternal);
         }
         if (changedProperties.has('prefixIcon') || changedProperties.has('postfixIcon')) {
             this.inferButtonType();
@@ -199,18 +198,6 @@ class Button extends Component {
             }
         }
     }
-    /**
-     * Sets the class of 'icon' for icon buttons.
-     * @param type - The type of the button.
-     */
-    setClassBasedOnType(type) {
-        if (type === BUTTON_TYPE_INTERNAL.ICON) {
-            this.classList.add('mdc-icon-button');
-        }
-        else {
-            this.classList.remove('mdc-icon-button');
-        }
-    }
     /**
      * Sets the variant attribute for the button component.
      * If the provided variant is not included in the BUTTON_VARIANTS,
@@ -252,17 +239,17 @@ class Button extends Component {
         }
     }
     /**
-     * Sets or removes the aria-pressed attribute based on the active state.
+     * Sets the aria-pressed attribute based on the active state.
      *
      * @param element - The target element.
      * @param active - The active state.
      */
     setAriaPressed(element, active) {
         if (active) {
-            element.setAttribute('aria-pressed', '');
+            element.setAttribute('aria-pressed', 'true');
         }
         else {
-            element.removeAttribute('aria-pressed');
+            element.setAttribute('aria-pressed', 'false');
         }
     }
     /**
@@ -275,10 +262,10 @@ class Button extends Component {
      */
     setSoftDisabled(element, softDisabled) {
         if (softDisabled) {
-            element.setAttribute('aria-disabled', '');
+            element.setAttribute('aria-disabled', 'true');
         }
         else {
-            element.removeAttribute('aria-disabled');
+            element.setAttribute('aria-disabled', 'false');
         }
     }
     /**
@@ -292,7 +279,7 @@ class Button extends Component {
      */
     setDisabled(element, disabled) {
         if (disabled) {
-            element.setAttribute('aria-disabled', '');
+            element.setAttribute('aria-disabled', 'true');
             this.prevTabindex = this.tabIndex;
             this.tabIndex = -1;
         }
@@ -349,12 +336,15 @@ class Button extends Component {
         const slot = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedNodes().length;
         if (slot && (this.prefixIcon || this.postfixIcon)) {
             this.typeInternal = BUTTON_TYPE_INTERNAL.PILL_WITH_ICON;
+            this.setAttribute('data-btn-type', 'pill-with-icon');
         }
         else if (!slot && (this.prefixIcon || this.postfixIcon)) {
             this.typeInternal = BUTTON_TYPE_INTERNAL.ICON;
+            this.setAttribute('data-btn-type', 'icon');
         }
         else {
             this.typeInternal = BUTTON_TYPE_INTERNAL.PILL;
+            this.setAttribute('data-btn-type', 'pill');
         }
     }
     // Note: @click is attached to each of the children of the button.

package/dist/components/button/button.styles.js

@@ -47,7 +47,6 @@ const styles = [hostFitContentStyles, css `
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
   }
 
-
   :host([variant="primary"]){
     background: var(--mdc-button-primary-background-color);
     color: var(--mdc-button-primary-color);
@@ -99,12 +98,12 @@ const styles = [hostFitContentStyles, css `
     cursor: auto;
   }
 
-  :host([size="64"].mdc-icon-button), 
-  :host([size="52"].mdc-icon-button), 
-  :host([size="40"].mdc-icon-button), 
-  :host([size="32"].mdc-icon-button),
-  :host([size="28"].mdc-icon-button),
-  :host([size="24"].mdc-icon-button){
+  :host([size="64"][data-btn-type='icon']), 
+  :host([size="52"][data-btn-type='icon']), 
+  :host([size="40"][data-btn-type='icon']), 
+  :host([size="32"][data-btn-type='icon']),
+  :host([size="28"][data-btn-type='icon']),
+  :host([size="24"][data-btn-type='icon']){
     border-radius: 6.25rem;
     aspect-ratio: 1;
     padding: unset;
@@ -145,6 +144,7 @@ const styles = [hostFitContentStyles, css `
   }
   :host([size="20"]){
     height: var(--mdc-button-height-size-20);
+    padding: 0.0625rem;
   }
 
   :host([color="accent"]){

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

@@ -0,0 +1,128 @@
+import { CSSResult, PropertyValueMap } from 'lit';
+import { Component } from '../../models';
+import { DividerOrientation, DividerVariant } from './divider.types';
+/**
+ * `mdc-divider` is a component that provides a line to separate and organize content.
+ * It can also include a button or text positioned centrally, allowing users to interact with the layout.
+ *
+ * **Divider Orientation:**
+ * - **Horizontal**: A thin, horizontal line.
+ * - **Vertical**: A thin, vertical line.
+ *
+ * **Divider Variants:**
+ * - **solid**: Solid line.
+ * - **gradient**: Gradient Line.
+ *
+ * **Divider Types:**
+ * - The type of divider is inferred based on the kind of slot present.
+ *  - **Primary**: A simple horizontal or vertical divider.
+ *  - **Text**: A horizontal divider with a text label in the center.
+ *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.
+ *
+ * **Accessibility:**
+ * - When the slot is replaced by an `mdc-button`:
+ *   - `aria-label` should be passed to the `mdc-button`.
+ *   - `aria-expanded` should be passed to the `mdc-button`.
+ *
+ * **Notes:**
+ * - If the slot is replaced by an invalid tag name or contains multiple elements,
+ *   the divider defaults to the **Primary** type.
+ * - To override the styles of the divider, use the provided CSS custom properties.
+ *
+ * @tagname mdc-divider
+ *
+ * @cssproperty --mdc-divider-background-color - background color of the divider
+ * @cssproperty --mdc-divider-width - width of the divider
+ * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider
+ * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider
+ * @cssproperty --mdc-divider-text-size - font size of label in the text divider
+ * @cssproperty --mdc-divider-text-color - font color of label in the text divider
+ * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
+ * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
+ */
+declare class Divider extends Component {
+    /**
+     * Two orientations of divider
+     * - **horizontal**: A thin, horizontal line with 0.0625rem width.
+     * - **vertical**: A thin, vertical line with 0.0625rem width.
+     *
+     * Note: We do not support "Vertical Text Divider" as of now.
+     * @default horizontal
+     */
+    orientation: DividerOrientation;
+    /**
+     * Two variants of divider
+     * - **solid**: Solid line.
+     * - **gradient**: Gradient Line that fades on either sides of the divider.
+     * @default solid
+     */
+    variant: DividerVariant;
+    /**
+     * Direction of the arrow icon, if applicable.
+     * - **positive**
+     * - **negative**
+     *
+     * Note: Positive and Negative directions are defined based on Cartesian plane.
+     * @default 'negative'
+     */
+    arrowDirection: string;
+    /**
+     * Position of the button, if applicable.
+     * - **positive**
+     * - **negative**
+     *
+     * Note: Positive and Negative directions are defined based on Cartesian plane.
+     * @default 'negative'
+     */
+    buttonPosition: string;
+    /**
+     * Sets the variant attribute for the divider component.
+     * If the provided variant is not included in the DIVIDER_VARIANT,
+     * it defaults to the value specified in DEFAULTS.VARIANT.
+     *
+     * @param variant - The variant to set.
+     */
+    private setVariant;
+    /**
+     * Sets the orientation attribute for the divider component.
+     * If the provided orientation is not included in the DIVIDER_ORIENTATION,
+     * it defaults to the value specified in DEFAULTS.ORIENTATION.
+     *
+     * @param orientation - The orientation to set.
+     */
+    private setOrientation;
+    /**
+     * Sets the buttonPosition and arrowDirection attribute for the divider component.
+     * If the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,
+     * it defaults to the value specified in DIRECTIONS based on the ORIENTATION.
+     *
+     * @param buttonPosition - The buttonPosition to set.
+     * @param arrowDirection - The arrowDirection to set.
+     */
+    private ensureValidDirections;
+    /**
+     * Configures the grabber button within the divider.
+     *
+     * - Sets the `prefix-icon` attribute for the grabber button based
+     * on the `arrow-direction` and `orientation` properties.
+     *
+     * This method updates the DOM element dynamically if a grabber button is present.
+     */
+    private setGrabberButton;
+    /**
+     * Determines the arrow icon based on the consumer-defined `arrowDirection`.
+     *
+     * @returns The icon that represents the arrow direction.
+     */
+    private getArrowIcon;
+    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /**
+     * Infers the type of divider based on the kind of slot present.
+     * @param slot - default slot of divider
+     */
+    private inferDividerType;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Divider;

package/dist/components/divider/divider.component.js

@@ -0,0 +1,222 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './divider.styles';
+import { Component } from '../../models';
+import { ARROW_ICONS, BUTTON_TAG, DEFAULTS, DIRECTIONS, DIVIDER_ORIENTATION, DIVIDER_VARIANT, TEXT_TAG, } from './divider.constants';
+/**
+ * `mdc-divider` is a component that provides a line to separate and organize content.
+ * It can also include a button or text positioned centrally, allowing users to interact with the layout.
+ *
+ * **Divider Orientation:**
+ * - **Horizontal**: A thin, horizontal line.
+ * - **Vertical**: A thin, vertical line.
+ *
+ * **Divider Variants:**
+ * - **solid**: Solid line.
+ * - **gradient**: Gradient Line.
+ *
+ * **Divider Types:**
+ * - The type of divider is inferred based on the kind of slot present.
+ *  - **Primary**: A simple horizontal or vertical divider.
+ *  - **Text**: A horizontal divider with a text label in the center.
+ *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.
+ *
+ * **Accessibility:**
+ * - When the slot is replaced by an `mdc-button`:
+ *   - `aria-label` should be passed to the `mdc-button`.
+ *   - `aria-expanded` should be passed to the `mdc-button`.
+ *
+ * **Notes:**
+ * - If the slot is replaced by an invalid tag name or contains multiple elements,
+ *   the divider defaults to the **Primary** type.
+ * - To override the styles of the divider, use the provided CSS custom properties.
+ *
+ * @tagname mdc-divider
+ *
+ * @cssproperty --mdc-divider-background-color - background color of the divider
+ * @cssproperty --mdc-divider-width - width of the divider
+ * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider
+ * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider
+ * @cssproperty --mdc-divider-text-size - font size of label in the text divider
+ * @cssproperty --mdc-divider-text-color - font color of label in the text divider
+ * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
+ * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
+ */
+class Divider extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Two orientations of divider
+         * - **horizontal**: A thin, horizontal line with 0.0625rem width.
+         * - **vertical**: A thin, vertical line with 0.0625rem width.
+         *
+         * Note: We do not support "Vertical Text Divider" as of now.
+         * @default horizontal
+         */
+        this.orientation = DEFAULTS.ORIENTATION;
+        /**
+         * Two variants of divider
+         * - **solid**: Solid line.
+         * - **gradient**: Gradient Line that fades on either sides of the divider.
+         * @default solid
+         */
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * Direction of the arrow icon, if applicable.
+         * - **positive**
+         * - **negative**
+         *
+         * Note: Positive and Negative directions are defined based on Cartesian plane.
+         * @default 'negative'
+         */
+        this.arrowDirection = DEFAULTS.ARROW_DIRECTION;
+        /**
+         * Position of the button, if applicable.
+         * - **positive**
+         * - **negative**
+         *
+         * Note: Positive and Negative directions are defined based on Cartesian plane.
+         * @default 'negative'
+         */
+        this.buttonPosition = DEFAULTS.BUTTON_DIRECTION;
+    }
+    /**
+     * Sets the variant attribute for the divider component.
+     * If the provided variant is not included in the DIVIDER_VARIANT,
+     * it defaults to the value specified in DEFAULTS.VARIANT.
+     *
+     * @param variant - The variant to set.
+     */
+    setVariant(variant) {
+        this.setAttribute('variant', Object.values(DIVIDER_VARIANT).includes(variant) ? variant : DEFAULTS.VARIANT);
+    }
+    /**
+     * Sets the orientation attribute for the divider component.
+     * If the provided orientation is not included in the DIVIDER_ORIENTATION,
+     * it defaults to the value specified in DEFAULTS.ORIENTATION.
+     *
+     * @param orientation - The orientation to set.
+     */
+    setOrientation(orientation) {
+        this.setAttribute('orientation', Object.values(DIVIDER_ORIENTATION).includes(orientation) ? orientation : DEFAULTS.ORIENTATION);
+    }
+    /**
+     * Sets the buttonPosition and arrowDirection attribute for the divider component.
+     * If the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,
+     * it defaults to the value specified in DIRECTIONS based on the ORIENTATION.
+     *
+     * @param buttonPosition - The buttonPosition to set.
+     * @param arrowDirection - The arrowDirection to set.
+     */
+    ensureValidDirections() {
+        const defaultDirection = this.orientation === DIVIDER_ORIENTATION.HORIZONTAL
+            ? DIRECTIONS.NEGATIVE
+            : DIRECTIONS.POSITIVE;
+        if (!Object.values(DIRECTIONS).includes(this.buttonPosition)) {
+            this.buttonPosition = defaultDirection;
+        }
+        if (!Object.values(DIRECTIONS).includes(this.arrowDirection)) {
+            this.arrowDirection = defaultDirection;
+        }
+    }
+    /**
+     * Configures the grabber button within the divider.
+     *
+     * - Sets the `prefix-icon` attribute for the grabber button based
+     * on the `arrow-direction` and `orientation` properties.
+     *
+     * This method updates the DOM element dynamically if a grabber button is present.
+     */
+    setGrabberButton() {
+        const buttonElement = this.querySelector('mdc-button');
+        if (!buttonElement)
+            return;
+        this.ensureValidDirections();
+        const iconType = this.getArrowIcon();
+        buttonElement.setAttribute('variant', 'secondary');
+        buttonElement.setAttribute('prefix-icon', iconType);
+    }
+    /**
+     * Determines the arrow icon based on the consumer-defined `arrowDirection`.
+     *
+     * @returns The icon that represents the arrow direction.
+     */
+    getArrowIcon() {
+        const isHorizontal = this.orientation === DIVIDER_ORIENTATION.HORIZONTAL;
+        const isPositive = this.arrowDirection === DIRECTIONS.POSITIVE;
+        if (isHorizontal) {
+            return isPositive ? ARROW_ICONS.UP : ARROW_ICONS.DOWN;
+        }
+        return isPositive ? ARROW_ICONS.RIGHT : ARROW_ICONS.LEFT;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('orientation')) {
+            this.setOrientation(this.orientation);
+        }
+        if (changedProperties.has('variant')) {
+            this.setVariant(this.variant);
+        }
+        if (changedProperties.has('orientation')
+            || changedProperties.has('arrowDirection')
+            || changedProperties.has('buttonPosition')) {
+            this.setGrabberButton();
+        }
+    }
+    /**
+     * Infers the type of divider based on the kind of slot present.
+     * @param slot - default slot of divider
+     */
+    inferDividerType() {
+        var _a;
+        this.setAttribute('data-type', 'mdc-primary-divider');
+        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const assignedElements = (slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) || [];
+        if (assignedElements.length > 1)
+            return;
+        const hasTextChild = assignedElements.some((el) => el.tagName === TEXT_TAG.toUpperCase());
+        const hasButtonChild = assignedElements.some((el) => el.tagName === BUTTON_TAG.toUpperCase());
+        if (hasTextChild && !hasButtonChild) {
+            this.setAttribute('data-type', 'mdc-text-divider');
+        }
+        else if (!hasTextChild && hasButtonChild) {
+            this.setAttribute('data-type', 'mdc-grabber-divider');
+            this.setGrabberButton();
+        }
+    }
+    render() {
+        return html `
+      <div></div>
+      <slot @slotchange=${this.inferDividerType}></slot>
+      <div></div>
+    `;
+    }
+}
+Divider.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Divider.prototype, "orientation", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Divider.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, attribute: 'arrow-direction', reflect: true }),
+    __metadata("design:type", String)
+], Divider.prototype, "arrowDirection", void 0);
+__decorate([
+    property({ type: String, attribute: 'button-position', reflect: true }),
+    __metadata("design:type", String)
+], Divider.prototype, "buttonPosition", void 0);
+export default Divider;

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

@@ -0,0 +1,32 @@
+import { TAG_NAME as BUTTON_TAG } from '../button/button.constants';
+import { TAG_NAME as TEXT_TAG } from '../text/text.constants';
+declare const TAG_NAME: "mdc-divider";
+declare const DIVIDER_ORIENTATION: {
+    readonly HORIZONTAL: "horizontal";
+    readonly VERTICAL: "vertical";
+};
+declare const DIVIDER_VARIANT: {
+    readonly SOLID: "solid";
+    readonly GRADIENT: "gradient";
+};
+/**
+ * Direction types for both the arrow and button component.
+ * These directions are dependent on the divider's orientation.
+ */
+declare const DIRECTIONS: {
+    readonly POSITIVE: "positive";
+    readonly NEGATIVE: "negative";
+};
+declare const ARROW_ICONS: {
+    readonly UP: "arrow-up-regular";
+    readonly DOWN: "arrow-down-regular";
+    readonly LEFT: "arrow-left-regular";
+    readonly RIGHT: "arrow-right-regular";
+};
+declare const DEFAULTS: {
+    readonly ORIENTATION: "horizontal";
+    readonly VARIANT: "solid";
+    readonly ARROW_DIRECTION: "negative";
+    readonly BUTTON_DIRECTION: "negative";
+};
+export { TAG_NAME, DEFAULTS, DIVIDER_VARIANT, DIVIDER_ORIENTATION, DIRECTIONS, BUTTON_TAG, TEXT_TAG, ARROW_ICONS, };

package/dist/components/divider/divider.constants.js

@@ -0,0 +1,33 @@
+import utils from '../../utils/tag-name';
+import { TAG_NAME as BUTTON_TAG } from '../button/button.constants';
+import { TAG_NAME as TEXT_TAG } from '../text/text.constants';
+const TAG_NAME = utils.constructTagName('divider');
+const DIVIDER_ORIENTATION = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};
+const DIVIDER_VARIANT = {
+    SOLID: 'solid',
+    GRADIENT: 'gradient',
+};
+/**
+ * Direction types for both the arrow and button component.
+ * These directions are dependent on the divider's orientation.
+ */
+const DIRECTIONS = {
+    POSITIVE: 'positive',
+    NEGATIVE: 'negative',
+};
+const ARROW_ICONS = {
+    UP: 'arrow-up-regular',
+    DOWN: 'arrow-down-regular',
+    LEFT: 'arrow-left-regular',
+    RIGHT: 'arrow-right-regular',
+};
+const DEFAULTS = {
+    ORIENTATION: DIVIDER_ORIENTATION.HORIZONTAL,
+    VARIANT: DIVIDER_VARIANT.SOLID,
+    ARROW_DIRECTION: DIRECTIONS.NEGATIVE,
+    BUTTON_DIRECTION: DIRECTIONS.NEGATIVE,
+};
+export { TAG_NAME, DEFAULTS, DIVIDER_VARIANT, DIVIDER_ORIENTATION, DIRECTIONS, BUTTON_TAG, TEXT_TAG, ARROW_ICONS, };

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

@@ -0,0 +1,5 @@
+/**
+ * Divider component styles
+ */
+declare const styles: import("lit").CSSResult[];
+export default styles;