@govbr-ds/webcomponents 2.1.1 → 2.1.2
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/README.md +0 -11
- package/cem/custom-elements.json +209 -8
- package/dist/cjs/br-cookiebar-link.cjs.entry.js +2 -1
- package/dist/cjs/br-date-picker_3.cjs.entry.js +2 -1
- package/dist/cjs/br-datetime-picker.cjs.entry.js +1 -2
- package/dist/cjs/br-dropdown_2.cjs.entry.js +252 -108
- package/dist/cjs/br-header-logo.cjs.entry.js +2 -1
- package/dist/cjs/br-icon.cjs.entry.js +1 -1
- package/dist/cjs/br-item.cjs.entry.js +25 -14
- package/dist/cjs/br-link.cjs.entry.js +2 -1
- package/dist/cjs/br-magic-button.cjs.entry.js +2 -1
- package/dist/cjs/br-menu-link.cjs.entry.js +2 -1
- package/dist/cjs/br-select-input_3.cjs.entry.js +45 -11
- package/dist/cjs/br-sign-in.cjs.entry.js +2 -1
- package/dist/cjs/br-slider.cjs.entry.js +1 -2
- package/dist/cjs/br-tag.cjs.entry.js +2 -3
- package/dist/cjs/br-upload.cjs.entry.js +2 -3
- package/dist/cjs/index-CRdcutym.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/webcomponents.cjs.js +1 -1
- package/dist/collection/components/cookiebar/cookiebar-link/cookiebar-link.js +2 -1
- package/dist/collection/components/datetime-picker/datetime-input/datetime-input.js +2 -1
- package/dist/collection/components/datetime-picker/datetime-picker.js +1 -2
- package/dist/collection/components/header/header-logo/header-logo.js +2 -1
- package/dist/collection/components/icon/icon.js +1 -1
- package/dist/collection/components/item/item.js +25 -14
- package/dist/collection/components/link/link.js +2 -1
- package/dist/collection/components/magic-button/magic-button.js +2 -1
- package/dist/collection/components/menu/menu-link/menu-link.js +2 -1
- package/dist/collection/components/select/select-input/select-input.js +2 -1
- package/dist/collection/components/select/select-list/select-list.js +17 -5
- package/dist/collection/components/select/select-option/select-option.js +28 -7
- package/dist/collection/components/select/select.js +226 -109
- package/dist/collection/components/select/select.utils.js +34 -0
- package/dist/collection/components/sign-in/sign-in.js +2 -1
- package/dist/collection/components/slider/slider.js +1 -2
- package/dist/collection/components/tag/tag.js +2 -3
- package/dist/collection/components/upload/upload.js +2 -3
- package/dist/collection/pages/scripts/component-controls.js +13 -4
- package/dist/collection/pages/scripts/menu.js +11 -2
- package/dist/collection/pages/scripts/pageLoader.js +3 -1
- package/dist/components/br-avatar.js +1 -1
- package/dist/components/br-breadcrumb.js +1 -1
- package/dist/components/br-carousel.js +1 -1
- package/dist/components/br-checkbox-group.js +1 -1
- package/dist/components/br-checkbox.js +1 -1
- package/dist/components/br-checkgroup.js +1 -1
- package/dist/components/br-collapse.js +1 -1
- package/dist/components/br-cookiebar-cookie.js +1 -1
- package/dist/components/br-cookiebar-group.js +1 -1
- package/dist/components/br-cookiebar-link.js +1 -1
- package/dist/components/br-cookiebar-note-group.js +1 -1
- package/dist/components/br-cookiebar.js +1 -1
- package/dist/components/br-date-picker.js +1 -1
- package/dist/components/br-datetime-input.js +1 -1
- package/dist/components/br-datetime-picker.js +1 -1
- package/dist/components/br-dropdown.js +1 -1
- package/dist/components/br-footer-category.js +1 -1
- package/dist/components/br-footer-item.js +1 -1
- package/dist/components/br-footer-social.js +1 -1
- package/dist/components/br-header-function.js +1 -1
- package/dist/components/br-header-link.js +1 -1
- package/dist/components/br-header-list.js +1 -1
- package/dist/components/br-header-logo.js +1 -1
- package/dist/components/br-header.js +1 -1
- package/dist/components/br-icon.js +1 -1
- package/dist/components/br-input.js +1 -1
- package/dist/components/br-item.js +1 -1
- package/dist/components/br-link.js +1 -1
- package/dist/components/br-list.js +1 -1
- package/dist/components/br-magic-button.js +1 -1
- package/dist/components/br-menu-header.js +1 -1
- package/dist/components/br-menu-item.js +1 -1
- package/dist/components/br-menu-link.js +1 -1
- package/dist/components/br-menu-list.js +1 -1
- package/dist/components/br-menu-social.js +1 -1
- package/dist/components/br-menu.js +1 -1
- package/dist/components/br-message.js +1 -1
- package/dist/components/br-modal.js +1 -1
- package/dist/components/br-notification-header.js +1 -1
- package/dist/components/br-notification-item.js +1 -1
- package/dist/components/br-pagination.js +1 -1
- package/dist/components/br-radio-group.js +1 -1
- package/dist/components/br-radio.js +1 -1
- package/dist/components/br-select-input.js +1 -1
- package/dist/components/br-select-list.js +1 -1
- package/dist/components/br-select-option.js +1 -1
- package/dist/components/br-select.js +1 -1
- package/dist/components/br-sign-in.js +1 -1
- package/dist/components/br-skip-link-item.js +1 -1
- package/dist/components/br-skip-link.js +1 -1
- package/dist/components/br-skiplink-item.js +1 -1
- package/dist/components/br-slider.js +1 -1
- package/dist/components/br-step-item.js +1 -1
- package/dist/components/br-switch.js +1 -1
- package/dist/components/br-tab.js +1 -1
- package/dist/components/br-table-cell.js +1 -1
- package/dist/components/br-table-header-cell.js +1 -1
- package/dist/components/br-tag.js +1 -1
- package/dist/components/br-textarea.js +1 -1
- package/dist/components/br-time-picker.js +1 -1
- package/dist/components/br-tooltip.js +1 -1
- package/dist/components/br-upload.js +1 -1
- package/dist/components/br-wizard.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{p-0IYmyaTi.js → p-34Jfn-U-.js} +1 -1
- package/dist/components/{p-41XwlWiS.js → p-B7Amgxkp.js} +1 -1
- package/dist/components/p-BKuMQJrQ.js +5 -0
- package/dist/components/{p-LmeJrLxH.js → p-BeE7R9nu.js} +1 -1
- package/dist/components/{p-C98-mHmV.js → p-Bo0QYHJO.js} +1 -1
- package/dist/components/{p-DYnkGWii.js → p-C2i2c_io.js} +1 -1
- package/dist/components/p-C7v0lVlX.js +5 -0
- package/dist/components/{p-D_CSvOY9.js → p-CMBsvswx.js} +1 -1
- package/dist/components/{p-Dkg2scYZ.js → p-CRrimdz6.js} +1 -1
- package/dist/components/{p-Bm0ECvfB.js → p-CWORw84-.js} +1 -1
- package/dist/components/p-CvUMXJCl.js +5 -0
- package/dist/components/{p-nJOJGpyl.js → p-DFUKDNck.js} +1 -1
- package/dist/components/p-DHicj0By.js +5 -0
- package/dist/components/{p-B-sbd1_h.js → p-DXjQyH6s.js} +1 -1
- package/dist/components/p-DmCxdB9P.js +5 -0
- package/dist/components/{p-DoXNfcTT.js → p-Dp0xy_3n.js} +1 -1
- package/dist/components/{p-DaeGwqw0.js → p-JAkkThgf.js} +1 -1
- package/dist/components/{p-aF8bGN3t.js → p-Ud-WB0hx.js} +1 -1
- package/dist/components/p-fpMNttbg.js +5 -0
- package/dist/components/{p-D9SpD3Ay.js → p-qYONSNcf.js} +1 -1
- package/dist/components/{p-CDZFuUlU.js → p-qhhHGJY1.js} +1 -1
- package/dist/components/p-ukNmfGNP.js +5 -0
- package/dist/components/p-xa8e1kSW.js +5 -0
- package/dist/esm/br-cookiebar-link.entry.js +2 -1
- package/dist/esm/br-date-picker_3.entry.js +2 -1
- package/dist/esm/br-datetime-picker.entry.js +1 -2
- package/dist/esm/br-dropdown_2.entry.js +252 -108
- package/dist/esm/br-header-logo.entry.js +2 -1
- package/dist/esm/br-icon.entry.js +1 -1
- package/dist/esm/br-item.entry.js +25 -14
- package/dist/esm/br-link.entry.js +2 -1
- package/dist/esm/br-magic-button.entry.js +2 -1
- package/dist/esm/br-menu-link.entry.js +2 -1
- package/dist/esm/br-select-input_3.entry.js +45 -11
- package/dist/esm/br-sign-in.entry.js +2 -1
- package/dist/esm/br-slider.entry.js +1 -2
- package/dist/esm/br-tag.entry.js +2 -3
- package/dist/esm/br-upload.entry.js +2 -3
- package/dist/esm/index-C2RBydfd.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/webcomponents.js +1 -1
- package/dist/hydrate/index.js +356 -163
- package/dist/hydrate/index.mjs +356 -163
- package/dist/types/components/item/item.d.ts +1 -0
- package/dist/types/components/select/select-list/select-list.d.ts +1 -0
- package/dist/types/components/select/select-option/select-option.d.ts +1 -0
- package/dist/types/components/select/select.d.ts +14 -0
- package/dist/types/components/select/select.types.d.ts +2 -0
- package/dist/types/components/select/select.utils.d.ts +13 -0
- package/dist/webcomponents/p-0777c7b1.entry.js +5 -0
- package/dist/webcomponents/p-18ee6175.entry.js +5 -0
- package/dist/webcomponents/p-1c303a4e.entry.js +5 -0
- package/dist/webcomponents/{p-60cc820c.entry.js → p-4c13221a.entry.js} +1 -1
- package/dist/webcomponents/p-51ce2c31.entry.js +5 -0
- package/dist/webcomponents/p-83ff4579.entry.js +5 -0
- package/dist/webcomponents/p-8e819355.entry.js +5 -0
- package/dist/webcomponents/p-92a9b9c4.entry.js +5 -0
- package/dist/webcomponents/p-a4ae72e3.entry.js +5 -0
- package/dist/webcomponents/p-a994c190.entry.js +5 -0
- package/dist/webcomponents/p-c949d993.entry.js +5 -0
- package/dist/webcomponents/p-f26038e2.entry.js +5 -0
- package/dist/webcomponents/{p-4fe12a72.entry.js → p-f303f6b3.entry.js} +1 -1
- package/dist/webcomponents/p-f85ee01c.entry.js +5 -0
- package/dist/webcomponents/{p-5b257a4b.entry.js → p-ffe0241e.entry.js} +1 -1
- package/dist/webcomponents/webcomponents.esm.js +1 -1
- package/package.json +3 -7
- package/dist/components/p-BW0_ORNA.js +0 -5
- package/dist/components/p-C3LQSQpc.js +0 -5
- package/dist/components/p-CRfi23Rd.js +0 -5
- package/dist/components/p-CUI5zWGf.js +0 -5
- package/dist/components/p-CxviDiCr.js +0 -5
- package/dist/components/p-DvrdmqoQ.js +0 -5
- package/dist/components/p-TFWd_UBV.js +0 -5
- package/dist/components/p-cfPt-vKA.js +0 -5
- package/dist/webcomponents/p-059c3d6c.entry.js +0 -5
- package/dist/webcomponents/p-0b8f39bc.entry.js +0 -5
- package/dist/webcomponents/p-1b138f1c.entry.js +0 -5
- package/dist/webcomponents/p-22443c08.entry.js +0 -5
- package/dist/webcomponents/p-6c5f6cb6.entry.js +0 -5
- package/dist/webcomponents/p-6f1c4425.entry.js +0 -5
- package/dist/webcomponents/p-7cf9f4e5.entry.js +0 -5
- package/dist/webcomponents/p-7e1856e4.entry.js +0 -5
- package/dist/webcomponents/p-bba9fc09.entry.js +0 -5
- package/dist/webcomponents/p-cedb8eea.entry.js +0 -5
- package/dist/webcomponents/p-dba376cb.entry.js +0 -5
- package/dist/webcomponents/p-e80a1eb0.entry.js +0 -5
|
@@ -122,6 +122,7 @@ const Item = class {
|
|
|
122
122
|
this.activate();
|
|
123
123
|
}
|
|
124
124
|
};
|
|
125
|
+
// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: mantém em uma transação os modos standalone, controlado, radio e checkbox.
|
|
125
126
|
this.handleClick = (event) => {
|
|
126
127
|
if (this.disabled) {
|
|
127
128
|
event.preventDefault();
|
|
@@ -153,14 +154,17 @@ const Item = class {
|
|
|
153
154
|
}
|
|
154
155
|
else {
|
|
155
156
|
// Armazena o estado anterior para emitir o evento apenas se houver mudança.
|
|
156
|
-
const previousSelectedValue = this.selectedValue;
|
|
157
|
-
|
|
158
|
-
if (
|
|
159
|
-
|
|
157
|
+
const previousSelectedValue = this.hasControlledSelection ? Boolean(this.selected) : this.selectedValue;
|
|
158
|
+
const nextSelected = !previousSelectedValue;
|
|
159
|
+
if (!this.hasControlledSelection)
|
|
160
|
+
this.selectedValue = nextSelected;
|
|
161
|
+
if (previousSelectedValue !== nextSelected) {
|
|
162
|
+
const detail = { selected: nextSelected };
|
|
160
163
|
this.brDidSelect.emit(detail);
|
|
161
164
|
this.brItemSelect.emit(detail);
|
|
162
165
|
}
|
|
163
|
-
this.
|
|
166
|
+
if (!this.hasControlledSelection)
|
|
167
|
+
this.updateCheckboxes();
|
|
164
168
|
}
|
|
165
169
|
}
|
|
166
170
|
event.stopPropagation();
|
|
@@ -224,7 +228,6 @@ const Item = class {
|
|
|
224
228
|
*/
|
|
225
229
|
async setFocus() {
|
|
226
230
|
this.el?.focus();
|
|
227
|
-
this.focusableElement?.focus();
|
|
228
231
|
}
|
|
229
232
|
/**
|
|
230
233
|
* Define o tabIndex do elemento interno.
|
|
@@ -240,6 +243,9 @@ const Item = class {
|
|
|
240
243
|
get effectiveSelected() {
|
|
241
244
|
return this.selected ?? this.isSelected;
|
|
242
245
|
}
|
|
246
|
+
get hasControlledSelection() {
|
|
247
|
+
return this.selected !== undefined;
|
|
248
|
+
}
|
|
243
249
|
get effectiveInteractive() {
|
|
244
250
|
return (this.interactive ??
|
|
245
251
|
(this.isInteractive ||
|
|
@@ -262,7 +268,7 @@ const Item = class {
|
|
|
262
268
|
'br-item': true,
|
|
263
269
|
disabled: this.disabled,
|
|
264
270
|
active: this.effectiveActive,
|
|
265
|
-
selected: this.selectedValue,
|
|
271
|
+
selected: this.selected ?? this.selectedValue,
|
|
266
272
|
small: this.density === 'small',
|
|
267
273
|
medium: this.density === 'medium',
|
|
268
274
|
large: this.density === 'large',
|
|
@@ -292,21 +298,23 @@ const Item = class {
|
|
|
292
298
|
return {
|
|
293
299
|
...baseAttributes,
|
|
294
300
|
role: isInteractiveDiv ? 'button' : null,
|
|
295
|
-
'aria-pressed': isInteractiveDiv ? String(this.selectedValue) : null,
|
|
301
|
+
'aria-pressed': isInteractiveDiv ? String(this.selected ?? this.selectedValue) : null,
|
|
296
302
|
tabIndex: this.disabled || !isFocusableItem ? -1 : this.rovingTabIndex,
|
|
297
303
|
'aria-disabled': this.disabled ? 'true' : null,
|
|
298
304
|
'aria-current': this.effectiveActive ? 'true' : null,
|
|
299
305
|
'data-toggle': this.effectiveInteractive ? 'selection' : null,
|
|
300
|
-
'is-selected': this.selectedValue ? true : null,
|
|
306
|
+
'is-selected': (this.selected ?? this.selectedValue) ? true : null,
|
|
301
307
|
};
|
|
302
308
|
}
|
|
303
309
|
updateCheckboxSelectionState(emitEvent = true) {
|
|
304
310
|
if (this.hasRadios)
|
|
305
311
|
return;
|
|
306
312
|
const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));
|
|
307
|
-
|
|
313
|
+
const nextSelected = checkboxes.some((checkbox) => checkbox.checked);
|
|
314
|
+
if (!this.hasControlledSelection)
|
|
315
|
+
this.selectedValue = nextSelected;
|
|
308
316
|
if (emitEvent && this.effectiveInteractive) {
|
|
309
|
-
const detail = { selected:
|
|
317
|
+
const detail = { selected: nextSelected };
|
|
310
318
|
this.brDidSelect.emit(detail);
|
|
311
319
|
this.brItemSelect.emit(detail);
|
|
312
320
|
}
|
|
@@ -315,9 +323,11 @@ const Item = class {
|
|
|
315
323
|
if (!this.hasRadios)
|
|
316
324
|
return;
|
|
317
325
|
const radios = Array.from(this.el.querySelectorAll('br-radio'));
|
|
318
|
-
|
|
326
|
+
const nextSelected = radios.some((radio) => radio.checked);
|
|
327
|
+
if (!this.hasControlledSelection)
|
|
328
|
+
this.selectedValue = nextSelected;
|
|
319
329
|
if (emitEvent && this.effectiveInteractive) {
|
|
320
|
-
const detail = { selected:
|
|
330
|
+
const detail = { selected: nextSelected };
|
|
321
331
|
this.brDidSelect.emit(detail);
|
|
322
332
|
this.brItemSelect.emit(detail);
|
|
323
333
|
}
|
|
@@ -337,8 +347,9 @@ const Item = class {
|
|
|
337
347
|
const TagType = this.getTagType();
|
|
338
348
|
const attributes = this.getAttributes();
|
|
339
349
|
const classList = this.getCssClassMap();
|
|
340
|
-
return (h(Host, { key: '
|
|
350
|
+
return (h(Host, { key: '0c2e8ad9198db23ff1c43bc1a48cabe478f4d207', tabindex: this.isInteractive || this.effectiveInteractive ? (this.disabled ? -1 : 0) : undefined }, h(TagType, { key: 'd88d1732106bba4167118f16f2a27fdf3cf0f660', class: classList, ...attributes, tabindex: this.isInteractive || this.effectiveInteractive ? (this.disabled ? -1 : 0) : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown, id: this.customId, ref: (el) => (this.focusableElement = el), onMouseDown: this.handleMouseDown, part: "item" }, this.hasSlotStart || this.hasSlotEnd ? (h("div", { class: "row align-items-center" }, this.hasSlotStart && (h("div", { class: "col-auto" }, h("slot", { name: "start" }))), h("div", { class: "col" }, h("slot", null)), this.hasSlotEnd && (h("div", { class: "col-auto" }, h("slot", { name: "end" }))))) : (h("slot", null)))));
|
|
341
351
|
}
|
|
352
|
+
static get delegatesFocus() { return true; }
|
|
342
353
|
get el() { return getElement(this); }
|
|
343
354
|
static get watchers() { return {
|
|
344
355
|
"isSelected": [{
|
|
@@ -116,8 +116,9 @@ const Link = class {
|
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
render() {
|
|
119
|
-
return (h(Host, { key: '
|
|
119
|
+
return (h(Host, { key: '3a2d7f49bfafc65412524d38a964a713ee1fe526' }, h("a", { key: 'eddc87987df0418b5fdde03b39cadbc2db73762b', part: "anchor", class: { 'br-button': this.button }, href: this.disabled ? undefined : this.href, target: this.target, rel: this.getRel(), download: this.download, hreflang: this.hreflang, referrerPolicy: this.referrerPolicy, type: this.type, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, ...this.getAnchorAttrs() }, h("slot", { key: '74ece0d935b97cb91fd9d8df789f709dc3c5068d' }))));
|
|
120
120
|
}
|
|
121
|
+
static get delegatesFocus() { return true; }
|
|
121
122
|
get el() { return getElement(this); }
|
|
122
123
|
static get watchers() { return {
|
|
123
124
|
"disabled": [{
|
|
@@ -81,8 +81,9 @@ const MagicButton = class {
|
|
|
81
81
|
*/
|
|
82
82
|
render() {
|
|
83
83
|
const effectiveAriaLabel = this.ariaLabel || this.label || (this.icon ? `Botão com ícone ${this.icon}` : 'Botão');
|
|
84
|
-
return (h(Host, { key: '
|
|
84
|
+
return (h(Host, { key: '0eec103c783b1ad5d02b3e5605b150e467dbb782', id: this.customId }, h("div", { key: '53dae45267a14d4785b630dd4892277e3e869f37', class: this.getCssClassMap(), part: "container" }, h("button", { key: 'f3e72b2e22d67473a9879c5bb6ba4912cca15be0', class: { 'br-button': true, ...this.getCircleClass() }, type: "button", "aria-label": effectiveAriaLabel, part: "button" }, this.icon && (h("slot", { key: '409abad9354040b75650c0b104963c945601114c', name: "icon" }, h("icon-base", { key: '5e8024b8568e054b8f6974bc5421db7990524c52', "attr:iconName": this.icon, class: this.getLabelIconClass() }))), this.label || h("slot", { key: '6c2ccb7672ae15f36d02ec8036f047b31e716e9e' })))));
|
|
85
85
|
}
|
|
86
|
+
static get delegatesFocus() { return true; }
|
|
86
87
|
get el() { return getElement(this); }
|
|
87
88
|
};
|
|
88
89
|
MagicButton.style = magicButtonCss();
|
|
@@ -44,8 +44,9 @@ const MenuLink = class {
|
|
|
44
44
|
};
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
|
-
return (h(Host, { key: '
|
|
47
|
+
return (h(Host, { key: '6c4c305cc78db8d5f5493f6b00884a475325aabd' }, h("a", { key: 'd47a7f201e03bf6f6b0fd6fccce39db183d43765', href: this.href, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: this.handleClick, part: "link" }, h("slot", { key: '8dca721902edbea3a7b6cd80779ec37032d78005', name: "url" }, h("span", { key: 'c199d67e8dd3cec1e909a3b0d1f6506f00b29196', class: "mr-1" }, this.label ?? this.titulo)), h("slot", { key: 'e7d1b3288faaf9af7921e11ba277ac79243b50d5', name: "icon" }, h("br-icon", { key: '49e8a907a204059d40342b968bc27cb9481acd99', iconName: "fa6-solid:square-arrow-up-right", width: "12", height: "12", "aria-hidden": "true" })))));
|
|
48
48
|
}
|
|
49
|
+
static get delegatesFocus() { return true; }
|
|
49
50
|
get el() { return getElement(this); }
|
|
50
51
|
};
|
|
51
52
|
MenuLink.style = menuLinkCss();
|
|
@@ -115,10 +115,11 @@ const SelectInput = class {
|
|
|
115
115
|
return (h("br-icon", { "aria-hidden": "true", iconName: this.flipped ? 'fa-solid:angle-up' : 'fa-solid:angle-down', width: "16", height: "16", slot: "action" }));
|
|
116
116
|
}
|
|
117
117
|
render() {
|
|
118
|
-
return (h(Host, { key: '
|
|
118
|
+
return (h(Host, { key: 'be737b653173bc2a31e9065989dbe44c2bdac4a7' }, h("div", { key: 'c2b733eb6a3973f50788019f86360b0000df9f34', class: this.getCssClassMap(), part: "container" }, h("br-input", { key: '72882f4a77405e2a0bf04523d0dbf36a6a4e855d', "action-tab-index": -1, "action-label": this.flipped ? 'Fechar opções' : 'Abrir opções', autocomplete: this.autocomplete, borderless: this.borderless, "control-width": this.inputWidth, readonly: !this.filterable, "is-inline": this.isInline, label: this.label, name: this.name, placeholder: this.placeholder, required: this.required, ref: (el) => {
|
|
119
119
|
this.inputElement = el;
|
|
120
120
|
}, value: this.value, disabled: this.disabled, onClick: this.handleClick, onInput: this.handleInput, onFocus: this.handleFocus, exportparts: "container:input, label:label, input:input, group:group, icon:icon, action:action, action-button:action-button" }, this.showSearchIcon && this.renderSearchIcon(), this.renderDropdownIcon()))));
|
|
121
121
|
}
|
|
122
|
+
static get delegatesFocus() { return true; }
|
|
122
123
|
static get formAssociated() { return true; }
|
|
123
124
|
get el() { return getElement(this); }
|
|
124
125
|
};
|
|
@@ -228,6 +229,8 @@ const SelectList = class {
|
|
|
228
229
|
this.options = this.syncSelectAllOption(this.options);
|
|
229
230
|
}
|
|
230
231
|
handleOptionStateChange(event) {
|
|
232
|
+
if (this.isControlledBySelect)
|
|
233
|
+
return;
|
|
231
234
|
const detail = event.detail;
|
|
232
235
|
if (!detail?.value)
|
|
233
236
|
return;
|
|
@@ -328,9 +331,15 @@ const SelectList = class {
|
|
|
328
331
|
*/
|
|
329
332
|
async setMultiple(isMultiple) {
|
|
330
333
|
this.isMultiple = isMultiple;
|
|
331
|
-
|
|
334
|
+
if (!this.isControlledBySelect)
|
|
335
|
+
this.options = this.normalizeOptionsForMode(this.options, isMultiple);
|
|
332
336
|
this.scheduleMeasureItemHeight();
|
|
333
337
|
}
|
|
338
|
+
get isControlledBySelect() {
|
|
339
|
+
const root = this.el.getRootNode();
|
|
340
|
+
const host = root.host;
|
|
341
|
+
return host?.tagName?.toLowerCase() === 'br-select';
|
|
342
|
+
}
|
|
334
343
|
/**
|
|
335
344
|
* Retorna uma cópia das opções atualmente controladas pela lista.
|
|
336
345
|
*
|
|
@@ -651,14 +660,18 @@ const SelectList = class {
|
|
|
651
660
|
renderOption(option, index) {
|
|
652
661
|
const rowHeight = this.getRowHeight();
|
|
653
662
|
const optionPart = this.isSelectAllOption(option) ? 'option select-all' : 'option';
|
|
654
|
-
return (h("br-select-option", { part: optionPart, active: index === this.activeOptionIndex, "data-option-index": index, disabled: option.disabled, id: `${this.el.id || 'br-select-list'}-option-${index}`, indeterminate: option.indeterminate,
|
|
663
|
+
return (h("br-select-option", { part: optionPart, active: index === this.activeOptionIndex, "data-option-index": index, disabled: option.disabled, id: `${this.el.id || 'br-select-list'}-option-${index}`, indeterminate: option.indeterminate,
|
|
664
|
+
// A seleção faz parte da identidade visual renderizada. Incluir o estado
|
|
665
|
+
// na chave evita que uma opção virtual reutilizada retenha o snapshot
|
|
666
|
+
// interno anterior do br-select-option/br-item.
|
|
667
|
+
key: `${option.value}:${option.selected ? 'selected' : 'unselected'}`, label: option.label, selected: option.selected, "show-checkbox": this.isMultiple, style: {
|
|
655
668
|
boxSizing: 'border-box',
|
|
656
669
|
height: `${rowHeight}px`,
|
|
657
670
|
position: 'absolute',
|
|
658
671
|
top: `${index * rowHeight}px`,
|
|
659
672
|
left: '0',
|
|
660
673
|
right: '0',
|
|
661
|
-
}, value: option.value }, option.label ?? option.value));
|
|
674
|
+
}, value: option.value }, option.content ? h("span", { innerHTML: option.content }) : (option.label ?? option.value)));
|
|
662
675
|
}
|
|
663
676
|
getVirtualScrollStyle() {
|
|
664
677
|
return {
|
|
@@ -692,7 +705,7 @@ const SelectList = class {
|
|
|
692
705
|
return (h("div", { part: "loading", role: "status", "aria-live": "polite" }, h("slot", { name: "loading" }, h("br-loading", { size: "small", label: "Buscando op\u00E7\u00F5es" }))));
|
|
693
706
|
}
|
|
694
707
|
render() {
|
|
695
|
-
return (h(Host, { key: '
|
|
708
|
+
return (h(Host, { key: '537c7f312573570953b24e27fed7188a052c4bd5' }, h("div", { key: 'aac978e5664c9dee21ba7a6763125fe7daf915d3', class: this.getCssClassMap(), part: "list", ref: (el) => (this.listElement = el), onScroll: this.handleScroll, style: this.getVirtualScrollStyle() }, this.loading ? this.renderLoading() : this.renderVirtualOptions())));
|
|
696
709
|
}
|
|
697
710
|
get el() { return getElement(this); }
|
|
698
711
|
static get watchers() { return {
|
|
@@ -784,7 +797,10 @@ const SelectOption = class {
|
|
|
784
797
|
if (this.isRedundantCheckboxReflection(event, current)) {
|
|
785
798
|
return;
|
|
786
799
|
}
|
|
787
|
-
this.
|
|
800
|
+
if (this.isControlledBySelect)
|
|
801
|
+
this.emitStateChange(current);
|
|
802
|
+
else
|
|
803
|
+
this.applySelection(current);
|
|
788
804
|
};
|
|
789
805
|
}
|
|
790
806
|
componentDidLoad() {
|
|
@@ -822,7 +838,11 @@ const SelectOption = class {
|
|
|
822
838
|
async setSelectedState(selected) {
|
|
823
839
|
if (this.disabled)
|
|
824
840
|
return;
|
|
825
|
-
|
|
841
|
+
const nextSelected = typeof selected === 'boolean' ? selected : !this.selected;
|
|
842
|
+
if (this.isControlledBySelect)
|
|
843
|
+
this.emitStateChange(nextSelected);
|
|
844
|
+
else
|
|
845
|
+
this.applySelection(nextSelected);
|
|
826
846
|
}
|
|
827
847
|
isRedundantCheckboxReflection(event, nextSelected) {
|
|
828
848
|
if (!event)
|
|
@@ -834,11 +854,11 @@ const SelectOption = class {
|
|
|
834
854
|
return false;
|
|
835
855
|
return Boolean(nextSelected) === Boolean(this.selected);
|
|
836
856
|
}
|
|
837
|
-
emitStateChange() {
|
|
857
|
+
emitStateChange(selected = this.selected) {
|
|
838
858
|
const detail = {
|
|
839
859
|
disabled: this.disabled,
|
|
840
860
|
indeterminate: this.indeterminate,
|
|
841
|
-
selected
|
|
861
|
+
selected,
|
|
842
862
|
value: this.getResolvedValue(),
|
|
843
863
|
label: this.getResolvedLabel(),
|
|
844
864
|
};
|
|
@@ -848,6 +868,20 @@ const SelectOption = class {
|
|
|
848
868
|
this.lastStateChangeKey = nextKey;
|
|
849
869
|
this.brSelectOptionStateChange.emit(detail);
|
|
850
870
|
}
|
|
871
|
+
get isControlledBySelect() {
|
|
872
|
+
if (this.el.closest('br-select'))
|
|
873
|
+
return true;
|
|
874
|
+
let node = this.el;
|
|
875
|
+
for (;;) {
|
|
876
|
+
const root = node.getRootNode();
|
|
877
|
+
const host = root.host;
|
|
878
|
+
if (!host)
|
|
879
|
+
return false;
|
|
880
|
+
if (host.tagName.toLowerCase() === 'br-select')
|
|
881
|
+
return true;
|
|
882
|
+
node = host;
|
|
883
|
+
}
|
|
884
|
+
}
|
|
851
885
|
/**
|
|
852
886
|
* Centraliza a transição de seleção para manter emissão e limpeza de estado consistentes.
|
|
853
887
|
*
|
|
@@ -914,7 +948,7 @@ const SelectOption = class {
|
|
|
914
948
|
return this.normalizeText(this.el.textContent || '');
|
|
915
949
|
}
|
|
916
950
|
render() {
|
|
917
|
-
return (h(Host, { key: '
|
|
951
|
+
return (h(Host, { key: '3b20b8766d73d6a862765fb890028e6ff7374d96', part: "option", exportparts: "checkbox:checkbox, checkbox:option-checkbox", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.selected ? 'true' : 'false', role: "option", onMouseEnter: () => {
|
|
918
952
|
this.el.dispatchEvent(new CustomEvent('brInternalSelectOptionHover', {
|
|
919
953
|
bubbles: true,
|
|
920
954
|
composed: true,
|
|
@@ -926,7 +960,7 @@ const SelectOption = class {
|
|
|
926
960
|
composed: true,
|
|
927
961
|
detail: { label: this.getResolvedLabel(), value: this.getResolvedValue() },
|
|
928
962
|
}));
|
|
929
|
-
} }, h("br-item", { key: '
|
|
963
|
+
} }, h("br-item", { key: '7b32b68bbc5541090e24d81e55602045bdbbba47', class: this.getCssClassMap(), disabled: this.disabled, active: this.active, selected: this.selected, "is-interactive": true, ref: (el) => (this.itemElement = el), onBrItemSelect: this.handleSelect }, this.showCheckbox && (h("br-checkbox", { key: 'fd5426e02e229eaaa8b22d457329cce6acf59e51', exportparts: "input:checkbox, input:option-checkbox", slot: "start", checked: this.selected, disabled: this.disabled, indeterminate: this.indeterminate, name: this.getResolvedValue(), onCheckedChange: this.handleSelect })), h("span", { key: '6185b2e6b60bf65059c321d4118d675859f9940e', class: "br-select-option-label" }, h("slot", { key: 'c78020a423fe1ed34ef39f46301f71baf5b0cbd8' }, this.getResolvedLabel())))));
|
|
930
964
|
}
|
|
931
965
|
static get formAssociated() { return true; }
|
|
932
966
|
get el() { return getElement(this); }
|
|
@@ -114,8 +114,9 @@ const SignIn = class {
|
|
|
114
114
|
const TagType = this.getTagType();
|
|
115
115
|
const attributes = this.getAttributes();
|
|
116
116
|
const classList = this.getCssClassMap();
|
|
117
|
-
return (h(Host, { key: '
|
|
117
|
+
return (h(Host, { key: 'bf39bac1bfe99859a67ef858ca441b55e3e74e88', "aria-disabled": this.disabled ? 'true' : null }, h(TagType, { key: 'b414dc1085f35a1058b8b8b5490c41380c3f696b', part: "button", class: classList, id: this.customId, ...attributes, onClick: this.handleClick, onFocus: this.handleFocus }, h("slot", { key: '3d33a278e13e90572c6b97dbe435b7a9e3823e38', name: "icon" }, this.shape === 'circle' && h("br-icon", { key: '3f8a31aac9196ffb6d5b6b99fa0077950fbe4b63', iconName: "fa6-solid:user", width: "12", height: "12" })), h("span", { key: 'e3247ad0b75f87c162beb26dffe3f1828f477191', part: "content" }, h("slot", { key: 'fa12d65243f404963e16e2e964b7d33c90055e6f' })), this.hasSlotContent('image') && (h("span", { key: '51922b0c8786fd2d96814c6a576222330d3b7c72', part: "image" }, h("slot", { key: 'b7052a2db95b25ec911ccd43fe70d0d0fc38ad9e', name: "image" }))))));
|
|
118
118
|
}
|
|
119
|
+
static get delegatesFocus() { return true; }
|
|
119
120
|
get el() { return getElement(this); }
|
|
120
121
|
};
|
|
121
122
|
SignIn.style = signInCss();
|
|
@@ -663,9 +663,8 @@ const Slider = class {
|
|
|
663
663
|
return (h("div", { class: "slider-tick-labels", part: "tick-labels", "aria-hidden": "true" }, intermediateTicks.map((value) => (h("span", { class: "slider-tick-label", part: "tick-label", style: this.effectiveVertical ? { bottom: `${this.percentOf(value)}%` } : { left: `${this.percentOf(value)}%` } }, value)))));
|
|
664
664
|
}
|
|
665
665
|
render() {
|
|
666
|
-
return (h(Host, { key: '
|
|
666
|
+
return (h(Host, { key: '26be711ad91a867e82e35d10e86508aa5af68557' }, h("div", { key: '906052510af8d3a323ea8274b339ba264b745e25', class: this.getCssClassMap(), part: "base" }, h("div", { key: '323ee79d4a4fc4d81e4a1b43c8fa6298d0f92916', class: "slider-layout", part: "layout" }, h("div", { key: '113e5114161144af0466997b47108eb0e053af8e', class: "slider-body", part: "body" }, this.renderTrack(), this.renderReferences()), this.renderInput())), h("div", { key: 'b8ce4c3cae026492ad1db1e03f5709988b42a13e', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: 'e2564e6830476cb3d495807f4b15d600f5c7146e', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.customValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.customValidationMessage || this.validatorMessage })) : null)));
|
|
667
667
|
}
|
|
668
|
-
static get delegatesFocus() { return true; }
|
|
669
668
|
static get formAssociated() { return true; }
|
|
670
669
|
get el() { return getElement(this); }
|
|
671
670
|
static get watchers() { return {
|
package/dist/esm/br-tag.entry.js
CHANGED
|
@@ -463,13 +463,12 @@ const Tag = class {
|
|
|
463
463
|
}
|
|
464
464
|
render() {
|
|
465
465
|
const mainContent = this.renderMainTagContent();
|
|
466
|
-
return (h(Host, { key: '
|
|
466
|
+
return (h(Host, { key: '91853c64b346742509a16691c73e85a17fd8f45c' }, this.effectiveSelectable
|
|
467
467
|
? this.renderInteractionSelectTag()
|
|
468
468
|
: this.effectiveStatus
|
|
469
469
|
? this.renderStatusLayout(mainContent)
|
|
470
|
-
: mainContent, h("div", { key: '
|
|
470
|
+
: mainContent, h("div", { key: 'c1c56c9e60df4e728c2d3a48b3c776b951ee464a', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: 'cbae6fdc39ec290b40370cb532ba0d2a06a194d2', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.customValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.customValidationMessage || this.validatorMessage })) : null)));
|
|
471
471
|
}
|
|
472
|
-
static get delegatesFocus() { return true; }
|
|
473
472
|
static get formAssociated() { return true; }
|
|
474
473
|
get el() { return getElement(this); }
|
|
475
474
|
static get watchers() { return {
|
|
@@ -548,16 +548,15 @@ const Upload = class {
|
|
|
548
548
|
render() {
|
|
549
549
|
const hasFiles = (this.filesSelected && this.filesSelected.length > 0) ||
|
|
550
550
|
(this.parsedUploadFiles && this.parsedUploadFiles.length > 0);
|
|
551
|
-
return (h(Host, { key: '
|
|
551
|
+
return (h(Host, { key: 'b2354be16c7963909ce2939d1bd24e99475cc6ef', "aria-busy": this.uploading || this.isValidating ? 'true' : null }, h("div", { key: '78808e8f2c3eacce3deb6542ab5e2d9d60bd7e7e', class: this.getCssClassMap(), id: this.customId, part: "container" }, h("label", { key: '5881d7133d9118d3c9e1637932adfac7e58fb3b5', id: `label-${this.customId}`, class: "upload-label", htmlFor: `single-file-${this.customId}`, part: "label" }, h("span", { key: '7e1c9a04a4f88c06007c2d16ee2df1a7d0ca1956' }, h("slot", { key: '1043fac29600fdf581bf8a6fde3928a4b9140bdd', name: "label" }, this.label))), h("input", { key: 'acc7aeb2294edb18ff1495ae335f71420f5f55d5', ref: (el) => {
|
|
552
552
|
this.nativeInput = el;
|
|
553
553
|
el.addEventListener('input', this.handleNativeInput);
|
|
554
554
|
}, class: "upload-input", id: `single-file-${this.customId}`, type: "file", onChange: this.handleInputChange, onCancel: this.handleNativeCancel, multiple: this.multiple, disabled: this.isDisabled(), required: this.required, accept: this.accept, capture: this.capture, "aria-labelledby": `label-${this.customId}`, "aria-busy": this.uploading || this.isValidating ? 'true' : null, "aria-describedby": this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage
|
|
555
555
|
? `${this.customId}-feedback`
|
|
556
556
|
: null, "aria-errormessage": this.customValidationMessage || this.validatorMessage || this.hasFeedbackSlot
|
|
557
557
|
? `${this.customId}-feedback`
|
|
558
|
-
: null, part: "input" }), h("button", { key: '
|
|
558
|
+
: null, part: "input" }), h("button", { key: 'd52437779c26e2e41a8fa944325385dca9fab5db', class: "upload-button", type: "button", disabled: this.isDisabled(), onClick: () => this.handleFileSelection(), onDragEnter: (event) => this.handleDragEnter(event), onDragLeave: (event) => this.handleDragLeave(event), onDrop: (event) => this.handleDrop(event), onDragOver: (event) => this.handleDragOver(event), "aria-describedby": `label-${this.customId}`, part: "button" }, h("br-icon", { key: '5b9514f5bfdfa32c5bbf73443f215454d669a71e', iconName: "fa-solid:upload", width: "20", height: "20", "aria-hidden": "true" }), h("slot", { key: '00684193f001d54a684261a9dca1e5c35ba2bcba' }, h("span", { key: 'af97d6116a296ae574b5de7c0e26c78a783983b4' }, "Selecione o arquivo"))), h("div", { key: '9db7490ea790b63348952dffc52dc67dd8c54a82', class: "upload-help", part: "helper" }, h("slot", { key: 'f831bae068bae343d40067922c07431fce1e2295', name: "helper" }, this.multiple ? 'Clique ou arraste os arquivos para cima do componente Upload.' : null)), this.renderUploadStatus(), h("slot", { key: 'e6cae25855b7e30f797d51aae53448fc8be7cbf5', name: "upload-list" }, hasFiles && (h("br-list", { key: '90c912ba21f3dff6f9c28cf53886414aa0582c4a', id: `${this.customId}-list-files`, class: "upload-list", listRole: "list", density: "small", part: "file-list" }, this.renderFilesUploaded())))), this.renderUploadError(), this.renderFeedback()));
|
|
559
559
|
}
|
|
560
|
-
static get delegatesFocus() { return true; }
|
|
561
560
|
static get formAssociated() { return true; }
|
|
562
561
|
get el() { return getElement(this); }
|
|
563
562
|
static get watchers() { return {
|
|
@@ -424,10 +424,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
424
424
|
return import(
|
|
425
425
|
/* webpackMode: "lazy" */
|
|
426
426
|
'./br-table.entry.js').then(processMod, consoleError);
|
|
427
|
-
case 'br-dropdown_2':
|
|
428
|
-
return import(
|
|
429
|
-
/* webpackMode: "lazy" */
|
|
430
|
-
'./br-dropdown_2.entry.js').then(processMod, consoleError);
|
|
431
427
|
case 'br-scrim':
|
|
432
428
|
return import(
|
|
433
429
|
/* webpackMode: "lazy" */
|
|
@@ -448,6 +444,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
448
444
|
return import(
|
|
449
445
|
/* webpackMode: "lazy" */
|
|
450
446
|
'./br-icon.entry.js').then(processMod, consoleError);
|
|
447
|
+
case 'br-dropdown_2':
|
|
448
|
+
return import(
|
|
449
|
+
/* webpackMode: "lazy" */
|
|
450
|
+
'./br-dropdown_2.entry.js').then(processMod, consoleError);
|
|
451
451
|
case 'br-select-input_3':
|
|
452
452
|
return import(
|
|
453
453
|
/* webpackMode: "lazy" */
|