@momentum-design/components 0.14.1 → 0.14.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  import { CSSResult, PropertyValueMap } from 'lit';
2
2
  import { Component } from '../../models';
3
- import { DividerOrientation, DividerVariant } from './divider.types';
3
+ import { Directions, DividerOrientation, DividerVariant } from './divider.types';
4
4
  /**
5
5
  * `mdc-divider` is a component that provides a line to separate and organize content.
6
6
  * 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 {
66
66
  * Note: Positive and Negative directions are defined based on Cartesian plane.
67
67
  * @default 'negative'
68
68
  */
69
- arrowDirection: string;
69
+ arrowDirection: Directions;
70
70
  /**
71
71
  * Position of the button, if applicable.
72
72
  * - **positive**
@@ -75,7 +75,7 @@ declare class Divider extends Component {
75
75
  * Note: Positive and Negative directions are defined based on Cartesian plane.
76
76
  * @default 'negative'
77
77
  */
78
- buttonPosition: string;
78
+ buttonPosition: Directions;
79
79
  /**
80
80
  * Sets the variant attribute for the divider component.
81
81
  * If the provided variant is not included in the DIVIDER_VARIANT,
@@ -122,6 +122,7 @@ declare class Divider extends Component {
122
122
  * @param slot - default slot of divider
123
123
  */
124
124
  private inferDividerType;
125
+ constructor();
125
126
  protected render(): import("lit-html").TemplateResult<1>;
126
127
  static styles: Array<CSSResult>;
127
128
  }
