@momentum-design/components 0.12.5 → 0.12.7
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 +24 -24
- package/dist/browser/index.js.map +3 -3
- package/dist/components/button/button.component.d.ts +1 -6
- package/dist/components/button/button.component.js +9 -19
- package/dist/components/button/button.styles.js +7 -7
- package/dist/components/divider/divider.component.d.ts +128 -0
- package/dist/components/divider/divider.component.js +222 -0
- package/dist/components/divider/divider.constants.d.ts +32 -0
- package/dist/components/divider/divider.constants.js +33 -0
- package/dist/components/divider/divider.styles.d.ts +5 -0
- package/dist/components/divider/divider.styles.js +155 -0
- package/dist/components/divider/divider.types.d.ts +6 -0
- package/dist/components/divider/divider.types.js +1 -0
- package/dist/components/divider/index.d.ts +7 -0
- package/dist/components/divider/index.js +4 -0
- package/dist/components/icon/icon.component.d.ts +6 -0
- package/dist/components/icon/icon.component.js +16 -4
- package/dist/components/icon/icon.utils.d.ts +3 -1
- package/dist/components/icon/icon.utils.js +4 -2
- package/dist/custom-elements.json +312 -88
- package/dist/react/divider/index.d.ts +43 -0
- package/dist/react/divider/index.js +52 -0
- package/dist/react/index.d.ts +2 -1
- package/dist/react/index.js +2 -1
- package/package.json +1 -1
@@ -0,0 +1,155 @@
|
|
1
|
+
import { css } from 'lit';
|
2
|
+
import { hostFitContentStyles } from '../../utils/styles';
|
3
|
+
/**
|
4
|
+
* Divider component styles
|
5
|
+
*/
|
6
|
+
const styles = [
|
7
|
+
hostFitContentStyles,
|
8
|
+
/* Host styles */
|
9
|
+
css `
|
10
|
+
:host {
|
11
|
+
--mdc-divider-background-color: var(--mds-color-theme-outline-secondary-normal);
|
12
|
+
--mdc-divider-width: 0.0625rem;
|
13
|
+
--mdc-divider-horizontal-gradient: var(--mds-color-theme-gradientdivider-default-normal);
|
14
|
+
--mdc-divider-vertical-gradient: var(--mds-color-theme-gradientdivider-vertical-normal);
|
15
|
+
--mdc-divider-text-size: var(--mds-font-size-body-midsize);
|
16
|
+
--mdc-divider-text-color: var(--mds-color-theme-text-secondary-normal);
|
17
|
+
--mdc-divider-text-line-height: var(--mds-font-lineheight-body-midsize);
|
18
|
+
--mdc-divider-text-margin: 1.5rem;
|
19
|
+
--mdc-divider-grabber-button-border-radius: 0.5rem;
|
20
|
+
|
21
|
+
display: flex;
|
22
|
+
justify-content: center;
|
23
|
+
}
|
24
|
+
|
25
|
+
/* Primary and grabber divider styles */
|
26
|
+
:host([data-type='mdc-primary-divider']),
|
27
|
+
:host([data-type='mdc-grabber-divider']) {
|
28
|
+
background-color: var(--mdc-divider-background-color);
|
29
|
+
}
|
30
|
+
|
31
|
+
/* Orientation-specific styles */
|
32
|
+
:host([orientation='horizontal']) {
|
33
|
+
flex-direction: row;
|
34
|
+
height: var(--mdc-divider-width);
|
35
|
+
width: 100%;
|
36
|
+
}
|
37
|
+
|
38
|
+
:host([orientation='vertical']:not([data-type='mdc-text-divider'])) {
|
39
|
+
flex-direction: column;
|
40
|
+
height: 100%;
|
41
|
+
width: var(--mdc-divider-width);
|
42
|
+
}
|
43
|
+
|
44
|
+
/* Gradient styles for primary and grabber dividers */
|
45
|
+
:host([orientation='horizontal'][variant='gradient'][data-type='mdc-primary-divider']),
|
46
|
+
:host([orientation='horizontal'][variant='gradient'][data-type='mdc-grabber-divider']) {
|
47
|
+
background: var(--mdc-divider-horizontal-gradient);
|
48
|
+
}
|
49
|
+
|
50
|
+
:host([orientation='vertical'][variant='gradient'][data-type='mdc-primary-divider']),
|
51
|
+
:host([orientation='vertical'][variant='gradient'][data-type='mdc-grabber-divider']) {
|
52
|
+
background: var(--mdc-divider-vertical-gradient);
|
53
|
+
}
|
54
|
+
|
55
|
+
/* Hiding slotted content for primary dividers */
|
56
|
+
:host([data-type='mdc-primary-divider']) ::slotted(*) {
|
57
|
+
display: none;
|
58
|
+
}
|
59
|
+
|
60
|
+
/** Button divider styles */
|
61
|
+
:host([orientation='vertical']) ::slotted(mdc-button) {
|
62
|
+
width: 1.25rem;
|
63
|
+
height: 2.5rem;
|
64
|
+
border-radius: 0
|
65
|
+
var(--mdc-divider-grabber-button-border-radius)
|
66
|
+
var(--mdc-divider-grabber-button-border-radius)
|
67
|
+
0;
|
68
|
+
}
|
69
|
+
|
70
|
+
:host([orientation='horizontal']) ::slotted(mdc-button) {
|
71
|
+
height: 1.25rem;
|
72
|
+
width: 2.5rem;
|
73
|
+
border-radius: 0
|
74
|
+
0
|
75
|
+
var(--mdc-divider-grabber-button-border-radius)
|
76
|
+
var(--mdc-divider-grabber-button-border-radius);
|
77
|
+
}
|
78
|
+
|
79
|
+
:host([orientation='horizontal'][button-position='positive']),
|
80
|
+
:host([orientation='vertical'][button-position='negative']) {
|
81
|
+
align-items: end;
|
82
|
+
}
|
83
|
+
|
84
|
+
:host([orientation='horizontal'][button-position='negative']),
|
85
|
+
:host([orientation='vertical'][button-position='positive']) {
|
86
|
+
align-items: start;
|
87
|
+
}
|
88
|
+
|
89
|
+
:host([orientation='horizontal'][button-position='positive']) ::slotted(mdc-button) {
|
90
|
+
border-radius: var(--mdc-divider-grabber-button-border-radius)
|
91
|
+
var(--mdc-divider-grabber-button-border-radius)
|
92
|
+
0
|
93
|
+
0;
|
94
|
+
border-bottom-color: transparent;
|
95
|
+
}
|
96
|
+
|
97
|
+
:host([orientation='horizontal'][button-position='negative']) ::slotted(mdc-button) {
|
98
|
+
border-top-color: transparent;
|
99
|
+
}
|
100
|
+
|
101
|
+
:host([orientation='vertical'][button-position='negative']:dir(ltr)) ::slotted(mdc-button),
|
102
|
+
:host([orientation='vertical'][button-position='negative']:dir(rtl)) ::slotted(mdc-button) {
|
103
|
+
border-radius: var(--mdc-divider-grabber-button-border-radius)
|
104
|
+
0
|
105
|
+
0
|
106
|
+
var(--mdc-divider-grabber-button-border-radius);
|
107
|
+
border-right-color: transparent;
|
108
|
+
}
|
109
|
+
|
110
|
+
:host([orientation='vertical'][button-position='positive']:dir(ltr)) ::slotted(mdc-button),
|
111
|
+
:host([orientation='vertical'][button-position='positive']:dir(rtl)) ::slotted(mdc-button) {
|
112
|
+
border-left-color: transparent;
|
113
|
+
}
|
114
|
+
|
115
|
+
:host([orientation='vertical'][button-position='positive']:dir(rtl)) ::slotted(mdc-button) {
|
116
|
+
border-radius: 0
|
117
|
+
var(--mdc-divider-grabber-button-border-radius)
|
118
|
+
var(--mdc-divider-grabber-button-border-radius)
|
119
|
+
0;
|
120
|
+
transform: rotate(180deg);
|
121
|
+
}
|
122
|
+
|
123
|
+
:host([orientation='vertical'][button-position='negative']:dir(rtl)) ::slotted(mdc-button) {
|
124
|
+
transform: rotate(180deg);
|
125
|
+
}
|
126
|
+
|
127
|
+
/** Text divider styles */
|
128
|
+
:host([orientation='horizontal'][variant='gradient'][data-type='mdc-text-divider']),
|
129
|
+
:host([orientation='horizontal'][variant='solid'][data-type='mdc-text-divider']) {
|
130
|
+
align-items: center;
|
131
|
+
}
|
132
|
+
|
133
|
+
:host([data-type='mdc-text-divider']) > div {
|
134
|
+
width: 100%;
|
135
|
+
height: 100%;
|
136
|
+
background-color: var(--mdc-divider-background-color);
|
137
|
+
}
|
138
|
+
|
139
|
+
:host([orientation='horizontal'][variant='gradient'][data-type='mdc-text-divider']) > div:first-of-type {
|
140
|
+
background: linear-gradient(to right, transparent, 30%, var(--mdc-divider-background-color));
|
141
|
+
}
|
142
|
+
|
143
|
+
:host([orientation='horizontal'][variant='gradient'][data-type='mdc-text-divider']) > div:last-of-type {
|
144
|
+
background: linear-gradient(to left, transparent, 30%, var(--mdc-divider-background-color));
|
145
|
+
}
|
146
|
+
|
147
|
+
:host([data-type='mdc-text-divider']) ::slotted(mdc-text) {
|
148
|
+
margin: 0 var(--mdc-divider-text-margin);
|
149
|
+
color: var(--mdc-divider-text-color);
|
150
|
+
font-size: var(--mdc-divider-text-size);
|
151
|
+
line-height: var(--mdc-divider-text-line-height);
|
152
|
+
}
|
153
|
+
`,
|
154
|
+
];
|
155
|
+
export default styles;
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import type { ValueOf } from '../../utils/types';
|
2
|
+
import { DIVIDER_ORIENTATION, DIVIDER_VARIANT, DIRECTIONS } from './divider.constants';
|
3
|
+
type DividerOrientation = ValueOf<typeof DIVIDER_ORIENTATION>;
|
4
|
+
type DividerVariant = ValueOf<typeof DIVIDER_VARIANT>;
|
5
|
+
type Directions = ValueOf<typeof DIRECTIONS>;
|
6
|
+
export { DividerOrientation, DividerVariant, Directions };
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -59,9 +59,15 @@ declare class Icon extends Component {
|
|
59
59
|
*/
|
60
60
|
ariaLabel: string | null;
|
61
61
|
private readonly iconProviderContext;
|
62
|
+
private abortController;
|
63
|
+
constructor();
|
62
64
|
/**
|
63
65
|
* Get Icon Data function which will fetch the icon (currently only svg)
|
64
66
|
* and sets state and attributes once fetched successfully
|
67
|
+
*
|
68
|
+
* This method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.
|
69
|
+
* If the request is aborted after the fetch() call has been fulfilled but before the response body has been read,
|
70
|
+
* then attempting to read the response body will reject with an AbortError exception.
|
65
71
|
*/
|
66
72
|
private getIconData;
|
67
73
|
/**
|
@@ -54,7 +54,7 @@ import { DEFAULTS } from './icon.constants';
|
|
54
54
|
*/
|
55
55
|
class Icon extends Component {
|
56
56
|
constructor() {
|
57
|
-
super(
|
57
|
+
super();
|
58
58
|
/**
|
59
59
|
* Name of the icon (= filename)
|
60
60
|
*/
|
@@ -64,16 +64,23 @@ class Icon extends Component {
|
|
64
64
|
*/
|
65
65
|
this.ariaLabel = null;
|
66
66
|
this.iconProviderContext = providerUtils.consume({ host: this, context: IconProvider.Context });
|
67
|
+
this.abortController = new AbortController(); // Initialize AbortController
|
67
68
|
}
|
68
69
|
/**
|
69
70
|
* Get Icon Data function which will fetch the icon (currently only svg)
|
70
71
|
* and sets state and attributes once fetched successfully
|
72
|
+
*
|
73
|
+
* This method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.
|
74
|
+
* If the request is aborted after the fetch() call has been fulfilled but before the response body has been read,
|
75
|
+
* then attempting to read the response body will reject with an AbortError exception.
|
71
76
|
*/
|
72
77
|
async getIconData() {
|
73
78
|
if (this.iconProviderContext.value) {
|
74
79
|
const { fileExtension, url } = this.iconProviderContext.value;
|
75
80
|
if (url && fileExtension && this.name) {
|
76
|
-
|
81
|
+
this.abortController.abort();
|
82
|
+
this.abortController = new AbortController();
|
83
|
+
const iconHtml = await dynamicSVGImport(url, this.name, fileExtension, this.abortController.signal);
|
77
84
|
// update iconData state once fetched:
|
78
85
|
this.iconData = iconHtml;
|
79
86
|
// when icon got fetched, set role and aria-label:
|
@@ -122,8 +129,9 @@ class Icon extends Component {
|
|
122
129
|
if (changedProperties.has('name')) {
|
123
130
|
// fetch icon data if name changes:
|
124
131
|
this.getIconData().catch((err) => {
|
125
|
-
|
126
|
-
|
132
|
+
if (err.name !== 'AbortError' && this.onerror) {
|
133
|
+
this.onerror(err);
|
134
|
+
}
|
127
135
|
});
|
128
136
|
}
|
129
137
|
if (changedProperties.has('ariaLabel')) {
|
@@ -175,4 +183,8 @@ __decorate([
|
|
175
183
|
property({ type: String, attribute: 'aria-label' }),
|
176
184
|
__metadata("design:type", Object)
|
177
185
|
], Icon.prototype, "ariaLabel", void 0);
|
186
|
+
__decorate([
|
187
|
+
state(),
|
188
|
+
__metadata("design:type", AbortController)
|
189
|
+
], Icon.prototype, "abortController", void 0);
|
178
190
|
export default Icon;
|
@@ -5,8 +5,10 @@
|
|
5
5
|
* @param url - The base url of the icon
|
6
6
|
* @param name - The name of the icon
|
7
7
|
* @param fileExtension - The file extension of the icon
|
8
|
+
* @param signal - The signal to abort the fetch.
|
9
|
+
* It is used to cancel the fetch when the component is disconnected or updated.
|
8
10
|
* @returns The valid icon element
|
9
11
|
* @throws Error if the response is not ok
|
10
12
|
*/
|
11
|
-
declare const dynamicSVGImport: (url: string, name: string, fileExtension: string) => Promise<Element>;
|
13
|
+
declare const dynamicSVGImport: (url: string, name: string, fileExtension: string, signal: AbortSignal) => Promise<Element>;
|
12
14
|
export { dynamicSVGImport };
|
@@ -6,11 +6,13 @@
|
|
6
6
|
* @param url - The base url of the icon
|
7
7
|
* @param name - The name of the icon
|
8
8
|
* @param fileExtension - The file extension of the icon
|
9
|
+
* @param signal - The signal to abort the fetch.
|
10
|
+
* It is used to cancel the fetch when the component is disconnected or updated.
|
9
11
|
* @returns The valid icon element
|
10
12
|
* @throws Error if the response is not ok
|
11
13
|
*/
|
12
|
-
const dynamicSVGImport = async (url, name, fileExtension) => {
|
13
|
-
const response = await fetch(`${url}/${name}.${fileExtension}
|
14
|
+
const dynamicSVGImport = async (url, name, fileExtension, signal) => {
|
15
|
+
const response = await fetch(`${url}/${name}.${fileExtension}`, { signal });
|
14
16
|
if (!response.ok) {
|
15
17
|
throw new Error('There was a problem while fetching the icon!');
|
16
18
|
}
|