@momentum-design/components 0.4.16 → 0.4.17

Sign up to get free protection for your applications and to get access to all the features.
Files changed (13) hide show
  1. package/dist/browser/index.js +23 -23
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/badge/badge.component.js +3 -2
  4. package/dist/components/text/text.component.d.ts +2 -3
  5. package/dist/components/text/text.component.js +13 -13
  6. package/dist/components/text/text.constants.d.ts +46 -7
  7. package/dist/components/text/text.constants.js +46 -47
  8. package/dist/custom-elements.json +172 -184
  9. package/dist/react/index.d.ts +1 -1
  10. package/dist/react/index.js +1 -1
  11. package/package.json +1 -1
  12. package/dist/components/text/text.types.d.ts +0 -2
  13. package/dist/components/text/text.types.js +0 -1
package/dist/components/badge/badge.component.js CHANGED
@@ -12,6 +12,7 @@ import { classMap } from 'lit-html/directives/class-map.js';
12
12
  import { property } from 'lit/decorators.js';
13
13
  import { ifDefined } from 'lit/directives/if-defined.js';
14
14
  import { Component } from '../../models';
15
+ import { FONT_TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
15
16
  import { BADGE_TYPE, ICON_NAMES_LIST, DEFAULTS, ICON_VARIANT, ICON_STATE } from './badge.constants';
16
17
  import styles from './badge.styles';
17
18
  /**
@@ -119,8 +120,8 @@ class Badge extends Component {
119
120
  getBadgeCounterText(maxCounter, overlay, counter) {
120
121
  return html `
121
122
  <mdc-text
122
- type="body-small-medium"
123
- tagname="div"
123
+ type="${FONT_TYPE.BODY_SMALL_MEDIUM}"
124
+ tagname="${VALID_TEXT_TAGS.DIV}"
124
125
  class="mdc-badge-text ${classMap({ 'mdc-badge-overlay': overlay })}"
125
126
  >
126
127
  ${this.getCounterText(maxCounter, counter)}
package/dist/components/text/text.component.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { CSSResult } from 'lit';
2
2
  import { Component } from '../../models';
3
- import type { FontType, ValidTextTags } from './text.types';
4
3
  /**
5
4
  * Text component for creating styled text elements.
6
5
  * It has to be mounted within the ThemeProvider to access color and font tokens.
@@ -55,7 +54,7 @@ declare class Text extends Component {
55
54
  * - 'headline-small-light'
56
55
  * - 'headline-small-regular'
57
56
  */
58
- type: FontType;
57
+ type: string;
59
58
  /**
60
59
  * Specifies the HTML tag name for the text element. The default tag name is `p`.
61
60
  * This attribute is optional. When set, it changes the tag name of the text element.
@@ -76,7 +75,7 @@ declare class Text extends Component {
76
75
  * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
77
76
  * Note that the styling is determined by the `type` attribute.
78
77
  */
79
- tagname?: ValidTextTags;
78
+ tagname?: string | undefined;
80
79
  render(): import("lit-html").TemplateResult<1>;
81
80
  static styles: Array<CSSResult>;
82
81
  }
package/dist/components/text/text.component.js CHANGED
@@ -11,7 +11,7 @@ import { html } from 'lit';
11
11
  import { property } from 'lit/decorators.js';
12
12
  import styles from './text.styles';
13
13
  import { Component } from '../../models';
