@mgdis/mg-components 6.0.0 → 6.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-08ee93bf.js → index-52d5f3d4.js} +19 -4
- package/dist/cjs/index-52d5f3d4.js.map +1 -0
- package/dist/{esm/index-cc97a562.js → cjs/index-cc11af95.js} +6 -116
- package/dist/cjs/index-cc11af95.js.map +1 -0
- package/dist/cjs/index.es-ac7c22e3.js +152 -0
- package/dist/cjs/index.es-ac7c22e3.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_36.cjs.entry.js +410 -234
- package/dist/cjs/mg-action-more_36.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-alert.cjs.entry.js +7 -6
- package/dist/cjs/mg-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-components.cjs.js +3 -3
- package/dist/cjs/mg-components.cjs.js.map +1 -1
- package/dist/cjs/mg-loader.cjs.entry.js +5 -4
- package/dist/cjs/mg-loader.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-progress.cjs.entry.js +82 -0
- package/dist/cjs/mg-progress.cjs.entry.js.map +1 -0
- package/dist/collection/assets/icons/index.js +1 -1
- package/dist/collection/assets/icons/index.js.map +1 -1
- package/dist/collection/collection-manifest.json +3 -2
- package/dist/collection/components/atoms/internals/mg-character-left/mg-character-left.js +11 -2
- package/dist/collection/components/atoms/internals/mg-character-left/mg-character-left.js.map +1 -1
- package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js +5 -2
- package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js.map +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js +8 -2
- package/dist/collection/components/atoms/mg-button/mg-button.js.map +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +12 -7
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +14 -2
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +33 -26
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +30 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +85 -4
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +29 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +31 -4
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +29 -3
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +30 -3
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +29 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +30 -3
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js.map +1 -1
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js +8 -9
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +12 -3
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js.map +1 -1
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +4 -4
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js.map +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.conf.js.map +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +42 -3
- package/dist/collection/components/molecules/mg-form/mg-form.js.map +1 -1
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +13 -4
- package/dist/collection/components/molecules/mg-modal/mg-modal.js.map +1 -1
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +13 -4
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js.map +1 -1
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +11 -2
- package/dist/collection/components/molecules/mg-panel/mg-panel.js.map +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +10 -5
- package/dist/collection/components/molecules/mg-popover/mg-popover.js.map +1 -1
- package/dist/collection/components/molecules/mg-progress/mg-progress.conf.js +5 -0
- package/dist/collection/components/molecules/mg-progress/mg-progress.conf.js.map +1 -0
- package/dist/collection/components/molecules/mg-progress/mg-progress.js +187 -0
- package/dist/collection/components/molecules/mg-progress/mg-progress.js.map +1 -0
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +11 -2
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js.map +1 -1
- package/dist/collection/types/index.js.map +1 -1
- package/dist/components/index.es.js +36 -23
- package/dist/components/index.es.js.map +1 -1
- package/dist/components/index2.js +2 -2
- package/dist/components/mg-action-more.js +8 -8
- package/dist/components/mg-action-more.js.map +1 -1
- package/dist/components/mg-alert.js +5 -5
- package/dist/components/mg-badge2.js +6 -6
- package/dist/components/mg-button2.js +13 -7
- package/dist/components/mg-button2.js.map +1 -1
- package/dist/components/mg-character-left2.js +11 -3
- package/dist/components/mg-character-left2.js.map +1 -1
- package/dist/components/mg-details.js +4 -4
- package/dist/components/mg-details.js.map +1 -1
- package/dist/components/mg-form.js +30 -8
- package/dist/components/mg-form.js.map +1 -1
- package/dist/components/mg-icon2.js +7 -7
- package/dist/components/mg-icon2.js.map +1 -1
- package/dist/components/mg-illustrated-message.js +2 -2
- package/dist/components/mg-input-checkbox-paginated2.js +2 -2
- package/dist/components/mg-input-checkbox-paginated2.js.map +1 -1
- package/dist/components/mg-input-checkbox.js +27 -36
- package/dist/components/mg-input-checkbox.js.map +1 -1
- package/dist/components/mg-input-date.js +27 -14
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +36 -14
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +18 -6
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-radio.js +23 -10
- package/dist/components/mg-input-radio.js.map +1 -1
- package/dist/components/mg-input-select2.js +22 -10
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text2.js +24 -12
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +22 -10
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-input-title2.js +6 -3
- package/dist/components/mg-input-title2.js.map +1 -1
- package/dist/components/mg-input-toggle.js +21 -8
- package/dist/components/mg-input-toggle.js.map +1 -1
- package/dist/components/mg-input2.js +18 -9
- package/dist/components/mg-input2.js.map +1 -1
- package/dist/components/mg-item-more2.js +16 -17
- package/dist/components/mg-item-more2.js.map +1 -1
- package/dist/components/mg-loader.js +3 -3
- package/dist/components/mg-menu-item2.js +17 -9
- package/dist/components/mg-menu-item2.js.map +1 -1
- package/dist/components/mg-message2.js +4 -4
- package/dist/components/mg-modal.js +17 -9
- package/dist/components/mg-modal.js.map +1 -1
- package/dist/components/mg-pagination2.js +15 -7
- package/dist/components/mg-pagination2.js.map +1 -1
- package/dist/components/mg-panel.js +16 -8
- package/dist/components/mg-panel.js.map +1 -1
- package/dist/components/mg-popover-content2.js +3 -3
- package/dist/components/mg-popover2.js +12 -7
- package/dist/components/mg-popover2.js.map +1 -1
- package/dist/components/mg-progress.d.ts +11 -0
- package/dist/components/mg-progress.js +109 -0
- package/dist/components/mg-progress.js.map +1 -0
- package/dist/components/mg-skip-links.js +4 -4
- package/dist/components/mg-skip-links.js.map +1 -1
- package/dist/components/mg-tabs.js +19 -11
- package/dist/components/mg-tabs.js.map +1 -1
- package/dist/components/mg-tag.js +4 -4
- package/dist/components/mg-tooltip2.js +18 -13
- package/dist/components/mg-tooltip2.js.map +1 -1
- package/dist/esm/{index-089d0323.js → index-81752ffe.js} +19 -4
- package/dist/esm/index-81752ffe.js.map +1 -0
- package/dist/{cjs/index-d57c96a9.js → esm/index-f3d3fb70.js} +4 -134
- package/dist/esm/index-f3d3fb70.js.map +1 -0
- package/dist/esm/index.es-940821a9.js +130 -0
- package/dist/esm/index.es-940821a9.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_36.entry.js +410 -234
- package/dist/esm/mg-action-more_36.entry.js.map +1 -1
- package/dist/esm/mg-alert.entry.js +7 -6
- package/dist/esm/mg-alert.entry.js.map +1 -1
- package/dist/esm/mg-components.js +4 -4
- package/dist/esm/mg-components.js.map +1 -1
- package/dist/esm/mg-loader.entry.js +5 -4
- package/dist/esm/mg-loader.entry.js.map +1 -1
- package/dist/esm/mg-progress.entry.js +78 -0
- package/dist/esm/mg-progress.entry.js.map +1 -0
- package/dist/mg-components/mg-components.css +1 -1
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/mg-components.esm.js.map +1 -1
- package/dist/mg-components/p-2298352f.js +3 -0
- package/dist/mg-components/p-2298352f.js.map +1 -0
- package/dist/mg-components/p-31e6c1a7.entry.js +2 -0
- package/dist/mg-components/{p-6f5c7ec5.entry.js.map → p-31e6c1a7.entry.js.map} +1 -1
- package/dist/mg-components/p-67c9be27.entry.js +2 -0
- package/dist/mg-components/p-67c9be27.entry.js.map +1 -0
- package/dist/mg-components/p-95895169.entry.js +2 -0
- package/dist/mg-components/{p-26b67dfd.entry.js.map → p-95895169.entry.js.map} +1 -1
- package/dist/mg-components/p-a49e2b74.js +2 -0
- package/dist/mg-components/p-a49e2b74.js.map +1 -0
- package/dist/mg-components/p-abddacc2.entry.js +2 -0
- package/dist/mg-components/p-abddacc2.entry.js.map +1 -0
- package/dist/mg-components/p-ee51ec5e.js +2 -0
- package/dist/mg-components/p-ee51ec5e.js.map +1 -0
- package/dist/types/assets/icons/index.d.ts +12 -0
- package/dist/types/components/atoms/internals/mg-character-left/mg-character-left.d.ts +1 -0
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input/mg-input.conf.d.ts +13 -11
- package/dist/types/components/molecules/inputs/mg-input/mg-input.d.ts +4 -4
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.d.ts +0 -2
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +4 -9
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +4 -0
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +12 -0
- package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +4 -0
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +4 -0
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +4 -0
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +4 -0
- package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +4 -0
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +4 -0
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +1 -0
- package/dist/types/components/molecules/mg-form/mg-form.conf.d.ts +2 -1
- package/dist/types/components/molecules/mg-form/mg-form.d.ts +5 -0
- package/dist/types/components/molecules/mg-modal/mg-modal.d.ts +1 -0
- package/dist/types/components/molecules/mg-pagination/mg-pagination.d.ts +1 -0
- package/dist/types/components/molecules/mg-panel/mg-panel.d.ts +1 -0
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +1 -1
- package/dist/types/components/molecules/mg-progress/mg-progress.conf.d.ts +9 -0
- package/dist/types/components/molecules/mg-progress/mg-progress.d.ts +47 -0
- package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +1 -0
- package/dist/types/components.d.ts +111 -0
- package/dist/types/stencil-public-runtime.d.ts +6 -0
- package/dist/types/types/index.d.ts +4 -0
- package/ide/intellij/web-types.json +195 -27
- package/ide/vscode/css-custom-data.json +16 -0
- package/ide/vscode/html-custom-data.json +232 -21
- package/package.json +30 -30
- package/dist/cjs/index-08ee93bf.js.map +0 -1
- package/dist/cjs/index-d57c96a9.js.map +0 -1
- package/dist/esm/index-089d0323.js.map +0 -1
- package/dist/esm/index-cc97a562.js.map +0 -1
- package/dist/mg-components/p-26b67dfd.entry.js +0 -2
- package/dist/mg-components/p-2b89fe8b.entry.js +0 -2
- package/dist/mg-components/p-2b89fe8b.entry.js.map +0 -1
- package/dist/mg-components/p-48e033cf.js +0 -3
- package/dist/mg-components/p-48e033cf.js.map +0 -1
- package/dist/mg-components/p-6f5c7ec5.entry.js +0 -2
- package/dist/mg-components/p-898d194f.js +0 -2
- package/dist/mg-components/p-898d194f.js.map +0 -1
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
|
+
import { isValidNumber, isValidString, toString } from "@mgdis/stencil-helpers";
|
|
3
|
+
import { roles } from "./mg-progress.conf";
|
|
4
|
+
export class MgProgress {
|
|
5
|
+
constructor() {
|
|
6
|
+
this.label = undefined;
|
|
7
|
+
this.ariaRole = 'progressbar';
|
|
8
|
+
this.value = 0;
|
|
9
|
+
this.min = 0;
|
|
10
|
+
this.max = 100;
|
|
11
|
+
}
|
|
12
|
+
watchLabel(newValue) {
|
|
13
|
+
if (!isValidString(newValue)) {
|
|
14
|
+
throw new Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${toString(newValue)}.`);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
watchAriaRole(newValue) {
|
|
18
|
+
if (newValue && !roles.includes(newValue)) {
|
|
19
|
+
throw new Error(`<mg-progress> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${toString(newValue)}.`);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
watchValue(newValue) {
|
|
23
|
+
if (newValue !== undefined && (!isValidNumber(newValue) || !(newValue >= this.min && newValue <= this.max)))
|
|
24
|
+
throw new Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${toString(newValue)}.`);
|
|
25
|
+
}
|
|
26
|
+
watchMin(newValue) {
|
|
27
|
+
if (newValue !== 0 && newValue !== undefined && (!isValidNumber(newValue) || newValue >= this.max))
|
|
28
|
+
throw new Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${toString(newValue)}.`);
|
|
29
|
+
}
|
|
30
|
+
watchMax(newValue) {
|
|
31
|
+
if (newValue !== 100 && newValue !== undefined && (!isValidNumber(newValue) || newValue <= this.min))
|
|
32
|
+
throw new Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${toString(newValue)}.`);
|
|
33
|
+
}
|
|
34
|
+
/*************
|
|
35
|
+
* Lifecycle *
|
|
36
|
+
*************/
|
|
37
|
+
/**
|
|
38
|
+
* Check if component props are well configured on init
|
|
39
|
+
*/
|
|
40
|
+
componentWillLoad() {
|
|
41
|
+
// validate props
|
|
42
|
+
this.watchLabel(this.label);
|
|
43
|
+
this.watchAriaRole(this.ariaRole);
|
|
44
|
+
this.watchMin(this.min);
|
|
45
|
+
this.watchMax(this.max);
|
|
46
|
+
this.watchValue(this.value);
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Render
|
|
50
|
+
* @returns HTML Element
|
|
51
|
+
*/
|
|
52
|
+
render() {
|
|
53
|
+
return (h(Host, { key: 'c2a8b5264af27dab4f81981a6d20d04d572321db', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '1ab08ca9582182c7c2e9cf1041e68cfd38390e3b', class: "mg-c-progress" }, h("div", { key: '95044f35b5fcc1b5eb380828acc3935ff30c6c1f', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: '4d3588379c0b1a135dd9118fd2cb3c00c9dd31cb', class: "mg-c-progress__fill", style: {
|
|
54
|
+
width: `${Math.round(((this.value - this.min) / (this.max - this.min)) * 100)}%`,
|
|
55
|
+
} })))));
|
|
56
|
+
}
|
|
57
|
+
static get is() { return "mg-progress"; }
|
|
58
|
+
static get encapsulation() { return "shadow"; }
|
|
59
|
+
static get originalStyleUrls() {
|
|
60
|
+
return {
|
|
61
|
+
"$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-progress.css"]
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
static get styleUrls() {
|
|
65
|
+
return {
|
|
66
|
+
"$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-progress.css"]
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
static get properties() {
|
|
70
|
+
return {
|
|
71
|
+
"label": {
|
|
72
|
+
"type": "string",
|
|
73
|
+
"mutable": false,
|
|
74
|
+
"complexType": {
|
|
75
|
+
"original": "string",
|
|
76
|
+
"resolved": "string",
|
|
77
|
+
"references": {}
|
|
78
|
+
},
|
|
79
|
+
"required": true,
|
|
80
|
+
"optional": false,
|
|
81
|
+
"docs": {
|
|
82
|
+
"tags": [],
|
|
83
|
+
"text": "Define label"
|
|
84
|
+
},
|
|
85
|
+
"attribute": "label",
|
|
86
|
+
"reflect": false
|
|
87
|
+
},
|
|
88
|
+
"ariaRole": {
|
|
89
|
+
"type": "string",
|
|
90
|
+
"mutable": false,
|
|
91
|
+
"complexType": {
|
|
92
|
+
"original": "AriaRoleType",
|
|
93
|
+
"resolved": "\"meter\" | \"progressbar\"",
|
|
94
|
+
"references": {
|
|
95
|
+
"AriaRoleType": {
|
|
96
|
+
"location": "import",
|
|
97
|
+
"path": "./mg-progress.conf",
|
|
98
|
+
"id": "src/components/molecules/mg-progress/mg-progress.conf.ts::AriaRoleType"
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
"required": false,
|
|
103
|
+
"optional": true,
|
|
104
|
+
"docs": {
|
|
105
|
+
"tags": [],
|
|
106
|
+
"text": "Define progress role\n- `progressbar` to indicate a progress, such as loading or percent completion of a task\n- `meter` to indicate a graphical display of a numeric value that varies within a defined range"
|
|
107
|
+
},
|
|
108
|
+
"attribute": "aria-role",
|
|
109
|
+
"reflect": false,
|
|
110
|
+
"defaultValue": "'progressbar'"
|
|
111
|
+
},
|
|
112
|
+
"value": {
|
|
113
|
+
"type": "number",
|
|
114
|
+
"mutable": false,
|
|
115
|
+
"complexType": {
|
|
116
|
+
"original": "number",
|
|
117
|
+
"resolved": "number",
|
|
118
|
+
"references": {}
|
|
119
|
+
},
|
|
120
|
+
"required": false,
|
|
121
|
+
"optional": true,
|
|
122
|
+
"docs": {
|
|
123
|
+
"tags": [],
|
|
124
|
+
"text": "Define current value\nBy default, it will be displayed as a percentage value.\nIf you don\u2019t specify the min and max props, the value should be a number within the range of 0 to 100."
|
|
125
|
+
},
|
|
126
|
+
"attribute": "value",
|
|
127
|
+
"reflect": false,
|
|
128
|
+
"defaultValue": "0"
|
|
129
|
+
},
|
|
130
|
+
"min": {
|
|
131
|
+
"type": "number",
|
|
132
|
+
"mutable": false,
|
|
133
|
+
"complexType": {
|
|
134
|
+
"original": "number",
|
|
135
|
+
"resolved": "number",
|
|
136
|
+
"references": {}
|
|
137
|
+
},
|
|
138
|
+
"required": false,
|
|
139
|
+
"optional": true,
|
|
140
|
+
"docs": {
|
|
141
|
+
"tags": [],
|
|
142
|
+
"text": "Define the minimum value in the range"
|
|
143
|
+
},
|
|
144
|
+
"attribute": "min",
|
|
145
|
+
"reflect": false,
|
|
146
|
+
"defaultValue": "0"
|
|
147
|
+
},
|
|
148
|
+
"max": {
|
|
149
|
+
"type": "number",
|
|
150
|
+
"mutable": false,
|
|
151
|
+
"complexType": {
|
|
152
|
+
"original": "number",
|
|
153
|
+
"resolved": "number",
|
|
154
|
+
"references": {}
|
|
155
|
+
},
|
|
156
|
+
"required": false,
|
|
157
|
+
"optional": true,
|
|
158
|
+
"docs": {
|
|
159
|
+
"tags": [],
|
|
160
|
+
"text": "Define the maximum value in the range"
|
|
161
|
+
},
|
|
162
|
+
"attribute": "max",
|
|
163
|
+
"reflect": false,
|
|
164
|
+
"defaultValue": "100"
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
}
|
|
168
|
+
static get watchers() {
|
|
169
|
+
return [{
|
|
170
|
+
"propName": "label",
|
|
171
|
+
"methodName": "watchLabel"
|
|
172
|
+
}, {
|
|
173
|
+
"propName": "ariaRole",
|
|
174
|
+
"methodName": "watchAriaRole"
|
|
175
|
+
}, {
|
|
176
|
+
"propName": "value",
|
|
177
|
+
"methodName": "watchValue"
|
|
178
|
+
}, {
|
|
179
|
+
"propName": "min",
|
|
180
|
+
"methodName": "watchMin"
|
|
181
|
+
}, {
|
|
182
|
+
"propName": "max",
|
|
183
|
+
"methodName": "watchMax"
|
|
184
|
+
}];
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
//# sourceMappingURL=mg-progress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mg-progress.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-progress/mg-progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAgB,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAOzD,MAAM,OAAO,UAAU;;;wBAqBa,aAAa;qBAatB,CAAC;mBAUH,CAAC;mBAUD,GAAG;;IA5C1B,UAAU,CAAC,QAA6B;QACtC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,oEAAoE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC7G,CAAC;IACH,CAAC;IASD,aAAa,CAAC,QAAgC;QAC5C,IAAI,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1C,MAAM,IAAI,KAAK,CAAC,iDAAiD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC7H,CAAC;IACH,CAAC;IASD,UAAU,CAAC,QAA6B;QACtC,IAAI,QAAQ,KAAK,SAAS,IAAI,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,GAAG,IAAI,QAAQ,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;YACzG,MAAM,IAAI,KAAK,CAAC,gEAAgE,IAAI,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACrJ,CAAC;IAOD,QAAQ,CAAC,QAA2B;QAClC,IAAI,QAAQ,KAAK,CAAC,IAAI,QAAQ,KAAK,SAAS,IAAI,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,QAAQ,IAAI,IAAI,CAAC,GAAG,CAAC;YAChG,MAAM,IAAI,KAAK,CAAC,yDAAyD,IAAI,CAAC,GAAG,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC/H,CAAC;IAOD,QAAQ,CAAC,QAA2B;QAClC,IAAI,QAAQ,KAAK,GAAG,IAAI,QAAQ,KAAK,SAAS,IAAI,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,QAAQ,IAAI,IAAI,CAAC,GAAG,CAAC;YAClG,MAAM,IAAI,KAAK,CAAC,2DAA2D,IAAI,CAAC,GAAG,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACjI,CAAC;IAED;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,iBAAiB;QACjB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,mBAAiB,IAAI,CAAC,KAAK,mBAAiB,IAAI,CAAC,GAAG,mBAAiB,IAAI,CAAC,GAAG;YAC5H,4DAAK,KAAK,EAAC,eAAe;gBACxB,4DAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,4BAA4B,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;oBAC7F,4DACE,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAE;4BACL,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG;yBACjF,GACI,CACH,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { isValidNumber, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { AriaRoleType, roles } from './mg-progress.conf';\n\n@Component({\n tag: 'mg-progress',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-progress.css',\n shadow: true,\n})\nexport class MgProgress {\n /**************\n * Decorators *\n **************/\n\n /**\n * Define label\n */\n @Prop() label!: string;\n @Watch('label')\n watchLabel(newValue: MgProgress['label']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-progress> prop \"label\" must be a valid string. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define progress role\n * - `progressbar` to indicate a progress, such as loading or percent completion of a task\n * - `meter` to indicate a graphical display of a numeric value that varies within a defined range\n */\n @Prop() ariaRole?: AriaRoleType = 'progressbar';\n @Watch('ariaRole')\n watchAriaRole(newValue: MgProgress['ariaRole']): void {\n if (newValue && !roles.includes(newValue)) {\n throw new Error(`<mg-progress> prop \"ariaRole\" must be one of: ${roles.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define current value\n * By default, it will be displayed as a percentage value.\n * If you don’t specify the min and max props, the value should be a number within the range of 0 to 100.\n */\n @Prop() value?: number = 0;\n @Watch('value')\n watchValue(newValue: MgProgress['value']): void {\n if (newValue !== undefined && (!isValidNumber(newValue) || !(newValue >= this.min && newValue <= this.max)))\n throw new Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${toString(newValue)}.`);\n }\n\n /**\n * Define the minimum value in the range\n */\n @Prop() min?: number = 0;\n @Watch('min')\n watchMin(newValue: MgProgress['min']): void {\n if (newValue !== 0 && newValue !== undefined && (!isValidNumber(newValue) || newValue >= this.max))\n throw new Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${toString(newValue)}.`);\n }\n\n /**\n * Define the maximum value in the range\n */\n @Prop() max?: number = 100;\n @Watch('max')\n watchMax(newValue: MgProgress['max']): void {\n if (newValue !== 100 && newValue !== undefined && (!isValidNumber(newValue) || newValue <= this.min))\n throw new Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${toString(newValue)}.`);\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // validate props\n this.watchLabel(this.label);\n this.watchAriaRole(this.ariaRole);\n this.watchMin(this.min);\n this.watchMax(this.max);\n this.watchValue(this.value);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role={this.ariaRole} aria-label={this.label} aria-valuenow={this.value} aria-valuemin={this.min} aria-valuemax={this.max}>\n <div class=\"mg-c-progress\">\n <div class={{ 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min }}>\n <div\n class=\"mg-c-progress__fill\"\n style={{\n width: `${Math.round(((this.value - this.min) / (this.max - this.min)) * 100)}%`,\n }}\n ></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -36,7 +36,7 @@ export class MgSkipLinks {
|
|
|
36
36
|
* @returns HTML Element
|
|
37
37
|
*/
|
|
38
38
|
render() {
|
|
39
|
-
return (h("nav", { key: '
|
|
39
|
+
return (h("nav", { key: '0b4e4d6b9481a88faae78602b07c4f5e851da517', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'aaa15193eb2c9e1d9ee3b2e2a7d8d0fd37836ed7', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
|
|
40
40
|
}
|
|
41
41
|
static get is() { return "mg-skip-links"; }
|
|
42
42
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
|
-
import { createID, ClassList, allItemsAreString, isValidString, nextTick, toString } from "@mgdis/stencil-helpers";
|
|
2
|
+
import { createID, ClassList, allItemsAreString, isValidString, nextTick, toString, isValideID } from "@mgdis/stencil-helpers";
|
|
3
3
|
import { sizes, Status } from "./mg-tabs.conf";
|
|
4
4
|
/**
|
|
5
5
|
* type TabItem validation function
|
|
@@ -139,6 +139,11 @@ export class MgTabs {
|
|
|
139
139
|
this.tabs = [];
|
|
140
140
|
this.classCollection = new ClassList(['mg-c-tabs']);
|
|
141
141
|
}
|
|
142
|
+
watchIdentifier(newValue) {
|
|
143
|
+
if (!isValideID(newValue)) {
|
|
144
|
+
console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
142
147
|
validateLabel(newValue) {
|
|
143
148
|
if (!isValidString(newValue)) {
|
|
144
149
|
throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${toString(newValue)}.`);
|
|
@@ -194,6 +199,7 @@ export class MgTabs {
|
|
|
194
199
|
*/
|
|
195
200
|
componentWillLoad() {
|
|
196
201
|
// Check tabs format
|
|
202
|
+
this.watchIdentifier(this.identifier);
|
|
197
203
|
this.validateLabel(this.label);
|
|
198
204
|
this.validateItems(this.items);
|
|
199
205
|
this.validateActiveTab(this.activeTab);
|
|
@@ -217,7 +223,7 @@ export class MgTabs {
|
|
|
217
223
|
* @returns HTML Element
|
|
218
224
|
*/
|
|
219
225
|
render() {
|
|
220
|
-
return (h("div", { key: '
|
|
226
|
+
return (h("div", { key: '54bad50e0a610aaae267fb34384384a2aa3a2295', class: this.classCollection.join() }, h("header", { key: '8bc4f73112f9de115b8558a7d322398b62983fb7', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
|
|
221
227
|
[`${this.buttonTabBaseClass}`]: true,
|
|
222
228
|
[`${this.buttonTabBaseClass}--horizontal`]: true,
|
|
223
229
|
[`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
|
|
@@ -370,6 +376,9 @@ export class MgTabs {
|
|
|
370
376
|
static get elementRef() { return "element"; }
|
|
371
377
|
static get watchers() {
|
|
372
378
|
return [{
|
|
379
|
+
"propName": "identifier",
|
|
380
|
+
"methodName": "watchIdentifier"
|
|
381
|
+
}, {
|
|
373
382
|
"propName": "label",
|
|
374
383
|
"methodName": "validateLabel"
|
|
375
384
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-tabs.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { createID, ClassList, allItemsAreString, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport { TabItem, sizes, Status, SizeType } from './mg-tabs.conf';\n\n/**\n * type TabItem validation function\n * @param tab - tab item\n * @returns tab item type is valid\n */\nconst isTabItem = (tab: unknown): tab is TabItem => typeof tab === 'object' && typeof (tab as TabItem).label === 'string';\n\n/**\n * @slot tab_content-n - Tab content, where `n` represents the position of the tab content. It starts at 1.\n */\n@Component({\n tag: 'mg-tabs',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css',\n shadow: true,\n})\nexport class MgTabs {\n /************\n * Internal *\n ************/\n\n // classes\n private readonly tabPanel = 'panel';\n private readonly buttonTabBaseClass = 'mg-c-tabs__navigation-button';\n\n // variables\n private tabFocus: number;\n private startIndex = 1;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTabsElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-tabs');\n\n /**\n * Tabs label. Include short tabs description.\n * Required for accessibility\n */\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgTabs['label']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-tabs> prop \"label\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define tabs size\n */\n @Prop() size: SizeType = 'medium';\n @Watch('size')\n validateSize(newValue: MgTabs['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<mg-tabs> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n this.classCollection.add(`mg-c-tabs--size-${this.size}`);\n }\n\n /**\n * Tabs items\n */\n @Prop() items!: string[] | TabItem[];\n @Watch('items')\n validateItems(newValue: MgTabs['items']): void {\n // String array\n if (allItemsAreString(newValue)) this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));\n // Object array\n else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem)) this.tabs = newValue;\n else throw new Error(`<mg-tabs> prop \"items\" is required and all items must be the same type: TabItem. Passed value: ${toString(newValue)}.`);\n }\n\n /**\n * Active tab number\n */\n @Prop({ reflect: true, mutable: true }) activeTab: number;\n @Watch('activeTab')\n validateActiveTab(newValue: MgTabs['activeTab']): void {\n // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value\n // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update\n if (newValue === undefined) {\n this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))\n ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))\n : this.startIndex;\n } else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {\n // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE\n this.tabs.forEach((tab, index) => {\n const isNewActiveTab = index === newValue - this.startIndex;\n // reset active tabs\n if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab) tab.status = Status.VISIBLE;\n // set active tab from given tab key\n else if (this.isActivableTab(tab) && isNewActiveTab) tab.status = Status.ACTIVE;\n });\n // emit change active tab key event\n this.activeTabChange.emit(newValue);\n } else {\n throw new Error(\n `<mg-tabs> prop \"activeTab\" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be \"activable\". Passed value: ${toString(newValue)}.`,\n );\n }\n }\n\n /**\n * Component tabs\n */\n @State() tabs: TabItem[] = [];\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-tabs']);\n\n /**\n * Emited event when active tab change\n */\n @Event({ eventName: 'active-tab-change' }) activeTabChange: EventEmitter<HTMLMgTabsElement['activeTab']>;\n\n /**\n * Validate that new tab status can be `Status.ACTIVE`\n * @param tab - tab item\n * @returns true when tab match condition to get a `Status.ACTIVE`\n */\n private isActivableTab = (tab: TabItem): boolean => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);\n\n /**\n * Method to know if given tab has the given status\n * @param tab - item tab key to set to ACTIVE status\n * @param status - status to valide\n * @returns status comparaison\n */\n private tabHasStatus = (tab: TabItem, status: TabItem['status']): boolean => tab.status === status;\n\n /**\n * Method to get element id from index\n * @param element - to get id\n * @param index - to generate id\n * @returns generated element id\n */\n private getElementId = (element: string, index: number): string => `${element}-${this.getTabItemIndex(index)}`;\n\n /**\n * Method to get tab item index\n * @param index - to get\n * @returns index\n */\n private getTabItemIndex = (index: number): number => index + this.startIndex;\n\n /**\n * Handle click events on tabs\n * @param event - mouse event\n */\n private handleClick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n const tabId = event.currentTarget.dataset.index;\n if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {\n event.preventDefault();\n } else {\n this.activeTab = Number(tabId);\n this.tabFocus = undefined;\n }\n };\n\n /**\n * get navigation button class from given status\n * @param status - button tab status\n * @returns button class/selector variant\n */\n private getNavigationButtonClass = (status: TabItem['status']): string => `${this.buttonTabBaseClass}--${status}`;\n\n /**\n * Handle keyboard event on tabs\n * @param event - mouse event\n */\n private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n const parent = event.target.parentElement;\n if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {\n this.tabFocus = Number(event.target.dataset.index);\n parent.querySelector(`[data-index=\"${this.tabFocus}\"]`).setAttribute('tabindex', '-1');\n\n // Move right\n if (event.key === 'ArrowRight') {\n this.tabFocus++;\n // If we're at the end, go to the start\n if (this.tabFocus > this.tabs.length) this.tabFocus = this.startIndex;\n // Move left\n } else if (event.key === 'ArrowLeft') {\n this.tabFocus--;\n // If we're at the start, move to the end\n if (this.tabFocus < this.startIndex) this.tabFocus = this.tabs.length;\n }\n\n const parentButtonElement: HTMLButtonElement = parent.querySelector(`[data-index=\"${this.tabFocus}\"]`);\n // if focus item is ['hidden'] we recursively repeat action\n if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {\n parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));\n // else run focus methods on tabFocus element\n } else {\n parentButtonElement.setAttribute('tabindex', '0');\n parentButtonElement.focus();\n }\n } else if (event.key === 'Tab') {\n this.resetFocus();\n }\n };\n\n /**\n * Reset focus on document click\n * @param event - mouse event\n */\n private handleDocumentClick = (event: MouseEvent & { target: HTMLElement }): void => {\n if (event.target.closest('mg-tabs') !== this.element) this.resetFocus();\n };\n\n /**\n * Method to reset focus behavior\n */\n private resetFocus = (): void => {\n // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process\n nextTick(() => {\n this.tabFocus = undefined;\n Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {\n tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');\n });\n });\n };\n\n /**\n * Validate slots setting\n */\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children).filter(slot => slot.getAttribute('slot')?.includes('tab_content-'));\n if (slots.length !== this.tabs.length) throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Check tabs format\n this.validateLabel(this.label);\n this.validateItems(this.items);\n this.validateActiveTab(this.activeTab);\n this.validateSize(this.size);\n this.validateSlots();\n }\n\n /**\n * add listners\n */\n componentDidLoad(): void {\n document.addEventListener('click', this.handleDocumentClick, false);\n }\n\n /**\n * remove listeners\n */\n disconnectedCallback(): void {\n document.removeEventListener('keydown', this.handleDocumentClick);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class={this.classCollection.join()}>\n <header role=\"tablist\" aria-label={this.label} class=\"mg-c-tabs__header\">\n {this.tabs.map((tab, index) => (\n <button\n key={tab.label}\n role=\"tab\"\n id={this.getElementId(this.identifier, index)}\n class={{\n [`${this.buttonTabBaseClass}`]: true,\n [`${this.buttonTabBaseClass}--horizontal`]: true,\n [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),\n [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),\n [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),\n }}\n tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n aria-selected={this.tabHasStatus(tab, Status.ACTIVE).toString()}\n aria-controls={this.getElementId(this.tabPanel, index)}\n aria-disabled={this.tabHasStatus(tab, Status.DISABLED)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n data-index={this.getTabItemIndex(index)}\n >\n {tab.icon !== undefined && <mg-icon icon={tab.icon}></mg-icon>}\n {tab.label}\n {tab.badge !== undefined && <mg-badge variant=\"text-color\" value={tab.badge.value} label={tab.badge.label} outline={tab.badge.role === 'information'}></mg-badge>}\n </button>\n ))}\n </header>\n {this.tabs.map((tab, index) => (\n <article\n key={tab.label}\n role=\"tabpanel\"\n id={this.getElementId(this.tabPanel, index)}\n hidden={!this.tabHasStatus(tab, Status.ACTIVE)}\n aria-labelledby={this.getElementId(this.identifier, index)}\n tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n class=\"mg-c-tabs__content-container\"\n >\n <slot name={this.getElementId('tab_content', index)}></slot>\n </article>\n ))}\n </div>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"mg-tabs.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { createID, ClassList, allItemsAreString, isValidString, nextTick, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { TabItem, sizes, Status, SizeType } from './mg-tabs.conf';\n\n/**\n * type TabItem validation function\n * @param tab - tab item\n * @returns tab item type is valid\n */\nconst isTabItem = (tab: unknown): tab is TabItem => typeof tab === 'object' && typeof (tab as TabItem).label === 'string';\n\n/**\n * @slot tab_content-n - Tab content, where `n` represents the position of the tab content. It starts at 1.\n */\n@Component({\n tag: 'mg-tabs',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css',\n shadow: true,\n})\nexport class MgTabs {\n /************\n * Internal *\n ************/\n\n // classes\n private readonly tabPanel = 'panel';\n private readonly buttonTabBaseClass = 'mg-c-tabs__navigation-button';\n\n // variables\n private tabFocus: number;\n private startIndex = 1;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTabsElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-tabs');\n @Watch('identifier')\n watchIdentifier(newValue: MgTabs['identifier']): void {\n if (!isValideID(newValue)) {\n console.error(`<mg-tabs> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\n /**\n * Tabs label. Include short tabs description.\n * Required for accessibility\n */\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgTabs['label']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-tabs> prop \"label\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define tabs size\n */\n @Prop() size: SizeType = 'medium';\n @Watch('size')\n validateSize(newValue: MgTabs['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<mg-tabs> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n this.classCollection.add(`mg-c-tabs--size-${this.size}`);\n }\n\n /**\n * Tabs items\n */\n @Prop() items!: string[] | TabItem[];\n @Watch('items')\n validateItems(newValue: MgTabs['items']): void {\n // String array\n if (allItemsAreString(newValue)) this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));\n // Object array\n else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem)) this.tabs = newValue;\n else throw new Error(`<mg-tabs> prop \"items\" is required and all items must be the same type: TabItem. Passed value: ${toString(newValue)}.`);\n }\n\n /**\n * Active tab number\n */\n @Prop({ reflect: true, mutable: true }) activeTab: number;\n @Watch('activeTab')\n validateActiveTab(newValue: MgTabs['activeTab']): void {\n // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value\n // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update\n if (newValue === undefined) {\n this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))\n ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))\n : this.startIndex;\n } else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {\n // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE\n this.tabs.forEach((tab, index) => {\n const isNewActiveTab = index === newValue - this.startIndex;\n // reset active tabs\n if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab) tab.status = Status.VISIBLE;\n // set active tab from given tab key\n else if (this.isActivableTab(tab) && isNewActiveTab) tab.status = Status.ACTIVE;\n });\n // emit change active tab key event\n this.activeTabChange.emit(newValue);\n } else {\n throw new Error(\n `<mg-tabs> prop \"activeTab\" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be \"activable\". Passed value: ${toString(newValue)}.`,\n );\n }\n }\n\n /**\n * Component tabs\n */\n @State() tabs: TabItem[] = [];\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-tabs']);\n\n /**\n * Emited event when active tab change\n */\n @Event({ eventName: 'active-tab-change' }) activeTabChange: EventEmitter<HTMLMgTabsElement['activeTab']>;\n\n /**\n * Validate that new tab status can be `Status.ACTIVE`\n * @param tab - tab item\n * @returns true when tab match condition to get a `Status.ACTIVE`\n */\n private isActivableTab = (tab: TabItem): boolean => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);\n\n /**\n * Method to know if given tab has the given status\n * @param tab - item tab key to set to ACTIVE status\n * @param status - status to valide\n * @returns status comparaison\n */\n private tabHasStatus = (tab: TabItem, status: TabItem['status']): boolean => tab.status === status;\n\n /**\n * Method to get element id from index\n * @param element - to get id\n * @param index - to generate id\n * @returns generated element id\n */\n private getElementId = (element: string, index: number): string => `${element}-${this.getTabItemIndex(index)}`;\n\n /**\n * Method to get tab item index\n * @param index - to get\n * @returns index\n */\n private getTabItemIndex = (index: number): number => index + this.startIndex;\n\n /**\n * Handle click events on tabs\n * @param event - mouse event\n */\n private handleClick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n const tabId = event.currentTarget.dataset.index;\n if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {\n event.preventDefault();\n } else {\n this.activeTab = Number(tabId);\n this.tabFocus = undefined;\n }\n };\n\n /**\n * get navigation button class from given status\n * @param status - button tab status\n * @returns button class/selector variant\n */\n private getNavigationButtonClass = (status: TabItem['status']): string => `${this.buttonTabBaseClass}--${status}`;\n\n /**\n * Handle keyboard event on tabs\n * @param event - mouse event\n */\n private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n const parent = event.target.parentElement;\n if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {\n this.tabFocus = Number(event.target.dataset.index);\n parent.querySelector(`[data-index=\"${this.tabFocus}\"]`).setAttribute('tabindex', '-1');\n\n // Move right\n if (event.key === 'ArrowRight') {\n this.tabFocus++;\n // If we're at the end, go to the start\n if (this.tabFocus > this.tabs.length) this.tabFocus = this.startIndex;\n // Move left\n } else if (event.key === 'ArrowLeft') {\n this.tabFocus--;\n // If we're at the start, move to the end\n if (this.tabFocus < this.startIndex) this.tabFocus = this.tabs.length;\n }\n\n const parentButtonElement: HTMLButtonElement = parent.querySelector(`[data-index=\"${this.tabFocus}\"]`);\n // if focus item is ['hidden'] we recursively repeat action\n if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {\n parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));\n // else run focus methods on tabFocus element\n } else {\n parentButtonElement.setAttribute('tabindex', '0');\n parentButtonElement.focus();\n }\n } else if (event.key === 'Tab') {\n this.resetFocus();\n }\n };\n\n /**\n * Reset focus on document click\n * @param event - mouse event\n */\n private handleDocumentClick = (event: MouseEvent & { target: HTMLElement }): void => {\n if (event.target.closest('mg-tabs') !== this.element) this.resetFocus();\n };\n\n /**\n * Method to reset focus behavior\n */\n private resetFocus = (): void => {\n // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process\n nextTick(() => {\n this.tabFocus = undefined;\n Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {\n tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');\n });\n });\n };\n\n /**\n * Validate slots setting\n */\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children).filter(slot => slot.getAttribute('slot')?.includes('tab_content-'));\n if (slots.length !== this.tabs.length) throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Check tabs format\n this.watchIdentifier(this.identifier);\n this.validateLabel(this.label);\n this.validateItems(this.items);\n this.validateActiveTab(this.activeTab);\n this.validateSize(this.size);\n this.validateSlots();\n }\n\n /**\n * add listners\n */\n componentDidLoad(): void {\n document.addEventListener('click', this.handleDocumentClick, false);\n }\n\n /**\n * remove listeners\n */\n disconnectedCallback(): void {\n document.removeEventListener('keydown', this.handleDocumentClick);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class={this.classCollection.join()}>\n <header role=\"tablist\" aria-label={this.label} class=\"mg-c-tabs__header\">\n {this.tabs.map((tab, index) => (\n <button\n key={tab.label}\n role=\"tab\"\n id={this.getElementId(this.identifier, index)}\n class={{\n [`${this.buttonTabBaseClass}`]: true,\n [`${this.buttonTabBaseClass}--horizontal`]: true,\n [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),\n [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),\n [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),\n }}\n tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n aria-selected={this.tabHasStatus(tab, Status.ACTIVE).toString()}\n aria-controls={this.getElementId(this.tabPanel, index)}\n aria-disabled={this.tabHasStatus(tab, Status.DISABLED)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n data-index={this.getTabItemIndex(index)}\n >\n {tab.icon !== undefined && <mg-icon icon={tab.icon}></mg-icon>}\n {tab.label}\n {tab.badge !== undefined && <mg-badge variant=\"text-color\" value={tab.badge.value} label={tab.badge.label} outline={tab.badge.role === 'information'}></mg-badge>}\n </button>\n ))}\n </header>\n {this.tabs.map((tab, index) => (\n <article\n key={tab.label}\n role=\"tabpanel\"\n id={this.getElementId(this.tabPanel, index)}\n hidden={!this.tabHasStatus(tab, Status.ACTIVE)}\n aria-labelledby={this.getElementId(this.identifier, index)}\n tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n class=\"mg-c-tabs__content-container\"\n >\n <slot name={this.getElementId('tab_content', index)}></slot>\n </article>\n ))}\n </div>\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Defines the possible values for size\n */\nexport type Size = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';\n\n/**\n * Defines the possible values for variant\n */\nexport type Variant = 'info' | 'success' | 'warning' | 'danger' | 'danger-alt' | 'primary' | 'secondary' | 'app' | 'light' | 'dark' | 'flat' | 'text-color' | 'link';\n\n/**\n * Defines the possible values for variantStyle\n */\nexport type VariantStyle = 'icon' | 'background' | 'bar-left' | 'full';\n\n/**\n * Defines the possible values for input error\n */\nexport type InputError = 'min' | 'max' | 'minMax' | 'required' | 'badInput';\n\n/**\n * Defines the possible values for status\n */\nexport type Status = 'visible' | 'hidden' | 'disabled' | 'active';\n\n/**\n * Define option type\n */\nexport type Option = {\n title: string;\n value: unknown;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Defines the possible values for size\n */\nexport type Size = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';\n\n/**\n * Defines the possible values for variant\n */\nexport type Variant = 'info' | 'success' | 'warning' | 'danger' | 'danger-alt' | 'primary' | 'secondary' | 'app' | 'light' | 'dark' | 'flat' | 'text-color' | 'link';\n\n/**\n * Defines the possible values for variantStyle\n */\nexport type VariantStyle = 'icon' | 'background' | 'bar-left' | 'full';\n\n/**\n * Defines the possible values for ariaRole\n */\nexport type AriaRole = 'progressbar' | 'meter' | 'form' | 'search' | 'none' | 'presentation';\n\n/**\n * Defines the possible values for input error\n */\nexport type InputError = 'min' | 'max' | 'minMax' | 'required' | 'badInput';\n\n/**\n * Defines the possible values for status\n */\nexport type Status = 'visible' | 'hidden' | 'disabled' | 'active';\n\n/**\n * Define option type\n */\nexport type Option = {\n title: string;\n value: unknown;\n};\n"]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
var ve = Object.defineProperty;
|
|
2
2
|
var he = (e, t, s) => t in e ? ve(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
|
|
3
3
|
var g = (e, t, s) => he(e, typeof t != "symbol" ? t + "" : t, s);
|
|
4
|
-
const
|
|
4
|
+
const qe = (e = "", t = 10) => {
|
|
5
5
|
const s = new Uint8Array(t);
|
|
6
6
|
crypto.getRandomValues(s);
|
|
7
7
|
const r = Array.from(s).map((o) => o.toString(16).padStart(2, "0")).join("").slice(0, t);
|
|
8
8
|
return e !== "" ? `${e}-${r}` : r;
|
|
9
|
-
};
|
|
10
|
-
class
|
|
9
|
+
}, Ge = (e) => me(e) && /^([a-z][a-z0-9]*)(-[a-z0-9]+)*$/.exec(e) !== null;
|
|
10
|
+
class Xe {
|
|
11
11
|
constructor(t = []) {
|
|
12
12
|
/**
|
|
13
13
|
* Available classes
|
|
@@ -42,7 +42,7 @@ class Ie {
|
|
|
42
42
|
this.classes = t;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
const
|
|
45
|
+
const Je = (e) => Array.isArray(e) && e.every((t) => typeof t == "string"), Ke = (e, t) => t.includes(e == null ? void 0 : e.tagName.toLowerCase()), Qe = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier], mg-button', Ze = (e) => {
|
|
46
46
|
const t = te(e), s = se(e);
|
|
47
47
|
return [e, ...t, ...s];
|
|
48
48
|
}, te = (e, t = []) => {
|
|
@@ -59,18 +59,18 @@ const Ge = (e) => Array.isArray(e) && e.every((t) => typeof t == "string"), Xe =
|
|
|
59
59
|
for (const s of Array.from(e.frames))
|
|
60
60
|
t.push(s), se(s, t);
|
|
61
61
|
return t;
|
|
62
|
-
},
|
|
63
|
-
var
|
|
62
|
+
}, me = (e) => typeof e == "string" && e.trim() !== "", Ye = (e) => typeof e == "object" ? JSON.stringify(e) : `${e}`, Ve = (e) => typeof e == "number" && !Number.isNaN(e), et = (e) => typeof e == "string" ? e.toLocaleLowerCase().normalize("NFD").replaceAll(/[\u0300-\u036f]/g, "") : e, tt = async (e) => e();
|
|
63
|
+
var be = Object.defineProperty, Se = (e, t) => {
|
|
64
64
|
for (var s in t)
|
|
65
|
-
|
|
65
|
+
be(e, s, { get: t[s], enumerable: !0 });
|
|
66
66
|
};
|
|
67
|
-
var
|
|
68
|
-
|
|
67
|
+
var Ae = {};
|
|
68
|
+
Se(Ae, {
|
|
69
69
|
err: () => oe,
|
|
70
|
-
map: () =>
|
|
70
|
+
map: () => Ee,
|
|
71
71
|
ok: () => U,
|
|
72
|
-
unwrap: () =>
|
|
73
|
-
unwrapErr: () =>
|
|
72
|
+
unwrap: () => je,
|
|
73
|
+
unwrapErr: () => Re
|
|
74
74
|
});
|
|
75
75
|
var U = (e) => ({
|
|
76
76
|
isOk: !0,
|
|
@@ -81,7 +81,7 @@ var U = (e) => ({
|
|
|
81
81
|
isErr: !0,
|
|
82
82
|
value: e
|
|
83
83
|
});
|
|
84
|
-
function
|
|
84
|
+
function Ee(e, t) {
|
|
85
85
|
if (e.isOk) {
|
|
86
86
|
const s = t(e.value);
|
|
87
87
|
return s instanceof Promise ? s.then((r) => U(r)) : U(s);
|
|
@@ -92,26 +92,39 @@ function Ae(e, t) {
|
|
|
92
92
|
}
|
|
93
93
|
throw "should never get here";
|
|
94
94
|
}
|
|
95
|
-
var
|
|
95
|
+
var je = (e) => {
|
|
96
96
|
if (e.isOk)
|
|
97
97
|
return e.value;
|
|
98
98
|
throw e.value;
|
|
99
|
-
},
|
|
99
|
+
}, Re = (e) => {
|
|
100
100
|
if (e.isErr)
|
|
101
101
|
return e.value;
|
|
102
102
|
throw e.value;
|
|
103
103
|
};
|
|
104
|
-
const
|
|
104
|
+
const ct = (e) => {
|
|
105
105
|
const t = { value: "2023", pattern: "yyyy" }, s = { value: "12", pattern: "mm" }, r = { value: "24", pattern: "dd" };
|
|
106
|
-
return
|
|
107
|
-
},
|
|
108
|
-
const r = e.closest("[lang]"), o = Intl.NumberFormat.supportedLocalesOf(r == null ? void 0 : r.lang), n = o.length > 0 && typeof o[0] == "string" ? o[0] : navigator.language || s,
|
|
109
|
-
return {
|
|
106
|
+
return ze([t.value, s.value, r.value].join("-"), e, { timeZone: "UTC" }).replace(t.value, t.pattern).replace(s.value, s.pattern).replace(r.value, r.pattern);
|
|
107
|
+
}, ft = (e) => e.toISOString().split("T")[0], We = (e, t, s) => {
|
|
108
|
+
const r = e.closest("[lang]"), o = Intl.NumberFormat.supportedLocalesOf(r == null ? void 0 : r.lang), n = o.length > 0 && typeof o[0] == "string" ? o[0] : navigator.language || s, i = n.split("-").shift();
|
|
109
|
+
return Object.keys(t).length === 0 ? {
|
|
110
|
+
locale: n,
|
|
111
|
+
messages: { lang: s }
|
|
112
|
+
} : {
|
|
110
113
|
locale: n,
|
|
111
|
-
messages: t[
|
|
114
|
+
messages: t[i] || t[s] || { lang: s }
|
|
112
115
|
};
|
|
113
|
-
},
|
|
116
|
+
}, ut = (e, t, s) => new Intl.NumberFormat(t, { style: "currency", currency: s }).format(e), $t = (e, t, s = 0) => new Intl.NumberFormat(t, { minimumFractionDigits: s }).format(s > 0 ? Number(e == null ? void 0 : e.toFixed(s)) : e), dt = (e, t, s = 0) => new Intl.NumberFormat(t, {
|
|
117
|
+
style: "percent",
|
|
118
|
+
minimumFractionDigits: s,
|
|
119
|
+
maximumFractionDigits: s
|
|
120
|
+
}).format(e), pt = (e, t, s, r = "short", o = 0) => new Intl.NumberFormat(t, {
|
|
121
|
+
style: "unit",
|
|
122
|
+
unit: s,
|
|
123
|
+
unitDisplay: r,
|
|
124
|
+
minimumFractionDigits: o,
|
|
125
|
+
maximumFractionDigits: o
|
|
126
|
+
}).format(e), He = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/, ze = (e, t, s) => typeof e != "string" || e === "" || !He.test(e) ? "" : new Intl.DateTimeFormat(t, s).format(new Date(e)), gt = (e, t) => (s) => We(s, e, t);
|
|
114
127
|
|
|
115
|
-
export { Ge as G, He as H,
|
|
128
|
+
export { $t as $, Ge as G, He as H, Je as J, Ke as K, Qe as Q, Ve as V, Xe as X, Ye as Y, Ze as Z, ct as c, dt as d, et as e, ft as f, gt as g, me as m, pt as p, qe as q, tt as t, ut as u, ze as z };
|
|
116
129
|
|
|
117
130
|
//# sourceMappingURL=index.es.js.map
|