@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.
@@ -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 {};
@@ -0,0 +1,7 @@
1
+ import Divider from './divider.component';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ ['mdc-divider']: Divider;
5
+ }
6
+ }
7
+ export default Divider;
@@ -0,0 +1,4 @@
1
+ import Divider from './divider.component';
2
+ import { TAG_NAME } from './divider.constants';
3
+ Divider.register(TAG_NAME);
4
+ export default Divider;
@@ -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(...arguments);
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
- const iconHtml = await dynamicSVGImport(url, this.name, fileExtension);
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
- // eslint-disable-next-line no-console
126
- console.error(err);
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
  }