npm - @ukic/canary-web-components - Versions diffs - 2.0.0-canary.13 → 2.0.0-canary.14 - Mend

@ukic/canary-web-components 2.0.0-canary.13 → 2.0.0-canary.14

Files changed (305) hide show

package/dist/cjs/ic-badge.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-badge.entry.cjs.js","mappings":"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","names":["hexToRgba","rgbaStrToObj","getCssProperty","IcThemeForegroundEnum","getParentElementType","getParentElement","isPropDefined","onComponentRequiredPropUndefined","h","Host"],"sources":["../web-components/dist/collection/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","../web-components/dist/collection/components/ic-badge/ic-badge.js"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n :host(.show) {\n animation: expand var(--ic-transition-duration-slow);\n }\n\n :host(.hide) {\n animation: shrink var(--ic-transition-duration-slow);\n }\n}\n\n:host {\n display: flex;\n height: var(--ic-space-md);\n min-width: var(--ic-space-md);\n width: -moz-fit-content;\n width: fit-content;\n border-radius: calc(2 * var(--ic-space-xxl));\n position: absolute;\n}\n\n:host(.neutral) {\n background-color: var(--ic-architectural-500);\n}\n\n:host(.light) {\n background-color: var(--ic-architectural-40);\n}\n\n:host(.info) {\n background-color: var(--ic-status-info);\n}\n\n:host(.warning) {\n background-color: var(--ic-status-warning-mid);\n}\n\n:host(.error) {\n background-color: var(--ic-status-error);\n}\n\n:host(.success) {\n background-color: var(--ic-status-success);\n}\n\n:host(.small) {\n height: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.large) {\n height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.dot.default) {\n height: var(--ic-space-xs);\n width: var(--ic-space-xs);\n min-width: var(--ic-space-xs);\n}\n\n:host(.dot.small) {\n height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.dot.large) {\n height: var(--ic-space-sm);\n width: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.foreground-dark) ::slotted() {\n fill: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ::slotted() {\n fill: white;\n}\n\n:host(.foreground-dark) ic-typography {\n color: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ic-typography {\n color: white;\n}\n\n:host(.text) ic-typography {\n align-self: center;\n padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.text.small) ic-typography {\n padding: 0 0.2132rem;\n}\n\n:host(.text.large) ic-typography {\n padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.icon) ::slotted(svg) {\n width: var(--ic-space-sm);\n height: var(--ic-space-sm);\n padding: var(--ic-space-xxxs);\n}\n\n:host(.icon.small) ::slotted(svg) {\n width: var(--ic-space-xs);\n height: var(--ic-space-xs);\n}\n\n:host(.icon.large) ::slotted(svg) {\n width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.far) {\n top: calc(-1 * var(--ic-space-xs));\n right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.far.small),\n:host(.dot.far.large) {\n top: calc(-1 * var(--ic-space-xxs));\n right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.dot.far),\n:host(.dot.far.small) {\n top: calc(-1 * var(--ic-space-xxxs));\n right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.near) {\n top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.dot.near) {\n top: calc(-1 * var(--ic-space-1px));\n right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.inline) {\n position: static;\n}\n\n:host(.hide) {\n visibility: hidden !important;\n transition: visibility var(--ic-transition-duration-slow);\n}\n\n@keyframes expand {\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes shrink {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n}\n","import { Host, h } from \"@stencil/core\";\nimport { IcThemeForegroundEnum, } from \"../../utils/types\";\nimport { getCssProperty, getParentElement, getParentElementType, hexToRgba, isPropDefined, onComponentRequiredPropUndefined, rgbaStrToObj, } from \"../../utils/helpers\";\n/*\n @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n /\nexport class Badge {\n constructor() {\n this.ariaLabel = null;\n this.setBadgeColour = () => {\n let colorRGBA = null;\n if (this.customColor !== null) {\n const firstChar = this.customColor.slice(0, 1);\n if (firstChar === \"#\") {\n colorRGBA = hexToRgba(this.customColor);\n }\n else if (firstChar.toLowerCase() === \"r\") {\n colorRGBA = rgbaStrToObj(this.customColor);\n }\n this.customColorRGBA = colorRGBA;\n this.el.style.backgroundColor = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;\n }\n };\n this.getBadgeForeground = () => {\n let red;\n let green;\n let blue;\n switch (this.variant) {\n case \"custom\":\n red = this.customColorRGBA.r;\n green = this.customColorRGBA.g;\n blue = this.customColorRGBA.b;\n break;\n case \"error\":\n red = parseInt(getCssProperty(\"--ic-status-error-r\"));\n green = parseInt(getCssProperty(\"--ic-status-error-g\"));\n blue = parseInt(getCssProperty(\"--ic-status-error-b\"));\n break;\n case \"success\":\n red = parseInt(getCssProperty(\"--ic-status-success-r\"));\n green = parseInt(getCssProperty(\"--ic-status-success-g\"));\n blue = parseInt(getCssProperty(\"--ic-status-success-b\"));\n break;\n case \"warning\":\n red = parseInt(getCssProperty(\"--ic-status-warning-r\"));\n green = parseInt(getCssProperty(\"--ic-status-warning-g\"));\n blue = parseInt(getCssProperty(\"--ic-status-warning-b\"));\n break;\n case \"info\": {\n const info = hexToRgba(getCssProperty(\"--ic-status-info\"));\n red = info.r;\n green = info.g;\n blue = info.b;\n break;\n }\n case \"neutral\": {\n const neutral = hexToRgba(getCssProperty(\"--ic-architectural-500\"));\n red = neutral.r;\n green = neutral.g;\n blue = neutral.b;\n break;\n }\n case \"light\": {\n const light = hexToRgba(getCssProperty(\"--ic-architectural-40\"));\n red = light.r;\n green = light.g;\n blue = light.b;\n break;\n }\n }\n const brightness = (red 299 + green * 587 + blue * 114) / 1000;\n this.foregroundColour =\n brightness > 133.3505\n ? IcThemeForegroundEnum.Dark\n : IcThemeForegroundEnum.Light;\n };\n this.getTextLabel = () => {\n let label;\n if (this.textLabel !== null) {\n if (this.maxNumber !== null) {\n label =\n Number(this.textLabel) > this.maxNumber\n ? `${this.maxNumber}+`\n : this.textLabel;\n }\n else {\n label = this.textLabel;\n }\n }\n return label;\n };\n // Set aria-label on badge and / or parent element\n // Aria-describedby seems to not work, probably due to shadow DOM\n this.setAccessibleLabel = () => {\n const parentElType = getParentElementType(this.el);\n const parentElAriaLabel = getParentElement(this.el).ariaLabel;\n const defaultAriaLabel = this.isAccessibleLabelDefined()\n ? this.accessibleLabel\n : this.textLabel \|\| \"with badge being displayed\";\n if (getParentElement(this.el) !== null) {\n if (parentElType !== \"IC-CARD\" &&\n (parentElType !== \"IC-TAB\" \|\|\n (parentElType === \"IC-TAB\" && parentElAriaLabel))) {\n getParentElement(this.el).ariaLabel = `${parentElAriaLabel ? `${parentElAriaLabel} ,` : \"\"} ${defaultAriaLabel}`;\n }\n else {\n this.ariaLabel = `, ${defaultAriaLabel}`;\n }\n }\n };\n this.isAccessibleLabelDefined = () => {\n return isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n };\n this.accessibleLabel = undefined;\n this.customColor = null;\n this.maxNumber = undefined;\n this.position = \"far\";\n this.size = \"default\";\n this.textLabel = undefined;\n this.type = \"text\";\n this.variant = \"neutral\";\n this.visible = true;\n }\n componentWillLoad() {\n this.variant === \"custom\" && this.setBadgeColour();\n this.getBadgeForeground();\n this.setAccessibleLabel();\n }\n componentDidLoad() {\n this.type === \"text\" &&\n onComponentRequiredPropUndefined([{ prop: this.textLabel, propName: \"text-label\" }], \"Badge\");\n }\n /*\n @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n /\n async showBadge() {\n this.visible = true;\n }\n /\n @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n */\n async hideBadge() {\n this.visible = false;\n }\n render() {\n const { position, size, type, variant, foregroundColour, visible } = this;\n return (h(Host, { class: {\n [`${position}`]: true,\n [`${size}`]: true,\n [`${variant}`]: true,\n [`${type}`]: true,\n [`foreground-${foregroundColour}`]: foregroundColour !== null,\n [\"show\"]: visible,\n [\"hide\"]: !visible,\n }, id: this.el.id \|\| null, \"aria-label\": this.ariaLabel, role: \"status\" }, type === \"icon\" && h(\"slot\", { name: \"badge-icon\" }), type === \"text\" && (h(\"ic-typography\", { variant: size === \"small\" ? \"badge-small\" : \"badge\" }, this.getTextLabel()))));\n }\n static get is() { return \"ic-badge\"; }\n static get encapsulation() { return \"shadow\"; }\n static get delegatesFocus() { return true; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"ic-badge.css\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"ic-badge.css\"]\n };\n }\n static get properties() {\n return {\n \"accessibleLabel\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The accessible label of the badge component to provide context for screen reader users.\"\n },\n \"attribute\": \"accessible-label\",\n \"reflect\": false\n },\n \"customColor\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcColor\",\n \"resolved\": \"`#${string}` \| `rgb(${string})` \| `rgba(${string})`\",\n \"references\": {\n \"IcColor\": {\n \"location\": \"import\",\n \"path\": \"./ic-badge.types\",\n \"id\": \"src/components/ic-badge/ic-badge.types.ts::IcColor\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The custom badge colour. This will only style the badge component if variant=\\\"custom\\\".\\nCan be a hex value e.g. \\\"#ff0000\\\", RGB e.g. \\\"rgb(255, 0, 0)\\\", or RGBA e.g. \\\"rgba(255, 0, 0, 1)\\\".\"\n },\n \"attribute\": \"custom-color\",\n \"reflect\": false,\n \"defaultValue\": \"null\"\n },\n \"maxNumber\": {\n \"type\": \"number\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"number\",\n \"resolved\": \"number\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The maximum number shown on the badge appended with a +.\\nThis will only be displayed if type=\\\"text\\\" and textLabel is not empty.\"\n },\n \"attribute\": \"max-number\",\n \"reflect\": false\n },\n \"position\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcBadgePositions\",\n \"resolved\": \"\\\"far\\\" \| \\\"inline\\\" \| \\\"near\\\"\",\n \"references\": {\n \"IcBadgePositions\": {\n \"location\": \"import\",\n \"path\": \"./ic-badge.types\",\n \"id\": \"src/components/ic-badge/ic-badge.types.ts::IcBadgePositions\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The positioning of the badge in reference to the parent element.\"\n },\n \"attribute\": \"position\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"far\\\"\"\n },\n \"size\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcSizes\",\n \"resolved\": \"\\\"default\\\" \| \\\"large\\\" \| \\\"small\\\"\",\n \"references\": {\n \"IcSizes\": {\n \"location\": \"import\",\n \"path\": \"../../utils/types\",\n \"id\": \"src/utils/types.ts::IcSizes\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The size of the badge to be displayed.\"\n },\n \"attribute\": \"size\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"default\\\"\"\n },\n \"textLabel\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The text displayed in the badge. This will only be displayed if type=\\\"text\\\".\"\n },\n \"attribute\": \"text-label\",\n \"reflect\": false\n },\n \"type\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcBadgeTypes\",\n \"resolved\": \"\\\"dot\\\" \| \\\"icon\\\" \| \\\"text\\\"\",\n \"references\": {\n \"IcBadgeTypes\": {\n \"location\": \"import\",\n \"path\": \"./ic-badge.types\",\n \"id\": \"src/components/ic-badge/ic-badge.types.ts::IcBadgeTypes\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The type of badge to be displayed.\"\n },\n \"attribute\": \"type\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"text\\\"\"\n },\n \"variant\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcBadgeVariants\",\n \"resolved\": \"\\\"custom\\\" \| \\\"error\\\" \| \\\"info\\\" \| \\\"light\\\" \| \\\"neutral\\\" \| \\\"success\\\" \| \\\"warning\\\"\",\n \"references\": {\n \"IcBadgeVariants\": {\n \"location\": \"import\",\n \"path\": \"./ic-badge.types\",\n \"id\": \"src/components/ic-badge/ic-badge.types.ts::IcBadgeVariants\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The variant of the badge to be displayed.\"\n },\n \"attribute\": \"variant\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"neutral\\\"\"\n },\n \"visible\": {\n \"type\": \"boolean\",\n \"mutable\": true,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the badge will be displayed.\"\n },\n \"attribute\": \"visible\",\n \"reflect\": false,\n \"defaultValue\": \"true\"\n }\n };\n }\n static get methods() {\n return {\n \"showBadge\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"\",\n \"tags\": [{\n \"name\": \"deprecated\",\n \"text\": \"This method should not be used anymore. Use visible prop to set badge visibility.\"\n }]\n }\n },\n \"hideBadge\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"\",\n \"tags\": [{\n \"name\": \"deprecated\",\n \"text\": \"This method should not be used anymore. Use visible prop to set badge visibility.\"\n }]\n }\n }\n };\n }\n static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=ic-badge.js.map\n"],"version":3}
1	+ {"file":"ic-badge.entry.cjs.js","mappings":"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","names":["convertToRGBA","getCssProperty","hexToRgba","IcThemeForegroundEnum","getParentElementType","getParentElement","isPropDefined","onComponentRequiredPropUndefined","h","Host"],"sources":["../web-components/dist/collection/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","../web-components/dist/collection/components/ic-badge/ic-badge.js"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n :host(.show) {\n animation: expand var(--ic-transition-duration-slow);\n }\n\n :host(.hide) {\n animation: shrink var(--ic-transition-duration-slow);\n }\n}\n\n:host {\n display: flex;\n height: var(--ic-space-md);\n min-width: var(--ic-space-md);\n width: -moz-fit-content;\n width: fit-content;\n border-radius: calc(2 * var(--ic-space-xxl));\n position: absolute;\n}\n\n:host(.neutral) {\n background-color: var(--ic-architectural-500);\n}\n\n:host(.light) {\n background-color: var(--ic-architectural-40);\n}\n\n:host(.info) {\n background-color: var(--ic-status-info);\n}\n\n:host(.warning) {\n background-color: var(--ic-status-warning-mid);\n}\n\n:host(.error) {\n background-color: var(--ic-status-error);\n}\n\n:host(.success) {\n background-color: var(--ic-status-success);\n}\n\n:host(.small) {\n height: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.large) {\n height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.dot.default) {\n height: var(--ic-space-xs);\n width: var(--ic-space-xs);\n min-width: var(--ic-space-xs);\n}\n\n:host(.dot.small) {\n height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.dot.large) {\n height: var(--ic-space-sm);\n width: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.foreground-dark) ::slotted() {\n fill: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ::slotted() {\n fill: white;\n}\n\n:host(.foreground-dark) ic-typography {\n color: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ic-typography {\n color: white;\n}\n\n:host(.text) ic-typography {\n align-self: center;\n padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.text.small) ic-typography {\n padding: 0 0.2132rem;\n}\n\n:host(.text.large) ic-typography {\n padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.icon) ::slotted(svg) {\n width: var(--ic-space-sm);\n height: var(--ic-space-sm);\n padding: var(--ic-space-xxxs);\n}\n\n:host(.icon.small) ::slotted(svg) {\n width: var(--ic-space-xs);\n height: var(--ic-space-xs);\n}\n\n:host(.icon.large) ::slotted(svg) {\n width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.far) {\n top: calc(-1 * var(--ic-space-xs));\n right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.far.small),\n:host(.dot.far.large) {\n top: calc(-1 * var(--ic-space-xxs));\n right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.dot.far),\n:host(.dot.far.small) {\n top: calc(-1 * var(--ic-space-xxxs));\n right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.near) {\n top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.dot.near) {\n top: calc(-1 * var(--ic-space-1px));\n right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.inline) {\n position: static;\n}\n\n:host(.hide) {\n visibility: hidden !important;\n transition: visibility var(--ic-transition-duration-slow);\n}\n\n@keyframes expand {\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes shrink {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n}\n","import { Host, h } from \"@stencil/core\";\nimport { IcThemeForegroundEnum, } from \"../../utils/types\";\nimport { convertToRGBA, getCssProperty, getParentElement, getParentElementType, hexToRgba, isPropDefined, onComponentRequiredPropUndefined, } from \"../../utils/helpers\";\n/*\n @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n /\nexport class Badge {\n constructor() {\n this.ariaLabel = null;\n this.setBadgeColour = () => {\n if (this.customColor !== null && convertToRGBA(this.customColor) !== null) {\n const colorRGBA = convertToRGBA(this.customColor);\n this.customColorRGBA = colorRGBA;\n this.el.style.backgroundColor = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;\n }\n };\n this.getBadgeForeground = () => {\n let red;\n let green;\n let blue;\n switch (this.variant) {\n case \"custom\":\n red = this.customColorRGBA.r;\n green = this.customColorRGBA.g;\n blue = this.customColorRGBA.b;\n break;\n case \"error\":\n red = parseInt(getCssProperty(\"--ic-status-error-r\"));\n green = parseInt(getCssProperty(\"--ic-status-error-g\"));\n blue = parseInt(getCssProperty(\"--ic-status-error-b\"));\n break;\n case \"success\":\n red = parseInt(getCssProperty(\"--ic-status-success-r\"));\n green = parseInt(getCssProperty(\"--ic-status-success-g\"));\n blue = parseInt(getCssProperty(\"--ic-status-success-b\"));\n break;\n case \"warning\":\n red = parseInt(getCssProperty(\"--ic-status-warning-r\"));\n green = parseInt(getCssProperty(\"--ic-status-warning-g\"));\n blue = parseInt(getCssProperty(\"--ic-status-warning-b\"));\n break;\n case \"info\": {\n const info = hexToRgba(getCssProperty(\"--ic-status-info\"));\n red = info.r;\n green = info.g;\n blue = info.b;\n break;\n }\n case \"neutral\": {\n const neutral = hexToRgba(getCssProperty(\"--ic-architectural-500\"));\n red = neutral.r;\n green = neutral.g;\n blue = neutral.b;\n break;\n }\n case \"light\": {\n const light = hexToRgba(getCssProperty(\"--ic-architectural-40\"));\n red = light.r;\n green = light.g;\n blue = light.b;\n break;\n }\n }\n const brightness = (red 299 + green * 587 + blue * 114) / 1000;\n this.foregroundColour =\n brightness > 133.3505\n ? IcThemeForegroundEnum.Dark\n : IcThemeForegroundEnum.Light;\n };\n this.getTextLabel = () => {\n let label;\n if (this.textLabel !== null) {\n if (this.maxNumber !== null) {\n label =\n Number(this.textLabel) > this.maxNumber\n ? `${this.maxNumber}+`\n : this.textLabel;\n }\n else {\n label = this.textLabel;\n }\n }\n return label;\n };\n // Set aria-label on badge and / or parent element\n // Aria-describedby seems to not work, probably due to shadow DOM\n this.setAccessibleLabel = () => {\n const parentElType = getParentElementType(this.el);\n const parentElAriaLabel = getParentElement(this.el).ariaLabel;\n const defaultAriaLabel = this.isAccessibleLabelDefined()\n ? this.accessibleLabel\n : this.textLabel \|\| \"with badge being displayed\";\n if (getParentElement(this.el) !== null) {\n if (parentElType !== \"IC-CARD\" &&\n (parentElType !== \"IC-TAB\" \|\|\n (parentElType === \"IC-TAB\" && parentElAriaLabel))) {\n getParentElement(this.el).ariaLabel = `${parentElAriaLabel ? `${parentElAriaLabel} ,` : \"\"} ${defaultAriaLabel}`;\n }\n else {\n this.ariaLabel = `, ${defaultAriaLabel}`;\n }\n }\n };\n this.isAccessibleLabelDefined = () => {\n return isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n };\n this.accessibleLabel = undefined;\n this.customColor = null;\n this.maxNumber = undefined;\n this.position = \"far\";\n this.size = \"default\";\n this.textLabel = undefined;\n this.type = \"text\";\n this.variant = \"neutral\";\n this.visible = true;\n }\n componentWillLoad() {\n this.variant === \"custom\" && this.setBadgeColour();\n this.getBadgeForeground();\n this.setAccessibleLabel();\n }\n componentDidLoad() {\n this.type === \"text\" &&\n onComponentRequiredPropUndefined([{ prop: this.textLabel, propName: \"text-label\" }], \"Badge\");\n }\n /*\n @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n /\n async showBadge() {\n this.visible = true;\n }\n /\n @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n */\n async hideBadge() {\n this.visible = false;\n }\n render() {\n const { position, size, type, variant, foregroundColour, visible } = this;\n return (h(Host, { class: {\n [`${position}`]: true,\n [`${size}`]: true,\n [`${variant}`]: true,\n [`${type}`]: true,\n [`foreground-${foregroundColour}`]: foregroundColour !== null,\n [\"show\"]: visible,\n [\"hide\"]: !visible,\n }, id: this.el.id \|\| null, \"aria-label\": this.ariaLabel, role: \"status\" }, type === \"icon\" && h(\"slot\", { name: \"badge-icon\" }), type === \"text\" && (h(\"ic-typography\", { variant: size === \"small\" ? \"badge-small\" : \"badge\" }, this.getTextLabel()))));\n }\n static get is() { return \"ic-badge\"; }\n static get encapsulation() { return \"shadow\"; }\n static get delegatesFocus() { return true; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"ic-badge.css\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"ic-badge.css\"]\n };\n }\n static get properties() {\n return {\n \"accessibleLabel\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The accessible label of the badge component to provide context for screen reader users.\"\n },\n \"attribute\": \"accessible-label\",\n \"reflect\": false\n },\n \"customColor\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcColor\",\n \"resolved\": \"`#${string}` \| `rgb(${string})` \| `rgba(${string})`\",\n \"references\": {\n \"IcColor\": {\n \"location\": \"import\",\n \"path\": \"../../utils/types\",\n \"id\": \"src/utils/types.ts::IcColor\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The custom badge colour. This will only style the badge component if variant=\\\"custom\\\".\\nCan be a hex value e.g. \\\"#ff0000\\\", RGB e.g. \\\"rgb(255, 0, 0)\\\", or RGBA e.g. \\\"rgba(255, 0, 0, 1)\\\".\"\n },\n \"attribute\": \"custom-color\",\n \"reflect\": false,\n \"defaultValue\": \"null\"\n },\n \"maxNumber\": {\n \"type\": \"number\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"number\",\n \"resolved\": \"number\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The maximum number shown on the badge appended with a +.\\nThis will only be displayed if type=\\\"text\\\" and textLabel is not empty.\"\n },\n \"attribute\": \"max-number\",\n \"reflect\": false\n },\n \"position\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcBadgePositions\",\n \"resolved\": \"\\\"far\\\" \| \\\"inline\\\" \| \\\"near\\\"\",\n \"references\": {\n \"IcBadgePositions\": {\n \"location\": \"import\",\n \"path\": \"./ic-badge.types\",\n \"id\": \"src/components/ic-badge/ic-badge.types.ts::IcBadgePositions\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The positioning of the badge in reference to the parent element.\"\n },\n \"attribute\": \"position\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"far\\\"\"\n },\n \"size\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcSizes\",\n \"resolved\": \"\\\"default\\\" \| \\\"large\\\" \| \\\"small\\\"\",\n \"references\": {\n \"IcSizes\": {\n \"location\": \"import\",\n \"path\": \"../../utils/types\",\n \"id\": \"src/utils/types.ts::IcSizes\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The size of the badge to be displayed.\"\n },\n \"attribute\": \"size\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"default\\\"\"\n },\n \"textLabel\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The text displayed in the badge. This will only be displayed if type=\\\"text\\\".\"\n },\n \"attribute\": \"text-label\",\n \"reflect\": false\n },\n \"type\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcBadgeTypes\",\n \"resolved\": \"\\\"dot\\\" \| \\\"icon\\\" \| \\\"text\\\"\",\n \"references\": {\n \"IcBadgeTypes\": {\n \"location\": \"import\",\n \"path\": \"./ic-badge.types\",\n \"id\": \"src/components/ic-badge/ic-badge.types.ts::IcBadgeTypes\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The type of badge to be displayed.\"\n },\n \"attribute\": \"type\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"text\\\"\"\n },\n \"variant\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcBadgeVariants\",\n \"resolved\": \"\\\"custom\\\" \| \\\"error\\\" \| \\\"info\\\" \| \\\"light\\\" \| \\\"neutral\\\" \| \\\"success\\\" \| \\\"warning\\\"\",\n \"references\": {\n \"IcBadgeVariants\": {\n \"location\": \"import\",\n \"path\": \"./ic-badge.types\",\n \"id\": \"src/components/ic-badge/ic-badge.types.ts::IcBadgeVariants\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The variant of the badge to be displayed.\"\n },\n \"attribute\": \"variant\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"neutral\\\"\"\n },\n \"visible\": {\n \"type\": \"boolean\",\n \"mutable\": true,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the badge will be displayed.\"\n },\n \"attribute\": \"visible\",\n \"reflect\": false,\n \"defaultValue\": \"true\"\n }\n };\n }\n static get methods() {\n return {\n \"showBadge\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"\",\n \"tags\": [{\n \"name\": \"deprecated\",\n \"text\": \"This method should not be used anymore. Use visible prop to set badge visibility.\"\n }]\n }\n },\n \"hideBadge\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"\",\n \"tags\": [{\n \"name\": \"deprecated\",\n \"text\": \"This method should not be used anymore. Use visible prop to set badge visibility.\"\n }]\n }\n }\n };\n }\n static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=ic-badge.js.map\n"],"version":3}

package/dist/cjs/ic-breadcrumb-group.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-4cf27b16.js');
-const helpers = require('./helpers-6acbb97e.js');
+const helpers = require('./helpers-6d736902.js');
 require('./types-17dba796.js');
 const icBreadcrumbGroupCss = ":host{display:block}:host ol{display:flex;list-style-type:none;align-items:center;flex-wrap:wrap;padding:0;margin:0}:host(.back) ol ::slotted(ic-breadcrumb){display:none}:host(.back) ol ::slotted(ic-breadcrumb.show){display:flex}:host(.collapsed) ol ::slotted(ic-breadcrumb.hide){display:none;opacity:0;visibility:hidden}:host(.collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){display:block;opacity:0;transition:all var(--ic-easing-transition-slow)}:host(.collapsed) ol ::slotted(ic-breadcrumb.fade){opacity:1}";

package/dist/cjs/ic-breadcrumb.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-4cf27b16.js');
 const chevronIcon = require('./chevron-icon-3dedd973.js');
-const helpers = require('./helpers-6acbb97e.js');
+const helpers = require('./helpers-6d736902.js');
 require('./types-17dba796.js');
 const backIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/dist/cjs/ic-button_3.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-4cf27b16.js');
-const helpers = require('./helpers-6acbb97e.js');
+const helpers = require('./helpers-6d736902.js');
 const types = require('./types-17dba796.js');
 const popper = require('./popper-16968c2e.js');
@@ -39,24 +39,16 @@ const Button = class {
         this.describedById = null;
         this.mutationObserver = null;
         this.hostMutationObserver = null;
-        this.setViewBox = () => {
-            let iconEl;
-            if (this.hasLeftIconSlot()) {
-                iconEl = this.el.querySelector(`[slot="left-icon"]`);
-            }
-            else if (this.hasRightIconSlot()) {
-                iconEl = this.el.querySelector(`[slot="right-icon"]`);
-            }
-            else {
-                iconEl = null;
-            }
-            return iconEl;
-        };
         this.handleClick = () => {
             if ((this.el.type === "submit" || this.el.type === "reset") &&
                 !this.hasRouterSlot() &&
                 !!this.el.closest("FORM")) {
-                this.handleHiddenFormButtonClick(this.el.closest("FORM"));
+                const hiddenFormButton = document.createElement("button");
+                hiddenFormButton.setAttribute("type", this.el.type);
+                hiddenFormButton.style.display = "none";
+                this.el.closest("FORM").appendChild(hiddenFormButton);
+                hiddenFormButton.click();
+                hiddenFormButton.remove();
             }
         };
         this.onFocus = () => {
@@ -65,11 +57,6 @@ const Button = class {
         this.onBlur = () => {
             this.icBlur.emit();
         };
-        this.loadingWidth = () => {
-            if (this.loading) {
-                this.el.style.setProperty("--min-width", `${this.el.getBoundingClientRect().width}px`);
-            }
-        };
         // triggered when text content of sibling element in light DOM changes
         this.mutationCallback = () => {
             this.describedByContent = this.describedByEl.innerText;
@@ -96,23 +83,6 @@ const Button = class {
             this.hasTooltip =
                 !this.disableTooltip && (!!this.title || this.variant === "icon");
         };
-        // file explorer is only opened if the property fileUpload is set to 'true'
-        this.openFileExplorer = () => {
-            helpers.renderFileHiddenInput(this.icFileSelection, this.el, this.multiple, this.fileInputName, this.selectedFiles, this.disabled, this.accept);
-        };
-        this.isTooltipSilent = () => {
-            if (this.variant === "icon") {
-                if (this.title)
-                    return true;
-                else if (this.ariaLabel)
-                    return true;
-                else
-                    return false;
-            }
-            else {
-                return false;
-            }
-        };
         this.ariaLabel = null;
         this.describedByContent = null;
         this.title = null;
@@ -161,29 +131,26 @@ const Button = class {
         }
     }
     componentWillUpdate() {
-        this.loadingWidth();
+        if (this.loading) {
+            this.el.style.setProperty("--min-width", `${this.el.getBoundingClientRect().width}px`);
+        }
         this.setHasTooltip();
     }
     componentWillLoad() {
-        const allInheritedAttributes = helpers.inheritAttributes(this.el, [
-            ...helpers.IC_INHERITED_ARIA,
-            "title",
-        ]);
-        const { title, "aria-label": ariaLabel } = allInheritedAttributes, restInheritedAttributes = __rest(allInheritedAttributes, ["title", "aria-label"]);
+        const _a = helpers.inheritAttributes(this.el, [...helpers.IC_INHERITED_ARIA, "title"]), { title, "aria-label": ariaLabel } = _a, restInheritedAttributes = __rest(_a, ["title", "aria-label"]);
         this.title = title;
         this.ariaLabel = ariaLabel;
         this.inheritedAttributes = restInheritedAttributes;
         helpers.removeDisabledFalse(this.disabled, this.el);
         this.el.setAttribute("exportparts", "button");
-        const id = this.el.id;
-        this.id = id !== undefined ? id : null;
+        this.id = this.el.id || null;
         this.setHasTooltip();
         if (!this.hasTooltip) {
             const describedById = this.inheritedAttributes["aria-describedby"];
             if (describedById !== undefined) {
                 this.describedById = describedById;
                 const el = this.el.parentElement.querySelector(`#${describedById}`);
-                if (el !== undefined && el !== null) {
+                if (el) {
                     this.describedByContent = el.innerText;
                     this.describedByEl = el;
                 }
@@ -208,13 +175,17 @@ const Button = class {
         }
     }
     componentWillRender() {
-        var _a;
-        (_a = this.setViewBox()) === null || _a === void 0 ? void 0 : _a.setAttribute("viewBox", "0 0 24 24");
+        const iconEl = this.hasIconSlot("left")
+            ? this.el.querySelector(`[slot="left-icon"]`)
+            : this.hasIconSlot("right")
+                ? this.el.querySelector(`[slot="right-icon"]`)
+                : null;
+        iconEl === null || iconEl === void 0 ? void 0 : iconEl.setAttribute("viewBox", "0 0 24 24");
     }
     handleHostClick(event) {
         if (!this.hasRouterSlot()) {
             if (this.fileUpload) {
-                this.openFileExplorer();
+                helpers.renderFileHiddenInput(this.icFileSelection, this.el, this.multiple, this.fileInputName, this.selectedFiles, this.disabled, this.accept);
             }
             if (this.disabled || this.loading) {
                 event.stopImmediatePropagation();
@@ -224,33 +195,19 @@ const Button = class {
             }
         }
     }
-    themeChangeHandler(ev) {
-        const theme = ev.detail;
-        this.updateTheme(theme.mode);
+    themeChangeHandler({ detail }) {
+        this.updateTheme(detail.mode);
     }
     /**
      * Sets focus on the native `button`.
      */
     async setFocus() {
-        if (this.buttonEl) {
-            this.buttonEl.focus();
-        }
-    }
-    hasIconSlot() {
-        const iconEl = this.el.querySelector(`[slot="icon"]`);
-        return iconEl !== null;
-    }
-    hasLeftIconSlot() {
-        const iconEl = this.el.querySelector(`[slot="left-icon"]`);
-        return iconEl !== null;
-    }
-    hasTopIconSlot() {
-        const iconEl = this.el.querySelector(`[slot="top-icon"]`);
-        return iconEl !== null;
+        var _a;
+        (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    hasRightIconSlot() {
-        const iconEl = this.el.querySelector(`[slot="right-icon"]`);
-        return iconEl !== null;
+    hasIconSlot(position) {
+        const selectorPrefix = position ? `${position}-` : "";
+        return this.el.querySelector(`[slot="${selectorPrefix}icon"]`) !== null;
     }
     hasRouterSlot() {
         this.routerSlot = this.el.querySelector('[slot="router-item"]');
@@ -259,16 +216,8 @@ const Button = class {
         }
         return !!this.routerSlot;
     }
-    handleHiddenFormButtonClick(form) {
-        const hiddenFormButton = document.createElement("button");
-        hiddenFormButton.setAttribute("type", this.el.type);
-        hiddenFormButton.style.display = "none";
-        form.appendChild(hiddenFormButton);
-        hiddenFormButton.click();
-        hiddenFormButton.remove();
-    }
     updateTheme(newTheme = null) {
-        const foregroundColor = helpers.getThemeFromContext(this.el, newTheme || null);
+        const foregroundColor = helpers.getThemeFromContext(this.el, newTheme);
         if (foregroundColor !== types.IcThemeForegroundEnum.Default) {
             this.appearance = foregroundColor;
         }
@@ -311,15 +260,15 @@ const Button = class {
             describedBy = this.describedById;
         }
         const ButtonContent = () => {
-            return (index.h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, buttonAttrs, inheritedAttributes, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), "aria-describedby": describedBy, part: "button" }), this.hasIconSlot() && !this.loading && (index.h("div", { class: "icon-container" }, index.h("slot", { name: "icon" }))), this.hasLeftIconSlot() && !this.loading && (index.h("div", { class: "icon-container" }, index.h("slot", { name: "left-icon" }))), this.hasTopIconSlot() &&
-                !this.hasLeftIconSlot() &&
-                !this.hasRightIconSlot() &&
+            return (index.h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, buttonAttrs, inheritedAttributes, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), "aria-describedby": describedBy, part: "button" }), this.hasIconSlot() && !this.loading && (index.h("div", { class: "icon-container" }, index.h("slot", { name: "icon" }))), this.hasIconSlot("left") && !this.loading && (index.h("div", { class: "icon-container" }, index.h("slot", { name: "left-icon" }))), this.hasIconSlot("top") &&
+                !this.hasIconSlot("left") &&
+                !this.hasIconSlot("right") &&
                 !this.loading && (index.h("div", { class: "icon-container" }, index.h("slot", { name: "top-icon" }))), this.loading ? (index.h("div", { class: "loading-container" }, index.h("ic-loading-indicator", { type: "linear", appearance: this.variant === "primary" ||
                     this.variant === "destructive" ||
                     this.appearance === types.IcThemeForegroundEnum.Dark ||
                     this.appearance === types.IcThemeForegroundEnum.Light
                     ? "light"
-                    : "dark" }))) : (index.h("slot", null)), this.hasRightIconSlot() && !this.loading && !this.dropdown && (index.h("div", { class: { "icon-container": true, "right-icon": true } }, index.h("slot", { name: "right-icon" }))), this.dropdown &&
+                    : "dark" }))) : (index.h("slot", null)), this.hasIconSlot("right") && !this.loading && !this.dropdown && (index.h("div", { class: { "icon-container": true, "right-icon": true } }, index.h("slot", { name: "right-icon" }))), this.dropdown &&
                 !this.loading &&
                 this.variant !== "icon" &&
                 this.variant !== "destructive" && (index.h("span", { class: {
@@ -343,7 +292,7 @@ const Button = class {
                 ["white-background"]: this.variant === "secondary" &&
                     !this.transparentBackground &&
                     this.appearance !== "light",
-            }, onClick: this.handleClick, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (index.h("ic-tooltip", { id: describedBy, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.isTooltipSilent() }, this.hasRouterSlot() ? (index.h("slot", { name: "router-item" })) : (index.h(ButtonContent, null)))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { name: "badge" }), !this.hasTooltip &&
+            }, onClick: this.handleClick, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (index.h("ic-tooltip", { id: describedBy, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.variant === "icon" && (!!title || !!ariaLabel) }, this.hasRouterSlot() ? (index.h("slot", { name: "router-item" })) : (index.h(ButtonContent, null)))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { name: "badge" }), !this.hasTooltip &&
             (this.hasRouterSlot() ? (index.h("slot", { name: "router-item" })) : (index.h(ButtonContent, null))), this.describedByContent && (index.h("span", { id: describedBy, class: "ic-button-describedby" }, this.describedByContent))));
     }
     static get delegatesFocus() { return true; }
@@ -354,7 +303,7 @@ const Button = class {
 };
 Button.style = icButtonCss;
-const icLoadingIndicatorCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--linear-border-radius:0.25rem;--inner-color:var(--ic-action-default);--outer-color:var(--ic-architectural-100);--label-color:var(--ic-color-primary-text);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.light){--inner-color:var(--ic-architectural-white);--outer-color:var(--ic-architectural-800);--label-color:var(--ic-architectural-white)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size=\"small\"]){--circular-diameter:2.5rem;--linear-line-height:var(--ic-space-xxs)}:host([size=\"default\"]){--circular-diameter:5rem}:host([size=\"large\"]){--circular-diameter:7.5rem}:host([size=\"icon\"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:1.25rem}:host(.label){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{white-space:nowrap;color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host(.full-width){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--outer-color);stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}:host(.inner-label) .ic-loading-circular-inner{display:grid}:host(.inner-label) .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;color:var(--ic-status-info)}:host(.not-required.compact-step-progress-indicator) .inner-text{color:var(--ic-color-tertiary-text)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-hc-border)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}";
+const icLoadingIndicatorCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--linear-border-radius:0.25rem;--inner-color:var(--ic-action-default);--outer-color:var(--ic-architectural-100);--label-color:var(--ic-color-primary-text);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.light){--inner-color:var(--ic-architectural-white);--outer-color:var(--ic-architectural-800);--label-color:var(--ic-architectural-white)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size=\"small\"]){--circular-diameter:2.5rem;--linear-line-height:var(--ic-space-xxs)}:host([size=\"default\"]){--circular-diameter:5rem}:host([size=\"large\"]){--circular-diameter:7.5rem}:host([size=\"icon\"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:1.25rem}:host(.label){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{white-space:nowrap;color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host(.full-width){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--compact-step-outer-color, var(--outer-color));stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}:host(.inner-label) .ic-loading-circular-inner{display:grid}:host(.inner-label) .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;color:var(--compact-step-inner-color, var(--ic-status-info))}:host(.not-required.compact-step-progress-indicator) .inner-text{color:var(--ic-color-tertiary-text)}:host(.light.not-required.compact-step-progress-indicator) .inner-text{color:var(--ic-architectural-400)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-hc-border)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}";
 const LoadingIndicator = class {
     constructor(hostRef) {