@ukic/web-components 3.0.0-alpha.10 → 3.0.0-alpha.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +4 -3
- package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card-vertical.cjs.entry.js +1 -1
- package/dist/cjs/ic-card-vertical.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-dialog.cjs.entry.js +20 -5
- package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-link.cjs.entry.js +1 -1
- package/dist/cjs/ic-link.cjs.entry.js.map +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-toggle-button.cjs.entry.js +1 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.css +14 -0
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js +3 -2
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js.map +1 -1
- package/dist/collection/components/ic-breadcrumb/test/basic/ic-breadcrumb.spec.js +4 -4
- package/dist/collection/components/ic-breadcrumb/test/basic/ic-breadcrumb.spec.js.map +1 -1
- package/dist/collection/components/ic-card-vertical/ic-card-vertical.css +5 -0
- package/dist/collection/components/ic-checkbox/ic-checkbox.css +24 -0
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.stories.js +27 -0
- package/dist/collection/components/ic-dialog/ic-dialog.css +0 -6
- package/dist/collection/components/ic-dialog/ic-dialog.js +20 -5
- package/dist/collection/components/ic-dialog/ic-dialog.js.map +1 -1
- package/dist/collection/components/ic-dialog/ic-dialog.stories.js +28 -12
- package/dist/collection/components/ic-footer-link/ic-footer-link.js +1 -1
- package/dist/collection/components/ic-footer-link/ic-footer-link.js.map +1 -1
- package/dist/collection/components/ic-link/ic-link.css +17 -8
- package/dist/collection/components/ic-radio-group/ic-radio-group.js +2 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.css +2 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.css +4 -4
- package/dist/components/ic-breadcrumb2.js +4 -3
- package/dist/components/ic-breadcrumb2.js.map +1 -1
- package/dist/components/ic-card-vertical.js +1 -1
- package/dist/components/ic-card-vertical.js.map +1 -1
- package/dist/components/ic-checkbox.js +1 -1
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/components/ic-dialog.js +21 -6
- package/dist/components/ic-dialog.js.map +1 -1
- package/dist/components/ic-footer-link.js +1 -1
- package/dist/components/ic-footer-link.js.map +1 -1
- package/dist/components/ic-link2.js +1 -1
- package/dist/components/ic-link2.js.map +1 -1
- package/dist/components/ic-radio-group.js +2 -1
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-toggle-button.js +1 -1
- package/dist/components/ic-toggle-button.js.map +1 -1
- package/dist/components/ic-top-navigation.js +1 -1
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/core/core.css +9 -3
- package/dist/core/core.esm.js +1 -1
- package/dist/core/p-00587c99.entry.js +2 -0
- package/dist/core/p-00587c99.entry.js.map +1 -0
- package/dist/core/{p-5be2c26a.entry.js → p-07aaf9c4.entry.js} +2 -2
- package/dist/core/{p-a38f5453.entry.js → p-094f51b6.entry.js} +2 -2
- package/dist/core/{p-6e630778.entry.js → p-146b2788.entry.js} +2 -2
- package/dist/core/{p-5d5345a4.entry.js → p-15082ea5.entry.js} +2 -2
- package/dist/core/{p-2cc0d6b9.entry.js → p-174de9d7.entry.js} +2 -2
- package/dist/core/{p-404b482e.entry.js → p-17f9921d.entry.js} +2 -2
- package/dist/core/p-246ea059.entry.js +2 -0
- package/dist/core/p-246ea059.entry.js.map +1 -0
- package/dist/core/{p-5dcc0489.entry.js → p-25d3c3a6.entry.js} +2 -2
- package/dist/core/{p-50b04d0f.entry.js → p-39ab6387.entry.js} +2 -2
- package/dist/core/{p-641e244d.entry.js → p-3d565739.entry.js} +2 -2
- package/dist/core/{p-f073fc69.entry.js → p-41b7c67c.entry.js} +2 -2
- package/dist/core/p-4572b2ba.entry.js +2 -0
- package/dist/core/{p-af934e73.entry.js.map → p-4572b2ba.entry.js.map} +1 -1
- package/dist/core/{p-e4cb5585.entry.js → p-4cfe1dd8.entry.js} +2 -2
- package/dist/core/p-4cfe1dd8.entry.js.map +1 -0
- package/dist/core/{p-7c94e055.entry.js → p-5b836707.entry.js} +2 -2
- package/dist/core/{p-6c1cf351.entry.js → p-67b3cd55.entry.js} +2 -2
- package/dist/core/{p-5f74782e.entry.js → p-67b8a829.entry.js} +2 -2
- package/dist/core/{p-5b42dbef.entry.js → p-6dfa5a4b.entry.js} +2 -2
- package/dist/core/{p-2197e83e.entry.js → p-6e94c79c.entry.js} +2 -2
- package/dist/core/{p-2197e83e.entry.js.map → p-6e94c79c.entry.js.map} +1 -1
- package/dist/core/{p-1bf956cb.entry.js → p-73d6092d.entry.js} +2 -2
- package/dist/core/{p-fac53f92.entry.js → p-770c52a7.entry.js} +2 -2
- package/dist/core/{p-243ad74c.entry.js → p-7b26ef60.entry.js} +2 -2
- package/dist/core/{p-419d3378.entry.js → p-7f984e25.entry.js} +2 -2
- package/dist/core/{p-4e6e34fe.entry.js → p-86caada0.entry.js} +2 -2
- package/dist/core/{p-d21d8014.entry.js → p-8c03b8b5.entry.js} +2 -2
- package/dist/core/p-8c03b8b5.entry.js.map +1 -0
- package/dist/core/{p-36ac5305.entry.js → p-8fdb9b16.entry.js} +2 -2
- package/dist/core/p-8fdb9b16.entry.js.map +1 -0
- package/dist/core/{p-490bf0ee.entry.js → p-91a221b5.entry.js} +2 -2
- package/dist/core/p-9e0c2c19.entry.js +2 -0
- package/dist/core/p-9e0c2c19.entry.js.map +1 -0
- package/dist/core/{p-f7872eef.entry.js → p-9f569f90.entry.js} +2 -2
- package/dist/core/{p-0cb72d37.entry.js → p-a178d53c.entry.js} +2 -2
- package/dist/core/p-a3b7a147.entry.js +2 -0
- package/dist/core/p-a3b7a147.entry.js.map +1 -0
- package/dist/core/{p-f2d9eefe.entry.js → p-a72685f6.entry.js} +2 -2
- package/dist/core/{p-87aa30b4.entry.js → p-abdc2912.entry.js} +2 -2
- package/dist/core/{p-7c8cd719.entry.js → p-b260b967.entry.js} +2 -2
- package/dist/core/{p-cf0176be.entry.js → p-b404b307.entry.js} +2 -2
- package/dist/core/{p-b9941d97.entry.js → p-b6ce9ca3.entry.js} +2 -2
- package/dist/core/{p-8624bb98.entry.js → p-b6e010f3.entry.js} +2 -2
- package/dist/core/{p-5f6d6b3f.entry.js → p-bbd4f487.entry.js} +2 -2
- package/dist/core/{p-84c3a870.entry.js → p-bd9f3961.entry.js} +2 -2
- package/dist/core/{p-1223d0e9.entry.js → p-c1db155d.entry.js} +2 -2
- package/dist/core/{p-24a34d72.entry.js → p-c7bcdb8e.entry.js} +2 -2
- package/dist/core/{p-199b9196.entry.js → p-ca11666f.entry.js} +2 -2
- package/dist/core/{p-932f3e3c.js → p-cda4aca9.js} +2 -2
- package/dist/core/{p-f9dceda0.entry.js → p-d0afa458.entry.js} +2 -2
- package/dist/core/{p-e1f8d915.entry.js → p-d8690838.entry.js} +2 -2
- package/dist/core/{p-9ad4bbf4.entry.js → p-dededae6.entry.js} +2 -2
- package/dist/core/{p-20ac0d2a.entry.js → p-e2cf6e7e.entry.js} +2 -2
- package/dist/core/{p-9cfd6855.entry.js → p-e6189634.entry.js} +2 -2
- package/dist/core/{p-33b44dc1.entry.js → p-e6dc3cd1.entry.js} +2 -2
- package/dist/core/{p-7ff4632d.entry.js → p-e831277e.entry.js} +2 -2
- package/dist/core/{p-e0730a5d.entry.js → p-eb7c589b.entry.js} +2 -2
- package/dist/core/p-f65179fe.entry.js +2 -0
- package/dist/core/p-f65179fe.entry.js.map +1 -0
- package/dist/core/{p-47038ea3.entry.js → p-fd60eef7.entry.js} +2 -2
- package/dist/core/{p-29afeb33.entry.js → p-fd9f3fd0.entry.js} +2 -2
- package/dist/esm/{helpers-2624c32c.js → helpers-a72a277b.js} +2 -2
- package/dist/esm/{helpers-2624c32c.js.map → helpers-a72a277b.js.map} +1 -1
- package/dist/esm/ic-accordion-group.entry.js +1 -1
- package/dist/esm/ic-accordion.entry.js +1 -1
- package/dist/esm/ic-alert.entry.js +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 +5 -4
- package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ic-button_3.entry.js +1 -1
- package/dist/esm/ic-card-vertical.entry.js +2 -2
- package/dist/esm/ic-card-vertical.entry.js.map +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +1 -1
- package/dist/esm/ic-checkbox.entry.js +2 -2
- package/dist/esm/ic-checkbox.entry.js.map +1 -1
- package/dist/esm/ic-chip.entry.js +1 -1
- package/dist/esm/ic-data-row.entry.js +1 -1
- package/dist/esm/ic-dialog.entry.js +21 -6
- package/dist/esm/ic-dialog.entry.js.map +1 -1
- package/dist/esm/ic-divider.entry.js +1 -1
- package/dist/esm/ic-empty-state.entry.js +1 -1
- package/dist/esm/ic-footer-link-group.entry.js +1 -1
- package/dist/esm/ic-footer-link.entry.js +2 -2
- package/dist/esm/ic-footer-link.entry.js.map +1 -1
- package/dist/esm/ic-footer.entry.js +1 -1
- package/dist/esm/ic-hero.entry.js +1 -1
- package/dist/esm/ic-horizontal-scroll.entry.js +1 -1
- package/dist/esm/ic-input-component-container_3.entry.js +1 -1
- package/dist/esm/ic-input-label_2.entry.js +1 -1
- package/dist/esm/ic-link.entry.js +2 -2
- package/dist/esm/ic-link.entry.js.map +1 -1
- package/dist/esm/ic-menu-group.entry.js +1 -1
- package/dist/esm/ic-menu-item.entry.js +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 +1 -1
- package/dist/esm/ic-pagination.entry.js +1 -1
- package/dist/esm/ic-popover-menu.entry.js +1 -1
- package/dist/esm/ic-radio-group.entry.js +3 -2
- package/dist/esm/ic-radio-group.entry.js.map +1 -1
- package/dist/esm/ic-radio-option.entry.js +1 -1
- package/dist/esm/ic-search-bar.entry.js +1 -1
- package/dist/esm/ic-select.entry.js +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 +1 -1
- package/dist/esm/ic-tab-group.entry.js +1 -1
- package/dist/esm/ic-tab-panel.entry.js +1 -1
- package/dist/esm/ic-tab.entry.js +1 -1
- package/dist/esm/ic-text-field.entry.js +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 +1 -1
- package/dist/esm/ic-toggle-button.entry.js +2 -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/types/components/ic-breadcrumb/ic-breadcrumb.d.ts +1 -0
- package/dist/types/components/ic-dialog/ic-dialog.d.ts +1 -0
- package/hydrate/index.js +32 -15
- package/package.json +2 -2
- package/dist/core/p-190c3474.entry.js +0 -2
- package/dist/core/p-190c3474.entry.js.map +0 -1
- package/dist/core/p-31c84a47.entry.js +0 -2
- package/dist/core/p-31c84a47.entry.js.map +0 -1
- package/dist/core/p-36ac5305.entry.js.map +0 -1
- package/dist/core/p-4fce49bd.entry.js +0 -2
- package/dist/core/p-4fce49bd.entry.js.map +0 -1
- package/dist/core/p-7fa74998.entry.js +0 -2
- package/dist/core/p-7fa74998.entry.js.map +0 -1
- package/dist/core/p-af934e73.entry.js +0 -2
- package/dist/core/p-cf5d88a9.entry.js +0 -2
- package/dist/core/p-cf5d88a9.entry.js.map +0 -1
- package/dist/core/p-d21d8014.entry.js.map +0 -1
- package/dist/core/p-e4cb5585.entry.js.map +0 -1
- /package/dist/core/{p-5be2c26a.entry.js.map → p-07aaf9c4.entry.js.map} +0 -0
- /package/dist/core/{p-a38f5453.entry.js.map → p-094f51b6.entry.js.map} +0 -0
- /package/dist/core/{p-6e630778.entry.js.map → p-146b2788.entry.js.map} +0 -0
- /package/dist/core/{p-5d5345a4.entry.js.map → p-15082ea5.entry.js.map} +0 -0
- /package/dist/core/{p-2cc0d6b9.entry.js.map → p-174de9d7.entry.js.map} +0 -0
- /package/dist/core/{p-404b482e.entry.js.map → p-17f9921d.entry.js.map} +0 -0
- /package/dist/core/{p-5dcc0489.entry.js.map → p-25d3c3a6.entry.js.map} +0 -0
- /package/dist/core/{p-50b04d0f.entry.js.map → p-39ab6387.entry.js.map} +0 -0
- /package/dist/core/{p-641e244d.entry.js.map → p-3d565739.entry.js.map} +0 -0
- /package/dist/core/{p-f073fc69.entry.js.map → p-41b7c67c.entry.js.map} +0 -0
- /package/dist/core/{p-7c94e055.entry.js.map → p-5b836707.entry.js.map} +0 -0
- /package/dist/core/{p-6c1cf351.entry.js.map → p-67b3cd55.entry.js.map} +0 -0
- /package/dist/core/{p-5f74782e.entry.js.map → p-67b8a829.entry.js.map} +0 -0
- /package/dist/core/{p-5b42dbef.entry.js.map → p-6dfa5a4b.entry.js.map} +0 -0
- /package/dist/core/{p-1bf956cb.entry.js.map → p-73d6092d.entry.js.map} +0 -0
- /package/dist/core/{p-fac53f92.entry.js.map → p-770c52a7.entry.js.map} +0 -0
- /package/dist/core/{p-243ad74c.entry.js.map → p-7b26ef60.entry.js.map} +0 -0
- /package/dist/core/{p-419d3378.entry.js.map → p-7f984e25.entry.js.map} +0 -0
- /package/dist/core/{p-4e6e34fe.entry.js.map → p-86caada0.entry.js.map} +0 -0
- /package/dist/core/{p-490bf0ee.entry.js.map → p-91a221b5.entry.js.map} +0 -0
- /package/dist/core/{p-f7872eef.entry.js.map → p-9f569f90.entry.js.map} +0 -0
- /package/dist/core/{p-0cb72d37.entry.js.map → p-a178d53c.entry.js.map} +0 -0
- /package/dist/core/{p-f2d9eefe.entry.js.map → p-a72685f6.entry.js.map} +0 -0
- /package/dist/core/{p-87aa30b4.entry.js.map → p-abdc2912.entry.js.map} +0 -0
- /package/dist/core/{p-7c8cd719.entry.js.map → p-b260b967.entry.js.map} +0 -0
- /package/dist/core/{p-cf0176be.entry.js.map → p-b404b307.entry.js.map} +0 -0
- /package/dist/core/{p-b9941d97.entry.js.map → p-b6ce9ca3.entry.js.map} +0 -0
- /package/dist/core/{p-8624bb98.entry.js.map → p-b6e010f3.entry.js.map} +0 -0
- /package/dist/core/{p-5f6d6b3f.entry.js.map → p-bbd4f487.entry.js.map} +0 -0
- /package/dist/core/{p-84c3a870.entry.js.map → p-bd9f3961.entry.js.map} +0 -0
- /package/dist/core/{p-1223d0e9.entry.js.map → p-c1db155d.entry.js.map} +0 -0
- /package/dist/core/{p-24a34d72.entry.js.map → p-c7bcdb8e.entry.js.map} +0 -0
- /package/dist/core/{p-199b9196.entry.js.map → p-ca11666f.entry.js.map} +0 -0
- /package/dist/core/{p-932f3e3c.js.map → p-cda4aca9.js.map} +0 -0
- /package/dist/core/{p-f9dceda0.entry.js.map → p-d0afa458.entry.js.map} +0 -0
- /package/dist/core/{p-e1f8d915.entry.js.map → p-d8690838.entry.js.map} +0 -0
- /package/dist/core/{p-9ad4bbf4.entry.js.map → p-dededae6.entry.js.map} +0 -0
- /package/dist/core/{p-20ac0d2a.entry.js.map → p-e2cf6e7e.entry.js.map} +0 -0
- /package/dist/core/{p-9cfd6855.entry.js.map → p-e6189634.entry.js.map} +0 -0
- /package/dist/core/{p-33b44dc1.entry.js.map → p-e6dc3cd1.entry.js.map} +0 -0
- /package/dist/core/{p-7ff4632d.entry.js.map → p-e831277e.entry.js.map} +0 -0
- /package/dist/core/{p-e0730a5d.entry.js.map → p-eb7c589b.entry.js.map} +0 -0
- /package/dist/core/{p-47038ea3.entry.js.map → p-fd60eef7.entry.js.map} +0 -0
- /package/dist/core/{p-29afeb33.entry.js.map → p-fd9f3fd0.entry.js.map} +0 -0
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icToggleButtonCss","ToggleButton","this","loopAttributes","trackedAttributes","parentAttributes","el","parentElement","attributes","i","length","getNamedItem","attribute","name","loading","value","disabled","fullWidth","iconPlacement","variant","size","theme","monochrome","handleFocus","ev","stopImmediatePropagation","handleClick","icToggleChecked","emit","checked","watchDisabledHandler","removeDisabledFalse","componentWillLoad","isSlottedInGroup","componentDidLoad","onComponentRequiredPropUndefined","prop","accessibleLabel","label","propName","handleHostClick","e","render","h","Host","class","onFocus","toString","onClick","title","tooltipPlacement","isSlotUsed","slot"],"sources":["src/components/ic-toggle-button/ic-toggle-button.css?tag=ic-toggle-button&encapsulation=shadow","src/components/ic-toggle-button/ic-toggle-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP */\n:host {\n --toggle-button-border: var(--ic-toggle-button-unselected-border);\n --toggle-button-text-colour: var(--ic-toggle-button-unselected-text);\n --toggle-button-border-hover: var(--ic-toggle-button-unselected-border-hover);\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-unselected-text-hover\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-unselected-border-pressed\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-unselected-text-pressed\n );\n}\n\n:host(.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text);\n --toggle-button-border-hover: var(--ic-toggle-button-selected-border-hover);\n --toggle-button-text-colour-hover: var(--ic-toggle-button-selected-text);\n --toggle-button-border-active: var(\n --ic-toggle-button-selected-border-pressed\n );\n --toggle-button-text-colour-active: var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-monochrome) {\n --toggle-button-border: var(--ic-toggle-button-unselected-border-monochrome);\n --toggle-button-text-colour: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n --toggle-button-border-hover: var(\n --ic-toggle-button-unselected-border-hover-monochrome\n );\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-unselected-border-pressed-monochrome\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border-monochrome);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text-monochrome);\n --toggle-button-border-hover: var(\n --ic-toggle-button-selected-border-hover-monochrome\n );\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-selected-text-monochrome\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-selected-border-pressed-monochrome\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-selected-text-monochrome\n );\n}\n\n:host(.ic-toggle-button-disabled) {\n --toggle-button-border: var(--ic-toggle-button-unselected-border-disabled);\n --toggle-button-text-colour: var(--ic-toggle-button-unselected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome) {\n --toggle-button-border: var(\n --ic-toggle-button-unselected-border-disabled-monochrome\n );\n --toggle-button-text-colour: var(\n --ic-toggle-button-unselected-text-disabled-monochrome\n );\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border-disabled);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) {\n --toggle-button-border: var(\n --ic-toggle-button-selected-border-disabled-monochrome\n );\n --toggle-button-text-colour: var(\n --ic-toggle-button-selected-text-disabled-monochrome\n );\n}\n\n:host(.expand-toggle-group-child) ::part(button) {\n width: 100%;\n min-height: inherit;\n white-space: inherit;\n height: inherit;\n}\n\n:host ic-button {\n --icon-width: var(--ic-space-lg);\n --icon-height: var(--ic-space-lg);\n}\n\n:host(.expand-toggle-group-child) ic-button {\n min-width: 100%;\n min-height: 100%;\n white-space: normal;\n height: 100%;\n}\n\n:host(.expand-toggle-group-child) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-checked)\n ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n var(--ic-border-focus);\n}\n\n:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-dark),\n var(--ic-border-focus);\n}\n\n:host(:focus) {\n z-index: 1;\n}\n\n:host ::part(button) {\n border: var(--ic-border-width) solid var(--toggle-button-border);\n color: var(--toggle-button-text-colour);\n}\n\n:host ::part(button):hover {\n border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n color: var(--toggle-button-text-colour-hover);\n}\n\n:host ::part(button):active {\n border: var(--ic-border-width) solid var(--toggle-button-border-active);\n color: var(--toggle-button-text-colour-active);\n}\n\n:host(.ic-toggle-button-disabled) ::part(button) {\n border: var(--ic-space-1px) dashed var(--toggle-button-border);\n color: var(--toggle-button-text-colour);\n}\n\n:host(.ic-toggle-button-checked) ::part(button) {\n background-color: var(--ic-toggle-button-selected-background);\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),\n var(--ic-border-focus);\n}\n\n:host ::part(button):hover {\n background-color: var(--ic-toggle-button-unselected-background-hover);\n}\n\n:host ::part(button):active {\n background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):hover {\n background-color: var(--ic-toggle-button-selected-background-hover);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {\n background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):hover {\n background-color: var(\n --ic-toggle-button-unselected-background-hover-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):active {\n background-color: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button) {\n background-color: var(--ic-toggle-button-selected-background-monochrome);\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):hover {\n background-color: var(\n --ic-toggle-button-selected-background-hover-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):active {\n background-color: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-text),\n var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n ::part(button) {\n background-color: transparent;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n ::part(button)::before {\n background-image: radial-gradient(\n var(--ic-toggle-button-selected-background-disabled) 95%,\n white 20%\n );\n background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n ::part(button)::before {\n background-image: radial-gradient(\n var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,\n white 20%\n );\n background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-icon) ::part(button) {\n height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n width: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-toggle-button-icon) ::part(button):active {\n background-color: var(--ic-action-default-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {\n background-color: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active {\n background-color: var(--ic-action-light-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button) {\n height: var(--ic-space-xl);\n width: var(--ic-space-xl);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button) {\n height: var(--ic-space-xxl);\n width: var(--ic-space-xxl);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-selected-background-pressed\n );\n background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-loading) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-unselected-background-pressed\n );\n background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading)\n ::part(ic-loading-container) {\n --inner-color: var(--ic-toggle-button-loading-bar);\n}\n\n:host(.ic-toggle-button-loading) ::part(ic-loading-container) {\n --inner-color: var(--ic-toggle-button-selected-loading-bar);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome)\n ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n background-color: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n background-color: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n}\n\n@media (forced-colors: active) {\n :host(.ic-toggle-button-checked) ::part(button),\n :host(.ic-toggle-button-checked) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button) {\n background-color: GrayText;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-loading)\n ::part(button):hover {\n --loading-button-background: Highlight;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n h,\n Watch,\n} from \"@stencil/core\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n isSlottedInGroup,\n} from \"../../utils/helpers\";\nimport {\n IcSizes,\n IcThemeMode,\n IcIconPlacementOptions,\n IcButtonTooltipPlacement,\n} from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n tag: \"ic-toggle-button\",\n styleUrl: \"ic-toggle-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ToggleButton {\n @Element() el: HTMLIcToggleButtonElement;\n\n /**\n * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n */\n @Prop() accessibleLabel?: string;\n\n /**\n * If `true`, the toggle button will be in a checked state.\n */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /**\n * If `true`, the toggle button will be in disabled state.\n */\n @Prop({ mutable: true }) disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * If `true`, the toggle button will fill the width of the container.\n */\n @Prop({ mutable: true }) fullWidth?: boolean = false;\n\n /**\n * The placement of the icon in relation to the toggle button label.\n */\n @Prop() iconPlacement?: IcIconPlacementOptions = \"left\";\n\n /**\n * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the toggle button will be in loading state.\n */\n @Prop({ mutable: true }) loading?: boolean = false;\n\n /**\n * If `true`, the toggle button will display as black in the light theme, and white in dark theme.\n */\n @Prop({ mutable: true }) monochrome?: boolean = false;\n\n /**\n * The size of the toggle button to be displayed.\n */\n @Prop({ mutable: true }) size?: IcSizes = \"medium\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop({ mutable: true }) theme?: IcThemeMode = \"inherit\";\n\n /**\n * The position of the tooltip in relation to the toggle button.\n */\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n\n /**\n * The variant of the toggle button.\n */\n @Prop({ reflect: true, mutable: true }) variant: \"default\" | \"icon\" =\n \"default\";\n\n /**\n * Emitted when the user clicks a toggle button.\n */\n @Event() icToggleChecked: EventEmitter<{\n checked: boolean;\n }>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n if (isSlottedInGroup(this.el)) {\n this.loopAttributes();\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n {\n prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n },\n ],\n \"Toggle button\"\n );\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(e: Event): void {\n if (this.disabled) {\n e.stopImmediatePropagation();\n } else if (!this.loading) {\n this.checked = !this.checked;\n }\n }\n\n private loopAttributes = () => {\n const trackedAttributes: string[] = [\n \"loading\",\n \"disabled\",\n \"full-width\",\n \"icon-placement\",\n \"variant\",\n \"size\",\n \"theme\",\n \"monochrome\",\n ];\n const parentAttributes = this.el.parentElement.attributes;\n for (let i = 0; i < trackedAttributes.length; i++) {\n if (parentAttributes.getNamedItem(trackedAttributes[i]) !== null) {\n const attribute = parentAttributes.getNamedItem(trackedAttributes[i]);\n switch (attribute.name) {\n case trackedAttributes[0]:\n this.loading = attribute.value !== \"false\";\n break;\n case trackedAttributes[1]:\n this.disabled = attribute.value !== \"false\";\n break;\n case trackedAttributes[2]:\n this.fullWidth = attribute.value !== \"false\";\n break;\n case trackedAttributes[3]:\n this.iconPlacement = attribute.value as \"left\" | \"right\" | \"top\";\n break;\n case trackedAttributes[4]:\n this.variant = attribute.value as \"default\" | \"icon\";\n break;\n case trackedAttributes[5]:\n this.size = attribute.value as IcSizes;\n break;\n case trackedAttributes[6]:\n this.theme = attribute.value as IcThemeMode;\n break;\n case trackedAttributes[7]:\n this.monochrome = attribute.value !== \"false\";\n break;\n }\n }\n }\n };\n\n private handleFocus = (ev: FocusEvent) => {\n ev.stopImmediatePropagation();\n };\n\n private handleClick = (): void => {\n !this.loading &&\n !this.disabled &&\n this.icToggleChecked.emit({\n checked: this.checked,\n });\n };\n\n render() {\n return (\n <Host\n class={{\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n [\"ic-toggle-button-disabled\"]: this.disabled,\n [\"ic-toggle-button-checked\"]: this.checked,\n [\"ic-toggle-button-icon\"]: this.variant === \"icon\",\n [`ic-toggle-button-${this.size}`]: true,\n [\"ic-toggle-button-loading\"]: this.loading,\n [\"ic-toggle-button-monochrome\"]: this.monochrome,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n onFocus={this.handleFocus}\n >\n <ic-button\n aria-pressed={this.checked.toString()}\n variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n onClick={this.handleClick}\n title={this.accessibleLabel}\n aria-label={`${\n this.accessibleLabel ? this.accessibleLabel : this.label\n }, ${this.checked ? \"ticked\" : \"unticked\"}`}\n disabled={this.disabled}\n size={this.size}\n fullWidth={this.fullWidth}\n loading={this.loading}\n tooltipPlacement={this.tooltipPlacement}\n >\n {this.variant !== \"icon\" && this.label}\n <slot />\n {isSlotUsed(this.el, \"icon\") && (\n <slot name=\"icon\" slot={`${this.iconPlacement}-icon`}></slot>\n )}\n {isSlotUsed(this.el, \"badge\") && (\n <slot name=\"badge\" slot=\"badge\"></slot>\n )}\n </ic-button>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icRadioGroupCss","RadioGroup","this","resizeObserver","ADDITIONAL_FIELD","RADIO_HORIZONTAL","RADIO_VERTICAL","runResizeObserver","ResizeObserver","checkOrientation","observe","el","handleKeyDown","event","additionalFields","Array","from","querySelectorAll","activeEl","document","activeElement","length","radioOptions","map","slotHasContent","stopPropagation","key","getNextItemToSelect","selectedChild","click","preventDefault","currentItem","movingDown","numRadios","nextItem","disabled","addSlotChangeListener","radioContainer","addEventListener","setRadioOptions","setFirstRadioOptionTabIndex","value","setTabIndex","checkedValue","children","filter","tagName","forEach","radioOption","index","selected","name","groupLabel","label","initialOrientation","undefined","currentOrientation","watchDisabledHandler","newValue","removeDisabledFalse","orientationChangeHandler","orientation","watchThemeHandler","theme","disconnectedCallback","_a","disconnect","_b","removeEventListener","componentWillLoad","componentDidLoad","checkResizeObserver","onComponentRequiredPropUndefined","prop","propName","selectHandler","detail","target","selectedOption","parentElement","icChange","emit","radio","textFieldValue","querySelector","changeHandler","findIndex","totalWidth","isArray","clientWidth","i","arr","render","helperText","hideLabel","required","size","validationStatus","validationText","h","Host","onKeyDown","class","role","horizontal","ref","hasValidationStatus","ariaLiveMode","status","message"],"sources":["src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n\n --ic-input-label-text-color: var(--ic-radio-button-input-field-label);\n --ic-input-label-helper-text-color: var(\n --ic-radio-button-input-field-subtitle\n );\n --ic-input-validation-status-text-color: var(--ic-radio-button-state-text);\n --ic-input-validation-error: var(--ic-radio-button-state-icon-error);\n}\n\nic-input-label.error {\n --ic-input-label-text-color: var(--ic-radio-button-input-field-label-error);\n}\n\nic-input-label.disabled {\n --ic-input-label-text-color: var(\n --ic-radio-button-input-field-label-disabled\n );\n --ic-input-label-helper-text-color: var(\n --ic-radio-button-input-field-subtitle-disabled\n );\n}\n\nic-input-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small) ic-input-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-label ic-typography {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small) ic-input-label ic-typography {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host .radio-buttons-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xxs);\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container {\n gap: var(--ic-space-xxxs);\n}\n\n:host .radio-buttons-container.horizontal {\n display: flex;\n flex-direction: row;\n gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container.horizontal {\n gap: var(--ic-space-xl);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n slotHasContent,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n IcInformationStatusOrEmpty,\n IcOrientation,\n IcSizesNoLarge,\n IcThemeMode,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioContainer: HTMLDivElement;\n private radioOptions: HTMLIcRadioOptionElement[];\n private resizeObserver: ResizeObserver = null;\n private ADDITIONAL_FIELD = \"additional-field\";\n private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n @Element() el: HTMLIcRadioGroupElement;\n\n @State() checkedValue: string = \"\";\n @State() currentOrientation: IcOrientation;\n @State() initialOrientation: IcOrientation;\n @State() selectedChild: number = -1;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled: boolean = false;\n\n @Watch(\"disabled\")\n watchDisabledHandler(newValue: boolean): void {\n this.radioOptions.forEach(\n (radioOption) => (radioOption.disabled = newValue)\n );\n removeDisabledFalse(this.disabled, this.el);\n }\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 label for the radio group to be displayed.\n */\n @Prop() label!: string;\n\n /**\n * The name for the radio group to differentiate from other groups.\n */\n @Prop() name!: string;\n\n /**\n * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n */\n @Prop() orientation: IcOrientation = \"vertical\";\n\n /**\n * If `true`, the radio group will require a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * The size of the radio group component.\n */\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /**\n * The validation status - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /**\n * The validation text - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationText: string = \"\";\n\n @Watch(\"orientation\")\n orientationChangeHandler(): void {\n this.initialOrientation = this.orientation;\n this.checkOrientation();\n }\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(newValue: IcThemeMode): void {\n this.radioOptions.forEach((radioOption) => (radioOption.theme = newValue));\n }\n\n /**\n * Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.radioContainer?.removeEventListener(\n \"slotchange\",\n this.setRadioOptions\n );\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.orientationChangeHandler();\n this.currentOrientation = this.initialOrientation;\n }\n\n componentDidLoad(): void {\n this.setRadioOptions();\n checkResizeObserver(this.runResizeObserver);\n this.addSlotChangeListener();\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n\n this.watchThemeHandler(this.theme);\n }\n\n @Listen(\"icCheck\")\n selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n const selectedOption = target as HTMLIcRadioOptionElement;\n if (selectedOption.parentElement === this.el) {\n this.checkedValue = detail.value as string;\n this.icChange.emit({\n value: this.checkedValue,\n selectedOption: {\n radio: selectedOption,\n textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n },\n });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = selectedOption === radioOption;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n }\n }\n }\n\n @Listen(\"icSelectedChange\")\n changeHandler(): void {\n const selectedOption = this.radioOptions.findIndex(\n (radioOption) => radioOption.selected\n );\n if (selectedOption < 0) {\n this.setFirstRadioOptionTabIndex(0);\n this.selectedChild = selectedOption;\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOrientation();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkOrientation() {\n if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n let totalWidth = 0;\n if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n totalWidth += clientWidth;\n if (i < arr.length - 1) totalWidth += 40;\n });\n } else {\n totalWidth = 0;\n }\n\n if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n if (\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else {\n if (totalWidth >= this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else if (totalWidth < this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_HORIZONTAL;\n }\n }\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const additionalFields = Array.from(\n this.el.querySelectorAll<HTMLIcTextFieldElement>(\n 'ic-text-field[slot=\"additional-field\"]'\n )\n );\n const activeEl = document.activeElement;\n if (\n additionalFields.length > 0 &&\n this.radioOptions.map((el) =>\n slotHasContent(el, this.ADDITIONAL_FIELD)\n ) &&\n additionalFields.map((el) => el == activeEl)\n ) {\n return;\n }\n\n event.stopPropagation();\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].click();\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].click();\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private addSlotChangeListener = () => {\n this.radioContainer.addEventListener(\"slotchange\", this.setRadioOptions);\n };\n\n private setFirstRadioOptionTabIndex = (value: number) => {\n this.radioOptions[0].setTabIndex(value);\n };\n\n private setRadioOptions = () => {\n this.selectedChild = -1;\n this.checkedValue = \"\";\n this.radioOptions = Array.from(this.el.children).filter(\n (el) => el.tagName === \"IC-RADIO-OPTION\"\n ) as HTMLIcRadioOptionElement[];\n if (this.radioOptions.length > 0) {\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n if (this.disabled) {\n radioOption.disabled = true;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n if (\n this.initialOrientation === this.RADIO_HORIZONTAL &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n }\n }\n };\n\n render() {\n const {\n currentOrientation,\n disabled,\n handleKeyDown,\n helperText,\n hideLabel,\n label,\n required,\n size,\n validationStatus,\n validationText,\n theme,\n } = this;\n\n return (\n <Host\n onKeyDown={handleKeyDown}\n class={{\n \"ic-radio-group-small\": size === \"small\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div\n role=\"radiogroup\"\n aria-label={`${label}${required ? \", required\" : \"\"}`}\n >\n {!hideLabel && (\n <ic-input-label\n class={{ [`${validationStatus}`]: true, [\"disabled\"]: disabled }}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n ></ic-input-label>\n )}\n <div\n class={{\n \"radio-buttons-container\": true,\n horizontal: currentOrientation === this.RADIO_HORIZONTAL,\n }}\n ref={(el) => (this.radioContainer = el)}\n >\n <slot></slot>\n </div>\n </div>\n {hasValidationStatus(validationStatus, disabled) && (\n <ic-input-validation\n ariaLiveMode=\"polite\"\n status={validationStatus}\n message={validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icLinkCss","Link","this","inheritedAttributes","hostMutationObserver","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","IC_INHERITED_ARIA","includes","el","getAttribute","forceUpdate","componentWillLoad","inheritAttributes","updateTheme","setAttribute","componentDidLoad","MutationObserver","observe","attributes","disconnectedCallback","_a","disconnect","brandChangeHandler","detail","mode","setFocus","shadowRoot","querySelector","focus","theme","getBrandFromContext","IcBrandForegroundEnum","Default","monochrome","Light","Dark","hasRouterSlot","routerSlot","ariaLabel","textContent","render","download","href","hreflang","referrerpolicy","rel","target","h","Host","class","name","Object","assign","hrefLang","referrerPolicy","tabindex","part","innerHTML","OpenInNew"],"sources":["src/components/ic-link/ic-link.css?tag=ic-link&encapsulation=shadow","src/components/ic-link/ic-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-link) .link,\n:host(.ic-link) ::slotted(a) {\n color: var(--ic-link-text);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n transition: var(--ic-easing-transition-fast);\n}\n\n:host(.ic-link) .link:visited,\n:host(.ic-link) ::slotted(a:visited),\n:host(.ic-link) .link:visited:hover,\n:host(.ic-link) ::slotted(a:visited:hover),\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:visited:active),\n:host(.ic-link) .link:visited:focus,\n:host(.ic-link) ::slotted(a:visited:focus) {\n color: var(--ic-link-text-visited);\n}\n\n:host(.ic-link) .link:hover {\n color: var(--ic-link-text-hover);\n}\n\n:host(.ic-link) .link:active {\n color: var(--ic-link-text-pressed);\n}\n\n:host(.ic-link) .link:focus {\n color: var(--ic-link-text-focused);\n}\n\n:host(.ic-link-monochrome) .link:hover {\n color: var(--ic-link-text-hover-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:active {\n color: var(--ic-link-text-pressed-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:focus {\n color: var(--ic-link-text-focused-monochrome);\n}\n\n:host(.ic-link) .link:hover,\n:host(.ic-link) .link:focus,\n:host(.ic-link) ::slotted(a:hover),\n:host(.ic-link) ::slotted(a:focus) {\n outline: none;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n@supports (text-underline-offset: 10%) {\n :host(.ic-link) .link:hover,\n :host(.ic-link) .link:focus,\n :host(.ic-link) ::slotted(a:hover),\n :host(.ic-link) ::slotted(a:focus) {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 10%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n:host(.ic-link) .link:active,\n:host(.ic-link) .link:focus:active,\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:active),\n:host(.ic-link) ::slotted(a:focus:active),\n:host(.ic-link) ::slotted(a:visited:active) {\n text-decoration: none;\n}\n\n.ic-link-open-in-new-icon {\n vertical-align: middle;\n margin-left: var(--ic-space-xxs);\n}\n\n.link > .ic-link-open-in-new-icon {\n fill: var(--ic-link-icon-launch);\n}\n\n.ic-link-open-in-new-icon > svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n fill: currentcolor;\n}\n\n.link:visited > .ic-link-open-in-new-icon {\n fill: var(--ic-link-icon-launch-visited);\n}\n\n:host(.ic-link-monochrome) .link,\n:host(.ic-link-monochrome) ::slotted(a) {\n color: var(--ic-link-text-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited,\n:host(.ic-link-monochrome) ::slotted(a:visited),\n:host(.ic-link-monochrome) .link:visited:hover,\n:host(.ic-link-monochrome) ::slotted(a:visited:hover),\n:host(.ic-link-monochrome) .link:visited:active,\n:host(.ic-link-monochrome) ::slotted(a:visited:active),\n:host(.ic-link-monochrome) .link:visited:focus,\n:host(.ic-link-monochrome) ::slotted(a:visited:focus) {\n color: var(--ic-link-text-visited-monochrome);\n}\n\n:host(.ic-link-monochrome) .link > .ic-link-open-in-new-icon {\n fill: var(--ic-link-icon-launch-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited > .ic-link-open-in-new-icon {\n fill: var(--ic-link-icon-launch-visited-monochrome);\n}\n\n:host(.breadcrumb-link) .link {\n display: var(--breadcrumb-link-display);\n align-items: var(--breadcrumb-link-align-items);\n gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .link ::slotted(.back-icon) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n font-weight: normal;\n color: inherit;\n text-decoration: none;\n display: flex;\n align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n outline: var(--ic-hc-focus-outline);\n text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .link:visited {\n color: var(--ic-color-text-primary);\n}\n","import {\n Component,\n Element,\n Prop,\n h,\n Host,\n Listen,\n Method,\n forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getBrandFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n tag: \"ic-link\",\n styleUrl: \"ic-link.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Link {\n private inheritedAttributes: { [k: string]: string } = {};\n private routerSlot: HTMLElement;\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcLinkElement;\n\n /**\n * If `true`, the user can save the linked URL instead of navigating to it.\n */\n @Prop() download?: string | boolean = false;\n\n /**\n * The URL that the link points to.\n */\n @Prop() href?: string = null;\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n\n /**\n * If `true`, the link will display as black in the light theme, and white in the dark theme.\n */\n @Prop({ mutable: true }) monochrome?: boolean = false;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop({ mutable: true }) theme?: IcThemeMode = \"inherit\";\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n this.updateTheme();\n this.el.setAttribute(\"exportparts\", \"link\");\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.updateTheme(detail.mode);\n }\n\n /**\n * Sets focus on the link.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot.querySelector(\"a\")?.focus();\n }\n\n private updateTheme(mode: IcBrandForeground = null): void {\n const theme = getBrandFromContext(this.el, mode);\n\n if (theme !== IcBrandForegroundEnum.Default) {\n this.monochrome = true;\n this.theme =\n theme === IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n }\n }\n\n private hasRouterSlot(): boolean {\n this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n if (this.routerSlot) {\n this.routerSlot.ariaLabel = this.routerSlot.textContent;\n }\n return !!this.routerSlot;\n }\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (IC_INHERITED_ARIA.includes(attributeName)) {\n this.inheritedAttributes[attributeName] =\n this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n download,\n href,\n hreflang,\n referrerpolicy,\n rel,\n target,\n monochrome,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [\"ic-link\"]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [\"ic-link-monochrome\"]: monochrome,\n }}\n >\n {this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <a\n class={{\n [\"link\"]: href !== null,\n }}\n download={download !== false ? download : null}\n href={href}\n hrefLang={hreflang}\n referrerPolicy={referrerpolicy}\n rel={rel}\n target={target}\n tabindex={href !== null ? \"0\" : \"-1\"}\n {...this.inheritedAttributes}\n part=\"link\"\n >\n <slot />\n {target === \"_blank\" && (\n <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"6JAAA,MAAMA,EAAY,oxL,MCgCLC,EAAI,M,yBACPC,KAAAC,oBAA+C,GAE/CD,KAAAE,qBAAyC,KA+FzCF,KAAAG,qBAAwBC,IAC9B,IAAIC,EAAuB,MAC3BD,EAAaE,SAAQ,EAAGC,oBACtB,GAAIC,EAAkBC,SAASF,GAAgB,CAC7CP,KAAKC,oBAAoBM,GACvBP,KAAKU,GAAGC,aAAaJ,GACvBF,EAAuB,I,KAG3B,GAAIA,EAAsB,CACxBO,EAAYZ,K,iBAlGsB,M,UAKd,K,wCAUwB,M,kFAoBD,S,CAE/C,iBAAAa,GACEb,KAAKC,oBAAsBa,EAAkBd,KAAKU,GAAIF,GACtDR,KAAKe,cACLf,KAAKU,GAAGM,aAAa,cAAe,O,CAGtC,gBAAAC,GACEjB,KAAKE,qBAAuB,IAAIgB,iBAAiBlB,KAAKG,sBACtDH,KAAKE,qBAAqBiB,QAAQnB,KAAKU,GAAI,CACzCU,WAAY,M,CAIhB,oBAAAC,G,OACEC,EAAAtB,KAAKE,wBAAoB,MAAAoB,SAAA,SAAAA,EAAEC,Y,CAI7B,kBAAAC,EAAmBC,OAAEA,IACnBzB,KAAKe,YAAYU,EAAOC,K,CAO1B,cAAMC,G,OACJL,EAAAtB,KAAKU,GAAGkB,WAAWC,cAAc,QAAI,MAAAP,SAAA,SAAAA,EAAEQ,O,CAGjC,WAAAf,CAAYW,EAA0B,MAC5C,MAAMK,EAAQC,EAAoBhC,KAAKU,GAAIgB,GAE3C,GAAIK,IAAUE,EAAsBC,QAAS,CAC3ClC,KAAKmC,WAAa,KAClBnC,KAAK+B,MACHA,IAAUE,EAAsBG,MAC5BH,EAAsBI,KACtBJ,EAAsBG,K,EAIxB,aAAAE,GACNtC,KAAKuC,WAAavC,KAAKU,GAAGmB,cAAc,wBACxC,GAAI7B,KAAKuC,WAAY,CACnBvC,KAAKuC,WAAWC,UAAYxC,KAAKuC,WAAWE,W,CAE9C,QAASzC,KAAKuC,U,CAkBhB,MAAAG,GACE,MAAMC,SACJA,EAAQC,KACRA,EAAIC,SACJA,EAAQC,eACRA,EAAcC,IACdA,EAAGC,OACHA,EAAMb,WACNA,EAAUJ,MACVA,GACE/B,KAEJ,OACEiD,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,WAAY,KACb,CAAC,YAAYpB,KAAUA,IAAU,UACjC,CAAC,sBAAuBI,IAGzBnC,KAAKsC,gBACJW,EAAA,QAAMG,KAAK,gBAEXH,EAAA,IAAAI,OAAAC,OAAA,CACEH,MAAO,CACL,CAAC,QAASP,IAAS,MAErBD,SAAUA,IAAa,MAAQA,EAAW,KAC1CC,KAAMA,EACNW,SAAUV,EACVW,eAAgBV,EAChBC,IAAKA,EACLC,OAAQA,EACRS,SAAUb,IAAS,KAAO,IAAM,MAC5B5C,KAAKC,oBAAmB,CAC5ByD,KAAK,SAELT,EAAA,aACCD,IAAW,UACVC,EAAA,QAAME,MAAM,2BAA2BQ,UAAWC,K"}
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|