14
- import { DEFAULTS } from './text.constants';
14
+ import { DEFAULTS, VALID_TEXT_TAGS } from './text.constants';
15
15
  /**
16
16
  * Text component for creating styled text elements.
17
17
  * It has to be mounted within the ThemeProvider to access color and font tokens.
@@ -95,16 +95,16 @@ class Text extends Component {
95
95
  // Lit does not support dynamically changing values for the tag name of a custom element.
96
96
  // Read more: https://lit.dev/docs/templates/expressions/#invalid-locations
97
97
  switch (this.tagname) {
98
- case 'h1': return html `<h1 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
99
- case 'h2': return html `<h2 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
100
- case 'h3': return html `<h3 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
101
- case 'h4': return html `<h4 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
102
- case 'h5': return html `<h5 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
103
- case 'h6': return html `<h6 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
104
- case 'div': return html `<div part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
105
- case 'span': return html `<span part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
106
- case 'small': return html `<small part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
107
- case 'p':
98
+ case VALID_TEXT_TAGS.H1: return html `<h1 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
99
+ case VALID_TEXT_TAGS.H2: return html `<h2 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
100
+ case VALID_TEXT_TAGS.H3: return html `<h3 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
101
+ case VALID_TEXT_TAGS.H4: return html `<h4 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
102
+ case VALID_TEXT_TAGS.H5: return html `<h5 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
103
+ case VALID_TEXT_TAGS.H6: return html `<h6 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
104
+ case VALID_TEXT_TAGS.DIV: return html `<div part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
105
+ case VALID_TEXT_TAGS.SPAN: return html `<span part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
106
+ case VALID_TEXT_TAGS.SMALL: return html `<small part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
107
+ case VALID_TEXT_TAGS.P:
108
108
  default: return html `<p part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></p>`;
109
109
  }
110
110
  }
@@ -112,10 +112,10 @@ class Text extends Component {
112
112
  Text.styles = [...Component.styles, ...styles];
113
113
  __decorate([
114
114
  property({ attribute: 'type', reflect: true, type: String }),
115
- __metadata("design:type", String)
115
+ __metadata("design:type", Object)
116
116
  ], Text.prototype, "type", void 0);
117
117
  __decorate([
118
118
  property({ attribute: 'tagname', reflect: true, type: String }),
119
- __metadata("design:type", String)
119
+ __metadata("design:type", Object)
120
120
  ], Text.prototype, "tagname", void 0);
121
121
  export default Text;
package/dist/components/text/text.constants.d.ts CHANGED
@@ -1,12 +1,51 @@
1
- import type { FontType, ValidTextTags } from './text.types';
2
1
  declare const TAG_NAME: "mdc-text";
3
- declare const VALUES: {
4
- TYPE: Array<FontType>;
5
- TAGNAME: Array<ValidTextTags>;
2
+ declare const FONT_TYPE: {
3
+ BODY_SMALL_REGULAR: string;
4
+ BODY_SMALL_MEDIUM: string;
5
+ BODY_SMALL_BOLD: string;
6
+ BODY_MIDSIZE_REGULAR: string;
7
+ BODY_MIDSIZE_MEDIUM: string;
8
+ BODY_MIDSIZE_BOLD: string;
9
+ BODY_LARGE_REGULAR: string;
10
+ BODY_LARGE_MEDIUM: string;
11
+ BODY_LARGE_BOLD: string;
12
+ BODY_SMALL_REGULAR_UNDERLINE: string;
13
+ BODY_SMALL_MEDIUM_UNDERLINE: string;
14
+ BODY_MIDSIZE_REGULAR_UNDERLINE: string;
15
+ BODY_MIDSIZE_MEDIUM_UNDERLINE: string;
16
+ BODY_LARGE_REGULAR_UNDERLINE: string;
17
+ BODY_LARGE_MEDIUM_UNDERLINE: string;
18
+ HEADING_SMALL_REGULAR: string;
19
+ HEADING_SMALL_MEDIUM: string;
20
+ HEADING_SMALL_BOLD: string;
21
+ HEADING_MIDSIZE_REGULAR: string;
22
+ HEADING_MIDSIZE_MEDIUM: string;
23
+ HEADING_MIDSIZE_BOLD: string;
24
+ HEADING_LARGE_REGULAR: string;
25
+ HEADING_LARGE_MEDIUM: string;
26
+ HEADING_LARGE_BOLD: string;
27
+ HEADING_XLARGE_REGULAR: string;
28
+ HEADING_XLARGE_MEDIUM: string;
29
+ HEADING_XLARGE_BOLD: string;
30
+ HEADLINE_SMALL_LIGHT: string;
31
+ HEADLINE_SMALL_REGULAR: string;
32
+ };
33
+ declare const VALID_TEXT_TAGS: {
34
+ H1: string;
35
+ H2: string;
36
+ H3: string;
37
+ H4: string;
38
+ H5: string;
39
+ H6: string;
40
+ P: string;
41
+ SMALL: string;
42
+ SPAN: string;
43
+ DIV: string;
6
44
  };
7
45
  declare const DEFAULTS: {
8
- TYPE: FontType;
9
- TEXT_ELEMENT_TAGNAME: ValidTextTags;
46
+ TYPE: string;
47
+ TEXT_ELEMENT_TAGNAME: string;
10
48
  CSS_PART_TEXT: string;
49
+ CHILDREN: string;
11
50
  };
12
- export { TAG_NAME, DEFAULTS, VALUES };
51
+ export { TAG_NAME, DEFAULTS, FONT_TYPE, VALID_TEXT_TAGS };
package/dist/components/text/text.constants.js CHANGED
@@ -1,53 +1,52 @@
1
1
  import utils from '../../utils/tag-name';
2
2
  const TAG_NAME = utils.constructTagName('text');
3
- const VALUES = {
4
- TYPE: [
5
- 'body-small-regular',
6
- 'body-small-medium',
7
- 'body-small-bold',
8
- 'body-midsize-regular',
9
- 'body-midsize-medium',
10
- 'body-midsize-bold',
11
- 'body-large-regular',
12
- 'body-large-medium',
13
- 'body-large-bold',
14
- 'body-small-regular-underline',
15
- 'body-small-medium-underline',
16
- 'body-midsize-regular-underline',
17
- 'body-midsize-medium-underline',
18
- 'body-large-regular-underline',
19
- 'body-large-medium-underline',
20
- 'heading-small-regular',
21
- 'heading-small-medium',
22
- 'heading-small-bold',
23
- 'heading-midsize-regular',
24
- 'heading-midsize-medium',
25
- 'heading-midsize-bold',
26
- 'heading-large-regular',
27
- 'heading-large-medium',
28
- 'heading-large-bold',
29
- 'heading-xlarge-regular',
30
- 'heading-xlarge-medium',
31
- 'heading-xlarge-bold',
32
- 'headline-small-light',
33
- 'headline-small-regular',
34
- ],
35
- TAGNAME: [
36
- 'h1',
37
- 'h2',
38
- 'h3',
39
- 'h4',
40
- 'h5',
41
- 'h6',
42
- 'p',
43
- 'small',
44
- 'span',
45
- 'div',
46
- ],
3
+ const FONT_TYPE = {
4
+ BODY_SMALL_REGULAR: 'body-small-regular',
5
+ BODY_SMALL_MEDIUM: 'body-small-medium',
6
+ BODY_SMALL_BOLD: 'body-small-bold',
7
+ BODY_MIDSIZE_REGULAR: 'body-midsize-regular',
8
+ BODY_MIDSIZE_MEDIUM: 'body-midsize-medium',
9
+ BODY_MIDSIZE_BOLD: 'body-midsize-bold',
10
+ BODY_LARGE_REGULAR: 'body-large-regular',
11
+ BODY_LARGE_MEDIUM: 'body-large-medium',
12
+ BODY_LARGE_BOLD: 'body-large-bold',
13
+ BODY_SMALL_REGULAR_UNDERLINE: 'body-small-regular-underline',
14
+ BODY_SMALL_MEDIUM_UNDERLINE: 'body-small-medium-underline',
15
+ BODY_MIDSIZE_REGULAR_UNDERLINE: 'body-midsize-regular-underline',
16
+ BODY_MIDSIZE_MEDIUM_UNDERLINE: 'body-midsize-medium-underline',
17
+ BODY_LARGE_REGULAR_UNDERLINE: 'body-large-regular-underline',
18
+ BODY_LARGE_MEDIUM_UNDERLINE: 'body-large-medium-underline',
19
+ HEADING_SMALL_REGULAR: 'heading-small-regular',
20
+ HEADING_SMALL_MEDIUM: 'heading-small-medium',
21
+ HEADING_SMALL_BOLD: 'heading-small-bold',
22
+ HEADING_MIDSIZE_REGULAR: 'heading-midsize-regular',
23
+ HEADING_MIDSIZE_MEDIUM: 'heading-midsize-medium',
24
+ HEADING_MIDSIZE_BOLD: 'heading-midsize-bold',
25
+ HEADING_LARGE_REGULAR: 'heading-large-regular',
26
+ HEADING_LARGE_MEDIUM: 'heading-large-medium',
27
+ HEADING_LARGE_BOLD: 'heading-large-bold',
28
+ HEADING_XLARGE_REGULAR: 'heading-xlarge-regular',
29
+ HEADING_XLARGE_MEDIUM: 'heading-xlarge-medium',
30
+ HEADING_XLARGE_BOLD: 'heading-xlarge-bold',
31
+ HEADLINE_SMALL_LIGHT: 'headline-small-light',
32
+ HEADLINE_SMALL_REGULAR: 'headline-small-regular',
33
+ };
34
+ const VALID_TEXT_TAGS = {
35
+ H1: 'h1',
36
+ H2: 'h2',
37
+ H3: 'h3',
38
+ H4: 'h4',
39
+ H5: 'h5',
40
+ H6: 'h6',
41
+ P: 'p',
42
+ SMALL: 'small',
43
+ SPAN: 'span',
44
+ DIV: 'div',
47
45
  };
48
46
  const DEFAULTS = {
49
- TYPE: 'body-midsize-regular',
50
- TEXT_ELEMENT_TAGNAME: 'p',
47
+ TYPE: FONT_TYPE.BODY_LARGE_REGULAR,
48
+ TEXT_ELEMENT_TAGNAME: VALID_TEXT_TAGS.P,
51
49
  CSS_PART_TEXT: 'text',
50
+ CHILDREN: 'The quick brown fox jumps over the lazy dog',
52
51
  };
53
- export { TAG_NAME, DEFAULTS, VALUES };
52
+ export { TAG_NAME, DEFAULTS, FONT_TYPE, VALID_TEXT_TAGS };
package/dist/custom-elements.json CHANGED
@@ -114,178 +114,6 @@
114
114
  }
115
115
  ]
116
116
  },
117
- {
118
- "kind": "javascript-module",
119
- "path": "components/icon/icon.component.js",
120
- "declarations": [
121
- {
122
- "kind": "class",
123
- "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are two types of icons: decorative and informative.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.",
124
- "name": "Icon",
125
- "cssProperties": [
126
- {
127
- "description": "Allows customization of the default fill color.",
128
- "name": "--mdc-icon-fill-color"
129
- }
130
- ],
131
- "members": [
132
- {
133
- "kind": "field",
134
- "name": "iconData",
135
- "type": {
136
- "text": "HTMLElement | undefined"
137
- },
138
- "privacy": "private"
139
- },
140
- {
141
- "kind": "field",
142
- "name": "lengthUnitFromContext",
143
- "type": {
144
- "text": "string | undefined"
145
- },
146
- "privacy": "private"
147
- },
148
- {
149
- "kind": "field",
150
- "name": "sizeFromContext",
151
- "type": {
152
- "text": "number | undefined"
153
- },
154
- "privacy": "private"
155
- },
156
- {
157
- "kind": "field",
158
- "name": "name",
159
- "type": {
160
- "text": "string | undefined"
161
- },
162
- "description": "Name of the icon (= filename)",
163
- "attribute": "name",
164
- "reflects": true
165
- },
166
- {
167
- "kind": "field",
168
- "name": "size",
169
- "type": {
170
- "text": "number | undefined"
171
- },
172
- "description": "Size of the icon (works in combination with length unit)",
173
- "attribute": "size"
174
- },
175
- {
176
- "kind": "field",
177
- "name": "lengthUnit",
178
- "type": {
179
- "text": "string | undefined"
180
- },
181
- "description": "Length unit attribute for overriding length-unit from `IconProvider`",
182
- "attribute": "length-unit"
183
- },
184
- {
185
- "kind": "field",
186
- "name": "ariaLabel",
187
- "type": {
188
- "text": "string | null"
189
- },
190
- "default": "null",
191
- "description": "Aria-label attribute to be set for accessibility",
192
- "attribute": "aria-label"
193
- },
194
- {
195
- "kind": "field",
196
- "name": "iconProviderContext",
197
- "privacy": "private",
198
- "readonly": true
199
- },
200
- {
201
- "kind": "method",
202
- "name": "getIconData",
203
- "privacy": "private",
204
- "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
205
- },
206
- {
207
- "kind": "method",
208
- "name": "updateSize",
209
- "privacy": "private",
210
- "description": "Updates the size by setting the width and height"
211
- },
212
- {
213
- "kind": "method",
214
- "name": "setRoleOnIcon",
215
- "privacy": "private"
216
- },
217
- {
218
- "kind": "method",
219
- "name": "setAriaHiddenOnIcon",
220
- "privacy": "private"
221
- },
222
- {
223
- "kind": "method",
224
- "name": "setAriaLabelOnIcon",
225
- "privacy": "private"
226
- },
227
- {
228
- "kind": "field",
229
- "name": "computedIconSize",
230
- "privacy": "private",
231
- "readonly": true
232
- }
233
- ],
234
- "attributes": [
235
- {
236
- "name": "name",
237
- "type": {
238
- "text": "string | undefined"
239
- },
240
- "description": "Name of the icon (= filename)",
241
- "fieldName": "name"
242
- },
243
- {
244
- "name": "size",
245
- "type": {
246
- "text": "number | undefined"
247
- },
248
- "description": "Size of the icon (works in combination with length unit)",
249
- "fieldName": "size"
250
- },
251
- {
252
- "name": "length-unit",
253
- "type": {
254
- "text": "string | undefined"
255
- },
256
- "description": "Length unit attribute for overriding length-unit from `IconProvider`",
257
- "fieldName": "lengthUnit"
258
- },
259
- {
260
- "name": "aria-label",
261
- "type": {
262
- "text": "string | null"
263
- },
264
- "default": "null",
265
- "description": "Aria-label attribute to be set for accessibility",
266
- "fieldName": "ariaLabel"
267
- }
268
- ],
269
- "superclass": {
270
- "name": "Component",
271
- "module": "/src/models"
272
- },
273
- "tagName": "mdc-icon",
274
- "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are two types of icons: decorative and informative.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n */",
275
- "customElement": true
276
- }
277
- ],
278
- "exports": [
279
- {
280
- "kind": "js",
281
- "name": "default",
282
- "declaration": {
283
- "name": "Icon",
284
- "module": "components/icon/icon.component.js"
285
- }
286
- }
287
- ]
288
- },
289
117
  {
290
118
  "kind": "javascript-module",
291
119
  "path": "components/badge/badge.component.js",
@@ -607,6 +435,178 @@
607
435
  }
