@beeq/core 1.8.0-beta.4 → 1.8.0-beta.5
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/beeq.esm.js.map +1 -1
- package/dist/beeq/index.esm.js +12 -12
- package/dist/beeq/{p-7ea146b8.entry.js → p-01fe8efb.entry.js} +1 -3
- package/dist/beeq/{p-7ea146b8.entry.js.map → p-01fe8efb.entry.js.map} +1 -1
- package/dist/beeq/{p-d9bcaeed.entry.js → p-03373320.entry.js} +1 -3
- package/dist/beeq/{p-d9bcaeed.entry.js.map → p-03373320.entry.js.map} +1 -1
- package/dist/beeq/{p-e06c8398.entry.js → p-03c586df.entry.js} +19 -21
- package/dist/beeq/p-03c586df.entry.js.map +1 -0
- package/dist/beeq/{p-a94d15f9.entry.js → p-0a981080.entry.js} +1 -3
- package/dist/beeq/{p-a94d15f9.entry.js.map → p-0a981080.entry.js.map} +1 -1
- package/dist/beeq/{p-03e23dca.entry.js → p-0ce76c54.entry.js} +1 -3
- package/dist/beeq/{p-03e23dca.entry.js.map → p-0ce76c54.entry.js.map} +1 -1
- package/dist/beeq/{p-f5eb8fff.entry.js → p-2bb049ae.entry.js} +2 -4
- package/dist/beeq/{p-f5eb8fff.entry.js.map → p-2bb049ae.entry.js.map} +1 -1
- package/dist/beeq/{p-8b6fc3ef.entry.js → p-3043c826.entry.js} +5 -7
- package/dist/beeq/{p-8b6fc3ef.entry.js.map → p-3043c826.entry.js.map} +1 -1
- package/dist/beeq/{p-fe57aa48.entry.js → p-38e70f78.entry.js} +1 -3
- package/dist/beeq/{p-fe57aa48.entry.js.map → p-38e70f78.entry.js.map} +1 -1
- package/dist/beeq/{p-818cd6d7.entry.js → p-398bfb48.entry.js} +1 -3
- package/dist/beeq/{p-818cd6d7.entry.js.map → p-398bfb48.entry.js.map} +1 -1
- package/dist/beeq/{p-cdd5b425.entry.js → p-3f9a348a.entry.js} +2 -4
- package/dist/beeq/{p-cdd5b425.entry.js.map → p-3f9a348a.entry.js.map} +1 -1
- package/dist/beeq/{p-27974392.entry.js → p-41ac1d84.entry.js} +2 -4
- package/dist/beeq/{p-27974392.entry.js.map → p-41ac1d84.entry.js.map} +1 -1
- package/dist/beeq/{p-908c57e9.entry.js → p-4eabcd51.entry.js} +1 -3
- package/dist/beeq/{p-908c57e9.entry.js.map → p-4eabcd51.entry.js.map} +1 -1
- package/dist/beeq/{p-d2f682a9.entry.js → p-544deac1.entry.js} +3 -5
- package/dist/beeq/{p-d2f682a9.entry.js.map → p-544deac1.entry.js.map} +1 -1
- package/dist/beeq/{p-f5d59aba.entry.js → p-5ff6621d.entry.js} +2 -4
- package/dist/beeq/{p-f5d59aba.entry.js.map → p-5ff6621d.entry.js.map} +1 -1
- package/dist/beeq/{p-3e3fd7b5.entry.js → p-60cbc966.entry.js} +1 -3
- package/dist/beeq/{p-3e3fd7b5.entry.js.map → p-60cbc966.entry.js.map} +1 -1
- package/dist/beeq/{p-98de0101.entry.js → p-68ff188d.entry.js} +1 -3
- package/dist/beeq/{p-98de0101.entry.js.map → p-68ff188d.entry.js.map} +1 -1
- package/dist/beeq/{p-7aa47927.entry.js → p-69c766a3.entry.js} +9 -11
- package/dist/beeq/p-69c766a3.entry.js.map +1 -0
- package/dist/beeq/{p-89665044.entry.js → p-76486949.entry.js} +2 -4
- package/dist/beeq/{p-89665044.entry.js.map → p-76486949.entry.js.map} +1 -1
- package/dist/beeq/{p-0fce4de9.js → p-83d6d9ad.js} +2 -4
- package/dist/beeq/{p-0fce4de9.js.map → p-83d6d9ad.js.map} +1 -1
- package/dist/beeq/{p-03749fbf.entry.js → p-8b16f130.entry.js} +1 -3
- package/dist/beeq/{p-03749fbf.entry.js.map → p-8b16f130.entry.js.map} +1 -1
- package/dist/beeq/{p-b877d662.entry.js → p-8e1c6978.entry.js} +80 -49
- package/dist/beeq/p-8e1c6978.entry.js.map +1 -0
- package/dist/beeq/p-8f1c68c0.js +71 -0
- package/dist/beeq/p-8f1c68c0.js.map +1 -0
- package/dist/beeq/{p-5d51cadd.entry.js → p-9cab14ee.entry.js} +1 -3
- package/dist/beeq/{p-5d51cadd.entry.js.map → p-9cab14ee.entry.js.map} +1 -1
- package/dist/beeq/{p-7695fc8d.entry.js → p-a23b23c4.entry.js} +1 -3
- package/dist/beeq/{p-7695fc8d.entry.js.map → p-a23b23c4.entry.js.map} +1 -1
- package/dist/beeq/{p-2b2d8b0c.entry.js → p-a608a4fb.entry.js} +2 -4
- package/dist/beeq/{p-2b2d8b0c.entry.js.map → p-a608a4fb.entry.js.map} +1 -1
- package/dist/beeq/{p-bc60faa1.entry.js → p-aacaaa35.entry.js} +1 -3
- package/dist/beeq/{p-bc60faa1.entry.js.map → p-aacaaa35.entry.js.map} +1 -1
- package/dist/beeq/{p-d8f7bf11.entry.js → p-b2df1479.entry.js} +1 -3
- package/dist/beeq/{p-d8f7bf11.entry.js.map → p-b2df1479.entry.js.map} +1 -1
- package/dist/beeq/{p-5d8d6717.entry.js → p-b77b52f2.entry.js} +2 -4
- package/dist/beeq/{p-5d8d6717.entry.js.map → p-b77b52f2.entry.js.map} +1 -1
- package/dist/beeq/{p-5fcbf15f.entry.js → p-c83bc7fd.entry.js} +10 -11
- package/dist/beeq/p-c83bc7fd.entry.js.map +1 -0
- package/dist/beeq/{p-e6911710.entry.js → p-cb2b0014.entry.js} +1 -3
- package/dist/beeq/{p-e6911710.entry.js.map → p-cb2b0014.entry.js.map} +1 -1
- package/dist/beeq/{p-60ab652b.entry.js → p-cfb8829b.entry.js} +1 -3
- package/dist/beeq/{p-60ab652b.entry.js.map → p-cfb8829b.entry.js.map} +1 -1
- package/dist/beeq/{p-3ed73068.entry.js → p-d7067dae.entry.js} +1 -3
- package/dist/beeq/{p-3ed73068.entry.js.map → p-d7067dae.entry.js.map} +1 -1
- package/dist/beeq/{p-f69d2900.entry.js → p-d7dc7086.entry.js} +1 -3
- package/dist/beeq/{p-f69d2900.entry.js.map → p-d7dc7086.entry.js.map} +1 -1
- package/dist/beeq/{p-5a9a73a0.js → p-edfd9767.js} +2 -2
- package/dist/beeq/p-edfd9767.js.map +1 -0
- package/dist/beeq/{p-ac0d84a6.entry.js → p-f979d79a.entry.js} +1 -3
- package/dist/beeq/{p-ac0d84a6.entry.js.map → p-f979d79a.entry.js.map} +1 -1
- package/dist/beeq/{p-5a12011a.entry.js → p-faa3be41.entry.js} +1 -3
- package/dist/beeq/{p-5a12011a.entry.js.map → p-faa3be41.entry.js.map} +1 -1
- package/dist/beeq/{p-bb14b231.entry.js → p-fb20c6eb.entry.js} +2 -4
- package/dist/beeq/{p-bb14b231.entry.js.map → p-fb20c6eb.entry.js.map} +1 -1
- package/dist/beeq/{p-be746e37.entry.js → p-fe278ecc.entry.js} +2 -4
- package/dist/beeq/{p-be746e37.entry.js.map → p-fe278ecc.entry.js.map} +1 -1
- package/dist/cjs/assetsPath-8bd8d221.js +77 -0
- package/dist/cjs/assetsPath-8bd8d221.js.map +1 -0
- package/dist/cjs/beeq.cjs.js +1 -1
- package/dist/cjs/bq-accordion-group.cjs.entry.js +0 -1
- package/dist/cjs/bq-accordion-group.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-accordion.cjs.entry.js +0 -1
- package/dist/cjs/bq-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-alert.cjs.entry.js +0 -1
- package/dist/cjs/bq-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-avatar.cjs.entry.js +0 -1
- package/dist/cjs/bq-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-badge.cjs.entry.js +1 -2
- package/dist/cjs/bq-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-breadcrumb-item.cjs.entry.js +1 -2
- package/dist/cjs/bq-breadcrumb-item.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-breadcrumb.cjs.entry.js +0 -1
- package/dist/cjs/bq-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-button_2.cjs.entry.js +52 -21
- package/dist/cjs/bq-button_2.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-card.cjs.entry.js +0 -1
- package/dist/cjs/bq-card.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-checkbox.cjs.entry.js +0 -1
- package/dist/cjs/bq-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-date-picker.cjs.entry.js +1 -2
- package/dist/cjs/bq-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-dialog.cjs.entry.js +1 -2
- package/dist/cjs/bq-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-divider.cjs.entry.js +1 -2
- package/dist/cjs/bq-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-drawer.cjs.entry.js +1 -2
- package/dist/cjs/bq-drawer.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-empty-state.cjs.entry.js +0 -1
- package/dist/cjs/bq-empty-state.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-input.cjs.entry.js +1 -2
- package/dist/cjs/bq-input.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-notification.cjs.entry.js +4 -5
- package/dist/cjs/bq-notification.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-option-list_2.cjs.entry.js +1 -2
- package/dist/cjs/bq-option-list_2.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-option.cjs.entry.js +0 -1
- package/dist/cjs/bq-option.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-page-title.cjs.entry.js +0 -1
- package/dist/cjs/bq-page-title.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-progress.cjs.entry.js +0 -1
- package/dist/cjs/bq-progress.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-radio-group.cjs.entry.js +0 -1
- package/dist/cjs/bq-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-select.cjs.entry.js +2 -3
- package/dist/cjs/bq-select.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-side-menu-item.cjs.entry.js +0 -1
- package/dist/cjs/bq-side-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-side-menu.cjs.entry.js +4 -4
- package/dist/cjs/bq-side-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-slider.cjs.entry.js +0 -1
- package/dist/cjs/bq-slider.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-spinner.cjs.entry.js +1 -2
- package/dist/cjs/bq-spinner.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-status.cjs.entry.js +0 -1
- package/dist/cjs/bq-status.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-step-item.cjs.entry.js +0 -1
- package/dist/cjs/bq-step-item.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-steps.cjs.entry.js +0 -1
- package/dist/cjs/bq-steps.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-switch.cjs.entry.js +0 -1
- package/dist/cjs/bq-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-tab-group.cjs.entry.js +0 -1
- package/dist/cjs/bq-tab-group.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-tab.cjs.entry.js +0 -1
- package/dist/cjs/bq-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-textarea.cjs.entry.js +0 -1
- package/dist/cjs/bq-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-toast.cjs.entry.js +3 -4
- package/dist/cjs/bq-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/{cssVariables-a0e1e906.js → cssVariables-dd190bc2.js} +2 -2
- package/dist/cjs/cssVariables-dd190bc2.js.map +1 -0
- package/dist/cjs/index.cjs.js +3 -3
- package/dist/cjs/{isDefined-ee0026ed.js → isDefined-f3968296.js} +1 -2
- package/dist/cjs/isDefined-f3968296.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/button/bq-button.js +41 -16
- package/dist/collection/components/button/bq-button.js.map +1 -1
- package/dist/collection/components/dialog/scss/bq-dialog.css +1 -1
- package/dist/collection/components/drawer/scss/bq-drawer.css +1 -1
- package/dist/collection/components/icon/helper/request.js +2 -2
- package/dist/collection/components/icon/helper/request.js.map +1 -1
- package/dist/collection/components/notification/bq-notification.js +4 -4
- package/dist/collection/components/notification/bq-notification.js.map +1 -1
- package/dist/collection/components/select/scss/bq-select.css +1 -1
- package/dist/collection/components/side-menu/bq-side-menu.js +9 -3
- package/dist/collection/components/side-menu/bq-side-menu.js.map +1 -1
- package/dist/collection/components/toast/bq-toast.js +3 -3
- package/dist/collection/components/toast/bq-toast.js.map +1 -1
- package/dist/collection/shared/utils/assetsPath.js +47 -35
- package/dist/collection/shared/utils/assetsPath.js.map +1 -1
- package/dist/collection/shared/utils/cssVariables.js +1 -1
- package/dist/collection/shared/utils/cssVariables.js.map +1 -1
- package/dist/components/bq-accordion-group.js +0 -1
- package/dist/components/bq-accordion-group.js.map +1 -1
- package/dist/components/bq-accordion.js +0 -1
- package/dist/components/bq-accordion.js.map +1 -1
- package/dist/components/bq-alert.js +0 -1
- package/dist/components/bq-alert.js.map +1 -1
- package/dist/components/bq-avatar.js +0 -1
- package/dist/components/bq-avatar.js.map +1 -1
- package/dist/components/bq-badge2.js +0 -1
- package/dist/components/bq-badge2.js.map +1 -1
- package/dist/components/bq-breadcrumb-item.js +0 -1
- package/dist/components/bq-breadcrumb-item.js.map +1 -1
- package/dist/components/bq-breadcrumb.js +0 -1
- package/dist/components/bq-breadcrumb.js.map +1 -1
- package/dist/components/bq-button2.js +42 -18
- package/dist/components/bq-button2.js.map +1 -1
- package/dist/components/bq-card.js +0 -1
- package/dist/components/bq-card.js.map +1 -1
- package/dist/components/bq-checkbox.js +0 -1
- package/dist/components/bq-checkbox.js.map +1 -1
- package/dist/components/bq-date-picker.js +0 -1
- package/dist/components/bq-date-picker.js.map +1 -1
- package/dist/components/bq-dialog.js +1 -2
- package/dist/components/bq-dialog.js.map +1 -1
- package/dist/components/bq-divider2.js +0 -1
- package/dist/components/bq-divider2.js.map +1 -1
- package/dist/components/bq-drawer.js +1 -2
- package/dist/components/bq-drawer.js.map +1 -1
- package/dist/components/bq-empty-state.js +0 -1
- package/dist/components/bq-empty-state.js.map +1 -1
- package/dist/components/bq-icon2.js +70 -4
- package/dist/components/bq-icon2.js.map +1 -1
- package/dist/components/bq-input.js +0 -1
- package/dist/components/bq-input.js.map +1 -1
- package/dist/components/bq-notification.js +4 -5
- package/dist/components/bq-notification.js.map +1 -1
- package/dist/components/bq-option-list2.js +0 -1
- package/dist/components/bq-option-list2.js.map +1 -1
- package/dist/components/bq-option.js +0 -1
- package/dist/components/bq-option.js.map +1 -1
- package/dist/components/bq-page-title.js +0 -1
- package/dist/components/bq-page-title.js.map +1 -1
- package/dist/components/bq-progress.js +0 -1
- package/dist/components/bq-progress.js.map +1 -1
- package/dist/components/bq-radio-group.js +0 -1
- package/dist/components/bq-radio-group.js.map +1 -1
- package/dist/components/bq-select.js +1 -2
- package/dist/components/bq-select.js.map +1 -1
- package/dist/components/bq-side-menu-item.js +0 -1
- package/dist/components/bq-side-menu-item.js.map +1 -1
- package/dist/components/bq-side-menu.js +5 -4
- package/dist/components/bq-side-menu.js.map +1 -1
- package/dist/components/bq-slider.js +0 -1
- package/dist/components/bq-slider.js.map +1 -1
- package/dist/components/bq-spinner.js +0 -1
- package/dist/components/bq-spinner.js.map +1 -1
- package/dist/components/bq-status.js +0 -1
- package/dist/components/bq-status.js.map +1 -1
- package/dist/components/bq-step-item.js +0 -1
- package/dist/components/bq-step-item.js.map +1 -1
- package/dist/components/bq-steps.js +0 -1
- package/dist/components/bq-steps.js.map +1 -1
- package/dist/components/bq-switch.js +0 -1
- package/dist/components/bq-switch.js.map +1 -1
- package/dist/components/bq-tab-group.js +0 -1
- package/dist/components/bq-tab-group.js.map +1 -1
- package/dist/components/bq-tab.js +0 -1
- package/dist/components/bq-tab.js.map +1 -1
- package/dist/components/bq-tag2.js +0 -1
- package/dist/components/bq-tag2.js.map +1 -1
- package/dist/components/bq-textarea.js +0 -1
- package/dist/components/bq-textarea.js.map +1 -1
- package/dist/components/bq-toast.js +3 -4
- package/dist/components/bq-toast.js.map +1 -1
- package/dist/components/cssVariables.js +1 -1
- package/dist/components/cssVariables.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/isDefined.js +0 -1
- package/dist/components/isDefined.js.map +1 -1
- package/dist/esm/assetsPath-beeee241.js +74 -0
- package/dist/esm/assetsPath-beeee241.js.map +1 -0
- package/dist/esm/beeq.js +1 -1
- package/dist/esm/bq-accordion-group.entry.js +0 -1
- package/dist/esm/bq-accordion-group.entry.js.map +1 -1
- package/dist/esm/bq-accordion.entry.js +0 -1
- package/dist/esm/bq-accordion.entry.js.map +1 -1
- package/dist/esm/bq-alert.entry.js +0 -1
- package/dist/esm/bq-alert.entry.js.map +1 -1
- package/dist/esm/bq-avatar.entry.js +0 -1
- package/dist/esm/bq-avatar.entry.js.map +1 -1
- package/dist/esm/bq-badge.entry.js +1 -2
- package/dist/esm/bq-badge.entry.js.map +1 -1
- package/dist/esm/bq-breadcrumb-item.entry.js +1 -2
- package/dist/esm/bq-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/bq-breadcrumb.entry.js +0 -1
- package/dist/esm/bq-breadcrumb.entry.js.map +1 -1
- package/dist/esm/bq-button_2.entry.js +52 -21
- package/dist/esm/bq-button_2.entry.js.map +1 -1
- package/dist/esm/bq-card.entry.js +0 -1
- package/dist/esm/bq-card.entry.js.map +1 -1
- package/dist/esm/bq-checkbox.entry.js +0 -1
- package/dist/esm/bq-checkbox.entry.js.map +1 -1
- package/dist/esm/bq-date-picker.entry.js +1 -2
- package/dist/esm/bq-date-picker.entry.js.map +1 -1
- package/dist/esm/bq-dialog.entry.js +1 -2
- package/dist/esm/bq-dialog.entry.js.map +1 -1
- package/dist/esm/bq-divider.entry.js +1 -2
- package/dist/esm/bq-divider.entry.js.map +1 -1
- package/dist/esm/bq-drawer.entry.js +1 -2
- package/dist/esm/bq-drawer.entry.js.map +1 -1
- package/dist/esm/bq-empty-state.entry.js +0 -1
- package/dist/esm/bq-empty-state.entry.js.map +1 -1
- package/dist/esm/bq-input.entry.js +1 -2
- package/dist/esm/bq-input.entry.js.map +1 -1
- package/dist/esm/bq-notification.entry.js +4 -5
- package/dist/esm/bq-notification.entry.js.map +1 -1
- package/dist/esm/bq-option-list_2.entry.js +1 -2
- package/dist/esm/bq-option-list_2.entry.js.map +1 -1
- package/dist/esm/bq-option.entry.js +0 -1
- package/dist/esm/bq-option.entry.js.map +1 -1
- package/dist/esm/bq-page-title.entry.js +0 -1
- package/dist/esm/bq-page-title.entry.js.map +1 -1
- package/dist/esm/bq-progress.entry.js +0 -1
- package/dist/esm/bq-progress.entry.js.map +1 -1
- package/dist/esm/bq-radio-group.entry.js +0 -1
- package/dist/esm/bq-radio-group.entry.js.map +1 -1
- package/dist/esm/bq-select.entry.js +2 -3
- package/dist/esm/bq-select.entry.js.map +1 -1
- package/dist/esm/bq-side-menu-item.entry.js +0 -1
- package/dist/esm/bq-side-menu-item.entry.js.map +1 -1
- package/dist/esm/bq-side-menu.entry.js +4 -4
- package/dist/esm/bq-side-menu.entry.js.map +1 -1
- package/dist/esm/bq-slider.entry.js +0 -1
- package/dist/esm/bq-slider.entry.js.map +1 -1
- package/dist/esm/bq-spinner.entry.js +1 -2
- package/dist/esm/bq-spinner.entry.js.map +1 -1
- package/dist/esm/bq-status.entry.js +0 -1
- package/dist/esm/bq-status.entry.js.map +1 -1
- package/dist/esm/bq-step-item.entry.js +0 -1
- package/dist/esm/bq-step-item.entry.js.map +1 -1
- package/dist/esm/bq-steps.entry.js +0 -1
- package/dist/esm/bq-steps.entry.js.map +1 -1
- package/dist/esm/bq-switch.entry.js +0 -1
- package/dist/esm/bq-switch.entry.js.map +1 -1
- package/dist/esm/bq-tab-group.entry.js +0 -1
- package/dist/esm/bq-tab-group.entry.js.map +1 -1
- package/dist/esm/bq-tab.entry.js +0 -1
- package/dist/esm/bq-tab.entry.js.map +1 -1
- package/dist/esm/bq-textarea.entry.js +0 -1
- package/dist/esm/bq-textarea.entry.js.map +1 -1
- package/dist/esm/bq-toast.entry.js +3 -4
- package/dist/esm/bq-toast.entry.js.map +1 -1
- package/dist/esm/{cssVariables-23e3ca0d.js → cssVariables-000c23ad.js} +2 -2
- package/dist/esm/cssVariables-000c23ad.js.map +1 -0
- package/dist/esm/index.js +4 -4
- package/dist/esm/{isDefined-650befc3.js → isDefined-0cb07ee6.js} +1 -2
- package/dist/esm/isDefined-0cb07ee6.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/hydrate/index.js +113 -68
- package/dist/hydrate/index.mjs +113 -68
- package/dist/types/components/button/bq-button.d.ts +5 -0
- package/dist/types/shared/utils/assetsPath.d.ts +5 -9
- package/package.json +1 -1
- package/dist/beeq/p-5a9a73a0.js.map +0 -1
- package/dist/beeq/p-5fcbf15f.entry.js.map +0 -1
- package/dist/beeq/p-7aa47927.entry.js.map +0 -1
- package/dist/beeq/p-a84d4562.js +0 -64
- package/dist/beeq/p-a84d4562.js.map +0 -1
- package/dist/beeq/p-b877d662.entry.js.map +0 -1
- package/dist/beeq/p-e06c8398.entry.js.map +0 -1
- package/dist/cjs/assetsPath-6ac8935a.js +0 -65
- package/dist/cjs/assetsPath-6ac8935a.js.map +0 -1
- package/dist/cjs/cssVariables-a0e1e906.js.map +0 -1
- package/dist/cjs/isDefined-ee0026ed.js.map +0 -1
- package/dist/components/assetsPath.js +0 -62
- package/dist/components/assetsPath.js.map +0 -1
- package/dist/esm/assetsPath-e2f1ceb9.js +0 -62
- package/dist/esm/assetsPath-e2f1ceb9.js.map +0 -1
- package/dist/esm/cssVariables-23e3ca0d.js.map +0 -1
- package/dist/esm/isDefined-650befc3.js.map +0 -1
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* © https://beeq.design - Apache 2 License.
|
|
4
4
|
*/
|
|
5
5
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
6
|
-
import './assetsPath.js';
|
|
7
6
|
import { i as isNil } from './isNil.js';
|
|
8
7
|
import { v as validatePropValue } from './props.js';
|
|
9
8
|
import { b as hasSlotContent } from './slot.js';
|
|
@@ -16,7 +15,7 @@ const DRAWER_POSITIONS = ['start', 'end'];
|
|
|
16
15
|
// !TO BE REMOVED: `placement` is deprecated and it will be removed in the future
|
|
17
16
|
const DRAWER_PLACEMENT = ['left', 'right'];
|
|
18
17
|
|
|
19
|
-
const bqDrawerCss = ".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))}.bq-drawer,.shadow-m{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::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{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);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;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}}: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.light,.light,:root,[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-200);--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}.beeq.dark,.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-800);--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}.endava,[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,[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-200);--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-800);--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}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.z-10{z-index:10}.flex{display:flex}.flex-col{flex-direction:column}.gap-\\[--bq-drawer--gap\\]{gap:var(--bq-drawer--gap)}.bg-bg-primary{background-color:var(--bq-background--primary)}.shadow-m{--tw-shadow:var(--bq-box-shadow--m);--tw-shadow-colored:var(--bq-box-shadow--m);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.is-\\[--bq-drawer--width\\]{inline-size:var(--bq-drawer--width)}.max-is-full{max-inline-size:100%}.p-b-\\[--bq-drawer--paddingY\\]{padding-block:var(--bq-drawer--paddingY)}.p-i-\\[--bq-drawer--paddingX\\]{padding-inline:var(--bq-drawer--paddingX)}.inset-b-0{inset-block:0}@-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-drawer--backgroundBackdrop:var(--bq-grey-900);--bq-drawer--gap:var(--bq-spacing-l);--bq-drawer--width:320px;--bq-drawer--paddingX:var(--bq-spacing-l);--bq-drawer--paddingY:var(--bq-spacing-m);--bq-drawer--zIndex:9999;visibility:hidden!important}:host(.bq-drawer--open){visibility:visible!important}.bq-drawer{--tw-shadow:var(--bq-box-shadow--m);--tw-shadow-colored:var(--bq-box-shadow--m);background-color:var(--bq-background--primary);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;flex-direction:column;gap:var(--bq-drawer--gap);inline-size:var(--bq-drawer--width);inset-block:0;max-inline-size:100%;padding-block:var(--bq-drawer--paddingY);padding-inline:var(--bq-drawer--paddingX);position:fixed;z-index:10}.pointer-events-none{pointer-events:none}.static{position:static}.inset-0{inset:0}.-end-\\[--bq-drawer--width\\]{inset-inline-end:calc(var(--bq-drawer--width)*-1)}.-start-\\[--bq-drawer--width\\]{inset-inline-start:calc(var(--bq-drawer--width)*-1)}.end-0{inset-inline-end:0}.start-0{inset-inline-start:0}.mb-m{margin-bottom:var(--bq-spacing-m)}.block{display:block}.\\!hidden{display:none!important}.hidden{display:none}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.bg-\\[--bq-drawer--backgroundBackdrop\\]{background-color:var(--bq-drawer--backgroundBackdrop)}.font-bold{font-weight:var(--bq-font-weight--bold)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-text-primary{color:var(--bq-text--primary)}.opacity-0{opacity:0}.opacity-60{opacity:.6}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.\\[\\&\\:\\:part\\(button\\)\\]\\:rounded-s::part(button){border-radius:var(--bq-radius--s)}.\\[\\&\\:\\:part\\(button\\)\\]\\:border-0::part(button){border-width:0}.\\[\\&\\:\\:part\\(button\\)\\]\\:bs-fit::part(button){block-size:fit-content}.\\[\\&\\:\\:part\\(button\\)\\]\\:p-b-0::part(button){padding-block:0}.\\[\\&\\:\\:part\\(button\\)\\]\\:p-i-0::part(button){padding-inline:0}.\\[\\&\\:\\:part\\(label\\)\\]\\:inline-flex::part(label){display:inline-flex}.text-\\[color\\:--bq-icon--color\\]{color:var(--bq-icon--color)}.bs-\\[--bq-icon--size\\]{block-size:var(--bq-icon--size)}.is-\\[--bq-icon--size\\]{inline-size:var(--bq-icon--size)}.gap-0{gap:0}.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}}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}";
|
|
18
|
+
const bqDrawerCss = ".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))}.bq-drawer,.shadow-m{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::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{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);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;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}}: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.light,.light,:root,[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-200);--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}.beeq.dark,.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-800);--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}.endava,[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,[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-200);--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-800);--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}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.z-10{z-index:10}.flex{display:flex}.flex-col{flex-direction:column}.gap-\\[--bq-drawer--gap\\]{gap:var(--bq-drawer--gap)}.bg-bg-primary{background-color:var(--bq-background--primary)}.shadow-m{--tw-shadow:var(--bq-box-shadow--m);--tw-shadow-colored:var(--bq-box-shadow--m);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.is-\\[--bq-drawer--width\\]{inline-size:var(--bq-drawer--width)}.max-is-full{max-inline-size:100%}.p-b-\\[--bq-drawer--paddingY\\]{padding-block:var(--bq-drawer--paddingY)}.p-i-\\[--bq-drawer--paddingX\\]{padding-inline:var(--bq-drawer--paddingX)}.inset-b-0{inset-block:0}@-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-drawer--backgroundBackdrop:var(--bq-grey-900);--bq-drawer--gap:var(--bq-spacing-l);--bq-drawer--width:320px;--bq-drawer--paddingX:var(--bq-spacing-l);--bq-drawer--paddingY:var(--bq-spacing-m);--bq-drawer--zIndex:9999;visibility:hidden!important}:host(.bq-drawer--open){visibility:visible!important}.bq-drawer{--tw-shadow:var(--bq-box-shadow--m);--tw-shadow-colored:var(--bq-box-shadow--m);background-color:var(--bq-background--primary);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;flex-direction:column;gap:var(--bq-drawer--gap);inline-size:var(--bq-drawer--width);inset-block:0;max-inline-size:100%;padding-block:var(--bq-drawer--paddingY);padding-inline:var(--bq-drawer--paddingX);position:fixed;z-index:10}.pointer-events-none{pointer-events:none}.static{position:static}.inset-0{inset:0}.-end-\\[--bq-drawer--width\\]{inset-inline-end:calc(var(--bq-drawer--width)*-1)}.-start-\\[--bq-drawer--width\\]{inset-inline-start:calc(var(--bq-drawer--width)*-1)}.end-0{inset-inline-end:0}.start-0{inset-inline-start:0}.mb-m{margin-bottom:var(--bq-spacing-m)}.block{display:block}.\\!hidden{display:none!important}.hidden{display:none}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.bg-\\[--bq-drawer--backgroundBackdrop\\]{background-color:var(--bq-drawer--backgroundBackdrop)}.font-bold{font-weight:var(--bq-font-weight--bold)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-text-primary{color:var(--bq-text--primary)}.opacity-0{opacity:0}.opacity-60{opacity:.6}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.\\[\\&\\:\\:part\\(button\\)\\]\\:rounded-s::part(button){border-radius:var(--bq-radius--s)}.\\[\\&\\:\\:part\\(button\\)\\]\\:border-0::part(button){border-width:0}.\\[\\&\\:\\:part\\(button\\)\\]\\:bs-fit::part(button){block-size:fit-content}.\\[\\&\\:\\:part\\(button\\)\\]\\:p-b-0::part(button){padding-block:0}.\\[\\&\\:\\:part\\(button\\)\\]\\:p-i-0::part(button){padding-inline:0}.\\[\\&\\:\\:part\\(label\\)\\]\\:inline-flex::part(label){display:inline-flex}.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}}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.gap-0{gap:0}.text-\\[color\\:--bq-icon--color\\]{color:var(--bq-icon--color)}.bs-\\[--bq-icon--size\\]{block-size:var(--bq-icon--size)}.is-\\[--bq-icon--size\\]{inline-size:var(--bq-icon--size)}";
|
|
20
19
|
const BqDrawerStyle0 = bqDrawerCss;
|
|
21
20
|
|
|
22
21
|
const BqDrawer$1 = /*@__PURE__*/ proxyCustomElement(class BqDrawer extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bq-drawer.js","mappings":"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","names":["BqDrawer"],"sources":["../../packages/beeq/src/components/drawer/bq-drawer.types.ts","../../packages/beeq/src/components/drawer/scss/bq-drawer.scss?tag=bq-drawer&encapsulation=shadow","../../packages/beeq/src/components/drawer/bq-drawer.tsx"],"sourcesContent":["export const DRAWER_POSITIONS = ['start', 'end'] as const;\nexport type TDrawerPosition = (typeof DRAWER_POSITIONS)[number];\n// !TO BE REMOVED: `placement` is deprecated and it will be removed in the future\nexport const DRAWER_PLACEMENT = ['left', 'right'] as const;\nexport type TDrawerPlacement = (typeof DRAWER_PLACEMENT)[number];\n","/* -------------------------------------------------------------------------- */\n/* Drawer styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-drawer.variables';\n\n:host {\n @apply invisible #{!important};\n}\n\n:host(.bq-drawer--open) {\n @apply visible #{!important};\n}\n\n.bq-drawer {\n @apply fixed z-10 flex flex-col gap-[--bq-drawer--gap] bg-bg-primary shadow-m is-[--bq-drawer--width] max-is-full inset-b-0 p-b-[--bq-drawer--paddingY] p-i-[--bq-drawer--paddingX];\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { DRAWER_PLACEMENT, DRAWER_POSITIONS, TDrawerPlacement, TDrawerPosition } from './bq-drawer.types';\nimport { enter, hasSlotContent, isNil, leave, validatePropValue } from '../../shared/utils';\n\n/**\n * @part backdrop - The `<div>` that holds the backdrop overlay\n * @part button-close - The BqButton that closes the drawer\n * @part button-close__btn - The native button used under the hood that closes the drawer\n * @part button-close__label - The text inside the native button that closes the drawer\n * @part panel - The `<div>` that holds the drawer entire content\n * @part header - The `<header>` that holds the icon, title, and close button\n * @part title - The `<div>` that holds the title content\n * @part body - The `<main>` that holds the drawer body content\n * @part footer - The `<footer>` that holds footer content\n */\n\n@Component({\n tag: 'bq-drawer',\n styleUrl: './scss/bq-drawer.scss',\n shadow: true,\n})\nexport class BqDrawer {\n // Own Properties\n // ====================\n\n private footerElem: HTMLElement;\n private drawerElem: HTMLDivElement;\n private OPEN_CSS_CLASS = 'bq-drawer--open';\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqDrawerElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasFooter = false;\n @State() hasIcon: boolean = false;\n\n // Public Property API\n // ========================\n\n /** If true, the backdrop overlay will be shown when the drawer opens */\n @Prop({ reflect: true }) enableBackdrop = false;\n\n /** If true, the drawer will not close when clicking outside the panel */\n @Prop({ reflect: true }) closeOnClickOutside = false;\n\n /** If true, the dialog will not close when the [Esc] key is pressed */\n @Prop({ reflect: true }) closeOnEsc = false;\n\n /** If true, the drawer component will be shown */\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /** @deprecated Defines the position of the drawer */\n @Prop({ reflect: true, mutable: true }) placement: TDrawerPlacement = 'right';\n\n /** Defines the position of the drawer */\n @Prop({ reflect: true, mutable: true }) position: TDrawerPosition = 'end';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('open')\n async handleOpenChange() {\n if (!this.open) {\n await this.handleAfterHide();\n return;\n }\n\n await this.handleAfterShow();\n }\n\n /**\n * !TO BE REMOVED: Delete this `@Watch()` once the deprecated `placement` property is removed\n * We need to maintain retro-compatibility with the deprecated `placement` property\n */\n @Watch('placement')\n handlePlacementChange() {\n if (!isNil(this.placement)) {\n console.warn(\n `❗️ [bq-drawer]: the 'placement' prop is deprecated and it will be removed in the future. Please use 'position' instead.`,\n );\n }\n validatePropValue(DRAWER_PLACEMENT, 'right', this.el, 'placement');\n // Sync 'position' property\n const synPositionMap = {\n right: 'end',\n left: 'start',\n };\n this.position = (synPositionMap[this.placement] as TDrawerPosition) || this.position;\n }\n\n @Watch('position')\n handlePositionChange() {\n validatePropValue(DRAWER_POSITIONS, 'start', this.el, 'position');\n /**\n * Sync 'placement' property\n * !TO BE REMOVED: Delete the code below once the deprecated `placement` property is removed\n */\n const syncPlacementMap = {\n end: 'right',\n start: 'left',\n };\n this.placement = (syncPlacementMap[this.position] as TDrawerPlacement) || this.placement;\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler to be called when the drawer is closed */\n @Event() bqClose!: EventEmitter;\n\n /** Callback handler to be called when the drawer is opened */\n @Event() bqOpen!: EventEmitter;\n\n /** Callback handler to be called after the drawer has been opened */\n @Event() bqAfterOpen!: EventEmitter;\n\n /** Callback handler to be called after the drawer has been closed */\n @Event() bqAfterClose!: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.handlePositionChange();\n // !TO BE REMOVED: Delete this once the deprecated `placement` property is removed\n this.handlePlacementChange();\n }\n\n // Listeners\n // ==============\n\n @Listen('mousedown', { target: 'window', capture: true })\n async handleMouseClick(event: MouseEvent) {\n if (!this.open) return;\n if (!this.drawerElem || this.closeOnClickOutside) return;\n // Skip if the mouse button is not the main button\n if (event.button !== 0) return;\n\n const rect = this.drawerElem.getBoundingClientRect();\n if (event.clientX < rect.left || event.clientX > rect.right) {\n await this.hide();\n }\n }\n\n @Listen('keydown', { target: 'window', capture: true })\n async handleKeyDown(event: KeyboardEvent) {\n if (!this.open) return;\n if (!this.drawerElem || this.closeOnEsc || !(event.key === 'Escape' || event.key === 'Esc')) return;\n\n await this.hide();\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 /** Method to be called to hide the drawer component */\n @Method()\n async hide(): Promise<void> {\n const ev = this.bqClose.emit();\n if (ev.defaultPrevented) return;\n\n this.open = false;\n }\n\n /** Method to be called to show the drawer component */\n @Method()\n async show(): Promise<void> {\n const ev = this.bqOpen.emit();\n if (ev.defaultPrevented) return;\n\n this.open = true;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleFooterSlotChange = () => {\n this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n };\n\n private handleAfterHide = async () => {\n if (!this.drawerElem) return;\n\n await leave(this.drawerElem);\n this.handleTransitionEnd();\n };\n\n private handleAfterShow = async () => {\n if (!this.drawerElem) return;\n\n this.el.classList.add(this.OPEN_CSS_CLASS);\n await enter(this.drawerElem);\n this.handleTransitionEnd();\n };\n\n private handleTransitionEnd = () => {\n if (this.open) {\n this.bqAfterOpen.emit();\n return;\n }\n\n this.bqAfterClose.emit();\n this.el.classList.remove(this.OPEN_CSS_CLASS);\n };\n\n private get isPositionStart() {\n // !TO BE REMOVED: `placement` is deprecated and will be removed in the future\n return this.position === 'start' || this.placement === 'left';\n }\n\n private get isPositionEnd() {\n // !TO BE REMOVED: `placement` is deprecated and will be removed in the future\n return this.position === 'end' || this.placement === 'right';\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <Host>\n {/* BACKDROP */}\n {this.enableBackdrop && (\n <div\n class={{\n 'fixed inset-0 block bg-[--bq-drawer--backgroundBackdrop] opacity-0 transition-opacity duration-300':\n true,\n 'pointer-events-none': !this.open,\n 'opacity-60': this.open,\n }}\n tabIndex={-1}\n part=\"backdrop\"\n />\n )}\n {/* DRAWER PANEL */}\n <div\n class={{\n [`bq-drawer transition-all duration-300 ease-in-out ${this.position || this.placement}`]: true,\n '-start-[--bq-drawer--width]': this.isPositionStart,\n '-end-[--bq-drawer--width]': this.isPositionEnd,\n 'start-0': this.open && this.isPositionStart,\n 'end-0': this.open && this.isPositionEnd,\n }}\n ref={(div) => (this.drawerElem = div)}\n aria-hidden={!this.open ? 'true' : 'false'}\n aria-labelledby=\"bq-drawer__title\"\n aria-modal=\"true\"\n hidden={!this.open}\n part=\"panel\"\n role=\"dialog\"\n >\n <header class=\"flex items-center\" part=\"header\">\n <h2\n class=\"flex-1 items-center justify-between font-bold leading-regular text-text-primary\"\n id=\"bq-drawer__title\"\n part=\"title\"\n >\n <slot name=\"title\" />\n </h2>\n <div class=\"flex\" part=\"button-close\">\n <bq-button\n class=\"[&::part(button)]:rounded-s [&::part(button)]:border-0 [&::part(button)]:bs-fit [&::part(button)]:p-b-0 [&::part(button)]:p-i-0 [&::part(label)]:inline-flex\"\n appearance=\"text\"\n size=\"small\"\n slot=\"button-close\"\n exportparts=\"button:button-close__btn,label:button-close__label\"\n onClick={this.hide.bind(this)}\n >\n <slot name=\"button-close\">\n <bq-icon name=\"x-bold\" role=\"img\" title=\"Close\" />\n </slot>\n </bq-button>\n </div>\n </header>\n <main class=\"block flex-auto overflow-auto\" part=\"body\">\n <slot />\n </main>\n <footer\n class={{\n block: true,\n '!hidden': !this.hasFooter,\n }}\n ref={(footerElem) => (this.footerElem = footerElem)}\n part=\"footer\"\n >\n <slot name=\"footer-divider\">\n <bq-divider class=\"mb-m block\" dashed />\n </slot>\n <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n </footer>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"bq-drawer.js","mappings":"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","names":["BqDrawer"],"sources":["../../packages/beeq/src/components/drawer/bq-drawer.types.ts","../../packages/beeq/src/components/drawer/scss/bq-drawer.scss?tag=bq-drawer&encapsulation=shadow","../../packages/beeq/src/components/drawer/bq-drawer.tsx"],"sourcesContent":["export const DRAWER_POSITIONS = ['start', 'end'] as const;\nexport type TDrawerPosition = (typeof DRAWER_POSITIONS)[number];\n// !TO BE REMOVED: `placement` is deprecated and it will be removed in the future\nexport const DRAWER_PLACEMENT = ['left', 'right'] as const;\nexport type TDrawerPlacement = (typeof DRAWER_PLACEMENT)[number];\n","/* -------------------------------------------------------------------------- */\n/* Drawer styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-drawer.variables';\n\n:host {\n @apply invisible #{!important};\n}\n\n:host(.bq-drawer--open) {\n @apply visible #{!important};\n}\n\n.bq-drawer {\n @apply fixed z-10 flex flex-col gap-[--bq-drawer--gap] bg-bg-primary shadow-m is-[--bq-drawer--width] max-is-full inset-b-0 p-b-[--bq-drawer--paddingY] p-i-[--bq-drawer--paddingX];\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { DRAWER_PLACEMENT, DRAWER_POSITIONS, TDrawerPlacement, TDrawerPosition } from './bq-drawer.types';\nimport { enter, hasSlotContent, isNil, leave, validatePropValue } from '../../shared/utils';\n\n/**\n * @part backdrop - The `<div>` that holds the backdrop overlay\n * @part button-close - The BqButton that closes the drawer\n * @part button-close__btn - The native button used under the hood that closes the drawer\n * @part button-close__label - The text inside the native button that closes the drawer\n * @part panel - The `<div>` that holds the drawer entire content\n * @part header - The `<header>` that holds the icon, title, and close button\n * @part title - The `<div>` that holds the title content\n * @part body - The `<main>` that holds the drawer body content\n * @part footer - The `<footer>` that holds footer content\n */\n\n@Component({\n tag: 'bq-drawer',\n styleUrl: './scss/bq-drawer.scss',\n shadow: true,\n})\nexport class BqDrawer {\n // Own Properties\n // ====================\n\n private footerElem: HTMLElement;\n private drawerElem: HTMLDivElement;\n private OPEN_CSS_CLASS = 'bq-drawer--open';\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqDrawerElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasFooter = false;\n @State() hasIcon: boolean = false;\n\n // Public Property API\n // ========================\n\n /** If true, the backdrop overlay will be shown when the drawer opens */\n @Prop({ reflect: true }) enableBackdrop = false;\n\n /** If true, the drawer will not close when clicking outside the panel */\n @Prop({ reflect: true }) closeOnClickOutside = false;\n\n /** If true, the dialog will not close when the [Esc] key is pressed */\n @Prop({ reflect: true }) closeOnEsc = false;\n\n /** If true, the drawer component will be shown */\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /** @deprecated Defines the position of the drawer */\n @Prop({ reflect: true, mutable: true }) placement: TDrawerPlacement = 'right';\n\n /** Defines the position of the drawer */\n @Prop({ reflect: true, mutable: true }) position: TDrawerPosition = 'end';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('open')\n async handleOpenChange() {\n if (!this.open) {\n await this.handleAfterHide();\n return;\n }\n\n await this.handleAfterShow();\n }\n\n /**\n * !TO BE REMOVED: Delete this `@Watch()` once the deprecated `placement` property is removed\n * We need to maintain retro-compatibility with the deprecated `placement` property\n */\n @Watch('placement')\n handlePlacementChange() {\n if (!isNil(this.placement)) {\n console.warn(\n `❗️ [bq-drawer]: the 'placement' prop is deprecated and it will be removed in the future. Please use 'position' instead.`,\n );\n }\n validatePropValue(DRAWER_PLACEMENT, 'right', this.el, 'placement');\n // Sync 'position' property\n const synPositionMap = {\n right: 'end',\n left: 'start',\n };\n this.position = (synPositionMap[this.placement] as TDrawerPosition) || this.position;\n }\n\n @Watch('position')\n handlePositionChange() {\n validatePropValue(DRAWER_POSITIONS, 'start', this.el, 'position');\n /**\n * Sync 'placement' property\n * !TO BE REMOVED: Delete the code below once the deprecated `placement` property is removed\n */\n const syncPlacementMap = {\n end: 'right',\n start: 'left',\n };\n this.placement = (syncPlacementMap[this.position] as TDrawerPlacement) || this.placement;\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler to be called when the drawer is closed */\n @Event() bqClose!: EventEmitter;\n\n /** Callback handler to be called when the drawer is opened */\n @Event() bqOpen!: EventEmitter;\n\n /** Callback handler to be called after the drawer has been opened */\n @Event() bqAfterOpen!: EventEmitter;\n\n /** Callback handler to be called after the drawer has been closed */\n @Event() bqAfterClose!: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.handlePositionChange();\n // !TO BE REMOVED: Delete this once the deprecated `placement` property is removed\n this.handlePlacementChange();\n }\n\n // Listeners\n // ==============\n\n @Listen('mousedown', { target: 'window', capture: true })\n async handleMouseClick(event: MouseEvent) {\n if (!this.open) return;\n if (!this.drawerElem || this.closeOnClickOutside) return;\n // Skip if the mouse button is not the main button\n if (event.button !== 0) return;\n\n const rect = this.drawerElem.getBoundingClientRect();\n if (event.clientX < rect.left || event.clientX > rect.right) {\n await this.hide();\n }\n }\n\n @Listen('keydown', { target: 'window', capture: true })\n async handleKeyDown(event: KeyboardEvent) {\n if (!this.open) return;\n if (!this.drawerElem || this.closeOnEsc || !(event.key === 'Escape' || event.key === 'Esc')) return;\n\n await this.hide();\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 /** Method to be called to hide the drawer component */\n @Method()\n async hide(): Promise<void> {\n const ev = this.bqClose.emit();\n if (ev.defaultPrevented) return;\n\n this.open = false;\n }\n\n /** Method to be called to show the drawer component */\n @Method()\n async show(): Promise<void> {\n const ev = this.bqOpen.emit();\n if (ev.defaultPrevented) return;\n\n this.open = true;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleFooterSlotChange = () => {\n this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n };\n\n private handleAfterHide = async () => {\n if (!this.drawerElem) return;\n\n await leave(this.drawerElem);\n this.handleTransitionEnd();\n };\n\n private handleAfterShow = async () => {\n if (!this.drawerElem) return;\n\n this.el.classList.add(this.OPEN_CSS_CLASS);\n await enter(this.drawerElem);\n this.handleTransitionEnd();\n };\n\n private handleTransitionEnd = () => {\n if (this.open) {\n this.bqAfterOpen.emit();\n return;\n }\n\n this.bqAfterClose.emit();\n this.el.classList.remove(this.OPEN_CSS_CLASS);\n };\n\n private get isPositionStart() {\n // !TO BE REMOVED: `placement` is deprecated and will be removed in the future\n return this.position === 'start' || this.placement === 'left';\n }\n\n private get isPositionEnd() {\n // !TO BE REMOVED: `placement` is deprecated and will be removed in the future\n return this.position === 'end' || this.placement === 'right';\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <Host>\n {/* BACKDROP */}\n {this.enableBackdrop && (\n <div\n class={{\n 'fixed inset-0 block bg-[--bq-drawer--backgroundBackdrop] opacity-0 transition-opacity duration-300':\n true,\n 'pointer-events-none': !this.open,\n 'opacity-60': this.open,\n }}\n tabIndex={-1}\n part=\"backdrop\"\n />\n )}\n {/* DRAWER PANEL */}\n <div\n class={{\n [`bq-drawer transition-all duration-300 ease-in-out ${this.position || this.placement}`]: true,\n '-start-[--bq-drawer--width]': this.isPositionStart,\n '-end-[--bq-drawer--width]': this.isPositionEnd,\n 'start-0': this.open && this.isPositionStart,\n 'end-0': this.open && this.isPositionEnd,\n }}\n ref={(div) => (this.drawerElem = div)}\n aria-hidden={!this.open ? 'true' : 'false'}\n aria-labelledby=\"bq-drawer__title\"\n aria-modal=\"true\"\n hidden={!this.open}\n part=\"panel\"\n role=\"dialog\"\n >\n <header class=\"flex items-center\" part=\"header\">\n <h2\n class=\"flex-1 items-center justify-between font-bold leading-regular text-text-primary\"\n id=\"bq-drawer__title\"\n part=\"title\"\n >\n <slot name=\"title\" />\n </h2>\n <div class=\"flex\" part=\"button-close\">\n <bq-button\n class=\"[&::part(button)]:rounded-s [&::part(button)]:border-0 [&::part(button)]:bs-fit [&::part(button)]:p-b-0 [&::part(button)]:p-i-0 [&::part(label)]:inline-flex\"\n appearance=\"text\"\n size=\"small\"\n slot=\"button-close\"\n exportparts=\"button:button-close__btn,label:button-close__label\"\n onClick={this.hide.bind(this)}\n >\n <slot name=\"button-close\">\n <bq-icon name=\"x-bold\" role=\"img\" title=\"Close\" />\n </slot>\n </bq-button>\n </div>\n </header>\n <main class=\"block flex-auto overflow-auto\" part=\"body\">\n <slot />\n </main>\n <footer\n class={{\n block: true,\n '!hidden': !this.hasFooter,\n }}\n ref={(footerElem) => (this.footerElem = footerElem)}\n part=\"footer\"\n >\n <slot name=\"footer-divider\">\n <bq-divider class=\"mb-m block\" dashed />\n </slot>\n <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n </footer>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* © https://beeq.design - Apache 2 License.
|
|
4
4
|
*/
|
|
5
5
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
6
|
-
import './assetsPath.js';
|
|
7
6
|
import { v as validatePropValue } from './props.js';
|
|
8
7
|
import { b as hasSlotContent } from './slot.js';
|
|
9
8
|
import { d as defineCustomElement$2 } from './bq-icon2.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bq-empty-state.js","mappings":"
|
|
1
|
+
{"file":"bq-empty-state.js","mappings":"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","names":["BqEmptyState"],"sources":["../../packages/beeq/src/components/empty-state/bq-empty-state.types.ts","../../packages/beeq/src/components/empty-state/scss/bq-empty-state.scss?tag=bq-empty-state&encapsulation=shadow","../../packages/beeq/src/components/empty-state/bq-empty-state.tsx"],"sourcesContent":["export const EMPTY_STATE_SIZE = ['small', 'medium', 'large'] as const;\nexport type TEmptyStateSize = (typeof EMPTY_STATE_SIZE)[number];\n\nexport const SIZE_TO_VALUE_MAP: Record<TEmptyStateSize, number> = {\n small: 40,\n medium: 80,\n large: 180,\n};\n","/* -------------------------------------------------------------------------- */\n/* Empty state styles */\n/* -------------------------------------------------------------------------- */\n\n:host {\n @apply relative inline-block;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\nimport { EMPTY_STATE_SIZE, SIZE_TO_VALUE_MAP, TEmptyStateSize } from './bq-empty-state.types';\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/**\n * @part body - The container `<div>` that wraps the alert description content\n * @part footer - The container `<div>` that wraps the alert footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)\n * @part thumbnail - The container `<div>` that wraps the thumbnail element\n * @part title - The container `<div>` that wraps the empty state title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n */\n\n@Component({\n tag: 'bq-empty-state',\n styleUrl: './scss/bq-empty-state.scss',\n shadow: true,\n})\nexport class BqEmptyState {\n // Own Properties\n // ====================\n\n private bodyElem: HTMLDivElement;\n private footerElem: HTMLDivElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqEmptyStateElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasBody = false;\n @State() private hasFooter = false;\n\n // Public Property API\n // ========================\n\n /** The size of the empty state component */\n @Prop({ reflect: true, mutable: true }) size: TEmptyStateSize = 'medium';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n checkPropValues() {\n validatePropValue(EMPTY_STATE_SIZE, 'medium', this.el, 'size');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\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 handleContentSlotChange = () => {\n this.hasBody = hasSlotContent(this.bodyElem, 'body');\n };\n\n private handleFooterSlotChange = () => {\n this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n };\n\n private get iconSize(): number {\n return SIZE_TO_VALUE_MAP[this.size] || SIZE_TO_VALUE_MAP.medium;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"inline-flex flex-col items-center\" part=\"wrapper\">\n <div\n class={{\n 'm-be-m': this.size === 'small',\n 'm-be-xl': this.size === 'medium',\n 'm-be-xxl': this.size === 'large',\n }}\n part=\"thumbnail\"\n >\n <slot name=\"thumbnail\">\n <bq-icon size={this.iconSize} name=\"database\" part=\"icon\" exportparts=\"base,svg\" />\n </slot>\n </div>\n <div\n class={{\n 'title-font font-bold leading-regular text-text-primary': true,\n 'text-m': this.size === 'small',\n 'text-l': this.size === 'medium',\n 'text-xxl2': this.size === 'large',\n 'm-be-xs': this.size === 'small' && this.hasBody,\n 'm-be-m': this.size === 'medium' && this.hasBody,\n 'm-be-l': this.size === 'large' && this.hasBody,\n }}\n part=\"title\"\n >\n <slot />\n </div>\n <div\n class={{\n 'font-normal leading-regular': true,\n 'text-s': this.size === 'small',\n 'text-m': this.size === 'medium',\n 'text-l': this.size === 'large',\n 'm-be-m': this.size === 'small' && this.hasFooter,\n 'm-be-l': this.size === 'medium' && this.hasFooter,\n 'm-be-xl': this.size === 'large' && this.hasFooter,\n }}\n ref={(div) => (this.bodyElem = div)}\n part=\"body\"\n >\n <slot name=\"body\" onSlotchange={this.handleContentSlotChange} />\n </div>\n <div class={{ 'flex items-start gap-xs': true }} ref={(div) => (this.footerElem = div)} part=\"footer\">\n <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -3,15 +3,81 @@
|
|
|
3
3
|
* © https://beeq.design - Apache 2 License.
|
|
4
4
|
*/
|
|
5
5
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
6
|
-
import { g as getBasePath } from './assetsPath.js';
|
|
7
6
|
import { i as isNil } from './isNil.js';
|
|
8
7
|
import { i as isString } from './isString.js';
|
|
9
8
|
import { g as getColorCSSVariable } from './cssVariables.js';
|
|
10
9
|
|
|
10
|
+
/**
|
|
11
|
+
* Inspired by Shoelace's `getBasePath` and `setBasePath` functions.
|
|
12
|
+
* https://github.com/shoelace-style/shoelace/blob/next/src/utilities/base-path.ts
|
|
13
|
+
*/
|
|
14
|
+
let basePath;
|
|
15
|
+
const DATA_BEEQ_ATTRIBUTE = 'data-beeq';
|
|
16
|
+
const DEFAULT_SVG_PATH = 'svg';
|
|
17
|
+
/**
|
|
18
|
+
* Sets the base path for the assets.
|
|
19
|
+
* @param {string} path - The base path to set.
|
|
20
|
+
*/
|
|
21
|
+
const setBasePath = (path) => {
|
|
22
|
+
basePath = path;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Gets the base path for the assets.
|
|
26
|
+
* @param {string} subpath - An optional subpath to append to the base path.
|
|
27
|
+
* @returns {string} The base path of the assets.
|
|
28
|
+
*/
|
|
29
|
+
const getBasePath = (subpath = '') => {
|
|
30
|
+
if (!basePath) {
|
|
31
|
+
const configScript = findConfigScript();
|
|
32
|
+
const fallbackScript = configScript ? null : findFallbackScript();
|
|
33
|
+
const script = configScript || fallbackScript;
|
|
34
|
+
if (script) {
|
|
35
|
+
const path = configScript ? script.getAttribute(DATA_BEEQ_ATTRIBUTE) : getScriptPath(script);
|
|
36
|
+
setBasePath(`${path}/${DEFAULT_SVG_PATH}`);
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
// Fallback: use an environment variable (if set) or the default path
|
|
40
|
+
setBasePath(process.env.ASSETS_BASE_PATH || `./${DEFAULT_SVG_PATH}`);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
// Return the base path without a trailing slash. If one exists, append the subpath separated by a slash.
|
|
44
|
+
const formattedSubpath = subpath ? `/${subpath.replace(/^\//, '')}` : '';
|
|
45
|
+
return basePath.replace(/\/$/, '') + formattedSubpath;
|
|
46
|
+
};
|
|
47
|
+
/**
|
|
48
|
+
* Finds the configuration script element.
|
|
49
|
+
* @returns The configuration script element or null if not found.
|
|
50
|
+
*/
|
|
51
|
+
const findConfigScript = () => {
|
|
52
|
+
if (typeof window === 'undefined')
|
|
53
|
+
return null;
|
|
54
|
+
return document.querySelector(`script[${DATA_BEEQ_ATTRIBUTE}]`);
|
|
55
|
+
};
|
|
56
|
+
/**
|
|
57
|
+
* Finds the fallback script element.
|
|
58
|
+
* @returns The fallback script element or null if not found.
|
|
59
|
+
*/
|
|
60
|
+
const findFallbackScript = () => {
|
|
61
|
+
if (typeof window === 'undefined')
|
|
62
|
+
return null;
|
|
63
|
+
return document.querySelector(`script[src*="beeq"]`);
|
|
64
|
+
};
|
|
65
|
+
/**
|
|
66
|
+
* Gets the path of a script element.
|
|
67
|
+
* @param {HTMLScriptElement} script - The script element.
|
|
68
|
+
* @returns The path of the script element.
|
|
69
|
+
*/
|
|
70
|
+
const getScriptPath = (script) => {
|
|
71
|
+
if (typeof window === 'undefined')
|
|
72
|
+
return '';
|
|
73
|
+
const src = script.getAttribute('src');
|
|
74
|
+
return src ? src.substring(0, src.lastIndexOf('/')) : '';
|
|
75
|
+
};
|
|
76
|
+
|
|
11
77
|
/* -------------------------------------------------------------------------- */
|
|
12
78
|
const requests = new Map();
|
|
13
79
|
const fetchSvg = async (url, sanitize) => {
|
|
14
|
-
if (typeof fetch === 'undefined' || typeof
|
|
80
|
+
if (typeof fetch === 'undefined' || typeof window === 'undefined')
|
|
15
81
|
return;
|
|
16
82
|
if (requests.has(url))
|
|
17
83
|
return requests.get(url);
|
|
@@ -42,7 +108,7 @@ const getSvgContent = async (url, sanitize) => {
|
|
|
42
108
|
return req;
|
|
43
109
|
};
|
|
44
110
|
const validateContent = (svgContent) => {
|
|
45
|
-
if (typeof
|
|
111
|
+
if (typeof window === 'undefined')
|
|
46
112
|
return '';
|
|
47
113
|
const svgTag = 'svg';
|
|
48
114
|
const iconCssClass = 'bq-icon__svg';
|
|
@@ -228,6 +294,6 @@ function defineCustomElement() {
|
|
|
228
294
|
} });
|
|
229
295
|
}
|
|
230
296
|
|
|
231
|
-
export { BqIcon as B, defineCustomElement as d };
|
|
297
|
+
export { BqIcon as B, defineCustomElement as d, getBasePath as g, setBasePath as s };
|
|
232
298
|
|
|
233
299
|
//# sourceMappingURL=bq-icon2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bq-icon2.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/icon/helper/request.ts","../../packages/beeq/src/components/icon/scss/bq-icon.scss?tag=bq-icon&encapsulation=shadow","../../packages/beeq/src/components/icon/bq-icon.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Icon request helper */\n/* -------------------------------------------------------------------------- */\n\nimport { isNil, isString } from '../../../shared/utils';\n\nconst requests = new Map<string, Promise<unknown>>();\n\nconst fetchSvg = async (url: string, sanitize: boolean): Promise<unknown> => {\n if (typeof fetch === 'undefined' || typeof document === 'undefined') return;\n\n if (requests.has(url)) return requests.get(url);\n\n try {\n const response = await fetch(url);\n\n if (!response.ok) {\n iconContent.set(url, '');\n return;\n }\n\n let svgContent = (await response.text()) || '';\n\n if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);\n\n iconContent.set(url, svgContent);\n } catch (error) {\n console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);\n iconContent.set(url, '');\n }\n};\n\nexport const iconContent = new Map<string, string>();\n\nexport const getSvgContent = async (url: string, sanitize: boolean) => {\n let req = requests.get(url);\n\n // NOTE: if the request does not exists we will cache it\n if (isNil(req)) {\n req = fetchSvg(url, sanitize);\n requests.set(url, req);\n }\n return req;\n};\n\nexport const validateContent = (svgContent: string): string => {\n if (typeof document === 'undefined') return '';\n\n const svgTag = 'svg';\n const iconCssClass = 'bq-icon__svg';\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {\n // keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class\n const othersCssClasses = svgElm.getAttribute('class') || '';\n svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());\n // set the shadow DOM part for the SVG element\n svgElm.setAttribute('part', svgTag);\n\n // remove height and width attribute, if for some reason they are still present in the SVG tag\n svgElm.removeAttribute('height');\n svgElm.removeAttribute('width');\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as HTMLElement)) return div.innerHTML;\n }\n\n return '';\n};\n\nexport const isValid = (elm: HTMLElement): boolean => {\n if (elm.nodeType === Node.ELEMENT_NODE) {\n if (elm.nodeName.toLowerCase() === 'script') return false;\n\n for (const attribute of Array.from(elm.attributes)) {\n const value = attribute.value;\n if (isString(value) && value.toLowerCase().startsWith('on')) {\n return false;\n }\n }\n\n for (const childNode of Array.from(elm.children) as HTMLElement[]) {\n if (!isValid(childNode)) return false;\n }\n }\n return true;\n};\n","/* -------------------------------------------------------------------------- */\n/* Icon styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-icon.variables';\n\n:host {\n @apply inline-block;\n}\n\n/**\n * This class is added on packages/beeq/src/components/icon/helper/request.ts\n * See lines 42 and 58 for details.\n */\n.bq-icon__svg {\n @apply scale-x-[--bq-icon--direction];\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { TIconWeight } from './bq-icon.types';\nimport { getSvgContent, iconContent } from './helper/request';\nimport { getBasePath, getColorCSSVariable, isNil } from '../../shared/utils';\n\n/**\n * Icons are simplified images that graphically explain the meaning of an object on the screen.\n *\n * @part base - The component's internal wrapper that holds the icon SVG content.\n * @part svg - The `<svg>` tag element inside the component.\n */\n@Component({\n assetsDirs: ['svg'],\n tag: 'bq-icon',\n styleUrl: './scss/bq-icon.scss',\n shadow: true,\n})\nexport class BqIcon {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private _svgContent: string;\n\n // Public Property API\n // ========================\n\n /** Label for the icon, used for accessibility */\n @Prop({ reflect: true }) label?: string;\n\n /** Set the stroke color of the SVG. The value should be a valid value of the palette color */\n @Prop({ reflect: true }) color?: string;\n\n /** Icon name to load. Please check all available icons [here](https://phosphoricons.com/) */\n @Prop({ reflect: true }) name?: string;\n\n /** Set the size of the SVG */\n @Prop({ reflect: true }) size?: string | number = 24;\n\n /** Set the source of the SVG. If the source is set, the name property will be ignored */\n @Prop({ reflect: true }) src?: string;\n\n /** @deprecated It set the icon weight/style */\n @Prop({ reflect: true }) weight?: TIconWeight = undefined;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('color')\n @Watch('name')\n @Watch('size')\n handlePropsChange() {\n this.loadIcon(this.name);\n }\n\n /**\n * !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\n * We need to maintain retro-compatibility until the next major release\n */\n @Watch('weight')\n handleWeightChange() {\n if (this.name.includes(this.weight)) return;\n\n console.warn(\n `❗️ [bq-icon]: the 'weight' property is deprecated, you should add the weight to the icon name.\\n\n For example, '<bq-icon name=\"bell-fill\"></bq-icon>' instead of '<bq-icon name=\"bell\" weight=\"fill\"></bq-icon>'`,\n );\n // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.\n // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.\n const REGULAR = 'regular';\n const isWeightedIcon = !isNil(this.weight) && this.weight !== REGULAR;\n // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.\n // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.\n const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';\n // Construct the icon name by appending the weight suffix (if any) and the file extension.\n // Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.\n const iconName = `${this.name}${weightSuffix}`;\n this.loadIcon(iconName);\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler to be called when the SVG has loaded */\n @Event() svgLoaded: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.setupIconComponent();\n }\n\n componentWillLoad() {\n this.setupIconComponent();\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 setupIconComponent = () => {\n this.loadIcon(this.name);\n // !TO BE REMOVED: Delete this once the deprecated `weight` property is removed\n if (!isNil(this.weight)) this.handleWeightChange();\n };\n\n private getIconSource = (name: string) => {\n if (!this.name && !this.src) return;\n // Return the src if it is set\n if (this.src) return this.src;\n\n const SVG_EXTENSION = '.svg';\n const iconFileName = `${name}${SVG_EXTENSION}`;\n\n return getBasePath(iconFileName);\n };\n\n private loadIcon = (name: string) => {\n const url = this.getIconSource(name);\n getSvgContent(url, true).then(() => {\n this._svgContent = iconContent.get(url);\n this.svgLoaded.emit(this._svgContent);\n });\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const styles = {\n ...(this.color && { '--bq-icon--color': getColorCSSVariable(this.color) }),\n ...(this.size && { '--bq-icon--size': `${this.size}px` }),\n };\n\n return (\n <Host style={styles}>\n <div\n aria-label={this.label ?? `${this.name} icon`}\n class=\"flex text-[color:--bq-icon--color] bs-[--bq-icon--size] is-[--bq-icon--size]\"\n innerHTML={this._svgContent}\n part=\"base\"\n role=\"img\"\n />\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"bq-icon2.js","mappings":";;;;;;;;;AAAA;;;;AAKA,IAAI,QAA4B,CAAC;AACjC,MAAM,mBAAmB,GAAG,WAAW,CAAC;AACxC,MAAM,gBAAgB,GAAG,KAAK,CAAC;AAE/B;;;;MAIa,WAAW,GAAG,CAAC,IAAY;IACtC,QAAQ,GAAG,IAAI,CAAC;AAClB,EAAE;AAEF;;;;;MAKa,WAAW,GAAG,CAAC,UAAkB,EAAE;IAC9C,IAAI,CAAC,QAAQ,EAAE;QACb,MAAM,YAAY,GAAG,gBAAgB,EAAE,CAAC;QACxC,MAAM,cAAc,GAAG,YAAY,GAAG,IAAI,GAAG,kBAAkB,EAAE,CAAC;QAElE,MAAM,MAAM,GAAG,YAAY,IAAI,cAAc,CAAC;QAC9C,IAAI,MAAM,EAAE;YACV,MAAM,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;YAC7F,WAAW,CAAC,GAAG,IAAI,IAAI,gBAAgB,EAAE,CAAC,CAAC;SAC5C;aAAM;;YAEL,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,gBAAgB,IAAI,KAAK,gBAAgB,EAAE,CAAC,CAAC;SACtE;KACF;;IAGD,MAAM,gBAAgB,GAAG,OAAO,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;IACzE,OAAO,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,gBAAgB,CAAC;AACxD,EAAE;AAEF;;;;AAIA,MAAM,gBAAgB,GAAG;IACvB,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,IAAI,CAAC;IAE/C,OAAO,QAAQ,CAAC,aAAa,CAAC,UAAU,mBAAmB,GAAG,CAAC,CAAC;AAClE,CAAC,CAAC;AAEF;;;;AAIA,MAAM,kBAAkB,GAAG;IACzB,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,IAAI,CAAC;IAE/C,OAAO,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;AACvD,CAAC,CAAC;AAEF;;;;;AAKA,MAAM,aAAa,GAAG,CAAC,MAAyB;IAC9C,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,EAAE,CAAC;IAE7C,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACvC,OAAO,GAAG,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;AAC3D,CAAC;;ACxED;AAMA,MAAM,QAAQ,GAAG,IAAI,GAAG,EAA4B,CAAC;AAErD,MAAM,QAAQ,GAAG,OAAO,GAAW,EAAE,QAAiB;IACpD,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO;IAE1E,IAAI,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;QAAE,OAAO,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAEhD,IAAI;QACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;QAElC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;YAChB,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YACzB,OAAO;SACR;QAED,IAAI,UAAU,GAAG,CAAC,MAAM,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;QAE/C,IAAI,UAAU,IAAI,QAAQ,KAAK,KAAK;YAAE,UAAU,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;QAE/E,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;KAClC;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,CAAC,KAAK,CAAC,qCAAqC,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;QAClE,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;KAC1B;AACH,CAAC,CAAC;AAEK,MAAM,WAAW,GAAG,IAAI,GAAG,EAAkB,CAAC;AAE9C,MAAM,aAAa,GAAG,OAAO,GAAW,EAAE,QAAiB;IAChE,IAAI,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;;IAG5B,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE;QACd,GAAG,GAAG,QAAQ,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;QAC9B,QAAQ,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;KACxB;IACD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEK,MAAM,eAAe,GAAG,CAAC,UAAkB;IAChD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,EAAE,CAAC;IAE7C,MAAM,MAAM,GAAG,KAAK,CAAC;IACrB,MAAM,YAAY,GAAG,cAAc,CAAC;IACpC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,SAAS,GAAG,UAAU,CAAC;IAE3B,KAAK,IAAI,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;QACnD,IAAI,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,MAAM,EAAE;YACvD,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;SACpC;KACF;;IAGD,MAAM,MAAM,GAAG,GAAG,CAAC,iBAAiB,CAAC;IACrC,IAAI,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,MAAM,EAAE;;QAEtD,MAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAC5D,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,gBAAgB,IAAI,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;;QAE3E,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;QAGpC,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QACjC,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;;;;QAKhC,IAAI,OAAO,CAAC,MAAqB,CAAC;YAAE,OAAO,GAAG,CAAC,SAAS,CAAC;KAC1D;IAED,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAEK,MAAM,OAAO,GAAG,CAAC,GAAgB;IACtC,IAAI,GAAG,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;QACtC,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,QAAQ;YAAE,OAAO,KAAK,CAAC;QAE1D,KAAK,MAAM,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAClD,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;YAC9B,IAAI,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;gBAC3D,OAAO,KAAK,CAAC;aACd;SACF;QAED,KAAK,MAAM,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAkB,EAAE;YACjE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;gBAAE,OAAO,KAAK,CAAC;SACvC;KACF;IACD,OAAO,IAAI,CAAC;AACd,CAAC;;ACjGD,MAAM,SAAS,GAAG,u3mBAAu3mB,CAAC;AAC14mB,qBAAe,SAAS;;MCiBX,MAAM;;;;;;;;;;oBA0BiC,EAAE;;sBAMJ,SAAS;;;;IAQzD,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1B;;;;;IAOD,kBAAkB;QAChB,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;YAAE,OAAO;QAE5C,OAAO,CAAC,IAAI,CACV;sHACgH,CACjH,CAAC;;;QAGF,MAAM,OAAO,GAAG,SAAS,CAAC;QAC1B,MAAM,cAAc,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC;;;QAGtE,MAAM,YAAY,GAAG,cAAc,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC;;;QAG7D,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,YAAY,EAAE,CAAC;QAC/C,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACzB;;;;;IAOQ,SAAS,CAAe;;;;IAMjC,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;;;;;;;;;;;;;IAiBO,kBAAkB,GAAG;QAC3B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;QAEzB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC;KACpD,CAAC;IAEM,aAAa,GAAG,CAAC,IAAY;QACnC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG;YAAE,OAAO;;QAEpC,IAAI,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC,GAAG,CAAC;QAE9B,MAAM,aAAa,GAAG,MAAM,CAAC;QAC7B,MAAM,YAAY,GAAG,GAAG,IAAI,GAAG,aAAa,EAAE,CAAC;QAE/C,OAAO,WAAW,CAAC,YAAY,CAAC,CAAC;KAClC,CAAC;IAEM,QAAQ,GAAG,CAAC,IAAY;QAC9B,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACrC,aAAa,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC;YAC5B,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACxC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACvC,CAAC,CAAC;KACJ,CAAC;;;;IAMF,MAAM;QACJ,MAAM,MAAM,GAAG;YACb,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,kBAAkB,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1E,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;SAC1D,CAAC;QAEF,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,MAAM,IACjB,0EACc,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI,CAAC,IAAI,OAAO,EAC7C,KAAK,EAAC,8EAA8E,EACpF,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,KAAK,GACV,CACG,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/shared/utils/assetsPath.ts","../../packages/beeq/src/components/icon/helper/request.ts","../../packages/beeq/src/components/icon/scss/bq-icon.scss?tag=bq-icon&encapsulation=shadow","../../packages/beeq/src/components/icon/bq-icon.tsx"],"sourcesContent":["/**\n * Inspired by Shoelace's `getBasePath` and `setBasePath` functions.\n * https://github.com/shoelace-style/shoelace/blob/next/src/utilities/base-path.ts\n */\n\nlet basePath: string | undefined;\nconst DATA_BEEQ_ATTRIBUTE = 'data-beeq';\nconst DEFAULT_SVG_PATH = 'svg';\n\n/**\n * Sets the base path for the assets.\n * @param {string} path - The base path to set.\n */\nexport const setBasePath = (path: string): void => {\n basePath = path;\n};\n\n/**\n * Gets the base path for the assets.\n * @param {string} subpath - An optional subpath to append to the base path.\n * @returns {string} The base path of the assets.\n */\nexport const getBasePath = (subpath: string = ''): string => {\n if (!basePath) {\n const configScript = findConfigScript();\n const fallbackScript = configScript ? null : findFallbackScript();\n\n const script = configScript || fallbackScript;\n if (script) {\n const path = configScript ? script.getAttribute(DATA_BEEQ_ATTRIBUTE) : getScriptPath(script);\n setBasePath(`${path}/${DEFAULT_SVG_PATH}`);\n } else {\n // Fallback: use an environment variable (if set) or the default path\n setBasePath(process.env.ASSETS_BASE_PATH || `./${DEFAULT_SVG_PATH}`);\n }\n }\n\n // Return the base path without a trailing slash. If one exists, append the subpath separated by a slash.\n const formattedSubpath = subpath ? `/${subpath.replace(/^\\//, '')}` : '';\n return basePath.replace(/\\/$/, '') + formattedSubpath;\n};\n\n/**\n * Finds the configuration script element.\n * @returns The configuration script element or null if not found.\n */\nconst findConfigScript = (): HTMLScriptElement | null => {\n if (typeof window === 'undefined') return null;\n\n return document.querySelector(`script[${DATA_BEEQ_ATTRIBUTE}]`);\n};\n\n/**\n * Finds the fallback script element.\n * @returns The fallback script element or null if not found.\n */\nconst findFallbackScript = (): HTMLScriptElement | null => {\n if (typeof window === 'undefined') return null;\n\n return document.querySelector(`script[src*=\"beeq\"]`);\n};\n\n/**\n * Gets the path of a script element.\n * @param {HTMLScriptElement} script - The script element.\n * @returns The path of the script element.\n */\nconst getScriptPath = (script: HTMLScriptElement): string => {\n if (typeof window === 'undefined') return '';\n\n const src = script.getAttribute('src');\n return src ? src.substring(0, src.lastIndexOf('/')) : '';\n};\n","/* -------------------------------------------------------------------------- */\n/* Icon request helper */\n/* -------------------------------------------------------------------------- */\n\nimport { isNil, isString } from '../../../shared/utils';\n\nconst requests = new Map<string, Promise<unknown>>();\n\nconst fetchSvg = async (url: string, sanitize: boolean): Promise<unknown> => {\n if (typeof fetch === 'undefined' || typeof window === 'undefined') return;\n\n if (requests.has(url)) return requests.get(url);\n\n try {\n const response = await fetch(url);\n\n if (!response.ok) {\n iconContent.set(url, '');\n return;\n }\n\n let svgContent = (await response.text()) || '';\n\n if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);\n\n iconContent.set(url, svgContent);\n } catch (error) {\n console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);\n iconContent.set(url, '');\n }\n};\n\nexport const iconContent = new Map<string, string>();\n\nexport const getSvgContent = async (url: string, sanitize: boolean) => {\n let req = requests.get(url);\n\n // NOTE: if the request does not exists we will cache it\n if (isNil(req)) {\n req = fetchSvg(url, sanitize);\n requests.set(url, req);\n }\n return req;\n};\n\nexport const validateContent = (svgContent: string): string => {\n if (typeof window === 'undefined') return '';\n\n const svgTag = 'svg';\n const iconCssClass = 'bq-icon__svg';\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {\n // keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class\n const othersCssClasses = svgElm.getAttribute('class') || '';\n svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());\n // set the shadow DOM part for the SVG element\n svgElm.setAttribute('part', svgTag);\n\n // remove height and width attribute, if for some reason they are still present in the SVG tag\n svgElm.removeAttribute('height');\n svgElm.removeAttribute('width');\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as HTMLElement)) return div.innerHTML;\n }\n\n return '';\n};\n\nexport const isValid = (elm: HTMLElement): boolean => {\n if (elm.nodeType === Node.ELEMENT_NODE) {\n if (elm.nodeName.toLowerCase() === 'script') return false;\n\n for (const attribute of Array.from(elm.attributes)) {\n const value = attribute.value;\n if (isString(value) && value.toLowerCase().startsWith('on')) {\n return false;\n }\n }\n\n for (const childNode of Array.from(elm.children) as HTMLElement[]) {\n if (!isValid(childNode)) return false;\n }\n }\n return true;\n};\n","/* -------------------------------------------------------------------------- */\n/* Icon styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-icon.variables';\n\n:host {\n @apply inline-block;\n}\n\n/**\n * This class is added on packages/beeq/src/components/icon/helper/request.ts\n * See lines 42 and 58 for details.\n */\n.bq-icon__svg {\n @apply scale-x-[--bq-icon--direction];\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { TIconWeight } from './bq-icon.types';\nimport { getSvgContent, iconContent } from './helper/request';\nimport { getBasePath, getColorCSSVariable, isNil } from '../../shared/utils';\n\n/**\n * Icons are simplified images that graphically explain the meaning of an object on the screen.\n *\n * @part base - The component's internal wrapper that holds the icon SVG content.\n * @part svg - The `<svg>` tag element inside the component.\n */\n@Component({\n assetsDirs: ['svg'],\n tag: 'bq-icon',\n styleUrl: './scss/bq-icon.scss',\n shadow: true,\n})\nexport class BqIcon {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private _svgContent: string;\n\n // Public Property API\n // ========================\n\n /** Label for the icon, used for accessibility */\n @Prop({ reflect: true }) label?: string;\n\n /** Set the stroke color of the SVG. The value should be a valid value of the palette color */\n @Prop({ reflect: true }) color?: string;\n\n /** Icon name to load. Please check all available icons [here](https://phosphoricons.com/) */\n @Prop({ reflect: true }) name?: string;\n\n /** Set the size of the SVG */\n @Prop({ reflect: true }) size?: string | number = 24;\n\n /** Set the source of the SVG. If the source is set, the name property will be ignored */\n @Prop({ reflect: true }) src?: string;\n\n /** @deprecated It set the icon weight/style */\n @Prop({ reflect: true }) weight?: TIconWeight = undefined;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('color')\n @Watch('name')\n @Watch('size')\n handlePropsChange() {\n this.loadIcon(this.name);\n }\n\n /**\n * !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\n * We need to maintain retro-compatibility until the next major release\n */\n @Watch('weight')\n handleWeightChange() {\n if (this.name.includes(this.weight)) return;\n\n console.warn(\n `❗️ [bq-icon]: the 'weight' property is deprecated, you should add the weight to the icon name.\\n\n For example, '<bq-icon name=\"bell-fill\"></bq-icon>' instead of '<bq-icon name=\"bell\" weight=\"fill\"></bq-icon>'`,\n );\n // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.\n // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.\n const REGULAR = 'regular';\n const isWeightedIcon = !isNil(this.weight) && this.weight !== REGULAR;\n // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.\n // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.\n const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';\n // Construct the icon name by appending the weight suffix (if any) and the file extension.\n // Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.\n const iconName = `${this.name}${weightSuffix}`;\n this.loadIcon(iconName);\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler to be called when the SVG has loaded */\n @Event() svgLoaded: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.setupIconComponent();\n }\n\n componentWillLoad() {\n this.setupIconComponent();\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 setupIconComponent = () => {\n this.loadIcon(this.name);\n // !TO BE REMOVED: Delete this once the deprecated `weight` property is removed\n if (!isNil(this.weight)) this.handleWeightChange();\n };\n\n private getIconSource = (name: string) => {\n if (!this.name && !this.src) return;\n // Return the src if it is set\n if (this.src) return this.src;\n\n const SVG_EXTENSION = '.svg';\n const iconFileName = `${name}${SVG_EXTENSION}`;\n\n return getBasePath(iconFileName);\n };\n\n private loadIcon = (name: string) => {\n const url = this.getIconSource(name);\n getSvgContent(url, true).then(() => {\n this._svgContent = iconContent.get(url);\n this.svgLoaded.emit(this._svgContent);\n });\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const styles = {\n ...(this.color && { '--bq-icon--color': getColorCSSVariable(this.color) }),\n ...(this.size && { '--bq-icon--size': `${this.size}px` }),\n };\n\n return (\n <Host style={styles}>\n <div\n aria-label={this.label ?? `${this.name} icon`}\n class=\"flex text-[color:--bq-icon--color] bs-[--bq-icon--size] is-[--bq-icon--size]\"\n innerHTML={this._svgContent}\n part=\"base\"\n role=\"img\"\n />\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* © https://beeq.design - Apache 2 License.
|
|
4
4
|
*/
|
|
5
5
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
6
|
-
import './assetsPath.js';
|
|
7
6
|
import { d as debounce } from './debounce.js';
|
|
8
7
|
import { i as isDefined } from './isDefined.js';
|
|
9
8
|
import { i as isHTMLElement } from './isHTMLElement.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"bq-input.js","mappings":"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","names":["BqInput"],"sources":["../../packages/beeq/src/components/input/scss/bq-input.scss?tag=bq-input&encapsulation=shadow","../../packages/beeq/src/components/input/bq-input.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Input styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-input.variables';\n\n:host {\n @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Label and Helper text */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--label {\n @apply flex flex-grow items-center m-be-[--bq-input--label-margin-bottom];\n @apply text-[length:--bq-input--label-text-size] text-[color:--bq-input--label-text-color];\n}\n\n.bq-input--helper-text {\n @apply text-[length:--bq-input--helper-text-size] text-[color:--bq-input--helper-text-color] m-bs-[--bq-input--helper-margin-top];\n}\n\n.bq-input--helper-text.validation-error {\n @apply text-text-danger;\n}\n\n.bq-input--helper-text.validation-success {\n @apply text-text-success;\n}\n\n.bq-input--helper-text.validation-warning {\n @apply text-text-warning;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Input group control */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control {\n @apply flex items-center transition-[border-color,box-shadow] is-full;\n // Border\n @apply rounded-[--bq-input--border-radius] border-[length:--bq-input--border-width] border-[color:--bq-input--border-color];\n // Padding\n @apply pe-[--bq-input--padding-end] ps-[--bq-input--padding-start] p-b-[--bq-input--paddingY];\n // Text\n @apply text-[length:--bq-input--text-size] text-[color:--bq-input--text-color] placeholder:text-[color:--bq-input--text-placeholder-color];\n // Hover\n @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-brand;\n\n border-style: var(--bq-input--border-style);\n\n // Focus\n &:not(.disabled):focus-within {\n --bq-ring-width: 1px;\n --bq-ring-offset-width: 0;\n --bq-ring-color-focus: var(--bq-input--border-color-focus);\n\n @apply focus border-[color:--bq-input--border-color-focus];\n }\n\n // Enable clear button whenever the input group control is hovered or has focus\n &:not(.disabled):hover,\n &:not(.disabled):focus-within {\n .bq-input--control__clear {\n @apply inline-block;\n }\n }\n}\n\n.bq-input--control.disabled {\n @apply cursor-not-allowed opacity-60;\n}\n\n/* ------------------------------- Validation ------------------------------- */\n\n.bq-input--control.validation-error {\n @apply border-stroke-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-danger;\n\n &:not(.disabled):focus-within {\n --bq-ring-color-focus: theme(colors.stroke.danger);\n\n @apply border-active-stroke-danger;\n }\n}\n\n.bq-input--control.validation-success {\n @apply border-stroke-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-success;\n\n &:not(.disabled):focus-within {\n --bq-ring-color-focus: theme(colors.stroke.success);\n\n @apply border-active-stroke-success;\n }\n}\n\n.bq-input--control.validation-warning {\n @apply border-stroke-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-warning;\n\n &:not(.disabled):focus-within {\n --bq-ring-color-focus: theme(colors.stroke.warning);\n\n @apply border-active-stroke-warning;\n }\n}\n\n/* -------------------------------------------------------------------------- */\n/* Native HTML Input */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__input {\n @apply flex-auto cursor-[inherit] appearance-none bg-[inherit] font-[inherit] text-[length:inherit] text-[color:inherit];\n @apply border-none min-bs-[--bq-input--icon-size] min-is-0 m-b-0 m-i-0 p-b-0 p-i-0 focus:outline-none focus-visible:outline-none;\n\n box-shadow: none;\n font-weight: inherit;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Clear button */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__clear::part(button) {\n // Since the clear button is inside the input group control,\n // we need to reset the focus ring styles\n --bq-ring-width: initial;\n --bq-ring-offset-width: initial;\n --bq-ring-color-focus: initial;\n\n @apply rounded-xs border-none bs-auto p-b-0 p-i-0;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Prefix and suffix */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__prefix,\n.bq-input--control__suffix {\n @apply pointer-events-none flex items-center text-[color:--bq-input--text-color];\n}\n\n.bq-input--control__prefix {\n @apply me-[--bq-input--gap];\n}\n\n.bq-input--control__suffix {\n @apply ms-[--bq-input--gap];\n}\n\n/* -------------------------------------------------------------------------- */\n/* Slotted and internal icons */\n/* -------------------------------------------------------------------------- */\n\nbq-icon,\n::slotted(bq-icon) {\n --bq-icon--size: var(--bq-input--icon-size) !important;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Hide webkit clear button */\n/* -------------------------------------------------------------------------- */\n\n/* Remove clear controls from search input */\n\n.bq-input--control__input::-moz-search-cancel {\n @apply hidden appearance-none;\n}\n\n.bq-input--control__input::-webkit-search-decoration,\n.bq-input--control__input::-webkit-search-cancel-button,\n.bq-input--control__input::-webkit-search-results-button,\n.bq-input--control__input::-webkit-search-results-decoration {\n @apply hidden appearance-none;\n}\n\n/* Remove native control extra padding from input date and datetime */\n\n.bq-input--control__input::-webkit-datetime-edit-fields-wrapper,\n.bq-input--control__input::-webkit-datetime-edit,\n.bq-input--control__input::-webkit-datetime-edit-year-field,\n.bq-input--control__input::-webkit-datetime-edit-month-field,\n.bq-input--control__input::-webkit-datetime-edit-day-field,\n.bq-input--control__input::-webkit-datetime-edit-hour-field,\n.bq-input--control__input::-webkit-datetime-edit-minute-field,\n.bq-input--control__input::-webkit-datetime-edit-second-field,\n.bq-input--control__input::-webkit-datetime-edit-millisecond-field,\n.bq-input--control__input::-webkit-datetime-edit-meridiem-field {\n @apply p-b-0 p-i-0;\n}\n","import { AttachInternals, Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TInputType, TInputValidation, TInputValue } from './bq-input.types';\nimport { debounce, hasSlotContent, isDefined, isHTMLElement, isNil, TDebounce } from '../../shared/utils';\n\n/**\n * @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part helper-text - The helper text slot container.\n * @part label - The label slot container.\n * @part input - The native HTML input element used under the hood.\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n */\n@Component({\n tag: 'bq-input',\n styleUrl: './scss/bq-input.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqInput {\n // Own Properties\n // ====================\n\n private helperTextElem?: HTMLElement;\n private inputElem?: HTMLInputElement;\n private labelElem?: HTMLElement;\n private prefixElem?: HTMLElement;\n private suffixElem?: HTMLElement;\n\n private debounceBqInput: TDebounce<void>;\n private fallbackInputId = 'input';\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqInputElement;\n @AttachInternals() internals!: ElementInternals;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() hasHelperText = false;\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n @State() hasValue = false;\n\n // Public Property API\n // ========================\n\n /**\n * Controls whether or not the input field should be capitalized and how.\n * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n */\n @Prop({ reflect: true }) autocapitalize: string = 'off';\n\n /**\n * Specifies whether or not the input field should have autocomplete enabled.\n * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\n @Prop({ reflect: true }) autocomplete: string = 'off';\n\n /**\n * Controls whether or not the input field should have autocorrect enabled.\n * Possible values are 'on' and 'off'.\n */\n @Prop({ reflect: true }) autocorrect: 'on' | 'off' = 'off';\n\n /** If true, the input will be focused on component render */\n @Prop({ reflect: true }) autofocus: boolean;\n\n /** The clear button aria label */\n @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n /**\n * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n * A value of 0 means no debouncing will occur.\n */\n @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n /**\n * Indicates whether the input is disabled or not.\n * If `true`, the input is disabled and cannot be interacted with.\n */\n @Prop({ mutable: true }) disabled?: boolean = false;\n\n /** If true, the clear button won't be displayed */\n @Prop({ reflect: true }) disableClear? = false;\n\n /** The ID of the form that the input field belongs to. */\n @Prop({ reflect: true }) form?: string;\n\n /**\n * The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.\n * This allows a browser to display an appropriate virtual keyboard while editing.\n * Possible values are 'none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url', and 'date'.\n */\n @Prop() inputmode?: string;\n\n /**\n * The maximum value that the input field can accept.\n * Only applies to date and number input types.\n */\n @Prop({ reflect: true }) max?: number | string;\n\n /** The maximum number of characters that the input field can accept. */\n @Prop({ reflect: true }) maxlength: number;\n\n /**\n * The minimum value that the input field can accept.\n * Only applies to date and number input types.\n */\n @Prop({ reflect: true }) min?: number | string;\n\n /** The minimum number of characters that the input field can accept. */\n @Prop({ reflect: true }) minlength: number;\n\n /** The input field name. */\n @Prop({ reflect: true }) name!: string;\n\n /**\n * Specifies a regular expression the form control's value should match.\n * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern\n */\n @Prop({ reflect: true }) pattern?: string;\n\n /** The input placeholder text value */\n @Prop({ reflect: true }) placeholder?: string;\n\n /** If true, the input field cannot be modified. */\n @Prop({ reflect: true }) readonly?: boolean;\n\n /** Indicates whether or not the input field is required to be filled out before submitting the form. */\n @Prop({ reflect: true }) required?: boolean;\n\n /**\n * A number that specifies the granularity that the value must adhere to.\n * Valid for date, month, week, time, datetime-local, number, and range.\n * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n */\n @Prop({ reflect: true }) step: number | 'any';\n\n /**\n * The type attribute specifies the type of input field to display.\n * Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more.\n * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n */\n @Prop({ reflect: true }) type: TInputType = 'text';\n\n /**\n * The validation status of the input.\n *\n * @remarks\n * This property is used to indicate the validation status of the input. It can be set to one of the following values:\n * - `'none'`: No validation status is set.\n * - `'error'`: The input has a validation error.\n * - `'warning'`: The input has a validation warning.\n * - `'success'`: The input has passed validation.\n */\n @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n /** The input value, it can be used to reset the input to a previous value */\n @Prop({ reflect: true, mutable: true }) value: TInputValue;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValueChange() {\n if (Array.isArray(this.value)) {\n this.hasValue = this.value.some((val) => val.length > 0);\n this.internals.setFormValue(this.value.join(','));\n return;\n }\n\n this.hasValue = isDefined(this.value);\n this.internals.setFormValue(`${this.value}`);\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler emitted when the input loses focus */\n @Event() bqBlur!: EventEmitter<HTMLBqInputElement>;\n\n /**\n * Callback handler emitted when the input value has changed and the input loses focus.\n * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n */\n @Event() bqChange!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n /** Callback handler emitted when the input value has been cleared */\n @Event() bqClear!: EventEmitter<HTMLBqInputElement>;\n\n /** Callback handler emitted when the input has received focus */\n @Event() bqFocus!: EventEmitter<HTMLBqInputElement>;\n\n /**\n * Callback handler emitted when the input value changes.\n * This handler is called whenever the user types or pastes text into the input field.\n */\n @Event() bqInput!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.handleValueChange();\n }\n\n formResetCallback() {\n if (isNil(this.value)) return;\n\n this.handleClear();\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 handleBlur = () => {\n if (this.disabled) return;\n\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n if (this.disabled) return;\n\n this.bqFocus.emit(this.el);\n };\n\n private handleInput = (ev: Event) => {\n if (this.disabled) return;\n\n this.debounceBqInput?.cancel();\n\n if (!isHTMLElement(ev.target, 'input')) return;\n this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n this.internals.setFormValue(`${this.value}`);\n\n this.debounceBqInput = debounce(() => {\n this.bqInput.emit({ value: this.value, el: this.el });\n }, this.debounceTime);\n this.debounceBqInput();\n };\n\n private handleChange = (ev: Event) => {\n if (this.disabled) return;\n\n if (!isHTMLElement(ev.target, 'input')) return;\n this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n this.internals.setFormValue(`${this.value}`);\n\n this.bqChange.emit({ value: this.value, el: this.el });\n };\n\n private handleClear = () => {\n if (this.disabled) return;\n\n const { inputElem, internals } = this;\n\n // Clear input element value\n inputElem.value = '';\n this.value = inputElem.value;\n\n // Update associated form control value\n internals.setFormValue(undefined);\n };\n\n private handleClearClick = (ev: CustomEvent) => {\n ev.stopPropagation();\n this.handleClear();\n\n const { bqClear, bqChange, bqInput, el, inputElem } = this;\n // Emit events\n bqClear.emit(el);\n bqInput.emit({ value: this.value, el });\n bqChange.emit({ value: this.value, el });\n // Refocus input element\n inputElem.focus();\n };\n\n private handleLabelSlotChange = () => {\n this.hasLabel = hasSlotContent(this.labelElem);\n };\n\n private handlePrefixSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem);\n };\n\n private handleSuffixSlotChange = () => {\n this.hasSuffix = hasSlotContent(this.suffixElem);\n };\n\n private handleHelperTextSlotChange = () => {\n this.hasHelperText = hasSlotContent(this.helperTextElem);\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"bq-input\" part=\"base\">\n {/* Label */}\n <label\n class={{ 'bq-input--label': true, '!hidden': !this.hasLabel }}\n aria-label={this.name || this.fallbackInputId}\n htmlFor={this.name || this.fallbackInputId}\n ref={(labelElem) => (this.labelElem = labelElem)}\n part=\"label\"\n >\n <slot name=\"label\" onSlotchange={this.handleLabelSlotChange} />\n </label>\n {/* Input control group */}\n <div\n class={{\n 'bq-input--control': true,\n [`validation-${this.validationStatus}`]: true,\n disabled: this.disabled,\n }}\n part=\"control\"\n >\n {/* Prefix */}\n <span\n class={{ 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }}\n ref={(spanElem) => (this.prefixElem = spanElem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handlePrefixSlotChange} />\n </span>\n {/* HTML Input */}\n <input\n id={this.name || this.fallbackInputId}\n class=\"bq-input--control__input\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n disabled={this.disabled}\n form={this.form}\n inputMode={this.inputmode}\n max={this.max}\n maxLength={this.maxlength}\n min={this.min}\n minLength={this.minlength}\n name={this.name}\n pattern={this.pattern}\n placeholder={this.placeholder}\n ref={(inputElem) => (this.inputElem = inputElem)}\n readOnly={this.readonly}\n required={this.required}\n step={this.step}\n type={this.type}\n value={this.value}\n part=\"input\"\n // Events\n onBlur={this.handleBlur}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onInput={this.handleInput}\n />\n {/* Clear Button */}\n {this.hasValue && !this.disabled && !this.disableClear && (\n // The clear button will be visible as long as the input has a value\n // and the parent group is hovered or has focus-within\n <bq-button\n class=\"bq-input--control__clear ms-[--bq-input--gap] hidden\"\n appearance=\"text\"\n aria-label={this.clearButtonLabel}\n size=\"small\"\n onBqClick={this.handleClearClick}\n part=\"clear-btn\"\n exportparts=\"button\"\n >\n <slot name=\"clear-icon\">\n <bq-icon name=\"x-circle\" class=\"flex\" />\n </slot>\n </bq-button>\n )}\n {/* Suffix */}\n <span\n class={{ 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }}\n ref={(spanElem) => (this.suffixElem = spanElem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange} />\n </span>\n </div>\n {/* Helper text */}\n <div\n class={{\n [`bq-input--helper-text validation-${this.validationStatus}`]: true,\n '!hidden': !this.hasHelperText,\n }}\n ref={(divElem) => (this.helperTextElem = divElem)}\n part=\"helper-text\"\n >\n <slot name=\"helper-text\" onSlotchange={this.handleHelperTextSlotChange} />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"bq-input.js","mappings":"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","names":["BqInput"],"sources":["../../packages/beeq/src/components/input/scss/bq-input.scss?tag=bq-input&encapsulation=shadow","../../packages/beeq/src/components/input/bq-input.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Input styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-input.variables';\n\n:host {\n @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Label and Helper text */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--label {\n @apply flex flex-grow items-center m-be-[--bq-input--label-margin-bottom];\n @apply text-[length:--bq-input--label-text-size] text-[color:--bq-input--label-text-color];\n}\n\n.bq-input--helper-text {\n @apply text-[length:--bq-input--helper-text-size] text-[color:--bq-input--helper-text-color] m-bs-[--bq-input--helper-margin-top];\n}\n\n.bq-input--helper-text.validation-error {\n @apply text-text-danger;\n}\n\n.bq-input--helper-text.validation-success {\n @apply text-text-success;\n}\n\n.bq-input--helper-text.validation-warning {\n @apply text-text-warning;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Input group control */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control {\n @apply flex items-center transition-[border-color,box-shadow] is-full;\n // Border\n @apply rounded-[--bq-input--border-radius] border-[length:--bq-input--border-width] border-[color:--bq-input--border-color];\n // Padding\n @apply pe-[--bq-input--padding-end] ps-[--bq-input--padding-start] p-b-[--bq-input--paddingY];\n // Text\n @apply text-[length:--bq-input--text-size] text-[color:--bq-input--text-color] placeholder:text-[color:--bq-input--text-placeholder-color];\n // Hover\n @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-brand;\n\n border-style: var(--bq-input--border-style);\n\n // Focus\n &:not(.disabled):focus-within {\n --bq-ring-width: 1px;\n --bq-ring-offset-width: 0;\n --bq-ring-color-focus: var(--bq-input--border-color-focus);\n\n @apply focus border-[color:--bq-input--border-color-focus];\n }\n\n // Enable clear button whenever the input group control is hovered or has focus\n &:not(.disabled):hover,\n &:not(.disabled):focus-within {\n .bq-input--control__clear {\n @apply inline-block;\n }\n }\n}\n\n.bq-input--control.disabled {\n @apply cursor-not-allowed opacity-60;\n}\n\n/* ------------------------------- Validation ------------------------------- */\n\n.bq-input--control.validation-error {\n @apply border-stroke-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-danger;\n\n &:not(.disabled):focus-within {\n --bq-ring-color-focus: theme(colors.stroke.danger);\n\n @apply border-active-stroke-danger;\n }\n}\n\n.bq-input--control.validation-success {\n @apply border-stroke-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-success;\n\n &:not(.disabled):focus-within {\n --bq-ring-color-focus: theme(colors.stroke.success);\n\n @apply border-active-stroke-success;\n }\n}\n\n.bq-input--control.validation-warning {\n @apply border-stroke-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-warning;\n\n &:not(.disabled):focus-within {\n --bq-ring-color-focus: theme(colors.stroke.warning);\n\n @apply border-active-stroke-warning;\n }\n}\n\n/* -------------------------------------------------------------------------- */\n/* Native HTML Input */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__input {\n @apply flex-auto cursor-[inherit] appearance-none bg-[inherit] font-[inherit] text-[length:inherit] text-[color:inherit];\n @apply border-none min-bs-[--bq-input--icon-size] min-is-0 m-b-0 m-i-0 p-b-0 p-i-0 focus:outline-none focus-visible:outline-none;\n\n box-shadow: none;\n font-weight: inherit;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Clear button */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__clear::part(button) {\n // Since the clear button is inside the input group control,\n // we need to reset the focus ring styles\n --bq-ring-width: initial;\n --bq-ring-offset-width: initial;\n --bq-ring-color-focus: initial;\n\n @apply rounded-xs border-none bs-auto p-b-0 p-i-0;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Prefix and suffix */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__prefix,\n.bq-input--control__suffix {\n @apply pointer-events-none flex items-center text-[color:--bq-input--text-color];\n}\n\n.bq-input--control__prefix {\n @apply me-[--bq-input--gap];\n}\n\n.bq-input--control__suffix {\n @apply ms-[--bq-input--gap];\n}\n\n/* -------------------------------------------------------------------------- */\n/* Slotted and internal icons */\n/* -------------------------------------------------------------------------- */\n\nbq-icon,\n::slotted(bq-icon) {\n --bq-icon--size: var(--bq-input--icon-size) !important;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Hide webkit clear button */\n/* -------------------------------------------------------------------------- */\n\n/* Remove clear controls from search input */\n\n.bq-input--control__input::-moz-search-cancel {\n @apply hidden appearance-none;\n}\n\n.bq-input--control__input::-webkit-search-decoration,\n.bq-input--control__input::-webkit-search-cancel-button,\n.bq-input--control__input::-webkit-search-results-button,\n.bq-input--control__input::-webkit-search-results-decoration {\n @apply hidden appearance-none;\n}\n\n/* Remove native control extra padding from input date and datetime */\n\n.bq-input--control__input::-webkit-datetime-edit-fields-wrapper,\n.bq-input--control__input::-webkit-datetime-edit,\n.bq-input--control__input::-webkit-datetime-edit-year-field,\n.bq-input--control__input::-webkit-datetime-edit-month-field,\n.bq-input--control__input::-webkit-datetime-edit-day-field,\n.bq-input--control__input::-webkit-datetime-edit-hour-field,\n.bq-input--control__input::-webkit-datetime-edit-minute-field,\n.bq-input--control__input::-webkit-datetime-edit-second-field,\n.bq-input--control__input::-webkit-datetime-edit-millisecond-field,\n.bq-input--control__input::-webkit-datetime-edit-meridiem-field {\n @apply p-b-0 p-i-0;\n}\n","import { AttachInternals, Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TInputType, TInputValidation, TInputValue } from './bq-input.types';\nimport { debounce, hasSlotContent, isDefined, isHTMLElement, isNil, TDebounce } from '../../shared/utils';\n\n/**\n * @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part helper-text - The helper text slot container.\n * @part label - The label slot container.\n * @part input - The native HTML input element used under the hood.\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n */\n@Component({\n tag: 'bq-input',\n styleUrl: './scss/bq-input.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqInput {\n // Own Properties\n // ====================\n\n private helperTextElem?: HTMLElement;\n private inputElem?: HTMLInputElement;\n private labelElem?: HTMLElement;\n private prefixElem?: HTMLElement;\n private suffixElem?: HTMLElement;\n\n private debounceBqInput: TDebounce<void>;\n private fallbackInputId = 'input';\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqInputElement;\n @AttachInternals() internals!: ElementInternals;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() hasHelperText = false;\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n @State() hasValue = false;\n\n // Public Property API\n // ========================\n\n /**\n * Controls whether or not the input field should be capitalized and how.\n * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n */\n @Prop({ reflect: true }) autocapitalize: string = 'off';\n\n /**\n * Specifies whether or not the input field should have autocomplete enabled.\n * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\n @Prop({ reflect: true }) autocomplete: string = 'off';\n\n /**\n * Controls whether or not the input field should have autocorrect enabled.\n * Possible values are 'on' and 'off'.\n */\n @Prop({ reflect: true }) autocorrect: 'on' | 'off' = 'off';\n\n /** If true, the input will be focused on component render */\n @Prop({ reflect: true }) autofocus: boolean;\n\n /** The clear button aria label */\n @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n /**\n * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n * A value of 0 means no debouncing will occur.\n */\n @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n /**\n * Indicates whether the input is disabled or not.\n * If `true`, the input is disabled and cannot be interacted with.\n */\n @Prop({ mutable: true }) disabled?: boolean = false;\n\n /** If true, the clear button won't be displayed */\n @Prop({ reflect: true }) disableClear? = false;\n\n /** The ID of the form that the input field belongs to. */\n @Prop({ reflect: true }) form?: string;\n\n /**\n * The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.\n * This allows a browser to display an appropriate virtual keyboard while editing.\n * Possible values are 'none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url', and 'date'.\n */\n @Prop() inputmode?: string;\n\n /**\n * The maximum value that the input field can accept.\n * Only applies to date and number input types.\n */\n @Prop({ reflect: true }) max?: number | string;\n\n /** The maximum number of characters that the input field can accept. */\n @Prop({ reflect: true }) maxlength: number;\n\n /**\n * The minimum value that the input field can accept.\n * Only applies to date and number input types.\n */\n @Prop({ reflect: true }) min?: number | string;\n\n /** The minimum number of characters that the input field can accept. */\n @Prop({ reflect: true }) minlength: number;\n\n /** The input field name. */\n @Prop({ reflect: true }) name!: string;\n\n /**\n * Specifies a regular expression the form control's value should match.\n * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern\n */\n @Prop({ reflect: true }) pattern?: string;\n\n /** The input placeholder text value */\n @Prop({ reflect: true }) placeholder?: string;\n\n /** If true, the input field cannot be modified. */\n @Prop({ reflect: true }) readonly?: boolean;\n\n /** Indicates whether or not the input field is required to be filled out before submitting the form. */\n @Prop({ reflect: true }) required?: boolean;\n\n /**\n * A number that specifies the granularity that the value must adhere to.\n * Valid for date, month, week, time, datetime-local, number, and range.\n * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n */\n @Prop({ reflect: true }) step: number | 'any';\n\n /**\n * The type attribute specifies the type of input field to display.\n * Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more.\n * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n */\n @Prop({ reflect: true }) type: TInputType = 'text';\n\n /**\n * The validation status of the input.\n *\n * @remarks\n * This property is used to indicate the validation status of the input. It can be set to one of the following values:\n * - `'none'`: No validation status is set.\n * - `'error'`: The input has a validation error.\n * - `'warning'`: The input has a validation warning.\n * - `'success'`: The input has passed validation.\n */\n @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n /** The input value, it can be used to reset the input to a previous value */\n @Prop({ reflect: true, mutable: true }) value: TInputValue;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValueChange() {\n if (Array.isArray(this.value)) {\n this.hasValue = this.value.some((val) => val.length > 0);\n this.internals.setFormValue(this.value.join(','));\n return;\n }\n\n this.hasValue = isDefined(this.value);\n this.internals.setFormValue(`${this.value}`);\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler emitted when the input loses focus */\n @Event() bqBlur!: EventEmitter<HTMLBqInputElement>;\n\n /**\n * Callback handler emitted when the input value has changed and the input loses focus.\n * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n */\n @Event() bqChange!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n /** Callback handler emitted when the input value has been cleared */\n @Event() bqClear!: EventEmitter<HTMLBqInputElement>;\n\n /** Callback handler emitted when the input has received focus */\n @Event() bqFocus!: EventEmitter<HTMLBqInputElement>;\n\n /**\n * Callback handler emitted when the input value changes.\n * This handler is called whenever the user types or pastes text into the input field.\n */\n @Event() bqInput!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.handleValueChange();\n }\n\n formResetCallback() {\n if (isNil(this.value)) return;\n\n this.handleClear();\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 handleBlur = () => {\n if (this.disabled) return;\n\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n if (this.disabled) return;\n\n this.bqFocus.emit(this.el);\n };\n\n private handleInput = (ev: Event) => {\n if (this.disabled) return;\n\n this.debounceBqInput?.cancel();\n\n if (!isHTMLElement(ev.target, 'input')) return;\n this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n this.internals.setFormValue(`${this.value}`);\n\n this.debounceBqInput = debounce(() => {\n this.bqInput.emit({ value: this.value, el: this.el });\n }, this.debounceTime);\n this.debounceBqInput();\n };\n\n private handleChange = (ev: Event) => {\n if (this.disabled) return;\n\n if (!isHTMLElement(ev.target, 'input')) return;\n this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n this.internals.setFormValue(`${this.value}`);\n\n this.bqChange.emit({ value: this.value, el: this.el });\n };\n\n private handleClear = () => {\n if (this.disabled) return;\n\n const { inputElem, internals } = this;\n\n // Clear input element value\n inputElem.value = '';\n this.value = inputElem.value;\n\n // Update associated form control value\n internals.setFormValue(undefined);\n };\n\n private handleClearClick = (ev: CustomEvent) => {\n ev.stopPropagation();\n this.handleClear();\n\n const { bqClear, bqChange, bqInput, el, inputElem } = this;\n // Emit events\n bqClear.emit(el);\n bqInput.emit({ value: this.value, el });\n bqChange.emit({ value: this.value, el });\n // Refocus input element\n inputElem.focus();\n };\n\n private handleLabelSlotChange = () => {\n this.hasLabel = hasSlotContent(this.labelElem);\n };\n\n private handlePrefixSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem);\n };\n\n private handleSuffixSlotChange = () => {\n this.hasSuffix = hasSlotContent(this.suffixElem);\n };\n\n private handleHelperTextSlotChange = () => {\n this.hasHelperText = hasSlotContent(this.helperTextElem);\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"bq-input\" part=\"base\">\n {/* Label */}\n <label\n class={{ 'bq-input--label': true, '!hidden': !this.hasLabel }}\n aria-label={this.name || this.fallbackInputId}\n htmlFor={this.name || this.fallbackInputId}\n ref={(labelElem) => (this.labelElem = labelElem)}\n part=\"label\"\n >\n <slot name=\"label\" onSlotchange={this.handleLabelSlotChange} />\n </label>\n {/* Input control group */}\n <div\n class={{\n 'bq-input--control': true,\n [`validation-${this.validationStatus}`]: true,\n disabled: this.disabled,\n }}\n part=\"control\"\n >\n {/* Prefix */}\n <span\n class={{ 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }}\n ref={(spanElem) => (this.prefixElem = spanElem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handlePrefixSlotChange} />\n </span>\n {/* HTML Input */}\n <input\n id={this.name || this.fallbackInputId}\n class=\"bq-input--control__input\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n disabled={this.disabled}\n form={this.form}\n inputMode={this.inputmode}\n max={this.max}\n maxLength={this.maxlength}\n min={this.min}\n minLength={this.minlength}\n name={this.name}\n pattern={this.pattern}\n placeholder={this.placeholder}\n ref={(inputElem) => (this.inputElem = inputElem)}\n readOnly={this.readonly}\n required={this.required}\n step={this.step}\n type={this.type}\n value={this.value}\n part=\"input\"\n // Events\n onBlur={this.handleBlur}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onInput={this.handleInput}\n />\n {/* Clear Button */}\n {this.hasValue && !this.disabled && !this.disableClear && (\n // The clear button will be visible as long as the input has a value\n // and the parent group is hovered or has focus-within\n <bq-button\n class=\"bq-input--control__clear ms-[--bq-input--gap] hidden\"\n appearance=\"text\"\n aria-label={this.clearButtonLabel}\n size=\"small\"\n onBqClick={this.handleClearClick}\n part=\"clear-btn\"\n exportparts=\"button\"\n >\n <slot name=\"clear-icon\">\n <bq-icon name=\"x-circle\" class=\"flex\" />\n </slot>\n </bq-button>\n )}\n {/* Suffix */}\n <span\n class={{ 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }}\n ref={(spanElem) => (this.suffixElem = spanElem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange} />\n </span>\n </div>\n {/* Helper text */}\n <div\n class={{\n [`bq-input--helper-text validation-${this.validationStatus}`]: true,\n '!hidden': !this.hasHelperText,\n }}\n ref={(divElem) => (this.helperTextElem = divElem)}\n part=\"helper-text\"\n >\n <slot name=\"helper-text\" onSlotchange={this.handleHelperTextSlotChange} />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|