npm - @ukic/canary-web-components - Versions diffs - 3.0.0-canary.33 → 3.0.0-canary.35 - Mend

@ukic/canary-web-components 3.0.0-canary.33 → 3.0.0-canary.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (946) hide show

package/dist/core/p-f65f0065.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["icButtonCss","IcButtonStyle0","buttonIds","Button","constructor","hostRef","this","buttonIdNum","hasTooltip","inheritedAttributes","describedbyEl","mutationObserver","hostMutationObserver","ariaLabel","title","accept","disabled","disableTooltip","download","dropdown","dropdownExpanded","fileUpload","fileInputName","fullWidth","loading","monochrome","multiple","size","theme","tooltipFixedPositioning","tooltipPlacement","transparentBackground","type","variant","getSlottedIcon","position","el","querySelector","handleClick","hasRouterSlot","form","closest","document","handleHiddenFormButtonClick","handleKeyDown","ev","key","closeButtonTooltip","onFocus","icFocus","emit","onBlur","icBlur","updateAriaDescribedbyClone","describedbyNode","wrapper","_a","shadowRoot","_b","appendChild","Object","assign","createElement","id","className","firstChild","remove","mutationCallback","cloneNode","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","attribute","getAttribute","IC_INHERITED_ARIA","includes","forceUpdate","setHasTooltip","isIconVariant","startsWith","arrangeRouterItem","setStyles","element","styles","entries","value","style","setProperty","routerSlot","icTypography","gap","icon","iconSlot","iconWrapper","fill","display","marginPlacement","append","badge","label","textContent","trim","watchDescribedbyNodeHandler","watchDisabledHandler","removeDisabledFalse","watchVariantHandler","newVariant","disconnectedCallback","disconnect","componentWillUpdate","getBoundingClientRect","width","componentWillLoad","inheritAttributes","restInheritedAttributes","__rest","setAttribute","describedById","componentDidLoad","updateTheme","MutationObserver","observe","characterData","childList","subtree","attributes","componentWillRender","iconEl","handleHostClick","event","renderFileHiddenInput","icFileSelection","selectedFiles","stopImmediatePropagation","brandChangeHandler","detail","mode","setFocus","buttonEl","focus","tooltip","isTooltipVisible","displayTooltip","preventDefault","foregroundColor","getBrandFromContext","IcBrandForegroundEnum","Default","Light","Dark","render","ariaControlsId","ariaOwnsId","formaction","formenctype","formmethod","formnovalidate","formtarget","href","hreflang","referrerpolicy","rel","target","TagType","buttonAttrs","buttonId","undefined","describedby","hasLeftIcon","hasRightIcon","ButtonContent","h","name","class","tabindex","ref","part","Fragment","innerHTML","arrowDropdown","Host","background","isSlotUsed","onClick","onKeyDown","placement","fixedPositioning","silent"],"sources":["../web-components/src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","../web-components/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 --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(.ic-button-disabled),\n:host(.ic-button-disabled) .button,\n:host(.ic-button-disabled) ::slotted(a),\n:host(.ic-button-loading),\n:host(.ic-button-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(.ic-button-variant-primary) .button,\n:host(.ic-button-variant-icon-primary) .button {\n color: var(--ic-button-primary-text);\n background-color: var(--ic-button-primary-background);\n}\n\n:host(.ic-button-variant-primary:not(.ic-button-disabled)) ::slotted(svg) {\n color: var(--ic-button-primary-icon);\n}\n\n:host(.ic-button-variant-primary) ::slotted(a),\n:host(.ic-button-variant-icon-primary) ::slotted(a) {\n --ic-typography-color: var(--ic-button-primary-text);\n\n color: var(--ic-button-primary-text);\n background-color: var(--ic-button-primary-background) !important;\n}\n\n:host(.ic-button-variant-primary) .button:hover,\n:host(.ic-button-variant-icon-primary) .button:hover {\n background-color: var(--ic-button-primary-background-hover);\n}\n\n:host(.ic-button-variant-primary) ::slotted(a:hover),\n:host(.ic-button-variant-icon-primary) ::slotted(a:hover) {\n background-color: var(--ic-button-primary-background-hover) !important;\n}\n\n:host(.ic-button-variant-primary.ic-button-loading) .button,\n:host(.ic-button-variant-primary) .button:active,\n:host(.ic-button-variant-icon-primary.ic-button-loading) .button,\n:host(.ic-button-variant-icon-primary) .button:active {\n background-color: var(--ic-button-primary-background-pressed);\n\n --button-loading-inner-color: var(--ic-button-primary-text);\n --button-loading-outer-color: var(--ic-button-primary-background-pressed);\n}\n\n:host(.ic-button-variant-primary) ::slotted(a:active),\n:host(.ic-button-variant-icon-primary) ::slotted(a:active) {\n background-color: var(--ic-button-primary-background-pressed) !important;\n}\n\n:host(.ic-button-variant-primary.ic-button-disabled) .button,\n:host(.ic-button-variant-icon-primary.ic-button-disabled) .button {\n background: var(--ic-button-primary-background-disabled);\n color: var(--ic-button-primary-text-disabled);\n}\n\n:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a),\n:host(.ic-button-variant-icon-primary.ic-button-disabled) ::slotted(a) {\n background: var(--ic-button-primary-background-disabled) !important;\n\n --ic-typography-color: var(--ic-button-primary-text-disabled) !important;\n\n color: var(--ic-button-primary-text-disabled) !important;\n}\n\n/* Primary - monochrome */\n\n:host(.ic-button-variant-primary.monochrome) .button,\n:host(.ic-button-variant-icon-primary.monochrome) .button {\n color: var(--ic-button-primary-text-monochrome);\n background-color: var(--ic-button-primary-background-monochrome);\n}\n\n:host(.ic-button-variant-primary.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a) {\n background-color: var(--ic-button-primary-background-monochrome) !important;\n}\n\n:host(.ic-button-variant-primary.monochrome) .button:hover,\n:host(.ic-button-variant-icon-primary.monochrome) .button:hover {\n background-color: var(--ic-button-primary-background-hover-monochrome);\n}\n\n:host(.ic-button-variant-primary.monochrome) ::slotted(a:hover),\n:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:hover) {\n background-color: var(\n --ic-button-primary-background-hover-monochrome\n ) !important;\n}\n\n:host(.ic-button-variant-primary.ic-button-loading.monochrome) .button,\n:host(.ic-button-variant-primary.monochrome) .button:active,\n:host(.ic-button-variant-icon-primary.ic-button-loading.monochrome) .button,\n:host(.ic-button-variant-icon-primary.monochrome) .button:active {\n background-color: var(--ic-button-primary-background-pressed-monochrome);\n\n --button-loading-inner-color: var(--ic-button-primary-text-monochrome);\n --button-loading-outer-color: var(--ic-button-primary-background-monochrome);\n}\n\n:host(.ic-button-variant-primary.monochrome) ::slotted(a:active),\n:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:active) {\n background-color: var(\n --ic-button-primary-background-pressed-monochrome\n ) !important;\n}\n\n:host(.ic-button-variant-primary.ic-button-disabled.monochrome) .button,\n:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome) .button {\n background-color: var(--ic-button-primary-background-disabled-monochrome);\n color: var(--ic-button-primary-text-disabled-monochrome);\n}\n\n:host(.ic-button-variant-primary.ic-button-disabled.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome)\n ::slotted(a) {\n background-color: var(\n --ic-button-primary-background-disabled-monochrome\n ) !important;\n}\n\n/* Secondary */\n\n:host(.ic-button-variant-secondary) .button,\n:host(.ic-button-variant-icon-secondary) .button {\n border: var(--ic-border-width) solid var(--ic-button-secondary-border);\n color: var(--ic-button-secondary-text);\n}\n\n:host(.ic-button-variant-secondary) ::slotted(a),\n:host(.ic-button-variant-icon-secondary) ::slotted(a) {\n border: var(--ic-border-width) solid var(--ic-button-secondary-border) !important;\n color: var(--ic-button-secondary-text) !important;\n\n --ic-typography-color: var(--ic-button-secondary-text) !important;\n}\n\n:host(.ic-button-variant-secondary) .button:hover,\n:host(.ic-button-variant-icon-secondary) .button:hover {\n background-color: var(--ic-button-secondary-background-hover-active);\n border-color: var(--ic-button-secondary-border-hover);\n color: var(--ic-button-secondary-text-hover-active);\n}\n\n:host(.ic-button-variant-secondary) ::slotted(a:hover),\n:host(.ic-button-variant-icon-secondary) ::slotted(a:hover) {\n background-color: var(\n --ic-button-secondary-background-hover-active\n ) !important;\n}\n\n:host(.ic-button-variant-secondary) .button:active,\n:host(.ic-button-variant-icon-secondary) .button:active {\n border-color: var(--ic-button-secondary-border-pressed);\n background-color: var(--ic-button-secondary-background-pressed-active);\n color: var(--ic-button-secondary-text-pressed-active);\n}\n\n:host(.ic-button-variant-secondary) ::slotted(a:active),\n:host(.ic-button-variant-icon-secondary) ::slotted(a:active) {\n background-color: var(\n --ic-button-secondary-background-pressed-active\n ) !important;\n}\n\n:host(.ic-button-variant-secondary.ic-button-loading) .button,\n:host(.ic-button-variant-icon-secondary.ic-button-loading) .button {\n border-color: var(--ic-button-secondary-border-pressed);\n background-color: var(\n --loading-button-background,\n var(--ic-button-secondary-background-pressed-active)\n ) !important;\n color: var(--ic-button-secondary-text-pressed-active);\n\n --button-loading-inner-color: var(--ic-button-secondary-border-pressed);\n --button-loading-outer-color: var(\n --ic-button-secondary-background-pressed-active\n );\n}\n\n:host(.ic-button-variant-secondary.ic-button-disabled) .button,\n:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button {\n border-color: var(--ic-button-secondary-border-disabled);\n color: var(--ic-button-secondary-text-disabled);\n background: none;\n}\n\n:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a),\n:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a) {\n background: none !important;\n}\n\n/* Secondary - non-transparent background */\n\n:host(.ic-button-variant-secondary.background) .button,\n:host(.ic-button-variant-icon-secondary.background) .button {\n background-color: var(--ic-button-secondary-background);\n}\n\n:host(.ic-button-variant-secondary.background) ::slotted(a),\n:host(.ic-button-variant-icon-secondary.background) ::slotted(a) {\n background-color: var(--ic-button-secondary-background) !important;\n}\n\n:host(.ic-button-variant-secondary.background) .button:hover,\n:host(.ic-button-variant-icon-secondary.background) .button:hover {\n background-image: var(--ic-button-secondary-background-non-transparent-hover);\n}\n\n:host(.ic-button-variant-secondary.background) ::slotted(a:hover),\n:host(.ic-button-variant-icon-secondary.background) ::slotted(a:hover) {\n background-image: var(\n --ic-button-secondary-background-non-transparent-hover\n ) !important;\n}\n\n:host(.ic-button-variant-secondary.background) .button:active,\n:host(.ic-button-variant-icon-secondary.background) .button:active {\n background-image: var(\n --ic-button-secondary-background-non-transparent-active\n );\n}\n\n:host(.ic-button-variant-secondary.background) ::slotted(a:active),\n:host(.ic-button-variant-icon-secondary.background) ::slotted(a:active) {\n background-image: var(\n --ic-button-secondary-background-non-transparent-active\n ) !important;\n}\n\n/* Secondary - monochrome */\n\n:host(.ic-button-variant-secondary.monochrome) .button,\n:host(.ic-button-variant-icon-secondary.monochrome) .button {\n background-color: none;\n border: var(--ic-border-width) solid\n var(--ic-button-secondary-border-monochrome);\n color: var(--ic-button-secondary-text-monochrome);\n}\n\n:host(.ic-button-variant-secondary.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a) {\n background-color: none !important;\n}\n\n:host(.ic-button-variant-secondary.monochrome) .button:hover,\n:host(.ic-button-variant-icon-secondary.monochrome) .button:hover {\n background-color: var(--ic-button-secondary-background-hover-monochrome);\n border-color: var(--ic-button-secondary-border-hover-monochrome);\n color: var(--ic-button-secondary-text-hover-monochrome);\n}\n\n:host(.ic-button-variant-secondary.monochrome) ::slotted(a:hover),\n:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:hover) {\n background-color: var(\n --ic-button-secondary-background-hover-monochrome\n ) !important;\n}\n\n:host(.ic-button-variant-secondary.monochrome) .button:active,\n:host(.ic-button-variant-icon-secondary.monochrome) .button:active {\n background-color: var(--ic-button-secondary-background-pressed-monochrome);\n border-color: var(--ic-button-secondary-border-pressed-monochrome);\n color: var(--ic-button-secondary-text-pressed-monochrome);\n}\n\n:host(.ic-button-variant-secondary.monochrome) ::slotted(a:active),\n:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:active) {\n background-color: var(\n --ic-button-secondary-background-pressed-monochrome\n ) !important;\n}\n\n:host(.ic-button-variant-secondary.ic-button-loading.monochrome) .button,\n:host(.ic-button-variant-icon-secondary.ic-button-loading.monochrome) .button {\n background-color: var(\n --ic-button-secondary-background-pressed-monochrome\n ) !important;\n border-color: var(--ic-button-secondary-border-pressed-monochrome);\n color: var(--ic-button-secondary-text-pressed-monochrome);\n\n --button-loading-inner-color: var(\n --ic-button-secondary-text-pressed-monochrome\n );\n --button-loading-outer-color: var(\n --ic-button-secondary-background-pressed-monochrome\n );\n}\n\n:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) .button,\n:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome) .button {\n background: none;\n border-color: var(--ic-button-secondary-border-disabled-monochrome);\n color: var(--ic-button-secondary-text-disabled-monochrome);\n}\n\n:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome)\n ::slotted(a) {\n background: none !important;\n}\n\n/* Secondary - non-transparent background - monochrome */\n\n:host(.ic-button-variant-secondary.background.monochrome) .button,\n:host(.ic-button-variant-icon-secondary.background.monochrome) .button {\n background-color: var(--ic-button-secondary-background-monochrome);\n}\n\n:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a) {\n background-color: var(--ic-button-secondary-background-monochrome) !important;\n}\n\n:host(.ic-button-variant-secondary.background.monochrome) .button:hover,\n:host(.ic-button-variant-icon-secondary.background.monochrome) .button:hover {\n background-image: var(\n --ic-button-secondary-background-non-transparent-monochrome-hover\n );\n}\n\n:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:hover),\n:host(.ic-button-variant-icon-secondary.background.monochrome)\n ::slotted(a:hover) {\n background-image: var(\n --ic-button-secondary-background-non-transparent-monochrome-hover\n ) !important;\n}\n\n:host(.ic-button-variant-secondary.background.monochrome) .button:active,\n:host(.ic-button-variant-icon-secondary.background.monochrome) .button:active {\n background-image: var(\n --ic-button-secondary-background-non-transparent-monochrome-active\n );\n}\n\n:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:active),\n:host(.ic-button-variant-icon-secondary.background.monochrome)\n ::slotted(a:active) {\n background-image: var(\n --ic-button-secondary-background-non-transparent-monochrome-active\n ) !important;\n}\n\n/* Tertiary */\n\n:host(.ic-button-variant-tertiary) .button,\n:host(.ic-button-variant-icon-tertiary) .button,\n:host(.ic-button-variant-tertiary) ::slotted(a),\n:host(.ic-button-variant-icon-tertiary) ::slotted(a) {\n color: var(--ic-button-tertiary-text-active);\n\n --ic-typography-color: var(--ic-button-tertiary-text-active);\n}\n\n:host(.ic-button-variant-tertiary) .button:hover,\n:host(.ic-button-variant-icon-tertiary) .button:hover {\n background-color: var(--ic-button-tertiary-background-hover-active);\n color: var(--ic-button-tertiary-text-hover-active);\n}\n\n:host(.ic-button-variant-tertiary) ::slotted(a:hover),\n:host(.ic-button-variant-icon-tertiary) ::slotted(a:hover) {\n background-color: var(\n --ic-button-tertiary-background-hover-active\n ) !important;\n}\n\n:host(.ic-button-variant-tertiary) .button:active,\n:host(.ic-button-variant-tertiary.ic-button-loading) .button,\n:host(.ic-button-variant-icon-tertiary) .button:active,\n:host(.ic-button-variant-icon-tertiary.ic-button-loading) .button {\n background-color: var(--ic-button-tertiary-background-pressed-active);\n color: var(--ic-button-tertiary-text-pressed-active);\n\n --button-loading-inner-color: var(--ic-button-tertiary-text-pressed-active);\n --button-loading-outer-color: var(--ic-button-tertiary-background-pressed);\n}\n\n:host(.ic-button-variant-tertiary) ::slotted(a:active),\n:host(.ic-button-variant-icon-tertiary) ::slotted(a:active) {\n background-color: var(\n --ic-button-tertiary-background-pressed-active\n ) !important;\n}\n\n:host(.ic-button-variant-tertiary.ic-button-disabled) .button,\n:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button {\n color: var(--ic-button-tertiary-text-disabled);\n background: none;\n}\n\n:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a),\n:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a) {\n background: none !important;\n}\n\n/* Tertiary - non-transparent background */\n\n:host(.ic-button-variant-tertiary.background) .button,\n:host(.ic-button-variant-icon-tertiary.background) .button {\n background-color: var(--ic-button-tertiary-background);\n}\n\n:host(.ic-button-variant-tertiary.background) ::slotted(a),\n:host(.ic-button-variant-icon-tertiary.background) ::slotted(a) {\n background-color: var(--ic-button-tertiary-background) !important;\n}\n\n:host(.ic-button-variant-tertiary.background) .button:hover,\n:host(.ic-button-variant-icon-tertiary.background) .button:hover {\n background-image: var(--ic-button-tertiary-background-non-transparent-hover);\n}\n\n:host(.ic-button-variant-tertiary.background) ::slotted(a:hover),\n:host(.ic-button-variant-icon-tertiary.background) ::slotted(a:hover) {\n background-image: var(\n --ic-button-tertiary-background-non-transparent-hover\n ) !important;\n}\n\n:host(.ic-button-variant-tertiary.background) .button:active,\n:host(.ic-button-variant-icon-tertiary.background) .button:active {\n background-image: var(--ic-button-tertiary-background-non-transparent-active);\n}\n\n:host(.ic-button-variant-tertiary.background) ::slotted(a:active),\n:host(.ic-button-variant-icon-tertiary.background) ::slotted(a:active) {\n background-image: var(\n --ic-button-tertiary-background-non-transparent-active\n ) !important;\n}\n\n/* Tertiary - monochrome */\n\n:host(.ic-button-variant-tertiary.monochrome) .button,\n:host(.ic-button-variant-tertiary.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-tertiary.monochrome) .button,\n:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a) {\n color: var(--ic-button-tertiary-text-monochrome);\n\n --ic-typography-color: var(--ic-button-tertiary-text-monochrome);\n}\n\n:host(.ic-button-variant-tertiary.monochrome) .button:hover,\n:host(.ic-button-variant-icon-tertiary.monochrome) .button:hover {\n background-color: var(--ic-button-tertiary-background-hover-monochrome);\n color: var(--ic-button-tertiary-text-hover-monochrome);\n}\n\n:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:hover),\n:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:hover) {\n background-color: var(\n --ic-button-tertiary-background-hover-monochrome\n ) !important;\n}\n\n:host(.ic-button-variant-tertiary.monochrome) .button:active,\n:host(.ic-button-variant-tertiary.ic-button-loading.monochrome) .button,\n:host(.ic-button-variant-icon-tertiary.monochrome) .button:active,\n:host(.ic-button-variant-icon-tertiary.ic-button-loading.monochrome) .button {\n background-color: var(--ic-button-tertiary-background-pressed-monochrome);\n color: var(--ic-button-tertiary-text-pressed-monochrome);\n\n --button-loading-inner-color: var(\n --ic-button-tertiary-text-pressed-monochrome\n );\n --button-loading-outer-color: var(\n --ic-button-tertiary-background-pressed-monochrome\n );\n}\n\n:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:active),\n:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:active) {\n background-color: var(\n --ic-button-tertiary-background-pressed-monochrome\n ) !important;\n}\n\n:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) .button,\n:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome) .button {\n color: var(--ic-button-tertiary-text-disabled-monochrome);\n background: none;\n}\n\n:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome)\n ::slotted(a) {\n background: none !important;\n}\n\n/* Tertiary - non-transparent background - monochrome */\n\n:host(.ic-button-variant-tertiary.background.monochrome) .button,\n:host(.ic-button-variant-icon-tertiary.background.monochrome) .button {\n background-color: var(--ic-button-tertiary-background-monochrome);\n}\n\n:host(.ic-button-variant-tertiary.background.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-tertiary.background.monochrome) ::slotted(a) {\n background-color: var(--ic-button-tertiary-background-monochrome) !important;\n}\n\n:host(.ic-button-variant-tertiary.background.monochrome) .button:hover,\n:host(.ic-button-variant-icon-tertiary.background.monochrome) .button:hover {\n background-image: var(\n --ic-button-tertiary-background-non-transparent-monochrome-hover\n );\n}\n\n:host(.ic-button-variant-tertiary.background.monochrome) ::slotted(a:hover),\n:host(.ic-button-variant-icon-tertiary.background.monochrome)\n ::slotted(a:hover) {\n background-image: var(\n --ic-button-tertiary-background-non-transparent-monochrome-hover\n ) !important;\n}\n\n:host(.ic-button-variant-tertiary.background.monochrome) .button:active,\n:host(.ic-button-variant-icon-tertiary.background.monochrome) .button:active {\n background-image: var(\n --ic-button-tertiary-background-non-transparent-monochrome-active\n );\n}\n\n:host(.ic-button-variant-tertiary.background.monochrome) ::slotted(a:active),\n:host(.ic-button-variant-icon-tertiary.background.monochrome)\n ::slotted(a:active) {\n background-image: var(\n --ic-button-tertiary-background-non-transparent-monochrome-active\n ) !important;\n}\n\n/* Destructive */\n\n:host(.ic-button-variant-destructive) .button,\n:host(.ic-button-variant-icon-destructive) .button {\n color: var(--ic-button-destructive-text);\n background-color: var(--ic-button-destructive-background);\n text-transform: uppercase;\n}\n\n:host(.ic-button-variant-destructive) ::slotted(a),\n:host(.ic-button-variant-icon-destructive) ::slotted(a) {\n color: var(--ic-button-destructive-text) !important;\n\n --ic-typography-color: var(--ic-button-destructive-text) !important;\n\n background-color: var(--ic-button-destructive-background) !important;\n text-transform: uppercase !important;\n}\n\n:host(.ic-button-variant-destructive) .button:hover,\n:host(.ic-button-variant-icon-destructive) .button:hover {\n background-color: var(--ic-button-destructive-background-hover);\n}\n\n:host(.ic-button-variant-destructive) ::slotted(a:hover),\n:host(.ic-button-variant-icon-destructive) ::slotted(a:hover) {\n background-color: var(--ic-button-destructive-background-hover) !important;\n}\n\n:host(.ic-button-variant-destructive) .button:active,\n:host(.ic-button-variant-destructive.ic-button-loading) .button,\n:host(.ic-button-variant-icon-destructive.ic-button-loading) .button {\n color: var(--ic-button-primary-text);\n background-color: var(--ic-button-destructive-background-pressed);\n\n --button-loading-inner-color: var(--ic-button-primary-text);\n --button-loading-outer-color: var(--ic-button-destructive-background-pressed);\n}\n\n:host(.ic-button-variant-destructive) ::slotted(a:active),\n:host(.ic-button-variant-icon-destructive) ::slotted(a:active) {\n background-color: var(--ic-button-destructive-background-pressed) !important;\n}\n\n:host(.ic-button-variant-destructive.ic-button-disabled) .button,\n:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button {\n background-color: var(--ic-button-destructive-background-disabled);\n color: var(--ic-button-destructive-text-disabled);\n}\n\n:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a),\n:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a) {\n background-color: var(--ic-button-destructive-background-disabled) !important;\n}\n\n/***********************\n Icon Variants\n ***********************/\n\n/* Icon */\n\n:host(.ic-button-variant-icon) .button {\n color: var(--ic-button-icon-color);\n background-color: var(--ic-button-icon-color-background);\n min-width: 0;\n gap: var(--ic-space-xs);\n}\n\n:host(.ic-button-variant-icon) ::slotted(a) {\n color: var(--ic-button-icon-color);\n background-color: var(--ic-button-icon-color-background) !important;\n min-width: 0;\n gap: var(--ic-space-xs);\n}\n\n:host(.ic-button-variant-icon) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n}\n\n:host(.ic-button-variant-icon) .button:hover {\n color: var(--ic-button-icon-color-hover);\n background-color: var(--ic-button-icon-color-background-hover);\n}\n\n:host(.ic-button-variant-icon) ::slotted(a:hover) {\n color: var(--ic-button-icon-color-hover);\n background-color: var(--ic-button-icon-color-background-hover) !important;\n}\n\n:host(.ic-button-variant-icon) .button:active:not(:focus),\n:host(.ic-button-variant-icon.ic-button-loading) .button {\n color: var(--ic-button-icon-color-active);\n background-color: var(--ic-button-icon-color-background-active);\n}\n\n:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)) {\n color: var(--ic-button-icon-color-active);\n background-color: var(--ic-button-icon-color-background-active) !important;\n}\n\n:host(.ic-button-variant-icon.ic-button-disabled) .button {\n color: var(--ic-color-icon-disabled-mid);\n background: none;\n}\n\n:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a) {\n color: var(--ic-color-icon-disabled-mid);\n background: none !important;\n}\n\n/* Icon-primary */\n\n:host(.ic-button-variant-icon-primary) .button,\n:host(.ic-button-variant-icon-primary) ::slotted(a) {\n min-width: 0;\n gap: var(--ic-space-xs);\n color: var(--ic-button-primary-icon);\n}\n\n:host(.ic-button-variant-icon-primary.monochrome) .button,\n:host(.ic-button-variant-primary.monochrome:not(.ic-button-disabled))\n ::slotted(svg) {\n color: var(--ic-button-primary-icon-monochrome);\n}\n\n:host(.ic-button-variant-icon-primary) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n margin: 0;\n pointer-events: none;\n}\n\n:host(.ic-button-variant-icon.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon.monochrome) ::slotted(svg) {\n color: var(--ic-button-icon-monochrome);\n}\n\n/* Icon-secondary */\n\n:host(.ic-button-variant-icon-secondary) .button,\n:host(.ic-button-variant-icon-secondary) ::slotted(a) {\n min-width: 0;\n gap: var(--ic-space-xs);\n}\n\n:host(.ic-button-variant-icon-secondary) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n margin: 0;\n pointer-events: none;\n}\n\n/* Icon-tertiary */\n\n:host(.ic-button-variant-icon-tertiary) .button,\n:host(.ic-button-variant-icon-tertiary) ::slotted(a) {\n min-width: 0;\n gap: var(--ic-space-xs);\n}\n\n:host(.ic-button-variant-icon-tertiary) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n margin: 0;\n pointer-events: none;\n}\n\n/* Icon-destructive */\n\n:host(.ic-button-variant-icon-destructive) .button,\n:host(.ic-button-variant-icon-destructive) ::slotted(a) {\n min-width: 0;\n gap: var(--ic-space-xs);\n}\n\n:host(.ic-button-variant-icon-destructive) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n margin: 0;\n pointer-events: none;\n}\n\n/* Sizing */\n\n:host(.ic-button-size-medium) .button {\n height: var(--height, 2.5rem);\n padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.ic-button-size-medium) ::slotted(a) {\n height: var(--height, 2.5rem) !important;\n padding: var(--ic-space-xs) var(--ic-space-md) !important;\n}\n\n:host(.ic-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(.ic-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(.ic-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(.ic-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(.ic-button-size-medium.ic-button-variant-icon) .button,\n:host(.ic-button-size-medium.ic-button-variant-icon-primary) .button,\n:host(.ic-button-size-medium.ic-button-variant-icon-secondary) .button,\n:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) .button,\n:host(.ic-button-size-medium.ic-button-variant-icon-destructive) .button {\n height: var(--height, var(--ic-space-xl));\n width: var(--ic-space-xl);\n padding: 0.375rem;\n}\n\n:host(.ic-button-size-medium.ic-button-variant-icon-primary) ::slotted(a),\n:host(.ic-button-size-medium.ic-button-variant-icon-secondary) ::slotted(a),\n:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) ::slotted(a),\n:host(.ic-button-size-medium.ic-button-variant-icon-destructive) ::slotted(a) {\n height: var(--height, var(--ic-space-xl)) !important;\n width: var(--ic-space-xl) !important;\n padding: 0.375rem !important;\n}\n\n:host(.ic-button-size-small.ic-button-variant-icon) .button,\n:host(.ic-button-size-small.ic-button-variant-icon-primary) .button,\n:host(.ic-button-size-small.ic-button-variant-icon-secondary) .button,\n:host(.ic-button-size-small.ic-button-variant-icon-tertiary) .button,\n:host(.ic-button-size-small.ic-button-variant-icon-destructive) .button {\n height: var(--height, var(--ic-space-lg));\n width: var(--ic-space-lg);\n padding: var(--ic-space-xxs);\n}\n\n:host(.ic-button-size-small.ic-button-variant-icon-primary) ::slotted(a),\n:host(.ic-button-size-small.ic-button-variant-icon-secondary) ::slotted(a),\n:host(.ic-button-size-small.ic-button-variant-icon-tertiary) ::slotted(a),\n:host(.ic-button-size-small.ic-button-variant-icon-destructive) ::slotted(a),\n:host(.ic-button-size-small.ic-button-variant-icon) ::slotted(a) {\n height: var(--height, var(--ic-space-lg)) !important;\n width: var(--ic-space-lg) !important;\n padding: var(--ic-space-xxs) !important;\n}\n\n:host(.ic-button-size-large.ic-button-variant-icon) .button,\n:host(.ic-button-size-large.ic-button-variant-icon-primary) .button,\n:host(.ic-button-size-large.ic-button-variant-icon-secondary) .button,\n:host(.ic-button-size-large.ic-button-variant-icon-tertiary) .button,\n:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button {\n height: var(--height, 2.5rem);\n width: 2.5rem;\n padding: var(--ic-space-xs);\n}\n\n:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button,\n:host(.ic-button-size-large.ic-button-variant-icon-primary) ::slotted(a),\n:host(.ic-button-size-large.ic-button-variant-icon-secondary) ::slotted(a),\n:host(.ic-button-size-large.ic-button-variant-icon-tertiary) ::slotted(a),\n:host(.ic-button-size-large.ic-button-variant-icon-destructive) ::slotted(a),\n:host(.ic-button-size-large.ic-button-variant-icon) ::slotted(a) {\n height: var(--height, 2.5rem) !important;\n width: 2.5rem !important;\n padding: var(--ic-space-xs) !important;\n}\n\n/* Width */\n:host(.ic-button-full-width),\n:host(.ic-button-full-width) .button {\n width: 100%;\n}\n\n:host(.ic-button-full-width) ::slotted(a) {\n width: 100% !important;\n}\n\n/* Loading */\n\ndiv.loading-container {\n position: relative;\n align-items: center;\n width: 100%;\n}\n\n.loading-indicator-icon-button {\n --circular-diameter: var(--ic-space-md);\n}\n\n:host(.ic-button-size-small) .loading-indicator-icon-button {\n --circular-diameter: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n}\n\n:host(.ic-button-size-large) .loading-indicator-icon-button {\n --circular-diameter: calc(var(--ic-space-sm) + var(--ic-space-xs));\n}\n\nic-loading-indicator {\n --inner-color: var(--button-loading-inner-color);\n --outer-color: var(--button-loading-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(.ic-button-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(.ic-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 color: var(--ic-atoms-input-search-button);\n}\n\n:host(.search-submit-button-small) ::slotted(svg) {\n --icon-height: 1rem;\n --icon-width: 1rem;\n\n color: var(--ic-atoms-input-search-button);\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) .button:not(:active):focus ::slotted(svg) {\n color: var(--ic-button-primary-text);\n}\n\n:host(.search-submit-button) {\n display: flex;\n align-items: center;\n margin: 0 var(--ic-space-xxs);\n}\n\n/** CLEAR & DISMISS **/\n\n:host(.ic-button-variant-icon) .button,\n:host(.ic-button-variant-icon) ::slotted(a) {\n background-color: inherit;\n min-width: 0;\n gap: var(--ic-space-xs);\n}\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}\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-color-icon-disabled-mid);\n background: none;\n}\n\n:host(.clear-button) {\n color: var(--ic-atoms-input-clear-button);\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus,\n:host(.calendar-button) .button:focus,\n:host(.clock-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.clear-button) .button,\n:host(.clear-button) ::slotted(a) {\n background-color: inherit;\n color: var(--ic-atoms-input-clear-button);\n}\n\n:host(.clear-button) .button:hover,\n:host(.clear-button) ::slotted(a:hover) {\n color: var(--ic-atoms-input-clear-button);\n}\n\n:host(.clear-button) .button:not(:active):focus ::slotted(svg) {\n background-color: var(--ic-atoms-input-clear-button-focus-inner);\n color: var(--ic-button-primary-text);\n\n /* border: var(--ic-atoms-input-clear-button-focus-outer); */\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n --icon-height: 0.875rem;\n --icon-width: 0.875rem;\n\n color: var(--ic-top-navigation-icon-active);\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\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 **/\n\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/** menu button on top navigation\\side navigation \n * uses secondary monochrome tokens which are duplicated here to avoid multiple copies in each component\n */\n\n:host(#menu-button.ic-theme-dark) {\n --ic-button-secondary-background-hover-monochrome: var(\n --ic-action-dark-bg-hover\n );\n --ic-button-secondary-background-pressed-monochrome: var(\n --ic-action-dark-bg-pressed\n );\n --ic-button-secondary-text-hover-monochrome: var(\n --ic-action-monochrome-hover-dark\n );\n --ic-button-secondary-text-pressed-monochrome: var(\n --ic-action-monochrome-pressed-dark\n );\n --ic-button-secondary-border-hover-monochrome: var(\n --ic-color-border-neutral-hover-dark\n );\n --ic-button-secondary-border-pressed-monochrome: var(\n --ic-color-border-neutral-pressed-dark\n );\n}\n\n:host(#menu-button.ic-theme-light) {\n --ic-button-secondary-background-hover-monochrome: var(\n --ic-action-light-bg-hover\n );\n --ic-button-secondary-background-pressed-monochrome: var(\n --ic-action-light-bg-pressed\n );\n --ic-button-secondary-text-hover-monochrome: var(\n --ic-action-monochrome-hover\n );\n --ic-button-secondary-text-pressed-monochrome: var(\n --ic-action-monochrome-pressed\n );\n --ic-button-secondary-border-hover-monochrome: var(\n --ic-color-border-neutral-hover-light\n );\n --ic-button-secondary-border-pressed-monochrome: var(\n --ic-color-border-neutral-default\n );\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 .search-submit-button ::slotted(a),\n .ic-button-variant-icon ::slotted(a),\n .clear-button ::slotted(a),\n .search-submit-button ::slotted(svg),\n .ic-button-variant-icon ::slotted(svg),\n .clear-button ::slotted(svg) {\n color: HighlightText;\n }\n\n :host(.ic-button-variant-icon.monochrome) ::slotted(a),\n :host(.ic-button-variant-icon.monochrome) ::slotted(svg) {\n color: white;\n }\n\n :host(.clear-button) .button:not(:active):focus ::slotted(svg) {\n color: white !important;\n background-color: inherit;\n }\n\n :host(.ic-button-variant-primary:not(.ic-button-disabled)) ::slotted(svg) {\n color: currentcolor !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 Fragment,\n} from \"@stencil/core\";\n\nimport {\n getBrandFromContext,\n handleHiddenFormButtonClick,\n inheritAttributes,\n isSlotUsed,\n removeDisabledFalse,\n renderFileHiddenInput,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport { IcButtonTypes, IcButtonVariants } from \"./ic-button.types\";\nimport {\n IcSizes,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n IcButtonTooltipPlacement,\n IcIconPlacementOptions,\n} from \"../../utils/types\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet buttonIds = 0;\n\n/**\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 = false;\n private id: string | null;\n private inheritedAttributes: { [k: string]: string } = {};\n private describedbyEl: HTMLElement | null = null;\n private describedById?: string;\n private mutationObserver: MutationObserver | null = null;\n private hostMutationObserver: MutationObserver | null = null;\n private routerSlot: HTMLElement | null;\n\n @Element() el: HTMLIcButtonElement;\n\n @State() ariaLabel = \"\";\n @State() describedbyNode: Node | null;\n @Watch(\"describedbyNode\")\n watchDescribedbyNodeHandler(): void {\n this.updateAriaDescribedbyClone();\n }\n @State() title = \"\";\n\n /**\n * If `fileUpload` is set to `true`, this is the accepted list of file types.\n */\n @Prop() accept = \"*\";\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 = 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 = 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 = 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 = false;\n\n /**\n * If `true`, when the button is clicked the native file explorer will be launched.\n */\n @Prop() fileUpload = false;\n\n /**\n * The name of the control for the file input, which is submitted with the form data.\n */\n @Prop() fileInputName = `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 = 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 = false;\n\n /**\n * If `true`, the button will display as monochromatic in either `light` or `dark` theme.\n */\n @Prop({ mutable: true }) monochrome = false;\n\n /**\n * If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.\n */\n @Prop() multiple = 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 = \"medium\";\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop({ mutable: true }) theme: IcThemeMode = \"inherit\";\n\n /**\n * Setting to `true` can help in situations where tooltip content is clipped by a parent element.\n */\n @Prop() tooltipFixedPositioning: boolean = false;\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 & tertiary variants of button will have a transparent background when not hovered, pressed or loading.\n */\n @Prop() transparentBackground = 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({ mutable: true }) variant: IcButtonVariants = \"primary\";\n @Watch(\"variant\")\n watchVariantHandler(newVariant: IcButtonVariants): void {\n if (newVariant === \"icon\") this.variant = \"icon-tertiary\";\n }\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 this.mutationObserver?.disconnect();\n this.hostMutationObserver?.disconnect();\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) {\n this.describedById = describedById;\n const el = document.querySelector<HTMLElement>(`#${describedById}`);\n if (el) {\n this.describedbyEl = el;\n this.describedbyNode = el.cloneNode(true);\n }\n }\n }\n\n if (this.variant === \"icon\") {\n this.variant = \"icon-tertiary\";\n }\n }\n\n componentDidLoad(): void {\n this.updateTheme();\n\n if (typeof MutationObserver !== \"undefined\") {\n if (this.describedbyEl && 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 if (this.hasRouterSlot()) this.arrangeRouterItem();\n }\n\n this.updateAriaDescribedbyClone();\n }\n\n componentWillRender(): void {\n const iconEl = this.getSlottedIcon(\"left\") || this.getSlottedIcon(\"right\");\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.disabled,\n this.accept,\n this.fileInputName,\n this.selectedFiles\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(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): 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) {\n const tooltip = this.el.shadowRoot?.querySelector(\"ic-tooltip\");\n if (tooltip && (await tooltip.isTooltipVisible())) {\n tooltip.displayTooltip(false);\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n }\n\n private getSlottedIcon = (position: IcIconPlacementOptions) =>\n this.el.querySelector(`[slot=\"${position}-icon\"]`);\n\n private hasRouterSlot() {\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 = () => {\n if (\n (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n !this.hasRouterSlot() &&\n (this.form || !!this.el.closest(\"FORM\"))\n ) {\n const form = this.form\n ? document.querySelector<HTMLFormElement>(`form[id=${this.form}]`)\n : this.el.closest<HTMLFormElement>(\"FORM\");\n\n handleHiddenFormButtonClick(form, this.el);\n }\n };\n\n private handleKeyDown = (ev: KeyboardEvent) => {\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(mode: IcBrandForeground | null = null) {\n const foregroundColor = getBrandFromContext(this.el, mode);\n if (foregroundColor !== IcBrandForegroundEnum.Default) {\n this.theme =\n foregroundColor === IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n this.monochrome = true;\n }\n }\n\n /**\n * Creates/updates clone of aria-describedby element node tree in shadow dom\n * Required due to ids being scoped to the shadow dom\n */\n private updateAriaDescribedbyClone = () => {\n if (this.describedbyNode) {\n const wrapper = this.el.shadowRoot?.querySelector(\"#describedby-wrapper\");\n if (!wrapper) {\n this.el.shadowRoot?.appendChild(\n Object.assign(document.createElement(\"div\"), {\n id: \"describedby-wrapper\",\n className: \"ic-button-describedby\",\n })\n );\n }\n\n while (wrapper?.firstChild) wrapper.firstChild.remove();\n wrapper?.appendChild(this.describedbyNode);\n }\n };\n\n /**\n * Triggered when light dom aria-describedby element updates\n */\n private mutationCallback = () => {\n if (this.describedbyEl)\n this.describedbyNode = this.describedbyEl?.cloneNode(true);\n };\n\n /**\n * Triggered when attributes of host element change\n * @param mutationList the list of changes made to the host element\n */\n private hostMutationCallback = (mutationList: MutationRecord[]) => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (attributeName) {\n const attribute = this.el.getAttribute(attributeName);\n if (attribute) {\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 }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private setHasTooltip = () => {\n this.hasTooltip =\n !this.disableTooltip && (!!this.title || !!this.isIconVariant());\n };\n\n private isIconVariant = () => this.variant.startsWith(\"icon\");\n\n private arrangeRouterItem = () => {\n const setStyles = (\n element: HTMLElement | SVGElement,\n styles: { [key: string]: string }\n ) => {\n Object.entries(styles).forEach(([key, value]) => {\n element.style.setProperty(key, value);\n });\n };\n\n if (this.routerSlot) {\n const icTypography = document.createElement(\"ic-typography\");\n\n setStyles(icTypography, {\n \"font-family\": \"var(--ic-font-body-family)\",\n \"font-size\": \"0.875rem\",\n \"font-weight\": \"600\",\n });\n setStyles(this.routerSlot, {\n gap: \"0\",\n });\n\n const icon = this.routerSlot.querySelector(\"svg\");\n const iconSlot = icon?.getAttribute(\"slot\");\n const iconWrapper = document.createElement(\"div\");\n\n if (icon) {\n setStyles(icon, {\n fill: \"currentcolor\",\n });\n\n if (iconSlot === \"top-icon\") {\n setStyles(this.routerSlot, {\n display: \"flex\",\n \"flex-direction\": \"column\",\n \"--height\": \"fit-content\",\n });\n } else if (iconSlot) {\n const marginPlacement = iconSlot === \"left-icon\" ? \"right\" : \"left\";\n setStyles(iconWrapper, {\n [`margin-${marginPlacement}`]: \"var(--ic-space-xs)\",\n });\n }\n\n iconWrapper.append(icon);\n }\n\n const badge = this.routerSlot.querySelector(\"ic-badge\");\n const label = this.routerSlot.textContent?.trim();\n\n if (badge) iconWrapper.append(badge);\n if (label) icTypography.textContent = label;\n\n this.routerSlot.textContent = \"\";\n\n if (iconSlot === \"right-icon\") {\n this.routerSlot.append(icTypography);\n this.routerSlot.append(iconWrapper);\n } else {\n this.routerSlot.append(iconWrapper);\n this.routerSlot.append(icTypography);\n }\n }\n };\n\n render() {\n const {\n ariaControlsId,\n ariaLabel,\n ariaOwnsId,\n buttonIdNum,\n describedById,\n disabled,\n download,\n dropdown,\n dropdownExpanded,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n fullWidth,\n handleClick,\n handleKeyDown,\n hasTooltip,\n href,\n hreflang,\n id,\n inheritedAttributes,\n isIconVariant,\n loading,\n monochrome,\n onBlur,\n onFocus,\n referrerpolicy,\n rel,\n size,\n target,\n theme,\n title,\n tooltipFixedPositioning,\n tooltipPlacement,\n transparentBackground,\n type,\n variant,\n } = this;\n\n const TagType = href ? \"a\" : \"button\";\n const buttonAttrs =\n TagType === \"button\"\n ? {\n type,\n disabled,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n }\n : {\n download: download !== false ? download : null,\n href,\n rel,\n target,\n referrerpolicy,\n hreflang,\n };\n\n const buttonId = hasTooltip\n ? `ic-button-with-tooltip-${id || buttonIdNum}`\n : undefined;\n\n const describedby = !hasTooltip ? describedById : `ic-tooltip-${buttonId}`;\n\n const hasLeftIcon = !!this.getSlottedIcon(\"left\");\n const hasRightIcon = !!this.getSlottedIcon(\"right\");\n\n const ButtonContent = () =>\n this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <TagType\n class=\"button\"\n tabindex={0}\n aria-disabled={loading || disabled ? \"true\" : null}\n aria-label={loading ? \"Loading\" : ariaLabel}\n aria-expanded={dropdown && `${dropdownExpanded}`}\n {...buttonAttrs}\n {...inheritedAttributes}\n onFocus={onFocus}\n onBlur={onBlur}\n ref={(el) => (this.buttonEl = el)}\n aria-describedby={describedby}\n part=\"button\"\n >\n {loading ? (\n <div class=\"loading-container\">\n <ic-loading-indicator\n type={isIconVariant() ? \"circular\" : \"linear\"}\n class={{ \"loading-indicator-icon-button\": isIconVariant() }}\n monochrome={monochrome}\n theme={theme}\n ></ic-loading-indicator>\n </div>\n ) : (\n <Fragment>\n {(hasLeftIcon ||\n (!!this.getSlottedIcon(\"top\") && !hasRightIcon)) && (\n <div class=\"icon-container\">\n <slot name={`${hasLeftIcon ? \"left\" : \"top\"}-icon`} />\n </div>\n )}\n <slot />\n {!dropdown\n ? hasRightIcon && (\n <div class={{ \"icon-container\": true, \"right-icon\": true }}>\n <slot name=\"right-icon\" />\n </div>\n )\n : variant !== \"icon\" &&\n variant !== \"destructive\" && (\n <span\n class={\n dropdownExpanded\n ? \"dropdown-expanded\"\n : \"arrow-dropdown\"\n }\n innerHTML={arrowDropdown}\n />\n )}\n </Fragment>\n )}\n </TagType>\n );\n\n return (\n <Host\n class={{\n \"ic-button-disabled\": disabled && !loading,\n \"ic-button-full-width\": fullWidth,\n \"ic-button-loading\": loading,\n [`ic-button-size-${size}`]: true,\n [`ic-button-variant-${variant}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n background:\n (variant === \"secondary\" || variant === \"tertiary\") &&\n !transparentBackground &&\n !disabled,\n \"dropdown-no-icon\":\n dropdown &&\n !isSlotUsed(this.el, \"icon\") &&\n !isSlotUsed(this.el, \"left-icon\"),\n monochrome,\n \"top-icon\": isSlotUsed(this.el, \"top-icon\"),\n \"with-badge\": isSlotUsed(this.el, \"badge\"),\n }}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n aria-owns={ariaOwnsId}\n aria-controls={ariaControlsId}\n aria-expanded={dropdown && `${dropdownExpanded}`}\n >\n {hasTooltip && (\n <ic-tooltip\n id={describedby}\n label={title || ariaLabel}\n target={buttonId}\n placement={tooltipPlacement}\n fixedPositioning={tooltipFixedPositioning}\n silent={isIconVariant() && !!ariaLabel}\n >\n <ButtonContent />\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n {!hasTooltip && <ButtonContent />}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/core/p-fc239961.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as i,h as e,H as t,g as s}from"./p-8e4e97b4.js";import{a,v as c,D as h,w as r,i as n,f as o}from"./p-829b34f9.js";import{s as l}from"./p-7d378ee6.js";import"./p-18d5e467.js";import"./p-d107dfa8.js";import"./p-7bbd1881.js";const d=':host{display:block;width:var(--tree-view-width, 100%);background-color:var(--ic-tree-view-background)}:host .heading-area-container{border-bottom:var(--ic-space-1px) solid var(--ic-tree-view-divider);display:flex;align-items:center;min-height:calc(\n var(--ic-space-xl) + var(--ic-space-xs) - var(--ic-space-1px)\n );padding:0 var(--ic-space-xs);--ic-typography-color:var(--ic-tree-view-text)}:host(.ic-tree-view-small) .heading-area-container{min-height:calc(var(--ic-space-xl) - var(--ic-space-1px))}:host(.ic-tree-view-large) .heading-area-container{min-height:calc(var(--ic-space-xxl) - var(--ic-space-1px))}:host(.ic-tree-view-truncate) .heading-area-container{height:calc(var(--ic-space-xl) + var(--ic-space-xs) - var(--ic-space-1px))}:host(.ic-tree-view-truncate.ic-tree-view-small) .heading-area-container{height:calc(var(--ic-space-xl) - var(--ic-space-1px))}:host(.ic-tree-view-truncate.ic-tree-view-large) .heading-area-container{height:calc(var(--ic-space-xxl) - var(--ic-space-1px))}.icon-container{width:var(--ic-space-lg);min-width:var(--ic-space-lg);height:var(--ic-space-lg);margin:0 var(--ic-space-xs) 0 0}:host(.ic-tree-view-small) .icon-container{margin:0 var(--ic-space-xxs) 0 0}.ic-text-overflow{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ic-tooltip-overflow{overflow:hidden}.tree-view-header.with-padding{padding-right:var(--ic-space-xs)}.tree-items-container-hidden{visibility:hidden}::slotted([slot="icon"]){fill:var(--ic-tree-view-icon)}@media (forced-colors: active){::slotted([slot="icon"]){fill:currentcolor}}';const v=d;var f=undefined&&undefined.__rest\|\|function(i,e){var t={};for(var s in i)if(Object.prototype.hasOwnProperty.call(i,s)&&e.indexOf(s)<0)t[s]=i[s];if(i!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,s=Object.getOwnPropertySymbols(i);a<s.length;a++){if(e.indexOf(s[a])<0&&Object.prototype.propertyIsEnumerable.call(i,s[a]))t[s[a]]=i[s[a]]}return t};let p=0;const u=class{constructor(e){i(this,e);this.treeViewId=`ic-tree-view-${p++}`;this.treeItemTag="IC-TREE-ITEM";this.hostMutationObserver=null;this.isLoaded=false;this.resizeObserver=null;this.TOOLTIP="ic-tooltip";this.previousTruncateHeading=false;this.previousTruncateTreeItems=false;this.smallDevice=false;this.heading="";this.size="medium";this.theme="inherit";this.treeItemData=[];this.truncateHeading=false;this.truncateTreeItems=false;this.hostMutationCallback=i=>{var e;(e=this.hostMutationObserver)===null\|\|e===void 0?void 0:e.disconnect();a(i,"icon",this);this.setTreeItems();this.createMutationObserver()};this.createMutationObserver=()=>{this.hostMutationObserver=new MutationObserver((i=>{this.hostMutationCallback(i)}));this.hostMutationObserver.observe(this.el,{childList:true,subtree:true})};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const i=c()<=h.S;if(this.smallDevice!==i)this.smallDevice=i}));this.resizeObserver.observe(document.body)};this.removeTruncation=()=>{this.truncateHeading=false;this.truncateTreeItems=false};this.handleKeyDown=i=>{var e,t;const s=this.treeItems.indexOf(this.treeItems.filter((i=>i===document.activeElement))[0]);const a=(e=this.treeItems[s])===null\|\|e===void 0?void 0:e.expanded;switch(i.key){case"ArrowDown":this.treeItems[this.getNextItemToSelect(s,true)].setFocus();if(s!==this.treeItems.length-1){i.preventDefault()}break;case"ArrowUp":this.treeItems[this.getNextItemToSelect(s,false)].setFocus();if(s!==0){i.preventDefault()}break;case"ArrowRight":if(this.treeItems[s].isParent&&!a){this.treeItems[s].expanded=true;this.treeItems[s].hasParentExpanded=true;this.treeItems[s].updateAriaLabel()}else if(this.treeItems[s].isParent&&a){this.treeItems[s].children[0].setFocus()}i.preventDefault();break;case"ArrowLeft":if(this.treeItems[s].isParent&&a){this.treeItems[s].expanded=false;this.treeItems[s].hasParentExpanded=false;this.treeItems[s].updateAriaLabel()}else if(((t=this.treeItems[s].parentElement)===null\|\|t===void 0?void 0:t.tagName)===this.treeItemTag){this.treeItems[s].parentElement.setFocus()}i.preventDefault();break}};this.getNextItemToSelect=(i,e)=>{var t;const s=this.treeItems.length-1;if(i<1){i=0}let a=e?i+1:i-1;if(a<0){a=0}else if(a>s){a=s}const c=s+1;let h=0;while(h<c){if(a<0\|\|a>s){return i}if(((t=this.treeItems[a].parentElement)===null\|\|t===void 0?void 0:t.tagName)!==this.treeItemTag\|\|this.treeItems[a].parentElement.expanded&&this.treeItems[a].offsetHeight>0){return a}if(a===s&&this.treeItems[a].disabled){return i}a=e?a+1:a-1;h++}return i};this.linkTreeItems=()=>{this.treeItems.forEach((i=>{i.setAttribute("context-id",this.treeViewId)}))};this.setTreeItems=()=>{this.treeItems=this.getAllTreeItems(this.el);this.linkTreeItems()};this.truncateTreeViewHeading=()=>{var i,e;const t=(i=this.el.shadowRoot)===null\|\|i===void 0?void 0:i.querySelector(".tree-view-header");const s=t===null\|\|t===void 0?void 0:t.closest(this.TOOLTIP);const a=(e=this.el.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector(".heading-area-container");if(t&&a&&t.scrollHeight>a.clientHeight){t.classList.add("ic-text-overflow");if(!s){const i=document.createElement("ic-tooltip");i.setAttribute("target",this.el.id);i.setAttribute("label",t.textContent);i.classList.add("ic-tooltip-overflow");i.setAttribute("placement","right");a.appendChild(i);i.appendChild(t)}}};this.removeHeadingTruncation=()=>{var i,e,t;const s=(i=this.el.shadowRoot)===null\|\|i===void 0?void 0:i.querySelector(".tree-view-header");const a=s===null\|\|s===void 0?void 0:s.closest(this.TOOLTIP);if(a&&s){s.classList.remove("ic-text-overflow");(t=(e=this.el.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector(".heading-area-container"))===null\|\|t===void 0?void 0:t.replaceChild(s,a)}};this.isHeadingDefined=()=>r(this.heading)&&this.heading!==null;this.hasHeadingAreaContent=()=>n(this.el,"heading")\|\|this.isHeadingDefined()\|\|n(this.el,"icon")}watchSmallDeviceHandler(){if(this.smallDevice){this.previousTruncateHeading=this.truncateHeading;this.previousTruncateTreeItems=this.truncateTreeItems;this.removeTruncation()}else{this.truncateHeading=this.previousTruncateHeading;this.truncateTreeItems=this.previousTruncateTreeItems}}watchSizeHandler(){this.treeItems.forEach((i=>{i.size=this.size}))}watchThemeHandler(){this.treeItems.forEach((i=>{i.theme=this.theme}))}watchTreeItemOptionsHandler(){this.setTreeItems()}watchTruncateTreeItemsHandler(){this.treeItems.forEach((i=>{if(this.smallDevice){i.previousTruncateTreeItem=i.truncateTreeItem;i.truncateTreeItem=this.truncateTreeItems}else{i.truncateTreeItem=i.previousTruncateTreeItem}}))}disconnectedCallback(){var i,e;(i=this.hostMutationObserver)===null\|\|i===void 0?void 0:i.disconnect();(e=this.resizeObserver)===null\|\|e===void 0?void 0:e.disconnect()}componentWillLoad(){this.setTreeItems();this.previousTruncateHeading=this.truncateHeading;this.previousTruncateTreeItems=this.truncateTreeItems;o(this.runResizeObserver);this.watchSizeHandler();this.watchThemeHandler();this.treeItems.forEach((i=>{if(i.truncateTreeItem===undefined){i.truncateTreeItem=this.truncateTreeItems}}))}componentDidRender(){this.truncateHeading?this.truncateTreeViewHeading():this.removeHeadingTruncation()}componentDidLoad(){this.createMutationObserver();this.isLoaded=true}handleTreeItemSelected(i){this.treeItems.forEach((e=>{if(e.selected&&e.id!==i.detail.id){e.selected=false}}))}getAllTreeItems(i){const e=[];const t=i=>{Array.from(i.children).forEach((i=>{if(i.tagName===this.treeItemTag){e.push(i)}t(i)}))};const s=(i,t)=>{Array.from(t.children).forEach((i=>{if(i.tagName===this.treeItemTag){t.removeChild(i)}}));i.forEach((i=>{const a=document.createElement(this.treeItemTag);const{children:c,icon:h}=i,r=f(i,["children","icon"]);Object.assign(a,r);if(h){const i=document.createElement("div");i.setAttribute("slot","icon");i.innerHTML=l(h);a.appendChild(i)}t.appendChild(a);e.push(a);if(c&&c.length>0){s(c,a)}}))};if(this.treeItemData.length>0){s(this.treeItemData,i)}else{t(i)}return e}render(){const{heading:i,isLoaded:s,size:a,theme:c,truncateHeading:h}=this;return e(t,{key:"8eb6b4a2b6572b986549e5a997bc5a9df0a8052f","context-id":this.treeViewId,class:{[`ic-tree-view-${a}`]:a!=="medium",[`ic-theme-${c}`]:c!=="inherit","ic-tree-view-truncate":h},onKeyDown:this.handleKeyDown,"aria-label":this.isHeadingDefined()?i:null},this.hasHeadingAreaContent()&&e("div",{key:"0e4d5516ffe8df51a3e1d23355a6798502fd2afb",class:"heading-area-container"},n(this.el,"icon")&&e("div",{key:"b6a6f6ab4a6de241301d8bc2ccd776795cf11444",class:"icon-container"},e("slot",{key:"c92eff87acaea0ecc5008dd46347ab4f3676e999",name:"icon"})),e("ic-typography",{key:"e250086864a60f85befcc622635a9054dce8ba74",variant:"subtitle-large",class:{"tree-view-header":true,"with-padding":this.truncateHeading&&!s}},n(this.el,"heading")?e("slot",{name:"heading"}):i)),e("slot",{key:"0c6e6ceb5017d2c0380af31e7c652a422d0cf2d8"}))}get el(){return s(this)}static get watchers(){return{smallDevice:["watchSmallDeviceHandler"],size:["watchSizeHandler"],theme:["watchThemeHandler"],treeItemData:["watchTreeItemOptionsHandler"],truncateTreeItems:["watchTruncateTreeItemsHandler"]}}};u.style=v;export{u as ic_tree_view};
2	+ //# sourceMappingURL=p-fc239961.entry.js.map

package/dist/core/p-fc239961.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["icTreeViewCss","IcTreeViewStyle0","treeViewIds","TreeView","constructor","hostRef","this","treeViewId","treeItemTag","hostMutationObserver","isLoaded","resizeObserver","TOOLTIP","previousTruncateHeading","previousTruncateTreeItems","smallDevice","heading","size","theme","treeItemData","truncateHeading","truncateTreeItems","hostMutationCallback","mutationList","_a","disconnect","renderDynamicChildSlots","setTreeItems","createMutationObserver","MutationObserver","observe","el","childList","subtree","runResizeObserver","ResizeObserver","isSmallDevice","getCurrentDeviceSize","DEVICE_SIZES","S","document","body","removeTruncation","handleKeyDown","event","focussedChild","treeItems","indexOf","filter","activeElement","expanded","key","getNextItemToSelect","setFocus","length","preventDefault","isParent","hasParentExpanded","updateAriaLabel","children","_b","parentElement","tagName","currentItem","movingDown","numItems","nextItem","maxAttempts","attempts","offsetHeight","disabled","linkTreeItems","forEach","treeItem","setAttribute","getAllTreeItems","truncateTreeViewHeading","typographyEl","shadowRoot","querySelector","tooltip","closest","headingContainer","scrollHeight","clientHeight","classList","add","tooltipEl","createElement","id","textContent","appendChild","removeHeadingTruncation","remove","_c","replaceChild","isHeadingDefined","isPropDefined","hasHeadingAreaContent","isSlotUsed","watchSmallDeviceHandler","watchSizeHandler","watchThemeHandler","watchTreeItemOptionsHandler","watchTruncateTreeItemsHandler","previousTruncateTreeItem","truncateTreeItem","disconnectedCallback","componentWillLoad","checkResizeObserver","undefined","componentDidRender","componentDidLoad","handleTreeItemSelected","selected","detail","element","collectTreeItemsFromSlottedContent","Array","from","child","push","collectTreeItemsFromData","items","removeChild","item","icon","props","__rest","Object","assign","iconSlot","innerHTML","sanitizeHTMLIconString","render","h","Host","class","onKeyDown","name","variant"],"sources":["src/components/ic-tree-view/ic-tree-view.css?tag=ic-tree-view&encapsulation=shadow","src/components/ic-tree-view/ic-tree-view.tsx"],"sourcesContent":["/**\n* @prop --tree-view-width: Width of the tree view\n*/\n\n:host {\n display: block;\n width: var(--tree-view-width, 100%);\n background-color: var(--ic-tree-view-background);\n}\n\n:host .heading-area-container {\n border-bottom: var(--ic-space-1px) solid var(--ic-tree-view-divider);\n display: flex;\n align-items: center;\n min-height: calc(\n var(--ic-space-xl) + var(--ic-space-xs) - var(--ic-space-1px)\n );\n padding: 0 var(--ic-space-xs);\n\n --ic-typography-color: var(--ic-tree-view-text);\n}\n\n:host(.ic-tree-view-small) .heading-area-container {\n min-height: calc(var(--ic-space-xl) - var(--ic-space-1px));\n}\n\n:host(.ic-tree-view-large) .heading-area-container {\n min-height: calc(var(--ic-space-xxl) - var(--ic-space-1px));\n}\n\n:host(.ic-tree-view-truncate) .heading-area-container {\n height: calc(var(--ic-space-xl) + var(--ic-space-xs) - var(--ic-space-1px));\n}\n\n:host(.ic-tree-view-truncate.ic-tree-view-small) .heading-area-container {\n height: calc(var(--ic-space-xl) - var(--ic-space-1px));\n}\n\n:host(.ic-tree-view-truncate.ic-tree-view-large) .heading-area-container {\n height: calc(var(--ic-space-xxl) - var(--ic-space-1px));\n}\n\n.icon-container {\n width: var(--ic-space-lg);\n min-width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n margin: 0 var(--ic-space-xs) 0 0;\n}\n\n:host(.ic-tree-view-small) .icon-container {\n margin: 0 var(--ic-space-xxs) 0 0;\n}\n\n.ic-text-overflow {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.ic-tooltip-overflow {\n overflow: hidden;\n}\n\n/* Ensures truncation works - accounts for text width increase as component hydrates */\n.tree-view-header.with-padding {\n padding-right: var(--ic-space-xs);\n}\n\n.tree-items-container-hidden {\n visibility: hidden;\n}\n\n::slotted([slot=\"icon\"]) {\n fill: var(--ic-tree-view-icon);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n ::slotted([slot=\"icon\"]) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Host,\n Watch,\n State,\n Listen,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n isPropDefined,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { sanitizeHTMLIconString } from \"../../../../web-components/src/utils/common-helpers\";\nimport { IcTreeItemOptions } from \"./ic-tree-view.types\";\n\nimport \"../../../../web-components/src/components/ic-typography/ic-typography\";\nimport \"../../../../web-components/src/components/ic-skip-link/ic-skip-link\";\n\nlet treeViewIds = 0;\n\n/**\n * @slot heading - Content is set as the tree view heading.\n * @slot icon - Content is placed to the left of the heading.\n */\n\n@Component({\n tag: \"ic-tree-view\",\n styleUrl: \"ic-tree-view.css\",\n shadow: true,\n})\nexport class TreeView {\n private treeViewId = `ic-tree-view-${treeViewIds++}`;\n private treeItemTag = \"IC-TREE-ITEM\";\n private hostMutationObserver: MutationObserver | null = null;\n private isLoaded = false;\n private resizeObserver: ResizeObserver | null = null;\n private TOOLTIP = \"ic-tooltip\";\n\n private previousTruncateHeading: boolean = false;\n private previousTruncateTreeItems: boolean = false;\n\n @Element() el: HTMLIcTreeViewElement;\n\n @State() smallDevice: boolean = false;\n @Watch(\"smallDevice\")\n watchSmallDeviceHandler(): void {\n if (this.smallDevice) {\n this.previousTruncateHeading = this.truncateHeading;\n this.previousTruncateTreeItems = this.truncateTreeItems;\n this.removeTruncation();\n } else {\n this.truncateHeading = this.previousTruncateHeading;\n this.truncateTreeItems = this.previousTruncateTreeItems;\n }\n }\n\n @State() treeItems: HTMLIcTreeItemElement[];\n\n /**\n * The heading of the tree view.\n */\n @Prop() heading: string = \"\";\n\n /**\n * The size of the tree view.\n */\n @Prop() size?: IcSizes = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.treeItems.forEach((treeItem) => {\n treeItem.size = this.size;\n });\n }\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.treeItems.forEach((treeItem) => {\n treeItem.theme = this.theme;\n });\n }\n\n /**\n * The content within the tree view tree items. This will take precedence over slotted content.\n * */\n @Prop() treeItemData: IcTreeItemOptions[] = [];\n @Watch(\"treeItemData\")\n watchTreeItemOptionsHandler(): void {\n this.setTreeItems();\n }\n\n /**\n * If `true`, the tree view heading will be truncated instead of text wrapping.\n * When used on small devices, this prop will be overridden and headings will be set to text-wrap.\n */\n @Prop({ mutable: true }) truncateHeading: boolean = false;\n\n /**\n * If `true`, tree items will be truncated, unless they are individually overridden.\n * When used on small devices, this prop will be overridden and tree-items will be set to text-wrap.\n */\n @Prop({ mutable: true }) truncateTreeItems: boolean = false;\n @Watch(\"truncateTreeItems\")\n watchTruncateTreeItemsHandler(): void {\n this.treeItems.forEach((treeItem) => {\n if (this.smallDevice) {\n treeItem.previousTruncateTreeItem = treeItem.truncateTreeItem;\n treeItem.truncateTreeItem = this.truncateTreeItems;\n } else {\n treeItem.truncateTreeItem = treeItem.previousTruncateTreeItem;\n }\n });\n }\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n this.resizeObserver?.disconnect();\n }\n componentWillLoad(): void {\n this.setTreeItems();\n\n this.previousTruncateHeading = this.truncateHeading;\n this.previousTruncateTreeItems = this.truncateTreeItems;\n\n checkResizeObserver(this.runResizeObserver);\n\n this.watchSizeHandler();\n this.watchThemeHandler();\n this.treeItems.forEach((treeItem) => {\n if (treeItem.truncateTreeItem === undefined) {\n treeItem.truncateTreeItem = this.truncateTreeItems;\n }\n });\n }\n\n componentDidRender(): void {\n this.truncateHeading\n ? this.truncateTreeViewHeading()\n : this.removeHeadingTruncation();\n }\n\n componentDidLoad(): void {\n this.createMutationObserver();\n\n this.isLoaded = true;\n }\n\n @Listen(\"icTreeItemSelected\")\n handleTreeItemSelected(event: CustomEvent): void {\n this.treeItems.forEach((treeItem) => {\n if (treeItem.selected && treeItem.id !== event.detail.id) {\n treeItem.selected = false;\n }\n });\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]) => {\n this.hostMutationObserver?.disconnect();\n renderDynamicChildSlots(mutationList, \"icon\", this);\n this.setTreeItems();\n this.createMutationObserver();\n };\n\n private createMutationObserver = () => {\n this.hostMutationObserver = new MutationObserver((mutationList) => {\n this.hostMutationCallback(mutationList);\n });\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n });\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const isSmallDevice = getCurrentDeviceSize() <= DEVICE_SIZES.S;\n if (this.smallDevice !== isSmallDevice) this.smallDevice = isSmallDevice;\n });\n\n this.resizeObserver.observe(document.body);\n };\n\n private removeTruncation = (): void => {\n this.truncateHeading = false;\n this.truncateTreeItems = false;\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const focussedChild = this.treeItems.indexOf(\n this.treeItems.filter((el) => el === document.activeElement)[0]\n );\n const expanded = this.treeItems[focussedChild]?.expanded;\n switch (event.key) {\n case \"ArrowDown\":\n this.treeItems[\n this.getNextItemToSelect(focussedChild, true)\n ].setFocus();\n if (focussedChild !== this.treeItems.length - 1) {\n event.preventDefault();\n }\n break;\n case \"ArrowUp\":\n this.treeItems[\n this.getNextItemToSelect(focussedChild, false)\n ].setFocus();\n if (focussedChild !== 0) {\n event.preventDefault();\n }\n break;\n case \"ArrowRight\":\n if (this.treeItems[focussedChild].isParent && !expanded) {\n this.treeItems[focussedChild].expanded = true;\n this.treeItems[focussedChild].hasParentExpanded = true;\n this.treeItems[focussedChild].updateAriaLabel();\n } else if (this.treeItems[focussedChild].isParent && expanded) {\n (\n this.treeItems[focussedChild].children[0] as HTMLIcTreeItemElement\n ).setFocus();\n }\n event.preventDefault();\n break;\n case \"ArrowLeft\":\n if (this.treeItems[focussedChild].isParent && expanded) {\n this.treeItems[focussedChild].expanded = false;\n this.treeItems[focussedChild].hasParentExpanded = false;\n this.treeItems[focussedChild].updateAriaLabel();\n } else if (\n this.treeItems[focussedChild].parentElement?.tagName ===\n this.treeItemTag\n ) {\n (\n this.treeItems[focussedChild].parentElement as HTMLIcTreeItemElement\n ).setFocus();\n }\n event.preventDefault();\n break;\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numItems = this.treeItems.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = 0;\n } else if (nextItem > numItems) {\n nextItem = numItems;\n }\n\n const maxAttempts = numItems + 1;\n let attempts = 0;\n\n while (attempts < maxAttempts) {\n if (nextItem < 0 || nextItem > numItems) {\n return currentItem;\n }\n\n if (\n this.treeItems[nextItem].parentElement?.tagName !== this.treeItemTag ||\n ((this.treeItems[nextItem].parentElement as HTMLIcTreeItemElement)\n .expanded &&\n this.treeItems[nextItem].offsetHeight > 0)\n ) {\n return nextItem;\n }\n\n if (nextItem === numItems && this.treeItems[nextItem].disabled) {\n return currentItem;\n }\n\n nextItem = movingDown ? nextItem + 1 : nextItem - 1;\n attempts++;\n }\n\n return currentItem;\n };\n\n private linkTreeItems = () => {\n this.treeItems.forEach((treeItem) => {\n treeItem.setAttribute(\"context-id\", this.treeViewId);\n });\n };\n\n private setTreeItems = () => {\n this.treeItems = this.getAllTreeItems(this.el as HTMLElement);\n\n this.linkTreeItems();\n };\n\n private getAllTreeItems(element: HTMLElement): HTMLIcTreeItemElement[] {\n const treeItems: HTMLIcTreeItemElement[] = [];\n\n const collectTreeItemsFromSlottedContent = (el: HTMLElement) => {\n Array.from(el.children).forEach((child) => {\n if (child.tagName === this.treeItemTag) {\n treeItems.push(child as HTMLIcTreeItemElement);\n }\n\n collectTreeItemsFromSlottedContent(child as HTMLElement);\n });\n };\n\n const collectTreeItemsFromData = (\n items: IcTreeItemOptions[],\n parentElement: HTMLElement\n ) => {\n Array.from(parentElement.children).forEach((child) => {\n if (child.tagName === this.treeItemTag) {\n parentElement.removeChild(child);\n }\n });\n\n items.forEach((item) => {\n const treeItem = document.createElement(\n this.treeItemTag\n ) as HTMLIcTreeItemElement;\n const { children, icon, ...props } = item;\n Object.assign(treeItem, props);\n\n if (icon) {\n const iconSlot = document.createElement(\"div\");\n iconSlot.setAttribute(\"slot\", \"icon\");\n iconSlot.innerHTML = sanitizeHTMLIconString(icon);\n treeItem.appendChild(iconSlot);\n }\n\n parentElement.appendChild(treeItem);\n treeItems.push(treeItem);\n\n if (children && children.length > 0) {\n collectTreeItemsFromData(children, treeItem);\n }\n });\n };\n\n if (this.treeItemData.length > 0) {\n collectTreeItemsFromData(this.treeItemData, element);\n } else {\n collectTreeItemsFromSlottedContent(element);\n }\n\n return treeItems;\n }\n\n private truncateTreeViewHeading = () => {\n const typographyEl =\n this.el.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n \".tree-view-header\"\n );\n const tooltip = typographyEl?.closest(this.TOOLTIP);\n const headingContainer = this.el.shadowRoot?.querySelector<HTMLElement>(\n \".heading-area-container\"\n );\n\n if (\n typographyEl &&\n headingContainer &&\n typographyEl.scrollHeight > headingContainer.clientHeight\n ) {\n typographyEl.classList.add(\"ic-text-overflow\");\n\n if (!tooltip) {\n const tooltipEl = document.createElement(\"ic-tooltip\");\n tooltipEl.setAttribute(\"target\", this.el.id);\n tooltipEl.setAttribute(\"label\", typographyEl.textContent!);\n tooltipEl.classList.add(\"ic-tooltip-overflow\");\n tooltipEl.setAttribute(\"placement\", \"right\");\n headingContainer.appendChild(tooltipEl);\n tooltipEl.appendChild(typographyEl);\n }\n }\n };\n\n private removeHeadingTruncation = () => {\n const typographyEl =\n this.el.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n \".tree-view-header\"\n );\n const tooltipEl = typographyEl?.closest<HTMLIcTooltipElement>(this.TOOLTIP);\n\n if (tooltipEl && typographyEl) {\n typographyEl.classList.remove(\"ic-text-overflow\");\n this.el.shadowRoot\n ?.querySelector(\".heading-area-container\")\n ?.replaceChild(typographyEl, tooltipEl);\n }\n };\n\n private isHeadingDefined = () =>\n isPropDefined(this.heading) && this.heading !== null;\n\n private hasHeadingAreaContent = (): boolean => {\n return (\n isSlotUsed(this.el, \"heading\") ||\n this.isHeadingDefined() ||\n isSlotUsed(this.el, \"icon\")\n );\n };\n\n render() {\n const { heading, isLoaded, size, theme, truncateHeading } = this;\n\n return (\n <Host\n context-id={this.treeViewId}\n class={{\n [`ic-tree-view-${size}`]: size !== \"medium\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n \"ic-tree-view-truncate\": truncateHeading,\n }}\n onKeyDown={this.handleKeyDown}\n aria-label={this.isHeadingDefined() ? heading : null}\n >\n {this.hasHeadingAreaContent() && (\n <div class=\"heading-area-container\">\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"subtitle-large\"\n class={{\n \"tree-view-header\": true,\n \"with-padding\": this.truncateHeading && !isLoaded,\n }}\n >\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n heading\n )}\n </ic-typography>\n </div>\n )}\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/core/p-fd4fd86a.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export{S as ic_status_tag}from"./p-7843f9be.js";import"./p-8e4e97b4.js";import"./p-7bbd1881.js";
2	+ //# sourceMappingURL=p-fd4fd86a.entry.js.map

package/dist/core/p-fd4fd86a.entry.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/esm/{OpenInNew-52210a9d.js → OpenInNew-6f820c13.js} RENAMED Viewed

@@ -2,4 +2,4 @@ const OpenInNew = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox
 export { OpenInNew as O };
-//# sourceMappingURL=OpenInNew-52210a9d.js.map
+//# sourceMappingURL=OpenInNew-6f820c13.js.map

package/dist/esm/OpenInNew-6f820c13.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"OpenInNew-6f820c13.js","mappings":";;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/{cjs/purify-039f565a.js → esm/common-helpers-f2174548.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-'use strict';
+import { m as IC_CUSTOM_ALLOWED_COMPONENTS } from './helpers-15fb9b13.js';
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1360,6 +1360,21 @@ var purify = {exports: {}};
 const purifier = purify.exports;
-exports.purifier = purifier;
+/* istanbul ignore next */
+const getCustomElementHandling = (allowICPrefix) => ({
+    CUSTOM_ELEMENT_HANDLING: {
+        tagNameCheck: (tagName) => (allowICPrefix && tagName.startsWith("ic-")) ||
+            IC_CUSTOM_ALLOWED_COMPONENTS.includes(tagName),
+        attributeNameCheck: /.*/,
+    },
+});
+const sanitizeHTMLString = (html) => {
+    return purifier.sanitize(html, getCustomElementHandling(true));
+};
+const sanitizeHTMLIconString = (html) => {
+    return purifier.sanitize(html, getCustomElementHandling(false));
+};
-//# sourceMappingURL=purify-039f565a.js.map
+export { sanitizeHTMLString as a, sanitizeHTMLIconString as s };
+//# sourceMappingURL=common-helpers-f2174548.js.map