@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.
- package/dist/browser/index.js +185 -37
- package/dist/browser/index.js.map +4 -4
- package/dist/components/divider/divider.component.d.ts +4 -3
- package/dist/components/divider/divider.component.js +44 -44
- package/dist/custom-elements.json +4 -4
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/package.json +1 -1
@@ -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:
|
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:
|
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
|
146
|
-
buttonElement
|
147
|
-
|
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": "
|
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": "
|
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": "
|
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": "
|
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
|
-
|
10
|
+
import Divider from './components/divider';
|
11
|
+
export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Divider, };
|
package/package.json
CHANGED