bromcom-ui-next 0.1.17 → 0.1.19
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/bromcom-ui/bromcom-ui.esm.js +1 -1
- package/dist/bromcom-ui/bromcom-ui.esm.js.map +1 -1
- package/dist/bromcom-ui/p-01c8dde2.entry.js +2 -0
- package/dist/bromcom-ui/{p-09814383.entry.js.map → p-01c8dde2.entry.js.map} +1 -1
- package/dist/bromcom-ui/{p-37dc30d4.entry.js → p-07f19815.entry.js} +2 -2
- package/dist/bromcom-ui/{p-404e19f9.entry.js → p-145dce31.entry.js} +2 -2
- package/dist/bromcom-ui/{p-dd488642.entry.js → p-1e5da10e.entry.js} +2 -2
- package/dist/bromcom-ui/{p-b8292fb2.entry.js → p-1e726978.entry.js} +2 -2
- package/dist/bromcom-ui/p-357834a0.entry.js +2 -0
- package/dist/bromcom-ui/p-357834a0.entry.js.map +1 -0
- package/dist/bromcom-ui/p-67ceb7f3.entry.js +2 -0
- package/dist/bromcom-ui/{p-55e91bf6.entry.js.map → p-67ceb7f3.entry.js.map} +1 -1
- package/dist/bromcom-ui/{p-aae240d5.entry.js → p-9ba07f12.entry.js} +2 -2
- package/dist/bromcom-ui/{p-adda3b4e.entry.js → p-a02e437c.entry.js} +2 -2
- package/dist/bromcom-ui/{p-0721540b.entry.js → p-b582c170.entry.js} +2 -2
- package/dist/bromcom-ui/{p-bad19289.entry.js → p-b867a105.entry.js} +2 -2
- package/dist/bromcom-ui/{p-7e97d4e2.entry.js → p-bbe4aac2.entry.js} +2 -2
- package/dist/bromcom-ui/{p-76631abc.entry.js → p-bc962a70.entry.js} +2 -2
- package/dist/bromcom-ui/{p-49a74afe.entry.js → p-d975579d.entry.js} +2 -2
- package/dist/bromcom-ui/{p-77abe8d1.entry.js → p-e2f468ab.entry.js} +2 -2
- package/dist/cjs/bcm-accordion-group.cjs.entry.js +1 -1
- package/dist/cjs/bcm-accordion-group.cjs.entry.js.map +1 -1
- package/dist/cjs/{bcm-button_7.cjs.entry.js → bcm-button_8.cjs.entry.js} +210 -9
- package/dist/cjs/bcm-button_8.cjs.entry.js.map +1 -0
- package/dist/cjs/bcm-pop-confirm.cjs.entry.js +1 -1
- package/dist/cjs/bcm-popover.cjs.entry.js +1 -1
- package/dist/cjs/bcm-radio-group.cjs.entry.js +2 -2
- package/dist/cjs/bcm-radio.cjs.entry.js +1 -1
- package/dist/cjs/bcm-segmented-picker-option.cjs.entry.js +2 -2
- package/dist/cjs/bcm-segmented-picker.cjs.entry.js +2 -2
- package/dist/cjs/bcm-switch.cjs.entry.js +2 -2
- package/dist/cjs/bcm-tabs-content.cjs.entry.js +1 -1
- package/dist/cjs/bcm-tabs-list.cjs.entry.js +1 -1
- package/dist/cjs/bcm-tabs-trigger.cjs.entry.js +1 -1
- package/dist/cjs/bcm-tabs.cjs.entry.js +1 -1
- package/dist/cjs/bcm-textarea.cjs.entry.js +3 -3
- package/dist/cjs/bcm-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/bcm-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/bromcom-ui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/accordion-group/accordion-group.css +1 -1
- package/dist/collection/components/button/button.css +1 -1
- package/dist/collection/components/drawer/drawer.component.js +453 -0
- package/dist/collection/components/drawer/drawer.component.js.map +1 -0
- package/dist/collection/components/drawer/drawer.css +1 -0
- package/dist/collection/components/dropdown/dropdown.component.js +1 -1
- package/dist/collection/components/dropdown-item/dropdown-item.component.js +2 -2
- package/dist/collection/components/input/input.component.js +2 -2
- package/dist/collection/components/pop-confirm/pop-confirm.component.js +1 -1
- package/dist/collection/components/popover/popover.component.js +1 -1
- package/dist/collection/components/radio/radio.component.js +1 -1
- package/dist/collection/components/radio-group/radio-group.component.js +2 -2
- package/dist/collection/components/segmented-picker/segmented-picker-option.component.js +2 -2
- package/dist/collection/components/segmented-picker/segmented-picker.component.js +2 -2
- package/dist/collection/components/shortcut/shortcut.js +1 -1
- package/dist/collection/components/switch/switch.component.js +2 -2
- package/dist/collection/components/tabs/tabs-content.component.js +1 -1
- package/dist/collection/components/tabs/tabs-list.component.js +1 -1
- package/dist/collection/components/tabs/tabs-trigger.component.js +1 -1
- package/dist/collection/components/tabs/tabs.component.js +1 -1
- package/dist/collection/components/text/text.component.js +1 -1
- package/dist/collection/components/textarea/textarea.component.js +3 -3
- package/dist/collection/components/tooltip/tooltip.component.js +1 -1
- package/dist/collection/components/tooltip/tooltip.css +1 -1
- package/dist/components/bcm-accordion-group.js +1 -1
- package/dist/components/bcm-accordion-group.js.map +1 -1
- package/dist/components/bcm-button.js +1 -1
- package/dist/components/bcm-drawer.d.ts +11 -0
- package/dist/components/bcm-drawer.js +236 -0
- package/dist/components/bcm-drawer.js.map +1 -0
- package/dist/components/bcm-dropdown-item.js +2 -2
- package/dist/components/bcm-dropdown.js +2 -2
- package/dist/components/bcm-input.js +2 -2
- package/dist/components/bcm-pop-confirm.js +2 -2
- package/dist/components/bcm-popover.js +1 -1
- package/dist/components/bcm-radio-group.js +2 -2
- package/dist/components/bcm-radio.js +1 -1
- package/dist/components/bcm-segmented-picker-option.js +2 -2
- package/dist/components/bcm-segmented-picker.js +2 -2
- package/dist/components/bcm-shortcut.js +1 -1
- package/dist/components/bcm-switch.js +2 -2
- package/dist/components/bcm-tabs-content.js +1 -1
- package/dist/components/bcm-tabs-list.js +1 -1
- package/dist/components/bcm-tabs-trigger.js +1 -1
- package/dist/components/bcm-tabs.js +1 -1
- package/dist/components/bcm-text.js +1 -1
- package/dist/components/bcm-textarea.js +3 -3
- package/dist/components/bcm-tooltip.js +2 -2
- package/dist/components/bcm-tooltip.js.map +1 -1
- package/dist/components/{p-b5bee06c.js → p-923e07c4.js} +2 -2
- package/dist/components/{p-b5bee06c.js.map → p-923e07c4.js.map} +1 -1
- package/dist/esm/bcm-accordion-group.entry.js +1 -1
- package/dist/esm/bcm-accordion-group.entry.js.map +1 -1
- package/dist/esm/{bcm-button_7.entry.js → bcm-button_8.entry.js} +210 -10
- package/dist/esm/bcm-button_8.entry.js.map +1 -0
- package/dist/esm/bcm-pop-confirm.entry.js +1 -1
- package/dist/esm/bcm-popover.entry.js +1 -1
- package/dist/esm/bcm-radio-group.entry.js +2 -2
- package/dist/esm/bcm-radio.entry.js +1 -1
- package/dist/esm/bcm-segmented-picker-option.entry.js +2 -2
- package/dist/esm/bcm-segmented-picker.entry.js +2 -2
- package/dist/esm/bcm-switch.entry.js +2 -2
- package/dist/esm/bcm-tabs-content.entry.js +1 -1
- package/dist/esm/bcm-tabs-list.entry.js +1 -1
- package/dist/esm/bcm-tabs-trigger.entry.js +1 -1
- package/dist/esm/bcm-tabs.entry.js +1 -1
- package/dist/esm/bcm-textarea.entry.js +3 -3
- package/dist/esm/bcm-tooltip.entry.js +2 -2
- package/dist/esm/bcm-tooltip.entry.js.map +1 -1
- package/dist/esm/bromcom-ui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/drawer/drawer.component.d.ts +23 -0
- package/dist/types/components.d.ts +51 -0
- package/package.json +1 -1
- package/dist/bromcom-ui/p-09814383.entry.js +0 -2
- package/dist/bromcom-ui/p-55e91bf6.entry.js +0 -2
- package/dist/bromcom-ui/p-cf50b4df.entry.js +0 -2
- package/dist/bromcom-ui/p-cf50b4df.entry.js.map +0 -1
- package/dist/cjs/bcm-button_7.cjs.entry.js.map +0 -1
- package/dist/esm/bcm-button_7.entry.js.map +0 -1
- /package/dist/bromcom-ui/{p-37dc30d4.entry.js.map → p-07f19815.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-404e19f9.entry.js.map → p-145dce31.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-dd488642.entry.js.map → p-1e5da10e.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-b8292fb2.entry.js.map → p-1e726978.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-aae240d5.entry.js.map → p-9ba07f12.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-adda3b4e.entry.js.map → p-a02e437c.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-0721540b.entry.js.map → p-b582c170.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-bad19289.entry.js.map → p-b867a105.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-7e97d4e2.entry.js.map → p-bbe4aac2.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-76631abc.entry.js.map → p-bc962a70.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-49a74afe.entry.js.map → p-d975579d.entry.js.map} +0 -0
- /package/dist/bromcom-ui/{p-77abe8d1.entry.js.map → p-e2f468ab.entry.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}
|
|
@@ -35,7 +35,7 @@ export class Dropdown {
|
|
|
35
35
|
});
|
|
36
36
|
}
|
|
37
37
|
render() {
|
|
38
|
-
return (h(Host, { key: '
|
|
38
|
+
return (h(Host, { key: '7c13b65d8c966a4a2de522aa9d765cb7933bcd81' }, h("bcm-button", { key: '7511bf043370dd8360c458800c1518205c35ac3c', kind: "outline" }, h("span", { key: '1a67377235ffe4b5989adab0b185585e9e4d1080', part: "text" }, this.text)), this.isReady && (h("bcm-linked", { key: '78a528e16b5c76409a9546e7f2523b9535d47276', targetElement: this.buttonRef }, h("div", { key: 'afec0593ed669692ab2e97e58a2e918689fc9175', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: '4f94568837c8c32619aa6c586b35c8d8bb60a74c', onSlotchange: this.handleSlotChange }))))));
|
|
39
39
|
}
|
|
40
40
|
static get is() { return "bcm-dropdown"; }
|
|
41
41
|
static get encapsulation() { return "shadow"; }
|
|
@@ -39,10 +39,10 @@ export class DropdownItem {
|
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
41
|
var _a;
|
|
42
|
-
return (h("div", { key: '
|
|
42
|
+
return (h("div", { key: '3c989e05b18e183481b760f24d3d37bae4a68eea', "aria-checked": this.selected, class: this.dropdownItemClass({
|
|
43
43
|
selected: this.selected,
|
|
44
44
|
error: this.error,
|
|
45
|
-
}), onClick: () => this.handleClick() }, h("slot", { key: '
|
|
45
|
+
}), onClick: () => this.handleClick() }, h("slot", { key: '9edf937944435ae070541bd5952fbbda1ffe5d9d', name: "left-content" }, this.icon && h("bcm-icon", { key: '1b452c2a57af6d3a7c85bd9e48107f24224eae4b', "icon-name": this.icon })), h("div", { key: 'd4114f8e306accdc373e753d02870ad21e65c8b1', class: "flex flex-row text-pretty w-full" }, h("slot", { key: '0f1a8d78b7c91f117d5389d8bdf1efb894168df4' }, this.text)), h("slot", { key: 'e428dadc7ca757302c47431a3dda05895387a9f5', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
|
|
46
46
|
}
|
|
47
47
|
static get is() { return "bcm-dropdown-item"; }
|
|
48
48
|
static get encapsulation() { return "shadow"; }
|
|
@@ -254,14 +254,14 @@ export class BcmInput {
|
|
|
254
254
|
disabled: this.disabled,
|
|
255
255
|
focused: this.isFocused,
|
|
256
256
|
});
|
|
257
|
-
return (h("div", { key: '
|
|
257
|
+
return (h("div", { key: '77a0be85ac2a3749e95bedafc01134a5a6a9f655', class: "bcm-ui-element" }, this.label && (h("label", { key: 'a202e383e92085bed836777a5484f306d73638dd', class: classNames('input-label font-medium', {
|
|
258
258
|
'text-color-label': !this.disabled,
|
|
259
259
|
'text-color-disabled': this.disabled,
|
|
260
260
|
}, {
|
|
261
261
|
'text-size-3': this.size === 'small',
|
|
262
262
|
'text-size-4': this.size === 'medium',
|
|
263
263
|
'text-size-5': this.size === 'large',
|
|
264
|
-
}), htmlFor: inputId }, h("slot", { key: '
|
|
264
|
+
}), htmlFor: inputId }, h("slot", { key: '204121e272f4a168db119322aaba8c4ed2e5c125', name: "label" }, this.label), this.required && h("span", { key: 'eb658a88419adb4003525dc711676628b832a3c4' }, "*"))), h("div", { key: '584edbfd2e49a4e37e45781d7844ce8b850532ff', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: '0cbc9f42756c643cc5277fe1e7a7636a4fd490be', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: 'a6c0dd258d7c28f2c8d5876fc703fa230ee3ce1a', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: '9f8ff60b443210f0f3fd68e43ac73248bd3c4b35', name: "prefix" }))), h("input", { key: 'd811a67abb5727f2f2d3051d5dded8d5d78564ec', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: 'c10515b9f3a9fb8d87e8c0f0abd383220ba5554c', class: "flex items-center gap-2 px-2" }, h("slot", { key: '5902fa399e7fad8a82e1deaf6bc45f9a5ba8b94a', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: '46721b1a002b2b0a04686e2e8968b2c0b51c1061', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '46f3360446fe8c40aab58d1d4047c4f1bb010fff', class: classNames('input-caption-text font-regular mt-1', {
|
|
265
265
|
'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',
|
|
266
266
|
'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),
|
|
267
267
|
'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',
|
|
@@ -291,7 +291,7 @@ export class PopConfirm {
|
|
|
291
291
|
const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({
|
|
292
292
|
size: this.size,
|
|
293
293
|
});
|
|
294
|
-
return (h(Fragment, { key: '
|
|
294
|
+
return (h(Fragment, { key: '8910f368da993572cb4725dcbb74235ec50348e8' }, this.isOpen && (h("div", { key: '4ded121b7e121f8bb0dd1fe76b2921fd2a487fe8', role: "dialog", "aria-labelledby": "pop-confirm-title", style: this.popoverStyle, class: container(), ref: el => (this.popoverElement = el) }, h("div", { key: '94a78199e0e90cec5ba905db17d3a9c48a28a9a7', ref: el => (this.arrowElement = el), class: `arrow w-4 h-2 ${(_a = this.currentPlacement) !== null && _a !== void 0 ? _a : 'top'}` }), h("header", { key: 'd21596aa10c8128c2d9921b3bc6c4b93002877d4', class: header() }, h("div", { key: 'e0a91a6031f59630cfeea3ef5e35a32e973c6006', class: headerLeftContent() }, this.statusIcon && h("bcm-icon", { key: '9f184b3caf099697d4139a6a9efd276618b0f818', "icon-name": statusIcons[this.status] }), h("span", { key: '50fd578631061127dd49d00600a4d83d645f4f76', class: titleContainer() }, this.headerText), h("slot", { key: '8c29cbde0194fa1ff1ca82286b57b34532162d8b', name: "header" })), h("div", { key: '6ef68d637bbfd3cf2fd2c1a8650c222d5970cf64', class: closeIconArea(), onClick: this.handleCancel }, h("bcm-icon", { key: 'c017286c2604e18e8ad47c889092fa727a01a18f', "icon-name": "far fa-times" }))), h("main", { key: '5f9255fd563714b7eb842900010e8d1c51417172', class: "flex-1 mx-auto font-sans text-pretty" }, h("slot", { key: 'a7ca7e568776da834bc7fe44993c32f219522a1a', name: "body" }, this.description)), h("footer", { key: '1172e51992183b617d6d5ce53a4a09a09be12ae8', class: footer() }, h("bcm-button", { key: 'e99da377988d0be710e5ce6d47c84cc65298aa1f', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), h("bcm-button", { key: '8154b716f4bf1b5ed272a3b53be7ddaf151ae0cf', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText), h("slot", { key: 'ad182d00fc2925d7b403f70250cd1e9687432a46', name: "footer" }))))));
|
|
295
295
|
}
|
|
296
296
|
static get is() { return "bcm-pop-confirm"; }
|
|
297
297
|
static get encapsulation() { return "shadow"; }
|
|
@@ -206,7 +206,7 @@ export class Popover {
|
|
|
206
206
|
isOpen: this.open,
|
|
207
207
|
size: this.size,
|
|
208
208
|
});
|
|
209
|
-
return (h("div", { key: '
|
|
209
|
+
return (h("div", { key: '3fe47e7ebc4fb9f9fad0fda8dedf11f2ea8e904f', class: "relative" }, h("slot", { key: '8dd0e99a839b2c9c0ad6df67356bf616dae407f1', onSlotchange: () => this.handleSlotChange() }), h("div", { key: 'b4339c24996ec4666ffb731f7908513ade8cb5d8', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: 'f94ca6625dac67dd16f625398c007a274e677ac7', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: 'd64bf52940bef06b04ec2c13f3116652a7b6b8d6', class: header(), part: "header" }, h("slot", { key: 'be1ee83453f9b159297e6e7e73d5451f21fbb873', name: "header" }, this.headerText)), h("div", { key: '9838c02e51fac40992a34fdfcaecb8d48fba48c8', class: content(), part: "content" }, h("slot", { key: '0f01f42280a5058d4a4aacca035111e8990c194a', name: "content" }, this.message)))));
|
|
210
210
|
}
|
|
211
211
|
static get is() { return "bcm-popover"; }
|
|
212
212
|
static get encapsulation() { return "shadow"; }
|
|
@@ -190,7 +190,7 @@ export class BcmRadio {
|
|
|
190
190
|
readonly: this.readonly,
|
|
191
191
|
labelPosition: this.labelPosition,
|
|
192
192
|
});
|
|
193
|
-
return (h("label", { key: '
|
|
193
|
+
return (h("label", { key: '4b53e856e66a8f35fddca847ea0dad4f749d9ad1', class: container(), style: this.getRadioStyle() }, h("input", { key: '04506f00b7b0773c43f6d3cf65967d83f11dc1ed', "aria-label": this.label, role: "radio", "aria-checked": this.checked.toString(), type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.checked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e) }), h("div", { key: '9da73fa48763a71a9eafc6ed9bca5812317b8268', class: dotContainer() }, h("div", { key: '2126018bf6f5eef062be02cec1f081daf939c9df', class: dot() })), h("span", { key: '86f5e2485c72b27892054ffa0082307f025ad31a', class: labelClass() }, h("slot", { key: 'de05d13a1e3d88b7a6f7f7e9355d7b36d740709f' }, this.label))));
|
|
194
194
|
}
|
|
195
195
|
static get is() { return "bcm-radio"; }
|
|
196
196
|
static get encapsulation() { return "shadow"; }
|
|
@@ -178,14 +178,14 @@ export class BcmRadioGroup {
|
|
|
178
178
|
size: this.size,
|
|
179
179
|
direction: this.direction,
|
|
180
180
|
});
|
|
181
|
-
return (h("div", { key: '
|
|
181
|
+
return (h("div", { key: '482530d13c741ccd1d4a6a2255f984a3957cb3f1', class: host() }, this.label && (h("label", { key: '15b52d29e3ee83bfc6ccd483d4296195f2eb562b', class: classNames('input-label font-medium', {
|
|
182
182
|
'text-color-label': !this.disabled,
|
|
183
183
|
'text-color-disabled': this.disabled,
|
|
184
184
|
}, {
|
|
185
185
|
'text-size-3': this.size === 'small',
|
|
186
186
|
'text-size-4': this.size === 'medium',
|
|
187
187
|
'text-size-5': this.size === 'large',
|
|
188
|
-
}) }, h("slot", { key: '
|
|
188
|
+
}) }, h("slot", { key: 'f241a0ec8a9f8b5175e54c27238a81abe6e5c043', name: "label" }, this.label), this.required && h("span", { key: 'c091f0d477cb5b8a5ba88ad2aff77f212c780058' }, "*"))), h("div", { key: 'f91e7e3bfd60aa6907ff3b2869d21a6962664062', class: container() }, h("slot", { key: 'ec597411044a4b6a537f7e5bf7391499dacd86e7', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: '6b35ceb2bbdd2c6bbf1c6d3643902ae022dba111', class: classNames('input-caption-text font-regular mt-1', {
|
|
189
189
|
'text-[--bcm-ui-color-text-caption]': !this.disabled,
|
|
190
190
|
'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,
|
|
191
191
|
'text-[--bcm-ui-color-text-disabled]': this.disabled,
|
|
@@ -84,11 +84,11 @@ export class BcmSegmentedPickerOption {
|
|
|
84
84
|
render() {
|
|
85
85
|
const size = this.size || this.getSizeFromParent();
|
|
86
86
|
const disabled = this.isDisabled();
|
|
87
|
-
return (h(Host, { key: '
|
|
87
|
+
return (h(Host, { key: '0e1d1fa066ff7f75cefa08efc39d5403bcaa8939' }, h("button", { key: '6d7f2ccc063979c6f7ebc39780ce599bdf0544d9', class: this.optionClass({
|
|
88
88
|
size,
|
|
89
89
|
selected: this.selected,
|
|
90
90
|
disabled,
|
|
91
|
-
}), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: '
|
|
91
|
+
}), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: '4b0c5a40f76ef045964b32a3fa7c1a8f26aa5b66' }, this.label))));
|
|
92
92
|
}
|
|
93
93
|
static get is() { return "bcm-segmented-picker-option"; }
|
|
94
94
|
static get encapsulation() { return "shadow"; }
|
|
@@ -118,11 +118,11 @@ export class BcmSegmentedPicker {
|
|
|
118
118
|
}, 10);
|
|
119
119
|
}
|
|
120
120
|
render() {
|
|
121
|
-
return (h(Host, { key: '
|
|
121
|
+
return (h(Host, { key: '00a61b095c03ee5a5714a2bf1efa358056cc48bd' }, h("div", { key: '75ea4056395d589e486c9ef45c33eecbc1eca8c8', class: this.segmentedClass({
|
|
122
122
|
size: this.size,
|
|
123
123
|
fullWidth: this.fullWidth,
|
|
124
124
|
disabled: this.disabled,
|
|
125
|
-
}) }, h("div", { key: '
|
|
125
|
+
}) }, h("div", { key: '9a3c63b6730b64ebacd59d2b548cc94a181c1e9e', class: "segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded", style: this.indicatorStyles }), h("div", { key: 'ac1d2c0765dc1ff246a5fc81815d1e1e10630d8d', class: "segmented-options flex relative z-10 w-full" }, h("slot", { key: 'b5e21f3e8ee7d55736f034fe3e92662510a65973' })))));
|
|
126
126
|
}
|
|
127
127
|
static get is() { return "bcm-segmented-picker"; }
|
|
128
128
|
static get encapsulation() { return "shadow"; }
|
|
@@ -29,7 +29,7 @@ export class BcmShortcut {
|
|
|
29
29
|
}
|
|
30
30
|
render() {
|
|
31
31
|
const { size, hotkey } = this;
|
|
32
|
-
return (h("div", { key: '
|
|
32
|
+
return (h("div", { key: '007588d1d20941ead644a3d1fd72410cb6793ff5', class: cs('bcm-ui-element bcm-ui-content-display', 'block h-fit w-fit rounded border border-solid px-1', 'border-color-default bg-color-default text-color-default', 'text-center font-medium capitalize', {
|
|
33
33
|
'text-size-2': size === 'small',
|
|
34
34
|
'text-size-3': size === 'medium',
|
|
35
35
|
'text-size-4': size === 'large',
|
|
@@ -190,12 +190,12 @@ export class BcmSwitch {
|
|
|
190
190
|
});
|
|
191
191
|
const ariaAttributes = Object.assign({ 'role': 'switch', 'aria-checked': this.checked.toString(), 'aria-disabled': this.disabled.toString(), 'aria-readonly': this.readonly.toString() }, (this.required && { 'aria-required': 'true' }));
|
|
192
192
|
const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};
|
|
193
|
-
return (h("div", { key: '
|
|
193
|
+
return (h("div", { key: 'd18db7b849420ad3c416efa4e7d4eddef524afa0', class: base() }, h("label", { key: 'c7d35ad070759d134a4d4aa3b07144407b3f412a', class: switchWrapper(), style: this.switchStyle() }, h("input", { key: '0690f7e509de7093f513bca1819c30370f720f40', id: this.switchId, type: "checkbox", class: "hidden peer", checked: this.checked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onChange: () => this.toggleSwitch() }), this.label && h("span", { key: 'fbb5d10e306c5d6b97dcfc9fc3ed2f075a2e2869', class: label() }, h("slot", { key: 'b9cd0cb2b0a95420fcd146b326865f9b030fea3d' }, this.label)), h("label", Object.assign({ key: 'f04c6cf35a56b203d96776b26e4a167b6b81e748', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
|
|
194
194
|
if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {
|
|
195
195
|
event.preventDefault();
|
|
196
196
|
this.toggleSwitch();
|
|
197
197
|
}
|
|
198
|
-
} }), h("div", { key: '
|
|
198
|
+
} }), h("div", { key: '5ec215b19c3772cdf2f2bd9213ea5583786b07f7', class: dot() }))), this.error && this.caption && h("span", { key: '0ed49573afdfa297ec8930b0408c8e8ec3bdc384', class: caption() }, this.caption), h("slot", { key: 'ead6fd77bd9bd97b14e69367fd90e1c474b5d4c3', name: "caption" })));
|
|
199
199
|
}
|
|
200
200
|
static get is() { return "bcm-switch"; }
|
|
201
201
|
static get encapsulation() { return "shadow"; }
|
|
@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
|
|
|
5
5
|
*/
|
|
6
6
|
export class BcmTabsContent {
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: 'e12d04d682726a70c9a7cd4ce091cb64b067ce32', role: "tabpanel" }, h("slot", { key: 'c947677586826f8702472107a43d92235aca84ef' })));
|
|
9
9
|
}
|
|
10
10
|
static get is() { return "bcm-tabs-content"; }
|
|
11
11
|
static get encapsulation() { return "shadow"; }
|
|
@@ -28,7 +28,7 @@ export class BcmTabsList {
|
|
|
28
28
|
}
|
|
29
29
|
render() {
|
|
30
30
|
const { container, inkbar, tabList } = this.class();
|
|
31
|
-
return (h("div", { key: '
|
|
31
|
+
return (h("div", { key: '4dbd9f1b18b6529d8b772a27a6f6ab0cbf789b48', class: container(), slot: "tabs-list" }, h("div", { key: 'f7bc6bb41afb0d76f66cb7a7af70875cf5359da8', class: inkbar() }), h("div", { key: '95aa03b5f1955517c9f3fce41ce3b525bfb56ac0', class: tabList(), role: "tablist" }, h("slot", { key: 'a3d0a910a2f7a07dd2f1e25b0d14d2c0d830e5fb' }))));
|
|
32
32
|
}
|
|
33
33
|
static get is() { return "bcm-tabs-list"; }
|
|
34
34
|
static get encapsulation() { return "shadow"; }
|
|
@@ -75,7 +75,7 @@ export class BcmTabsTrigger {
|
|
|
75
75
|
active: this.active,
|
|
76
76
|
disabled: this.disabled,
|
|
77
77
|
});
|
|
78
|
-
return (h(Host, { key: '
|
|
78
|
+
return (h(Host, { key: 'e9d6b6e77d982ea2cbba1e7f928f9515d10be52d', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: 'faf87a5db1212dd5ebbccba186e83d26934a8b41', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: 'a3426148118f555159c9bd355dbfb52c035e082a' })), h("div", { key: '32bbc55e43775f2369b01879f93183b29a1659b3', class: borderLine() })));
|
|
79
79
|
}
|
|
80
80
|
static get is() { return "bcm-tabs-trigger"; }
|
|
81
81
|
static get encapsulation() { return "shadow"; }
|
|
@@ -192,7 +192,7 @@ export class BcmTabs {
|
|
|
192
192
|
}
|
|
193
193
|
}
|
|
194
194
|
render() {
|
|
195
|
-
return (h(Host, { key: '
|
|
195
|
+
return (h(Host, { key: '0afd825b3df8017a0a5bc88a341430fec848d7ad' }, h("div", { key: 'e0ee72418f290849a68e4286ee91b3abceb668f3', class: this.tabClass() }, h("slot", { key: 'e9e032f474872ef1fe32a23b3feb0e75303f9c12', name: "tabs-list" }), h("slot", { key: 'cc22e3ac81914ecd88016a7033c135c52a99deed' }))));
|
|
196
196
|
}
|
|
197
197
|
static get is() { return "bcm-tabs"; }
|
|
198
198
|
static get encapsulation() { return "shadow"; }
|
|
@@ -90,7 +90,7 @@ export class BcmText {
|
|
|
90
90
|
const Tag = variantTagMap[this.variant];
|
|
91
91
|
const variantClass = this.getTextClass(this.variant, this.size);
|
|
92
92
|
const overflowClass = this.getOverflowClass((_a = this.overflow) !== null && _a !== void 0 ? _a : false);
|
|
93
|
-
return (h(Tag, { key: '
|
|
93
|
+
return (h(Tag, { key: '152d737752eea962ac3c5086011da69578ef0920', class: cs('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, h("slot", { key: 'e8c8c89a5925936a2e22a75265b7f42317eab983' }, this.text)));
|
|
94
94
|
}
|
|
95
95
|
static get is() { return "bcm-text"; }
|
|
96
96
|
static get encapsulation() { return "shadow"; }
|
|
@@ -261,14 +261,14 @@ export class BcmTextarea {
|
|
|
261
261
|
disabled: this.disabled,
|
|
262
262
|
focused: this.isFocused,
|
|
263
263
|
});
|
|
264
|
-
return (h("div", { key: '
|
|
264
|
+
return (h("div", { key: 'c5ee75be5fde297e23772b7c40d5c1232f3b89da', class: "bcm-ui-element" }, this.label && (h("label", { key: '49b338bdfdc5475c8219fb752200cf897a57f79d', class: classNames('textarea-label font-medium', {
|
|
265
265
|
'text-color-label': !this.disabled,
|
|
266
266
|
'text-color-disabled': this.disabled,
|
|
267
267
|
}, {
|
|
268
268
|
'text-size-3': this.size === 'small',
|
|
269
269
|
'text-size-4': this.size === 'medium',
|
|
270
270
|
'text-size-5': this.size === 'large',
|
|
271
|
-
}), htmlFor: textareaId }, h("slot", { key: '
|
|
271
|
+
}), htmlFor: textareaId }, h("slot", { key: '01a450616f08255ad6c593cfdee6bfe8c806a139', name: "label" }, this.label), this.required && h("span", { key: 'e2da2bfd03978deae44f3b1fc80171bd17092a94' }, "*"))), h("div", { key: '24508ff98ece95297f3c90f415b9c1231771de96', class: base() }, h("textarea", { key: 'abd2eb66e02a271626246f7634d3bad6ca569bf5', ref: el => (this.textareaRef = el), id: textareaId, class: textareaClass(), name: this.name, rows: this.rows, cols: this.cols, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, minLength: this.minLength, maxLength: this.maxLength, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: event => {
|
|
272
272
|
const target = event.target;
|
|
273
273
|
this.value = target.value;
|
|
274
274
|
this.bcmInput.emit(event);
|
|
@@ -276,7 +276,7 @@ export class BcmTextarea {
|
|
|
276
276
|
if (this.autoGrow) {
|
|
277
277
|
this.adjustHeight();
|
|
278
278
|
}
|
|
279
|
-
}, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), this.showCounter && (h("div", { key: '
|
|
279
|
+
}, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), this.showCounter && (h("div", { key: '2678f8f9ad6d2fdb42691b9609d6a73c696b90ec', class: counterText() }, this.value.length, this.maxLength ? `/${this.maxLength}` : ''))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '03c87e206c3c683d503bf8bc0fb33f0e3657857f', class: classNames('textarea-caption-text font-regular mt-1', {
|
|
280
280
|
'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',
|
|
281
281
|
'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),
|
|
282
282
|
'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',
|
|
@@ -193,7 +193,7 @@ export class Tooltip {
|
|
|
193
193
|
size: this.size,
|
|
194
194
|
isOpen: this.open,
|
|
195
195
|
});
|
|
196
|
-
return (h("div", { key: '
|
|
196
|
+
return (h("div", { key: '04196e7e3ed7405ff4c3e4870d6cbec968e07f4d', class: "relative" }, h("slot", { key: '0a1043e46fa3e88cf667432d44a57a5268a1d61b', onSlotchange: () => this.handleSlotChange() }), h("div", { key: 'fb5474a83b621875831bdbb9a066519fdaae88f0', role: "tooltip", class: tooltip(), ref: (el) => (this.tooltipElement = el), part: "tooltip" }, h("div", { key: '17b8cc92d03e75f4dba6759c74febba8953bc711', class: arrow(), ref: (el) => (this.arrowElement = el), part: "arrow" }), h("slot", { key: '60a42381139cc4b1f630441795a2b9b59c6660b6', name: "tooltip" }, this.message))));
|
|
197
197
|
}
|
|
198
198
|
static get is() { return "bcm-tooltip"; }
|
|
199
199
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:host{--tooltip-bg:var(--bcm-ui-color-background-default-dark-default)}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.absolute{position:absolute}.relative{position:relative}.z-\[-1\]{z-index:-1}.z-\[9999\]{z-index:9999}.block{display:block}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\[--tooltip-bg\]{background-color:var(--tooltip-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.text-color-base{color:var(--bcm-ui-color-text-base)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}
|
|
1
|
+
:host{--tooltip-bg:var(--bcm-ui-color-background-default-dark-default)}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\[-1\]{z-index:-1}.z-\[9999\]{z-index:9999}.block{display:block}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\[--tooltip-bg\]{background-color:var(--tooltip-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.text-color-base{color:var(--bcm-ui-color-text-base)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-30135590.js';
|
|
2
2
|
|
|
3
|
-
const accordionGroupCss = ".block{display:block}:host{--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;display:block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.collapse{visibility:collapse}.flex{display:flex}.w-full{width:100%}.flex-col{flex-direction:column}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-accordion-border\\]{border-color:var(--bcm-accordion-border)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}";
|
|
3
|
+
const accordionGroupCss = ".block{display:block}:host{--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;display:block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.collapse{visibility:collapse}.static{position:static}.flex{display:flex}.w-full{width:100%}.flex-col{flex-direction:column}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-accordion-border\\]{border-color:var(--bcm-accordion-border)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}";
|
|
4
4
|
const BcmAccordionGroupStyle0 = accordionGroupCss;
|
|
5
5
|
|
|
6
6
|
const BcmAccordionGroup$1 = /*@__PURE__*/ proxyCustomElement(class BcmAccordionGroup extends H {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bcm-accordion-group.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG
|
|
1
|
+
{"file":"bcm-accordion-group.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,u9BAAu9B,CAAC;AACl/B,gCAAe,iBAAiB;;MCmEnBA,mBAAiB;IAL9B;;;;;;QAUY,UAAK,GAAY,KAAK,CAAC;;QAGtB,mBAAc,GAA8B,EAAE,CAAC;;;;QAoDhD,qBAAgB,GAAG;YACvB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;YAC9E,IAAI,CAAC,gBAAgB,EAAE,CAAC;;YAExB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;gBAClC,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;aAC/D;SACJ,CAAC;KAuCL;;;;;IApFG,MAAM,SAAS;QACX,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;YAC5D,OAAO;SACV;QACD,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;KACrE;;;;IAMD,MAAM,WAAW;QACb,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;KACvE;;;;IAMD,MAAM,gBAAgB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC5D;IAED,iBAAiB;QACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC3B;IAGO,gBAAgB;QACpB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;YAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACrB,CAAC,CAAC;KACN;;;;IAkBD,qBAAqB,CAAC,KAA4C;QAC9D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE3C,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;gBAC5B,IAAI,IAAI,KAAK,MAAM,EAAE;oBACjB,IAAI,CAAC,QAAQ,EAAE,CAAC;iBACnB;gBACD,IAAI,CAAC,QAAQ,GAAG,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;aACtD,CAAC,CAAC;SACN;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACxE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAC9B,QAAQ;YACR,OAAO,EAAE,MAAM;YACf,aAAa;YACb,aAAa,EAAE,aAAa,CAAC,MAAM;SACtC,CAAC,CAAC;KACN;IAED,MAAM;QACF,QACI,4DACI,KAAK,EAAC,0HAA0H,EAChI,IAAI,EAAC,OAAO,gBACD,iBAAiB,IAE5B,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAChD,EACR;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmAccordionGroup"],"sources":["src/components/accordion-group/accordion-group.css?tag=bcm-accordion-group&encapsulation=shadow","src/components/accordion-group/accordion-group.component.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n --bcm-accordion-border: var(--bcm-ui-color-border-default);\n --bcm-accordion-radius: 6px;\n}\n","\nimport { Component, ComponentInterface, h, Element, Prop, Listen, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { AccordionChangeEventType } from '../accordion/types';\nimport { AccordionGroupChangeEventType } from './types';\n\n/**\n* @component BcmAccordionGroup\n* @description A container component that manages a group of accordions. Provides single/multiple expansion \n* modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.\n*\n* @example Basic usage - Single expansion mode\n* <bcm-accordion-group>\n* <bcm-accordion>\n* <div slot=\"title\">Section 1</div>\n* <div>Content 1</div>\n* </bcm-accordion>\n* <bcm-accordion>\n* <div slot=\"title\">Section 2</div>\n* <div>Content 2</div>\n* </bcm-accordion>\n* </bcm-accordion-group>\n*\n* @example Multiple expansion mode\n* <bcm-accordion-group multi={true}>\n* <bcm-accordion>...</bcm-accordion>\n* <bcm-accordion>...</bcm-accordion>\n* </bcm-accordion-group>\n* \n* @example Event handling\n* // Listen to accordion group changes\n* const accordionGroup = document.querySelector('bcm-accordion-group');\n* accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {\n* const { expanded, changed, expandedItems, expandedCount } = event.detail;\n* console.log('Accordion expanded state:', expanded);\n* console.log('Changed accordion:', changed);\n* console.log('Currently expanded accordions:', expandedItems);\n* console.log('Number of expanded accordions:', expandedCount);\n* });\n* \n* // Using methods\n* await accordionGroup.expandAll(); // Expands all accordions (only in multi mode)\n* await accordionGroup.collapseAll(); // Collapses all accordions\n* const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions\n*\n* @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)\n*\n* @slot default - Container slot for bcm-accordion components\n*\n* @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes\n* @eventProperty {boolean} expanded - Current expanded state of the changed accordion\n* @eventProperty {HTMLElement} changed - The accordion element that triggered the change\n* @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements\n* @eventProperty {number} expandedCount - Number of currently expanded accordions\n*\n* @method expandAll() - Expands all accordions (only available in multi mode)\n* @method collapseAll() - Collapses all accordions\n* @method getExpandedItems() - Returns array of currently expanded accordions\n*\n* @csspart container - The accordion group container element\n*\n* @css {string} --bcm-accordion-border - Border color of the accordion group\n* @css {string} --bcm-accordion-radius - Border radius of the accordion group\n*/\n@Component({\n tag: 'bcm-accordion-group',\n styleUrl: 'accordion-group.css',\n shadow: true,\n})\nexport class BcmAccordionGroup implements ComponentInterface {\n /** Reference to the host element */\n @Element() host: HTMLElement;\n\n /** Controls whether multiple accordions can be expanded simultaneously */\n @Prop() multi: boolean = false;\n\n /** Array of accordion elements within the group */\n @State() accordionItems: HTMLBcmAccordionElement[] = [];\n\n /** Event emitted when any accordion's expanded state changes */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n }) bcmAccordionGroupChange: EventEmitter<AccordionGroupChangeEventType>;\n\n /**\n * Expands all accordions in the group\n * Only available when multi=true\n */\n @Method()\n async expandAll(): Promise<void> {\n if (!this.multi) {\n console.warn('expandAll is only available when multi=true');\n return;\n }\n await Promise.all(this.accordionItems.map(item => item.expand()));\n }\n\n /**\n * Collapses all accordions in the group\n */\n @Method()\n async collapseAll(): Promise<void> {\n await Promise.all(this.accordionItems.map(item => item.collapse()));\n }\n\n /**\n * Returns an array of currently expanded accordion elements\n */\n @Method()\n async getExpandedItems(): Promise<HTMLBcmAccordionElement[]> {\n return this.accordionItems.filter(item => item.expanded);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n\n private setGroupBehavior(): void {\n this.accordionItems.forEach(item => {\n item.group = true;\n });\n }\n\n /**\n * Updates the accordion items array when slot content changes\n */\n private handleSlotChange = () => {\n this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));\n this.setGroupBehavior();\n // Validate accordion items\n if (this.accordionItems.length === 0) {\n console.warn('No accordion items found in accordion group');\n }\n };\n\n /**\n * Handles state changes of individual accordions\n */\n @Listen('bcmAccordionChange', { capture: true })\n handleAccordionChange(event: CustomEvent<AccordionChangeEventType>) {\n this.handleSlotChange();\n const { expanded, source } = event?.detail;\n\n if (!this.multi) {\n this.accordionItems.forEach(item => {\n if (item !== source) {\n item.collapse();\n }\n item.expanded = item === source ? expanded : false;\n });\n }\n\n const expandedItems = this.accordionItems.filter(item => item.expanded);\n this.bcmAccordionGroupChange.emit({\n expanded,\n changed: source,\n expandedItems,\n expandedCount: expandedItems.length,\n });\n }\n\n render() {\n return (\n <div\n class=\"flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]\"\n role=\"group\"\n aria-label=\"Accordion group\"\n >\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n );\n }\n}"],"version":3}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface BcmDrawer extends Components.BcmDrawer, HTMLElement {}
|
|
4
|
+
export const BcmDrawer: {
|
|
5
|
+
prototype: BcmDrawer;
|
|
6
|
+
new (): BcmDrawer;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|