@ukic/web-components 2.9.0 → 2.11.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/core.cjs.js +3 -3
- package/dist/cjs/core.cjs.js.map +1 -1
- package/dist/cjs/{helpers-3f91f63a.js → helpers-56e80cc9.js} +6 -6
- package/dist/cjs/{helpers-3f91f63a.js.map → helpers-56e80cc9.js.map} +1 -1
- package/dist/cjs/ic-accordion-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-accordion.cjs.entry.js +2 -2
- package/dist/cjs/ic-alert.cjs.entry.js +2 -2
- package/dist/cjs/ic-back-to-top.cjs.entry.js +5 -9
- package/dist/cjs/ic-back-to-top.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-badge.cjs.entry.js +2 -2
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +2 -2
- package/dist/cjs/ic-button_3.cjs.entry.js +70 -36
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card.cjs.entry.js +2 -2
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/ic-chip.cjs.entry.js +2 -2
- package/dist/cjs/ic-classification-banner.cjs.entry.js +1 -1
- package/dist/cjs/ic-data-entity.cjs.entry.js +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +2 -2
- package/dist/cjs/ic-dialog.cjs.entry.js +2 -2
- package/dist/cjs/ic-divider.cjs.entry.js +2 -2
- package/dist/cjs/ic-empty-state.cjs.entry.js +2 -2
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-footer-link.cjs.entry.js +2 -2
- package/dist/cjs/ic-footer.cjs.entry.js +2 -2
- package/dist/cjs/ic-hero.cjs.entry.js +2 -2
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +2 -2
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +16 -24
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js +2 -2
- package/dist/cjs/ic-link.cjs.entry.js +2 -2
- package/dist/cjs/ic-menu-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-menu-item.cjs.entry.js +3 -3
- package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-button.cjs.entry.js +2 -2
- package/dist/cjs/ic-navigation-group.cjs.entry.js +6 -9
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +2 -2
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-menu.cjs.entry.js +2 -2
- package/dist/cjs/ic-page-header.cjs.entry.js +7 -4
- package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-pagination-item.cjs.entry.js +2 -2
- package/dist/cjs/ic-pagination.cjs.entry.js +2 -2
- package/dist/cjs/ic-popover-menu.cjs.entry.js +4 -2
- package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-radio-option.cjs.entry.js +2 -2
- package/dist/cjs/ic-search-bar.cjs.entry.js +2 -2
- package/dist/cjs/ic-section-container.cjs.entry.js +1 -1
- package/dist/cjs/ic-select.cjs.entry.js +3 -3
- package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +33 -62
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-skeleton.cjs.entry.js +1 -1
- package/dist/cjs/ic-status-tag.cjs.entry.js +4 -3
- package/dist/cjs/ic-status-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +2 -2
- package/dist/cjs/ic-stepper.cjs.entry.js +2 -2
- package/dist/cjs/ic-switch.cjs.entry.js +2 -2
- package/dist/cjs/ic-tab-context.cjs.entry.js +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/ic-tab.cjs.entry.js +2 -2
- package/dist/cjs/ic-text-field.cjs.entry.js +4 -4
- package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-theme.cjs.entry.js +2 -2
- package/dist/cjs/ic-toast-region.cjs.entry.js +1 -1
- package/dist/cjs/ic-toast.cjs.entry.js +13 -16
- package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js +69 -0
- package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-top-navigation.cjs.entry.js +4 -3
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-typography.cjs.entry.js +2 -2
- package/dist/cjs/{index-152d1fe5.js → index-f982899d.js} +6 -12
- package/dist/cjs/index-f982899d.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/assets/arrow-dropdown.svg +3 -0
- package/dist/collection/collection-manifest.json +3 -2
- package/dist/collection/components/ic-accordion/ic-accordion.js.map +1 -1
- package/dist/collection/components/ic-accordion-group/ic-accordion-group.js.map +1 -1
- package/dist/collection/components/ic-back-to-top/ic-back-to-top.js +3 -7
- package/dist/collection/components/ic-back-to-top/ic-back-to-top.js.map +1 -1
- package/dist/collection/components/ic-badge/ic-badge.js.map +1 -1
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js.map +1 -1
- package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js.map +1 -1
- package/dist/collection/components/ic-button/ic-button.css +31 -2
- package/dist/collection/components/ic-button/ic-button.js +63 -3
- package/dist/collection/components/ic-button/ic-button.js.map +1 -1
- package/dist/collection/components/ic-card/ic-card.js.map +1 -1
- package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
- package/dist/collection/components/ic-chip/ic-chip.js.map +1 -1
- package/dist/collection/components/ic-data-entity/ic-data-entity.js.map +1 -1
- package/dist/collection/components/ic-data-row/ic-data-row.js.map +1 -1
- package/dist/collection/components/ic-dialog/ic-dialog.js.map +1 -1
- package/dist/collection/components/ic-footer/ic-footer.js.map +1 -1
- package/dist/collection/components/ic-footer-link/ic-footer-link.js.map +1 -1
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js.map +1 -1
- package/dist/collection/components/ic-hero/ic-hero.js.map +1 -1
- package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js.map +1 -1
- package/dist/collection/components/ic-link/ic-link.js.map +1 -1
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js.map +1 -1
- package/dist/collection/components/ic-menu/ic-menu.js +14 -22
- package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
- package/dist/collection/components/ic-menu/test/basic/ic-menu.spec.js +60 -2
- package/dist/collection/components/ic-menu/test/basic/ic-menu.spec.js.map +1 -1
- package/dist/collection/components/ic-menu-item/ic-menu-item.css +16 -16
- package/dist/collection/components/ic-menu-item/ic-menu-item.js.map +1 -1
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.js.map +1 -1
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js +4 -7
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js.map +1 -1
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.css +28 -7
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
- package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js.map +1 -1
- package/dist/collection/components/ic-page-header/ic-page-header.css +1 -1
- package/dist/collection/components/ic-page-header/ic-page-header.js +4 -1
- package/dist/collection/components/ic-page-header/ic-page-header.js.map +1 -1
- package/dist/collection/components/ic-pagination/ic-pagination.js.map +1 -1
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +19 -0
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map +1 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
- package/dist/collection/components/ic-radio-option/ic-radio-option.js.map +1 -1
- package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
- package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.e2e.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select.css +1 -0
- package/dist/collection/components/ic-select/ic-select.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +31 -60
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
- package/dist/collection/components/ic-skeleton/ic-skeleton.js.map +1 -1
- package/dist/collection/components/ic-status-tag/ic-status-tag.css +9 -0
- package/dist/collection/components/ic-status-tag/ic-status-tag.js +1 -0
- package/dist/collection/components/ic-status-tag/ic-status-tag.js.map +1 -1
- package/dist/collection/components/ic-step/ic-step.js.map +1 -1
- package/dist/collection/components/ic-stepper/ic-stepper.js.map +1 -1
- package/dist/collection/components/ic-stepper/test/basic/ic-stepper.spec.js.map +1 -1
- package/dist/collection/components/ic-switch/ic-switch.js.map +1 -1
- package/dist/collection/components/ic-tab/ic-tab.js.map +1 -1
- package/dist/collection/components/ic-tab-context/ic-tab-context.js.map +1 -1
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.js.map +1 -1
- package/dist/collection/components/ic-text-field/ic-text-field.js +2 -2
- package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
- package/dist/collection/components/ic-theme/ic-theme.js.map +1 -1
- package/dist/collection/components/ic-toast/ic-toast.js +11 -14
- package/dist/collection/components/ic-toast/ic-toast.js.map +1 -1
- package/dist/collection/components/ic-toast-region/ic-toast-region.js.map +1 -1
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.css +555 -0
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +291 -0
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map +1 -0
- package/dist/collection/components/ic-toggle-button/test/basic/ic-toggle-button.spec.js +116 -0
- package/dist/collection/components/ic-toggle-button/test/basic/ic-toggle-button.spec.js.map +1 -0
- package/dist/collection/components/ic-tooltip/ic-tooltip.js +59 -30
- package/dist/collection/components/ic-tooltip/ic-tooltip.js.map +1 -1
- package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.spec.js +11 -0
- package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.spec.js.map +1 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js +2 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js.map +1 -1
- package/dist/collection/components/ic-typography/ic-typography.js.map +1 -1
- package/dist/collection/utils/helpers.js +5 -5
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/components/helpers.js +5 -5
- package/dist/components/ic-back-to-top.js +3 -7
- package/dist/components/ic-back-to-top.js.map +1 -1
- package/dist/components/ic-button2.js +32 -4
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-menu-item2.js +1 -1
- package/dist/components/ic-menu-item2.js.map +1 -1
- package/dist/components/ic-menu2.js +14 -22
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-group.js +4 -7
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-page-header.js +5 -2
- package/dist/components/ic-page-header.js.map +1 -1
- package/dist/components/ic-popover-menu.js +3 -1
- package/dist/components/ic-popover-menu.js.map +1 -1
- package/dist/components/ic-select.js +1 -1
- package/dist/components/ic-select.js.map +1 -1
- package/dist/components/ic-side-navigation.js +31 -60
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-status-tag.js +2 -1
- package/dist/components/ic-status-tag.js.map +1 -1
- package/dist/components/ic-text-field2.js +2 -2
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-toast.js +11 -14
- package/dist/components/ic-toast.js.map +1 -1
- package/dist/components/ic-toggle-button.d.ts +11 -0
- package/dist/components/ic-toggle-button.js +117 -0
- package/dist/components/ic-toggle-button.js.map +1 -0
- package/dist/components/ic-tooltip2.js +39 -30
- package/dist/components/ic-tooltip2.js.map +1 -1
- package/dist/components/ic-top-navigation.js +2 -1
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/core/core.css +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/{p-daebb58a.entry.js → p-003c44bd.entry.js} +2 -2
- package/dist/core/{p-b6a575c3.entry.js → p-049bf5e3.entry.js} +2 -2
- package/dist/core/p-0713230f.entry.js +2 -0
- package/dist/core/p-0713230f.entry.js.map +1 -0
- package/dist/core/{p-ea17e371.entry.js → p-0a0b748c.entry.js} +2 -2
- package/dist/core/{p-d18450f9.entry.js → p-0d2eb765.entry.js} +2 -2
- package/dist/core/{p-6d3f9501.entry.js → p-0ee13da0.entry.js} +2 -2
- package/dist/core/{p-15466b42.entry.js → p-1145e33c.entry.js} +2 -2
- package/dist/core/{p-056f8a67.entry.js → p-171e25c9.entry.js} +2 -2
- package/dist/core/{p-51f9f329.entry.js → p-1e809ecd.entry.js} +2 -2
- package/dist/core/p-1e809ecd.entry.js.map +1 -0
- package/dist/core/{p-5f9d69ef.entry.js → p-22208df0.entry.js} +2 -2
- package/dist/core/p-22208df0.entry.js.map +1 -0
- package/dist/core/{p-ad36a704.entry.js → p-26334b3a.entry.js} +2 -2
- package/dist/core/{p-dbb5b008.entry.js → p-29b812c0.entry.js} +2 -2
- package/dist/core/{p-b9736cf4.entry.js → p-2e7f22af.entry.js} +2 -2
- package/dist/core/{p-aa0a9870.entry.js → p-357eaebe.entry.js} +2 -2
- package/dist/core/{p-9639e33f.entry.js → p-38bf02aa.entry.js} +2 -2
- package/dist/core/{p-b99f9e89.entry.js → p-3c752bca.entry.js} +2 -2
- package/dist/core/{p-3a0ef91e.entry.js → p-3cc52cbc.entry.js} +2 -2
- package/dist/core/{p-e278242f.entry.js → p-3ebe5fa3.entry.js} +2 -2
- package/dist/core/p-3ebe5fa3.entry.js.map +1 -0
- package/dist/core/{p-5c7e339f.entry.js → p-3f07c471.entry.js} +2 -2
- package/dist/core/p-3f07c471.entry.js.map +1 -0
- package/dist/core/{p-c770e7a2.entry.js → p-42c0e318.entry.js} +2 -2
- package/dist/core/{p-2b24b4bf.entry.js → p-4421203e.entry.js} +2 -2
- package/dist/core/{p-11736fbe.entry.js → p-4f1792a6.entry.js} +2 -2
- package/dist/core/{p-b39ecae2.entry.js → p-4f8b7aa3.entry.js} +2 -2
- package/dist/core/{p-8a83f391.entry.js → p-525323ab.entry.js} +2 -2
- package/dist/core/{p-c2452388.entry.js → p-5894f6aa.entry.js} +2 -2
- package/dist/core/{p-e9738c74.entry.js → p-59c4bc0a.entry.js} +2 -2
- package/dist/core/{p-60c4604f.entry.js → p-5adaf5c3.entry.js} +2 -2
- package/dist/core/{p-95a864bf.js → p-671b7cac.js} +1 -1
- package/dist/core/p-6b5e91e2.js +3 -0
- package/dist/core/p-6b5e91e2.js.map +1 -0
- package/dist/core/p-6bbe0550.entry.js +2 -0
- package/dist/core/p-6bbe0550.entry.js.map +1 -0
- package/dist/core/{p-fdb4b48f.entry.js → p-783c2ced.entry.js} +2 -2
- package/dist/core/{p-f2e6b9ef.entry.js → p-7b720034.entry.js} +2 -2
- package/dist/core/{p-22c024ee.entry.js → p-7c724f2c.entry.js} +2 -2
- package/dist/core/{p-335fc5e4.entry.js → p-8146336b.entry.js} +2 -2
- package/dist/core/{p-cd8de4c5.entry.js → p-8931210a.entry.js} +2 -2
- package/dist/core/{p-529d8955.entry.js → p-8a66cab4.entry.js} +2 -2
- package/dist/core/{p-ca48e97a.entry.js → p-8be3ec3d.entry.js} +2 -2
- package/dist/core/{p-180e36b1.entry.js → p-8c2322a9.entry.js} +2 -2
- package/dist/core/{p-31969be6.entry.js → p-8f97463f.entry.js} +2 -2
- package/dist/core/p-8f97463f.entry.js.map +1 -0
- package/dist/core/{p-edd29edc.entry.js → p-9184e385.entry.js} +2 -2
- package/dist/core/p-9808f7c9.entry.js +2 -0
- package/dist/core/p-9808f7c9.entry.js.map +1 -0
- package/dist/core/p-9b8ab047.entry.js +2 -0
- package/dist/core/p-9b8ab047.entry.js.map +1 -0
- package/dist/core/{p-366bcb17.entry.js → p-9ee138e7.entry.js} +2 -2
- package/dist/core/p-a6143c94.entry.js +2 -0
- package/dist/core/p-a6143c94.entry.js.map +1 -0
- package/dist/core/{p-15ef0674.entry.js → p-b74f92b6.entry.js} +2 -2
- package/dist/core/p-b74f92b6.entry.js.map +1 -0
- package/dist/core/{p-e5abfadd.entry.js → p-b7a2e604.entry.js} +2 -2
- package/dist/core/{p-b0088956.entry.js → p-bb41b637.entry.js} +2 -2
- package/dist/core/{p-02159742.entry.js → p-bf93455b.entry.js} +2 -2
- package/dist/core/{p-02159742.entry.js.map → p-bf93455b.entry.js.map} +1 -1
- package/dist/core/p-c1109ec7.entry.js +2 -0
- package/dist/core/p-c1109ec7.entry.js.map +1 -0
- package/dist/core/{p-cfc930f6.entry.js → p-c75d6022.entry.js} +2 -2
- package/dist/core/{p-f0809037.entry.js → p-c786d62f.entry.js} +2 -2
- package/dist/core/{p-edec0936.entry.js → p-c7a08024.entry.js} +2 -2
- package/dist/core/{p-6eb0421d.entry.js → p-cf798ea7.entry.js} +2 -2
- package/dist/core/p-d3e54a29.entry.js +2 -0
- package/dist/core/p-d3e54a29.entry.js.map +1 -0
- package/dist/core/{p-287ab47c.entry.js → p-de87d585.entry.js} +2 -2
- package/dist/core/{p-15624e08.entry.js → p-e4d827d4.entry.js} +2 -2
- package/dist/core/{p-765bdd98.entry.js → p-e9723eaa.entry.js} +2 -2
- package/dist/core/{p-498eb7ad.entry.js → p-eb2d06c1.entry.js} +2 -2
- package/dist/core/{p-ee97e2a5.entry.js → p-f62982ae.entry.js} +2 -2
- package/dist/core/p-f62982ae.entry.js.map +1 -0
- package/dist/core/{p-94e88827.entry.js → p-f9452975.entry.js} +2 -2
- package/dist/esm/core.js +4 -4
- package/dist/esm/core.js.map +1 -1
- package/dist/esm/{helpers-c597f246.js → helpers-821dcdf2.js} +6 -6
- package/dist/esm/{helpers-c597f246.js.map → helpers-821dcdf2.js.map} +1 -1
- package/dist/esm/ic-accordion-group.entry.js +1 -1
- package/dist/esm/ic-accordion.entry.js +2 -2
- package/dist/esm/ic-alert.entry.js +2 -2
- package/dist/esm/ic-back-to-top.entry.js +5 -9
- package/dist/esm/ic-back-to-top.entry.js.map +1 -1
- package/dist/esm/ic-badge.entry.js +2 -2
- package/dist/esm/ic-breadcrumb-group.entry.js +2 -2
- package/dist/esm/ic-breadcrumb.entry.js +2 -2
- package/dist/esm/ic-button_3.entry.js +70 -36
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card.entry.js +2 -2
- package/dist/esm/ic-checkbox-group.entry.js +2 -2
- package/dist/esm/ic-checkbox.entry.js +2 -2
- package/dist/esm/ic-chip.entry.js +2 -2
- package/dist/esm/ic-classification-banner.entry.js +1 -1
- package/dist/esm/ic-data-entity.entry.js +1 -1
- package/dist/esm/ic-data-row.entry.js +2 -2
- package/dist/esm/ic-dialog.entry.js +2 -2
- package/dist/esm/ic-divider.entry.js +2 -2
- package/dist/esm/ic-empty-state.entry.js +2 -2
- package/dist/esm/ic-footer-link-group.entry.js +2 -2
- package/dist/esm/ic-footer-link.entry.js +2 -2
- package/dist/esm/ic-footer.entry.js +2 -2
- package/dist/esm/ic-hero.entry.js +2 -2
- package/dist/esm/ic-horizontal-scroll.entry.js +2 -2
- package/dist/esm/ic-input-component-container_3.entry.js +16 -24
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-input-label_2.entry.js +2 -2
- package/dist/esm/ic-link.entry.js +2 -2
- package/dist/esm/ic-menu-group.entry.js +2 -2
- package/dist/esm/ic-menu-item.entry.js +3 -3
- package/dist/esm/ic-menu-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-button.entry.js +2 -2
- package/dist/esm/ic-navigation-group.entry.js +6 -9
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +2 -2
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-menu.entry.js +2 -2
- package/dist/esm/ic-page-header.entry.js +7 -4
- package/dist/esm/ic-page-header.entry.js.map +1 -1
- package/dist/esm/ic-pagination-item.entry.js +2 -2
- package/dist/esm/ic-pagination.entry.js +2 -2
- package/dist/esm/ic-popover-menu.entry.js +4 -2
- package/dist/esm/ic-popover-menu.entry.js.map +1 -1
- package/dist/esm/ic-radio-group.entry.js +2 -2
- package/dist/esm/ic-radio-option.entry.js +2 -2
- package/dist/esm/ic-search-bar.entry.js +2 -2
- package/dist/esm/ic-section-container.entry.js +1 -1
- package/dist/esm/ic-select.entry.js +3 -3
- package/dist/esm/ic-select.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +33 -62
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-skeleton.entry.js +1 -1
- package/dist/esm/ic-status-tag.entry.js +4 -3
- package/dist/esm/ic-status-tag.entry.js.map +1 -1
- package/dist/esm/ic-step.entry.js +2 -2
- package/dist/esm/ic-stepper.entry.js +2 -2
- package/dist/esm/ic-switch.entry.js +2 -2
- package/dist/esm/ic-tab-context.entry.js +1 -1
- package/dist/esm/ic-tab-group.entry.js +2 -2
- package/dist/esm/ic-tab-panel.entry.js +2 -2
- package/dist/esm/ic-tab.entry.js +2 -2
- package/dist/esm/ic-text-field.entry.js +4 -4
- package/dist/esm/ic-text-field.entry.js.map +1 -1
- package/dist/esm/ic-theme.entry.js +2 -2
- package/dist/esm/ic-toast-region.entry.js +1 -1
- package/dist/esm/ic-toast.entry.js +13 -16
- package/dist/esm/ic-toast.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button.entry.js +65 -0
- package/dist/esm/ic-toggle-button.entry.js.map +1 -0
- package/dist/esm/ic-top-navigation.entry.js +4 -3
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/ic-typography.entry.js +2 -2
- package/dist/esm/{index-05003e1c.js → index-d1d2c456.js} +6 -12
- package/dist/esm/index-d1d2c456.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/ic-button/ic-button.d.ts +10 -0
- package/dist/types/components/ic-menu/ic-menu.d.ts +1 -0
- package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts +5 -0
- package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts +1 -1
- package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts +60 -0
- package/dist/types/components/ic-tooltip/ic-tooltip.d.ts +4 -0
- package/dist/types/components.d.ts +152 -0
- package/dist/types/interface.d.ts +3 -0
- package/hydrate/index.d.ts +1 -1
- package/hydrate/index.js +276 -197
- package/package.json +26 -17
- package/vscode-data.json +98 -0
- package/dist/cjs/index-152d1fe5.js.map +0 -1
- package/dist/collection/components/ic-accordion/test/basic/ic-accordion.e2e.js +0 -57
- package/dist/collection/components/ic-accordion/test/basic/ic-accordion.e2e.js.map +0 -1
- package/dist/collection/components/ic-accordion-group/test/a11y/ic-accordion-group.test.a11y.js +0 -31
- package/dist/collection/components/ic-accordion-group/test/a11y/ic-accordion-group.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-accordion-group/test/basic/ic-accordion-group.e2e.js +0 -117
- package/dist/collection/components/ic-accordion-group/test/basic/ic-accordion-group.e2e.js.map +0 -1
- package/dist/collection/components/ic-alert/test/a11y/ic-alert.test.a11y.js +0 -11
- package/dist/collection/components/ic-alert/test/a11y/ic-alert.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-alert/test/basic/ic-alert.e2e.js +0 -16
- package/dist/collection/components/ic-alert/test/basic/ic-alert.e2e.js.map +0 -1
- package/dist/collection/components/ic-back-to-top/test/a11y/ic-back-to-top.test.a11y.js +0 -28
- package/dist/collection/components/ic-back-to-top/test/a11y/ic-back-to-top.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.e2e.js +0 -68
- package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.e2e.js.map +0 -1
- package/dist/collection/components/ic-badge/test/a11y/ic-badge.test.a11y.js +0 -16
- package/dist/collection/components/ic-badge/test/a11y/ic-badge.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-breadcrumb-group/test/a11y/ic-breadcrumb-group.test.a11y.js +0 -21
- package/dist/collection/components/ic-breadcrumb-group/test/a11y/ic-breadcrumb-group.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group-test-examples.js +0 -35
- package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group-test-examples.js.map +0 -1
- package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.e2e.js +0 -41
- package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.e2e.js.map +0 -1
- package/dist/collection/components/ic-button/test/a11y/ic-button.test.a11y.js +0 -11
- package/dist/collection/components/ic-button/test/a11y/ic-button.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-button/test/basic/ic-button.e2e.js +0 -198
- package/dist/collection/components/ic-button/test/basic/ic-button.e2e.js.map +0 -1
- package/dist/collection/components/ic-checkbox-group/test/a11y/ic-checkbox-group.test.a11y.js +0 -16
- package/dist/collection/components/ic-checkbox-group/test/a11y/ic-checkbox-group.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.e2e.js +0 -201
- package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.e2e.js.map +0 -1
- package/dist/collection/components/ic-classification-banner/test/a11y/ic-classification-banner.test.a11y.js +0 -11
- package/dist/collection/components/ic-classification-banner/test/a11y/ic-classification-banner.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-dialog/test/a11y/ic-dialog.test.a11y.js +0 -28
- package/dist/collection/components/ic-dialog/test/a11y/ic-dialog.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-dialog/test/basic/ic-dialog.e2e.js +0 -288
- package/dist/collection/components/ic-dialog/test/basic/ic-dialog.e2e.js.map +0 -1
- package/dist/collection/components/ic-select/test/a11y/ic-select.test.a11y.js +0 -28
- package/dist/collection/components/ic-select/test/a11y/ic-select.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-select/test/basic/ic-select.e2e.js +0 -1825
- package/dist/collection/components/ic-select/test/basic/ic-select.e2e.js.map +0 -1
- package/dist/collection/components/ic-side-navigation/test/a11y/ic-side-navigation.test.a11y.js +0 -14
- package/dist/collection/components/ic-side-navigation/test/a11y/ic-side-navigation.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation-test-examples.js +0 -582
- package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation-test-examples.js.map +0 -1
- package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation.e2e.js +0 -475
- package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation.e2e.js.map +0 -1
- package/dist/collection/components/ic-toast/test/a11y/ic-toast.test.a11y.js +0 -16
- package/dist/collection/components/ic-toast/test/a11y/ic-toast.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-toast/test/basic/ic-toast.e2e.js +0 -82
- package/dist/collection/components/ic-toast/test/basic/ic-toast.e2e.js.map +0 -1
- package/dist/collection/components/ic-top-navigation/test/a11y/ic-top-navigation.test.a11y.js +0 -32
- package/dist/collection/components/ic-top-navigation/test/a11y/ic-top-navigation.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.e2e.js +0 -61
- package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.e2e.js.map +0 -1
- package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.mobile.e2e.js +0 -244
- package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.mobile.e2e.js.map +0 -1
- package/dist/core/p-15ef0674.entry.js.map +0 -1
- package/dist/core/p-31969be6.entry.js.map +0 -1
- package/dist/core/p-51f9f329.entry.js.map +0 -1
- package/dist/core/p-52e063d3.js +0 -3
- package/dist/core/p-52e063d3.js.map +0 -1
- package/dist/core/p-5c7e339f.entry.js.map +0 -1
- package/dist/core/p-5f9d69ef.entry.js.map +0 -1
- package/dist/core/p-6bc431b2.entry.js +0 -2
- package/dist/core/p-6bc431b2.entry.js.map +0 -1
- package/dist/core/p-7f887c1e.entry.js +0 -2
- package/dist/core/p-7f887c1e.entry.js.map +0 -1
- package/dist/core/p-96da1e85.entry.js +0 -2
- package/dist/core/p-96da1e85.entry.js.map +0 -1
- package/dist/core/p-988991d3.entry.js +0 -2
- package/dist/core/p-988991d3.entry.js.map +0 -1
- package/dist/core/p-9c30720d.entry.js +0 -2
- package/dist/core/p-9c30720d.entry.js.map +0 -1
- package/dist/core/p-ca178add.entry.js +0 -2
- package/dist/core/p-ca178add.entry.js.map +0 -1
- package/dist/core/p-e278242f.entry.js.map +0 -1
- package/dist/core/p-ee97e2a5.entry.js.map +0 -1
- package/dist/esm/index-05003e1c.js.map +0 -1
- package/dist/types/components/ic-accordion-group/test/a11y/ic-accordion-group.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-alert/test/a11y/ic-alert.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-back-to-top/test/a11y/ic-back-to-top.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-badge/test/a11y/ic-badge.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-breadcrumb-group/test/a11y/ic-breadcrumb-group.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group-test-examples.d.ts +0 -2
- package/dist/types/components/ic-button/test/a11y/ic-button.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-checkbox-group/test/a11y/ic-checkbox-group.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-classification-banner/test/a11y/ic-classification-banner.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-dialog/test/a11y/ic-dialog.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-select/test/a11y/ic-select.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-side-navigation/test/a11y/ic-side-navigation.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-side-navigation/test/basic/ic-side-navigation-test-examples.d.ts +0 -8
- package/dist/types/components/ic-toast/test/a11y/ic-toast.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-top-navigation/test/a11y/ic-top-navigation.test.a11y.d.ts +0 -1
- /package/dist/core/{p-daebb58a.entry.js.map → p-003c44bd.entry.js.map} +0 -0
- /package/dist/core/{p-b6a575c3.entry.js.map → p-049bf5e3.entry.js.map} +0 -0
- /package/dist/core/{p-ea17e371.entry.js.map → p-0a0b748c.entry.js.map} +0 -0
- /package/dist/core/{p-d18450f9.entry.js.map → p-0d2eb765.entry.js.map} +0 -0
- /package/dist/core/{p-6d3f9501.entry.js.map → p-0ee13da0.entry.js.map} +0 -0
- /package/dist/core/{p-15466b42.entry.js.map → p-1145e33c.entry.js.map} +0 -0
- /package/dist/core/{p-056f8a67.entry.js.map → p-171e25c9.entry.js.map} +0 -0
- /package/dist/core/{p-ad36a704.entry.js.map → p-26334b3a.entry.js.map} +0 -0
- /package/dist/core/{p-dbb5b008.entry.js.map → p-29b812c0.entry.js.map} +0 -0
- /package/dist/core/{p-b9736cf4.entry.js.map → p-2e7f22af.entry.js.map} +0 -0
- /package/dist/core/{p-aa0a9870.entry.js.map → p-357eaebe.entry.js.map} +0 -0
- /package/dist/core/{p-9639e33f.entry.js.map → p-38bf02aa.entry.js.map} +0 -0
- /package/dist/core/{p-b99f9e89.entry.js.map → p-3c752bca.entry.js.map} +0 -0
- /package/dist/core/{p-3a0ef91e.entry.js.map → p-3cc52cbc.entry.js.map} +0 -0
- /package/dist/core/{p-c770e7a2.entry.js.map → p-42c0e318.entry.js.map} +0 -0
- /package/dist/core/{p-2b24b4bf.entry.js.map → p-4421203e.entry.js.map} +0 -0
- /package/dist/core/{p-11736fbe.entry.js.map → p-4f1792a6.entry.js.map} +0 -0
- /package/dist/core/{p-b39ecae2.entry.js.map → p-4f8b7aa3.entry.js.map} +0 -0
- /package/dist/core/{p-8a83f391.entry.js.map → p-525323ab.entry.js.map} +0 -0
- /package/dist/core/{p-c2452388.entry.js.map → p-5894f6aa.entry.js.map} +0 -0
- /package/dist/core/{p-e9738c74.entry.js.map → p-59c4bc0a.entry.js.map} +0 -0
- /package/dist/core/{p-60c4604f.entry.js.map → p-5adaf5c3.entry.js.map} +0 -0
- /package/dist/core/{p-95a864bf.js.map → p-671b7cac.js.map} +0 -0
- /package/dist/core/{p-fdb4b48f.entry.js.map → p-783c2ced.entry.js.map} +0 -0
- /package/dist/core/{p-f2e6b9ef.entry.js.map → p-7b720034.entry.js.map} +0 -0
- /package/dist/core/{p-22c024ee.entry.js.map → p-7c724f2c.entry.js.map} +0 -0
- /package/dist/core/{p-335fc5e4.entry.js.map → p-8146336b.entry.js.map} +0 -0
- /package/dist/core/{p-cd8de4c5.entry.js.map → p-8931210a.entry.js.map} +0 -0
- /package/dist/core/{p-529d8955.entry.js.map → p-8a66cab4.entry.js.map} +0 -0
- /package/dist/core/{p-ca48e97a.entry.js.map → p-8be3ec3d.entry.js.map} +0 -0
- /package/dist/core/{p-180e36b1.entry.js.map → p-8c2322a9.entry.js.map} +0 -0
- /package/dist/core/{p-edd29edc.entry.js.map → p-9184e385.entry.js.map} +0 -0
- /package/dist/core/{p-366bcb17.entry.js.map → p-9ee138e7.entry.js.map} +0 -0
- /package/dist/core/{p-e5abfadd.entry.js.map → p-b7a2e604.entry.js.map} +0 -0
- /package/dist/core/{p-b0088956.entry.js.map → p-bb41b637.entry.js.map} +0 -0
- /package/dist/core/{p-cfc930f6.entry.js.map → p-c75d6022.entry.js.map} +0 -0
- /package/dist/core/{p-f0809037.entry.js.map → p-c786d62f.entry.js.map} +0 -0
- /package/dist/core/{p-edec0936.entry.js.map → p-c7a08024.entry.js.map} +0 -0
- /package/dist/core/{p-6eb0421d.entry.js.map → p-cf798ea7.entry.js.map} +0 -0
- /package/dist/core/{p-287ab47c.entry.js.map → p-de87d585.entry.js.map} +0 -0
- /package/dist/core/{p-15624e08.entry.js.map → p-e4d827d4.entry.js.map} +0 -0
- /package/dist/core/{p-765bdd98.entry.js.map → p-e9723eaa.entry.js.map} +0 -0
- /package/dist/core/{p-498eb7ad.entry.js.map → p-eb2d06c1.entry.js.map} +0 -0
- /package/dist/core/{p-94e88827.entry.js.map → p-f9452975.entry.js.map} +0 -0
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as e,h as t,H as a}from"./p-6b5e91e2.js";import{a as i}from"./p-671b7cac.js";import"./p-26b7b18f.js";const r='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}.tag{padding:var(--ic-space-xxs) var(--ic-space-sm);font-size:0.875rem;border-radius:var(--ic-space-md);display:inline-block;min-width:2.5rem;text-align:center;color:var(--ic-color-primary-text)}.small{padding:var(--ic-space-xxxs) var(--ic-space-sm);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}.filled-neutral{background-color:var(--ic-architectural-700);color:var(--ic-architectural-white)}.filled-success{background-color:var(--ic-status-success);color:var(--ic-architectural-white)}.filled-warning{background-color:var(--ic-status-warning-contrast)}.filled-danger{background-color:var(--ic-status-error);color:var(--ic-architectural-white)}.outlined{padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px))}.outlined.small{padding:var(--ic-space-1px) calc(var(--ic-space-sm) - var(--ic-space-1px))}.outlined-neutral{background-color:var(--ic-architectural-200);border:var(--ic-border-width) solid var(--ic-architectural-400)}.outlined-success{background-color:var(--ic-status-success-light);border:var(--ic-border-width) solid var(--ic-status-success)}.outlined-warning{background-color:var(--ic-status-warning-light);border:var(--ic-border-width) solid var(--ic-status-warning-dark)}.outlined-danger{background-color:var(--ic-status-error-light);border:var(--ic-border-width) solid var(--ic-status-error)}@media (forced-colors: active){.tag{border:var(--ic-hc-border);-ms-high-contrast-adjust:none;forced-color-adjust:none}}';const o=class{constructor(t){e(this,t);this.announced=false;this.appearance=undefined;this.label=undefined;this.size="default";this.small=false;this.status="neutral";this.variant="filled"}componentWillLoad(){if(this.appearance==="outlined"){this.variant="outlined"}}componentDidLoad(){i([{prop:this.label,propName:"label"}],"Status Tag")}render(){const{label:e,status:i,appearance:r,variant:o,small:n,size:s,announced:c}=this;return t(a,{role:c?"status":null,"aria-label":"Status"},t("strong",{class:{["tag"]:true,[`${r}-${i}`]:r!==undefined,[`${o}-${i}`]:true,["outlined"]:o==="outlined",["small"]:n||s==="small"}},t("ic-typography",{variant:"label-uppercase","apply-vertical-margins":false},t("span",null,e))))}};o.style=r;export{o as ic_status_tag};
|
2
|
+
//# sourceMappingURL=p-9808f7c9.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["icStatusTagCss","StatusTag","componentWillLoad","this","appearance","variant","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","render","status","small","size","announced","h","Host","role","class","undefined"],"sources":["src/components/ic-status-tag/ic-status-tag.css?tag=ic-status-tag&encapsulation=shadow","src/components/ic-status-tag/ic-status-tag.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.tag {\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n font-size: 0.875rem;\n border-radius: var(--ic-space-md);\n display: inline-block;\n min-width: 2.5rem;\n text-align: center;\n color: var(--ic-color-primary-text);\n}\n\n.small {\n padding: var(--ic-space-xxxs) var(--ic-space-sm);\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.filled-neutral {\n background-color: var(--ic-architectural-700);\n color: var(--ic-architectural-white);\n}\n\n.filled-success {\n background-color: var(--ic-status-success);\n color: var(--ic-architectural-white);\n}\n\n.filled-warning {\n background-color: var(--ic-status-warning-contrast);\n}\n\n.filled-danger {\n background-color: var(--ic-status-error);\n color: var(--ic-architectural-white);\n}\n\n.outlined {\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined.small {\n padding: var(--ic-space-1px) calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined-neutral {\n background-color: var(--ic-architectural-200);\n border: var(--ic-border-width) solid var(--ic-architectural-400);\n}\n\n.outlined-success {\n background-color: var(--ic-status-success-light);\n border: var(--ic-border-width) solid var(--ic-status-success);\n}\n\n.outlined-warning {\n background-color: var(--ic-status-warning-light);\n border: var(--ic-border-width) solid var(--ic-status-warning-dark);\n}\n\n.outlined-danger {\n background-color: var(--ic-status-error-light);\n border: var(--ic-border-width) solid var(--ic-status-error);\n}\n\n@media (forced-colors: active) {\n .tag {\n border: var(--ic-hc-border);\n -ms-high-contrast-adjust: none;\n forced-color-adjust: none;\n }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcStatusTagStatuses,\n IcStatusTagAppearance,\n} from \"./ic-status-tag.types\";\nimport { IcEmphasisType, IcSizesNoLarge } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-status-tag\",\n styleUrl: \"ic-status-tag.css\",\n shadow: true,\n})\nexport class StatusTag {\n /**\n * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n */\n @Prop() announced?: boolean = false;\n\n /**\n * @deprecated This prop should not be used anymore. Use variant prop instead.\n */\n @Prop() appearance?: IcStatusTagAppearance;\n\n /**\n * The content rendered within the status tag.\n */\n @Prop() label!: string;\n\n /**\n * The size of the status tag component.\n */\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /**\n * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n */\n @Prop() small?: boolean = false;\n\n /**\n * The colour of the status tag.\n */\n @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n /**\n * The emphasis of the status tag.\n */\n @Prop() variant?: IcEmphasisType = \"filled\";\n\n componentWillLoad(): void {\n if (this.appearance === \"outlined\") {\n this.variant = \"outlined\";\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Status Tag\"\n );\n }\n\n render() {\n const { label, status, appearance, variant, small, size, announced } = this;\n return (\n <Host role={announced ? \"status\" : null} aria-label=\"Status\">\n <strong\n class={{\n [\"tag\"]: true,\n [`${appearance}-${status}`]: appearance !== undefined,\n [`${variant}-${status}`]: true,\n [\"outlined\"]: variant === \"outlined\",\n [\"small\"]: small || size === \"small\",\n }}\n >\n <ic-typography\n variant=\"label-uppercase\"\n apply-vertical-margins={false}\n >\n <span>{label}</span>\n </ic-typography>\n </strong>\n </Host>\n );\n }\n}\n"],"mappings":"8GAAA,MAAMA,EAAiB,8zH,MCaVC,EAAS,M,wCAIU,M,yDAeE,U,WAKN,M,YAKa,U,aAKJ,Q,CAEnC,iBAAAC,GACE,GAAIC,KAAKC,aAAe,WAAY,CAClCD,KAAKE,QAAU,U,EAInB,gBAAAC,GACEC,EACE,CAAC,CAAEC,KAAML,KAAKM,MAAOC,SAAU,UAC/B,a,CAIJ,MAAAC,GACE,MAAMF,MAAEA,EAAKG,OAAEA,EAAMR,WAAEA,EAAUC,QAAEA,EAAOQ,MAAEA,EAAKC,KAAEA,EAAIC,UAAEA,GAAcZ,KACvE,OACEa,EAACC,EAAI,CAACC,KAAMH,EAAY,SAAW,KAAI,aAAa,UAClDC,EAAA,UACEG,MAAO,CACL,CAAC,OAAQ,KACT,CAAC,GAAGf,KAAcQ,KAAWR,IAAegB,UAC5C,CAAC,GAAGf,KAAWO,KAAW,KAC1B,CAAC,YAAaP,IAAY,WAC1B,CAAC,SAAUQ,GAASC,IAAS,UAG/BE,EAAA,iBACEX,QAAQ,kBAAiB,yBACD,OAExBW,EAAA,YAAOP,K"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as t,c as e,h as i,H as o,g as s}from"./p-6b5e91e2.js";import{z as n,d as a}from"./p-671b7cac.js";import{c as r}from"./p-68a5aaff.js";import"./p-26b7b18f.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){:host .opening-from-parent{animation:slide-in var(--ic-transition-duration-slow) ease-in-out}:host .opening-from-child{animation:slide-out var(--ic-transition-duration-slow) ease-in-out}}:host{border-radius:var(--ic-border-radius);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-popover);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);display:none}:host(.on-dialog){inset:auto !important}:host(.on-dialog-fix-translate){transform:translate(0, var(--ic-space-xs)) !important}:host(.on-dialog-translate-y){transform:translate(0, calc(-1 * var(--translate-y))) !important}.menu{border:var(--ic-border-default);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;height:0}.button{text-decoration:none;list-style-type:none}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu:focus-visible{outline:none}:host(.open){display:block;min-width:calc(20rem - var(--ic-space-xl));width:var(--popover-width, 20rem);max-width:calc(100vw - var(--ic-space-xl))}:host(.open) .menu{visibility:visible;height:-moz-fit-content;height:fit-content;max-height:var(--max-height, -moz-fit-content);max-height:var(--max-height, fit-content);overflow-y:auto;overflow-x:hidden}.parent-label{color:var(--ic-color-tertiary-text);margin:var(--ic-space-xs) var(--ic-space-xs) 0}@keyframes slide-in{from{opacity:0;transform:translateX(10rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out{from{opacity:0;transform:translateX(-10rem)}to{opacity:1;transform:translateX(0)}}';const h=class{constructor(i){t(this,i);this.icPopoverClosed=e(this,"icPopoverClosed",7);this.ARIA_LABEL="aria-label";this.popoverMenuEls=[];this.setButtonFocus=()=>{var t;(t=this.popoverMenuEls[this.currentFocus])===null||t===void 0?void 0:t.focus()};this.findAnchorEl=t=>{let e=null;if(t===null||t===undefined){this.submenuId===undefined&&console.error("No anchor specified for popover component")}else{e=document.querySelector(t.indexOf("#")===0?t:"#"+t);if(e===null){console.error(`Popover anchor element '${t}' not found`)}}return e};this.isNotPopoverMenuEl=t=>{const e=t.target;return e.id!==this.anchor&&e.tagName!=="IC-MENU-ITEM"&&e.tagName!=="IC-MENU-GROUP"&&e.tagName!=="IC-POPOVER-MENU"};this.closeMenu=()=>{var t;this.open=false;(t=this.anchorEl)===null||t===void 0?void 0:t.focus();this.icPopoverClosed.emit()};this.getNextItemToSelect=(t,e)=>{const i=this.popoverMenuEls.length-1;if(t<1){t=0}let o=e?t+1:t-1;if(o<0){o=i}else if(o>i){o=0}return o};this.addMenuItems=t=>{for(let e=0;e<t.length;e++){const i=t[e];if(i.tagName==="IC-MENU-ITEM"){this.popoverMenuEls.push(i)}else if(i.tagName==="IC-MENU-GROUP"){const t=i.shadowRoot.querySelector("ul");const e=n(t);this.addMenuItems(e)}}};this.getMenuAriaLabel=()=>{const t=this.el.getAttribute(this.ARIA_LABEL);if(a(this.submenuId)){return`${t}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`}else{return t}};this.handleBackButtonClick=()=>{this.parentPopover.openFromChild();this.open=false};this.initPopperJS=()=>{this.popperInstance=r(this.anchorEl,this.el,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start","top-end","bottom-end"],rootBoundary:"viewport"}}]})};this.openingFromChild=false;this.openingFromParent=false;this.anchor=undefined;this.parentLabel=undefined;this.parentPopover=undefined;this.submenuId=undefined;this.submenuLevel=1;this.open=undefined}watchOpenHandler(){if(this.open){if(this.parentPopover!==undefined&&!this.popoverMenuEls.some((t=>t.id))){this.popoverMenuEls.unshift(this.backButton)}this.currentFocus=a(this.submenuId)?1:0;setTimeout(this.setButtonFocus,50)}else{if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}}disconnectedCallback(){if(this.popperInstance!==undefined){this.popperInstance.destroy()}}componentDidLoad(){const t=this.el.shadowRoot.querySelector("ul.button");const e=n(t);if(e!==null){this.addMenuItems(e)}if(this.submenuId===undefined&&this.el.getAttribute(this.ARIA_LABEL)===null){console.error(`No aria-label specified for popover menu component - aria-label required`)}}componentWillRender(){this.anchorEl=this.findAnchorEl(this.anchor)}componentDidRender(){if(this.open&&!this.popperInstance){this.initPopperJS()}}handleMenuItemClick(t){if(!t.detail.hasSubMenu&&t.detail.label!=="Back"){this.closeMenu()}}handleSubmenuChange(t){const e=t.target;this.open=false;const i=document.querySelector(`ic-popover-menu[submenu-id=${e.submenuTriggerFor}]`);i.parentPopover=this.el;i.anchor=this.anchor;i.ariaLabel=this.el.getAttribute(this.ARIA_LABEL);i.openFromParent();i.submenuLevel=this.submenuLevel+1;i.parentLabel=e.label}handleClick(t){if(this.open&&this.isNotPopoverMenuEl(t)){this.closeMenu()}}handleKeyDown(t){switch(t.key){case"ArrowDown":t.preventDefault();this.currentFocus=this.getNextItemToSelect(this.currentFocus,true);this.setButtonFocus();break;case"ArrowUp":t.preventDefault();this.currentFocus=this.getNextItemToSelect(this.currentFocus,false);this.setButtonFocus();break;case"Home":this.currentFocus=0;this.setButtonFocus();break;case"End":this.currentFocus=this.popoverMenuEls.length-1;this.setButtonFocus();break;case"Escape":case"Tab":if(this.open){this.closeMenu();this.el.blur()}break}}async openFromChild(){this.open=true;this.openingFromChild=true;setTimeout((()=>this.openingFromChild=false),1e3)}async openFromParent(){this.open=true;this.openingFromParent=true;setTimeout((()=>this.openingFromParent=false),1e3)}render(){return i(o,{class:{open:this.open}},i("div",{id:this.parentPopover===undefined?`ic-popover-submenu-${this.submenuId}`:"",class:{menu:true},tabindex:open?"0":"-1"},i("div",{class:{"opening-from-parent":this.openingFromParent,"opening-from-child":this.openingFromChild}},a(this.submenuId)&&i("div",null,i("ic-menu-item",{class:"ic-popover-submenu-back-button",ref:t=>this.backButton=t,label:"Back",onClick:this.handleBackButtonClick,id:`ic-popover-submenu-back-button-${this.submenuLevel}`},i("svg",{slot:"icon",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"submenu-back-icon"},i("path",{d:"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z",fill:"currentColor"}))),i("ic-typography",{variant:"subtitle-small",class:"parent-label"},this.parentLabel)),i("ul",{class:"button","aria-label":this.getMenuAriaLabel(),role:"menu","aria-owns":a(this.submenuId)?`ic-popover-submenu-back-button-${this.submenuLevel}`:false,"aria-controls":a(this.submenuId)?`ic-popover-submenu-back-button-${this.submenuLevel}`:false},i("slot",null)))))}static get delegatesFocus(){return true}get el(){return s(this)}static get watchers(){return{open:["watchOpenHandler"]}}};h.style=l;export{h as ic_popover_menu};
|
2
|
+
//# sourceMappingURL=p-9b8ab047.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["icPopoverMenuCss","PopoverMenu","this","ARIA_LABEL","popoverMenuEls","setButtonFocus","_a","currentFocus","focus","findAnchorEl","anchor","anchorElement","undefined","submenuId","console","error","document","querySelector","indexOf","isNotPopoverMenuEl","ev","target","id","tagName","closeMenu","open","anchorEl","icPopoverClosed","emit","getNextItemToSelect","currentItem","movingDown","numButtons","length","nextItem","addMenuItems","elements","i","el","push","groupSlotWrapper","shadowRoot","menuGroupElements","getSlotElements","getMenuAriaLabel","ariaLabel","getAttribute","isPropDefined","submenuLevel","parentLabel","handleBackButtonClick","parentPopover","openFromChild","initPopperJS","popperInstance","createPopper","placement","modifiers","name","options","offset","fallbackPlacements","rootBoundary","watchOpenHandler","some","menuItem","unshift","backButton","setTimeout","destroy","disconnectedCallback","componentDidLoad","slotWrapper","popoverMenuElements","componentWillRender","componentDidRender","handleMenuItemClick","detail","hasSubMenu","label","handleSubmenuChange","childEl","submenuTriggerFor","openFromParent","handleClick","handleKeyDown","key","preventDefault","blur","openingFromChild","openingFromParent","render","h","Host","class","menu","tabindex","ref","onClick","slot","viewBox","fill","xmlns","d","variant","role"],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n*/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-color-primary-text);\n background-color: var(--ic-architectural-white);\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n:host(.on-dialog) {\n inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n transform: translate(0, calc(-1 * var(--translate-y))) !important;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n visibility: hidden;\n height: 0;\n}\n\n.button {\n text-decoration: none;\n list-style-type: none;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.open) .menu {\n visibility: visible;\n height: fit-content;\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n color: var(--ic-color-tertiary-text);\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n\n /**\n * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n */\n @Prop() anchor: string;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentLabel?: string;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /**\n * The unique identifier for a popover submenu.\n */\n @Prop() submenuId?: string;\n\n /**\n * @internal The level of menu being displayed.\n */\n @Prop() submenuLevel: number = 1;\n\n /**\n * If `true`, the popover menu will be displayed.\n */\n @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n if (this.open) {\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = isPropDefined(this.submenuId) ? 1 : 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n }\n\n /**\n * Emitted when the popover menu is closed.\n */\n @Event() icPopoverClosed: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.popperInstance !== undefined) {\n this.popperInstance.destroy();\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(ev: CustomEvent): void {\n if (!ev.detail.hasSubMenu && ev.detail.label !== \"Back\") {\n this.closeMenu();\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(this.currentFocus, true);\n this.setButtonFocus();\n break;\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(this.currentFocus, false);\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n if (this.open) {\n this.closeMenu();\n this.el.blur();\n }\n break;\n }\n }\n\n /**\n * @internal Opens the menu from the child menu.\n */\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /**\n * @internal Opens the menu from the parent menu.\n */\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string): HTMLElement => {\n let anchorElement: HTMLElement = null;\n if (anchor === null || anchor === undefined) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const target = ev.target as HTMLElement;\n return (\n target.id !== this.anchor &&\n target.tagName !== \"IC-MENU-ITEM\" &&\n target.tagName !== \"IC-MENU-GROUP\" &&\n target.tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n private closeMenu = () => {\n this.open = false;\n this.anchorEl?.focus();\n this.icPopoverClosed.emit();\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot.querySelector(\"ul\");\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n this.addMenuItems(menuGroupElements);\n }\n }\n };\n\n private getMenuAriaLabel = (): string => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n };\n\n render() {\n return (\n <Host class={{ open: this.open }}>\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n tabindex={open ? \"0\" : \"-1\"}\n >\n <div\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <div>\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </div>\n )}\n <ul\n class=\"button\"\n aria-label={this.getMenuAriaLabel()}\n role=\"menu\"\n aria-owns={\n isPropDefined(this.submenuId)\n ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n : false\n }\n aria-controls={\n isPropDefined(this.submenuId)\n ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n : false\n }\n >\n <slot></slot>\n </ul>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as t,h as a,H as
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as t,h as a,H as e,g as i}from"./p-6b5e91e2.js";import{i as s,a as o}from"./p-671b7cac.js";import"./p-26b7b18f.js";const n=":host{gap:var(--ic-space-xs);padding:var(--ic-space-xs)}:host,.action-area{display:flex;flex-direction:column}.action-area{gap:var(--ic-space-md)}:host ::slotted(svg),:host ::slotted(img){border-radius:var(--ic-space-xxs)}:host(.right),:host(.right) .action-area{align-items:flex-end;text-align:right}:host(.center),:host(.center) .action-area{align-items:center;text-align:center}:host(.image-default) ::slotted(svg),:host(.image-default) ::slotted(img){height:calc(3 * var(--ic-space-lg)) !important;width:calc(3 * var(--ic-space-lg)) !important}:host(.image-small) ::slotted(svg),:host(.image-small) ::slotted(img){height:var(--ic-space-xxl) !important;width:var(--ic-space-xxl) !important}:host(.image-large) ::slotted(svg),:host(.image-large) ::slotted(img){height:calc(4 * var(--ic-space-xl)) !important;width:calc(4 * var(--ic-space-xl)) !important}";const r=class{constructor(a){t(this,a);this.aligned="left";this.body=undefined;this.bodyMaxLines=undefined;this.heading=undefined;this.imageSize="default";this.subheading=undefined}componentDidLoad(){!s(this.el,"heading")&&o([{prop:this.heading,propName:"heading"}],"Empty State")}render(){const{aligned:t,body:i,bodyMaxLines:o,heading:n,imageSize:r,subheading:c}=this;return a(e,{class:{[`${t}`]:true,[`image-${r}`]:s(this.el,"image")}},s(this.el,"image")&&a("slot",{name:"image"}),a("div",null,a("slot",{name:"heading"},a("ic-typography",{variant:"h4"},n)),a("slot",{name:"subheading"},a("ic-typography",{variant:"subtitle-small"},c)),a("slot",{name:"body"},a("ic-typography",{maxLines:o},i))),s(this.el,"actions")&&a("div",{class:"action-area"},a("slot",{name:"actions"})))}get el(){return i(this)}};r.style=n;export{r as ic_empty_state};
|
2
|
+
//# sourceMappingURL=p-9ee138e7.entry.js.map
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as t,c as i,f as o,h as e,H as a,g as r}from"./p-6b5e91e2.js";import{x as n,w as s,j as c,k as l,i as h,d,a as u}from"./p-671b7cac.js";import{I as b}from"./p-26b7b18f.js";import{c as p}from"./p-68a5aaff.js";const v=`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor"/>\n</svg>`;const f='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block;position:relative;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-active);--button-default-background-hover:var(--ic-action-default-bg-hover);--button-default-background-active:var(--ic-action-default-bg-active);--icon-width:100%;--icon-height:100%}.button{font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:0.875rem;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:var(--min-width, 6.25rem);display:inline-flex;flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}:host(.with-badge) .button{border-radius:0.2188rem}.button:hover{cursor:pointer}.button:focus,:host .button:focus,:host(.light) .button:focus{box-shadow:var(--ic-border-focus)}.button:focus-visible{outline:var(--ic-hc-focus-outline)}:host(.dark) .button{--button-default:var(--ic-action-dark);--button-default-hover:var(--ic-action-dark);--button-default-active:var(--ic-action-dark);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-active)}:host(.light) .button{--button-default:var(--ic-action-light);--button-default-hover:var(--ic-action-light);--button-default-active:var(--ic-action-light);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-active)}:host(.white-background) .button{--button-default-background-hover:var(--ic-action-default-bg-hover-no-alpha);--button-default-background-active:var(\n --ic-action-default-bg-active-no-alpha\n );background-color:var(--ic-architectural-white)}:host(.white-background.dark) .button{--button-default-background-hover:var(--ic-action-dark-bg-hover-no-alpha);--button-default-background-active:var(--ic-action-dark-bg-active-no-alpha)}:host(.button-variant-primary.light) .button{color:var(--ic-color-primary-text);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}:host(.button-variant-primary.dark) .button{--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}:host(.disabled),:host(.disabled) .button,:host(.loading),:host(.loading) .button{pointer-events:none}:host(.top-icon) .button{flex-direction:column;--height:fit-content}:host(.top-icon) .button .icon-container{margin-right:0}:host(.button-variant-primary) .button{color:var(--ic-architectural-white);background-color:var(--button-default)}:host(.button-variant-primary) .button:hover:not(:focus){background-color:var(--button-default-hover)}:host(.button-variant-primary) .button:hover:focus{background-color:var(--button-default-hover);border-color:var(--button-default-hover)}:host(.button-variant-primary:not(.light)) .button:hover:focus{color:var(--ic-architectural-white)}:host(.button-variant-primary) .button:active:not(:focus),:host(.button-variant-primary.loading) .button{background-color:var(--button-default-active)}:host(.button-variant-primary) .button:active:focus{background-color:var(--button-default-active)}:host(.button-variant-primary) .button:active{background-color:var(--button-default-active)}:host(.button-variant-primary:not(.light)) .button:active{color:var(--ic-architectural-white)}:host(.button-variant-primary.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-variant-primary.light.disabled) .button{background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.button-variant-secondary) .button{border:var(--ic-border-width) solid var(--button-default);color:var(--button-default)}:host(.button-variant-secondary) .button:hover:not(:focus),:host(.button-variant-secondary) .button:hover:focus{background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.button-variant-secondary) .button:active:not(:focus),:host(.button-variant-secondary) .button:active:focus,:host(.button-variant-secondary) .button:active{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.disabled) .button,:host(.button-variant-secondary.disabled) .button:hover,:host(.button-variant-secondary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-secondary.light.disabled) .button,:host(.button-variant-secondary.light.disabled) .button:hover,:host(.button-variant-secondary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-tertiary) .button{color:var(--button-default)}:host(.button-variant-tertiary) .button:hover:not(:focus),:host(.button-variant-tertiary) .button:hover:focus{background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-tertiary) .button:active:not(:focus),:host(.button-variant-tertiary) .button:active:focus,:host(.button-variant-tertiary) .button:active,:host(.button-variant-tertiary.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-tertiary.disabled) .button,:host(.button-variant-tertiary.disabled) .button:hover,:host(.button-variant-tertiary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-tertiary.light.disabled) .button,:host(.button-variant-tertiary.light.disabled) .button:hover,:host(.button-variant-tertiary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-icon) .button{color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}:host(.button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.button-variant-icon) .button:hover:not(:focus),:host(.button-variant-icon) .button:hover:focus{background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button:active:not(:focus),:host(.button-variant-icon.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-icon.disabled) .button,:host(.button-variant-icon.disabled) .button:hover,:host(.button-variant-icon.disabled) .button:active{color:var(--ic-architectural-300);background:none}:host(.button-variant-destructive) .button{color:var(--ic-architectural-white);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.button-variant-destructive) .button:hover:not(:focus),:host(.button-variant-destructive) .button:hover:focus{background-color:var(--ic-action-destructive-hover)}:host(.button-variant-destructive) .button:active:not(:focus),:host(.button-variant-destructive) .button:active:focus,:host(.button-variant-destructive.loading) .button{background-color:var(--ic-action-destructive-active)}:host(.button-variant-destructive.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-size-default) .button{height:var(--height, 2.5rem);padding:var(--ic-space-xs) var(--ic-space-md)}:host(.button-size-small) .button{height:var(--height, var(--ic-space-xl));padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.button-size-large) .button{height:var(--height, var(--ic-space-xxl));padding:var(--ic-space-sm) var(--ic-space-md)}:host(.button-size-default.button-variant-icon) .button{height:var(--height, var(--ic-space-xl));width:var(--ic-space-xl);padding:0.375rem}:host(.button-size-small.button-variant-icon) .button{height:var(--height, var(--ic-space-lg));width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.button-size-large.button-variant-icon) .button{height:var(--height, 2.5rem);width:2.5rem;padding:var(--ic-space-xs)}:host(.full-width),:host(.full-width) .button{width:100%}div.loading-container{position:relative;align-items:center;width:100%}ic-loading-indicator{--outer-color:transparent}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center;margin-right:var(--ic-space-xs)}div.right-icon{margin-right:auto;margin-left:var(--ic-space-xs)}::slotted(:not(ic-badge)){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:1.25rem;--icon-width:1.25rem}:host(.search-submit-button-small) ::slotted(svg){--icon-height:1rem;--icon-width:1rem}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.menu-close-button) ::slotted(svg){--icon-height:0.875rem;--icon-width:0.875rem}:host(.popout-menu-button) .button{height:var(--height);justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}:host .arrow-dropdown{margin-top:auto}:host .dropdown-expanded{transform:rotate(180deg);margin-bottom:var(--ic-space-xxxs)}:host(.dropdown-no-icon) .button{padding-right:var(--ic-space-xs)}@media (forced-colors: active){.button{border:0.125rem solid transparent}}:host(.flip) ::slotted(svg){transform:scaleX(-1)}';var g=undefined&&undefined.__rest||function(t,i){var o={};for(var e in t)if(Object.prototype.hasOwnProperty.call(t,e)&&i.indexOf(e)<0)o[e]=t[e];if(t!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,e=Object.getOwnPropertySymbols(t);a<e.length;a++){if(i.indexOf(e[a])<0&&Object.prototype.propertyIsEnumerable.call(t,e[a]))o[e[a]]=t[e[a]]}return o};let m=0;const y=class{constructor(e){t(this,e);this.icBlur=i(this,"icBlur",7);this.icFocus=i(this,"icFocus",7);this.buttonIdNum=m++;this.hasTooltip=false;this.inheritedAttributes={};this.describedByEl=null;this.describedById=null;this.mutationObserver=null;this.hostMutationObserver=null;this.setViewBox=()=>{let t;if(this.hasLeftIconSlot()){t=this.el.querySelector(`[slot="left-icon"]`)}else if(this.hasRightIconSlot()){t=this.el.querySelector(`[slot="right-icon"]`)}else{t=null}return t};this.handleClick=()=>{if((this.el.type==="submit"||this.el.type==="reset")&&!!this.el.closest("FORM")){this.handleHiddenFormButtonClick(this.el.closest("FORM"))}};this.onFocus=()=>{this.icFocus.emit()};this.onBlur=()=>{this.icBlur.emit()};this.loadingWidth=()=>{if(this.loading){this.el.style.setProperty("--min-width",`${this.el.getBoundingClientRect().width}px`)}};this.mutationCallback=()=>{this.describedByContent=this.describedByEl.innerText};this.hostMutationCallback=t=>{let i=false;t.forEach((({attributeName:t})=>{const o=this.el.getAttribute(t);if(t==="title")this.title=o;else if(t==="aria-label")this.ariaLabel=o;if(n.includes(t)){this.inheritedAttributes[t]=o;i=true}}));if(i){o(this)}};this.setHasTooltip=()=>{this.hasTooltip=!this.disableTooltip&&(!!this.title||this.variant==="icon")};this.ariaLabel=null;this.describedByContent=null;this.title=null;this.appearance="default";this.ariaControlsId=undefined;this.ariaOwnsId=undefined;this.disabled=false;this.disableTooltip=false;this.download=false;this.dropdown=false;this.dropdownExpanded=false;this.form=undefined;this.formaction=undefined;this.formenctype=undefined;this.formmethod=undefined;this.formnovalidate=undefined;this.formtarget=undefined;this.fullWidth=false;this.href=undefined;this.hreflang=undefined;this.loading=false;this.referrerpolicy=undefined;this.rel=undefined;this.size="default";this.target=undefined;this.tooltipPlacement="bottom";this.transparentBackground=true;this.type="button";this.variant="primary"}disconnectedCallback(){if(this.mutationObserver!==null&&this.mutationObserver!==undefined){this.mutationObserver.disconnect()}if(this.hostMutationObserver!==null&&this.hostMutationObserver!==undefined){this.hostMutationObserver.disconnect()}}componentWillUpdate(){this.loadingWidth();this.setHasTooltip()}componentWillLoad(){const t=s(this.el,[...n,"title"]);const{title:i,"aria-label":o}=t,e=g(t,["title","aria-label"]);this.title=i;this.ariaLabel=o;this.inheritedAttributes=e;c(this.disabled,this.el);this.el.setAttribute("exportparts","button");const a=this.el.id;this.id=a!==undefined?a:null;this.setHasTooltip();if(!this.hasTooltip){const t=this.inheritedAttributes["aria-describedby"];if(t!==undefined){this.describedById=t;const i=this.el.parentElement.querySelector(`#${t}`);if(i!==undefined&&i!==null){this.describedByContent=i.innerText;this.describedByEl=i}}}}componentDidLoad(){this.updateTheme();if(typeof MutationObserver!=="undefined"){if(this.describedById){this.mutationObserver=new MutationObserver(this.mutationCallback);this.mutationObserver.observe(this.describedByEl,{characterData:true,childList:true,subtree:true})}this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{attributes:true})}}componentWillRender(){var t;(t=this.setViewBox())===null||t===void 0?void 0:t.setAttribute("viewBox","0 0 24 24")}handleHostClick(t){if(this.disabled||this.loading){t.stopImmediatePropagation()}if(this.dropdown){this.dropdownExpanded=!this.dropdownExpanded}}themeChangeHandler(t){const i=t.detail;this.updateTheme(i.mode)}async setFocus(){if(this.buttonEl){this.buttonEl.focus()}}hasIconSlot(){const t=this.el.querySelector(`[slot="icon"]`);return t!==null}hasLeftIconSlot(){const t=this.el.querySelector(`[slot="left-icon"]`);return t!==null}hasTopIconSlot(){const t=this.el.querySelector(`[slot="top-icon"]`);return t!==null}hasRightIconSlot(){const t=this.el.querySelector(`[slot="right-icon"]`);return t!==null}handleHiddenFormButtonClick(t){const i=document.createElement("button");i.setAttribute("type",this.el.type);i.style.display="none";t.appendChild(i);i.click();i.remove()}updateTheme(t=null){const i=l(this.el,t||null);if(i!==b.Default){this.appearance=i}}render(){const t=this.href&&"a"||"button";const{title:i,ariaLabel:o,inheritedAttributes:r}=this;const n=t==="button"?{type:this.type,disabled:this.disabled,form:this.form,formaction:this.formaction,formenctype:this.formenctype,formmethod:this.formmethod,formnovalidate:this.formnovalidate,formtarget:this.formtarget}:{download:this.download!==false?this.download:null,href:this.href,rel:this.rel,target:this.target,referrerpolicy:this.referrerpolicy,hreflang:this.hreflang};let s=null;let c=null;if(this.hasTooltip){c=this.id!==null?`ic-button-with-tooltip-${this.id}`:`ic-button-with-tooltip-${this.buttonIdNum}`;s=`ic-tooltip-${c}`}else{s=this.describedById}const l=()=>e(t,Object.assign({class:"button","aria-disabled":this.loading||this.disabled?"true":null,"aria-label":this.loading?"Loading":o},n,r,{onFocus:this.onFocus,onBlur:this.onBlur,ref:t=>this.buttonEl=t,"aria-describedby":s,part:"button"}),this.hasIconSlot()&&!this.loading&&e("div",{class:"icon-container"},e("slot",{name:"icon"})),this.hasLeftIconSlot()&&!this.loading&&e("div",{class:"icon-container"},e("slot",{name:"left-icon"})),this.hasTopIconSlot()&&!this.hasLeftIconSlot()&&!this.hasRightIconSlot()&&!this.loading&&e("div",{class:"icon-container"},e("slot",{name:"top-icon"})),this.loading?e("div",{class:"loading-container"},e("ic-loading-indicator",{type:"linear",appearance:this.variant==="primary"||this.variant==="destructive"||this.appearance===b.Dark||this.appearance===b.Light?"light":"dark"})):e("slot",null),this.hasRightIconSlot()&&!this.loading&&!this.dropdown&&e("div",{class:{"icon-container":true,"right-icon":true}},e("slot",{name:"right-icon"})),this.dropdown&&!this.loading&&this.variant!=="icon"&&this.variant!=="destructive"&&e("span",{class:{["arrow-dropdown"]:!this.dropdownExpanded,["dropdown-expanded"]:this.dropdownExpanded},innerHTML:v}));return e(a,{class:{["disabled"]:this.disabled&&!this.loading,[`button-variant-${this.variant}`]:true,[`button-size-${this.size}`]:true,["loading"]:this.loading,["dark"]:this.appearance===b.Dark,["light"]:this.appearance===b.Light,["full-width"]:this.fullWidth,["with-badge"]:h(this.el,"badge"),["dropdown-no-icon"]:this.dropdown&&!h(this.el,"icon")&&!h(this.el,"left-icon"),["top-icon"]:h(this.el,"top-icon"),["white-background"]:this.variant==="secondary"&&!this.transparentBackground&&this.appearance!=="light"},onClick:this.handleClick,"aria-owns":this.ariaOwnsId,"aria-controls":this.ariaControlsId,"aria-expanded":this.dropdown&&`${this.dropdownExpanded}`},this.hasTooltip&&e("ic-tooltip",{id:s,label:i||o,target:c,placement:this.tooltipPlacement,silent:this.variant==="icon"&&!!i},e(l,null)),h(this.el,"badge")&&e("slot",{name:"badge"}),!this.hasTooltip&&e(l,null),this.describedByContent&&e("span",{id:s,class:"ic-button-describedby"},this.describedByContent))}static get delegatesFocus(){return true}get el(){return r(this)}};y.style=f;const w='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--linear-border-radius:0.25rem;--inner-color:var(--ic-action-default);--outer-color:var(--ic-architectural-100);--label-color:var(--ic-color-primary-text);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.light){--inner-color:var(--ic-architectural-white);--outer-color:var(--ic-architectural-800);--label-color:var(--ic-architectural-white)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size="small"]){--circular-diameter:2.5rem;--linear-line-height:var(--ic-space-xxs)}:host([size="default"]){--circular-diameter:5rem}:host([size="large"]){--circular-diameter:7.5rem}:host([size="icon"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:1.25rem}:host(.label){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{white-space:nowrap;color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host(.full-width){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--outer-color);stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}:host(.inner-label) .ic-loading-circular-inner{display:grid}:host(.inner-label) .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;color:var(--ic-status-info)}:host(.not-required.compact-step-progress-indicator) .inner-text{color:var(--ic-color-tertiary-text)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-hc-border)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}';const x=class{constructor(i){t(this,i);this.updateCircularProgressMeter=()=>{if(!this.indeterminate){this.circularMeter.style.setProperty("--progress-value",String(this.progress))}};this.getLabel=(t,i)=>new Promise((()=>{this.interval=setInterval((()=>{if(t<this.labelList.length-1){t++}else{t=0}i(this.labelList[t])}),this.labelDuration)}));this.getLabelVariant=()=>{var t;let i="h4";const o=(t=this.outerElement)===null||t===void 0?void 0:t.offsetWidth;if(this.size==="small"||this.type==="circular"&&o<60){i="label"}else if(this.size==="large"||this.type==="circular"&&o>=120){i="h2"}return i};this.setCircleLineWidth=()=>{const{offsetWidth:t}=this.outerElement;const i=this.el.classList.contains("compact-step-progress-indicator")?40:0;const o=this.el.classList.contains("toast-dismiss-timer")?20:0;if(t||i||o){this.circularLineWidth=(i||o||t)*.1;this.circularDiameter=i||o||t;this.outerElement.style.setProperty("--circular-line-width",`${this.circularLineWidth}px`)}};this.setLinearDeterminateWidth=()=>{if(!this.innerElement)return;const t=Math.min(this.max,Math.max(this.min,this.progress));const i=(t-this.min)/(this.max-this.min);this.showSecond=i>.5;if(this.showSecond){this.innerElement.classList.remove("clip")}else{this.innerElement.classList.add("clip")}this.innerElement.style.setProperty("--linear-width",`${i*100}%`)};this.calcOuterClass=()=>{let t=`ic-loading-${this.type}-outer`;t+=this.indeterminate?" indeterminate":" determinate";return t};this.updateLabel=()=>{if(d(this.label)){this.labelList=this.label.split("/");const t=0;this.indicatorLabel=this.labelList[t];if(this.labelList.length>1){this.getLabel(t,(t=>{this.indicatorLabel=t}))}}};this.setCircleXY=()=>{if(this.circularDiameter>0){const t=this.circularDiameter/2;const i=t;const o=t;const e=t-this.circularLineWidth/2;this.setDashSteps(e);return{x:i,y:o,r:e}}return{x:0,y:0,r:0}};this.setDashSteps=t=>{const i=2*Math.PI*t;const o=Math.min(Math.max(this.progress,this.min),this.max);const e=-1-(o-this.min)/(this.max-this.min);this.circularMeter.style.setProperty("--stroke-dasharray",`${i}px`);if(!this.indeterminate){this.circularMeter.style.setProperty("--circular-steps-max",String(this.max));this.circularMeter.style.setProperty("--stroke-dashoffset",`${e*i}px`)}};this.circularDiameter=undefined;this.circularLineWidth=undefined;this.indeterminate=undefined;this.indicatorLabel=undefined;this.showSecond=false;this.appearance="dark";this.description="Loading";this.fullWidth=false;this.innerLabel=undefined;this.labelDuration=8e3;this.max=100;this.min=0;this.size="default";this.type="circular";this.label=undefined;this.progress=undefined}watchPropHandler(){this.updateLabel()}watchProgressHandler(){if(this.type==="circular"){this.updateCircularProgressMeter()}}disconnectedCallback(){clearInterval(this.interval)}componentWillLoad(){this.indeterminate=this.progress===undefined;this.updateLabel();this.el.setAttribute("exportparts","ic-loading-container")}componentDidLoad(){if(this.type==="circular"){this.setCircleLineWidth();this.circularMeter=this.el.shadowRoot.querySelector(".ic-loading-circular-svg circle:nth-child(2)");this.updateCircularProgressMeter()}if(Number(this.progress)>=0&&this.type==="linear"){this.setLinearDeterminateWidth()}}componentWillUpdate(){this.indeterminate=this.progress===undefined}componentDidUpdate(){if(Number(this.progress)>=0&&this.type==="linear"){this.setLinearDeterminateWidth()}}render(){const{appearance:t,label:i,description:o,size:r,fullWidth:n,innerLabel:s}=this;const{x:c,y:l,r:h}=this.setCircleXY();return e(a,{class:{["light"]:t===b.Light,["label"]:!!i,["full-width"]:n,["inner-label"]:!!s}},e("div",{class:"ic-loading-container",part:"ic-loading-container"},e("div",{ref:t=>this.outerElement=t,class:this.calcOuterClass(),role:"progressbar","aria-labelledby":this.label&&this.size!=="icon"&&"ic-loading-label","aria-label":o,"aria-valuenow":this.progress,"aria-valuemin":this.min,"aria-valuemax":this.max},e("div",{ref:t=>this.innerElement=t,class:`ic-loading-${this.type}-inner`},this.innerLabel&&this.innerLabel!==undefined&&this.size==="small"&&e("ic-typography",{variant:"subtitle-small",class:"inner-text"},this.innerLabel),this.type==="circular"&&e("svg",{class:"ic-loading-circular-svg",viewBox:`0 0 ${this.circularDiameter||0} ${this.circularDiameter||0}`},e("circle",{cx:`${c}`,cy:`${l}`,r:`${h}`}),e("circle",{cx:`${c}`,cy:`${l}`,r:`${h}`})))),i&&r!=="icon"&&e("ic-typography",{id:"ic-loading-label",class:"ic-loading-label",role:"status",variant:this.getLabelVariant()},e("p",null,this.indicatorLabel))))}get el(){return r(this)}static get watchers(){return{label:["watchPropHandler"],progress:["watchProgressHandler"]}}};x.style=w;const k='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-tooltip) .ic-tooltip-container{background-color:var(--ic-architectural-800);color:#ffff;text-align:center;padding:var(--ic-space-xxxs) var(--ic-space-xs);border-radius:var(--ic-border-radius);border:var(--ic-border-width) solid var(--ic-architectural-40);position:absolute;max-width:20rem;display:none;z-index:var(--ic-z-index-tooltip);box-shadow:var(--ic-elevation-overlay)}:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed)) .ic-tooltip-container,:host(.tooltip-disabled) .ic-tooltip-container{display:none !important}:host(.tooltip-long-label-navigation-item-side-nav-expanded) .ic-tooltip-container[data-show]{display:block !important}:host(.ic-tooltip) .ic-tooltip-arrow,:host(.ic-tooltip) .ic-tooltip-arrow::before{position:absolute;background:inherit}:host(.ic-tooltip) .ic-tooltip-arrow{visibility:hidden;width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-tooltip) .ic-tooltip-arrow::before{visibility:visible;content:"";border:var(--ic-border-width) solid var(--ic-architectural-40);width:100%;height:100%}:host(.ic-tooltip) .ic-tooltip-container[data-show]{display:block}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="top"]>.ic-tooltip-arrow{height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="top"]>.ic-tooltip-arrow::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;top:var(--ic-space-xxxs);border-top:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="bottom"]>.ic-tooltip-arrow{top:calc(-1 * var(--ic-space-xxs));height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="bottom"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;top:var(--ic-space-1px);border-bottom:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="left"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);right:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="left"]>.ic-tooltip-arrow::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0;border-left:0;top:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="right"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);left:calc(-1 * var(--ic-space-xxs))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="right"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius);border-right:0;top:calc(-1 * var(--ic-space-1px))}:host(.on-dialog) .ic-tooltip-container{transform:translate(\n var(--tooltip-translate-x),\n var(--tooltip-translate-y)\n ) !important}@media screen and (max-width: 576px){:host(.ic-tooltip) .ic-tooltip-container{max-width:18.875rem}}@media (forced-colors: active){:host(.ic-tooltip) .ic-tooltip-container,:host(.ic-tooltip) .ic-tooltip-arrow::before{border:var(--ic-hc-border)}}';const z=class{constructor(i){t(this,i);this.delayedHideEvents=["mouseleave"];this.dialogOverflow=false;this.instantHideEvents=["focusout"];this.mouseOverTool=false;this.persistTooltip=false;this.onDialog=false;this.showEvents=[!this.disableHover&&"mouseenter",!this.disableHover&&"focusin",!this.disableClick&&"click"];this.getTooltipTranslate=t=>{const i=this.el.children[0].getBoundingClientRect();let o;let e;switch(this.placement){case"bottom":o=i.left-t.left-.5*i.width;e=i.bottom-t.top;break;case"bottom-start":o=i.left-t.left;e=i.bottom-t.top;break;case"bottom-end":o=i.right-t.right;e=i.bottom-t.top;break;case"top":o=i.left-t.left-.5*i.width;e=i.top-t.bottom;break;case"top-start":o=i.left-t.left;e=i.top-t.bottom;break;case"top-end":o=i.right-t.right;e=i.top-t.bottom;break;case"left":case"left-start":o=i.right-t.right-i.width;e=i.bottom-t.top-i.height;break;case"left-end":o=i.right-t.right-i.width;e=i.top-t.bottom+i.height;break;case"right":case"right-start":o=i.left-t.left+i.width;e=i.bottom-t.top-i.height;break;case"right-end":o=i.left-t.left+i.width;e=i.top-t.bottom+i.height;break}if(this.dialogOverflow&&o<0){if(this.placement.includes("top")||this.placement.includes("bottom")){this.toolTip.style.setProperty("--tooltip-arrow-translate",`${o}px`);o=i.left-t.left}if(this.placement.includes("left")){this.placement="right";o=i.left-t.left+i.width}}this.toolTip.style.setProperty("--tooltip-translate-x",`${o}px`);this.toolTip.style.setProperty("--tooltip-translate-y",`${e}px`)};this.show=()=>{if(this.label){this.toolTip.setAttribute("data-show","");if(this.onDialog){this.el.classList.add("on-dialog");const t=this.icDialogEl.shadowRoot.querySelector("dialog").getBoundingClientRect();this.getTooltipTranslate(t)}this.popperInstance=p(this.el,this.toolTip,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,10]}},{name:"arrow",options:{element:this.arrow}},{name:"eventListeners",options:{scroll:false,resize:false}}]})}else{console.warn(`Tooltip can't display without prop 'label' set`)}};this.hide=()=>{this.toolTip.removeAttribute("data-show");this.persistTooltip=false};this.checkCloseTooltip=()=>{setTimeout((()=>{if(!this.mouseOverTool&&!this.persistTooltip){this.hide()}}),100)};this.mouseEnterTooltip=()=>{this.mouseOverTool=true};this.mouseLeaveTooltip=()=>{this.mouseOverTool=false;this.checkCloseTooltip()};this.handleKeyDown=t=>{if(t.key==="Escape"&&!this.persistTooltip){this.hide()}};this.manageEventListeners=t=>{const i=t==="add"?"addEventListener":"removeEventListener";this.showEvents.forEach((t=>{this.el[i](t,this.show);if(this.toolTip!==undefined){this.toolTip[i](t,this.mouseEnterTooltip)}}));if(!this.persistTooltip){this.instantHideEvents.forEach((t=>{this.el[i](t,this.hide)}))}this.delayedHideEvents.forEach((t=>{this.el[i](t,this.checkCloseTooltip);if(this.toolTip!==undefined){this.toolTip[i](t,this.mouseLeaveTooltip)}}));document[i]("keydown",this.handleKeyDown)};this.disableClick=false;this.disableHover=false;this.maxLines=undefined;this.placement="bottom";this.silent=false;this.target=undefined;this.label=undefined}disconnectedCallback(){this.manageEventListeners("remove");if(this.popperInstance!==undefined){this.popperInstance.destroy()}}componentDidLoad(){var t;this.manageEventListeners("add");this.icDialogEl=this.el.closest("ic-dialog");this.dialogOverflow=((t=this.icDialogEl)===null||t===void 0?void 0:t.getAttribute("data-overflow"))==="true";this.onDialog=this.icDialogEl!==null;u([{prop:this.label,propName:"label"}],"Tooltip")}componentDidRender(){const t=this.el.shadowRoot.querySelector(".ic-tooltip-container > ic-typography");this.maxLines>0&&t.setAttribute("style",`--truncation-max-lines: ${this.maxLines}`)}async displayTooltip(t,i){this.persistTooltip=i;t?this.show():this.hide()}render(){const{label:t,maxLines:i,silent:o}=this;return e(a,{class:{"ic-tooltip":true}},e("div",{ref:t=>this.toolTip=t,role:"tooltip",class:"ic-tooltip-container","aria-hidden":o},e("ic-typography",{maxLines:i,variant:"caption"},t),e("div",{ref:t=>this.arrow=t,class:"ic-tooltip-arrow"})),e("slot",null))}get el(){return r(this)}};z.style=k;export{y as ic_button,x as ic_loading_indicator,z as ic_tooltip};
|
2
|
+
//# sourceMappingURL=p-a6143c94.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["icButtonCss","buttonIds","Button","this","buttonIdNum","hasTooltip","inheritedAttributes","describedByEl","describedById","mutationObserver","hostMutationObserver","setViewBox","iconEl","hasLeftIconSlot","el","querySelector","hasRightIconSlot","handleClick","type","closest","handleHiddenFormButtonClick","onFocus","icFocus","emit","onBlur","icBlur","loadingWidth","loading","style","setProperty","getBoundingClientRect","width","mutationCallback","describedByContent","innerText","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","attribute","getAttribute","title","ariaLabel","IC_INHERITED_ARIA","includes","forceUpdate","setHasTooltip","disableTooltip","variant","disconnectedCallback","undefined","disconnect","componentWillUpdate","componentWillLoad","allInheritedAttributes","inheritAttributes","restInheritedAttributes","__rest","removeDisabledFalse","disabled","setAttribute","id","parentElement","componentDidLoad","updateTheme","MutationObserver","observe","characterData","childList","subtree","attributes","componentWillRender","_a","handleHostClick","event","stopImmediatePropagation","dropdown","dropdownExpanded","themeChangeHandler","ev","theme","detail","mode","setFocus","buttonEl","focus","hasIconSlot","hasTopIconSlot","form","hiddenFormButton","document","createElement","display","appendChild","click","remove","newTheme","foregroundColor","getThemeFromContext","IcThemeForegroundEnum","Default","appearance","render","TagType","href","buttonAttrs","formaction","formenctype","formmethod","formnovalidate","formtarget","download","rel","target","referrerpolicy","hreflang","describedBy","buttonId","ButtonContent","h","Object","assign","class","ref","part","name","Dark","Light","innerHTML","arrowDropdown","Host","size","fullWidth","isSlotUsed","transparentBackground","onClick","ariaOwnsId","ariaControlsId","label","placement","tooltipPlacement","silent","icLoadingIndicatorCss","LoadingIndicator","updateCircularProgressMeter","indeterminate","circularMeter","String","progress","getLabel","labelIndex","setLabel","Promise","interval","setInterval","labelList","length","labelDuration","getLabelVariant","outerElement","offsetWidth","setCircleLineWidth","compactStepCircularLineWidth","classList","contains","toastDismissTimerCircularLineWidth","circularLineWidth","circularDiameter","setLinearDeterminateWidth","innerElement","Math","min","max","proportion","showSecond","add","calcOuterClass","cls","updateLabel","isPropDefined","split","indicatorLabel","setCircleXY","r","x","y","nextRadius","setDashSteps","radius","dashArray","PI","watchPropHandler","watchProgressHandler","clearInterval","shadowRoot","Number","componentDidUpdate","description","innerLabel","role","viewBox","cx","cy","icTooltipCss","Tooltip","delayedHideEvents","dialogOverflow","instantHideEvents","mouseOverTool","persistTooltip","onDialog","showEvents","disableHover","disableClick","getTooltipTranslate","dialogEl","child","children","tooltipX","tooltipY","left","bottom","top","right","height","toolTip","show","icDialogEl","popperInstance","createPopper","modifiers","options","offset","element","arrow","scroll","resize","console","warn","hide","removeAttribute","checkCloseTooltip","setTimeout","mouseEnterTooltip","mouseLeaveTooltip","handleKeyDown","key","manageEventListeners","action","method","destroy","onComponentRequiredPropUndefined","prop","propName","componentDidRender","typographyEl","maxLines","displayTooltip"],"sources":["src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","src/components/ic-button/ic-button.tsx","src/components/ic-loading-indicator/ic-loading-indicator.css?tag=ic-loading-indicator&encapsulation=shadow","src/components/ic-loading-indicator/ic-loading-indicator.tsx","src/components/ic-tooltip/ic-tooltip.css?tag=ic-tooltip&encapsulation=shadow","src/components/ic-tooltip/ic-tooltip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --min-width: Minimum width of the button.\n* @prop --height: The height of the button.\n*/\n\n:host {\n display: inline-block;\n position: relative;\n\n --button-default: var(--ic-action-default);\n --button-default-hover: var(--ic-action-default-hover);\n --button-default-active: var(--ic-action-default-active);\n --button-default-background-hover: var(--ic-action-default-bg-hover);\n --button-default-background-active: var(--ic-action-default-bg-active);\n --icon-width: 100%;\n --icon-height: 100%;\n}\n\n.button {\n font-family: var(--ic-font-body-family);\n text-decoration: none;\n font-weight: 600;\n font-size: 0.875rem;\n transition: var(--ic-easing-transition-fast);\n border-radius: var(--ic-border-radius);\n min-width: var(--min-width, 6.25rem);\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background: none;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n vertical-align: middle;\n}\n\n:host(.with-badge) .button {\n border-radius: 0.2188rem;\n}\n\n.button:hover {\n cursor: pointer;\n}\n\n.button:focus,\n:host .button:focus,\n:host(.light) .button:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.dark) .button {\n --button-default: var(--ic-action-dark);\n --button-default-hover: var(--ic-action-dark);\n --button-default-active: var(--ic-action-dark);\n --button-default-background-hover: var(--ic-action-dark-bg-hover);\n --button-default-background-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.light) .button {\n --button-default: var(--ic-action-light);\n --button-default-hover: var(--ic-action-light);\n --button-default-active: var(--ic-action-light);\n --button-default-background-hover: var(--ic-action-light-bg-hover);\n --button-default-background-active: var(--ic-action-light-bg-active);\n}\n\n:host(.white-background) .button {\n --button-default-background-hover: var(--ic-action-default-bg-hover-no-alpha);\n --button-default-background-active: var(\n --ic-action-default-bg-active-no-alpha\n );\n\n background-color: var(--ic-architectural-white);\n}\n\n:host(.white-background.dark) .button {\n --button-default-background-hover: var(--ic-action-dark-bg-hover-no-alpha);\n --button-default-background-active: var(--ic-action-dark-bg-active-no-alpha);\n}\n\n:host(.button-variant-primary.light) .button {\n color: var(--ic-color-primary-text);\n\n --button-default-hover: var(--ic-action-light-hover);\n --button-default-active: var(--ic-action-light-active);\n}\n\n:host(.button-variant-primary.dark) .button {\n --button-default-hover: var(--ic-action-dark-hover);\n --button-default-active: var(--ic-action-dark-active);\n}\n\n:host(.disabled),\n:host(.disabled) .button,\n:host(.loading),\n:host(.loading) .button {\n pointer-events: none;\n}\n\n:host(.top-icon) .button {\n flex-direction: column;\n --height: fit-content;\n}\n\n:host(.top-icon) .button .icon-container {\n margin-right: 0;\n}\n\n/* Variants */\n\n/* Primary */\n\n:host(.button-variant-primary) .button {\n color: var(--ic-architectural-white);\n background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover:not(:focus) {\n background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary) .button:hover:focus {\n background-color: var(--button-default-hover);\n border-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary:not(.light)) .button:hover:focus {\n color: var(--ic-architectural-white);\n}\n\n:host(.button-variant-primary) .button:active:not(:focus),\n:host(.button-variant-primary.loading) .button {\n background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary) .button:active:focus {\n background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary) .button:active {\n background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary:not(.light)) .button:active {\n color: var(--ic-architectural-white);\n}\n\n:host(.button-variant-primary.disabled) .button {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button {\n background: var(--ic-architectural-600);\n color: var(--ic-architectural-500);\n}\n\n/* Secondary */\n\n:host(.button-variant-secondary) .button {\n border: var(--ic-border-width) solid var(--button-default);\n color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover:not(:focus),\n:host(.button-variant-secondary) .button:hover:focus {\n background-color: var(--button-default-background-hover);\n border-color: var(--button-default-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-secondary) .button:active:not(:focus),\n:host(.button-variant-secondary) .button:active:focus,\n:host(.button-variant-secondary) .button:active {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.loading) .button {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) .button:hover,\n:host(.button-variant-secondary.disabled) .button:active {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) .button:hover,\n:host(.button-variant-secondary.light.disabled) .button:active {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n background: none;\n}\n\n/* Tertiary */\n\n:host(.button-variant-tertiary) .button {\n color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover:not(:focus),\n:host(.button-variant-tertiary) .button:hover:focus {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active:not(:focus),\n:host(.button-variant-tertiary) .button:active:focus,\n:host(.button-variant-tertiary) .button:active,\n:host(.button-variant-tertiary.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) .button:hover,\n:host(.button-variant-tertiary.disabled) .button:active {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) .button:hover,\n:host(.button-variant-tertiary.light.disabled) .button:active {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n background: none;\n}\n\n/* Icon */\n\n:host(.button-variant-icon) .button {\n color: var(--button-default);\n min-width: 0;\n gap: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon) .button:hover:not(:focus),\n:host(.button-variant-icon) .button:hover:focus {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) .button:hover,\n:host(.button-variant-icon.disabled) .button:active {\n color: var(--ic-architectural-300);\n background: none;\n}\n\n/* Destructive */\n\n:host(.button-variant-destructive) .button {\n color: var(--ic-architectural-white);\n background-color: var(--ic-action-destructive);\n text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover:not(:focus),\n:host(.button-variant-destructive) .button:hover:focus {\n background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active:not(:focus),\n:host(.button-variant-destructive) .button:active:focus,\n:host(.button-variant-destructive.loading) .button {\n background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-destructive.disabled) .button {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n/* Sizing */\n\n:host(.button-size-default) .button {\n height: var(--height, 2.5rem);\n padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-small) .button {\n height: var(--height, var(--ic-space-xl));\n padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.button-size-large) .button {\n height: var(--height, var(--ic-space-xxl));\n padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.button-size-default.button-variant-icon) .button {\n height: var(--height, var(--ic-space-xl));\n width: var(--ic-space-xl);\n padding: 0.375rem;\n}\n\n:host(.button-size-small.button-variant-icon) .button {\n height: var(--height, var(--ic-space-lg));\n width: var(--ic-space-lg);\n padding: var(--ic-space-xxs);\n}\n\n:host(.button-size-large.button-variant-icon) .button {\n height: var(--height, 2.5rem);\n width: 2.5rem;\n padding: var(--ic-space-xs);\n}\n\n/* Width */\n:host(.full-width),\n:host(.full-width) .button {\n width: 100%;\n}\n\n/* Loading */\n\ndiv.loading-container {\n position: relative;\n align-items: center;\n width: 100%;\n}\n\nic-loading-indicator {\n --outer-color: transparent;\n}\n\n@keyframes loading-animation {\n 0% {\n width: 0%;\n left: 0%;\n }\n\n 25% {\n width: 0%;\n left: 0%;\n opacity: 0;\n }\n\n 50% {\n width: 100%;\n left: 0%;\n opacity: 1;\n }\n\n 75% {\n width: 0%;\n left: 100%;\n }\n\n 100% {\n width: 0%;\n left: 100%;\n opacity: 0;\n }\n}\n\n/* Icons */\n\ndiv.icon-container {\n box-sizing: border-box;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: var(--ic-space-xs);\n}\n\ndiv.right-icon {\n margin-right: auto;\n margin-left: var(--ic-space-xs);\n}\n\n::slotted(:not(ic-badge)) {\n width: var(--icon-width) !important;\n height: var(--icon-height) !important;\n fill: currentcolor !important;\n pointer-events: none;\n}\n\n:host(.button-variant-icon) .button .icon-container {\n margin: 0;\n pointer-events: none;\n}\n\n/** SEARCH **/\n\n:host(.search-submit-button) ::slotted(svg) {\n --icon-height: 1.25rem;\n --icon-width: 1.25rem;\n}\n\n:host(.search-submit-button-small) ::slotted(svg) {\n --icon-height: 1rem;\n --icon-width: 1rem;\n}\n\n:host(.clear-button) {\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n box-shadow: none;\n background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) {\n display: flex;\n align-items: center;\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n --icon-height: 0.875rem;\n --icon-width: 0.875rem;\n}\n\n:host(.popout-menu-button) .button {\n height: var(--height);\n justify-content: left;\n border-radius: 0;\n white-space: pre-line;\n text-align: start;\n}\n\n:host(.popout-menu-button) div.icon-container {\n flex: none;\n}\n\n:host(.popout-menu-button) .button:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n display: none;\n}\n\n:host .ic-tooltip {\n display: block;\n}\n\n/** Dropdown **/\n:host .arrow-dropdown {\n margin-top: auto;\n}\n\n:host .dropdown-expanded {\n transform: rotate(180deg);\n margin-bottom: var(--ic-space-xxxs);\n}\n\n:host(.dropdown-no-icon) .button {\n padding-right: var(--ic-space-xs);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n .button {\n border: 0.125rem solid transparent;\n }\n}\n\n/** Pagination **/\n\n:host(.flip) ::slotted(svg) {\n transform: scaleX(-1);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n State,\n forceUpdate,\n h,\n} from \"@stencil/core\";\n\nimport {\n getThemeFromContext,\n inheritAttributes,\n isSlotUsed,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcButtonTypes,\n IcButtonVariants,\n IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n IcSizes,\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet buttonIds = 0;\n\n/**\n * @slot icon - Deprecated. This slot should not be used anymore. Use left-icon or right-icon slot instead.\n * @slot left-icon - Content will be placed to the left of the button label.\n * @slot right-icon - Content will be placed to the right of the button label.\n * @slot top-icon - Content will be placed above the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n@Component({\n tag: \"ic-button\",\n styleUrl: \"ic-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Button {\n private buttonEl: HTMLElement;\n private buttonIdNum = buttonIds++;\n private hasTooltip: boolean = false;\n private id: string;\n private inheritedAttributes: { [k: string]: unknown } = {};\n private describedByEl: HTMLElement = null;\n private describedById: string = null;\n private mutationObserver: MutationObserver = null;\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcButtonElement;\n\n @State() ariaLabel: string = null;\n @State() describedByContent: string = null;\n @State() title: string = null;\n\n /**\n * The appearance of the button, e.g. dark, light, or the default.\n */\n @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n /**\n * @internal Used to identify any related child component\n */\n @Prop() ariaControlsId: string | boolean;\n\n /**\n * @internal Used to identify any related child component\n */\n @Prop() ariaOwnsId: string | boolean;\n\n /**\n * If `true`, the button will be in disabled state.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n */\n @Prop() disableTooltip?: boolean = false;\n\n /**\n * If `true`, the user can save the linked URL instead of navigating to it.\n */\n @Prop() download?: string | boolean = false;\n\n /**\n * If `true`, the button will show a dropdown icon.\n */\n @Prop() dropdown?: boolean = false;\n\n /**\n * If `true`, the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true.\n */\n @Prop({ mutable: true, reflect: true }) dropdownExpanded?: boolean = false;\n\n /**\n * The <form> element to associate the button with.\n */\n @Prop() form?: string;\n\n /**\n * The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner.\n */\n @Prop() formaction?: string;\n\n /**\n * The way the submitted form data is encoded.\n */\n @Prop() formenctype?: string;\n\n /**\n * The HTTP method used to submit the form.\n */\n @Prop() formmethod?: string;\n\n /**\n * If `true`, the form will not be validated when submitted.\n */\n @Prop() formnovalidate?: boolean;\n\n /**\n * The place to display the response from submitting the form. It overrides the target attribute of the button's form owner.\n */\n @Prop() formtarget?: string;\n\n /**\n * If `true`, the button will fill the width of the container.\n */\n @Prop() fullWidth?: boolean = false;\n\n /**\n * The URL that the link points to. This will render the button as an \"a\" tag.\n */\n @Prop() href?: string;\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n\n /**\n * If `true`, the button will be in loading state.\n */\n @Prop() loading?: boolean = false;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * The size of the button to be displayed.\n */\n @Prop() size?: IcSizes = \"default\";\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n /**\n * The position of the tooltip in relation to the button.\n */\n @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n\n /**\n * If `true`, the secondary variant of button will have a transparent background rather than white.\n */\n @Prop() transparentBackground?: boolean = true;\n\n /**\n * The type of the button.\n */\n @Prop() type?: IcButtonTypes = \"button\";\n\n /**\n * The variant of the button to be displayed.\n */\n @Prop() variant?: IcButtonVariants = \"primary\";\n\n /**\n * Emitted when button has blur\n */\n @Event() icBlur!: EventEmitter<void>;\n\n /**\n * Emitted when button has focus\n */\n @Event() icFocus!: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.mutationObserver !== null && this.mutationObserver !== undefined) {\n this.mutationObserver.disconnect();\n }\n if (\n this.hostMutationObserver !== null &&\n this.hostMutationObserver !== undefined\n ) {\n this.hostMutationObserver.disconnect();\n }\n }\n\n componentWillUpdate(): void {\n this.loadingWidth();\n this.setHasTooltip();\n }\n\n componentWillLoad(): void {\n const allInheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"title\",\n ]);\n\n const {\n title,\n \"aria-label\": ariaLabel,\n ...restInheritedAttributes\n } = allInheritedAttributes;\n\n this.title = title as string;\n this.ariaLabel = ariaLabel as string;\n this.inheritedAttributes = restInheritedAttributes;\n\n removeDisabledFalse(this.disabled, this.el);\n\n this.el.setAttribute(\"exportparts\", \"button\");\n\n const id = this.el.id;\n this.id = id !== undefined ? id : null;\n this.setHasTooltip();\n\n if (!this.hasTooltip) {\n const describedById = this.inheritedAttributes[\n \"aria-describedby\"\n ] as string;\n if (describedById !== undefined) {\n this.describedById = describedById;\n const el = this.el.parentElement.querySelector(\n `#${describedById}`\n ) as HTMLElement;\n if (el !== undefined && el !== null) {\n this.describedByContent = el.innerText;\n this.describedByEl = el;\n }\n }\n }\n }\n\n componentDidLoad(): void {\n this.updateTheme();\n\n if (typeof MutationObserver !== \"undefined\") {\n if (this.describedById) {\n this.mutationObserver = new MutationObserver(this.mutationCallback);\n this.mutationObserver.observe(this.describedByEl, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n\n this.hostMutationObserver = new MutationObserver(\n this.hostMutationCallback\n );\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n }\n\n componentWillRender(): void {\n this.setViewBox()?.setAttribute(\"viewBox\", \"0 0 24 24\");\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled || this.loading) {\n event.stopImmediatePropagation();\n }\n if (this.dropdown) {\n this.dropdownExpanded = !this.dropdownExpanded;\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n /**\n * Sets focus on the native `button`.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.buttonEl) {\n this.buttonEl.focus();\n }\n }\n\n private hasIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n return iconEl !== null;\n }\n\n private hasLeftIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"left-icon\"]`);\n return iconEl !== null;\n }\n\n private hasTopIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"top-icon\"]`);\n return iconEl !== null;\n }\n\n private hasRightIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"right-icon\"]`);\n return iconEl !== null;\n }\n\n private setViewBox = () => {\n let iconEl;\n if (this.hasLeftIconSlot()) {\n iconEl = this.el.querySelector(`[slot=\"left-icon\"]`);\n } else if (this.hasRightIconSlot()) {\n iconEl = this.el.querySelector(`[slot=\"right-icon\"]`);\n } else {\n iconEl = null;\n }\n return iconEl;\n };\n\n private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n const hiddenFormButton = document.createElement(\"button\");\n\n hiddenFormButton.setAttribute(\"type\", this.el.type);\n hiddenFormButton.style.display = \"none\";\n\n form.appendChild(hiddenFormButton);\n\n hiddenFormButton.click();\n hiddenFormButton.remove();\n }\n\n private handleClick = (): void => {\n if (\n (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n !!this.el.closest(\"FORM\")\n ) {\n this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n }\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n private loadingWidth = () => {\n if (this.loading) {\n this.el.style.setProperty(\n \"--min-width\",\n `${this.el.getBoundingClientRect().width}px`\n );\n }\n };\n\n // triggered when text content of sibling element in light DOM changes\n private mutationCallback = (): void => {\n this.describedByContent = this.describedByEl.innerText;\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n const attribute = this.el.getAttribute(attributeName);\n if (attributeName === \"title\") this.title = attribute;\n else if (attributeName === \"aria-label\") this.ariaLabel = attribute;\n\n if (IC_INHERITED_ARIA.includes(attributeName)) {\n this.inheritedAttributes[attributeName] = attribute;\n forceComponentUpdate = true;\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private setHasTooltip = (): void => {\n this.hasTooltip =\n !this.disableTooltip && (!!this.title || this.variant === \"icon\");\n };\n\n render() {\n const TagType = (this.href && \"a\") || \"button\";\n const { title, ariaLabel, inheritedAttributes } = this;\n const buttonAttrs =\n TagType === \"button\"\n ? {\n type: this.type,\n disabled: this.disabled,\n form: this.form,\n formaction: this.formaction,\n formenctype: this.formenctype,\n formmethod: this.formmethod,\n formnovalidate: this.formnovalidate,\n formtarget: this.formtarget,\n }\n : {\n download: this.download !== false ? this.download : null,\n href: this.href,\n rel: this.rel,\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n hreflang: this.hreflang,\n };\n\n let describedBy: string = null;\n let buttonId: string = null;\n if (this.hasTooltip) {\n buttonId =\n this.id !== null\n ? `ic-button-with-tooltip-${this.id}`\n : `ic-button-with-tooltip-${this.buttonIdNum}`;\n describedBy = `ic-tooltip-${buttonId}`;\n } else {\n describedBy = this.describedById;\n }\n\n const ButtonContent = () => {\n return (\n <TagType\n class=\"button\"\n aria-disabled={this.loading || this.disabled ? \"true\" : null}\n aria-label={this.loading ? \"Loading\" : ariaLabel}\n {...buttonAttrs}\n {...inheritedAttributes}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ref={(el) => (this.buttonEl = el)}\n aria-describedby={describedBy}\n part=\"button\"\n >\n {this.hasIconSlot() && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n {this.hasLeftIconSlot() && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"left-icon\" />\n </div>\n )}\n {this.hasTopIconSlot() &&\n !this.hasLeftIconSlot() &&\n !this.hasRightIconSlot() &&\n !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"top-icon\" />\n </div>\n )}\n {this.loading ? (\n <div class=\"loading-container\">\n <ic-loading-indicator\n type=\"linear\"\n appearance={\n this.variant === \"primary\" ||\n this.variant === \"destructive\" ||\n this.appearance === IcThemeForegroundEnum.Dark ||\n this.appearance === IcThemeForegroundEnum.Light\n ? \"light\"\n : \"dark\"\n }\n ></ic-loading-indicator>\n </div>\n ) : (\n <slot />\n )}\n {this.hasRightIconSlot() && !this.loading && !this.dropdown && (\n <div class={{ \"icon-container\": true, \"right-icon\": true }}>\n <slot name=\"right-icon\" />\n </div>\n )}\n {this.dropdown &&\n !this.loading &&\n this.variant !== \"icon\" &&\n this.variant !== \"destructive\" && (\n <span\n class={{\n [\"arrow-dropdown\"]: !this.dropdownExpanded,\n [\"dropdown-expanded\"]: this.dropdownExpanded,\n }}\n innerHTML={arrowDropdown}\n />\n )}\n </TagType>\n );\n };\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled && !this.loading,\n [`button-variant-${this.variant}`]: true,\n [`button-size-${this.size}`]: true,\n [\"loading\"]: this.loading,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n [\"full-width\"]: this.fullWidth,\n [\"with-badge\"]: isSlotUsed(this.el, \"badge\"),\n [\"dropdown-no-icon\"]:\n this.dropdown &&\n !isSlotUsed(this.el, \"icon\") &&\n !isSlotUsed(this.el, \"left-icon\"),\n [\"top-icon\"]: isSlotUsed(this.el, \"top-icon\"),\n [\"white-background\"]:\n this.variant === \"secondary\" &&\n !this.transparentBackground &&\n this.appearance !== \"light\",\n }}\n onClick={this.handleClick}\n aria-owns={this.ariaOwnsId}\n aria-controls={this.ariaControlsId}\n aria-expanded={this.dropdown && `${this.dropdownExpanded}`}\n >\n {this.hasTooltip && (\n <ic-tooltip\n id={describedBy}\n label={title || ariaLabel}\n target={buttonId}\n placement={this.tooltipPlacement}\n silent={this.variant === \"icon\" && !!title}\n >\n <ButtonContent />\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n {!this.hasTooltip && <ButtonContent />}\n {this.describedByContent && (\n <span id={describedBy} class=\"ic-button-describedby\">\n {this.describedByContent}\n </span>\n )}\n </Host>\n );\n }\n}\n","@import \"../../global/normalize.css\";\n\n:host {\n /**\n * @prop --circular-diameter: Diameter of the circular-indicator\n */\n\n display: block;\n\n --linear-border-radius: 0.25rem;\n --inner-color: var(--ic-action-default);\n --outer-color: var(--ic-architectural-100);\n --label-color: var(--ic-color-primary-text);\n --margin: none;\n --linear-line-height: var(--ic-space-xs);\n}\n\n:host(.light) {\n --inner-color: var(--ic-architectural-white);\n --outer-color: var(--ic-architectural-800);\n --label-color: var(--ic-architectural-white);\n}\n\n.ic-loading-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host([size=\"small\"]) {\n --circular-diameter: 2.5rem;\n --linear-line-height: var(--ic-space-xxs);\n}\n\n:host([size=\"default\"]) {\n --circular-diameter: 5rem;\n}\n\n:host([size=\"large\"]) {\n --circular-diameter: 7.5rem;\n}\n\n:host([size=\"icon\"]) {\n display: inline-block;\n\n --margin: var(--ic-space-xxxs);\n --circular-diameter: 1.25rem;\n}\n\n:host(.label) {\n --margin: 0 0 var(--ic-space-xs) 0;\n}\n\n.ic-loading-label {\n white-space: nowrap;\n color: var(--label-color);\n margin-left: var(--label-margin-left);\n}\n\n.ic-loading-circular-outer {\n height: var(--circular-diameter);\n width: var(--circular-diameter);\n}\n\n.ic-loading-circular-outer.indeterminate {\n animation: circular-animation 1s linear;\n animation-iteration-count: infinite;\n}\n\n@keyframes circular-animation {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.ic-loading-circular-outer,\n.ic-loading-linear-outer {\n margin: var(--margin);\n}\n\n.ic-loading-linear-outer {\n background-color: var(--outer-color);\n height: var(--linear-line-height);\n width: 100%;\n border-radius: var(--linear-border-radius);\n overflow: hidden;\n}\n\n.ic-loading-linear-inner {\n position: relative;\n height: 100%;\n background-color: var(--inner-color);\n border-radius: var(--linear-border-radius);\n}\n\n.indeterminate > .ic-loading-linear-inner {\n animation: linear-animation 2s infinite;\n}\n\n.determinate > .ic-loading-linear-inner {\n transition: width 0.5s;\n width: var(--linear-width);\n}\n\n:host(.full-width) {\n --linear-border-radius: none;\n}\n\n@keyframes linear-animation {\n 0% {\n width: 0%;\n left: -1%;\n }\n\n 25% {\n width: 0%;\n left: -1%;\n }\n\n 50% {\n width: 101%;\n left: -1%;\n }\n\n 75% {\n width: 0%;\n left: 101%;\n }\n\n 100% {\n width: 0%;\n left: 101%;\n }\n}\n\n.ic-loading-circular-svg {\n position: relative;\n width: 100%;\n height: 100%;\n transform: rotate(-90deg);\n}\n\n.ic-loading-circular-svg circle {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: var(--outer-color);\n stroke-width: var(--circular-line-width);\n stroke-linecap: round;\n}\n\n/* --stroke-dash-array calculated via dashArray method */\n.ic-loading-circular-svg circle:nth-child(2) {\n --circular-indeterminate: calc(\n (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n );\n\n stroke-dasharray: var(--stroke-dasharray), var(--stroke-dasharray);\n stroke-dashoffset: var(--stroke-dashoffset, var(--circular-indeterminate));\n stroke: var(--compact-step-inner-color, var(--inner-color));\n}\n\n:host(.inner-label) .ic-loading-circular-inner {\n display: grid;\n}\n\n:host(.inner-label) .ic-loading-circular-svg,\n.inner-text {\n grid-column: 1;\n grid-row: 1;\n}\n\n:host(.not-required.compact-step-progress-indicator)\n .ic-loading-circular-svg\n circle:nth-child(2) {\n stroke: var(--ic-architectural-300);\n}\n\n.inner-text {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--ic-space-lg);\n height: inherit;\n overflow: hidden;\n margin: auto;\n color: var(--ic-status-info);\n}\n\n:host(.not-required.compact-step-progress-indicator) .inner-text {\n color: var(--ic-color-tertiary-text);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n .indeterminate > .ic-loading-circular-inner {\n forced-color-adjust: none;\n }\n\n .ic-loading-linear-outer {\n border: var(--ic-hc-border);\n }\n\n .ic-loading-linear-inner {\n background-color: canvastext;\n }\n\n .ic-loading-circular-svg circle {\n stroke: Background;\n }\n\n .ic-loading-circular-svg circle:nth-child(2) {\n stroke: canvastext;\n }\n\n :host(.not-required.compact-step-progress-indicator)\n .ic-loading-circular-svg\n circle:nth-child(2) {\n stroke: GrayText;\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport {\n IcLoadingCircleXYR,\n IcLoadingSizes,\n IcLoadingTypes,\n} from \"./ic-loading-indicator.types\";\nimport {\n IcThemeForegroundEnum,\n IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\nimport { isPropDefined } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-loading-indicator\",\n styleUrl: \"ic-loading-indicator.css\",\n shadow: true,\n})\nexport class LoadingIndicator {\n private circularMeter: SVGCircleElement;\n private innerElement?: HTMLDivElement;\n private interval: ReturnType<typeof setInterval>;\n private labelList: string[];\n private outerElement?: HTMLDivElement;\n\n @Element() el: HTMLIcLoadingIndicatorElement;\n\n @State() circularDiameter: number;\n @State() circularLineWidth: number;\n @State() indeterminate: boolean;\n @State() indicatorLabel: string;\n @State() showSecond: boolean = false;\n\n /**\n * The appearance of the loading indicator, e.g. dark or light.\n */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /**\n * The description that will be set as the aria-label of the loading indicator when not using a visible label.\n */\n @Prop() description?: string = \"Loading\";\n\n /**\n * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.\n */\n @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n /**\n * @internal The step number of a compact step, managed by ic-step.\n */\n @Prop() innerLabel?: number;\n\n /**\n * The time in milliseconds before the label changes.\n */\n @Prop() labelDuration?: number = 8000;\n\n /**\n * The maximum value that the progress value can take.\n * Used to calculate the proportional width of the progress bar.\n */\n @Prop() max?: number = 100;\n\n /**\n * The minimum value that the progress value can take.\n * Used to calculate the proportional width of the progress bar.\n */\n @Prop() min?: number = 0;\n\n /**\n * The size of the loading indicator.\n */\n @Prop({ reflect: true }) size?: IcLoadingSizes = \"default\";\n\n /**\n * The type of indicator, either linear or circular.\n */\n @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\n\n /**\n * The label to be displayed beneath the loading indicator.\n * Display a changing label by separating multiple messages with forward slashes.\n */\n @Prop() label?: string;\n\n @Watch(\"label\")\n watchPropHandler(): void {\n this.updateLabel();\n }\n\n /**\n * The current amount of progress made.\n * If not provided, component acts as an indeterminate loading indicator.\n */\n @Prop() progress?: number;\n\n @Watch(\"progress\")\n watchProgressHandler(): void {\n if (this.type === \"circular\") {\n this.updateCircularProgressMeter();\n }\n }\n\n disconnectedCallback(): void {\n clearInterval(this.interval);\n }\n\n componentWillLoad(): void {\n this.indeterminate = this.progress === undefined;\n this.updateLabel();\n this.el.setAttribute(\"exportparts\", \"ic-loading-container\");\n }\n\n componentDidLoad(): void {\n if (this.type === \"circular\") {\n this.setCircleLineWidth();\n this.circularMeter = this.el.shadowRoot.querySelector(\n \".ic-loading-circular-svg circle:nth-child(2)\"\n );\n this.updateCircularProgressMeter();\n }\n\n if (Number(this.progress) >= 0 && this.type === \"linear\") {\n this.setLinearDeterminateWidth();\n }\n }\n\n componentWillUpdate(): void {\n this.indeterminate = this.progress === undefined;\n }\n\n componentDidUpdate(): void {\n if (Number(this.progress) >= 0 && this.type === \"linear\") {\n this.setLinearDeterminateWidth();\n }\n }\n\n private updateCircularProgressMeter = () => {\n if (!this.indeterminate) {\n this.circularMeter.style.setProperty(\n \"--progress-value\",\n String(this.progress)\n );\n }\n };\n\n private getLabel = (\n labelIndex: number,\n setLabel: (label: string) => void\n ) => {\n return new Promise(() => {\n this.interval = setInterval(() => {\n if (labelIndex < this.labelList.length - 1) {\n labelIndex++;\n } else {\n labelIndex = 0;\n }\n setLabel(this.labelList[labelIndex]);\n }, this.labelDuration);\n });\n };\n\n private getLabelVariant = () => {\n let variant: \"label\" | \"h4\" | \"h2\" = \"h4\";\n const width = this.outerElement?.offsetWidth;\n if (this.size === \"small\" || (this.type === \"circular\" && width < 60)) {\n variant = \"label\";\n } else if (\n this.size === \"large\" ||\n (this.type === \"circular\" && width >= 120)\n ) {\n variant = \"h2\";\n }\n return variant;\n };\n\n // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n private setCircleLineWidth = () => {\n const { offsetWidth: width } = this.outerElement;\n\n const compactStepCircularLineWidth = this.el.classList.contains(\n \"compact-step-progress-indicator\"\n )\n ? 40\n : 0;\n const toastDismissTimerCircularLineWidth = this.el.classList.contains(\n \"toast-dismiss-timer\"\n )\n ? 20\n : 0;\n\n if (\n width ||\n compactStepCircularLineWidth ||\n toastDismissTimerCircularLineWidth\n ) {\n this.circularLineWidth =\n (compactStepCircularLineWidth ||\n toastDismissTimerCircularLineWidth ||\n width) * 0.1;\n this.circularDiameter =\n compactStepCircularLineWidth ||\n toastDismissTimerCircularLineWidth ||\n width;\n this.outerElement.style.setProperty(\n \"--circular-line-width\",\n `${this.circularLineWidth}px`\n );\n }\n };\n\n private setLinearDeterminateWidth = () => {\n if (!this.innerElement) return;\n // Ensure progress cannot be out of bounds\n\n const progress = Math.min(this.max, Math.max(this.min, this.progress));\n const proportion = (progress - this.min) / (this.max - this.min);\n this.showSecond = proportion > 0.5;\n if (this.showSecond) {\n this.innerElement.classList.remove(\"clip\");\n } else {\n this.innerElement.classList.add(\"clip\");\n }\n this.innerElement.style.setProperty(\n \"--linear-width\",\n `${proportion * 100}%`\n );\n };\n\n private calcOuterClass = (): string => {\n let cls = `ic-loading-${this.type}-outer`;\n cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n return cls;\n };\n\n private updateLabel = (): void => {\n if (isPropDefined(this.label)) {\n this.labelList = this.label.split(\"/\");\n const labelIndex = 0;\n this.indicatorLabel = this.labelList[labelIndex];\n if (this.labelList.length > 1) {\n this.getLabel(labelIndex, (label) => {\n this.indicatorLabel = label;\n });\n }\n }\n };\n\n private setCircleXY = (): IcLoadingCircleXYR => {\n if (this.circularDiameter > 0) {\n const r = this.circularDiameter / 2;\n const x = r;\n const y = r;\n const nextRadius = r - this.circularLineWidth / 2;\n this.setDashSteps(nextRadius);\n\n return { x, y, r: nextRadius };\n }\n return { x: 0, y: 0, r: 0 };\n };\n\n private setDashSteps = (radius: number) => {\n const dashArray = 2 * Math.PI * radius;\n const progress = Math.min(Math.max(this.progress, this.min), this.max);\n const proportion = -1 - (progress - this.min) / (this.max - this.min);\n\n this.circularMeter.style.setProperty(\n \"--stroke-dasharray\",\n `${dashArray}px`\n );\n\n if (!this.indeterminate) {\n this.circularMeter.style.setProperty(\n \"--circular-steps-max\",\n String(this.max)\n );\n this.circularMeter.style.setProperty(\n \"--stroke-dashoffset\",\n `${proportion * dashArray}px`\n );\n }\n };\n\n render() {\n const { appearance, label, description, size, fullWidth, innerLabel } =\n this;\n const { x, y, r } = this.setCircleXY();\n\n return (\n <Host\n class={{\n [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n [\"label\"]: !!label,\n [\"full-width\"]: fullWidth,\n [\"inner-label\"]: !!innerLabel,\n }}\n >\n <div class=\"ic-loading-container\" part=\"ic-loading-container\">\n <div\n ref={(el) => (this.outerElement = el as HTMLDivElement)}\n class={this.calcOuterClass()}\n role=\"progressbar\"\n aria-labelledby={\n this.label && this.size !== \"icon\" && \"ic-loading-label\"\n }\n aria-label={description}\n aria-valuenow={this.progress}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n >\n <div\n ref={(el) => (this.innerElement = el as HTMLDivElement)}\n class={`ic-loading-${this.type}-inner`}\n >\n {this.innerLabel &&\n this.innerLabel !== undefined &&\n this.size === \"small\" && (\n <ic-typography variant=\"subtitle-small\" class=\"inner-text\">\n {this.innerLabel}\n </ic-typography>\n )}\n {this.type === \"circular\" && (\n <svg\n class=\"ic-loading-circular-svg\"\n viewBox={`0 0 ${this.circularDiameter || 0} ${\n this.circularDiameter || 0\n }`}\n >\n <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n </svg>\n )}\n </div>\n </div>\n {label && size !== \"icon\" && (\n <ic-typography\n id=\"ic-loading-label\"\n class=\"ic-loading-label\"\n role=\"status\"\n variant={this.getLabelVariant()}\n >\n <p>{this.indicatorLabel}</p>\n </ic-typography>\n )}\n </div>\n </Host>\n );\n }\n}\n","@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-tooltip: z-index of tooltip\n */\n\n:host(.ic-tooltip) .ic-tooltip-container {\n background-color: var(--ic-architectural-800);\n color: #ffff;\n text-align: center;\n padding: var(--ic-space-xxxs) var(--ic-space-xs);\n border-radius: var(--ic-border-radius);\n border: var(--ic-border-width) solid var(--ic-architectural-40);\n position: absolute;\n max-width: 20rem;\n display: none;\n z-index: var(--ic-z-index-tooltip);\n box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed))\n .ic-tooltip-container,\n:host(.tooltip-disabled) .ic-tooltip-container {\n display: none !important;\n}\n\n:host(.tooltip-long-label-navigation-item-side-nav-expanded)\n .ic-tooltip-container[data-show] {\n display: block !important;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow,\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n position: absolute;\n background: inherit;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow {\n visibility: hidden;\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n visibility: visible;\n content: \"\";\n border: var(--ic-border-width) solid var(--ic-architectural-40);\n width: 100%;\n height: 100%;\n}\n\n:host(.ic-tooltip) .ic-tooltip-container[data-show] {\n display: block;\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"top\"]\n > .ic-tooltip-arrow {\n height: var(--ic-space-xxxs);\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"top\"]\n > .ic-tooltip-arrow::before {\n border-radius: 0 0 var(--ic-border-radius) var(--ic-border-radius);\n left: 0;\n top: var(--ic-space-xxxs);\n border-top: 0;\n transform: translateX(var(--tooltip-arrow-translate));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n > .ic-tooltip-arrow {\n top: calc(-1 * var(--ic-space-xxs));\n height: var(--ic-space-xxxs);\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n > .ic-tooltip-arrow::before {\n border-radius: var(--ic-border-radius) var(--ic-border-radius) 0 0;\n left: 0;\n top: var(--ic-space-1px);\n border-bottom: 0;\n transform: translateX(var(--tooltip-arrow-translate));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"left\"]\n > .ic-tooltip-arrow {\n width: var(--ic-space-xxxs);\n right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"left\"]\n > .ic-tooltip-arrow::before {\n border-radius: 0 var(--ic-border-radius) var(--ic-border-radius) 0;\n border-left: 0;\n top: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"right\"]\n > .ic-tooltip-arrow {\n width: var(--ic-space-xxxs);\n left: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"right\"]\n > .ic-tooltip-arrow::before {\n border-radius: var(--ic-border-radius) 0 0 var(--ic-border-radius);\n border-right: 0;\n top: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.on-dialog) .ic-tooltip-container {\n transform: translate(\n var(--tooltip-translate-x),\n var(--tooltip-translate-y)\n ) !important;\n}\n\n@media screen and (max-width: 576px) {\n :host(.ic-tooltip) .ic-tooltip-container {\n max-width: 18.875rem;\n }\n}\n\n@media (forced-colors: active) {\n :host(.ic-tooltip) .ic-tooltip-container,\n :host(.ic-tooltip) .ic-tooltip-arrow::before {\n border: var(--ic-hc-border);\n }\n}\n","import { Component, Element, Host, Prop, h, Method } from \"@stencil/core\";\nimport { Instance, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-tooltip\",\n styleUrl: \"ic-tooltip.css\",\n shadow: true,\n})\nexport class Tooltip {\n private arrow: HTMLDivElement;\n private delayedHideEvents = [\"mouseleave\"];\n private dialogOverflow = false;\n private icDialogEl: HTMLIcDialogElement;\n private instantHideEvents = [\"focusout\"];\n private mouseOverTool: boolean = false;\n private persistTooltip = false;\n private popperInstance: Instance;\n private onDialog: boolean = false;\n private showEvents = [\n !this.disableHover && \"mouseenter\",\n !this.disableHover && \"focusin\",\n !this.disableClick && \"click\",\n ];\n private toolTip: HTMLDivElement;\n\n @Element() el: HTMLIcTooltipElement;\n\n /**\n * @internal If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n */\n @Prop() disableClick?: boolean = false;\n\n /**\n * If `true`, the tooltip will not be displayed on hover, it will require a click.\n */\n @Prop() disableHover?: boolean = false;\n\n /**\n * The number of lines to display before truncating the text.\n */\n @Prop() maxLines?: number;\n\n /**\n * The position of the tooltip in relation to the parent element.\n */\n @Prop({ mutable: true }) placement?: IcTooltipPlacements = \"bottom\";\n\n /**\n * @internal Sets the tooltip to aria-hidden, when used as part of components that are already announced.\n */\n @Prop() silent?: boolean = false;\n\n /**\n * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n */\n @Prop({ reflect: true }) target?: string;\n\n /**\n * The text to display on the tooltip.\n */\n @Prop() label!: string;\n\n disconnectedCallback(): void {\n this.manageEventListeners(\"remove\");\n if (this.popperInstance !== undefined) {\n this.popperInstance.destroy();\n }\n }\n\n componentDidLoad(): void {\n this.manageEventListeners(\"add\");\n\n this.icDialogEl = this.el.closest(\"ic-dialog\");\n this.dialogOverflow =\n this.icDialogEl?.getAttribute(\"data-overflow\") === \"true\";\n\n this.onDialog = this.icDialogEl !== null;\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Tooltip\"\n );\n }\n\n componentDidRender(): void {\n const typographyEl = this.el.shadowRoot.querySelector(\n \".ic-tooltip-container > ic-typography\"\n );\n this.maxLines > 0 &&\n typographyEl.setAttribute(\n \"style\",\n `--truncation-max-lines: ${this.maxLines}`\n );\n }\n /**\n * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n * @param show Whether to show or hide the tooltip\n * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n */\n @Method()\n async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n this.persistTooltip = persistTooltip;\n show ? this.show() : this.hide();\n }\n\n private getTooltipTranslate = (dialogEl: DOMRect) => {\n const child = this.el.children[0].getBoundingClientRect();\n let tooltipX;\n let tooltipY;\n switch (this.placement) {\n case \"bottom\":\n tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n tooltipY = child.bottom - dialogEl.top;\n break;\n case \"bottom-start\":\n tooltipX = child.left - dialogEl.left;\n tooltipY = child.bottom - dialogEl.top;\n break;\n case \"bottom-end\":\n tooltipX = child.right - dialogEl.right;\n tooltipY = child.bottom - dialogEl.top;\n break;\n case \"top\":\n tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n tooltipY = child.top - dialogEl.bottom;\n break;\n case \"top-start\":\n tooltipX = child.left - dialogEl.left;\n tooltipY = child.top - dialogEl.bottom;\n break;\n case \"top-end\":\n tooltipX = child.right - dialogEl.right;\n tooltipY = child.top - dialogEl.bottom;\n break;\n case \"left\":\n case \"left-start\":\n tooltipX = child.right - dialogEl.right - child.width;\n tooltipY = child.bottom - dialogEl.top - child.height;\n break;\n case \"left-end\":\n tooltipX = child.right - dialogEl.right - child.width;\n tooltipY = child.top - dialogEl.bottom + child.height;\n break;\n case \"right\":\n case \"right-start\":\n tooltipX = child.left - dialogEl.left + child.width;\n tooltipY = child.bottom - dialogEl.top - child.height;\n break;\n case \"right-end\":\n tooltipX = child.left - dialogEl.left + child.width;\n tooltipY = child.top - dialogEl.bottom + child.height;\n break;\n }\n if (this.dialogOverflow && tooltipX < 0) {\n if (this.placement.includes(\"top\") || this.placement.includes(\"bottom\")) {\n this.toolTip.style.setProperty(\n \"--tooltip-arrow-translate\",\n `${tooltipX}px`\n );\n tooltipX = child.left - dialogEl.left;\n }\n if (this.placement.includes(\"left\")) {\n this.placement = \"right\";\n tooltipX = child.left - dialogEl.left + child.width;\n }\n }\n\n this.toolTip.style.setProperty(\"--tooltip-translate-x\", `${tooltipX}px`);\n this.toolTip.style.setProperty(\"--tooltip-translate-y\", `${tooltipY}px`);\n };\n\n private show = () => {\n if (this.label) {\n this.toolTip.setAttribute(\"data-show\", \"\");\n\n if (this.onDialog) {\n this.el.classList.add(\"on-dialog\");\n const dialogEl = this.icDialogEl.shadowRoot\n .querySelector(\"dialog\")\n .getBoundingClientRect();\n\n this.getTooltipTranslate(dialogEl);\n }\n\n this.popperInstance = createPopper(this.el, this.toolTip, {\n placement: this.placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 10],\n },\n },\n {\n name: \"arrow\",\n options: {\n element: this.arrow,\n },\n },\n {\n name: \"eventListeners\",\n options: { scroll: false, resize: false },\n },\n ],\n });\n } else {\n console.warn(`Tooltip can't display without prop 'label' set`);\n }\n };\n\n private hide = () => {\n this.toolTip.removeAttribute(\"data-show\");\n this.persistTooltip = false;\n };\n\n private checkCloseTooltip = () => {\n setTimeout(() => {\n if (!this.mouseOverTool && !this.persistTooltip) {\n this.hide();\n }\n }, 100);\n };\n\n private mouseEnterTooltip = () => {\n this.mouseOverTool = true;\n };\n\n private mouseLeaveTooltip = () => {\n this.mouseOverTool = false;\n this.checkCloseTooltip();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && !this.persistTooltip) {\n this.hide();\n }\n };\n\n private manageEventListeners = (action: \"add\" | \"remove\") => {\n const method =\n action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n this.showEvents.forEach((event) => {\n this.el[method](event, this.show);\n if (this.toolTip !== undefined) {\n this.toolTip[method](event, this.mouseEnterTooltip);\n }\n });\n\n if (!this.persistTooltip) {\n this.instantHideEvents.forEach((event) => {\n this.el[method](event, this.hide);\n });\n }\n\n this.delayedHideEvents.forEach((event) => {\n this.el[method](event, this.checkCloseTooltip);\n if (this.toolTip !== undefined) {\n this.toolTip[method](event, this.mouseLeaveTooltip);\n }\n });\n\n document[method](\"keydown\", this.handleKeyDown);\n };\n\n render() {\n const { label, maxLines, silent } = this;\n return (\n <Host class={{ \"ic-tooltip\": true }}>\n <div\n ref={(el) => (this.toolTip = el as HTMLDivElement)}\n role=\"tooltip\"\n class=\"ic-tooltip-container\"\n aria-hidden={silent}\n >\n <ic-typography maxLines={maxLines} variant=\"caption\">\n {label}\n </ic-typography>\n <div\n ref={(el) => (this.arrow = el as HTMLDivElement)}\n class=\"ic-tooltip-arrow\"\n ></div>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as t,c as i,h as e,H as s,g as
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as t,c as i,h as e,H as s,g as a}from"./p-6b5e91e2.js";import{c as o}from"./p-f074ef5b.js";import{i as n,V as r,a as c,L as d,d as l}from"./p-671b7cac.js";import{I as h}from"./p-26b7b18f.js";const u='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--bottom-position:var(--ic-space-xl);position:fixed;bottom:var(--bottom-position);left:50%;transform:translate(-50%);animation:fadein var(--ic-transition-duration-slow) ease-in-out;z-index:var(--ic-z-index-toast)}:host(.hidden){display:none;animation:fadeout var(--ic-transition-duration-slow) ease-in-out}.container{max-width:32.5rem;min-width:18rem;box-shadow:var(--ic-elevation-overlay);min-height:3.5rem;background-color:var(--ic-architectural-800);color:var(--ic-color-white-text);display:flex;align-items:center;position:relative;border-radius:var(--ic-border-radius)}.toast-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);position:absolute;border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs)}.divider-neutral{background-color:var(--ic-status-unknown)}.divider-info{background-color:var(--ic-status-info-contrast)}.divider-warning{background-color:var(--ic-status-warning-contrast)}.divider-error{background-color:var(--ic-status-error-contrast)}.divider-success{background-color:var(--ic-status-success-contrast)}.toast-icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}:host([variant="neutral"]) .toast-icon svg,::slotted(svg){fill:var(--ic-status-unknown)}:host([variant="info"]) .toast-icon svg{fill:var(--ic-status-info-contrast)}:host([variant="warning"]) .toast-icon svg{fill:var(--ic-status-warning-contrast)}:host([variant="error"]) .toast-icon svg{fill:var(--ic-status-error-contrast)}:host([variant="success"]) .toast-icon svg{fill:var(--ic-status-success-contrast)}.toast-content{margin-left:var(--ic-space-xs);width:100%}.no-icon{margin-left:var(--ic-space-md)}.toast-message{padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}.toast-action-container{padding-bottom:var(--ic-space-md)}ic-button,.toast-dismiss-timer{padding:var(--ic-space-xs)}@media (max-width: 576px){:host{--bottom-position:var(--ic-space-lg);width:calc(100% - 2 * var(--ic-space-md))}}@media (min-width: 993px){:host{--bottom-position:calc(var(--ic-space-xl) + var(--ic-space-xs))}}@media (forced-colors: active){.container{border:var(--ic-hc-border)}}@keyframes fadein{from{bottom:0;opacity:0}to{bottom:var(--bottom-position);opacity:1}}@keyframes fadeout{from{bottom:var(--bottom-position);opacity:1}to{bottom:0;opacity:0}}';const m=1e3;const p=70;const b=140;const f=class{constructor(e){t(this,e);this.icDismiss=i(this,"icDismiss",7);this.interactiveElements=[];this.dismissAction=()=>{this.icDismiss.emit()};this.handleProgressChange=()=>{this.timerProgress-=m/this.autoDismissTimeout*100};this.timerProgress=100;this.visible=false;this.autoDismissTimeout=5e3;this.dismissButtonAriaLabel="dismiss";this.dismissMode="manual";this.heading=undefined;this.message=undefined;this.neutralIconAriaLabel=undefined;this.variant=undefined}disconnectedCallback(){window.clearTimeout(this.dismissTimeout);window.clearInterval(this.timerRefreshInterval)}componentWillLoad(){var t,i;this.handleLongText(this.heading.length>p,((t=this.message)===null||t===void 0?void 0:t.length)>b);if(this.autoDismissTimeout<5e3)this.autoDismissTimeout=5e3;if(n(this.el,"action"))this.dismissMode="manual";this.isManual=this.dismissMode==="manual";if(n(this.el,"neutral-icon"))this.variant="neutral";if(this.variant==="neutral"){this.neutralVariantLabel=(i=this.neutralIconAriaLabel)!==null&&i!==void 0?i:r[this.variant].ariaLabel}if(this.isManual){const t=l(this.message)?`. ${this.message}`:"";this.el.setAttribute("aria-label",this.variant?this.neutralVariantLabel||r[this.variant].ariaLabel:this.heading);(this.variant||this.message)&&this.el.setAttribute("aria-description",this.variant?`${this.heading}${t}`:this.message)}}componentDidLoad(){c([{prop:this.heading,propName:"heading"}],"Toast");const t=d(this.el,"action");const i=this.el.shadowRoot.querySelector("ic-button");if(t)this.interactiveElements.push(t);if(i)this.interactiveElements.push(i)}handleDismiss(){this.visible=false;clearInterval(this.timerRefreshInterval);this.timerProgress=100}handleKeyboard(t){if(this.isManual&&this.visible){switch(t.key){case"Tab":t.preventDefault();this.findNextInteractiveElement(t.shiftKey).setFocus();break;case"Escape":!t.repeat&&this.dismissAction();t.stopImmediatePropagation();break}}}handleTimer(t){if(!this.isManual){switch(t.type){case"mouseenter":window.clearTimeout(this.dismissTimeout);window.clearInterval(this.timerRefreshInterval);this.timerProgress=100;break;case"mouseleave":this.dismissTimeout=window.setTimeout(this.dismissAction,this.autoDismissTimeout);this.timerRefreshInterval=window.setInterval(this.handleProgressChange,m);break}}}async setVisible(){if(!this.visible)this.visible=true;if(!this.isManual){this.dismissTimeout=window.setTimeout(this.dismissAction,this.autoDismissTimeout);this.timerRefreshInterval=window.setInterval(this.handleProgressChange,m);return null}else{window.setTimeout((()=>this.interactiveElements[0].setFocus()),200);return document.activeElement}}handleLongText(t,i){if(i||t){console.error(`Too many characters in toast ${t?"heading":""}${t&&i?" and ":""}${i?"message":""}. Refer to character limits specified in the prop description`)}}findNextInteractiveElement(t){const i=this.interactiveElements[0];const e=this.interactiveElements[this.interactiveElements.length-1];if(this.isActive(t?i:e))return t?e:i;let s;return this.interactiveElements.some(((t,i)=>{if(!this.isActive(t))return false;s=i;return true}))?this.interactiveElements[s+(t?-1:1)]:i}isActive(t){return t===this.el?!!this.el.shadowRoot.activeElement:document.activeElement===t}render(){const{variant:t,heading:i,message:a,visible:c,isManual:d,dismissButtonAriaLabel:l}=this;return e(s,{class:{["hidden"]:!c},role:d?"dialog":"status"},e("div",{class:"container"},t&&c&&e("div",{class:"toast-icon-container"},e("div",{class:{["divider"]:true,[`divider-${t}`]:true}}),t==="neutral"?e("slot",{name:"neutral-icon"}):e("span",{class:"toast-icon",innerHTML:r[t].icon})),e("div",{class:{["toast-content"]:true,["no-icon"]:t==="neutral"&&!n(this.el,"neutral-icon")}},e("div",{class:"toast-message"},e("ic-typography",{variant:"subtitle-large"},c&&e("h5",null,i)),a&&e("ic-typography",{variant:"body"},c&&e("p",null,a))),n(this.el,"action")&&e("div",{class:"toast-action-container"},e("slot",{name:"action"}))),!d?e("ic-loading-indicator",{class:"toast-dismiss-timer",appearance:"light",size:"icon",progress:this.timerProgress}):e("ic-button",{id:"dismiss-button",innerHTML:o,onClick:this.dismissAction,variant:"icon",appearance:h.Light,"aria-label":l})))}get el(){return a(this)}};f.style=u;export{f as ic_toast};
|
2
|
+
//# sourceMappingURL=p-b74f92b6.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["icToastCss","AUTO_DISMISS_TIMER_REFRESH_RATE_MS","TOAST_HEADING_CHAR_LIMIT","TOAST_MESSAGE_CHAR_LIMIT","Toast","this","interactiveElements","dismissAction","icDismiss","emit","handleProgressChange","timerProgress","autoDismissTimeout","disconnectedCallback","window","clearTimeout","dismissTimeout","clearInterval","timerRefreshInterval","componentWillLoad","handleLongText","heading","length","_a","message","isSlotUsed","el","dismissMode","isManual","variant","neutralVariantLabel","_b","neutralIconAriaLabel","VARIANT_ICONS","ariaLabel","toastMessage","isPropDefined","setAttribute","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","actionContent","getSlot","dismissButton","shadowRoot","querySelector","push","handleDismiss","visible","handleKeyboard","ev","key","preventDefault","findNextInteractiveElement","shiftKey","setFocus","repeat","stopImmediatePropagation","handleTimer","type","setTimeout","setInterval","setVisible","document","activeElement","headingTooLong","messageTooLong","console","error","isBackwards","firstEl","lastEl","isActive","currentIndex","some","index","targetEl","render","dismissButtonAriaLabel","h","Host","class","role","name","innerHTML","icon","appearance","size","progress","id","closeIcon","onClick","IcThemeForegroundEnum","Light"],"sources":["src/components/ic-toast/ic-toast.css?tag=ic-toast&encapsulation=shadow","src/components/ic-toast/ic-toast.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-toast: z-index of toast\n */\n\n:host {\n --bottom-position: var(--ic-space-xl);\n\n position: fixed;\n bottom: var(--bottom-position);\n left: 50%;\n transform: translate(-50%);\n animation: fadein var(--ic-transition-duration-slow) ease-in-out;\n z-index: var(--ic-z-index-toast);\n}\n\n:host(.hidden) {\n display: none;\n animation: fadeout var(--ic-transition-duration-slow) ease-in-out;\n}\n\n.container {\n max-width: 32.5rem;\n min-width: 18rem;\n box-shadow: var(--ic-elevation-overlay);\n min-height: 3.5rem;\n background-color: var(--ic-architectural-800);\n color: var(--ic-color-white-text);\n display: flex;\n align-items: center;\n position: relative;\n border-radius: var(--ic-border-radius);\n}\n\n.toast-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n position: absolute;\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n}\n\n.divider-neutral {\n background-color: var(--ic-status-unknown);\n}\n\n.divider-info {\n background-color: var(--ic-status-info-contrast);\n}\n\n.divider-warning {\n background-color: var(--ic-status-warning-contrast);\n}\n\n.divider-error {\n background-color: var(--ic-status-error-contrast);\n}\n\n.divider-success {\n background-color: var(--ic-status-success-contrast);\n}\n\n.toast-icon,\n::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n:host([variant=\"neutral\"]) .toast-icon svg,\n::slotted(svg) {\n fill: var(--ic-status-unknown);\n}\n\n:host([variant=\"info\"]) .toast-icon svg {\n fill: var(--ic-status-info-contrast);\n}\n\n:host([variant=\"warning\"]) .toast-icon svg {\n fill: var(--ic-status-warning-contrast);\n}\n\n:host([variant=\"error\"]) .toast-icon svg {\n fill: var(--ic-status-error-contrast);\n}\n\n:host([variant=\"success\"]) .toast-icon svg {\n fill: var(--ic-status-success-contrast);\n}\n\n.toast-content {\n margin-left: var(--ic-space-xs);\n width: 100%;\n}\n\n.no-icon {\n margin-left: var(--ic-space-md);\n}\n\n.toast-message {\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n.toast-action-container {\n padding-bottom: var(--ic-space-md);\n}\n\nic-button,\n.toast-dismiss-timer {\n padding: var(--ic-space-xs);\n}\n\n@media (max-width: 576px) {\n :host {\n --bottom-position: var(--ic-space-lg);\n\n width: calc(100% - 2 * var(--ic-space-md));\n }\n}\n\n@media (min-width: 993px) {\n :host {\n --bottom-position: calc(var(--ic-space-xl) + var(--ic-space-xs));\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-hc-border);\n }\n}\n\n@keyframes fadein {\n from {\n bottom: 0;\n opacity: 0;\n }\n\n to {\n bottom: var(--bottom-position);\n opacity: 1;\n }\n}\n\n@keyframes fadeout {\n from {\n bottom: var(--bottom-position);\n opacity: 1;\n }\n\n to {\n bottom: 0;\n opacity: 0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n getSlot,\n isPropDefined,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n IcActivationTypes,\n IcStatusVariants,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/**\n * @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n */\n@Component({\n tag: \"ic-toast\",\n styleUrl: \"ic-toast.css\",\n shadow: true,\n})\nexport class Toast {\n private dismissTimeout: number;\n private interactiveElements: ActionAreaElementTypes[] = [];\n private isManual: boolean;\n private neutralVariantLabel: string;\n private timerRefreshInterval: number;\n\n @Element() el: HTMLIcToastElement;\n\n @State() timerProgress = 100;\n @State() visible = false;\n\n /**\n * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n * (NOTE: Has a minimum value of `5000ms`)\n */\n @Prop({ mutable: true }) autoDismissTimeout? = 5000;\n\n /**\n * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n */\n @Prop() dismissButtonAriaLabel? = \"dismiss\";\n\n /**\n * How the toast will be dismissed. If manual will display a dismiss button.\n */\n @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n\n /**\n * The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n */\n @Prop() heading!: string;\n\n /**\n * The main body message of the toast. (NOTE: Should be no more than `140` characters)\n */\n @Prop() message?: string;\n\n /**\n * Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n */\n @Prop() neutralIconAriaLabel?: string;\n\n /**\n * The variant of the toast being rendered\n */\n @Prop({ mutable: true }) variant?: IcStatusVariants;\n\n /**\n * Is emitted when the user dismisses the toast\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n }\n\n componentWillLoad(): void {\n this.handleLongText(\n this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n );\n\n if (this.autoDismissTimeout < 5000) this.autoDismissTimeout = 5000;\n\n if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n this.isManual = this.dismissMode === \"manual\";\n\n if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n if (this.variant === \"neutral\") {\n this.neutralVariantLabel =\n this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n }\n\n if (this.isManual) {\n const toastMessage: string = isPropDefined(this.message)\n ? `. ${this.message}`\n : \"\";\n this.el.setAttribute(\n \"aria-label\",\n this.variant\n ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel\n : this.heading\n );\n (this.variant || this.message) &&\n this.el.setAttribute(\n \"aria-description\",\n this.variant ? `${this.heading}${toastMessage}` : this.message\n );\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Toast\"\n );\n const actionContent = getSlot(this.el, \"action\") as ActionAreaElementTypes;\n const dismissButton = this.el.shadowRoot.querySelector(\"ic-button\");\n if (actionContent) this.interactiveElements.push(actionContent);\n if (dismissButton) this.interactiveElements.push(dismissButton);\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleDismiss(): void {\n this.visible = false;\n clearInterval(this.timerRefreshInterval);\n this.timerProgress = 100;\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyboard(ev: KeyboardEvent): void {\n if (this.isManual && this.visible) {\n switch (ev.key) {\n case \"Tab\":\n ev.preventDefault();\n this.findNextInteractiveElement(ev.shiftKey).setFocus();\n break;\n case \"Escape\":\n !ev.repeat && this.dismissAction();\n ev.stopImmediatePropagation();\n break;\n }\n }\n }\n\n @Listen(\"mouseenter\")\n @Listen(\"mouseleave\")\n handleTimer(ev: MouseEvent): void {\n if (!this.isManual) {\n switch (ev.type) {\n case \"mouseenter\":\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n this.timerProgress = 100;\n break;\n case \"mouseleave\":\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n break;\n }\n }\n }\n\n /**\n * @internal Used to display the individual toast.\n * @returns The element that previously had focus before the toast appeared\n */\n @Method()\n async setVisible(): Promise<HTMLElement> {\n if (!this.visible) this.visible = true;\n if (!this.isManual) {\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n return null;\n } else {\n window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n return document.activeElement as HTMLElement;\n }\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private handleProgressChange = () => {\n this.timerProgress -=\n (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;\n };\n\n private handleLongText(\n headingTooLong: boolean,\n messageTooLong?: boolean\n ): void {\n if (messageTooLong || headingTooLong) {\n console.error(\n `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n headingTooLong && messageTooLong ? \" and \" : \"\"\n }${\n messageTooLong ? \"message\" : \"\"\n }. Refer to character limits specified in the prop description`\n );\n }\n }\n\n private findNextInteractiveElement(\n isBackwards: boolean\n ): ActionAreaElementTypes {\n const firstEl = this.interactiveElements[0];\n const lastEl =\n this.interactiveElements[this.interactiveElements.length - 1];\n\n if (this.isActive(isBackwards ? firstEl : lastEl))\n return isBackwards ? lastEl : firstEl;\n\n let currentIndex: number;\n\n return this.interactiveElements.some((el, index) => {\n if (!this.isActive(el)) return false;\n currentIndex = index;\n return true;\n })\n ? this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)]\n : firstEl;\n }\n\n private isActive(targetEl: HTMLElement): boolean {\n return targetEl === this.el\n ? !!this.el.shadowRoot.activeElement\n : document.activeElement === targetEl;\n }\n\n render() {\n const {\n variant,\n heading,\n message,\n visible,\n isManual,\n dismissButtonAriaLabel,\n } = this;\n return (\n <Host\n class={{ [\"hidden\"]: !visible }}\n role={isManual ? \"dialog\" : \"status\"}\n >\n <div class=\"container\">\n {variant && visible && (\n <div class=\"toast-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n <slot name=\"neutral-icon\" />\n ) : (\n <span\n class=\"toast-icon\"\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n )}\n <div\n class={{\n [\"toast-content\"]: true,\n [\"no-icon\"]:\n variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n }}\n >\n <div class=\"toast-message\">\n <ic-typography variant=\"subtitle-large\">\n {visible && <h5>{heading}</h5>}\n </ic-typography>\n {message && (\n <ic-typography variant=\"body\">\n {visible && <p>{message}</p>}\n </ic-typography>\n )}\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"toast-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n {!isManual ? (\n <ic-loading-indicator\n class=\"toast-dismiss-timer\"\n appearance=\"light\"\n size=\"icon\"\n progress={this.timerProgress}\n ></ic-loading-indicator>\n ) : (\n <ic-button\n id=\"dismiss-button\"\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n appearance={IcThemeForegroundEnum.Light}\n aria-label={dismissButtonAriaLabel}\n ></ic-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as e,h as t,H as i,g as o}from"./p-
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as e,h as t,H as i,g as o}from"./p-6b5e91e2.js";const a='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}.rows{display:flex;flex-direction:column;gap:var(--ic-space-md)}:host(.small) .rows{gap:var(--ic-space-xs)}.divider{margin-top:var(--ic-space-lg);margin-bottom:var(--ic-space-md);height:var(--ic-border-width);background-color:var(--ic-architectural-300)}:host(.small) .divider{margin-top:var(--ic-space-sm);margin-bottom:var(--ic-space-xs)}@media (forced-colors: active){.divider{background-color:canvastext}}';const n=class{constructor(t){e(this,t);this.heading=undefined;this.size="default";this.small=false}render(){const{heading:e,small:o,size:a}=this;const n=this.el.children;if(o||a==="small"){for(let e=0;e<n.length;e++){n[e].setAttribute("size","small")}}return t(i,{class:{["small"]:o||a==="small"}},t("div",{class:"heading",id:"data-entity-heading"},t("slot",{name:"heading"},t("ic-typography",{variant:"h3"},e))),t("div",{class:"divider"}),t("ul",{"aria-labelledby":"data-entity-heading",class:"rows"},t("slot",null)))}get el(){return o(this)}};n.style=a;export{n as ic_data_entity};
|
2
|
+
//# sourceMappingURL=p-b7a2e604.entry.js.map
|