@momentum-design/components 0.14.1 → 0.14.3

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

@@ -1,6 +1,6 @@
 import { CSSResult, PropertyValueMap } from 'lit';
 import { Component } from '../../models';
-import { DividerOrientation, DividerVariant } from './divider.types';
+import { Directions, 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.
@@ -66,7 +66,7 @@ declare class Divider extends Component {
      * Note: Positive and Negative directions are defined based on Cartesian plane.
      * @default 'negative'
      */
-    arrowDirection: string;
+    arrowDirection: Directions;
     /**
      * Position of the button, if applicable.
      * - **positive**
@@ -75,7 +75,7 @@ declare class Divider extends Component {
      * Note: Positive and Negative directions are defined based on Cartesian plane.
      * @default 'negative'
      */
-    buttonPosition: string;
+    buttonPosition: Directions;
     /**
      * Sets the variant attribute for the divider component.
      * If the provided variant is not included in the DIVIDER_VARIANT,
@@ -122,6 +122,7 @@ declare class Divider extends Component {
      * @param slot - default slot of divider
      */
     private inferDividerType;
+    constructor();
     protected render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -53,43 +53,6 @@ import { ARROW_ICONS, BUTTON_TAG, DEFAULTS, DIRECTIONS, DIVIDER_ORIENTATION, DIV
  * @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,
@@ -138,13 +101,13 @@ class Divider extends Component {
      * 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);
+        const buttonElement = this.querySelector('mdc-button');
+        if (buttonElement) {
+            const iconType = this.getArrowIcon();
+            buttonElement.setAttribute('variant', 'secondary');
+            buttonElement.setAttribute('prefix-icon', iconType);
+        }
     }
     /**
      * Determines the arrow icon based on the consumer-defined `arrowDirection`.
@@ -179,7 +142,6 @@ class Divider extends Component {
      */
     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)
@@ -194,6 +156,44 @@ class Divider extends Component {
             this.setGrabberButton();
         }
     }
+    constructor() {
+        super();
+        /**
+         * 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;
+        this.setAttribute('data-type', 'mdc-primary-divider');
+    }
     render() {
         return html `
       <div></div>

package/dist/custom-elements.json

@@ -1011,7 +1011,7 @@
               "kind": "field",
               "name": "arrowDirection",
               "type": {
-                "text": "string"
+                "text": "Directions"
               },
               "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
               "default": "'negative'",
@@ -1022,7 +1022,7 @@
               "kind": "field",
               "name": "buttonPosition",
               "type": {
-                "text": "string"
+                "text": "Directions"
               },
               "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
               "default": "'negative'",
@@ -1132,7 +1132,7 @@
             {
               "name": "arrow-direction",
               "type": {
-                "text": "string"
+                "text": "Directions"
               },
               "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
               "default": "'negative'",
@@ -1141,7 +1141,7 @@
             {
               "name": "button-position",
               "type": {
-                "text": "string"
+                "text": "Directions"
               },
               "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
               "default": "'negative'",

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import Presence from './components/presence';
 import Text from './components/text';
 import Button from './components/button';
 import Bullet from './components/bullet';
+import Divider from './components/divider';
 import type { TextType } from './components/text/text.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Divider, };
 export type { TextType, };

package/dist/index.js

@@ -7,4 +7,5 @@ import Presence from './components/presence';
 import Text from './components/text';
 import Button from './components/button';
 import Bullet from './components/bullet';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, };
+import Divider from './components/divider';
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Divider, };

package/package.json

@@ -35,5 +35,5 @@
     "@momentum-design/tokens": "*",
     "lit": "^3.2.0"
   },
-  "version": "0.14.1"
+  "version": "0.14.3"
 }