q2-tecton-elements 1.45.2 → 1.46.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/click-elsewhere_2.cjs.entry.js +36 -4
- package/dist/cjs/click-elsewhere_2.cjs.entry.js.map +1 -1
- package/dist/cjs/{index-0430339e.js → index-c385e32f.js} +1 -1
- package/dist/cjs/{index-0430339e.js.map → index-c385e32f.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/q2-btn_2.cjs.entry.js +2 -1
- package/dist/cjs/q2-btn_2.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-calendar.cjs.entry.js +5 -4
- package/dist/cjs/q2-calendar.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-carousel.cjs.entry.js +33 -2
- package/dist/cjs/q2-carousel.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-currency.cjs.entry.js +1 -1
- package/dist/cjs/q2-currency.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-dropdown.cjs.entry.js +2 -1
- package/dist/cjs/q2-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-icon.cjs.entry.js +5 -3
- package/dist/cjs/q2-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-input.cjs.entry.js +17 -10
- package/dist/cjs/q2-input.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-item.cjs.entry.js +1 -1
- package/dist/cjs/q2-item.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-list.cjs.entry.js +1 -1
- package/dist/cjs/q2-list.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-optgroup.cjs.entry.js +59 -0
- package/dist/cjs/q2-optgroup.cjs.entry.js.map +1 -0
- package/dist/cjs/{q2-optgroup_2.cjs.entry.js → q2-option.cjs.entry.js} +1 -52
- package/dist/cjs/q2-option.cjs.entry.js.map +1 -0
- package/dist/cjs/q2-pagination.cjs.entry.js +22 -3
- package/dist/cjs/q2-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-pill.cjs.entry.js +2 -2
- package/dist/cjs/q2-pill.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-relative-time.cjs.entry.js +2 -2
- package/dist/cjs/q2-section.cjs.entry.js +2 -2
- package/dist/cjs/q2-select.cjs.entry.js +6 -6
- package/dist/cjs/q2-select.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-stepper-pane.cjs.entry.js +1 -1
- package/dist/cjs/q2-stepper-pane.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-stepper-vertical.cjs.entry.js +6 -6
- package/dist/cjs/q2-stepper-vertical.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-stepper.cjs.entry.js +2 -2
- package/dist/cjs/q2-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-tab-container.cjs.entry.js +2 -2
- package/dist/cjs/q2-tab-container.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-tab-pane.cjs.entry.js +1 -1
- package/dist/cjs/q2-tag.cjs.entry.js +1 -1
- package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
- package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
- package/dist/cjs/q2-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/tecton-tab-pane.cjs.entry.js +2 -2
- package/dist/collection/components/click-elsewhere/click-elsewhere.js.map +1 -1
- package/dist/collection/components/q2-btn/q2-btn.js +29 -5
- package/dist/collection/components/q2-btn/q2-btn.js.map +1 -1
- package/dist/collection/components/q2-calendar/q2-calendar.css +3 -0
- package/dist/collection/components/q2-calendar/q2-calendar.js +24 -2
- package/dist/collection/components/q2-calendar/q2-calendar.js.map +1 -1
- package/dist/collection/components/q2-carousel/q2-carousel.js +33 -2
- package/dist/collection/components/q2-carousel/q2-carousel.js.map +1 -1
- package/dist/collection/components/q2-currency/q2-currency.css +4 -0
- package/dist/collection/components/q2-data-table/q2-data-table.js +6 -6
- package/dist/collection/components/q2-dropdown/q2-dropdown.js +23 -1
- package/dist/collection/components/q2-dropdown/q2-dropdown.js.map +1 -1
- package/dist/collection/components/q2-icon/q2-icon.js +6 -4
- package/dist/collection/components/q2-icon/q2-icon.js.map +1 -1
- package/dist/collection/components/q2-input/q2-input.js +43 -15
- package/dist/collection/components/q2-input/q2-input.js.map +1 -1
- package/dist/collection/components/q2-item/q2-item.css +11 -11
- package/dist/collection/components/q2-list/q2-list.css +8 -5
- package/dist/collection/components/q2-option-list/q2-option-list.js +2 -2
- package/dist/collection/components/q2-pagination/q2-pagination.css +17 -2
- package/dist/collection/components/q2-pagination/q2-pagination.js +53 -2
- package/dist/collection/components/q2-pagination/q2-pagination.js.map +1 -1
- package/dist/collection/components/q2-pill/q2-pill.js +2 -2
- package/dist/collection/components/q2-pill/q2-pill.js.map +1 -1
- package/dist/collection/components/q2-popover/q2-popover.css +3 -0
- package/dist/collection/components/q2-popover/q2-popover.js +53 -3
- package/dist/collection/components/q2-popover/q2-popover.js.map +1 -1
- package/dist/collection/components/q2-relative-time/q2-relative-time.js +1 -1
- package/dist/collection/components/q2-section/q2-section.js +2 -2
- package/dist/collection/components/q2-select/q2-select.js +44 -6
- package/dist/collection/components/q2-select/q2-select.js.map +1 -1
- package/dist/collection/components/q2-stepper/q2-stepper.js +2 -2
- package/dist/collection/components/q2-stepper/q2-stepper.js.map +1 -1
- package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js +4 -4
- package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js.map +1 -1
- package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js +6 -6
- package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js.map +1 -1
- package/dist/collection/components/q2-tab-container/q2-tab-container.js +2 -2
- package/dist/collection/components/q2-tab-container/q2-tab-container.js.map +1 -1
- package/dist/collection/components/q2-tab-pane/q2-tab-pane.js +1 -1
- package/dist/collection/components/q2-tag/q2-tag.js +1 -1
- package/dist/collection/components/q2-textarea/q2-textarea.css +2 -2
- package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.js +2 -2
- package/dist/components/click-elsewhere2.js.map +1 -1
- package/dist/components/index2.js +1 -1
- package/dist/components/q2-btn2.js +4 -2
- package/dist/components/q2-btn2.js.map +1 -1
- package/dist/components/q2-calendar.js +5 -3
- package/dist/components/q2-calendar.js.map +1 -1
- package/dist/components/q2-carousel.js +33 -2
- package/dist/components/q2-carousel.js.map +1 -1
- package/dist/components/q2-currency.js +1 -1
- package/dist/components/q2-currency.js.map +1 -1
- package/dist/components/q2-dropdown.js +3 -1
- package/dist/components/q2-dropdown.js.map +1 -1
- package/dist/components/q2-icon2.js +6 -4
- package/dist/components/q2-icon2.js.map +1 -1
- package/dist/components/q2-input2.js +20 -12
- package/dist/components/q2-input2.js.map +1 -1
- package/dist/components/q2-item.js +1 -1
- package/dist/components/q2-item.js.map +1 -1
- package/dist/components/q2-list.js +1 -1
- package/dist/components/q2-list.js.map +1 -1
- package/dist/components/q2-message2.js +1 -1
- package/dist/components/q2-option-list2.js +1 -1
- package/dist/components/q2-pagination.js +64 -13
- package/dist/components/q2-pagination.js.map +1 -1
- package/dist/components/q2-pill.js +2 -2
- package/dist/components/q2-pill.js.map +1 -1
- package/dist/components/q2-popover2.js +38 -5
- package/dist/components/q2-popover2.js.map +1 -1
- package/dist/components/q2-relative-time.js +1 -1
- package/dist/components/q2-section.js +2 -2
- package/dist/components/q2-select.js +1 -709
- package/dist/components/q2-select.js.map +1 -1
- package/dist/components/q2-select2.js +715 -0
- package/dist/components/q2-select2.js.map +1 -0
- package/dist/components/q2-stepper-pane.js +2 -2
- package/dist/components/q2-stepper-pane.js.map +1 -1
- package/dist/components/q2-stepper-vertical.js +6 -6
- package/dist/components/q2-stepper-vertical.js.map +1 -1
- package/dist/components/q2-stepper.js +2 -2
- package/dist/components/q2-stepper.js.map +1 -1
- package/dist/components/q2-tab-container.js +2 -2
- package/dist/components/q2-tab-container.js.map +1 -1
- package/dist/components/q2-tab-pane.js +1 -1
- package/dist/components/q2-tag.js +1 -1
- package/dist/components/q2-textarea.js +1 -1
- package/dist/components/q2-textarea.js.map +1 -1
- package/dist/components/tecton-tab-pane.js +2 -2
- package/dist/esm/click-elsewhere_2.entry.js +36 -4
- package/dist/esm/click-elsewhere_2.entry.js.map +1 -1
- package/dist/esm/{index-e940b40e.js → index-f0dfb099.js} +1 -1
- package/dist/esm/{index-e940b40e.js.map → index-f0dfb099.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/q2-btn_2.entry.js +2 -1
- package/dist/esm/q2-btn_2.entry.js.map +1 -1
- package/dist/esm/q2-calendar.entry.js +5 -4
- package/dist/esm/q2-calendar.entry.js.map +1 -1
- package/dist/esm/q2-carousel.entry.js +33 -2
- package/dist/esm/q2-carousel.entry.js.map +1 -1
- package/dist/esm/q2-currency.entry.js +1 -1
- package/dist/esm/q2-currency.entry.js.map +1 -1
- package/dist/esm/q2-dropdown.entry.js +2 -1
- package/dist/esm/q2-dropdown.entry.js.map +1 -1
- package/dist/esm/q2-icon.entry.js +6 -4
- package/dist/esm/q2-icon.entry.js.map +1 -1
- package/dist/esm/q2-input.entry.js +17 -10
- package/dist/esm/q2-input.entry.js.map +1 -1
- package/dist/esm/q2-item.entry.js +1 -1
- package/dist/esm/q2-item.entry.js.map +1 -1
- package/dist/esm/q2-list.entry.js +1 -1
- package/dist/esm/q2-list.entry.js.map +1 -1
- package/dist/esm/q2-optgroup.entry.js +55 -0
- package/dist/esm/q2-optgroup.entry.js.map +1 -0
- package/dist/esm/{q2-optgroup_2.entry.js → q2-option.entry.js} +3 -53
- package/dist/esm/q2-option.entry.js.map +1 -0
- package/dist/esm/q2-pagination.entry.js +22 -3
- package/dist/esm/q2-pagination.entry.js.map +1 -1
- package/dist/esm/q2-pill.entry.js +2 -2
- package/dist/esm/q2-pill.entry.js.map +1 -1
- package/dist/esm/q2-relative-time.entry.js +2 -2
- package/dist/esm/q2-section.entry.js +2 -2
- package/dist/esm/q2-select.entry.js +6 -6
- package/dist/esm/q2-select.entry.js.map +1 -1
- package/dist/esm/q2-stepper-pane.entry.js +2 -2
- package/dist/esm/q2-stepper-pane.entry.js.map +1 -1
- package/dist/esm/q2-stepper-vertical.entry.js +6 -6
- package/dist/esm/q2-stepper-vertical.entry.js.map +1 -1
- package/dist/esm/q2-stepper.entry.js +2 -2
- package/dist/esm/q2-stepper.entry.js.map +1 -1
- package/dist/esm/q2-tab-container.entry.js +2 -2
- package/dist/esm/q2-tab-container.entry.js.map +1 -1
- package/dist/esm/q2-tab-pane.entry.js +1 -1
- package/dist/esm/q2-tag.entry.js +1 -1
- package/dist/esm/q2-tecton-elements.js +1 -1
- package/dist/esm/q2-textarea.entry.js +1 -1
- package/dist/esm/q2-textarea.entry.js.map +1 -1
- package/dist/esm/tecton-tab-pane.entry.js +2 -2
- package/dist/q2-tecton-elements/{p-685b821c.entry.js → p-0eff37c6.entry.js} +2 -2
- package/dist/q2-tecton-elements/{p-fcc84527.entry.js → p-12326313.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-12326313.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-176ad382.entry.js +2 -0
- package/dist/q2-tecton-elements/p-176ad382.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-f4d77672.entry.js → p-195a133c.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-1b37b8c6.entry.js +2 -0
- package/dist/q2-tecton-elements/p-1b37b8c6.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-1c4aa7e3.entry.js +2 -0
- package/dist/q2-tecton-elements/p-1c4aa7e3.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-1e927478.entry.js +2 -0
- package/dist/q2-tecton-elements/p-1e927478.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-36398b59.entry.js +2 -0
- package/dist/q2-tecton-elements/p-36398b59.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-7ce6e587.js → p-3c42c90f.js} +1 -1
- package/dist/q2-tecton-elements/p-66af375f.entry.js +2 -0
- package/dist/q2-tecton-elements/p-66af375f.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-6ebe37ea.entry.js +2 -0
- package/dist/q2-tecton-elements/p-6ebe37ea.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-79df783e.entry.js +2 -0
- package/dist/q2-tecton-elements/p-79df783e.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-7e1dc7e8.entry.js +2 -0
- package/dist/q2-tecton-elements/p-7e1dc7e8.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-05b015a8.entry.js → p-87bbeb9c.entry.js} +2 -2
- package/dist/q2-tecton-elements/{p-05b015a8.entry.js.map → p-87bbeb9c.entry.js.map} +1 -1
- package/dist/q2-tecton-elements/p-89305707.entry.js +2 -0
- package/dist/q2-tecton-elements/p-89305707.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-debd5249.entry.js → p-ad274c67.entry.js} +2 -2
- package/dist/q2-tecton-elements/{p-debd5249.entry.js.map → p-ad274c67.entry.js.map} +1 -1
- package/dist/q2-tecton-elements/p-c56b58e9.entry.js +2 -0
- package/dist/q2-tecton-elements/p-c56b58e9.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-2436c843.entry.js → p-cb4f9b33.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-cb4f9b33.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-5dc5c4e2.entry.js → p-d013e05d.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-d013e05d.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-d1522382.entry.js +2 -0
- package/dist/q2-tecton-elements/p-d1522382.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-63192fac.entry.js → p-da7fc914.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-e3230823.entry.js +2 -0
- package/dist/q2-tecton-elements/p-e3230823.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-b376c111.entry.js → p-e47dbfbe.entry.js} +2 -2
- package/dist/q2-tecton-elements/{p-a214077c.entry.js → p-e4a2469f.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-f0813fb4.entry.js +2 -0
- package/dist/q2-tecton-elements/p-f0813fb4.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-fc9f43f8.entry.js +2 -0
- package/dist/q2-tecton-elements/p-fc9f43f8.entry.js.map +1 -0
- package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
- package/dist/q2-tecton-elements/q2-tecton-elements.esm.js.map +1 -1
- package/dist/test/elements/q2-calendar-test.e2e.js +21 -1
- package/dist/test/elements/q2-calendar-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-carousel-test.e2e.js +67 -1
- package/dist/test/elements/q2-carousel-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-detail/q2-list-test.e2e.js +1 -1
- package/dist/test/elements/q2-detail/q2-list-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-dropdown-test.e2e.js +30 -0
- package/dist/test/elements/q2-dropdown-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-icon-test.e2e.js +17 -0
- package/dist/test/elements/q2-icon-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-input-test.e2e.js +25 -2
- package/dist/test/elements/q2-input-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-pagination-test.e2e.js +22 -0
- package/dist/test/elements/q2-pagination-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-pill-test.e2e.js +21 -2
- package/dist/test/elements/q2-pill-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-popover-test.spec.js +99 -13
- package/dist/test/elements/q2-popover-test.spec.js.map +1 -1
- package/dist/test/elements/q2-select-test.e2e.js +50 -8
- package/dist/test/elements/q2-select-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-stepper-test.e2e.js +10 -17
- package/dist/test/elements/q2-stepper-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-stepper-vertical-test.e2e.js +20 -4
- package/dist/test/elements/q2-stepper-vertical-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-tab-container-test.e2e.js +10 -4
- package/dist/test/elements/q2-tab-container-test.e2e.js.map +1 -1
- package/dist/types/components/q2-btn/q2-btn.d.ts +14 -3
- package/dist/types/components/q2-carousel/q2-carousel.d.ts +2 -0
- package/dist/types/components/q2-icon/q2-icon.d.ts +1 -0
- package/dist/types/components/q2-input/q2-input.d.ts +10 -3
- package/dist/types/components/q2-popover/q2-popover.d.ts +3 -1
- package/dist/types/components.d.ts +82 -4
- package/package.json +3 -3
- package/dist/cjs/q2-optgroup_2.cjs.entry.js.map +0 -1
- package/dist/esm/q2-optgroup_2.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-1c17d118.entry.js +0 -2
- package/dist/q2-tecton-elements/p-1c17d118.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-2436c843.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-3b1ea100.entry.js +0 -2
- package/dist/q2-tecton-elements/p-3b1ea100.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-445990a8.entry.js +0 -2
- package/dist/q2-tecton-elements/p-445990a8.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-4a332c2a.entry.js +0 -2
- package/dist/q2-tecton-elements/p-4a332c2a.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-4b81a121.entry.js +0 -2
- package/dist/q2-tecton-elements/p-4b81a121.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-50bd4437.entry.js +0 -2
- package/dist/q2-tecton-elements/p-50bd4437.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-5dc5c4e2.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-7c12ba02.entry.js +0 -2
- package/dist/q2-tecton-elements/p-7c12ba02.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-7f663376.entry.js +0 -2
- package/dist/q2-tecton-elements/p-7f663376.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-a977e723.entry.js +0 -2
- package/dist/q2-tecton-elements/p-a977e723.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-b3d10d52.entry.js +0 -2
- package/dist/q2-tecton-elements/p-b3d10d52.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-c4c458b7.entry.js +0 -2
- package/dist/q2-tecton-elements/p-c4c458b7.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-d1a9ed3d.entry.js +0 -2
- package/dist/q2-tecton-elements/p-d1a9ed3d.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-f1281e3f.entry.js +0 -2
- package/dist/q2-tecton-elements/p-f1281e3f.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-f162c670.entry.js +0 -2
- package/dist/q2-tecton-elements/p-f162c670.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-fcc84527.entry.js.map +0 -1
- /package/dist/q2-tecton-elements/{p-685b821c.entry.js.map → p-0eff37c6.entry.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-f4d77672.entry.js.map → p-195a133c.entry.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-7ce6e587.js.map → p-3c42c90f.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-63192fac.entry.js.map → p-da7fc914.entry.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-b376c111.entry.js.map → p-e47dbfbe.entry.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-a214077c.entry.js.map → p-e4a2469f.entry.js.map} +0 -0
- /package/dist/types/workspace/workspace/{tecton-production_release_1.45.x → _Gitlab_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/elements/q2-detail/slot-component.d.ts +0 -0
- /package/dist/types/workspace/workspace/{tecton-production_release_1.45.x → _Gitlab_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +0 -0
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as e,h as a,F as r,g as i}from"./p-a5f18e27.js";import{o as s,c,i as n,l as o}from"./p-42302f6f.js";const l='*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:grid;grid-template-columns:var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;gap:var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);min-height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 2)));-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-stepper-vertical-btn-active-font-weight, var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600)))}[aria-describedby] .step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 1)));-webkit-box-orient:vertical}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-stepper-vertical-btn-icon-size, var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px)));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-btn-label-font-size, var(--tct-advanced-stepper-btn-label-font-size, var(--t-advanced-stepper-btn-label-font-size, 16px)));--comp-btn-label-color:var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d))));--comp-tween:var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));--comp-bullet-bg:var(--tct-stepper-vertical-bullet-active-background, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-child-btn-label-font-size, var(--tct-advanced-stepper-child-btn-label-font-size, var(--t-advanced-stepper-child-btn-label-font-size, var(--app-font-size-small, 12px))))}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-stepper-vertical-btn-text-align, var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start)));grid-template-areas:"icon content";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled],.step-child-btn[aria-disabled]{cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))))}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn{min-height:var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));font-size:var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));--comp-active-color:var(--comp-bullet-bg)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));padding-left:var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));font-size:var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));border-left-width:var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));border-left-style:var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #d20a0a);--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-stoplight-warning:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:"";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-stepper-vertical-child-border-width, var(--tct-advanced-stepaer-child-border-width, var(--t-advanced-stepaer-child-border-width, 1px)));border-left-style:var(--tct-stepper-vertical-child-border-style, var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid)));border-left-color:var(--tct-stepper-vertical-child-border-color, var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9))));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-stepper-vertical-spacer-height, var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px))))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}';const p=l;const d=class{constructor(a){t(this,a);this.change=e(this,"change",7);this.scheduledAfterRender=[];this.determinePaneChanges=t=>{t.forEach((t=>{var e,a;if(t.type!=="childList")return;if(!t.addedNodes.length&&!t.removedNodes.length)return;if(((e=t.addedNodes[0])===null||e===void 0?void 0:e.nodeType)!==Node.ELEMENT_NODE&&((a=t.removedNodes[0])===null||a===void 0?void 0:a.nodeType)!==Node.ELEMENT_NODE)return;this.buildPaneList()}))};this.buildPaneList=()=>{const{allRootPanes:t}=this;if(!t.length)return;this.structuredPanes=Array.from(t).reduce(((t,e)=>{var a,r;const i=Array.from((r=(a=e.querySelector("[slot=children]"))===null||a===void 0?void 0:a.children)!==null&&r!==void 0?r:[]).filter((({tagName:t})=>t==="Q2-STEPPER-PANE")).map(this.extractDetails);t.push(Object.assign(Object.assign({},this.extractDetails(e)),{children:i}));return t}),[])};this.onStepClick=(t,e)=>{t.stopPropagation();const{currentStepId:a}=this;if(e===a)return;const r=this.allPanes.find((t=>t.id===e));this.change.emit({selectedStep:r,selectedStepId:e,currentStepId:a})};this.onStepKeyDown=(t,e)=>{const{key:a}=t;let r;switch(a){case"ArrowUp":case"ArrowLeft":t.preventDefault();r=this.getStepId(e,"prev");break;case"ArrowDown":case"ArrowRight":t.preventDefault();r=this.getStepId(e,"next");break;case"Home":t.preventDefault();r=this.getStepId(e,"first");break;case"End":t.preventDefault();r=this.getStepId(e,"last");break}if(!r)return;this.focusStepBtn(r,true)};this.currentStepId=undefined;this.structuredPanes=[]}componentWillLoad(){this.setDefaultPane();this.buildPaneList();const t=new MutationObserver(this.determinePaneChanges);const e={childList:true};t.observe(this.hostElement,e);this.allRootPanes.forEach((a=>{const r=a.querySelector("[slot=children]");if(r)t.observe(r,e)}));this.mutationObserver=t}componentDidLoad(){s(this.hostElement);setTimeout((()=>this.showStep(this.currentStepId)),0)}componentWillUpdate(){this.expandedStepChildrenList=null}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[];this.openCurrentStepChildren()}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}get allRootPanes(){return Array.from(this.hostElement.querySelectorAll(":scope > q2-stepper-pane"))}get allPanes(){return Array.from(this.hostElement.querySelectorAll("q2-stepper-pane"))}setDefaultPane(){if(this.currentStepId)return;const t=this.hostElement.querySelector("q2-stepper-pane");if(!t)return;if(!t.id)t.id=`step-${c()}`;this.currentStepId=t.id}getStepId(t,e){const a=Array.from(this.hostElement.shadowRoot.querySelectorAll('ul:not([aria-hidden="true"]) > li > button:not([aria-disabled="true"])'));const r=a.findIndex((e=>e.getAttribute("id")===t));let i;switch(e){case"prev":i=Math.max(r-1,0);break;case"next":i=Math.min(r+1,a.length-1);break;case"first":i=0;break;case"last":i=a.length-1;break}return a[i].getAttribute("id")}showStep(t){this.scheduledAfterRender.push(this.resizeIframe);this.showStepPane(t);this.focusStepBtn(t)}extractDetails(t){const{label:e,description:a,status:r}=t;if(!t.id)t.id=`step-${c()}`;return{id:t.id,label:e,description:a,status:r}}resizeIframe(){var t,e;return(e=(t=window===null||window===void 0?void 0:window.TectonElements)===null||t===void 0?void 0:t.resizeIframe)===null||e===void 0?void 0:e.call(t)}openCurrentStepChildren(){const{expandedStepChildrenList:t}=this;const e=this.hostElement.shadowRoot.querySelectorAll(".spacer");e.forEach((e=>{if(t&&e.contains(t)){e.style.height=`${t.clientHeight}px`;if(e.classList.contains("is-open"))return;e.classList.add("is-opening");e.addEventListener("transitionend",(()=>{e.classList.remove("is-opening");e.classList.add("is-open");this.resizeIframe()}),{once:true})}else{e.removeAttribute("style");e.classList.remove("is-open","is-opening")}}))}showStepPane(t){this.allPanes.forEach((e=>{if(e.isActive||e.id===t){e.isActive=t===e.id}}))}focusStepBtn(t,e){const a=this.hostElement.shadowRoot.querySelector(`button[id="${t}"]`);const r=document.activeElement===this.hostElement;if(!a)return;if(r||e){a.focus()}}defaultChangeHandler(t){const{hostElement:e}=this;if(t.target===e&&!e.getAttribute("onchange")&&!!t.detail){this.currentStepId=t.detail.selectedStepId}}delegateFocus(t){if(!n(t,this.hostElement))return;this.focusStepBtn(this.currentStepId,true)}statusChangeHandler(){this.buildPaneList()}currentStepChanged(t){this.showStep(t)}renderStepBtn(t,e){const{currentStepId:r,structuredPanes:i}=this;const s=e===i.length-1;const{id:c,label:n,description:l,status:p}=t;const d=e+1;const v=c===r;const b=n&&`label-${c}`;const h=p==="locked";const u=n&&o(n);const f=n&&l&&`description-${c}`;const g=!n&&o("tecton.element.advancedStepper.number",[`${d}`,`${i.length}`]);let m;if(p==="complete")m="success-filled";else if(p==="error")m="warning-filled";const w=["step-btn"];if(p)w.push(`status-${p}`);const x=t.children.map((t=>t.id));const y=v||x.includes(r);return a("li",{role:"presentation"},a("button",{class:w.join(" "),type:"button","aria-labelledby":b,"aria-describedBy":f,"aria-label":g,"aria-selected":`${v}`,"aria-expanded":!!t.children.length?`${y}`:null,id:c,"aria-disabled":h?"true":null,role:"tab",tabIndex:v?0:-1,onKeyDown:t=>!h&&this.onStepKeyDown(t,c),onClick:t=>!h&&this.onStepClick(t,c)},m?a("div",{class:"step-icon"},a("q2-icon",{type:m})):a("div",{class:"step-bubble"},d),n&&a("div",null,a("div",{class:"step-label",id:b},u),l&&a("div",{class:"step-description",id:f},o(l)))),this.renderSpacer(t,u,y,s))}renderSpacer(t,e,r,i){const s=i&&!!t.children.length||!i;const c=["spacer"];if(!i)c.push("has-sibling");return s&&a("div",{class:c.join(" ")},!!t.children.length&&a("ul",{ref:t=>r&&(this.expandedStepChildrenList=t),"aria-hidden":`${!r}`},t.children.map(((t,a,r)=>this.renderChildStepBtn(t,a,r.length,e)))))}renderChildStepBtn(t,e,r,i){const{currentStepId:s}=this;const{id:c,label:n,status:l}=t;const p=e+1;const d=n&&`label-${c}`;const v=c===s;const b=l==="locked";const h=!n&&o("tecton.element.advancedStepper.childNumber",[`${p}`,`${r}`,i]);let u;if(l==="error")u="warning-filled";const f=["step-child-btn"];if(l)f.push(`status-${l}`);return a("li",{role:"presentation"},a("button",{class:f.join(" "),type:"button","aria-labelledby":d,"aria-label":h,"aria-selected":`${v}`,id:c,"aria-disabled":b?"true":null,role:"tab",tabIndex:v?0:-1,onKeyDown:t=>!b&&this.onStepKeyDown(t,c),onClick:t=>!b&&this.onStepClick(t,c)},u&&a("div",{class:"step-child-icon"},a("q2-icon",{type:u})),n&&a("div",{class:"step-child-label",id:d},o(n))))}render(){return a(r,{key:"954a86201a2100af649cc3c8a42971e1a42e929f"},a("ul",{key:"62689657c58e9d09e22709a6de5852b849db2315",role:"tablist"},this.structuredPanes.map(((t,e)=>this.renderStepBtn(t,e)))),a("div",{key:"8e88f8a10693b13b48b10db9f333a242d7e2792d",role:"list"},a("slot",{key:"21e403a9f85d162de60f9e0840d2619c46d67392"})))}get hostElement(){return i(this)}static get watchers(){return{currentStepId:["currentStepChanged"]}}};d.style=p;export{d as q2_stepper_vertical};
|
|
2
|
+
//# sourceMappingURL=p-d1522382.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["q2StepperVerticalCss","Q2StepperVerticalStyle0","Q2StepperVertical","this","scheduledAfterRender","determinePaneChanges","mutations","forEach","mutation","type","addedNodes","length","removedNodes","_a","nodeType","Node","ELEMENT_NODE","_b","buildPaneList","allRootPanes","structuredPanes","Array","from","reduce","accum","pane","children","querySelector","filter","tagName","map","extractDetails","push","Object","assign","onStepClick","event","stepId","stopPropagation","currentStepId","selectedStep","allPanes","find","id","change","emit","selectedStepId","onStepKeyDown","key","preventDefault","getStepId","focusStepBtn","componentWillLoad","setDefaultPane","observer","MutationObserver","observerOptions","childList","observe","hostElement","childrenSlot","mutationObserver","componentDidLoad","overrideFocus","setTimeout","showStep","componentWillUpdate","expandedStepChildrenList","componentDidRender","fn","openCurrentStepChildren","disconnectedCallback","disconnect","querySelectorAll","firstEnabledStep","createGuid","goTo","allEnabledStepBtns","shadowRoot","currentStepIndex","findIndex","btn","getAttribute","nextStepIndex","Math","max","min","resizeIframe","showStepPane","label","description","status","window","TectonElements","call","allSpacers","spacer","contains","style","height","clientHeight","classList","add","addEventListener","remove","once","removeAttribute","isActive","forceFocus","stepBtn","isComponentActive","document","activeElement","focus","defaultChangeHandler","target","detail","delegateFocus","isEventFromElement","statusChangeHandler","currentStepChanged","renderStepBtn","index","isLastStep","stepNumber","isCurrentStep","labelId","isLocked","stepLabel","loc","descriptionId","btnLabel","statusIcon","stepClasses","childIds","child","isExpanded","includes","h","role","class","join","tabIndex","onKeyDown","ev","onClick","renderSpacer","shouldRender","spacerClasses","ref","el","renderChildStepBtn","parentLabel","render","Fragment"],"sources":["src/components/q2-stepper-vertical/q2-stepper-vertical.scss?tag=q2-stepper-vertical&encapsulation=shadow","src/components/q2-stepper-vertical/q2-stepper-vertical.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: grid;\n grid-template-columns: var-list(--tct-stepper-vertical-list-width, var-prefixer(advanced-stepper-list-width), 180px) 1fr;\n gap: var-list(--tct-stepper-vertical-layout-gap, var-prefixer(advanced-stepper-layout-gap), 120px);\n}\n\n.step-label,\n.step-child-label {\n color: var(--comp-btn-label-color);\n font-size: var(--comp-btn-label-font-size);\n font-weight: var(--comp-label-font-weight, 400);\n min-height: 1.5em;\n}\n\n.step-label {\n @include line-clamp(var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 2));\n\n [aria-selected='true'] & {\n font-weight: var-list(\n --tct-stepper-vertical-btn-active-font-weight,\n var-prefixer(advanced-stepper-btn-active-font-weight),\n 600\n );\n }\n\n [aria-describedby] & {\n @include line-clamp(\n var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 1)\n );\n }\n}\n\n.step-child-label {\n grid-area: content;\n color: var(--comp-btn-label-color);\n}\n\n.step-description {\n color: var-list(\n --tct-stepper-vertical-description-color,\n var-prefixer(advanced-stepper-description-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(\n --tct-stepper-vertical-description-font-size,\n var-prefixer(advanced-stepper-description-font-size),\n --app-font-size-small,\n 12px\n );\n\n // Add padding for descenders\n padding-bottom: 0.2em;\n}\n\nul {\n --comp-top-btn-icon-size: #{var-list(\n --tct-stepper-vertical-btn-icon-size,\n var-prefixer(advanced-stepper-btn-icon-size),\n 24px\n )};\n --comp-btn-icon-size: #{var(--comp-top-btn-icon-size)};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-3x,\n 15px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-btn-label-font-size,\n var-prefixer(advanced-stepper-btn-label-font-size),\n 16px\n )};\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-label-color,\n var-prefixer(advanced-stepper-label-color),\n --t-text,\n #4d4d4d\n )};\n --comp-tween: #{var-list(\n --tct-stepper-vertical-tween,\n var-prefixer(advanced-stepper-tween),\n --app-tween-1,\n unquote('0.2s ease')\n )};\n --comp-bullet-bg: #{var-list(\n --tct-stepper-vertical-bullet-active-background,\n var-prefixer(advanced-stepper-bullet-active-bg),\n --t-primary,\n #0079c1\n )};\n\n list-style: none;\n margin: 0;\n padding: 0;\n\n ul {\n --comp-btn-icon-size: #{var-list(\n --tct-stepper-vertical-child-btn-icon-size,\n var-prefixer(advanced-stepper-child-btn-icon-size),\n 12px\n )};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-2x,\n 10px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-child-btn-label-font-size,\n var-prefixer(advanced-stepper-child-btn-label-font-size),\n --app-font-size-small,\n 12px\n )};\n\n &[aria-hidden='true'] {\n display: none;\n }\n }\n}\n\n.step-btn,\n.step-child-btn {\n display: grid;\n grid-template-columns: var(--comp-btn-icon-size) 1fr;\n gap: var(--comp-btn-content-gap);\n text-align: var-list(--tct-stepper-vertical-btn-text-align, var-prefixer(advanced-stepper-btn-text-align), start);\n grid-template-areas: 'icon content';\n align-items: center;\n width: 100%;\n position: relative;\n background: transparent;\n border: 0;\n cursor: pointer;\n padding: 0;\n transition-property: box-shadow;\n outline: none;\n\n &[aria-disabled] {\n cursor: default;\n --comp-label-font-weight: 300;\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-btn-locked-color,\n var-prefixer(advanced-stepper-btn-locked-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n )};\n }\n\n &[aria-selected='true'] {\n --comp-label-font-weight: 600;\n }\n}\n\n.step-btn {\n min-height: var-list(--tct-stepper-vertical-btn-height, var-prefixer(advanced-stepper-btn-height), 40px);\n font-size: var-list(--tct-stepper-vertical-btn-font-size, var-prefixer(advanced-stepper-btn-font-size), 16px);\n\n --comp-active-color: var(--comp-bullet-bg);\n &.status-complete {\n --comp-active-color: var(--const-stoplight-success, #0e8a00);\n --tct-stoplight-success: var(--comp-active-color);\n }\n &.status-error {\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-child-btn {\n --comp-active-color: var(--comp-bullet-bg);\n\n min-height: var-list(\n --tct-stepper-vertical-child-btn-height,\n var-prefixer(advanced-stepper-child-btn-height),\n 30px\n );\n padding-left: var-list(\n --tct-stepper-vertical-child-btn-left-padding,\n var-prefixer(advanced-stepper-child-btn-left-padding),\n --app-scale-2x,\n 10px\n );\n font-size: var-list(\n --tct-stepper-vertical-child-btn-font-size,\n var-prefixer(advanced-stepper-child-btn-font-size),\n 12px\n );\n border-left-width: var-list(\n --tct-stepper-vertical-child-btn-left-border-width,\n var-prefixer(advanced-stepper-child-btn-left-border-width),\n 3px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-btn-left-border-style,\n var-prefixer(advanced-stepper-child-btn-left-border-style),\n solid\n );\n border-left-color: transparent;\n\n &[aria-selected='true'] {\n --comp-btn-label-color: var(--comp-active-color);\n border-left-color: var(--comp-active-color);\n }\n\n &.status-error {\n --comp-btn-label-color: var(--const-stoplight-alert, #d20a0a);\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n }\n\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-content {\n grid-area: content;\n}\n\n.step-icon,\n.step-bubble,\n.step-child-icon {\n grid-area: icon;\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n line-height: 0;\n\n q2-icon {\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n}\n\n.step-icon,\n.step-bubble {\n background: var(--comp-active-color);\n color: var(--t-base, #ffffff);\n border-radius: 50%;\n\n .status-complete &,\n .status-error & {\n background: var(--comp-active-color);\n }\n\n q2-icon {\n &:before {\n content: '';\n display: block;\n background: var(--t-base, #ffffff);\n position: absolute;\n width: 80%;\n height: 80%;\n left: 11%;\n top: 11%;\n border-radius: 50%;\n }\n }\n\n // Text-based statuses\n .status-locked & {\n background: var(--t-gray-12, #d9d9d9);\n color: var(--t-text, #4d4d4d);\n }\n\n [aria-selected='true'] & {\n box-shadow:\n 0 0 0 2px var(--t-base, #ffffff),\n 0 0 0 4px var(--comp-active-color);\n }\n}\n\n.step-bubble {\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n}\n\n.step-child-icon {\n q2-icon {\n --tct-icon-stroke-primary: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--comp-active-color);\n }\n [aria-selected='true'] & {\n q2-icon {\n fill: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--t-base, #ffffff);\n }\n }\n}\n\n.spacer {\n height: 0;\n border-left-width: var-list(\n --tct-stepper-vertical-child-border-width,\n var-prefixer(advanced-stepaer-child-border-width),\n 1px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-border-style,\n var-prefixer(advanced-stepper-child-border-style),\n solid\n );\n border-left-color: var-list(\n --tct-stepper-vertical-child-border-color,\n var-prefixer(advanced-stepper-child-border-color),\n --t-gray-12,\n #d9d9d9\n );\n overflow: hidden;\n margin-left: calc(var(--comp-top-btn-icon-size) / 2);\n transition: height var(--comp-tween);\n\n &.has-sibling {\n height: var-list(\n --tct-stepper-vertical-spacer-height,\n var-prefixer(advanced-stepper-spacer-height),\n --app-scale-6x,\n 30px\n );\n }\n\n ul {\n opacity: 0;\n transition: opacity var(--comp-tween);\n }\n\n &.is-opening,\n &.is-open {\n ul {\n display: block;\n opacity: 1 !important;\n }\n }\n\n &.is-open {\n overflow: visible;\n }\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\n\ninterface IBaseStructuredPane {\n id: string;\n label: string;\n description: string;\n isActive: boolean;\n status: string;\n}\n\ninterface IStructuredPane extends IBaseStructuredPane {\n children: IBaseStructuredPane[];\n}\n\n@Component({ tag: 'q2-stepper-vertical', shadow: true, styleUrl: 'q2-stepper-vertical.scss' })\nexport class Q2StepperVertical implements ComponentInterface {\n /** The `id` of the currently selected `q2-stepper-pane`. */\n @Prop({ reflect: true, mutable: true }) currentStepId: string;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the selected step changes.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n @State() structuredPanes: IStructuredPane[] = [];\n mutationObserver: MutationObserver;\n expandedStepChildrenList: HTMLUListElement;\n scheduledAfterRender: (() => void)[] = [];\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n this.setDefaultPane();\n this.buildPaneList();\n const observer = new MutationObserver(this.determinePaneChanges);\n const observerOptions = {\n childList: true,\n };\n observer.observe(this.hostElement, observerOptions);\n this.allRootPanes.forEach(pane => {\n const childrenSlot = pane.querySelector('[slot=children]');\n if (childrenSlot) observer.observe(childrenSlot, observerOptions);\n });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStepId), 0);\n }\n\n componentWillUpdate() {\n this.expandedStepChildrenList = null;\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n\n this.openCurrentStepChildren();\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n get allRootPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>(':scope > q2-stepper-pane'));\n }\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n /// Helpers ///\n setDefaultPane() {\n if (this.currentStepId) return;\n const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');\n if (!firstEnabledStep) return;\n if (!firstEnabledStep.id) firstEnabledStep.id = `step-${createGuid()}`;\n this.currentStepId = firstEnabledStep.id;\n }\n\n determinePaneChanges = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type !== 'childList') return;\n if (!mutation.addedNodes.length && !mutation.removedNodes.length) return;\n if (\n mutation.addedNodes[0]?.nodeType !== Node.ELEMENT_NODE &&\n mutation.removedNodes[0]?.nodeType !== Node.ELEMENT_NODE\n )\n return;\n this.buildPaneList();\n });\n };\n\n getStepId(currentStepId: string, goTo: string) {\n const allEnabledStepBtns = Array.from(\n this.hostElement.shadowRoot.querySelectorAll<HTMLQ2StepperPaneElement>(\n 'ul:not([aria-hidden=\"true\"]) > li > button:not([aria-disabled=\"true\"])'\n )\n );\n const currentStepIndex = allEnabledStepBtns.findIndex(btn => btn.getAttribute('id') === currentStepId);\n\n let nextStepIndex;\n switch (goTo) {\n case 'prev':\n nextStepIndex = Math.max(currentStepIndex - 1, 0);\n break;\n\n case 'next':\n nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);\n break;\n\n case 'first':\n nextStepIndex = 0;\n break;\n\n case 'last':\n nextStepIndex = allEnabledStepBtns.length - 1;\n break;\n }\n\n return allEnabledStepBtns[nextStepIndex].getAttribute('id');\n }\n\n showStep(stepId: string) {\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepId);\n this.focusStepBtn(stepId);\n }\n\n extractDetails(pane: HTMLQ2StepperPaneElement) {\n const { label, description, status } = pane;\n if (!pane.id) pane.id = `step-${createGuid()}`;\n return {\n id: pane.id,\n label,\n description,\n status,\n };\n }\n\n buildPaneList = () => {\n const { allRootPanes } = this;\n if (!allRootPanes.length) return;\n\n this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {\n const children = Array.from(pane.querySelector('[slot=children]')?.children ?? [])\n .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')\n .map(this.extractDetails);\n\n accum.push({ ...this.extractDetails(pane), children });\n return accum;\n }, []);\n };\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n openCurrentStepChildren() {\n const { expandedStepChildrenList } = this;\n const allSpacers = this.hostElement.shadowRoot.querySelectorAll<HTMLDivElement>('.spacer');\n allSpacers.forEach(spacer => {\n if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {\n spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;\n if (spacer.classList.contains('is-open')) return;\n spacer.classList.add('is-opening');\n spacer.addEventListener(\n 'transitionend',\n () => {\n spacer.classList.remove('is-opening');\n spacer.classList.add('is-open');\n this.resizeIframe();\n },\n { once: true }\n );\n } else {\n spacer.removeAttribute('style');\n spacer.classList.remove('is-open', 'is-opening');\n }\n });\n }\n\n showStepPane(stepId: string) {\n this.allPanes.forEach(pane => {\n if (pane.isActive || pane.id === stepId) {\n pane.isActive = stepId === pane.id;\n }\n });\n }\n\n focusStepBtn(stepId: string, forceFocus?: boolean) {\n const stepBtn = this.hostElement.shadowRoot.querySelector<HTMLElement>(`button[id=\"${stepId}\"]`);\n const isComponentActive = document.activeElement === this.hostElement;\n if (!stepBtn) return;\n if (isComponentActive || forceFocus) {\n stepBtn.focus();\n }\n }\n\n /// Listeners ///\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStepId = event.detail.selectedStepId;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStepBtn(this.currentStepId, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler() {\n this.buildPaneList();\n }\n\n /// Watchers ///\n @Watch('currentStepId')\n currentStepChanged(stepId: string) {\n this.showStep(stepId);\n }\n\n /// Event Handlers ///\n onStepClick = (event, stepId: string) => {\n event.stopPropagation();\n const { currentStepId } = this;\n if (stepId === currentStepId) return;\n const selectedStep = this.allPanes.find(pane => pane.id === stepId);\n\n this.change.emit({\n selectedStep,\n selectedStepId: stepId,\n currentStepId,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepId: string) => {\n const { key } = event;\n\n let selectedStepId;\n switch (key) {\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'prev');\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'next');\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'first');\n break;\n\n case 'End':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'last');\n break;\n }\n\n if (!selectedStepId) return;\n this.focusStepBtn(selectedStepId, true);\n };\n\n /// DOM ///\n renderStepBtn(pane: IStructuredPane, index: number) {\n const { currentStepId, structuredPanes } = this;\n const isLastStep = index === structuredPanes.length - 1;\n const { id, label, description, status } = pane;\n const stepNumber = index + 1;\n const isCurrentStep = id === currentStepId;\n const labelId = label && `label-${id}`;\n const isLocked = status === 'locked';\n const stepLabel = label && loc(label);\n const descriptionId = label && description && `description-${id}`;\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n\n const childIds = pane.children.map(child => child.id);\n const isExpanded = isCurrentStep || childIds.includes(currentStepId);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-expanded={!!pane.children.length ? `${isExpanded}` : null}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n\n {label && (\n <div>\n <div\n class=\"step-label\"\n id={labelId}\n >\n {stepLabel}\n </div>\n {description && (\n <div\n class=\"step-description\"\n id={descriptionId}\n >\n {loc(description)}\n </div>\n )}\n </div>\n )}\n </button>\n {this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)}\n </li>\n );\n }\n\n renderSpacer(pane: IStructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean) {\n const shouldRender = (isLastStep && !!pane.children.length) || !isLastStep;\n const spacerClasses = ['spacer'];\n if (!isLastStep) spacerClasses.push('has-sibling');\n return (\n shouldRender && (\n <div class={spacerClasses.join(' ')}>\n {!!pane.children.length && (\n <ul\n ref={el => isExpanded && (this.expandedStepChildrenList = el)}\n aria-hidden={`${!isExpanded}`}\n >\n {pane.children.map((child, index, children) =>\n this.renderChildStepBtn(child, index, children.length, stepLabel)\n )}\n </ul>\n )}\n </div>\n )\n );\n }\n\n renderChildStepBtn(pane: IBaseStructuredPane, index: number, children: number, parentLabel: string) {\n const { currentStepId } = this;\n const { id, label, status } = pane;\n const stepNumber = index + 1;\n const labelId = label && `label-${id}`;\n const isCurrentStep = id === currentStepId;\n const isLocked = status === 'locked';\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);\n\n let statusIcon;\n if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-child-btn'];\n if (status) stepClasses.push(`status-${status}`);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon && (\n <div class=\"step-child-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n )}\n {label && (\n <div\n class=\"step-child-label\"\n id={labelId}\n >\n {loc(label)}\n </div>\n )}\n </button>\n </li>\n );\n }\n\n render() {\n return (\n <Fragment>\n <ul role=\"tablist\">{this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))}</ul>\n <div role=\"list\">\n <slot />\n </div>\n </Fragment>\n );\n }\n}\n"],"mappings":"oHAAA,MAAMA,EAAuB,k9RAC7B,MAAAC,EAAeD,E,MC2BFE,EAAiB,M,wDAkB1BC,KAAAC,qBAAuC,GAyDvCD,KAAAE,qBAAwBC,IACpBA,EAAUC,SAAQC,I,QACd,GAAIA,EAASC,OAAS,YAAa,OACnC,IAAKD,EAASE,WAAWC,SAAWH,EAASI,aAAaD,OAAQ,OAClE,KACIE,EAAAL,EAASE,WAAW,MAAE,MAAAG,SAAA,SAAAA,EAAEC,YAAaC,KAAKC,gBAC1CC,EAAAT,EAASI,aAAa,MAAE,MAAAK,SAAA,SAAAA,EAAEH,YAAaC,KAAKC,aAE5C,OACJb,KAAKe,eAAe,GACtB,EAkDNf,KAAAe,cAAgB,KACZ,MAAMC,aAAEA,GAAiBhB,KACzB,IAAKgB,EAAaR,OAAQ,OAE1BR,KAAKiB,gBAAkBC,MAAMC,KAAKH,GAAcI,QAAO,CAACC,EAAOC,K,QAC3D,MAAMC,EAAWL,MAAMC,MAAKL,GAAAJ,EAAAY,EAAKE,cAAc,sBAAkB,MAAAd,SAAA,SAAAA,EAAEa,YAAQ,MAAAT,SAAA,EAAAA,EAAI,IAC1EW,QAAO,EAAGC,aAAcA,IAAY,oBACpCC,IAAI3B,KAAK4B,gBAEdP,EAAMQ,KAAIC,OAAAC,OAAAD,OAAAC,OAAA,GAAM/B,KAAK4B,eAAeN,IAAK,CAAEC,cAC3C,OAAOF,CAAK,GACb,GAAG,EA2EVrB,KAAAgC,YAAc,CAACC,EAAOC,KAClBD,EAAME,kBACN,MAAMC,cAAEA,GAAkBpC,KAC1B,GAAIkC,IAAWE,EAAe,OAC9B,MAAMC,EAAerC,KAAKsC,SAASC,MAAKjB,GAAQA,EAAKkB,KAAON,IAE5DlC,KAAKyC,OAAOC,KAAK,CACbL,eACAM,eAAgBT,EAChBE,iBACF,EAGNpC,KAAA4C,cAAgB,CAACX,EAAsBC,KACnC,MAAMW,IAAEA,GAAQZ,EAEhB,IAAIU,EACJ,OAAQE,GACJ,IAAK,UACL,IAAK,YACDZ,EAAMa,iBACNH,EAAiB3C,KAAK+C,UAAUb,EAAQ,QACxC,MAEJ,IAAK,YACL,IAAK,aACDD,EAAMa,iBACNH,EAAiB3C,KAAK+C,UAAUb,EAAQ,QACxC,MAEJ,IAAK,OACDD,EAAMa,iBACNH,EAAiB3C,KAAK+C,UAAUb,EAAQ,SACxC,MAEJ,IAAK,MACDD,EAAMa,iBACNH,EAAiB3C,KAAK+C,UAAUb,EAAQ,QACxC,MAGR,IAAKS,EAAgB,OACrB3C,KAAKgD,aAAaL,EAAgB,KAAK,E,kDAxPG,E,CAM9C,iBAAAM,GACIjD,KAAKkD,iBACLlD,KAAKe,gBACL,MAAMoC,EAAW,IAAIC,iBAAiBpD,KAAKE,sBAC3C,MAAMmD,EAAkB,CACpBC,UAAW,MAEfH,EAASI,QAAQvD,KAAKwD,YAAaH,GACnCrD,KAAKgB,aAAaZ,SAAQkB,IACtB,MAAMmC,EAAenC,EAAKE,cAAc,mBACxC,GAAIiC,EAAcN,EAASI,QAAQE,EAAcJ,EAAgB,IAErErD,KAAK0D,iBAAmBP,C,CAG5B,gBAAAQ,GACIC,EAAc5D,KAAKwD,aACnBK,YAAW,IAAM7D,KAAK8D,SAAS9D,KAAKoC,gBAAgB,E,CAGxD,mBAAA2B,GACI/D,KAAKgE,yBAA2B,I,CAGpC,kBAAAC,GACIjE,KAAKC,qBAAqBG,SAAQ8D,GAAMA,MACxClE,KAAKC,qBAAuB,GAE5BD,KAAKmE,yB,CAGT,oBAAAC,GACIpE,KAAK0D,iBAAiBW,aACtBrE,KAAK0D,iBAAmB,I,CAI5B,gBAAI1C,GACA,OAAOE,MAAMC,KAAKnB,KAAKwD,YAAYc,iBAA2C,4B,CAGlF,YAAIhC,GACA,OAAOpB,MAAMC,KAAKnB,KAAKwD,YAAYc,iBAA2C,mB,CAIlF,cAAApB,GACI,GAAIlD,KAAKoC,cAAe,OACxB,MAAMmC,EAAmBvE,KAAKwD,YAAYhC,cAAc,mBACxD,IAAK+C,EAAkB,OACvB,IAAKA,EAAiB/B,GAAI+B,EAAiB/B,GAAK,QAAQgC,MACxDxE,KAAKoC,cAAgBmC,EAAiB/B,E,CAgB1C,SAAAO,CAAUX,EAAuBqC,GAC7B,MAAMC,EAAqBxD,MAAMC,KAC7BnB,KAAKwD,YAAYmB,WAAWL,iBACxB,2EAGR,MAAMM,EAAmBF,EAAmBG,WAAUC,GAAOA,EAAIC,aAAa,QAAU3C,IAExF,IAAI4C,EACJ,OAAQP,GACJ,IAAK,OACDO,EAAgBC,KAAKC,IAAIN,EAAmB,EAAG,GAC/C,MAEJ,IAAK,OACDI,EAAgBC,KAAKE,IAAIP,EAAmB,EAAGF,EAAmBlE,OAAS,GAC3E,MAEJ,IAAK,QACDwE,EAAgB,EAChB,MAEJ,IAAK,OACDA,EAAgBN,EAAmBlE,OAAS,EAC5C,MAGR,OAAOkE,EAAmBM,GAAeD,aAAa,K,CAG1D,QAAAjB,CAAS5B,GACLlC,KAAKC,qBAAqB4B,KAAK7B,KAAKoF,cACpCpF,KAAKqF,aAAanD,GAClBlC,KAAKgD,aAAad,E,CAGtB,cAAAN,CAAeN,GACX,MAAMgE,MAAEA,EAAKC,YAAEA,EAAWC,OAAEA,GAAWlE,EACvC,IAAKA,EAAKkB,GAAIlB,EAAKkB,GAAK,QAAQgC,MAChC,MAAO,CACHhC,GAAIlB,EAAKkB,GACT8C,QACAC,cACAC,S,CAkBR,YAAAJ,G,QACI,OAAOtE,GAAAJ,EAAA+E,SAAM,MAANA,cAAM,SAANA,OAAQC,kBAAc,MAAAhF,SAAA,SAAAA,EAAE0E,gBAAY,MAAAtE,SAAA,SAAAA,EAAA6E,KAAAjF,E,CAG/C,uBAAAyD,GACI,MAAMH,yBAAEA,GAA6BhE,KACrC,MAAM4F,EAAa5F,KAAKwD,YAAYmB,WAAWL,iBAAiC,WAChFsB,EAAWxF,SAAQyF,IACf,GAAI7B,GAA4B6B,EAAOC,SAAS9B,GAA2B,CACvE6B,EAAOE,MAAMC,OAAS,GAAGhC,EAAyBiC,iBAClD,GAAIJ,EAAOK,UAAUJ,SAAS,WAAY,OAC1CD,EAAOK,UAAUC,IAAI,cACrBN,EAAOO,iBACH,iBACA,KACIP,EAAOK,UAAUG,OAAO,cACxBR,EAAOK,UAAUC,IAAI,WACrBnG,KAAKoF,cAAc,GAEvB,CAAEkB,KAAM,M,KAET,CACHT,EAAOU,gBAAgB,SACvBV,EAAOK,UAAUG,OAAO,UAAW,a,KAK/C,YAAAhB,CAAanD,GACTlC,KAAKsC,SAASlC,SAAQkB,IAClB,GAAIA,EAAKkF,UAAYlF,EAAKkB,KAAON,EAAQ,CACrCZ,EAAKkF,SAAWtE,IAAWZ,EAAKkB,E,KAK5C,YAAAQ,CAAad,EAAgBuE,GACzB,MAAMC,EAAU1G,KAAKwD,YAAYmB,WAAWnD,cAA2B,cAAcU,OACrF,MAAMyE,EAAoBC,SAASC,gBAAkB7G,KAAKwD,YAC1D,IAAKkD,EAAS,OACd,GAAIC,GAAqBF,EAAY,CACjCC,EAAQI,O,EAMhB,oBAAAC,CAAqB9E,GACjB,MAAMuB,YAAEA,GAAgBxD,KACxB,GAAIiC,EAAM+E,SAAWxD,IAAgBA,EAAYuB,aAAa,eAAiB9C,EAAMgF,OAAQ,CACzFjH,KAAKoC,cAAgBH,EAAMgF,OAAOtE,c,EAK1C,aAAAuE,CAAcjF,GACV,IAAKkF,EAAmBlF,EAAOjC,KAAKwD,aAAc,OAClDxD,KAAKgD,aAAahD,KAAKoC,cAAe,K,CAI1C,mBAAAgF,GACIpH,KAAKe,e,CAKT,kBAAAsG,CAAmBnF,GACflC,KAAK8D,SAAS5B,E,CAkDlB,aAAAoF,CAAchG,EAAuBiG,GACjC,MAAMnF,cAAEA,EAAanB,gBAAEA,GAAoBjB,KAC3C,MAAMwH,EAAaD,IAAUtG,EAAgBT,OAAS,EACtD,MAAMgC,GAAEA,EAAE8C,MAAEA,EAAKC,YAAEA,EAAWC,OAAEA,GAAWlE,EAC3C,MAAMmG,EAAaF,EAAQ,EAC3B,MAAMG,EAAgBlF,IAAOJ,EAC7B,MAAMuF,EAAUrC,GAAS,SAAS9C,IAClC,MAAMoF,EAAWpC,IAAW,SAC5B,MAAMqC,EAAYvC,GAASwC,EAAIxC,GAC/B,MAAMyC,EAAgBzC,GAASC,GAAe,eAAe/C,IAC7D,MAAMwF,GACD1C,GAASwC,EAAI,wCAAyC,CAAC,GAAGL,IAAc,GAAGxG,EAAgBT,WAEhG,IAAIyH,EACJ,GAAIzC,IAAW,WAAYyC,EAAa,sBACnC,GAAIzC,IAAW,QAASyC,EAAa,iBAE1C,MAAMC,EAAc,CAAC,YACrB,GAAI1C,EAAQ0C,EAAYrG,KAAK,UAAU2D,KAEvC,MAAM2C,EAAW7G,EAAKC,SAASI,KAAIyG,GAASA,EAAM5F,KAClD,MAAM6F,EAAaX,GAAiBS,EAASG,SAASlG,GAEtD,OACImG,EAAA,MAAIC,KAAK,gBACLD,EAAA,UACIE,MAAOP,EAAYQ,KAAK,KACxBpI,KAAK,SAAQ,kBACIqH,EAAO,mBACNI,EAAa,aACnBC,EAAQ,gBACL,GAAGN,IAAe,kBAChBpG,EAAKC,SAASf,OAAS,GAAG6H,IAAe,KAC1D7F,GAAIA,EAAE,gBACSoF,EAAW,OAAS,KACnCY,KAAK,MACLG,SAAUjB,EAAgB,GAAK,EAC/BkB,UAAWC,IAAOjB,GAAY5H,KAAK4C,cAAciG,EAAIrG,GACrDsG,QAASD,IAAOjB,GAAY5H,KAAKgC,YAAY6G,EAAIrG,IAEhDyF,EACGM,EAAA,OAAKE,MAAM,aACPF,EAAA,WAASjI,KAAM2H,KAGnBM,EAAA,OAAKE,MAAM,eAAehB,GAG7BnC,GACGiD,EAAA,WACIA,EAAA,OACIE,MAAM,aACNjG,GAAImF,GAEHE,GAEJtC,GACGgD,EAAA,OACIE,MAAM,mBACNjG,GAAIuF,GAEHD,EAAIvC,MAMxBvF,KAAK+I,aAAazH,EAAMuG,EAAWQ,EAAYb,G,CAK5D,YAAAuB,CAAazH,EAAuBuG,EAAmBQ,EAAqBb,GACxE,MAAMwB,EAAgBxB,KAAgBlG,EAAKC,SAASf,SAAYgH,EAChE,MAAMyB,EAAgB,CAAC,UACvB,IAAKzB,EAAYyB,EAAcpH,KAAK,eACpC,OACImH,GACIT,EAAA,OAAKE,MAAOQ,EAAcP,KAAK,QACxBpH,EAAKC,SAASf,QACb+H,EAAA,MACIW,IAAKC,GAAMd,IAAerI,KAAKgE,yBAA2BmF,GAAG,cAChD,IAAId,KAEhB/G,EAAKC,SAASI,KAAI,CAACyG,EAAOb,EAAOhG,IAC9BvB,KAAKoJ,mBAAmBhB,EAAOb,EAAOhG,EAASf,OAAQqH,M,CASnF,kBAAAuB,CAAmB9H,EAA2BiG,EAAehG,EAAkB8H,GAC3E,MAAMjH,cAAEA,GAAkBpC,KAC1B,MAAMwC,GAAEA,EAAE8C,MAAEA,EAAKE,OAAEA,GAAWlE,EAC9B,MAAMmG,EAAaF,EAAQ,EAC3B,MAAMI,EAAUrC,GAAS,SAAS9C,IAClC,MAAMkF,EAAgBlF,IAAOJ,EAC7B,MAAMwF,EAAWpC,IAAW,SAC5B,MAAMwC,GACD1C,GAASwC,EAAI,6CAA8C,CAAC,GAAGL,IAAc,GAAGlG,IAAY8H,IAEjG,IAAIpB,EACJ,GAAIzC,IAAW,QAASyC,EAAa,iBAErC,MAAMC,EAAc,CAAC,kBACrB,GAAI1C,EAAQ0C,EAAYrG,KAAK,UAAU2D,KAEvC,OACI+C,EAAA,MAAIC,KAAK,gBACLD,EAAA,UACIE,MAAOP,EAAYQ,KAAK,KACxBpI,KAAK,SAAQ,kBACIqH,EAAO,aACZK,EAAQ,gBACL,GAAGN,IAClBlF,GAAIA,EAAE,gBACSoF,EAAW,OAAS,KACnCY,KAAK,MACLG,SAAUjB,EAAgB,GAAK,EAC/BkB,UAAWC,IAAOjB,GAAY5H,KAAK4C,cAAciG,EAAIrG,GACrDsG,QAASD,IAAOjB,GAAY5H,KAAKgC,YAAY6G,EAAIrG,IAEhDyF,GACGM,EAAA,OAAKE,MAAM,mBACPF,EAAA,WAASjI,KAAM2H,KAGtB3C,GACGiD,EAAA,OACIE,MAAM,mBACNjG,GAAImF,GAEHG,EAAIxC,K,CAQ7B,MAAAgE,GACI,OACIf,EAACgB,EAAQ,CAAA1G,IAAA,4CACL0F,EAAA,MAAA1F,IAAA,2CAAI2F,KAAK,WAAWxI,KAAKiB,gBAAgBU,KAAI,CAACL,EAAMiG,IAAUvH,KAAKsH,cAAchG,EAAMiG,MACvFgB,EAAA,OAAA1F,IAAA,2CAAK2F,KAAK,QACND,EAAA,QAAA1F,IAAA,8C"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,g as a}from"./p-a5f18e27.js";import{r as n,o as s,i as r,n as o,l as c}from"./p-42302f6f.js";const d="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 3px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, 20px);font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, uppercase);letter-spacing:var(--tct-section-title-letter-spacing, 0.5px)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";const h=d;const p=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.titleId="title";this.contentId="content";this.onHeaderClick=()=>{this.change.emit({expanded:!this.expanded})};this.onTransitionEnd=()=>{if(this.expanded){this.contentHeight=undefined}else{this.hideContent=true}setTimeout((()=>{this.clearResizeInterval()}),1e3)};this.onHeaderSlotChange=()=>{const t=!!this.hostElement.querySelector('[slot="q2-section-header"]');if(this.hasYieldedHeader!==t){this.hasYieldedHeader=!!t}};this.clearResizeInterval=()=>{this.resizerFn&&clearInterval(this.resizerFn)};this.addHeaderSlotListener=()=>{if(this.headerSlot){this.headerSlot.addEventListener("slotchange",this.onHeaderSlotChange);return}const t=new MutationObserver(this.onHeaderSlotChange);t.observe(this.headerSlotWrapper,{childList:true});this.headerSlotMutationObserver=t};this.removeHeaderSlotListener=()=>{if(this.headerSlot){this.headerSlot.removeEventListener("slotchange",this.onHeaderSlotChange);return}this.headerSlotMutationObserver.disconnect()};this.addContentSlotListener=()=>{if(this.contentSlot){this.contentSlot.addEventListener("slotchange",n);return}const t=new MutationObserver(n);t.observe(this.contentContainer,{childList:true,subtree:true});this.contentSlotMutationObserver=t};this.removeContentSlotListener=()=>{if(this.contentSlot){this.contentSlot.removeEventListener("slotchange",n);return}this.contentSlotMutationObserver.disconnect()};this.collapsible=undefined;this.expanded=undefined;this.label=undefined;this.noCollapseIcon=undefined;this.contentHeight=undefined;this.hideContent=false;this.hasYieldedHeader=false}componentWillLoad(){this.onHeaderSlotChange();const{collapsible:t,expanded:e}=this;this.contentHeight=t&&e?undefined:"0px";this.hideContent=!e}componentDidLoad(){this.addHeaderSlotListener();this.addContentSlotListener();s(this.hostElement)}disconnectedCallback(){this.removeHeaderSlotListener();this.removeContentSlotListener()}defaultChangeHandler(t){if(t.target===this.hostElement&&!this.hostElement.onchange&&!!t.detail){this.expanded=t.detail.expanded}}delegateFocus(t){if(!r(t,this.hostElement))return;this.contentContainer.focus()}async expandedObserver(t){this.clearResizeInterval();this.resizerFn=setInterval(n,5);if(t){this.expandSection()}else{this.collapseSection()}}async collapseSection(){this.contentHeight=this.contentContainerHeight;await o((()=>{this.contentHeight=this.currentHeight}))}async expandSection(){this.hideContent=false;await o((()=>{this.contentHeight=this.currentHeight}))}collapsibleObserver(){this.contentHeight=this.currentHeight}get currentHeight(){const{collapsible:t,expanded:e}=this;if(!t){return null}else if(e){return this.contentContainerHeight}else{return"0"}}get contentContainerHeight(){return`${this.contentContainer.offsetHeight||0}px`}render(){const t=this.label||this.hasYieldedHeader;const e=["content-wrapper"];const{collapsible:a,hideContent:n,contentHeight:s}=this;if(a){if(n)e.push("is-closed");else if(s)e.push("is-transitioning")}const r=!this.hasYieldedHeader&&!!this.label;return i("section",{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as i,g as a}from"./p-a5f18e27.js";import{r as n,o as s,i as r,n as o,l as c}from"./p-42302f6f.js";const d="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 3px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, 20px);font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, uppercase);letter-spacing:var(--tct-section-title-letter-spacing, 0.5px)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";const h=d;const p=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.titleId="title";this.contentId="content";this.onHeaderClick=()=>{this.change.emit({expanded:!this.expanded})};this.onTransitionEnd=()=>{if(this.expanded){this.contentHeight=undefined}else{this.hideContent=true}setTimeout((()=>{this.clearResizeInterval()}),1e3)};this.onHeaderSlotChange=()=>{const t=!!this.hostElement.querySelector('[slot="q2-section-header"]');if(this.hasYieldedHeader!==t){this.hasYieldedHeader=!!t}};this.clearResizeInterval=()=>{this.resizerFn&&clearInterval(this.resizerFn)};this.addHeaderSlotListener=()=>{if(this.headerSlot){this.headerSlot.addEventListener("slotchange",this.onHeaderSlotChange);return}const t=new MutationObserver(this.onHeaderSlotChange);t.observe(this.headerSlotWrapper,{childList:true});this.headerSlotMutationObserver=t};this.removeHeaderSlotListener=()=>{if(this.headerSlot){this.headerSlot.removeEventListener("slotchange",this.onHeaderSlotChange);return}this.headerSlotMutationObserver.disconnect()};this.addContentSlotListener=()=>{if(this.contentSlot){this.contentSlot.addEventListener("slotchange",n);return}const t=new MutationObserver(n);t.observe(this.contentContainer,{childList:true,subtree:true});this.contentSlotMutationObserver=t};this.removeContentSlotListener=()=>{if(this.contentSlot){this.contentSlot.removeEventListener("slotchange",n);return}this.contentSlotMutationObserver.disconnect()};this.collapsible=undefined;this.expanded=undefined;this.label=undefined;this.noCollapseIcon=undefined;this.contentHeight=undefined;this.hideContent=false;this.hasYieldedHeader=false}componentWillLoad(){this.onHeaderSlotChange();const{collapsible:t,expanded:e}=this;this.contentHeight=t&&e?undefined:"0px";this.hideContent=!e}componentDidLoad(){this.addHeaderSlotListener();this.addContentSlotListener();s(this.hostElement)}disconnectedCallback(){this.removeHeaderSlotListener();this.removeContentSlotListener()}defaultChangeHandler(t){if(t.target===this.hostElement&&!this.hostElement.onchange&&!!t.detail){this.expanded=t.detail.expanded}}delegateFocus(t){if(!r(t,this.hostElement))return;this.contentContainer.focus()}async expandedObserver(t){this.clearResizeInterval();this.resizerFn=setInterval(n,5);if(t){this.expandSection()}else{this.collapseSection()}}async collapseSection(){this.contentHeight=this.contentContainerHeight;await o((()=>{this.contentHeight=this.currentHeight}))}async expandSection(){this.hideContent=false;await o((()=>{this.contentHeight=this.currentHeight}))}collapsibleObserver(){this.contentHeight=this.currentHeight}get currentHeight(){const{collapsible:t,expanded:e}=this;if(!t){return null}else if(e){return this.contentContainerHeight}else{return"0"}}get contentContainerHeight(){return`${this.contentContainer.offsetHeight||0}px`}render(){const t=this.label||this.hasYieldedHeader;const e=["content-wrapper"];const{collapsible:a,hideContent:n,contentHeight:s}=this;if(a){if(n)e.push("is-closed");else if(s)e.push("is-transitioning")}const r=!this.hasYieldedHeader&&!!this.label;return i("section",{key:"5ac199f91a491b7ad9159a74b2d0f2a0cefee549",class:"wrapper"},i("header",{key:"868197191ac973925baf9a001b0aed63e539265d",class:t?"has-header":""},i("div",{key:"2de86b26ac4dd168d9a3d1c51b8de760dc9109a6",class:"header-content",id:this.titleId,onClick:this.collapsible&&this.onHeaderClick},r&&i("h2",{key:"aa1e323ea3fa0a582bba675988d83694f4d0e4bf",class:"title"},c(this.label)),i("div",{key:"c8658ce3caf49c264226ccbad8299a09a2e786fe",ref:t=>this.headerSlotWrapper=t,class:"header-slot-wrapper"},i("slot",{key:"f4a5e0b700fb56005edfe36ecfc94700d93b2947",ref:t=>this.headerSlot=t,name:"q2-section-header"}))),this.collapsible&&!this.noCollapseIcon&&i("q2-btn",{key:"7f003c4e299d86fd6193437881c96e2b894ab501",label:c(this.label||"tecton.element.section.defaultToggleLabel"),ariaExpanded:`${!!this.expanded}`,ariaControls:this.contentId,"test-id":"toggleButton","hide-label":true,onClick:this.onHeaderClick},i("q2-icon",{key:"04253cda393e5c526d190750530fa40bedf4265d",type:"chevron-up"}))),i("div",{key:"cbb76223518bc04d8d9892f4fa9c2d140259affa",class:e.join(" "),id:this.contentId,"aria-labelledby":this.titleId,role:"region",onTransitionEnd:this.onTransitionEnd,style:this.collapsible&&{height:this.contentHeight}},i("div",{key:"2a4f7a38ee152a0b82e681488277e38619f216df",ref:t=>this.contentContainer=t,class:"content",tabindex:"-1"},i("slot",{key:"825bb5c44f594558e7b14b8b37b43df7ded74144",ref:t=>this.contentSlot=t}))))}get hostElement(){return a(this)}static get watchers(){return{expanded:["expandedObserver"],collapsible:["collapsibleObserver"]}}};p.style=h;export{p as q2_section};
|
|
2
|
+
//# sourceMappingURL=p-da7fc914.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as t,h as i,F as s,H as n,g as a}from"./p-a5f18e27.js";import{c as o,n as d,l as h}from"./p-42302f6f.js";const r="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}";const c=r;const l=class{constructor(i){e(this,i);this.statusChange=t(this,"statusChange",7);this.activeChange=t(this,"activeChange",7);this.contentChange=t(this,"contentChange",7);this.description=undefined;this.isActive=undefined;this.label=undefined;this.showWithChildren=undefined;this.status=undefined;this.isChildActive=false}connectedCallback(){if(!this.hostElement.id)this.hostElement.id=`step-${o()}`}componentWillLoad(){this.checkForActiveChildren()}componentDidLoad(){const e=new MutationObserver((()=>{this.contentChange.emit()}));e.observe(this.hostElement,{childList:true,subtree:true,characterData:true});this.mutationObserver=e}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}labelOrDescriptionChanged(){this.contentChange.emit()}statusChanged(e){this.statusChange.emit({status:e,isActive:!!this.isActive,id:this.hostElement.id,host:this.hostElement})}isActiveChanged(e){this.activeChange.emit({status:this.status||"",isActive:e,id:this.hostElement.id,host:this.hostElement})}checkForActiveChildren(){if(!this.showWithChildren)return;d((()=>{setTimeout((()=>{this.isChildActive=!!this.hostElement.querySelector("[slot='children'] > q2-stepper-pane[is-active]")}))}))}render(){const{label:e,isActive:t}=this;return i(n,{key:"8bf9157a51bbc5dcdb177c0581cd9bd1ac4478bc",role:"listitem"},i(s,{key:"ba5bb25f63ea0172c13e01ee0e8d1462a18d2b3b"},i("div",{key:"b4b06aec66036fd6ccbd5a6d52923563784bdc21",role:"tabpanel","aria-label":e&&h(e),tabindex:"0",hidden:!t&&!(this.isChildActive&&this.showWithChildren)},i("slot",{key:"d2dd72ba6ee22885f14085075e0c9983165a8fce"})),i("div",{key:"4a28a5402b1ab92f00585055a2a2baf5f67b5a67",hidden:true},i("slot",{key:"08200f8c704f633561edda039838fef1f2a0901f",name:"label",onSlotchange:()=>this.contentChange.emit()}),i("slot",{key:"143f85ac940959f7f94d0396d8ed3fbb77f22463",name:"description",onSlotchange:()=>this.contentChange.emit()})),i("slot",{key:"73d9da8da6b4ded1add0ffe87f49d9e520b8ef28",name:"children"})))}get hostElement(){return a(this)}static get watchers(){return{label:["labelOrDescriptionChanged"],description:["labelOrDescriptionChanged"],status:["statusChanged"],isActive:["isActiveChanged"],showWithChildren:["checkForActiveChildren"]}}};l.style=c;export{l as q2_stepper_pane};
|
|
2
|
+
//# sourceMappingURL=p-e3230823.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["q2StepperPaneCss","Q2StepperPaneStyle0","Q2StepperPane","connectedCallback","this","hostElement","id","createGuid","componentWillLoad","checkForActiveChildren","componentDidLoad","observer","MutationObserver","contentChange","emit","observe","childList","subtree","characterData","mutationObserver","disconnectedCallback","disconnect","labelOrDescriptionChanged","statusChanged","status","statusChange","isActive","host","isActiveChanged","activeChange","showWithChildren","nextPaint","setTimeout","isChildActive","querySelector","render","label","h","Host","key","role","Fragment","loc","tabindex","hidden","name","onSlotchange"],"sources":["src/components/q2-stepper-pane/q2-stepper-pane.scss?tag=q2-stepper-pane&encapsulation=shadow","src/components/q2-stepper-pane/q2-stepper-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n position: relative;\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n Fragment,\n Event,\n Host,\n Watch,\n EventEmitter,\n Listen,\n State,\n} from '@stencil/core';\nimport { createGuid, loc, nextPaint } from 'src/utils';\n\nexport interface IStepperPaneEvent {\n status: string;\n isActive: boolean;\n id: string;\n host: HTMLElement;\n}\n\n@Component({ tag: 'q2-stepper-pane', shadow: true, styleUrl: 'q2-stepper-pane.scss' })\nexport class Q2StepperPane implements ComponentInterface {\n /**\n * The description for the pane.\n * @localizable\n */\n @Prop({ reflect: true }) description: string;\n\n /**\n * Used by q2-stepper and q2-stepper-vertical to determine which pane is active\n * @private\n */\n @Prop({ reflect: true }) isActive: boolean;\n\n /**\n * The label for the pane.\n * @localizable\n */\n @Prop({ reflect: true }) label: string;\n\n /**\n * Indicates to display the content of the pane when one of its children is selected.\n * @info\n * Currently only supported in the `<q2-stepper-vertical>` component.\n */\n @Prop({ reflect: true }) showWithChildren: boolean;\n\n /** The status of the pane. */\n @Prop({ reflect: true }) status: 'complete' | 'error' | 'locked';\n\n @State() isChildActive: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the status of the pane changes.\n */\n @Event() statusChange: EventEmitter<IStepperPaneEvent>;\n\n /**\n * Emitted when the active state of the pane changes.\n */\n @Event() activeChange: EventEmitter<IStepperPaneEvent>;\n\n /**\n * Emitted when the content of the pane changes.\n * @private\n */\n @Event({ bubbles: true }) contentChange: EventEmitter<undefined>;\n\n mutationObserver: MutationObserver;\n\n /// LifeCycle Hooks ///\n connectedCallback() {\n if (!this.hostElement.id) this.hostElement.id = `step-${createGuid()}`;\n }\n\n componentWillLoad() {\n this.checkForActiveChildren();\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(() => {\n this.contentChange.emit();\n });\n observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n this.mutationObserver = observer;\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Watchers and Listeners ///\n @Watch('label')\n @Watch('description')\n labelOrDescriptionChanged() {\n this.contentChange.emit();\n }\n\n @Watch('status')\n statusChanged(status) {\n this.statusChange.emit({\n status,\n isActive: !!this.isActive,\n id: this.hostElement.id,\n host: this.hostElement,\n });\n }\n\n @Watch('isActive')\n isActiveChanged(isActive) {\n this.activeChange.emit({\n status: this.status || '',\n isActive,\n id: this.hostElement.id,\n host: this.hostElement,\n });\n }\n\n @Watch('showWithChildren')\n @Listen('activeChange')\n checkForActiveChildren() {\n if (!this.showWithChildren) return;\n nextPaint(() => {\n setTimeout(() => {\n this.isChildActive = !!this.hostElement.querySelector<HTMLQ2StepperPaneElement>(\n \"[slot='children'] > q2-stepper-pane[is-active]\"\n );\n });\n });\n }\n\n /// DOM ///\n render() {\n const { label, isActive } = this;\n return (\n <Host role=\"listitem\">\n <Fragment>\n <div\n role=\"tabpanel\"\n aria-label={label && loc(label)}\n tabindex=\"0\"\n hidden={!isActive && !(this.isChildActive && this.showWithChildren)}\n >\n <slot />\n </div>\n <div hidden>\n <slot\n name=\"label\"\n onSlotchange={() => this.contentChange.emit()}\n ></slot>\n <slot\n name=\"description\"\n onSlotchange={() => this.contentChange.emit()}\n ></slot>\n </div>\n <slot name=\"children\"></slot>\n </Fragment>\n </Host>\n );\n }\n}\n"],"mappings":"yHAAA,MAAMA,EAAmB,gsBACzB,MAAAC,EAAeD,E,MCuBFE,EAAa,M,6SA6BY,K,CAuBlC,iBAAAC,GACI,IAAKC,KAAKC,YAAYC,GAAIF,KAAKC,YAAYC,GAAK,QAAQC,K,CAG5D,iBAAAC,GACIJ,KAAKK,wB,CAGT,gBAAAC,GACI,MAAMC,EAAW,IAAIC,kBAAiB,KAClCR,KAAKS,cAAcC,MAAM,IAE7BH,EAASI,QAAQX,KAAKC,YAAa,CAAEW,UAAW,KAAMC,QAAS,KAAMC,cAAe,OACpFd,KAAKe,iBAAmBR,C,CAG5B,oBAAAS,GACIhB,KAAKe,iBAAiBE,aACtBjB,KAAKe,iBAAmB,I,CAM5B,yBAAAG,GACIlB,KAAKS,cAAcC,M,CAIvB,aAAAS,CAAcC,GACVpB,KAAKqB,aAAaX,KAAK,CACnBU,SACAE,WAAYtB,KAAKsB,SACjBpB,GAAIF,KAAKC,YAAYC,GACrBqB,KAAMvB,KAAKC,a,CAKnB,eAAAuB,CAAgBF,GACZtB,KAAKyB,aAAaf,KAAK,CACnBU,OAAQpB,KAAKoB,QAAU,GACvBE,WACApB,GAAIF,KAAKC,YAAYC,GACrBqB,KAAMvB,KAAKC,a,CAMnB,sBAAAI,GACI,IAAKL,KAAK0B,iBAAkB,OAC5BC,GAAU,KACNC,YAAW,KACP5B,KAAK6B,gBAAkB7B,KAAKC,YAAY6B,cACpC,iDACH,GACH,G,CAKV,MAAAC,GACI,MAAMC,MAAEA,EAAKV,SAAEA,GAAatB,KAC5B,OACIiC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAACI,EAAQ,CAAAF,IAAA,4CACLF,EAAA,OAAAE,IAAA,2CACIC,KAAK,WAAU,aACHJ,GAASM,EAAIN,GACzBO,SAAS,IACTC,QAASlB,KAActB,KAAK6B,eAAiB7B,KAAK0B,mBAElDO,EAAA,QAAAE,IAAA,8CAEJF,EAAA,OAAAE,IAAA,2CAAKK,OAAM,MACPP,EAAA,QAAAE,IAAA,2CACIM,KAAK,QACLC,aAAc,IAAM1C,KAAKS,cAAcC,SAE3CuB,EAAA,QAAAE,IAAA,2CACIM,KAAK,cACLC,aAAc,IAAM1C,KAAKS,cAAcC,UAG/CuB,EAAA,QAAAE,IAAA,2CAAMM,KAAK,c"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as t,F as s,g as i}from"./p-a5f18e27.js";import{d as n}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,h as t,F as s,g as i}from"./p-a5f18e27.js";import{d as n}from"./p-3c42c90f.js";const a="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";const r=a;const o=class{constructor(t){e(this,t);this.syncTimer=null;this.trimSuffix=false;this.baseDate=undefined;this.locale=document.documentElement.lang||"en-US";this.messageFormat="short";this.numeric="auto";this.sync=true;this.date=undefined;this.unit=undefined;this.displayedMessage=undefined}componentWillLoad(){this.updateMessage()}connectedCallback(){this.syncUpdated()}disconnectedCallback(){window.clearInterval(this.syncTimer);this.syncTimer=null}get shouldShow(){return!!this.displayedMessage}get validDate(){const e=new Date(this.date);return n.isValid(e)}get handleDate(){if(!this.validDate)console.warn("Error: Invalid date provided to q2-relative-time.");return new Date(this.date)}get validBaseDate(){const e=new Date(this.baseDate);return n.isValid(e)}get handleBaseDate(){if(this.validBaseDate){this.trimSuffix=true;this.sync=false;return new Date(this.baseDate)}else{this.trimSuffix=false;this.sync=true;return new Date}}get isValidUnit(){if(["second","minute","hour","day","month","quarter","year"].includes(this.unit))return true;return false}get handleNumeric(){if(this.validBaseDate)return"always";return this.numeric}syncUpdated(){if(this.sync){this.syncTimer=window.setInterval((()=>{this.updateMessage()}),1e3)}else{window.clearInterval(this.syncTimer);this.syncTimer=null}}updateMessage(){const{validDate:e,handleDate:t,handleBaseDate:s,locale:i,handleNumeric:a,messageFormat:r,isValidUnit:o,unit:d,trimSuffix:h}=this;if(!e){this.sync=false;this.displayedMessage="Invalid Date Provided";return}const l=n.intlFormatDistance(new Date(t),new Date(s),{locale:i,localeMatcher:"best fit",numeric:a,style:r,unit:o?d:null});if(h){this.displayedMessage=this.trimMessage(l)}else{this.displayedMessage=l}}trimMessage(e){return e.replace(/^in\s?/,"").replace(/\sago$/,"")}async displayedMessageValue(){return this.displayedMessage}render(){const{shouldShow:e,displayedMessage:i}=this;return t(s,{key:"f8470d80d992a6b21279eeba2f71ee9a338d5d83"},e?t("time",{dateTime:i},i):null)}get hostElement(){return i(this)}static get watchers(){return{sync:["syncUpdated"],messageFormat:["updateMessage"],locale:["updateMessage"],date:["updateMessage"],baseDate:["updateMessage"],numeric:["updateMessage"],unit:["updateMessage"]}}};o.style=r;export{o as q2_relative_time};
|
|
2
|
+
//# sourceMappingURL=p-e47dbfbe.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as i,h as a,F as e,H as o,g as r}from"./p-a5f18e27.js";import{o as n,i as s,l as c}from"./p-42302f6f.js";import{s as p,a as h}from"./p-780a1d0e.js";const l="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 3px)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414))}.tag{display:flex;width:max-content;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";const d=l;const g=class{constructor(a){t(this,a);this.click=i(this,"click",7);var e;this.determineOptionCount=()=>{const t=this.hostElement.querySelectorAll("q2-option").length;this.optionCount=t};this.onClickElsewhere=t=>{const i=t.target;if(i.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false}};this.handleChange=t=>{t.stopPropagation();if(!this.optionCount)return;const{value:i}=t.detail;this.click.emit({value:i})};this.handleClick=async t=>{t.stopPropagation();this.popoverElement.controlElement=this.dropdownBtn;if(p(this)){const{value:i}=await h(this,t);this.click.emit({value:i})}else{await this.popoverElement.toggle()}};this.handleKeydown=async t=>{const i=t.metaKey||t.ctrlKey||t.key==="Tab";if(i)return;t.preventDefault();this.popoverElement.controlElement=this.dropdownBtn;if(p(this,t)){const{value:i}=await h(this,t);this.click.emit({value:i})}else{this.optionList.handleExternalKeydown(t)}};this.handleButtonFocusout=async t=>{var i;const a=t.relatedTarget;if((i=(a===null||a===void 0?void 0:a.tagName)==="Q2-OPTION")!==null&&i!==void 0?i:false)return;this.open=false};this.handleWrapperClick=()=>{this.dropdownBtn.focus();this.dropdownBtn.click()};this.hoist=!!((e=window.Tecton)===null||e===void 0?void 0:e.useActionSheets);this.label=undefined;this.open=undefined;this.optionListLabel="options";this.popoverDirection=undefined;this.popoverAlignment="right";this.popoverMinHeight=150;this.theme=undefined;this.optionCount=undefined}componentWillLoad(){const t=new MutationObserver(this.determineOptionCount);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t}componentDidLoad(){n(this.hostElement)}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}delegateFocus(t){if(!s(t,this.hostElement))return;if(!this.optionCount)return;this.dropdownBtn.focus()}popoverStateHandler({detail:{open:t}}){if(this.open!==t)this.open=t;if(t)return;this.optionList.setActiveElement(null)}generateHiddenElement(){return a("div",{id:"option-description",class:"sr","aria-hidden":"true"},c("tecton.element.optionList.optionCount",[this.optionCount]))}render(){const{optionCount:t,open:i}=this;const r=["tag"];if(t)r.push("has-options");return a(o,{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as i,h as a,F as e,H as o,g as r}from"./p-a5f18e27.js";import{o as n,i as s,l as c}from"./p-42302f6f.js";import{s as p,a as h}from"./p-780a1d0e.js";const l="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 3px)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414))}.tag{display:flex;width:max-content;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";const d=l;const g=class{constructor(a){t(this,a);this.click=i(this,"click",7);var e;this.determineOptionCount=()=>{const t=this.hostElement.querySelectorAll("q2-option").length;this.optionCount=t};this.onClickElsewhere=t=>{const i=t.target;if(i.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false}};this.handleChange=t=>{t.stopPropagation();if(!this.optionCount)return;const{value:i}=t.detail;this.click.emit({value:i})};this.handleClick=async t=>{t.stopPropagation();this.popoverElement.controlElement=this.dropdownBtn;if(p(this)){const{value:i}=await h(this,t);this.click.emit({value:i})}else{await this.popoverElement.toggle()}};this.handleKeydown=async t=>{const i=t.metaKey||t.ctrlKey||t.key==="Tab";if(i)return;t.preventDefault();this.popoverElement.controlElement=this.dropdownBtn;if(p(this,t)){const{value:i}=await h(this,t);this.click.emit({value:i})}else{this.optionList.handleExternalKeydown(t)}};this.handleButtonFocusout=async t=>{var i;const a=t.relatedTarget;if((i=(a===null||a===void 0?void 0:a.tagName)==="Q2-OPTION")!==null&&i!==void 0?i:false)return;this.open=false};this.handleWrapperClick=()=>{this.dropdownBtn.focus();this.dropdownBtn.click()};this.hoist=!!((e=window.Tecton)===null||e===void 0?void 0:e.useActionSheets);this.label=undefined;this.open=undefined;this.optionListLabel="options";this.popoverDirection=undefined;this.popoverAlignment="right";this.popoverMinHeight=150;this.theme=undefined;this.optionCount=undefined}componentWillLoad(){const t=new MutationObserver(this.determineOptionCount);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t}componentDidLoad(){n(this.hostElement)}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}delegateFocus(t){if(!s(t,this.hostElement))return;if(!this.optionCount)return;this.dropdownBtn.focus()}popoverStateHandler({detail:{open:t}}){if(this.open!==t)this.open=t;if(t)return;this.optionList.setActiveElement(null)}generateHiddenElement(){return a("div",{id:"option-description",class:"sr","aria-hidden":"true"},c("tecton.element.optionList.optionCount",[this.optionCount]))}render(){const{optionCount:t,open:i}=this;const r=["tag"];if(t)r.push("has-options");return a(o,{key:"402484c700e4b000d209a44d3506c79a64f05339",role:"listitem"},a("click-elsewhere",{key:"bd402fc91d311295538a96c19c337c24f8c99565",onChange:this.onClickElsewhere},this.optionCount?a(e,null,a("div",{class:"btn-wrapper",onClick:this.handleWrapperClick},a("button",{class:"tag-wrapper",ref:t=>this.dropdownBtn=t,"test-id":"btn-control",type:"button",role:"combobox",onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,"aria-controls":"option-list","aria-expanded":i?"true":"false","aria-describedby":"option-description"},a("div",{class:r.join(" ")},this.label),a("q2-icon",{type:"options"}))),this.generateHiddenElement()):a("div",{class:"tag-wrapper",onClick:t=>t.stopPropagation()},a("div",{class:r.join(" ")},this.label)),this.optionCount>0&&a("q2-popover",{key:"18c859db1fbecaf7b2be995911d0a91dcd9cd265",ref:t=>this.popoverElement=t,controlElement:this.dropdownBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment},a("q2-option-list",{key:"ed92aa7a8e863ab0efa905461082ab0fd06238f2",id:"option-list",ref:t=>this.optionList=t,onChange:this.handleChange,type:"menu",align:"right",label:c("tecton.element.optionList.label",[this.optionListLabel]),"no-select":true},a("slot",{key:"1b601866b649453e4bb5a6f57cc7cadd4fe80649"})))))}get hostElement(){return r(this)}};g.style=d;export{g as q2_tag};
|
|
2
|
+
//# sourceMappingURL=p-e4a2469f.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,a,h as r,g as s}from"./p-a5f18e27.js";import{c as e}from"./p-42302f6f.js";const n="standard";const d="standard";const o="standard";const c="standard";const i="legacy";const l="standard";const p="standard";const g="standard";const h="standard";const u="standard";const y="standard";const f="standard";const m="standard";const b="standard";const v="standard";const w="standard";const k="standard";const x="standard";const z="standard";const $="standard";const N="standard";const j="standard";const E="standard";const C="cards";const I="standard";const S="standard";const F="standard";const q="communication";const B="standard";const V="standard";const D="standard";const G="standard";const A="standard";const L="standard";const O="standard";const R="standard";const W="standard";const _="standard";const H="system";const J="standard";const K="standard";const M="standard";const P="standard";const Q="standard";const T="standard";const U="status";const X="standard";const Y="standard";const Z="standard";const tt="standard";const at="standard";const rt="standard";const st="standard";const et="standard";const nt="standard";const dt="standard";const ot="standard";const ct="standard";const it="standard";const lt="standard";const pt="standard";const gt="standard";const ht="standard";const ut="status";const yt="legacy";const ft="standard";const mt="system";const bt="standard";const vt="standard";const wt="standard";const kt="standard";const xt="standard";const zt="standard";const $t="standard";const Nt="standard";const jt="standard";const Et="standard";const Ct="standard";const It="standard";const St="standard";const Ft="standard";const qt="standard";const Bt="standard";const Vt="standard";const Dt="standard";const Gt="standard";const At="standard";const Lt="standard";const Ot="standard";const Rt="standard";const Wt="standard";const _t="standard";const Ht="standard";const Jt="standard";const Kt="standard";const Mt="standard";const Pt="standard";const Qt="mobile";const Tt="standard";const Ut="standard";const Xt="standard";const Yt="standard";const Zt="standard";const ta="standard";const aa="standard";const ra="standard";const sa="standard";const ea="standard";const na="legacy";const da="standard";const oa="standard";const ca="standard";const ia="standard";const la="standard";const pa="standard";const ga="standard";const ha="standard";const ua="standard";const ya="standard";const fa="standard";const ma="standard";const ba="standard";const va="standard";const wa="standard";const ka="standard";const xa="standard";const za="standard";const $a="status";const Na="mobile";const ja="standard";const Ea="standard";const Ca="standard";const Ia="standard";const Sa="standard";const Fa="standard";const qa="standard";const Ba="standard";const Va="standard";const Da="standard";const Ga="standard";const Aa="standard";const La="standard";const Oa="standard";const Ra="status";const Wa="standard";const _a="standard";const Ha={a11y:n,add:d,airplane:o,"alarm-clock":"standard",ambulance:c,android:i,apple:l,"arrow-down":"standard","arrow-left":"standard","arrow-right":"standard","arrow-up":"standard",arts:p,atv:g,backpack:h,bank:u,barchart:y,"barchart-trend":"standard",bed:f,bell:m,bicycle:b,boat:v,box:w,"brand-autobooks-color":"legacy","brand-autobooks-filled":"legacy","brand-facebook-color":"legacy","brand-facebook-filled":"legacy","brand-instagram-color":"legacy","brand-instagram-filled":"legacy","brand-linkedin-color":"legacy","brand-linkedin-filled":"legacy","brand-messenger-color":"legacy","brand-messenger-filled":"legacy","brand-payrecs-color":"legacy","brand-payrecs-filled":"legacy","brand-snapchat-color":"legacy","brand-snapchat-filled":"legacy","brand-twitter-color":"legacy","brand-twitter-filled":"legacy","brand-vimeo-color":"legacy","brand-vimeo-filled":"legacy","brand-x-color":"legacy","brand-x-filled":"legacy","brand-youtube-color":"legacy","brand-youtube-filled":"legacy","brand-zelle-color":"legacy","brand-zelle-filled":"legacy",briefcase:k,"browser-chrome":"legacy","browser-chrome-color":"legacy","browser-chrome-filled":"legacy","browser-edge":"legacy","browser-edge-color":"legacy","browser-edge-filled":"legacy","browser-firefox":"legacy","browser-firefox-color":"legacy","browser-firefox-filled":"legacy","browser-ie":"legacy","browser-ie-color":"legacy","browser-ie-filled":"legacy","browser-opera":"legacy","browser-opera-color":"legacy","browser-opera-filled":"legacy","browser-safari":"legacy","browser-safari-color":"legacy","browser-safari-filled":"legacy","bubble-graph":"standard",bug:x,buildings:z,"buildings-2":"standard",calculator:$,calendar:N,"calendar-confirm":"legacy","calendar-create":"standard","calendar-pay":"standard","calendar-remove":"standard","calendar-repeat":"standard","calendar-skip":"standard","calendar-time":"standard","call-color":"legacy","call-filled":"legacy",camera:j,car:E,"car-front":"standard",card:C,"card-add":"cards","card-amazon":"cards","card-amazon-color":"legacy","card-amex":"cards","card-amex-color":"legacy","card-applepay":"cards","card-applepay-color":"legacy","card-bitcoin":"cards","card-bitcoin-color":"legacy","card-dinersclub":"cards","card-dinersclub-color":"legacy","card-discover":"cards","card-discover-color":"legacy","card-edit":"cards","card-gift":"cards","card-googlepay":"cards","card-googlepay-color":"legacy","card-heart":"cards","card-in-hand":"cards","card-insert":"cards","card-jcb":"cards","card-jcb-color":"legacy","card-join":"cards","card-locked":"cards","card-maestro":"cards","card-maestro-color":"legacy","card-mastercard":"cards","card-mastercard-color":"legacy","card-more":"cards","card-paypal":"cards","card-paypal-color":"legacy","card-prohibited":"cards","card-remove":"cards","card-scissors":"cards","card-star":"cards","card-stripe":"cards","card-stripe-color":"legacy","card-success":"cards","card-unknown":"cards","card-update":"cards","card-visa":"cards","card-visa-color":"legacy",cart:I,"cart-moving":"standard",cash:S,"cash-bills":"standard","cash-coins":"standard","cash-in-hand":"standard","cash-register":"standard",certificate:F,chat:q,"chat-bubbles":"communication","chat-question":"communication","chat-round":"communication",check:B,"check-add":"standard","check-dollar":"standard","check-edit":"standard","check-remove":"standard","check-shield":"standard",checkmark:V,"checkmark-outline":"standard","chevron-double-left":"standard","chevron-double-right":"standard","chevron-down":"standard","chevron-left":"standard","chevron-right":"standard","chevron-up":"standard",clipboard:D,close:G,coins:A,compass:L,conversation:O,copy:R,coupon:W,"credit-score":"standard","currency-dollar":"currencies","currency-dollar-circle":"currencies","currency-euro":"currencies","currency-pound":"currencies","currency-yen":"currencies",dashboard:_,"delivery-truck":"standard",desktop:H,diploma:J,divider:K,document:M,"document-add":"standard","document-checklist":"standard","document-remove":"standard",download:P,"drag-handle":"standard",edit:Q,ellipsis:T,error:U,"error-filled":"status","external-link":"standard","eye-hide":"standard","eye-show":"standard","face-id":"standard",factory:X,failed:Y,filebox:Z,"filetype-csv":"filetypes","filetype-doc":"filetypes","filetype-docx":"filetypes","filetype-generic":"filetypes","filetype-gif":"filetypes","filetype-iso":"filetypes","filetype-jpg":"filetypes","filetype-otf":"filetypes","filetype-pdf":"filetypes","filetype-png":"filetypes","filetype-ppt":"filetypes","filetype-svg":"filetypes","filetype-txt":"filetypes","filetype-xls":"filetypes","filetype-xlsx":"filetypes","filetype-xml":"filetypes",filter:tt,fingerprint:at,flag:rt,gear:st,"gesture-hand":"gestures","gesture-scroll-horizontal":"gestures","gesture-scroll-vertical":"gestures","gesture-stretch":"gestures","gesture-swipe-down":"gestures","gesture-swipe-left":"gestures","gesture-swipe-right":"gestures","gesture-swipe-up":"gestures","gesture-tap":"gestures",gift:et,"gold-bars":"standard",government:nt,gps:dt,"graduation-cap":"standard","grid-x2":"standard","grid-x3":"standard","hamburger-menu":"standard",hand:ot,"hand-with-coins":"standard","hand-with-key":"standard",handshake:ct,headset:it,health:lt,heart:pt,"heart-add":"standard","heart-remove":"standard",home:gt,"home-chimney":"standard","home-gear":"standard","id-badge":"standard",inbox:ht,"inbox-checked":"standard","inbox-full":"standard",info:ut,"info-filled":"status",ios:yt,key:ft,laptop:mt,law:bt,leaf:vt,lightbulb:wt,linechart:kt,"linechart-trend":"standard",link:xt,list:zt,location:$t,"location-base":"standard","location-prohibited":"standard",lock:Nt,logout:jt,loop:Et,mail:Ct,math:It,medal:St,megaphone:Ft,"message-forward":"standard","message-reply":"standard","message-response":"standard",microscope:qt,"mobile-button":"mobile","mobile-edit":"mobile","mobile-fast-dollar":"standard","mobile-heart":"mobile","mobile-location":"mobile","mobile-lock":"mobile","mobile-remove":"mobile","mobile-rotate":"mobile","mobile-search":"mobile","mobile-settings":"mobile","mobile-time":"mobile","money-time":"standard",mortgage:Bt,motorcycle:Vt,motorhome:Dt,mountains:Gt,movie:At,music:Lt,"nest-egg":"standard",newspaper:Ot,options:Rt,"os-android":"legacy","os-android-color":"legacy","os-android-filled":"legacy","os-apple":"legacy","os-apple-color":"legacy","os-apple-filled":"legacy","os-windows":"legacy","os-windows-color":"legacy","os-windows-filled":"legacy",palette:Wt,"paper-plane":"standard",paperclip:_t,pause:Ht,paw:Jt,people:Kt,"people-group":"standard",percent:Mt,person:Pt,"person-add":"standard","person-lock":"standard","person-remove":"standard","person-settings":"standard","person-to-person":"standard","personal-care":"standard",phone:Qt,piechart:Tt,"piechart-expanded":"standard","piggy-bank":"standard",play:Ut,pricetag:Xt,"pricetag-blank":"standard","pricetag-time":"standard",print:Yt,prohibited:Zt,question:ta,receipt:aa,"receipt-list":"standard","receipt-list-top":"standard","receipt-top":"standard",refresh:ra,remove:sa,repeat:ea,"repeat-time":"standard",revert:na,ribbon:da,ring:oa,roadblock:ca,"rss-color":"legacy","rss-filled":"legacy",save:ia,school:la,search:pa,section:ga,service:ha,shield:ua,sign:ya,"sign-closed":"standard","sign-open":"standard","sign-sale":"standard","sign-sold":"standard",silverware:fa,skip:ma,"sms-color":"legacy","sms-filled":"legacy",sort:ba,speedometer:va,split:wa,star:ka,"star-add":"standard","star-remove":"standard",statements:xa,"steering-wheel":"standard","stop-payment":"standard",storefront:za,"storefront-add":"standard","storefront-prohibited":"standard","storefront-remove":"standard","storefront-settings":"standard",success:$a,"success-filled":"status",tablet:Na,target:ja,taxi:Ea,time:Ca,todo:Ia,tools:Sa,tractor:Fa,transfer:qa,"transfer-receive":"standard","transfer-send":"standard",trash:Ba,tree:Va,"truck-with-lock":"standard",umbrella:Da,unlink:Ga,upload:Aa,"venmo-colored":"legacy","venmo-filled":"legacy",virus:La,wallet:Oa,warning:Ra,"warning-filled":"status",watch:Wa,world:_a,"zoom-in":"standard","zoom-out":"standard"};const Ja="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round));transition:var(--tct-icon-transition, none)}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.fill-secondary{fill:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)));transition:var(--tct-icon-fill-transition, none)}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentcolor));transition:var(--tct-icon-stroke-primary-transition, none)}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a))}";const Ka=Ja;const Ma=class{constructor(a){t(this,a);this.inline=undefined;this.label=undefined;this.type=undefined;this.iconClone=undefined}componentWillLoad(){this.handleIcon()}componentDidRender(){var t,a,r,s;if(!this.iconClone)return;(a=(t=this.spriteGroup)===null||t===void 0?void 0:t.firstElementChild)===null||a===void 0?void 0:a.remove();const e=(r=this.spriteGroup)===null||r===void 0?void 0:r.appendChild(this.iconClone);(s=this.spriteUse)===null||s===void 0?void 0:s.setAttribute("href",`#${e.id}`)}handleIcon(){var t,a;if(this.isCustom){this.setCustomSVGAttrs()}else if(this.type){this.fetchSprite()}else{this.iconClone=null;(a=(t=this.spriteGroup)===null||t===void 0?void 0:t.firstElementChild)===null||a===void 0?void 0:a.remove()}}get isCustom(){return this.type==="custom"}get spriteFileName(){if(this.isCustom)return;return Ha[this.type]}get spriteId(){const{spriteFileName:t}=this;if(!t)return;return`tecton-sprite-${t}`}get spriteElement(){const{spriteId:t}=this;if(!t)return;return document.querySelector(`#${t}`)}get spriteEventName(){const{spriteFileName:t}=this;if(!t)return;return`tct-loaded-${t}`}get iconCloneViewBox(){var t,a;return(a=(t=this.iconClone)===null||t===void 0?void 0:t.getAttribute("viewBox"))!==null&&a!==void 0?a:"0 0 24 24"}getOrCreateSpriteContainer(){const t="tecton-sprites";let a=document.querySelector(`#${t}`);if(a)return a;a=document.createElement("div");a.id=t;a.style.display="none";document.body.appendChild(a);return a}checkForSprite(){var t;const{spriteId:a,spriteEventName:r}=this;const s=this.getOrCreateSpriteContainer();let e=document.querySelector(`#${a}`);if((t=e===null||e===void 0?void 0:e.hasAttribute("data-loaded"))!==null&&t!==void 0?t:false){this.cloneSpriteNode();return true}s.addEventListener(r,(()=>{this.cloneSpriteNode()}),{once:true});if(e)return true;e=document.createElement("div");e.id=a;s.appendChild(e);return false}async fetchSprite(){const{spriteFileName:t,spriteId:r,spriteEventName:s}=this;const e=this.checkForSprite();if(e)return;if(!t)return;const n=a(`assets/${t}.symbol.svg`);const d=await fetch(n);const o=await d.text();const c=document.createElement("div");c.innerHTML=o;const i=c.querySelector("svg");i.id=r;i.setAttribute("data-loaded","");let{spriteElement:l}=this;if((l===null||l===void 0?void 0:l.tagName)==="SVG")return;if(typeof l.replaceWith==="function"){l.replaceWith(i)}else{l.parentNode.replaceChild(i,l)}l=document.querySelector(`#${r}`);l.dispatchEvent(new CustomEvent(s,{bubbles:true}))}cloneSpriteNode(){const t=this.getOrCreateSpriteContainer();const a=t.querySelector(`#tct-${this.type}`);this.iconClone=a?a.cloneNode(true):undefined}setCustomSVGAttrs(){const t=this.hostElement.querySelector("svg");if(!t)return;t.setAttribute("role","img");t.setAttribute("xmlns","http://www.w3.org/2000/svg");const{label:a}=this;if(a){const r=document.createElement("title");const s=`label-${e()}`;r.id=s;r.textContent=a;t.appendChild(r);t.setAttribute("aria-labelledby",s)}else{t.setAttribute("aria-hidden","true")}}render(){const{label:t,type:a}=this;return this.isCustom?r("slot",null):r("svg",{"aria-hidden":t?undefined:"true",role:"img","aria-labelledby":t?"label":undefined,viewBox:this.iconCloneViewBox,xmlns:"http://www.w3.org/2000/svg"},t&&r("title",{id:"label"},t),!!a&&r("use",{ref:t=>this.spriteUse=t}),r("g",{ref:t=>this.spriteGroup=t}))}static get assetsDirs(){return["assets"]}get hostElement(){return s(this)}static get watchers(){return{type:["handleIcon"]}}};Ma.style=Ka;export{Ma as q2_icon};
|
|
2
|
+
//# sourceMappingURL=p-f0813fb4.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["q2IconCss","Q2IconStyle0","Q2Icon","componentWillLoad","this","handleIcon","componentDidRender","iconClone","_b","_a","spriteGroup","firstElementChild","remove","appendedClone","_c","appendChild","_d","spriteUse","setAttribute","id","isCustom","setCustomSVGAttrs","type","fetchSprite","spriteFileName","iconMap","spriteId","spriteElement","document","querySelector","spriteEventName","iconCloneViewBox","getAttribute","getOrCreateSpriteContainer","spriteContainerId","spriteContainer","createElement","style","display","body","checkForSprite","hasAttribute","cloneSpriteNode","addEventListener","once","spriteExists","spritePath","getAssetPath","response","fetch","data","text","wrappingDiv","innerHTML","svg","tagName","replaceWith","parentNode","replaceChild","dispatchEvent","CustomEvent","bubbles","spriteNode","cloneNode","undefined","innerSVG","hostElement","label","title","labelId","createGuid","textContent","render","h","role","viewBox","xmlns","ref","el"],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, 1.5);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n transition: var(--tct-icon-transition, none);\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State, Fragment } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n @Prop({ reflect: true }) inline: boolean;\n\n /** The text that is presented by screen-readers when they encounter the icon. */\n @Prop({ reflect: true }) label: string;\n\n /** The name of the icon to be displayed. */\n @Prop({ reflect: true }) type: string;\n\n @Element() hostElement: HTMLElement;\n\n @State() iconClone: SVGSymbolElement;\n\n spriteGroup: SVGElement;\n spriteUse: SVGElement;\n\n componentWillLoad() {\n this.handleIcon();\n }\n\n componentDidRender(): void {\n if (!this.iconClone) return;\n this.spriteGroup?.firstElementChild?.remove();\n const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n }\n\n @Watch('type')\n handleIcon() {\n if (this.isCustom) {\n this.setCustomSVGAttrs();\n } else if (this.type) {\n this.fetchSprite();\n } else {\n this.iconClone = null;\n this.spriteGroup?.firstElementChild?.remove();\n }\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n get spriteFileName() {\n if (this.isCustom) return;\n return iconMap[this.type];\n }\n\n get spriteId() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tecton-sprite-${spriteFileName}`;\n }\n\n get spriteElement() {\n const { spriteId } = this;\n if (!spriteId) return;\n return document.querySelector<HTMLElement>(`#${spriteId}`);\n }\n\n get spriteEventName() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tct-loaded-${spriteFileName}`;\n }\n\n get iconCloneViewBox() {\n return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n }\n\n /**\n * Checks for the sprite container element in the global DOM\n * If it does not exist, it creates and appends it to the body\n */\n getOrCreateSpriteContainer() {\n const spriteContainerId = 'tecton-sprites';\n let spriteContainer: HTMLDivElement = document.querySelector(`#${spriteContainerId}`);\n\n if (spriteContainer) return spriteContainer;\n spriteContainer = document.createElement('div');\n spriteContainer.id = spriteContainerId;\n spriteContainer.style.display = 'none';\n document.body.appendChild(spriteContainer);\n return spriteContainer;\n }\n\n checkForSprite() {\n const { spriteId, spriteEventName } = this;\n const spriteContainer = this.getOrCreateSpriteContainer();\n let spriteElement: HTMLElement = document.querySelector(`#${spriteId}`);\n\n // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n this.cloneSpriteNode();\n return true;\n }\n\n // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the sprite is loaded\n spriteContainer.addEventListener(\n spriteEventName,\n () => {\n this.cloneSpriteNode();\n },\n { once: true }\n );\n\n // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n if (spriteElement) return true;\n\n // If sprite element does not exist, create a placeholder\n // This will let other icons know the sprite is being loaded\n spriteElement = document.createElement('div');\n spriteElement.id = spriteId;\n spriteContainer.appendChild(spriteElement);\n return false;\n }\n\n async fetchSprite() {\n const { spriteFileName, spriteId, spriteEventName } = this;\n\n const spriteExists = this.checkForSprite();\n if (spriteExists) return;\n\n if (!spriteFileName) return;\n const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n const response = await fetch(spritePath);\n const data = await response.text();\n const wrappingDiv = document.createElement('div');\n wrappingDiv.innerHTML = data;\n const svg = wrappingDiv.querySelector('svg');\n\n svg.id = spriteId;\n svg.setAttribute('data-loaded', '');\n\n let { spriteElement } = this;\n if (spriteElement?.tagName === 'SVG') return;\n\n if (typeof spriteElement.replaceWith === 'function') {\n spriteElement.replaceWith(svg);\n } else {\n spriteElement.parentNode.replaceChild(svg, spriteElement);\n }\n\n spriteElement = document.querySelector(`#${spriteId}`);\n spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n }\n\n cloneSpriteNode() {\n const spriteContainer = this.getOrCreateSpriteContainer();\n const spriteNode = spriteContainer.querySelector<HTMLElement>(`#tct-${this.type}`);\n this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n }\n\n setCustomSVGAttrs() {\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n render() {\n const { label, type } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n aria-hidden={label ? undefined : 'true'}\n role=\"img\"\n aria-labelledby={label ? 'label' : undefined}\n viewBox={this.iconCloneViewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n {label && <title id=\"label\">{label}</title>}\n {!!type && <use ref={el => (this.spriteUse = el)} />}\n <g ref={el => (this.spriteGroup = el)}></g>\n </svg>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r,h as t}from"./p-a5f18e27.js";const e="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}.currency{color:var(--tct-currency-color, inherit);font-size:var(--tct-currency-font-size, inherit);font-weight:var(--tct-currency-font-weight, inherit)}.currency-small{color:var(--tct-currency-small-color, inherit);font-size:var(--tct-currency-small-font-size, 24px);font-weight:var(--tct-currency-small-font-weight, 600)}.currency-small .superscript{vertical-align:super;color:var(--tct-currency-small-superscript-color, inherit);font-size:var(--tct-currency-small-superscript-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-currency-small-superscript-font-weight, 700)}.currency-medium{color:var(--tct-currency-medium-color, inherit);font-size:var(--tct-currency-medium-font-size, 42px);font-weight:var(--tct-currency-medium-font-weight, 600)}.currency-medium .superscript{vertical-align:super;color:var(--tct-currency-medium-superscript-color, inherit);font-size:var(--tct-currency-medium-superscript-font-size, 16px);font-weight:var(--tct-currency-medium-superscript-font-weight, 700)}.currency-large{color:var(--tct-currency-large-color, inherit);font-size:var(--tct-currency-large-font-size, 70px);font-weight:var(--tct-currency-large-font-weight, 700)}.currency-large .superscript{vertical-align:super;color:var(--tct-currency-large-superscript-color, inherit);font-size:var(--tct-currency-large-superscript-font-size, 28px);font-weight:var(--tct-currency-large-superscript-font-weight, 800)}";const s=e;const n=class{constructor(t){r(this,t);this.amount=undefined;this.currency="USD";this.locale=document.documentElement.lang||"en-US";this.size=undefined;this.signDisplay="auto";this.slotSize=undefined}componentWillLoad(){this.formatCurrency()}get hasPlusMinusSign(){return this.formattedParts.some((r=>r.type==="minusSign"||r.type==="plusSign"))}get plusMinusSign(){const{formattedParts:r,hasPlusMinusSign:t}=this;if(!t)return;const e=r.find((r=>r.type==="minusSign"||r.type==="plusSign"));return e.value}get currencyIsFront(){const r=this.formattedParts.findIndex((r=>r.type==="currency"));if(r===0||r===1)return true;return false}get currencySymbol(){const{formattedParts:r,currencyIsFront:t}=this;const e=r.findIndex((r=>r.type==="currency"));const s=r[e].value;return t?s:" "+s}get shouldSuperscriptSymbol(){if(!this.currencyIsFront||this.sizeProvided)return true;return false}get amountCore(){const{formattedParts:r,shouldSuperscriptFraction:t}=this;let e="";for(const t of r){if(t.type==="integer"||t.type==="decimal"||t.type==="group"||t.type==="literal"){e+=t.value}}if(t&&e[e.length-1]===".")e=e.slice(0,-1);e=e.trimEnd();return e}get fraction(){const{formattedParts:r}=this;const t=r.find((r=>r.type==="fraction"));if(!t)return;return t.value}get shouldSuperscriptFraction(){const{formattedParts:r,currencyIsFront:t,sizeProvided:e}=this;const s=r.findIndex((r=>r.type==="fraction"));const n=r[s-1].value===",";if(n||!t||!e)return false;return true}get sizeProvided(){return!!this.size||!!this.slotSize}get slotSizeValue(){let r=this.slotSize;switch(r){case"xsmall":r="small";break;case"xlarge":r="large";break}return r}get currencyClasses(){const r=["currency"];const t=this.size?this.size:this.slotSizeValue;if(!!t)r.push(`currency-${t}`);return r.join(" ")}propsUpdated(){this.formatCurrency()}formatCurrency(){const r=new Intl.NumberFormat(this.locale,{style:"currency",currency:this.currency,signDisplay:this.signDisplay});this.formattedParts=r.formatToParts(this.amount);this.readableCurrency=r.format(this.amount)}render(){const{hasPlusMinusSign:r,plusMinusSign:e,currencyIsFront:s,currencySymbol:n,shouldSuperscriptSymbol:c,amountCore:i,fraction:o,shouldSuperscriptFraction:a,readableCurrency:u,currencyClasses:l}=this;return t("div",{key:"0a730d73b23a578257b44dc2eb1f8360707cd87b",class:l,"aria-label":u},r&&t("span",{key:"c7b69e0f685fbbbe814a50413fb533b36105453b"},e),s&&t("span",{key:"b7d8aa7ae7f3f48f762fc16932ff4da60beb57db",class:c?"superscript":""},n),t("span",{key:"2c4bbf98fa2fbbafb0cf273b4c3a28b906981e2f"},i),t("span",{key:"1ed2482e9dfd9bda22395877c105651ddcd4e6e5",class:a?"superscript":""},o),!s&&t("span",{key:"dedd3638fea31a7f985f553c4b14be358c031318",class:c?"superscript":""},n))}static get watchers(){return{amount:["propsUpdated"],currency:["propsUpdated"],locale:["propsUpdated"],size:["propsUpdated"],slotSize:["propsUpdated"],signDisplay:["propsUpdated"]}}};n.style=s;export{n as q2_currency};
|
|
2
|
+
//# sourceMappingURL=p-fc9f43f8.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["q2CurrencyCss","Q2CurrencyStyle0","Q2Currency","document","documentElement","lang","componentWillLoad","this","formatCurrency","hasPlusMinusSign","formattedParts","some","part","type","plusMinusSign","sign","find","value","currencyIsFront","index","findIndex","currencySymbol","currencyIndex","symbol","shouldSuperscriptSymbol","sizeProvided","amountCore","shouldSuperscriptFraction","amount","length","slice","trimEnd","fraction","fractionIndex","commaBeforeFraction","size","slotSize","slotSizeValue","currencyClasses","classes","sizeClass","push","join","propsUpdated","formatOptions","Intl","NumberFormat","locale","style","currency","signDisplay","formatToParts","readableCurrency","format","render","h","key","class"],"sources":["src/components/q2-currency/q2-currency.scss?tag=q2-currency&encapsulation=shadow","src/components/q2-currency/q2-currency.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n.currency {\n color: var-list(--tct-currency-color, inherit);\n font-size: var-list(--tct-currency-font-size, inherit);\n font-weight: var-list(--tct-currency-font-weight, inherit);\n}\n\n.currency-small {\n color: var-list(--tct-currency-small-color, inherit);\n font-size: var-list(--tct-currency-small-font-size, 24px);\n font-weight: var-list(--tct-currency-small-font-weight, 600);\n\n .superscript {\n vertical-align: super;\n color: var-list(--tct-currency-small-superscript-color, inherit);\n font-size: var-list(--tct-currency-small-superscript-font-size, --app-font-size-small, 12px);\n font-weight: var-list(--tct-currency-small-superscript-font-weight, 700);\n }\n}\n\n.currency-medium {\n color: var-list(--tct-currency-medium-color, inherit);\n font-size: var-list(--tct-currency-medium-font-size, 42px);\n font-weight: var-list(--tct-currency-medium-font-weight, 600);\n\n .superscript {\n vertical-align: super;\n color: var-list(--tct-currency-medium-superscript-color, inherit);\n font-size: var-list(--tct-currency-medium-superscript-font-size, 16px);\n font-weight: var-list(--tct-currency-medium-superscript-font-weight, 700);\n }\n}\n\n.currency-large {\n color: var-list(--tct-currency-large-color, inherit);\n font-size: var-list(--tct-currency-large-font-size, 70px);\n font-weight: var-list(--tct-currency-large-font-weight, 700);\n\n .superscript {\n vertical-align: super;\n color: var-list(--tct-currency-large-superscript-color, inherit);\n font-size: var-list(--tct-currency-large-superscript-font-size, 28px);\n font-weight: var-list(--tct-currency-large-superscript-font-weight, 800);\n }\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n@Component({ tag: 'q2-currency', shadow: true, styleUrl: 'q2-currency.scss' })\nexport class Q2Currency implements ComponentInterface {\n /** The amount you want formatted. */\n @Prop({ reflect: true }) amount: number;\n\n /** Formats the `amount` to a specific currency. */\n @Prop({ reflect: true }) currency: string = 'USD';\n\n /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n @Prop({ reflect: true }) locale: string | string[] = document.documentElement.lang || 'en-US';\n\n /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large';\n\n /**\n * Determine how the positive or negative sign should display.\n *\n * Behavior:\n * - `always`: Always display the sign.\n * - `auto`: Sign displays for negative numbers only, including negative zero.\n * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n * - `never`: Never display the sign.\n */\n @Prop({ reflect: true }) signDisplay: 'never' | 'auto' | 'always' | 'exceptZero' = 'auto';\n\n /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts. */\n @Prop({ reflect: true }) slotSize: string;\n\n /** @private The parts of the formatted number. */\n formattedParts: Intl.NumberFormatPart[];\n /** @private The full currency for aria-label purposes. */\n readableCurrency: string;\n\n /// Lifecycle Hooks ///\n componentWillLoad(): void | Promise<void> {\n this.formatCurrency();\n }\n\n /// Getters ///\n get hasPlusMinusSign(): boolean {\n return this.formattedParts.some(\n (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n );\n }\n get plusMinusSign(): string {\n const { formattedParts, hasPlusMinusSign } = this;\n if (!hasPlusMinusSign) return;\n\n const sign = formattedParts.find(\n (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n );\n return sign.value;\n }\n\n get currencyIsFront(): boolean {\n const index = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n if (index === 0 || index === 1) return true;\n return false;\n }\n\n get currencySymbol(): string {\n const { formattedParts, currencyIsFront } = this;\n const currencyIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n const symbol = formattedParts[currencyIndex].value;\n return currencyIsFront ? symbol : ' ' + symbol;\n }\n\n get shouldSuperscriptSymbol(): boolean {\n if (!this.currencyIsFront || this.sizeProvided) return true;\n\n return false;\n }\n\n get amountCore(): string {\n const { formattedParts, shouldSuperscriptFraction } = this;\n let amount: string = '';\n\n for (const part of formattedParts) {\n if (\n part.type === 'integer' ||\n part.type === 'decimal' ||\n part.type === 'group' ||\n part.type === 'literal'\n ) {\n amount += part.value;\n }\n }\n\n // removes trailing decimal point if superscripting the fraction\n if (shouldSuperscriptFraction && amount[amount.length - 1] === '.') amount = amount.slice(0, -1);\n // removes end whitespace that breaks formatting\n amount = amount.trimEnd();\n\n return amount;\n }\n\n get fraction(): string {\n const { formattedParts } = this;\n const fraction = formattedParts.find((part: Intl.NumberFormatPart) => part.type === 'fraction');\n if (!fraction) return;\n\n return fraction.value;\n }\n\n get shouldSuperscriptFraction(): boolean {\n const { formattedParts, currencyIsFront, sizeProvided } = this;\n const fractionIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'fraction');\n const commaBeforeFraction = formattedParts[fractionIndex - 1].value === ',';\n\n if (commaBeforeFraction || !currencyIsFront || !sizeProvided) return false;\n\n return true;\n }\n\n get sizeProvided(): boolean {\n return !!this.size || !!this.slotSize;\n }\n\n get slotSizeValue(): string {\n let size = this.slotSize;\n switch (size) {\n case 'xsmall':\n size = 'small';\n break;\n case 'xlarge':\n size = 'large';\n break;\n default:\n break;\n }\n\n return size;\n }\n\n get currencyClasses(): string {\n const classes = ['currency'];\n const sizeClass = this.size ? this.size : this.slotSizeValue;\n\n if (!!sizeClass) classes.push(`currency-${sizeClass}`);\n\n return classes.join(' ');\n }\n\n /// Watchers ///\n @Watch('amount')\n @Watch('currency')\n @Watch('locale')\n @Watch('size')\n @Watch('slotSize')\n @Watch('signDisplay')\n propsUpdated() {\n this.formatCurrency();\n }\n\n /// Helpers ///\n formatCurrency() {\n const formatOptions = new Intl.NumberFormat(this.locale, {\n style: 'currency',\n currency: this.currency,\n signDisplay: this.signDisplay,\n });\n this.formattedParts = formatOptions.formatToParts(this.amount);\n this.readableCurrency = formatOptions.format(this.amount);\n }\n\n /// DOM ///\n render() {\n const {\n hasPlusMinusSign,\n plusMinusSign,\n currencyIsFront,\n currencySymbol,\n shouldSuperscriptSymbol,\n amountCore,\n fraction,\n shouldSuperscriptFraction,\n readableCurrency,\n currencyClasses,\n } = this;\n\n return (\n <div\n class={currencyClasses}\n aria-label={readableCurrency}\n >\n {hasPlusMinusSign && <span>{plusMinusSign}</span>}\n {currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n <span>{amountCore}</span>\n <span class={shouldSuperscriptFraction ? 'superscript' : ''}>{fraction}</span>\n {!currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n </div>\n );\n }\n}\n"],"mappings":"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"}
|