npm - @ukic/web-components - Versions diffs - 2.31.0 → 2.32.0 - Mend

@ukic/web-components 2.31.0 → 2.32.0

Files changed (89) hide show

package/dist/components/ic-button2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-button2.js","mappings":"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","names":[],"sources":["src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","src/components/ic-button/ic-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --min-width: Minimum width of the button.\n* @prop --height: The height of the button.\n/\n\n:host {\n display: inline-block;\n position: relative;\n\n --button-default: var(--ic-action-default);\n --button-default-hover: var(--ic-action-default-hover);\n --button-default-active: var(--ic-action-default-active);\n --button-default-background-hover: var(--ic-action-default-bg-hover);\n --button-default-background-active: var(--ic-action-default-bg-active);\n --icon-width: 100%;\n --icon-height: 100%;\n}\n\n.button,\n::slotted(a) {\n font-family: var(--ic-font-body-family);\n text-decoration: none;\n font-weight: 600;\n font-size: 0.875rem;\n transition: var(--ic-easing-transition-fast);\n border-radius: var(--ic-border-radius);\n min-width: var(--min-width, 6.25rem);\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background: none;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n vertical-align: middle;\n}\n\n:host(.with-badge) .button {\n border-radius: 0.2188rem;\n}\n\n.button:hover,\n::slotted(a:hover) {\n cursor: pointer;\n}\n\n.button:focus,\n::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible,\n::slotted(a:focus-visible) {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.dark) .button,\n:host(.dark) ::slotted(a) {\n --button-default: var(--ic-action-dark);\n --button-default-hover: var(--ic-action-dark);\n --button-default-active: var(--ic-action-dark);\n --button-default-background-hover: var(--ic-action-dark-bg-hover);\n --button-default-background-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.light) .button,\n:host(.light) ::slotted(a) {\n --button-default: var(--ic-action-light);\n --button-default-hover: var(--ic-action-light);\n --button-default-active: var(--ic-action-light);\n --button-default-background-hover: var(--ic-action-light-bg-hover);\n --button-default-background-active: var(--ic-action-light-bg-active);\n}\n\n:host(.white-background) .button,\n:host(.white-background) ::slotted(a) {\n --button-default-background-hover: var(--ic-action-default-bg-hover-no-alpha);\n --button-default-background-active: var(\n --ic-action-default-bg-active-no-alpha\n );\n\n background-color: var(--ic-architectural-white);\n}\n\n:host(.white-background.dark) .button,\n:host(.white-background.dark) ::slotted(a) {\n --button-default-background-hover: var(--ic-action-dark-bg-hover-no-alpha);\n --button-default-background-active: var(--ic-action-dark-bg-active-no-alpha);\n}\n\n:host(.button-variant-primary.light) .button,\n:host(.button-variant-primary.light) ::slotted(a) {\n color: var(--ic-color-primary-text);\n\n --button-default-hover: var(--ic-action-light-hover);\n --button-default-active: var(--ic-action-light-active);\n}\n\n:host(.button-variant-primary.dark) .button,\n:host(.button-variant-primary.dark) ::slotted(a) {\n --button-default-hover: var(--ic-action-dark-hover);\n --button-default-active: var(--ic-action-dark-active);\n}\n\n:host(.disabled),\n:host(.disabled) .button,\n:host(.disabled) ::slotted(a),\n:host(.loading),\n:host(.loading) .button {\n pointer-events: none;\n}\n\n:host(.top-icon) .button {\n flex-direction: column;\n\n --height: fit-content;\n}\n\n:host(.top-icon) .button .icon-container {\n margin-right: 0;\n}\n\n/ Variants /\n\n/ Primary /\n\n:host(.button-variant-primary) .button,\n:host(.button-variant-primary) ::slotted(a) {\n color: var(--ic-color-white-text);\n background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover {\n background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary.loading) .button,\n:host(.button-variant-primary) .button:active {\n background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary.disabled) .button,\n:host(.button-variant-primary.disabled) ::slotted(a) {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button,\n:host(.button-variant-primary.light.disabled) ::slotted(a) {\n background: var(--ic-architectural-600);\n color: var(--ic-architectural-500);\n}\n\n/ Secondary /\n\n:host(.button-variant-secondary) .button,\n:host(.button-variant-secondary) ::slotted(a) {\n border: var(--ic-border-width) solid var(--button-default);\n color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover,\n:host(.button-variant-secondary) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover);\n border-color: var(--button-default-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-secondary) .button:active,\n:host(.button-variant-secondary) ::slotted(a:active),\n:host(.button-variant-secondary.loading) .button {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) ::slotted(a) {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) ::slotted(a) {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n}\n\n/ Tertiary /\n\n:host(.button-variant-tertiary) .button,\n:host(.button-variant-tertiary) ::slotted(a) {\n color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover,\n:host(.button-variant-tertiary) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active,\n:host(.button-variant-tertiary) ::slotted(a:active),\n:host(.button-variant-tertiary.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) ::slotted(a) {\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) ::slotted(a) {\n color: var(--ic-architectural-500);\n}\n\n/ Destructive /\n\n:host(.button-variant-destructive) .button,\n:host(.button-variant-destructive) ::slotted(a) {\n color: var(--ic-color-white-text);\n background-color: var(--ic-action-destructive);\n text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover {\n background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active,\n:host(.button-variant-destructive.loading) .button {\n background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-destructive.disabled) .button,\n:host(.button-variant-destructive.disabled) ::slotted(a) {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n/ Icon /\n\n:host(.button-variant-icon) .button,\n:host(.button-variant-icon) ::slotted(a) {\n color: var(--button-default);\n min-width: 0;\n gap: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon) .button:hover,\n:host(.button-variant-icon) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon) ::slotted(a:active:not(:focus)),\n:host(.button-variant-icon.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) ::slotted(a) {\n color: var(--ic-architectural-300);\n background: none;\n}\n\n/*********************\n Icon Variants\n **********************/\n\n/ Icon-primary /\n\n:host(.button-variant-icon-primary) .button,\n:host(.button-variant-icon-primary) ::slotted(a) {\n color: var(--ic-color-white-text);\n background-color: var(--button-default);\n min-width: 0;\n gap: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon-primary) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon-primary) .button:hover,\n:host(.button-variant-icon-primary) ::slotted(a:hover) {\n background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon-primary) .button:active,\n:host(.button-variant-icon-primary) ::slotted(a:active),\n:host(.button-variant-icon-primary.loading) .button {\n background: var(--button-default-active);\n}\n\n:host(.button-variant-icon-primary.loading) .button ic-loading-indicator {\n --inner-color: var(--ic-architectural-white);\n}\n\n:host(.button-variant-icon-primary.disabled) .button,\n:host(.button-variant-icon-primary.disabled) ::slotted(a) {\n color: var(--ic-architectural-300);\n background: var(--ic-architectural-200);\n}\n\n:host(.button-variant-icon-primary.light) .button,\n:host(.button-variant-icon-primary.light) ::slotted(a) {\n color: var(--ic-color-primary-text);\n}\n\n:host(.button-variant-icon-primary.light) .button:hover,\n:host(.button-variant-icon-primary.light) ::slotted(a:hover) {\n background: var(--ic-action-light-hover);\n}\n\n:host(.button-variant-icon-primary.light) .button:active,\n:host(.button-variant-icon-primary.light) ::slotted(a:active),\n:host(.button-variant-icon-primary.light.loading) .button,\n:host(.button-variant-icon-primary.light.loading) ::slotted(a) {\n background: var(--ic-action-light-active);\n}\n\n:host(.button-variant-icon-primary.dark) .button:hover,\n:host(.button-variant-icon-primary.dark) ::slotted(a:hover) {\n background: var(--ic-action-dark-hover);\n}\n\n:host(.button-variant-icon-primary.dark) .button:active,\n:host(.button-variant-icon-primary.dark) ::slotted(a:active),\n:host(.button-variant-icon-primary.dark.loading) .button,\n:host(.button-variant-icon-primary.dark.loading) ::slotted(a) {\n background: var(--ic-action-dark-active);\n}\n\n/ Icon-secondary /\n\n:host(.button-variant-icon-secondary) .button,\n:host(.button-variant-icon-secondary) ::slotted(a) {\n border: var(--ic-border-width) solid var(--button-default);\n color: var(--button-default);\n min-width: 0;\n gap: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon-secondary) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon-secondary) .button:hover,\n:host(.button-variant-icon-secondary) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover);\n border-color: var(--button-default-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon-secondary) .button:active,\n:host(.button-variant-icon-secondary) ::slotted(a:active),\n:host(.button-variant-icon-secondary.loading) .button {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-icon-secondary.disabled) .button,\n:host(.button-variant-icon-secondary.disabled) .button:hover,\n:host(.button-variant-icon-secondary.disabled) .button:active,\n:host(.button-variant-icon-secondary.disabled) ::slotted(a),\n:host(.button-variant-icon-secondary.disabled) ::slotted(a:hover),\n:host(.button-variant-icon-secondary.disabled) ::slotted(a:active) {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-icon-secondary.light.disabled) .button,\n:host(.button-variant-icon-secondary.light.disabled) .button:hover,\n:host(.button-variant-icon-secondary.light.disabled) .button:active,\n:host(.button-variant-icon-secondary.light.disabled) ::slotted(a),\n:host(.button-variant-icon-secondary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-icon-secondary.light.disabled) ::slotted(a:active) {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n}\n\n/ Icon-tertiary /\n\n:host(.button-variant-icon-tertiary) .button,\n:host(.button-variant-icon-tertiary) ::slotted(a) {\n color: var(--button-default);\n min-width: 0;\n gap: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon-tertiary) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon-tertiary) .button:hover,\n:host(.button-variant-icon-tertiary) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon-tertiary) .button:active,\n:host(.button-variant-icon-tertiary) ::slotted(a:active),\n:host(.button-variant-icon-tertiary.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-icon-tertiary.disabled) .button,\n:host(.button-variant-icon-tertiary.disabled) .button:hover,\n:host(.button-variant-icon-tertiary.disabled) .button:active,\n:host(.button-variant-icon-tertiary.disabled) ::slotted(a),\n:host(.button-variant-icon-tertiary.disabled) ::slotted(a:hover),\n:host(.button-variant-icon-tertiary.disabled) ::slotted(a:active) {\n color: var(--ic-architectural-300);\n background: none;\n}\n\n/ Icon-destructive /\n\n:host(.button-variant-icon-destructive) .button,\n:host(.button-variant-icon-destructive) ::slotted(a) {\n color: var(--ic-color-white-text);\n background-color: var(--ic-action-destructive);\n min-width: 0;\n gap: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon-destructive) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon-destructive) .button:hover,\n:host(.button-variant-icon-destructive) ::slotted(a:hover) {\n background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-icon-destructive) .button:active,\n:host(.button-variant-icon-destructive) ::slotted(a:active),\n:host(.button-variant-icon-destructive.loading) .button {\n background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-icon-destructive.loading) .button ic-loading-indicator {\n --inner-color: var(--ic-architectural-white);\n}\n\n:host(.button-variant-icon-destructive.disabled) .button,\n:host(.button-variant-icon-destructive.disabled) .button:hover,\n:host(.button-variant-icon-destructive.disabled) .button:active,\n:host(.button-variant-icon-destructive.disabled) ::slotted(a),\n:host(.button-variant-icon-destructive.disabled) ::slotted(a:hover),\n:host(.button-variant-icon-destructive.disabled) ::slotted(a:active) {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n/ Sizing /\n\n:host(.button-size-default) .button {\n height: var(--height, 2.5rem);\n padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-small) .button {\n height: var(--height, var(--ic-space-xl));\n padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.button-size-large) .button {\n height: var(--height, var(--ic-space-xxl));\n padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.button-size-default.button-variant-icon) .button,\n:host(.button-size-default.button-variant-icon-primary) .button,\n:host(.button-size-default.button-variant-icon-secondary) .button,\n:host(.button-size-default.button-variant-icon-tertiary) .button,\n:host(.button-size-default.button-variant-icon-destructive) .button,\n:host(.button-size-default.button-variant-icon-primary) ::slotted(a),\n:host(.button-size-default.button-variant-icon-secondary) ::slotted(a),\n:host(.button-size-default.button-variant-icon-tertiary) ::slotted(a),\n:host(.button-size-default.button-variant-icon-destructive) ::slotted(a),\n:host(.button-size-default.button-variant-icon) ::slotted(a) {\n height: var(--height, var(--ic-space-xl));\n width: var(--ic-space-xl);\n padding: 0.375rem;\n}\n\n:host(.button-size-small.button-variant-icon) .button,\n:host(.button-size-small.button-variant-icon-primary) .button,\n:host(.button-size-small.button-variant-icon-secondary) .button,\n:host(.button-size-small.button-variant-icon-tertiary) .button,\n:host(.button-size-small.button-variant-icon-destructive) .button,\n:host(.button-size-small.button-variant-icon-primary) ::slotted(a),\n:host(.button-size-small.button-variant-icon-secondary) ::slotted(a),\n:host(.button-size-small.button-variant-icon-tertiary) ::slotted(a),\n:host(.button-size-small.button-variant-icon-destructive) ::slotted(a),\n:host(.button-size-small.button-variant-icon) ::slotted(a) {\n height: var(--height, var(--ic-space-lg));\n width: var(--ic-space-lg);\n padding: var(--ic-space-xxs);\n}\n\n:host(.button-size-large.button-variant-icon) .button,\n:host(.button-size-large.button-variant-icon-primary) .button,\n:host(.button-size-large.button-variant-icon-secondary) .button,\n:host(.button-size-large.button-variant-icon-tertiary) .button,\n:host(.button-size-large.button-variant-icon-destructive) .button,\n:host(.button-size-large.button-variant-icon-primary) ::slotted(a),\n:host(.button-size-large.button-variant-icon-secondary) ::slotted(a),\n:host(.button-size-large.button-variant-icon-tertiary) ::slotted(a),\n:host(.button-size-large.button-variant-icon-destructive) ::slotted(a),\n:host(.button-size-large.button-variant-icon) ::slotted(a) {\n height: var(--height, 2.5rem);\n width: 2.5rem;\n padding: var(--ic-space-xs);\n}\n\n/ Width /\n:host(.full-width),\n:host(.full-width) .button,\n:host(.full-width) ::slotted(a) {\n width: 100%;\n}\n\n/ Loading /\n\ndiv.loading-container {\n position: relative;\n align-items: center;\n width: 100%;\n}\n\nic-loading-indicator {\n --outer-color: transparent;\n}\n\n@keyframes loading-animation {\n 0% {\n width: 0%;\n left: 0%;\n }\n\n 25% {\n width: 0%;\n left: 0%;\n opacity: 0;\n }\n\n 50% {\n width: 100%;\n left: 0%;\n opacity: 1;\n }\n\n 75% {\n width: 0%;\n left: 100%;\n }\n\n 100% {\n width: 0%;\n left: 100%;\n opacity: 0;\n }\n}\n\n/ Icons /\n\ndiv.icon-container {\n box-sizing: border-box;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: var(--ic-space-xs);\n}\n\ndiv.right-icon {\n margin-right: auto;\n margin-left: var(--ic-space-xs);\n}\n\n:host(.full-width) .right-icon {\n margin-right: var(--ic-space-xs);\n}\n\n::slotted(:not(ic-badge)) {\n width: var(--icon-width) !important;\n height: var(--icon-height) !important;\n fill: currentcolor !important;\n pointer-events: none;\n}\n\n:host(.button-variant-icon) .button .icon-container {\n margin: 0;\n pointer-events: none;\n}\n\n/* SEARCH /\n\n:host(.search-submit-button) ::slotted(svg) {\n --icon-height: 1.25rem;\n --icon-width: 1.25rem;\n}\n\n:host(.search-submit-button-small) ::slotted(svg) {\n --icon-height: 1rem;\n --icon-width: 1rem;\n}\n\n:host(.clear-button) {\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus,\n:host(.calendar-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n box-shadow: none;\n background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) {\n display: flex;\n align-items: center;\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n --icon-height: 0.875rem;\n --icon-width: 0.875rem;\n}\n\n:host(.popout-menu-button) .button {\n height: var(--height);\n justify-content: left;\n border-radius: 0;\n white-space: pre-line;\n text-align: start;\n}\n\n:host(.popout-menu-button) div.icon-container {\n flex: none;\n}\n\n:host(.popout-menu-button) .button:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n display: none;\n}\n\n:host .ic-tooltip {\n display: block;\n}\n\n/ Dropdown /\n:host .arrow-dropdown {\n margin-top: auto;\n}\n\n:host .dropdown-expanded {\n transform: rotate(180deg);\n margin-bottom: var(--ic-space-xxxs);\n}\n\n:host(.dropdown-no-icon) .button {\n padding-right: var(--ic-space-xs);\n}\n\n/ Slotted router item /\nslot[name=\"router-item\"]::slotted(a) {\n pointer-events: all;\n}\n\n::slotted(a) {\n font-size: 0.875rem !important;\n border: none !important;\n vertical-align: middle !important;\n}\n\n:host(.white-background) ::slotted(a) {\n background-color: var(--ic-architectural-white) !important;\n}\n\n:host(.button-variant-primary) ::slotted(a) {\n background-color: var(--button-default) !important;\n}\n\n:host(.button-variant-primary) ::slotted(a:hover) {\n background-color: var(--button-default-hover) !important;\n}\n\n:host(.button-variant-primary) ::slotted(a:active) {\n background-color: var(--button-default-active) !important;\n}\n\n:host(.button-variant-primary.disabled) ::slotted(a),\n:host(.button-variant-destructive.disabled) ::slotted(a) {\n background: var(--ic-architectural-200) !important;\n}\n\n:host(.button-variant-primary.light.disabled) ::slotted(a) {\n background: var(--ic-architectural-600) !important;\n}\n\n:host(.button-variant-secondary) ::slotted(a) {\n border: var(--ic-border-width) solid var(--button-default) !important;\n}\n\n:host(.button-variant-secondary) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover) !important;\n border-color: var(--button-default-hover) !important;\n}\n\n:host(.button-variant-secondary) ::slotted(a:active) {\n border-color: var(--button-default-active) !important;\n background-color: var(--button-default-background-active) !important;\n}\n\n:host(.button-variant-secondary.disabled) ::slotted(a),\n:host(.button-variant-secondary.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.disabled) ::slotted(a:active),\n:host(.button-variant-tertiary.disabled) ::slotted(a),\n:host(.button-variant-tertiary.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.disabled) ::slotted(a:active) {\n border-color: var(--ic-architectural-300) !important;\n background: none !important;\n}\n\n:host(.button-variant-secondary.light.disabled) ::slotted(a),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:active),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:active) {\n border-color: var(--ic-architectural-500) !important;\n}\n\n:host(.button-variant-tertiary) ::slotted(a:hover),\n:host(.button-variant-icon) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover) !important;\n}\n\n:host(.button-variant-tertiary) ::slotted(a:active:not(:focus)),\n:host(.button-variant-tertiary) ::slotted(a:active:focus),\n:host(.button-variant-tertiary) ::slotted(a:active),\n:host(.button-variant-icon) ::slotted(a:active:not(:focus)) {\n background-color: var(--button-default-background-active) !important;\n}\n\n:host(.button-variant-icon.disabled) ::slotted(a),\n:host(.button-variant-icon.disabled) ::slotted(a:hover),\n:host(.button-variant-icon.disabled) ::slotted(a:active) {\n background: none !important;\n}\n\n:host(.button-variant-destructive) ::slotted(a) {\n background-color: var(--ic-action-destructive) !important;\n}\n\n:host(.button-variant-destructive) ::slotted(a:hover) {\n background-color: var(--ic-action-destructive-hover) !important;\n}\n\n:host(.button-variant-destructive) ::slotted(a:active) {\n background-color: var(--ic-action-destructive-active) !important;\n}\n\n:host(.button-size-default) ::slotted(a) {\n height: var(--height, 2.5rem) !important;\n padding: var(--ic-space-xs) var(--ic-space-md) !important;\n}\n\n:host(.button-size-small) ::slotted(a) {\n height: var(--height, var(--ic-space-xl)) !important;\n padding: var(--ic-space-xxs) var(--ic-space-md) !important;\n}\n\n:host(.button-size-large) ::slotted(a) {\n height: var(--height, var(--ic-space-xxl)) !important;\n padding: var(--ic-space-sm) var(--ic-space-md) !important;\n}\n\n:host(.button-size-default.button-variant-icon) ::slotted(a) {\n height: var(--height, var(--ic-space-xl)) !important;\n padding: 0.375rem !important;\n}\n\n:host(.button-size-small.button-variant-icon) ::slotted(a) {\n padding: var(--ic-space-xxs) !important;\n}\n\n:host(.button-size-large.button-variant-icon) ::slotted(a) {\n padding: var(--ic-space-xs) !important;\n}\n\n/ High Contrast /\n@media (forced-colors: active) {\n .button,\n ::slotted(a) {\n border: 0.125rem solid transparent !important;\n }\n}\n\n/ Pagination /\n\n:host(.flip) ::slotted(svg) {\n transform: scaleX(-1);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n State,\n forceUpdate,\n h,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n getThemeFromContext,\n inheritAttributes,\n isSlotUsed,\n removeDisabledFalse,\n renderFileHiddenInput,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcButtonTypes,\n IcButtonVariants,\n IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n IcSizes,\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet buttonIds = 0;\n\n/\n * @slot icon - Deprecated. This slot should not be used anymore. Use left-icon or right-icon slot instead.\n * @slot left-icon - Content will be placed to the left of the button label.\n * @slot right-icon - Content will be placed to the right of the button label.\n * @slot top-icon - Content will be placed above the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n * @slot router-item - Handle routing by nesting your routes in this slot. Setting loading to true will have no impact on this slot.\n /\n@Component({\n tag: \"ic-button\",\n styleUrl: \"ic-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Button {\n private buttonEl: HTMLElement;\n private buttonIdNum = buttonIds++;\n private hasTooltip: boolean = false;\n private id: string;\n private inheritedAttributes: { [k: string]: string } = {};\n private describedbyEl: HTMLElement = null;\n private describedById: string = null;\n private mutationObserver: MutationObserver = null;\n private hostMutationObserver: MutationObserver = null;\n private routerSlot: HTMLElement;\n\n @Element() el: HTMLIcButtonElement;\n\n @State() ariaLabel: string = null;\n @State() describedByContent: string = null;\n @State() title: string = null;\n\n /\n If `fileUpload` is set to `true`, this is the accepted list of file types.\n /\n @Prop() accept?: string = \"\";\n\n /*\n The appearance of the button, e.g. dark, light, or the default.\n /\n @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n /\n @internal Used to identify any related child component\n /\n @Prop() ariaControlsId: string \| boolean;\n\n /\n @internal Used to identify any related child component\n /\n @Prop() ariaOwnsId: string \| boolean;\n\n /\n If `true`, the button will be in disabled state.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n /\n @Prop() disableTooltip?: boolean = false;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n\n /\n If `true`, the button will show a dropdown icon.\n /\n @Prop() dropdown?: boolean = false;\n\n /\n If `true`, the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true.\n /\n @Prop({ mutable: true, reflect: true }) dropdownExpanded?: boolean = false;\n\n /\n If `true`, when the button is clicked the native file explorer will be launched.\n /\n @Prop() fileUpload?: boolean = false;\n\n /\n The name of the control for the file input, which is submitted with the form data.\n /\n @Prop() fileInputName: string = `ic-button-file-upload-input-${buttonIds++}`;\n\n /\n The <form> element to associate the button with.\n /\n @Prop() form?: string;\n\n /\n The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner.\n /\n @Prop() formaction?: string;\n\n /\n The way the submitted form data is encoded.\n /\n @Prop() formenctype?: string;\n\n /\n The HTTP method used to submit the form.\n /\n @Prop() formmethod?: string;\n\n /\n If `true`, the form will not be validated when submitted.\n /\n @Prop() formnovalidate?: boolean;\n\n /\n The place to display the response from submitting the form. It overrides the target attribute of the button's form owner.\n /\n @Prop() formtarget?: string;\n\n /\n If `true`, the button will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n The URL that the link points to. This will render the button as an \"a\" tag.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n If `true`, the button will be in loading state.\n /\n @Prop() loading?: boolean = false;\n\n /\n If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.\n /\n @Prop() multiple?: 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 list of the files that have been selected by a user.\n /\n @Prop() selectedFiles: FileList;\n\n /\n The size of the button to be displayed.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n\n /\n The position of the tooltip in relation to the button.\n /\n @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n\n /\n If `true`, the secondary variant of button will have a transparent background rather than white.\n /\n @Prop() transparentBackground?: boolean = true;\n\n /\n The type of the button.\n /\n @Prop() type?: IcButtonTypes = \"button\";\n\n /\n The variant of the button to be displayed.\n /\n @Prop() variant?: IcButtonVariants = \"primary\";\n\n /\n Emitted when button has blur\n /\n @Event() icBlur!: EventEmitter<void>;\n\n /\n If `fileUpload` is set to `true`, this will be emitted when a file is selected in the native explorer.\n /\n @Event() icFileSelection!: EventEmitter<FileList>;\n\n /\n Emitted when button has focus\n /\n @Event() icFocus!: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.mutationObserver !== null && this.mutationObserver !== undefined) {\n this.mutationObserver.disconnect();\n }\n if (\n this.hostMutationObserver !== null &&\n this.hostMutationObserver !== undefined\n ) {\n this.hostMutationObserver.disconnect();\n }\n }\n\n componentWillUpdate(): void {\n if (this.loading) {\n this.el.style.setProperty(\n \"--min-width\",\n `${this.el.getBoundingClientRect().width}px`\n );\n }\n this.setHasTooltip();\n }\n\n componentWillLoad(): void {\n const {\n title,\n \"aria-label\": ariaLabel,\n ...restInheritedAttributes\n } = inheritAttributes(this.el, [...IC_INHERITED_ARIA, \"title\"]);\n\n this.title = title;\n this.ariaLabel = ariaLabel;\n this.inheritedAttributes = restInheritedAttributes;\n\n removeDisabledFalse(this.disabled, this.el);\n\n this.el.setAttribute(\"exportparts\", \"button\");\n\n this.id = this.el.id \|\| null;\n this.setHasTooltip();\n\n if (!this.hasTooltip) {\n const describedById = this.inheritedAttributes[\"aria-describedby\"];\n if (describedById !== undefined) {\n this.describedById = describedById;\n const el = this.el.parentElement.querySelector<HTMLElement>(\n `#${describedById}`\n );\n if (el) {\n this.describedByContent = el.innerText;\n this.describedbyEl = el;\n }\n }\n }\n }\n\n componentDidLoad(): void {\n this.updateTheme();\n\n if (typeof MutationObserver !== \"undefined\") {\n if (this.describedById) {\n this.mutationObserver = new MutationObserver(this.mutationCallback);\n this.mutationObserver.observe(this.describedbyEl, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n\n this.hostMutationObserver = new MutationObserver(\n this.hostMutationCallback\n );\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n }\n\n componentWillRender(): void {\n const iconEl = this.hasIconSlot(\"left\")\n ? this.el.querySelector(`[slot=\"left-icon\"]`)\n : this.hasIconSlot(\"right\")\n ? this.el.querySelector(`[slot=\"right-icon\"]`)\n : null;\n iconEl?.setAttribute(\"viewBox\", \"0 0 24 24\");\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (!this.hasRouterSlot()) {\n if (this.fileUpload) {\n renderFileHiddenInput(\n this.icFileSelection,\n this.el,\n this.multiple,\n this.fileInputName,\n this.selectedFiles,\n this.disabled,\n this.accept\n );\n }\n if (this.disabled \|\| this.loading) {\n event.stopImmediatePropagation();\n }\n if (this.dropdown) {\n this.dropdownExpanded = !this.dropdownExpanded;\n }\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n this.updateTheme(detail.mode);\n }\n\n /\n Sets focus on the native `button`.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.buttonEl?.focus();\n }\n\n private async closeButtonTooltip(ev: KeyboardEvent): Promise<void> {\n const tooltip = this.el.shadowRoot.querySelector(\"ic-tooltip\");\n if (await tooltip.isTooltipVisible()) {\n tooltip.displayTooltip(false);\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n }\n\n private hasIconSlot(position?: \"left\" \| \"right\" \| \"top\"): boolean {\n const selectorPrefix = position ? `${position}-` : \"\";\n return this.el.querySelector(`[slot=\"${selectorPrefix}icon\"]`) !== null;\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 private handleClick = (): void => {\n if (\n (this.el.type === \"submit\" \|\| this.el.type === \"reset\") &&\n !this.hasRouterSlot() &&\n !!this.el.closest(\"FORM\")\n ) {\n const hiddenFormButton = document.createElement(\"button\");\n\n hiddenFormButton.setAttribute(\"type\", this.el.type);\n hiddenFormButton.style.display = \"none\";\n\n this.el.closest(\"FORM\").appendChild(hiddenFormButton);\n\n hiddenFormButton.click();\n hiddenFormButton.remove();\n }\n };\n\n private handleKeyDown = (ev: KeyboardEvent): void => {\n if (ev.key === \"Escape\" && this.hasTooltip) {\n this.closeButtonTooltip(ev);\n }\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n // triggered when text content of sibling element in light DOM changes\n private mutationCallback = (): void => {\n this.describedByContent = this.describedbyEl.innerText;\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n const attribute = this.el.getAttribute(attributeName);\n if (attributeName === \"title\") this.title = attribute;\n else if (attributeName === \"aria-label\") this.ariaLabel = attribute;\n\n if (IC_INHERITED_ARIA.includes(attributeName)) {\n this.inheritedAttributes[attributeName] = attribute;\n forceComponentUpdate = true;\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private setHasTooltip = (): void => {\n this.hasTooltip =\n !this.disableTooltip && (!!this.title \|\| this.isIconVariant());\n };\n\n private isIconVariant = (): boolean => {\n return this.variant.startsWith(\"icon\");\n };\n\n render() {\n const TagType = (this.href && \"a\") \|\| \"button\";\n const { title, ariaLabel, inheritedAttributes } = this;\n const buttonAttrs =\n TagType === \"button\"\n ? {\n type: this.type,\n disabled: this.disabled,\n form: this.form,\n formaction: this.formaction,\n formenctype: this.formenctype,\n formmethod: this.formmethod,\n formnovalidate: this.formnovalidate,\n formtarget: this.formtarget,\n }\n : {\n download: this.download !== false ? this.download : null,\n href: this.href,\n rel: this.rel,\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n hreflang: this.hreflang,\n };\n\n let describedby: string = null;\n let buttonId: string = null;\n if (this.hasTooltip) {\n buttonId =\n this.id !== null\n ? `ic-button-with-tooltip-${this.id}`\n : `ic-button-with-tooltip-${this.buttonIdNum}`;\n describedby =\n this.variant === \"icon\" && !!ariaLabel\n ? null\n : `ic-tooltip-${buttonId}`;\n } else {\n describedby = this.describedById;\n }\n\n const ButtonContent = () => {\n return (\n <TagType\n class=\"button\"\n aria-disabled={this.loading \|\| this.disabled ? \"true\" : null}\n aria-label={this.loading ? \"Loading\" : ariaLabel}\n aria-expanded={this.dropdown && `${this.dropdownExpanded}`}\n {...buttonAttrs}\n {...inheritedAttributes}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ref={(el) => (this.buttonEl = el)}\n aria-describedby={describedby}\n part=\"button\"\n >\n {this.hasIconSlot() && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n {this.hasIconSlot(\"left\") && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"left-icon\" />\n </div>\n )}\n {this.hasIconSlot(\"top\") &&\n !this.hasIconSlot(\"left\") &&\n !this.hasIconSlot(\"right\") &&\n !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"top-icon\" />\n </div>\n )}\n {this.loading ? (\n <div class=\"loading-container\">\n <ic-loading-indicator\n type=\"linear\"\n appearance={\n this.variant === \"primary\" \|\|\n this.variant === \"destructive\" \|\|\n this.appearance === IcThemeForegroundEnum.Dark \|\|\n this.appearance === IcThemeForegroundEnum.Light\n ? \"light\"\n : \"dark\"\n }\n ></ic-loading-indicator>\n </div>\n ) : (\n <slot />\n )}\n {this.hasIconSlot(\"right\") && !this.loading && !this.dropdown && (\n <div class={{ \"icon-container\": true, \"right-icon\": true }}>\n <slot name=\"right-icon\" />\n </div>\n )}\n {this.dropdown &&\n !this.loading &&\n this.variant !== \"icon\" &&\n this.variant !== \"destructive\" && (\n <span\n class={{\n [\"arrow-dropdown\"]: !this.dropdownExpanded,\n [\"dropdown-expanded\"]: this.dropdownExpanded,\n }}\n innerHTML={arrowDropdown}\n />\n )}\n </TagType>\n );\n };\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled && !this.loading,\n [`button-variant-${this.variant}`]: true,\n [`button-size-${this.size}`]: true,\n [\"loading\"]: this.loading,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n [\"full-width\"]: this.fullWidth,\n [\"with-badge\"]: isSlotUsed(this.el, \"badge\"),\n [\"dropdown-no-icon\"]:\n this.dropdown &&\n !isSlotUsed(this.el, \"icon\") &&\n !isSlotUsed(this.el, \"left-icon\"),\n [\"top-icon\"]: isSlotUsed(this.el, \"top-icon\"),\n [\"white-background\"]:\n this.variant === \"secondary\" &&\n !this.transparentBackground &&\n this.appearance !== \"light\",\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n aria-owns={this.ariaOwnsId}\n aria-controls={this.ariaControlsId}\n aria-expanded={this.dropdown && `${this.dropdownExpanded}`}\n >\n {this.hasTooltip && (\n <ic-tooltip\n id={describedby}\n label={title \|\| ariaLabel}\n target={buttonId}\n placement={this.tooltipPlacement}\n silent={this.isIconVariant() && !!ariaLabel}\n >\n {this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <ButtonContent />\n )}\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n {!this.hasTooltip &&\n (this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <ButtonContent />\n ))}\n {this.describedByContent && (\n <span id={describedby} class=\"ic-button-describedby\">\n {this.describedByContent}\n </span>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-button2.js","mappings":"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","names":[],"sources":["src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","src/components/ic-button/ic-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --min-width: Minimum width of the button.\n* @prop --height: The height of the button.\n/\n\n:host {\n display: inline-block;\n position: relative;\n\n --button-default: var(--ic-action-default);\n --button-default-hover: var(--ic-action-default-hover);\n --button-default-active: var(--ic-action-default-active);\n --button-default-background-hover: var(--ic-action-default-bg-hover);\n --button-default-background-active: var(--ic-action-default-bg-active);\n --icon-width: 100%;\n --icon-height: 100%;\n}\n\n.button,\n::slotted(a) {\n font-family: var(--ic-font-body-family);\n text-decoration: none;\n font-weight: 600;\n font-size: 0.875rem;\n transition: var(--ic-easing-transition-fast);\n border-radius: var(--ic-border-radius);\n min-width: var(--min-width, 6.25rem);\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background: none;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n vertical-align: middle;\n}\n\n:host(.with-badge) .button {\n border-radius: 0.2188rem;\n}\n\n.button:hover,\n::slotted(a:hover) {\n cursor: pointer;\n}\n\n.button:focus,\n::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible,\n::slotted(a:focus-visible) {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.dark) .button,\n:host(.dark) ::slotted(a) {\n --button-default: var(--ic-action-dark);\n --button-default-hover: var(--ic-action-dark);\n --button-default-active: var(--ic-action-dark);\n --button-default-background-hover: var(--ic-action-dark-bg-hover);\n --button-default-background-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.light) .button,\n:host(.light) ::slotted(a) {\n --button-default: var(--ic-action-light);\n --button-default-hover: var(--ic-action-light);\n --button-default-active: var(--ic-action-light);\n --button-default-background-hover: var(--ic-action-light-bg-hover);\n --button-default-background-active: var(--ic-action-light-bg-active);\n}\n\n:host(.white-background) .button,\n:host(.white-background) ::slotted(a) {\n --button-default-background-hover: var(--ic-action-default-bg-hover-no-alpha);\n --button-default-background-active: var(\n --ic-action-default-bg-active-no-alpha\n );\n\n background-color: var(--ic-architectural-white);\n}\n\n:host(.white-background.dark) .button,\n:host(.white-background.dark) ::slotted(a) {\n --button-default-background-hover: var(--ic-action-dark-bg-hover-no-alpha);\n --button-default-background-active: var(--ic-action-dark-bg-active-no-alpha);\n}\n\n:host(.button-variant-primary.light) .button,\n:host(.button-variant-primary.light) ::slotted(a) {\n color: var(--ic-color-primary-text);\n\n --button-default-hover: var(--ic-action-light-hover);\n --button-default-active: var(--ic-action-light-active);\n}\n\n:host(.button-variant-primary.dark) .button,\n:host(.button-variant-primary.dark) ::slotted(a) {\n --button-default-hover: var(--ic-action-dark-hover);\n --button-default-active: var(--ic-action-dark-active);\n}\n\n:host(.disabled),\n:host(.disabled) .button,\n:host(.disabled) ::slotted(a),\n:host(.loading),\n:host(.loading) .button {\n pointer-events: none;\n}\n\n:host(.top-icon) .button {\n flex-direction: column;\n\n --height: fit-content;\n}\n\n:host(.top-icon) .button .icon-container {\n margin-right: 0;\n}\n\n/ Variants /\n\n/ Primary /\n\n:host(.button-variant-primary) .button,\n:host(.button-variant-primary) ::slotted(a) {\n color: var(--ic-color-white-text);\n background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover {\n background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary.loading) .button,\n:host(.button-variant-primary) .button:active {\n background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary.disabled) .button,\n:host(.button-variant-primary.disabled) ::slotted(a) {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button,\n:host(.button-variant-primary.light.disabled) ::slotted(a) {\n background: var(--ic-architectural-600);\n color: var(--ic-architectural-500);\n}\n\n/ Secondary /\n\n:host(.button-variant-secondary) .button,\n:host(.button-variant-secondary) ::slotted(a) {\n border: var(--ic-border-width) solid var(--button-default);\n color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover,\n:host(.button-variant-secondary) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover);\n border-color: var(--button-default-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-secondary) .button:active,\n:host(.button-variant-secondary) ::slotted(a:active),\n:host(.button-variant-secondary.loading) .button {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) ::slotted(a) {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) ::slotted(a) {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n}\n\n/ Tertiary /\n\n:host(.button-variant-tertiary) .button,\n:host(.button-variant-tertiary) ::slotted(a) {\n color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover,\n:host(.button-variant-tertiary) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active,\n:host(.button-variant-tertiary) ::slotted(a:active),\n:host(.button-variant-tertiary.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) ::slotted(a) {\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) ::slotted(a) {\n color: var(--ic-architectural-500);\n}\n\n/ Destructive /\n\n:host(.button-variant-destructive) .button,\n:host(.button-variant-destructive) ::slotted(a) {\n color: var(--ic-color-white-text);\n background-color: var(--ic-action-destructive);\n text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover {\n background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active,\n:host(.button-variant-destructive.loading) .button {\n background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-destructive.disabled) .button,\n:host(.button-variant-destructive.disabled) ::slotted(a) {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n/ Icon /\n\n:host(.button-variant-icon) .button,\n:host(.button-variant-icon) ::slotted(a) {\n color: var(--button-default);\n min-width: 0;\n gap: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon) .button:hover,\n:host(.button-variant-icon) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon) ::slotted(a:active:not(:focus)),\n:host(.button-variant-icon.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) ::slotted(a) {\n color: var(--ic-architectural-300);\n background: none;\n}\n\n/*********************\n Icon Variants\n **********************/\n\n/ Icon-primary /\n\n:host(.button-variant-icon-primary) .button,\n:host(.button-variant-icon-primary) ::slotted(a) {\n color: var(--ic-color-white-text);\n background-color: var(--button-default);\n min-width: 0;\n gap: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon-primary) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon-primary) .button:hover,\n:host(.button-variant-icon-primary) ::slotted(a:hover) {\n background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon-primary) .button:active,\n:host(.button-variant-icon-primary) ::slotted(a:active),\n:host(.button-variant-icon-primary.loading) .button {\n background: var(--button-default-active);\n}\n\n:host(.button-variant-icon-primary.loading) .button ic-loading-indicator {\n --inner-color: var(--ic-architectural-white);\n}\n\n:host(.button-variant-icon-primary.disabled) .button,\n:host(.button-variant-icon-primary.disabled) ::slotted(a) {\n color: var(--ic-architectural-300);\n background: var(--ic-architectural-200);\n}\n\n:host(.button-variant-icon-primary.light) .button,\n:host(.button-variant-icon-primary.light) ::slotted(a) {\n color: var(--ic-color-primary-text);\n}\n\n:host(.button-variant-icon-primary.light) .button:hover,\n:host(.button-variant-icon-primary.light) ::slotted(a:hover) {\n background: var(--ic-action-light-hover);\n}\n\n:host(.button-variant-icon-primary.light) .button:active,\n:host(.button-variant-icon-primary.light) ::slotted(a:active),\n:host(.button-variant-icon-primary.light.loading) .button,\n:host(.button-variant-icon-primary.light.loading) ::slotted(a) {\n background: var(--ic-action-light-active);\n}\n\n:host(.button-variant-icon-primary.dark) .button:hover,\n:host(.button-variant-icon-primary.dark) ::slotted(a:hover) {\n background: var(--ic-action-dark-hover);\n}\n\n:host(.button-variant-icon-primary.dark) .button:active,\n:host(.button-variant-icon-primary.dark) ::slotted(a:active),\n:host(.button-variant-icon-primary.dark.loading) .button,\n:host(.button-variant-icon-primary.dark.loading) ::slotted(a) {\n background: var(--ic-action-dark-active);\n}\n\n/ Icon-secondary /\n\n:host(.button-variant-icon-secondary) .button,\n:host(.button-variant-icon-secondary) ::slotted(a) {\n border: var(--ic-border-width) solid var(--button-default);\n color: var(--button-default);\n min-width: 0;\n gap: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon-secondary) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon-secondary) .button:hover,\n:host(.button-variant-icon-secondary) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover);\n border-color: var(--button-default-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon-secondary) .button:active,\n:host(.button-variant-icon-secondary) ::slotted(a:active),\n:host(.button-variant-icon-secondary.loading) .button {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-icon-secondary.disabled) .button,\n:host(.button-variant-icon-secondary.disabled) .button:hover,\n:host(.button-variant-icon-secondary.disabled) .button:active,\n:host(.button-variant-icon-secondary.disabled) ::slotted(a),\n:host(.button-variant-icon-secondary.disabled) ::slotted(a:hover),\n:host(.button-variant-icon-secondary.disabled) ::slotted(a:active) {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-icon-secondary.light.disabled) .button,\n:host(.button-variant-icon-secondary.light.disabled) .button:hover,\n:host(.button-variant-icon-secondary.light.disabled) .button:active,\n:host(.button-variant-icon-secondary.light.disabled) ::slotted(a),\n:host(.button-variant-icon-secondary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-icon-secondary.light.disabled) ::slotted(a:active) {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n}\n\n/ Icon-tertiary /\n\n:host(.button-variant-icon-tertiary) .button,\n:host(.button-variant-icon-tertiary) ::slotted(a) {\n color: var(--button-default);\n min-width: 0;\n gap: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon-tertiary) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon-tertiary) .button:hover,\n:host(.button-variant-icon-tertiary) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon-tertiary) .button:active,\n:host(.button-variant-icon-tertiary) ::slotted(a:active),\n:host(.button-variant-icon-tertiary.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-icon-tertiary.disabled) .button,\n:host(.button-variant-icon-tertiary.disabled) .button:hover,\n:host(.button-variant-icon-tertiary.disabled) .button:active,\n:host(.button-variant-icon-tertiary.disabled) ::slotted(a),\n:host(.button-variant-icon-tertiary.disabled) ::slotted(a:hover),\n:host(.button-variant-icon-tertiary.disabled) ::slotted(a:active) {\n color: var(--ic-architectural-300);\n background: none;\n}\n\n/ Icon-destructive /\n\n:host(.button-variant-icon-destructive) .button,\n:host(.button-variant-icon-destructive) ::slotted(a) {\n color: var(--ic-color-white-text);\n background-color: var(--ic-action-destructive);\n min-width: 0;\n gap: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon-destructive) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon-destructive) .button:hover,\n:host(.button-variant-icon-destructive) ::slotted(a:hover) {\n background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-icon-destructive) .button:active,\n:host(.button-variant-icon-destructive) ::slotted(a:active),\n:host(.button-variant-icon-destructive.loading) .button {\n background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-icon-destructive.loading) .button ic-loading-indicator {\n --inner-color: var(--ic-architectural-white);\n}\n\n:host(.button-variant-icon-destructive.disabled) .button,\n:host(.button-variant-icon-destructive.disabled) .button:hover,\n:host(.button-variant-icon-destructive.disabled) .button:active,\n:host(.button-variant-icon-destructive.disabled) ::slotted(a),\n:host(.button-variant-icon-destructive.disabled) ::slotted(a:hover),\n:host(.button-variant-icon-destructive.disabled) ::slotted(a:active) {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n/ Sizing /\n\n:host(.button-size-default) .button {\n height: var(--height, 2.5rem);\n padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-small) .button {\n height: var(--height, var(--ic-space-xl));\n padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.button-size-large) .button {\n height: var(--height, var(--ic-space-xxl));\n padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.button-size-default.button-variant-icon) .button,\n:host(.button-size-default.button-variant-icon-primary) .button,\n:host(.button-size-default.button-variant-icon-secondary) .button,\n:host(.button-size-default.button-variant-icon-tertiary) .button,\n:host(.button-size-default.button-variant-icon-destructive) .button,\n:host(.button-size-default.button-variant-icon-primary) ::slotted(a),\n:host(.button-size-default.button-variant-icon-secondary) ::slotted(a),\n:host(.button-size-default.button-variant-icon-tertiary) ::slotted(a),\n:host(.button-size-default.button-variant-icon-destructive) ::slotted(a),\n:host(.button-size-default.button-variant-icon) ::slotted(a) {\n height: var(--height, var(--ic-space-xl));\n width: var(--ic-space-xl);\n padding: 0.375rem;\n}\n\n:host(.button-size-small.button-variant-icon) .button,\n:host(.button-size-small.button-variant-icon-primary) .button,\n:host(.button-size-small.button-variant-icon-secondary) .button,\n:host(.button-size-small.button-variant-icon-tertiary) .button,\n:host(.button-size-small.button-variant-icon-destructive) .button,\n:host(.button-size-small.button-variant-icon-primary) ::slotted(a),\n:host(.button-size-small.button-variant-icon-secondary) ::slotted(a),\n:host(.button-size-small.button-variant-icon-tertiary) ::slotted(a),\n:host(.button-size-small.button-variant-icon-destructive) ::slotted(a),\n:host(.button-size-small.button-variant-icon) ::slotted(a) {\n height: var(--height, var(--ic-space-lg));\n width: var(--ic-space-lg);\n padding: var(--ic-space-xxs);\n}\n\n:host(.button-size-large.button-variant-icon) .button,\n:host(.button-size-large.button-variant-icon-primary) .button,\n:host(.button-size-large.button-variant-icon-secondary) .button,\n:host(.button-size-large.button-variant-icon-tertiary) .button,\n:host(.button-size-large.button-variant-icon-destructive) .button,\n:host(.button-size-large.button-variant-icon-primary) ::slotted(a),\n:host(.button-size-large.button-variant-icon-secondary) ::slotted(a),\n:host(.button-size-large.button-variant-icon-tertiary) ::slotted(a),\n:host(.button-size-large.button-variant-icon-destructive) ::slotted(a),\n:host(.button-size-large.button-variant-icon) ::slotted(a) {\n height: var(--height, 2.5rem);\n width: 2.5rem;\n padding: var(--ic-space-xs);\n}\n\n/ Width /\n:host(.full-width),\n:host(.full-width) .button,\n:host(.full-width) ::slotted(a) {\n width: 100%;\n}\n\n/ Loading /\n\ndiv.loading-container {\n position: relative;\n align-items: center;\n width: 100%;\n}\n\nic-loading-indicator {\n --outer-color: transparent;\n}\n\n@keyframes loading-animation {\n 0% {\n width: 0%;\n left: 0%;\n }\n\n 25% {\n width: 0%;\n left: 0%;\n opacity: 0;\n }\n\n 50% {\n width: 100%;\n left: 0%;\n opacity: 1;\n }\n\n 75% {\n width: 0%;\n left: 100%;\n }\n\n 100% {\n width: 0%;\n left: 100%;\n opacity: 0;\n }\n}\n\n/ Icons /\n\ndiv.icon-container {\n box-sizing: border-box;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: var(--ic-space-xs);\n}\n\ndiv.right-icon {\n margin-right: auto;\n margin-left: var(--ic-space-xs);\n}\n\n:host(.full-width) .right-icon {\n margin-right: var(--ic-space-xs);\n}\n\n::slotted(:not(ic-badge)) {\n width: var(--icon-width) !important;\n height: var(--icon-height) !important;\n fill: currentcolor !important;\n pointer-events: none;\n}\n\n:host(.button-variant-icon) .button .icon-container {\n margin: 0;\n pointer-events: none;\n}\n\n/* SEARCH /\n\n:host(.search-submit-button) ::slotted(svg) {\n --icon-height: 1.25rem;\n --icon-width: 1.25rem;\n}\n\n:host(.search-submit-button-small) ::slotted(svg) {\n --icon-height: 1rem;\n --icon-width: 1rem;\n}\n\n:host(.clear-button) {\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus,\n:host(.calendar-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n box-shadow: none;\n background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) {\n display: flex;\n align-items: center;\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n --icon-height: 0.875rem;\n --icon-width: 0.875rem;\n}\n\n:host(.popout-menu-button) .button {\n height: var(--height);\n justify-content: left;\n border-radius: 0;\n white-space: pre-line;\n text-align: start;\n}\n\n:host(.popout-menu-button) div.icon-container {\n flex: none;\n}\n\n:host(.popout-menu-button) .button:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n display: none;\n}\n\n:host .ic-tooltip {\n display: block;\n}\n\n/ Dropdown /\n:host .arrow-dropdown {\n margin-top: auto;\n}\n\n:host .dropdown-expanded {\n transform: rotate(180deg);\n margin-bottom: var(--ic-space-xxxs);\n}\n\n:host(.dropdown-no-icon) .button {\n padding-right: var(--ic-space-xs);\n}\n\n/ Slotted router item /\nslot[name=\"router-item\"]::slotted(a) {\n pointer-events: all;\n}\n\n::slotted(a) {\n font-size: 0.875rem !important;\n border: none !important;\n vertical-align: middle !important;\n}\n\n:host(.white-background) ::slotted(a) {\n background-color: var(--ic-architectural-white) !important;\n}\n\n:host(.button-variant-primary) ::slotted(a) {\n background-color: var(--button-default) !important;\n}\n\n:host(.button-variant-primary) ::slotted(a:hover) {\n background-color: var(--button-default-hover) !important;\n}\n\n:host(.button-variant-primary) ::slotted(a:active) {\n background-color: var(--button-default-active) !important;\n}\n\n:host(.button-variant-primary.disabled) ::slotted(a),\n:host(.button-variant-destructive.disabled) ::slotted(a) {\n background: var(--ic-architectural-200) !important;\n}\n\n:host(.button-variant-primary.light.disabled) ::slotted(a) {\n background: var(--ic-architectural-600) !important;\n}\n\n:host(.button-variant-secondary) ::slotted(a) {\n border: var(--ic-border-width) solid var(--button-default) !important;\n}\n\n:host(.button-variant-secondary) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover) !important;\n border-color: var(--button-default-hover) !important;\n}\n\n:host(.button-variant-secondary) ::slotted(a:active) {\n border-color: var(--button-default-active) !important;\n background-color: var(--button-default-background-active) !important;\n}\n\n:host(.button-variant-secondary.disabled) ::slotted(a),\n:host(.button-variant-secondary.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.disabled) ::slotted(a:active),\n:host(.button-variant-tertiary.disabled) ::slotted(a),\n:host(.button-variant-tertiary.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.disabled) ::slotted(a:active) {\n border-color: var(--ic-architectural-300) !important;\n background: none !important;\n}\n\n:host(.button-variant-secondary.light.disabled) ::slotted(a),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:active),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:active) {\n border-color: var(--ic-architectural-500) !important;\n}\n\n:host(.button-variant-tertiary) ::slotted(a:hover),\n:host(.button-variant-icon) ::slotted(a:hover) {\n background-color: var(--button-default-background-hover) !important;\n}\n\n:host(.button-variant-tertiary) ::slotted(a:active:not(:focus)),\n:host(.button-variant-tertiary) ::slotted(a:active:focus),\n:host(.button-variant-tertiary) ::slotted(a:active),\n:host(.button-variant-icon) ::slotted(a:active:not(:focus)) {\n background-color: var(--button-default-background-active) !important;\n}\n\n:host(.button-variant-icon.disabled) ::slotted(a),\n:host(.button-variant-icon.disabled) ::slotted(a:hover),\n:host(.button-variant-icon.disabled) ::slotted(a:active) {\n background: none !important;\n}\n\n:host(.button-variant-destructive) ::slotted(a) {\n background-color: var(--ic-action-destructive) !important;\n}\n\n:host(.button-variant-destructive) ::slotted(a:hover) {\n background-color: var(--ic-action-destructive-hover) !important;\n}\n\n:host(.button-variant-destructive) ::slotted(a:active) {\n background-color: var(--ic-action-destructive-active) !important;\n}\n\n:host(.button-size-default) ::slotted(a) {\n height: var(--height, 2.5rem) !important;\n padding: var(--ic-space-xs) var(--ic-space-md) !important;\n}\n\n:host(.button-size-small) ::slotted(a) {\n height: var(--height, var(--ic-space-xl)) !important;\n padding: var(--ic-space-xxs) var(--ic-space-md) !important;\n}\n\n:host(.button-size-large) ::slotted(a) {\n height: var(--height, var(--ic-space-xxl)) !important;\n padding: var(--ic-space-sm) var(--ic-space-md) !important;\n}\n\n:host(.button-size-default.button-variant-icon) ::slotted(a) {\n height: var(--height, var(--ic-space-xl)) !important;\n padding: 0.375rem !important;\n}\n\n:host(.button-size-small.button-variant-icon) ::slotted(a) {\n padding: var(--ic-space-xxs) !important;\n}\n\n:host(.button-size-large.button-variant-icon) ::slotted(a) {\n padding: var(--ic-space-xs) !important;\n}\n\n/ High Contrast /\n@media (forced-colors: active) {\n .button,\n ::slotted(a) {\n border: 0.125rem solid transparent !important;\n }\n}\n\n/ Pagination /\n\n:host(.flip) ::slotted(svg) {\n transform: scaleX(-1);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n State,\n forceUpdate,\n h,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n getThemeFromContext,\n inheritAttributes,\n isSlotUsed,\n removeDisabledFalse,\n renderFileHiddenInput,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcButtonTypes,\n IcButtonVariants,\n IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n IcSizes,\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet buttonIds = 0;\n\n/\n * @slot icon - Deprecated. This slot should not be used anymore. Use left-icon or right-icon slot instead.\n * @slot left-icon - Content will be placed to the left of the button label.\n * @slot right-icon - Content will be placed to the right of the button label.\n * @slot top-icon - Content will be placed above the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n * @slot router-item - Handle routing by nesting your routes in this slot. Setting loading to true will have no impact on this slot.\n /\n@Component({\n tag: \"ic-button\",\n styleUrl: \"ic-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Button {\n private buttonEl: HTMLElement;\n private buttonIdNum = buttonIds++;\n private hasTooltip: boolean = false;\n private id: string;\n private inheritedAttributes: { [k: string]: string } = {};\n private describedbyEl: HTMLElement = null;\n private describedById: string = null;\n private mutationObserver: MutationObserver = null;\n private hostMutationObserver: MutationObserver = null;\n private routerSlot: HTMLElement;\n\n @Element() el: HTMLIcButtonElement;\n\n @State() ariaLabel: string = null;\n @State() describedByContent: string = null;\n @State() title: string = null;\n\n /\n If `fileUpload` is set to `true`, this is the accepted list of file types.\n /\n @Prop() accept?: string = \"\";\n\n /*\n The appearance of the button, e.g. dark, light, or the default.\n /\n @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n /\n @internal Used to identify any related child component\n /\n @Prop() ariaControlsId: string \| boolean;\n\n /\n @internal Used to identify any related child component\n /\n @Prop() ariaOwnsId: string \| boolean;\n\n /\n If `true`, the button will be in disabled state.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n /\n @Prop() disableTooltip?: boolean = false;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n\n /\n If `true`, the button will show a dropdown icon.\n /\n @Prop() dropdown?: boolean = false;\n\n /\n If `true`, the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true.\n /\n @Prop({ mutable: true, reflect: true }) dropdownExpanded?: boolean = false;\n\n /\n If `true`, when the button is clicked the native file explorer will be launched.\n /\n @Prop() fileUpload?: boolean = false;\n\n /\n The name of the control for the file input, which is submitted with the form data.\n /\n @Prop() fileInputName: string = `ic-button-file-upload-input-${buttonIds++}`;\n\n /\n The <form> element to associate the button with.\n /\n @Prop() form?: string;\n\n /\n The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner.\n /\n @Prop() formaction?: string;\n\n /\n The way the submitted form data is encoded.\n /\n @Prop() formenctype?: string;\n\n /\n The HTTP method used to submit the form.\n /\n @Prop() formmethod?: string;\n\n /\n If `true`, the form will not be validated when submitted.\n /\n @Prop() formnovalidate?: boolean;\n\n /\n The place to display the response from submitting the form. It overrides the target attribute of the button's form owner.\n /\n @Prop() formtarget?: string;\n\n /\n If `true`, the button will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n The URL that the link points to. This will render the button as an \"a\" tag.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n If `true`, the button will be in loading state.\n /\n @Prop() loading?: boolean = false;\n\n /\n If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.\n /\n @Prop() multiple?: 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 list of the files that have been selected by a user.\n /\n @Prop() selectedFiles: FileList;\n\n /\n The size of the button to be displayed.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n\n /\n The position of the tooltip in relation to the button.\n /\n @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n\n /\n If `true`, the secondary variant of button will have a transparent background rather than white.\n /\n @Prop() transparentBackground?: boolean = true;\n\n /\n The type of the button.\n /\n @Prop() type?: IcButtonTypes = \"button\";\n\n /\n The variant of the button to be displayed.\n /\n @Prop() variant?: IcButtonVariants = \"primary\";\n\n /\n Emitted when button has blur\n /\n @Event() icBlur!: EventEmitter<void>;\n\n /\n If `fileUpload` is set to `true`, this will be emitted when a file is selected in the native explorer.\n /\n @Event() icFileSelection!: EventEmitter<FileList>;\n\n /\n Emitted when button has focus\n /\n @Event() icFocus!: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.mutationObserver !== null && this.mutationObserver !== undefined) {\n this.mutationObserver.disconnect();\n }\n if (\n this.hostMutationObserver !== null &&\n this.hostMutationObserver !== undefined\n ) {\n this.hostMutationObserver.disconnect();\n }\n }\n\n componentWillUpdate(): void {\n if (this.loading) {\n this.el.style.setProperty(\n \"--min-width\",\n `${this.el.getBoundingClientRect().width}px`\n );\n }\n this.setHasTooltip();\n }\n\n componentWillLoad(): void {\n const {\n title,\n \"aria-label\": ariaLabel,\n ...restInheritedAttributes\n } = inheritAttributes(this.el, [...IC_INHERITED_ARIA, \"title\"]);\n\n this.title = title;\n this.ariaLabel = ariaLabel;\n this.inheritedAttributes = restInheritedAttributes;\n\n removeDisabledFalse(this.disabled, this.el);\n\n this.el.setAttribute(\"exportparts\", \"button\");\n\n this.id = this.el.id \|\| null;\n this.setHasTooltip();\n\n if (!this.hasTooltip) {\n const describedById = this.inheritedAttributes[\"aria-describedby\"];\n if (describedById !== undefined) {\n this.describedById = describedById;\n const el = this.el.parentElement.querySelector<HTMLElement>(\n `#${describedById}`\n );\n if (el) {\n this.describedByContent = el.innerText;\n this.describedbyEl = el;\n }\n }\n }\n }\n\n componentDidLoad(): void {\n this.updateTheme();\n if (typeof MutationObserver !== \"undefined\") {\n if (this.describedById) {\n this.mutationObserver = new MutationObserver(this.mutationCallback);\n this.mutationObserver.observe(this.describedbyEl, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n\n this.hostMutationObserver = new MutationObserver(\n this.hostMutationCallback\n );\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n childList: true,\n });\n }\n }\n\n componentWillRender(): void {\n const iconEl = this.hasIconSlot(\"left\")\n ? this.el.querySelector(`[slot=\"left-icon\"]`)\n : this.hasIconSlot(\"right\")\n ? this.el.querySelector(`[slot=\"right-icon\"]`)\n : null;\n iconEl?.setAttribute(\"viewBox\", \"0 0 24 24\");\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (!this.hasRouterSlot()) {\n if (this.fileUpload) {\n renderFileHiddenInput(\n this.icFileSelection,\n this.el,\n this.multiple,\n this.fileInputName,\n this.selectedFiles,\n this.disabled,\n this.accept\n );\n }\n if (this.disabled \|\| this.loading) {\n event.stopImmediatePropagation();\n }\n if (this.dropdown) {\n this.dropdownExpanded = !this.dropdownExpanded;\n }\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n this.updateTheme(detail.mode);\n }\n\n /\n Sets focus on the native `button`.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.buttonEl?.focus();\n }\n\n private async closeButtonTooltip(ev: KeyboardEvent): Promise<void> {\n const tooltip = this.el.shadowRoot.querySelector(\"ic-tooltip\");\n if (await tooltip.isTooltipVisible()) {\n tooltip.displayTooltip(false);\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n }\n\n private hasIconSlot(position?: \"left\" \| \"right\" \| \"top\"): boolean {\n const selectorPrefix = position ? `${position}-` : \"\";\n return this.el.querySelector(`[slot=\"${selectorPrefix}icon\"]`) !== null;\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 private handleClick = (): void => {\n if (\n (this.el.type === \"submit\" \|\| this.el.type === \"reset\") &&\n !this.hasRouterSlot() &&\n !!this.el.closest(\"FORM\")\n ) {\n const hiddenFormButton = document.createElement(\"button\");\n\n hiddenFormButton.setAttribute(\"type\", this.el.type);\n hiddenFormButton.style.display = \"none\";\n\n this.el.closest(\"FORM\").appendChild(hiddenFormButton);\n\n hiddenFormButton.click();\n hiddenFormButton.remove();\n }\n };\n\n private handleKeyDown = (ev: KeyboardEvent): void => {\n if (ev.key === \"Escape\" && this.hasTooltip) {\n this.closeButtonTooltip(ev);\n }\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n // triggered when text content of sibling element in light DOM changes\n private mutationCallback = (): void => {\n this.describedByContent = this.describedbyEl.innerText;\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName, type }) => {\n if (type === \"childList\") {\n forceComponentUpdate = true;\n }\n const attribute = this.el.getAttribute(attributeName);\n if (attributeName === \"title\") this.title = attribute;\n else if (attributeName === \"aria-label\") this.ariaLabel = attribute;\n\n if (IC_INHERITED_ARIA.includes(attributeName)) {\n this.inheritedAttributes[attributeName] = attribute;\n forceComponentUpdate = true;\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private setHasTooltip = (): void => {\n this.hasTooltip =\n !this.disableTooltip && (!!this.title \|\| this.isIconVariant());\n };\n\n private isIconVariant = (): boolean => {\n return this.variant.startsWith(\"icon\");\n };\n\n render() {\n const TagType = (this.href && \"a\") \|\| \"button\";\n const { title, ariaLabel, inheritedAttributes } = this;\n const buttonAttrs =\n TagType === \"button\"\n ? {\n type: this.type,\n disabled: this.disabled,\n form: this.form,\n formaction: this.formaction,\n formenctype: this.formenctype,\n formmethod: this.formmethod,\n formnovalidate: this.formnovalidate,\n formtarget: this.formtarget,\n }\n : {\n download: this.download !== false ? this.download : null,\n href: this.href,\n rel: this.rel,\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n hreflang: this.hreflang,\n };\n\n let describedby: string = null;\n let buttonId: string = null;\n if (this.hasTooltip) {\n buttonId =\n this.id !== null\n ? `ic-button-with-tooltip-${this.id}`\n : `ic-button-with-tooltip-${this.buttonIdNum}`;\n describedby =\n this.variant === \"icon\" && !!ariaLabel\n ? null\n : `ic-tooltip-${buttonId}`;\n } else {\n describedby = this.describedById;\n }\n\n const ButtonContent = () => {\n return (\n <TagType\n class=\"button\"\n aria-disabled={this.loading \|\| this.disabled ? \"true\" : null}\n aria-label={this.loading ? \"Loading\" : ariaLabel}\n aria-expanded={this.dropdown && `${this.dropdownExpanded}`}\n {...buttonAttrs}\n {...inheritedAttributes}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ref={(el) => (this.buttonEl = el)}\n aria-describedby={describedby}\n part=\"button\"\n >\n {this.hasIconSlot() && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n {this.hasIconSlot(\"left\") && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"left-icon\" />\n </div>\n )}\n {this.hasIconSlot(\"top\") &&\n !this.hasIconSlot(\"left\") &&\n !this.hasIconSlot(\"right\") &&\n !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"top-icon\" />\n </div>\n )}\n {this.loading ? (\n <div class=\"loading-container\">\n <ic-loading-indicator\n type=\"linear\"\n appearance={\n this.variant === \"primary\" \|\|\n this.variant === \"destructive\" \|\|\n this.appearance === IcThemeForegroundEnum.Dark \|\|\n this.appearance === IcThemeForegroundEnum.Light\n ? \"light\"\n : \"dark\"\n }\n ></ic-loading-indicator>\n </div>\n ) : (\n <slot />\n )}\n {this.hasIconSlot(\"right\") && !this.loading && !this.dropdown && (\n <div class={{ \"icon-container\": true, \"right-icon\": true }}>\n <slot name=\"right-icon\" />\n </div>\n )}\n {this.dropdown &&\n !this.loading &&\n this.variant !== \"icon\" &&\n this.variant !== \"destructive\" && (\n <span\n class={{\n [\"arrow-dropdown\"]: !this.dropdownExpanded,\n [\"dropdown-expanded\"]: this.dropdownExpanded,\n }}\n innerHTML={arrowDropdown}\n />\n )}\n </TagType>\n );\n };\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled && !this.loading,\n [`button-variant-${this.variant}`]: true,\n [`button-size-${this.size}`]: true,\n [\"loading\"]: this.loading,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n [\"full-width\"]: this.fullWidth,\n [\"with-badge\"]: isSlotUsed(this.el, \"badge\"),\n [\"dropdown-no-icon\"]:\n this.dropdown &&\n !isSlotUsed(this.el, \"icon\") &&\n !isSlotUsed(this.el, \"left-icon\"),\n [\"top-icon\"]: isSlotUsed(this.el, \"top-icon\"),\n [\"white-background\"]:\n this.variant === \"secondary\" &&\n !this.transparentBackground &&\n this.appearance !== \"light\",\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n aria-owns={this.ariaOwnsId}\n aria-controls={this.ariaControlsId}\n aria-expanded={this.dropdown && `${this.dropdownExpanded}`}\n >\n {this.hasTooltip && (\n <ic-tooltip\n id={describedby}\n label={title \|\| ariaLabel}\n target={buttonId}\n placement={this.tooltipPlacement}\n silent={this.isIconVariant() && !!ariaLabel}\n >\n {this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <ButtonContent />\n )}\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n {!this.hasTooltip &&\n (this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <ButtonContent />\n ))}\n {this.describedByContent && (\n <span id={describedby} class=\"ic-button-describedby\">\n {this.describedByContent}\n </span>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-footer-link-group.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { D as DEVICE_SIZES, n as getThemeForegroundColor, o as onComponentRequir
 import { d as defineCustomElement$3 } from './ic-section-container2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
-const icFooterLinkGroupCss = "/*! 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(.footer-link-group-sparse){--footer-link-group-margin-right:5.938rem;--footer-link-group-border-bottom:0 solid transparent;--footer-link-group-title-margin-top:0;--footer-link-group-title-margin-bottom:var(--ic-space-md)}:host(.footer-link-group-small){--footer-link-group-margin-right:0;--footer-link-group-title-margin-top:var(--ic-space-md);--footer-link-group-title-margin-bottom:var(--ic-space-md);--footer-link-group-links-padding-left:var(--ic-space-md);--footer-link-group-links-padding-bottom:var(--ic-space-md)}:host(.footer-link-group-light.footer-link-group-small){--footer-link-group-border-bottom:var(--ic-keyline-lighten)}:host(.footer-link-group-dark.footer-link-group-small){--footer-link-group-border-bottom:var(--ic-keyline-darken)}:host(.footer-link-group){margin-right:var(--footer-link-group-margin-right);border-bottom:var(--footer-link-group-border-bottom)}:host(.footer-link-group-small.footer-link-group-light:hover){background-color:var(--ic-action-light-bg-hover);cursor:pointer}:host(.footer-link-group-small.footer-link-group-dark:hover){background-color:var(--ic-action-dark-bg-hover);cursor:pointer}:host(.footer-link-group-sparse:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}:host(.footer-link-group-small:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}:host(.footer-link-group-small.footer-link-group-light:active){background-color:var(--ic-action-light-bg-active)}:host(.footer-link-group-small.footer-link-group-dark:active){background-color:var(--ic-action-dark-bg-active)}.footer-link-group-title{margin-top:var(--footer-link-group-title-margin-top);margin-bottom:var(--footer-link-group-title-margin-bottom);flex-grow:1}.footer-link-group-toggle{fill:white !important}.footer-link-group-links{display:flex;flex-direction:column}.footer-link-group-header{display:flex;align-items:center}";
+const icFooterLinkGroupCss = "/*! 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(.footer-link-group-sparse){--footer-link-group-margin-right:5.938rem;--footer-link-group-border-bottom:0 solid transparent;--footer-link-group-title-margin-top:0;--footer-link-group-title-margin-bottom:var(--ic-space-md)}:host(.footer-link-group-small){--footer-link-group-margin-right:0;--footer-link-group-title-margin-top:var(--ic-space-md);--footer-link-group-title-margin-bottom:var(--ic-space-md);--footer-link-group-links-padding-left:var(--ic-space-md);--footer-link-group-links-padding-bottom:var(--ic-space-md)}:host(.footer-link-group-light.footer-link-group-small){--footer-link-group-border-bottom:var(--ic-keyline-lighten)}:host(.footer-link-group-dark.footer-link-group-small){--footer-link-group-border-bottom:var(--ic-keyline-darken)}:host(.footer-link-group){margin-right:var(--footer-link-group-margin-right);border-bottom:var(--footer-link-group-border-bottom)}:host(.footer-link-group-small.footer-link-group-light:hover){background-color:var(--ic-action-light-bg-hover);cursor:pointer}:host(.footer-link-group-small.footer-link-group-dark:hover){background-color:var(--ic-action-dark-bg-hover);cursor:pointer}:host(.footer-link-group-sparse:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}:host(.footer-link-group-small:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}:host(.footer-link-group-small.footer-link-group-light:active){background-color:var(--ic-action-light-bg-active)}:host(.footer-link-group-small.footer-link-group-dark:active){background-color:var(--ic-action-dark-bg-active)}:host ic-section-container{outline:none}.footer-link-group-title{margin-top:var(--footer-link-group-title-margin-top);margin-bottom:var(--footer-link-group-title-margin-bottom);flex-grow:1}.footer-link-group-toggle{fill:white !important}.footer-link-group-links{display:flex;flex-direction:column}.footer-link-group-header{display:flex;align-items:center}";
 const FooterLinkGroup = /*@__PURE__*/ proxyCustomElement(class FooterLinkGroup extends HTMLElement {
     constructor() {
@@ -58,7 +58,7 @@ const FooterLinkGroup = /*@__PURE__*/ proxyCustomElement(class FooterLinkGroup e
             }, role: "listitem" }, h("div", { class: "footer-link-group-title" }, h("ic-typography", { variant: "subtitle-small" }, groupTitle)), h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null)))) : (h(Host, { class: {
                 ["footer-link-group footer-link-group-small"]: true,
                 [`footer-link-group-${this.dropdownIconStyle}`]: true,
-            }, tabIndex: "1", onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded }, h("ic-section-container", { fullHeight: true }, h("div", { class: "footer-link-group-header" }, h("div", { class: "footer-link-group-title" }, h("ic-typography", { variant: "label" }, groupTitle)), this.expanded ? (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))) : (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("g", { transform: "translate(0 1200) scale(1 -1)" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))))), this.expanded && (h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null))))));
+            }, onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded, role: "listitem" }, h("ic-section-container", { tabindex: "0", fullHeight: true }, h("div", { class: "footer-link-group-header" }, h("div", { class: "footer-link-group-title" }, h("ic-typography", { variant: "label" }, groupTitle)), this.expanded ? (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))) : (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("g", { transform: "translate(0 1200) scale(1 -1)" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))))), this.expanded && (h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/ic-footer-link-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-footer-link-group.js","mappings":";;;;;AAAA,MAAM,oBAAoB,GAAG,~~41IAA41I~~;;~~MCuB52I~~,eAAe;;;;;QA+ClB,kBAAa,GAAG,CAAC,KAAoB;YAC3C,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;gBAC9C,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;SACF,CAAC;QAEM,mBAAc,GAAG;YACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;SAChC,CAAC;wBApD2B,KAAK;0BACJ,YAAY,CAAC,EAAE;iCAChB,uBAAuB,EAAE;qBAC5B,KAAK;;;IAO/B,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACpC;IAED,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,EACpD,mBAAmB,CACpB,CAAC;KACH;IAGD,mBAAmB;QACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACpC;IAGD,wBAAwB,CAAC,EAAe;QACtC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC;KACrC;IAEO,OAAO,CAAC,CAAc;QAC5B,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE;YAC5B,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;gBAChD,OAAO,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;aAC3D;iBAAM;gBACL,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;aACtC;SACF;aAAM;YACL,OAAO,KAAK,CAAC;SACd;KACF;IAYD,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAEnC,OAAO,CAAC,KAAK,IACX,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,4CAA4C,GAAG,IAAI;gBACpD,CAAC,qBAAqB,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI;aACtD,EACD,IAAI,EAAC,UAAU,IAEf,WAAK,KAAK,EAAC,yBAAyB,IAClC,qBAAe,OAAO,EAAC,gBAAgB,IAAE,UAAU,CAAiB,CAChE,EACN,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,MAAM,IAC9C,eAAQ,CACJ,CACD,KAEP,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,2CAA2C,GAAG,IAAI;gBACnD,CAAC,qBAAqB,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI;aACtD,EACD,~~QAAQ,EAAC,GAAG,EACZ,~~OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,SAAS,EAAE,IAAI,CAAC,aAAa,mBACd,IAAI,CAAC,QAAQ,~~IAE5B~~,4BAAsB,UAAU,EAAE,IAAI,~~IACpC~~,WAAK,KAAK,EAAC,0BAA0B,IACnC,WAAK,KAAK,EAAC,yBAAyB,IAClC,qBAAe,OAAO,EAAC,OAAO,IAAE,UAAU,CAAiB,CACvD,EACL,IAAI,CAAC,QAAQ,IACZ,WACE,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,mBAAmB,EAAC,eAAe,EACnC,OAAO,EAAC,eAAe,IAEvB,YACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,0IAA0I,GAC5I,CACE,KAEN,WACE,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,mBAAmB,EAAC,eAAe,EACnC,OAAO,EAAC,eAAe,IAEvB,SAAG,SAAS,EAAC,+BAA+B,IAC1C,YACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,0IAA0I,GAC5I,CACA,CACA,CACP,CACG,EACL,IAAI,CAAC,QAAQ,KACZ,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,MAAM,IAC9C,eAAQ,CACJ,CACP,CACoB,CAClB,CACR,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-footer-link-group/ic-footer-link-group.css?tag=ic-footer-link-group&encapsulation=shadow","src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-group-sparse) {\n --footer-link-group-margin-right: 5.938rem;\n --footer-link-group-border-bottom: 0 solid transparent;\n --footer-link-group-title-margin-top: 0;\n --footer-link-group-title-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-small) {\n --footer-link-group-margin-right: 0;\n --footer-link-group-title-margin-top: var(--ic-space-md);\n --footer-link-group-title-margin-bottom: var(--ic-space-md);\n --footer-link-group-links-padding-left: var(--ic-space-md);\n --footer-link-group-links-padding-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-light.footer-link-group-small) {\n --footer-link-group-border-bottom: var(--ic-keyline-lighten);\n}\n\n:host(.footer-link-group-dark.footer-link-group-small) {\n --footer-link-group-border-bottom: var(--ic-keyline-darken);\n}\n\n:host(.footer-link-group) {\n margin-right: var(--footer-link-group-margin-right);\n border-bottom: var(--footer-link-group-border-bottom);\n}\n\n:host(.footer-link-group-small.footer-link-group-light:hover) {\n background-color: var(--ic-action-light-bg-hover);\n cursor: pointer;\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:hover) {\n background-color: var(--ic-action-dark-bg-hover);\n cursor: pointer;\n}\n\n:host(.footer-link-group-sparse:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\n:host(.footer-link-group-small:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\n:host(.footer-link-group-small.footer-link-group-light:active) {\n background-color: var(--ic-action-light-bg-active);\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:active) {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n.footer-link-group-title {\n margin-top: var(--footer-link-group-title-margin-top);\n margin-bottom: var(--footer-link-group-title-margin-bottom);\n flex-grow: 1;\n}\n\n.footer-link-group-toggle {\n fill: white !important;\n}\n\n.footer-link-group-links {\n display: flex;\n flex-direction: column;\n}\n\n.footer-link-group-header {\n display: flex;\n align-items: center;\n}\n","import {\n Component,\n Host,\n Element,\n Listen,\n Prop,\n h,\n State,\n} from \"@stencil/core\";\nimport {\n DEVICE_SIZES,\n getThemeForegroundColor,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-footer-link-group\",\n styleUrl: \"ic-footer-link-group.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class FooterLinkGroup {\n @Element() el: HTMLIcFooterLinkGroupElement;\n\n @State() expanded: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() dropdownIconStyle = getThemeForegroundColor();\n @State() small: boolean = false;\n\n /*\n The title of the link group to be displayed.\n */\n @Prop() groupTitle!: string;\n\n componentWillLoad(): void {\n this.small = this.isSmall(this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.groupTitle, propName: \"group-title\" }],\n \"Footer Link Group\"\n );\n }\n\n @Listen(\"footerResized\", { target: \"document\" })\n footerResizeHandler(): void {\n this.small = this.isSmall(this.el);\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n footerThemeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.dropdownIconStyle = theme.mode;\n }\n\n private isSmall(e: HTMLElement): boolean {\n if (e.parentElement !== null) {\n if (e.parentElement.classList.contains(\"footer\")) {\n return e.parentElement.classList.contains(\"footer-small\");\n } else {\n return this.isSmall(e.parentElement);\n }\n } else {\n return false;\n }\n }\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.key === \" \" \|\| event.key === \"Enter\") {\n this.toggleExpanded();\n }\n };\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n render() {\n const { small, groupTitle } = this;\n\n return !small ? (\n <Host\n class={{\n [\"footer-link-group footer-link-group-sparse\"]: true,\n [`footer-link-group-${this.dropdownIconStyle}`]: true,\n }}\n role=\"listitem\"\n >\n <div class=\"footer-link-group-title\">\n <ic-typography variant=\"subtitle-small\">{groupTitle}</ic-typography>\n </div>\n <div class=\"footer-link-group-links\" role=\"list\">\n <slot />\n </div>\n </Host>\n ) : (\n <Host\n class={{\n [\"footer-link-group footer-link-group-small\"]: true,\n [`footer-link-group-${this.dropdownIconStyle}`]: true,\n }}\n ~~tabIndex=\"1\"\n~~ onClick={this.toggleExpanded}\n onKeydown={this.handleKeydown}\n aria-expanded={this.expanded}\n >\n <ic-section-container fullHeight={true}>\n <div class=\"footer-link-group-header\">\n <div class=\"footer-link-group-title\">\n <ic-typography variant=\"label\">{groupTitle}</ic-typography>\n </div>\n {this.expanded ? (\n <svg\n class=\"footer-link-group-toggle\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"img\"\n width=\"1em\"\n height=\"1em\"\n preserveAspectRatio=\"xMidYMid meet\"\n viewBox=\"0 0 1200 1200\"\n >\n <path\n fill=\"currentColor\"\n d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n />\n </svg>\n ) : (\n <svg\n class=\"footer-link-group-toggle\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"img\"\n width=\"1em\"\n height=\"1em\"\n preserveAspectRatio=\"xMidYMid meet\"\n viewBox=\"0 0 1200 1200\"\n >\n <g transform=\"translate(0 1200) scale(1 -1)\">\n <path\n fill=\"currentColor\"\n d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n />\n </g>\n </svg>\n )}\n </div>\n {this.expanded && (\n <div class=\"footer-link-group-links\" role=\"list\">\n <slot />\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-footer-link-group.js","mappings":"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","names":[],"sources":["src/components/ic-footer-link-group/ic-footer-link-group.css?tag=ic-footer-link-group&encapsulation=shadow","src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-group-sparse) {\n --footer-link-group-margin-right: 5.938rem;\n --footer-link-group-border-bottom: 0 solid transparent;\n --footer-link-group-title-margin-top: 0;\n --footer-link-group-title-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-small) {\n --footer-link-group-margin-right: 0;\n --footer-link-group-title-margin-top: var(--ic-space-md);\n --footer-link-group-title-margin-bottom: var(--ic-space-md);\n --footer-link-group-links-padding-left: var(--ic-space-md);\n --footer-link-group-links-padding-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-light.footer-link-group-small) {\n --footer-link-group-border-bottom: var(--ic-keyline-lighten);\n}\n\n:host(.footer-link-group-dark.footer-link-group-small) {\n --footer-link-group-border-bottom: var(--ic-keyline-darken);\n}\n\n:host(.footer-link-group) {\n margin-right: var(--footer-link-group-margin-right);\n border-bottom: var(--footer-link-group-border-bottom);\n}\n\n:host(.footer-link-group-small.footer-link-group-light:hover) {\n background-color: var(--ic-action-light-bg-hover);\n cursor: pointer;\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:hover) {\n background-color: var(--ic-action-dark-bg-hover);\n cursor: pointer;\n}\n\n:host(.footer-link-group-sparse:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\n:host(.footer-link-group-small:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\n:host(.footer-link-group-small.footer-link-group-light:active) {\n background-color: var(--ic-action-light-bg-active);\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:active) {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host ic-section-container {\n outline: none;\n}\n\n.footer-link-group-title {\n margin-top: var(--footer-link-group-title-margin-top);\n margin-bottom: var(--footer-link-group-title-margin-bottom);\n flex-grow: 1;\n}\n\n.footer-link-group-toggle {\n fill: white !important;\n}\n\n.footer-link-group-links {\n display: flex;\n flex-direction: column;\n}\n\n.footer-link-group-header {\n display: flex;\n align-items: center;\n}\n","import {\n Component,\n Host,\n Element,\n Listen,\n Prop,\n h,\n State,\n} from \"@stencil/core\";\nimport {\n DEVICE_SIZES,\n getThemeForegroundColor,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-footer-link-group\",\n styleUrl: \"ic-footer-link-group.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class FooterLinkGroup {\n @Element() el: HTMLIcFooterLinkGroupElement;\n\n @State() expanded: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() dropdownIconStyle = getThemeForegroundColor();\n @State() small: boolean = false;\n\n /*\n The title of the link group to be displayed.\n */\n @Prop() groupTitle!: string;\n\n componentWillLoad(): void {\n this.small = this.isSmall(this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.groupTitle, propName: \"group-title\" }],\n \"Footer Link Group\"\n );\n }\n\n @Listen(\"footerResized\", { target: \"document\" })\n footerResizeHandler(): void {\n this.small = this.isSmall(this.el);\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n footerThemeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.dropdownIconStyle = theme.mode;\n }\n\n private isSmall(e: HTMLElement): boolean {\n if (e.parentElement !== null) {\n if (e.parentElement.classList.contains(\"footer\")) {\n return e.parentElement.classList.contains(\"footer-small\");\n } else {\n return this.isSmall(e.parentElement);\n }\n } else {\n return false;\n }\n }\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.key === \" \" \|\| event.key === \"Enter\") {\n this.toggleExpanded();\n }\n };\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n render() {\n const { small, groupTitle } = this;\n\n return !small ? (\n <Host\n class={{\n [\"footer-link-group footer-link-group-sparse\"]: true,\n [`footer-link-group-${this.dropdownIconStyle}`]: true,\n }}\n role=\"listitem\"\n >\n <div class=\"footer-link-group-title\">\n <ic-typography variant=\"subtitle-small\">{groupTitle}</ic-typography>\n </div>\n <div class=\"footer-link-group-links\" role=\"list\">\n <slot />\n </div>\n </Host>\n ) : (\n <Host\n class={{\n [\"footer-link-group footer-link-group-small\"]: true,\n [`footer-link-group-${this.dropdownIconStyle}`]: true,\n }}\n onClick={this.toggleExpanded}\n onKeydown={this.handleKeydown}\n aria-expanded={this.expanded}\n role=\"listitem\"\n >\n <ic-section-container tabindex=\"0\" fullHeight={true}>\n <div class=\"footer-link-group-header\">\n <div class=\"footer-link-group-title\">\n <ic-typography variant=\"label\">{groupTitle}</ic-typography>\n </div>\n {this.expanded ? (\n <svg\n class=\"footer-link-group-toggle\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"img\"\n width=\"1em\"\n height=\"1em\"\n preserveAspectRatio=\"xMidYMid meet\"\n viewBox=\"0 0 1200 1200\"\n >\n <path\n fill=\"currentColor\"\n d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n />\n </svg>\n ) : (\n <svg\n class=\"footer-link-group-toggle\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"img\"\n width=\"1em\"\n height=\"1em\"\n preserveAspectRatio=\"xMidYMid meet\"\n viewBox=\"0 0 1200 1200\"\n >\n <g transform=\"translate(0 1200) scale(1 -1)\">\n <path\n fill=\"currentColor\"\n d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n />\n </g>\n </svg>\n )}\n </div>\n {this.expanded && (\n <div class=\"footer-link-group-links\" role=\"list\">\n <slot />\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-menu-item2.js CHANGED Viewed

@@ -29,10 +29,7 @@ const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLEle
                     checked: this.toggleChecked,
                 });
             }
-            this.handleMenuItemClick.emit({
-                label: this.label,
-                hasSubMenu: !!this.el.submenuTriggerFor,
-            });
+            this.handleMenuItemClick.emit(this.el);
         };
         this.getMenuItemAriaLabel = () => {
             let ariaLabel = this.label;

package/dist/components/ic-menu-item2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-menu-item2.js","mappings":"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","names":["Check","Chevron"],"sources":["src/components/ic-menu-item/ic-menu-item.css?tag=ic-menu-item&encapsulation=shadow","src/components/ic-menu-item/ic-menu-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nli {\n list-style: none;\n padding: 0;\n}\n\n:host ::part(button) {\n color: var(--ic-color-primary-text);\n padding: calc(var(--ic-space-xxxs) / 2);\n display: flex;\n align-items: flex-start;\n gap: var(--ic-space-xs);\n border-radius: 0;\n min-height: 2.5rem;\n height: auto;\n}\n\n.focus-border {\n display: flex;\n align-items: flex-start;\n gap: var(--ic-space-xs);\n border-radius: var(--ic-border-radius);\n margin: calc(var(--ic-space-xxxs) / 2);\n padding: var(--ic-space-xxs);\n border: var(--ic-space-xxxs) dashed transparent;\n\n --icon-height: auto;\n}\n\n:host(.disabled) ::part(button) {\n color: var(--ic-architectural-200) !important;\n pointer-events: none;\n}\n\n:host(.disabled) .menu-item-label,\n:host(.disabled) .shortcut,\n:host(.disabled) .menu-item-description {\n color: var(--ic-architectural-200) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button) {\n color: var(--ic-action-destructive);\n}\n\n:host ::part(button):hover {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host ::part(button):focus-visible,\n:host ::part(button):focus {\n color: var(--ic-color-white-text);\n background-color: var(--ic-focus-blue);\n box-shadow: none;\n}\n\n:host(.disabled) ::part(button):focus-visible,\n:host(.disabled) ::part(button):focus {\n color: var(--ic-theme-lighten-40) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):focus-visible,\n:host([variant=\"destructive\"]) ::part(button):focus {\n background-color: var(--ic-action-destructive);\n}\n\nic-button:focus-within .menu-item-label,\nic-button:focus-within .shortcut,\nic-button:focus-within .menu-item-description {\n color: var(--ic-color-white-text);\n}\n\n:host(.disabled) ic-button:focus-within .focus-border {\n border-color: var(--ic-architectural-white);\n}\n\n:host(.disabled) ic-button:focus-within .menu-item-label,\n:host(.disabled) ic-button:focus-within .shortcut,\n:host(.disabled) ic-button:focus-within .menu-item-description {\n color: var(--ic-theme-lighten-40) !important;\n}\n\n:host ::part(button):active {\n background-color: var(--ic-action-dark-bg-active);\n color: var(--ic-color-primary-text) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):active {\n background-color: var(--ic-action-dark-bg-active);\n color: var(--ic-action-destructive) !important;\n}\n\n.menu-item-info {\n display: flex;\n flex-direction: column;\n flex: 1;\n align-items: baseline;\n white-space: pre-line;\n text-align: left;\n}\n\n.menu-labels {\n display: flex;\n align-items: baseline;\n gap: var(--ic-space-xs);\n}\n\n.menu-item-description {\n color: var(--ic-color-secondary-text);\n}\n\n.shortcut {\n color: var(--ic-color-tertiary-text);\n display: flex;\n flex: min-content;\n}\n\n:host([variant=\"destructive\"]) .menu-item-label {\n text-transform: uppercase;\n font-weight: 600;\n letter-spacing: 0.025em;\n}\n\nic-button:active .menu-item-label {\n color: var(--ic-color-primary-text);\n}\n\nic-button:active .menu-item-description {\n color: var(--ic-color-secondary-text);\n}\n\nic-button:active .shortcut {\n color: var(--ic-color-tertiary-text);\n}\n\n:host([variant=\"destructive\"]) ic-button:active .menu-item-label {\n color: var(--ic-action-destructive) !important;\n}\n\n.icon,\n.check-icon,\n.submenu-icon,\n.icon ::slotted(svg),\n.check-icon svg,\n.submenu-icon svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.check-icon.hide {\n visibility: hidden;\n}\n\n/ High Contrast /\n@media (forced-colors: active) {\n :host ::part(button) {\n border: canvas;\n }\n\n :host ::part(button):focus-visible {\n outline: var(--ic-space-xxxs) solid transparent;\n }\n\n .focus-border {\n border-color: canvas;\n }\n\n :host(.disabled) ic-button:focus-within .focus-border {\n border-color: GrayText;\n }\n\n :host(.disabled) .menu-item-info,\n :host(.disabled) .menu-item-label,\n :host(.disabled) .shortcut,\n :host(.disabled) .menu-item-description,\n :host(.disabled) ic-button:focus-within .menu-item-info,\n :host(.disabled) ic-button:focus-within .menu-item-label,\n :host(.disabled) ic-button:focus-within .shortcut,\n :host(.disabled) ic-button:focus-within .menu-item-description {\n color: GrayText !important;\n }\n\n :host(.disabled) ::part(button):focus-visible,\n :host(.disabled) ::part(button):focus {\n outline-color: GrayText !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n} from \"@stencil/core\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/*\n @slot icon - Content will be placed to the left of the menu item label.\n /\n\n@Component({\n tag: \"ic-menu-item\",\n styleUrl: \"ic-menu-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class MenuItem {\n @Element() el: HTMLIcMenuItemElement;\n\n /\n The description displayed in the menu item, below the label.\n /\n @Prop() description?: string;\n\n /\n If `true`, the menu item will be in disabled state.\n /\n @Prop() disabled?: boolean = false;\n\n /\n The URL that the link points to. This will render the menu item as an \"a\" tag.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n The label describing the keyboard shortcut for a menu item's action.\n /\n @Prop() keyboardShortcut?: string;\n\n /\n The label to display in the menu item.\n /\n @Prop() label!: 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 This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n /\n @Prop() submenuTriggerFor?: 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 If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.\n /\n @Prop({ mutable: true, reflect: true }) toggleChecked: boolean = false;\n\n /\n The variant of the menu item.\n /\n @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n \"default\";\n\n /\n @internal Emitted when item loses focus.\n /\n @Event() childBlur: EventEmitter<void>;\n\n /\n @internal Emitted when the user clicks a menu item.\n /\n @Event() handleMenuItemClick: EventEmitter<{\n label: string;\n hasSubMenu: boolean;\n }>;\n\n /\n Emitted when the user clicks a menu item that is set to the toggle variant.\n /\n @Event() icToggleChecked: EventEmitter<{\n checked: boolean;\n }>;\n\n /\n @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n */\n @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n componentWillLoad(): void {\n // This ensures that trigger menu items are always set to the default variant\n if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n this.variant = \"default\";\n }\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Menu Item\"\n );\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(e: Event): void {\n if (this.disabled) {\n e.stopImmediatePropagation();\n }\n }\n\n private handleClick = (e: Event): void => {\n if (isPropDefined(this.submenuTriggerFor)) {\n this.triggerPopoverMenuInstance.emit();\n } else if (this.variant === \"toggle\") {\n e.preventDefault();\n this.toggleChecked = !this.toggleChecked;\n this.icToggleChecked.emit({\n checked: this.toggleChecked,\n });\n }\n this.handleMenuItemClick.emit({\n label: this.label,\n hasSubMenu: !!this.el.submenuTriggerFor,\n });\n };\n\n private getMenuItemAriaLabel = (): string => {\n let ariaLabel = this.label;\n\n if (isPropDefined(this.description)) {\n ariaLabel = `${ariaLabel}, ${this.description}`;\n }\n\n if (isPropDefined(this.keyboardShortcut)) {\n ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n }\n\n if (this.variant === \"destructive\") {\n ariaLabel = `${ariaLabel}, destructive`;\n }\n\n if (isPropDefined(this.submenuTriggerFor)) {\n ariaLabel = `${ariaLabel}, triggers submenu`;\n }\n\n if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n ariaLabel = \"Go back to parent menu\";\n }\n const parentEl = this.el.parentElement;\n\n if (\n parentEl.tagName === \"IC-MENU-GROUP\" &&\n (parentEl as HTMLIcMenuGroupElement).label\n ) {\n return `${ariaLabel}, ${\n (parentEl as HTMLIcMenuGroupElement).label\n } menu group`;\n } else {\n return ariaLabel;\n }\n };\n\n render() {\n // A sub-component to layout the menu information correctly in ic-button\n const MenuItemInformation = () => {\n return (\n <div class=\"menu-item-info\">\n <div class=\"menu-labels\">\n <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n {this.keyboardShortcut && (\n <ic-typography variant=\"caption\" class=\"shortcut\">\n {this.keyboardShortcut}\n </ic-typography>\n )}\n </div>\n {this.description && (\n <ic-typography class=\"menu-item-description\" variant=\"caption\">\n {this.description}\n </ic-typography>\n )}\n </div>\n );\n };\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled,\n }}\n >\n <li\n role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n aria-disabled={`${this.disabled}`}\n aria-checked={\n this.variant === \"toggle\"\n ? this.toggleChecked\n ? \"true\"\n : \"false\"\n : undefined\n }\n >\n <ic-button\n fullWidth\n variant=\"tertiary\"\n onClick={this.handleClick}\n href={isPropDefined(this.href)}\n hreflang={isPropDefined(this.hreflang)}\n target={isPropDefined(this.target)}\n rel={isPropDefined(this.rel)}\n referrerpolicy={\n this.referrerpolicy !== undefined ? this.referrerpolicy : null\n }\n aria-disabled={`${this.disabled}`}\n aria-label={this.getMenuItemAriaLabel()}\n aria-haspopup={\n isPropDefined(this.submenuTriggerFor) \|\|\n this.el.classList.contains(\"ic-popover-submenu-back-button\")\n ? \"menu\"\n : false\n }\n >\n <div class=\"focus-border\">\n {isSlotUsed(this.el, \"icon\") && (\n <span class=\"icon\">\n <slot name=\"icon\"></slot>\n </span>\n )}\n <MenuItemInformation />\n {this.variant === \"toggle\" && (\n <span\n class={{\n [\"check-icon\"]: true,\n [\"hide\"]: !this.toggleChecked,\n }}\n aria-hidden=\"true\"\n innerHTML={Check}\n />\n )}\n {isPropDefined(this.submenuTriggerFor) && (\n <span\n class={{ [\"submenu-icon\"]: true }}\n aria-hidden=\"true\"\n innerHTML={Chevron}\n />\n )}\n </div>\n </ic-button>\n </li>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-menu-item2.js","mappings":"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","names":["Check","Chevron"],"sources":["src/components/ic-menu-item/ic-menu-item.css?tag=ic-menu-item&encapsulation=shadow","src/components/ic-menu-item/ic-menu-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nli {\n list-style: none;\n padding: 0;\n}\n\n:host ::part(button) {\n color: var(--ic-color-primary-text);\n padding: calc(var(--ic-space-xxxs) / 2);\n display: flex;\n align-items: flex-start;\n gap: var(--ic-space-xs);\n border-radius: 0;\n min-height: 2.5rem;\n height: auto;\n}\n\n.focus-border {\n display: flex;\n align-items: flex-start;\n gap: var(--ic-space-xs);\n border-radius: var(--ic-border-radius);\n margin: calc(var(--ic-space-xxxs) / 2);\n padding: var(--ic-space-xxs);\n border: var(--ic-space-xxxs) dashed transparent;\n\n --icon-height: auto;\n}\n\n:host(.disabled) ::part(button) {\n color: var(--ic-architectural-200) !important;\n pointer-events: none;\n}\n\n:host(.disabled) .menu-item-label,\n:host(.disabled) .shortcut,\n:host(.disabled) .menu-item-description {\n color: var(--ic-architectural-200) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button) {\n color: var(--ic-action-destructive);\n}\n\n:host ::part(button):hover {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host ::part(button):focus-visible,\n:host ::part(button):focus {\n color: var(--ic-color-white-text);\n background-color: var(--ic-focus-blue);\n box-shadow: none;\n}\n\n:host(.disabled) ::part(button):focus-visible,\n:host(.disabled) ::part(button):focus {\n color: var(--ic-theme-lighten-40) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):focus-visible,\n:host([variant=\"destructive\"]) ::part(button):focus {\n background-color: var(--ic-action-destructive);\n}\n\nic-button:focus-within .menu-item-label,\nic-button:focus-within .shortcut,\nic-button:focus-within .menu-item-description {\n color: var(--ic-color-white-text);\n}\n\n:host(.disabled) ic-button:focus-within .focus-border {\n border-color: var(--ic-architectural-white);\n}\n\n:host(.disabled) ic-button:focus-within .menu-item-label,\n:host(.disabled) ic-button:focus-within .shortcut,\n:host(.disabled) ic-button:focus-within .menu-item-description {\n color: var(--ic-theme-lighten-40) !important;\n}\n\n:host ::part(button):active {\n background-color: var(--ic-action-dark-bg-active);\n color: var(--ic-color-primary-text) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):active {\n background-color: var(--ic-action-dark-bg-active);\n color: var(--ic-action-destructive) !important;\n}\n\n.menu-item-info {\n display: flex;\n flex-direction: column;\n flex: 1;\n align-items: baseline;\n white-space: pre-line;\n text-align: left;\n}\n\n.menu-labels {\n display: flex;\n align-items: baseline;\n gap: var(--ic-space-xs);\n}\n\n.menu-item-description {\n color: var(--ic-color-secondary-text);\n}\n\n.shortcut {\n color: var(--ic-color-tertiary-text);\n display: flex;\n flex: min-content;\n}\n\n:host([variant=\"destructive\"]) .menu-item-label {\n text-transform: uppercase;\n font-weight: 600;\n letter-spacing: 0.025em;\n}\n\nic-button:active .menu-item-label {\n color: var(--ic-color-primary-text);\n}\n\nic-button:active .menu-item-description {\n color: var(--ic-color-secondary-text);\n}\n\nic-button:active .shortcut {\n color: var(--ic-color-tertiary-text);\n}\n\n:host([variant=\"destructive\"]) ic-button:active .menu-item-label {\n color: var(--ic-action-destructive) !important;\n}\n\n.icon,\n.check-icon,\n.submenu-icon,\n.icon ::slotted(svg),\n.check-icon svg,\n.submenu-icon svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.check-icon.hide {\n visibility: hidden;\n}\n\n/ High Contrast /\n@media (forced-colors: active) {\n :host ::part(button) {\n border: canvas;\n }\n\n :host ::part(button):focus-visible {\n outline: var(--ic-space-xxxs) solid transparent;\n }\n\n .focus-border {\n border-color: canvas;\n }\n\n :host(.disabled) ic-button:focus-within .focus-border {\n border-color: GrayText;\n }\n\n :host(.disabled) .menu-item-info,\n :host(.disabled) .menu-item-label,\n :host(.disabled) .shortcut,\n :host(.disabled) .menu-item-description,\n :host(.disabled) ic-button:focus-within .menu-item-info,\n :host(.disabled) ic-button:focus-within .menu-item-label,\n :host(.disabled) ic-button:focus-within .shortcut,\n :host(.disabled) ic-button:focus-within .menu-item-description {\n color: GrayText !important;\n }\n\n :host(.disabled) ::part(button):focus-visible,\n :host(.disabled) ::part(button):focus {\n outline-color: GrayText !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n} from \"@stencil/core\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/*\n @slot icon - Content will be placed to the left of the menu item label.\n /\n\n@Component({\n tag: \"ic-menu-item\",\n styleUrl: \"ic-menu-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class MenuItem {\n @Element() el: HTMLIcMenuItemElement;\n\n /\n The description displayed in the menu item, below the label.\n /\n @Prop() description?: string;\n\n /\n If `true`, the menu item will be in disabled state.\n /\n @Prop() disabled?: boolean = false;\n\n /\n The URL that the link points to. This will render the menu item as an \"a\" tag.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n The label describing the keyboard shortcut for a menu item's action.\n /\n @Prop() keyboardShortcut?: string;\n\n /\n The label to display in the menu item.\n /\n @Prop() label!: 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 This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n /\n @Prop() submenuTriggerFor?: 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 If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.\n /\n @Prop({ mutable: true, reflect: true }) toggleChecked: boolean = false;\n\n /\n The variant of the menu item.\n /\n @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n \"default\";\n\n /\n @internal Emitted when item loses focus.\n /\n @Event() childBlur: EventEmitter<void>;\n\n /\n @internal Emitted when the user clicks a menu item.\n /\n @Event() handleMenuItemClick: EventEmitter<HTMLIcMenuItemElement>;\n\n /\n Emitted when the user clicks a menu item that is set to the toggle variant.\n /\n @Event() icToggleChecked: EventEmitter<{\n checked: boolean;\n }>;\n\n /\n @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n */\n @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n componentWillLoad(): void {\n // This ensures that trigger menu items are always set to the default variant\n if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n this.variant = \"default\";\n }\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Menu Item\"\n );\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(e: Event): void {\n if (this.disabled) {\n e.stopImmediatePropagation();\n }\n }\n\n private handleClick = (e: Event): void => {\n if (isPropDefined(this.submenuTriggerFor)) {\n this.triggerPopoverMenuInstance.emit();\n } else if (this.variant === \"toggle\") {\n e.preventDefault();\n this.toggleChecked = !this.toggleChecked;\n this.icToggleChecked.emit({\n checked: this.toggleChecked,\n });\n }\n this.handleMenuItemClick.emit(this.el);\n };\n\n private getMenuItemAriaLabel = (): string => {\n let ariaLabel = this.label;\n\n if (isPropDefined(this.description)) {\n ariaLabel = `${ariaLabel}, ${this.description}`;\n }\n\n if (isPropDefined(this.keyboardShortcut)) {\n ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n }\n\n if (this.variant === \"destructive\") {\n ariaLabel = `${ariaLabel}, destructive`;\n }\n\n if (isPropDefined(this.submenuTriggerFor)) {\n ariaLabel = `${ariaLabel}, triggers submenu`;\n }\n\n if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n ariaLabel = \"Go back to parent menu\";\n }\n const parentEl = this.el.parentElement;\n\n if (\n parentEl.tagName === \"IC-MENU-GROUP\" &&\n (parentEl as HTMLIcMenuGroupElement).label\n ) {\n return `${ariaLabel}, ${\n (parentEl as HTMLIcMenuGroupElement).label\n } menu group`;\n } else {\n return ariaLabel;\n }\n };\n\n render() {\n // A sub-component to layout the menu information correctly in ic-button\n const MenuItemInformation = () => {\n return (\n <div class=\"menu-item-info\">\n <div class=\"menu-labels\">\n <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n {this.keyboardShortcut && (\n <ic-typography variant=\"caption\" class=\"shortcut\">\n {this.keyboardShortcut}\n </ic-typography>\n )}\n </div>\n {this.description && (\n <ic-typography class=\"menu-item-description\" variant=\"caption\">\n {this.description}\n </ic-typography>\n )}\n </div>\n );\n };\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled,\n }}\n >\n <li\n role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n aria-disabled={`${this.disabled}`}\n aria-checked={\n this.variant === \"toggle\"\n ? this.toggleChecked\n ? \"true\"\n : \"false\"\n : undefined\n }\n >\n <ic-button\n fullWidth\n variant=\"tertiary\"\n onClick={this.handleClick}\n href={isPropDefined(this.href)}\n hreflang={isPropDefined(this.hreflang)}\n target={isPropDefined(this.target)}\n rel={isPropDefined(this.rel)}\n referrerpolicy={\n this.referrerpolicy !== undefined ? this.referrerpolicy : null\n }\n aria-disabled={`${this.disabled}`}\n aria-label={this.getMenuItemAriaLabel()}\n aria-haspopup={\n isPropDefined(this.submenuTriggerFor) \|\|\n this.el.classList.contains(\"ic-popover-submenu-back-button\")\n ? \"menu\"\n : false\n }\n >\n <div class=\"focus-border\">\n {isSlotUsed(this.el, \"icon\") && (\n <span class=\"icon\">\n <slot name=\"icon\"></slot>\n </span>\n )}\n <MenuItemInformation />\n {this.variant === \"toggle\" && (\n <span\n class={{\n [\"check-icon\"]: true,\n [\"hide\"]: !this.toggleChecked,\n }}\n aria-hidden=\"true\"\n innerHTML={Check}\n />\n )}\n {isPropDefined(this.submenuTriggerFor) && (\n <span\n class={{ [\"submenu-icon\"]: true }}\n aria-hidden=\"true\"\n innerHTML={Chevron}\n />\n )}\n </div>\n </ic-button>\n </li>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-navigation-item.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, forceUpdate, Host } from '@stencil/core/internal/client';
-import { i as isSlotUsed, D as DEVICE_SIZES, n as getThemeForegroundColor, p as getCurrentDeviceSize, J as getNavItemParentDetails } from './helpers.js';
+import { l as getCssProperty, i as isSlotUsed, D as DEVICE_SIZES, n as getThemeForegroundColor, p as getCurrentDeviceSize, J as getNavItemParentDetails } from './helpers.js';
 import { c as chevronIcon } from './chevron-icon.js';
 import { O as OpenInNew } from './OpenInNew.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
@@ -16,6 +16,7 @@ const NavigationItem = /*@__PURE__*/ proxyCustomElement(class NavigationItem ext
         this.navItemClicked = createEvent(this, "navItemClicked", 7);
         this.isInitialRender = true;
         this.hostMutationObserver = null;
+        this.ANIMATION_DURATION = parseInt(getCssProperty("--ic-transition-duration-slow")) || 0;
         this.ARIA_LABEL_STRING = "aria-label";
         this.displayDefaultNavigationItem = (href, hreflang, target, rel, referrerpolicy, download, label) => {
             const variant = this.isTopNavChild || this.inTopNavSideMenu ? "body" : "label";
@@ -40,6 +41,7 @@ const NavigationItem = /*@__PURE__*/ proxyCustomElement(class NavigationItem ext
             const { sideNavExpanded, sideNavMobile } = detail;
             this.sideNavExpanded = sideNavExpanded;
             this.isSideNavMobile = sideNavMobile;
+            this.sideNavToggleTooltip(!(sideNavExpanded || sideNavMobile));
         };
         this.handleBlur = ({ relatedTarget }) => {
             if (relatedTarget === null ||
@@ -84,6 +86,24 @@ const NavigationItem = /*@__PURE__*/ proxyCustomElement(class NavigationItem ext
             }
             return h("slot", null);
         };
+        // Displays tooltip only once the collapsing animation is finished
+        this.sideNavToggleTooltip = (showTooltip) => {
+            const tooltip = this.el.shadowRoot.querySelector("ic-tooltip");
+            const collapsedClass = "tooltip-navigation-item-side-nav-collapsed";
+            let timer;
+            if (tooltip) {
+                if (showTooltip) {
+                    tooltip.displayTooltip(false); // Hides tooltip for when mouse is hovering over icon
+                    timer = setTimeout(() => {
+                        tooltip.classList.add(collapsedClass);
+                    }, this.ANIMATION_DURATION);
+                }
+                else {
+                    clearTimeout(timer);
+                    tooltip.classList.remove(collapsedClass);
+                }
+            }
+        };
         this.deviceSize = DEVICE_SIZES.XL;
         this.focusStyle = getThemeForegroundColor();
         this.inTopNavSideMenu = false;
@@ -116,10 +136,14 @@ const NavigationItem = /*@__PURE__*/ proxyCustomElement(class NavigationItem ext
         (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
+        var _a, _b;
         const { navType, parent } = getNavItemParentDetails(this.el);
         this.navigationType = navType;
         this.parentEl = parent;
         this.deviceSize = getCurrentDeviceSize();
+        this.sideNavExpanded =
+            ((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.classList.contains("sm-expanded")) ||
+                ((_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.classList.contains("xs-menu-open"));
         if (this.navigationType === "side") {
             this.parentEl.addEventListener("sideNavExpanded", this.sideNavExpandHandler);
         }
@@ -182,8 +206,7 @@ const NavigationItem = /*@__PURE__*/ proxyCustomElement(class NavigationItem ext
                 ["expandable"]: this.expandable,
             }, onBlur: isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null, onClick: this.handleClick, "aria-current": selected ? "page" : null, role: "listitem" }, h("ic-tooltip", { label: this.generateTooltipLabel(), target: "navigation-item", placement: "right", class: {
                 ["tooltip-navigation-item"]: true,
-                ["tooltip-navigation-item-side-nav-collapsed"]: (!this.sideNavExpanded || this.displayNavigationTooltip) &&
-                    this.navigationType === "side",
+                ["tooltip-navigation-item-side-nav-collapsed"]: this.displayNavigationTooltip && this.navigationType === "side",
                 ["tooltip-long-label-navigation-item-side-nav-expanded"]: this.el.hasAttribute("[display-navigation-tooltip = 'true']"),
             } }, this.renderNavigationItemContent())));
     }