@beeq/core 1.12.3-beta.1 → 1.12.3
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/beeq/beeq.esm.js +1 -1
- package/dist/beeq/{p-f4e10d02.entry.js → p-038d9bc4.entry.js} +2 -2
- package/dist/beeq/{p-f4e10d02.entry.js.map → p-038d9bc4.entry.js.map} +1 -1
- package/dist/beeq/{p-35ac62de.entry.js → p-1c1ee013.entry.js} +2 -2
- package/dist/beeq/{p-35ac62de.entry.js.map → p-1c1ee013.entry.js.map} +1 -1
- package/dist/beeq/{p-5470aa13.entry.js → p-20e8bc04.entry.js} +2 -2
- package/dist/beeq/{p-5470aa13.entry.js.map → p-20e8bc04.entry.js.map} +1 -1
- package/dist/beeq/{p-033c3388.entry.js → p-22c78250.entry.js} +2 -2
- package/dist/beeq/{p-033c3388.entry.js.map → p-22c78250.entry.js.map} +1 -1
- package/dist/beeq/{p-387118a7.entry.js → p-31719229.entry.js} +2 -2
- package/dist/beeq/{p-387118a7.entry.js.map → p-31719229.entry.js.map} +1 -1
- package/dist/beeq/{p-4ff271eb.entry.js → p-42f99ec4.entry.js} +2 -2
- package/dist/beeq/{p-4ff271eb.entry.js.map → p-42f99ec4.entry.js.map} +1 -1
- package/dist/beeq/{p-2570b7ff.entry.js → p-4db3ffaa.entry.js} +2 -2
- package/dist/beeq/{p-2570b7ff.entry.js.map → p-4db3ffaa.entry.js.map} +1 -1
- package/dist/beeq/{p-6201036d.entry.js → p-5ca3316e.entry.js} +2 -2
- package/dist/beeq/{p-6201036d.entry.js.map → p-5ca3316e.entry.js.map} +1 -1
- package/dist/beeq/{p-e77d3f61.entry.js → p-617e5993.entry.js} +2 -2
- package/dist/beeq/{p-e77d3f61.entry.js.map → p-617e5993.entry.js.map} +1 -1
- package/dist/beeq/{p-870a254b.entry.js → p-648be77e.entry.js} +2 -2
- package/dist/beeq/{p-870a254b.entry.js.map → p-648be77e.entry.js.map} +1 -1
- package/dist/beeq/{p-e4af172b.entry.js → p-70129a03.entry.js} +2 -2
- package/dist/beeq/{p-e4af172b.entry.js.map → p-70129a03.entry.js.map} +1 -1
- package/dist/beeq/{p-f36a1911.entry.js → p-73684bb1.entry.js} +2 -2
- package/dist/beeq/{p-f36a1911.entry.js.map → p-73684bb1.entry.js.map} +1 -1
- package/dist/beeq/{p-d347f0e6.entry.js → p-78c43b87.entry.js} +2 -2
- package/dist/beeq/{p-d347f0e6.entry.js.map → p-78c43b87.entry.js.map} +1 -1
- package/dist/beeq/{p-8fc16bea.entry.js → p-8827075b.entry.js} +2 -2
- package/dist/beeq/{p-8fc16bea.entry.js.map → p-8827075b.entry.js.map} +1 -1
- package/dist/beeq/{p-b7b98c49.entry.js → p-8928375e.entry.js} +2 -2
- package/dist/beeq/{p-b7b98c49.entry.js.map → p-8928375e.entry.js.map} +1 -1
- package/dist/beeq/{p-b145d6d1.entry.js → p-8e330c1e.entry.js} +2 -2
- package/dist/beeq/{p-b145d6d1.entry.js.map → p-8e330c1e.entry.js.map} +1 -1
- package/dist/beeq/{p-5a215192.entry.js → p-9cbc5e5a.entry.js} +2 -2
- package/dist/beeq/{p-5a215192.entry.js.map → p-9cbc5e5a.entry.js.map} +1 -1
- package/dist/beeq/{p-11b77548.entry.js → p-9fb4173e.entry.js} +2 -2
- package/dist/beeq/{p-11b77548.entry.js.map → p-9fb4173e.entry.js.map} +1 -1
- package/dist/beeq/{p-db234ca5.entry.js → p-bbda98b4.entry.js} +2 -2
- package/dist/beeq/{p-db234ca5.entry.js.map → p-bbda98b4.entry.js.map} +1 -1
- package/dist/beeq/{p-da0bf8af.entry.js → p-ca5a4a52.entry.js} +2 -2
- package/dist/beeq/{p-da0bf8af.entry.js.map → p-ca5a4a52.entry.js.map} +1 -1
- package/dist/beeq/{p-e05c6567.entry.js → p-cd6e4ee0.entry.js} +2 -2
- package/dist/beeq/{p-e05c6567.entry.js.map → p-cd6e4ee0.entry.js.map} +1 -1
- package/dist/beeq/{p-425243bc.entry.js → p-d2bf32a5.entry.js} +2 -2
- package/dist/beeq/{p-425243bc.entry.js.map → p-d2bf32a5.entry.js.map} +1 -1
- package/dist/beeq/{p-4bc4a8f0.entry.js → p-d8392d71.entry.js} +2 -2
- package/dist/beeq/{p-4bc4a8f0.entry.js.map → p-d8392d71.entry.js.map} +1 -1
- package/dist/beeq/{p-3001cb56.entry.js → p-db100fa9.entry.js} +2 -2
- package/dist/beeq/{p-3001cb56.entry.js.map → p-db100fa9.entry.js.map} +1 -1
- package/dist/beeq/{p-27d033d7.entry.js → p-ded7a5f7.entry.js} +2 -2
- package/dist/beeq/{p-27d033d7.entry.js.map → p-ded7a5f7.entry.js.map} +1 -1
- package/dist/beeq/{p-0ddead9f.entry.js → p-e942f0b7.entry.js} +2 -2
- package/dist/beeq/{p-0ddead9f.entry.js.map → p-e942f0b7.entry.js.map} +1 -1
- package/dist/beeq/p-f34cd07f.entry.js +6 -0
- package/dist/beeq/{p-90694722.entry.js.map → p-f34cd07f.entry.js.map} +1 -1
- package/dist/beeq/{p-8c43ee2b.entry.js → p-f9db00e0.entry.js} +2 -2
- package/dist/beeq/{p-8c43ee2b.entry.js.map → p-f9db00e0.entry.js.map} +1 -1
- package/dist/beeq/{p-89a73cb0.entry.js → p-fd91cc6b.entry.js} +2 -2
- package/dist/beeq/{p-89a73cb0.entry.js.map → p-fd91cc6b.entry.js.map} +1 -1
- package/dist/beeq.html-custom-data.json +111 -111
- package/dist/cjs/bq-accordion-group.cjs.entry.js +1 -1
- package/dist/cjs/bq-accordion-group.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-alert.cjs.entry.js +1 -1
- package/dist/cjs/bq-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-avatar.cjs.entry.js +1 -1
- package/dist/cjs/bq-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-breadcrumb-item.cjs.entry.js +1 -1
- package/dist/cjs/bq-breadcrumb-item.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/bq-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-button_2.cjs.entry.js +1 -1
- package/dist/cjs/bq-button_2.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-card.cjs.entry.js +1 -1
- package/dist/cjs/bq-card.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/bq-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-date-picker.cjs.entry.js +1 -1
- package/dist/cjs/bq-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-dialog.cjs.entry.js +1 -1
- package/dist/cjs/bq-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-drawer.cjs.entry.js +1 -1
- package/dist/cjs/bq-drawer.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-dropdown_2.cjs.entry.js +2 -2
- package/dist/cjs/bq-dropdown_2.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-empty-state.cjs.entry.js +1 -1
- package/dist/cjs/bq-empty-state.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-input.cjs.entry.js +1 -1
- package/dist/cjs/bq-input.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-notification.cjs.entry.js +1 -1
- package/dist/cjs/bq-notification.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-option-group.cjs.entry.js +1 -1
- package/dist/cjs/bq-option-group.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-option-list_2.cjs.entry.js +1 -1
- package/dist/cjs/bq-option-list_2.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-option.cjs.entry.js +1 -1
- package/dist/cjs/bq-option.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-page-title.cjs.entry.js +1 -1
- package/dist/cjs/bq-page-title.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-progress.cjs.entry.js +1 -1
- package/dist/cjs/bq-progress.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-select.cjs.entry.js +1 -1
- package/dist/cjs/bq-select.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-side-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/bq-side-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-spinner.cjs.entry.js +1 -1
- package/dist/cjs/bq-spinner.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-status.cjs.entry.js +1 -1
- package/dist/cjs/bq-status.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-step-item.cjs.entry.js +1 -1
- package/dist/cjs/bq-step-item.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-switch.cjs.entry.js +1 -1
- package/dist/cjs/bq-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-tab.cjs.entry.js +1 -1
- package/dist/cjs/bq-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-textarea.cjs.entry.js +1 -1
- package/dist/cjs/bq-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-toast.cjs.entry.js +1 -1
- package/dist/cjs/bq-toast.cjs.entry.js.map +1 -1
- package/dist/collection/components/select/bq-select.js +2 -2
- package/dist/collection/components/select/scss/bq-select.css +1 -1
- package/dist/components/bq-accordion-group.js +1 -1
- package/dist/components/bq-accordion-group.js.map +1 -1
- package/dist/components/bq-alert.js +1 -1
- package/dist/components/bq-alert.js.map +1 -1
- package/dist/components/bq-avatar.js +1 -1
- package/dist/components/bq-avatar.js.map +1 -1
- package/dist/components/bq-breadcrumb-item.js +1 -1
- package/dist/components/bq-breadcrumb-item.js.map +1 -1
- package/dist/components/bq-breadcrumb.js +1 -1
- package/dist/components/bq-breadcrumb.js.map +1 -1
- package/dist/components/bq-button.js +1 -1
- package/dist/components/bq-card.js +1 -1
- package/dist/components/bq-card.js.map +1 -1
- package/dist/components/bq-checkbox.js +1 -1
- package/dist/components/bq-checkbox.js.map +1 -1
- package/dist/components/bq-date-picker.js +1 -1
- package/dist/components/bq-date-picker.js.map +1 -1
- package/dist/components/bq-dialog.js +1 -1
- package/dist/components/bq-dialog.js.map +1 -1
- package/dist/components/bq-drawer.js +1 -1
- package/dist/components/bq-drawer.js.map +1 -1
- package/dist/components/bq-dropdown.js +1 -1
- package/dist/components/bq-empty-state.js +1 -1
- package/dist/components/bq-empty-state.js.map +1 -1
- package/dist/components/bq-input.js +1 -1
- package/dist/components/bq-input.js.map +1 -1
- package/dist/components/bq-notification.js +1 -1
- package/dist/components/bq-notification.js.map +1 -1
- package/dist/components/bq-option-group.js +1 -1
- package/dist/components/bq-option-group.js.map +1 -1
- package/dist/components/bq-option.js +1 -1
- package/dist/components/bq-option.js.map +1 -1
- package/dist/components/bq-page-title.js +1 -1
- package/dist/components/bq-page-title.js.map +1 -1
- package/dist/components/bq-panel.js +1 -1
- package/dist/components/bq-progress.js +1 -1
- package/dist/components/bq-progress.js.map +1 -1
- package/dist/components/bq-select.js +1 -1
- package/dist/components/bq-select.js.map +1 -1
- package/dist/components/bq-side-menu-item.js +1 -1
- package/dist/components/bq-side-menu-item.js.map +1 -1
- package/dist/components/bq-spinner.js +1 -1
- package/dist/components/bq-spinner.js.map +1 -1
- package/dist/components/bq-status.js +1 -1
- package/dist/components/bq-status.js.map +1 -1
- package/dist/components/bq-step-item.js +1 -1
- package/dist/components/bq-step-item.js.map +1 -1
- package/dist/components/bq-switch.js +1 -1
- package/dist/components/bq-switch.js.map +1 -1
- package/dist/components/bq-tab.js +1 -1
- package/dist/components/bq-tab.js.map +1 -1
- package/dist/components/bq-tag.js +1 -1
- package/dist/components/bq-textarea.js +1 -1
- package/dist/components/bq-textarea.js.map +1 -1
- package/dist/components/bq-toast.js +1 -1
- package/dist/components/bq-toast.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{p-Uk5_wh1P.js → p-B4tGTtm-.js} +2 -2
- package/dist/components/{p-Uk5_wh1P.js.map → p-B4tGTtm-.js.map} +1 -1
- package/dist/components/{p-q6Uu8qM4.js → p-CPvi2234.js} +2 -2
- package/dist/components/{p-q6Uu8qM4.js.map → p-CPvi2234.js.map} +1 -1
- package/dist/components/{p-EYY4o9-y.js → p-DKNWDjsW.js} +2 -2
- package/dist/components/{p-EYY4o9-y.js.map → p-DKNWDjsW.js.map} +1 -1
- package/dist/components/{p-5YGU5U40.js → p-sARU_ILE.js} +2 -2
- package/dist/components/{p-5YGU5U40.js.map → p-sARU_ILE.js.map} +1 -1
- package/dist/custom-elements.json +2082 -2082
- package/dist/esm/bq-accordion-group.entry.js +1 -1
- package/dist/esm/bq-accordion-group.entry.js.map +1 -1
- package/dist/esm/bq-alert.entry.js +1 -1
- package/dist/esm/bq-alert.entry.js.map +1 -1
- package/dist/esm/bq-avatar.entry.js +1 -1
- package/dist/esm/bq-avatar.entry.js.map +1 -1
- package/dist/esm/bq-breadcrumb-item.entry.js +1 -1
- package/dist/esm/bq-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/bq-breadcrumb.entry.js +1 -1
- package/dist/esm/bq-breadcrumb.entry.js.map +1 -1
- package/dist/esm/bq-button_2.entry.js +1 -1
- package/dist/esm/bq-button_2.entry.js.map +1 -1
- package/dist/esm/bq-card.entry.js +1 -1
- package/dist/esm/bq-card.entry.js.map +1 -1
- package/dist/esm/bq-checkbox.entry.js +1 -1
- package/dist/esm/bq-checkbox.entry.js.map +1 -1
- package/dist/esm/bq-date-picker.entry.js +1 -1
- package/dist/esm/bq-date-picker.entry.js.map +1 -1
- package/dist/esm/bq-dialog.entry.js +1 -1
- package/dist/esm/bq-dialog.entry.js.map +1 -1
- package/dist/esm/bq-drawer.entry.js +1 -1
- package/dist/esm/bq-drawer.entry.js.map +1 -1
- package/dist/esm/bq-dropdown_2.entry.js +2 -2
- package/dist/esm/bq-dropdown_2.entry.js.map +1 -1
- package/dist/esm/bq-empty-state.entry.js +1 -1
- package/dist/esm/bq-empty-state.entry.js.map +1 -1
- package/dist/esm/bq-input.entry.js +1 -1
- package/dist/esm/bq-input.entry.js.map +1 -1
- package/dist/esm/bq-notification.entry.js +1 -1
- package/dist/esm/bq-notification.entry.js.map +1 -1
- package/dist/esm/bq-option-group.entry.js +1 -1
- package/dist/esm/bq-option-group.entry.js.map +1 -1
- package/dist/esm/bq-option-list_2.entry.js +1 -1
- package/dist/esm/bq-option-list_2.entry.js.map +1 -1
- package/dist/esm/bq-option.entry.js +1 -1
- package/dist/esm/bq-option.entry.js.map +1 -1
- package/dist/esm/bq-page-title.entry.js +1 -1
- package/dist/esm/bq-page-title.entry.js.map +1 -1
- package/dist/esm/bq-progress.entry.js +1 -1
- package/dist/esm/bq-progress.entry.js.map +1 -1
- package/dist/esm/bq-select.entry.js +1 -1
- package/dist/esm/bq-select.entry.js.map +1 -1
- package/dist/esm/bq-side-menu-item.entry.js +1 -1
- package/dist/esm/bq-side-menu-item.entry.js.map +1 -1
- package/dist/esm/bq-spinner.entry.js +1 -1
- package/dist/esm/bq-spinner.entry.js.map +1 -1
- package/dist/esm/bq-status.entry.js +1 -1
- package/dist/esm/bq-status.entry.js.map +1 -1
- package/dist/esm/bq-step-item.entry.js +1 -1
- package/dist/esm/bq-step-item.entry.js.map +1 -1
- package/dist/esm/bq-switch.entry.js +1 -1
- package/dist/esm/bq-switch.entry.js.map +1 -1
- package/dist/esm/bq-tab.entry.js +1 -1
- package/dist/esm/bq-tab.entry.js.map +1 -1
- package/dist/esm/bq-textarea.entry.js +1 -1
- package/dist/esm/bq-textarea.entry.js.map +1 -1
- package/dist/esm/bq-toast.entry.js +1 -1
- package/dist/esm/bq-toast.entry.js.map +1 -1
- package/dist/hydrate/index.js +1 -1
- package/dist/hydrate/index.mjs +1 -1
- package/package.json +1 -1
- package/dist/beeq/p-90694722.entry.js +0 -6
- /package/dist/types/{Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System → home/runner/work/BEEQ/BEEQ}/.stencil/packages/beeq/jest.config.d.ts +0 -0
- /package/dist/types/{Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System → home/runner/work/BEEQ/BEEQ}/.stencil/packages/beeq/stencil.config.d.ts +0 -0
- /package/dist/types/{Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System → home/runner/work/BEEQ/BEEQ}/.stencil/tailwind.config.d.ts +0 -0
|
@@ -71,48 +71,6 @@
|
|
|
71
71
|
],
|
|
72
72
|
"references": []
|
|
73
73
|
},
|
|
74
|
-
{
|
|
75
|
-
"name": "bq-avatar",
|
|
76
|
-
"description": "The Avatar component is a simple and customizable element that displays an image or initials in a circular or square shape.\nThis component is useful for displaying user profile pictures or any other image that represents a person or an entity.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-avatar\nalt-text=\"John Doe profile picture\"\nimage=\"/image/url/photo-1524593689594.jpeg\"\nlabel=\"John Doe profile picture\"\nshape=\"circle\"\nsize=\"medium\"\n>\n<bq-badge slot=\"badge\" text-color=\"#fff\">9</bq-badge>\n</bq-avatar>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **badge** - The badge slot is used to add a badge to the avatar. The badge is a small circle or square that can be used to display a number or a status.\n\n### **CSS Properties:**\n - **--bq-avatar--background** - Avatar background color _(default: undefined)_\n- **--bq-avatar--border-color** - Avatar border color _(default: undefined)_\n- **--bq-avatar--border-style** - Avatar border style _(default: undefined)_\n- **--bq-avatar--border-width** - Avatar border width _(default: undefined)_\n- **--bq-avatar--border-radius-circle** - Avatar border radius for circle & any size _(default: undefined)_\n- **--bq-avatar--border-radius-squareXs** - Avatar border radius for square & size xsmall _(default: undefined)_\n- **--bq-avatar--border-radius-squareS** - Avatar border radius for square & size small _(default: undefined)_\n- **--bq-avatar--border-radius-squareM** - Avatar border radius for square & size medium/large _(default: undefined)_\n- **--bq-avatar--size-xsmall** - Avatar xsmall size _(default: undefined)_\n- **--bq-avatar--size-small** - Avatar small size _(default: undefined)_\n- **--bq-avatar--size-medium** - Avatar medium size _(default: undefined)_\n- **--bq-avatar--size-large** - Avatar large size _(default: undefined)_\n- **--bq-avatar--badge-top-square** - Badge top position shape square _(default: undefined)_\n- **--bq-avatar--badge-left-square** - Badge left position shape square _(default: undefined)_\n- **--bq-avatar--badge-top-circle** - Badge top position shape circle _(default: undefined)_\n- **--bq-avatar--badge-left-circle** - Badge left position shape circle _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **img** - The `<image>` tag element that load the image source.\n- **text** - The `<span>` tag element that rendered the `Initials` text string.\n- **badge** - The container that wraps the badge slot element.",
|
|
77
|
-
"attributes": [
|
|
78
|
-
{
|
|
79
|
-
"name": "alt-text",
|
|
80
|
-
"description": "Alternate text for the avatar image if the image cannot be displayed.",
|
|
81
|
-
"values": []
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
"name": "image",
|
|
85
|
-
"description": "The image source to load on the avatar (this can be also a base64 encoded image).",
|
|
86
|
-
"values": []
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
"name": "label",
|
|
90
|
-
"description": "A text to use for describing the avatar on assistive devices.",
|
|
91
|
-
"values": []
|
|
92
|
-
},
|
|
93
|
-
{
|
|
94
|
-
"name": "initials",
|
|
95
|
-
"description": "The text to display on avatar.",
|
|
96
|
-
"values": []
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
"name": "shape",
|
|
100
|
-
"description": "The shape of the avatar.",
|
|
101
|
-
"values": [{ "name": "circle" }, { "name": "square" }]
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
"name": "size",
|
|
105
|
-
"description": "The size of the avatar.",
|
|
106
|
-
"values": [
|
|
107
|
-
{ "name": "xsmall" },
|
|
108
|
-
{ "name": "small" },
|
|
109
|
-
{ "name": "medium" },
|
|
110
|
-
{ "name": "large" }
|
|
111
|
-
]
|
|
112
|
-
}
|
|
113
|
-
],
|
|
114
|
-
"references": []
|
|
115
|
-
},
|
|
116
74
|
{
|
|
117
75
|
"name": "bq-alert",
|
|
118
76
|
"description": "The Alert is a user interface component used to convey important information to the user in a clear and concise manner.\nIt can be used to notify users of success, failure, warning, or any other type of information that needs to be brought to their attention.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-alert>\n<bq-icon name=\"star\" slot=\"icon\"></bq-icon>\nTitle\n<span slot=\"body\">\nDescription\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div slot=\"footer\">\n<bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n</div>\n</bq-alert>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqHide** - Callback handler to be called when the alert is hidden\n- **bqShow** - Callback handler to be called when the alert is shown\n- **bqAfterShow** - Callback handler to be called after the alert has been shown\n- **bqAfterHide** - Callback handler to be called after the alert has been hidden\n- **bqHide** - Callback handler to be called when the alert is hidden\n- **bqShow** - Callback handler to be called when the alert is shown\n- **bqAfterShow** - Callback handler to be called after the alert has been shown\n- **bqAfterHide** - Callback handler to be called after the alert has been hidden\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to hide the alert component\n- **show(): _Promise<void>_** - Method to be called to show the alert component\n\n### **Slots:**\n - _default_ - The alert title content (no slot name required)\n- **body** - The alert description content\n- **footer** - The alert footer content\n- **icon** - The predefined icon based on the alert type (info, success, warning, error, default)\n- **btn-close** - The close button of the alert\n\n### **CSS Properties:**\n - **--bq-alert--background** - The alert background color _(default: undefined)_\n- **--bq-alert--border-radius** - The alert border radius _(default: undefined)_\n- **--bq-alert--content-footer-gap** - The alert content and footer gap _(default: undefined)_\n- **--bq-alert--title-body-gap** - The alert title and body gap _(default: undefined)_\n- **--bq-alert--border-color** - The alert border color _(default: undefined)_\n- **--bq-alert--border-style** - The alert border style _(default: undefined)_\n- **--bq-alert--border-width** - The alert border width _(default: undefined)_\n- **--bq-alert--background-info** - The alert background color for info type _(default: undefined)_\n- **--bq-alert--background-success** - The alert background color for success type _(default: undefined)_\n- **--bq-alert--background-warning** - The alert background color for warning type _(default: undefined)_\n- **--bq-alert--background-error** - The alert background color for error type _(default: undefined)_\n- **--bq-alert--border-info** - The alert border color for info type _(default: undefined)_\n- **--bq-alert--border-success** - The alert border color for success type _(default: undefined)_\n- **--bq-alert--border-warning** - The alert border color for warning type _(default: undefined)_\n- **--bq-alert--border-error** - The alert border color for error type _(default: undefined)_\n- **--bq-alert--icon-color-info** - The alert icon color for info type _(default: undefined)_\n- **--bq-alert--icon-color-success** - The alert icon color for success type _(default: undefined)_\n- **--bq-alert--icon-color-warning** - The alert icon color for warning type _(default: undefined)_\n- **--bq-alert--icon-color-error** - The alert icon color for error type _(default: undefined)_\n- **--bq-alert--padding** - The alert padding _(default: undefined)_\n- **--bq-alert--min-width** - The alert min width _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<div>` container of the predefined bq-icon component\n- **body** - The container `<div>` that wraps the alert description content\n- **btn-close** - The native button of the `bq-button` used to close the alert\n- **content** - The container `<div>` that wraps all the alert content (title, description, footer)\n- **footer** - The container `<div>` that wraps the alert footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon based on the alert type (info, success, warning, error, default)\n- **icon-outline** - The container `<div>` that wraps the icon element\n- **main** - The container `<div>` that wraps the alert main content (title, description)\n- **svg** - The `<svg>` element of the predefined bq-icon component\n- **title** - The container `<div>` that wraps the alert title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
|
|
@@ -174,6 +132,48 @@
|
|
|
174
132
|
],
|
|
175
133
|
"references": []
|
|
176
134
|
},
|
|
135
|
+
{
|
|
136
|
+
"name": "bq-avatar",
|
|
137
|
+
"description": "The Avatar component is a simple and customizable element that displays an image or initials in a circular or square shape.\nThis component is useful for displaying user profile pictures or any other image that represents a person or an entity.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-avatar\nalt-text=\"John Doe profile picture\"\nimage=\"/image/url/photo-1524593689594.jpeg\"\nlabel=\"John Doe profile picture\"\nshape=\"circle\"\nsize=\"medium\"\n>\n<bq-badge slot=\"badge\" text-color=\"#fff\">9</bq-badge>\n</bq-avatar>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **badge** - The badge slot is used to add a badge to the avatar. The badge is a small circle or square that can be used to display a number or a status.\n\n### **CSS Properties:**\n - **--bq-avatar--background** - Avatar background color _(default: undefined)_\n- **--bq-avatar--border-color** - Avatar border color _(default: undefined)_\n- **--bq-avatar--border-style** - Avatar border style _(default: undefined)_\n- **--bq-avatar--border-width** - Avatar border width _(default: undefined)_\n- **--bq-avatar--border-radius-circle** - Avatar border radius for circle & any size _(default: undefined)_\n- **--bq-avatar--border-radius-squareXs** - Avatar border radius for square & size xsmall _(default: undefined)_\n- **--bq-avatar--border-radius-squareS** - Avatar border radius for square & size small _(default: undefined)_\n- **--bq-avatar--border-radius-squareM** - Avatar border radius for square & size medium/large _(default: undefined)_\n- **--bq-avatar--size-xsmall** - Avatar xsmall size _(default: undefined)_\n- **--bq-avatar--size-small** - Avatar small size _(default: undefined)_\n- **--bq-avatar--size-medium** - Avatar medium size _(default: undefined)_\n- **--bq-avatar--size-large** - Avatar large size _(default: undefined)_\n- **--bq-avatar--badge-top-square** - Badge top position shape square _(default: undefined)_\n- **--bq-avatar--badge-left-square** - Badge left position shape square _(default: undefined)_\n- **--bq-avatar--badge-top-circle** - Badge top position shape circle _(default: undefined)_\n- **--bq-avatar--badge-left-circle** - Badge left position shape circle _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **img** - The `<image>` tag element that load the image source.\n- **text** - The `<span>` tag element that rendered the `Initials` text string.\n- **badge** - The container that wraps the badge slot element.",
|
|
138
|
+
"attributes": [
|
|
139
|
+
{
|
|
140
|
+
"name": "alt-text",
|
|
141
|
+
"description": "Alternate text for the avatar image if the image cannot be displayed.",
|
|
142
|
+
"values": []
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"name": "image",
|
|
146
|
+
"description": "The image source to load on the avatar (this can be also a base64 encoded image).",
|
|
147
|
+
"values": []
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"name": "label",
|
|
151
|
+
"description": "A text to use for describing the avatar on assistive devices.",
|
|
152
|
+
"values": []
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"name": "initials",
|
|
156
|
+
"description": "The text to display on avatar.",
|
|
157
|
+
"values": []
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"name": "shape",
|
|
161
|
+
"description": "The shape of the avatar.",
|
|
162
|
+
"values": [{ "name": "circle" }, { "name": "square" }]
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"name": "size",
|
|
166
|
+
"description": "The size of the avatar.",
|
|
167
|
+
"values": [
|
|
168
|
+
{ "name": "xsmall" },
|
|
169
|
+
{ "name": "small" },
|
|
170
|
+
{ "name": "medium" },
|
|
171
|
+
{ "name": "large" }
|
|
172
|
+
]
|
|
173
|
+
}
|
|
174
|
+
],
|
|
175
|
+
"references": []
|
|
176
|
+
},
|
|
177
177
|
{
|
|
178
178
|
"name": "bq-badge",
|
|
179
179
|
"description": "The Badge component is a visual indicator that can be added to various elements within a user interface.\nIt is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-badge background-color=\"ui--success\" text-color=\"text--inverse\" size=\"small\">9</bq-badge>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot is used to add content to the badge. The content can be a number or a text.\n\n### **CSS Properties:**\n - **--bq-badge--background-color** - The badge background color _(default: undefined)_\n- **--bq-badge--box-shadow** - The badge box shadow _(default: undefined)_\n- **--bq-badge--border-color** - The badge border color _(default: undefined)_\n- **--bq-badge--border-radius** - The badge border radius _(default: undefined)_\n- **--bq-badge--border-style** - The badge border style _(default: undefined)_\n- **--bq-badge--border-width** - The badge border width _(default: undefined)_\n- **--bq-badge--size-small** - The badge small size _(default: undefined)_\n- **--bq-badge--size-medium** - The badge medium size _(default: undefined)_\n- **--bq-badge--size-large** - The badge large size _(default: undefined)_\n- **--bq-badge--text-color** - The badge text color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper that holds the count.\n- **number** - The component's internal wrapper that holds the slot.",
|
|
@@ -200,6 +200,28 @@
|
|
|
200
200
|
],
|
|
201
201
|
"references": []
|
|
202
202
|
},
|
|
203
|
+
{
|
|
204
|
+
"name": "bq-breadcrumb-item",
|
|
205
|
+
"description": "The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb-item label=\"Home page\">\n<bq-icon name=\"house-line\" size=\"16\"></bq-icon>\nHome\n</bq-breadcrumb-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqBlur** - Handler to be called when item loses focus\n- **bqBlur** - Handler to be called when item loses focus\n- **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n\n### **Slots:**\n - _default_ - The default slot is used to add content to the breadcrumb item.\n\n### **CSS Properties:**\n - **--bq-breadcrumb-item--background** - Background color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--box-shadow** - Box shadow of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-color** - Border color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-style** - Border style of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-width** - Border width of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-radius** - Border radius of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--line-height** - Line height of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color** - Text color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color-current** - Text color of the current breadcrumb item (active) _(default: undefined)_\n- **--bq-breadcrumb-item--text-size** - Text size of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-size-separator** - Text size of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start** - Padding start of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end** - Padding end of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--paddingY** - Padding top and bottom of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start-separator** - Padding start of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end-separator** - Padding end of the breadcrumb item separator _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container\n- **content** - The `span` tag that wraps the content item\n- **item** - The breadcrumb item wrapper (`button` or `a`)\n- **separator** - The `span` tag that wraps the separator element",
|
|
206
|
+
"attributes": [
|
|
207
|
+
{
|
|
208
|
+
"name": "href",
|
|
209
|
+
"description": "If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.",
|
|
210
|
+
"values": []
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
"name": "target",
|
|
214
|
+
"description": "Where to display the link in the browser context. Relevant only if `href` is set.",
|
|
215
|
+
"values": []
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
"name": "rel",
|
|
219
|
+
"description": "Where to display the link in the browser context. Relevant only if `href` is set.",
|
|
220
|
+
"values": []
|
|
221
|
+
}
|
|
222
|
+
],
|
|
223
|
+
"references": []
|
|
224
|
+
},
|
|
203
225
|
{
|
|
204
226
|
"name": "bq-button",
|
|
205
227
|
"description": "Buttons are designed for users to take action on a page or a screen.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-button appearance=\"primary\" border=\"m\" size=\"medium\">\n<bq-icon name=\"arrow-circle-left\" slot=\"prefix\"></bq-icon>\nGo back\n</bq-button>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when button gets focus\n- **bqClick** - Handler to be called when the button is clicked\n- **bqBlur** - Handler to be called when the button loses focus.\n- **bqFocus** - Handler to be called when the button gets focus.\n- **bqClick** - Handler to be called when the button is clicked.\n\n### **Slots:**\n - **prefix** - The prefix content to be displayed before the button label\n- _default_ - The button label content\n- **suffix** - The suffix content to be displayed after the button label\n\n### **CSS Properties:**\n - **--bq-button--border-color** - Button border color _(default: undefined)_\n- **--bq-button--border-radius** - Button border radius _(default: undefined)_\n- **--bq-button--border-style** - Button border style _(default: undefined)_\n- **--bq-button--border-width** - Button border width _(default: undefined)_\n- **--bq-button--small-paddingX** - Button small padding block (top and bottom) _(default: undefined)_\n- **--bq-button--small-paddingY** - Button small padding inline (left and right) _(default: undefined)_\n- **--bq-button--small-font-size** - Button small font size _(default: undefined)_\n- **--bq-button--medium-paddingX** - Button medium padding block (top and bottom) _(default: undefined)_\n- **--bq-button--medium-paddingY** - Button medium padding inline (left and right) _(default: undefined)_\n- **--bq-button--medium-font-size** - Button medium font size _(default: undefined)_\n- **--bq-button--large-paddingX** - Button large padding block (top and bottom) _(default: undefined)_\n- **--bq-button--large-paddingY** - Button large padding inline (left and right) _(default: undefined)_\n- **--bq-button--large-font-size** - Button large font size _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The `<a>` or `<button>` HTML element used under the hood.\n- **prefix** - The `<span>` tag element that acts as prefix container.\n- **label** - The `<span>` tag element that renders the text of the button.\n- **suffix** - The `<span>` tag element that acts as suffix container.",
|
|
@@ -315,28 +337,6 @@
|
|
|
315
337
|
],
|
|
316
338
|
"references": []
|
|
317
339
|
},
|
|
318
|
-
{
|
|
319
|
-
"name": "bq-breadcrumb-item",
|
|
320
|
-
"description": "The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb-item label=\"Home page\">\n<bq-icon name=\"house-line\" size=\"16\"></bq-icon>\nHome\n</bq-breadcrumb-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqBlur** - Handler to be called when item loses focus\n- **bqBlur** - Handler to be called when item loses focus\n- **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n\n### **Slots:**\n - _default_ - The default slot is used to add content to the breadcrumb item.\n\n### **CSS Properties:**\n - **--bq-breadcrumb-item--background** - Background color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--box-shadow** - Box shadow of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-color** - Border color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-style** - Border style of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-width** - Border width of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-radius** - Border radius of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--line-height** - Line height of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color** - Text color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color-current** - Text color of the current breadcrumb item (active) _(default: undefined)_\n- **--bq-breadcrumb-item--text-size** - Text size of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-size-separator** - Text size of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start** - Padding start of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end** - Padding end of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--paddingY** - Padding top and bottom of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start-separator** - Padding start of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end-separator** - Padding end of the breadcrumb item separator _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container\n- **content** - The `span` tag that wraps the content item\n- **item** - The breadcrumb item wrapper (`button` or `a`)\n- **separator** - The `span` tag that wraps the separator element",
|
|
321
|
-
"attributes": [
|
|
322
|
-
{
|
|
323
|
-
"name": "href",
|
|
324
|
-
"description": "If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.",
|
|
325
|
-
"values": []
|
|
326
|
-
},
|
|
327
|
-
{
|
|
328
|
-
"name": "target",
|
|
329
|
-
"description": "Where to display the link in the browser context. Relevant only if `href` is set.",
|
|
330
|
-
"values": []
|
|
331
|
-
},
|
|
332
|
-
{
|
|
333
|
-
"name": "rel",
|
|
334
|
-
"description": "Where to display the link in the browser context. Relevant only if `href` is set.",
|
|
335
|
-
"values": []
|
|
336
|
-
}
|
|
337
|
-
],
|
|
338
|
-
"references": []
|
|
339
|
-
},
|
|
340
340
|
{
|
|
341
341
|
"name": "bq-card",
|
|
342
342
|
"description": "The Card component serves as a versatile container designed for flexible content presentation within user interfaces.\nIts structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-card type=\"default\" border=\"m\">\n<div class=\"p-m\">\n<h3 class=\"text-xl font-bold\">Card Title</h3>\n<p class=\"text-m\">Card content goes here</p>\n</div>\n</bq-card>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The content of the card component\n\n### **CSS Properties:**\n - **--bq-card--borderColor** - Card border color _(default: undefined)_\n- **--bq-card--borderRadius** - Card border radius _(default: undefined)_\n- **--bq-card--borderStyle** - Card border style _(default: undefined)_\n- **--bq-card--borderWidth** - Card border width _(default: undefined)_\n- **--bq-card--padding** - Card padding _(default: undefined)_\n- **--bq-card--paddingMinimal** - Minimal card padding _(default: undefined)_\n- **--bq-card--background** - Card background color _(default: undefined)_\n\n### **CSS Parts:**\n - **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
|
|
@@ -743,6 +743,22 @@
|
|
|
743
743
|
],
|
|
744
744
|
"references": []
|
|
745
745
|
},
|
|
746
|
+
{
|
|
747
|
+
"name": "bq-empty-state",
|
|
748
|
+
"description": "An Empty State is a UI component displayed when there is no data or content available, often used in dynamic or inactive application states.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-empty-state size=\"medium\">Title</bq-empty-state>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **thumbnail** - The element that wraps the thumbnail element\n- **body** - The content to be displayed after the thumbnail section\n- **footer** - The content to be displayed after the body section as footer\n\n### **CSS Parts:**\n - **body** - The container `<div>` that wraps the alert description content\n- **footer** - The container `<div>` that wraps the alert footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)\n- **thumbnail** - The container `<div>` that wraps the thumbnail element\n- **title** - The container `<div>` that wraps the empty state title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
|
|
749
|
+
"attributes": [
|
|
750
|
+
{
|
|
751
|
+
"name": "size",
|
|
752
|
+
"description": "The size of the empty state component",
|
|
753
|
+
"values": [
|
|
754
|
+
{ "name": "large" },
|
|
755
|
+
{ "name": "medium" },
|
|
756
|
+
{ "name": "small" }
|
|
757
|
+
]
|
|
758
|
+
}
|
|
759
|
+
],
|
|
760
|
+
"references": []
|
|
761
|
+
},
|
|
746
762
|
{
|
|
747
763
|
"name": "bq-dropdown",
|
|
748
764
|
"description": "The Dropdown Component is commonly used when presenting a list of selectable options that are too numerous to fit comfortably on the screen.\nThey provide an efficient way to save space and present a long list of options in a compact and organized manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-dropdown placement=\"bottom-start\">\n<bq-button slot=\"trigger\">Dropdown</bq-button>\n<bq-option-list>\n<bq-option value=\"users\">...</bq-option>\n<bq-option value=\"user\">...</bq-option>\n<bq-option value=\"dashboard\">...</bq-option>\n<bq-option value=\"settings\">...</bq-option>\n<bq-option value=\"logout\">...</bq-option>\n</bq-option-list>\n</bq-dropdown>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqOpen** - Callback handler to be called when the dropdown panel is opened or closed.\n- **bqOpen** - Callback handler to be called when the dropdown panel is opened or closed.\n\n### **Methods:**\n - **onClickOutside(event: _MouseEvent_)** - Listens for the 'click' event on the document object\nand closes the dropdown panel if the click is outside the component.\n\n### **Slots:**\n - **trigger** - The trigger element that opens the dropdown panel.\n- _default_ - The content of the dropdown panel.\n\n### **CSS Properties:**\n - **--bq-panel--background** - Panel background color _(default: undefined)_\n- **--bq-panel--border-color** - Panel border color _(default: undefined)_\n- **--bq-panel--border-radius** - Panel border radius _(default: undefined)_\n- **--bq-panel--border-style** - Panel border style _(default: undefined)_\n- **--bq-panel--border-width** - Panel border width _(default: undefined)_\n- **--bq-panel--box-shadow** - Panel box shadow _(default: undefined)_\n- **--bq-panel--padding** - Panel padding _(default: undefined)_\n- **--bq-panel--height** - Panel height _(default: undefined)_\n- **--bq-panel--width** - Panel width _(default: undefined)_\n- **--bq-panel-z-index** - Panel z-index applied when opened _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **dropdown** - The `<bq-panel>` element used under the hood to display the dropdown panel.\n- **panel** - The `<div>` element used to display and style the panel inside the `<bq-panel>` element.\n- **trigger** - The `<div>` element that hosts the trigger element.",
|
|
@@ -814,56 +830,35 @@
|
|
|
814
830
|
"references": []
|
|
815
831
|
},
|
|
816
832
|
{
|
|
817
|
-
"name": "bq-
|
|
818
|
-
"description": "
|
|
819
|
-
"attributes": [
|
|
820
|
-
{
|
|
821
|
-
"name": "size",
|
|
822
|
-
"description": "The size of the empty state component",
|
|
823
|
-
"values": [
|
|
824
|
-
{ "name": "large" },
|
|
825
|
-
{ "name": "medium" },
|
|
826
|
-
{ "name": "small" }
|
|
827
|
-
]
|
|
828
|
-
}
|
|
829
|
-
],
|
|
830
|
-
"references": []
|
|
831
|
-
},
|
|
832
|
-
{
|
|
833
|
-
"name": "bq-notification",
|
|
834
|
-
"description": "The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-notification border=\"s\" time=\"3000\" type=\"info\">\nTitle\n<span slot=\"body\">\nThis is some description text text\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n</div>\n</bq-notification>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqAfterClose** - Callback handler to be called after the notification has been closed\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqAfterClose** - Callback handler to be called after the notification has been closed\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to hide the notification component\n- **show(): _Promise<void>_** - Method to be called to show the notification component\n- **toast()** - This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically\n\n### **Slots:**\n - _default_ - The notification title content\n- **body** - The notification description content\n- **footer** - The notification footer content\n- **icon** - The icon to be displayed in the notification\n- **btn-close** - The close button of the notification\n\n### **CSS Properties:**\n - **--bq-notification--background** - The notification background color _(default: undefined)_\n- **--bq-notification--box-shadow** - The notification box shadow _(default: undefined)_\n- **--bq-notification--border-color** - The notification border color _(default: undefined)_\n- **--bq-notification--border-radius** - The notification border radius _(default: undefined)_\n- **--bq-notification--border-style** - The notification border style _(default: undefined)_\n- **--bq-notification--border-width** - The notification border width _(default: undefined)_\n- **--bq-notification--content-footer-gap** - The notification content and footer gap _(default: undefined)_\n- **--bq-notification--title-body-gap** - The notification title and body gap _(default: undefined)_\n- **--bq-notification--icon-color-error** - The notification icon color for error type _(default: undefined)_\n- **--bq-notification--icon-color-info** - The notification icon color for info type _(default: undefined)_\n- **--bq-notification--icon-color-neutral** - The notification icon color for neutral type _(default: undefined)_\n- **--bq-notification--icon-color-success** - The notification icon color for success type _(default: undefined)_\n- **--bq-notification--icon-color-warning** - The notification icon color for warning type _(default: undefined)_\n- **--bq-notification--padding** - The notification padding _(default: undefined)_\n- **--bq-notification--min-width** - The notification min width _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<div>` container of the predefined bq-icon component.\n- **body** - The container `<div>` that wraps the notification description content\n- **btn-close** - The `bq-button` used to close the notification\n- **content** - The container `<div>` that wraps all the notification content (title, description, footer)\n- **footer** - The container `<div>` that wraps the notification footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon based on the notification type\n- **icon-outline** - The container `<div>` that wraps the icon element\n- **main** - The container `<div>` that wraps the notification main content (title, description)\n- **svg** - The `<svg>` element of the predefined bq-icon component.\n- **title** - The container `<div>` that wraps the notification title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
|
|
833
|
+
"name": "bq-icon",
|
|
834
|
+
"description": "The Icon component is an image that provides a visual representation of an object, action, or concept displayed on the screen.\nIt is a small graphical element that is used to enhance the user interface and improve user experience.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-icon color=\"text--brand\" name=\"bell-ringing\" size=\"24\"></bq-icon>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **svgLoaded** - Callback handler to be called when the SVG has loaded.\n- **svgLoaded** - Callback handler to be called when the SVG has loaded\n\n### **Methods:**\n - **handleWeightChange()** - !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\nWe need to maintain retro-compatibility until the next major release\n\n### **CSS Properties:**\n - **--bq-icon--color** - The stroke color of the SVG. _(default: undefined)_\n- **--bq-icon--size** - The size of the SVG. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper that holds the icon SVG content.\n- **svg** - The `<svg>` tag element inside the component.",
|
|
835
835
|
"attributes": [
|
|
836
836
|
{
|
|
837
|
-
"name": "
|
|
838
|
-
"description": "
|
|
839
|
-
"values": []
|
|
840
|
-
},
|
|
841
|
-
{
|
|
842
|
-
"name": "border",
|
|
843
|
-
"description": "The corder radius of the notification component",
|
|
837
|
+
"name": "color",
|
|
838
|
+
"description": "Set the stroke color of the SVG. The value should be a valid value of the palette color.",
|
|
844
839
|
"values": []
|
|
845
840
|
},
|
|
846
841
|
{
|
|
847
|
-
"name": "
|
|
848
|
-
"description": "
|
|
842
|
+
"name": "label",
|
|
843
|
+
"description": "Label for the icon, used for accessibility.",
|
|
849
844
|
"values": []
|
|
850
845
|
},
|
|
851
846
|
{
|
|
852
|
-
"name": "
|
|
853
|
-
"description": "
|
|
847
|
+
"name": "name",
|
|
848
|
+
"description": "Icon name to load. Please check all available icons [here](https://phosphoricons.com/).",
|
|
854
849
|
"values": []
|
|
855
850
|
},
|
|
856
851
|
{
|
|
857
|
-
"name": "
|
|
858
|
-
"description": "
|
|
852
|
+
"name": "size",
|
|
853
|
+
"description": "Set the size of the SVG.",
|
|
859
854
|
"values": []
|
|
860
855
|
},
|
|
861
856
|
{
|
|
862
|
-
"name": "
|
|
863
|
-
"description": "
|
|
857
|
+
"name": "src",
|
|
858
|
+
"description": "Set the source of the SVG. If the source is set, the name property will be ignored.",
|
|
864
859
|
"values": []
|
|
865
860
|
},
|
|
866
|
-
{ "name": "
|
|
861
|
+
{ "name": "weight", "values": [{ "name": "TIconWeight" }] }
|
|
867
862
|
],
|
|
868
863
|
"references": []
|
|
869
864
|
},
|
|
@@ -995,35 +990,40 @@
|
|
|
995
990
|
"references": []
|
|
996
991
|
},
|
|
997
992
|
{
|
|
998
|
-
"name": "bq-
|
|
999
|
-
"description": "The
|
|
993
|
+
"name": "bq-notification",
|
|
994
|
+
"description": "The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-notification border=\"s\" time=\"3000\" type=\"info\">\nTitle\n<span slot=\"body\">\nThis is some description text text\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n</div>\n</bq-notification>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqAfterClose** - Callback handler to be called after the notification has been closed\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqAfterClose** - Callback handler to be called after the notification has been closed\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to hide the notification component\n- **show(): _Promise<void>_** - Method to be called to show the notification component\n- **toast()** - This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically\n\n### **Slots:**\n - _default_ - The notification title content\n- **body** - The notification description content\n- **footer** - The notification footer content\n- **icon** - The icon to be displayed in the notification\n- **btn-close** - The close button of the notification\n\n### **CSS Properties:**\n - **--bq-notification--background** - The notification background color _(default: undefined)_\n- **--bq-notification--box-shadow** - The notification box shadow _(default: undefined)_\n- **--bq-notification--border-color** - The notification border color _(default: undefined)_\n- **--bq-notification--border-radius** - The notification border radius _(default: undefined)_\n- **--bq-notification--border-style** - The notification border style _(default: undefined)_\n- **--bq-notification--border-width** - The notification border width _(default: undefined)_\n- **--bq-notification--content-footer-gap** - The notification content and footer gap _(default: undefined)_\n- **--bq-notification--title-body-gap** - The notification title and body gap _(default: undefined)_\n- **--bq-notification--icon-color-error** - The notification icon color for error type _(default: undefined)_\n- **--bq-notification--icon-color-info** - The notification icon color for info type _(default: undefined)_\n- **--bq-notification--icon-color-neutral** - The notification icon color for neutral type _(default: undefined)_\n- **--bq-notification--icon-color-success** - The notification icon color for success type _(default: undefined)_\n- **--bq-notification--icon-color-warning** - The notification icon color for warning type _(default: undefined)_\n- **--bq-notification--padding** - The notification padding _(default: undefined)_\n- **--bq-notification--min-width** - The notification min width _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<div>` container of the predefined bq-icon component.\n- **body** - The container `<div>` that wraps the notification description content\n- **btn-close** - The `bq-button` used to close the notification\n- **content** - The container `<div>` that wraps all the notification content (title, description, footer)\n- **footer** - The container `<div>` that wraps the notification footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon based on the notification type\n- **icon-outline** - The container `<div>` that wraps the icon element\n- **main** - The container `<div>` that wraps the notification main content (title, description)\n- **svg** - The `<svg>` element of the predefined bq-icon component.\n- **title** - The container `<div>` that wraps the notification title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
|
|
1000
995
|
"attributes": [
|
|
1001
996
|
{
|
|
1002
|
-
"name": "
|
|
1003
|
-
"description": "
|
|
997
|
+
"name": "auto-dismiss",
|
|
998
|
+
"description": "If true, the notification will automatically hide after the specified amount of time",
|
|
1004
999
|
"values": []
|
|
1005
1000
|
},
|
|
1006
1001
|
{
|
|
1007
|
-
"name": "
|
|
1008
|
-
"description": "
|
|
1002
|
+
"name": "border",
|
|
1003
|
+
"description": "The corder radius of the notification component",
|
|
1009
1004
|
"values": []
|
|
1010
1005
|
},
|
|
1011
1006
|
{
|
|
1012
|
-
"name": "
|
|
1013
|
-
"description": "
|
|
1007
|
+
"name": "disable-close",
|
|
1008
|
+
"description": "If true, the close button at the top right of the notification won't be shown",
|
|
1014
1009
|
"values": []
|
|
1015
1010
|
},
|
|
1016
1011
|
{
|
|
1017
|
-
"name": "
|
|
1018
|
-
"description": "
|
|
1012
|
+
"name": "hide-icon",
|
|
1013
|
+
"description": "If true, the notification icon won't be shown",
|
|
1019
1014
|
"values": []
|
|
1020
1015
|
},
|
|
1021
1016
|
{
|
|
1022
|
-
"name": "
|
|
1023
|
-
"description": "
|
|
1017
|
+
"name": "open",
|
|
1018
|
+
"description": "If true, the notification will be shown",
|
|
1024
1019
|
"values": []
|
|
1025
1020
|
},
|
|
1026
|
-
{
|
|
1021
|
+
{
|
|
1022
|
+
"name": "time",
|
|
1023
|
+
"description": "The length of time, in milliseconds, after which the notification will close itself. Only valid if `auto-dismiss=\"true\"`",
|
|
1024
|
+
"values": []
|
|
1025
|
+
},
|
|
1026
|
+
{ "name": "type", "description": "Type of Notification", "values": [] }
|
|
1027
1027
|
],
|
|
1028
1028
|
"references": []
|
|
1029
1029
|
},
|
|
@@ -8,7 +8,7 @@ var index = require('./index-Cs3Q5RMj.js');
|
|
|
8
8
|
var isNil = require('./isNil-CFhdj92S.js');
|
|
9
9
|
var isHTMLElement = require('./isHTMLElement-CtkOWsTF.js');
|
|
10
10
|
|
|
11
|
-
const bqAccordionGroupCss = () => `.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;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))}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{text-size-adjust:none;font-family:var(--bq-font-family);font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);line-height:var(--bq-font-line-height--regular);min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:where(:root){--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}:where(.endava),:where([bq-theme=endava]){--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.block{display:block}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-accordion-group--gap:var(--bq-spacing-xs);display:block}.static{position:static}.flex{display:flex}.flex-col{flex-direction:column}.gap-\\[--bq-accordion-group--gap\\]{gap:var(--bq-accordion-group--gap)}`;
|
|
11
|
+
const bqAccordionGroupCss = () => `.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;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))}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{text-size-adjust:none;font-family:var(--bq-font-family);font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);line-height:var(--bq-font-line-height--regular);min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:where(:root){--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}:where(.endava),:where([bq-theme=endava]){--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.block{display:block}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-accordion-group--gap:var(--bq-spacing-xs);display:block}.static{position:static}.flex{display:flex}.flex-col{flex-direction:column}.gap-\\[--bq-accordion-group--gap\\]{gap:var(--bq-accordion-group--gap)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}`;
|
|
12
12
|
|
|
13
13
|
const BqAccordionGroup = class {
|
|
14
14
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bq-accordion-group.cjs.entry.js","mappings":";;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,
|
|
1
|
+
{"file":"bq-accordion-group.cjs.entry.js","mappings":";;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,4zmBAA4zmB,CAAC;;MCsCn1mB,gBAAgB,GAAA,MAAA;;;;;;;;;;;IAiBa,UAAU,GAAyB,QAAQ;;AAG1D,IAAA,SAAS;AAElC;;;AAGG;IACsB,WAAW,GAAY,KAAK;;IAG5B,QAAQ,GAAY,KAAK;;IAGV,IAAI,GAAmB,QAAQ;;;IASvE,eAAe,GAAA;QACb,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,kBAAkB,KAAI;;YAEtD,IAAI,CAACA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;AAC1B,gBAAA,kBAAkB,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS;;AAE9C,YAAA,kBAAkB,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU;AAC/C,YAAA,kBAAkB,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW;AACjD,YAAA,kBAAkB,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;AACrC,SAAC,CAAC;;;;;AAQJ,IAAA,SAAS,CAAC,KAA0C,EAAA;AAClD,QAAA,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK;;AAEhC,QAAA,IAAI,CAACC,2BAAa,CAAC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC;YAAE;;QAEzE,IAAI,IAAI,CAAC,QAAQ;YAAE;QAEnB,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,kBAAkB,KAAI;AACtD,YAAA,IAAI,kBAAkB,KAAK,KAAK,CAAC,MAAM;gBAAE;AAEzC,YAAA,kBAAkB,CAAC,QAAQ,GAAG,KAAK;AACrC,SAAC,CAAC;;;;;IAOJ,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;;;;;;;;;;;;;;AAkBxB,IAAA,IAAY,mBAAmB,GAAA;AAC7B,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;;;;;IAM7D,MAAM,GAAA;AACJ,QAAA,QACEC,kEAAK,KAAK,EAAC,+CAA+C,EAAC,IAAI,EAAC,MAAM,EAAA,EACpEA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;","names":["isNil","isHTMLElement","h"],"sources":["../../packages/beeq/src/components/accordion-group/scss/bq-accordion-group.scss?tag=bq-accordion-group&encapsulation=shadow","../../packages/beeq/src/components/accordion-group/bq-accordion-group.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Accordion group styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-accordion-group.variables';\n\n:host {\n @apply block;\n}\n","import { Component, Element, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport { isHTMLElement, isNil } from '../../shared/utils';\nimport type { TAccordionAppearance, TAccordionSize } from '../accordion/bq-accordion.types';\n\n/**\n * The accordion group component is a container for multiple accordion elements.\n * It allows to manage the appearance and size of all accordions at once.\n *\n * @example How to use it\n * ```html\n * <bq-accordion-group appearance=\"filled\" size=\"medium\">\n * <bq-accordion> ... </bq-accordion>\n * <bq-accordion> ... </bq-accordion>\n * <bq-accordion> ... </bq-accordion>\n * </bq-accordion-group>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/713eae-accordion\n * @status stable\n *\n * @attr {\"filled\" | \"ghost\"} [appearance=\"filled\"] - The appearance style of accordion to be applied to all accordions\n * @attr {boolean} [expandAll=false] - If true all accordions are expanded\n * @attr {boolean} [no-animation=false] - Animation is set through JS when the browser does not support CSS calc-size() If true, the accordion animation, will be disabled. No animation will be applied.\n * @attr {boolean} [multiple=false] - If true multiple accordions can be expanded at the same time\n * @attr {\"small\" | \"medium\"} [size=\"medium\"] - The size of accordion to be applied to all accordions\n *\n * @slot - The default slot where the bq-accordion elements are placed.\n *\n * @part base - The component's base wrapper.\n *\n * @cssprop --bq-accordion-group--gap - Accordion group distance between elements\n */\n@Component({\n tag: 'bq-accordion-group',\n styleUrl: './scss/bq-accordion-group.scss',\n shadow: true,\n})\nexport class BqAccordionGroup {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqAccordionGroupElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /** The appearance style of accordion to be applied to all accordions */\n @Prop({ reflect: true, mutable: true }) appearance: TAccordionAppearance = 'filled';\n\n /** If true all accordions are expanded */\n @Prop({ reflect: true }) expandAll: boolean;\n\n /**\n * Animation is set through JS when the browser does not support CSS calc-size()\n * If true, the accordion animation, will be disabled. No animation will be applied.\n */\n @Prop({ reflect: true }) noAnimation: boolean = false;\n\n /** If true multiple accordions can be expanded at the same time */\n @Prop({ reflect: true }) multiple: boolean = false;\n\n /** The size of accordion to be applied to all accordions */\n @Prop({ reflect: true, mutable: true }) size: TAccordionSize = 'medium';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('appearance')\n @Watch('expandAll')\n @Watch('noAnimation')\n @Watch('size')\n checkPropValues() {\n this.bqAccordionElements.forEach((bqAccordionElement) => {\n // NOTE: if expandAll is nil we will keep accordion default state\n if (!isNil(this.expandAll)) {\n bqAccordionElement.expanded = this.expandAll;\n }\n bqAccordionElement.appearance = this.appearance;\n bqAccordionElement.noAnimation = this.noAnimation;\n bqAccordionElement.size = this.size;\n });\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n @Listen('bqClick', { passive: true })\n onBqClick(event: CustomEvent<HTMLBqAccordionElement>) {\n const { detail: bqElem } = event;\n // Make sure the event is coming from a bq-accordion element and its a child of the bq-accordion-group\n if (!isHTMLElement(bqElem, 'bq-accordion') || !this.el.contains(bqElem)) return;\n // We keep default behavior if multiple accordion can be expanded\n if (this.multiple) return;\n\n this.bqAccordionElements.forEach((bqAccordionElement) => {\n if (bqAccordionElement === event.detail) return;\n\n bqAccordionElement.expanded = false;\n });\n }\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get bqAccordionElements(): HTMLBqAccordionElement[] {\n return Array.from(this.el.querySelectorAll('bq-accordion'));\n }\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"flex flex-col gap-[--bq-accordion-group--gap]\" part=\"base\">\n <slot />\n </div>\n );\n }\n}\n"],"version":3}
|