@@ -53,43 +53,6 @@ import { ARROW_ICONS, BUTTON_TAG, DEFAULTS, DIRECTIONS, DIVIDER_ORIENTATION, DIV
53
53
  * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
54
54
  */
55
55
  class Divider extends Component {
56
- constructor() {
57
- super(...arguments);
58
- /**
59
- * Two orientations of divider
60
- * - **horizontal**: A thin, horizontal line with 0.0625rem width.
61
- * - **vertical**: A thin, vertical line with 0.0625rem width.
62
- *
63
- * Note: We do not support "Vertical Text Divider" as of now.
64
- * @default horizontal
65
- */
66
- this.orientation = DEFAULTS.ORIENTATION;
67
- /**
68
- * Two variants of divider
69
- * - **solid**: Solid line.
70
- * - **gradient**: Gradient Line that fades on either sides of the divider.
71
- * @default solid
72
- */
73
- this.variant = DEFAULTS.VARIANT;
74
- /**
75
- * Direction of the arrow icon, if applicable.
76
- * - **positive**
77
- * - **negative**
78
- *
79
- * Note: Positive and Negative directions are defined based on Cartesian plane.
80
- * @default 'negative'
81
- */
82
- this.arrowDirection = DEFAULTS.ARROW_DIRECTION;
83
- /**
84
- * Position of the button, if applicable.
85
- * - **positive**
86
- * - **negative**
87
- *
88
- * Note: Positive and Negative directions are defined based on Cartesian plane.
89
- * @default 'negative'
90
- */
91
- this.buttonPosition = DEFAULTS.BUTTON_DIRECTION;
92
- }
93
56
  /**
94
57
  * Sets the variant attribute for the divider component.
95
58
  * If the provided variant is not included in the DIVIDER_VARIANT,
@@ -138,13 +101,13 @@ class Divider extends Component {
138
101
  * This method updates the DOM element dynamically if a grabber button is present.
139
102
  */
140
103
  setGrabberButton() {
141
- const buttonElement = this.querySelector('mdc-button');
142
- if (!buttonElement)
143
- return;
144
104
  this.ensureValidDirections();
145
- const iconType = this.getArrowIcon();
146
- buttonElement.setAttribute('variant', 'secondary');
147
- buttonElement.setAttribute('prefix-icon', iconType);
105
+ const buttonElement = this.querySelector('mdc-button');
106
+ if (buttonElement) {
107
+ const iconType = this.getArrowIcon();
108
+ buttonElement.setAttribute('variant', 'secondary');
109
+ buttonElement.setAttribute('prefix-icon', iconType);
110
+ }
148
111
  }
149
112
  /**
150
113
  * Determines the arrow icon based on the consumer-defined `arrowDirection`.
@@ -179,7 +142,6 @@ class Divider extends Component {
179
142
  */
180
143
  inferDividerType() {
181
144
  var _a;
182
- this.setAttribute('data-type', 'mdc-primary-divider');
183
145
  const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
184
146
  const assignedElements = (slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) || [];
185
147
  if (assignedElements.length > 1)
@@ -194,6 +156,44 @@ class Divider extends Component {
194
156
  this.setGrabberButton();
195
157
  }
196
158
  }
159
+ constructor() {
160
+ super();
161
+ /**
162
+ * Two orientations of divider
163
+ * - **horizontal**: A thin, horizontal line with 0.0625rem width.
164
+ * - **vertical**: A thin, vertical line with 0.0625rem width.
165
+ *
166
+ * Note: We do not support "Vertical Text Divider" as of now.
167
+ * @default horizontal
168
+ */
169
+ this.orientation = DEFAULTS.ORIENTATION;
170
+ /**
171
+ * Two variants of divider
172
+ * - **solid**: Solid line.
173
+ * - **gradient**: Gradient Line that fades on either sides of the divider.
174
+ * @default solid
175
+ */
176
+ this.variant = DEFAULTS.VARIANT;
177
+ /**
178
+ * Direction of the arrow icon, if applicable.
179
+ * - **positive**
180
+ * - **negative**
181
+ *
182
+ * Note: Positive and Negative directions are defined based on Cartesian plane.
183
+ * @default 'negative'
184
+ */
185
+ this.arrowDirection = DEFAULTS.ARROW_DIRECTION;
186
+ /**
187
+ * Position of the button, if applicable.
188
+ * - **positive**
189
+ * - **negative**
190
+ *
191
+ * Note: Positive and Negative directions are defined based on Cartesian plane.
192
+ * @default 'negative'
193
+ */
194
+ this.buttonPosition = DEFAULTS.BUTTON_DIRECTION;
195
+ this.setAttribute('data-type', 'mdc-primary-divider');
196
+ }
197
197
  render() {
198
198
  return html `
199
199
  <div></div>
@@ -1011,7 +1011,7 @@
1011
1011
  "kind": "field",
1012
1012
  "name": "arrowDirection",
1013
1013
  "type": {
1014
- "text": "string"
1014
+ "text": "Directions"
1015
1015
  },
1016
1016
  "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
1017
1017
  "default": "'negative'",
@@ -1022,7 +1022,7 @@
1022
1022
  "kind": "field",
1023
1023
  "name": "buttonPosition",
1024
1024
  "type": {
1025
- "text": "string"
1025
+ "text": "Directions"
1026
1026
  },
1027
1027
  "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
1028
1028
  "default": "'negative'",
@@ -1132,7 +1132,7 @@
1132
1132
  {
1133
1133
  "name": "arrow-direction",
1134
1134
  "type": {
1135
- "text": "string"
1135
+ "text": "Directions"
1136
1136
  },
1137
1137
  "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
1138
1138
  "default": "'negative'",
@@ -1141,7 +1141,7 @@
1141
1141
  {
1142
1142
  "name": "button-position",
1143
1143
  "type": {
1144
- "text": "string"
1144
+ "text": "Directions"
1145
1145
  },
1146
1146
  "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
1147
1147
  "default": "'negative'",
package/dist/index.d.ts CHANGED
@@ -7,6 +7,7 @@ import Presence from './components/presence';
7
7
  import Text from './components/text';
8
8
  import Button from './components/button';
9
9
  import Bullet from './components/bullet';
10
+ import Divider from './components/divider';
10
11
  import type { TextType } from './components/text/text.types';
11
- export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, };
12
+ export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Divider, };
12
13
  export type { TextType, };
package/dist/index.js CHANGED
@@ -7,4 +7,5 @@ import Presence from './components/presence';
7
7
  import Text from './components/text';
8
8
  import Button from './components/button';
9
9
  import Bullet from './components/bullet';
10
- export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, };
10
+ import Divider from './components/divider';
11
+ export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Divider, };
package/package.json CHANGED
@@ -35,5 +35,5 @@
35
35
  "@momentum-design/tokens": "*",
36
36
  "lit": "^3.2.0"
37
37
  },
38
- "version": "0.14.1"
38
+ "version": "0.14.3"
39
39
  }