q2-tecton-elements 1.45.3 → 1.46.1
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 +3 -9
- package/dist/cjs/click-elsewhere_2.cjs.entry.js.map +1 -1
- package/dist/cjs/{index-0430339e.js → index-59fb7c74.js} +1 -1
- package/dist/cjs/{index-0430339e.js.map → index-59fb7c74.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 +3 -3
- package/dist/cjs/q2-calendar.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-carousel-pane.cjs.entry.js +36 -6
- package/dist/cjs/q2-carousel-pane.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-carousel.cjs.entry.js +34 -3
- package/dist/cjs/q2-carousel.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-chart-donut.cjs.entry.js +69 -3
- package/dist/cjs/q2-chart-donut.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-checkbox-group.cjs.entry.js +3 -2
- package/dist/cjs/q2-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-checkbox.cjs.entry.js +3 -2
- package/dist/cjs/q2-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-currency.cjs.entry.js +2 -2
- package/dist/cjs/q2-currency.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-data-table.cjs.entry.js +1 -1
- package/dist/cjs/q2-detail.cjs.entry.js +1 -1
- package/dist/cjs/q2-dropdown-item.cjs.entry.js +1 -1
- package/dist/cjs/q2-dropdown-item.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/q2-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-icon.cjs.entry.js +1 -1
- 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 +13 -15
- package/dist/cjs/q2-item.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-legend.cjs.entry.js +118 -0
- package/dist/cjs/q2-legend.cjs.entry.js.map +1 -0
- package/dist/cjs/q2-list.cjs.entry.js +8 -8
- package/dist/cjs/q2-list.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-loc.cjs.entry.js +1 -1
- package/dist/cjs/q2-message.cjs.entry.js +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} +2 -53
- 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 +4 -5
- 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/collection-manifest.json +1 -0
- package/dist/collection/components/click-elsewhere/click-elsewhere.js +2 -8
- 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 +1 -1
- package/dist/collection/components/q2-calendar/q2-calendar.js.map +1 -1
- package/dist/collection/components/q2-carousel/q2-carousel.js +34 -3
- package/dist/collection/components/q2-carousel/q2-carousel.js.map +1 -1
- package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js +36 -6
- package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js.map +1 -1
- package/dist/collection/components/q2-chart-donut/q2-chart-donut.css +9 -0
- package/dist/collection/components/q2-chart-donut/q2-chart-donut.js +91 -3
- package/dist/collection/components/q2-chart-donut/q2-chart-donut.js.map +1 -1
- package/dist/collection/components/q2-checkbox/q2-checkbox.js +20 -2
- package/dist/collection/components/q2-checkbox/q2-checkbox.js.map +1 -1
- package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.js +3 -2
- package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.js.map +1 -1
- package/dist/collection/components/q2-currency/q2-currency.css +4 -0
- package/dist/collection/components/q2-currency/q2-currency.js +1 -1
- package/dist/collection/components/q2-data-table/q2-data-table.js +7 -7
- package/dist/collection/components/q2-detail/q2-detail.js +1 -1
- package/dist/collection/components/q2-dropdown/q2-dropdown.js +1 -1
- package/dist/collection/components/q2-dropdown/q2-dropdown.js.map +1 -1
- package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js +1 -1
- package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js.map +1 -1
- package/dist/collection/components/q2-icon/q2-icon.js +1 -1
- 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-item/q2-item.js +23 -16
- package/dist/collection/components/q2-item/q2-item.js.map +1 -1
- package/dist/collection/components/q2-legend/q2-legend.css +126 -0
- package/dist/collection/components/q2-legend/q2-legend.js +271 -0
- package/dist/collection/components/q2-legend/q2-legend.js.map +1 -0
- package/dist/collection/components/q2-list/q2-list.css +8 -5
- package/dist/collection/components/q2-list/q2-list.js +7 -7
- package/dist/collection/components/q2-list/q2-list.js.map +1 -1
- package/dist/collection/components/q2-loc/q2-loc.js +1 -1
- package/dist/collection/components/q2-message/q2-message.js +1 -1
- package/dist/collection/components/q2-optgroup/q2-optgroup.js +1 -1
- package/dist/collection/components/q2-option/q2-option.js +1 -1
- 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.js +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 +21 -5
- 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 +2 -8
- package/dist/components/click-elsewhere2.js.map +1 -1
- package/dist/components/index.js +2 -0
- package/dist/components/index.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 +2 -2
- package/dist/components/q2-calendar.js.map +1 -1
- package/dist/components/q2-carousel-pane.js +36 -6
- package/dist/components/q2-carousel-pane.js.map +1 -1
- package/dist/components/q2-carousel.js +34 -3
- package/dist/components/q2-carousel.js.map +1 -1
- package/dist/components/q2-chart-donut.js +81 -7
- package/dist/components/q2-chart-donut.js.map +1 -1
- package/dist/components/q2-checkbox-group.js +3 -2
- package/dist/components/q2-checkbox-group.js.map +1 -1
- package/dist/components/q2-checkbox2.js +4 -2
- package/dist/components/q2-checkbox2.js.map +1 -1
- package/dist/components/q2-currency.js +2 -2
- package/dist/components/q2-currency.js.map +1 -1
- package/dist/components/q2-data-table.js +1 -1
- package/dist/components/q2-detail.js +1 -1
- package/dist/components/q2-dropdown-item2.js +1 -1
- package/dist/components/q2-dropdown-item2.js.map +1 -1
- package/dist/components/q2-dropdown.js +1 -1
- package/dist/components/q2-dropdown.js.map +1 -1
- package/dist/components/q2-icon2.js +1 -1
- 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 +16 -18
- package/dist/components/q2-item.js.map +1 -1
- package/dist/components/q2-legend.d.ts +11 -0
- package/dist/components/q2-legend.js +8 -0
- package/dist/components/q2-legend.js.map +1 -0
- package/dist/components/q2-legend2.js +145 -0
- package/dist/components/q2-legend2.js.map +1 -0
- package/dist/components/q2-list.js +8 -8
- package/dist/components/q2-list.js.map +1 -1
- package/dist/components/q2-loc.js +1 -1
- package/dist/components/q2-message2.js +2 -2
- package/dist/components/q2-optgroup2.js +1 -1
- package/dist/components/q2-option-list2.js +1 -1
- package/dist/components/q2-option2.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 +2 -2
- package/dist/components/q2-relative-time.js +1 -1
- package/dist/components/q2-section.js +2 -2
- package/dist/components/q2-select.js +1 -711
- 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 +3 -9
- package/dist/esm/click-elsewhere_2.entry.js.map +1 -1
- package/dist/esm/{index-e940b40e.js → index-c99c4cc6.js} +1 -1
- package/dist/esm/{index-e940b40e.js.map → index-c99c4cc6.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 +3 -3
- package/dist/esm/q2-calendar.entry.js.map +1 -1
- package/dist/esm/q2-carousel-pane.entry.js +36 -6
- package/dist/esm/q2-carousel-pane.entry.js.map +1 -1
- package/dist/esm/q2-carousel.entry.js +34 -3
- package/dist/esm/q2-carousel.entry.js.map +1 -1
- package/dist/esm/q2-chart-donut.entry.js +69 -3
- package/dist/esm/q2-chart-donut.entry.js.map +1 -1
- package/dist/esm/q2-checkbox-group.entry.js +3 -2
- package/dist/esm/q2-checkbox-group.entry.js.map +1 -1
- package/dist/esm/q2-checkbox.entry.js +3 -2
- package/dist/esm/q2-checkbox.entry.js.map +1 -1
- package/dist/esm/q2-currency.entry.js +2 -2
- package/dist/esm/q2-currency.entry.js.map +1 -1
- package/dist/esm/q2-data-table.entry.js +1 -1
- package/dist/esm/q2-detail.entry.js +1 -1
- package/dist/esm/q2-dropdown-item.entry.js +1 -1
- package/dist/esm/q2-dropdown-item.entry.js.map +1 -1
- package/dist/esm/q2-dropdown.entry.js +1 -1
- package/dist/esm/q2-dropdown.entry.js.map +1 -1
- package/dist/esm/q2-icon.entry.js +1 -1
- 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 +15 -17
- package/dist/esm/q2-item.entry.js.map +1 -1
- package/dist/esm/q2-legend.entry.js +114 -0
- package/dist/esm/q2-legend.entry.js.map +1 -0
- package/dist/esm/q2-list.entry.js +8 -8
- package/dist/esm/q2-list.entry.js.map +1 -1
- package/dist/esm/q2-loc.entry.js +1 -1
- package/dist/esm/q2-message.entry.js +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} +4 -54
- 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 +4 -5
- 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-0bc47914.entry.js +2 -0
- package/dist/q2-tecton-elements/p-0bc47914.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-0e482a7c.entry.js +2 -0
- package/dist/q2-tecton-elements/p-0e482a7c.entry.js.map +1 -0
- 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-df297a77.entry.js → p-16891e51.entry.js} +2 -2
- package/dist/q2-tecton-elements/{p-a214077c.entry.js → p-18ec54c0.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-245ad08f.entry.js +2 -0
- package/dist/q2-tecton-elements/p-245ad08f.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-2a248a3f.entry.js +2 -0
- package/dist/q2-tecton-elements/p-2a248a3f.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-2c57a367.entry.js +2 -0
- package/dist/q2-tecton-elements/p-2c57a367.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-32e57e9f.entry.js +2 -0
- package/dist/q2-tecton-elements/p-32e57e9f.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-5dc5c4e2.entry.js → p-4194d6ed.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-4194d6ed.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-f0813fb4.entry.js → p-4f2dfb4d.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-4f2dfb4d.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-7ce6e587.js → p-6559c942.js} +1 -1
- package/dist/q2-tecton-elements/{p-391acc00.entry.js → p-65ed80a5.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-65ed80a5.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-81b76d40.entry.js +2 -0
- package/dist/q2-tecton-elements/p-81b76d40.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-2436c843.entry.js → p-85003c5b.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-85003c5b.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-d9e19f70.entry.js → p-97a98211.entry.js} +2 -2
- package/dist/q2-tecton-elements/{p-71180fcd.entry.js → p-ac9414a6.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-ac9414a6.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-7523305d.entry.js → p-bc141c5b.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-be101dcf.entry.js +2 -0
- package/dist/q2-tecton-elements/p-be101dcf.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-4bbe563f.entry.js → p-bf32fd9c.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-bf32fd9c.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-b376c111.entry.js → p-ca0d7eb3.entry.js} +2 -2
- package/dist/q2-tecton-elements/{p-c016bd18.entry.js → p-ca7ad3c3.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-ca7dad64.entry.js +2 -0
- package/dist/q2-tecton-elements/p-ca7dad64.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-ced89010.entry.js +2 -0
- package/dist/q2-tecton-elements/p-ced89010.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-f4d77672.entry.js → p-d5776227.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-d60ccf2f.entry.js +2 -0
- package/dist/q2-tecton-elements/p-d60ccf2f.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-d8fba914.entry.js +2 -0
- package/dist/q2-tecton-elements/p-d8fba914.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-63192fac.entry.js → p-dd670d63.entry.js} +2 -2
- package/dist/q2-tecton-elements/{p-05b015a8.entry.js → p-e27a23fc.entry.js} +2 -2
- package/dist/q2-tecton-elements/{p-05b015a8.entry.js.map → p-e27a23fc.entry.js.map} +1 -1
- package/dist/q2-tecton-elements/{p-bfe9d688.entry.js → p-ef441885.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-ef441885.entry.js.map +1 -0
- package/dist/q2-tecton-elements/p-f2251261.entry.js +2 -0
- package/dist/q2-tecton-elements/p-f2251261.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-debd5249.entry.js → p-f45b3488.entry.js} +2 -2
- package/dist/q2-tecton-elements/{p-debd5249.entry.js.map → p-f45b3488.entry.js.map} +1 -1
- package/dist/q2-tecton-elements/{p-22661533.entry.js → p-fe3c62e0.entry.js} +2 -2
- package/dist/q2-tecton-elements/p-fe3c62e0.entry.js.map +1 -0
- package/dist/q2-tecton-elements/{p-685b821c.entry.js → p-ff39ba49.entry.js} +2 -2
- 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/click-elsewhere-test.e2e.js +0 -18
- package/dist/test/elements/click-elsewhere-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-btn-test.e2e.js +16 -0
- package/dist/test/elements/q2-btn-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-calendar-test.e2e.js +1 -1
- package/dist/test/elements/q2-calendar-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-carousel-pane-test.e2e.js +49 -1
- package/dist/test/elements/q2-carousel-pane-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-carousel-pane-test.spec.js +4 -1
- package/dist/test/elements/q2-carousel-pane-test.spec.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-chart-donut-test.e2e.js +56 -0
- package/dist/test/elements/q2-chart-donut-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-checkbox-group-test.e2e.js +13 -10
- package/dist/test/elements/q2-checkbox-group-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-item-test.e2e.js +16 -3
- package/dist/test/elements/q2-dropdown-item-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-icon-test.e2e.js +3 -3
- package/dist/test/elements/q2-icon-test.e2e.js.map +1 -1
- package/dist/test/elements/q2-input-test.e2e.js +93 -56
- package/dist/test/elements/q2-input-test.e2e.js.map +1 -1
- package/dist/test/elements/{q2-detail/q2-item-test.e2e.js → q2-item-test.e2e.js} +29 -1
- package/dist/test/elements/q2-item-test.e2e.js.map +1 -0
- package/dist/test/elements/q2-item-test.spec.js +32 -0
- package/dist/test/elements/q2-item-test.spec.js.map +1 -0
- package/dist/test/elements/q2-legend-test.e2e.js +19 -0
- package/dist/test/elements/q2-legend-test.e2e.js.map +1 -0
- package/dist/test/elements/q2-legend-test.spec.js +271 -0
- package/dist/test/elements/q2-legend-test.spec.js.map +1 -0
- 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-select-test.e2e.js +26 -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-carousel-pane/q2-carousel-pane.d.ts +7 -0
- package/dist/types/components/q2-chart-donut/q2-chart-donut.d.ts +14 -0
- package/dist/types/components/q2-checkbox/q2-checkbox.d.ts +2 -0
- package/dist/types/components/q2-input/q2-input.d.ts +10 -3
- package/dist/types/components/q2-item/q2-item.d.ts +1 -1
- package/dist/types/components/q2-legend/q2-legend.d.ts +41 -0
- package/dist/types/components.d.ts +133 -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-22661533.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-2436c843.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-391acc00.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-4b81a121.entry.js +0 -2
- package/dist/q2-tecton-elements/p-4b81a121.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-4bbe563f.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-68556733.entry.js +0 -2
- package/dist/q2-tecton-elements/p-68556733.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-71180fcd.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-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-b7d5fd12.entry.js +0 -2
- package/dist/q2-tecton-elements/p-b7d5fd12.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-bfe9d688.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-bffda54d.entry.js +0 -2
- package/dist/q2-tecton-elements/p-bffda54d.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-cadceb00.entry.js +0 -2
- package/dist/q2-tecton-elements/p-cadceb00.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-f0813fb4.entry.js.map +0 -1
- package/dist/q2-tecton-elements/p-fcc84527.entry.js.map +0 -1
- package/dist/test/elements/q2-detail/q2-item-test.e2e.js.map +0 -1
- /package/dist/q2-tecton-elements/{p-df297a77.entry.js.map → p-16891e51.entry.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-a214077c.entry.js.map → p-18ec54c0.entry.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-7ce6e587.js.map → p-6559c942.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-d9e19f70.entry.js.map → p-97a98211.entry.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-7523305d.entry.js.map → p-bc141c5b.entry.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-b376c111.entry.js.map → p-ca0d7eb3.entry.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-c016bd18.entry.js.map → p-ca7ad3c3.entry.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-f4d77672.entry.js.map → p-d5776227.entry.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-63192fac.entry.js.map → p-dd670d63.entry.js.map} +0 -0
- /package/dist/q2-tecton-elements/{p-685b821c.entry.js.map → p-ff39ba49.entry.js.map} +0 -0
- /package/dist/types/workspace/workspace/{tecton-production_release_1.45.x → tecton-production_release_1.46.x}/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 → tecton-production_release_1.46.x}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +0 -0
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as o,g as i,h as e}from"./p-a5f18e27.js";import{t as r,w as s}from"./p-42302f6f.js";const n=class{constructor(i){t(this,i);this.change=o(this,"change",7);this.mouseEventList=["mousedown","dragstart","touchstart"];this.isCurrentlyFocused=false;this.mouseHandler=t=>{const o=this.shadowContains(this.findActiveElement());const i=this.shadowContains(this.shadowEventTarget(t))||this.originatesInSlots(t.target);if(!i&&(this.isCurrentlyFocused||o)){this.isCurrentlyFocused=false;this.change.emit();return}this.isCurrentlyFocused=i||o};this.windowBlurHandler=()=>{const t=this.findActiveElement();if(t===document.body&&this.isCurrentlyFocused||t!==document.body&&(t===null||t===void 0?void 0:t.tagName)==="IFRAME"){this.isCurrentlyFocused=false;this.change.emit();return}}}componentWillLoad(){}connectedCallback(){this.mouseEventList.forEach((t=>{document.addEventListener(t,this.mouseHandler)}));window.addEventListener("blur",this.windowBlurHandler)}disconnectedCallback(){this.mouseEventList.forEach((t=>{document.removeEventListener(t,this.mouseHandler)}));window.removeEventListener("blur",this.windowBlurHandler)}findActiveElement(){let t=document.activeElement;while(true){if(!t||!t.shadowRoot){return t}t=t.shadowRoot.activeElement}}shadowEventTarget(t){return t.composedPath()[0]||t.target}shadowContains(t){while(true){if(t===this.hostElement){return true}if(!t){return false}t=t.parentNode||t.host}}originatesInSlots(t){const o=this.hostElement.querySelectorAll("slot");for(const i of Array.from(o)){const o=i&&i.assignedNodes&&i.assignedNodes()||this.hostElement.childNodes;for(const i of Array.from(o)){if(i.contains(t)){return true}}}return false}get hostElement(){return i(this)}};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}.container{display:none}.show{display:block;position:fixed;z-index:var(--tct-popover-z-index, 50);margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:host([block]) .show{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:host([align=left]) .show{left:var(--comp-pop-left);right:unset}:host([align=right]) .show{right:var(--comp-pop-right);left:unset}.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}.show.up{top:unset;bottom:var(--comp-pop-bottom)}.show.legacy{position:absolute}.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";const c=a;const p=class{constructor(i){t(this,i);this.popoverStateChanged=o(this,"popoverStateChanged",7);this.displayBuffer=10;this.orientationChanged=false;this.handleMinHeight=()=>{if(this.minHeight){r(this,"minHeight","prop")}};this.viewPortChanged=()=>{if(!this.open)return;this.determinePopDirection()};this.viewPortOrientationChanged=()=>{this.orientationChanged=true;this.viewPortChanged()};this.setFixedCSSProperties=async()=>{var t,o;const{controlElement:i,containerElement:e,currentDirection:r}=this;const{top:n,bottom:a,left:c,right:p}=(o=(t=i===null||i===void 0?void 0:i.getBoundingClientRect)===null||t===void 0?void 0:t.call(i))!==null&&o!==void 0?o:{top:0,bottom:0,left:0,right:0};const h=c;const l=window.visualViewport.width-p;if(this.block)e.style.setProperty("--comp-pop-width",`${i.offsetWidth||0}px`);e.style.setProperty("--comp-pop-left",`${h}px`);e.style.setProperty("--comp-pop-right",`${l}px`);if(r==="up"){e.style.setProperty("--comp-pop-bottom",`${window.visualViewport.height-n}px`)}if(r==="down"){e.style.setProperty("--comp-pop-top",`${a}px`)}await s();e.style.setProperty("--comp-pop-opacity","1")};this.setAbsoluteCSSProperties=async()=>{const{controlElement:t,containerElement:o,currentDirection:i,align:e}=this;if(e==="right"){o.style.setProperty("--comp-pop-right","0");o.style.setProperty("--comp-pop-left","unset")}else{o.style.setProperty("--comp-pop-left","0");o.style.setProperty("--comp-pop-right","unset")}if(this.block){o.style.setProperty("--comp-pop-width","100%")}if(i==="up"){const i=getComputedStyle(t);const e=parseInt(i.height||"0")+parseInt(i.borderTopWidth||"0")+parseInt(i.borderBottomWidth||"0");o.style.setProperty("--comp-pop-bottom",`${e}px`)}await s();o.style.setProperty("--comp-pop-opacity","1")};this.direction=undefined;this.align=undefined;this.open=undefined;this.block=undefined;this.controlElement=undefined;this.mode=null;this.minHeight=undefined;this.currentDirection=undefined;this.show=false}componentDidLoad(){this.handleMinHeight();if(this.open)this.determinePopDirection()}disconnectedCallback(){this.removeViewportListeners()}async toggle(){this.open=!this.open}async scrollContainerTo(t){this.containerElement.scrollTo(t)}async openChanged(t){this.popoverStateChanged.emit({open:t});if(t){this.addViewportListeners();this.determinePopDirection()}else{this.removeViewportListeners();this.currentDirection=undefined;this.show=false;await s();this.clearCSSProperties()}}minHeightProvided(){this.handleMinHeight()}popoverStateHandler(t){const{detail:{open:o}}=t;if(o===this.open)return;this.open=o;t.stopPropagation()}get actualDirection(){const{direction:t}=this;switch(t){case"up":case"down":return t;default:return undefined}}get isModule(){var t,o;const i=window!==window.top;const e=Object.keys((o=(t=window.Tecton)===null||t===void 0?void 0:t.platformDimensions)!==null&&o!==void 0?o:{}).length>0;return i&&e}addViewportListeners(){var t;window.addEventListener("resize",this.viewPortOrientationChanged);window.addEventListener("scroll",this.viewPortChanged,{passive:true,capture:true});(t=screen===null||screen===void 0?void 0:screen.orientation)===null||t===void 0?void 0:t.addEventListener("change",this.viewPortOrientationChanged);window.addEventListener("orientationchange",this.viewPortOrientationChanged)}removeViewportListeners(){var t;window.removeEventListener("resize",this.viewPortOrientationChanged);window.removeEventListener("scroll",this.viewPortChanged);(t=screen===null||screen===void 0?void 0:screen.orientation)===null||t===void 0?void 0:t.removeEventListener("orientationchange",this.viewPortOrientationChanged);window.removeEventListener("orientationchange",this.viewPortOrientationChanged)}clearCSSProperties(){this.containerElement.style.removeProperty("--comp-pop-max-height");this.containerElement.style.removeProperty("--comp-pop-top");this.containerElement.style.removeProperty("--comp-pop-bottom");this.containerElement.style.removeProperty("--comp-pop-left");this.containerElement.style.removeProperty("--comp-pop-right");this.containerElement.style.removeProperty("--comp-pop-width");this.containerElement.style.removeProperty("--comp-pop-opacity")}setDirectionAndShow(t){const o=this.open;if(!o)return;this.currentDirection=t;this.show=true;if(this.mode==="legacy"){this.setAbsoluteCSSProperties()}else{this.setFixedCSSProperties()}}async determinePopDirection(){var t,o,i;const{containerElement:e,controlElement:r,actualDirection:n,displayBuffer:a}=this;if(e)e.style.maxHeight=null;await s();const{isModule:c}=this;const{top:p,bottom:h}=(o=(t=r===null||r===void 0?void 0:r.getBoundingClientRect)===null||t===void 0?void 0:t.call(r))!==null&&o!==void 0?o:{top:0,bottom:0};let l;let d;let u;if(c){const t=(i=window.Tecton)===null||i===void 0?void 0:i.platformDimensions;const o=window.visualViewport.height-h;const e=t.innerHeight-(t.outletOffset+h);const r=o<e;l=t.innerHeight;d=(t.outletOffset>0?p:p+t.outletOffset)-a;u=r?o-a:e-a}else{l=window.visualViewport.height;d=p-a;u=l-h-a}const f=d>u?"up":"down";const m=!e.style.getPropertyValue("--comp-pop-max-height")||this.orientationChanged;this.orientationChanged=false;const w=this.currentDirection||n||f;switch(w){case"up":if(m){e.style.setProperty("--comp-pop-max-height",`${d}px`)}this.setDirectionAndShow("up");break;case"down":if(m){e.style.setProperty("--comp-pop-max-height",`${u}px`)}this.setDirectionAndShow("down");break}}render(){const t=["container",this.currentDirection];if(this.show)t.push("show");if(this.mode==="legacy")t.push("legacy");return e("div",{key:"a96d0c6516ae6d7c279aa7b550cb5c41260ea618",ref:t=>this.containerElement=t,class:t.join(" "),"test-id":"outerContainer"},e("div",{key:"8700a956386ec2c0580be9751673fec1cb2f6b20",ref:t=>this.contentElement=t,class:"content"},e("slot",{key:"aeb04e94b887bd1af446ce443fb492a29bb9e0d6"})))}get hostElement(){return i(this)}static get watchers(){return{open:["openChanged"],minHeight:["minHeightProvided"]}}};p.style=c;export{n as click_elsewhere,p as q2_popover};
|
|
2
|
-
//# sourceMappingURL=p-68556733.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["ClickElsewhere","constructor","hostRef","this","mouseEventList","isCurrentlyFocused","mouseHandler","event","shadowContains","findActiveElement","aboutToBeFocused","shadowEventTarget","originatesInSlots","target","change","emit","windowBlurHandler","activeElement","document","body","tagName","componentWillLoad","connectedCallback","forEach","eventName","addEventListener","window","disconnectedCallback","removeEventListener","workingElement","shadowRoot","composedPath","child","hostElement","parentNode","host","slots","querySelectorAll","currentSlot","Array","from","lightNodes","assignedNodes","childNodes","currentNode","contains","q2PopoverCss","Q2PopoverStyle0","Q2Popover","displayBuffer","orientationChanged","handleMinHeight","minHeight","handleDeprecationWarning","viewPortChanged","open","determinePopDirection","viewPortOrientationChanged","setFixedCSSProperties","async","controlElement","containerElement","currentDirection","top","controlTop","bottom","controlBottom","left","controlLeft","right","controlRight","_b","_a","getBoundingClientRect","call","popoverLeft","popoverRight","visualViewport","width","block","style","setProperty","offsetWidth","height","waitForNextPaint","setAbsoluteCSSProperties","align","controlStyle","getComputedStyle","controlSize","parseInt","borderTopWidth","borderBottomWidth","undefined","componentDidLoad","removeViewportListeners","toggle","scrollContainerTo","options","scrollTo","openChanged","popoverStateChanged","addViewportListeners","show","clearCSSProperties","minHeightProvided","popoverStateHandler","detail","stopPropagation","actualDirection","direction","isModule","isIframe","hasPlatformDimensions","Object","keys","Tecton","platformDimensions","length","passive","capture","screen","orientation","removeProperty","setDirectionAndShow","isOpen","mode","maxHeight","windowHeight","maxSpaceAbove","maxSpaceBelow","_c","distanceToIframeBottom","viewableSpaceBelow","innerHeight","outletOffset","isIframeShorterThanWindow","directionWithMostSpace","shouldUpdateMaxHeight","getPropertyValue","currentOrDetermineDirection","render","containerClasses","push","h","key","ref","el","class","join","contentElement"],"sources":["src/components/click-elsewhere/click-elsewhere.tsx","src/components/q2-popover/q2-popover.scss?tag=q2-popover&encapsulation=shadow","src/components/q2-popover/q2-popover.tsx"],"sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'click-elsewhere',\n shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n /**\n * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n */\n mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n isCurrentlyFocused: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the user clicks outside the element\n */\n @Event() change: EventEmitter;\n\n /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */\n /* tslint:disable:no-empty */\n componentWillLoad() {}\n /* tslint:enable:no-empty */\n\n connectedCallback() {\n this.mouseEventList.forEach((eventName: string) => {\n document.addEventListener(eventName, this.mouseHandler);\n });\n window.addEventListener('blur', this.windowBlurHandler);\n }\n\n disconnectedCallback() {\n this.mouseEventList.forEach((eventName: string) => {\n document.removeEventListener(eventName, this.mouseHandler);\n });\n window.removeEventListener('blur', this.windowBlurHandler);\n }\n\n findActiveElement(): Element | null {\n let workingElement = document.activeElement!;\n while (true) {\n if (!workingElement || !workingElement.shadowRoot) {\n return workingElement;\n }\n workingElement = workingElement.shadowRoot.activeElement;\n }\n }\n\n shadowEventTarget(event: any): Element {\n return event.composedPath()[0] || event.target;\n }\n\n shadowContains(child: any): boolean {\n /**\n * shadow-dom enabled version of Node.contains()\n */\n\n while (true) {\n if (child === this.hostElement) {\n return true;\n }\n if (!child) {\n return false;\n }\n\n child = child.parentNode || child.host;\n }\n }\n\n originatesInSlots(target: Element): boolean {\n const slots = this.hostElement.querySelectorAll('slot');\n\n for (const currentSlot of Array.from(slots)) {\n const lightNodes =\n (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||\n this.hostElement.childNodes;\n\n for (const currentNode of Array.from(lightNodes)) {\n if (currentNode.contains(target)) {\n return true;\n }\n }\n }\n\n return false;\n }\n\n mouseHandler = (event: Event): void => {\n const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n const aboutToBeFocused =\n this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target as Element);\n\n if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {\n this.isCurrentlyFocused = false;\n this.change.emit();\n return;\n }\n this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;\n };\n\n windowBlurHandler = (): void => {\n const activeElement = this.findActiveElement();\n if (\n (activeElement === document.body && this.isCurrentlyFocused) || // clicked parent frame\n (activeElement !== document.body && activeElement?.tagName === 'IFRAME') // clicked child frame\n ) {\n this.isCurrentlyFocused = false;\n this.change.emit();\n return;\n }\n };\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n display: none;\n}\n\n.show {\n display: block;\n position: fixed;\n z-index: var-list(--tct-popover-z-index, 50);\n margin: 0;\n padding: 0;\n overflow: auto;\n background: var-list(--tct-popover-background, --app-white, #ffffff);\n color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n min-width: var-list(--tct-popover-min-width, 135px);\n margin-block: var-list(--tct-popover-margin-block, 0);\n box-shadow: var-list(--tct-popover-box-shadow, --app-shadow-1, unquote('0 2px 4px rgba(0, 0, 0, 0.3)'));\n border-width: var-list(--tct-popover-border-width, 0);\n border-style: solid;\n border-color: var-list(--tct-popover-border-color, transparent);\n border-radius: var-list(--tct-popover-border-radius, 0);\n // the following --comp variables are set via JS\n max-height: var(--comp-pop-max-height);\n left: var(--comp-pop-left);\n opacity: var(--comp-pop-opacity, 0);\n\n :host([block]) & {\n right: unset;\n width: var(--comp-pop-width);\n min-width: var-list(--tct-popover-min-width, unset);\n }\n\n :host([align='left']) & {\n left: var(--comp-pop-left);\n right: unset;\n }\n\n :host([align='right']) & {\n right: var(--comp-pop-right);\n left: unset;\n }\n\n &.down {\n top: var-list(--tct-popover-top, --comp-pop-top);\n bottom: unset;\n }\n\n &.up {\n top: unset;\n bottom: var(--comp-pop-bottom);\n }\n\n &.legacy {\n position: absolute;\n }\n\n @include tiny-scrollbar();\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n Element,\n Watch,\n Method,\n Listen,\n EventEmitter,\n Event,\n State,\n} from '@stencil/core';\nimport { handleDeprecationWarning, waitForNextPaint } from '../../utils';\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n /**\n * Force the direction of the popover when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n */\n @Prop({ reflect: true }) direction: 'up' | 'down';\n\n /** Aligns the popover to the left or right side of the control element. */\n @Prop({ reflect: true }) align: 'left' | 'right';\n\n /** Controls whether the popover is open or closed. */\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /** Indicates the popover will match the width of its parent element. */\n @Prop({ reflect: true }) block: boolean;\n\n /** The element that controls the popover's behavior. */\n @Prop() controlElement: HTMLElement;\n\n @Prop() mode: 'legacy' = null;\n\n /** @deprecated */\n @Prop() minHeight: number;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the popover is opened or closed.\n */\n @Event() popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n @State() currentDirection: 'down' | 'up' = undefined;\n // remove `show` when Popover API is supported in iOS\n @State() show: boolean = false;\n\n containerElement: HTMLDivElement;\n contentElement: HTMLDivElement;\n\n /**\n * The number of pixels to leave between the popover and the edge of the viewport\n */\n displayBuffer = 10;\n\n /** remove when Popover API is supported in iOS */\n orientationChanged: boolean = false;\n\n /// Lifecycle hooks ///\n componentDidLoad() {\n this.handleMinHeight();\n if (this.open) this.determinePopDirection();\n }\n\n disconnectedCallback() {\n this.removeViewportListeners();\n }\n\n /// Methods ///\n @Method()\n async toggle() {\n this.open = !this.open;\n }\n\n @Method()\n async scrollContainerTo(options: ScrollToOptions) {\n this.containerElement.scrollTo(options);\n }\n\n /// Watchers ///\n @Watch('open')\n async openChanged(open: boolean) {\n this.popoverStateChanged.emit({ open });\n\n if (open) {\n this.addViewportListeners();\n this.determinePopDirection();\n } else {\n this.removeViewportListeners();\n this.currentDirection = undefined;\n this.show = false;\n await waitForNextPaint();\n this.clearCSSProperties();\n }\n }\n\n @Watch('minHeight')\n minHeightProvided() {\n this.handleMinHeight();\n }\n\n /// Listeners ///\n @Listen('popoverState')\n popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n const {\n detail: { open },\n } = event;\n if (open === this.open) return;\n\n this.open = open;\n event.stopPropagation();\n }\n\n /// Getters ///\n get actualDirection(): 'up' | 'down' | undefined {\n const { direction } = this;\n switch (direction) {\n case 'up':\n case 'down':\n return direction;\n default:\n return undefined;\n }\n }\n\n get isModule() {\n const isIframe = window !== window.top;\n const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n return isIframe && hasPlatformDimensions;\n }\n\n /// Helpers ///\n handleMinHeight = () => {\n if (this.minHeight) {\n handleDeprecationWarning(this, 'minHeight', 'prop');\n }\n };\n\n viewPortChanged = () => {\n if (!this.open) return;\n this.determinePopDirection();\n };\n\n viewPortOrientationChanged = () => {\n this.orientationChanged = true;\n this.viewPortChanged();\n };\n\n addViewportListeners() {\n window.addEventListener('resize', this.viewPortOrientationChanged);\n // #region remove when Popover API is supported in iOS\n window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n screen?.orientation?.addEventListener('change', this.viewPortOrientationChanged);\n window.addEventListener('orientationchange', this.viewPortOrientationChanged);\n // #endregion\n }\n\n removeViewportListeners() {\n window.removeEventListener('resize', this.viewPortOrientationChanged);\n // #region remove when Popover API is supported in iOS\n window.removeEventListener('scroll', this.viewPortChanged);\n screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n // #endregion\n }\n\n setFixedCSSProperties = async () => {\n const { controlElement, containerElement, currentDirection } = this;\n const {\n top: controlTop,\n bottom: controlBottom,\n left: controlLeft,\n right: controlRight,\n } = controlElement?.getBoundingClientRect?.() ?? {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n };\n const popoverLeft: number = controlLeft;\n const popoverRight: number = window.visualViewport.width - controlRight;\n\n if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement.offsetWidth || 0}px`);\n containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);\n containerElement.style.setProperty('--comp-pop-right', `${popoverRight}px`);\n\n if (currentDirection === 'up') {\n containerElement.style.setProperty('--comp-pop-bottom', `${window.visualViewport.height - controlTop}px`);\n }\n if (currentDirection === 'down') {\n containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);\n }\n\n // Wait for one paint to prevent layout thrashing\n await waitForNextPaint();\n containerElement.style.setProperty('--comp-pop-opacity', '1');\n };\n\n setAbsoluteCSSProperties = async () => {\n const { controlElement, containerElement, currentDirection, align } = this;\n\n if (align === 'right') {\n containerElement.style.setProperty('--comp-pop-right', '0');\n containerElement.style.setProperty('--comp-pop-left', 'unset');\n } else {\n containerElement.style.setProperty('--comp-pop-left', '0');\n containerElement.style.setProperty('--comp-pop-right', 'unset');\n }\n\n if (this.block) {\n containerElement.style.setProperty('--comp-pop-width', '100%');\n }\n\n if (currentDirection === 'up') {\n const controlStyle = getComputedStyle(controlElement);\n const controlSize =\n parseInt(controlStyle.height || '0') +\n parseInt(controlStyle.borderTopWidth || '0') +\n parseInt(controlStyle.borderBottomWidth || '0');\n\n containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);\n }\n\n // Wait for one paint to prevent layout thrashing\n await waitForNextPaint();\n containerElement.style.setProperty('--comp-pop-opacity', '1');\n };\n\n clearCSSProperties() {\n this.containerElement.style.removeProperty('--comp-pop-max-height');\n this.containerElement.style.removeProperty('--comp-pop-top');\n this.containerElement.style.removeProperty('--comp-pop-bottom');\n this.containerElement.style.removeProperty('--comp-pop-left');\n this.containerElement.style.removeProperty('--comp-pop-right');\n this.containerElement.style.removeProperty('--comp-pop-width');\n this.containerElement.style.removeProperty('--comp-pop-opacity');\n }\n\n setDirectionAndShow(direction: 'up' | 'down') {\n // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the\n // popover can be closed between the time the popover is opened and the time the direction is determined\n const isOpen = this.open;\n if (!isOpen) return;\n\n this.currentDirection = direction;\n this.show = true;\n if (this.mode === 'legacy') {\n this.setAbsoluteCSSProperties();\n } else {\n this.setFixedCSSProperties();\n }\n }\n\n async determinePopDirection() {\n const { containerElement, controlElement, actualDirection, displayBuffer } = this;\n if (containerElement) containerElement.style.maxHeight = null;\n\n await waitForNextPaint();\n\n const { isModule } = this;\n const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n top: 0,\n bottom: 0,\n };\n\n let windowHeight: number;\n let maxSpaceAbove: number;\n let maxSpaceBelow: number;\n\n if (isModule) {\n const platformDimensions = window.Tecton?.platformDimensions;\n const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n const viewableSpaceBelow =\n platformDimensions.innerHeight - (platformDimensions.outletOffset + controlBottom);\n const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n windowHeight = platformDimensions.innerHeight;\n // If the top of the module is below the top of the window we just use the controlTop\n // Otherwise we need to add the outletOffset to the controlTop\n maxSpaceAbove =\n (platformDimensions.outletOffset > 0 ? controlTop : controlTop + platformDimensions.outletOffset) -\n displayBuffer;\n maxSpaceBelow = isIframeShorterThanWindow\n ? distanceToIframeBottom - displayBuffer\n : viewableSpaceBelow - displayBuffer;\n } else {\n windowHeight = window.visualViewport.height;\n maxSpaceAbove = controlTop - displayBuffer;\n maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n }\n\n const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n const shouldUpdateMaxHeight =\n !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n this.orientationChanged = false;\n const currentOrDetermineDirection = this.currentDirection || actualDirection || directionWithMostSpace;\n\n switch (currentOrDetermineDirection) {\n case 'up':\n if (shouldUpdateMaxHeight) {\n containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceAbove}px`);\n }\n this.setDirectionAndShow('up');\n break;\n case 'down':\n if (shouldUpdateMaxHeight) {\n containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceBelow}px`);\n }\n this.setDirectionAndShow('down');\n break;\n default:\n break;\n }\n }\n\n /// DOM ///\n render() {\n const containerClasses = ['container', this.currentDirection];\n if (this.show) containerClasses.push('show');\n if (this.mode === 'legacy') containerClasses.push('legacy');\n\n return (\n <div\n ref={el => (this.containerElement = el)}\n class={containerClasses.join(' ')}\n test-id=\"outerContainer\"\n >\n <div\n ref={el => (this.contentElement = el)}\n class=\"content\"\n >\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["q2CheckboxGroupCss","Q2CheckboxGroupStyle0","Q2CheckboxGroup","this","_id","createGuid","onMutationObserved","updateValue","updateDisabled","updateReadonly","onInnerCheckboxChange","event","stopImmediatePropagation","groupValue","setTimeout","checkboxElements","forEach","check","value","checked","change","emit","inputId","Array","from","hostElement","querySelectorAll","protectedValue","readonly","hasOwnProperty","groupDisabled","disabled","checkbox","componentWillLoad","componentDidLoad","observer","MutationObserver","observe","childList","subtree","mutationObserver","disconnectedCallback","disconnect","valueObserver","disabledObserver","readonlyObserver","setValue","values","valuesSet","Set","isArray","has","click","onHostElementChange","target","onchange","detail","render","showLabel","label","optional","h","key","hideLabel","class","labelDOM","hasError","onChange","type","inputDom"],"sources":["src/components/q2-checkbox-group/q2-checkbox-group.scss?tag=q2-checkbox-group&encapsulation=shadow","src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n padding: var(--tct-input-error-padding, 0);\n margin: 0;\n border: 0;\n}\n\nfieldset.has-error {\n border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));\n border-width: 1px;\n border-style: solid;\n border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n top: 8px;\n right: 8px;\n position: absolute;\n width: 40%;\n text-align: right;\n background: linear-gradient(\n to right,\n var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n top: 28px;\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n color: var(\n --tct-input-label-optional-font-color,\n var(\n --tct-a11y-color,\n var(\n --t-a11y-gray-color,\n var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n )\n )\n );\n font-size: var(--tct-input-label-optional-font-size, 12px);\n font-weight: var(--tct-input-label-optional-font-weight, 400);\n}\n\n.flexed {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n}\n.flexed.left {\n justify-content: left;\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Method,\n} from '@stencil/core';\nimport { createGuid, labelDOM } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n /** Determines if all checkboxes in the group are put into a `disabled` state. */\n @Prop({ reflect: true }) disabled: boolean;\n\n /** Determines if the component should display in an errant state. */\n @Prop({ reflect: true }) hasError: boolean;\n\n /**\n * Hide's the group's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n */\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n /**\n * The label that displays above all the checkboxes.\n * @localizable\n */\n @Prop({ reflect: true }) label: string;\n\n /** Determines if the component is marked as `optional`. */\n @Prop({ reflect: true }) optional: boolean;\n\n /** Determines if all the checkboxes are marked as `readonly`. */\n @Prop({ reflect: true }) readonly: boolean;\n\n /**\n * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n *\n * **Example:**\n * @snippet\n * element.value = {\n * 'checkbox-value-1': true,\n * 'checkbox-value-2': false,\n * 'checkbox-value-3': true,\n * };\n *\n * // Also accepts partial values\n * element.value = {\n * 'checkbox-value-2': false,\n * }\n */\n @Prop({ mutable: true }) value: object;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n get inputId() {\n return this._id;\n }\n\n get checkboxElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n }\n\n get protectedValue(): object {\n return this.value || {};\n }\n\n onMutationObserved = () => {\n this.updateValue();\n this.updateDisabled();\n this.updateReadonly();\n };\n\n onInnerCheckboxChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n const groupValue = {};\n setTimeout(() => {\n this.checkboxElements.forEach(check => {\n groupValue[check.value] = !!check.checked;\n });\n this.change.emit(groupValue);\n }, 0);\n };\n\n updateValue() {\n if (this.readonly) return;\n this.checkboxElements.forEach(check => {\n if (this.protectedValue.hasOwnProperty(check.value)) {\n check.checked = this.value[check.value];\n }\n });\n }\n\n updateDisabled() {\n const groupDisabled = this.disabled;\n this.checkboxElements.forEach(checkbox => {\n checkbox.groupDisabled = groupDisabled;\n });\n }\n\n updateReadonly() {\n this.checkboxElements.forEach(checkbox => {\n checkbox.readonly = this.readonly;\n });\n }\n\n ///// LIFECYCLE HOOK ///////\n\n componentWillLoad() {\n this.updateReadonly();\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n @Watch('value')\n valueObserver() {\n this.updateValue();\n }\n\n @Watch('disabled')\n disabledObserver() {\n this.updateDisabled();\n }\n\n @Watch('readonly')\n readonlyObserver() {\n this.updateReadonly();\n }\n\n /// Methods ///\n /**\n * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n *\n * @testOnly\n */\n @Method()\n setValue(values: string | string[]) {\n const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n this.checkboxElements.forEach(check => {\n if (valuesSet.has(check.value)) check.click();\n });\n }\n\n ///// HOST ELEMENT EVENTS ///////\n\n @Event() change: EventEmitter;\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail;\n }\n }\n\n render() {\n const showLabel = this.label || this.optional || this.readonly;\n return (\n <div>\n {showLabel && !this.hideLabel && <div class=\"group-legend\">{labelDOM(this)}</div>}\n <fieldset\n class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n onChange={this.onInnerCheckboxChange}\n aria-invalid={`${this.hasError}`}\n >\n {this.label || this.optional ? <legend class=\"sr-only\">{labelDOM(this)}</legend> : ''}\n {this.hasError ? (\n <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n <q2-icon\n class=\"h(4) w(4) mrg-b(2)\"\n type=\"error\"\n ></q2-icon>\n </div>\n ) : (\n ''\n )}\n {this.inputDom()}\n </fieldset>\n </div>\n );\n }\n\n inputDom() {\n return <slot />;\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAqB,oiEAC3B,MAAAC,EAAeD,E,MCcFE,EAAe,M,wDA6CxBC,KAAAC,IAAc,kBAAkBC,MAehCF,KAAAG,mBAAqB,KACjBH,KAAKI,cACLJ,KAAKK,iBACLL,KAAKM,gBAAgB,EAGzBN,KAAAO,sBAAyBC,IACrBA,EAAMC,2BACN,MAAMC,EAAa,GACnBC,YAAW,KACPX,KAAKY,iBAAiBC,SAAQC,IAC1BJ,EAAWI,EAAMC,SAAWD,EAAME,OAAO,IAE7ChB,KAAKiB,OAAOC,KAAKR,EAAW,GAC7B,EAAE,E,mKA1BT,WAAIS,GACA,OAAOnB,KAAKC,G,CAGhB,oBAAIW,GACA,OAAOQ,MAAMC,KAAKrB,KAAKsB,YAAYC,iBAAiB,e,CAGxD,kBAAIC,GACA,OAAOxB,KAAKe,OAAS,E,CAoBzB,WAAAX,GACI,GAAIJ,KAAKyB,SAAU,OACnBzB,KAAKY,iBAAiBC,SAAQC,IAC1B,GAAId,KAAKwB,eAAeE,eAAeZ,EAAMC,OAAQ,CACjDD,EAAME,QAAUhB,KAAKe,MAAMD,EAAMC,M,KAK7C,cAAAV,GACI,MAAMsB,EAAgB3B,KAAK4B,SAC3B5B,KAAKY,iBAAiBC,SAAQgB,IAC1BA,EAASF,cAAgBA,CAAa,G,CAI9C,cAAArB,GACIN,KAAKY,iBAAiBC,SAAQgB,IAC1BA,EAASJ,SAAWzB,KAAKyB,QAAQ,G,CAMzC,iBAAAK,GACI9B,KAAKM,gB,CAGT,gBAAAyB,GACI,MAAMC,EAAW,IAAIC,iBAAiBjC,KAAKG,oBAC3C6B,EAASE,QAAQlC,KAAKsB,YAAa,CAAEa,UAAW,KAAMC,QAAS,OAC/DpC,KAAKqC,iBAAmBL,EACxBhC,KAAKG,oB,CAGT,oBAAAmC,GACI,GAAItC,KAAKqC,iBAAkB,CACvBrC,KAAKqC,iBAAiBE,aACtBvC,KAAKqC,iBAAmB,I,EAKhC,aAAAG,GACIxC,KAAKI,a,CAIT,gBAAAqC,GACIzC,KAAKK,gB,CAIT,gBAAAqC,GACI1C,KAAKM,gB,CAUT,QAAAqC,CAASC,GACL,MAAMC,EAAY,IAAIC,IAAI1B,MAAM2B,QAAQH,GAAUA,EAAS,CAACA,IAC5D5C,KAAKY,iBAAiBC,SAAQC,IAC1B,GAAI+B,EAAUG,IAAIlC,EAAMC,OAAQD,EAAMmC,OAAO,G,CASrD,mBAAAC,CAAoB1C,GAChB,GAAIA,EAAM2C,SAAWnD,KAAKsB,cAAgBtB,KAAKsB,YAAY8B,SAAU,CACjEpD,KAAKe,MAAQP,EAAM6C,M,EAI3B,MAAAC,GACI,MAAMC,EAAYvD,KAAKwD,OAASxD,KAAKyD,UAAYzD,KAAKyB,SACtD,OACIiC,EAAA,OAAAC,IAAA,4CACKJ,IAAcvD,KAAK4D,WAAaF,EAAA,OAAAC,IAAA,2CAAKE,MAAM,gBAAgBC,EAAS9D,OACrE0D,EAAA,YAAAC,IAAA,2CACIE,MAAO,wBAAwB7D,KAAK+D,SAAW,YAAc,KAC7DC,SAAUhE,KAAKO,sBAAqB,eACtB,GAAGP,KAAK+D,YAErB/D,KAAKwD,OAASxD,KAAKyD,SAAWC,EAAA,UAAQG,MAAM,WAAWC,EAAS9D,OAAkB,GAClFA,KAAK+D,SACFL,EAAA,OAAKG,MAAO,wBAAwB7D,KAAKwD,OAASxD,KAAKyD,SAAW,GAAK,cACnEC,EAAA,WACIG,MAAM,qBACNI,KAAK,WAEP,GAITjE,KAAKkE,Y,CAMtB,QAAAA,GACI,OAAOR,EAAA,Y"}
|
|
@@ -1,2 +0,0 @@
|
|
|
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}.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-7c12ba02.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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.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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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as a,F as r,g as i}from"./p-a5f18e27.js";import{o as c,c as s,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(){c(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-${s()}`;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("aria-controls")===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("aria-controls")}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-${s()}`;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[aria-controls="${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 c=e===i.length-1;const{id:s,label:n,description:l,status:p}=t;const d=e+1;const v=s===r;const b=n&&`label-${s}`;const h=p==="locked";const u=n&&o(n);const f=n&&l&&`description-${s}`;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,"aria-controls":s,"aria-disabled":h?"true":null,role:"tab",tabIndex:v?0:-1,onKeyDown:t=>!h&&this.onStepKeyDown(t,s),onClick:t=>!h&&this.onStepClick(t,s)},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,c))}renderSpacer(t,e,r,i){const c=i&&!!t.children.length||!i;const s=["spacer"];if(!i)s.push("has-sibling");return c&&a("div",{class:s.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:c}=this;const{id:s,label:n,status:l}=t;const p=e+1;const d=n&&`label-${s}`;const v=s===c;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}`,"aria-controls":s,"aria-disabled":b?"true":null,role:"tab",tabIndex:v?0:-1,onKeyDown:t=>!b&&this.onStepKeyDown(t,s),onClick:t=>!b&&this.onStepClick(t,s)},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:"111b2d1fde499840f0bfc3bc7e15aa031ca48352"},a("ul",{key:"cb06c9ee1ce93cc160b07819062cf4f4010be2a7",role:"tablist"},this.structuredPanes.map(((t,e)=>this.renderStepBtn(t,e)))),a("div",{key:"993998a6cc4bedb69065f318c59c729896671947"},a("slot",{key:"12527fc15e44c8ca0c189e797a9e3694143789d0"})))}get hostElement(){return i(this)}static get watchers(){return{currentStepId:["currentStepChanged"]}}};d.style=p;export{d as q2_stepper_vertical};
|
|
2
|
-
//# sourceMappingURL=p-a977e723.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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(\n btn => btn.getAttribute('aria-controls') === currentStepId\n );\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('aria-controls');\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[aria-controls=\"${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 aria-controls={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 aria-controls={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>\n <slot />\n </div>\n </Fragment>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,g as n}from"./p-a5f18e27.js";import{n as a,o,i as s,l as r}from"./p-42302f6f.js";const c="*{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{text-align:right;display:block;width:100%}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}";const d=c;const l=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.handlePageChange=t=>{const{totalPages:e,inputField:i}=this;if(t<1){t=1}else if(t>e){t=e}if(i.value!==`${t}`)i.value=`${t}`;if(!this.hostElement.onchange){this.page=t}this.change.emit({page:t})};this.checkSize=()=>{const{hostElement:t,containerElement:e}=this;const i=this.containerWidth>t.clientWidth;this.isSmall=i;if(i)return;a((()=>{const t=this.containerWidth===e.clientWidth;if(t)return;this.containerWidth=e.clientWidth;this.checkSize()}))};this.autoSize=true;this.total=undefined;this.page=undefined;this.pages=undefined;this.pagesOnly=undefined;this.perPage=undefined;this.recordsOnly=undefined;this.recordType=undefined;this.isSmall=undefined}componentWillLoad(){this.manageResizeObserver()}componentDidLoad(){this.containerWidth=this.containerElement.clientWidth;o(this.hostElement)}disconnectedCallback(){this.removeResizeObserver()}manageResizeObserver(){if(this.autoSize&&!this.recordsOnly&&!this.pagesOnly){if(this.resizeObserver)return;this.resizeObserver=new ResizeObserver((()=>this.checkSize()));this.resizeObserver.observe(this.hostElement);window.addEventListener("resize",this.checkSize)}else{this.isSmall=false;this.removeResizeObserver()}}onHostElementFocus(t){var e;if(!s(t,this.hostElement))return;const{isFullViewHidden:i,containerElement:n,inputField:a}=this;if(i){(e=n.querySelector("q2-btn:not([disabled])"))===null||e===void 0?void 0:e.focus()}else{a.focus()}}get isFullViewHidden(){return this.isSmall||this.recordsOnly||this.pagesOnly}get pageWithDefault(){return this.page||1}get perPageWithDefault(){return this.perPage||10}get totalWithDefault(){return this.total||0}get recordTypeWithDefault(){return this.recordType||r("tecton.element.pagination.defaultRecordType")}get currentRange(){const{perPageWithDefault:t,totalWithDefault:e,pageWithDefault:i}=this;const n=(i-1)*t+1;const a=Math.min(i*t,e);return`${n} - ${a}`}get nextRange(){const{perPageWithDefault:t,totalWithDefault:e,pageWithDefault:i}=this;const n=i*t+1;const a=Math.min((i+1)*t,e);return`${n} - ${a}`}get prevRange(){const{perPageWithDefault:t,pageWithDefault:e}=this;const i=Math.max(1,(e-2)*t+1);const n=(e-1)*t;return`${i} - ${n}`}get totalPages(){const{pagesOnly:t,totalWithDefault:e,perPageWithDefault:i,pages:n}=this;if(t&&n&&!isNaN(parseInt(`${n}`)))return n;return Math.ceil(e/i)}removeResizeObserver(){var t;if(this.resizeObserver){(t=this.resizeObserver)===null||t===void 0?void 0:t.unobserve(this.hostElement);this.resizeObserver=null;window.removeEventListener("resize",this.checkSize)}}render(){const{pagesOnly:t,recordsOnly:e,isFullViewHidden:n,recordTypeWithDefault:a,totalPages:o,totalWithDefault:s,pageWithDefault:c,currentRange:d,nextRange:l,prevRange:h}=this;const p=c===1;const g=c===o;let u="";let f="";if(t){f=r("tecton.element.pagination.goToPages",{next:c-1,total:o});u=r("tecton.element.pagination.goToPages",{next:c+1,total:o})}else if(e){f=r("tecton.element.pagination.goToRecords",{range:h,recordType:a.toLowerCase(),total:s});u=r("tecton.element.pagination.goToRecords",{range:l,recordType:a.toLowerCase(),total:s})}return i("nav",{key:"74561394c7bdb496d306e959ad5b1e5361e42ec7",class:"container",ref:t=>this.containerElement=t,"aria-label":r("tecton.element.pagination.title")},i("div",{key:"2500a292e1823d4d24136be40a4fa4f9346bc9c8",class:"description","test-id":"description"},t?r("tecton.element.pagination.pages",{current:c,total:o}):r("tecton.element.pagination.description",{range:d,recordType:a.toLowerCase(),total:s.toLocaleString()})),i("div",{key:"653ee492dfd5b7e80d8d1e1eb680364cbdb13f17",class:"btn-group"},i("q2-btn",{key:"512e60ac934efaa54a87862ab81677956d80c7dc",label:r("tecton.element.pagination.goToFirstPage"),disabled:p,hidden:n,onClick:()=>this.handlePageChange(1),"test-id":"firstPageBtn","hide-label":true},i("q2-icon",{key:"7c0c57fbb28c7221467457ced6e2f196f5c0c41a",type:"chevron-double-left"})),i("q2-btn",{key:"5a3ad7135ac650be29b2dcbd0f4e2dd1e0303a14",label:f,disabled:p,onClick:()=>this.handlePageChange(c-1),"test-id":"prevPageBtn","hide-label":true},i("q2-icon",{key:"9955d71cb14f809d7794022aff67c4403dd59e0c",type:"chevron-left"}))),i("div",{key:"b7bbe334d869c527093f50b61419cd680dad7205",class:"controls",hidden:n,"test-id":"controls"},i("span",{key:"778f9842501854d5427f481e02924b2f967f8ec7","aria-hidden":"true"},r("tecton.element.pagination.page")),i("div",{key:"2761c3e8acd7150aba435d86c545e0903482163d",class:"input-wrapper",onClick:()=>this.inputField.dispatchEvent(new FocusEvent("focus"))},i("q2-input",{key:"00e1cfc6c391311920928694844875715ed2fd97",type:"number",value:`${c}`,min:1,max:this.totalPages,hideLabel:true,optional:true,label:`${r("tecton.element.pagination.page")} (${r("tecton.element.pagination.ofPages",[o.toLocaleString()])})`,onChange:t=>this.handlePageChange(t.detail.value),"test-id":"pageInput",current:"page",ref:t=>this.inputField=t})),i("span",{key:"f14e720d12dcf4deb0b1ccf1b290f8ef1b3f9dab","aria-hidden":"true"},r("tecton.element.pagination.ofPages",[o.toLocaleString()]))),i("div",{key:"6acb2c32ca833bdd68fe0e09cee75df7c8abaae3",class:"btn-group"},i("q2-btn",{key:"0ac42aecaf056348a8c2e2729d1e35e7db44750b",label:u,disabled:g,onClick:()=>this.handlePageChange(c+1),"test-id":"nextPageBtn","hide-label":true},i("q2-icon",{key:"f1c87ff1bc99dc529a2e5efdaad614f1b1c4b520",type:"chevron-right"})),i("q2-btn",{key:"2f6d47cc2805f3e9e3215448e5c6ca0909b7ad80",label:"tecton.element.pagination.goToLastPage",disabled:g,hidden:n,onClick:()=>this.handlePageChange(o),"test-id":"lastPageBtn","hide-label":true},i("q2-icon",{key:"88a16778a20430935b7cc5d23393897f426d4548",type:"chevron-double-right"}))))}get hostElement(){return n(this)}static get watchers(){return{recordsOnly:["manageResizeObserver"],pagesOnly:["manageResizeObserver"],autoSize:["manageResizeObserver"]}}};l.style=d;export{l as q2_pagination};
|
|
2
|
-
//# sourceMappingURL=p-b3d10d52.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["q2PaginationCss","Q2PaginationStyle0","Q2Pagination","this","handlePageChange","page","totalPages","inputField","value","hostElement","onchange","change","emit","checkSize","containerElement","isOverflowing","containerWidth","clientWidth","isSmall","nextPaint","containerWidthHasNotChanged","componentWillLoad","manageResizeObserver","componentDidLoad","overrideFocus","disconnectedCallback","removeResizeObserver","autoSize","recordsOnly","pagesOnly","resizeObserver","ResizeObserver","observe","window","addEventListener","onHostElementFocus","event","isEventFromElement","isFullViewHidden","_a","querySelector","focus","pageWithDefault","perPageWithDefault","perPage","totalWithDefault","total","recordTypeWithDefault","recordType","loc","currentRange","start","end","Math","min","nextRange","prevRange","max","pages","isNaN","parseInt","ceil","unobserve","removeEventListener","render","onFirstPage","onLastPage","nextButtonLabel","prevButtonLabel","next","range","toLowerCase","h","key","class","ref","el","current","toLocaleString","label","disabled","hidden","onClick","type","dispatchEvent","FocusEvent","hideLabel","optional","onChange","detail"],"sources":["src/components/q2-pagination/q2-pagination.scss?tag=q2-pagination&encapsulation=shadow","src/components/q2-pagination/q2-pagination.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n text-align: right;\n display: block;\n width: 100%;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.container {\n display: inline-flex;\n column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n align-items: center;\n height: var-list(var-prefixer(pagination-height), 44px);\n}\n\n.btn-group {\n display: flex;\n gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n white-space: nowrap;\n}\n\n.controls {\n display: grid;\n grid-template-columns: auto 50px auto;\n align-items: center;\n gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n &[hidden] {\n display: none;\n }\n}\n\n.input-wrapper {\n height: var-list(var-prefixer(pagination-height), 44px);\n display: flex;\n align-items: center;\n}\n\nq2-btn {\n --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n}\n\nq2-icon {\n --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n --tct-input-margin-top: 0;\n --tct-input-margin-bottom: 0;\n --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n --tct-input-min-height: var(--tct-input-height);\n --tct-input-align: center;\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Watch,\n Listen,\n Element,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-pagination', shadow: true, styleUrl: 'q2-pagination.scss' })\nexport class Q2Pagination implements ComponentInterface {\n /** Determines whether the component uses the dynamic resizing behavior. */\n @Prop({ reflect: true, mutable: true }) autoSize: boolean = true;\n\n /** The total number of records to paginate. */\n @Prop({ reflect: true }) total: number;\n\n /** The current page that is being displayed. */\n @Prop({ reflect: true, mutable: true }) page: number;\n\n /**\n * The number of pages that can be displayed.\n * @info\n * Only referenced when `pagesOnly` is true.\n */\n @Prop({ reflect: true, mutable: true }) pages: number;\n\n /** Indicates to only display the current and total pages. */\n @Prop({ reflect: true, mutable: true }) pagesOnly: boolean;\n\n /** The total number of records displayed on each page. */\n @Prop() perPage: number;\n\n /** Indicates to only display the current and total records. */\n @Prop({ reflect: true, mutable: true }) recordsOnly: boolean;\n\n /** Description of the record type to be displayed alongside the record count. */\n @Prop() recordType: string;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the page is changed.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{ page: number }>;\n\n @State() isSmall: boolean;\n\n inputField: HTMLQ2InputElement;\n containerElement: HTMLElement;\n containerWidth: number;\n resizeObserver: ResizeObserver;\n\n ////////// LIFECYCLE HOOKS ////////\n componentWillLoad(): void {\n this.manageResizeObserver();\n }\n\n componentDidLoad(): void {\n this.containerWidth = this.containerElement.clientWidth;\n\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n this.removeResizeObserver();\n }\n\n ///////// OBSERVERS /////////\n\n @Watch('recordsOnly')\n @Watch('pagesOnly')\n @Watch('autoSize')\n manageResizeObserver() {\n if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\n if (this.resizeObserver) return;\n this.resizeObserver = new ResizeObserver(() => this.checkSize());\n this.resizeObserver.observe(this.hostElement);\n window.addEventListener('resize', this.checkSize);\n } else {\n this.isSmall = false;\n this.removeResizeObserver();\n }\n }\n\n ///////// HOST ELEMENT EVENTS /////////\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const { isFullViewHidden, containerElement, inputField } = this;\n if (isFullViewHidden) {\n containerElement.querySelector<HTMLElement>('q2-btn:not([disabled])')?.focus();\n } else {\n inputField.focus();\n }\n }\n\n ///////// GETTERS /////////\n\n get isFullViewHidden() {\n return this.isSmall || this.recordsOnly || this.pagesOnly;\n }\n\n get pageWithDefault() {\n return this.page || 1;\n }\n\n get perPageWithDefault() {\n return this.perPage || 10;\n }\n\n get totalWithDefault() {\n return this.total || 0;\n }\n\n get recordTypeWithDefault() {\n return this.recordType || loc('tecton.element.pagination.defaultRecordType');\n }\n\n get currentRange() {\n const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n const start = (page - 1) * perPage + 1;\n const end = Math.min(page * perPage, total);\n return `${start} - ${end}`;\n }\n\n get nextRange() {\n const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n const start = page * perPage + 1;\n const end = Math.min((page + 1) * perPage, total);\n return `${start} - ${end}`;\n }\n\n get prevRange() {\n const { perPageWithDefault: perPage, pageWithDefault: page } = this;\n const start = Math.max(1, (page - 2) * perPage + 1);\n const end = (page - 1) * perPage;\n return `${start} - ${end}`;\n }\n\n get totalPages() {\n const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;\n\n if (pagesOnly && pages && !isNaN(parseInt(`${pages}`))) return pages;\n\n return Math.ceil(total / perPage);\n }\n\n ///////// HELPERS /////////\n\n removeResizeObserver() {\n if (this.resizeObserver) {\n this.resizeObserver?.unobserve(this.hostElement);\n this.resizeObserver = null;\n window.removeEventListener('resize', this.checkSize);\n }\n }\n\n handlePageChange = (page: number) => {\n const { totalPages, inputField } = this;\n if (page < 1) {\n page = 1;\n } else if (page > totalPages) {\n page = totalPages;\n }\n\n if (inputField.value !== `${page}`) inputField.value = `${page}`;\n\n if (!this.hostElement.onchange) {\n this.page = page;\n }\n\n this.change.emit({ page });\n };\n\n checkSize = () => {\n const { hostElement, containerElement } = this;\n const isOverflowing = this.containerWidth > hostElement.clientWidth;\n this.isSmall = isOverflowing;\n if (isOverflowing) return;\n\n nextPaint(() => {\n const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;\n if (containerWidthHasNotChanged) return;\n this.containerWidth = containerElement.clientWidth;\n this.checkSize();\n });\n };\n\n render() {\n const {\n pagesOnly,\n recordsOnly,\n isFullViewHidden,\n recordTypeWithDefault: recordType,\n totalPages,\n totalWithDefault: total,\n pageWithDefault: page,\n currentRange,\n nextRange,\n prevRange,\n } = this;\n const onFirstPage = page === 1;\n const onLastPage = page === totalPages;\n\n let nextButtonLabel: string = '';\n let prevButtonLabel: string = '';\n if (pagesOnly) {\n prevButtonLabel = loc('tecton.element.pagination.goToPages', { next: page - 1, total: totalPages });\n nextButtonLabel = loc('tecton.element.pagination.goToPages', { next: page + 1, total: totalPages });\n } else if (recordsOnly) {\n prevButtonLabel = loc('tecton.element.pagination.goToRecords', {\n range: prevRange,\n recordType: recordType.toLowerCase(),\n total,\n });\n nextButtonLabel = loc('tecton.element.pagination.goToRecords', {\n range: nextRange,\n recordType: recordType.toLowerCase(),\n total,\n });\n }\n\n return (\n <nav\n class=\"container\"\n ref={el => (this.containerElement = el)}\n aria-label={loc('tecton.element.pagination.title')}\n >\n <div\n class=\"description\"\n test-id=\"description\"\n >\n {pagesOnly\n ? loc('tecton.element.pagination.pages', {\n current: page,\n total: totalPages,\n })\n : loc('tecton.element.pagination.description', {\n range: currentRange,\n recordType: recordType.toLowerCase(),\n total: total.toLocaleString(),\n })}\n </div>\n <div class=\"btn-group\">\n <q2-btn\n label={loc('tecton.element.pagination.goToFirstPage')}\n disabled={onFirstPage}\n hidden={isFullViewHidden}\n onClick={() => this.handlePageChange(1)}\n test-id=\"firstPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-double-left\" />\n </q2-btn>\n <q2-btn\n label={prevButtonLabel}\n disabled={onFirstPage}\n onClick={() => this.handlePageChange(page - 1)}\n test-id=\"prevPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-left\" />\n </q2-btn>\n </div>\n <div\n class=\"controls\"\n hidden={isFullViewHidden}\n test-id=\"controls\"\n >\n <span aria-hidden=\"true\">{loc('tecton.element.pagination.page')}</span>\n <div\n class=\"input-wrapper\"\n onClick={() => this.inputField.dispatchEvent(new FocusEvent('focus'))}\n >\n <q2-input\n type=\"number\"\n value={`${page}`}\n min={1}\n max={this.totalPages}\n hideLabel\n optional\n label={`${loc('tecton.element.pagination.page')} (${loc(\n 'tecton.element.pagination.ofPages',\n [totalPages.toLocaleString()]\n )})`}\n onChange={event => this.handlePageChange(event.detail.value)}\n test-id=\"pageInput\"\n current=\"page\"\n ref={el => (this.inputField = el)}\n ></q2-input>\n </div>\n <span aria-hidden=\"true\">\n {loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])}\n </span>\n </div>\n <div class=\"btn-group\">\n <q2-btn\n label={nextButtonLabel}\n disabled={onLastPage}\n onClick={() => this.handlePageChange(page + 1)}\n test-id=\"nextPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-right\" />\n </q2-btn>\n <q2-btn\n label=\"tecton.element.pagination.goToLastPage\"\n disabled={onLastPage}\n hidden={isFullViewHidden}\n onClick={() => this.handlePageChange(totalPages)}\n test-id=\"lastPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-double-right\" />\n </q2-btn>\n </div>\n </nav>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as a,h as t,H as r,g as o}from"./p-a5f18e27.js";import{l as n}from"./p-42302f6f.js";const s="*{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}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content{box-shadow:none;border:0;border-radius:0;padding:0}";const i=s;const c=class{constructor(t){e(this,t);this.clickCarouselPane=a(this,"clickCarouselPane",7);this.generatePaneClass=e=>`q2-carousel-pane swiper-slide q2-carousel-pane-${e}`;this.paneClicked=e=>{if(this.isActivePane)return;e.preventDefault();this.clickCarouselPane.emit({paneIndex:this.index,pane:this.hostElement})};this.index=undefined;this.siblingCount=undefined;this.isActivePane=undefined;this.label=undefined;this.slotFrameless=undefined}get currentPaneIndex(){return Array.prototype.indexOf.call(this.hostElement.parentElement.children,this.hostElement)}componentDidLoad(){this.determineDisabledContent()}determineDisabledContent(){const{isActivePane:e}=this;const a=this.hostElement.querySelectorAll('q2-btn, q2-dropdown, a[href], button, [tabindex]:not([tabindex="-1"])');a.forEach((a=>{const t=a.hasAttribute("tabindex")&&parseInt(a.getAttribute("tabindex"))>=0;if(t){a.setAttribute("data-q2-tabindex",`${a.tabIndex}`)}if(e){if(a.hasAttribute("data-q2-tabindex")){a.tabIndex=parseInt(a.getAttribute("data-q2-tabindex"));a.removeAttribute("data-q2-tabindex")}else if(a.tagName.startsWith("Q2-")){a.tabIndex=undefined}else{a.removeAttribute("tabindex")}}else{a.tabIndex=-1}}))}render(){const{label:e}=this;return t(r,{key:"3408598713aeea60c644c3ea0750f0dce2d40ca9",class:this.generatePaneClass(this.currentPaneIndex),tabIndex:this.isActivePane?0:-1,role:"group","aria-roledescription":"slide","aria-hidden":this.isActivePane?undefined:"true","aria-label":e?n(e):n("tecton.element.carousel.itemDescription",[(this.currentPaneIndex+1).toString(),(this.siblingCount||0).toString()]),onClick:this.paneClicked},t("article",{key:"a03a7125b958195b21d731f9cbeebdb1c8f9a0b3",class:"q2-carousel-pane-main-content"},t("slot",{key:"c07f1d5fc75a902a6f9741e746279bad8c094a13"})))}get hostElement(){return o(this)}static get watchers(){return{isActivePane:["determineDisabledContent"]}}};c.style=i;export{c as q2_carousel_pane};
|
|
2
|
-
//# sourceMappingURL=p-b7d5fd12.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["q2CarouselPaneCss","Q2CarouselPaneStyle0","Q2CarouselPane","this","generatePaneClass","currentIndex","paneClicked","event","isActivePane","preventDefault","clickCarouselPane","emit","paneIndex","index","pane","hostElement","currentPaneIndex","Array","prototype","indexOf","call","parentElement","children","componentDidLoad","determineDisabledContent","focusableElements","querySelectorAll","forEach","element","hasValidTabIndex","hasAttribute","parseInt","getAttribute","setAttribute","tabIndex","removeAttribute","tagName","startsWith","undefined","render","label","h","Host","key","class","role","loc","toString","siblingCount","onClick"],"sources":["src/components/q2-carousel-pane/q2-carousel-pane.scss?tag=q2-carousel-pane","src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\nq2-carousel .swiper-slide {\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n position: relative;\n transition-property: transform;\n transition: all 0.2s;\n}\n\nq2-carousel-pane.q2-carousel-pane {\n --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote('0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25))'))};\n\n cursor: grab;\n\n &:not([is-active-pane]) * {\n cursor: pointer;\n }\n\n &:focus {\n box-shadow: none;\n .q2-carousel-pane-main-content {\n outline: none;\n box-shadow: var(--const-double-focus-ring);\n }\n }\n\n button {\n border: 0;\n background: transparent;\n transition: all 0.2s;\n opacity: 0.3;\n cursor: pointer;\n\n &:hover {\n opacity: 0.7;\n }\n }\n\n .q2-carousel-pane-main-content {\n box-shadow: var(--comp-carousel-shadow);\n transition: var(--comp-carousel-pane-tween);\n background: var-list(\n --tct-carousel-background,\n var-prefixer(carousel-background-color),\n --tct-white,\n --app-white,\n #ffffff\n );\n border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n var-list(\n var-prefixer(carousel-pane-border-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n padding: var-list(var-prefixer(carousel-pane-padding), 7px);\n height: var-list(var-prefixer(carousel-pane-height), 10em);\n }\n\n .q2-carousel-pane-main-content:hover {\n box-shadow: var(--const-double-focus-ring), var(--comp-carousel-shadow);\n }\n &[slot-frameless]:not([slot-frameless='false']) {\n .q2-carousel-pane-main-content {\n box-shadow: none;\n border: 0;\n border-radius: 0;\n padding: 0;\n }\n }\n}\n","import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n /**\n * Used by q2-carousel to determine the pane's index.\n * @private\n */\n @Prop({ reflect: false }) index: number;\n\n /**\n * Used by q2-carousel to indicate how many panes are in the carousel.\n * @private\n */\n @Prop({ reflect: false }) siblingCount: number;\n\n /**\n * Used by `q2-carousel` to indicate which pane is currently active.\n * @private\n */\n @Prop({ reflect: true }) isActivePane: boolean;\n\n /**\n * Text used only as an `aria-label` for accessibility purposes.\n * @localizable\n */\n @Prop({ reflect: true }) label: string;\n\n /**\n * Used by `q2-carousel` to indicate the pane should be frameless\n * @private\n */\n @Prop({ reflect: true }) slotFrameless: boolean;\n\n @Element() hostElement: HTMLElement;\n\n get currentPaneIndex() {\n return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n }\n\n componentDidLoad(): void {\n this.determineDisabledContent();\n }\n\n generatePaneClass = (currentIndex: number) => {\n return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n };\n\n /**\n * Emitted when the pane is clicked.\n */\n @Event() clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n paneClicked = event => {\n if (this.isActivePane) return;\n event.preventDefault();\n this.clickCarouselPane.emit({\n paneIndex: this.index,\n pane: this.hostElement,\n });\n };\n\n @Watch('isActivePane')\n determineDisabledContent() {\n const { isActivePane } = this;\n const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n 'q2-btn, q2-dropdown, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n );\n\n focusableElements.forEach(element => {\n const hasValidTabIndex =\n element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n if (hasValidTabIndex) {\n element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);\n }\n\n if (isActivePane) {\n if (element.hasAttribute('data-q2-tabindex')) {\n element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n element.removeAttribute('data-q2-tabindex');\n } else if (element.tagName.startsWith('Q2-')) {\n element.tabIndex = undefined;\n } else {\n element.removeAttribute('tabindex');\n }\n } else {\n element.tabIndex = -1;\n }\n });\n }\n\n render() {\n const { label } = this;\n\n return (\n <Host\n class={this.generatePaneClass(this.currentPaneIndex)}\n tabIndex={this.isActivePane ? 0 : -1}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-hidden={this.isActivePane ? undefined : 'true'}\n aria-label={\n label\n ? loc(label)\n : loc('tecton.element.carousel.itemDescription', [\n (this.currentPaneIndex + 1).toString(),\n (this.siblingCount || 0).toString(),\n ])\n }\n onClick={this.paneClicked}\n >\n <article class=\"q2-carousel-pane-main-content\">\n <slot></slot>\n </article>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAoB,sgFAC1B,MAAAC,EAAeD,E,MCGFE,EAAc,M,8EAyCvBC,KAAAC,kBAAqBC,GACV,kDAAkDA,IAQ7DF,KAAAG,YAAcC,IACV,GAAIJ,KAAKK,aAAc,OACvBD,EAAME,iBACNN,KAAKO,kBAAkBC,KAAK,CACxBC,UAAWT,KAAKU,MAChBC,KAAMX,KAAKY,aACb,E,+HAvBN,oBAAIC,GACA,OAAOC,MAAMC,UAAUC,QAAQC,KAAKjB,KAAKY,YAAYM,cAAcC,SAAUnB,KAAKY,Y,CAGtF,gBAAAQ,GACIpB,KAAKqB,0B,CAsBT,wBAAAA,GACI,MAAMhB,aAAEA,GAAiBL,KACzB,MAAMsB,EAAoBtB,KAAKY,YAAYW,iBACvC,yEAGJD,EAAkBE,SAAQC,IACtB,MAAMC,EACFD,EAAQE,aAAa,aAAeC,SAASH,EAAQI,aAAa,cAAgB,EAEtF,GAAIH,EAAkB,CAClBD,EAAQK,aAAa,mBAAoB,GAAGL,EAAQM,W,CAGxD,GAAI1B,EAAc,CACd,GAAIoB,EAAQE,aAAa,oBAAqB,CAC1CF,EAAQM,SAAWH,SAASH,EAAQI,aAAa,qBACjDJ,EAAQO,gBAAgB,mB,MACrB,GAAIP,EAAQQ,QAAQC,WAAW,OAAQ,CAC1CT,EAAQM,SAAWI,S,KAChB,CACHV,EAAQO,gBAAgB,W,MAEzB,CACHP,EAAQM,UAAY,C,KAKhC,MAAAK,GACI,MAAMC,MAAEA,GAAUrC,KAElB,OACIsC,EAACC,EAAI,CAAAC,IAAA,2CACDC,MAAOzC,KAAKC,kBAAkBD,KAAKa,kBACnCkB,SAAU/B,KAAKK,aAAe,GAAK,EACnCqC,KAAK,QAAO,uBACS,QAAO,cACf1C,KAAKK,aAAe8B,UAAY,OAAM,aAE/CE,EACMM,EAAIN,GACJM,EAAI,0CAA2C,EAC1C3C,KAAKa,iBAAmB,GAAG+B,YAC3B5C,KAAK6C,cAAgB,GAAGD,aAGvCE,QAAS9C,KAAKG,aAEdmC,EAAA,WAAAE,IAAA,2CAASC,MAAM,iCACXH,EAAA,QAAAE,IAAA,8C"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","focusToggle","controlElement","shadowRoot","querySelector","focus","openDropdown","open","closeDropdown","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","onToggleClick","onToggleKeydown","includes","key","preventDefault","focusLastItem","focusFirstItem","onDropdownMenuClick","async","item","disabled","separator","waitForNextPaint","onDropdownMenuKeydown","focusAdjacentItem","resolveMenu","name","window","TectonElements","contextValue","resolvedType","additionalContext","orchestrateResolvedMenuItems","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","hostElement","appendChild","catch","err","resolvedElements","querySelectorAll","removeChild","datas","map","menuItemData","onClickFn","queryParams","contextIdParamName","action","navigateTo","featureName","moduleName","showOverpanel","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","innerHTML","onclick","_b","_a","call","overpanelPath","params","undefined","hasCustomButton","determineDropdownItemCount","length","toggleButtonProps","allowedIntents","allowedTypes","type","icon","fab","custom","intent","active","ariaExpanded","className","popDirectionHandler","handleRenamedProp","alignmentHandler","ariaLabelHandler","handleAriaLabel","nameHandler","contextHandler","contextValueHandler","resolvedTypeHandler","additionalContextHandler","delegateFocus","isEventFromElement","popoverStateHandler","detail","scrollContainerTo","top","componentWillLoad","componentDidLoad","overrideFocus","firstItem","dispatchEvent","FocusEvent","lastItem","activeItem","direction","dropdownItems","Array","from","activeIndex","indexOf","targetIndex","targetItem","Event","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","minHeight","popoverMinHeight","popoverDirection","align","popoverAlignment","mode","popoverMode","onFocus"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-flex;\n}\n\n:host([block]) {\n display: block;\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n\nq2-popover {\n --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { Component, ComponentInterface, Prop, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n handleAriaLabel,\n handleRenamedProp,\n isEventFromElement,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n @Prop({ reflect: true }) additionalContext: string;\n\n /** If `true`, component expands to fill the width of its parent element. */\n @Prop({ reflect: true }) block: boolean;\n\n /**\n * Tells the outlet what the type of object being passed in as contextValue.\n * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n *\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true }) context: string;\n\n /**\n * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n *\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true }) contextValue: string;\n\n /** Indicates the menu cannot be focused or interacted with. */\n @Prop({ reflect: true }) disabled: boolean;\n\n /**\n * Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n */\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n @Prop({ reflect: true }) icon: string;\n\n /**\n * The text that appears within the button.\n * @warning\n * This property should not be used if the `type` is `icon`.\n * @localizable\n */\n @Prop({ reflect: true, mutable: true }) label: string;\n\n /**\n * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true }) name: string;\n\n /** Determine whether the popover is open or closed. */\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /**\n * Force the direction of the popover dropdown when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n */\n @Prop({ mutable: true }) popoverDirection: 'up' | 'down';\n\n /** Aligns the popover dropdown to the left or right side of the input field. */\n @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n /**\n * Determines the display mode of the popover.\n *\n * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n *\n * @info\n * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n * when nested inside of elements with transform properties. This will be removed once the popover API is available\n * for use.\n */\n @Prop({ mutable: true }) popoverMode: 'legacy' = null;\n\n /** @deprecated */\n @Prop() popoverMinHeight: number = 150;\n\n /**\n * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true }) resolvedType: string;\n\n /** The type of button used as the menu toggle. */\n @Prop({ reflect: true }) type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n /** @deprecated */\n @Prop({ reflect: true }) alignment: 'left' | 'right';\n\n /** @deprecated */\n @Prop({ reflect: true }) popDirection: 'up' | 'down';\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n privatePopDirection: 'down' | 'up';\n controlElement?: HTMLQ2BtnElement;\n popoverElement?: HTMLQ2PopoverElement;\n dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n\n resolveMenu() {\n return (\n this.name &&\n window.TectonElements &&\n window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n );\n }\n\n orchestrateResolvedMenuItems() {\n if (!this.name || !this.context) {\n // this is only for contextual menu outlets\n this.removeResolvedElements();\n return;\n }\n\n this.resolveMenuItemElements()\n .then(data => {\n this.removeResolvedElements();\n data.forEach(element => {\n this.hostElement.appendChild(element);\n });\n })\n .catch(err => {\n this.removeResolvedElements();\n throw err;\n });\n }\n\n removeResolvedElements() {\n const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n resolvedElements.forEach(element => this.hostElement.removeChild(element));\n }\n\n resolveMenuItemElements() {\n return this.resolveMenu().then(datas => {\n return datas.map(menuItemData => {\n let onClickFn;\n let queryParams;\n if (menuItemData['tct-ctxid']) {\n queryParams = {};\n queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n }\n\n switch (menuItemData.action) {\n case 'navigateTo':\n onClickFn = () =>\n this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n break;\n case 'showOverpanel':\n onClickFn = () =>\n this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n break;\n }\n\n const newDropdownItem = document.createElement('q2-dropdown-item');\n newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n newDropdownItem.classList.add('resolved-menu-item');\n newDropdownItem.innerHTML = menuItemData.itemLabel;\n newDropdownItem.onclick = onClickFn;\n\n return newDropdownItem;\n });\n });\n }\n\n navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n }\n\n showOverpanel(overpanelPath: string, params: IDict<string>) {\n return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n }\n\n get hasCustomButton() {\n return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');\n }\n\n get determineDropdownItemCount() {\n return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n }\n\n get toggleButtonProps() {\n const allowedIntents = ['primary', 'secondary', 'neutral'];\n const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n const type = allowedTypes.includes(this.type) ? this.type : '';\n const icon = type === 'icon';\n const fab = type === 'fab';\n const custom = type === 'custom';\n let intent;\n if (allowedIntents.includes(type)) {\n intent = type === 'neutral' ? type : `workflow-${type}`;\n }\n const active = this.open;\n const disabled = !!this.disabled;\n const ariaExpanded = this.open;\n const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n return {\n icon,\n fab,\n intent,\n active,\n disabled,\n ariaExpanded,\n className,\n custom,\n };\n }\n\n //////// Observers //////////\n @Watch('popDirection')\n popDirectionHandler() {\n handleRenamedProp(this, 'popDirection', 'popoverDirection');\n }\n\n @Watch('alignment')\n alignmentHandler() {\n handleRenamedProp(this, 'alignment', 'popoverAlignment');\n }\n\n @Watch('ariaLabel')\n ariaLabelHandler() {\n handleAriaLabel(this);\n }\n\n @Watch('name')\n nameHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('context')\n contextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('contextValue')\n contextValueHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('resolvedType')\n resolvedTypeHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('additionalContext')\n additionalContextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusToggle();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n this.popoverElement?.scrollContainerTo({ top: 0 });\n }\n\n ///// Lifecycle Hooks ////////\n componentWillLoad() {\n this.popDirectionHandler();\n this.alignmentHandler();\n this.ariaLabelHandler();\n }\n\n componentDidLoad() {\n this.orchestrateResolvedMenuItems();\n overrideFocus(this.hostElement);\n }\n\n ///// Actions ////////\n focusToggle = () => {\n this.controlElement.shadowRoot.querySelector<HTMLButtonElement>('button').focus();\n };\n\n openDropdown = () => {\n if (this.open) return;\n this.open = true;\n };\n\n closeDropdown = () => {\n if (!this.open) return;\n this.open = false;\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n onToggleClick = () => {\n if (this.open) {\n this.closeDropdown();\n } else {\n this.openDropdown();\n }\n };\n\n onToggleKeydown = (event: KeyboardEvent) => {\n if (['ArrowUp', 'Up'].includes(event.key)) {\n event.preventDefault();\n this.openDropdown();\n this.focusLastItem();\n return;\n }\n\n if (['ArrowDown', 'Down'].includes(event.key)) {\n event.preventDefault();\n this.openDropdown();\n this.focusFirstItem();\n return;\n }\n\n if (['Escape', 'Esc'].includes(event.key)) {\n event.preventDefault();\n this.focusToggle();\n this.closeDropdown();\n return;\n }\n };\n\n onDropdownMenuClick = async (event: MouseEvent | CustomEvent) => {\n if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n return;\n }\n const item = event.target as HTMLQ2DropdownItemElement;\n if (!item.disabled && !item.separator) {\n this.closeDropdown();\n await waitForNextPaint();\n this.focusToggle();\n }\n };\n\n focusFirstItem() {\n const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:first-child`\n );\n\n firstItem?.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusLastItem() {\n const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:last-child`\n );\n lastItem?.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n this.hostElement.querySelectorAll(this.dropdownItemSelector)\n );\n\n const activeIndex = dropdownItems.indexOf(activeItem);\n\n if (activeIndex === -1) {\n return;\n }\n\n let targetIndex: number = 0;\n if (direction === 'next') {\n targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n } else if (direction === 'prev') {\n if (activeIndex > 0) {\n targetIndex = activeIndex - 1;\n } else {\n targetIndex = dropdownItems.length - 1;\n }\n }\n const targetItem = dropdownItems[targetIndex];\n targetItem && targetItem.dispatchEvent(new Event('focus'));\n }\n\n onDropdownMenuKeydown = (event: KeyboardEvent) => {\n if (['Escape', 'Esc'].includes(event.key)) {\n this.closeDropdown();\n this.focusToggle();\n return;\n }\n\n if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n return;\n }\n\n const item = event.target as HTMLQ2DropdownItemElement;\n if (['ArrowUp', 'Up'].includes(event.key)) {\n event.preventDefault();\n this.focusAdjacentItem(item, 'prev');\n return;\n }\n\n if (['ArrowDown', 'Down'].includes(event.key)) {\n event.preventDefault();\n this.focusAdjacentItem(item, 'next');\n return;\n }\n if (event.key === 'Tab') {\n event.preventDefault();\n }\n };\n\n /// DOM ///\n\n render() {\n const btnProps = this.toggleButtonProps;\n\n return (\n <click-elsewhere\n class={this.open ? 'dropdown-open' : ''}\n onChange={this.onClickElsewhere}\n test-id=\"dropdownContainer\"\n >\n <q2-btn\n ref={el => (this.controlElement = el)}\n class={btnProps.className}\n onClick={this.onToggleClick}\n onKeyDown={this.onToggleKeydown}\n fab={btnProps.fab}\n intent={btnProps.intent}\n active={btnProps.active}\n disabled={btnProps.disabled}\n ariaExpanded={`${!!btnProps.ariaExpanded}`}\n label={this.hideLabel && this.label ? loc(this.label) : undefined}\n hideLabel={this.hideLabel}\n ariaHasPopup=\"menu\"\n test-id=\"dropdownButton\"\n block={this.block}\n description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n >\n {this.hasCustomButton ? (\n <div\n test-id=\"dropdownCustom\"\n class={btnProps.custom ? '' : 'hidden'}\n >\n <slot name=\"custom-dropdown-button\" />\n </div>\n ) : (\n <Fragment>\n {this.icon ? <q2-icon type={this.icon} /> : ' '}\n {this.label && !this.hideLabel && (\n <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n )}\n </Fragment>\n )}\n </q2-btn>\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.controlElement}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n mode={this.popoverMode || undefined}\n block={this.block}\n >\n <div\n onClick={this.onDropdownMenuClick}\n onKeyDown={this.onDropdownMenuKeydown}\n >\n <slot />\n {this.open && (\n <q2-btn\n class=\"sr close-dropdown\"\n onFocus={this.closeDropdown}\n />\n )}\n </div>\n </q2-popover>\n </click-elsewhere>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as t,h as i,g as n}from"./p-a5f18e27.js";import{d as a}from"./p-7ce6e587.js";import{l as s,h as r,o as d,i as o,w as l,a as c}from"./p-42302f6f.js";function h(e){const t=new Date(e);if(!a.isValid(t))return;return a.formatISO(t,{representation:"date"})}let u;function f(e){const t=new Date(e);if(!a.isValid(t))return;const i=t.toISOString();if(!u){u=new Intl.DateTimeFormat("en-US",{month:"2-digit",day:"2-digit",year:"numeric",timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone})}return u.format(new Date(i))}let v;function p(e){const t=new Date(e);if(!a.isValid(t))return;if(!v){v=new Intl.DateTimeFormat("en-US",{month:"short",day:"numeric",year:"numeric"})}return v.format(t)}let b;function m(e){if(!e)return;const t=new Date(e);if(!a.isValid(t))return;if(!b){b=new Intl.DateTimeFormat("en-US",{month:"long",day:"numeric",year:"numeric",weekday:"long",timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone})}return b.format(t)}function y(e){return e.replace(/[d]/g,"E").replace(/[D]/g,"d").replace(/[Y]/g,"y").replace(/[l]/g,"P").replace(/[W]/g,"I")}function g(e){const t=typeof e==="string";if(!t&&e&&a.isValid(new Date(e||undefined))){e=h(e)}else if(!e||!a.isValid(new Date(e))){return undefined}let i;const n=e.split(/[\/\-]/).map((e=>e.padStart(2,"0")));const s=t&&e.length>=24&&e[10]==="T";const r=n.length===3;const d=n.length<3;if(s){e=e.split("T")[0];i=new Date(e)}else if(r){const t=e.includes("/")&&n[2].length===4;if(t)n.unshift(n.pop());i=new Date(Date.UTC(parseInt(n[0]),parseInt(n[1])-1,parseInt(n[2])))}else if(d){const e=new Date;let t;let a;let s;switch(n.length){case 1:t=e.getFullYear();a=n[0];s="01";break;case 2:t=e.getFullYear();a=n[0];s=n[1];break}i=new Date(`${t}-${a}-${s}`)}if(!a.isValid(i))return undefined;i=w(i);return a.isValid(i)?i:undefined}function w(e){const t=e.getTimezoneOffset();return a.setMinutes(e,t+Math.abs(t%60))}function D(e){if(!Array.isArray(e)||e.length===0){return[]}return e.map((e=>g(e)))}function x(e=new Date){return{monthIndex:e.getMonth(),selectedYear:e.getFullYear()}}function k(e="",t=[],i=[],n=[],r,d,o="mm/dd/yyyy",l){let c=true;let u=false;let f="info";let v=`${s("tecton.element.calendar.hint.format")}: ${o}`;if(!e){return{isValid:c,inputDate:new Date(""),isAvailable:u,messageType:f,message:v}}const b=$(e,l);const m=b.getMonth()+1;const y=b.getDate();const g=b.getFullYear();const w=[m,y,g];if(a.isValid(b)){const a=E()[b.getMonth()];if(e.length===10){c=true;f=null;v=null}u=t.includes(b.getDay());const l=h(b);if(u){const e=i.length&&!i.includes(l);const t=n.length&&n.includes(l);const a=r&&r>l;const s=d&&d<l;if(e||t||a||s){u=false}}if(e.length>=5&&!u){c=false;f="error";const e=!a||!y||!g;v=e?`${s("tecton.element.calendar.hint.invalidDate")}: ${o}`:s("tecton.element.calendar.hint.notAvailableDate",[p(b)])}}else{c=false;f="error";v=`${s("tecton.element.calendar.hint.invalidDate")}: ${o}`}return{isValid:c,messageType:f,message:v,inputDate:b,isAvailable:u,calendarPosition:w}}function $(e,t){const i=new Date;let[n,a,s]=e.split("/");if(n==="0")n="01";if(a==="0")a="01";if(e.length===10){return new Date(e)}else if(n&&a&&Number(a)>0){const e=Number(a)<10?`0${Number(a)}`:a;const i=!s||s.length<4?I(n,a,t):s;return new Date(`${n}/${e}/${i}`)}else if(n){return new Date(`${n}/01/${i.getFullYear()}`)}}function I(e,t,i){const n=`${e}/${t}`;const a=new Date;const s=a.getMonth()<9?`0${a.getMonth()+1}`:`${a.getMonth()+1}`;const r=a.getDate()<10?`0${a.getDate()}`:`${a.getDate()}`;const d=`${s}/${r}/${a.getFullYear()}`;let o=a.getFullYear();if(i==="future"&&d.slice(0,5)>n){o=a.getFullYear()+1}else if(i==="past"&&d.slice(0,5)<n){o=a.getFullYear()-1}return o.toString()}function T(e){if(!e){return""}if(e.match(/^[1-9]\/$/)){return`0${e}/`}else if(e.match(/^[0-9]{2}\/[1-9]{1}\/$/)){const t=e.split("/");return`${t[0]}/0${t[1]}/`}return e}function O(e){const t=(e||"").split("-");if(t.length!==3)return"";return`${t[1]}/${t[2]}/${t[0]}`}function V(e,t){return new Date(t,e,1,1,1,1,1).getDay()}function A(){return[s("tecton.element.calendar.days.short.Sunday"),s("tecton.element.calendar.days.short.Monday"),s("tecton.element.calendar.days.short.Tuesday"),s("tecton.element.calendar.days.short.Wednesday"),s("tecton.element.calendar.days.short.Thursday"),s("tecton.element.calendar.days.short.Friday"),s("tecton.element.calendar.days.short.Saturday")]}function C(){return[s("tecton.element.calendar.days.Sunday"),s("tecton.element.calendar.days.Monday"),s("tecton.element.calendar.days.Tuesday"),s("tecton.element.calendar.days.Wednesday"),s("tecton.element.calendar.days.Thursday"),s("tecton.element.calendar.days.Friday"),s("tecton.element.calendar.days.Saturday")]}function E(){return[s("tecton.element.calendar.months.January"),s("tecton.element.calendar.months.February"),s("tecton.element.calendar.months.March"),s("tecton.element.calendar.months.April"),s("tecton.element.calendar.months.May"),s("tecton.element.calendar.months.June"),s("tecton.element.calendar.months.July"),s("tecton.element.calendar.months.August"),s("tecton.element.calendar.months.September"),s("tecton.element.calendar.months.October"),s("tecton.element.calendar.months.November"),s("tecton.element.calendar.months.December")]}function z(e,t){const i=a.getDaysInMonth(new Date(t,e));return[...Array(i).keys()].reduce(((i,n)=>{i.push(new Date(t,e,n+1));return i}),[])}function q(e=127){const t=e&1;const i=e&2;const n=e&4;const a=e&8;const s=e&16;const r=e&32;const d=e&64;const o=[];if(e<=0)return o;if(t)o.push(0);if(i)o.push(1);if(n)o.push(2);if(a)o.push(3);if(s)o.push(4);if(r)o.push(5);if(d)o.push(6);return o}function S(e,t){return e.includes(t.getDay())}function Y(e,t){return!F(e,t)}function F(e,t){return e.some((e=>a.isSameDay(e,t)))}function M(e,t,i,n,a,s,r){const d=[H.bind(null,s,new Date)];if(t===null||t===void 0?void 0:t.length){d.push(F.bind(null,t))}else{d.push(S.bind(null,e))}d.push(Y.bind(null,i));return L(n,a,s,d,r)}function L({monthIndex:e,selectedYear:t},i,n,s,r){const d=!a.isValid(new Date(r));const o=z(e,t).map(((e,t)=>{const a=s.some((t=>!t(e)));const r=P(e,n,i);const o=j(Object.assign(Object.assign({},r),{isInvalid:a,isIncompleteDate:d}));return Object.assign(Object.assign({},r),{isValid:!a,date:e,integer:t+1,isEmpty:false,isActivity:false,classList:o})}));const l=B(V(e,t));const c=U((l.length+o.length)%7);return[...l,...o,...c]}function H(e,t,i){const n=a.isAfter(e===null||e===void 0?void 0:e.startDate,i);const s=a.isBefore(e===null||e===void 0?void 0:e.endDate,i);const r=a.isSameDay(t,i)&&a.isAfter(t,e===null||e===void 0?void 0:e.cutOffTime);return!(n||r||s)}function P(e,t,i){if(!i)i=new Date;const n=i&&a.isSameDay(i,e);const s=a.isSameDay(e,new Date);const r=a.isSameDay(e,t===null||t===void 0?void 0:t.startDate);const d=a.isSameDay(e,t===null||t===void 0?void 0:t.endDate);return{isSelected:n,isToday:s,isStartDate:r,isEndDate:d}}function j({isInvalid:e,isSelected:t,isEndDate:i,isStartDate:n,isToday:a,isIncompleteDate:s}){const r=[];if(!e)r.push("is-valid");if(t)r.push("is-selected");if(i)r.push("is-end-date");if(n)r.push("is-start-date");if(a)r.push("is-today");if(t&&e&&!s)r.push("is-unavailable");return r.join(" ")}function B(e){return K(0,e)}function U(e){if(e===0)return[];return K(e,7)}const W={date:null,integer:null,isActivity:false,isEmpty:true,isValid:false,isToday:false,isSelected:false,isStartDate:false,isEndDate:false,classList:""};function K(e,t){if(e===7)e=0;return[...Array(t-e).keys()].map((()=>Object.assign({},W)))}const N="*{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}:host[hidden]{display:none}click-elsewhere{position:relative;display:block}q2-input{margin:0;cursor:pointer}q2-popover{--comp-min-tappable-size:44px;--comp-table-border-spacing:2px;--comp-min-tappable-size-and-spacing:calc(var(--comp-min-tappable-size) + var(--comp-table-border-spacing));--comp-popover-padding:var(--tct-calendar-popover-padding, var(--t-calendar-popover-padding, var(--app-scale-1x, 5px)));--comp-min-table-width:calc(var(--comp-min-tappable-size-and-spacing) * 7);--comp-table-container-border-spacing:calc(var(--comp-table-border-spacing) * 2);--comp-popover-total-padding:calc(var(--comp-popover-padding) * 2);--tct-popover-min-width:calc(\n var(--comp-min-table-width) + var(--comp-table-container-border-spacing) + var(--comp-popover-total-padding)\n )}.calendar-field-popup{padding:var(--comp-popover-padding)}.calendar-label{--comp-label-padding:var(--tct-calendar-label-padding, var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);font-size:var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, 16px));flex:1 1;flex-basis:calc(100% - var(--tct-btn-icon-width, 44px));margin:0;padding:var(--comp-label-padding)}.cal-month-heading{padding:0 0 0.75rem;display:flex;justify-content:center;align-items:center;font-size:var(--tct-calendar-month-font-size, var(--t-calendar-month-font-size, 16px));font-weight:var(--tct-calendar-month-font-weight, var(--t-calendar-month-font-weight, 600));text-align:center}.cal-month-text{min-width:82px;display:inline-block}.cal-year-text{min-width:50px;display:inline-block}table{width:100%;margin-bottom:2px;text-align:center;border-spacing:var(--comp-table-border-spacing)}th{font-size:var(--tct-calendar-day-heading-font-size, var(--t-calendar-day-heading-font-size, inherit));font-weight:var(--tct-calendar-day-heading-font-weight, var(--t-calendar-day-heading-font-weight, 600));width:14.285714%}td{height:var(--comp-min-tappable-size);cursor:pointer;border:var(--tct-calendar-day-border, var(--t-calendar-day-border, 0));border-radius:var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))}td.is-unavailable{border:1px solid var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a))}td.is-valid:hover{border:var(--tct-calendar-day-hover-border, var(--t-calendar-day-hover-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-hover-border-radius, var(--t-calendar-day-hover-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background:var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--app-gray14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2)))))));color:var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))}td[aria-hidden],td[aria-disabled]{pointer-events:none;cursor:not-allowed}td[aria-disabled]{opacity:var(--tct-calendar-day-disabled-opacity, var(--t-calendar-day-disabled-opacity, var(--app-disabled-opacity, 0.4)))}td[aria-selected]{border:var(--tct-calendar-day-selected-border, var(--t-calendar-day-selected-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-selected-border-radius, var(--t-calendar-day-selected-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background:var(--tct-calendar-day-selected-background, var(--tct-calendar-day-selected-bg, var(--t-calendar-day-selected-bg, var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2))))))))));color:var(--tct-calendar-day-selected-font-color, var(--t-calendar-day-selected-font-color, var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))));box-shadow:0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}.today-decorator{text-transform:uppercase;font-weight:700;font-size:10px;height:12px}.calendar-disclaimer{font-size:var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));border-style:solid;border-width:var(--tct-calendar-disclaimer-border-width, var(--t-calendar-disclaimer-border-width, 1px 0 0 0));border-color:var(--tct-calendar-disclaimer-border-color, var(--t-calendar-disclaimer-border-color, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6))))));padding:var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)));text-align:left}";const J=N;const Z=class{constructor(i){e(this,i);this.change=t(this,"change",7);this.error=t(this,"error",7);this.success=t(this,"success",7);this.formatModifier="M/D/YYYY";this.defaultFormatString="mm/dd/yyyy";this.scheduledAfterRender=[];this.internalError="";this.dayAbbrStrings=A();this.dayStrings=C();this.monthStrings=E();this.closeCalendar=()=>{if(!this.open)return;this.open=false;this.focusInput()};this.openCalendar=()=>{if(this.readonly||this.open)return;this.selectedMonthYear=x(this.dateValue);this.dateList=this.buildDateList(this.selectedMonthYear);this.open=true};this.toggleCalendar=()=>{if(this.readonly)return;if(this.open){this.closeCalendar()}else{this.openCalendar()}};this.onClickElsewhere=e=>{const t=e.target;if(t.localName==="click-elsewhere"){e.stopPropagation();this.closeCalendar()}};this.onPopupKeyup=e=>{if(e.key==="Escape"||e.key==="Esc"){this.onInputBlur();this.closeCalendar()}};this.onInputInput=({detail:{value:e}})=>{this.typedValue=e};this.onInputKeydown=e=>{const{dateValue:t}=this;switch(e.key){case"ArrowDown":e.preventDefault();this.openCalendar();this.activateDay(t||new Date);break}};this.onInputKeyup=e=>{if(this.disabled){return}switch(e.key){case"Escape":this.onInputBlur();this.closeCalendar();break}if(!this.isTypeable)return;this.typedValue=T(this.typedValue);const{typedValue:t}=this;const i=q(this.daysOfWeekChecksum);const{isValid:n,message:s,messageType:r,inputDate:d,isAvailable:o,calendarPosition:l}=k(t,i,this.validDates,this.invalidDates,this.startDate,this.endDate,this.defaultFormatString,this.assume);if(l){const[e,t,i]=l;const n=new Date(i,e-1,t);if(a.isValid(n)){this.selectedMonthYear=x(n);this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}}if(e.key==="Enter"){if(n||t&&t.length>4&&d&&a.isValid(d)&&o){this.setCompleteInput(d)}else if(this.value){this.value=null;this.change.emit({value:null});this.typedValue=t}if(this.keyboardSelection){this.keyboardSelection=false;this.closeCalendar()}else{this.toggleCalendar()}}else{this.setHints({isValid:n,message:s,messageType:r})}};this.onInputChange=e=>{e.stopPropagation()};this.onInputBlur=()=>{if(!this.isTypeable)return;const e=q(this.daysOfWeekChecksum);const{typedValue:t}=this;const{isValid:i,inputDate:n,isAvailable:s}=k(this.typedValue,e,this.validDates,this.invalidDates,this.startDate,this.endDate,this.defaultFormatString,this.assume);if(!t&&(n===null||n===void 0?void 0:n.toString())==="Invalid Date"){this.setHints({isValid:true,message:this.defaultHintMessage,messageType:"info"})}else if(i||t&&t.length>4&&n&&a.isValid(n)&&s){this.setCompleteInput(n)}else if(this.value){this.valueOnBlur=this.value;this.value=null;this.change.emit({value:null});this.typedValue=t}};this.onInputFocus=e=>{if(!this.isTypeable)return;if(e.target===this.controlElement){if(this.valueOnBlur&&!this.value){const e=this.typedValue;this.value=this.valueOnBlur;this.typedValue=e;this.valueOnBlur=null}this.closeCalendar()}};this.onInputClick=()=>{if(this.disabled)return;this.toggleCalendar()};this.onRefocus=()=>{var e;(e=this.btnPrevMonth)===null||e===void 0?void 0:e.dispatchEvent(new FocusEvent("focus"))};this.goToMonthYear=(e,t)=>{if(e<0){e=11;t--}else if(e>11){e=0;t++}this.selectedMonthYear={monthIndex:e,selectedYear:t};this.dateList=this.buildDateList(this.selectedMonthYear);this.scheduledAfterRender.push((()=>this.checkActiveCellForBlankness()))};this.selectDate=e=>{const{isValid:t}=this.dateList.find((({date:t})=>a.isSameDay(t,e)));if(!t)return;this.change.emit({value:h(e)});this.typedValue=f(e);this.invalid=false;this.success.emit({value:h(e)})};this.onDateSelection=e=>{const t=e.target.closest("td:not([aria-hidden])");if(!t)return;const i=w(new Date(t.dataset.date));this.selectDate(i);this.closeCalendar()};this.onHeaderControlKeydown=e=>{var t;const i=this.generateDateFromDay(1);const n=(t=this.calendarBody)===null||t===void 0?void 0:t.querySelector('[aria-selected="true"]');if(e.key==="Tab"&&!n){e.preventDefault();this.activateDay(i)}};this.onDateKeydown=e=>{const{monthIndex:t,selectedYear:i}=this.selectedMonthYear;const n=parseInt(e.target.dataset.day);const s=this.generateDateFromDay(n);switch(e.key){case"ArrowUp":e.preventDefault();this.activateDay(a.addDays(s,-7));break;case"ArrowDown":e.preventDefault();this.activateDay(a.addDays(s,7));break;case"ArrowRight":e.preventDefault();this.activateDay(a.addDays(s,1));break;case"ArrowLeft":e.preventDefault();this.activateDay(a.addDays(s,-1));break;case"PageUp":e.preventDefault();if(e.shiftKey)this.goToMonthYear(t,i-1);else this.goToMonthYear(t-1,i);break;case"PageDown":e.preventDefault();if(e.shiftKey)this.goToMonthYear(t,i+1);else this.goToMonthYear(t+1,i);break;case"Home":e.preventDefault();this.activateDay(a.addDays(s,-s.getDay()));break;case"End":e.preventDefault();this.activateDay(a.addDays(s,6-s.getDay()));break;case"Escape":e.preventDefault();this.closeCalendar();this.focusInput();break;case"Enter":e.preventDefault();if(!this.dateList.find((({date:e})=>a.isSameDay(e,s))).isValid)return;this.selectDate(s);this.closeCalendar();this.focusInput();break;case" ":e.preventDefault();if(!this.dateList.find((({date:e})=>a.isSameDay(e,s))).isValid)return;this.selectDate(s);this.focusInput();break}};this.assume="current";this.calendarLabel=undefined;this.clearable=undefined;this.cutoffTime=undefined;this.daysOfWeekChecksum=undefined;this.disabled=undefined;this.disabledMsg=undefined;this.disclaimer=undefined;this.displayFormat=undefined;this.endDate=undefined;this.errors=undefined;this.hideLabel=undefined;this.hints=undefined;this.invalid=undefined;this.invalidDates=undefined;this.label=undefined;this.open=undefined;this.optional=undefined;this.placeholder=undefined;this.popoverAlignment=undefined;this.popoverDirection=undefined;this.popoverMode=null;this.popoverMinHeight=355;this.readonly=undefined;this.startDate=undefined;this.typeable=undefined;this.validDates=undefined;this.value=undefined;this.popDirection=undefined;this.onsuccess=undefined;this.buttonLabel=undefined;this.ariaLabel=undefined;this.keyboardSelection=false;this.typedValue="";this.dateList=undefined;this.hintMessage=this.defaultHintMessage;this.hintMessageType="info"}connectedCallback(){this.selectedMonthYear=x(this.dateValue);this.dateList=this.buildDateList(this.selectedMonthYear);if(this.value&&this.isTypeable&&!this.typedValue){this.typedValue=O(this.value)}this.validateDate()}componentWillLoad(){this.popDirectionHandler();r(this)}componentDidRender(){setTimeout((()=>{this.scheduledAfterRender.forEach((e=>e()));this.scheduledAfterRender=[]}),25)}componentDidLoad(){d(this.hostElement)}get selectedDate(){var e;const t=(e=this.calendarBody)===null||e===void 0?void 0:e.querySelector('[aria-selected="true"]');return t?w(new Date(t.dataset.date)):null}get innerInputField(){var e,t;return(t=(e=this.controlElement)===null||e===void 0?void 0:e.shadowRoot)===null||t===void 0?void 0:t.querySelector(".input-field")}get innerInputContainer(){var e,t;return(t=(e=this.controlElement)===null||e===void 0?void 0:e.shadowRoot)===null||t===void 0?void 0:t.querySelector(".input-container")}get defaultHintMessage(){return this.typeable?s("tecton.element.calendar.hint.format")+": "+this.defaultFormatString:s("tecton.element.calendar.hint.select")}get canClear(){if(this.isTypeable){return this.clearable&&!!this.typedValue}else{return this.clearable&&!!this.value}}get currentWeeks(){const e=this.dateList.reduce(((e,t,i)=>{const n=Math.floor(i/7);if(!e[n]){e[n]=[]}e[n].push(t);return e}),[]);return e}get formattedValue(){const{typedValue:e,dateValue:t,displayFormat:i,isTypeable:n}=this;if(n)return e;if(t===undefined)return"";if(i)return a.format(t,y(i));return new Intl.DateTimeFormat("en-US",{year:"numeric",month:"2-digit",day:"2-digit",timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}).format(t)}get computedPlaceholder(){if(this.disabled&&this.disabledMsg){return s(this.disabledMsg)}if(this.buttonLabel&&(this.disabled||this.placeholder)){return s(this.buttonLabel)}return this.placeholder&&s(this.placeholder)||""}get dateValue(){if(this.isTypeable){return g(this.typedValue)}else{let{value:e}=this;const t=e&&typeof e!=="string"&&"toDate"in e;if(t)return e.toDate();const i=typeof e==="string"&&e.split(" ").length===6&&/GMT-\d{4}/g.test(e);if(i){e=h(e)}return g(e)}}get dateValidators(){const e=new Date(this.cutoffTime||"");return{startDate:g(this.startDate),endDate:g(this.endDate),cutOffTime:a.isValid(e)?e:undefined}}get isTypeable(){return this.typeable}get errorList(){const{errors:e,internalError:t,invalid:i}=this;let n=[];if(t){n=[t]}if(Array.isArray(e)&&e.length){n=e.filter((e=>!!e)).map((e=>s(e))).concat(n)}else if(!t&&i){return["tecton.element.calendar.invalid"]}return n}get hintList(){const{hints:e,hintMessageType:t,hintMessage:i}=this;if(Array.isArray(e)&&e.length)return e.filter((e=>!!e)).map((e=>s(e)));if(t==="info"&&i)return[i];return[]}defaultChangeHandler(e){if(e.target===this.hostElement&&!this.hostElement.onchange&&!!e.detail){this.value=e.detail.value}}defaultErrorHandler(e){if(e.target===this.hostElement&&!this.hostElement.onerror){if(this.hintMessageType==="error"&&this.hintMessage){this.internalError=this.hintMessage}else{this.internalError=s("tecton.element.calendar.hint.invalidDate")}}}defaultSuccessHandler(e){if(e.target!==this.hostElement){return}if(typeof this.onsuccess==="function"){this.onsuccess(e)}else{this.internalError="";if(this.hintMessageType==="error"&&this.hintMessage){this.hintMessage=null;this.hintMessageType=null;this.invalid=false}}}delegateFocus(e){if(!o(e,this.hostElement))return;this.controlElement.shadowRoot.querySelector(".input-field").focus()}handleClear(){this.change.emit({value:null});this.value=null;this.typedValue=""}popoverStateHandler({detail:{open:e}}){if(this.open!==e)this.open=e}_togglePopover(){const e=this.typeable?this.btnCalendarToggle:this.innerInputField;e===null||e===void 0?void 0:e.click();e===null||e===void 0?void 0:e.focus();e.dispatchEvent(new FocusEvent("focus"))}async openPopover(){if(this.open)return;this._togglePopover()}async closePopover(){if(!this.open)return;this._togglePopover()}async setValue(e){var t;const i=typeof e==="string"?g(e):e;if(!a.isValid(i))return;await this.openPopover();await l();this.goToMonthYear(i.getMonth(),i.getFullYear());await l();const n=(t=this.calendarTable)===null||t===void 0?void 0:t.querySelector(`td[data-date="${h(i)}"]`);n===null||n===void 0?void 0:n.click()}async typeValue(e){if(!this.typeable)return;const t=typeof e==="string"?g(e):e;const i=f(t);if(!a.isValid(t))return;const{innerInputField:n,controlElement:s}=this;n.focus();n.dispatchEvent(new FocusEvent("focus"));n.value=i;n.dispatchEvent(new InputEvent("input"));s.dispatchEvent(new KeyboardEvent("keyup"))}popDirectionHandler(){c(this,"popDirection","popoverDirection")}ariaLabelObserver(){r(this)}typeableChanged(){this.valueObserver(this.value)}valueObserver(e){if(e===""){this.value=undefined;this.setHints({isValid:true,message:this.defaultHintMessage,messageType:"info"});return}const t=e&&typeof e!=="string"&&"toDate"in e;const i=t?e.toDate():g(e);const n=f(i);if(this.isTypeable){this.typedValue=n}else{this.controlElement.value=n;this.selectedMonthYear=x(i);this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}if(this.invalid)return;if(n){this.setHints({isValid:true,message:null,messageType:null})}else{this.setHints({isValid:true,message:this.defaultHintMessage,messageType:"info"})}}daysOfWeekChecksumObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}validDatesObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}invalidDatesObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}startDateObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}endDateObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}cutoffTimeObserver(){this.dateList=this.buildDateList(this.selectedMonthYear);this.validateDate()}buildDateList(e){const t=D(this.invalidDates);const i=q(this.daysOfWeekChecksum);const n=D(this.validDates);return M(i,n,t,e,this.dateValue,this.dateValidators,this.typedValue)}validateDate(){var e,t,i;try{if(!!this.value){const{dateValue:n}=this;const a=(e=n===null||n===void 0?void 0:n.getMonth())!==null&&e!==void 0?e:undefined;const s=(t=n===null||n===void 0?void 0:n.getFullYear())!==null&&t!==void 0?t:undefined;const{monthIndex:r,selectedYear:d}=this.selectedMonthYear;const o=a===r&&s===d;let l=[];if(!n){l=[]}else if(o){l=this.dateList}else{l=this.buildDateList({monthIndex:a,selectedYear:s})}const c=(i=n===null||n===void 0?void 0:n.getDate())!==null&&i!==void 0?i:undefined;const u=c?!l.find((({integer:e})=>e===c)).isValid:true;if(u){this.error.emit({errors:[{message:`Value passed is invalid: The date ${this.value} is not valid`,errorCode:"generalInvalid"}]})}else{this.success.emit({value:h(n)})}}}catch(e){console.warn("Invalid moment value ",this.dateValue)}}focusInput(){var e;(e=this.controlElement)===null||e===void 0?void 0:e.focus()}checkActiveCellForBlankness(){const e=this.hostElement.shadowRoot.activeElement;if(!e||e.tagName!=="TD"||!e.hasAttribute("aria-hidden"))return;const{calendarBody:t}=this;const i=Array.from(t.querySelectorAll("td"));const n=Array.from(i).indexOf(e);const a=n<15?1:i.filter((e=>!e.hasAttribute("aria-hidden"))).length;this.focusDay(this.generateDateFromDay(a))}generateDateFromDay(e){const{monthIndex:t,selectedYear:i}=this.selectedMonthYear;return new Date(i,t,e)}activateDay(e){this.goToMonthYear(e.getMonth(),e.getFullYear());this.scheduledAfterRender.push((()=>this.focusDay(e)))}async focusDay(e){var t;if(!e)return;await l();(t=this.calendarBody.querySelector(`td[data-day="${e.getDate()}"]`))===null||t===void 0?void 0:t.focus()}render(){return i("click-elsewhere",{key:"22d396332aee124405d7cf50bed74018eefdc7c4",class:this.open?"dropdown-open":undefined,onChange:this.onClickElsewhere},this.inputField(),i("q2-popover",{key:"70e11b37c3cf8c5661fba5e360ed720eec5f0fb3",ref:e=>this.popoverElement=e,controlElement:this.innerInputContainer,open:this.open,direction:this.popoverDirection,minHeight:this.popoverMinHeight,align:this.popoverAlignment,mode:this.popoverMode||undefined,block:true},this.hintField(),this.calendarPopover()))}hintField(){if(!this.hintMessage)return;return i("q2-message",{class:"calendar-hint sr",ref:e=>this.hintMessageElement=e,type:this.hintMessageType},this.hintMessage)}setHints({isValid:e,message:t,messageType:i}){var n;if(t===this.hintMessage)return(n=this.hintMessageElement)===null||n===void 0?void 0:n.present();this.invalid=!e;this.hintMessage=t;this.hintMessageType=i;if(i==="error"&&t){this.internalError=t;this.error.emit({errors:[{message:t,errorCode:"generalInvalid"}]})}}setCompleteInput(e){const t=f(e);this.change.emit({value:h(e)});this.typedValue=t;this.internalError=null;this.setHints({isValid:true,message:null,messageType:null})}inputField(){const{isTypeable:e}=this;return i("q2-input",{ref:e=>this.controlElement=e,class:"calendar-input-field",value:this.formattedValue,label:s(this.label),hideLabel:this.hideLabel,disabled:!!this.disabled,readonly:!!this.readonly,clearable:this.canClear,placeholder:this.computedPlaceholder,optional:!!this.optional,ariaExpanded:`${!!this.open}`,hints:this.hintList,errors:this.errorList,onClick:e?undefined:this.onInputClick,onChange:this.onInputChange,onInput:this.onInputInput,onKeyDown:this.onInputKeydown,onKeyUp:this.onInputKeyup,onBlur:this.onInputBlur,onFocus:this.onInputFocus,"icon-right":e?undefined:"calendar","format-modifier":e?this.formatModifier:this.displayFormat||this.formatModifier,pseudo:!e,type:"date","hide-messages":!e,"test-id":"inputAndCalendarToggle"},e&&i("q2-btn",{ref:e=>this.btnCalendarToggle=e,slot:"input-right",onClick:this.onInputClick,"test-id":"calendarToggle",label:"tecton.element.calendar.toggleAriaLabel","hide-label":true},i("q2-icon",{type:"calendar"})))}calendarPopover(){const{monthIndex:e,selectedYear:t}=this.selectedMonthYear;return i("div",{class:"calendar-field-popup",onKeyUp:this.onPopupKeyup},this.calendarLabel&&i("p",{class:"calendar-label"},s(this.calendarLabel)),i("div",{class:"cal-month-heading"},i("q2-btn",{label:s("tecton.element.calendar.previousMonth"),"hide-label":true,ref:e=>this.btnPrevMonth=e,class:"cal-nav-btn prev-month","test-id":"previousMonthButton",onClick:()=>this.goToMonthYear(e-1,t)},i("q2-icon",{type:"chevron-left"})),i("span",{class:"cal-month-text"},this.monthStrings[e]),i("q2-btn",{label:s("tecton.element.calendar.nextMonth"),"hide-label":true,class:"cal-nav-btn next-month",ref:e=>this.btnNextMonth=e,"test-id":"nextMonthButton",onClick:()=>this.goToMonthYear(e+1,t)},i("q2-icon",{type:"chevron-right"})),i("q2-btn",{label:s("tecton.element.calendar.previousYear"),"hide-label":true,class:"cal-nav-btn prev-year",ref:e=>this.btnPrevYear=e,"test-id":"previousYearButton",onClick:()=>this.goToMonthYear(e,t-1)},i("q2-icon",{type:"chevron-left"})),i("span",{class:"cal-year-text"},this.selectedMonthYear.selectedYear),i("q2-btn",{label:s("tecton.element.calendar.nextYear"),"hide-label":true,class:"cal-nav-btn next-year",ref:e=>this.btnNextYear=e,"test-id":"nextYearButton",onClick:()=>this.goToMonthYear(e,t+1),onKeyDown:this.onHeaderControlKeydown},i("q2-icon",{type:"chevron-right"}))),i("div",{class:"sr","aria-live":"polite",id:"table-label"},`${this.monthStrings[e]} ${t}`),this.calendarDays(),this.disclaimer&&i("div",{class:"calendar-disclaimer"},s(this.disclaimer)),i("q2-btn",{class:"sr refocus-popup",onFocus:this.onRefocus}))}calendarDays(){return i("table",{role:"grid","aria-labelledby":"table-label",ref:e=>this.calendarTable=e},i("thead",null,i("tr",null,[...Array(7).keys()].map((e=>i("th",{scope:"col","aria-label":this.dayStrings[e]},this.dayAbbrStrings[e]))))),i("tbody",{onClick:this.onDateSelection,onKeyDown:this.onDateKeydown,ref:e=>this.calendarBody=e,"test-id":"calendarTableBody"},this.currentWeeks.map((e=>i("tr",null,e.map((e=>{var t;let n="";if(e.isToday)n=`${s("tecton.element.calendar.today")}, `;n+=m(e.date);if(e.isSelected)n+=` (${s("tecton.element.calendar.selected")})`;return i("td",{class:e.classList,"aria-hidden":e.isEmpty?"true":undefined,tabindex:e.isSelected?0:-1,role:e.isSelected?"gridcell":undefined,"aria-selected":e.isSelected?"true":undefined,"aria-disabled":e.isValid?undefined:"true","data-day":e.integer||undefined,"data-date":e.date?h(e.date):undefined},(e===null||e===void 0?void 0:e.isToday)&&i("div",{class:"today-decorator","aria-hidden":"true"},s("tecton.element.calendar.today")),i("div",{"aria-label":n},(t=e===null||e===void 0?void 0:e.integer)!==null&&t!==void 0?t:""))})))))))}get hostElement(){return n(this)}static get watchers(){return{popDirection:["popDirectionHandler"],ariaLabel:["ariaLabelObserver"],typeable:["typeableChanged"],value:["valueObserver"],daysOfWeekChecksum:["daysOfWeekChecksumObserver"],validDates:["validDatesObserver"],invalidDates:["invalidDatesObserver"],startDate:["startDateObserver"],endDate:["endDateObserver"],cutoffTime:["cutoffTimeObserver"]}}};Z.style=J;export{Z as q2_calendar};
|
|
2
|
-
//# sourceMappingURL=p-bffda54d.entry.js.map
|