@govbr-ds/webcomponents 2.0.0-next.10 → 2.0.0-next.11
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/br-avatar.cjs.entry.js +1 -1
- package/dist/cjs/br-button_2.cjs.entry.js +1 -1
- package/dist/cjs/br-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/br-input.cjs.entry.js +1 -1
- package/dist/cjs/br-item.cjs.entry.js +50 -12
- package/dist/cjs/br-item.cjs.entry.js.map +1 -1
- package/dist/cjs/br-loading.cjs.entry.js +1 -1
- package/dist/cjs/br-message.cjs.entry.js +1 -1
- package/dist/cjs/br-radio.cjs.entry.js +15 -6
- package/dist/cjs/br-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/br-switch.cjs.entry.js +1 -1
- package/dist/cjs/{index-af20d91d.js → index-ecdd4399.js} +70 -3
- package/dist/{esm/index-4f7580f8.js.map → cjs/index-ecdd4399.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/webcomponents.cjs.js +2 -2
- package/dist/collection/components/item/item.css +10 -0
- package/dist/collection/components/item/item.js +59 -12
- package/dist/collection/components/item/item.js.map +1 -1
- package/dist/collection/components/radio/radio.js +24 -7
- package/dist/collection/components/radio/radio.js.map +1 -1
- package/dist/components/br-avatar.js +2 -2
- package/dist/components/br-button.js +1 -1
- package/dist/components/br-checkbox.js +1 -1
- package/dist/components/br-icon.js +1 -1
- package/dist/components/br-input.js +3 -3
- package/dist/components/br-item.js +53 -15
- package/dist/components/br-item.js.map +1 -1
- package/dist/components/br-loading.js +1 -1
- package/dist/components/br-message.js +3 -3
- package/dist/components/br-radio.js +16 -8
- package/dist/components/br-radio.js.map +1 -1
- package/dist/components/br-switch.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{p-1b06f3d9.js → p-4c4ab942.js} +59 -4
- package/dist/components/p-4c4ab942.js.map +1 -0
- package/dist/components/{p-75879137.js → p-8208cc5d.js} +2 -2
- package/dist/components/{p-75879137.js.map → p-8208cc5d.js.map} +1 -1
- package/dist/components/{p-f3ca1c10.js → p-be684701.js} +2 -2
- package/dist/components/{p-f3ca1c10.js.map → p-be684701.js.map} +1 -1
- package/dist/esm/br-avatar.entry.js +1 -1
- package/dist/esm/br-button_2.entry.js +1 -1
- package/dist/esm/br-checkbox.entry.js +1 -1
- package/dist/esm/br-input.entry.js +1 -1
- package/dist/esm/br-item.entry.js +50 -12
- package/dist/esm/br-item.entry.js.map +1 -1
- package/dist/esm/br-loading.entry.js +1 -1
- package/dist/esm/br-message.entry.js +1 -1
- package/dist/esm/br-radio.entry.js +15 -6
- package/dist/esm/br-radio.entry.js.map +1 -1
- package/dist/esm/br-switch.entry.js +1 -1
- package/dist/esm/{index-4f7580f8.js → index-5866d5ff.js} +70 -3
- package/dist/esm/index-5866d5ff.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/webcomponents.js +3 -3
- package/dist/types/components/item/item.d.ts +6 -2
- package/dist/types/components/radio/radio.d.ts +1 -4
- package/dist/webcomponents/{p-7a93b09e.entry.js → p-17259007.entry.js} +2 -2
- package/dist/webcomponents/{p-786e07d7.entry.js → p-2b010012.entry.js} +2 -2
- package/dist/webcomponents/p-6315c80a.js +3 -0
- package/dist/webcomponents/p-6315c80a.js.map +1 -0
- package/dist/webcomponents/{p-8d69ee5a.entry.js → p-66f8ee5c.entry.js} +2 -2
- package/dist/webcomponents/{p-ec316fb6.entry.js → p-6c867b24.entry.js} +2 -2
- package/dist/webcomponents/p-6c867b24.entry.js.map +1 -0
- package/dist/webcomponents/{p-843bde97.entry.js → p-7de25a85.entry.js} +2 -2
- package/dist/webcomponents/{p-7e0a931b.entry.js → p-90cd6013.entry.js} +2 -2
- package/dist/webcomponents/{p-fb4b3338.entry.js → p-cfa0416f.entry.js} +2 -2
- package/dist/webcomponents/p-cfa0416f.entry.js.map +1 -0
- package/dist/webcomponents/{p-7a8de8dc.entry.js → p-dd2c8f48.entry.js} +2 -2
- package/dist/webcomponents/{p-563e73f4.entry.js → p-e38cbccf.entry.js} +2 -2
- package/dist/webcomponents/webcomponents.esm.js +1 -1
- package/dist/webcomponents/webcomponents.esm.js.map +1 -1
- package/hydrate/index.js +108 -23
- package/hydrate/index.mjs +108 -23
- package/package.json +1 -1
- package/dist/cjs/index-af20d91d.js.map +0 -1
- package/dist/components/p-1b06f3d9.js.map +0 -1
- package/dist/webcomponents/p-104a47a9.js +0 -3
- package/dist/webcomponents/p-104a47a9.js.map +0 -1
- package/dist/webcomponents/p-ec316fb6.entry.js.map +0 -1
- package/dist/webcomponents/p-fb4b3338.entry.js.map +0 -1
- /package/dist/webcomponents/{p-7a93b09e.entry.js.map → p-17259007.entry.js.map} +0 -0
- /package/dist/webcomponents/{p-786e07d7.entry.js.map → p-2b010012.entry.js.map} +0 -0
- /package/dist/webcomponents/{p-8d69ee5a.entry.js.map → p-66f8ee5c.entry.js.map} +0 -0
- /package/dist/webcomponents/{p-843bde97.entry.js.map → p-7de25a85.entry.js.map} +0 -0
- /package/dist/webcomponents/{p-7e0a931b.entry.js.map → p-90cd6013.entry.js.map} +0 -0
- /package/dist/webcomponents/{p-7a8de8dc.entry.js.map → p-dd2c8f48.entry.js.map} +0 -0
- /package/dist/webcomponents/{p-563e73f4.entry.js.map → p-e38cbccf.entry.js.map} +0 -0
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-ecdd4399.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["br-input.cjs",[[65,"br-input",{"defaultID":[513,"default-i-d"],"type":[513],"autocomplete":[513],"autofocus":[516],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"success":[516],"danger":[516],"info":[516],"warning":[516],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"showIconTextPassword":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message.cjs",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-avatar.cjs",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[32],"iconHeight":[32]}]]],["br-checkbox.cjs",[[65,"br-checkbox",{"indeterminate":[1540],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[1540,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-item.cjs",[[65,"br-item",{"disabled":[516],"isActive":[1540,"is-active"],"isSelected":[1540,"is-selected"],"isInteractive":[1540,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"
|
|
11
|
+
return index.bootstrapLazy([["br-input.cjs",[[65,"br-input",{"defaultID":[513,"default-i-d"],"type":[513],"autocomplete":[513],"autofocus":[516],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"success":[516],"danger":[516],"info":[516],"warning":[516],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"showIconTextPassword":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message.cjs",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-avatar.cjs",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[32],"iconHeight":[32]}]]],["br-checkbox.cjs",[[65,"br-checkbox",{"indeterminate":[1540],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[1540,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-item.cjs",[[65,"br-item",{"disabled":[516],"isActive":[1540,"is-active"],"isSelected":[1540,"is-selected"],"isInteractive":[1540,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"slotDefault":[32],"selectedValue":[32]},[[4,"brDidCheckedChange","handleChange"]]]]],["br-loading.cjs",[[65,"br-loading",{"isProgress":[516,"is-progress"],"progressPercent":[514,"progress-percent"],"isMedium":[516,"is-medium"],"label":[513]}]]],["br-radio.cjs",[[65,"br-radio",{"checked":[1540],"disabled":[516],"state":[513],"hasHiddenLabel":[1540,"has-hidden-label"],"name":[513],"label":[513],"value":[520],"customId":[513,"id"],"toggle":[516],"_slotDefault":[32],"handleClick":[64],"handleKeyDown":[64]},[[4,"brDidSelect","handleItemInteractiveSelect"]]]]],["br-switch.cjs",[[65,"br-switch",{"disabled":[516],"checked":[1540],"customId":[513,"id"],"label":[1],"labelPosition":[513,"label-position"],"labelOn":[513,"label-on"],"labelOff":[513,"label-off"],"hasIcon":[1540,"has-icon"],"name":[513],"value":[513],"density":[513],"_slotDefault":[32],"_checkedValue":[32],"toggleChecked":[64]}]]],["br-button_2.cjs",[[65,"br-button",{"autofocus":[516],"colorMode":[513,"color-mode"],"density":[513],"disabled":[516],"emphasis":[513],"isActive":[516,"is-active"],"isLoading":[516,"is-loading"],"shape":[513],"type":[513],"value":[513]}],[1,"br-icon",{"IconName":[513,"icon-name"],"height":[513],"width":[513],"class":[513],"isInline":[516,"is-inline"],"rotate":[513],"flip":[513]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-ecdd4399.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["br-input.cjs",[[65,"br-input",{"defaultID":[513,"default-i-d"],"type":[513],"autocomplete":[513],"autofocus":[516],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"success":[516],"danger":[516],"info":[516],"warning":[516],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"showIconTextPassword":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message.cjs",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-avatar.cjs",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[32],"iconHeight":[32]}]]],["br-checkbox.cjs",[[65,"br-checkbox",{"indeterminate":[1540],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[1540,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-item.cjs",[[65,"br-item",{"disabled":[516],"isActive":[1540,"is-active"],"isSelected":[1540,"is-selected"],"isInteractive":[1540,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"
|
|
22
|
+
return index.bootstrapLazy([["br-input.cjs",[[65,"br-input",{"defaultID":[513,"default-i-d"],"type":[513],"autocomplete":[513],"autofocus":[516],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"success":[516],"danger":[516],"info":[516],"warning":[516],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"showIconTextPassword":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message.cjs",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-avatar.cjs",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[32],"iconHeight":[32]}]]],["br-checkbox.cjs",[[65,"br-checkbox",{"indeterminate":[1540],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[1540,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-item.cjs",[[65,"br-item",{"disabled":[516],"isActive":[1540,"is-active"],"isSelected":[1540,"is-selected"],"isInteractive":[1540,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"slotDefault":[32],"selectedValue":[32]},[[4,"brDidCheckedChange","handleChange"]]]]],["br-loading.cjs",[[65,"br-loading",{"isProgress":[516,"is-progress"],"progressPercent":[514,"progress-percent"],"isMedium":[516,"is-medium"],"label":[513]}]]],["br-radio.cjs",[[65,"br-radio",{"checked":[1540],"disabled":[516],"state":[513],"hasHiddenLabel":[1540,"has-hidden-label"],"name":[513],"label":[513],"value":[520],"customId":[513,"id"],"toggle":[516],"_slotDefault":[32],"handleClick":[64],"handleKeyDown":[64]},[[4,"brDidSelect","handleItemInteractiveSelect"]]]]],["br-switch.cjs",[[65,"br-switch",{"disabled":[516],"checked":[1540],"customId":[513,"id"],"label":[1],"labelPosition":[513,"label-position"],"labelOn":[513,"label-on"],"labelOff":[513,"label-off"],"hasIcon":[1540,"has-icon"],"name":[513],"value":[513],"density":[513],"_slotDefault":[32],"_checkedValue":[32],"toggleChecked":[64]}]]],["br-button_2.cjs",[[65,"br-button",{"autofocus":[516],"colorMode":[513,"color-mode"],"density":[513],"disabled":[516],"emphasis":[513],"isActive":[516,"is-active"],"isLoading":[516,"is-loading"],"shape":[513],"type":[513],"value":[513]}],[1,"br-icon",{"IconName":[513,"icon-name"],"height":[513],"width":[513],"class":[513],"isInline":[516,"is-inline"],"rotate":[513],"flip":[513]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -23581,4 +23581,14 @@ button.br-item:not(:disabled):active {
|
|
|
23581
23581
|
|
|
23582
23582
|
:host {
|
|
23583
23583
|
display: block;
|
|
23584
|
+
}
|
|
23585
|
+
|
|
23586
|
+
::slotted(br-checkbox) {
|
|
23587
|
+
max-width: fit-content;
|
|
23588
|
+
max-height: fit-content;
|
|
23589
|
+
}
|
|
23590
|
+
|
|
23591
|
+
::slotted(br-radio) {
|
|
23592
|
+
max-width: fit-content;
|
|
23593
|
+
max-height: fit-content;
|
|
23584
23594
|
}
|
|
@@ -16,21 +16,29 @@ export class Item {
|
|
|
16
16
|
this.isButton = false;
|
|
17
17
|
this.type = undefined;
|
|
18
18
|
this.value = undefined;
|
|
19
|
-
this.
|
|
20
|
-
this.
|
|
19
|
+
this.slotDefault = false;
|
|
20
|
+
this.selectedValue = false;
|
|
21
|
+
}
|
|
22
|
+
handleChange(event) {
|
|
23
|
+
const target = event.target;
|
|
24
|
+
if (this.el.contains(target)) {
|
|
25
|
+
this.updateItemSelectionState();
|
|
26
|
+
}
|
|
21
27
|
}
|
|
22
28
|
connectedCallback() {
|
|
23
29
|
this.brDidConnect.emit();
|
|
24
30
|
}
|
|
25
31
|
componentWillLoad() {
|
|
26
32
|
this.hasSlotContentDefault();
|
|
27
|
-
this.
|
|
33
|
+
this.selectedValue = this.isSelected;
|
|
28
34
|
if (this.isButton) {
|
|
29
35
|
this.type = this.type || 'button';
|
|
30
36
|
}
|
|
37
|
+
this.updateItemSelectionState();
|
|
31
38
|
this.brWillLoad.emit();
|
|
32
39
|
}
|
|
33
40
|
componentDidLoad() {
|
|
41
|
+
this.updateCheckboxes();
|
|
34
42
|
this.brDidLoad.emit();
|
|
35
43
|
}
|
|
36
44
|
componentWillRender() {
|
|
@@ -64,14 +72,14 @@ export class Item {
|
|
|
64
72
|
this.brFormStateRestoreCallback.emit([state, _mode]);
|
|
65
73
|
}
|
|
66
74
|
hasSlotContentDefault() {
|
|
67
|
-
this.
|
|
75
|
+
this.slotDefault = this.el.innerHTML !== '';
|
|
68
76
|
}
|
|
69
77
|
getCssClassMap() {
|
|
70
78
|
return {
|
|
71
79
|
'br-item': true,
|
|
72
80
|
disabled: this.disabled,
|
|
73
81
|
active: this.isActive,
|
|
74
|
-
selected: this.
|
|
82
|
+
selected: this.selectedValue,
|
|
75
83
|
};
|
|
76
84
|
}
|
|
77
85
|
getTagType() {
|
|
@@ -85,10 +93,38 @@ export class Item {
|
|
|
85
93
|
}
|
|
86
94
|
getAttributes() {
|
|
87
95
|
const TagType = this.getTagType();
|
|
88
|
-
const baseAttributes = TagType === 'button'
|
|
89
|
-
|
|
96
|
+
const baseAttributes = TagType === 'button'
|
|
97
|
+
? { type: this.type, value: this.value }
|
|
98
|
+
: { href: this.href, target: this.target };
|
|
99
|
+
return Object.assign(Object.assign(Object.assign({}, baseAttributes), { 'aria-disabled': this.disabled ? 'true' : null, 'aria-current': this.isActive ? 'true' : null, 'data-toggle': this.isInteractive ? 'selection' : null }), this.inheritedAttributes);
|
|
100
|
+
}
|
|
101
|
+
updateItemSelectionState() {
|
|
102
|
+
const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));
|
|
103
|
+
const radios = Array.from(this.el.querySelectorAll('br-radio'));
|
|
104
|
+
let isAnyCheckboxChecked = false;
|
|
105
|
+
let isAnyRadioSelected = false;
|
|
106
|
+
if (checkboxes.length > 0) {
|
|
107
|
+
isAnyCheckboxChecked = checkboxes.some(cb => cb.checked);
|
|
108
|
+
}
|
|
109
|
+
if (radios.length > 0) {
|
|
110
|
+
isAnyRadioSelected = radios.some(radio => radio.checked);
|
|
111
|
+
}
|
|
112
|
+
this.selectedValue = isAnyCheckboxChecked || isAnyRadioSelected;
|
|
113
|
+
}
|
|
114
|
+
// Função para verificar se o clique foi dentro do slot do item.
|
|
115
|
+
isClickInsideInteractiveElement(target) {
|
|
116
|
+
const interactiveSelectors = 'br-checkbox, br-radio, br-input, br-button, br-select, br-textarea';
|
|
117
|
+
const interactiveElements = this.el.querySelectorAll(interactiveSelectors);
|
|
118
|
+
return Array.from(interactiveElements).some(el => el.contains(target) || target === el);
|
|
119
|
+
}
|
|
120
|
+
updateCheckboxes() {
|
|
121
|
+
const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));
|
|
122
|
+
checkboxes.forEach((checkbox) => {
|
|
123
|
+
checkbox.checked = this.selectedValue;
|
|
124
|
+
});
|
|
90
125
|
}
|
|
91
126
|
handleClick(event) {
|
|
127
|
+
const clickedElement = event.target;
|
|
92
128
|
if (this.disabled) {
|
|
93
129
|
event.preventDefault();
|
|
94
130
|
event.stopPropagation();
|
|
@@ -96,8 +132,10 @@ export class Item {
|
|
|
96
132
|
if (this.isButton) {
|
|
97
133
|
this.brDidClick.emit();
|
|
98
134
|
}
|
|
99
|
-
else if (this.isInteractive) {
|
|
100
|
-
this.
|
|
135
|
+
else if (this.isInteractive && !this.isClickInsideInteractiveElement(clickedElement)) {
|
|
136
|
+
this.selectedValue = !this.selectedValue;
|
|
137
|
+
this.brDidSelect.emit({ selected: this.selectedValue });
|
|
138
|
+
this.updateCheckboxes();
|
|
101
139
|
}
|
|
102
140
|
event.stopPropagation();
|
|
103
141
|
}
|
|
@@ -105,7 +143,7 @@ export class Item {
|
|
|
105
143
|
const TagType = this.getTagType();
|
|
106
144
|
const attributes = this.getAttributes();
|
|
107
145
|
const classList = this.getCssClassMap();
|
|
108
|
-
return (h(Host, { key: '
|
|
146
|
+
return (h(Host, { key: '8461ffda50b1210a6a5b12c37c58b21f0794277b' }, h(TagType, Object.assign({ key: 'ced86d815586a66e7bbc340db73c4625fa9d910f', class: classList }, attributes, { onClick: (event) => this.handleClick(event) }), h("slot", { key: '798a5b5245b6e07e628f0f4320a020c54fd804cc' }))));
|
|
109
147
|
}
|
|
110
148
|
static get is() { return "br-item"; }
|
|
111
149
|
static get encapsulation() { return "shadow"; }
|
|
@@ -284,8 +322,8 @@ export class Item {
|
|
|
284
322
|
}
|
|
285
323
|
static get states() {
|
|
286
324
|
return {
|
|
287
|
-
"
|
|
288
|
-
"
|
|
325
|
+
"slotDefault": {},
|
|
326
|
+
"selectedValue": {}
|
|
289
327
|
};
|
|
290
328
|
}
|
|
291
329
|
static get events() {
|
|
@@ -534,6 +572,15 @@ export class Item {
|
|
|
534
572
|
}];
|
|
535
573
|
}
|
|
536
574
|
static get elementRef() { return "el"; }
|
|
575
|
+
static get listeners() {
|
|
576
|
+
return [{
|
|
577
|
+
"name": "brDidCheckedChange",
|
|
578
|
+
"method": "handleChange",
|
|
579
|
+
"target": "document",
|
|
580
|
+
"capture": false,
|
|
581
|
+
"passive": false
|
|
582
|
+
}];
|
|
583
|
+
}
|
|
537
584
|
static get attachInternalsMemberName() { return "elementInternals"; }
|
|
538
585
|
}
|
|
539
586
|
//# sourceMappingURL=item.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/components/item/item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core'\nimport { Attributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/item?tab=designer).\n *\n * @slot default - Área de conteúdo, podendo conter qualquer componente, exceto botões primários e componentes relacionados à navegação (como carrosséis, paginações, abas, menus, etc.).\n */\n@Component({\n tag: 'br-item',\n styleUrl: 'item.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Item {\n /**\n * Referência ao elemento host do componente.\n * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n */\n @Element() el: HTMLElement\n\n @AttachInternals() elementInternals: ElementInternals\n\n /**\n * Desativa o item, tornando-o não interativo.\n */\n @Prop({ reflect: true }) disabled: boolean = false\n\n /**\n * Indica se o item está no estado ativo.\n * Se definido como verdadeiro, o item será exibido como ativo.\n */\n @Prop({ reflect: true, mutable: true }) isActive: boolean = false\n\n /**\n * Indica se o item está no estado selecionado.\n * Se definido como verdadeiro, o item será exibido como selecionado.\n */\n @Prop({ reflect: true, mutable: true }) isSelected: boolean = false\n\n /**\n * Marca o item como interativo, permitindo que toda a superfície do item seja clicável.\n */\n @Prop({ reflect: true, mutable: true }) isInteractive: boolean = false\n\n /**\n * URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link.\n */\n @Prop({ reflect: true }) href?: string\n\n /**\n * Define o alvo do link quando `href` está presente. Pode ser:\n * - `_blank` para abrir em uma nova aba,\n * - `_self` para abrir na mesma aba,\n * - `_parent` para abrir na aba pai,\n * - `_top` para abrir na aba superior.\n */\n @Prop({ reflect: true }) target?: '_blank' | '_self' | '_parent' | '_top'\n\n /**\n * Quando definido como `true`, o item será tratado como um botão.\n */\n @Prop({ reflect: true }) isButton: boolean = false\n\n /**\n * Tipo do botão, aplicável apenas se `isButton` for `true`. Pode ser:\n * - `'submit'` para enviar um formulário,\n * - `'reset'` para redefinir um formulário,\n * - `'button'` para um botão padrão.\n */\n @Prop({ reflect: true, mutable: true }) type: 'submit' | 'reset' | 'button'\n\n /**\n * Define um valor associado ao br-item quando renderizado como um botão, utilizado em contextos de formulário.\n */\n @Prop({ reflect: true }) value?: string\n\n // Propriedade interna para verificar a presença de conteúdo no slot default\n @State() _slotDefault: boolean = false\n\n // Propriedade interna para armazenar o valor selecionado\n @State() _selectedValue: boolean = false\n\n /**\n * Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (`<button>`).\n * Pode ser utilizado para ações personalizadas, exceto quando o item está desativado.\n */\n @Event({\n eventName: 'brDidClick',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n brDidClick: EventEmitter\n\n /**\n * Evento customizado aplicável para todos os tipos de elementos (`div`, `button`, `a`), emitido quando o item é selecionado e desde que a propriedade `isInteractive` esteja presente.\n */\n @Event({ bubbles: true, composed: true }) brDidSelect: EventEmitter<{ selected: boolean }>\n\n /**\n * Emite um evento quando o componente é conectado ao DOM.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n */\n @Event() brDidConnect: EventEmitter<void>\n connectedCallback() {\n this.brDidConnect.emit()\n }\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.hasSlotContentDefault()\n this._selectedValue = this.isSelected\n if (this.isButton) {\n this.type = this.type || 'button'\n }\n this.brWillLoad.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido carregado pela primeira vez.\n * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n */\n @Event() brDidLoad: EventEmitter<void>\n componentDidLoad() {\n this.brDidLoad.emit()\n }\n\n /**\n * Emite um evento antes do componente ser renderizado.\n * Utilize este evento para preparar o componente antes de sua renderização.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n */\n @Event() brWillRender: EventEmitter<void>\n componentWillRender() {\n this.brWillRender.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido renderizado.\n * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n */\n @Event() brDidRender: EventEmitter<void>\n componentDidRender() {\n this.brDidRender.emit()\n }\n\n /**\n * Emite um evento para indicar se o componente deve ser atualizado ou não.\n * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n */\n @Event() brShouldUpdate: EventEmitter<void>\n componentShouldUpdate() {\n this.brShouldUpdate.emit()\n }\n\n /**\n * Emite um evento antes de o componente ser atualizado.\n * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n */\n @Event() brWillUpdate: EventEmitter<void>\n componentWillUpdate() {\n this.brWillUpdate.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido atualizado.\n * Utilize este evento para realizar ações após a atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n */\n @Event() brDidUpdate: EventEmitter<void>\n componentDidUpdate() {\n this.brDidUpdate.emit()\n }\n\n /**\n * Emite um evento quando o componente é desconectado do DOM.\n * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n */\n @Event() brDidDisconnect: EventEmitter<void>\n disconnectedCallback() {\n this.brDidDisconnect.emit()\n }\n\n /**\n * Emite um evento quando o componente é associado ou removido de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n *\n * @param form - Dados do formulário associado.\n */\n @Event() brFormAssociatedCallback: EventEmitter<FormData>\n formAssociatedCallback(form: FormData) {\n this.brFormAssociatedCallback.emit(form)\n }\n\n /**\n * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n *\n * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n */\n @Event() brFormDisabledCallback: EventEmitter<boolean>\n formDisabledCallback(disabled: boolean) {\n this.brFormDisabledCallback.emit(disabled)\n }\n\n /**\n * Emite um evento quando um `<form>` é resetado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n */\n @Event() brFormResetCallback: EventEmitter<void>\n formResetCallback() {\n this.brFormResetCallback.emit()\n }\n\n /**\n * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n *\n * @param state - Estado restaurado do formulário.\n * @param _mode - Modo de preenchimento automático do navegador.\n */\n @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n formStateRestoreCallback(state: string, _mode: string) {\n this.brFormStateRestoreCallback.emit([state, _mode])\n }\n\n private hasSlotContentDefault(): any {\n this._slotDefault = this.el.innerHTML !== ''\n }\n\n private getCssClassMap(): CssClassMap {\n return {\n 'br-item': true,\n disabled: this.disabled,\n active: this.isActive,\n selected: this._selectedValue,\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n private getTagType(): string {\n if (this.isButton) {\n return 'button'\n }\n if (this.href) {\n return 'a'\n }\n return 'div'\n }\n\n private getAttributes() {\n const TagType = this.getTagType()\n const baseAttributes =\n TagType === 'button' ? { type: this.type, value: this.value } : { href: this.href, target: this.target }\n\n return {\n ...baseAttributes,\n 'aria-disabled': this.disabled ? 'true' : null,\n 'aria-selected': this._selectedValue ? 'true' : null,\n 'aria-current': this.isActive ? 'true' : null,\n 'data-toggle': this.isInteractive,\n ...this.inheritedAttributes,\n }\n }\n\n private handleClick(event: MouseEvent) {\n if (this.disabled) {\n event.preventDefault()\n event.stopPropagation()\n }\n\n if (this.isButton) {\n this.brDidClick.emit()\n } else if (this.isInteractive) {\n this.brDidSelect.emit({ selected: this._selectedValue })\n }\n event.stopPropagation()\n }\n\n render() {\n const TagType = this.getTagType()\n const attributes = this.getAttributes()\n const classList = this.getCssClassMap()\n return (\n <Host>\n <TagType class={classList} {...attributes} onClick={(event) => this.handleClick(event)}>\n <slot></slot>\n </TagType>\n </Host>\n )\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/components/item/item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAItH;;;;GAIG;AAOH,MAAM,OAAO,IAAI;;QAuPP,wBAAmB,GAAe,EAAE,CAAA;wBA3OC,KAAK;wBAMU,KAAK;0BAMH,KAAK;6BAKF,KAAK;;;wBAmBzB,KAAK;;;2BAgBlB,KAAK;6BAGH,KAAK;;IAGnC,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAE3C,IAAI,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;IACH,CAAC;IAwBL,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,iBAAiB;QACf,IAAI,CAAC,qBAAqB,EAAE,CAAA;QAC5B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAA;QACpC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC;QACpC,CAAC;QACD,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAA;IACxB,CAAC;IAQD,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;IACvB,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,qBAAqB;QACnB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;IAC5B,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,oBAAoB;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAA;IAC7B,CAAC;IASD,sBAAsB,CAAC,IAAc;QACnC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC1C,CAAC;IASD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC5C,CAAC;IAOD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAA;IACjC,CAAC;IAUD,wBAAwB,CAAC,KAAa,EAAE,KAAa;QACnD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;IACtD,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,KAAK,EAAE,CAAA;IAC7C,CAAC;IAEO,cAAc;QACpB,OAAO;YACL,SAAS,EAAE,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,QAAQ;YACrB,QAAQ,EAAE,IAAI,CAAC,aAAa;SAC7B,CAAA;IACH,CAAC;IAIO,UAAU;QAChB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,QAAQ,CAAA;QACjB,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,GAAG,CAAA;QACZ,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;IAEO,aAAa;QACnB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QACjC,MAAM,cAAc,GAAG,OAAO,KAAK,QAAQ;YAC3C,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YACxC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAA;QAE1C,qDACK,cAAc,KACjB,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC9C,cAAc,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC7C,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,KACnD,IAAI,CAAC,mBAAmB,EAC5B;IACH,CAAC;IAED,wBAAwB;QACtB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC;QACvE,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;QAEhE,IAAI,oBAAoB,GAAG,KAAK,CAAC;QACjC,IAAI,kBAAkB,GAAG,KAAK,CAAC;QAE/B,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1B,oBAAoB,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;QAC3D,CAAC;QACD,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACtB,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC3D,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,oBAAoB,IAAI,kBAAkB,CAAC;IAClE,CAAC;IAED,gEAAgE;IACxD,+BAA+B,CAAC,MAAmB;QACzD,MAAM,oBAAoB,GAAG,oEAAoE,CAAC;QAClG,MAAM,mBAAmB,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;QAC3E,OAAO,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,KAAK,EAAE,CAAC,CAAC;IAC1F,CAAC;IAEO,gBAAgB;QACtB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC;QAEvE,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;YAC9B,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,WAAW,CAAC,KAAiB;QACnC,MAAM,cAAc,GAAG,KAAK,CAAC,MAAqB,CAAC;QAEnD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,KAAK,CAAC,eAAe,EAAE,CAAA;QACzB,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAA;QACxB,CAAC;aAAM,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,+BAA+B,CAAC,cAAc,CAAC,EAAE,CAAC;YACrF,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAA;YACxC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAA;YACvD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC5B,CAAC;QACD,KAAK,CAAC,eAAe,EAAE,CAAA;IACzB,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QACjC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACvC,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,CAAA;QACvC,OAAO,CACL,EAAC,IAAI;YACH,EAAC,OAAO,mEAAC,KAAK,EAAE,SAAS,IAAM,UAAU,IAAE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;gBACpF,8DAAa,CACL,CACL,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core'\nimport { Attributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/item?tab=designer).\n *\n * @slot default - Área de conteúdo, podendo conter qualquer componente, exceto botões primários e componentes relacionados à navegação (como carrosséis, paginações, abas, menus, etc.).\n */\n@Component({\n tag: 'br-item',\n styleUrl: 'item.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Item {\n /**\n * Referência ao elemento host do componente.\n * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n */\n @Element() el: HTMLElement\n\n @AttachInternals() elementInternals: ElementInternals\n\n /**\n * Desativa o item, tornando-o não interativo.\n */\n @Prop({ reflect: true }) disabled: boolean = false\n\n /**\n * Indica se o item está no estado ativo.\n * Se definido como verdadeiro, o item será exibido como ativo.\n */\n @Prop({ reflect: true, mutable: true }) isActive: boolean = false\n\n /**\n * Indica se o item está no estado selecionado.\n * Se definido como verdadeiro, o item será exibido como selecionado.\n */\n @Prop({ reflect: true, mutable: true }) isSelected: boolean = false\n\n /**\n * Marca o item como interativo, permitindo que toda a superfície do item seja clicável.\n */\n @Prop({ reflect: true, mutable: true }) isInteractive: boolean = false\n\n /**\n * URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link.\n */\n @Prop({ reflect: true }) href?: string\n\n /**\n * Define o alvo do link quando `href` está presente. Pode ser:\n * - `_blank` para abrir em uma nova aba,\n * - `_self` para abrir na mesma aba,\n * - `_parent` para abrir na aba pai,\n * - `_top` para abrir na aba superior.\n */\n @Prop({ reflect: true }) target?: '_blank' | '_self' | '_parent' | '_top'\n\n /**\n * Quando definido como `true`, o item será tratado como um botão.\n */\n @Prop({ reflect: true }) isButton: boolean = false\n\n /**\n * Tipo do botão, aplicável apenas se `isButton` for `true`. Pode ser:\n * - `'submit'` para enviar um formulário,\n * - `'reset'` para redefinir um formulário,\n * - `'button'` para um botão padrão.\n */\n @Prop({ reflect: true, mutable: true }) type: 'submit' | 'reset' | 'button'\n\n /**\n * Define um valor associado ao br-item quando renderizado como um botão, utilizado em contextos de formulário.\n */\n @Prop({ reflect: true }) value?: string\n\n // Propriedade interna para verificar a presença de conteúdo no slot default\n @State() slotDefault: boolean = false\n\n // Propriedade interna para armazenar o valor selecionado\n @State() selectedValue: boolean = false\n\n @Listen('brDidCheckedChange', { target: 'document' })\n handleChange(event: Event) {\n const target = event.target as HTMLElement;\n\n if (this.el.contains(target)) {\n this.updateItemSelectionState();\n }\n }\n\n /**\n * Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (`<button>`).\n * Pode ser utilizado para ações personalizadas, exceto quando o item está desativado.\n */\n @Event({\n eventName: 'brDidClick',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n brDidClick: EventEmitter\n\n /**\n * Evento customizado aplicável para todos os tipos de elementos (`div`, `button`, `a`), emitido quando o item é selecionado e desde que a propriedade `isInteractive` esteja presente.\n */\n @Event({ bubbles: true, composed: true }) brDidSelect: EventEmitter<{ selected: boolean }>\n\n /**\n * Emite um evento quando o componente é conectado ao DOM.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n */\n @Event() brDidConnect: EventEmitter<void>\n connectedCallback() {\n this.brDidConnect.emit()\n }\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.hasSlotContentDefault()\n this.selectedValue = this.isSelected\n if (this.isButton) {\n this.type = this.type || 'button';\n }\n this.updateItemSelectionState();\n this.brWillLoad.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido carregado pela primeira vez.\n * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n */\n @Event() brDidLoad: EventEmitter<void>\n componentDidLoad() {\n this.updateCheckboxes();\n this.brDidLoad.emit()\n }\n\n /**\n * Emite um evento antes do componente ser renderizado.\n * Utilize este evento para preparar o componente antes de sua renderização.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n */\n @Event() brWillRender: EventEmitter<void>\n componentWillRender() {\n this.brWillRender.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido renderizado.\n * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n */\n @Event() brDidRender: EventEmitter<void>\n componentDidRender() {\n this.brDidRender.emit()\n }\n\n /**\n * Emite um evento para indicar se o componente deve ser atualizado ou não.\n * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n */\n @Event() brShouldUpdate: EventEmitter<void>\n componentShouldUpdate() {\n this.brShouldUpdate.emit()\n }\n\n /**\n * Emite um evento antes de o componente ser atualizado.\n * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n */\n @Event() brWillUpdate: EventEmitter<void>\n componentWillUpdate() {\n this.brWillUpdate.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido atualizado.\n * Utilize este evento para realizar ações após a atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n */\n @Event() brDidUpdate: EventEmitter<void>\n componentDidUpdate() {\n this.brDidUpdate.emit()\n }\n\n /**\n * Emite um evento quando o componente é desconectado do DOM.\n * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n */\n @Event() brDidDisconnect: EventEmitter<void>\n disconnectedCallback() {\n this.brDidDisconnect.emit()\n }\n\n /**\n * Emite um evento quando o componente é associado ou removido de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n *\n * @param form - Dados do formulário associado.\n */\n @Event() brFormAssociatedCallback: EventEmitter<FormData>\n formAssociatedCallback(form: FormData) {\n this.brFormAssociatedCallback.emit(form)\n }\n\n /**\n * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n *\n * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n */\n @Event() brFormDisabledCallback: EventEmitter<boolean>\n formDisabledCallback(disabled: boolean) {\n this.brFormDisabledCallback.emit(disabled)\n }\n\n /**\n * Emite um evento quando um `<form>` é resetado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n */\n @Event() brFormResetCallback: EventEmitter<void>\n formResetCallback() {\n this.brFormResetCallback.emit()\n }\n\n /**\n * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n *\n * @param state - Estado restaurado do formulário.\n * @param _mode - Modo de preenchimento automático do navegador.\n */\n @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n formStateRestoreCallback(state: string, _mode: string) {\n this.brFormStateRestoreCallback.emit([state, _mode])\n }\n\n private hasSlotContentDefault(): any {\n this.slotDefault = this.el.innerHTML !== ''\n }\n\n private getCssClassMap(): CssClassMap {\n return {\n 'br-item': true,\n disabled: this.disabled,\n active: this.isActive,\n selected: this.selectedValue,\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n private getTagType(): string {\n if (this.isButton) {\n return 'button'\n }\n if (this.href) {\n return 'a'\n }\n return 'div'\n }\n\n private getAttributes() {\n const TagType = this.getTagType()\n const baseAttributes = TagType === 'button'\n ? { type: this.type, value: this.value }\n : { href: this.href, target: this.target }\n\n return {\n ...baseAttributes,\n 'aria-disabled': this.disabled ? 'true' : null,\n 'aria-current': this.isActive ? 'true' : null,\n 'data-toggle': this.isInteractive ? 'selection' : null,\n ...this.inheritedAttributes,\n }\n }\n\n updateItemSelectionState() {\n const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));\n const radios = Array.from(this.el.querySelectorAll('br-radio'));\n\n let isAnyCheckboxChecked = false;\n let isAnyRadioSelected = false;\n\n if (checkboxes.length > 0) {\n isAnyCheckboxChecked = checkboxes.some(cb => cb.checked);\n }\n if (radios.length > 0) {\n isAnyRadioSelected = radios.some(radio => radio.checked);\n }\n\n this.selectedValue = isAnyCheckboxChecked || isAnyRadioSelected;\n }\n\n // Função para verificar se o clique foi dentro do slot do item.\n private isClickInsideInteractiveElement(target: HTMLElement): boolean {\n const interactiveSelectors = 'br-checkbox, br-radio, br-input, br-button, br-select, br-textarea';\n const interactiveElements = this.el.querySelectorAll(interactiveSelectors);\n return Array.from(interactiveElements).some(el => el.contains(target) || target === el);\n }\n\n private updateCheckboxes() {\n const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));\n\n checkboxes.forEach((checkbox) => {\n checkbox.checked = this.selectedValue;\n });\n }\n\n private handleClick(event: MouseEvent) {\n const clickedElement = event.target as HTMLElement;\n\n if (this.disabled) {\n event.preventDefault()\n event.stopPropagation()\n }\n\n if (this.isButton) {\n this.brDidClick.emit()\n }else if (this.isInteractive && !this.isClickInsideInteractiveElement(clickedElement)) {\n this.selectedValue = !this.selectedValue\n this.brDidSelect.emit({ selected: this.selectedValue })\n this.updateCheckboxes();\n }\n event.stopPropagation()\n }\n\n render() {\n const TagType = this.getTagType()\n const attributes = this.getAttributes()\n const classList = this.getCssClassMap()\n return (\n <Host>\n <TagType class={classList} {...attributes} onClick={(event) => this.handleClick(event)}>\n <slot></slot>\n </TagType>\n </Host>\n )\n }\n}\n"]}
|
|
@@ -18,13 +18,22 @@ export class Radio {
|
|
|
18
18
|
this.customId = undefined;
|
|
19
19
|
this.toggle = false;
|
|
20
20
|
this._slotDefault = false;
|
|
21
|
-
|
|
21
|
+
}
|
|
22
|
+
// Faz a marcação do checkbox de acordo com a seleção do componente item do tipo is-interactive
|
|
23
|
+
handleItemInteractiveSelect(event) {
|
|
24
|
+
var _a;
|
|
25
|
+
// Verifica se o evento é de um pai correto
|
|
26
|
+
const target = event.target;
|
|
27
|
+
const brItem = target.closest('br-item');
|
|
28
|
+
if (brItem && ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.contains(brItem))) {
|
|
29
|
+
this.checked = event.detail.selected;
|
|
30
|
+
}
|
|
31
|
+
event.stopPropagation();
|
|
22
32
|
}
|
|
23
33
|
connectedCallback() {
|
|
24
34
|
this.brDidConnect.emit();
|
|
25
35
|
}
|
|
26
36
|
componentWillLoad() {
|
|
27
|
-
this.isChecked = this.checked;
|
|
28
37
|
this.hasSlotContentDefault();
|
|
29
38
|
this.brWillLoad.emit();
|
|
30
39
|
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
@@ -95,8 +104,8 @@ export class Radio {
|
|
|
95
104
|
*/
|
|
96
105
|
toggleChecked() {
|
|
97
106
|
if (this.toggle) {
|
|
98
|
-
this.
|
|
99
|
-
this.brDidCheckedChange.emit({ value: this.value, checked: this.
|
|
107
|
+
this.checked = !this.checked;
|
|
108
|
+
this.brDidCheckedChange.emit({ value: this.value, checked: this.checked });
|
|
100
109
|
}
|
|
101
110
|
}
|
|
102
111
|
/**
|
|
@@ -106,7 +115,7 @@ export class Radio {
|
|
|
106
115
|
return this.customId ? this.customId : this.name;
|
|
107
116
|
}
|
|
108
117
|
render() {
|
|
109
|
-
return (h(Host, { key: '
|
|
118
|
+
return (h(Host, { key: '660b969988e41a89fdae674f8de5383dadf5c659', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'b146f7d3944904b24eb3695679512b0161953f26', class: this.getCssClassMap(), onClick: () => this.handleClick(), onKeyDown: (event) => this.handleKeyDown(event) }, h("input", Object.assign({ key: 'dcd4a5addad7971f6ad0947f09d3cded5d3cebf0', "aria-label": this.label, type: "radio", id: this.getComputedId(), name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, onClick: (event) => event.stopPropagation() }, this.inheritedAttributes)), h("label", { key: '39a07b6dc9b460b33f511f608b2a612b92ba8b84', htmlFor: this.getComputedId() }, this._slotDefault ? h("slot", null) : this.label))));
|
|
110
119
|
}
|
|
111
120
|
static get is() { return "br-radio"; }
|
|
112
121
|
static get encapsulation() { return "shadow"; }
|
|
@@ -285,8 +294,7 @@ export class Radio {
|
|
|
285
294
|
}
|
|
286
295
|
static get states() {
|
|
287
296
|
return {
|
|
288
|
-
"_slotDefault": {}
|
|
289
|
-
"isChecked": {}
|
|
297
|
+
"_slotDefault": {}
|
|
290
298
|
};
|
|
291
299
|
}
|
|
292
300
|
static get events() {
|
|
@@ -566,6 +574,15 @@ export class Radio {
|
|
|
566
574
|
};
|
|
567
575
|
}
|
|
568
576
|
static get elementRef() { return "el"; }
|
|
577
|
+
static get listeners() {
|
|
578
|
+
return [{
|
|
579
|
+
"name": "brDidSelect",
|
|
580
|
+
"method": "handleItemInteractiveSelect",
|
|
581
|
+
"target": "document",
|
|
582
|
+
"capture": false,
|
|
583
|
+
"passive": false
|
|
584
|
+
}];
|
|
585
|
+
}
|
|
569
586
|
static get attachInternalsMemberName() { return "elementInternals"; }
|
|
570
587
|
}
|
|
571
588
|
//# sourceMappingURL=radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/radio?tab=designer).\n *\n * @slot default - O texto descritivo pode ser passado por propriedade (label) ou por slot.\n */\n\n@Component({\n tag: 'br-radio',\n styleUrl: 'radio.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Radio {\n /**\n * Referência ao elemento host do componente.\n * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n */\n @Element() el: HTMLInputElement\n\n @AttachInternals() elementInternals: ElementInternals\n\n /**\n * Define o estado de seleção do radio.\n * Se definido como verdadeiro, o radio estará marcado. Caso contrário, estará desmarcado.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false\n\n /**\n * Desativa o radio, tornando-o não interativo.\n */\n @Prop({ reflect: true }) disabled: boolean = false\n\n /**\n * Indica a validade do radio.\n * Valores possíveis:\n * - 'valid': O radio é considerado válido.\n * - 'invalid': O radio é considerado inválido.\n * Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.\n */\n @Prop({ reflect: true }) state: 'valid' | 'invalid' = null\n\n /**\n * Define se o label associado ao radio deve ser oculto.\n * Se definido como verdadeiro, o texto do label será oculto, mas o radio ainda estará visível e funcional.\n */\n @Prop({ reflect: true, mutable: true, attribute: 'has-hidden-label' }) hasHiddenLabel: boolean = false\n\n /**\n * Define o nome do radio, que é utilizado para agrupar radios em formulários e identificar o campo.\n * O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.\n */\n\n @Prop({ reflect: true }) name!: string\n\n /**\n * Texto descritivo exibido à direita do radio.\n * Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.\n */\n @Prop({ reflect: true }) label: string\n\n /**\n * Define o valor associado ao radio quando ele faz parte de um formulário nativo (`<form>`).\n * Esse valor é enviado com o formulário quando o radio está selecionado.\n * **Nota:** Esta propriedade não deve ser utilizada para determinar se o radio está selecionado; para verificar o estado de seleção, use a propriedade `checked`.\n */\n @Prop({ reflect: true }) value: any\n\n /**\n * Especifica o ID do componente, que é usado para conectar o label correspondente ao radio.\n * Se não for fornecido, o ID será o mesmo valor atribuído à propriedade `name`.\n */\n @Prop({ reflect: true, attribute: 'id' }) customId: string\n\n /**\n * Indica se o radio pode alternar seu estado checked\n */\n @Prop({ reflect: true }) toggle: boolean = false\n\n /**\n * Propriedade que vai guardar o valor da validação do slot\n */\n @State() _slotDefault: boolean = false\n\n /**\n * Propriedade que controla e estado checked do radio\n */\n @State() isChecked: boolean = false\n\n /**\n * Emite um evento quando o componente é conectado ao DOM.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n */\n @Event() brDidConnect: EventEmitter<void>\n connectedCallback() {\n this.brDidConnect.emit()\n }\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.isChecked = this.checked\n this.hasSlotContentDefault()\n this.brWillLoad.emit()\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n /**\n * Emite um evento após o componente ter sido carregado pela primeira vez.\n * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n */\n @Event() brDidLoad: EventEmitter<void>\n componentDidLoad() {\n this.brDidLoad.emit()\n }\n\n /**\n * Emite um evento antes do componente ser renderizado.\n * Utilize este evento para preparar o componente antes de sua renderização.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n */\n @Event() brWillRender: EventEmitter<void>\n componentWillRender() {\n this.brWillRender.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido renderizado.\n * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n */\n @Event() brDidRender: EventEmitter<void>\n componentDidRender() {\n this.brDidRender.emit()\n }\n\n /**\n * Emite um evento para indicar se o componente deve ser atualizado ou não.\n * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n */\n @Event() brShouldUpdate: EventEmitter<void>\n componentShouldUpdate() {\n this.brShouldUpdate.emit()\n }\n\n /**\n * Emite um evento antes de o componente ser atualizado.\n * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n */\n @Event() brWillUpdate: EventEmitter<void>\n componentWillUpdate() {\n this.brWillUpdate.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido atualizado.\n * Utilize este evento para realizar ações após a atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n */\n @Event() brDidUpdate: EventEmitter<void>\n componentDidUpdate() {\n this.brDidUpdate.emit()\n }\n\n /**\n * Emite um evento quando o componente é desconectado do DOM.\n * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n */\n @Event() brDidDisconnect: EventEmitter<void>\n disconnectedCallback() {\n this.brDidDisconnect.emit()\n }\n\n /**\n * Emite um evento quando o componente é associado ou removido de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n *\n * @param form - Dados do formulário associado.\n */\n @Event() brFormAssociatedCallback: EventEmitter<FormData>\n formAssociatedCallback(form: FormData) {\n this.brFormAssociatedCallback.emit(form)\n }\n\n /**\n * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n *\n * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n */\n @Event() brFormDisabledCallback: EventEmitter<boolean>\n formDisabledCallback(disabled: boolean) {\n this.brFormDisabledCallback.emit(disabled)\n }\n\n /**\n * Emite um evento quando um `<form>` é resetado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n */\n @Event() brFormResetCallback: EventEmitter<void>\n formResetCallback() {\n this.brFormResetCallback.emit()\n }\n\n /**\n * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n *\n * @param state - Estado restaurado do formulário.\n * @param _mode - Modo de preenchimento automático do navegador.\n */\n @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n formStateRestoreCallback(state: string, _mode: string) {\n this.brFormStateRestoreCallback.emit([state, _mode])\n }\n\n private hasSlotContentDefault(): any {\n this._slotDefault = this.el.innerHTML !== ''\n }\n\n private getCssClassMap(): CssClassMap {\n return {\n 'br-radio': true,\n valid: this.state === 'valid',\n invalid: this.state === 'invalid',\n disabled: this.disabled,\n 'hidden-label': this.hasHiddenLabel,\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n /**\n * Componente teve seu estado \"checked\" alterado\n */\n @Event() brDidCheckedChange: EventEmitter<{ value: boolean; checked: boolean }>\n\n @Method()\n /**\n * Handler para o evento \"onClick\"\n */\n async handleClick() {\n this.toggleChecked()\n }\n\n @Method()\n /**\n * Handler para o evento \"onKeyDown\"\n */\n async handleKeyDown(event: KeyboardEvent) {\n // Permite alternar o estado apenas quando a tecla pressionada é 'Space'\n if (event.code === 'Space') {\n event.preventDefault() // Impede o comportamento padrão da tecla 'Space'\n this.toggleChecked()\n }\n }\n\n /**\n * Controla o comportamento de alternar o estado checked.\n */\n private toggleChecked() {\n if (this.toggle) {\n this.isChecked = !this.isChecked\n this.brDidCheckedChange.emit({ value: this.value, checked: this.isChecked })\n }\n }\n\n /**\n * Determina um id para o radio.\n */\n private getComputedId(): string {\n return this.customId ? this.customId : this.name\n }\n\n render() {\n return (\n <Host aria-disabled={this.disabled ? 'true' : null}>\n <div\n class={this.getCssClassMap()}\n onClick={() => this.handleClick()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n <input\n aria-label={this.label}\n type=\"radio\"\n id={this.getComputedId()}\n name={this.name}\n checked={this.isChecked}\n disabled={this.disabled}\n value={this.value}\n onClick={(event) => event.stopPropagation()}\n {...this.inheritedAttributes}\n />\n <label htmlFor={this.getComputedId()}>{this._slotDefault ? <slot></slot> : this.label}</label>\n </div>\n </Host>\n )\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/radio?tab=designer).\n *\n * @slot default - O texto descritivo pode ser passado por propriedade (label) ou por slot.\n */\n\n@Component({\n tag: 'br-radio',\n styleUrl: 'radio.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Radio {\n /**\n * Referência ao elemento host do componente.\n * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n */\n @Element() el: HTMLInputElement\n\n @AttachInternals() elementInternals: ElementInternals\n\n /**\n * Define o estado de seleção do radio.\n * Se definido como verdadeiro, o radio estará marcado. Caso contrário, estará desmarcado.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false\n\n /**\n * Desativa o radio, tornando-o não interativo.\n */\n @Prop({ reflect: true }) disabled: boolean = false\n\n /**\n * Indica a validade do radio.\n * Valores possíveis:\n * - 'valid': O radio é considerado válido.\n * - 'invalid': O radio é considerado inválido.\n * Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.\n */\n @Prop({ reflect: true }) state: 'valid' | 'invalid' = null\n\n /**\n * Define se o label associado ao radio deve ser oculto.\n * Se definido como verdadeiro, o texto do label será oculto, mas o radio ainda estará visível e funcional.\n */\n @Prop({ reflect: true, mutable: true, attribute: 'has-hidden-label' }) hasHiddenLabel: boolean = false\n\n /**\n * Define o nome do radio, que é utilizado para agrupar radios em formulários e identificar o campo.\n * O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.\n */\n\n @Prop({ reflect: true }) name!: string\n\n /**\n * Texto descritivo exibido à direita do radio.\n * Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.\n */\n @Prop({ reflect: true }) label: string\n\n /**\n * Define o valor associado ao radio quando ele faz parte de um formulário nativo (`<form>`).\n * Esse valor é enviado com o formulário quando o radio está selecionado.\n * **Nota:** Esta propriedade não deve ser utilizada para determinar se o radio está selecionado; para verificar o estado de seleção, use a propriedade `checked`.\n */\n @Prop({ reflect: true }) value: any\n\n /**\n * Especifica o ID do componente, que é usado para conectar o label correspondente ao radio.\n * Se não for fornecido, o ID será o mesmo valor atribuído à propriedade `name`.\n */\n @Prop({ reflect: true, attribute: 'id' }) customId: string\n\n /**\n * Indica se o radio pode alternar seu estado checked\n */\n @Prop({ reflect: true }) toggle: boolean = false\n\n /**\n * Propriedade que vai guardar o valor da validação do slot\n */\n @State() _slotDefault: boolean = false\n\n // Faz a marcação do checkbox de acordo com a seleção do componente item do tipo is-interactive\n @Listen('brDidSelect', { target: 'document' })\n handleItemInteractiveSelect(event: CustomEvent) {\n\n // Verifica se o evento é de um pai correto\n const target = event.target as HTMLElement;\n const brItem = target.closest('br-item') as HTMLElement;\n\n if (brItem && this.el.parentElement?.contains(brItem)) {\n this.checked = event.detail.selected;\n }\n\n event.stopPropagation();\n }\n\n /**\n * Emite um evento quando o componente é conectado ao DOM.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n */\n @Event() brDidConnect: EventEmitter<void>\n connectedCallback() {\n this.brDidConnect.emit()\n }\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.hasSlotContentDefault()\n this.brWillLoad.emit()\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n /**\n * Emite um evento após o componente ter sido carregado pela primeira vez.\n * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n */\n @Event() brDidLoad: EventEmitter<void>\n componentDidLoad() {\n this.brDidLoad.emit()\n }\n\n /**\n * Emite um evento antes do componente ser renderizado.\n * Utilize este evento para preparar o componente antes de sua renderização.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n */\n @Event() brWillRender: EventEmitter<void>\n componentWillRender() {\n this.brWillRender.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido renderizado.\n * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n */\n @Event() brDidRender: EventEmitter<void>\n componentDidRender() {\n this.brDidRender.emit()\n }\n\n /**\n * Emite um evento para indicar se o componente deve ser atualizado ou não.\n * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n */\n @Event() brShouldUpdate: EventEmitter<void>\n componentShouldUpdate() {\n this.brShouldUpdate.emit()\n }\n\n /**\n * Emite um evento antes de o componente ser atualizado.\n * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n */\n @Event() brWillUpdate: EventEmitter<void>\n componentWillUpdate() {\n this.brWillUpdate.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido atualizado.\n * Utilize este evento para realizar ações após a atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n */\n @Event() brDidUpdate: EventEmitter<void>\n componentDidUpdate() {\n this.brDidUpdate.emit()\n }\n\n /**\n * Emite um evento quando o componente é desconectado do DOM.\n * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n */\n @Event() brDidDisconnect: EventEmitter<void>\n disconnectedCallback() {\n this.brDidDisconnect.emit()\n }\n\n /**\n * Emite um evento quando o componente é associado ou removido de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n *\n * @param form - Dados do formulário associado.\n */\n @Event() brFormAssociatedCallback: EventEmitter<FormData>\n formAssociatedCallback(form: FormData) {\n this.brFormAssociatedCallback.emit(form)\n }\n\n /**\n * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n *\n * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n */\n @Event() brFormDisabledCallback: EventEmitter<boolean>\n formDisabledCallback(disabled: boolean) {\n this.brFormDisabledCallback.emit(disabled)\n }\n\n /**\n * Emite um evento quando um `<form>` é resetado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n */\n @Event() brFormResetCallback: EventEmitter<void>\n formResetCallback() {\n this.brFormResetCallback.emit()\n }\n\n /**\n * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n *\n * @param state - Estado restaurado do formulário.\n * @param _mode - Modo de preenchimento automático do navegador.\n */\n @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n formStateRestoreCallback(state: string, _mode: string) {\n this.brFormStateRestoreCallback.emit([state, _mode])\n }\n\n private hasSlotContentDefault(): any {\n this._slotDefault = this.el.innerHTML !== ''\n }\n\n private getCssClassMap(): CssClassMap {\n return {\n 'br-radio': true,\n valid: this.state === 'valid',\n invalid: this.state === 'invalid',\n disabled: this.disabled,\n 'hidden-label': this.hasHiddenLabel,\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n /**\n * Componente teve seu estado \"checked\" alterado\n */\n @Event() brDidCheckedChange: EventEmitter<{ value: boolean; checked: boolean }>\n\n @Method()\n /**\n * Handler para o evento \"onClick\"\n */\n async handleClick() {\n this.toggleChecked()\n }\n\n @Method()\n /**\n * Handler para o evento \"onKeyDown\"\n */\n async handleKeyDown(event: KeyboardEvent) {\n // Permite alternar o estado apenas quando a tecla pressionada é 'Space'\n if (event.code === 'Space') {\n event.preventDefault() // Impede o comportamento padrão da tecla 'Space'\n this.toggleChecked()\n }\n }\n\n /**\n * Controla o comportamento de alternar o estado checked.\n */\n private toggleChecked() {\n if (this.toggle) {\n this.checked = !this.checked\n this.brDidCheckedChange.emit({ value: this.value, checked: this.checked })\n }\n }\n\n /**\n * Determina um id para o radio.\n */\n private getComputedId(): string {\n return this.customId ? this.customId : this.name\n }\n\n render() {\n return (\n <Host aria-disabled={this.disabled ? 'true' : null}>\n <div\n class={this.getCssClassMap()}\n onClick={() => this.handleClick()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n <input\n aria-label={this.label}\n type=\"radio\"\n id={this.getComputedId()}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n onClick={(event) => event.stopPropagation()}\n {...this.inheritedAttributes}\n />\n <label htmlFor={this.getComputedId()}>{this._slotDefault ? <slot></slot> : this.label}</label>\n </div>\n </Host>\n )\n }\n}\n"]}
|