q2-tecton-elements 1.63.2 → 1.64.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/bundle-report.json +1672 -550
- package/dist/cjs/action-sheet-D3n8vaeA.js.map +1 -1
- package/dist/cjs/index-CyqXtdz-.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/q2-action-group_2.cjs.entry.js +1 -1
- package/dist/cjs/q2-action-sheet.cjs.entry.js +1 -1
- package/dist/cjs/q2-action-sheet.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-action-sheet.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-avatar.cjs.entry.js +4 -2
- package/dist/cjs/q2-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-avatar.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-btn.q2-loading.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-btn_2.cjs.entry.js +2 -2
- package/dist/cjs/q2-btn_2.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-card.cjs.entry.js +5 -5
- package/dist/cjs/q2-card.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-card.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-chart-area.cjs.entry.js +1 -1
- package/dist/cjs/q2-chart-area.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-chart-area.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-chart-bar.cjs.entry.js +1 -1
- package/dist/cjs/q2-chart-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-chart-bar.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-chart-donut.cjs.entry.js +5 -5
- package/dist/cjs/q2-chart-donut.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-chart-donut.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-checkbox.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-data-table.cjs.entry.js +15 -10
- package/dist/cjs/q2-data-table.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-data-table.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-dropdown-item.cjs.entry.js +3 -3
- package/dist/cjs/q2-dropdown-item.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-dropdown-item.entry.cjs.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-dropdown.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-file-picker.cjs.entry.js +24 -17
- package/dist/cjs/q2-file-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-file-picker.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-formatted-text.cjs.entry.js +7 -7
- package/dist/cjs/q2-formatted-text.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-formatted-text.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-icon.cjs.entry.js +1 -0
- package/dist/cjs/q2-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-icon.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-input.cjs.entry.js +8 -8
- package/dist/cjs/q2-input.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-input.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-legend.cjs.entry.js +1 -1
- package/dist/cjs/q2-legend.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-legend.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-link.q2-list.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-link_2.cjs.entry.js +1 -1
- package/dist/cjs/q2-link_2.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-modal.cjs.entry.js +1 -1
- package/dist/cjs/q2-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-modal.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-mutation-observer.cjs.entry.js +106 -0
- package/dist/cjs/q2-mutation-observer.cjs.entry.js.map +1 -0
- package/dist/cjs/q2-mutation-observer.entry.cjs.js.map +1 -0
- package/dist/cjs/q2-optgroup.cjs.entry.js +1 -1
- package/dist/cjs/q2-pagination.cjs.entry.js +25 -5
- package/dist/cjs/q2-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-pagination.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-pill.cjs.entry.js +1 -1
- package/dist/cjs/q2-relative-time.cjs.entry.js +1 -1
- package/dist/cjs/q2-section-container.cjs.entry.js +102 -0
- package/dist/cjs/q2-section-container.cjs.entry.js.map +1 -0
- package/dist/cjs/q2-section-container.entry.cjs.js.map +1 -0
- package/dist/cjs/q2-section.cjs.entry.js +2 -2
- package/dist/cjs/q2-stepper-vertical.cjs.entry.js +1 -1
- package/dist/cjs/q2-stepper.cjs.entry.js +1 -1
- package/dist/cjs/q2-tab-container.cjs.entry.js +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/q2-textarea.entry.cjs.js.map +1 -1
- package/dist/cjs/tecton-tab-pane.cjs.entry.js +2 -2
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/q2-action-sheet/q2-action-sheet.js +7 -7
- package/dist/collection/components/q2-action-sheet/q2-action-sheet.js.map +1 -1
- package/dist/collection/components/q2-avatar/q2-avatar.css +69 -13
- package/dist/collection/components/q2-avatar/q2-avatar.js +23 -1
- package/dist/collection/components/q2-avatar/q2-avatar.js.map +1 -1
- package/dist/collection/components/q2-card/q2-card.js +5 -5
- package/dist/collection/components/q2-card/q2-card.js.map +1 -1
- package/dist/collection/components/q2-chart-area/q2-chart-area.js +1 -1
- package/dist/collection/components/q2-chart-area/q2-chart-area.js.map +1 -1
- package/dist/collection/components/q2-chart-bar/q2-chart-bar.js +1 -1
- package/dist/collection/components/q2-chart-bar/q2-chart-bar.js.map +1 -1
- package/dist/collection/components/q2-chart-donut/q2-chart-donut.css +17 -8
- package/dist/collection/components/q2-chart-donut/q2-chart-donut.js +4 -4
- package/dist/collection/components/q2-chart-donut/q2-chart-donut.js.map +1 -1
- package/dist/collection/components/q2-checkbox/q2-checkbox.css +14 -2
- package/dist/collection/components/q2-data-table/q2-data-table.css +8 -0
- package/dist/collection/components/q2-data-table/q2-data-table.js +67 -16
- package/dist/collection/components/q2-data-table/q2-data-table.js.map +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.css +22 -5
- package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js +2 -2
- package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js.map +1 -1
- package/dist/collection/components/q2-file-picker/q2-file-picker.js +30 -23
- package/dist/collection/components/q2-file-picker/q2-file-picker.js.map +1 -1
- package/dist/collection/components/q2-formatted-text/q2-formatted-text.js +27 -27
- package/dist/collection/components/q2-formatted-text/q2-formatted-text.js.map +1 -1
- package/dist/collection/components/q2-grid/q2-grid.js +30 -30
- package/dist/collection/components/q2-grid-area/q2-grid-area.js +42 -42
- package/dist/collection/components/q2-icon/assets/cards.symbol.svg +1 -2
- package/dist/collection/components/q2-icon/assets/icon-list.json +1 -1
- package/dist/collection/components/q2-icon/assets/icon-map.json +1 -1
- package/dist/collection/components/q2-icon/assets/standard.symbol.svg +1 -1
- package/dist/collection/components/q2-icon/q2-icon-types.js.map +1 -1
- package/dist/collection/components/q2-input/q2-input.js +11 -11
- package/dist/collection/components/q2-input/q2-input.js.map +1 -1
- package/dist/collection/components/q2-legend/q2-legend.js +1 -1
- package/dist/collection/components/q2-legend/q2-legend.js.map +1 -1
- package/dist/collection/components/q2-link/q2-link.js +1 -1
- package/dist/collection/components/q2-link/q2-link.js.map +1 -1
- package/dist/collection/components/q2-loading/q2-loading.css +32 -20
- package/dist/collection/components/q2-loading/q2-loading.js +1 -1
- package/dist/collection/components/q2-loading/q2-loading.js.map +1 -1
- package/dist/collection/components/q2-modal/q2-modal.js +5 -5
- package/dist/collection/components/q2-modal/q2-modal.js.map +1 -1
- package/dist/collection/components/q2-mutation-observer/q2-mutation-observer.js +233 -0
- package/dist/collection/components/q2-mutation-observer/q2-mutation-observer.js.map +1 -0
- package/dist/collection/components/q2-optgroup/q2-optgroup.js +1 -1
- package/dist/collection/components/q2-option-list/q2-option-list.js +4 -4
- package/dist/collection/components/q2-pagination/q2-pagination.js +45 -5
- package/dist/collection/components/q2-pagination/q2-pagination.js.map +1 -1
- package/dist/collection/components/q2-pill/q2-pill.js +1 -1
- package/dist/collection/components/q2-relative-time/q2-relative-time.js +1 -1
- package/dist/collection/components/q2-resize-observer/q2-resize-observer.js +1 -1
- package/dist/collection/components/q2-section/q2-section.js +2 -2
- package/dist/collection/components/q2-section-container/q2-section-container.js +198 -0
- package/dist/collection/components/q2-section-container/q2-section-container.js.map +1 -0
- package/dist/collection/components/q2-stepper/q2-stepper.js +1 -1
- package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js +2 -2
- package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js +1 -1
- package/dist/collection/components/q2-tab-container/q2-tab-container.js +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.js +1 -1
- package/dist/collection/components/q2-textarea/q2-textarea.js.map +1 -1
- package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.js +2 -2
- package/dist/collection/utils/action-sheet.js.map +1 -1
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/index.js.map +1 -1
- package/dist/components/action-sheet.js.map +1 -1
- package/dist/components/index.js +4 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/index2.js.map +1 -1
- package/dist/components/q2-action-sheet.js +1 -1
- package/dist/components/q2-action-sheet.js.map +1 -1
- package/dist/components/q2-avatar2.js +5 -2
- package/dist/components/q2-avatar2.js.map +1 -1
- package/dist/components/q2-card.js +5 -5
- package/dist/components/q2-card.js.map +1 -1
- package/dist/components/q2-chart-area.js +1 -1
- package/dist/components/q2-chart-area.js.map +1 -1
- package/dist/components/q2-chart-bar.js +1 -1
- package/dist/components/q2-chart-bar.js.map +1 -1
- package/dist/components/q2-chart-donut.js +5 -5
- package/dist/components/q2-chart-donut.js.map +1 -1
- package/dist/components/q2-checkbox2.js +1 -1
- package/dist/components/q2-checkbox2.js.map +1 -1
- package/dist/components/q2-data-table.js +17 -10
- package/dist/components/q2-data-table.js.map +1 -1
- package/dist/components/q2-dropdown-item2.js +3 -3
- 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-file-picker.js +25 -18
- package/dist/components/q2-file-picker.js.map +1 -1
- package/dist/components/q2-formatted-text.js +9 -9
- package/dist/components/q2-formatted-text.js.map +1 -1
- package/dist/components/q2-icon2.js +1 -0
- package/dist/components/q2-icon2.js.map +1 -1
- package/dist/components/q2-input2.js +9 -9
- package/dist/components/q2-input2.js.map +1 -1
- package/dist/components/q2-legend2.js +1 -1
- package/dist/components/q2-legend2.js.map +1 -1
- package/dist/components/q2-link2.js +1 -1
- package/dist/components/q2-link2.js.map +1 -1
- package/dist/components/q2-loading2.js +2 -2
- package/dist/components/q2-loading2.js.map +1 -1
- package/dist/components/q2-modal.js +1 -1
- package/dist/components/q2-modal.js.map +1 -1
- package/dist/components/q2-mutation-observer.d.ts +11 -0
- package/dist/components/q2-mutation-observer.js +130 -0
- package/dist/components/q2-mutation-observer.js.map +1 -0
- package/dist/components/q2-optgroup2.js +1 -1
- package/dist/components/q2-pagination.js +26 -5
- package/dist/components/q2-pagination.js.map +1 -1
- package/dist/components/q2-pill.js +1 -1
- package/dist/components/q2-relative-time.js +1 -1
- package/dist/components/q2-resize-observer2.js +1 -1
- package/dist/components/q2-section-container.d.ts +11 -0
- package/dist/components/q2-section-container.js +128 -0
- package/dist/components/q2-section-container.js.map +1 -0
- package/dist/components/q2-section.js +2 -2
- package/dist/components/q2-stepper-vertical.js +1 -1
- package/dist/components/q2-stepper.js +1 -1
- package/dist/components/q2-tab-container.js +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/action-sheet-D3xPdhm8.js.map +1 -1
- package/dist/esm/index-YJ5sXwiE.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/q2-action-group_2.entry.js +1 -1
- package/dist/esm/q2-action-sheet.entry.js +1 -1
- package/dist/esm/q2-action-sheet.entry.js.map +1 -1
- package/dist/esm/q2-avatar.entry.js +4 -2
- package/dist/esm/q2-avatar.entry.js.map +1 -1
- package/dist/esm/q2-btn.q2-loading.entry.js.map +1 -1
- package/dist/esm/q2-btn_2.entry.js +2 -2
- package/dist/esm/q2-btn_2.entry.js.map +1 -1
- package/dist/esm/q2-card.entry.js +5 -5
- package/dist/esm/q2-card.entry.js.map +1 -1
- package/dist/esm/q2-chart-area.entry.js +1 -1
- package/dist/esm/q2-chart-area.entry.js.map +1 -1
- package/dist/esm/q2-chart-bar.entry.js +1 -1
- package/dist/esm/q2-chart-bar.entry.js.map +1 -1
- package/dist/esm/q2-chart-donut.entry.js +5 -5
- package/dist/esm/q2-chart-donut.entry.js.map +1 -1
- package/dist/esm/q2-checkbox.entry.js +1 -1
- package/dist/esm/q2-checkbox.entry.js.map +1 -1
- package/dist/esm/q2-data-table.entry.js +15 -10
- package/dist/esm/q2-data-table.entry.js.map +1 -1
- package/dist/esm/q2-dropdown-item.entry.js +3 -3
- 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-file-picker.entry.js +24 -17
- package/dist/esm/q2-file-picker.entry.js.map +1 -1
- package/dist/esm/q2-formatted-text.entry.js +7 -7
- package/dist/esm/q2-formatted-text.entry.js.map +1 -1
- package/dist/esm/q2-icon.entry.js +1 -0
- package/dist/esm/q2-icon.entry.js.map +1 -1
- package/dist/esm/q2-input.entry.js +8 -8
- package/dist/esm/q2-input.entry.js.map +1 -1
- package/dist/esm/q2-legend.entry.js +1 -1
- package/dist/esm/q2-legend.entry.js.map +1 -1
- package/dist/esm/q2-link.q2-list.entry.js.map +1 -1
- package/dist/esm/q2-link_2.entry.js +1 -1
- package/dist/esm/q2-link_2.entry.js.map +1 -1
- package/dist/esm/q2-modal.entry.js +1 -1
- package/dist/esm/q2-modal.entry.js.map +1 -1
- package/dist/esm/q2-mutation-observer.entry.js +104 -0
- package/dist/esm/q2-mutation-observer.entry.js.map +1 -0
- package/dist/esm/q2-optgroup.entry.js +1 -1
- package/dist/esm/q2-pagination.entry.js +25 -5
- package/dist/esm/q2-pagination.entry.js.map +1 -1
- package/dist/esm/q2-pill.entry.js +1 -1
- package/dist/esm/q2-relative-time.entry.js +1 -1
- package/dist/esm/q2-section-container.entry.js +100 -0
- package/dist/esm/q2-section-container.entry.js.map +1 -0
- package/dist/esm/q2-section.entry.js +2 -2
- package/dist/esm/q2-stepper-vertical.entry.js +1 -1
- package/dist/esm/q2-stepper.entry.js +1 -1
- package/dist/esm/q2-tab-container.entry.js +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/action-sheet-D3xPdhm8.js.map +1 -1
- package/dist/q2-tecton-elements/assets/cards.symbol.svg +1 -2
- package/dist/q2-tecton-elements/assets/icon-list.json +1 -1
- package/dist/q2-tecton-elements/assets/icon-map.json +1 -1
- package/dist/q2-tecton-elements/assets/standard.symbol.svg +1 -1
- package/dist/q2-tecton-elements/index-YJ5sXwiE.js.map +1 -1
- package/dist/q2-tecton-elements/q2-action-group_2.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-action-sheet.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-action-sheet.entry.js +62 -62
- package/dist/q2-tecton-elements/q2-action-sheet.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-avatar.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-avatar.entry.js +26 -25
- package/dist/q2-tecton-elements/q2-avatar.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-btn.q2-loading.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-btn_2.entry.js +11 -6
- package/dist/q2-tecton-elements/q2-btn_2.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-card.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-card.entry.js +5 -5
- package/dist/q2-tecton-elements/q2-card.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-chart-area.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-chart-area.entry.js +2 -2
- package/dist/q2-tecton-elements/q2-chart-area.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-chart-bar.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-chart-bar.entry.js +2 -2
- package/dist/q2-tecton-elements/q2-chart-bar.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-chart-donut.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-chart-donut.entry.js +48 -47
- package/dist/q2-tecton-elements/q2-chart-donut.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-checkbox.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-checkbox.entry.js +6 -6
- package/dist/q2-tecton-elements/q2-checkbox.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-data-table.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-data-table.entry.js +23 -19
- package/dist/q2-tecton-elements/q2-data-table.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-dropdown-item.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-dropdown-item.entry.js +23 -21
- package/dist/q2-tecton-elements/q2-dropdown-item.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-dropdown.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-dropdown.entry.js +4 -4
- package/dist/q2-tecton-elements/q2-dropdown.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-file-picker.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-file-picker.entry.js +42 -35
- package/dist/q2-tecton-elements/q2-file-picker.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-formatted-text.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-formatted-text.entry.js +7 -7
- package/dist/q2-tecton-elements/q2-formatted-text.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-icon.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-icon.entry.js +1 -0
- package/dist/q2-tecton-elements/q2-icon.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-input.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-input.entry.js +7 -7
- package/dist/q2-tecton-elements/q2-input.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-legend.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-legend.entry.js +2 -2
- package/dist/q2-tecton-elements/q2-legend.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-link.q2-list.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-link_2.entry.js +1 -0
- package/dist/q2-tecton-elements/q2-link_2.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-modal.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-modal.entry.js +23 -23
- package/dist/q2-tecton-elements/q2-modal.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-mutation-observer.entry.esm.js.map +1 -0
- package/dist/q2-tecton-elements/q2-mutation-observer.entry.js +107 -0
- package/dist/q2-tecton-elements/q2-mutation-observer.entry.js.map +1 -0
- package/dist/q2-tecton-elements/q2-optgroup.entry.js +4 -4
- package/dist/q2-tecton-elements/q2-pagination.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-pagination.entry.js +50 -38
- package/dist/q2-tecton-elements/q2-pagination.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-pill.entry.js +12 -12
- package/dist/q2-tecton-elements/q2-relative-time.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-section-container.entry.esm.js.map +1 -0
- package/dist/q2-tecton-elements/q2-section-container.entry.js +95 -0
- package/dist/q2-tecton-elements/q2-section-container.entry.js.map +1 -0
- package/dist/q2-tecton-elements/q2-section.entry.js +11 -11
- package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js +37 -37
- package/dist/q2-tecton-elements/q2-stepper.entry.js +12 -12
- package/dist/q2-tecton-elements/q2-tab-container.entry.js +12 -12
- package/dist/q2-tecton-elements/q2-tab-pane.entry.js +2 -2
- package/dist/q2-tecton-elements/q2-tag.entry.js +15 -15
- package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
- package/dist/q2-tecton-elements/q2-textarea.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-textarea.entry.js +2 -2
- package/dist/q2-tecton-elements/q2-textarea.entry.js.map +1 -1
- package/dist/q2-tecton-elements/tecton-tab-pane.entry.js +6 -6
- package/dist/types/components/q2-action-sheet/q2-action-sheet.d.ts +1 -1
- package/dist/types/components/q2-avatar/q2-avatar.d.ts +2 -0
- package/dist/types/components/q2-card/q2-card.d.ts +1 -1
- package/dist/types/components/q2-chart-area/q2-chart-area.d.ts +1 -1
- package/dist/types/components/q2-chart-bar/q2-chart-bar.d.ts +1 -1
- package/dist/types/components/q2-chart-donut/q2-chart-donut.d.ts +1 -1
- package/dist/types/components/q2-data-table/q2-data-table.d.ts +9 -3
- package/dist/types/components/q2-file-picker/q2-file-picker.d.ts +3 -1
- package/dist/types/components/q2-formatted-text/q2-formatted-text.d.ts +6 -6
- package/dist/types/components/q2-icon/q2-icon-types.d.ts +1 -2
- package/dist/types/components/q2-input/q2-input.d.ts +1 -1
- package/dist/types/components/q2-legend/q2-legend.d.ts +1 -1
- package/dist/types/components/q2-modal/q2-modal.d.ts +1 -1
- package/dist/types/components/q2-mutation-observer/q2-mutation-observer.d.ts +40 -0
- package/dist/types/components/q2-pagination/q2-pagination.d.ts +2 -0
- package/dist/types/components/q2-section-container/q2-section-container.d.ts +34 -0
- package/dist/types/components/q2-textarea/q2-textarea.d.ts +1 -2
- package/dist/types/components.d.ts +175 -4
- package/dist/types/global.d.ts +3 -3
- package/dist/types/util.d.ts +6 -6
- package/dist/types/utils/action-sheet.d.ts +1 -1
- package/dist/types/utils/helpers.d.ts +2 -3
- package/dist/types/utils/index.d.ts +2 -2
- package/package.json +64 -66
- /package/dist/types/{builds/q2e/development/tecton/tecton → Users/kvanhouten/Documents/Work/tecton_extra}/packages/q2-tecton-elements/.stencil/jest.setup.d.ts +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"q2-formatted-text.entry.esm.js","sources":["src/components/q2-formatted-text/q2-formatted-text.scss?tag=q2-formatted-text&encapsulation=shadow","src/components/q2-formatted-text/q2-formatted-text.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n.formatted-text {\n color: var-list(--tct-formatted-text-color, inherit);\n font-size: var-list(--tct-formatted-text-font-size, inherit);\n font-weight: var-list(--tct-formatted-text-font-weight, inherit);\n}\n\n.formatted-text-small {\n color: var-list(--tct-formatted-text-small-color, inherit);\n font-size: var-list(--tct-formatted-text-small-font-size, 24px);\n font-weight: var-list(--tct-formatted-text-small-font-weight, 600);\n}\n\n.formatted-text-medium {\n color: var-list(--tct-formatted-text-medium-color, inherit);\n font-size: var-list(--tct-formatted-text-medium-font-size, 42px);\n font-weight: var-list(--tct-formatted-text-medium-font-weight, 600);\n}\n\n.formatted-text-large {\n color: var-list(--tct-formatted-text-large-color, inherit);\n font-size: var-list(--tct-formatted-text-large-font-size, 70px);\n font-weight: var-list(--tct-formatted-text-large-font-weight, 700);\n}\n","import {
|
|
1
|
+
{"version":3,"file":"q2-formatted-text.entry.esm.js","sources":["src/components/q2-formatted-text/q2-formatted-text.scss?tag=q2-formatted-text&encapsulation=shadow","src/components/q2-formatted-text/q2-formatted-text.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n.formatted-text {\n color: var-list(--tct-formatted-text-color, inherit);\n font-size: var-list(--tct-formatted-text-font-size, inherit);\n font-weight: var-list(--tct-formatted-text-font-weight, inherit);\n}\n\n.formatted-text-small {\n color: var-list(--tct-formatted-text-small-color, inherit);\n font-size: var-list(--tct-formatted-text-small-font-size, 24px);\n font-weight: var-list(--tct-formatted-text-small-font-weight, 600);\n}\n\n.formatted-text-medium {\n color: var-list(--tct-formatted-text-medium-color, inherit);\n font-size: var-list(--tct-formatted-text-medium-font-size, 42px);\n font-weight: var-list(--tct-formatted-text-medium-font-weight, 600);\n}\n\n.formatted-text-large {\n color: var-list(--tct-formatted-text-large-color, inherit);\n font-size: var-list(--tct-formatted-text-large-font-size, 70px);\n font-weight: var-list(--tct-formatted-text-large-font-weight, 700);\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n@Component({ tag: 'q2-formatted-text', shadow: true, styleUrl: 'q2-formatted-text.scss' })\nexport class Q2FormattedText implements ComponentInterface {\n // #region Own Properties\n\n /** @private The formatted text to display */\n formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /**\n * The format style for the number.\n * - `decimal`: Standard number formatting, locale-aware (default).\n * - `percent`: Percentage formatting, locale-aware.\n */\n @Prop({ reflect: true })\n format: 'decimal' | 'percent' = 'decimal';\n\n /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n @Prop({ reflect: true })\n locale: string | string[] = document.documentElement.lang || 'en-US';\n\n /** The maximum number of fraction digits to use. */\n @Prop({ reflect: false })\n maximumFractionDigits: number = 2;\n\n /** The minimum number of fraction digits to use. */\n @Prop({ reflect: false })\n minimumFractionDigits: number = 2;\n\n /** The minimum number of integer digits to use. */\n @Prop({ reflect: false })\n minimumIntegerDigits: number = 1;\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 })\n signDisplay: 'never' | 'auto' | 'always' | 'exceptZero' = 'auto';\n\n /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n @Prop({ reflect: true })\n size: 'small' | 'medium' | 'large' | undefined;\n\n /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts. */\n @Prop({ reflect: true })\n slotSize: string;\n\n /** The value you want formatted. */\n @Prop({ reflect: true })\n value: number;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void | Promise<void> {\n this.formatValue();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('value')\n @Watch('locale')\n @Watch('size')\n @Watch('slotSize')\n @Watch('signDisplay')\n @Watch('format')\n propsUpdated() {\n this.formatValue();\n }\n\n // #endregion\n // #region Local Methods\n\n get formattedTextClasses(): string {\n const classes = ['formatted-text'];\n const sizeClass = this.size ? this.size : this.slotSize;\n if (!!sizeClass) classes.push(`formatted-text-${sizeClass}`);\n return classes.join(' ');\n }\n\n formatValue() {\n const options: Record<string, any> = {\n style: this.format,\n signDisplay: this.signDisplay,\n };\n if (!isNaN(this.minimumIntegerDigits)) options.minimumIntegerDigits = this.minimumIntegerDigits;\n if (!isNaN(this.minimumFractionDigits)) options.minimumFractionDigits = this.minimumFractionDigits;\n if (!isNaN(this.maximumFractionDigits)) options.maximumFractionDigits = this.maximumFractionDigits;\n\n // For percent format, divide by 100 so users can pass intuitive values (e.g., 25 → 25%, 0.5 → 0.5%, 100 → 100%)\n const valueToFormat = this.format === 'percent' ? this.value / 100 : this.value;\n this.formattedValue = new Intl.NumberFormat(this.locale, options).format(valueToFormat).trim();\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { formattedTextClasses } = this;\n\n return (\n <div\n class={formattedTextClasses}\n aria-label={this.formattedValue}\n >\n <span>{this.formattedValue}</span>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,u7CAAu7C;;MCEr8C,eAAe,GAAA,MAAA;AAD5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUI;;;;AAIG;AAEH,QAAA,IAAM,CAAA,MAAA,GAA0B,SAAS;;QAIzC,IAAM,CAAA,MAAA,GAAsB,QAAQ,CAAC,eAAe,CAAC,IAAI,IAAI,OAAO;;AAIpE,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAoB,CAAA,oBAAA,GAAW,CAAC;AAEhC;;;;;;;;AAQG;AAEH,QAAA,IAAW,CAAA,WAAA,GAA+C,MAAM;AA2EnE;;;IA1DG,iBAAiB,GAAA;QACb,IAAI,CAAC,WAAW,EAAE;;;;IAYtB,YAAY,GAAA;QACR,IAAI,CAAC,WAAW,EAAE;;;;AAMtB,IAAA,IAAI,oBAAoB,GAAA;AACpB,QAAA,MAAM,OAAO,GAAG,CAAC,gBAAgB,CAAC;AAClC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ;QACvD,IAAI,CAAC,CAAC,SAAS;AAAE,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,SAAS,CAAA,CAAE,CAAC;AAC5D,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG5B,WAAW,GAAA;AACP,QAAA,MAAM,OAAO,GAAwB;YACjC,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,WAAW,EAAE,IAAI,CAAC,WAAW;SAChC;AACD,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC;AAAE,YAAA,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB;AAC/F,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;AAClG,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;;QAGlG,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;QAC/E,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,EAAE;;;;IAMlG,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI;AAErC,QAAA,QACI,4DACI,KAAK,EAAE,oBAAoB,EACf,YAAA,EAAA,IAAI,CAAC,cAAc,EAAA,EAE/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,cAAc,CAAQ,CAChC;;;;;;;;;;;;;;;"}
|
|
@@ -7,6 +7,11 @@ const o = class {
|
|
|
7
7
|
t(this, e);
|
|
8
8
|
// #endregion
|
|
9
9
|
// #region Public Property API
|
|
10
|
+
/**
|
|
11
|
+
* The format style for the number.
|
|
12
|
+
* - `decimal`: Standard number formatting, locale-aware (default).
|
|
13
|
+
* - `percent`: Percentage formatting, locale-aware.
|
|
14
|
+
*/ this.format = "decimal";
|
|
10
15
|
/** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */ this.locale = document.documentElement.lang || "en-US";
|
|
11
16
|
/** The maximum number of fraction digits to use. */ this.maximumFractionDigits = 2;
|
|
12
17
|
/** The minimum number of fraction digits to use. */ this.minimumFractionDigits = 2;
|
|
@@ -20,11 +25,6 @@ const o = class {
|
|
|
20
25
|
* - `exceptZero`: Sign displays for positive and negative numbers, but not zero.
|
|
21
26
|
* - `never`: Never display the sign.
|
|
22
27
|
*/ this.signDisplay = "auto";
|
|
23
|
-
/**
|
|
24
|
-
* The format style for the number.
|
|
25
|
-
* - `decimal`: Standard number formatting, locale-aware (default).
|
|
26
|
-
* - `percent`: Percentage formatting, locale-aware.
|
|
27
|
-
*/ this.format = "decimal";
|
|
28
28
|
}
|
|
29
29
|
// #endregion
|
|
30
30
|
// #region Component Lifecycle Events
|
|
@@ -61,11 +61,11 @@ const o = class {
|
|
|
61
61
|
render() {
|
|
62
62
|
const {formattedTextClasses: t} = this;
|
|
63
63
|
return e("div", {
|
|
64
|
-
key: "
|
|
64
|
+
key: "b63b5b968494e1a5eb11cb9c3dbfb7827bceef63",
|
|
65
65
|
class: t,
|
|
66
66
|
"aria-label": this.formattedValue
|
|
67
67
|
}, e("span", {
|
|
68
|
-
key: "
|
|
68
|
+
key: "38c1bc1955c771046d71504a82a6a4e6ab532274"
|
|
69
69
|
}, this.formattedValue));
|
|
70
70
|
}
|
|
71
71
|
static get watchers() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["q2FormattedTextCss","Q2FormattedText","constructor","hostRef","this","locale","document","documentElement","lang","maximumFractionDigits","minimumFractionDigits","minimumIntegerDigits","signDisplay","
|
|
1
|
+
{"version":3,"names":["q2FormattedTextCss","Q2FormattedText","constructor","hostRef","this","format","locale","document","documentElement","lang","maximumFractionDigits","minimumFractionDigits","minimumIntegerDigits","signDisplay","componentWillLoad","formatValue","propsUpdated","formattedTextClasses","classes","sizeClass","size","slotSize","push","join","options","style","isNaN","valueToFormat","value","formattedValue","Intl","NumberFormat","trim","render","h","key","class"],"sources":["src/components/q2-formatted-text/q2-formatted-text.scss?tag=q2-formatted-text&encapsulation=shadow","src/components/q2-formatted-text/q2-formatted-text.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n.formatted-text {\n color: var-list(--tct-formatted-text-color, inherit);\n font-size: var-list(--tct-formatted-text-font-size, inherit);\n font-weight: var-list(--tct-formatted-text-font-weight, inherit);\n}\n\n.formatted-text-small {\n color: var-list(--tct-formatted-text-small-color, inherit);\n font-size: var-list(--tct-formatted-text-small-font-size, 24px);\n font-weight: var-list(--tct-formatted-text-small-font-weight, 600);\n}\n\n.formatted-text-medium {\n color: var-list(--tct-formatted-text-medium-color, inherit);\n font-size: var-list(--tct-formatted-text-medium-font-size, 42px);\n font-weight: var-list(--tct-formatted-text-medium-font-weight, 600);\n}\n\n.formatted-text-large {\n color: var-list(--tct-formatted-text-large-color, inherit);\n font-size: var-list(--tct-formatted-text-large-font-size, 70px);\n font-weight: var-list(--tct-formatted-text-large-font-weight, 700);\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n@Component({ tag: 'q2-formatted-text', shadow: true, styleUrl: 'q2-formatted-text.scss' })\nexport class Q2FormattedText implements ComponentInterface {\n // #region Own Properties\n\n /** @private The formatted text to display */\n formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /**\n * The format style for the number.\n * - `decimal`: Standard number formatting, locale-aware (default).\n * - `percent`: Percentage formatting, locale-aware.\n */\n @Prop({ reflect: true })\n format: 'decimal' | 'percent' = 'decimal';\n\n /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n @Prop({ reflect: true })\n locale: string | string[] = document.documentElement.lang || 'en-US';\n\n /** The maximum number of fraction digits to use. */\n @Prop({ reflect: false })\n maximumFractionDigits: number = 2;\n\n /** The minimum number of fraction digits to use. */\n @Prop({ reflect: false })\n minimumFractionDigits: number = 2;\n\n /** The minimum number of integer digits to use. */\n @Prop({ reflect: false })\n minimumIntegerDigits: number = 1;\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 })\n signDisplay: 'never' | 'auto' | 'always' | 'exceptZero' = 'auto';\n\n /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n @Prop({ reflect: true })\n size: 'small' | 'medium' | 'large' | undefined;\n\n /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts. */\n @Prop({ reflect: true })\n slotSize: string;\n\n /** The value you want formatted. */\n @Prop({ reflect: true })\n value: number;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void | Promise<void> {\n this.formatValue();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('value')\n @Watch('locale')\n @Watch('size')\n @Watch('slotSize')\n @Watch('signDisplay')\n @Watch('format')\n propsUpdated() {\n this.formatValue();\n }\n\n // #endregion\n // #region Local Methods\n\n get formattedTextClasses(): string {\n const classes = ['formatted-text'];\n const sizeClass = this.size ? this.size : this.slotSize;\n if (!!sizeClass) classes.push(`formatted-text-${sizeClass}`);\n return classes.join(' ');\n }\n\n formatValue() {\n const options: Record<string, any> = {\n style: this.format,\n signDisplay: this.signDisplay,\n };\n if (!isNaN(this.minimumIntegerDigits)) options.minimumIntegerDigits = this.minimumIntegerDigits;\n if (!isNaN(this.minimumFractionDigits)) options.minimumFractionDigits = this.minimumFractionDigits;\n if (!isNaN(this.maximumFractionDigits)) options.maximumFractionDigits = this.maximumFractionDigits;\n\n // For percent format, divide by 100 so users can pass intuitive values (e.g., 25 → 25%, 0.5 → 0.5%, 100 → 100%)\n const valueToFormat = this.format === 'percent' ? this.value / 100 : this.value;\n this.formattedValue = new Intl.NumberFormat(this.locale, options).format(valueToFormat).trim();\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { formattedTextClasses } = this;\n\n return (\n <div\n class={formattedTextClasses}\n aria-label={this.formattedValue}\n >\n <span>{this.formattedValue}</span>\n </div>\n );\n }\n\n // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAqB;;MCEdC,IAAe;EAD5B,WAAAC,CAAAC;;;;;;;;eAgBIC,KAAMC,SAA0B;8GAIhCD,KAAME,SAAsBC,SAASC,gBAAgBC,QAAQ;6DAI7DL,KAAqBM,wBAAW;6DAIhCN,KAAqBO,wBAAW;4DAIhCP,KAAoBQ,uBAAW;;;;;;;;;eAY/BR,KAAWS,cAA+C;AA2E7D;;;EA1DG,iBAAAC;IACIV,KAAKW;;;;EAYT,YAAAC;IACIZ,KAAKW;;;;EAMT,wBAAIE;IACA,MAAMC,IAAU,EAAC;IACjB,MAAMC,IAAYf,KAAKgB,OAAOhB,KAAKgB,OAAOhB,KAAKiB;IAC/C,MAAMF,GAAWD,EAAQI,KAAK,kBAAkBH;IAChD,OAAOD,EAAQK,KAAK;;EAGxB,WAAAR;IACI,MAAMS,IAA+B;MACjCC,OAAOrB,KAAKC;MACZQ,aAAaT,KAAKS;;IAEtB,KAAKa,MAAMtB,KAAKQ,uBAAuBY,EAAQZ,uBAAuBR,KAAKQ;IAC3E,KAAKc,MAAMtB,KAAKO,wBAAwBa,EAAQb,wBAAwBP,KAAKO;IAC7E,KAAKe,MAAMtB,KAAKM,wBAAwBc,EAAQd,wBAAwBN,KAAKM;;QAG7E,MAAMiB,IAAgBvB,KAAKC,WAAW,YAAYD,KAAKwB,QAAQ,MAAMxB,KAAKwB;IAC1ExB,KAAKyB,iBAAiB,IAAIC,KAAKC,aAAa3B,KAAKE,QAAQkB,GAASnB,OAAOsB,GAAeK;;;;EAM5F,MAAAC;IACI,OAAMhB,sBAAEA,KAAyBb;IAEjC,OACI8B,EAAA;MAAAC,KAAA;MACIC,OAAOnB;MACK,cAAAb,KAAKyB;OAEjBK,EAAA;MAAAC,KAAA;OAAO/B,KAAKyB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"q2-icon.entry.esm.js","sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n transition: var(--tct-icon-transition, none);\n\n &.brand {\n stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n }\n\n &.browsersos {\n stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n }\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n // #region Own Properties\n\n spriteGroup: SVGElement;\n spritePrefix: string = 'tecton-sprite-';\n spriteUse: SVGElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n iconClone: SVGSymbolElement;\n\n // #endregion\n // #region Public Property API\n\n /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n @Prop({ reflect: true })\n inline: boolean;\n\n /** The text that is presented by screen-readers when they encounter the icon. */\n @Prop({ reflect: true })\n label: string;\n\n /** The name of the icon to be displayed. */\n @Prop({ reflect: true })\n type: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.spriteGroup = null;\n this.spriteUse = null;\n }\n\n componentWillLoad() {\n this.handleIcon();\n }\n\n componentDidRender(): void {\n if (!this.iconClone) return;\n this.spriteGroup?.firstElementChild?.remove();\n const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleIcon() {\n if (this.isCustom) {\n this.setCustomSVGAttrs();\n } else if (this.type) {\n this.fetchSprite();\n } else {\n this.iconClone = null;\n this.spriteGroup?.firstElementChild?.remove();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get iconCloneViewBox() {\n return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n get spriteElement() {\n const { spriteId } = this;\n if (!spriteId) return;\n return document.querySelector<HTMLElement>(`#${spriteId}`);\n }\n\n get spriteEventName() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tct-loaded-${spriteFileName}`;\n }\n\n get spriteFileName() {\n if (this.isCustom) return;\n return iconMap[this.type];\n }\n\n get spriteId() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `${this.spritePrefix}${spriteFileName}`;\n }\n\n checkForSprite() {\n const { spriteId, spriteEventName } = this;\n const spriteContainer = getOrCreateSpriteContainer();\n let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n this.cloneSpriteNode();\n return true;\n }\n\n // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the sprite is loaded\n spriteContainer.addEventListener(\n spriteEventName,\n () => {\n this.cloneSpriteNode();\n },\n { once: true }\n );\n\n // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n if (spriteElement) return true;\n\n // If sprite element does not exist, create a placeholder\n // This will let other icons know the sprite is being loaded\n spriteElement = document.createElement('div');\n spriteElement.id = spriteId;\n spriteContainer.appendChild(spriteElement);\n return false;\n }\n\n cloneSpriteNode() {\n const spriteNode = document.getElementById(`tct-${this.type}`);\n this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n }\n\n async fetchSprite() {\n const { spriteFileName, spriteId, spriteEventName } = this;\n\n const spriteExists = this.checkForSprite();\n if (spriteExists) return;\n\n if (!spriteFileName) return;\n const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n const response = await fetch(spritePath);\n const data = await response.text();\n const wrappingDiv = document.createElement('div');\n wrappingDiv.innerHTML = data;\n const svg = wrappingDiv.querySelector('svg');\n\n svg.id = spriteId;\n svg.setAttribute('data-loaded', '');\n\n let { spriteElement } = this;\n if (spriteElement?.tagName === 'SVG') return;\n\n if (typeof spriteElement.replaceWith === 'function') {\n spriteElement.replaceWith(svg);\n } else {\n spriteElement.parentNode.replaceChild(svg, spriteElement);\n }\n\n spriteElement = document.getElementById(spriteId);\n spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n }\n\n setCustomSVGAttrs() {\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label, type } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n aria-hidden={!!label ? undefined : 'true'}\n role={!!label ? 'img' : undefined}\n aria-labelledby={!!label ? 'label' : undefined}\n viewBox={this.iconCloneViewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n class={this.spriteFileName}\n >\n {!!label && <title id=\"label\">{label}</title>}\n {!!type && <use ref={el => (this.spriteUse = el)} />}\n <g ref={el => (this.spriteGroup = el)}></g>\n </svg>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"q2-icon.entry.esm.js","sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n transition: var(--tct-icon-transition, none);\n\n &.brand {\n stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n }\n\n &.browsersos {\n stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n }\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n // #region Own Properties\n\n spriteGroup: SVGElement;\n spritePrefix: string = 'tecton-sprite-';\n spriteUse: SVGElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n iconClone: SVGSymbolElement;\n\n // #endregion\n // #region Public Property API\n\n /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n @Prop({ reflect: true })\n inline: boolean;\n\n /** The text that is presented by screen-readers when they encounter the icon. */\n @Prop({ reflect: true })\n label: string;\n\n /** The name of the icon to be displayed. */\n @Prop({ reflect: true })\n type: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.spriteGroup = null;\n this.spriteUse = null;\n }\n\n componentWillLoad() {\n this.handleIcon();\n }\n\n componentDidRender(): void {\n if (!this.iconClone) return;\n this.spriteGroup?.firstElementChild?.remove();\n const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleIcon() {\n if (this.isCustom) {\n this.setCustomSVGAttrs();\n } else if (this.type) {\n this.fetchSprite();\n } else {\n this.iconClone = null;\n this.spriteGroup?.firstElementChild?.remove();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get iconCloneViewBox() {\n return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n get spriteElement() {\n const { spriteId } = this;\n if (!spriteId) return;\n return document.querySelector<HTMLElement>(`#${spriteId}`);\n }\n\n get spriteEventName() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tct-loaded-${spriteFileName}`;\n }\n\n get spriteFileName() {\n if (this.isCustom) return;\n return iconMap[this.type];\n }\n\n get spriteId() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `${this.spritePrefix}${spriteFileName}`;\n }\n\n checkForSprite() {\n const { spriteId, spriteEventName } = this;\n const spriteContainer = getOrCreateSpriteContainer();\n let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n this.cloneSpriteNode();\n return true;\n }\n\n // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the sprite is loaded\n spriteContainer.addEventListener(\n spriteEventName,\n () => {\n this.cloneSpriteNode();\n },\n { once: true }\n );\n\n // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n if (spriteElement) return true;\n\n // If sprite element does not exist, create a placeholder\n // This will let other icons know the sprite is being loaded\n spriteElement = document.createElement('div');\n spriteElement.id = spriteId;\n spriteContainer.appendChild(spriteElement);\n return false;\n }\n\n cloneSpriteNode() {\n const spriteNode = document.getElementById(`tct-${this.type}`);\n this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n }\n\n async fetchSprite() {\n const { spriteFileName, spriteId, spriteEventName } = this;\n\n const spriteExists = this.checkForSprite();\n if (spriteExists) return;\n\n if (!spriteFileName) return;\n const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n const response = await fetch(spritePath);\n const data = await response.text();\n const wrappingDiv = document.createElement('div');\n wrappingDiv.innerHTML = data;\n const svg = wrappingDiv.querySelector('svg');\n\n svg.id = spriteId;\n svg.setAttribute('data-loaded', '');\n\n let { spriteElement } = this;\n if (spriteElement?.tagName === 'SVG') return;\n\n if (typeof spriteElement.replaceWith === 'function') {\n spriteElement.replaceWith(svg);\n } else {\n spriteElement.parentNode.replaceChild(svg, spriteElement);\n }\n\n spriteElement = document.getElementById(spriteId);\n spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n }\n\n setCustomSVGAttrs() {\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label, type } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n aria-hidden={!!label ? undefined : 'true'}\n role={!!label ? 'img' : undefined}\n aria-labelledby={!!label ? 'label' : undefined}\n viewBox={this.iconCloneViewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n class={this.spriteFileName}\n >\n {!!label && <title id=\"label\">{label}</title>}\n {!!type && <use ref={el => (this.spriteUse = el)} />}\n <g ref={el => (this.spriteGroup = el)}></g>\n </svg>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["q2IconCss","Q2Icon","constructor","hostRef","this","spritePrefix","disconnectedCallback","spriteGroup","spriteUse","componentWillLoad","handleIcon","componentDidRender","iconClone","_b","_a","firstElementChild","remove","appendedClone","_c","appendChild","_d","setAttribute","id","isCustom","setCustomSVGAttrs","type","fetchSprite","iconCloneViewBox","getAttribute","spriteElement","spriteId","document","querySelector","spriteEventName","spriteFileName","iconMap","checkForSprite","spriteContainer","getOrCreateSpriteContainer","getElementById","hasAttribute","cloneSpriteNode","addEventListener","once","createElement","spriteNode","cloneNode","undefined","spriteExists","spritePath","getAssetPath","response","fetch","data","text","wrappingDiv","innerHTML","svg","tagName","replaceWith","parentNode","replaceChild","dispatchEvent","CustomEvent","bubbles","innerSVG","hostElement","label","title","labelId","createGuid","textContent","render","h","role","viewBox","xmlns","class","ref","el"],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n transition: var(--tct-icon-transition, none);\n\n &.brand {\n stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n }\n\n &.browsersos {\n stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n }\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n // #region Own Properties\n\n spriteGroup: SVGElement;\n spritePrefix: string = 'tecton-sprite-';\n spriteUse: SVGElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n iconClone: SVGSymbolElement;\n\n // #endregion\n // #region Public Property API\n\n /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n @Prop({ reflect: true })\n inline: boolean;\n\n /** The text that is presented by screen-readers when they encounter the icon. */\n @Prop({ reflect: true })\n label: string;\n\n /** The name of the icon to be displayed. */\n @Prop({ reflect: true })\n type: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.spriteGroup = null;\n this.spriteUse = null;\n }\n\n componentWillLoad() {\n this.handleIcon();\n }\n\n componentDidRender(): void {\n if (!this.iconClone) return;\n this.spriteGroup?.firstElementChild?.remove();\n const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleIcon() {\n if (this.isCustom) {\n this.setCustomSVGAttrs();\n } else if (this.type) {\n this.fetchSprite();\n } else {\n this.iconClone = null;\n this.spriteGroup?.firstElementChild?.remove();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get iconCloneViewBox() {\n return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n get spriteElement() {\n const { spriteId } = this;\n if (!spriteId) return;\n return document.querySelector<HTMLElement>(`#${spriteId}`);\n }\n\n get spriteEventName() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tct-loaded-${spriteFileName}`;\n }\n\n get spriteFileName() {\n if (this.isCustom) return;\n return iconMap[this.type];\n }\n\n get spriteId() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `${this.spritePrefix}${spriteFileName}`;\n }\n\n checkForSprite() {\n const { spriteId, spriteEventName } = this;\n const spriteContainer = getOrCreateSpriteContainer();\n let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n this.cloneSpriteNode();\n return true;\n }\n\n // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the sprite is loaded\n spriteContainer.addEventListener(\n spriteEventName,\n () => {\n this.cloneSpriteNode();\n },\n { once: true }\n );\n\n // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n if (spriteElement) return true;\n\n // If sprite element does not exist, create a placeholder\n // This will let other icons know the sprite is being loaded\n spriteElement = document.createElement('div');\n spriteElement.id = spriteId;\n spriteContainer.appendChild(spriteElement);\n return false;\n }\n\n cloneSpriteNode() {\n const spriteNode = document.getElementById(`tct-${this.type}`);\n this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n }\n\n async fetchSprite() {\n const { spriteFileName, spriteId, spriteEventName } = this;\n\n const spriteExists = this.checkForSprite();\n if (spriteExists) return;\n\n if (!spriteFileName) return;\n const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n const response = await fetch(spritePath);\n const data = await response.text();\n const wrappingDiv = document.createElement('div');\n wrappingDiv.innerHTML = data;\n const svg = wrappingDiv.querySelector('svg');\n\n svg.id = spriteId;\n svg.setAttribute('data-loaded', '');\n\n let { spriteElement } = this;\n if (spriteElement?.tagName === 'SVG') return;\n\n if (typeof spriteElement.replaceWith === 'function') {\n spriteElement.replaceWith(svg);\n } else {\n spriteElement.parentNode.replaceChild(svg, spriteElement);\n }\n\n spriteElement = document.getElementById(spriteId);\n spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n }\n\n setCustomSVGAttrs() {\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label, type } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n aria-hidden={!!label ? undefined : 'true'}\n role={!!label ? 'img' : undefined}\n aria-labelledby={!!label ? 'label' : undefined}\n viewBox={this.iconCloneViewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n class={this.spriteFileName}\n >\n {!!label && <title id=\"label\">{label}</title>}\n {!!type && <use ref={el => (this.spriteUse = el)} />}\n <g ref={el => (this.spriteGroup = el)}></g>\n </svg>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["q2IconCss","Q2Icon","constructor","hostRef","this","spritePrefix","disconnectedCallback","spriteGroup","spriteUse","componentWillLoad","handleIcon","componentDidRender","iconClone","_b","_a","firstElementChild","remove","appendedClone","_c","appendChild","_d","setAttribute","id","isCustom","setCustomSVGAttrs","type","fetchSprite","iconCloneViewBox","getAttribute","spriteElement","spriteId","document","querySelector","spriteEventName","spriteFileName","iconMap","checkForSprite","spriteContainer","getOrCreateSpriteContainer","getElementById","hasAttribute","cloneSpriteNode","addEventListener","once","createElement","spriteNode","cloneNode","undefined","spriteExists","spritePath","getAssetPath","response","fetch","data","text","wrappingDiv","innerHTML","svg","tagName","replaceWith","parentNode","replaceChild","dispatchEvent","CustomEvent","bubbles","innerSVG","hostElement","label","title","labelId","createGuid","textContent","render","h","role","viewBox","xmlns","class","ref","el"],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n transition: var(--tct-icon-transition, none);\n\n &.brand {\n stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n }\n\n &.browsersos {\n stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n }\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n // #region Own Properties\n\n spriteGroup: SVGElement;\n spritePrefix: string = 'tecton-sprite-';\n spriteUse: SVGElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n iconClone: SVGSymbolElement;\n\n // #endregion\n // #region Public Property API\n\n /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n @Prop({ reflect: true })\n inline: boolean;\n\n /** The text that is presented by screen-readers when they encounter the icon. */\n @Prop({ reflect: true })\n label: string;\n\n /** The name of the icon to be displayed. */\n @Prop({ reflect: true })\n type: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.spriteGroup = null;\n this.spriteUse = null;\n }\n\n componentWillLoad() {\n this.handleIcon();\n }\n\n componentDidRender(): void {\n if (!this.iconClone) return;\n this.spriteGroup?.firstElementChild?.remove();\n const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleIcon() {\n if (this.isCustom) {\n this.setCustomSVGAttrs();\n } else if (this.type) {\n this.fetchSprite();\n } else {\n this.iconClone = null;\n this.spriteGroup?.firstElementChild?.remove();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get iconCloneViewBox() {\n return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n get spriteElement() {\n const { spriteId } = this;\n if (!spriteId) return;\n return document.querySelector<HTMLElement>(`#${spriteId}`);\n }\n\n get spriteEventName() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tct-loaded-${spriteFileName}`;\n }\n\n get spriteFileName() {\n if (this.isCustom) return;\n return iconMap[this.type];\n }\n\n get spriteId() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `${this.spritePrefix}${spriteFileName}`;\n }\n\n checkForSprite() {\n const { spriteId, spriteEventName } = this;\n const spriteContainer = getOrCreateSpriteContainer();\n let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n this.cloneSpriteNode();\n return true;\n }\n\n // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the sprite is loaded\n spriteContainer.addEventListener(\n spriteEventName,\n () => {\n this.cloneSpriteNode();\n },\n { once: true }\n );\n\n // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n if (spriteElement) return true;\n\n // If sprite element does not exist, create a placeholder\n // This will let other icons know the sprite is being loaded\n spriteElement = document.createElement('div');\n spriteElement.id = spriteId;\n spriteContainer.appendChild(spriteElement);\n return false;\n }\n\n cloneSpriteNode() {\n const spriteNode = document.getElementById(`tct-${this.type}`);\n this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n }\n\n async fetchSprite() {\n const { spriteFileName, spriteId, spriteEventName } = this;\n\n const spriteExists = this.checkForSprite();\n if (spriteExists) return;\n\n if (!spriteFileName) return;\n const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n const response = await fetch(spritePath);\n const data = await response.text();\n const wrappingDiv = document.createElement('div');\n wrappingDiv.innerHTML = data;\n const svg = wrappingDiv.querySelector('svg');\n\n svg.id = spriteId;\n svg.setAttribute('data-loaded', '');\n\n let { spriteElement } = this;\n if (spriteElement?.tagName === 'SVG') return;\n\n if (typeof spriteElement.replaceWith === 'function') {\n spriteElement.replaceWith(svg);\n } else {\n spriteElement.parentNode.replaceChild(svg, spriteElement);\n }\n\n spriteElement = document.getElementById(spriteId);\n spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n }\n\n setCustomSVGAttrs() {\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label, type } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n aria-hidden={!!label ? undefined : 'true'}\n role={!!label ? 'img' : undefined}\n aria-labelledby={!!label ? 'label' : undefined}\n viewBox={this.iconCloneViewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n class={this.spriteFileName}\n >\n {!!label && <title id=\"label\">{label}</title>}\n {!!type && <use ref={el => (this.spriteUse = el)} />}\n <g ref={el => (this.spriteGroup = el)}></g>\n </svg>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
|