@ukic/web-components 2.32.1 → 2.34.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +8 -4
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/{helpers-94b33ab0.js → helpers-6f6991cb.js} +17 -1
- package/dist/cjs/helpers-6f6991cb.js.map +1 -0
- package/dist/cjs/ic-accordion-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-accordion.cjs.entry.js +8 -1
- package/dist/cjs/ic-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-alert.cjs.entry.js +2 -9
- package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-back-to-top.cjs.entry.js +1 -1
- package/dist/cjs/ic-badge.cjs.entry.js +1 -1
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card.cjs.entry.js +18 -19
- package/dist/cjs/ic-card.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +5 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +5 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-chip.cjs.entry.js +9 -4
- package/dist/cjs/ic-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +1 -1
- package/dist/cjs/ic-dialog.cjs.entry.js +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +1 -1
- package/dist/cjs/ic-empty-state.cjs.entry.js +2 -12
- package/dist/cjs/ic-empty-state.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js +1 -1
- package/dist/cjs/ic-footer.cjs.entry.js +18 -7
- package/dist/cjs/ic-footer.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-hero.cjs.entry.js +2 -9
- package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +1 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +13 -11
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js +1 -1
- package/dist/cjs/ic-link.cjs.entry.js +1 -1
- package/dist/cjs/ic-menu-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-menu-item.cjs.entry.js +7 -1
- package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-button.cjs.entry.js +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +1 -1
- package/dist/cjs/ic-navigation-menu.cjs.entry.js +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +1 -1
- package/dist/cjs/ic-pagination-item.cjs.entry.js +5 -1
- package/dist/cjs/ic-pagination-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-pagination.cjs.entry.js +5 -1
- package/dist/cjs/ic-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +1 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js +2 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js +5 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +5 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-select.cjs.entry.js +5 -1
- package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +1 -1
- package/dist/cjs/ic-status-tag.cjs.entry.js +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +6 -2
- package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-tab.cjs.entry.js +5 -2
- package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-text-field.cjs.entry.js +12 -7
- package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-theme.cjs.entry.js +1 -1
- package/dist/cjs/ic-toast.cjs.entry.js +1 -1
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js +17 -0
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js +9 -2
- package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +2 -2
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-typography.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/types-dc22e301.js.map +1 -1
- package/dist/collection/components/ic-accordion/ic-accordion.js +10 -1
- package/dist/collection/components/ic-accordion/ic-accordion.js.map +1 -1
- package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js +3 -0
- package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js.map +1 -1
- package/dist/collection/components/ic-alert/ic-alert.js +3 -10
- package/dist/collection/components/ic-alert/ic-alert.js.map +1 -1
- package/dist/collection/components/ic-alert/test/basic/ic-alert.spec.js +21 -3
- package/dist/collection/components/ic-alert/test/basic/ic-alert.spec.js.map +1 -1
- package/dist/collection/components/ic-button/ic-button.js +2 -2
- package/dist/collection/components/ic-button/ic-button.js.map +1 -1
- package/dist/collection/components/ic-button/ic-button.types.js.map +1 -1
- package/dist/collection/components/ic-card/ic-card.js +22 -20
- package/dist/collection/components/ic-card/ic-card.js.map +1 -1
- package/dist/collection/components/ic-card/test/basic/ic-card.spec.js +44 -3
- package/dist/collection/components/ic-card/test/basic/ic-card.spec.js.map +1 -1
- package/dist/collection/components/ic-checkbox/ic-checkbox.js +6 -0
- package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +6 -0
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
- package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js +3 -0
- package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js.map +1 -1
- package/dist/collection/components/ic-chip/ic-chip.js +27 -2
- package/dist/collection/components/ic-chip/ic-chip.js.map +1 -1
- package/dist/collection/components/ic-chip/test/basic/ic-chip.spec.js +3 -0
- package/dist/collection/components/ic-chip/test/basic/ic-chip.spec.js.map +1 -1
- package/dist/collection/components/ic-empty-state/ic-empty-state.js +3 -13
- package/dist/collection/components/ic-empty-state/ic-empty-state.js.map +1 -1
- package/dist/collection/components/ic-footer/ic-footer.js +18 -7
- package/dist/collection/components/ic-footer/ic-footer.js.map +1 -1
- package/dist/collection/components/ic-footer/test/basic/ic-footer.spec.js +41 -0
- package/dist/collection/components/ic-footer/test/basic/ic-footer.spec.js.map +1 -1
- package/dist/collection/components/ic-hero/ic-hero.js +3 -10
- package/dist/collection/components/ic-hero/ic-hero.js.map +1 -1
- package/dist/collection/components/ic-hero/test/basic/ic-hero.spec.js +21 -3
- package/dist/collection/components/ic-hero/test/basic/ic-hero.spec.js.map +1 -1
- package/dist/collection/components/ic-input-component-container/ic-input-component-container.js +16 -11
- package/dist/collection/components/ic-input-component-container/ic-input-component-container.js.map +1 -1
- package/dist/collection/components/ic-input-component-container/test/basic/ic-input-component-container.spec.js +30 -3
- package/dist/collection/components/ic-input-component-container/test/basic/ic-input-component-container.spec.js.map +1 -1
- package/dist/collection/components/ic-menu/ic-menu.css +4 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.js +9 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.js.map +1 -1
- package/dist/collection/components/ic-menu-item/test/basic/ic-menu-item.spec.js +13 -0
- package/dist/collection/components/ic-menu-item/test/basic/ic-menu-item.spec.js.map +1 -1
- package/dist/collection/components/ic-pagination/ic-pagination.js +6 -0
- package/dist/collection/components/ic-pagination/ic-pagination.js.map +1 -1
- package/dist/collection/components/ic-pagination/test/basic/ic-pagination.spec.js +10 -0
- package/dist/collection/components/ic-pagination/test/basic/ic-pagination.spec.js.map +1 -1
- package/dist/collection/components/ic-pagination-item/ic-pagination-item.js +6 -0
- package/dist/collection/components/ic-pagination-item/ic-pagination-item.js.map +1 -1
- package/dist/collection/components/ic-pagination-item/test/basic/ic-pagination-item.spec.js +3 -0
- package/dist/collection/components/ic-pagination-item/test/basic/ic-pagination-item.spec.js.map +1 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.js +1 -0
- package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
- package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js +6 -0
- package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js.map +1 -1
- package/dist/collection/components/ic-radio-option/ic-radio-option.js +6 -0
- 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 +6 -0
- 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.spec.js +3 -0
- package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.spec.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select.js +6 -0
- package/dist/collection/components/ic-select/ic-select.js.map +1 -1
- package/dist/collection/components/ic-select/test/basic/ic-select.spec.js +10 -0
- package/dist/collection/components/ic-select/test/basic/ic-select.spec.js.map +1 -1
- package/dist/collection/components/ic-switch/ic-switch.js +6 -0
- package/dist/collection/components/ic-switch/ic-switch.js.map +1 -1
- package/dist/collection/components/ic-switch/test/basic/ic-switch.spec.js +3 -0
- package/dist/collection/components/ic-switch/test/basic/ic-switch.spec.js.map +1 -1
- package/dist/collection/components/ic-tab/ic-tab.js +6 -0
- package/dist/collection/components/ic-tab/ic-tab.js.map +1 -1
- package/dist/collection/components/ic-tab/test/basic/ic-tab.spec.js +16 -0
- package/dist/collection/components/ic-tab/test/basic/ic-tab.spec.js.map +1 -1
- package/dist/collection/components/ic-text-field/ic-text-field.js +14 -7
- package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
- package/dist/collection/components/ic-text-field/test/basic/ic-text-field.input.spec.js +3 -0
- package/dist/collection/components/ic-text-field/test/basic/ic-text-field.input.spec.js.map +1 -1
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +35 -1
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map +1 -1
- package/dist/collection/components/ic-toggle-button/test/basic/ic-toggle-button.spec.js +10 -0
- package/dist/collection/components/ic-toggle-button/test/basic/ic-toggle-button.spec.js.map +1 -1
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js +45 -0
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js.map +1 -1
- package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js +104 -0
- package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js.map +1 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.css +4 -0
- package/dist/collection/testspec.setup.js +14 -0
- package/dist/collection/testspec.setup.js.map +1 -1
- package/dist/collection/utils/helpers.js +15 -0
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/components/helpers.js +16 -1
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/ic-accordion.js +9 -1
- package/dist/components/ic-accordion.js.map +1 -1
- package/dist/components/ic-alert2.js +3 -10
- package/dist/components/ic-alert2.js.map +1 -1
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-card.js +22 -21
- package/dist/components/ic-card.js.map +1 -1
- package/dist/components/ic-checkbox-group.js +5 -0
- package/dist/components/ic-checkbox-group.js.map +1 -1
- package/dist/components/ic-checkbox.js +5 -0
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/components/ic-chip.js +11 -4
- package/dist/components/ic-chip.js.map +1 -1
- package/dist/components/ic-empty-state.js +3 -13
- package/dist/components/ic-empty-state.js.map +1 -1
- package/dist/components/ic-footer.js +18 -7
- package/dist/components/ic-footer.js.map +1 -1
- package/dist/components/ic-hero.js +3 -10
- package/dist/components/ic-hero.js.map +1 -1
- package/dist/components/ic-input-component-container2.js +15 -11
- package/dist/components/ic-input-component-container2.js.map +1 -1
- package/dist/components/ic-menu-item2.js +9 -1
- package/dist/components/ic-menu-item2.js.map +1 -1
- package/dist/components/ic-menu2.js +1 -1
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-pagination-item2.js +6 -1
- package/dist/components/ic-pagination-item2.js.map +1 -1
- package/dist/components/ic-pagination.js +5 -0
- package/dist/components/ic-pagination.js.map +1 -1
- package/dist/components/ic-radio-group.js +1 -0
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-radio-option.js +6 -1
- package/dist/components/ic-radio-option.js.map +1 -1
- package/dist/components/ic-search-bar.js +6 -1
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-select.js +6 -1
- package/dist/components/ic-select.js.map +1 -1
- package/dist/components/ic-side-navigation.js +1 -1
- package/dist/components/ic-stepper.js +1 -1
- package/dist/components/ic-switch.js +8 -3
- package/dist/components/ic-switch.js.map +1 -1
- package/dist/components/ic-tab.js +5 -2
- package/dist/components/ic-tab.js.map +1 -1
- package/dist/components/ic-text-field2.js +13 -7
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-theme.js +1 -1
- package/dist/components/ic-toggle-button-group.js +21 -1
- package/dist/components/ic-toggle-button-group.js.map +1 -1
- package/dist/components/ic-toggle-button.js +12 -2
- package/dist/components/ic-toggle-button.js.map +1 -1
- package/dist/components/ic-top-navigation.js +2 -2
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/components/types.js.map +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/{p-13ec2a00.entry.js → p-08478a4c.entry.js} +2 -2
- package/dist/core/p-12bac804.entry.js +2 -0
- package/dist/core/p-12bac804.entry.js.map +1 -0
- package/dist/core/{p-5ccd3703.entry.js → p-13b2c3a2.entry.js} +2 -2
- package/dist/core/{p-def5ba6b.entry.js → p-168a7440.entry.js} +2 -2
- package/dist/core/{p-9c9ba3cd.entry.js → p-193fc7d0.entry.js} +2 -2
- package/dist/core/{p-de0afa78.entry.js → p-1e4690f8.entry.js} +2 -2
- package/dist/core/p-1e4690f8.entry.js.map +1 -0
- package/dist/core/{p-2d930c9c.entry.js → p-1f6d36d5.entry.js} +2 -2
- package/dist/core/p-1f6d36d5.entry.js.map +1 -0
- package/dist/core/p-26b7b18f.js.map +1 -1
- package/dist/core/p-2a11be1e.entry.js +2 -0
- package/dist/core/p-2a11be1e.entry.js.map +1 -0
- package/dist/core/p-2cd1a601.entry.js +2 -0
- package/dist/core/p-2cd1a601.entry.js.map +1 -0
- package/dist/core/p-3ba915a5.entry.js +2 -0
- package/dist/core/p-3ba915a5.entry.js.map +1 -0
- package/dist/core/{p-78605899.entry.js → p-405d89bb.entry.js} +2 -2
- package/dist/core/{p-c1d5e7f2.entry.js → p-4c6dc1b2.entry.js} +2 -2
- package/dist/core/{p-85f30b1c.entry.js → p-51407872.entry.js} +2 -2
- package/dist/core/{p-9feec47e.entry.js → p-597c221c.entry.js} +2 -2
- package/dist/core/{p-223889da.entry.js → p-5d3c6ea1.entry.js} +2 -2
- package/dist/core/{p-0677ee1e.entry.js → p-65dc77ba.entry.js} +2 -2
- package/dist/core/p-65dc77ba.entry.js.map +1 -0
- package/dist/core/p-6beed7db.entry.js +2 -0
- package/dist/core/p-6beed7db.entry.js.map +1 -0
- package/dist/core/{p-60f7f555.entry.js → p-6d8dc552.entry.js} +2 -2
- package/dist/core/{p-230187a8.entry.js → p-72f292f2.entry.js} +2 -2
- package/dist/core/p-78f16b1a.entry.js +2 -0
- package/dist/core/p-78f16b1a.entry.js.map +1 -0
- package/dist/core/{p-96505636.entry.js → p-7b3a4b3f.entry.js} +2 -2
- package/dist/core/p-7b3a4b3f.entry.js.map +1 -0
- package/dist/core/{p-604e72ac.entry.js → p-7e8a4abd.entry.js} +2 -2
- package/dist/core/p-7f1594d9.entry.js +2 -0
- package/dist/core/p-7f1594d9.entry.js.map +1 -0
- package/dist/core/{p-2c587c73.entry.js → p-8dd2d3df.entry.js} +2 -2
- package/dist/core/p-90433147.entry.js +2 -0
- package/dist/core/p-90433147.entry.js.map +1 -0
- package/dist/core/{p-457a4c63.entry.js → p-915e5888.entry.js} +2 -2
- package/dist/core/p-915e5888.entry.js.map +1 -0
- package/dist/core/{p-02262e76.entry.js → p-91fab13d.entry.js} +2 -2
- package/dist/core/p-91fab13d.entry.js.map +1 -0
- package/dist/core/{p-3b4c9571.entry.js → p-922036e8.entry.js} +2 -2
- package/dist/core/p-922036e8.entry.js.map +1 -0
- package/dist/core/p-96e79d69.entry.js +2 -0
- package/dist/core/p-96e79d69.entry.js.map +1 -0
- package/dist/core/p-9a6790d8.entry.js +2 -0
- package/dist/core/p-9a6790d8.entry.js.map +1 -0
- package/dist/core/{p-dd9d8e68.entry.js → p-9ef08234.entry.js} +2 -2
- package/dist/core/{p-0a20131b.entry.js → p-a020afbd.entry.js} +2 -2
- package/dist/core/p-a020afbd.entry.js.map +1 -0
- package/dist/core/p-a141ea39.entry.js +2 -0
- package/dist/core/p-a141ea39.entry.js.map +1 -0
- package/dist/core/p-a438656d.entry.js +2 -0
- package/dist/core/p-a438656d.entry.js.map +1 -0
- package/dist/core/{p-dd4ef67f.entry.js → p-a9cea205.entry.js} +2 -2
- package/dist/core/{p-55b11f6f.entry.js → p-afa78488.entry.js} +2 -2
- package/dist/core/{p-69576aa0.entry.js → p-b21d5f94.entry.js} +2 -2
- package/dist/core/{p-570f1930.entry.js → p-b262eaff.entry.js} +2 -2
- package/dist/core/{p-d638d75d.entry.js → p-b60912a7.entry.js} +2 -2
- package/dist/core/p-b60912a7.entry.js.map +1 -0
- package/dist/core/{p-ea58ae1d.entry.js → p-b62735aa.entry.js} +2 -2
- package/dist/core/{p-c1a74ee4.entry.js → p-ba06cc95.entry.js} +2 -2
- package/dist/core/p-ba06cc95.entry.js.map +1 -0
- package/dist/core/{p-13a6e7ea.entry.js → p-ba884064.entry.js} +2 -2
- package/dist/core/{p-03f23a55.entry.js → p-bdaff5c9.entry.js} +2 -2
- package/dist/core/{p-e1def80b.entry.js → p-c939d07d.entry.js} +2 -2
- package/dist/core/p-d3344518.entry.js +2 -0
- package/dist/core/p-d3344518.entry.js.map +1 -0
- package/dist/core/{p-77d49138.entry.js → p-d375858e.entry.js} +2 -2
- package/dist/core/p-d41c847e.js +2 -0
- package/dist/core/p-d41c847e.js.map +1 -0
- package/dist/core/{p-5fad22f1.entry.js → p-dfb3e76e.entry.js} +2 -2
- package/dist/core/{p-4ef14601.entry.js → p-eae017ce.entry.js} +2 -2
- package/dist/core/{p-843ed766.entry.js → p-f3599009.entry.js} +2 -2
- package/dist/core/{p-0aed0cee.entry.js → p-f39741be.entry.js} +2 -2
- package/dist/core/{p-3af60dee.entry.js → p-f404b35e.entry.js} +2 -2
- package/dist/core/{p-22ef3303.entry.js → p-f4a29c16.entry.js} +2 -2
- package/dist/core/p-f4a29c16.entry.js.map +1 -0
- package/dist/esm/core.js +1 -1
- package/dist/esm/{helpers-3905ccc4.js → helpers-003f27c9.js} +17 -2
- package/dist/esm/helpers-003f27c9.js.map +1 -0
- package/dist/esm/ic-accordion-group.entry.js +1 -1
- package/dist/esm/ic-accordion.entry.js +8 -1
- package/dist/esm/ic-accordion.entry.js.map +1 -1
- package/dist/esm/ic-alert.entry.js +3 -10
- package/dist/esm/ic-alert.entry.js.map +1 -1
- package/dist/esm/ic-back-to-top.entry.js +1 -1
- package/dist/esm/ic-badge.entry.js +1 -1
- package/dist/esm/ic-breadcrumb-group.entry.js +1 -1
- package/dist/esm/ic-breadcrumb.entry.js +1 -1
- package/dist/esm/ic-button_3.entry.js +1 -1
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card.entry.js +19 -20
- package/dist/esm/ic-card.entry.js.map +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +5 -1
- package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
- package/dist/esm/ic-checkbox.entry.js +5 -1
- package/dist/esm/ic-checkbox.entry.js.map +1 -1
- package/dist/esm/ic-chip.entry.js +9 -4
- package/dist/esm/ic-chip.entry.js.map +1 -1
- package/dist/esm/ic-data-row.entry.js +1 -1
- package/dist/esm/ic-dialog.entry.js +1 -1
- package/dist/esm/ic-divider.entry.js +1 -1
- package/dist/esm/ic-empty-state.entry.js +3 -13
- package/dist/esm/ic-empty-state.entry.js.map +1 -1
- package/dist/esm/ic-footer-link-group.entry.js +1 -1
- package/dist/esm/ic-footer-link.entry.js +1 -1
- package/dist/esm/ic-footer.entry.js +18 -7
- package/dist/esm/ic-footer.entry.js.map +1 -1
- package/dist/esm/ic-hero.entry.js +3 -10
- package/dist/esm/ic-hero.entry.js.map +1 -1
- package/dist/esm/ic-horizontal-scroll.entry.js +1 -1
- package/dist/esm/ic-input-component-container_3.entry.js +14 -12
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-input-label_2.entry.js +1 -1
- package/dist/esm/ic-link.entry.js +1 -1
- package/dist/esm/ic-menu-group.entry.js +1 -1
- package/dist/esm/ic-menu-item.entry.js +7 -1
- package/dist/esm/ic-menu-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-button.entry.js +1 -1
- package/dist/esm/ic-navigation-group.entry.js +1 -1
- package/dist/esm/ic-navigation-item.entry.js +1 -1
- package/dist/esm/ic-navigation-menu.entry.js +1 -1
- package/dist/esm/ic-page-header.entry.js +1 -1
- package/dist/esm/ic-pagination-item.entry.js +5 -1
- package/dist/esm/ic-pagination-item.entry.js.map +1 -1
- package/dist/esm/ic-pagination.entry.js +5 -1
- package/dist/esm/ic-pagination.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +1 -1
- package/dist/esm/ic-radio-group.entry.js +2 -1
- package/dist/esm/ic-radio-group.entry.js.map +1 -1
- package/dist/esm/ic-radio-option.entry.js +5 -1
- package/dist/esm/ic-radio-option.entry.js.map +1 -1
- package/dist/esm/ic-search-bar.entry.js +5 -1
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-select.entry.js +5 -1
- package/dist/esm/ic-select.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +1 -1
- package/dist/esm/ic-status-tag.entry.js +1 -1
- package/dist/esm/ic-step.entry.js +1 -1
- package/dist/esm/ic-stepper.entry.js +1 -1
- package/dist/esm/ic-switch.entry.js +6 -2
- package/dist/esm/ic-switch.entry.js.map +1 -1
- package/dist/esm/ic-tab-group.entry.js +1 -1
- package/dist/esm/ic-tab.entry.js +5 -2
- package/dist/esm/ic-tab.entry.js.map +1 -1
- package/dist/esm/ic-text-field.entry.js +12 -7
- package/dist/esm/ic-text-field.entry.js.map +1 -1
- package/dist/esm/ic-theme.entry.js +1 -1
- package/dist/esm/ic-toast.entry.js +1 -1
- package/dist/esm/ic-toggle-button-group.entry.js +17 -0
- package/dist/esm/ic-toggle-button-group.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button.entry.js +9 -2
- package/dist/esm/ic-toggle-button.entry.js.map +1 -1
- package/dist/esm/ic-top-navigation.entry.js +2 -2
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/ic-typography.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/types-6f6b41a5.js.map +1 -1
- package/dist/types/components/ic-accordion/ic-accordion.d.ts +2 -0
- package/dist/types/components/ic-alert/ic-alert.d.ts +0 -1
- package/dist/types/components/ic-button/ic-button.d.ts +2 -2
- package/dist/types/components/ic-button/ic-button.types.d.ts +0 -1
- package/dist/types/components/ic-card/ic-card.d.ts +1 -1
- package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +1 -0
- package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts +1 -0
- package/dist/types/components/ic-chip/ic-chip.d.ts +5 -0
- package/dist/types/components/ic-empty-state/ic-empty-state.d.ts +0 -1
- package/dist/types/components/ic-footer/ic-footer.d.ts +1 -0
- package/dist/types/components/ic-hero/ic-hero.d.ts +0 -1
- package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts +2 -1
- package/dist/types/components/ic-menu-item/ic-menu-item.d.ts +1 -0
- package/dist/types/components/ic-pagination/ic-pagination.d.ts +1 -0
- package/dist/types/components/ic-pagination-item/ic-pagination-item.d.ts +1 -0
- package/dist/types/components/ic-radio-option/ic-radio-option.d.ts +1 -0
- package/dist/types/components/ic-search-bar/ic-search-bar.d.ts +1 -0
- package/dist/types/components/ic-select/ic-select.d.ts +1 -0
- package/dist/types/components/ic-switch/ic-switch.d.ts +1 -0
- package/dist/types/components/ic-tab/ic-tab.d.ts +1 -0
- package/dist/types/components/ic-text-field/ic-text-field.d.ts +2 -0
- package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts +6 -1
- package/dist/types/components/ic-toggle-button-group/ic-toggle-button-group.d.ts +7 -1
- package/dist/types/components.d.ts +28 -4
- package/dist/types/testspec.setup.d.ts +9 -0
- package/dist/types/utils/helpers.d.ts +6 -0
- package/dist/types/utils/types.d.ts +1 -0
- package/hydrate/index.js +158 -64
- package/package.json +4 -9
- package/vscode-data.json +40 -0
- package/dist/cjs/helpers-94b33ab0.js.map +0 -1
- package/dist/core/p-02262e76.entry.js.map +0 -1
- package/dist/core/p-0677ee1e.entry.js.map +0 -1
- package/dist/core/p-07514ea0.entry.js +0 -2
- package/dist/core/p-07514ea0.entry.js.map +0 -1
- package/dist/core/p-0a20131b.entry.js.map +0 -1
- package/dist/core/p-1d6e6ebe.entry.js +0 -2
- package/dist/core/p-1d6e6ebe.entry.js.map +0 -1
- package/dist/core/p-22ef3303.entry.js.map +0 -1
- package/dist/core/p-2889cc17.entry.js +0 -2
- package/dist/core/p-2889cc17.entry.js.map +0 -1
- package/dist/core/p-2d930c9c.entry.js.map +0 -1
- package/dist/core/p-3b4c9571.entry.js.map +0 -1
- package/dist/core/p-457a4c63.entry.js.map +0 -1
- package/dist/core/p-7591805d.entry.js +0 -2
- package/dist/core/p-7591805d.entry.js.map +0 -1
- package/dist/core/p-81deed36.entry.js +0 -2
- package/dist/core/p-81deed36.entry.js.map +0 -1
- package/dist/core/p-8c325d9b.entry.js +0 -2
- package/dist/core/p-8c325d9b.entry.js.map +0 -1
- package/dist/core/p-96505636.entry.js.map +0 -1
- package/dist/core/p-b1879a44.entry.js +0 -2
- package/dist/core/p-b1879a44.entry.js.map +0 -1
- package/dist/core/p-be5d5f93.entry.js +0 -2
- package/dist/core/p-be5d5f93.entry.js.map +0 -1
- package/dist/core/p-c1a74ee4.entry.js.map +0 -1
- package/dist/core/p-cd61c238.entry.js +0 -2
- package/dist/core/p-cd61c238.entry.js.map +0 -1
- package/dist/core/p-cdf6e902.entry.js +0 -2
- package/dist/core/p-cdf6e902.entry.js.map +0 -1
- package/dist/core/p-d638d75d.entry.js.map +0 -1
- package/dist/core/p-da5098db.entry.js +0 -2
- package/dist/core/p-da5098db.entry.js.map +0 -1
- package/dist/core/p-dbc0f5da.entry.js +0 -2
- package/dist/core/p-dbc0f5da.entry.js.map +0 -1
- package/dist/core/p-de0afa78.entry.js.map +0 -1
- package/dist/core/p-ee1c9f20.entry.js +0 -2
- package/dist/core/p-ee1c9f20.entry.js.map +0 -1
- package/dist/core/p-fef9e8c9.js +0 -2
- package/dist/core/p-fef9e8c9.js.map +0 -1
- package/dist/esm/helpers-3905ccc4.js.map +0 -1
- /package/dist/core/{p-13ec2a00.entry.js.map → p-08478a4c.entry.js.map} +0 -0
- /package/dist/core/{p-5ccd3703.entry.js.map → p-13b2c3a2.entry.js.map} +0 -0
- /package/dist/core/{p-def5ba6b.entry.js.map → p-168a7440.entry.js.map} +0 -0
- /package/dist/core/{p-9c9ba3cd.entry.js.map → p-193fc7d0.entry.js.map} +0 -0
- /package/dist/core/{p-78605899.entry.js.map → p-405d89bb.entry.js.map} +0 -0
- /package/dist/core/{p-c1d5e7f2.entry.js.map → p-4c6dc1b2.entry.js.map} +0 -0
- /package/dist/core/{p-85f30b1c.entry.js.map → p-51407872.entry.js.map} +0 -0
- /package/dist/core/{p-9feec47e.entry.js.map → p-597c221c.entry.js.map} +0 -0
- /package/dist/core/{p-223889da.entry.js.map → p-5d3c6ea1.entry.js.map} +0 -0
- /package/dist/core/{p-60f7f555.entry.js.map → p-6d8dc552.entry.js.map} +0 -0
- /package/dist/core/{p-230187a8.entry.js.map → p-72f292f2.entry.js.map} +0 -0
- /package/dist/core/{p-604e72ac.entry.js.map → p-7e8a4abd.entry.js.map} +0 -0
- /package/dist/core/{p-2c587c73.entry.js.map → p-8dd2d3df.entry.js.map} +0 -0
- /package/dist/core/{p-dd9d8e68.entry.js.map → p-9ef08234.entry.js.map} +0 -0
- /package/dist/core/{p-dd4ef67f.entry.js.map → p-a9cea205.entry.js.map} +0 -0
- /package/dist/core/{p-55b11f6f.entry.js.map → p-afa78488.entry.js.map} +0 -0
- /package/dist/core/{p-69576aa0.entry.js.map → p-b21d5f94.entry.js.map} +0 -0
- /package/dist/core/{p-570f1930.entry.js.map → p-b262eaff.entry.js.map} +0 -0
- /package/dist/core/{p-ea58ae1d.entry.js.map → p-b62735aa.entry.js.map} +0 -0
- /package/dist/core/{p-13a6e7ea.entry.js.map → p-ba884064.entry.js.map} +0 -0
- /package/dist/core/{p-03f23a55.entry.js.map → p-bdaff5c9.entry.js.map} +0 -0
- /package/dist/core/{p-e1def80b.entry.js.map → p-c939d07d.entry.js.map} +0 -0
- /package/dist/core/{p-77d49138.entry.js.map → p-d375858e.entry.js.map} +0 -0
- /package/dist/core/{p-5fad22f1.entry.js.map → p-dfb3e76e.entry.js.map} +0 -0
- /package/dist/core/{p-4ef14601.entry.js.map → p-eae017ce.entry.js.map} +0 -0
- /package/dist/core/{p-843ed766.entry.js.map → p-f3599009.entry.js.map} +0 -0
- /package/dist/core/{p-0aed0cee.entry.js.map → p-f39741be.entry.js.map} +0 -0
- /package/dist/core/{p-3af60dee.entry.js.map → p-f404b35e.entry.js.map} +0 -0
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as e,f as i,h as s,H as a,g as n}from"./p-6b5e91e2.js";import{a as o}from"./p-26b7b18f.js";import{j as r,G as l,O as h,n as c,x as d,m as u,k as p,a as m,s as b,p as f,i as x,y as v}from"./p-fef9e8c9.js";const g='/*! 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;--ic-input-label-helpertext-padding:var(--ic-space-xxs)}:host(.fullwidth){width:100%}::-moz-placeholder{color:var(--ic-color-tertiary-text);opacity:1}::placeholder{color:var(--ic-color-tertiary-text);opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs)}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:0.375rem}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(--ic-architectural-200)}input.readonly,textarea.readonly{color:var(--ic-color-primary-text)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type="number"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.maxlengthtext{color:var(--ic-color-secondary-text);padding-right:var(--ic-space-xxxs)}.no-left-pad{padding-left:0}::slotted([slot="icon"]){fill:var(--ic-color-tertiary-text)}.has-value ::slotted([slot="icon"]){fill:var(--ic-color-primary-text)}.charcount{margin-right:calc(-1 * var(--ic-space-xxxs))}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}input[type="search"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot="icon"]){fill:currentcolor}}';let y=0;const w=[...v,"title"];const k=class{constructor(s){t(this,s);this.getValidationText=e(this,"getValidationText",7);this.icBlur=e(this,"icBlur",7);this.icChange=e(this,"icChange",7);this.icFocus=e(this,"icFocus",7);this.icInput=e(this,"icInput",7);this.icKeydown=e(this,"icKeydown",7);this.inheritedAttributes={};this.hostMutationObserver=null;this.getMaxLengthExceeded=t=>{this.numChars=t.length;if(this.type==="number"){this.minValueUnattained=t&&Number(t)<Number(this.min);this.maxValueExceeded=Number(t)>Number(this.max)}if(this.maxLength>0){this.maxLengthExceeded=this.numChars>this.maxLength}};this.getMaxCharactersReached=t=>{this.numChars=t.length;this.maxCharactersReached=this.maxCharacters>0?this.numChars>=this.maxCharacters:false;if(this.maxCharactersError&&!this.maxCharactersReached){this.maxCharactersError=false}};this.onInput=t=>{this.value=t.target.value;this.icInput.emit({value:this.value})};this.onBlur=t=>{const e=t.target.value;this.numChars=e.length;this.minCharactersUnattained=this.minCharacters>0?this.numChars<this.minCharacters:false;this.icBlur.emit({value:e})};this.onFocus=t=>{this.icFocus.emit({value:t.target.value})};this.hasStatus=t=>t!==""&&!this.disabled;this.handleFormReset=()=>{this.value=this.initialValue};this.hostMutationCallback=t=>{let e=false;t.forEach((({attributeName:t,type:i,addedNodes:s,removedNodes:a})=>{if(w.includes(t)){this.inheritedAttributes[t]=this.el.getAttribute(t);e=true}else if(i==="childList"){e=r(s,a,"icon")}}));if(e){i(this)}};this.showValidation=()=>{const t=this.readonly?0:this.maxLength;const e=l(this.validationStatus)||l(this.validationText);const i=this.minValueUnattained||this.maxValueExceeded;const s=t>0||this.maxCharactersError||this.minCharactersUnattained;return(!e||i||s)&&!this.validationInlineInternal};this.numChars=0;this.maxCharactersReached=false;this.maxCharactersError=false;this.minCharactersUnattained=false;this.maxLengthExceeded=false;this.maxValueExceeded=false;this.minValueUnattained=false;this.ariaActiveDescendant=undefined;this.ariaAutocomplete=undefined;this.ariaExpanded=undefined;this.ariaOwns=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autoFocus=false;this.disabled=false;this.fullWidth=false;this.helperText="";this.hideLabel=false;this.hiddenInput=true;this.inputId=`ic-text-field-input-${y++}`;this.inputmode="text";this.label=undefined;this.max=undefined;this.maxCharacters=0;this.maxLength=0;this.maxLengthMessage="Maximum length exceeded";this.min=undefined;this.minCharacters=0;this.name=this.inputId;this.placeholder="";this.readonly=false;this.required=false;this.resize=false;this.role=undefined;this.rows=1;this.size="default";this.small=false;this.spellcheck=false;this.truncateValue=undefined;this.type="text";this.validationInline=false;this.validationInlineInternal=false;this.validationStatus="";this.validationText="";this.debounce=0;this.value="";this.initialValue=this.value}debounceChanged(){this.icChange=h(this.icChange,this.debounce)}watchValueHandler(t){if(this.inputEl&&this.inputEl.value!==t){this.inputEl.value=t}this.getMaxLengthExceeded(t);this.getMaxCharactersReached(t);this.icChange.emit({value:t})}connectedCallback(){this.debounceChanged()}disconnectedCallback(){var t;c(this.el,this.handleFormReset);(t=this.hostMutationObserver)===null||t===void 0?void 0:t.disconnect()}componentWillLoad(){if(this.value!==this.initialValue){this.watchValueHandler(this.value)}this.getMaxLengthExceeded(this.value);this.getMaxCharactersReached(this.value);this.inheritedAttributes=d(this.el,w);if(this.readonly){this.maxLengthExceeded=false;this.maxValueExceeded=false;this.minValueUnattained=false}u(this.el,this.handleFormReset);p(this.disabled,this.el)}componentDidLoad(){m([{prop:this.label,propName:"label"}],"Text Field");if(this.validationInlineInternal){this.getValidationText.emit({value:this.validationText})}this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{attributes:true,childList:true})}handleKeyDown(t){this.icKeydown.emit({event:t});this.maxCharactersError=this.maxCharactersReached}async setFocus(){var t;(t=this.inputEl)===null||t===void 0?void 0:t.focus()}render(){const{inputId:t,name:e,label:i,required:n,size:r,small:l,placeholder:h,helperText:c,rows:d,resize:u,disabled:p,value:m,min:v,max:g,maxLength:y,numChars:w,readonly:k,maxLengthExceeded:z,maxCharacters:C,maxCharactersError:I,maxCharactersReached:$,minCharacters:L,minCharactersUnattained:j,minValueUnattained:F,maxValueExceeded:M,validationStatus:N,validationText:T,validationInline:V,validationInlineInternal:q,spellcheck:B,inputmode:O,fullWidth:W,truncateValue:E,hiddenInput:H,showValidation:D}=this;const K=k||p;const S=z||M||F||j||I?I?o.Warning:o.Error:N;const U=z?this.maxLengthMessage:I?`Maximum input is ${C} characters`:M?`Maximum value of ${g} exceeded`:F?`Minimum value of ${v} not met`:j?`Minimum input is ${L} characters`:T;const _=k?0:y;const G=z||I||M||F||y===0&&S===o.Error?"assertive":"polite";const R=this.hasStatus(S)&&!(S==o.Success&&V)&&!q;const A=d>1;const J=y>0?`${t}-charcount-desc`:"";const P=`${J} ${b(t,c!=="",R)}`.trim();const Q=K&&!k;const X=!!this.el.querySelector(`[slot="icon"]`)&&!Q;const Y=`${S===o.Error}`;if(H){f(true,this.el,e,m,K)}return s(a,{class:{["fullwidth"]:W}},s("ic-input-container",{readonly:k,disabled:K},!this.hideLabel&&s("ic-input-label",{for:t,label:i,helperText:c,required:n,disabled:Q,readonly:k}),s("ic-input-component-container",{size:l?"small":r,validationStatus:S,multiLine:A,disabled:K,readonly:k,validationInline:V,fullWidth:W},X&&s("span",{class:{["readonly"]:k,["has-value"]:m.length>0},slot:"left-icon"},s("slot",{name:"icon"})),!A?s("input",Object.assign({id:t,name:e,ref:t=>this.inputEl=t,type:this.type,min:v,max:g,value:m,class:{["no-left-pad"]:!X&&k,["readonly"]:k,["truncate-value"]:E},placeholder:h?h:"",required:n,disabled:K,readonly:k,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":i,"aria-describedby":P,"aria-invalid":Y,"aria-activedescendant":this.ariaActiveDescendant,"aria-expanded":this.ariaExpanded,"aria-owns":this.ariaOwns,autocomplete:this.autocomplete,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:B,inputmode:O,role:this.role,maxlength:$?C:null,minlength:j?L:null},this.inheritedAttributes)):s("textarea",Object.assign({id:t,class:{["no-resize"]:u===false||k,["no-left-pad"]:!X&&k,["readonly"]:k},name:e,ref:t=>this.inputEl=t,value:m,rows:d,required:n,disabled:K,placeholder:h?h:"",readonly:k,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":i,"aria-describedby":P,"aria-invalid":Y,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:B,inputmode:O,maxlength:$?C:null,minlength:j?L:null},this.inheritedAttributes)),x(this.el,"clear-button")&&s("slot",{name:"clear-button"}),x(this.el,"search-submit-button")&&s("slot",{name:"search-submit-button"})),x(this.el,"menu")&&s("slot",{name:"menu"}),D()&&s("ic-input-validation",{status:this.hasStatus(S)===false||S===o.Success&&V||q?"":S,message:R?U:"",ariaLiveMode:G,for:t,fullWidth:W},!k&&_>0&&s("div",{slot:"validation-message-adornment"},s("ic-typography",{variant:"caption",class:{["maxlengthtext"]:true,["error"]:z,["disabled"]:Q}},s("span",{"aria-live":"polite",id:`${t}-charcount`,class:"charcount"},w,"/",_),s("span",{hidden:true,id:J},"Field can contain a maximum of ",_," characters."))))))}get el(){return n(this)}static get watchers(){return{debounce:["debounceChanged"],value:["watchValueHandler"]}}};k.style=g;export{k as ic_text_field};
|
2
|
-
//# sourceMappingURL=p-cd61c238.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icTextFieldCss","inputIds","MUTABLE_ATTRIBUTES","IC_INHERITED_ARIA","TextField","this","inheritedAttributes","hostMutationObserver","getMaxLengthExceeded","value","numChars","length","type","minValueUnattained","Number","min","maxValueExceeded","max","maxLength","maxLengthExceeded","getMaxCharactersReached","maxCharactersReached","maxCharacters","maxCharactersError","onInput","ev","target","icInput","emit","onBlur","minCharactersUnattained","minCharacters","icBlur","onFocus","icFocus","hasStatus","status","disabled","handleFormReset","initialValue","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","addedNodes","removedNodes","includes","el","getAttribute","checkSlotInChildMutations","forceUpdate","showValidation","maxNumChars","readonly","emptyString","isEmptyString","validationStatus","validationText","valueOutsideRange","charOutsideRange","validationInlineInternal","undefined","inputId","debounceChanged","icChange","debounceEvent","debounce","watchValueHandler","newValue","inputEl","connectedCallback","disconnectedCallback","removeFormResetListener","_a","disconnect","componentWillLoad","inheritAttributes","addFormResetListener","removeDisabledFalse","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","getValidationText","MutationObserver","observe","attributes","childList","handleKeyDown","icKeydown","event","setFocus","focus","render","name","required","size","small","placeholder","helperText","rows","resize","validationInline","spellcheck","inputmode","fullWidth","truncateValue","hiddenInput","disabledMode","currentStatus","IcInformationStatus","Warning","Error","currentValidationText","maxLengthMessage","messageAriaLive","showStatusText","Success","multiline","hiddenCharCountDescId","describedBy","getInputDescribedByText","trim","disabledText","showLeftIcon","querySelector","invalid","renderHiddenInput","h","Host","class","hideLabel","for","multiLine","slot","Object","assign","id","ref","ariaActiveDescendant","ariaExpanded","ariaOwns","autocomplete","autocapitalize","autoFocus","role","maxlength","minlength","isSlotUsed","message","ariaLiveMode","variant","hidden"],"sources":["src/components/ic-text-field/ic-text-field.css?tag=ic-text-field&encapsulation=shadow","src/components/ic-text-field/ic-text-field.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n /**\n * @prop --input-width: Width of the input field\n */\n display: block;\n\n --ic-input-label-helpertext-padding: var(--ic-space-xxs);\n}\n\n:host(.fullwidth) {\n width: 100%;\n}\n\n::placeholder {\n color: var(--ic-color-tertiary-text);\n opacity: 1;\n}\n\ninput,\ntextarea {\n border: 0;\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n line-height: 1.5rem;\n letter-spacing: 0.005rem;\n width: 100%;\n padding-right: var(--ic-space-xs);\n padding-left: var(--ic-space-xs);\n}\n\ntextarea {\n min-height: var(--ic-space-lg);\n resize: vertical;\n padding-top: 0.375rem;\n}\n\ninput:focus,\ntextarea:focus {\n border: 0;\n outline: 0;\n}\n\ninput:disabled,\ntextarea:disabled {\n color: var(--ic-architectural-200);\n}\n\ninput.readonly,\ntextarea.readonly {\n color: var(--ic-color-primary-text);\n}\n\n/* Chrome, Safari, Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n/* Firefox */\ninput[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\ntextarea.no-resize {\n resize: none;\n}\n\n.maxlengthtext {\n color: var(--ic-color-secondary-text);\n padding-right: var(--ic-space-xxxs);\n}\n\n.no-left-pad {\n padding-left: 0;\n}\n\n::slotted([slot=\"icon\"]) {\n fill: var(--ic-color-tertiary-text);\n}\n\n.has-value ::slotted([slot=\"icon\"]) {\n fill: var(--ic-color-primary-text);\n}\n\n.charcount {\n margin-right: calc(-1 * var(--ic-space-xxxs));\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n}\n\ninput[type=\"search\"].truncate-value {\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n@media (forced-colors: active) {\n input.readonly,\n textarea.readonly {\n color: canvastext;\n }\n\n .has-value ::slotted([slot=\"icon\"]) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport {\n IcInformationStatus,\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n IcSizesNoLarge,\n} from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n isSlotUsed,\n removeDisabledFalse,\n checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcAriaAutocompleteTypes,\n IcTextFieldInputModes,\n IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n tag: \"ic-text-field\",\n styleUrl: \"ic-text-field.css\",\n shadow: true,\n})\nexport class TextField {\n private inheritedAttributes: { [k: string]: string } = {};\n private inputEl: HTMLInputElement | HTMLTextAreaElement;\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcTextFieldElement;\n\n @State() numChars: number = 0;\n @State() maxCharactersReached: boolean = false;\n @State() maxCharactersError: boolean = false;\n @State() minCharactersUnattained: boolean = false;\n @State() maxLengthExceeded: boolean = false;\n @State() maxValueExceeded: boolean = false;\n @State() minValueUnattained: boolean = false;\n\n /**\n * @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n * @slot menu - an ic-menu component will appear below the input.\n */\n\n /**\n * @internal The active element when focus is on the ic-menu items.\n */\n @Prop() ariaActiveDescendant?: string;\n\n /**\n * @internal Used to identify whether inputting any text triggers more predictions\n */\n @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n /**\n * @internal Used to identify if the slotted menu is rendered\n */\n @Prop() ariaExpanded: string;\n\n /**\n * @internal Used to identify any related child component\n */\n @Prop() ariaOwns: string;\n\n /**\n * The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n */\n @Prop() autocapitalize = \"off\";\n\n /**\n * The state of autocompletion the browser can apply on the text value.\n */\n @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n /**\n * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n */\n @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n /**\n * If `true`, the form control will have input focus when the page loads.\n */\n @Prop() autoFocus = false;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Specify whether the text field fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * @internal If `true`, the hidden form input will stop rendering for form submission.\n */\n @Prop() hiddenInput: boolean = true;\n\n /**\n * The ID for the input.\n */\n @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n /**\n * A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n */\n @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n /**\n * The label for the input.\n */\n @Prop() label!: string;\n\n /**\n * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n */\n @Prop() max: string | number = undefined;\n\n /**\n * The maximum number of characters that can be entered in the field. Will display an error if too many characters are entered.\n */\n @Prop() maxCharacters: number = 0;\n\n /**\n * The count of characters in the field. Will display a warning if the bound is reached.\n */\n @Prop() maxLength: number = 0;\n\n /**\n * The text to display as the validation message when the maximum length is exceeded.\n */\n @Prop() maxLengthMessage: string = \"Maximum length exceeded\";\n\n /**\n * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n */\n @Prop() min: string | number = undefined;\n\n /**\n * The minimum number of characters that can be entered in the field.\n */\n @Prop() minCharacters: number = 0;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The placeholder value to be displayed.\n */\n @Prop() placeholder: string = \"\";\n\n /**\n * If `true`, the read only state will be set.\n */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /**\n * If `true`, the input will require a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the multiline text area will be resizeable.\n */\n @Prop() resize: boolean = false;\n\n /**\n * @internal Used to set the role if not default textbox;\n */\n @Prop() role: string;\n\n /**\n * The number of rows to transform the text field into a text area with a specific height.\n */\n @Prop() rows: number = 1;\n\n /**\n * The size of the text field 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 * If `true`, the value of the text field will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n /**\n * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n */\n @Prop() truncateValue?: boolean;\n\n /**\n * The type of control to display. The default type is text.\n */\n @Prop() type: IcTextFieldTypes = \"text\";\n\n /**\n * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n */\n @Prop() validationInline: boolean = false;\n\n /**\n * @internal If `true`, the validation will display inline.\n */\n @Prop() validationInlineInternal: boolean = false;\n\n /**\n * The validation state - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The validation state - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationText: string = \"\";\n\n /**\n * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n */\n @Prop() debounce: number = 0;\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /**\n * The value of the text field.\n */\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n @State() initialValue = this.value;\n\n @Watch(\"value\")\n private watchValueHandler(newValue: string): void {\n if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n\n this.getMaxLengthExceeded(newValue);\n\n this.getMaxCharactersReached(newValue);\n\n this.icChange.emit({ value: newValue });\n }\n\n /**\n * @internal Emitted when the validationInlineInternal is `true`\n */\n @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when input loses focus.\n */\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when input gains focus.\n */\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when a keydown event occurred.\n */\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n if (this.value !== this.initialValue) {\n this.watchValueHandler(this.value);\n }\n\n this.getMaxLengthExceeded(this.value);\n\n this.getMaxCharactersReached(this.value);\n\n this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n\n if (this.readonly) {\n this.maxLengthExceeded = false;\n this.maxValueExceeded = false;\n this.minValueUnattained = false;\n }\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n if (this.validationInlineInternal) {\n this.getValidationText.emit({ value: this.validationText });\n }\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n childList: true,\n });\n }\n\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({ event: ev });\n this.maxCharactersError = this.maxCharactersReached;\n }\n\n /**\n * Sets focus on the native `input`.\n */\n\n @Method()\n async setFocus(): Promise<void> {\n this.inputEl?.focus();\n }\n\n private getMaxLengthExceeded = (value: string) => {\n this.numChars = value.length;\n\n if (this.type === \"number\") {\n this.minValueUnattained = value && Number(value) < Number(this.min);\n this.maxValueExceeded = Number(value) > Number(this.max);\n }\n\n if (this.maxLength > 0) {\n this.maxLengthExceeded = this.numChars > this.maxLength;\n }\n };\n\n private getMaxCharactersReached = (value: string) => {\n this.numChars = value.length;\n this.maxCharactersReached =\n this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;\n\n if (this.maxCharactersError && !this.maxCharactersReached) {\n this.maxCharactersError = false;\n }\n };\n\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n private onBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.numChars = value.length;\n this.minCharactersUnattained =\n this.minCharacters > 0 ? this.numChars < this.minCharacters : false;\n this.icBlur.emit({ value: value });\n };\n\n private onFocus = (ev: Event) => {\n this.icFocus.emit({ value: (ev.target as HTMLInputElement).value });\n };\n\n private hasStatus = (status: IcInformationStatusOrEmpty) =>\n status !== \"\" && !this.disabled;\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(\n ({ attributeName, type, addedNodes, removedNodes }) => {\n if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n this.inheritedAttributes[attributeName] =\n this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n } else if (type === \"childList\") {\n forceComponentUpdate = checkSlotInChildMutations(\n addedNodes,\n removedNodes,\n \"icon\"\n );\n }\n }\n );\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private showValidation = (): boolean => {\n const maxNumChars = this.readonly ? 0 : this.maxLength;\n const emptyString =\n isEmptyString(this.validationStatus) ||\n isEmptyString(this.validationText);\n const valueOutsideRange = this.minValueUnattained || this.maxValueExceeded;\n const charOutsideRange =\n maxNumChars > 0 ||\n this.maxCharactersError ||\n this.minCharactersUnattained;\n return (\n (!emptyString || valueOutsideRange || charOutsideRange) &&\n !this.validationInlineInternal\n );\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n size,\n small,\n placeholder,\n helperText,\n rows,\n resize,\n disabled,\n value,\n min,\n max,\n maxLength,\n numChars,\n readonly,\n maxLengthExceeded,\n maxCharacters,\n maxCharactersError,\n maxCharactersReached,\n minCharacters,\n minCharactersUnattained,\n minValueUnattained,\n maxValueExceeded,\n validationStatus,\n validationText,\n validationInline,\n validationInlineInternal,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n showValidation,\n } = this;\n\n const disabledMode = readonly || disabled;\n\n const currentStatus =\n maxLengthExceeded ||\n maxValueExceeded ||\n minValueUnattained ||\n minCharactersUnattained ||\n maxCharactersError\n ? maxCharactersError\n ? IcInformationStatus.Warning\n : IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxLengthExceeded\n ? this.maxLengthMessage\n : maxCharactersError\n ? `Maximum input is ${maxCharacters} characters`\n : maxValueExceeded\n ? `Maximum value of ${max} exceeded`\n : minValueUnattained\n ? `Minimum value of ${min} not met`\n : minCharactersUnattained\n ? `Minimum input is ${minCharacters} characters`\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxLength;\n const messageAriaLive =\n maxLengthExceeded ||\n maxCharactersError ||\n maxValueExceeded ||\n minValueUnattained ||\n (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n ? \"assertive\"\n : \"polite\";\n\n const showStatusText =\n this.hasStatus(currentStatus) &&\n !(currentStatus == IcInformationStatus.Success && validationInline) &&\n !validationInlineInternal;\n\n const multiline = rows > 1;\n const hiddenCharCountDescId =\n maxLength > 0 ? `${inputId}-charcount-desc` : \"\";\n\n const describedBy = `${hiddenCharCountDescId} ${getInputDescribedByText(\n inputId,\n helperText !== \"\",\n showStatusText\n )}`.trim();\n\n const disabledText = disabledMode && !readonly;\n const showLeftIcon =\n !!this.el.querySelector(`[slot=\"icon\"]`) && !disabledText;\n\n const invalid = `${currentStatus === IcInformationStatus.Error}`;\n\n if (hiddenInput) {\n renderHiddenInput(true, this.el, name, value, disabledMode);\n }\n return (\n <Host class={{ [\"fullwidth\"]: fullWidth }}>\n <ic-input-container readonly={readonly} disabled={disabledMode}>\n {!this.hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n ></ic-input-label>\n )}\n\n <ic-input-component-container\n size={small ? \"small\" : size}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {showLeftIcon && (\n <span\n class={{\n [\"readonly\"]: readonly,\n [\"has-value\"]: value.length > 0,\n }}\n slot=\"left-icon\"\n >\n <slot name=\"icon\" />\n </span>\n )}\n\n {!multiline ? (\n <input\n id={inputId}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLInputElement)}\n type={this.type}\n min={min}\n max={max}\n value={value}\n class={{\n [\"no-left-pad\"]: !showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n [\"truncate-value\"]: truncateValue,\n }}\n placeholder={placeholder ? placeholder : \"\"}\n required={required}\n disabled={disabledMode}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n aria-activedescendant={this.ariaActiveDescendant}\n aria-expanded={this.ariaExpanded}\n aria-owns={this.ariaOwns}\n autocomplete={this.autocomplete}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n role={this.role}\n maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\n {...this.inheritedAttributes}\n ></input>\n ) : (\n <textarea\n id={inputId}\n class={{\n [\"no-resize\"]: resize === false || readonly,\n [\"no-left-pad\"]: !showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n }}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n value={value}\n rows={rows}\n required={required}\n disabled={disabledMode}\n placeholder={placeholder ? placeholder : \"\"}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\n {...this.inheritedAttributes}\n ></textarea>\n )}\n {isSlotUsed(this.el, \"clear-button\") && (\n <slot name=\"clear-button\"></slot>\n )}\n {isSlotUsed(this.el, \"search-submit-button\") && (\n <slot name=\"search-submit-button\"></slot>\n )}\n </ic-input-component-container>\n {isSlotUsed(this.el, \"menu\") && <slot name=\"menu\"></slot>}\n {showValidation() && (\n <ic-input-validation\n status={\n this.hasStatus(currentStatus) === false ||\n (currentStatus === IcInformationStatus.Success &&\n validationInline) ||\n validationInlineInternal\n ? \"\"\n : currentStatus\n }\n message={showStatusText ? currentValidationText : \"\"}\n ariaLiveMode={messageAriaLive}\n for={inputId}\n fullWidth={fullWidth}\n >\n {!readonly && maxNumChars > 0 && (\n <div slot=\"validation-message-adornment\">\n <ic-typography\n variant=\"caption\"\n class={{\n [\"maxlengthtext\"]: true,\n [\"error\"]: maxLengthExceeded,\n [\"disabled\"]: disabledText,\n }}\n >\n <span\n aria-live=\"polite\"\n id={`${inputId}-charcount`}\n class=\"charcount\"\n >\n {numChars}/{maxNumChars}\n </span>\n <span hidden={true} id={hiddenCharCountDescId}>\n Field can contain a maximum of {maxNumChars} characters.\n </span>\n </ic-typography>\n </div>\n )}\n </ic-input-validation>\n )}\n </ic-input-container>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as e,h as i,H as o,g as s}from"./p-6b5e91e2.js";const n='/*! 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}:root{display:block}:host{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;min-width:-moz-min-content;min-width:min-content;border:var(--ic-border-width) solid var(--ic-action-default);border-radius:var(--ic-border-radius)}:host(.full-width){width:100%;max-width:100%}:host(.loading){min-width:-moz-max-content;min-width:max-content}:host(:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast);outline:none}::slotted(ic-toggle-button){flex-grow:1;width:-moz-min-content;width:min-content;--toggle-button-border:none}::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid var(--ic-action-default)}:host(.disabled){border:var(--ic-border-disabled);pointer-events:none}:host(.disabled) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-disabled)}:host(.dark){border:var(--ic-border-width) solid var(--ic-action-dark)}:host(.dark) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid var(--ic-action-dark)}:host(.light) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid var(--ic-action-light)}:host(.light){border:var(--ic-border-width) solid var(--ic-action-light)}';const r="IC-TOGGLE-BUTTON-GROUP";const a=class{constructor(i){t(this,i);this.icChange=e(this,"icChange",7);this.keyListener=t=>{this.lastKeyPressed={key:t.key,shift:t.shiftKey}};this.setSlottedAria=t=>{const e=t.shadowRoot.querySelector("ic-button").shadowRoot.querySelector("button");let i=e.getAttribute("aria-label");i+=", ";i+=this.accessibleLabel;e.setAttribute("aria-label",i)};this.handleHostFocus=t=>{if(this.loading||this.disabled){return null}const e=t.target;const i=t.relatedTarget;const o=Array.from(e.querySelectorAll("ic-toggle-button"));if((o.every((t=>!t.toggleChecked))||this.selectType!=="single")&&this.lastKeyPressed.shift===false||o.every((t=>!t.toggleChecked))&&this.lastKeyPressed.shift===true&&i.tagName==r){o[0].focus()}else if(this.lastKeyPressed.shift===false||this.lastKeyPressed.shift===true&&i.tagName==r){const t=o.filter((t=>t.toggleChecked));t[0].focus()}};this.handleKeyDown=t=>{const e=this.getAllToggleButtons();const i=e.indexOf(e.filter((t=>t===document.activeElement))[0]);switch(t.key){case"ArrowDown":case"ArrowRight":this.selectMethod==="auto"?this.proxySelectHandler(e[this.getNextItemToSelect(i,true)]):e[this.getNextItemToSelect(i,true)].focus();break;case"ArrowUp":case"ArrowLeft":this.selectMethod==="auto"?this.proxySelectHandler(e[this.getNextItemToSelect(i,false)]):e[this.getNextItemToSelect(i,false)].focus();break}};this.getNextItemToSelect=(t,e)=>{const i=this.getAllToggleButtons();const o=i.length-1;if(t<1){t=0}let s=e?t+1:t-1;if(s<0){s=o}else if(s>o){s=0}if(i[s].disabled){s=this.getNextItemToSelect(s,e)}return s};this.lastKeyPressed={key:null,shift:false};this.accessibleLabel="Toggle button group";this.appearance="default";this.disabled=false;this.fullWidth=false;this.iconPlacement=undefined;this.loading=false;this.selectMethod="manual";this.selectType="single";this.size="default";this.variant="default"}selectHandler(t,e){const i=this.getAllToggleButtons();let o=t.target;e&&e.focus();if(this.selectType==="single"){if(!o){o=e}i.forEach((t=>{if(t.id!==o.id&&t.toggleChecked){t.toggleChecked=false}}));this.icChange.emit({toggleChecked:t.detail.toggleChecked,selectedOption:o})}else{const t=this.getAllToggleButtons().filter((t=>t.toggleChecked&&!t.disabled));this.icChange.emit({toggleChecked:t.map((t=>t.toggleChecked)),toggledOptions:t.map((t=>({toggleButton:t}))),selectedOption:o})}}componentWillLoad(){this.selectType==="multi"&&(this.selectMethod="manual");document.addEventListener("keydown",this.keyListener)}componentDidLoad(){this.getAllToggleButtons().forEach(((t,e)=>{this.setSlottedAria(t);t.size=this.size;t.loading=this.loading;t.iconPlacement=this.iconPlacement;t.disabled?null:t.disabled=this.disabled;t.appearance=this.appearance;t.variant=this.variant;t.fullWidth=this.fullWidth;t.id=e.toString();t.tabIndex=-1;t.addEventListener("keydown",(t=>{this.handleKeyDown(t)}));t.classList.add("expand-toggle-group-child")}))}disconnectedCallback(){document===null||document===void 0?void 0:document.removeEventListener("keydown",this.keyListener)}proxySelectHandler(t){t.toggleChecked=true;const e=new CustomEvent("icToggleChecked",{detail:{toggleChecked:t.toggleChecked}});this.selectHandler(e,t)}getAllToggleButtons(){return Array.from(this.el.querySelectorAll("ic-toggle-button"))}render(){return i(o,{role:"group","aria-label":this.accessibleLabel,"aria-disabled":this.disabled?"true":"false",tabindex:0,class:{["full-width"]:this.fullWidth,["loading"]:this.loading,["disabled"]:this.disabled,[`${this.appearance}`]:true},onFocus:this.handleHostFocus},i("slot",null))}get el(){return s(this)}};a.style=n;export{a as ic_toggle_button_group};
|
2
|
-
//# sourceMappingURL=p-cdf6e902.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icToggleButtonGroupCss","TOGGLE_GROUP","ToggleButtonGroup","this","keyListener","ev","lastKeyPressed","key","shift","shiftKey","setSlottedAria","el","btn","shadowRoot","querySelector","aria","getAttribute","accessibleLabel","setAttribute","handleHostFocus","loading","disabled","target","relEl","relatedTarget","toggleButtons","Array","from","querySelectorAll","every","toggleChecked","selectType","tagName","focus","toggledButton","filter","handleKeyDown","event","toggleButtonOptions","getAllToggleButtons","focussedChild","indexOf","document","activeElement","selectMethod","proxySelectHandler","getNextItemToSelect","currentItem","movingDown","numToggles","length","nextItem","selectHandler","tabTarget","allToggles","clickedToggle","forEach","id","icChange","emit","detail","selectedOption","toggledOptions","map","opt","toggleButton","componentWillLoad","addEventListener","componentDidLoad","i","size","iconPlacement","appearance","variant","fullWidth","toString","tabIndex","classList","add","disconnectedCallback","removeEventListener","toggle","customEv","CustomEvent","render","h","Host","role","tabindex","class","onFocus"],"sources":["src/components/ic-toggle-button-group/ic-toggle-button-group.css?tag=ic-toggle-button-group&encapsulation=shadow","src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* PARENT HOST */\n\n:root {\n display: block;\n}\n\n:host {\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: min-content;\n border: var(--ic-border-width) solid var(--ic-action-default);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.full-width) {\n width: 100%;\n max-width: 100%;\n}\n\n:host(.loading) {\n min-width: max-content;\n}\n\n:host(:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n}\n\n/* CHILDREN SLOTTED */\n\n::slotted(ic-toggle-button) {\n flex-grow: 1;\n width: min-content;\n\n --toggle-button-border: none;\n}\n\n::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid var(--ic-action-default);\n}\n\n/* DISABLED */\n:host(.disabled) {\n border: var(--ic-border-disabled);\n pointer-events: none;\n}\n\n:host(.disabled) ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-disabled);\n}\n\n/* DARK */\n:host(.dark) {\n border: var(--ic-border-width) solid var(--ic-action-dark);\n}\n\n:host(.dark) ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid var(--ic-action-dark);\n}\n\n/* LIGHT */\n:host(.light) ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid var(--ic-action-light);\n}\n\n:host(.light) {\n border: var(--ic-border-width) solid var(--ic-action-light);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n} from \"@stencil/core\";\nimport {\n IcSizes,\n IcThemeForeground,\n IcSelectTypes,\n IcSelectMethodTypes,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\n\ninterface lastKey {\n key: string | null;\n shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n tag: \"ic-toggle-button-group\",\n styleUrl: \"ic-toggle-button-group.css\",\n shadow: true,\n})\nexport class ToggleButtonGroup {\n @Element() el: HTMLIcToggleButtonGroupElement;\n\n @State() lastKeyPressed: lastKey = {\n key: null,\n shift: false,\n };\n\n /**\n * The accessible label of the toggle button group component to provide context for screen reader users.\n */\n @Prop() accessibleLabel?: string = \"Toggle button group\";\n\n /**\n * The appearance of the toggle button group, e.g dark, or light.\n */\n @Prop() appearance: IcThemeForeground = \"default\";\n\n /**\n * If `true`, the toggle button group will be set to the disabled state.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * If `true`, the toggle button group will fill the width of the container.\n */\n @Prop() fullWidth?: boolean = false;\n\n /**\n * The placement of the icons in relation to the toggle button labels.\n */\n @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n /**\n * If `true`, the toggle button group will be in loading state.\n */\n @Prop() loading?: boolean = false;\n\n /**\n * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n */\n @Prop({ mutable: true }) selectMethod?: IcSelectMethodTypes = \"manual\";\n\n /**\n * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n */\n @Prop() selectType?: IcSelectTypes = \"single\";\n\n /**\n * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\n */\n @Prop() size?: IcSizes = \"default\";\n\n /**\n * The variant of the toggle button.\n */\n @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n /**\n * Emitted when a toggle button is selected.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icToggleChecked\")\n selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n const allToggles = this.getAllToggleButtons();\n let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n // tabTarget used in proxySelectHandler\n tabTarget && tabTarget.focus();\n if (this.selectType === \"single\") {\n if (!clickedToggle) {\n clickedToggle = tabTarget;\n }\n allToggles.forEach((el) => {\n if (el.id !== clickedToggle.id && el.toggleChecked) {\n el.toggleChecked = false;\n }\n });\n\n this.icChange.emit({\n toggleChecked: ev.detail.toggleChecked,\n selectedOption: clickedToggle,\n });\n } else {\n const toggledOptions = this.getAllToggleButtons().filter(\n (el) => el.toggleChecked && !el.disabled\n );\n\n this.icChange.emit({\n toggleChecked: toggledOptions.map((opt) => opt.toggleChecked),\n toggledOptions: toggledOptions.map((opt) => ({\n toggleButton: opt,\n })),\n selectedOption: clickedToggle,\n });\n }\n }\n\n componentWillLoad(): void {\n this.selectType === \"multi\" && (this.selectMethod = \"manual\");\n this.selectMethod === \"auto\" && this.selectType === \"single\";\n document.addEventListener(\"keydown\", this.keyListener);\n }\n\n componentDidLoad(): void {\n this.getAllToggleButtons().forEach((el, i) => {\n this.setSlottedAria(el);\n el.size = this.size;\n el.loading = this.loading;\n el.iconPlacement = this.iconPlacement;\n el.disabled ? null : (el.disabled = this.disabled);\n el.appearance = this.appearance;\n el.variant = this.variant;\n el.fullWidth = this.fullWidth;\n el.id = i.toString();\n el.tabIndex = -1;\n el.addEventListener(\"keydown\", (ev) => {\n this.handleKeyDown(ev);\n });\n el.classList.add(\"expand-toggle-group-child\");\n });\n }\n\n disconnectedCallback(): void {\n document?.removeEventListener(\"keydown\", this.keyListener);\n }\n\n private keyListener = (ev: KeyboardEvent) => {\n this.lastKeyPressed = {\n key: ev.key,\n shift: ev.shiftKey,\n };\n };\n\n private setSlottedAria = (el: HTMLIcToggleButtonElement) => {\n const btn = el.shadowRoot\n .querySelector(\"ic-button\")\n .shadowRoot.querySelector(\"button\") as HTMLButtonElement;\n let aria = btn.getAttribute(\"aria-label\");\n aria += \", \";\n aria += this.accessibleLabel;\n btn.setAttribute(\"aria-label\", aria);\n };\n\n private handleHostFocus = (ev: FocusEvent): void => {\n if (this.loading || this.disabled) {\n return null;\n }\n const el = ev.target as HTMLIcToggleButtonGroupElement;\n const relEl = ev.relatedTarget as HTMLIcToggleButtonElement;\n const toggleButtons = Array.from(el.querySelectorAll(\"ic-toggle-button\"));\n if (\n ((toggleButtons.every((el) => !el.toggleChecked) ||\n this.selectType !== \"single\") &&\n this.lastKeyPressed.shift === false) ||\n (toggleButtons.every((el) => !el.toggleChecked) &&\n this.lastKeyPressed.shift === true &&\n relEl.tagName == TOGGLE_GROUP)\n ) {\n toggleButtons[0].focus();\n } else if (\n this.lastKeyPressed.shift === false ||\n (this.lastKeyPressed.shift === true && relEl.tagName == TOGGLE_GROUP)\n ) {\n // if toggleChecked is true and selectMethod is \"single\", focus that toggle\n const toggledButton = toggleButtons.filter((el) => el.toggleChecked);\n toggledButton[0].focus();\n }\n };\n\n // trigger selectHandler when unable to add 'target'\n private proxySelectHandler(toggle: HTMLIcToggleButtonElement): void {\n toggle.toggleChecked = true;\n const customEv = new CustomEvent(\"icToggleChecked\", {\n detail: {\n toggleChecked: toggle.toggleChecked,\n },\n });\n this.selectHandler(customEv, toggle);\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const focussedChild = toggleButtonOptions.indexOf(\n toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.selectMethod === \"auto\"\n ? this.proxySelectHandler(\n toggleButtonOptions[this.getNextItemToSelect(focussedChild, true)]\n )\n : toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, true)\n ].focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.selectMethod === \"auto\"\n ? this.proxySelectHandler(\n toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, false)\n ]\n )\n : toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, false)\n ].focus();\n break;\n case \"Tab\":\n break;\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const numToggles = toggleButtonOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = numToggles;\n } else if (nextItem > numToggles) {\n nextItem = 0;\n }\n\n if (toggleButtonOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private getAllToggleButtons(): HTMLIcToggleButtonElement[] {\n return Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n }\n\n render() {\n return (\n <Host\n role=\"group\"\n aria-label={this.accessibleLabel}\n aria-disabled={this.disabled ? \"true\" : \"false\"}\n tabindex={0}\n class={{\n [\"full-width\"]: this.fullWidth,\n [\"loading\"]: this.loading,\n [\"disabled\"]: this.disabled,\n [`${this.appearance}`]: true,\n }}\n onFocus={this.handleHostFocus}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icCheckboxCss","Checkbox","this","handleClick","checked","displayIndeterminate","nativeIndeterminateBehaviour","indeterminate","icCheck","emit","checkboxChecked","handleFormReset","initiallyChecked","watchIndeterminateHandler","componentWillLoad","removeDisabledFalse","disabled","el","addFormResetListener","checkboxGroup","parentElement","name","groupLabel","label","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","value","componentDidRender","additionalFieldDisplay","textfield","querySelector","setAttribute","removeAttribute","additionalFieldContainer","style","display","disconnectedCallback","removeFormResetListener","setFocus","_a","shadowRoot","focus","render","dynamicText","form","formaction","formenctype","formmethod","formnovalidate","formtarget","size","small","id","isPropDefined","replace","parentElementSize","renderHiddenInput","removeHiddenInput","h","Host","class","viewBox","xmlns","d","role","checkbox","type","onClick","hideLabel","undefined","variant","htmlFor","isSlotUsed","ref"],"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.disabled) {\n color: var(--ic-architectural-200);\n pointer-events: none;\n}\n\n.container {\n display: flex;\n width: fit-content;\n padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n margin-bottom: var(--ic-space-xxs);\n align-items: center;\n}\n\n:host(.small) .container {\n margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: var(--ic-architectural-white);\n border: var(--ic-border-width) solid var(--ic-architectural-400);\n border-radius: var(--ic-border-radius);\n outline: none;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n flex-shrink: 0;\n}\n\n:host .container svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host(.small) .checkbox,\n:host(.small) .container svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n:host(.large) .checkbox,\n:host(.large) .container svg {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n}\n\n.checkbox:checked {\n background-color: var(--ic-action-default);\n border: var(--ic-border-width) solid var(--ic-action-default);\n transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n background-color: var(--ic-architectural-200);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n background-color: var(--ic-architectural-white);\n border: 0.125rem solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n background-color: var(--ic-action-default-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n background-color: var(--ic-action-default-bg-hover-no-alpha);\n border: 0.125rem solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n background-color: var(--ic-action-default-active);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n background-color: var(--ic-action-default-bg-active-no-alpha);\n border: 0.125rem solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n background-color: var(--ic-action-default-bg-hover-no-alpha);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n border: var(--ic-border-width) solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n background-color: var(--ic-action-default-bg-active-no-alpha);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n border: var(--ic-border-width) solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n border: var(--ic-border-width) dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n cursor: pointer;\n}\n\n.checkmark {\n position: relative;\n right: calc(-1 * var(--ic-space-lg));\n margin-left: calc(-1 * var(--ic-space-lg));\n fill: white;\n z-index: 1;\n background-color: transparent;\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.small) .checkmark {\n margin-left: calc(-1 * var(--ic-space-md));\n right: calc(-1 * var(--ic-space-md));\n}\n\n:host(.large) .checkmark {\n margin-left: calc(-1 * var(--ic-space-xl));\n right: calc(-1 * var(--ic-space-xl));\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 0.875rem;\n height: var(--ic-space-xxxs);\n right: -1.188rem;\n margin-left: -0.875rem;\n z-index: 1;\n background-color: var(--ic-action-default);\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.small) .indeterminate-symbol {\n width: 0.6rem;\n right: -0.8rem;\n margin-left: -0.6rem;\n}\n\n:host(.large) .indeterminate-symbol {\n width: 1.25rem;\n right: -1.625rem;\n margin-left: -1.25rem;\n}\n\n.container:hover .indeterminate-symbol {\n background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n color: var(--ic-action-default);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-action-default);\n border-left: 0.125rem solid var(--ic-action-default);\n}\n\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n color: var(--ic-action-default);\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n /* Styles here only apply to Forced Colors Mode */\n .checkbox {\n appearance: revert;\n transition: none;\n }\n\n .checkbox:checked {\n transition: none;\n }\n\n .checkbox:focus-visible {\n outline: 0.125rem solid highlight;\n }\n\n .checkbox:disabled:not(:checked) {\n appearance: none;\n border-color: GrayText;\n }\n\n .checkmark {\n fill: none;\n }\n\n .indeterminate-symbol {\n display: none;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcSizes } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to be displayed alongside a checkbox.\n */\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n private additionalFieldContainer: HTMLDivElement;\n\n @Element() el: HTMLIcCheckboxElement;\n\n /**\n * The style of additionalField that will be displayed if used.\n */\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n /**\n * If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.\n */\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /**\n * If `true`, the checkbox will be set to the disabled state.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * The text to be displayed when dynamic.\n */\n\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /**\n * The <form> element to associate the checkbox with.\n */\n @Prop() form?: string;\n\n /**\n * The URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox'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 checkbox's form owner.\n */\n @Prop() formtarget?: string;\n\n /**\n * The group label for the checkbox.\n */\n @Prop({ mutable: true }) groupLabel: string;\n\n /**\n * If `true`, the indeterminate state will be displayed when checked.\n */\n @Prop() indeterminate: boolean = false;\n @State() displayIndeterminate = this.indeterminate;\n\n @Watch(\"indeterminate\")\n watchIndeterminateHandler(): void {\n this.displayIndeterminate = this.nativeIndeterminateBehaviour\n ? this.indeterminate\n : this.indeterminate && this.checked;\n }\n\n /**\n * The label for the checkbox.\n */\n @Prop() label!: string;\n\n /**\n * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n */\n @Prop({ mutable: true }) name: string;\n\n /**\n * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n */\n @Prop() nativeIndeterminateBehaviour: boolean = false;\n\n /**\n * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n */\n @Prop() size?: IcSizes;\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 value for the checkbox.\n */\n @Prop() value!: string;\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel = false;\n\n /**\n * @deprecated This event should not be used anymore. Use icCheck instead.\n */\n @Event() checkboxChecked: EventEmitter<void>;\n\n /**\n * Emitted when a checkbox has been checked.\n */\n @Event() icCheck: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n addFormResetListener(this.el, this.handleFormReset);\n\n const checkboxGroup = this.el.parentElement as HTMLIcCheckboxGroupElement;\n if (checkboxGroup) {\n if (!this.name) this.name = checkboxGroup.name;\n this.groupLabel = checkboxGroup.label;\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.value, propName: \"value\" },\n ],\n \"Checkbox\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.el.querySelector(\"ic-text-field\");\n if (!this.checked) {\n textfield?.setAttribute(\"disabled\", \"\");\n } else {\n textfield?.removeAttribute(\"disabled\");\n }\n } else if (this.additionalFieldContainer) {\n this.additionalFieldContainer.style.display = !this.checked\n ? \"none\"\n : \"flex\";\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n /**\n * Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot.querySelector<HTMLElement>(\".checkbox\")?.focus();\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.displayIndeterminate = this.nativeIndeterminateBehaviour\n ? false\n : this.indeterminate && this.checked;\n this.icCheck.emit();\n this.checkboxChecked.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n checked,\n disabled,\n dynamicText,\n el,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n displayIndeterminate,\n groupLabel,\n label,\n name,\n size,\n small,\n value,\n } = this;\n\n const id = `ic-checkbox-${\n isPropDefined(label) || value\n }-${groupLabel}`.replace(/ /g, \"-\");\n\n const parentElementSize = (el.parentElement as HTMLIcCheckboxGroupElement)\n .size;\n\n checked\n ? renderHiddenInput(true, el, name, checked && value, disabled)\n : removeHiddenInput(el);\n\n return (\n <Host\n class={{\n disabled,\n small,\n [`${size || parentElementSize}`]: true,\n }}\n >\n <div class=\"container\">\n {displayIndeterminate && <div class=\"indeterminate-symbol\" />}\n {!displayIndeterminate && checked && (\n <svg\n class=\"checkmark\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n </svg>\n )}\n <input\n role=\"checkbox\"\n class={{\n checkbox: true,\n checked,\n indeterminate: displayIndeterminate,\n }}\n type=\"checkbox\"\n name={name}\n id={id}\n value={value}\n disabled={disabled ? true : null}\n checked={checked}\n indeterminate={displayIndeterminate}\n onClick={this.handleClick}\n form={form}\n formaction={formaction}\n formenctype={formenctype}\n formmethod={formmethod}\n formnovalidate={formnovalidate}\n formtarget={formtarget}\n aria-label={this.hideLabel ? this.label : undefined}\n ></input>\n {!this.hideLabel && (\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n )}\n </div>\n {isSlotUsed(el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as i,h as s,H as e,g as h}from"./p-6b5e91e2.js";import{I as a}from"./p-26b7b18f.js";import{B as n,C as o,E as r,k as l,a as c,s as u,p as d}from"./p-fef9e8c9.js";const f=`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M15.8327 5.34199L14.6577 4.16699L9.99935 8.82533L5.34102 4.16699L4.16602 5.34199L8.82435 10.0003L4.16602 14.6587L5.34102 15.8337L9.99935 11.1753L14.6577 15.8337L15.8327 14.6587L11.1743 10.0003L15.8327 5.34199Z" fill="currentColor"/>\n</svg>\n`;const b=`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">\n <path d="M13.1292 11.8792H12.4708L12.2375 11.6542C13.0542 10.7042 13.5458 9.47083 13.5458 8.12916C13.5458 5.13749 11.1208 2.71249 8.12916 2.71249C5.13749 2.71249 2.71249 5.13749 2.71249 8.12916C2.71249 11.1208 5.13749 13.5458 8.12916 13.5458C9.47083 13.5458 10.7042 13.0542 11.6542 12.2375L11.8792 12.4708V13.1292L16.0458 17.2875L17.2875 16.0458L13.1292 11.8792ZM8.12916 11.8792C6.05416 11.8792 4.37916 10.2042 4.37916 8.12916C4.37916 6.05416 6.05416 4.37916 8.12916 4.37916C10.2042 4.37916 11.8792 6.05416 11.8792 8.12916C11.8792 10.2042 10.2042 11.8792 8.12916 11.8792Z" fill="currentColor"/>\n</svg>`;const p='/*! 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(.search){--divider-height:1.5rem;--ic-input-label-helpertext-padding:var(--ic-space-xxs)}:host(.search.small){--divider-height:1rem}:host(.fullwidth){width:100%}:host(.search) .disabled:hover{border-color:var(--ic-architectural-200)}:host(.search.disabled) .disabled svg{color:var(--ic-architectural-200)}:host(.search) .disabled svg{color:var(--ic-architectural-400)}.clear-button-container{align-items:center;margin-right:var(--ic-space-1px);display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus,.clear-button:active *{fill:white}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus,.search-submit-button:active{background-color:var(--ic-focus-blue) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow) !important;border-radius:var(--ic-space-xxs)}.search-submit-button:focus,.search-submit-button:active *{fill:white}.divider{width:var(--ic-border-width);background-color:var(--ic-action-dark-active);height:var(--divider-height)}:host(.dark) .divider{background-color:var(--ic-architectural-200)}.menu-container{width:var(--input-width, 20rem);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);margin-bottom:calc(-1 * var(--ic-space-1px));margin-right:calc(-1 * var(--ic-space-1px));overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}';let m=0;const v=class{constructor(s){t(this,s);this.icChange=i(this,"icChange",7);this.icClear=i(this,"icClear",7);this.icInput=i(this,"icInput",7);this.icInputBlur=i(this,"icInputBlur",7);this.icInputFocus=i(this,"icInputFocus",7);this.icOptionSelect=i(this,"icOptionSelect",7);this.icMenuChange=i(this,"icMenuChange",7);this.icClearBlur=i(this,"icClearBlur",7);this.icRetryLoad=i(this,"icRetryLoad",7);this.icSubmitSearch=i(this,"icSubmitSearch",7);this.icSubmitSearchBlur=i(this,"icSubmitSearchBlur",7);this.icSearchBarBlur=i(this,"icSearchBarBlur",7);this.icSearchBarFocus=i(this,"icSearchBarFocus",7);this.assistiveHintEl=null;this.hasTimedOut=false;this.inputId=`ic-search-bar-input-${m++}`;this.menuCloseFromMenuChangeEvent=false;this.menuId=`${this.inputId}-menu`;this.preLoad=true;this.preventSubmit=false;this.prevNoOption=false;this.retryButtonClick=false;this.truncateValue=false;this.handleClear=t=>{const i=t;const s=t;if(s.type==="click"||i.code==="Enter"||i.code==="Space"){this.value="";this.inputEl.value="";this.loading=false;clearTimeout(this.timeoutTimer);this.filteredOptions=this.options;this.el.setFocus();this.icClear.emit();t.preventDefault();this.preventSubmit=true}};this.onInput=t=>{this.value=t.target.value;const i=[{[this.labelField]:this.emptyOptionListText,[this.valueField]:""}];if(this.options.length>0){this.setMenuChange(true);this.preLoad=false;if(this.disableFilter===false){const t=n(this.options,false,this.value,"anywhere",this.labelField);this.filteredOptions=t.length>0?t:i}}if(!this.showClearButton){this.handleShowClearButton(true)}this.debounceAriaLiveUpdate()};this.onInputBlur=t=>{const i=t.target.value;const s=t.relatedTarget;this.icInputBlur.emit({value:i,relatedTarget:s})};this.onInputFocus=t=>{const i=t.target.value;this.icInputFocus.emit({value:i});this.handleShowClearButton(true)};this.handleClearBlur=t=>{const i=t.relatedTarget;this.icClearBlur.emit({relatedTarget:i});this.clearButtonFocused=false};this.handleSubmitSearchBlur=t=>{const i=t.relatedTarget;this.icSubmitSearchBlur.emit({relatedTarget:i});this.searchSubmitFocused=false};this.handleMouseDown=t=>{t.preventDefault()};this.handleSubmitSearchFocus=()=>{this.searchSubmitFocused=true};this.handleSubmitSearch=()=>{this.highlightedValue&&(this.value=this.highlightedValue);this.highlightedValue=undefined;this.icSubmitSearch.emit({value:this.value});const t=this.el.closest("FORM");if(this.searchSubmitButton&&!!t&&!this.preventSubmit){o(t,this.searchSubmitButton)}};this.handleSubmitSearchKeyDown=t=>{if(t.key===" "){t.preventDefault();this.handleSubmitSearch()}};this.handleRetry=t=>{this.retryViaKeyPress=t.detail.keyPressed==="Enter";this.icRetryLoad.emit({value:t.detail.value});this.triggerLoading();this.retryButtonClick=true};this.triggerLoading=()=>{const t=[{[this.labelField]:this.loadingLabel,[this.valueField]:"",loading:true}];if(this.filteredOptions!==t)this.filteredOptions=t;if(this.timeout){this.timeoutTimer=window.setTimeout((()=>{this.filteredOptions=[{[this.labelField]:this.loadingErrorLabel,[this.valueField]:"",timedOut:true}]}),this.timeout)}};this.handleOptionSelect=t=>{if(t.detail.label===this.emptyOptionListText){this.el.setFocus();return}this.value=t.detail.value;this.icOptionSelect.emit({value:this.value})};this.handleMenuOptionHighlight=t=>{var i;const s=(i=t.detail.optionId)===null||i===void 0?void 0:i.replace(`${this.menuId}-`,"");s&&(this.highlightedValue=s);if(t.detail.optionId){this.ariaActiveDescendant=t.detail.optionId}else{this.ariaActiveDescendant=undefined}};this.handleMenuChange=t=>{this.setMenuChange(t.detail.open);if(!t.detail.open){this.handleMenuCloseFromMenuChange(true);if(t.detail.focusInput===undefined||t.detail.focusInput){this.el.setFocus()}}};this.setMenuChange=t=>{if(this.open!==t){this.open=t;this.icMenuChange.emit({open:t})}};this.handleHostFocus=()=>{if(this.options&&this.value&&!this.menuCloseFromMenuChangeEvent){this.setMenuChange(true)}this.handleTruncateValue(false);this.icSearchBarFocus.emit()};this.handleHostBlur=t=>{const i=t.relatedTarget;if(this.open&&this.options&&i!==this.menu&&!this.retryViaKeyPress&&!this.retryButtonClick){this.setMenuChange(false)}if(this.retryButtonClick||this.retryViaKeyPress){this.inputEl.setFocus()}this.handleShowClearButton(false);this.handleMenuCloseFromMenuChange(false);this.handleTruncateValue(true);this.icSearchBarBlur.emit({relatedTarget:i,value:this.value});this.retryViaKeyPress=false;this.retryButtonClick=false};this.handleShowClearButton=t=>{this.showClearButton=t};this.handleFocusClearButton=()=>{this.clearButtonFocused=true};this.handleMenuCloseFromMenuChange=t=>{this.menuCloseFromMenuChangeEvent=t};this.handleTruncateValue=t=>{this.truncateValue=t};this.renderAssistiveHintEl=()=>{var t,i;const s=(i=(t=this.el.shadowRoot.querySelector("ic-text-field"))===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(`#${this.inputId}`);if(s&&Object.keys(s).length>0&&this.hasOptionsOrFilterDisabled()){this.assistiveHintEl=document.createElement("span");this.assistiveHintEl.innerText=this.hintText;this.assistiveHintEl.id=`${this.inputId}-assistive-hint`;this.assistiveHintEl.style.display="none";if(s.after!==undefined){s.after(this.assistiveHintEl)}}};this.updateSearchResultAriaLive=()=>{const t=this.el.shadowRoot.querySelector(".search-results-status");if(t){if(!this.open||this.value===""||this.value.length<this.charactersUntilSuggestion){t.innerText=""}else if(this.hasOptionsOrFilterDisabled()&&this.filteredOptions.length>0&&this.open&&!this.filteredOptions[0].loading){if(this.hadNoOptions()){t.innerText=this.emptyOptionListText}else{t.innerText=`${this.filteredOptions.length} result${this.filteredOptions.length>1?"s":""} available`}}}};this.hasOptionsOrFilterDisabled=()=>this.options.length>0||this.disableFilter;this.hadNoOptions=()=>this.filteredOptions.length===1&&this.filteredOptions[0][this.labelField]===this.emptyOptionListText&&this.searchMode==="navigation";this.isSubmitDisabled=()=>{const t=this.value===undefined||this.value===null||this.value==="";const i=this.value.length<this.charactersUntilSuggestion;return t||i||this.disabled||this.hadNoOptions()||this.hasTimedOut||this.loading};this.highlightFirstOptionAfterNoResults=()=>{if(this.prevNoOption&&this.menu&&!this.hasTimedOut){this.menu.handleSetFirstOption();this.prevNoOption=false}const t=this.filteredOptions.find((t=>t[this.labelField]===this.emptyOptionListText||t[this.labelField]===this.loadingErrorLabel||t[this.labelField]===this.loadingLabel));if(t){this.prevNoOption=true}};this.ariaActiveDescendant=undefined;this.clearButtonFocused=false;this.highlightedValue=undefined;this.open=false;this.searchSubmitFocused=false;this.showClearButton=false;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.charactersUntilSuggestion=2;this.disabled=false;this.disableFilter=false;this.debounce=0;this.emptyOptionListText="No results found";this.focusOnLoad=false;this.fullWidth=false;this.helperText="";this.hideLabel=false;this.hintText="When autocomplete results are available use the up and down arrows to choose and press enter to select";this.label=undefined;this.labelField="label";this.loading=false;this.loadingErrorLabel="Loading Error";this.loadingLabel="Loading...";this.name=this.inputId;this.placeholder="Search";this.readonly=false;this.required=false;this.searchMode="navigation";this.size="default";this.small=false;this.spellcheck=false;this.timeout=undefined;this.valueField="value";this.filteredOptions=[];this.options=[];this.value=""}loadingHandler(t){if(t&&!this.hasTimedOut){this.preLoad=false;this.triggerLoading()}}filteredOptionsHandler(t){this.hasTimedOut=t.some((t=>t.timedOut))}watchOptionsHandler(t){if(this.disableFilter&&!this.hasTimedOut){this.loading=false;clearTimeout(this.timeoutTimer);if(t.length>0){this.filteredOptions=t}else{if(this.hadNoOptions()){return}this.setMenuChange(true);!this.preLoad&&(this.filteredOptions=[{[this.labelField]:this.emptyOptionListText,[this.valueField]:""}]);this.preLoad=true}}this.debounceAriaLiveUpdate()}watchValueHandler(t){if(this.inputEl&&this.options&&!!r(t,this.options,this.valueField,this.labelField)){this.inputEl.value=r(t,this.options,this.valueField,this.labelField)}else if(this.inputEl&&this.inputEl.value!==t){this.inputEl.value=t}}disconnectedCallback(){if(this.assistiveHintEl){this.assistiveHintEl.remove()}}componentWillLoad(){this.watchValueHandler(this.value);l(this.disabled,this.el);if(this.small){this.size="small"}}componentDidLoad(){if(this.focusOnLoad){this.el.setFocus()}if(this.hasOptionsOrFilterDisabled()){this.renderAssistiveHintEl();if(this.disableFilter){this.filteredOptions=this.options}}c([{prop:this.label,propName:"label"}],"Search Bar");if(this.inputEl!==undefined){this.anchorEl=this.inputEl.shadowRoot.querySelector("ic-input-component-container")}}componentWillRender(){this.highlightFirstOptionAfterNoResults()}handleKeyDown(t){const i=t.detail.event;if(this.menu&&this.open){this.menu.handleKeyboardOpen(i)}}handleKeyUp(t){if(t.key==="Enter"){if(this.preventSubmit||this.isSubmitDisabled()){return}this.handleSubmitSearch();this.setMenuChange(false)}if(t.key==="Escape"){this.setMenuChange(false)}if(this.preventSubmit){this.preventSubmit=false}}async setFocus(){this.retryViaKeyPress=false;this.retryButtonClick=false;if(this.inputEl){this.inputEl.setFocus()}}debounceAriaLiveUpdate(){clearTimeout(this.debounceAriaLive);this.debounceAriaLive=window.setTimeout((()=>{this.updateSearchResultAriaLive()}),500)}render(){const{inputId:t,name:i,label:h,required:n,small:o,size:l,placeholder:c,helperText:p,disabled:m,value:v,readonly:g,spellcheck:w,fullWidth:y,options:x,open:k,hideLabel:L,menuId:z,ariaActiveDescendant:C,truncateValue:B,autofocus:M,autocapitalize:S,autocomplete:T,filteredOptions:F}=this;const O=g||m;const H=u(t,p!=="",false).trim();let I;if(H!==""&&this.hasOptionsOrFilterDisabled()){I=`${H} ${this.inputId}-assistive-hint`}else if(this.hasOptionsOrFilterDisabled()){I=`${this.inputId}-assistive-hint`}else if(H!==""){I=H}else{I=undefined}const $=!!v&&this.hasOptionsOrFilterDisabled();const E=$&&k&&F.length>0;const D=E&&v.length>=this.charactersUntilSuggestion;const j=r(v,x,this.valueField,this.labelField);d(true,this.el,i,v,O);return s(e,{class:{search:true,fullwidth:y,disabled:m,small:l==="small"},onFocus:this.handleHostFocus,onBlur:this.handleHostBlur},s("ic-text-field",{ref:t=>this.inputEl=t,inputId:t,label:h,helperText:p,required:n,disabled:O&&!g,readonly:g,size:l,hideLabel:L,fullWidth:y,name:i,truncateValue:B,value:x&&!!j?j:v,placeholder:c,onInput:this.onInput,onBlur:this.onInputBlur,onFocus:this.onInputFocus,"aria-label":L?h:"","aria-describedby":I,"aria-owns":D?z:undefined,"aria-controls":D?z:undefined,"aria-haspopup":x.length>0?"listbox":undefined,ariaExpanded:x.length>0?`${E}`:undefined,ariaActiveDescendant:C,"aria-autocomplete":$?"list":undefined,role:x.length>0?"combobox":undefined,autocomplete:T,autocapitalize:S,autoFocus:M,spellcheck:w,inputmode:"search",debounce:this.debounce},s("div",{class:{"clear-button-container":true,"clear-button-visible":v&&!O&&this.showClearButton},slot:"clear-button"},s("ic-button",{id:"clear-button",class:"clear-button","aria-label":"Clear",innerHTML:f,onClick:this.handleClear,onMouseDown:this.handleMouseDown,size:l,onFocus:this.handleFocusClearButton,onBlur:this.handleClearBlur,onKeyDown:this.handleClear,type:"submit",variant:"icon",appearance:this.clearButtonFocused?a.Light:a.Dark}),s("div",{class:"divider"})),s("div",{class:{"search-submit-button-container":true,"search-submit-button-disabled":this.isSubmitDisabled()},slot:"search-submit-button"},s("ic-button",{id:"search-submit-button","aria-label":"Search",ref:t=>this.searchSubmitButton=t,class:{["search-submit-button"]:true,["search-submit-button-small"]:!!o},disabled:this.isSubmitDisabled(),innerHTML:b,size:l,onClick:this.handleSubmitSearch,onMouseDown:this.handleMouseDown,onBlur:this.handleSubmitSearchBlur,onFocus:this.handleSubmitSearchFocus,onKeyDown:this.handleSubmitSearchKeyDown,type:"submit",variant:"icon",appearance:this.searchSubmitFocused?a.Light:a.Default})),s("div",{class:{"menu-container":true,fullwidth:y},slot:"menu"},D&&s("ic-menu",{class:{"no-results":this.hadNoOptions()||F.length===1&&(F[0][this.labelField]===this.loadingLabel||F[0][this.labelField]===this.loadingErrorLabel)},activationType:"manual",anchorEl:this.anchorEl,autoFocusOnSelected:false,searchMode:this.searchMode,inputEl:this.inputEl,inputLabel:h,ref:t=>this.menu=t,small:l==="small",fullWidth:y,menuId:z,open:!!D,options:F,onMenuOptionSelect:this.handleOptionSelect,onMenuStateChange:this.handleMenuChange,onMenuOptionId:this.handleMenuOptionHighlight,onRetryButtonClicked:this.handleRetry,parentEl:this.el,value:v,labelField:this.labelField,valueField:this.valueField}))),s("div",{"aria-live":"polite",role:"status",class:"search-results-status"}))}static get delegatesFocus(){return true}get el(){return h(this)}static get watchers(){return{loading:["loadingHandler"],filteredOptions:["filteredOptionsHandler"],options:["watchOptionsHandler"],value:["watchValueHandler"]}}};v.style=p;export{v as ic_search_bar};
|
2
|
-
//# sourceMappingURL=p-da5098db.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icSearchBarCss","inputIds","SearchBar","this","assistiveHintEl","hasTimedOut","inputId","menuCloseFromMenuChangeEvent","menuId","preLoad","preventSubmit","prevNoOption","retryButtonClick","truncateValue","handleClear","ev","keyboardEvent","mouseEvent","type","code","value","inputEl","loading","clearTimeout","timeoutTimer","filteredOptions","options","el","setFocus","icClear","emit","preventDefault","onInput","target","noOptions","labelField","emptyOptionListText","valueField","length","setMenuChange","disableFilter","rawFilteredOptions","getFilteredMenuOptions","showClearButton","handleShowClearButton","debounceAriaLiveUpdate","onInputBlur","nextFocus","relatedTarget","icInputBlur","onInputFocus","icInputFocus","handleClearBlur","icClearBlur","clearButtonFocused","handleSubmitSearchBlur","icSubmitSearchBlur","searchSubmitFocused","handleMouseDown","handleSubmitSearchFocus","handleSubmitSearch","highlightedValue","undefined","icSubmitSearch","form","closest","searchSubmitButton","handleHiddenFormButtonClick","handleSubmitSearchKeyDown","key","handleRetry","retryViaKeyPress","detail","keyPressed","icRetryLoad","triggerLoading","loadingOption","loadingLabel","timeout","window","setTimeout","loadingErrorLabel","timedOut","handleOptionSelect","label","icOptionSelect","handleMenuOptionHighlight","optionValue","_a","optionId","replace","ariaActiveDescendant","handleMenuChange","open","handleMenuCloseFromMenuChange","focusInput","icMenuChange","handleHostFocus","handleTruncateValue","icSearchBarFocus","handleHostBlur","menu","icSearchBarBlur","visible","handleFocusClearButton","fromEvent","truncate","renderAssistiveHintEl","input","_b","shadowRoot","querySelector","Object","keys","hasOptionsOrFilterDisabled","document","createElement","innerText","hintText","id","style","display","after","updateSearchResultAriaLive","searchResultsStatusEl","charactersUntilSuggestion","hadNoOptions","searchMode","isSubmitDisabled","valueNotSet","valueLengthLess","disabled","highlightFirstOptionAfterNoResults","handleSetFirstOption","prevNoOptionsList","find","filteredOption","loadingHandler","newValue","filteredOptionsHandler","newOptions","some","opt","watchOptionsHandler","watchValueHandler","getLabelFromValue","disconnectedCallback","remove","componentWillLoad","removeDisabledFalse","small","size","componentDidLoad","focusOnLoad","onComponentRequiredPropUndefined","prop","propName","anchorEl","componentWillRender","handleKeyDown","keyEv","event","handleKeyboardOpen","handleKeyUp","debounceAriaLive","render","name","required","placeholder","helperText","readonly","spellcheck","fullWidth","hideLabel","autofocus","autocapitalize","autocomplete","disabledMode","describedBy","getInputDescribedByText","trim","describedById","hasSuggestedSearch","menuOpen","menuRendered","labelValue","renderHiddenInput","h","Host","class","search","fullwidth","onFocus","onBlur","ref","ariaExpanded","role","autoFocus","inputmode","debounce","slot","innerHTML","clearIcon","onClick","onMouseDown","onKeyDown","variant","appearance","IcThemeForegroundEnum","Light","Dark","searchIcon","Default","activationType","autoFocusOnSelected","inputLabel","onMenuOptionSelect","onMenuStateChange","onMenuOptionId","onRetryButtonClicked","parentEl"],"sources":["src/components/ic-search-bar/ic-search-bar.css?tag=ic-search-bar&encapsulation=shadow","src/components/ic-search-bar/ic-search-bar.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-menu: z-index of search bar menu\n */\n\n:host(.search) {\n --divider-height: 1.5rem;\n --ic-input-label-helpertext-padding: var(--ic-space-xxs);\n}\n\n:host(.search.small) {\n --divider-height: 1rem;\n}\n\n:host(.fullwidth) {\n width: 100%;\n}\n\n:host(.search) .disabled:hover {\n border-color: var(--ic-architectural-200);\n}\n\n:host(.search.disabled) .disabled svg {\n color: var(--ic-architectural-200);\n}\n\n:host(.search) .disabled svg {\n color: var(--ic-architectural-400);\n}\n\n/* CLEAR */\n\n.clear-button-container {\n align-items: center;\n margin-right: var(--ic-space-1px);\n display: none;\n visibility: hidden;\n}\n\n.clear-button {\n border-radius: var(--ic-border-radius);\n transition: box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition);\n}\n\n.clear-button:focus,\n.clear-button:active {\n background-color: var(--ic-focus-blue);\n box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow);\n border-radius: 0.25rem;\n}\n\n.clear-button:focus,\n.clear-button:active * {\n fill: white;\n}\n\n.clear-button-visible {\n visibility: visible;\n display: flex;\n}\n\n.search-submit-button-container {\n display: flex;\n align-items: center;\n}\n\n.search-submit-button-disabled .ic-tooltip-container {\n display: none !important;\n}\n\n.search-submit-button:focus,\n.search-submit-button:active {\n background-color: var(--ic-focus-blue) !important;\n box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow) !important;\n border-radius: var(--ic-space-xxs);\n}\n\n.search-submit-button:focus,\n.search-submit-button:active * {\n fill: white;\n}\n\n.divider {\n width: var(--ic-border-width);\n background-color: var(--ic-action-dark-active);\n height: var(--divider-height);\n}\n\n:host(.dark) .divider {\n background-color: var(--ic-architectural-200);\n}\n\n.menu-container {\n width: var(--input-width, 20rem);\n position: relative;\n top: var(--ic-space-xxxs);\n}\n\n.menu-container.fullwidth {\n width: 100%;\n}\n\n.no-results {\n cursor: not-allowed;\n}\n\n.search-results-status {\n border: 0;\n clip: rect(0, 0, 0, 0, 0);\n height: var(--ic-space-1px);\n margin-bottom: calc(-1 * var(--ic-space-1px));\n margin-right: calc(-1 * var(--ic-space-1px));\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: var(--ic-space-1px);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n} from \"@stencil/core\";\n\nimport {\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcThemeForegroundEnum,\n IcMenuOption,\n IcSizesNoLarge,\n} from \"../../utils/types\";\nimport {\n getInputDescribedByText,\n renderHiddenInput,\n handleHiddenFormButtonClick,\n getLabelFromValue,\n onComponentRequiredPropUndefined,\n getFilteredMenuOptions,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n IcSearchBarBlurEventDetail,\n IcSearchBarSearchModes,\n} from \"./ic-search-bar.types\";\nimport { IcValueEventDetail, IcBlurEventDetail } from \"../../utils/types\";\nimport {\n IcMenuChangeEventDetail,\n IcOptionSelectEventDetail,\n} from \"../ic-menu/ic-menu.types\";\n\nimport clearIcon from \"../../assets/clear-icon.svg\";\nimport searchIcon from \"../../assets/search-icon.svg\";\n\nlet inputIds = 0;\n\n@Component({\n tag: \"ic-search-bar\",\n styleUrl: \"ic-search-bar.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class SearchBar {\n private anchorEl: HTMLElement;\n private assistiveHintEl: HTMLSpanElement = null;\n private debounceAriaLive: number;\n private hasTimedOut = false;\n private inputEl: HTMLIcTextFieldElement;\n private inputId = `ic-search-bar-input-${inputIds++}`;\n private menu: HTMLIcMenuElement;\n private menuCloseFromMenuChangeEvent: boolean = false;\n private menuId = `${this.inputId}-menu`;\n private preLoad = true;\n private preventSubmit: boolean = false;\n private prevNoOption: boolean = false;\n private retryButtonClick: boolean = false;\n private retryViaKeyPress: boolean;\n private timeoutTimer: number;\n private truncateValue = false;\n private searchSubmitButton: HTMLIcButtonElement;\n\n @Element() el: HTMLIcSearchBarElement;\n\n @State() ariaActiveDescendant: string;\n @State() clearButtonFocused: boolean = false;\n @State() highlightedValue: string;\n @State() open: boolean = false;\n @State() searchSubmitFocused: boolean = false;\n @State() showClearButton: boolean = false;\n\n /**\n * The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n */\n @Prop() autocapitalize = \"off\";\n\n /**\n * The state of autocompletion the browser can apply on the text value.\n */\n @Prop() autocomplete?: IcAutocompleteTypes = \"off\";\n\n /**\n * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n */\n @Prop() autocorrect?: IcAutocorrectStates = \"off\";\n\n /**\n * If `true`, the form control will have input focus when the page loads.\n */\n @Prop() autofocus = false;\n\n /**\n * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.\n */\n @Prop() charactersUntilSuggestion: number = 2;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\n * If `true`, all options provided will be displayed.\n */\n @Prop() disableFilter?: boolean = false;\n\n /**\n * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n */\n @Prop() debounce?: number = 0;\n\n /**\n * The text displayed when there are no options in the option list.\n */\n @Prop() emptyOptionListText = \"No results found\";\n\n /**\n * If `true`, the search bar will be focused when component loaded.\n */\n @Prop() focusOnLoad?: boolean = false;\n\n /**\n * Specify whether the search bar fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n */\n @Prop() fullWidth?: boolean = false;\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText?: string = \"\";\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel?: boolean = false;\n\n /**\n * The hint text for the hidden assistive description element.\n */\n @Prop() hintText?: string =\n \"When autocomplete results are available use the up and down arrows to choose and press enter to select\";\n\n /**\n * The label for the search bar.\n */\n @Prop() label!: string;\n\n /**\n * The custom name for the label field to correspond with the IcMenuOption type.\n */\n @Prop() labelField?: string = \"label\";\n\n /**\n * Trigger loading state when fetching options asynchronously\n */\n @Prop({ mutable: true }) loading?: boolean = false;\n\n /**\n * Change the message displayed when external loading times out.\n */\n @Prop() loadingErrorLabel?: string = \"Loading Error\";\n\n /**\n * Change the message displayed whilst the options are being loaded externally.\n */\n @Prop() loadingLabel?: string = \"Loading...\";\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The placeholder value to display.\n */\n @Prop() placeholder?: string = \"Search\";\n\n /**\n * If `true`, the readonly state will be set.\n */\n @Prop() readonly?: boolean = false;\n\n /**\n * If `true`, the search bar will require a value.\n */\n @Prop() required?: boolean = false;\n\n /**\n * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.\n */\n @Prop() searchMode?: IcSearchBarSearchModes = \"navigation\";\n\n /**\n * The size of the search bar 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 * If `true`, the value of the search will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * If using external filtering, set a timeout for when loading takes too long.\n */\n @Prop() timeout?: number;\n\n /**\n * The custom name for the value field to correspond with the IcMenuOption type.\n */\n @Prop() valueField?: string = \"value\";\n\n @Watch(\"loading\")\n loadingHandler(newValue: boolean): void {\n if (newValue && !this.hasTimedOut) {\n this.preLoad = false;\n this.triggerLoading();\n }\n }\n\n @State() filteredOptions: IcMenuOption[] = [];\n\n @Watch(\"filteredOptions\")\n filteredOptionsHandler(newOptions: IcMenuOption[]): void {\n this.hasTimedOut = newOptions.some((opt) => opt.timedOut);\n }\n\n /**\n * The suggested search options.\n */\n @Prop() options?: IcMenuOption[] = [];\n\n @Watch(\"options\")\n watchOptionsHandler(newOptions: IcMenuOption[]): void {\n if (this.disableFilter && !this.hasTimedOut) {\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n if (newOptions.length > 0) {\n this.filteredOptions = newOptions;\n } else {\n if (this.hadNoOptions()) {\n return;\n }\n this.setMenuChange(true);\n !this.preLoad &&\n (this.filteredOptions = [\n {\n [this.labelField]: this.emptyOptionListText,\n [this.valueField]: \"\",\n },\n ]);\n this.preLoad = true;\n }\n }\n this.debounceAriaLiveUpdate();\n }\n\n /**\n * The value of the search input.\n */\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n @Watch(\"value\")\n watchValueHandler(newValue: string): void {\n if (\n this.inputEl &&\n this.options &&\n !!getLabelFromValue(\n newValue,\n this.options,\n this.valueField,\n this.labelField\n )\n ) {\n this.inputEl.value = getLabelFromValue(\n newValue,\n this.options,\n this.valueField,\n this.labelField\n );\n } else if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n }\n\n // The icChange event is defined here so that it appears as an event for search bar\n // The actual event is emitted from the child ic-text-field\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when value is cleared with clear button\n */\n @Event() icClear: EventEmitter<void>;\n private handleClear = (ev: Event) => {\n const keyboardEvent = ev as KeyboardEvent;\n const mouseEvent = ev as MouseEvent;\n\n if (\n mouseEvent.type === \"click\" ||\n keyboardEvent.code === \"Enter\" ||\n keyboardEvent.code === \"Space\"\n ) {\n this.value = \"\";\n this.inputEl.value = \"\";\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n this.filteredOptions = this.options;\n this.el.setFocus();\n\n this.icClear.emit();\n ev.preventDefault();\n\n this.preventSubmit = true;\n }\n };\n\n // The icInput event is defined here so that it appears as an event for search bar\n // The actual event is emitted from the child ic-text-field\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n\n const noOptions = [\n { [this.labelField]: this.emptyOptionListText, [this.valueField]: \"\" },\n ];\n\n if (this.options.length > 0) {\n this.setMenuChange(true);\n\n this.preLoad = false;\n\n if (this.disableFilter === false) {\n const rawFilteredOptions = getFilteredMenuOptions(\n this.options,\n false,\n this.value,\n \"anywhere\",\n this.labelField\n );\n\n this.filteredOptions =\n rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;\n }\n }\n\n if (!this.showClearButton) {\n this.handleShowClearButton(true);\n }\n\n this.debounceAriaLiveUpdate();\n };\n\n /**\n * @deprecated This event should not be used anymore. Use icSearchBarBlur instead.\n */\n @Event() icInputBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n private onInputBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icInputBlur.emit({ value: value, relatedTarget: nextFocus });\n };\n\n /**\n * @deprecated This event should not be used anymore. Use icSearchBarFocus instead.\n */\n @Event() icInputFocus: EventEmitter<IcValueEventDetail>;\n private onInputFocus = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icInputFocus.emit({ value: value });\n\n this.handleShowClearButton(true);\n };\n\n /**\n * Emitted when option is highlighted within the menu\n */\n @Event() icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;\n\n /**\n * Emitted when the state of the menu changes (i.e. open or close)\n */\n @Event() icMenuChange: EventEmitter<IcMenuChangeEventDetail>;\n /**\n * @internal - Emitted when blur is invoked from clear button\n */\n @Event() icClearBlur: EventEmitter<IcBlurEventDetail>;\n private handleClearBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icClearBlur.emit({ relatedTarget: nextFocus });\n\n this.clearButtonFocused = false;\n };\n\n /**\n * Emitted when the 'retry loading' button is clicked\n */\n @Event() icRetryLoad: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when the search value has been submitted\n */\n @Event() icSubmitSearch: EventEmitter<IcValueEventDetail>;\n\n /**\n * @internal - Emitted when blur is invoked from search submit button\n */\n @Event() icSubmitSearchBlur: EventEmitter<IcBlurEventDetail>;\n private handleSubmitSearchBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icSubmitSearchBlur.emit({ relatedTarget: nextFocus });\n\n this.searchSubmitFocused = false;\n };\n\n /**\n * Emitted when blur is invoked from ic-search-bar\n */\n @Event() icSearchBarBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n\n /**\n * Emitted when focus is invoked from ic-search-bar\n */\n @Event() icSearchBarFocus: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.assistiveHintEl) {\n this.assistiveHintEl.remove();\n }\n }\n\n componentWillLoad(): void {\n this.watchValueHandler(this.value);\n\n removeDisabledFalse(this.disabled, this.el);\n\n if (this.small) {\n this.size = \"small\";\n }\n }\n\n componentDidLoad(): void {\n if (this.focusOnLoad) {\n this.el.setFocus();\n }\n\n if (this.hasOptionsOrFilterDisabled()) {\n this.renderAssistiveHintEl();\n if (this.disableFilter) {\n this.filteredOptions = this.options;\n }\n }\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Search Bar\"\n );\n\n if (this.inputEl !== undefined) {\n this.anchorEl = this.inputEl.shadowRoot.querySelector(\n \"ic-input-component-container\"\n );\n }\n }\n\n componentWillRender(): void {\n this.highlightFirstOptionAfterNoResults();\n }\n\n @Listen(\"icKeydown\", {})\n handleKeyDown(ev: CustomEvent): void {\n const keyEv: KeyboardEvent = ev.detail.event;\n if (this.menu && this.open) {\n this.menu.handleKeyboardOpen(keyEv);\n }\n }\n\n @Listen(\"keyup\", {})\n handleKeyUp(ev: KeyboardEvent): void {\n if (ev.key === \"Enter\") {\n if (this.preventSubmit || this.isSubmitDisabled()) {\n return;\n }\n\n this.handleSubmitSearch();\n this.setMenuChange(false);\n }\n\n if (ev.key === \"Escape\") {\n this.setMenuChange(false);\n }\n\n if (this.preventSubmit) {\n this.preventSubmit = false;\n }\n }\n\n /**\n * Sets focus on the native `input`.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n if (this.inputEl) {\n this.inputEl.setFocus();\n }\n }\n\n private handleMouseDown = (ev: Event) => {\n ev.preventDefault();\n };\n\n private handleSubmitSearchFocus = () => {\n this.searchSubmitFocused = true;\n };\n\n private handleSubmitSearch = () => {\n this.highlightedValue && (this.value = this.highlightedValue);\n this.highlightedValue = undefined;\n this.icSubmitSearch.emit({ value: this.value });\n\n const form: HTMLFormElement = this.el.closest(\"FORM\");\n\n if (this.searchSubmitButton && !!form && !this.preventSubmit) {\n handleHiddenFormButtonClick(form, this.searchSubmitButton);\n }\n };\n\n private debounceAriaLiveUpdate() {\n clearTimeout(this.debounceAriaLive);\n\n this.debounceAriaLive = window.setTimeout(() => {\n this.updateSearchResultAriaLive();\n }, 500);\n }\n\n private handleSubmitSearchKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === \" \") {\n ev.preventDefault();\n this.handleSubmitSearch();\n }\n };\n\n private handleRetry = (ev: CustomEvent<IcValueEventDetail>) => {\n this.retryViaKeyPress = ev.detail.keyPressed === \"Enter\";\n this.icRetryLoad.emit({ value: ev.detail.value });\n this.triggerLoading();\n this.retryButtonClick = true;\n };\n\n private triggerLoading = () => {\n const loadingOption: IcMenuOption[] = [\n {\n [this.labelField]: this.loadingLabel,\n [this.valueField]: \"\",\n loading: true,\n },\n ];\n if (this.filteredOptions !== loadingOption)\n this.filteredOptions = loadingOption;\n if (this.timeout) {\n this.timeoutTimer = window.setTimeout(() => {\n this.filteredOptions = [\n {\n [this.labelField]: this.loadingErrorLabel,\n [this.valueField]: \"\",\n timedOut: true,\n },\n ];\n }, this.timeout);\n }\n };\n\n private handleOptionSelect = (ev: CustomEvent) => {\n if (ev.detail.label === this.emptyOptionListText) {\n this.el.setFocus();\n return;\n }\n\n this.value = ev.detail.value;\n this.icOptionSelect.emit({ value: this.value });\n };\n\n private handleMenuOptionHighlight = (ev: CustomEvent) => {\n const optionValue = ev.detail.optionId?.replace(`${this.menuId}-`, \"\");\n optionValue && (this.highlightedValue = optionValue);\n if (ev.detail.optionId) {\n this.ariaActiveDescendant = ev.detail.optionId;\n } else {\n this.ariaActiveDescendant = undefined;\n }\n };\n\n private handleMenuChange = (ev: CustomEvent<IcMenuChangeEventDetail>) => {\n this.setMenuChange(ev.detail.open);\n if (!ev.detail.open) {\n this.handleMenuCloseFromMenuChange(true);\n if (ev.detail.focusInput === undefined || ev.detail.focusInput) {\n this.el.setFocus();\n }\n }\n };\n\n private setMenuChange = (open: boolean) => {\n if (this.open !== open) {\n this.open = open;\n this.icMenuChange.emit({ open });\n }\n };\n\n private handleHostFocus = () => {\n if (this.options && this.value && !this.menuCloseFromMenuChangeEvent) {\n this.setMenuChange(true);\n }\n this.handleTruncateValue(false);\n\n this.icSearchBarFocus.emit();\n };\n\n private handleHostBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n if (\n this.open &&\n this.options &&\n nextFocus !== this.menu &&\n !this.retryViaKeyPress &&\n !this.retryButtonClick\n ) {\n this.setMenuChange(false);\n }\n\n if (this.retryButtonClick || this.retryViaKeyPress) {\n this.inputEl.setFocus();\n }\n\n this.handleShowClearButton(false);\n this.handleMenuCloseFromMenuChange(false);\n this.handleTruncateValue(true);\n this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n };\n\n private handleShowClearButton = (visible: boolean): void => {\n this.showClearButton = visible;\n };\n\n private handleFocusClearButton = (): void => {\n this.clearButtonFocused = true;\n };\n\n private handleMenuCloseFromMenuChange = (fromEvent: boolean): void => {\n this.menuCloseFromMenuChangeEvent = fromEvent;\n };\n\n private handleTruncateValue = (truncate: boolean): void => {\n this.truncateValue = truncate;\n };\n\n private renderAssistiveHintEl = (): void => {\n const input = this.el.shadowRoot\n .querySelector(\"ic-text-field\")\n ?.shadowRoot?.querySelector(`#${this.inputId}`);\n\n if (\n input &&\n Object.keys(input).length > 0 &&\n this.hasOptionsOrFilterDisabled()\n ) {\n this.assistiveHintEl = document.createElement(\"span\");\n this.assistiveHintEl.innerText = this.hintText;\n this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;\n this.assistiveHintEl.style.display = \"none\";\n if (input.after !== undefined) {\n input.after(this.assistiveHintEl);\n }\n }\n };\n\n private updateSearchResultAriaLive = (): void => {\n const searchResultsStatusEl = this.el.shadowRoot.querySelector(\n \".search-results-status\"\n ) as HTMLParagraphElement;\n\n if (searchResultsStatusEl) {\n if (\n !this.open ||\n this.value === \"\" ||\n this.value.length < this.charactersUntilSuggestion\n ) {\n searchResultsStatusEl.innerText = \"\";\n } else if (\n this.hasOptionsOrFilterDisabled() &&\n this.filteredOptions.length > 0 &&\n this.open &&\n !this.filteredOptions[0].loading\n ) {\n if (this.hadNoOptions()) {\n searchResultsStatusEl.innerText = this.emptyOptionListText;\n } else {\n searchResultsStatusEl.innerText = `${\n this.filteredOptions.length\n } result${this.filteredOptions.length > 1 ? \"s\" : \"\"} available`;\n }\n }\n }\n };\n\n private hasOptionsOrFilterDisabled = (): boolean =>\n this.options.length > 0 || this.disableFilter;\n\n private hadNoOptions = (): boolean =>\n this.filteredOptions.length === 1 &&\n this.filteredOptions[0][this.labelField] === this.emptyOptionListText &&\n this.searchMode === \"navigation\";\n\n private isSubmitDisabled = (): boolean => {\n const valueNotSet =\n this.value === undefined || this.value === null || this.value === \"\";\n const valueLengthLess = this.value.length < this.charactersUntilSuggestion;\n return (\n valueNotSet ||\n valueLengthLess ||\n this.disabled ||\n this.hadNoOptions() ||\n this.hasTimedOut ||\n this.loading\n );\n };\n\n private highlightFirstOptionAfterNoResults = () => {\n if (this.prevNoOption && this.menu && !this.hasTimedOut) {\n this.menu.handleSetFirstOption();\n this.prevNoOption = false;\n }\n const prevNoOptionsList = this.filteredOptions.find(\n (filteredOption) =>\n filteredOption[this.labelField] === this.emptyOptionListText ||\n filteredOption[this.labelField] === this.loadingErrorLabel ||\n filteredOption[this.labelField] === this.loadingLabel\n );\n if (prevNoOptionsList) {\n this.prevNoOption = true;\n }\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n small,\n size,\n placeholder,\n helperText,\n disabled,\n value,\n readonly,\n spellcheck,\n fullWidth,\n options,\n open,\n hideLabel,\n menuId,\n ariaActiveDescendant,\n truncateValue,\n autofocus,\n autocapitalize,\n autocomplete,\n filteredOptions,\n } = this;\n\n const disabledMode = readonly || disabled;\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n ).trim();\n\n let describedById;\n\n if (describedBy !== \"\" && this.hasOptionsOrFilterDisabled()) {\n describedById = `${describedBy} ${this.inputId}-assistive-hint`;\n } else if (this.hasOptionsOrFilterDisabled()) {\n describedById = `${this.inputId}-assistive-hint`;\n } else if (describedBy !== \"\") {\n describedById = describedBy;\n } else {\n describedById = undefined;\n }\n\n const hasSuggestedSearch = !!value && this.hasOptionsOrFilterDisabled();\n const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;\n const menuRendered =\n menuOpen && value.length >= this.charactersUntilSuggestion;\n\n const labelValue = getLabelFromValue(\n value,\n options,\n this.valueField,\n this.labelField\n );\n\n renderHiddenInput(true, this.el, name, value, disabledMode);\n\n return (\n <Host\n class={{\n search: true,\n fullwidth: fullWidth,\n disabled,\n small: size === \"small\",\n }}\n onFocus={this.handleHostFocus}\n onBlur={this.handleHostBlur}\n >\n <ic-text-field\n ref={(el) => (this.inputEl = el)}\n inputId={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledMode && !readonly}\n readonly={readonly}\n size={size}\n hideLabel={hideLabel}\n fullWidth={fullWidth}\n name={name}\n truncateValue={truncateValue}\n value={options && !!labelValue ? labelValue : value}\n placeholder={placeholder}\n onInput={this.onInput}\n onBlur={this.onInputBlur}\n onFocus={this.onInputFocus}\n aria-label={hideLabel ? label : \"\"}\n aria-describedby={describedById}\n aria-owns={menuRendered ? menuId : undefined}\n aria-controls={menuRendered ? menuId : undefined}\n aria-haspopup={options.length > 0 ? \"listbox\" : undefined}\n ariaExpanded={options.length > 0 ? `${menuOpen}` : undefined}\n ariaActiveDescendant={ariaActiveDescendant}\n aria-autocomplete={hasSuggestedSearch ? \"list\" : undefined}\n role={options.length > 0 ? \"combobox\" : undefined}\n autocomplete={autocomplete}\n autocapitalize={autocapitalize}\n autoFocus={autofocus}\n spellcheck={spellcheck}\n inputmode=\"search\"\n debounce={this.debounce}\n >\n <div\n class={{\n \"clear-button-container\": true,\n \"clear-button-visible\":\n value && !disabledMode && this.showClearButton,\n }}\n slot=\"clear-button\"\n >\n <ic-button\n id=\"clear-button\"\n class=\"clear-button\"\n aria-label=\"Clear\"\n innerHTML={clearIcon}\n onClick={this.handleClear}\n onMouseDown={this.handleMouseDown}\n size={size}\n onFocus={this.handleFocusClearButton}\n onBlur={this.handleClearBlur}\n onKeyDown={this.handleClear}\n type=\"submit\"\n variant=\"icon\"\n appearance={\n this.clearButtonFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Dark\n }\n ></ic-button>\n <div class=\"divider\"></div>\n </div>\n <div\n class={{\n \"search-submit-button-container\": true,\n \"search-submit-button-disabled\": this.isSubmitDisabled(),\n }}\n slot=\"search-submit-button\"\n >\n <ic-button\n id=\"search-submit-button\"\n aria-label=\"Search\"\n ref={(el) => (this.searchSubmitButton = el)}\n class={{\n [\"search-submit-button\"]: true,\n [\"search-submit-button-small\"]: !!small,\n }}\n disabled={this.isSubmitDisabled()}\n innerHTML={searchIcon}\n size={size}\n onClick={this.handleSubmitSearch}\n onMouseDown={this.handleMouseDown}\n onBlur={this.handleSubmitSearchBlur}\n onFocus={this.handleSubmitSearchFocus}\n onKeyDown={this.handleSubmitSearchKeyDown}\n type=\"submit\"\n variant=\"icon\"\n appearance={\n this.searchSubmitFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Default\n }\n ></ic-button>\n </div>\n <div\n class={{\n \"menu-container\": true,\n fullwidth: fullWidth,\n }}\n slot=\"menu\"\n >\n {menuRendered && (\n <ic-menu\n class={{\n \"no-results\":\n this.hadNoOptions() ||\n (filteredOptions.length === 1 &&\n (filteredOptions[0][this.labelField] ===\n this.loadingLabel ||\n filteredOptions[0][this.labelField] ===\n this.loadingErrorLabel)),\n }}\n activationType=\"manual\"\n anchorEl={this.anchorEl}\n autoFocusOnSelected={false}\n searchMode={this.searchMode}\n inputEl={this.inputEl}\n inputLabel={label}\n ref={(el) => (this.menu = el)}\n small={size === \"small\"}\n fullWidth={fullWidth}\n menuId={menuId}\n open={!!menuRendered}\n options={filteredOptions}\n onMenuOptionSelect={this.handleOptionSelect}\n onMenuStateChange={this.handleMenuChange}\n onMenuOptionId={this.handleMenuOptionHighlight}\n onRetryButtonClicked={this.handleRetry}\n parentEl={this.el}\n value={value}\n labelField={this.labelField}\n valueField={this.valueField}\n ></ic-menu>\n )}\n </div>\n </ic-text-field>\n <div\n aria-live=\"polite\"\n role=\"status\"\n class=\"search-results-status\"\n ></div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,f as e,h as i,g as a}from"./p-6b5e91e2.js";import{j as o,k as r,i as n,a as s,l as c}from"./p-fef9e8c9.js";import{I as d}from"./p-26b7b18f.js";import{C as l}from"./p-3b185c32.js";const b='/*! 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:flex}a{text-decoration:none !important;color:var(--ic-architechtural-black) !important}button{border:none;background-color:transparent;outline:var(--ic-hc-focus-outline)}.card,.card.clickable{display:flex;flex-direction:column;border:var(--ic-border-default);border-radius:var(--ic-border-radius);box-sizing:border-box;padding:var(--ic-space-md);text-align:left;color:var(--ic-architechtural-black);transition:var(--ic-easing-transition-fast);position:relative;width:inherit;min-width:-moz-fit-content;min-width:fit-content;height:-moz-fit-content;height:fit-content;min-height:100%}.dark.card,.dark.card.clickable{border:var(--ic-border-width) solid var(--ic-architectural-700)}.card.clickable:hover{background-color:var(--ic-action-default-bg-hover);border:var(--ic-border-hover);cursor:pointer}.card.clickable:focus,.card.clickable.focussed{background-color:var(--ic-action-default-bg-hover);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);border:var(--ic-border-pressed)}.card.clickable:active{background-color:var(--ic-action-default-bg-active);box-shadow:var(--ic-border-focus)}.card.disabled{border:var(--ic-border-disabled)}.card.fullwidth{width:100%}.card-header{display:flex;align-items:center}.icon{display:flex;align-items:center;padding-right:var(--ic-space-xs)}.card.disabled ::slotted(svg){fill:var(--ic-color-tertiary-text)}.card.clickable .card-title{color:var(--ic-hyperlink);text-decoration:underline;text-decoration-thickness:var(--ic-space-1px)}.card.clickable:hover .card-title,.card.clickable:focus .card-title,.card.clickable.focussed .card-title{display:inline-block;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}@supports (text-underline-offset: 25%){.card.clickable:hover .card-title,.card.clickable:focus .card-title,.card.clickable.focussed .card-title{text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}.card.clickable:active .card-title{text-decoration:none}.card.disabled .card-title{text-decoration:underline;text-decoration-thickness:var(--ic-space-1px);text-decoration-color:var(--ic-color-tertiary-text);color:var(--ic-color-tertiary-text)}.subheading{margin-top:var(--ic-space-xxs)}.adornment{margin-top:var(--ic-space-xxs)}.card-message{margin-top:var(--ic-space-md);align-items:left}.card.disabled .card-message,.card.disabled .subheading{color:var(--ic-color-tertiary-text)}.interaction-button{margin-left:auto}.image-top{margin-bottom:var(--ic-space-md);display:flex;justify-content:center}.image-mid{margin-top:var(--ic-space-md);display:flex;justify-content:center}.interaction-area{display:flex;flex-grow:1;gap:var(--ic-space-md);margin-top:var(--ic-space-md);align-items:flex-end}.interaction-controls{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ic-space-sm)}.toggle-button{color:var(--ic-action-default);width:2.5rem;height:2.5rem;padding:var(--ic-space-xs);margin:var(--ic-space-1px) 0;min-width:0;cursor:pointer;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);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}#ic-tooltip-expand-button{margin-left:auto;position:relative}.toggle-button:hover,.toggle-button:hover:focus{background-color:var(--ic-action-default-bg-hover);color:var(--ic-action-default-hover)}.toggle-button:focus{box-shadow:var(--ic-border-focus)}.toggle-button:active:not(:focus){background-color:var(--ic-action-default-bg-active);color:var(--ic-action-default-active)}.toggle-button svg{pointer-events:none;width:100% !important;height:100% !important;fill:currentcolor !important}.toggle-button-closed svg{transform:rotate(90deg)}.toggle-button-expanded svg{transform:rotate(-90deg)}.expanded-content{margin-top:var(--ic-space-md)}@media (forced-colors: active){.card ::slotted(svg){fill:currentcolor}.card.disabled ::slotted(svg){fill:GrayText !important}.card.disabled{border-color:GrayText !important}.card.disabled .card-message,.card.disabled .subheading,.card.disabled .card-title{color:GrayText}}';const h=class{constructor(i){t(this,i);this.hostMutationObserver=null;this.parentFocussed=()=>{this.isFocussed=true};this.parentBlurred=()=>{this.isFocussed=false};this.toggleExpanded=()=>{this.areaExpanded=!this.areaExpanded};this.hostMutationCallback=t=>{if(t.some((({type:t,addedNodes:e,removedNodes:i})=>t==="childList"?o(e,i,["message","adornment","expanded-content","image-top","image-mid","icon","interaction-button","badge","interaction-controls"]):false))){e(this)}};this.appearance="default";this.areaExpanded=false;this.isFocussed=false;this.parentEl=null;this.parentIsAnchorTag=false;this.clickable=false;this.disabled=false;this.expandable=false;this.fullWidth=false;this.heading=undefined;this.href=undefined;this.hreflang="";this.message="";this.referrerpolicy=undefined;this.rel=undefined;this.subheading=undefined;this.target=undefined}disconnectedCallback(){var t;if(this.parentIsAnchorTag){this.parentEl.removeEventListener("focus",this.parentFocussed);this.parentEl.removeEventListener("blur",this.parentBlurred)}(t=this.hostMutationObserver)===null||t===void 0?void 0:t.disconnect()}componentWillLoad(){this.parentEl=this.el.parentElement;if(this.parentEl.tagName==="A"){this.clickable=true;this.parentIsAnchorTag=true;this.parentEl.classList.add("ic-card-wrapper-link");this.parentEl.addEventListener("focus",this.parentFocussed);this.parentEl.addEventListener("blur",this.parentBlurred)}r(this.disabled,this.el)}componentDidLoad(){!n(this.el,"heading")&&s([{prop:this.heading,propName:"heading"}],"Card");this.updateTheme();this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{childList:true})}handleHostClick(t){if(this.disabled){t.stopImmediatePropagation()}}themeChangeHandler(t){const e=t.detail;this.updateTheme(e.mode)}async setFocus(){if(this.el.shadowRoot.querySelector("a")){this.el.shadowRoot.querySelector("a").focus()}else if(this.el.shadowRoot.querySelector("button")){this.el.shadowRoot.querySelector("button").focus()}}updateTheme(t=null){const e=c(this.el,t||null);if(e!==d.Default){this.appearance=e}}render(){const{clickable:t,disabled:e,expandable:a,heading:o,message:r,href:s,hreflang:c,referrerpolicy:b,rel:h,subheading:u,target:p,fullWidth:m,parentIsAnchorTag:g,isFocussed:f}=this;const v=g?"div":t?this.href===undefined?"button":"a":"div";const x=v=="a"&&{href:s,hrefLang:c,referrerPolicy:b,rel:h,target:p};return i(v,Object.assign({class:{["card"]:true,["clickable"]:t&&!e,["disabled"]:e,["fullwidth"]:m,["focussed"]:f,["dark"]:this.appearance===d.Dark},tabindex:t&&!g?0:null,"aria-disabled":e?"true":null,disabled:e?true:null},x),n(this.el,"image-top")&&i("div",{class:"image-top"},i("slot",{name:"image-top"})),i("div",{class:"card-header"},n(this.el,"icon")&&i("div",{class:"icon"},i("slot",{name:"icon"})),i("div",{class:"card-title"},i("slot",{name:"heading"},i("ic-typography",{variant:"h4"},i("p",null,o)))),n(this.el,"interaction-button")&&i("div",{class:"interaction-button"},i("slot",{name:"interaction-button"}))),(u||n(this.el,"subheading"))&&i("div",{class:"subheading"},i("slot",{name:"subheading"},i("ic-typography",{variant:"subtitle-small"},u))),n(this.el,"adornment")&&i("div",{class:"adornment"},i("slot",{name:"adornment"})),n(this.el,"image-mid")&&i("div",{class:"image-mid"},i("slot",{name:"image-mid"})),(r||n(this.el,"message"))&&i("div",{class:{["card-message"]:true}},r&&i("ic-typography",{variant:"body"},r),n(this.el,"message")&&i("slot",{name:"message"})),(n(this.el,"interaction-controls")||a)&&i("div",{class:"interaction-area"},i("div",{class:"interaction-controls"},i("slot",{name:"interaction-controls"})),a&&i("ic-tooltip",{id:"ic-tooltip-expand-button",label:"Toggle expandable area",silent:true},i("button",{class:{["toggle-button"]:true,[`toggle-button-${this.areaExpanded?"expanded":"closed"}`]:true},"aria-label":"Toggle expandable area","aria-expanded":`${this.areaExpanded}`,"aria-controls":this.areaExpanded?"expanded-content-area":null,onClick:this.toggleExpanded,innerHTML:l}))),n(this.el,"expanded-content")&&this.areaExpanded&&i("div",{class:"expanded-content",id:"expanded-content-area"},i("slot",{name:"expanded-content"})),n(this.el,"badge")&&i("slot",{name:"badge"}))}get el(){return a(this)}};h.style=b;export{h as ic_card};
|
2
|
-
//# sourceMappingURL=p-dbc0f5da.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icCardCss","Card","this","hostMutationObserver","parentFocussed","isFocussed","parentBlurred","toggleExpanded","areaExpanded","hostMutationCallback","mutationList","some","type","addedNodes","removedNodes","checkSlotInChildMutations","forceUpdate","disconnectedCallback","parentIsAnchorTag","parentEl","removeEventListener","_a","disconnect","componentWillLoad","el","parentElement","tagName","clickable","classList","add","addEventListener","removeDisabledFalse","disabled","componentDidLoad","isSlotUsed","onComponentRequiredPropUndefined","prop","heading","propName","updateTheme","MutationObserver","observe","childList","handleHostClick","event","stopImmediatePropagation","themeChangeHandler","ev","theme","detail","mode","setFocus","shadowRoot","querySelector","focus","newTheme","foregroundColor","getThemeFromContext","IcThemeForegroundEnum","Default","appearance","render","expandable","message","href","hreflang","referrerpolicy","rel","subheading","target","fullWidth","Component","undefined","attrs","hrefLang","referrerPolicy","h","Object","assign","class","Dark","tabindex","name","variant","id","label","silent","onClick","innerHTML","chevronIcon"],"sources":["src/components/ic-card/ic-card.css?tag=ic-card&encapsulation=shadow","src/components/ic-card/ic-card.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: flex;\n}\n\na {\n text-decoration: none !important;\n color: var(--ic-architechtural-black) !important;\n}\n\nbutton {\n border: none;\n background-color: transparent;\n outline: var(--ic-hc-focus-outline);\n}\n\n.card,\n.card.clickable {\n display: flex;\n flex-direction: column;\n border: var(--ic-border-default);\n border-radius: var(--ic-border-radius);\n box-sizing: border-box;\n padding: var(--ic-space-md);\n text-align: left;\n color: var(--ic-architechtural-black);\n transition: var(--ic-easing-transition-fast);\n position: relative;\n width: inherit;\n min-width: fit-content;\n height: fit-content;\n min-height: 100%;\n}\n\n.dark.card,\n.dark.card.clickable {\n border: var(--ic-border-width) solid var(--ic-architectural-700);\n}\n\n.card.clickable:hover {\n background-color: var(--ic-action-default-bg-hover);\n border: var(--ic-border-hover);\n cursor: pointer;\n}\n\n.card.clickable:focus,\n.card.clickable.focussed {\n background-color: var(--ic-action-default-bg-hover);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n border: var(--ic-border-pressed);\n}\n\n.card.clickable:active {\n background-color: var(--ic-action-default-bg-active);\n box-shadow: var(--ic-border-focus);\n}\n\n.card.disabled {\n border: var(--ic-border-disabled);\n}\n\n.card.fullwidth {\n width: 100%;\n}\n\n.card-header {\n display: flex;\n align-items: center;\n}\n\n.icon {\n display: flex;\n align-items: center;\n padding-right: var(--ic-space-xs);\n}\n\n.card.disabled ::slotted(svg) {\n fill: var(--ic-color-tertiary-text);\n}\n\n.card.clickable .card-title {\n color: var(--ic-hyperlink);\n text-decoration: underline;\n text-decoration-thickness: var(--ic-space-1px);\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n display: inline-block;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n@supports (text-underline-offset: 25%) {\n .card.clickable:hover .card-title,\n .card.clickable:focus .card-title,\n .card.clickable.focussed .card-title {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n.card.clickable:active .card-title {\n text-decoration: none;\n}\n\n.card.disabled .card-title {\n text-decoration: underline;\n text-decoration-thickness: var(--ic-space-1px);\n text-decoration-color: var(--ic-color-tertiary-text);\n color: var(--ic-color-tertiary-text);\n}\n\n.subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n margin-top: var(--ic-space-md);\n align-items: left;\n}\n\n.card.disabled .card-message,\n.card.disabled .subheading {\n color: var(--ic-color-tertiary-text);\n}\n\n.interaction-button {\n margin-left: auto;\n}\n\n.image-top {\n margin-bottom: var(--ic-space-md);\n display: flex;\n justify-content: center;\n}\n\n.image-mid {\n margin-top: var(--ic-space-md);\n display: flex;\n justify-content: center;\n}\n\n.interaction-area {\n display: flex;\n flex-grow: 1;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-md);\n align-items: flex-end;\n}\n\n.interaction-controls {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--ic-space-sm);\n}\n\n.toggle-button {\n color: var(--ic-action-default);\n width: 2.5rem;\n height: 2.5rem;\n padding: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n min-width: 0;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n border-radius: var(--ic-border-radius);\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#ic-tooltip-expand-button {\n margin-left: auto;\n position: relative;\n}\n\n.toggle-button:hover,\n.toggle-button:hover:focus {\n background-color: var(--ic-action-default-bg-hover);\n color: var(--ic-action-default-hover);\n}\n\n.toggle-button:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.toggle-button:active:not(:focus) {\n background-color: var(--ic-action-default-bg-active);\n color: var(--ic-action-default-active);\n}\n\n.toggle-button svg {\n pointer-events: none;\n width: 100% !important;\n height: 100% !important;\n fill: currentcolor !important;\n}\n\n.toggle-button-closed svg {\n transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n transform: rotate(-90deg);\n}\n\n.expanded-content {\n margin-top: var(--ic-space-md);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n .card ::slotted(svg) {\n fill: currentcolor;\n }\n\n .card.disabled ::slotted(svg) {\n fill: GrayText !important;\n }\n\n .card.disabled {\n border-color: GrayText !important;\n }\n\n .card.disabled .card-message,\n .card.disabled .subheading,\n .card.disabled .card-title {\n color: GrayText;\n }\n}\n\n/* Add back in after storybook has the `color-scheme: light dark` code */\n\n/* @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n ::slotted([slot=\"icon\"]) {\n fill: var(--ic-architectural-white);\n }\n} */\n","import {\n Component,\n Element,\n Listen,\n Prop,\n State,\n h,\n Method,\n forceUpdate,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n getThemeFromContext,\n removeDisabledFalse,\n checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n * @slot badge - Badge component overlaying the top right of the card.\n */\n@Component({\n tag: \"ic-card\",\n styleUrl: \"ic-card.css\",\n shadow: true,\n})\nexport class Card {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcCardElement;\n\n @State() appearance?: IcThemeForeground = \"default\";\n @State() areaExpanded: boolean = false;\n @State() isFocussed: boolean = false;\n @State() parentEl: HTMLElement | null = null;\n @State() parentIsAnchorTag: boolean = false;\n\n /**\n * If `true`, the card will be a clickable variant, instead of static.\n */\n @Prop({ mutable: true }) clickable?: boolean = false;\n\n /**\n * If `true`, the card will be disabled if it is clickable.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * If `true`, the card will have an expandable area and expansion toggle button.\n */\n @Prop() expandable?: boolean = false;\n\n /**\n * If `true`, the card will fill the width of the container.\n */\n @Prop() fullWidth?: boolean = false;\n\n /**\n * The heading for the card. This is required, unless a slotted heading is used.\n */\n @Prop() heading?: string;\n\n /**\n * The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n */\n @Prop() href?: string | undefined;\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string = \"\";\n\n /**\n * The main body message of the card.\n */\n @Prop() message?: string = \"\";\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 subheading for the card.\n */\n @Prop() subheading?: string;\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 disconnectedCallback(): void {\n if (this.parentIsAnchorTag) {\n this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n }\n\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.parentEl = this.el.parentElement;\n\n if (this.parentEl.tagName === \"A\") {\n this.clickable = true;\n this.parentIsAnchorTag = true;\n this.parentEl.classList.add(\"ic-card-wrapper-link\");\n this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n }\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Card\"\n );\n this.updateTheme();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled) {\n event.stopImmediatePropagation();\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 card.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"a\")) {\n this.el.shadowRoot.querySelector(\"a\").focus();\n } else if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n private parentFocussed = (): void => {\n this.isFocussed = true;\n };\n\n private parentBlurred = (): void => {\n this.isFocussed = false;\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 toggleExpanded = (): void => {\n this.areaExpanded = !this.areaExpanded;\n };\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, [\n \"message\",\n \"adornment\",\n \"expanded-content\",\n \"image-top\",\n \"image-mid\",\n \"icon\",\n \"interaction-button\",\n \"badge\",\n \"interaction-controls\",\n ])\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n clickable,\n disabled,\n expandable,\n heading,\n message,\n href,\n hreflang,\n referrerpolicy,\n rel,\n subheading,\n target,\n fullWidth,\n parentIsAnchorTag,\n isFocussed,\n } = this;\n\n const Component = parentIsAnchorTag\n ? \"div\"\n : clickable\n ? this.href === undefined\n ? \"button\"\n : \"a\"\n : \"div\";\n\n const attrs = Component == \"a\" && {\n href: href,\n hrefLang: hreflang,\n referrerPolicy: referrerpolicy,\n rel: rel,\n target: target,\n };\n\n return (\n <Component\n class={{\n [\"card\"]: true,\n [\"clickable\"]: clickable && !disabled,\n [\"disabled\"]: disabled,\n [\"fullwidth\"]: fullWidth,\n [\"focussed\"]: isFocussed,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n }}\n tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n aria-disabled={disabled ? \"true\" : null}\n disabled={disabled ? true : null}\n {...attrs}\n >\n {isSlotUsed(this.el, \"image-top\") && (\n <div class=\"image-top\">\n <slot name=\"image-top\"></slot>\n </div>\n )}\n <div class=\"card-header\">\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <div class=\"card-title\">\n <slot name=\"heading\">\n <ic-typography variant=\"h4\">\n <p>{heading}</p>\n </ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"interaction-button\") && (\n <div class=\"interaction-button\">\n <slot name=\"interaction-button\"></slot>\n </div>\n )}\n </div>\n {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"subtitle-small\">\n {subheading}\n </ic-typography>\n </slot>\n </div>\n )}\n {isSlotUsed(this.el, \"adornment\") && (\n <div class=\"adornment\">\n <slot name=\"adornment\"></slot>\n </div>\n )}\n {isSlotUsed(this.el, \"image-mid\") && (\n <div class=\"image-mid\">\n <slot name=\"image-mid\"></slot>\n </div>\n )}\n {(message || isSlotUsed(this.el, \"message\")) && (\n <div\n class={{\n [\"card-message\"]: true,\n }}\n >\n {message && <ic-typography variant=\"body\">{message}</ic-typography>}\n {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n </div>\n )}\n {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n <div class=\"interaction-area\">\n <div class=\"interaction-controls\">\n <slot name=\"interaction-controls\"></slot>\n </div>\n {expandable && (\n <ic-tooltip\n id=\"ic-tooltip-expand-button\"\n label=\"Toggle expandable area\"\n silent\n >\n <button\n class={{\n [\"toggle-button\"]: true,\n [`toggle-button-${\n this.areaExpanded ? \"expanded\" : \"closed\"\n }`]: true,\n }}\n aria-label=\"Toggle expandable area\"\n aria-expanded={`${this.areaExpanded}`}\n aria-controls={\n this.areaExpanded ? \"expanded-content-area\" : null\n }\n onClick={this.toggleExpanded}\n innerHTML={chevronIcon}\n ></button>\n </ic-tooltip>\n )}\n </div>\n )}\n {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n <div class=\"expanded-content\" id=\"expanded-content-area\">\n <slot name=\"expanded-content\"></slot>\n </div>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </Component>\n );\n }\n}\n"],"mappings":"iMAAA,MAAMA,EAAY,y9M,MC0CLC,EAAI,M,yBACPC,KAAAC,qBAAyC,KAmIzCD,KAAAE,eAAiB,KACvBF,KAAKG,WAAa,IAAI,EAGhBH,KAAAI,cAAgB,KACtBJ,KAAKG,WAAa,KAAK,EAWjBH,KAAAK,eAAiB,KACvBL,KAAKM,cAAgBN,KAAKM,YAAY,EAGhCN,KAAAO,qBAAwBC,IAC9B,GACEA,EAAaC,MAAK,EAAGC,OAAMC,aAAYC,kBACrCF,IAAS,YACLG,EAA0BF,EAAYC,EAAc,CAClD,UACA,YACA,mBACA,YACA,YACA,OACA,qBACA,QACA,yBAEF,QAEN,CACAE,EAAYd,K,mBArK0B,U,kBACT,M,gBACF,M,cACS,K,uBACF,M,eAKS,M,cAKlB,M,gBAKE,M,eAKD,M,yDAeF,G,aAKD,G,iGAsB3B,oBAAAe,G,MACE,GAAIf,KAAKgB,kBAAmB,CAC1BhB,KAAKiB,SAASC,oBAAoB,QAASlB,KAAKE,gBAChDF,KAAKiB,SAASC,oBAAoB,OAAQlB,KAAKI,c,EAGjDe,EAAAnB,KAAKC,wBAAoB,MAAAkB,SAAA,SAAAA,EAAEC,Y,CAG7B,iBAAAC,GACErB,KAAKiB,SAAWjB,KAAKsB,GAAGC,cAExB,GAAIvB,KAAKiB,SAASO,UAAY,IAAK,CACjCxB,KAAKyB,UAAY,KACjBzB,KAAKgB,kBAAoB,KACzBhB,KAAKiB,SAASS,UAAUC,IAAI,wBAC5B3B,KAAKiB,SAASW,iBAAiB,QAAS5B,KAAKE,gBAC7CF,KAAKiB,SAASW,iBAAiB,OAAQ5B,KAAKI,c,CAE9CyB,EAAoB7B,KAAK8B,SAAU9B,KAAKsB,G,CAG1C,gBAAAS,IACGC,EAAWhC,KAAKsB,GAAI,YACnBW,EACE,CAAC,CAAEC,KAAMlC,KAAKmC,QAASC,SAAU,YACjC,QAEJpC,KAAKqC,cAELrC,KAAKC,qBAAuB,IAAIqC,iBAAiBtC,KAAKO,sBACtDP,KAAKC,qBAAqBsC,QAAQvC,KAAKsB,GAAI,CACzCkB,UAAW,M,CAKf,eAAAC,CAAgBC,GACd,GAAI1C,KAAK8B,SAAU,CACjBY,EAAMC,0B,EAKV,kBAAAC,CAAmBC,GACjB,MAAMC,EAAiBD,EAAGE,OAC1B/C,KAAKqC,YAAYS,EAAME,K,CAOzB,cAAMC,GACJ,GAAIjD,KAAKsB,GAAG4B,WAAWC,cAAc,KAAM,CACzCnD,KAAKsB,GAAG4B,WAAWC,cAAc,KAAKC,O,MACjC,GAAIpD,KAAKsB,GAAG4B,WAAWC,cAAc,UAAW,CACrDnD,KAAKsB,GAAG4B,WAAWC,cAAc,UAAUC,O,EAYvC,WAAAf,CAAYgB,EAA8B,MAChD,MAAMC,EAAkBC,EAAoBvD,KAAKsB,GAAI+B,GAAY,MAEjE,GAAIC,IAAoBE,EAAsBC,QAAS,CACrDzD,KAAK0D,WAAaJ,C,EA8BtB,MAAAK,GACE,MAAMlC,UACJA,EAASK,SACTA,EAAQ8B,WACRA,EAAUzB,QACVA,EAAO0B,QACPA,EAAOC,KACPA,EAAIC,SACJA,EAAQC,eACRA,EAAcC,IACdA,EAAGC,WACHA,EAAUC,OACVA,EAAMC,UACNA,EAASpD,kBACTA,EAAiBb,WACjBA,GACEH,KAEJ,MAAMqE,EAAYrD,EACd,MACAS,EACAzB,KAAK8D,OAASQ,UACZ,SACA,IACF,MAEJ,MAAMC,EAAQF,GAAa,KAAO,CAChCP,KAAMA,EACNU,SAAUT,EACVU,eAAgBT,EAChBC,IAAKA,EACLE,OAAQA,GAGV,OACEO,EAACL,EAASM,OAAAC,OAAA,CACRC,MAAO,CACL,CAAC,QAAS,KACV,CAAC,aAAcpD,IAAcK,EAC7B,CAAC,YAAaA,EACd,CAAC,aAAcsC,EACf,CAAC,YAAajE,EACd,CAAC,QAASH,KAAK0D,aAAeF,EAAsBsB,MAEtDC,SAAUtD,IAAcT,EAAoB,EAAI,KAAI,gBACrCc,EAAW,OAAS,KACnCA,SAAUA,EAAW,KAAO,MACxByC,GAEHvC,EAAWhC,KAAKsB,GAAI,cACnBoD,EAAA,OAAKG,MAAM,aACTH,EAAA,QAAMM,KAAK,eAGfN,EAAA,OAAKG,MAAM,eACR7C,EAAWhC,KAAKsB,GAAI,SACnBoD,EAAA,OAAKG,MAAM,QACTH,EAAA,QAAMM,KAAK,UAGfN,EAAA,OAAKG,MAAM,cACTH,EAAA,QAAMM,KAAK,WACTN,EAAA,iBAAeO,QAAQ,MACrBP,EAAA,SAAIvC,MAITH,EAAWhC,KAAKsB,GAAI,uBACnBoD,EAAA,OAAKG,MAAM,sBACTH,EAAA,QAAMM,KAAK,0BAIfd,GAAclC,EAAWhC,KAAKsB,GAAI,gBAClCoD,EAAA,OAAKG,MAAM,cACTH,EAAA,QAAMM,KAAK,cACTN,EAAA,iBAAeO,QAAQ,kBACpBf,KAKRlC,EAAWhC,KAAKsB,GAAI,cACnBoD,EAAA,OAAKG,MAAM,aACTH,EAAA,QAAMM,KAAK,eAGdhD,EAAWhC,KAAKsB,GAAI,cACnBoD,EAAA,OAAKG,MAAM,aACTH,EAAA,QAAMM,KAAK,gBAGbnB,GAAW7B,EAAWhC,KAAKsB,GAAI,aAC/BoD,EAAA,OACEG,MAAO,CACL,CAAC,gBAAiB,OAGnBhB,GAAWa,EAAA,iBAAeO,QAAQ,QAAQpB,GAC1C7B,EAAWhC,KAAKsB,GAAI,YAAcoD,EAAA,QAAMM,KAAK,cAGhDhD,EAAWhC,KAAKsB,GAAI,yBAA2BsC,IAC/Cc,EAAA,OAAKG,MAAM,oBACTH,EAAA,OAAKG,MAAM,wBACTH,EAAA,QAAMM,KAAK,0BAEZpB,GACCc,EAAA,cACEQ,GAAG,2BACHC,MAAM,yBACNC,OAAM,MAENV,EAAA,UACEG,MAAO,CACL,CAAC,iBAAkB,KACnB,CAAC,iBACC7E,KAAKM,aAAe,WAAa,YAC9B,MACN,aACU,yBAAwB,gBACpB,GAAGN,KAAKM,eAAc,gBAEnCN,KAAKM,aAAe,wBAA0B,KAEhD+E,QAASrF,KAAKK,eACdiF,UAAWC,MAMpBvD,EAAWhC,KAAKsB,GAAI,qBAAuBtB,KAAKM,cAC/CoE,EAAA,OAAKG,MAAM,mBAAmBK,GAAG,yBAC/BR,EAAA,QAAMM,KAAK,sBAGdhD,EAAWhC,KAAKsB,GAAI,UAAYoD,EAAA,QAAMM,KAAK,U"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icSwitchCss","inputIds","Switch","this","inputId","handleChange","checkedState","icChange","emit","checked","value","onFocus","icFocus","onBlur","icBlur","handleFormReset","initiallyChecked","checkedChangeHandler","disconnectedCallback","removeFormResetListener","el","componentWillLoad","addFormResetListener","removeDisabledFalse","disabled","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","setFocus","shadowRoot","querySelector","focus","render","small","size","name","showState","hideLabel","helperText","renderHiddenInput","describedBy","getInputDescribedByText","h","Host","class","htmlFor","for","readonly","role","type","id","onChange","focusable","viewBox","xmlns","x1","y1","x2","y2","fill","cx","cy","r","variant"],"sources":["src/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","src/components/ic-switch/ic-switch.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n}\n\ninput {\n overflow: hidden;\n appearance: none;\n}\n\n.ic-switch-container {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--ic-space-xxs);\n cursor: pointer;\n}\n\n.ic-switch-label {\n margin-left: var(--ic-space-xxs);\n margin-bottom: var(--ic-space-sm);\n}\n\n.ic-switch-label-small {\n margin-bottom: 0.625rem;\n}\n\n.ic-switch-toggle {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: 4rem;\n height: var(--ic-space-xl);\n position: relative;\n border-radius: 100vw;\n background-color: var(--ic-architectural-200);\n border: var(--ic-border-width) solid var(--ic-architectural-700);\n box-sizing: border-box;\n transition: var(--ic-transition-duration-fast);\n}\n\n.ic-switch-line-break {\n flex: 1 0 100%;\n}\n\n.ic-switch-checked-status {\n padding-left: var(--ic-space-xxs);\n width: var(--ic-space-lg);\n}\n\n.ic-switch-toggle::before {\n content: \"\";\n width: 1.333rem;\n height: 1.333rem;\n border-radius: 50%;\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 0.333rem;\n transform: translate(0, -50%);\n background-color: var(--ic-architectural-700);\n transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-icon {\n display: inline-block;\n vertical-align: middle;\n width: 0.625rem;\n height: 0.625rem;\n}\n\n.ic-switch-icon-circle,\n.ic-switch-icon-line {\n stroke-width: 1;\n}\n\n.ic-switch-icon-circle {\n stroke: var(--ic-architectural-700);\n}\n\n.ic-switch-icon-line {\n stroke: var(--ic-architectural-white);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ic-switch-toggle::before {\n transition-duration: 0ms;\n }\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n background-color: var(--ic-action-default);\n border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(var(--ic-space-xl), -50%);\n background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-active);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n box-shadow: var(--ic-border-focus);\n}\n\n.ic-switch-disabled {\n cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n stroke: var(--ic-architectural-300);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n stroke: var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n background-color: var(--ic-architectural-80);\n border: var(--ic-border-disabled);\n}\n\n.ic-switch-input:disabled ~ .ic-switch-checked-status {\n color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n background-color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n background-color: var(--ic-status-info-light);\n border: var(--ic-border-width) dashed #98c9f5;\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-small {\n gap: var(--ic-space-xxxs);\n}\n\n.ic-switch-small .ic-switch-checked-status {\n padding-left: 0.375rem;\n}\n\n.ic-switch-small .ic-switch-toggle {\n width: var(--ic-space-xxl);\n height: var(--ic-space-lg);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n left: var(--ic-space-xxs);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(var(--ic-space-lg), -50%);\n}\n\n::slotted(*) {\n margin-left: var(--ic-space-sm);\n}\n\n::slotted(svg) {\n fill: currentcolor;\n}\n\n@media (forced-colors: active) {\n .ic-switch-toggle::before,\n .ic-switch-input:checked + .ic-switch-toggle {\n border: var(--ic-hc-border);\n }\n\n .ic-switch-input:focus + .ic-switch-toggle {\n border-color: highlight;\n outline: 0.125rem solid highlight;\n }\n\n .ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);\n }\n\n .ic-switch-input:disabled + .ic-switch-toggle,\n .ic-switch-input:disabled:checked + .ic-switch-toggle,\n .ic-switch-input:disabled + .ic-switch-toggle::before {\n border-color: GrayText;\n }\n\n .ic-switch-input:disabled ~ .ic-switch-checked-status {\n color: GrayText;\n }\n\n .ic-switch-disabled .ic-switch-icon-circle,\n .ic-switch-disabled .ic-switch-icon-line {\n stroke: GrayText;\n }\n}\n\n/* Add back in after storybook has the `color-scheme: light dark` code */\n\n/* @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n .ic-switch-label .ic-typography-label,\n ic-input-label .helpertext,\n .ic-switch-checked-status {\n color: var(--ic-architectural-white);\n }\n} */\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\nimport { IcSizesNoLarge } from \"../../utils/types\";\n\nlet inputIds = 0;\n\n/**\n * @slot right-adornment - Content is placed to the right of switch before state label.\n */\n@Component({\n tag: \"ic-switch\",\n styleUrl: \"ic-switch.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Switch {\n private inputId = `ic-switch-input-${inputIds++}`;\n\n @Element() el: HTMLIcSwitchElement;\n\n @State() checkedState: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /**\n * If `true`, the switch will display as checked.\n */\n @Prop() checked?: boolean = false;\n\n @Watch(\"checked\")\n checkedChangeHandler(): void {\n this.checkedState = this.checked;\n }\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText?: string = \"\";\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel?: boolean = false;\n\n /**\n * The aria-label applied to the switch when no visual 'name' is provided.\n */\n @Prop() label!: string;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name?: string = this.inputId;\n\n /**\n * If `true`, the switch will render the On/Off state text.\n */\n @Prop() showState?: boolean = false;\n\n /**\n * The size of the switch 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 value of the toggle does not mean if it's checked or not, use the `checked`\n * property for that.\n *\n * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n * it's only used when the toggle participates in a native `<form>`.\n */\n @Prop() value?: string | null = \"on\";\n\n /**\n * Emitted when the toggle loses focus.\n */\n @Event() icBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the value property has changed.\n */\n @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n /**\n * Emitted when the toggle has focus.\n */\n @Event() icFocus!: EventEmitter<void>;\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n componentWillLoad(): void {\n this.checkedState = this.checked;\n addFormResetListener(this.el, this.handleFormReset);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Switch\"\n );\n }\n\n /**\n * Sets focus on the switch.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"input\")) {\n this.el.shadowRoot.querySelector(\"input\").focus();\n }\n }\n\n private handleChange = () => {\n this.checkedState = !this.checkedState;\n this.icChange.emit({\n checked: this.checkedState,\n value: this.value,\n });\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private handleFormReset = (): void => {\n this.checkedState = this.initiallyChecked;\n };\n\n render() {\n const {\n label,\n checkedState,\n small,\n size,\n disabled,\n name,\n showState,\n value,\n hideLabel,\n helperText,\n inputId,\n } = this;\n\n renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n );\n\n return (\n <Host>\n <label\n class={{\n [\"ic-switch-container\"]: true,\n [\"ic-switch-disabled\"]: disabled,\n [\"ic-switch-small\"]: small || size === \"small\",\n }}\n htmlFor={inputId}\n >\n {!hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n readonly={true}\n disabled={disabled}\n class={{\n [\"ic-switch-label\"]: true,\n [\"ic-switch-label-small\"]: small || size === \"small\",\n }}\n ></ic-input-label>\n )}\n {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n <input\n checked={checkedState}\n disabled={disabled}\n aria-label={label}\n aria-checked={checkedState ? \"true\" : \"false\"}\n aria-describedby={describedBy}\n role=\"switch\"\n class=\"ic-switch-input\"\n type=\"checkbox\"\n name=\"toggle\"\n id={inputId}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onChange={this.handleChange}\n />\n <span class=\"ic-switch-toggle\">\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n class=\"ic-switch-icon-line\"\n x1=\"9\"\n y1={small || size === \"small\" ? \"2\" : \"1\"}\n x2=\"9\"\n y2={small || size === \"small\" ? \"8\" : \"9\"}\n />\n </svg>\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n class=\"ic-switch-icon-circle\"\n fill=\"none\"\n cx=\"5\"\n cy=\"5\"\n r={small || size === \"small\" ? \"3.335\" : \"4.445\"}\n />\n </svg>\n </span>\n <slot name=\"right-adornment\"></slot>\n {showState && (\n <ic-typography\n aria-hidden=\"true\"\n variant=\"label\"\n class=\"ic-switch-checked-status\"\n >\n {checkedState ? \"On\" : \"Off\"}\n </ic-typography>\n )}\n </label>\n </Host>\n );\n }\n}\n"],"mappings":"+JAAA,MAAMA,EAAc,w/MCuBpB,IAAIC,EAAW,E,MAYFC,EAAM,M,4HACTC,KAAAC,QAAU,mBAAmBH,MA4G7BE,KAAAE,aAAe,KACrBF,KAAKG,cAAgBH,KAAKG,aAC1BH,KAAKI,SAASC,KAAK,CACjBC,QAASN,KAAKG,aACdI,MAAOP,KAAKO,OACZ,EAGIP,KAAAQ,QAAU,KAChBR,KAAKS,QAAQJ,MAAM,EAGbL,KAAAU,OAAS,KACfV,KAAKW,OAAON,MAAM,EAGZL,KAAAY,gBAAkB,KACxBZ,KAAKG,aAAeH,KAAKa,gBAAgB,E,kBAzHV,M,sBACLb,KAAKM,Q,aAKL,M,cAUC,M,gBAKC,G,eAKA,M,+BAUNN,KAAKC,Q,eAKC,M,UAKE,U,WAKN,M,WASM,I,CAnDhC,oBAAAa,GACEd,KAAKG,aAAeH,KAAKM,O,CAmE3B,oBAAAS,GACEC,EAAwBhB,KAAKiB,GAAIjB,KAAKY,gB,CAGxC,iBAAAM,GACElB,KAAKG,aAAeH,KAAKM,QACzBa,EAAqBnB,KAAKiB,GAAIjB,KAAKY,iBACnCQ,EAAoBpB,KAAKqB,SAAUrB,KAAKiB,G,CAG1C,gBAAAK,GACEC,EACE,CAAC,CAAEC,KAAMxB,KAAKyB,MAAOC,SAAU,UAC/B,S,CAQJ,cAAMC,GACJ,GAAI3B,KAAKiB,GAAGW,WAAWC,cAAc,SAAU,CAC7C7B,KAAKiB,GAAGW,WAAWC,cAAc,SAASC,O,EAwB9C,MAAAC,GACE,MAAMN,MACJA,EAAKtB,aACLA,EAAY6B,MACZA,EAAKC,KACLA,EAAIZ,SACJA,EAAQa,KACRA,EAAIC,UACJA,EAAS5B,MACTA,EAAK6B,UACLA,EAASC,WACTA,EAAUpC,QACVA,GACED,KAEJsC,EAAkB,KAAMtC,KAAKiB,GAAIiB,EAAM/B,EAAeI,EAAQ,GAAIc,GAElE,MAAMkB,EAAcC,EAClBvC,EACAoC,IAAe,GACf,OAGF,OACEI,EAACC,EAAI,KACHD,EAAA,SACEE,MAAO,CACL,CAAC,uBAAwB,KACzB,CAAC,sBAAuBtB,EACxB,CAAC,mBAAoBW,GAASC,IAAS,SAEzCW,QAAS3C,IAEPmC,GACAK,EAAA,kBACEI,IAAK5C,EACLwB,MAAOA,EACPY,WAAYA,EACZS,SAAU,KACVzB,SAAUA,EACVsB,MAAO,CACL,CAAC,mBAAoB,KACrB,CAAC,yBAA0BX,GAASC,IAAS,YAIjDG,GAAaK,EAAA,QAAME,MAAM,yBAC3BF,EAAA,SACEnC,QAASH,EACTkB,SAAUA,EAAQ,aACNI,EAAK,eACHtB,EAAe,OAAS,QAAO,mBAC3BoC,EAClBQ,KAAK,SACLJ,MAAM,kBACNK,KAAK,WACLd,KAAK,SACLe,GAAIhD,EACJO,QAASR,KAAKQ,QACdE,OAAQV,KAAKU,OACbwC,SAAUlD,KAAKE,eAEjBuC,EAAA,QAAME,MAAM,oBACVF,EAAA,OACEE,MAAM,iBAAgB,cACV,OACZQ,UAAU,QACVC,QAAQ,YACRC,MAAM,8BAENZ,EAAA,QACEE,MAAM,sBACNW,GAAG,IACHC,GAAIvB,GAASC,IAAS,QAAU,IAAM,IACtCuB,GAAG,IACHC,GAAIzB,GAASC,IAAS,QAAU,IAAM,OAG1CQ,EAAA,OACEE,MAAM,iBAAgB,cACV,OACZQ,UAAU,QACVC,QAAQ,YACRC,MAAM,8BAENZ,EAAA,UACEE,MAAM,wBACNe,KAAK,OACLC,GAAG,IACHC,GAAG,IACHC,EAAG7B,GAASC,IAAS,QAAU,QAAU,YAI/CQ,EAAA,QAAMP,KAAK,oBACVC,GACCM,EAAA,+BACc,OACZqB,QAAQ,QACRnB,MAAM,4BAELxC,EAAe,KAAO,Q"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,c as t,h as o,H as i,g as r}from"./p-6b5e91e2.js";import{e as n,I as a,b as s,f as l,i as c,w as d}from"./p-fef9e8c9.js";import{I as p}from"./p-26b7b18f.js";const m='/*! 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;--footer-compliance-padding:1rem 0}:host(.footer-sparse){--footer-links-padding:1.5rem 0;--footer-logo-margin-bottom:var(--ic-space-lg);--footer-link-inner-flex-direction:row}:host(.footer-small){--footer-links-padding:0 0;--footer-logo-margin-bottom:var(--ic-space-md);--footer-link-inner-flex-direction:column}:host(.footer-light){--footer-theme-secondary:var(--ic-theme-secondary);--footer-theme-tertiary:var(--ic-theme-tertiary);--footer-keyline:var(--ic-keyline-lighten)}:host(.footer-dark){--footer-theme-secondary:var(--ic-theme-secondary-light);--footer-theme-tertiary:var(--ic-theme-tertiary-light);--footer-keyline:var(--ic-keyline-darken)}:host(.footer-small.footer-ungrouped){--footer-links-padding:var(--ic-space-md) 0 0 0}footer{display:flex;flex-direction:column;width:100%}.footer-description{background-color:var(--footer-theme-secondary);color:var(--ic-theme-text);border-bottom:var(--footer-keyline)}.footer-description-inner{padding:1rem 0}.footer-links{padding:var(--footer-links-padding);background-color:var(--footer-theme-secondary);color:var(--ic-theme-text)}.footer-links-inner{display:flex;flex-direction:var(--footer-link-inner-flex-direction)}.footer-compliance{background-color:var(--footer-theme-tertiary);color:var(--ic-theme-text)}.footer-compliance-inner{padding:var(--footer-compliance-padding)}.footer-logo{margin-bottom:var(--footer-logo-margin-bottom);display:flex;gap:var(--ic-space-xxl)}.footer-logo>::slotted(){margin-right:var(--ic-space-md)}.footer-caption{margin-bottom:var(--ic-space-md)}.classification-spacing{margin-bottom:var(--ic-space-lg)}@media (forced-colors: active){footer{border-top:var(--ic-hc-border)}}';const f=class{constructor(o){e(this,o);this.footerResized=t(this,"footerResized",7);this.resizeObserver=null;this.resizeObserverCallback=e=>{if(e!==this.deviceSize){this.deviceSize=e}this.footerResized.emit()};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const e=n();this.resizeObserverCallback(e)}));this.resizeObserver.observe(this.footerEl)};this.deviceSize=a.XL;this.foregroundColor=s();this.aligned="left";this.breakpoint="medium";this.caption=undefined;this.copyright=true;this.description=undefined;this.groupLinks=false}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}componentWillLoad(){this.deviceSize=n()}componentDidLoad(){l(this.runResizeObserver)}themeChangeHandler(e){const t=e.detail;this.foregroundColor=t.mode}isSmall(){const e=this.breakpoint;return e==="extra small"?this.deviceSize<a.XS:e==="small"?this.deviceSize<a.S:e==="medium"?this.deviceSize<a.M:e==="large"?this.deviceSize<a.L:e==="extra large"?this.deviceSize<a.XL:false}render(){const{aligned:e,caption:t,copyright:r,description:n,groupLinks:s,foregroundColor:l}=this;const m=this.isSmall();return o(i,{class:{footer:true,[`footer-${m?"small":"sparse"}`]:true,[`footer-${s?"grouped":"ungrouped"}`]:true,[`footer-${l}`]:true,[p.Dark]:l===p.Dark,[p.Light]:l===p.Light}},o("footer",{ref:e=>this.footerEl=e},(c(this.el,"description")||n)&&o("div",{class:"footer-description"},o("ic-section-container",{aligned:e,fullHeight:true},o("div",{class:"footer-description-inner"},o("ic-typography",{variant:"body"},o("slot",{name:"description"},n))))),c(this.el,"link")&&o("div",{class:"footer-links"},s&&m?o("div",{class:"footer-links-inner",role:"list"},o("slot",{name:"link"})):o("ic-section-container",{fullHeight:true,aligned:e},o("div",{class:"footer-links-inner",role:"list"},o("slot",{name:"link"})))),o("div",{class:"footer-compliance"},o("ic-section-container",{aligned:e,fullHeight:true},o("div",{class:"footer-compliance-inner"},c(this.el,"logo")&&o("div",{class:"footer-logo"},o("slot",{name:"logo"})),(c(this.el,"caption")||t)&&o("div",{class:"footer-caption"},o("ic-typography",{variant:this.deviceSize<=a.M?"caption":"body"},o("slot",{name:"caption"},t))),r&&o("div",{class:{["footer-copyright"]:true,["classification-spacing"]:d()}},o("ic-typography",{variant:this.deviceSize<=a.M?"caption-uppercase":"label-uppercase"},"© Crown Copyright")))))))}get el(){return r(this)}};f.style=m;export{f as ic_footer};
|
2
|
-
//# sourceMappingURL=p-ee1c9f20.entry.js.map
|