608
436
  ]
609
437
  },
438
+ {
439
+ "kind": "javascript-module",
440
+ "path": "components/icon/icon.component.js",
441
+ "declarations": [
442
+ {
443
+ "kind": "class",
444
+ "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are two types of icons: decorative and informative.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.",
445
+ "name": "Icon",
446
+ "cssProperties": [
447
+ {
448
+ "description": "Allows customization of the default fill color.",
449
+ "name": "--mdc-icon-fill-color"
450
+ }
451
+ ],
452
+ "members": [
453
+ {
454
+ "kind": "field",
455
+ "name": "iconData",
456
+ "type": {
457
+ "text": "HTMLElement | undefined"
458
+ },
459
+ "privacy": "private"
460
+ },
461
+ {
462
+ "kind": "field",
463
+ "name": "lengthUnitFromContext",
464
+ "type": {
465
+ "text": "string | undefined"
466
+ },
467
+ "privacy": "private"
468
+ },
469
+ {
470
+ "kind": "field",
471
+ "name": "sizeFromContext",
472
+ "type": {
473
+ "text": "number | undefined"
474
+ },
475
+ "privacy": "private"
476
+ },
477
+ {
478
+ "kind": "field",
479
+ "name": "name",
480
+ "type": {
481
+ "text": "string | undefined"
482
+ },
483
+ "description": "Name of the icon (= filename)",
484
+ "attribute": "name",
485
+ "reflects": true
486
+ },
487
+ {
488
+ "kind": "field",
489
+ "name": "size",
490
+ "type": {
491
+ "text": "number | undefined"
492
+ },
493
+ "description": "Size of the icon (works in combination with length unit)",
494
+ "attribute": "size"
495
+ },
496
+ {
497
+ "kind": "field",
498
+ "name": "lengthUnit",
499
+ "type": {
500
+ "text": "string | undefined"
501
+ },
502
+ "description": "Length unit attribute for overriding length-unit from `IconProvider`",
503
+ "attribute": "length-unit"
504
+ },
505
+ {
506
+ "kind": "field",
507
+ "name": "ariaLabel",
508
+ "type": {
509
+ "text": "string | null"
510
+ },
511
+ "default": "null",
512
+ "description": "Aria-label attribute to be set for accessibility",
513
+ "attribute": "aria-label"
514
+ },
515
+ {
516
+ "kind": "field",
517
+ "name": "iconProviderContext",
518
+ "privacy": "private",
519
+ "readonly": true
520
+ },
521
+ {
522
+ "kind": "method",
523
+ "name": "getIconData",
524
+ "privacy": "private",
525
+ "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
526
+ },
527
+ {
528
+ "kind": "method",
529
+ "name": "updateSize",
530
+ "privacy": "private",
531
+ "description": "Updates the size by setting the width and height"
532
+ },
533
+ {
534
+ "kind": "method",
535
+ "name": "setRoleOnIcon",
536
+ "privacy": "private"
537
+ },
538
+ {
539
+ "kind": "method",
540
+ "name": "setAriaHiddenOnIcon",
541
+ "privacy": "private"
542
+ },
543
+ {
544
+ "kind": "method",
545
+ "name": "setAriaLabelOnIcon",
546
+ "privacy": "private"
547
+ },
548
+ {
549
+ "kind": "field",
550
+ "name": "computedIconSize",
551
+ "privacy": "private",
552
+ "readonly": true
553
+ }
554
+ ],
555
+ "attributes": [
556
+ {
557
+ "name": "name",
558
+ "type": {
559
+ "text": "string | undefined"
560
+ },
561
+ "description": "Name of the icon (= filename)",
562
+ "fieldName": "name"
563
+ },
564
+ {
565
+ "name": "size",
566
+ "type": {
567
+ "text": "number | undefined"
568
+ },
569
+ "description": "Size of the icon (works in combination with length unit)",
570
+ "fieldName": "size"
571
+ },
572
+ {
573
+ "name": "length-unit",
574
+ "type": {
575
+ "text": "string | undefined"
576
+ },
577
+ "description": "Length unit attribute for overriding length-unit from `IconProvider`",
578
+ "fieldName": "lengthUnit"
579
+ },
580
+ {
581
+ "name": "aria-label",
582
+ "type": {
583
+ "text": "string | null"
584
+ },
585
+ "default": "null",
586
+ "description": "Aria-label attribute to be set for accessibility",
587
+ "fieldName": "ariaLabel"
588
+ }
589
+ ],
590
+ "superclass": {
591
+ "name": "Component",
592
+ "module": "/src/models"
593
+ },
594
+ "tagName": "mdc-icon",
595
+ "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are two types of icons: decorative and informative.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n */",
596
+ "customElement": true
597
+ }
598
+ ],
599
+ "exports": [
600
+ {
601
+ "kind": "js",
602
+ "name": "default",
603
+ "declaration": {
604
+ "name": "Icon",
605
+ "module": "components/icon/icon.component.js"
606
+ }
607
+ }
608
+ ]
609
+ },
610
610
  {
611
611
  "kind": "javascript-module",
612
612
  "path": "components/iconprovider/iconprovider.component.js",
@@ -765,9 +765,6 @@
765
765
  {
766
766
  "kind": "field",
767
767
  "name": "type",
768
- "type": {
769
- "text": "FontType"
770
- },
771
768
  "privacy": "public",
772
769
  "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
773
770
  "attribute": "type",
@@ -776,9 +773,6 @@
776
773
  {
777
774
  "kind": "field",
778
775
  "name": "tagname",
779
- "type": {
780
- "text": "ValidTextTags | undefined"
781
- },
782
776
  "privacy": "public",
783
777
  "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
784
778
  "attribute": "tagname",
@@ -788,17 +782,11 @@
788
782
  "attributes": [
789
783
  {
790
784
  "name": "type",
791
- "type": {
792
- "text": "FontType"
793
- },
794
785
  "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
795
786
  "fieldName": "type"
796
787
  },
797
788
  {
798
789
  "name": "tagname",
799
- "type": {
800
- "text": "ValidTextTags | undefined"
801
- },
802
790
  "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
803
791
  "fieldName": "tagname"
804
792
  }