@momentum-design/components 0.74.4 → 0.75.1
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 +318 -241
- package/dist/browser/index.js.map +4 -4
- package/dist/components/animation/animation.component.js +4 -2
- package/dist/components/buttongroup/buttongroup.component.d.ts +53 -0
- package/dist/components/buttongroup/buttongroup.component.js +94 -0
- package/dist/components/buttongroup/buttongroup.constants.d.ts +21 -0
- package/dist/components/buttongroup/buttongroup.constants.js +22 -0
- package/dist/components/buttongroup/buttongroup.styles.d.ts +2 -0
- package/dist/components/buttongroup/buttongroup.styles.js +81 -0
- package/dist/components/buttongroup/buttongroup.types.d.ts +6 -0
- package/dist/components/buttongroup/buttongroup.types.js +1 -0
- package/dist/components/buttongroup/index.d.ts +7 -0
- package/dist/components/buttongroup/index.js +4 -0
- package/dist/custom-elements.json +132 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +3 -2
- package/dist/react/buttongroup/index.d.ts +16 -0
- package/dist/react/buttongroup/index.js +25 -0
- package/dist/react/index.d.ts +1 -0
- package/dist/react/index.js +1 -0
- package/package.json +1 -1
|
@@ -124,8 +124,10 @@ class Animation extends Component {
|
|
|
124
124
|
*/
|
|
125
125
|
getAnimationData() {
|
|
126
126
|
if (this.name && animationManifest[this.name]) {
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
// Make sure the path is point to a folder (and its sub-folders) that contains animation data only
|
|
128
|
+
// otherwise bundlers (eg. webpack) will try to process everything in this folder including the types.d.ts
|
|
129
|
+
const path = animationManifest[this.name].replace(/^\.\/lottie/, '');
|
|
130
|
+
import(`@momentum-design/animations/dist/lottie${path}`)
|
|
129
131
|
.then((result) => this.onLoadSuccessHandler(result.default))
|
|
130
132
|
.catch((error) => this.onLoadFailHandler(error));
|
|
131
133
|
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { CSSResult, PropertyValues } from 'lit';
|
|
2
|
+
import { Component } from '../../models';
|
|
3
|
+
import type { ButtonGroupOrientation, ButtonGroupSize, ButtonGroupVariant } from './buttongroup.types';
|
|
4
|
+
/**
|
|
5
|
+
* buttongroup component, is a styled wrapper for multiple buttons.
|
|
6
|
+
* It can support icon buttons, combination of icon and pill buttons, and text buttons.
|
|
7
|
+
* They are available in horizontal and vertical orientation.
|
|
8
|
+
*
|
|
9
|
+
* @tagname mdc-buttongroup
|
|
10
|
+
*
|
|
11
|
+
* @slot default - This is a default/unnamed slot, which contains the buttons
|
|
12
|
+
*
|
|
13
|
+
* @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup
|
|
14
|
+
* @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup
|
|
15
|
+
* @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup
|
|
16
|
+
*/
|
|
17
|
+
declare class ButtonGroup extends Component {
|
|
18
|
+
/**
|
|
19
|
+
* Orientation of the buttongroup.
|
|
20
|
+
* @default 'horizontal'
|
|
21
|
+
*/
|
|
22
|
+
orientation: ButtonGroupOrientation;
|
|
23
|
+
/**
|
|
24
|
+
* Variant of the buttons within the buttongroup.
|
|
25
|
+
* @default 'primary'
|
|
26
|
+
*/
|
|
27
|
+
variant: ButtonGroupVariant;
|
|
28
|
+
/**
|
|
29
|
+
* Size of the buttons within the buttongroup.
|
|
30
|
+
* @default '28'
|
|
31
|
+
*/
|
|
32
|
+
size: ButtonGroupSize;
|
|
33
|
+
/**
|
|
34
|
+
* When this is true, the buttons within the buttongroup will be compact.
|
|
35
|
+
* i.e. Irrespective of the size of the buttons, they will have a height of 24px.
|
|
36
|
+
* @default false
|
|
37
|
+
*/
|
|
38
|
+
compact: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* List of buttons passed into the slot
|
|
41
|
+
* @internal
|
|
42
|
+
*/
|
|
43
|
+
private buttons;
|
|
44
|
+
/**
|
|
45
|
+
* Handles the slotchange event, setting the size and variant of the buttons
|
|
46
|
+
* @internal
|
|
47
|
+
*/
|
|
48
|
+
private handleSlotChange;
|
|
49
|
+
updated(changedProperties: PropertyValues<ButtonGroup>): void;
|
|
50
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
51
|
+
static styles: Array<CSSResult>;
|
|
52
|
+
}
|
|
53
|
+
export default ButtonGroup;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
|
+
};
|
|
10
|
+
import { html } from 'lit';
|
|
11
|
+
import { property, queryAssignedElements } from 'lit/decorators.js';
|
|
12
|
+
import { Component } from '../../models';
|
|
13
|
+
import { DEFAULTS } from './buttongroup.constants';
|
|
14
|
+
import styles from './buttongroup.styles';
|
|
15
|
+
/**
|
|
16
|
+
* buttongroup component, is a styled wrapper for multiple buttons.
|
|
17
|
+
* It can support icon buttons, combination of icon and pill buttons, and text buttons.
|
|
18
|
+
* They are available in horizontal and vertical orientation.
|
|
19
|
+
*
|
|
20
|
+
* @tagname mdc-buttongroup
|
|
21
|
+
*
|
|
22
|
+
* @slot default - This is a default/unnamed slot, which contains the buttons
|
|
23
|
+
*
|
|
24
|
+
* @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup
|
|
25
|
+
* @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup
|
|
26
|
+
* @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup
|
|
27
|
+
*/
|
|
28
|
+
class ButtonGroup extends Component {
|
|
29
|
+
constructor() {
|
|
30
|
+
super(...arguments);
|
|
31
|
+
/**
|
|
32
|
+
* Orientation of the buttongroup.
|
|
33
|
+
* @default 'horizontal'
|
|
34
|
+
*/
|
|
35
|
+
this.orientation = DEFAULTS.ORIENTATION;
|
|
36
|
+
/**
|
|
37
|
+
* Variant of the buttons within the buttongroup.
|
|
38
|
+
* @default 'primary'
|
|
39
|
+
*/
|
|
40
|
+
this.variant = DEFAULTS.VARIANT;
|
|
41
|
+
/**
|
|
42
|
+
* Size of the buttons within the buttongroup.
|
|
43
|
+
* @default '28'
|
|
44
|
+
*/
|
|
45
|
+
this.size = DEFAULTS.SIZE;
|
|
46
|
+
/**
|
|
47
|
+
* When this is true, the buttons within the buttongroup will be compact.
|
|
48
|
+
* i.e. Irrespective of the size of the buttons, they will have a height of 24px.
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
51
|
+
this.compact = false;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Handles the slotchange event, setting the size and variant of the buttons
|
|
55
|
+
* @internal
|
|
56
|
+
*/
|
|
57
|
+
handleSlotChange() {
|
|
58
|
+
this.buttons.forEach((button) => {
|
|
59
|
+
button.setAttribute('size', this.size.toString());
|
|
60
|
+
button.setAttribute('variant', this.variant);
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
updated(changedProperties) {
|
|
64
|
+
super.updated(changedProperties);
|
|
65
|
+
if (changedProperties.has('size') || changedProperties.has('variant')) {
|
|
66
|
+
this.handleSlotChange();
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
render() {
|
|
70
|
+
return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
ButtonGroup.styles = [...Component.styles, ...styles];
|
|
74
|
+
__decorate([
|
|
75
|
+
property({ type: String, reflect: true }),
|
|
76
|
+
__metadata("design:type", String)
|
|
77
|
+
], ButtonGroup.prototype, "orientation", void 0);
|
|
78
|
+
__decorate([
|
|
79
|
+
property({ type: String, reflect: true }),
|
|
80
|
+
__metadata("design:type", String)
|
|
81
|
+
], ButtonGroup.prototype, "variant", void 0);
|
|
82
|
+
__decorate([
|
|
83
|
+
property({ type: Number, reflect: true }),
|
|
84
|
+
__metadata("design:type", Number)
|
|
85
|
+
], ButtonGroup.prototype, "size", void 0);
|
|
86
|
+
__decorate([
|
|
87
|
+
property({ type: Boolean, reflect: true }),
|
|
88
|
+
__metadata("design:type", Object)
|
|
89
|
+
], ButtonGroup.prototype, "compact", void 0);
|
|
90
|
+
__decorate([
|
|
91
|
+
queryAssignedElements({ selector: 'mdc-button' }),
|
|
92
|
+
__metadata("design:type", Array)
|
|
93
|
+
], ButtonGroup.prototype, "buttons", void 0);
|
|
94
|
+
export default ButtonGroup;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
declare const TAG_NAME: "mdc-buttongroup";
|
|
2
|
+
declare const BUTTON_GROUP_SIZE: {
|
|
3
|
+
readonly 40: 40;
|
|
4
|
+
readonly 32: 32;
|
|
5
|
+
readonly 28: 28;
|
|
6
|
+
readonly 24: 24;
|
|
7
|
+
};
|
|
8
|
+
declare const BUTTON_GROUP_ORIENTATION: {
|
|
9
|
+
readonly HORIZONTAL: "horizontal";
|
|
10
|
+
readonly VERTICAL: "vertical";
|
|
11
|
+
};
|
|
12
|
+
declare const BUTTON_GROUP_VARIANT: {
|
|
13
|
+
readonly PRIMARY: "primary";
|
|
14
|
+
readonly SECONDARY: "secondary";
|
|
15
|
+
};
|
|
16
|
+
declare const DEFAULTS: {
|
|
17
|
+
SIZE: 28;
|
|
18
|
+
VARIANT: "primary";
|
|
19
|
+
ORIENTATION: "horizontal";
|
|
20
|
+
};
|
|
21
|
+
export { TAG_NAME, DEFAULTS, BUTTON_GROUP_SIZE, BUTTON_GROUP_ORIENTATION, BUTTON_GROUP_VARIANT };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import utils from '../../utils/tag-name';
|
|
2
|
+
const TAG_NAME = utils.constructTagName('buttongroup');
|
|
3
|
+
const BUTTON_GROUP_SIZE = {
|
|
4
|
+
40: 40,
|
|
5
|
+
32: 32,
|
|
6
|
+
28: 28,
|
|
7
|
+
24: 24,
|
|
8
|
+
};
|
|
9
|
+
const BUTTON_GROUP_ORIENTATION = {
|
|
10
|
+
HORIZONTAL: 'horizontal',
|
|
11
|
+
VERTICAL: 'vertical',
|
|
12
|
+
};
|
|
13
|
+
const BUTTON_GROUP_VARIANT = {
|
|
14
|
+
PRIMARY: 'primary',
|
|
15
|
+
SECONDARY: 'secondary',
|
|
16
|
+
};
|
|
17
|
+
const DEFAULTS = {
|
|
18
|
+
SIZE: BUTTON_GROUP_SIZE[28],
|
|
19
|
+
VARIANT: BUTTON_GROUP_VARIANT.PRIMARY,
|
|
20
|
+
ORIENTATION: BUTTON_GROUP_ORIENTATION.HORIZONTAL,
|
|
21
|
+
};
|
|
22
|
+
export { TAG_NAME, DEFAULTS, BUTTON_GROUP_SIZE, BUTTON_GROUP_ORIENTATION, BUTTON_GROUP_VARIANT };
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
import { hostFitContentStyles } from '../../utils/styles';
|
|
3
|
+
const styles = css `
|
|
4
|
+
:host{
|
|
5
|
+
--mdc-buttongroup-border-radius: 1.25rem;
|
|
6
|
+
--mdc-buttongroup-border-color: var(--mds-color-theme-outline-button-normal);
|
|
7
|
+
--mdc-buttongroup-divider-color: var(--mds-color-theme-outline-secondary-normal);
|
|
8
|
+
|
|
9
|
+
border-radius: var(--mdc-buttongroup-border-radius);
|
|
10
|
+
border: 1px solid var(--mdc-buttongroup-border-color);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:host([variant='primary']){
|
|
14
|
+
border: none;
|
|
15
|
+
background-color: var(--mds-color-theme-outline-primary-normal);
|
|
16
|
+
gap: 1px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
::slotted(mdc-button){
|
|
20
|
+
border-radius: 0;
|
|
21
|
+
border: none;
|
|
22
|
+
box-sizing: content-box;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
:host([orientation="vertical"]){
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
:host([orientation="horizontal"][variant="secondary"]:dir(ltr)) ::slotted(mdc-button:not(:last-child)){
|
|
30
|
+
border-right: 1px solid var(--mdc-buttongroup-divider-color);
|
|
31
|
+
}
|
|
32
|
+
:host([orientation="horizontal"][variant="secondary"]:dir(rtl)) ::slotted(mdc-button:not(:last-child)){
|
|
33
|
+
border-left: 1px solid var(--mdc-buttongroup-divider-color);
|
|
34
|
+
}
|
|
35
|
+
:host([orientation="vertical"][variant="secondary"]) ::slotted(mdc-button:not(:last-child)){
|
|
36
|
+
border-bottom: 1px solid var(--mdc-buttongroup-divider-color);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:host([orientation="vertical"]) ::slotted(mdc-button:first-child){
|
|
40
|
+
border-top-left-radius: var(--mdc-buttongroup-border-radius);
|
|
41
|
+
border-top-right-radius: var(--mdc-buttongroup-border-radius);
|
|
42
|
+
}
|
|
43
|
+
:host([orientation="vertical"]) ::slotted(mdc-button:last-child){
|
|
44
|
+
border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
|
|
45
|
+
border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:host([orientation="horizontal"]:dir(ltr)) ::slotted(mdc-button:first-child){
|
|
49
|
+
border-top-left-radius: var(--mdc-buttongroup-border-radius);
|
|
50
|
+
border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
|
|
51
|
+
}
|
|
52
|
+
:host([orientation="horizontal"]:dir(rtl)) ::slotted(mdc-button:first-child){
|
|
53
|
+
border-top-right-radius: var(--mdc-buttongroup-border-radius);
|
|
54
|
+
border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
|
|
55
|
+
}
|
|
56
|
+
:host([orientation="horizontal"]:dir(ltr)) ::slotted(mdc-button:last-child){
|
|
57
|
+
border-top-right-radius: var(--mdc-buttongroup-border-radius);
|
|
58
|
+
border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
|
|
59
|
+
}
|
|
60
|
+
:host([orientation="horizontal"]:dir(rtl)) ::slotted(mdc-button:last-child){
|
|
61
|
+
border-top-left-radius: var(--mdc-buttongroup-border-radius);
|
|
62
|
+
border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
:host([compact][orientation="horizontal"]) ::slotted(mdc-button){
|
|
66
|
+
height: 1.5rem;
|
|
67
|
+
}
|
|
68
|
+
:host([compact][orientation="horizontal"][size="24"]) ::slotted(mdc-button){
|
|
69
|
+
width: 1.5rem;
|
|
70
|
+
}
|
|
71
|
+
:host([compact][orientation="horizontal"][size="28"]) ::slotted(mdc-button){
|
|
72
|
+
width: 1.75rem;
|
|
73
|
+
}
|
|
74
|
+
:host([compact][orientation="horizontal"][size="32"]) ::slotted(mdc-button){
|
|
75
|
+
width: 2rem;
|
|
76
|
+
}
|
|
77
|
+
:host([compact][orientation="horizontal"][size="40"]) ::slotted(mdc-button){
|
|
78
|
+
width: 2.5rem;
|
|
79
|
+
}
|
|
80
|
+
`;
|
|
81
|
+
export default [hostFitContentStyles, styles];
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ValueOf } from '../../utils/types';
|
|
2
|
+
import { BUTTON_GROUP_ORIENTATION, BUTTON_GROUP_SIZE, BUTTON_GROUP_VARIANT } from './buttongroup.constants';
|
|
3
|
+
type ButtonGroupSize = ValueOf<typeof BUTTON_GROUP_SIZE>;
|
|
4
|
+
type ButtonGroupOrientation = ValueOf<typeof BUTTON_GROUP_ORIENTATION>;
|
|
5
|
+
type ButtonGroupVariant = ValueOf<typeof BUTTON_GROUP_VARIANT>;
|
|
6
|
+
export type { ButtonGroupSize, ButtonGroupOrientation, ButtonGroupVariant };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -2814,6 +2814,138 @@
|
|
|
2814
2814
|
}
|
|
2815
2815
|
]
|
|
2816
2816
|
},
|
|
2817
|
+
{
|
|
2818
|
+
"kind": "javascript-module",
|
|
2819
|
+
"path": "components/buttongroup/buttongroup.component.js",
|
|
2820
|
+
"declarations": [
|
|
2821
|
+
{
|
|
2822
|
+
"kind": "class",
|
|
2823
|
+
"description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
|
|
2824
|
+
"name": "ButtonGroup",
|
|
2825
|
+
"cssProperties": [
|
|
2826
|
+
{
|
|
2827
|
+
"description": "The border radius of the buttongroup",
|
|
2828
|
+
"name": "--mdc-buttongroup-border-radius"
|
|
2829
|
+
},
|
|
2830
|
+
{
|
|
2831
|
+
"description": "The border color of the buttongroup",
|
|
2832
|
+
"name": "--mdc-buttongroup-border-color"
|
|
2833
|
+
},
|
|
2834
|
+
{
|
|
2835
|
+
"description": "The color of the divider between buttons within the buttongroup",
|
|
2836
|
+
"name": "--mdc-buttongroup-divider-color"
|
|
2837
|
+
}
|
|
2838
|
+
],
|
|
2839
|
+
"slots": [
|
|
2840
|
+
{
|
|
2841
|
+
"description": "This is a default/unnamed slot, which contains the buttons",
|
|
2842
|
+
"name": "default"
|
|
2843
|
+
}
|
|
2844
|
+
],
|
|
2845
|
+
"members": [
|
|
2846
|
+
{
|
|
2847
|
+
"kind": "field",
|
|
2848
|
+
"name": "orientation",
|
|
2849
|
+
"type": {
|
|
2850
|
+
"text": "ButtonGroupOrientation"
|
|
2851
|
+
},
|
|
2852
|
+
"description": "Orientation of the buttongroup.",
|
|
2853
|
+
"default": "'horizontal'",
|
|
2854
|
+
"attribute": "orientation",
|
|
2855
|
+
"reflects": true
|
|
2856
|
+
},
|
|
2857
|
+
{
|
|
2858
|
+
"kind": "field",
|
|
2859
|
+
"name": "variant",
|
|
2860
|
+
"type": {
|
|
2861
|
+
"text": "ButtonGroupVariant"
|
|
2862
|
+
},
|
|
2863
|
+
"description": "Variant of the buttons within the buttongroup.",
|
|
2864
|
+
"default": "'primary'",
|
|
2865
|
+
"attribute": "variant",
|
|
2866
|
+
"reflects": true
|
|
2867
|
+
},
|
|
2868
|
+
{
|
|
2869
|
+
"kind": "field",
|
|
2870
|
+
"name": "size",
|
|
2871
|
+
"type": {
|
|
2872
|
+
"text": "ButtonGroupSize"
|
|
2873
|
+
},
|
|
2874
|
+
"description": "Size of the buttons within the buttongroup.",
|
|
2875
|
+
"default": "'28'",
|
|
2876
|
+
"attribute": "size",
|
|
2877
|
+
"reflects": true
|
|
2878
|
+
},
|
|
2879
|
+
{
|
|
2880
|
+
"kind": "field",
|
|
2881
|
+
"name": "compact",
|
|
2882
|
+
"type": {
|
|
2883
|
+
"text": "boolean"
|
|
2884
|
+
},
|
|
2885
|
+
"default": "false",
|
|
2886
|
+
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
|
2887
|
+
"attribute": "compact",
|
|
2888
|
+
"reflects": true
|
|
2889
|
+
}
|
|
2890
|
+
],
|
|
2891
|
+
"attributes": [
|
|
2892
|
+
{
|
|
2893
|
+
"name": "orientation",
|
|
2894
|
+
"type": {
|
|
2895
|
+
"text": "ButtonGroupOrientation"
|
|
2896
|
+
},
|
|
2897
|
+
"description": "Orientation of the buttongroup.",
|
|
2898
|
+
"default": "'horizontal'",
|
|
2899
|
+
"fieldName": "orientation"
|
|
2900
|
+
},
|
|
2901
|
+
{
|
|
2902
|
+
"name": "variant",
|
|
2903
|
+
"type": {
|
|
2904
|
+
"text": "ButtonGroupVariant"
|
|
2905
|
+
},
|
|
2906
|
+
"description": "Variant of the buttons within the buttongroup.",
|
|
2907
|
+
"default": "'primary'",
|
|
2908
|
+
"fieldName": "variant"
|
|
2909
|
+
},
|
|
2910
|
+
{
|
|
2911
|
+
"name": "size",
|
|
2912
|
+
"type": {
|
|
2913
|
+
"text": "ButtonGroupSize"
|
|
2914
|
+
},
|
|
2915
|
+
"description": "Size of the buttons within the buttongroup.",
|
|
2916
|
+
"default": "'28'",
|
|
2917
|
+
"fieldName": "size"
|
|
2918
|
+
},
|
|
2919
|
+
{
|
|
2920
|
+
"name": "compact",
|
|
2921
|
+
"type": {
|
|
2922
|
+
"text": "boolean"
|
|
2923
|
+
},
|
|
2924
|
+
"default": "false",
|
|
2925
|
+
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
|
2926
|
+
"fieldName": "compact"
|
|
2927
|
+
}
|
|
2928
|
+
],
|
|
2929
|
+
"superclass": {
|
|
2930
|
+
"name": "Component",
|
|
2931
|
+
"module": "/src/models"
|
|
2932
|
+
},
|
|
2933
|
+
"tagName": "mdc-buttongroup",
|
|
2934
|
+
"jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
|
|
2935
|
+
"customElement": true
|
|
2936
|
+
}
|
|
2937
|
+
],
|
|
2938
|
+
"exports": [
|
|
2939
|
+
{
|
|
2940
|
+
"kind": "js",
|
|
2941
|
+
"name": "default",
|
|
2942
|
+
"declaration": {
|
|
2943
|
+
"name": "ButtonGroup",
|
|
2944
|
+
"module": "components/buttongroup/buttongroup.component.js"
|
|
2945
|
+
}
|
|
2946
|
+
}
|
|
2947
|
+
]
|
|
2948
|
+
},
|
|
2817
2949
|
{
|
|
2818
2950
|
"kind": "javascript-module",
|
|
2819
2951
|
"path": "components/buttonlink/buttonlink.component.js",
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ import Badge from './components/badge';
|
|
|
7
7
|
import Brandvisual from './components/brandvisual';
|
|
8
8
|
import Bullet from './components/bullet';
|
|
9
9
|
import Button from './components/button';
|
|
10
|
+
import ButtonGroup from './components/buttongroup';
|
|
10
11
|
import ButtonLink from './components/buttonlink';
|
|
11
12
|
import Card from './components/card';
|
|
12
13
|
import CardButton from './components/cardbutton';
|
|
@@ -33,8 +34,8 @@ import MenuBar from './components/menubar';
|
|
|
33
34
|
import MenuItem from './components/menuitem';
|
|
34
35
|
import MenuItemCheckbox from './components/menuitemcheckbox';
|
|
35
36
|
import MenuItemRadio from './components/menuitemradio';
|
|
36
|
-
import MenuSection from './components/menusection';
|
|
37
37
|
import MenuPopover from './components/menupopover';
|
|
38
|
+
import MenuSection from './components/menusection';
|
|
38
39
|
import OptGroup from './components/optgroup';
|
|
39
40
|
import Option from './components/option';
|
|
40
41
|
import Popover from './components/popover';
|
|
@@ -66,6 +67,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
|
|
|
66
67
|
import type { TextType } from './components/text/text.types';
|
|
67
68
|
import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
|
|
68
69
|
import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
|
|
69
|
-
export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
|
|
70
|
+
export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
|
|
70
71
|
export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
|
|
71
72
|
export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
|
package/dist/index.js
CHANGED
|
@@ -8,6 +8,7 @@ import Badge from './components/badge';
|
|
|
8
8
|
import Brandvisual from './components/brandvisual';
|
|
9
9
|
import Bullet from './components/bullet';
|
|
10
10
|
import Button from './components/button';
|
|
11
|
+
import ButtonGroup from './components/buttongroup';
|
|
11
12
|
import ButtonLink from './components/buttonlink';
|
|
12
13
|
import Card from './components/card';
|
|
13
14
|
import CardButton from './components/cardbutton';
|
|
@@ -34,8 +35,8 @@ import MenuBar from './components/menubar';
|
|
|
34
35
|
import MenuItem from './components/menuitem';
|
|
35
36
|
import MenuItemCheckbox from './components/menuitemcheckbox';
|
|
36
37
|
import MenuItemRadio from './components/menuitemradio';
|
|
37
|
-
import MenuSection from './components/menusection';
|
|
38
38
|
import MenuPopover from './components/menupopover';
|
|
39
|
+
import MenuSection from './components/menusection';
|
|
39
40
|
import OptGroup from './components/optgroup';
|
|
40
41
|
import Option from './components/option';
|
|
41
42
|
import Popover from './components/popover';
|
|
@@ -64,6 +65,6 @@ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
|
|
|
64
65
|
// Constants / Utils Imports
|
|
65
66
|
import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
|
|
66
67
|
// Components Exports
|
|
67
|
-
export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
|
|
68
|
+
export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
|
|
68
69
|
// Constants / Utils Exports
|
|
69
70
|
export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import Component from '../../components/buttongroup';
|
|
2
|
+
/**
|
|
3
|
+
* buttongroup component, is a styled wrapper for multiple buttons.
|
|
4
|
+
* It can support icon buttons, combination of icon and pill buttons, and text buttons.
|
|
5
|
+
* They are available in horizontal and vertical orientation.
|
|
6
|
+
*
|
|
7
|
+
* @tagname mdc-buttongroup
|
|
8
|
+
*
|
|
9
|
+
* @slot default - This is a default/unnamed slot, which contains the buttons
|
|
10
|
+
*
|
|
11
|
+
* @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup
|
|
12
|
+
* @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup
|
|
13
|
+
* @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup
|
|
14
|
+
*/
|
|
15
|
+
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
|
|
16
|
+
export default reactWrapper;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { createComponent } from '@lit/react';
|
|
3
|
+
import Component from '../../components/buttongroup';
|
|
4
|
+
import { TAG_NAME } from '../../components/buttongroup/buttongroup.constants';
|
|
5
|
+
/**
|
|
6
|
+
* buttongroup component, is a styled wrapper for multiple buttons.
|
|
7
|
+
* It can support icon buttons, combination of icon and pill buttons, and text buttons.
|
|
8
|
+
* They are available in horizontal and vertical orientation.
|
|
9
|
+
*
|
|
10
|
+
* @tagname mdc-buttongroup
|
|
11
|
+
*
|
|
12
|
+
* @slot default - This is a default/unnamed slot, which contains the buttons
|
|
13
|
+
*
|
|
14
|
+
* @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup
|
|
15
|
+
* @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup
|
|
16
|
+
* @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup
|
|
17
|
+
*/
|
|
18
|
+
const reactWrapper = createComponent({
|
|
19
|
+
tagName: TAG_NAME,
|
|
20
|
+
elementClass: Component,
|
|
21
|
+
react: React,
|
|
22
|
+
events: {},
|
|
23
|
+
displayName: 'ButtonGroup',
|
|
24
|
+
});
|
|
25
|
+
export default reactWrapper;
|
package/dist/react/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export { default as Badge } from './badge';
|
|
|
7
7
|
export { default as Brandvisual } from './brandvisual';
|
|
8
8
|
export { default as Bullet } from './bullet';
|
|
9
9
|
export { default as Button } from './button';
|
|
10
|
+
export { default as ButtonGroup } from './buttongroup';
|
|
10
11
|
export { default as ButtonLink } from './buttonlink';
|
|
11
12
|
export { default as Buttonsimple } from './buttonsimple';
|
|
12
13
|
export { default as Card } from './card';
|
package/dist/react/index.js
CHANGED
|
@@ -7,6 +7,7 @@ export { default as Badge } from './badge';
|
|
|
7
7
|
export { default as Brandvisual } from './brandvisual';
|
|
8
8
|
export { default as Bullet } from './bullet';
|
|
9
9
|
export { default as Button } from './button';
|
|
10
|
+
export { default as ButtonGroup } from './buttongroup';
|
|
10
11
|
export { default as ButtonLink } from './buttonlink';
|
|
11
12
|
export { default as Buttonsimple } from './buttonsimple';
|
|
12
13
|
export { default as Card } from './card';
|
package/package.json
CHANGED