@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.
- package/dist/browser/index.js +272 -210
- package/dist/browser/index.js.map +4 -4
- package/dist/components/menuitemcheckbox/index.d.ts +12 -0
- package/dist/components/menuitemcheckbox/index.js +9 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.component.d.ts +54 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js +137 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.constants.d.ts +15 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.constants.js +16 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.styles.d.ts +2 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.styles.js +13 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.types.d.ts +10 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.types.js +1 -0
- package/dist/components/menuitemradio/index.d.ts +10 -0
- package/dist/components/menuitemradio/index.js +7 -0
- package/dist/components/menuitemradio/menuitemradio.component.d.ts +34 -0
- package/dist/components/menuitemradio/menuitemradio.component.js +70 -0
- package/dist/components/menuitemradio/menuitemradio.constants.d.ts +6 -0
- package/dist/components/menuitemradio/menuitemradio.constants.js +7 -0
- package/dist/components/menuitemradio/menuitemradio.types.d.ts +9 -0
- package/dist/components/menuitemradio/menuitemradio.types.js +1 -0
- package/dist/custom-elements.json +2463 -807
- package/dist/index.d.ts +3 -1
- package/dist/index.js +3 -1
- package/dist/react/index.d.ts +4 -2
- package/dist/react/index.js +4 -2
- package/dist/react/menuitemcheckbox/index.d.ts +42 -0
- package/dist/react/menuitemcheckbox/index.js +50 -0
- package/dist/react/menuitemradio/index.d.ts +30 -0
- package/dist/react/menuitemradio/index.js +38 -0
- package/dist/utils/mixins/ButtonComponentMixin.d.ts +6 -6
- package/dist/utils/mixins/ButtonComponentMixin.js +1 -0
- package/dist/utils/mixins/CardComponentMixin.d.ts +4 -4
- package/dist/utils/mixins/CardComponentMixin.js +27 -21
- package/dist/utils/mixins/FocusTrapMixin.d.ts +1 -1
- package/dist/utils/mixins/FocusTrapMixin.js +1 -0
- package/dist/utils/mixins/FormInternalsMixin.d.ts +3 -3
- package/dist/utils/mixins/FormInternalsMixin.js +10 -10
- 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 };
|
package/dist/react/index.d.ts
CHANGED
@@ -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';
|
package/dist/react/index.js
CHANGED
@@ -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
|
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
|
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
|
-
|
19
|
-
|
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
|
-
|
60
|
-
|
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
|
-
|
70
|
-
|
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
|
74
|
-
|
75
|
-
|
76
|
-
|
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
|
-
|
81
|
-
|
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
|
87
|
-
|
88
|
-
|
89
|
-
|
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([
|
@@ -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
|
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
|
-
|
18
|
-
|
19
|
-
|
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
|
-
|
24
|
-
|
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
|
-
|
47
|
-
|
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