@mgdis/mg-components 4.1.0 → 4.2.0
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/cjs/{index-88560a66.js → index-64cee0c8.js} +248 -81
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/{mg-badge_24.cjs.entry.js → mg-badge_23.cjs.entry.js} +206 -2180
- package/dist/cjs/mg-components.cjs.js +3 -3
- package/dist/cjs/mg-modal.cjs.entry.js +8 -1
- package/dist/cjs/mg-popover.cjs.entry.js +171 -0
- package/dist/cjs/popper-71bf3058.js +1790 -0
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +116 -99
- package/dist/collection/components/atoms/mg-button/mg-button.js +221 -220
- package/dist/collection/components/atoms/mg-character-left/mg-character-left.js +72 -69
- package/dist/collection/components/atoms/mg-icon/doc/mg-icon.stories.js +1 -2
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +102 -92
- package/dist/collection/components/atoms/mg-input-title/mg-input-title.js +83 -67
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +64 -55
- package/dist/collection/components/atoms/mg-tooltip/doc/mg-tooltip.stories.js +3 -6
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +120 -106
- package/dist/collection/components/molecules/inputs/MgInput.js +8 -17
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +323 -318
- package/dist/collection/components/molecules/inputs/mg-input-date/doc/mg-input-date.stories.js +3 -2
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +356 -361
- package/dist/collection/components/molecules/inputs/mg-input-numeric/doc/mg-input-numeric.stories.js +1 -2
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +462 -456
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +347 -340
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +348 -343
- package/dist/collection/components/molecules/inputs/mg-input-select/doc/mg-input-select.stories.js +4 -3
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +406 -401
- package/dist/collection/components/molecules/inputs/mg-input-text/doc/mg-input-text.stories.js +12 -15
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.css +2 -0
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +476 -473
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +461 -456
- package/dist/collection/components/molecules/inputs/mg-input-toggle/doc/mg-input-toggle.stories.js +2 -8
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.css +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +299 -298
- package/dist/collection/components/molecules/mg-details/doc/mg-details.stories.js +1 -3
- package/dist/collection/components/molecules/mg-details/mg-details.js +95 -93
- package/dist/collection/components/molecules/mg-form/doc/mg-form.stories.js +13 -27
- package/dist/collection/components/molecules/mg-form/mg-form.js +175 -166
- package/dist/collection/components/molecules/mg-illustrated-message/doc/mg-illustrated-message.stories.js +2 -6
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +37 -37
- package/dist/collection/components/molecules/mg-message/doc/mg-message.stories.js +1 -3
- package/dist/collection/components/molecules/mg-message/mg-message.js +154 -153
- package/dist/collection/components/molecules/mg-modal/doc/mg-modal.stories.js +11 -15
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +147 -134
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.css +5 -6
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +112 -117
- package/dist/collection/components/molecules/mg-panel/doc/mg-panel.stories.js +1 -8
- package/dist/collection/components/molecules/mg-panel/mg-panel.css +2 -2
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +192 -189
- package/dist/collection/components/molecules/mg-popover/doc/mg-popover.stories.js +1 -4
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +129 -127
- package/dist/collection/components/molecules/mg-tabs/doc/mg-tabs.stories.js +1 -5
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.css +1 -0
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +150 -135
- package/dist/collection/fonts/OpenSans-Bold.ttf +0 -0
- package/dist/collection/locales/en/messages.json +50 -0
- package/dist/collection/locales/fr/messages.json +50 -0
- package/dist/collection/stories/grids.stories.js +1 -44
- package/dist/collection/stories/helpers.stories.js +1 -19
- package/dist/collection/stories/icons.stories.js +1 -4
- package/dist/collection/stories/typography.stories.js +1 -12
- package/dist/collection/variables.css +3 -2
- package/dist/collection/variables.scss +3 -2
- package/dist/components/MgInput.js +6 -3
- package/dist/components/mg-badge2.js +7 -0
- package/dist/components/mg-button2.js +2 -7
- package/dist/components/mg-input-checkbox.js +1 -6
- package/dist/components/mg-input-date.js +10 -27
- package/dist/components/mg-input-numeric.js +1 -6
- package/dist/components/mg-input-password.js +1 -6
- package/dist/components/mg-input-radio.js +1 -6
- package/dist/components/mg-input-select2.js +1 -6
- package/dist/components/mg-input-text2.js +3 -8
- package/dist/components/mg-input-textarea.js +2 -7
- package/dist/components/mg-input-title2.js +9 -0
- package/dist/components/mg-input-toggle.js +2 -7
- package/dist/components/mg-modal.js +7 -0
- package/dist/components/mg-pagination.js +3 -3
- package/dist/components/mg-panel.js +8 -4
- package/dist/components/mg-tabs.js +8 -1
- package/dist/components/mg-tooltip2.js +7 -0
- package/dist/esm/{index-bca81100.js → index-120f47fd.js} +248 -81
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{mg-badge_24.entry.js → mg-badge_23.entry.js} +207 -2180
- package/dist/esm/mg-components.js +3 -3
- package/dist/esm/mg-modal.entry.js +8 -1
- package/dist/esm/mg-popover.entry.js +167 -0
- package/dist/esm/popper-93ecb064.js +1788 -0
- package/dist/mg-components/fonts/OpenSans-Bold.ttf +0 -0
- package/dist/mg-components/locales/en/messages.json +50 -0
- package/dist/mg-components/locales/fr/messages.json +50 -0
- package/dist/mg-components/mg-components.css +1 -1
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/p-21991be8.entry.js +1 -0
- package/dist/mg-components/p-36a64f8c.entry.js +1 -0
- package/dist/mg-components/p-4c66f794.js +1 -0
- package/dist/mg-components/{p-b14a3443.js → p-7bc32a2f.js} +0 -0
- package/dist/mg-components/p-b380a0df.entry.js +1 -0
- package/dist/mg-components/variables.css +3 -2
- package/dist/mg-components/variables.scss +3 -2
- package/dist/types/components/atoms/mg-badge/mg-badge.d.ts +1 -0
- package/dist/types/components/atoms/mg-button/mg-button.d.ts +0 -1
- package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts +1 -0
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +1 -0
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +0 -1
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +1 -10
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +0 -1
- package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +0 -1
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +0 -1
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +0 -1
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +0 -1
- package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +0 -1
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +0 -1
- package/dist/types/components/molecules/mg-modal/mg-modal.d.ts +1 -0
- package/dist/types/components/molecules/mg-panel/mg-panel.d.ts +1 -1
- package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +1 -0
- package/dist/types/components.d.ts +29 -29
- package/loader/package.json +1 -0
- package/package.json +8 -8
- package/dist/collection/fonts/Poppins-Bold.ttf +0 -0
- package/dist/mg-components/fonts/Poppins-Bold.ttf +0 -0
- package/dist/mg-components/p-a2883dc7.entry.js +0 -1
- package/dist/mg-components/p-cffe0519.entry.js +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { h } from '@stencil/core';
|
|
2
2
|
import { variants } from './mg-badge.conf';
|
|
3
3
|
import { ClassList } from '../../../utils/components.utils';
|
|
4
4
|
export class MgBadge {
|
|
@@ -22,6 +22,11 @@ export class MgBadge {
|
|
|
22
22
|
throw new Error('<mg-badge> prop "value" must be interger or ponctuation character.');
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
+
validateLabel(newValue) {
|
|
26
|
+
if (typeof newValue !== 'string' || newValue.trim() === '') {
|
|
27
|
+
throw new Error('<mg-badge> prop "label" is required.');
|
|
28
|
+
}
|
|
29
|
+
}
|
|
25
30
|
validateVariant(newValue, oldValue) {
|
|
26
31
|
if (!variants.includes(newValue)) {
|
|
27
32
|
throw new Error(`<mg-badge> prop "variant" must be one of : ${variants.join(', ')}.`);
|
|
@@ -46,6 +51,7 @@ export class MgBadge {
|
|
|
46
51
|
*/
|
|
47
52
|
componentWillLoad() {
|
|
48
53
|
this.validateValue(this.value);
|
|
54
|
+
this.validateLabel(this.label);
|
|
49
55
|
this.validateVariant(this.variant);
|
|
50
56
|
this.validateOutline(this.outline);
|
|
51
57
|
}
|
|
@@ -55,110 +61,121 @@ export class MgBadge {
|
|
|
55
61
|
* @returns {HTMLElement} HTML Element
|
|
56
62
|
*/
|
|
57
63
|
render() {
|
|
58
|
-
return (h("span", { class: this.classList.join() },
|
|
59
|
-
this.value,
|
|
60
|
-
h("span", { class: "sr-only" }, this.label)));
|
|
64
|
+
return (h("span", { class: this.classList.join() }, this.value, h("span", { class: "sr-only" }, this.label)));
|
|
61
65
|
}
|
|
62
66
|
static get is() { return "mg-badge"; }
|
|
63
67
|
static get encapsulation() { return "shadow"; }
|
|
64
|
-
static get originalStyleUrls() {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
"
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
68
|
+
static get originalStyleUrls() {
|
|
69
|
+
return {
|
|
70
|
+
"$": ["mg-badge.scss"]
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
static get styleUrls() {
|
|
74
|
+
return {
|
|
75
|
+
"$": ["mg-badge.css"]
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
static get properties() {
|
|
79
|
+
return {
|
|
80
|
+
"value": {
|
|
81
|
+
"type": "any",
|
|
82
|
+
"mutable": true,
|
|
83
|
+
"complexType": {
|
|
84
|
+
"original": "BadgeType['value']",
|
|
85
|
+
"resolved": "number | string",
|
|
86
|
+
"references": {
|
|
87
|
+
"BadgeType": {
|
|
88
|
+
"location": "import",
|
|
89
|
+
"path": "./mg-badge.conf"
|
|
90
|
+
}
|
|
81
91
|
}
|
|
82
|
-
}
|
|
92
|
+
},
|
|
93
|
+
"required": true,
|
|
94
|
+
"optional": false,
|
|
95
|
+
"docs": {
|
|
96
|
+
"tags": [],
|
|
97
|
+
"text": "Badge value"
|
|
98
|
+
},
|
|
99
|
+
"attribute": "value",
|
|
100
|
+
"reflect": false
|
|
83
101
|
},
|
|
84
|
-
"
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
"
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
"mutable": false,
|
|
96
|
-
"complexType": {
|
|
97
|
-
"original": "BadgeType['label']",
|
|
98
|
-
"resolved": "string",
|
|
99
|
-
"references": {
|
|
100
|
-
"BadgeType": {
|
|
101
|
-
"location": "import",
|
|
102
|
-
"path": "./mg-badge.conf"
|
|
102
|
+
"label": {
|
|
103
|
+
"type": "string",
|
|
104
|
+
"mutable": false,
|
|
105
|
+
"complexType": {
|
|
106
|
+
"original": "BadgeType['label']",
|
|
107
|
+
"resolved": "string",
|
|
108
|
+
"references": {
|
|
109
|
+
"BadgeType": {
|
|
110
|
+
"location": "import",
|
|
111
|
+
"path": "./mg-badge.conf"
|
|
112
|
+
}
|
|
103
113
|
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
"reflect": false
|
|
114
|
-
},
|
|
115
|
-
"variant": {
|
|
116
|
-
"type": "string",
|
|
117
|
-
"mutable": false,
|
|
118
|
-
"complexType": {
|
|
119
|
-
"original": "string",
|
|
120
|
-
"resolved": "string",
|
|
121
|
-
"references": {}
|
|
114
|
+
},
|
|
115
|
+
"required": true,
|
|
116
|
+
"optional": false,
|
|
117
|
+
"docs": {
|
|
118
|
+
"tags": [],
|
|
119
|
+
"text": "Badge label. Include short description.\nRequired for accessibility"
|
|
120
|
+
},
|
|
121
|
+
"attribute": "label",
|
|
122
|
+
"reflect": false
|
|
122
123
|
},
|
|
123
|
-
"
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
"
|
|
127
|
-
|
|
124
|
+
"variant": {
|
|
125
|
+
"type": "string",
|
|
126
|
+
"mutable": false,
|
|
127
|
+
"complexType": {
|
|
128
|
+
"original": "string",
|
|
129
|
+
"resolved": "string",
|
|
130
|
+
"references": {}
|
|
131
|
+
},
|
|
132
|
+
"required": false,
|
|
133
|
+
"optional": false,
|
|
134
|
+
"docs": {
|
|
135
|
+
"tags": [],
|
|
136
|
+
"text": "Define button variant"
|
|
137
|
+
},
|
|
138
|
+
"attribute": "variant",
|
|
139
|
+
"reflect": false,
|
|
140
|
+
"defaultValue": "variants[0]"
|
|
128
141
|
},
|
|
129
|
-
"
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
"
|
|
138
|
-
"
|
|
139
|
-
"
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
"
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
142
|
+
"outline": {
|
|
143
|
+
"type": "boolean",
|
|
144
|
+
"mutable": false,
|
|
145
|
+
"complexType": {
|
|
146
|
+
"original": "boolean",
|
|
147
|
+
"resolved": "boolean",
|
|
148
|
+
"references": {}
|
|
149
|
+
},
|
|
150
|
+
"required": false,
|
|
151
|
+
"optional": false,
|
|
152
|
+
"docs": {
|
|
153
|
+
"tags": [],
|
|
154
|
+
"text": "Define if button is using outline style"
|
|
155
|
+
},
|
|
156
|
+
"attribute": "outline",
|
|
157
|
+
"reflect": false
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
static get states() {
|
|
162
|
+
return {
|
|
163
|
+
"classList": {}
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
static get watchers() {
|
|
167
|
+
return [{
|
|
168
|
+
"propName": "value",
|
|
169
|
+
"methodName": "validateValue"
|
|
170
|
+
}, {
|
|
171
|
+
"propName": "label",
|
|
172
|
+
"methodName": "validateLabel"
|
|
173
|
+
}, {
|
|
174
|
+
"propName": "variant",
|
|
175
|
+
"methodName": "validateVariant"
|
|
176
|
+
}, {
|
|
177
|
+
"propName": "outline",
|
|
178
|
+
"methodName": "validateOutline"
|
|
179
|
+
}];
|
|
180
|
+
}
|
|
164
181
|
}
|