npm - @ukic/web-components - Versions diffs - 3.8.0 → 3.9.0 - Mend

@ukic/web-components 3.8.0 → 3.9.0

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 (479) hide show

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d337cd8a.js');
 const closeIcon = require('./close-icon-7f6ef8e4.js');
-const helpers = require('./helpers-8217daf4.js');
+const helpers = require('./helpers-a0e78e2e.js');
-const icAlertCss = "/*! 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}:host ::slotted(ic-typography){--ic-typography-color:var(--ic-alert-description)}.container{min-height:var(--ic-alert-min-height);border-radius:var(--ic-space-xxs) var(--ic-space-xxxs) var(--ic-space-xxxs)\n    var(--ic-space-xxs);position:relative;display:flex;align-items:center}.container-neutral{background-color:var(--ic-alert-background-neutral);border:var(--ic-space-xxxs) solid var(--ic-alert-border-neutral)}.container-info{background-color:var(--ic-alert-background-info);border:var(--ic-space-xxxs) solid var(--ic-alert-border-info)}.container-warning{background-color:var(--ic-alert-background-warning);border:var(--ic-space-xxxs) solid var(--ic-alert-border-warning)}.container-error{background-color:var(--ic-alert-background-error);border:var(--ic-space-xxxs) solid var(--ic-alert-border-error)}.container-success{background-color:var(--ic-alert-background-success);border:var(--ic-space-xxxs) solid var(--ic-alert-border-success)}.alert-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);position:absolute}.divider-neutral{background-color:var(--ic-alert-status-type-neutral)}.divider-info{background-color:var(--ic-alert-status-type-info)}.divider-warning{background-color:var(--ic-alert-status-type-warning)}.divider-error{background-color:var(--ic-alert-status-type-error)}.divider-success{background-color:var(--ic-alert-status-type-success)}.alert-icon{height:var(--ic-space-lg);width:1.375rem;margin-left:1.125rem}.icon-placeholder{margin-left:var(--ic-space-xs)}.alert-icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}:host([showdefaulticon=\"false\"]) .icon-neutral{visibility:hidden;width:0;margin-left:0.625rem}.icon-neutral>svg,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block;fill:var(--ic-alert-icon-neutral)}:host([variant=\"info\"]) .alert-icon svg{fill:var(--ic-alert-icon-info)}:host([variant=\"warning\"]) .alert-icon svg{fill:var(--ic-alert-icon-warning)}:host([variant=\"error\"]) .alert-icon svg{fill:var(--ic-alert-icon-error)}:host([variant=\"success\"]) .alert-icon svg{fill:var(--ic-alert-icon-success)}.alert-content{display:flex;align-items:center;margin-left:0.625rem;width:100%}.alert-message{display:flex;align-items:center;padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;flex:1;--ic-typography-color:var(--ic-alert-description)}.alert-message-title-above{display:inline}.alert-title{margin-right:var(--ic-space-xs);--ic-typography-color:var(--ic-alert-title)}.alert-title-above{white-space:normal}.alert-action-container{margin-right:var(--ic-space-xs);display:flex;align-items:center}.dismiss-icon{margin-right:var(--ic-space-xxxs);margin-left:-0.375rem;padding:0.375rem;border:none;border-radius:50%;background-color:inherit;display:flex;align-items:center;justify-content:center}.dismiss-icon>svg{color:var(--ic-alert-icon-dismissible)}.dismiss-icon:hover{cursor:pointer}@media (max-width: 628px){.alert-content{display:flex;flex-direction:column;align-items:flex-start}.alert-message{display:flex;flex-direction:column;align-items:flex-start}.alert-title{white-space:normal}.alert-action-container{margin-bottom:var(--ic-space-xs)}}@media (forced-colors: active){.container{border:var(--ic-border-hc)}.dismiss-icon>svg{color:var(--ic-architectural-white)}}";
+const icAlertCss = "/*! 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}:host ::slotted(ic-typography){--ic-typography-color:var(--ic-alert-description)}.container{min-height:var(--ic-alert-min-height);border-radius:var(--ic-space-xxs) var(--ic-space-xxxs) var(--ic-space-xxxs)\n    var(--ic-space-xxs);position:relative;display:flex;align-items:center}.container-neutral{background-color:var(--ic-alert-background-neutral);border:var(--ic-space-xxxs) solid var(--ic-alert-border-neutral)}.container-info{background-color:var(--ic-alert-background-info);border:var(--ic-space-xxxs) solid var(--ic-alert-border-info)}.container-warning{background-color:var(--ic-alert-background-warning);border:var(--ic-space-xxxs) solid var(--ic-alert-border-warning)}.container-error{background-color:var(--ic-alert-background-error);border:var(--ic-space-xxxs) solid var(--ic-alert-border-error)}.container-success{background-color:var(--ic-alert-background-success);border:var(--ic-space-xxxs) solid var(--ic-alert-border-success)}.container-ai{background-color:var(--ic-alert-background-ai);border:var(--ic-space-xxxs) solid var(--ic-alert-border-ai)}.alert-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);position:absolute}.divider-neutral{background-color:var(--ic-alert-status-type-neutral)}.divider-info{background-color:var(--ic-alert-status-type-info)}.divider-warning{background-color:var(--ic-alert-status-type-warning)}.divider-error{background-color:var(--ic-alert-status-type-error)}.divider-success{background-color:var(--ic-alert-status-type-success)}.divider-ai{background-color:var(--ic-alert-status-type-ai)}.alert-icon{height:var(--ic-space-lg);width:1.375rem;margin-left:1.125rem}.icon-placeholder{margin-left:var(--ic-space-xs)}.alert-icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}:host([showdefaulticon=\"false\"]) .icon-neutral{visibility:hidden;width:0;margin-left:0.625rem}.icon-neutral>svg,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block;fill:var(--ic-alert-icon-neutral)}:host([variant=\"info\"]) .alert-icon svg{fill:var(--ic-alert-icon-info)}:host([variant=\"warning\"]) .alert-icon svg{fill:var(--ic-alert-icon-warning)}:host([variant=\"error\"]) .alert-icon svg{fill:var(--ic-alert-icon-error)}:host([variant=\"success\"]) .alert-icon svg{fill:var(--ic-alert-icon-success)}:host([variant=\"ai\"]) .alert-icon svg{fill:var(--ic-alert-icon-ai)}.alert-content{display:flex;align-items:center;margin-left:0.625rem;width:100%}.alert-message{display:flex;align-items:center;padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;flex:1;--ic-typography-color:var(--ic-alert-description)}.alert-message-title-above{display:inline}.alert-title{margin-right:var(--ic-space-xs);--ic-typography-color:var(--ic-alert-title)}.alert-title-above{white-space:normal}.alert-action-container{margin-right:var(--ic-space-xs);display:flex;align-items:center}.dismiss-icon{margin-right:var(--ic-space-xxxs);margin-left:-0.375rem;padding:0.375rem;border:none;border-radius:50%;background-color:inherit;display:flex;align-items:center;justify-content:center}.dismiss-icon>svg{color:var(--ic-alert-icon-dismissible)}.dismiss-icon:hover{cursor:pointer}@media (max-width: 628px){.alert-content{display:flex;flex-direction:column;align-items:flex-start}.alert-message{display:flex;flex-direction:column;align-items:flex-start}.alert-title{white-space:normal}.alert-action-container{margin-bottom:var(--ic-space-xs)}}@media (forced-colors: active){.container{border:var(--ic-border-hc)}.dismiss-icon>svg{color:var(--ic-architectural-white)}}";
 const IcAlertStyle0 = icAlertCss;
 const Alert = class {

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

	@@ -1 +1 @@
1	- {"file":"ic-alert.entry.cjs.js","mappings":"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","names":["renderDynamicChildSlots","pxToRem","isSlotUsed","h","VARIANT_ICONS","Host","closeIcon"],"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n:host ::slotted(ic-typography) {\n --ic-typography-color: var(--ic-alert-description);\n}\n\n.container {\n min-height: var(--ic-alert-min-height);\n border-radius: var(--ic-space-xxs) var(--ic-space-xxxs) var(--ic-space-xxxs)\n var(--ic-space-xxs);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.container-neutral {\n background-color: var(--ic-alert-background-neutral);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-neutral);\n}\n\n.container-info {\n background-color: var(--ic-alert-background-info);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-info);\n}\n\n.container-warning {\n background-color: var(--ic-alert-background-warning);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-warning);\n}\n\n.container-error {\n background-color: var(--ic-alert-background-error);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-error);\n}\n\n.container-success {\n background-color: var(--ic-alert-background-success);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-success);\n}\n\n.alert-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n position: absolute;\n}\n\n.divider-neutral {\n background-color: var(--ic-alert-status-type-neutral);\n}\n\n.divider-info {\n background-color: var(--ic-alert-status-type-info);\n}\n\n.divider-warning {\n background-color: var(--ic-alert-status-type-warning);\n}\n\n.divider-error {\n background-color: var(--ic-alert-status-type-error);\n}\n\n.divider-success {\n background-color: var(--ic-alert-status-type-success);\n}\n\n.alert-icon {\n height: var(--ic-space-lg);\n width: 1.375rem;\n margin-left: 1.125rem;\n}\n\n.icon-placeholder {\n margin-left: var(--ic-space-xs);\n}\n\n.alert-icon > svg {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n}\n\n/* required for Gatsby as prop does not seem to work when set to false /\n:host([showdefaulticon=\"false\"]) .icon-neutral {\n visibility: hidden;\n width: 0;\n margin-left: 0.625rem;\n}\n\n.icon-neutral > svg,\n::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n fill: var(--ic-alert-icon-neutral);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-warning);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-success);\n}\n\n.alert-content {\n display: flex;\n align-items: center;\n margin-left: 0.625rem;\n width: 100%;\n}\n\n.alert-message {\n display: flex;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n flex: 1;\n\n --ic-typography-color: var(--ic-alert-description);\n}\n\n.alert-message-title-above {\n display: inline;\n}\n\n.alert-title {\n margin-right: var(--ic-space-xs);\n\n --ic-typography-color: var(--ic-alert-title);\n}\n\n.alert-title-above {\n white-space: normal;\n}\n\n.alert-action-container {\n margin-right: var(--ic-space-xs);\n display: flex;\n align-items: center;\n}\n\n.dismiss-icon {\n margin-right: var(--ic-space-xxxs);\n margin-left: -0.375rem;\n padding: 0.375rem;\n border: none;\n border-radius: 50%;\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dismiss-icon > svg {\n color: var(--ic-alert-icon-dismissible);\n}\n\n.dismiss-icon:hover {\n cursor: pointer;\n}\n\n@media (max-width: 628px) {\n .alert-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-message {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-title {\n white-space: normal;\n }\n\n .alert-action-container {\n margin-bottom: var(--ic-space-xs);\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-border-hc);\n }\n\n .dismiss-icon > svg {\n color: var(--ic-architectural-white);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n Watch,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport {\n isSlotUsed,\n pxToRem,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n IcStatusVariants,\n IcThemeMode,\n IcThemeSettings,\n} from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver \| null = null;\n private systemThemeObserver: MediaQueryList \| null = null;\n private darkMode: boolean = false;\n private messageEl?: HTMLDivElement;\n private titleEl?: HTMLIcTypographyElement;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the default icon for the neutral variant will appear on the left of the alert.\n /\n @Prop() showDefaultIcon: boolean = true;\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 themeChangeHandler(): void {\n if (this.theme !== \"inherit\") this.darkMode = this.theme === \"dark\";\n }\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant: IcStatusVariants = \"neutral\";\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n this.systemThemeObserver?.removeEventListener(\n \"change\",\n this.darkModeChangeHandler\n );\n }\n\n componentWillLoad(): void {\n if (!this.el.closest(\"ic-theme\")) {\n this.systemThemeObserver = window.matchMedia(\n \"(prefers-color-scheme: dark)\"\n );\n this.systemThemeObserver.addEventListener(\n \"change\",\n this.darkModeChangeHandler\n );\n this.darkMode = this.systemThemeObserver.matches;\n }\n\n this.themeChangeHandler();\n }\n\n componentDidLoad(): void {\n if (Number(this.titleEl?.clientHeight) > 24) this.alertTitleWrap = true;\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"action\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n\n this.calculateMinHeight();\n }\n\n componentDidUpdate(): void {\n this.calculateMinHeight();\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n @Listen(\"icThemeChange\", { target: \"document\", capture: true })\n darkModeChangeHandler(\n ev: CustomEvent<IcThemeSettings> \| MediaQueryListEvent\n ): void {\n this.darkMode = \"detail\" in ev ? ev.detail === \"dark\" : ev.matches;\n\n this.calculateMinHeight();\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private calculateMinHeight(): void {\n const contentHeight = Number(this.messageEl?.clientHeight);\n\n const minHeight = pxToRem(\n `${(contentHeight > 40 ? contentHeight : 52) + (this.darkMode ? 0 : 4)}`\n );\n\n if (this.el.style.getPropertyValue(\"--ic-alert-min-height\") !== minHeight)\n this.el.style.setProperty(\"--ic-alert-min-height\", minHeight);\n }\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n showDefaultIcon,\n theme,\n alertTitleWrap,\n dismissAction,\n } = this;\n\n const Icon = () => {\n const iconClass = {\n \"alert-icon\": true,\n \"svg-container\": true,\n [`icon-${variant}`]: true,\n };\n\n if (variant === \"neutral\") {\n if (isSlotUsed(this.el, \"neutral-icon\")) {\n return (\n <div class={iconClass}>\n <slot name=\"neutral-icon\"></slot>\n </div>\n );\n } else if (!showDefaultIcon) {\n return <div class=\"icon-placeholder\"></div>;\n }\n }\n\n return (\n <span class={iconClass} innerHTML={VARIANT_ICONS[variant].icon}></span>\n );\n };\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class={{ container: true, [`container-${variant}`]: true }}>\n <div class=\"alert-icon-container\">\n <div\n class={{ divider: true, [`divider-${variant}`]: true }}\n ></div>\n <Icon />\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n \"alert-message\": true,\n \"alert-message-title-above\": titleAbove \|\| alertTitleWrap,\n }}\n ref={(el) => (this.messageEl = el)}\n >\n {heading && (\n <ic-typography\n class={{\n \"alert-title\": true,\n \"alert-title-above\": titleAbove \|\| alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n ref={(el) => (this.titleEl = el)}\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{ \"svg-container\": true, \"dismiss-icon\": true }}\n innerHTML={closeIcon}\n onClick={dismissAction}\n variant=\"icon\"\n theme=\"dark\"\n title=\"Dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-alert.entry.cjs.js","mappings":"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","names":["renderDynamicChildSlots","pxToRem","isSlotUsed","h","VARIANT_ICONS","Host","closeIcon"],"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n:host ::slotted(ic-typography) {\n --ic-typography-color: var(--ic-alert-description);\n}\n\n.container {\n min-height: var(--ic-alert-min-height);\n border-radius: var(--ic-space-xxs) var(--ic-space-xxxs) var(--ic-space-xxxs)\n var(--ic-space-xxs);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.container-neutral {\n background-color: var(--ic-alert-background-neutral);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-neutral);\n}\n\n.container-info {\n background-color: var(--ic-alert-background-info);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-info);\n}\n\n.container-warning {\n background-color: var(--ic-alert-background-warning);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-warning);\n}\n\n.container-error {\n background-color: var(--ic-alert-background-error);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-error);\n}\n\n.container-success {\n background-color: var(--ic-alert-background-success);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-success);\n}\n\n.container-ai {\n background-color: var(--ic-alert-background-ai);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-ai);\n}\n\n.alert-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n position: absolute;\n}\n\n.divider-neutral {\n background-color: var(--ic-alert-status-type-neutral);\n}\n\n.divider-info {\n background-color: var(--ic-alert-status-type-info);\n}\n\n.divider-warning {\n background-color: var(--ic-alert-status-type-warning);\n}\n\n.divider-error {\n background-color: var(--ic-alert-status-type-error);\n}\n\n.divider-success {\n background-color: var(--ic-alert-status-type-success);\n}\n\n.divider-ai {\n background-color: var(--ic-alert-status-type-ai);\n}\n\n.alert-icon {\n height: var(--ic-space-lg);\n width: 1.375rem;\n margin-left: 1.125rem;\n}\n\n.icon-placeholder {\n margin-left: var(--ic-space-xs);\n}\n\n.alert-icon > svg {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n}\n\n/* required for Gatsby as prop does not seem to work when set to false /\n:host([showdefaulticon=\"false\"]) .icon-neutral {\n visibility: hidden;\n width: 0;\n margin-left: 0.625rem;\n}\n\n.icon-neutral > svg,\n::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n fill: var(--ic-alert-icon-neutral);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-warning);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-success);\n}\n\n:host([variant=\"ai\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-ai);\n}\n\n.alert-content {\n display: flex;\n align-items: center;\n margin-left: 0.625rem;\n width: 100%;\n}\n\n.alert-message {\n display: flex;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n flex: 1;\n\n --ic-typography-color: var(--ic-alert-description);\n}\n\n.alert-message-title-above {\n display: inline;\n}\n\n.alert-title {\n margin-right: var(--ic-space-xs);\n\n --ic-typography-color: var(--ic-alert-title);\n}\n\n.alert-title-above {\n white-space: normal;\n}\n\n.alert-action-container {\n margin-right: var(--ic-space-xs);\n display: flex;\n align-items: center;\n}\n\n.dismiss-icon {\n margin-right: var(--ic-space-xxxs);\n margin-left: -0.375rem;\n padding: 0.375rem;\n border: none;\n border-radius: 50%;\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dismiss-icon > svg {\n color: var(--ic-alert-icon-dismissible);\n}\n\n.dismiss-icon:hover {\n cursor: pointer;\n}\n\n@media (max-width: 628px) {\n .alert-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-message {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-title {\n white-space: normal;\n }\n\n .alert-action-container {\n margin-bottom: var(--ic-space-xs);\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-border-hc);\n }\n\n .dismiss-icon > svg {\n color: var(--ic-architectural-white);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n Watch,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport {\n isSlotUsed,\n pxToRem,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n IcStatusVariants,\n IcThemeMode,\n IcThemeSettings,\n} from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver \| null = null;\n private systemThemeObserver: MediaQueryList \| null = null;\n private darkMode: boolean = false;\n private messageEl?: HTMLDivElement;\n private titleEl?: HTMLIcTypographyElement;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the default icon for the neutral variant will appear on the left of the alert.\n /\n @Prop() showDefaultIcon: boolean = true;\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 themeChangeHandler(): void {\n if (this.theme !== \"inherit\") this.darkMode = this.theme === \"dark\";\n }\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant: IcStatusVariants = \"neutral\";\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n this.systemThemeObserver?.removeEventListener(\n \"change\",\n this.darkModeChangeHandler\n );\n }\n\n componentWillLoad(): void {\n if (!this.el.closest(\"ic-theme\")) {\n this.systemThemeObserver = window.matchMedia(\n \"(prefers-color-scheme: dark)\"\n );\n this.systemThemeObserver.addEventListener(\n \"change\",\n this.darkModeChangeHandler\n );\n this.darkMode = this.systemThemeObserver.matches;\n }\n\n this.themeChangeHandler();\n }\n\n componentDidLoad(): void {\n if (Number(this.titleEl?.clientHeight) > 24) this.alertTitleWrap = true;\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"action\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n\n this.calculateMinHeight();\n }\n\n componentDidUpdate(): void {\n this.calculateMinHeight();\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n @Listen(\"icThemeChange\", { target: \"document\", capture: true })\n darkModeChangeHandler(\n ev: CustomEvent<IcThemeSettings> \| MediaQueryListEvent\n ): void {\n this.darkMode = \"detail\" in ev ? ev.detail === \"dark\" : ev.matches;\n\n this.calculateMinHeight();\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private calculateMinHeight(): void {\n const contentHeight = Number(this.messageEl?.clientHeight);\n\n const minHeight = pxToRem(\n `${(contentHeight > 40 ? contentHeight : 52) + (this.darkMode ? 0 : 4)}`\n );\n\n if (this.el.style.getPropertyValue(\"--ic-alert-min-height\") !== minHeight)\n this.el.style.setProperty(\"--ic-alert-min-height\", minHeight);\n }\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n showDefaultIcon,\n theme,\n alertTitleWrap,\n dismissAction,\n } = this;\n\n const Icon = () => {\n const iconClass = {\n \"alert-icon\": true,\n \"svg-container\": true,\n [`icon-${variant}`]: true,\n };\n\n if (variant === \"neutral\") {\n if (isSlotUsed(this.el, \"neutral-icon\")) {\n return (\n <div class={iconClass}>\n <slot name=\"neutral-icon\"></slot>\n </div>\n );\n } else if (!showDefaultIcon) {\n return <div class=\"icon-placeholder\"></div>;\n }\n }\n\n return (\n <span class={iconClass} innerHTML={VARIANT_ICONS[variant].icon}></span>\n );\n };\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class={{ container: true, [`container-${variant}`]: true }}>\n <div class=\"alert-icon-container\">\n <div\n class={{ divider: true, [`divider-${variant}`]: true }}\n ></div>\n <Icon />\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n \"alert-message\": true,\n \"alert-message-title-above\": titleAbove \|\| alertTitleWrap,\n }}\n ref={(el) => (this.messageEl = el)}\n >\n {heading && (\n <ic-typography\n class={{\n \"alert-title\": true,\n \"alert-title-above\": titleAbove \|\| alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n ref={(el) => (this.titleEl = el)}\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{ \"svg-container\": true, \"dismiss-icon\": true }}\n innerHTML={closeIcon}\n onClick={dismissAction}\n variant=\"icon\"\n theme=\"dark\"\n title=\"Dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"],"version":3}

package/dist/cjs/ic-back-to-top.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-8217daf4.js');
+const helpers = require('./helpers-a0e78e2e.js');
 const ArrowUpward = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
     <path d="M0 8L1.41 9.41L7 3.83V16H9V3.83L14.58 9.42L16 8L8 0L0 8Z"/>

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-8217daf4.js');
+const helpers = require('./helpers-a0e78e2e.js');
-const icBadgeCss = "@media (prefers-reduced-motion: no-preference){:host(.ic-badge-show){animation:expand var(--ic-transition-duration-slow)}:host(.ic-badge-hide){animation:shrink var(--ic-transition-duration-slow)}}:host{display:flex;height:var(--ic-space-md);min-width:var(--ic-space-md);width:-moz-fit-content;width:fit-content;border-radius:calc(2 * var(--ic-space-xxl));position:absolute}:host ic-typography{--ic-typography-color:var(--ic-badge-text)}:host(.ic-badge-neutral){background-color:var(--ic-badge-dark) !important}:host(.ic-badge-light) ic-typography{--ic-typography-color:var(--ic-badge-text-monochrome)}:host(.ic-badge-light) ::slotted(*){fill:var(--ic-badge-icon-monochrome)}:host(.ic-badge-info){background-color:var(--ic-badge-info) !important}:host(.ic-badge-light){background-color:var(--ic-badge-light) !important}:host(.ic-badge-warning){background-color:var(--ic-badge-warning) !important}:host(.ic-badge-warning) ic-typography{--ic-typography-color:var(--ic-badge-warning-text)}:host(.ic-badge-warning) ::slotted(*){fill:var(--ic-badge-warning-icon)}:host(.ic-badge-error){background-color:var(--ic-badge-error) !important}:host(.ic-badge-success){background-color:var(--ic-badge-success) !important}:host(.ic-badge-small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.ic-badge-large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-medium){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.ic-badge-dot.ic-badge-small){height:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));min-width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.ic-badge-dot.ic-badge-large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host ::slotted(*){fill:var(--ic-badge-icon)}:host(.ic-badge-foreground-dark) ::slotted(*){fill:var(--ic-color-text-primary-light)}:host(.ic-badge-foreground-light) ::slotted(*){fill:white}:host(.ic-badge-foreground-dark) ic-typography{--ic-typography-color:var(--ic-color-text-primary-light)}:host(.ic-badge-foreground-light) ic-typography{--ic-typography-color:var(--ic-color-text-primary-dark)}:host(.ic-badge-text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-text.ic-badge-small) ic-typography{padding:0 0.2132rem}:host(.ic-badge-text.ic-badge-large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.ic-badge-icon.ic-badge-small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.ic-badge-icon.ic-badge-large) ::slotted(svg){width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));height:calc(var(--ic-space-sm) + var(--ic-space-xxxs));padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}:host(.ic-badge-far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.ic-badge-far.ic-badge-small),:host(.ic-badge-dot.ic-badge-far.ic-badge-large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-far),:host(.ic-badge-dot.ic-badge-far.ic-badge-small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.ic-badge-near){top:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));right:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)))}:host(.ic-badge-dot.ic-badge-near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.ic-badge-inline){position:static}:host(.ic-badge-hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}@keyframes expand{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}";
+const icBadgeCss = "@media (prefers-reduced-motion: no-preference){:host(.ic-badge-show){animation:expand var(--ic-transition-duration-slow)}:host(.ic-badge-hide){animation:shrink var(--ic-transition-duration-slow)}}:host{display:flex;height:var(--ic-space-md);min-width:var(--ic-space-md);width:-moz-fit-content;width:fit-content;border-radius:calc(2 * var(--ic-space-xxl));position:absolute}:host ic-typography{--ic-typography-color:var(--ic-badge-text)}:host(.ic-badge-neutral){background-color:var(--ic-badge-dark) !important}:host(.ic-badge-light) ic-typography{--ic-typography-color:var(--ic-badge-text-monochrome)}:host(.ic-badge-light) ::slotted(*){fill:var(--ic-badge-icon-monochrome)}:host(.ic-badge-info){background-color:var(--ic-badge-info) !important}:host(.ic-badge-light){background-color:var(--ic-badge-light) !important}:host(.ic-badge-warning){background-color:var(--ic-badge-warning) !important}:host(.ic-badge-warning) ic-typography{--ic-typography-color:var(--ic-badge-warning-text)}:host(.ic-badge-warning) ::slotted(*){fill:var(--ic-badge-warning-icon)}:host(.ic-badge-error){background-color:var(--ic-badge-error) !important}:host(.ic-badge-success){background-color:var(--ic-badge-success) !important}:host(.ic-badge-ai){background-color:var(--ic-badge-ai) !important}:host(.ic-badge-small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.ic-badge-large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-medium){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.ic-badge-dot.ic-badge-small){height:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));min-width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.ic-badge-dot.ic-badge-large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host ::slotted(*){fill:var(--ic-badge-icon)}:host(.ic-badge-foreground-dark) ::slotted(*){fill:var(--ic-color-text-primary-light)}:host(.ic-badge-foreground-light) ::slotted(*){fill:white}:host(.ic-badge-foreground-dark) ic-typography{--ic-typography-color:var(--ic-color-text-primary-light)}:host(.ic-badge-foreground-light) ic-typography{--ic-typography-color:var(--ic-color-text-primary-dark)}:host(.ic-badge-text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-text.ic-badge-small) ic-typography{padding:0 0.2132rem}:host(.ic-badge-text.ic-badge-large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.ic-badge-icon.ic-badge-small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.ic-badge-icon.ic-badge-large) ::slotted(svg){width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));height:calc(var(--ic-space-sm) + var(--ic-space-xxxs));padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}:host(.ic-badge-far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.ic-badge-far.ic-badge-small),:host(.ic-badge-dot.ic-badge-far.ic-badge-large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-far),:host(.ic-badge-dot.ic-badge-far.ic-badge-small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.ic-badge-near){top:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));right:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)))}:host(.ic-badge-dot.ic-badge-near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.ic-badge-inline){position:static}:host(.ic-badge-hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}@keyframes expand{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}";
 const IcBadgeStyle0 = icBadgeCss;
 const TOP_NAVIGATION = "IC-TOP-NAVIGATION";

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":["convertToRGBA","getBrandForegroundAppearance","isPropDefined","onComponentRequiredPropUndefined","h","Host"],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n :host(.ic-badge-show) {\n animation: expand var(--ic-transition-duration-slow);\n }\n\n :host(.ic-badge-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: fit-content;\n border-radius: calc(2 * var(--ic-space-xxl));\n position: absolute;\n}\n\n:host ic-typography {\n --ic-typography-color: var(--ic-badge-text);\n}\n\n:host(.ic-badge-neutral) {\n background-color: var(--ic-badge-dark) !important;\n}\n\n:host(.ic-badge-light) ic-typography {\n --ic-typography-color: var(--ic-badge-text-monochrome);\n}\n\n:host(.ic-badge-light) ::slotted() {\n fill: var(--ic-badge-icon-monochrome);\n}\n\n:host(.ic-badge-info) {\n background-color: var(--ic-badge-info) !important;\n}\n\n:host(.ic-badge-light) {\n background-color: var(--ic-badge-light) !important;\n}\n\n:host(.ic-badge-warning) {\n background-color: var(--ic-badge-warning) !important;\n}\n\n:host(.ic-badge-warning) ic-typography {\n --ic-typography-color: var(--ic-badge-warning-text);\n}\n\n:host(.ic-badge-warning) ::slotted() {\n fill: var(--ic-badge-warning-icon);\n}\n\n:host(.ic-badge-error) {\n background-color: var(--ic-badge-error) !important;\n}\n\n:host(.ic-badge-success) {\n background-color: var(--ic-badge-success) !important;\n}\n\n:host(.ic-badge-small) {\n height: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.ic-badge-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(.ic-badge-dot.ic-badge-medium) {\n height: var(--ic-space-xs);\n width: var(--ic-space-xs);\n min-width: var(--ic-space-xs);\n}\n\n:host(.ic-badge-dot.ic-badge-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(.ic-badge-dot.ic-badge-large) {\n height: var(--ic-space-sm);\n width: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host ::slotted() {\n fill: var(--ic-badge-icon);\n}\n\n:host(.ic-badge-foreground-dark) ::slotted() {\n fill: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ::slotted() {\n fill: white;\n}\n\n:host(.ic-badge-foreground-dark) ic-typography {\n --ic-typography-color: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ic-typography {\n --ic-typography-color: var(--ic-color-text-primary-dark);\n}\n\n:host(.ic-badge-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(.ic-badge-text.ic-badge-small) ic-typography {\n padding: 0 0.2132rem;\n}\n\n:host(.ic-badge-text.ic-badge-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(.ic-badge-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(.ic-badge-icon.ic-badge-small) ::slotted(svg) {\n width: var(--ic-space-xs);\n height: var(--ic-space-xs);\n}\n\n:host(.ic-badge-icon.ic-badge-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(.ic-badge-far) {\n top: calc(-1 var(--ic-space-xs));\n right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.ic-badge-far.ic-badge-small),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-large) {\n top: calc(-1 * var(--ic-space-xxs));\n right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-far),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-small) {\n top: calc(-1 * var(--ic-space-xxxs));\n right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-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(.ic-badge-dot.ic-badge-near) {\n top: calc(-1 * var(--ic-space-1px));\n right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-badge-inline) {\n position: static;\n}\n\n:host(.ic-badge-hide) {\n visibility: hidden !important;\n transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n position: absolute;\n left: -9999px;\n}\n\n.sr-only:dir(rtl) {\n right: -9999px;\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 {\n Component,\n Element,\n Host,\n Prop,\n Watch,\n h,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcBadgePositions,\n IcBadgeTypes,\n IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n IcSizes,\n IcBrandForeground,\n IcColor,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n convertToRGBA,\n getBrandForegroundAppearance,\n isPropDefined,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst TOP_NAVIGATION = \"IC-TOP-NAVIGATION\";\nconst SIDE_NAVIGATION = \"IC-SIDE-NAVIGATION\";\n\n/*\n @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n /\n@Component({\n tag: \"ic-badge\",\n styleUrl: \"ic-badge.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Badge {\n private ariaLabel: string \| null = null;\n private foregroundColour: IcBrandForeground;\n private parentAriaLabel: string;\n private initialPosition: IcBadgePositions = this.position ?? \"far\";\n\n @Element() el: HTMLIcBadgeElement;\n\n /\n The accessible label of the badge component to provide context for screen reader users.\n /\n @Prop() accessibleLabel?: string;\n\n @Watch(\"accessibleLabel\")\n accessibleLabelHandler(): void {\n this.setAccessibleLabel();\n }\n\n /\n The custom badge colour. This will only style the badge component if variant=\"custom\".\n * Can 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 @Prop() customColor?: IcColor;\n\n @Watch(\"customColor\")\n customColorHandler(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n }\n\n /\n The maximum number shown on the badge appended with a +.\n * This will only be displayed if type=\"text\" and label is not empty.\n /\n @Prop() maxNumber?: number;\n\n /\n The positioning of the badge in reference to the parent element.\n /\n @Prop({ mutable: true }) position?: IcBadgePositions = \"far\";\n\n /\n The size of the badge to be displayed.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n The text displayed in the badge. This will only be displayed if type=\"text\".\n /\n @Prop() label?: 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() theme?: IcThemeMode = \"inherit\";\n\n /\n The type of badge to be displayed.\n /\n @Prop() type?: IcBadgeTypes = \"text\";\n\n /\n The variant of the badge to be displayed.\n /\n @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n @Watch(\"variant\")\n variantHandler(): void {\n if (this.variant === \"custom\") {\n this.setBadgeColour();\n }\n }\n\n /\n If `true`, the badge will be displayed.\n /\n @Prop() visible?: boolean = true;\n\n @Watch(\"visible\")\n visibleHandler(): void {\n this.setAccessibleLabel();\n }\n\n componentWillLoad(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n\n const ariaLabel = this.el.parentElement?.ariaLabel;\n if (ariaLabel) this.parentAriaLabel = ariaLabel;\n this.setAccessibleLabel();\n }\n\n componentDidLoad(): void {\n this.type === \"text\" &&\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Badge\"\n );\n }\n\n componentWillRender(): void {\n this.isInTopNav() && this.setPositionInTopNavigation();\n this.isInSideNav() && this.setPositionInSideNavigation();\n }\n\n @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n navBarMenuOpenHandler(): void {\n this.isInTopNav() && (this.position = \"inline\");\n }\n\n @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n navBarMenuCloseHandler(): void {\n this.isInTopNav() && (this.position = this.initialPosition);\n }\n\n private setBadgeColour = () => {\n const colorRGBA = this.customColor ? convertToRGBA(this.customColor) : null;\n\n if (colorRGBA) {\n const { r, g, b, a } = colorRGBA;\n this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n this.foregroundColour = getBrandForegroundAppearance(\n (r 299 + g * 587 + b * 114) / 1000\n );\n }\n };\n\n private getLabel = () =>\n this.maxNumber && Number(this.label) > this.maxNumber\n ? `${this.maxNumber}+`\n : this.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 private setAccessibleLabel = () => {\n const parentEl = this.el.parentElement;\n const defaultAriaLabel = this.isAccessibleLabelDefined()\n ? this.accessibleLabel\n : this.label \|\| \"with badge being displayed\";\n\n if (parentEl) {\n const { tagName } = parentEl;\n if (\n tagName !== \"IC-CARD\" &&\n (tagName !== \"IC-TAB\" \|\| (tagName === \"IC-TAB\" && this.parentAriaLabel))\n ) {\n const ariaLabelPrefix = this.parentAriaLabel\n ? `${this.parentAriaLabel} ,`\n : \"\";\n parentEl.ariaLabel = this.visible\n ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n : null;\n } else {\n this.ariaLabel = `, ${defaultAriaLabel}`;\n }\n }\n };\n\n private setPositionInTopNavigation = () => {\n this.position =\n this.isInMobileMode() \|\| this.isInNavigationItem()\n ? \"inline\"\n : this.initialPosition;\n };\n\n private setPositionInSideNavigation = () => {\n this.position = \"near\";\n };\n\n private isInTopNav = (): boolean => {\n const parentEl = this.el.parentElement;\n if (!parentEl) return false;\n const grandparentEl = parentEl.parentElement;\n const greatGrandparentEl = grandparentEl?.parentElement;\n return (\n grandparentEl?.tagName === TOP_NAVIGATION \|\|\n greatGrandparentEl?.tagName === TOP_NAVIGATION\n );\n };\n\n private isInSideNav = (): boolean => {\n const parentEl = this.el.parentElement;\n if (!parentEl) return false;\n const grandparentEl = parentEl.parentElement;\n const greatGrandparentEl = grandparentEl?.parentElement;\n return (\n grandparentEl?.tagName === SIDE_NAVIGATION \|\|\n greatGrandparentEl?.tagName === SIDE_NAVIGATION\n );\n };\n\n private isInMobileMode = (): boolean => {\n const parentEl = this.el.parentElement;\n if (!parentEl) return false;\n const grandparentEl = parentEl.parentElement;\n const greatGrandparentEl = grandparentEl?.parentElement;\n return (\n ((grandparentEl?.tagName === TOP_NAVIGATION \|\|\n grandparentEl?.tagName === SIDE_NAVIGATION) &&\n grandparentEl.classList.contains(\"mobile-mode\")) \|\|\n ((greatGrandparentEl?.tagName === TOP_NAVIGATION \|\|\n greatGrandparentEl?.tagName === SIDE_NAVIGATION) &&\n greatGrandparentEl.classList.contains(\"mobile-mode\"))\n );\n };\n\n private isInNavigationItem = (): boolean => {\n const parentEl = this.el.parentElement;\n if (!parentEl) return false;\n return parentEl.tagName === \"IC-NAVIGATION-ITEM\";\n };\n\n private isAccessibleLabelDefined = () =>\n isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n render() {\n const {\n ariaLabel,\n el,\n foregroundColour,\n getLabel,\n position,\n size,\n label,\n type,\n variant,\n visible,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-badge-${position}`]: true,\n [`ic-badge-${size}`]: true,\n [`ic-badge-${variant}`]: true,\n [`ic-badge-${type}`]: true,\n [`ic-badge-foreground-${foregroundColour}`]:\n foregroundColour !== null && variant === \"custom\",\n [`${visible ? \"ic-badge-show\" : \"ic-badge-hide\"}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n id={el.id \|\| null}\n aria-label={ariaLabel}\n role=\"status\"\n >\n {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n {type === \"text\" && label && (\n <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n {getLabel()}\n </ic-typography>\n )}\n {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-badge.entry.cjs.js","mappings":"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","names":["convertToRGBA","getBrandForegroundAppearance","isPropDefined","onComponentRequiredPropUndefined","h","Host"],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n :host(.ic-badge-show) {\n animation: expand var(--ic-transition-duration-slow);\n }\n\n :host(.ic-badge-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: fit-content;\n border-radius: calc(2 * var(--ic-space-xxl));\n position: absolute;\n}\n\n:host ic-typography {\n --ic-typography-color: var(--ic-badge-text);\n}\n\n:host(.ic-badge-neutral) {\n background-color: var(--ic-badge-dark) !important;\n}\n\n:host(.ic-badge-light) ic-typography {\n --ic-typography-color: var(--ic-badge-text-monochrome);\n}\n\n:host(.ic-badge-light) ::slotted() {\n fill: var(--ic-badge-icon-monochrome);\n}\n\n:host(.ic-badge-info) {\n background-color: var(--ic-badge-info) !important;\n}\n\n:host(.ic-badge-light) {\n background-color: var(--ic-badge-light) !important;\n}\n\n:host(.ic-badge-warning) {\n background-color: var(--ic-badge-warning) !important;\n}\n\n:host(.ic-badge-warning) ic-typography {\n --ic-typography-color: var(--ic-badge-warning-text);\n}\n\n:host(.ic-badge-warning) ::slotted() {\n fill: var(--ic-badge-warning-icon);\n}\n\n:host(.ic-badge-error) {\n background-color: var(--ic-badge-error) !important;\n}\n\n:host(.ic-badge-success) {\n background-color: var(--ic-badge-success) !important;\n}\n\n:host(.ic-badge-ai) {\n background-color: var(--ic-badge-ai) !important;\n}\n\n:host(.ic-badge-small) {\n height: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.ic-badge-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(.ic-badge-dot.ic-badge-medium) {\n height: var(--ic-space-xs);\n width: var(--ic-space-xs);\n min-width: var(--ic-space-xs);\n}\n\n:host(.ic-badge-dot.ic-badge-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(.ic-badge-dot.ic-badge-large) {\n height: var(--ic-space-sm);\n width: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host ::slotted() {\n fill: var(--ic-badge-icon);\n}\n\n:host(.ic-badge-foreground-dark) ::slotted() {\n fill: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ::slotted() {\n fill: white;\n}\n\n:host(.ic-badge-foreground-dark) ic-typography {\n --ic-typography-color: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ic-typography {\n --ic-typography-color: var(--ic-color-text-primary-dark);\n}\n\n:host(.ic-badge-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(.ic-badge-text.ic-badge-small) ic-typography {\n padding: 0 0.2132rem;\n}\n\n:host(.ic-badge-text.ic-badge-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(.ic-badge-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(.ic-badge-icon.ic-badge-small) ::slotted(svg) {\n width: var(--ic-space-xs);\n height: var(--ic-space-xs);\n}\n\n:host(.ic-badge-icon.ic-badge-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(.ic-badge-far) {\n top: calc(-1 var(--ic-space-xs));\n right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.ic-badge-far.ic-badge-small),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-large) {\n top: calc(-1 * var(--ic-space-xxs));\n right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-far),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-small) {\n top: calc(-1 * var(--ic-space-xxxs));\n right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-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(.ic-badge-dot.ic-badge-near) {\n top: calc(-1 * var(--ic-space-1px));\n right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-badge-inline) {\n position: static;\n}\n\n:host(.ic-badge-hide) {\n visibility: hidden !important;\n transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n position: absolute;\n left: -9999px;\n}\n\n.sr-only:dir(rtl) {\n right: -9999px;\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 {\n Component,\n Element,\n Host,\n Prop,\n Watch,\n h,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcBadgePositions,\n IcBadgeTypes,\n IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n IcSizes,\n IcBrandForeground,\n IcColor,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n convertToRGBA,\n getBrandForegroundAppearance,\n isPropDefined,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst TOP_NAVIGATION = \"IC-TOP-NAVIGATION\";\nconst SIDE_NAVIGATION = \"IC-SIDE-NAVIGATION\";\n\n/*\n @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n /\n@Component({\n tag: \"ic-badge\",\n styleUrl: \"ic-badge.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Badge {\n private ariaLabel: string \| null = null;\n private foregroundColour: IcBrandForeground;\n private parentAriaLabel: string;\n private initialPosition: IcBadgePositions = this.position ?? \"far\";\n\n @Element() el: HTMLIcBadgeElement;\n\n /\n The accessible label of the badge component to provide context for screen reader users.\n /\n @Prop() accessibleLabel?: string;\n\n @Watch(\"accessibleLabel\")\n accessibleLabelHandler(): void {\n this.setAccessibleLabel();\n }\n\n /\n The custom badge colour. This will only style the badge component if variant=\"custom\".\n * Can 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 @Prop() customColor?: IcColor;\n\n @Watch(\"customColor\")\n customColorHandler(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n }\n\n /\n The maximum number shown on the badge appended with a +.\n * This will only be displayed if type=\"text\" and label is not empty.\n /\n @Prop() maxNumber?: number;\n\n /\n The positioning of the badge in reference to the parent element.\n /\n @Prop({ mutable: true }) position?: IcBadgePositions = \"far\";\n\n /\n The size of the badge to be displayed.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n The text displayed in the badge. This will only be displayed if type=\"text\".\n /\n @Prop() label?: 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() theme?: IcThemeMode = \"inherit\";\n\n /\n The type of badge to be displayed.\n /\n @Prop() type?: IcBadgeTypes = \"text\";\n\n /\n The variant of the badge to be displayed.\n /\n @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n @Watch(\"variant\")\n variantHandler(): void {\n if (this.variant === \"custom\") {\n this.setBadgeColour();\n }\n }\n\n /\n If `true`, the badge will be displayed.\n /\n @Prop() visible?: boolean = true;\n\n @Watch(\"visible\")\n visibleHandler(): void {\n this.setAccessibleLabel();\n }\n\n componentWillLoad(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n\n const ariaLabel = this.el.parentElement?.ariaLabel;\n if (ariaLabel) this.parentAriaLabel = ariaLabel;\n this.setAccessibleLabel();\n }\n\n componentDidLoad(): void {\n this.type === \"text\" &&\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Badge\"\n );\n }\n\n componentWillRender(): void {\n this.isInTopNav() && this.setPositionInTopNavigation();\n this.isInSideNav() && this.setPositionInSideNavigation();\n }\n\n @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n navBarMenuOpenHandler(): void {\n this.isInTopNav() && (this.position = \"inline\");\n }\n\n @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n navBarMenuCloseHandler(): void {\n this.isInTopNav() && (this.position = this.initialPosition);\n }\n\n private setBadgeColour = () => {\n const colorRGBA = this.customColor ? convertToRGBA(this.customColor) : null;\n\n if (colorRGBA) {\n const { r, g, b, a } = colorRGBA;\n this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n this.foregroundColour = getBrandForegroundAppearance(\n (r 299 + g * 587 + b * 114) / 1000\n );\n }\n };\n\n private getLabel = () =>\n this.maxNumber && Number(this.label) > this.maxNumber\n ? `${this.maxNumber}+`\n : this.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 private setAccessibleLabel = () => {\n const parentEl = this.el.parentElement;\n const defaultAriaLabel = this.isAccessibleLabelDefined()\n ? this.accessibleLabel\n : this.label \|\| \"with badge being displayed\";\n\n if (parentEl) {\n const { tagName } = parentEl;\n if (\n tagName !== \"IC-CARD\" &&\n (tagName !== \"IC-TAB\" \|\| (tagName === \"IC-TAB\" && this.parentAriaLabel))\n ) {\n const ariaLabelPrefix = this.parentAriaLabel\n ? `${this.parentAriaLabel} ,`\n : \"\";\n parentEl.ariaLabel = this.visible\n ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n : null;\n } else {\n this.ariaLabel = `, ${defaultAriaLabel}`;\n }\n }\n };\n\n private setPositionInTopNavigation = () => {\n this.position =\n this.isInMobileMode() \|\| this.isInNavigationItem()\n ? \"inline\"\n : this.initialPosition;\n };\n\n private setPositionInSideNavigation = () => {\n this.position = \"near\";\n };\n\n private isInTopNav = (): boolean => {\n const parentEl = this.el.parentElement;\n if (!parentEl) return false;\n const grandparentEl = parentEl.parentElement;\n const greatGrandparentEl = grandparentEl?.parentElement;\n return (\n grandparentEl?.tagName === TOP_NAVIGATION \|\|\n greatGrandparentEl?.tagName === TOP_NAVIGATION\n );\n };\n\n private isInSideNav = (): boolean => {\n const parentEl = this.el.parentElement;\n if (!parentEl) return false;\n const grandparentEl = parentEl.parentElement;\n const greatGrandparentEl = grandparentEl?.parentElement;\n return (\n grandparentEl?.tagName === SIDE_NAVIGATION \|\|\n greatGrandparentEl?.tagName === SIDE_NAVIGATION\n );\n };\n\n private isInMobileMode = (): boolean => {\n const parentEl = this.el.parentElement;\n if (!parentEl) return false;\n const grandparentEl = parentEl.parentElement;\n const greatGrandparentEl = grandparentEl?.parentElement;\n return (\n ((grandparentEl?.tagName === TOP_NAVIGATION \|\|\n grandparentEl?.tagName === SIDE_NAVIGATION) &&\n grandparentEl.classList.contains(\"mobile-mode\")) \|\|\n ((greatGrandparentEl?.tagName === TOP_NAVIGATION \|\|\n greatGrandparentEl?.tagName === SIDE_NAVIGATION) &&\n greatGrandparentEl.classList.contains(\"mobile-mode\"))\n );\n };\n\n private isInNavigationItem = (): boolean => {\n const parentEl = this.el.parentElement;\n if (!parentEl) return false;\n return parentEl.tagName === \"IC-NAVIGATION-ITEM\";\n };\n\n private isAccessibleLabelDefined = () =>\n isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n render() {\n const {\n ariaLabel,\n el,\n foregroundColour,\n getLabel,\n position,\n size,\n label,\n type,\n variant,\n visible,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-badge-${position}`]: true,\n [`ic-badge-${size}`]: true,\n [`ic-badge-${variant}`]: true,\n [`ic-badge-${type}`]: true,\n [`ic-badge-foreground-${foregroundColour}`]:\n foregroundColour !== null && variant === \"custom\",\n [`${visible ? \"ic-badge-show\" : \"ic-badge-hide\"}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n id={el.id \|\| null}\n aria-label={ariaLabel}\n role=\"status\"\n >\n {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n {type === \"text\" && label && (\n <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n {getLabel()}\n </ic-typography>\n )}\n {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n </Host>\n );\n }\n}\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-d337cd8a.js');
-const helpers = require('./helpers-8217daf4.js');
+const helpers = require('./helpers-a0e78e2e.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(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb){display:none}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show){display:flex}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide){display:none;opacity:0;visibility:hidden}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){display:block;opacity:0;transition:all var(--ic-easing-transition-slow)}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade){opacity:1}";
 const IcBreadcrumbGroupStyle0 = icBreadcrumbGroupCss;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d337cd8a.js');
 const chevronIcon = require('./chevron-icon-3bf07531.js');
-const helpers = require('./helpers-8217daf4.js');
+const helpers = require('./helpers-a0e78e2e.js');
 const backIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>

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-d337cd8a.js');
-const helpers = require('./helpers-8217daf4.js');
+const helpers = require('./helpers-a0e78e2e.js');
 const popper = require('./popper-31badbf8.js');
 const arrowDropdown = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -97,6 +97,10 @@ const Button = class {
          * 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.
          */
         this.theme = "inherit";
+        /**
+         * Setting to `true` can help in situations where tooltip content is clipped by a parent element.
+         */
+        this.tooltipFixedPositioning = false;
         /**
          * The position of the tooltip in relation to the button.
          */
@@ -115,16 +119,13 @@ const Button = class {
         this.variant = "primary";
         this.getSlottedIcon = (position) => this.el.querySelector(`[slot="${position}-icon"]`);
         this.handleClick = () => {
-            var _a;
             if ((this.el.type === "submit" || this.el.type === "reset") &&
                 !this.hasRouterSlot() &&
-                !!this.el.closest("FORM")) {
-                const hiddenFormButton = document.createElement("button");
-                hiddenFormButton.setAttribute("type", this.el.type);
-                hiddenFormButton.style.display = "none";
-                (_a = this.el.closest("FORM")) === null || _a === void 0 ? void 0 : _a.appendChild(hiddenFormButton);
-                hiddenFormButton.click();
-                hiddenFormButton.remove();
+                (this.form || !!this.el.closest("FORM"))) {
+                const form = this.form
+                    ? document.querySelector(`form[id=${this.form}]`)
+                    : this.el.closest("FORM");
+                helpers.handleHiddenFormButtonClick(form, this.el);
             }
         };
         this.handleKeyDown = (ev) => {
@@ -341,7 +342,7 @@ const Button = class {
         }
     }
     render() {
-        const { ariaControlsId, ariaLabel, ariaOwnsId, buttonIdNum, describedByContent, describedById, disabled, download, dropdown, dropdownExpanded, form, formaction, formenctype, formmethod, formnovalidate, formtarget, fullWidth, handleClick, handleKeyDown, hasTooltip, href, hreflang, id, inheritedAttributes, isIconVariant, loading, monochrome, onBlur, onFocus, referrerpolicy, rel, size, target, theme, title, tooltipPlacement, transparentBackground, type, variant, } = this;
+        const { ariaControlsId, ariaLabel, ariaOwnsId, buttonIdNum, describedByContent, describedById, disabled, download, dropdown, dropdownExpanded, form, formaction, formenctype, formmethod, formnovalidate, formtarget, fullWidth, handleClick, handleKeyDown, hasTooltip, href, hreflang, id, inheritedAttributes, isIconVariant, loading, monochrome, onBlur, onFocus, referrerpolicy, rel, size, target, theme, title, tooltipFixedPositioning, tooltipPlacement, transparentBackground, type, variant, } = this;
         const TagType = href ? "a" : "button";
         const buttonAttrs = TagType === "button"
             ? {
@@ -379,7 +380,7 @@ const Button = class {
                 variant !== "destructive" && (index.h("span", { class: dropdownExpanded
                     ? "dropdown-expanded"
                     : "arrow-dropdown", innerHTML: arrowDropdown }))))));
-        return (index.h(index.Host, { key: '7ec6ab29cee9c1d669ffb4d181291ac2767cbbec', class: {
+        return (index.h(index.Host, { key: '93677b4fa42904890e9fa3b33297734b895f04a4', class: {
                 "ic-button-disabled": disabled && !loading,
                 "ic-button-full-width": fullWidth,
                 "ic-button-loading": loading,
@@ -395,7 +396,7 @@ const Button = class {
                 monochrome,
                 "top-icon": helpers.isSlotUsed(this.el, "top-icon"),
                 "with-badge": helpers.isSlotUsed(this.el, "badge"),
-            }, onClick: handleClick, onKeyDown: handleKeyDown, "aria-owns": ariaOwnsId, "aria-controls": ariaControlsId, "aria-expanded": dropdown && `${dropdownExpanded}` }, hasTooltip && (index.h("ic-tooltip", { key: 'b9b1e24da3a9ca2e9aa33edf0dfde63f82473057', id: describedby, label: title || ariaLabel, target: buttonId, placement: tooltipPlacement, silent: isIconVariant() && !!ariaLabel }, index.h(ButtonContent, { key: 'e2655f2e1623bb7a6177e8404a68ab1ab9c868a6' }))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { key: 'ca43b11aeff88a1c9a46ae22cd8836405f96753e', name: "badge" }), !hasTooltip && index.h(ButtonContent, { key: '3dd73eb3d140dd26aee9f245166142094762bc5c' }), describedByContent && (index.h("span", { key: 'a38105ef6599d3b251b8528446db9f700982681e', id: describedby, class: "ic-button-describedby" }, describedByContent))));
+            }, onClick: handleClick, onKeyDown: handleKeyDown, "aria-owns": ariaOwnsId, "aria-controls": ariaControlsId, "aria-expanded": dropdown && `${dropdownExpanded}` }, hasTooltip && (index.h("ic-tooltip", { key: '273a8bb9c3146fc8fb2b177d842f6ac17a0db0fb', id: describedby, label: title || ariaLabel, target: buttonId, placement: tooltipPlacement, fixedPositioning: tooltipFixedPositioning, silent: isIconVariant() && !!ariaLabel }, index.h(ButtonContent, { key: '092785c68429f1458a74e2f9aa611179ce5d490c' }))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { key: '002e2fd22a45138708c9a188f87cb37c6c6c386d', name: "badge" }), !hasTooltip && index.h(ButtonContent, { key: '3d3634e2078b0d52e687cc4068e5e80f6ff8a8a2' }), describedByContent && (index.h("span", { key: '6e134f3c30402bb3217c284df65d72aca696043c', id: describedby, class: "ic-button-describedby" }, describedByContent))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -589,23 +590,23 @@ const LoadingIndicator = class {
     }
     render() {
         const { circularDiameter, circularDimensions: { x, y, r, dashArray, dashOffset }, description, fullWidth, indicatorLabel, innerLabel, label, max, min, monochrome, progress, size, theme, type, } = this;
-        return (index.h(index.Host, { key: 'a56bc4f2265b8697fb78fe0cb021df4f7c84b34d', class: {
+        return (index.h(index.Host, { key: '413c553dc741429027e834c352171bc538bad4e5', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-loading-indicator-full-width": fullWidth,
                 "ic-loading-indicator-label": !!label,
                 "ic-loading-indicator-monochrome": monochrome,
-            } }, index.h("div", { key: '8da5f575ce68a85df03c23e256125ed968d55496', class: "ic-loading-container", part: "ic-loading-container" }, index.h("div", { key: '1a32acb1ce270a95b88a77d13591151d8a280fe8', ref: (el) => (this.outerElement = el), class: {
+            } }, index.h("div", { key: '988482262c2ce8269f8e10706f2455ee94fbed4c', class: "ic-loading-container", part: "ic-loading-container" }, index.h("div", { key: '93e2878a03795a8e5fd65e85cc586f8de22ec764', ref: (el) => (this.outerElement = el), class: {
                 [`ic-loading-${type}-outer`]: true,
                 [progress === undefined ? "indeterminate" : "determinate"]: true,
-            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, index.h("div", { key: '0189f89d2f2f5a9f7530e1bbef1874fd52a00f87', ref: (el) => (this.innerElement = el), class: {
+            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, index.h("div", { key: '1d4f9ebc1ee51844d0357c5629a9dc69aac0f16c', ref: (el) => (this.innerElement = el), class: {
                 [`ic-loading-${type}-inner`]: true,
                 "inner-label": !!innerLabel,
-            } }, innerLabel && size === "small" && (index.h("ic-typography", { key: '83c67de5d281dca4c293f3d06b278eabe63ccee3', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (index.h("svg", { key: 'e2449654d4dcb904c56ba47f6f72cfda5bcee7f0', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, index.h("circle", { key: '6436f697d6e7d7e030178fc3653ec86a509c2965', cx: x, cy: y, r: r }), index.h("circle", { key: '19da0a067ffdd864a08a630eabff268e9bfd1c33', style: {
+            } }, innerLabel && size === "small" && (index.h("ic-typography", { key: '85269ef476f8ee423e4a14383445cfa4b0256556', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (index.h("svg", { key: 'd3f423cd9659b735184d6657127c8626cc9cf4a3', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, index.h("circle", { key: '060c4d530c2e27309fbe6513eb2497ae91bcdb6a', cx: x, cy: y, r: r }), index.h("circle", { key: 'e4b17ca2492a92fe99561193250bb9fb4a8cf960', style: {
                 "--circular-steps-max": progress ? `${max}` : undefined,
                 "--progress-value": progress !== undefined ? `${progress}` : undefined,
                 "--stroke-dasharray": dashArray,
                 "--stroke-dashoffset": dashOffset,
-            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (index.h("ic-typography", { key: 'e4d24f7e59633400c36e0e380e52ea1714c7f88f', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, index.h("p", { key: 'e89f399cb0c43c4cc7dd743a201789cf50a73ed9' }, indicatorLabel))))));
+            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (index.h("ic-typography", { key: '22f1b492ebc832a2ea60ffbefd9790c1f85b2c90', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, index.h("p", { key: 'e513e1965e25987826a872c991faec17c17db505' }, indicatorLabel))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -641,6 +642,10 @@ const Tooltip = class {
          * If `true`, the tooltip will not be displayed on hover, it will require a click.
          */
         this.disableHover = false;
+        /**
+         * Setting to `true` can help in situations where tooltip content is clipped by a parent element.
+         */
+        this.fixedPositioning = false;
         /**
          * The position of the tooltip in relation to the parent element.
          */
@@ -660,7 +665,7 @@ const Tooltip = class {
                 if (this.dialogContentArea) {
                     this.el.classList.add("ic-tooltip-on-dialog");
                 }
-                this.popperInstance = popper.createPopper(this.el, this.toolTip, Object.assign({ placement: this.placement, modifiers: [
+                this.popperInstance = popper.createPopper(this.el, this.toolTip, Object.assign({ strategy: this.fixedPositioning ? "fixed" : "absolute", placement: this.placement, modifiers: [
                         {
                             name: "offset",
                             options: {
@@ -828,10 +833,10 @@ const Tooltip = class {
     }
     render() {
         const { label, maxLines, silent, theme } = this;
-        return (index.h(index.Host, { key: '45c8808ecc7904b44e269ec6ae844da6f75710f0', class: {
+        return (index.h(index.Host, { key: '87f3bd48a10c5b2a9238773960171629d6661602', class: {
                 "ic-tooltip": true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("div", { key: 'a03ff6ebeb4d0476077838329f7f00cd29c1004d', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, index.h("ic-typography", { key: '92b33499dae505e7e09bc92a8c91f1097de03b7b', maxLines: maxLines, variant: "caption" }, label), index.h("div", { key: '37523617a917645fe37edb4e6d6e250ffc4d7b67', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), index.h("slot", { key: '44217d6c93aa8dab3250ebfde59f17bc51596576' })));
+            } }, index.h("div", { key: 'f6469c289d080dcf9159e80f7e0a2a6092aac5f0', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, index.h("ic-typography", { key: 'ca39cfc710166a4ade00f2d430632af8211f1991', maxLines: maxLines, variant: "caption" }, label), index.h("div", { key: 'c7c068079a39a3ad1b09af475519e3ad3590d28c', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), index.h("slot", { key: 'ca0c7f33a5809e1571e91bc9bf5033dbf5ddb31f' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {