@momentum-design/components 0.66.2 → 0.66.4

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.
Files changed (38) hide show
  1. package/dist/browser/index.js +272 -210
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/menuitemcheckbox/index.d.ts +12 -0
  4. package/dist/components/menuitemcheckbox/index.js +9 -0
  5. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.d.ts +54 -0
  6. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js +137 -0
  7. package/dist/components/menuitemcheckbox/menuitemcheckbox.constants.d.ts +15 -0
  8. package/dist/components/menuitemcheckbox/menuitemcheckbox.constants.js +16 -0
  9. package/dist/components/menuitemcheckbox/menuitemcheckbox.styles.d.ts +2 -0
  10. package/dist/components/menuitemcheckbox/menuitemcheckbox.styles.js +13 -0
  11. package/dist/components/menuitemcheckbox/menuitemcheckbox.types.d.ts +10 -0
  12. package/dist/components/menuitemcheckbox/menuitemcheckbox.types.js +1 -0
  13. package/dist/components/menuitemradio/index.d.ts +10 -0
  14. package/dist/components/menuitemradio/index.js +7 -0
  15. package/dist/components/menuitemradio/menuitemradio.component.d.ts +34 -0
  16. package/dist/components/menuitemradio/menuitemradio.component.js +70 -0
  17. package/dist/components/menuitemradio/menuitemradio.constants.d.ts +6 -0
  18. package/dist/components/menuitemradio/menuitemradio.constants.js +7 -0
  19. package/dist/components/menuitemradio/menuitemradio.types.d.ts +9 -0
  20. package/dist/components/menuitemradio/menuitemradio.types.js +1 -0
  21. package/dist/custom-elements.json +2463 -807
  22. package/dist/index.d.ts +3 -1
  23. package/dist/index.js +3 -1
  24. package/dist/react/index.d.ts +4 -2
  25. package/dist/react/index.js +4 -2
  26. package/dist/react/menuitemcheckbox/index.d.ts +42 -0
  27. package/dist/react/menuitemcheckbox/index.js +50 -0
  28. package/dist/react/menuitemradio/index.d.ts +30 -0
  29. package/dist/react/menuitemradio/index.js +38 -0
  30. package/dist/utils/mixins/ButtonComponentMixin.d.ts +6 -6
  31. package/dist/utils/mixins/ButtonComponentMixin.js +1 -0
  32. package/dist/utils/mixins/CardComponentMixin.d.ts +4 -4
  33. package/dist/utils/mixins/CardComponentMixin.js +27 -21
  34. package/dist/utils/mixins/FocusTrapMixin.d.ts +1 -1
  35. package/dist/utils/mixins/FocusTrapMixin.js +1 -0
  36. package/dist/utils/mixins/FormInternalsMixin.d.ts +3 -3
  37. package/dist/utils/mixins/FormInternalsMixin.js +10 -10
  38. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -51,6 +51,8 @@ import Tooltip from './components/tooltip';
51
51
  import ToggleTip from './components/toggletip';
52
52
  import VirtualizedList from './components/virtualizedlist';
53
53
  import MenuItem from './components/menuitem';
54
+ import MenuItemRadio from './components/menuitemradio';
55
+ import MenuItemCheckbox from './components/menuitemcheckbox';
54
56
  import type { BadgeType } from './components/badge/badge.types';
55
57
  import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
56
58
  import type { PopoverPlacement } from './components/popover/popover.types';
@@ -58,6 +60,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
58
60
  import type { TextType } from './components/text/text.types';
59
61
  import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
60
62
  import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
61
- export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, MenuItem, };
63
+ export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, MenuItem, MenuItemRadio, MenuItemCheckbox, };
62
64
  export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
63
65
  export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
package/dist/index.js CHANGED
@@ -52,10 +52,12 @@ import Tooltip from './components/tooltip';
52
52
  import ToggleTip from './components/toggletip';
53
53
  import VirtualizedList from './components/virtualizedlist';
54
54
  import MenuItem from './components/menuitem';
55
+ import MenuItemRadio from './components/menuitemradio';
56
+ import MenuItemCheckbox from './components/menuitemcheckbox';
55
57
  import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
56
58
  // Constants / Utils Imports
57
59
  import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
58
60
  // Components Exports
59
- export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, MenuItem, };
61
+ export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, MenuItem, MenuItemRadio, MenuItemCheckbox, };
60
62
  // Constants / Utils Exports
61
63
  export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
@@ -1,6 +1,6 @@
1
+ export { default as AlertChip } from './alertchip';
1
2
  export { default as Appheader } from './appheader';
2
3
  export { default as Avatar } from './avatar';
3
- export { default as AlertChip } from './alertchip';
4
4
  export { default as AvatarButton } from './avatarbutton';
5
5
  export { default as Badge } from './badge';
6
6
  export { default as Brandvisual } from './brandvisual';
@@ -29,6 +29,8 @@ export { default as List } from './list';
29
29
  export { default as ListItem } from './listitem';
30
30
  export { default as Marker } from './marker';
31
31
  export { default as MenuItem } from './menuitem';
32
+ export { default as MenuItemCheckbox } from './menuitemcheckbox';
33
+ export { default as MenuItemRadio } from './menuitemradio';
32
34
  export { default as OptGroup } from './optgroup';
33
35
  export { default as Option } from './option';
34
36
  export { default as Popover } from './popover';
@@ -45,8 +47,8 @@ export { default as StaticCheckbox } from './staticcheckbox';
45
47
  export { default as StaticRadio } from './staticradio';
46
48
  export { default as StaticToggle } from './statictoggle';
47
49
  export { default as Tab } from './tab';
48
- export { default as Text } from './text';
49
50
  export { default as TabList } from './tablist';
51
+ export { default as Text } from './text';
50
52
  export { default as Textarea } from './textarea';
51
53
  export { default as ThemeProvider } from './themeprovider';
52
54
  export { default as Toggle } from './toggle';
@@ -1,6 +1,6 @@
1
+ export { default as AlertChip } from './alertchip';
1
2
  export { default as Appheader } from './appheader';
2
3
  export { default as Avatar } from './avatar';
3
- export { default as AlertChip } from './alertchip';
4
4
  export { default as AvatarButton } from './avatarbutton';
5
5
  export { default as Badge } from './badge';
6
6
  export { default as Brandvisual } from './brandvisual';
@@ -29,6 +29,8 @@ export { default as List } from './list';
29
29
  export { default as ListItem } from './listitem';
30
30
  export { default as Marker } from './marker';
31
31
  export { default as MenuItem } from './menuitem';
32
+ export { default as MenuItemCheckbox } from './menuitemcheckbox';
33
+ export { default as MenuItemRadio } from './menuitemradio';
32
34
  export { default as OptGroup } from './optgroup';
33
35
  export { default as Option } from './option';
34
36
  export { default as Popover } from './popover';
@@ -45,8 +47,8 @@ export { default as StaticCheckbox } from './staticcheckbox';
45
47
  export { default as StaticRadio } from './staticradio';
46
48
  export { default as StaticToggle } from './statictoggle';
47
49
  export { default as Tab } from './tab';
48
- export { default as Text } from './text';
49
50
  export { default as TabList } from './tablist';
51
+ export { default as Text } from './text';
50
52
  export { default as Textarea } from './textarea';
51
53
  export { default as ThemeProvider } from './themeprovider';
52
54
  export { default as Toggle } from './toggle';
@@ -0,0 +1,42 @@
1
+ import { type EventName } from '@lit/react';
2
+ import Component from '../../components/menuitemcheckbox';
3
+ /**
4
+ * A menuitemcheckbox component is a checkable menuitem.
5
+ * There should be no focusable descendants inside this menuitemcheckbox component.
6
+ *
7
+ * The `aria-checked` attribute indicates whether the menuitemcheckbox is checked or not.
8
+ *
9
+ * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b> and <b>toggle</b>.
10
+ * By default the `indicator` is set to <b>checkbox</b>.<br/>
11
+ *
12
+ * The checkbox will always be positioned on the leading side of the menuitem label and
13
+ * the toggle and checkmark will always be positioned on the trailing side.
14
+ *
15
+ * The checkbox will have the possible states of `true` or `false`.
16
+ * If the indicator is set to <b>checkmark</b> and if the `aria-checked` attribute is set to `true`,
17
+ * then the checkmark will be displayed. if not, then no indicator will be displayed.
18
+ *
19
+ * If you want only one item in a group to be checked, consider using menuitemradio component.
20
+ *
21
+ * If a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.
22
+ *
23
+ * @dependency mdc-staticcheckbox
24
+ * @dependency mdc-statictoggle
25
+ * @dependency mdc-icon
26
+ *
27
+ * @tagname mdc-menuitemcheckbox
28
+ *
29
+ * @cssproperty --mdc-checkmark-indicator-color - Allows customization of the checkmark indicator color
30
+ *
31
+ * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.
32
+ * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.
33
+ * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.
34
+ */
35
+ declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
36
+ onChange: EventName<Event>;
37
+ onClick: EventName<MouseEvent>;
38
+ onFocus: EventName<FocusEvent>;
39
+ onKeyDown: EventName<KeyboardEvent>;
40
+ onKeyUp: EventName<KeyboardEvent>;
41
+ }>;
42
+ export default reactWrapper;
@@ -0,0 +1,50 @@
1
+ import * as React from 'react';
2
+ import { createComponent } from '@lit/react';
3
+ import Component from '../../components/menuitemcheckbox';
4
+ import { TAG_NAME } from '../../components/menuitemcheckbox/menuitemcheckbox.constants';
5
+ /**
6
+ * A menuitemcheckbox component is a checkable menuitem.
7
+ * There should be no focusable descendants inside this menuitemcheckbox component.
8
+ *
9
+ * The `aria-checked` attribute indicates whether the menuitemcheckbox is checked or not.
10
+ *
11
+ * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b> and <b>toggle</b>.
12
+ * By default the `indicator` is set to <b>checkbox</b>.<br/>
13
+ *
14
+ * The checkbox will always be positioned on the leading side of the menuitem label and
15
+ * the toggle and checkmark will always be positioned on the trailing side.
16
+ *
17
+ * The checkbox will have the possible states of `true` or `false`.
18
+ * If the indicator is set to <b>checkmark</b> and if the `aria-checked` attribute is set to `true`,
19
+ * then the checkmark will be displayed. if not, then no indicator will be displayed.
20
+ *
21
+ * If you want only one item in a group to be checked, consider using menuitemradio component.
22
+ *
23
+ * If a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.
24
+ *
25
+ * @dependency mdc-staticcheckbox
26
+ * @dependency mdc-statictoggle
27
+ * @dependency mdc-icon
28
+ *
29
+ * @tagname mdc-menuitemcheckbox
30
+ *
31
+ * @cssproperty --mdc-checkmark-indicator-color - Allows customization of the checkmark indicator color
32
+ *
33
+ * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.
34
+ * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.
35
+ * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.
36
+ */
37
+ const reactWrapper = createComponent({
38
+ tagName: TAG_NAME,
39
+ elementClass: Component,
40
+ react: React,
41
+ events: {
42
+ onChange: 'change',
43
+ onClick: 'click',
44
+ onFocus: 'focus',
45
+ onKeyDown: 'keydown',
46
+ onKeyUp: 'keyup',
47
+ },
48
+ displayName: 'MenuItemCheckbox',
49
+ });
50
+ export default reactWrapper;
@@ -0,0 +1,30 @@
1
+ import { type EventName } from '@lit/react';
2
+ import Component from '../../components/menuitemradio';
3
+ /**
4
+ * A menuitemradio component is a checkable menuitem that is used in a menu.
5
+ * A menuitemradio should be checked only one at a time. <br/>
6
+ * There should be no focusable descendants inside this menuitemradio component.
7
+ *
8
+ * The `aria-checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.
9
+ *
10
+ * If you want more than one item in a group to be checked, consider using menuitemcheckbox component.
11
+ *
12
+ * If a menuitemradio is disabled, then the `aria-disabled` attribute is set to `true`.
13
+ *
14
+ * @dependency mdc-staticradio
15
+ * @dependency mdc-text
16
+ *
17
+ * @tagname mdc-menuitemradio
18
+ *
19
+ * @event change - (React: onChange) This event is dispatched when the menuitemradio changes.
20
+ * @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.
21
+ * @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.
22
+ */
23
+ declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
24
+ onChange: EventName<Event>;
25
+ onClick: EventName<MouseEvent>;
26
+ onFocus: EventName<FocusEvent>;
27
+ onKeyDown: EventName<KeyboardEvent>;
28
+ onKeyUp: EventName<KeyboardEvent>;
29
+ }>;
30
+ export default reactWrapper;
@@ -0,0 +1,38 @@
1
+ import * as React from 'react';
2
+ import { createComponent } from '@lit/react';
3
+ import Component from '../../components/menuitemradio';
4
+ import { TAG_NAME } from '../../components/menuitemradio/menuitemradio.constants';
5
+ /**
6
+ * A menuitemradio component is a checkable menuitem that is used in a menu.
7
+ * A menuitemradio should be checked only one at a time. <br/>
8
+ * There should be no focusable descendants inside this menuitemradio component.
9
+ *
10
+ * The `aria-checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.
11
+ *
12
+ * If you want more than one item in a group to be checked, consider using menuitemcheckbox component.
13
+ *
14
+ * If a menuitemradio is disabled, then the `aria-disabled` attribute is set to `true`.
15
+ *
16
+ * @dependency mdc-staticradio
17
+ * @dependency mdc-text
18
+ *
19
+ * @tagname mdc-menuitemradio
20
+ *
21
+ * @event change - (React: onChange) This event is dispatched when the menuitemradio changes.
22
+ * @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.
23
+ * @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.
24
+ */
25
+ const reactWrapper = createComponent({
26
+ tagName: TAG_NAME,
27
+ elementClass: Component,
28
+ react: React,
29
+ events: {
30
+ onChange: 'change',
31
+ onClick: 'click',
32
+ onFocus: 'focus',
33
+ onKeyDown: 'keydown',
34
+ onKeyUp: 'keyup',
35
+ },
36
+ displayName: 'MenuItemRadio',
37
+ });
38
+ export default reactWrapper;
@@ -2,15 +2,15 @@ import type { ButtonColor, ButtonTypeInternal, ButtonVariant, IconButtonSize, Pi
2
2
  import type { IconNames } from '../../components/icon/icon.types';
3
3
  import type { Component } from '../../models';
4
4
  import type { Constructor } from './index.types';
5
- export interface ButtonComponentMixinInterface {
5
+ export declare class ButtonComponentMixinInterface {
6
6
  prefixIcon?: IconNames;
7
7
  postfixIcon?: IconNames;
8
8
  variant: ButtonVariant;
9
9
  color: ButtonColor;
10
- typeInternal: ButtonTypeInternal;
11
- setSize(size: PillButtonSize | IconButtonSize): void;
12
- setVariant(variant: ButtonVariant): void;
13
- setColor(color: ButtonColor): void;
14
- inferButtonType(): void;
10
+ protected typeInternal: ButtonTypeInternal;
11
+ protected setSize(size: PillButtonSize | IconButtonSize): void;
12
+ protected setVariant(variant: ButtonVariant): void;
13
+ protected setColor(color: ButtonColor): void;
14
+ protected inferButtonType(): void;
15
15
  }
16
16
  export declare const ButtonComponentMixin: <T extends Constructor<Component>>(superClass: T) => Constructor<ButtonComponentMixinInterface> & T;
@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  var __metadata = (this && this.__metadata) || function (k, v) {
8
8
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
9
  };
10
+ /* eslint-disable max-classes-per-file */
10
11
  import { property, state } from 'lit/decorators.js';
11
12
  import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from '../../components/button/button.constants';
12
13
  export const ButtonComponentMixin = (superClass) => {
@@ -3,7 +3,7 @@ import type { CardOrientation, CardVariant } from '../../components/card/card.ty
3
3
  import type { TagName as TagNameType } from '../../components/text/text.types';
4
4
  import type { IconNames } from '../../components/icon/icon.types';
5
5
  import type { Constructor } from './index.types';
6
- export interface CardComponentMixinInterface {
6
+ export declare class CardComponentMixinInterface {
7
7
  cardTitle: string;
8
8
  subtitle: string;
9
9
  imageSrc: string;
@@ -13,8 +13,8 @@ export interface CardComponentMixinInterface {
13
13
  titleTagName: TagNameType;
14
14
  subtitleTagName: TagNameType;
15
15
  iconName?: IconNames;
16
- renderIcon: () => TemplateResult;
17
- renderImage: () => TemplateResult;
18
- renderTitle: () => TemplateResult;
16
+ protected renderIcon: () => TemplateResult;
17
+ protected renderImage: () => TemplateResult;
18
+ protected renderTitle: () => TemplateResult;
19
19
  }
20
20
  export declare const CardComponentMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<CardComponentMixinInterface> & T;
@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  var __metadata = (this && this.__metadata) || function (k, v) {
8
8
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
9
  };
10
+ /* eslint-disable max-classes-per-file */
10
11
  import { html, nothing } from 'lit';
11
12
  import { property } from 'lit/decorators.js';
12
13
  import { DEFAULTS } from '../../components/card/card.constants';
@@ -15,9 +16,9 @@ export const CardComponentMixin = (superClass) => {
15
16
  constructor() {
16
17
  super(...arguments);
17
18
  /**
18
- * The title of the card - part of header section
19
- * @default ''
20
- */
19
+ * The title of the card - part of header section
20
+ * @default ''
21
+ */
21
22
  this.cardTitle = '';
22
23
  /**
23
24
  * The subtitle of the card - part of header section
@@ -56,37 +57,42 @@ export const CardComponentMixin = (superClass) => {
56
57
  this.subtitleTagName = DEFAULTS.TAGNAME;
57
58
  }
58
59
  /**
59
- * Renders the image on the card if image source is provided
60
- * @returns The image element
61
- */
60
+ * Renders the image on the card if image source is provided
61
+ * @returns The image element
62
+ */
62
63
  renderImage() {
63
64
  if (!this.imageSrc) {
64
65
  return nothing;
65
66
  }
66
- return html `<img part="image" src="${this.imageSrc}" alt="${this.imageAlt}"/>`;
67
+ return html `<img part="image" src="${this.imageSrc}" alt="${this.imageAlt}" />`;
67
68
  }
68
69
  /**
69
- * Renders the icon on the card if icon name is provided
70
- * @returns The icon element
71
- */
70
+ * Renders the icon on the card if icon name is provided
71
+ * @returns The icon element
72
+ */
72
73
  renderIcon() {
73
- return this.iconName ? html `<mdc-icon part="icon"
74
- size="${DEFAULTS.ICON_SIZE}"
75
- length-unit="${DEFAULTS.ICON_LENGTH_UNIT}"
76
- name="${this.iconName}"></mdc-icon>`
74
+ return this.iconName
75
+ ? html `<mdc-icon
76
+ part="icon"
77
+ size="${DEFAULTS.ICON_SIZE}"
78
+ length-unit="${DEFAULTS.ICON_LENGTH_UNIT}"
79
+ name="${this.iconName}"
80
+ ></mdc-icon>`
77
81
  : nothing;
78
82
  }
79
83
  /**
80
- * Renders the title and subtitle on the card
81
- * @returns The title and subtitle elements
82
- */
84
+ * Renders the title and subtitle on the card
85
+ * @returns The title and subtitle elements
86
+ */
83
87
  renderTitle() {
84
88
  return html `<div part="title-container">
85
89
  <mdc-text part="title" type="${DEFAULTS.TITLE_TYPE}" tagname="${this.titleTagName}">${this.cardTitle}</mdc-text>
86
- ${this.subtitle ? html `<mdc-text part="subtitle"
87
- type="${DEFAULTS.SUBTITLE_TYPE}"
88
- tagname="${this.subtitleTagName}">${this.subtitle}</mdc-text>` : nothing}
89
- </div>`;
90
+ ${this.subtitle
91
+ ? html `<mdc-text part="subtitle" type="${DEFAULTS.SUBTITLE_TYPE}" tagname="${this.subtitleTagName}"
92
+ >${this.subtitle}</mdc-text
93
+ >`
94
+ : nothing}
95
+ </div>`;
90
96
  }
91
97
  }
92
98
  __decorate([
@@ -1,5 +1,5 @@
1
1
  import type { Constructor } from './index.types';
2
- export interface FocusTrapClassInterface {
2
+ export declare class FocusTrapClassInterface {
3
3
  enabledFocusTrap: boolean;
4
4
  enabledPreventScroll: boolean;
5
5
  setFocusableElements(): void;
@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  var __metadata = (this && this.__metadata) || function (k, v) {
8
8
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
9
  };
10
+ /* eslint-disable max-classes-per-file */
10
11
  import { property } from 'lit/decorators.js';
11
12
  import { DEFAULTS as POPOVER_DEFAULTS } from '../../components/popover/popover.constants';
12
13
  export const FocusTrapMixin = (superClass) => {
@@ -22,15 +22,15 @@ export interface AssociatedFormControl {
22
22
  formResetCallback(): void;
23
23
  formStateRestoreCallback(state: string | FormData | File, mode: 'restore' | 'autocomplete'): void;
24
24
  }
25
- export interface FormInternalsMixinInterface {
25
+ export declare class FormInternalsMixinInterface {
26
26
  name: string;
27
27
  value: string;
28
28
  form: HTMLFormElement | null;
29
29
  validity: ValidityState;
30
30
  validationMessage: string;
31
31
  willValidate: boolean;
32
- internals: ElementInternals;
33
- inputElement: HTMLInputElement | HTMLTextAreaElement;
32
+ protected internals: ElementInternals;
33
+ protected inputElement: HTMLInputElement | HTMLTextAreaElement;
34
34
  setValidity(): void;
35
35
  checkValidity(): boolean;
36
36
  reportValidity(): boolean;
@@ -14,15 +14,15 @@ export const FormInternalsMixin = (superClass) => {
14
14
  constructor() {
15
15
  super(...arguments);
16
16
  /**
17
- * Indicates the name of the component group.
18
- * They are used to group elements in a form together.
19
- * @default ''
20
- */
17
+ * Indicates the name of the component group.
18
+ * They are used to group elements in a form together.
19
+ * @default ''
20
+ */
21
21
  this.name = '';
22
22
  /**
23
- * Indicates the value of the component group (ex: input, checkbox, radio, select etc...)
24
- * @default ''
25
- */
23
+ * Indicates the value of the component group (ex: input, checkbox, radio, select etc...)
24
+ * @default ''
25
+ */
26
26
  this.value = '';
27
27
  /** @internal */
28
28
  this.internals = this.attachInternals();
@@ -43,9 +43,9 @@ export const FormInternalsMixin = (superClass) => {
43
43
  this.id = `mdc-input-${uuidv4()}`;
44
44
  }
45
45
  /**
46
- * Sets the validity of the input field based on the input field's validity.
47
- * @returns void
48
- */
46
+ * Sets the validity of the input field based on the input field's validity.
47
+ * @returns void
48
+ */
49
49
  setValidity() {
50
50
  if (this.inputElement) {
51
51
  this.internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage, this.inputElement);
package/package.json CHANGED
@@ -39,5 +39,5 @@
39
39
  "lit": "^3.2.0",
40
40
  "uuid": "^11.0.5"
41
41
  },
42
- "version": "0.66.2"
42
+ "version": "0.66.4"
43
43
  }