@ukic/web-components 3.25.0 → 3.27.0

package/components/ic-back-to-top.js

@@ -0,0 +1,216 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { j as onComponentPropUndefinedChange, o as onComponentRequiredPropUndefined } from './helpers.js';
+import { d as defineCustomElement$5 } from './ic-button2.js';
+import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
+import { d as defineCustomElement$3 } from './ic-tooltip2.js';
+import { d as defineCustomElement$2 } from './ic-typography2.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"/>
+</svg>
+`;
+
+const icBackToTopCss = "/*! 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:flex;flex:row;height:0.1px}:host(.ic-back-to-top-right){justify-content:flex-end}:host(.ic-back-to-top-right) ic-button{margin-right:var(--margin-right, 1rem)}:host(.ic-back-to-top-right) .ic-back-to-top-icon{padding-top:var(--ic-space-xxs);padding-right:var(--ic-space-xs)}:host(.ic-back-to-top-left){justify-content:flex-start}:host(.ic-back-to-top-left) ic-button{margin-left:var(--margin-left, 1rem)}:host(.ic-back-to-top-left) .ic-back-to-top-icon{padding-top:var(--ic-space-xxs);padding-right:var(--ic-space-xs)}:host(.ic-back-to-top-center){justify-content:center}:host(.ic-back-to-top-center) .ic-back-to-top-icon{padding-top:var(--ic-space-xxs);padding-right:var(--ic-space-xs)}ic-button{height:2.5rem;align-items:center;background-color:var(--ic-color-background-primary);border-radius:5rem;box-shadow:var(--ic-elevation-overlay);visibility:hidden;position:fixed;bottom:var(--ic-space-md);opacity:0;transition:visibility 0s linear var(--ic-transition-duration-slow),\n    opacity var(--ic-transition-duration-slow);z-index:var(--ic-z-index-back-to-top)}:host(.ic-back-to-top-variant-icon) ic-button::part(button){margin:0}ic-button::part(button){border-radius:5rem}ic-button.show{visibility:visible;opacity:1;transition:visibility 0s linear 0s,\n    opacity var(--ic-transition-duration-slow),\n    box-shadow var(--ic-easing-transition-fast)}ic-button.offset-banner:not(.by-footer){margin-bottom:var(--footer-offset, var(--ic-space-lg))}.ic-back-to-top-icon>svg{height:var(--ic-space-md);width:var(--ic-space-md)}.icon-only{width:2.5rem}.icon-only .ic-back-to-top-icon>svg{padding-left:calc(var(--ic-space-xs) - var(--ic-space-1px))}ic-button.by-footer{position:relative;bottom:var(--footer-offset, 3.5rem)}@media (forced-colors: active){.icon-only .ic-back-to-top-icon>svg{padding-left:calc(var(--ic-space-xs) - var(--ic-space-xxxs))}}@media (prefers-reduced-motion: reduce){ic-button,ic-button.show{transition:none}}";
+const IcBackToTopStyle0 = icBackToTopCss;
+
+const backToTopLabel = "Back to top";
+const BackToTop = /*@__PURE__*/ proxyCustomElement(class BackToTop extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.topObserver = null;
+        this.bannerOffset = false;
+        this.footerVisible = false;
+        this.targetElVisible = true;
+        /**
+         * The horizontal position of the element.
+         */
+        this.position = "right";
+        /**
+         * 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";
+        /**
+         * The variant of the button to render
+         */
+        this.variant = "default";
+        this.getObservedEl = () => {
+            return document.querySelector("#ic-back-to-top-target");
+        };
+        this.setTargetElVisible = (visible) => {
+            this.targetElVisible = visible;
+        };
+        this.setFooterVisible = (visible) => {
+            this.checkForClassificationBanner();
+            this.footerVisible =
+                typeof window !== "undefined" && window.scrollY === 0 ? false : visible;
+        };
+        this.targetElObserverCallback = (entries) => {
+            this.setTargetElVisible(entries[0].isIntersecting);
+        };
+        this.footerObserverCallback = (entries) => {
+            this.setFooterVisible(entries[0].isIntersecting);
+        };
+        this.findTargetEl = (target) => {
+            let targetElement = null;
+            if (target === null || target === undefined) {
+                console.log("Error: No target ID specified for back to top component - defaulting to top of page");
+            }
+            else {
+                targetElement = document.querySelector(`${target.startsWith("#") ? "" : "#"}${target}`);
+                if (targetElement === null) {
+                    console.log(`Error: Back to top target element '${target}' not found - defaulting to top of page`);
+                }
+            }
+            return targetElement;
+        };
+        this.createTopObserver = (target) => {
+            this.targetEl = this.findTargetEl(target);
+            let objParent;
+            //remove old element & observer
+            if (this.topObserver !== null) {
+                const observedEl = this.getObservedEl();
+                if (observedEl !== null) {
+                    this.topObserver.unobserve(observedEl);
+                    observedEl.remove();
+                }
+            }
+            if (this.targetEl === null) {
+                objParent = document.body;
+                this.targetEl = objParent.firstElementChild;
+                this.isTargetElNull = true;
+            }
+            else {
+                objParent = this.targetEl.parentNode;
+                this.isTargetElNull = false;
+            }
+            //insert a new 0px height element before specified target that can be used to determine when page is scrolled
+            const objBackToTopTargetEl = document.createElement("div");
+            objBackToTopTargetEl.setAttribute("id", "ic-back-to-top-target");
+            objBackToTopTargetEl.setAttribute("tabindex", "-1"); // Needed for virtual cursor behaviour to work
+            objParent.insertBefore(objBackToTopTargetEl, this.targetEl);
+            // resize observer needs to factor in any top margin on the target el
+            const marginTop = this.targetEl
+                ? getComputedStyle(this.targetEl).marginTop
+                : 0;
+            this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {
+                threshold: [0],
+                rootMargin: `${marginTop} 0px 0px 0px`,
+            });
+            this.topObserver.observe(objBackToTopTargetEl);
+        };
+        this.handleClick = () => {
+            var _a;
+            if (this.isTargetElNull) {
+                window.scrollTo(0, 0);
+            }
+            else {
+                (_a = this.targetEl) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+            }
+            // Get virtual cursor to move
+            this.getObservedEl().focus();
+        };
+        this.checkForClassificationBanner = () => {
+            //adjust position for classification banner at bottom
+            const banners = document.querySelectorAll("ic-classification-banner:not([inline='true'])");
+            this.bannerOffset = banners.length > 0;
+        };
+    }
+    watchPropHandler(newValue, oldValue) {
+        //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value
+        onComponentPropUndefinedChange(oldValue, newValue, () => {
+            this.createTopObserver(newValue);
+        });
+    }
+    componentWillLoad() {
+        this.createTopObserver(this.target);
+        this.checkForClassificationBanner();
+        //observer for when footer scrolls into view
+        let footers = document.querySelectorAll("ic-footer");
+        if (footers.length === 0) {
+            footers = document.querySelectorAll("footer");
+        }
+        if (footers.length) {
+            const footerEl = footers[footers.length - 1];
+            const threshold = this.bannerOffset ? 0.15 : 0;
+            const footerObserver = new IntersectionObserver(this.footerObserverCallback, { threshold: [threshold] });
+            footerObserver.observe(footerEl);
+        }
+    }
+    componentDidLoad() {
+        onComponentRequiredPropUndefined([{ prop: this.target, propName: "target" }], "Back to Top");
+    }
+    render() {
+        const { variant, bannerOffset, targetElVisible, footerVisible } = this;
+        const btnVariant = variant === "icon" ? "icon-secondary" : "secondary";
+        const size = variant === "icon" ? "large" : "medium";
+        const label = variant === "icon" ? "" : backToTopLabel;
+        return (h(Host, { key: '849c28a0432db633c5f6cc18e93ab184ef2366b3', class: {
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
+                [`ic-back-to-top-${this.position}`]: true,
+                [`ic-back-to-top-variant-icon`]: variant === "icon",
+            } }, h("ic-button", { key: '847930311aa52347cabcc2c8cc13a8806524722e', "aria-label": backToTopLabel, variant: btnVariant, size: size, onClick: this.handleClick, class: {
+                ["offset-banner"]: bannerOffset,
+                ["show"]: !targetElVisible,
+                ["by-footer"]: footerVisible,
+                ["icon-only"]: variant === "icon",
+            }, theme: this.theme }, h("span", { key: 'a8f92084d51b98b034ebb0379c291a169f42f88b', class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), label)));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return this; }
+    static get watchers() { return {
+        "target": ["watchPropHandler"]
+    }; }
+    static get style() { return IcBackToTopStyle0; }
+}, [17, "ic-back-to-top", {
+        "position": [1],
+        "target": [1],
+        "theme": [1],
+        "variant": [1],
+        "bannerOffset": [32],
+        "footerVisible": [32],
+        "targetElVisible": [32]
+    }, undefined, {
+        "target": ["watchPropHandler"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-back-to-top", "ic-button", "ic-loading-indicator", "ic-tooltip", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-back-to-top":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BackToTop);
+            }
+            break;
+        case "ic-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ic-loading-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ic-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IcBackToTop = BackToTop;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcBackToTop, defineCustomElement };
+
+//# sourceMappingURL=ic-back-to-top.js.map

package/components/ic-back-to-top.js.map

@@ -0,0 +1 @@
+{"file":"ic-back-to-top.js","mappings":"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","names":[],"sources":["src/components/ic-back-to-top/ic-back-to-top.css?tag=ic-back-to-top&encapsulation=shadow","src/components/ic-back-to-top/ic-back-to-top.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-back-to-top: z-index of back to top\n * @prop --margin-right: right y-position of back to top\n * @prop --margin-left: left y-position of back to top\n * @prop --footer-offset: offset of x-position from footer\n */\n\n:host {\n  display: flex;\n  flex: row;\n  height: 0.1px;\n}\n\n:host(.ic-back-to-top-right) {\n  justify-content: flex-end;\n}\n\n:host(.ic-back-to-top-right) ic-button {\n  margin-right: var(--margin-right, 1rem);\n}\n\n:host(.ic-back-to-top-right) .ic-back-to-top-icon {\n  padding-top: var(--ic-space-xxs);\n  padding-right: var(--ic-space-xs);\n}\n\n:host(.ic-back-to-top-left) {\n  justify-content: flex-start;\n}\n\n:host(.ic-back-to-top-left) ic-button {\n  margin-left: var(--margin-left, 1rem);\n}\n\n:host(.ic-back-to-top-left) .ic-back-to-top-icon {\n  padding-top: var(--ic-space-xxs);\n  padding-right: var(--ic-space-xs);\n}\n\n:host(.ic-back-to-top-center) {\n  justify-content: center;\n}\n\n:host(.ic-back-to-top-center) .ic-back-to-top-icon {\n  padding-top: var(--ic-space-xxs);\n  padding-right: var(--ic-space-xs);\n}\n\nic-button {\n  height: 2.5rem;\n  align-items: center;\n  background-color: var(--ic-color-background-primary);\n  border-radius: 5rem;\n  box-shadow: var(--ic-elevation-overlay);\n  visibility: hidden;\n  position: fixed;\n  bottom: var(--ic-space-md);\n  opacity: 0;\n  transition: visibility 0s linear var(--ic-transition-duration-slow),\n    opacity var(--ic-transition-duration-slow);\n  z-index: var(--ic-z-index-back-to-top);\n}\n\n:host(.ic-back-to-top-variant-icon) ic-button::part(button) {\n  margin: 0;\n}\n\nic-button::part(button) {\n  border-radius: 5rem;\n}\n\nic-button.show {\n  visibility: visible;\n  opacity: 1;\n  transition: visibility 0s linear 0s,\n    opacity var(--ic-transition-duration-slow),\n    box-shadow var(--ic-easing-transition-fast);\n}\n\nic-button.offset-banner:not(.by-footer) {\n  margin-bottom: var(--footer-offset, var(--ic-space-lg));\n}\n\n.ic-back-to-top-icon > svg {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n.icon-only {\n  width: 2.5rem;\n}\n\n.icon-only .ic-back-to-top-icon > svg {\n  padding-left: calc(var(--ic-space-xs) - var(--ic-space-1px));\n}\n\nic-button.by-footer {\n  position: relative;\n  bottom: var(--footer-offset, 3.5rem);\n}\n\n@media (forced-colors: active) {\n  .icon-only .ic-back-to-top-icon > svg {\n    padding-left: calc(var(--ic-space-xs) - var(--ic-space-xxxs));\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  ic-button,\n  ic-button.show {\n    transition: none;\n  }\n}\n","import { Component, h, Host, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport {\n  IcBackToTopVariants,\n  IcBackToTopPositions,\n} from \"./ic-back-to-top.types\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n  tag: \"ic-back-to-top\",\n  styleUrl: \"ic-back-to-top.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BackToTop {\n  private isTargetElNull: boolean;\n  private targetEl: Element | null;\n  private topObserver: IntersectionObserver | null = null;\n\n  @Element() el: HTMLIcBackToTopElement;\n\n  @State() bannerOffset: boolean = false;\n  @State() footerVisible: boolean = false;\n  @State() targetElVisible: boolean = true;\n\n  /**\n   * The horizontal position of the element.\n   */\n  @Prop() position?: IcBackToTopPositions = \"right\";\n\n  /**\n   * The ID of the element to jump back to when the link is clicked.\n   */\n  @Prop() target!: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The variant of the button to render\n   */\n  @Prop() variant?: IcBackToTopVariants = \"default\";\n\n  @Watch(\"target\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    onComponentPropUndefinedChange(oldValue, newValue, () => {\n      this.createTopObserver(newValue);\n    });\n  }\n\n  componentWillLoad(): void {\n    this.createTopObserver(this.target);\n    this.checkForClassificationBanner();\n\n    //observer for when footer scrolls into view\n    let footers = document.querySelectorAll(\n      \"ic-footer\"\n    ) as NodeListOf<HTMLElement>;\n    if (footers.length === 0) {\n      footers = document.querySelectorAll(\"footer\");\n    }\n\n    if (footers.length) {\n      const footerEl = footers[footers.length - 1];\n      const threshold = this.bannerOffset ? 0.15 : 0;\n      const footerObserver = new IntersectionObserver(\n        this.footerObserverCallback,\n        { threshold: [threshold] }\n      );\n      footerObserver.observe(footerEl);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.target, propName: \"target\" }],\n      \"Back to Top\"\n    );\n  }\n\n  private getObservedEl = () => {\n    return document.querySelector(\"#ic-back-to-top-target\");\n  };\n\n  private setTargetElVisible = (visible: boolean) => {\n    this.targetElVisible = visible;\n  };\n\n  private setFooterVisible = (visible: boolean) => {\n    this.checkForClassificationBanner();\n    this.footerVisible =\n      typeof window !== \"undefined\" && window.scrollY === 0 ? false : visible;\n  };\n\n  private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setTargetElVisible(entries[0].isIntersecting);\n  };\n\n  private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setFooterVisible(entries[0].isIntersecting);\n  };\n\n  private findTargetEl = (target: string): Element | null => {\n    let targetElement = null;\n    if (target === null || target === undefined) {\n      console.log(\n        \"Error: No target ID specified for back to top component - defaulting to top of page\"\n      );\n    } else {\n      targetElement = document.querySelector(\n        `${target.startsWith(\"#\") ? \"\" : \"#\"}${target}`\n      );\n      if (targetElement === null) {\n        console.log(\n          `Error: Back to top target element '${target}' not found - defaulting to top of page`\n        );\n      }\n    }\n    return targetElement;\n  };\n\n  private createTopObserver = (target: string) => {\n    this.targetEl = this.findTargetEl(target);\n    let objParent: HTMLElement;\n\n    //remove old element & observer\n    if (this.topObserver !== null) {\n      const observedEl = this.getObservedEl();\n      if (observedEl !== null) {\n        this.topObserver.unobserve(observedEl);\n        observedEl.remove();\n      }\n    }\n\n    if (this.targetEl === null) {\n      objParent = document.body;\n      this.targetEl = objParent.firstElementChild;\n      this.isTargetElNull = true;\n    } else {\n      objParent = this.targetEl.parentNode as HTMLElement;\n      this.isTargetElNull = false;\n    }\n\n    //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n    const objBackToTopTargetEl = document.createElement(\"div\");\n    objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n    objBackToTopTargetEl.setAttribute(\"tabindex\", \"-1\"); // Needed for virtual cursor behaviour to work\n    objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n    // resize observer needs to factor in any top margin on the target el\n    const marginTop = this.targetEl\n      ? getComputedStyle(this.targetEl).marginTop\n      : 0;\n    this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n      threshold: [0],\n      rootMargin: `${marginTop} 0px 0px 0px`,\n    });\n    this.topObserver.observe(objBackToTopTargetEl);\n  };\n\n  private handleClick = () => {\n    if (this.isTargetElNull) {\n      window.scrollTo(0, 0);\n    } else {\n      this.targetEl?.scrollIntoView();\n    }\n    // Get virtual cursor to move\n    (this.getObservedEl() as HTMLElement).focus();\n  };\n\n  private checkForClassificationBanner = () => {\n    //adjust position for classification banner at bottom\n    const banners = document.querySelectorAll(\n      \"ic-classification-banner:not([inline='true'])\"\n    );\n    this.bannerOffset = banners.length > 0;\n  };\n\n  render() {\n    const { variant, bannerOffset, targetElVisible, footerVisible } = this;\n    const btnVariant = variant === \"icon\" ? \"icon-secondary\" : \"secondary\";\n    const size = variant === \"icon\" ? \"large\" : \"medium\";\n    const label = variant === \"icon\" ? \"\" : backToTopLabel;\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n          [`ic-back-to-top-${this.position}`]: true,\n          [`ic-back-to-top-variant-icon`]: variant === \"icon\",\n        }}\n      >\n        <ic-button\n          aria-label={backToTopLabel}\n          variant={btnVariant}\n          size={size}\n          onClick={this.handleClick}\n          class={{\n            [\"offset-banner\"]: bannerOffset,\n            [\"show\"]: !targetElVisible,\n            [\"by-footer\"]: footerVisible,\n            [\"icon-only\"]: variant === \"icon\",\n          }}\n          theme={this.theme}\n        >\n          <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n          {label}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ic-badge.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IcBadge extends Components.IcBadge, HTMLElement {}
+export const IcBadge: {
+    prototype: IcBadge;
+    new (): IcBadge;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ic-badge.js

@@ -0,0 +1,222 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { k as convertToRGBA, l as getBrandForegroundAppearance, m as isPropDefined, o as onComponentRequiredPropUndefined } from './helpers.js';
+import { d as defineCustomElement$2 } from './ic-typography2.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-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)}}@media (prefers-reduced-motion: reduce){:host(.ic-badge-hide){transition:none}}";
+const IcBadgeStyle0 = icBadgeCss;
+
+const TOP_NAVIGATION = "IC-TOP-NAVIGATION";
+const SIDE_NAVIGATION = "IC-SIDE-NAVIGATION";
+const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        var _a;
+        this.ariaLabel = null;
+        this.initialPosition = (_a = this.position) !== null && _a !== void 0 ? _a : "far";
+        /**
+         * The positioning of the badge in reference to the parent element.
+         */
+        this.position = "far";
+        /**
+         * The size of the badge to be displayed.
+         */
+        this.size = "medium";
+        /**
+         * 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";
+        /**
+         * The type of badge to be displayed.
+         */
+        this.type = "text";
+        /**
+         * The variant of the badge to be displayed.
+         */
+        this.variant = "neutral";
+        /**
+         * If `true`, the badge will be displayed.
+         */
+        this.visible = true;
+        this.setBadgeColour = () => {
+            const colorRGBA = this.customColor ? convertToRGBA(this.customColor) : null;
+            if (colorRGBA) {
+                const { r, g, b, a } = colorRGBA;
+                this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;
+                this.foregroundColour = getBrandForegroundAppearance((r * 299 + g * 587 + b * 114) / 1000);
+            }
+        };
+        this.getLabel = () => this.maxNumber && Number(this.label) > this.maxNumber
+            ? `${this.maxNumber}+`
+            : this.label;
+        // Set aria-label on badge and / or parent element
+        // Aria-describedby seems to not work, probably due to shadow DOM
+        this.setAccessibleLabel = () => {
+            const parentEl = this.el.parentElement;
+            const defaultAriaLabel = this.isAccessibleLabelDefined()
+                ? this.accessibleLabel
+                : this.label || "with badge being displayed";
+            if (parentEl) {
+                const { tagName } = parentEl;
+                if (tagName !== "IC-CARD" &&
+                    (tagName !== "IC-TAB" || (tagName === "IC-TAB" && this.parentAriaLabel))) {
+                    const ariaLabelPrefix = this.parentAriaLabel
+                        ? `${this.parentAriaLabel} ,`
+                        : "";
+                    parentEl.ariaLabel = this.visible
+                        ? `${ariaLabelPrefix} ${defaultAriaLabel}`
+                        : null;
+                }
+                else {
+                    this.ariaLabel = `, ${defaultAriaLabel}`;
+                }
+            }
+        };
+        this.setPositionInTopNavigation = () => {
+            this.position =
+                this.isInMobileMode() || this.isInNavigationItem()
+                    ? "inline"
+                    : this.initialPosition;
+        };
+        this.setPositionInSideNavigation = () => {
+            this.position = "near";
+        };
+        this.isInTopNav = () => {
+            const parentEl = this.el.parentElement;
+            if (!parentEl)
+                return false;
+            const grandparentEl = parentEl.parentElement;
+            const greatGrandparentEl = grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.parentElement;
+            return ((grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.tagName) === TOP_NAVIGATION ||
+                (greatGrandparentEl === null || greatGrandparentEl === void 0 ? void 0 : greatGrandparentEl.tagName) === TOP_NAVIGATION);
+        };
+        this.isInSideNav = () => {
+            const parentEl = this.el.parentElement;
+            if (!parentEl)
+                return false;
+            const grandparentEl = parentEl.parentElement;
+            const greatGrandparentEl = grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.parentElement;
+            return ((grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.tagName) === SIDE_NAVIGATION ||
+                (greatGrandparentEl === null || greatGrandparentEl === void 0 ? void 0 : greatGrandparentEl.tagName) === SIDE_NAVIGATION);
+        };
+        this.isInMobileMode = () => {
+            const parentEl = this.el.parentElement;
+            if (!parentEl)
+                return false;
+            const grandparentEl = parentEl.parentElement;
+            const greatGrandparentEl = grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.parentElement;
+            return ((((grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.tagName) === TOP_NAVIGATION ||
+                (grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.tagName) === SIDE_NAVIGATION) &&
+                grandparentEl.classList.contains("mobile-mode")) ||
+                (((greatGrandparentEl === null || greatGrandparentEl === void 0 ? void 0 : greatGrandparentEl.tagName) === TOP_NAVIGATION ||
+                    (greatGrandparentEl === null || greatGrandparentEl === void 0 ? void 0 : greatGrandparentEl.tagName) === SIDE_NAVIGATION) &&
+                    greatGrandparentEl.classList.contains("mobile-mode")));
+        };
+        this.isInNavigationItem = () => {
+            const parentEl = this.el.parentElement;
+            if (!parentEl)
+                return false;
+            return parentEl.tagName === "IC-NAVIGATION-ITEM";
+        };
+        this.isAccessibleLabelDefined = () => isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;
+    }
+    accessibleLabelHandler() {
+        this.setAccessibleLabel();
+    }
+    customColorHandler() {
+        this.variant === "custom" && this.setBadgeColour();
+    }
+    variantHandler() {
+        if (this.variant === "custom") {
+            this.setBadgeColour();
+        }
+    }
+    visibleHandler() {
+        this.setAccessibleLabel();
+    }
+    componentWillLoad() {
+        var _a;
+        this.variant === "custom" && this.setBadgeColour();
+        const ariaLabel = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.ariaLabel;
+        if (ariaLabel)
+            this.parentAriaLabel = ariaLabel;
+        this.setAccessibleLabel();
+    }
+    componentDidLoad() {
+        this.type === "text" &&
+            onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Badge");
+    }
+    componentWillRender() {
+        this.isInTopNav() && this.setPositionInTopNavigation();
+        this.isInSideNav() && this.setPositionInSideNavigation();
+    }
+    navBarMenuOpenHandler() {
+        this.isInTopNav() && (this.position = "inline");
+    }
+    navBarMenuCloseHandler() {
+        this.isInTopNav() && (this.position = this.initialPosition);
+    }
+    render() {
+        const { ariaLabel, el, foregroundColour, getLabel, position, size, label, type, variant, visible, theme, } = this;
+        return (h(Host, { key: '80362128f0009037af8ecb10ddbe465ed847044b', class: {
+                [`ic-badge-${position}`]: true,
+                [`ic-badge-${size}`]: true,
+                [`ic-badge-${variant}`]: true,
+                [`ic-badge-${type}`]: true,
+                [`ic-badge-foreground-${foregroundColour}`]: foregroundColour !== null && variant === "custom",
+                [`${visible ? "ic-badge-show" : "ic-badge-hide"}`]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, id: el.id || null, "aria-label": ariaLabel, role: "status" }, type === "icon" && h("slot", { key: '4df4a2ab27b18a2247bc047d940b16378451e8ae', name: "badge-icon" }), type === "text" && label && (h("ic-typography", { key: '56b2205ae5e36f5af3e60f0b76866c696d06eb7a', variant: size === "small" ? "badge-small" : "badge" }, getLabel())), type === "dot" && h("span", { key: '3a12c77ef89a454564358588908b31b69e04f500', class: "sr-only" }, "badge")));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return this; }
+    static get watchers() { return {
+        "accessibleLabel": ["accessibleLabelHandler"],
+        "customColor": ["customColorHandler"],
+        "variant": ["variantHandler"],
+        "visible": ["visibleHandler"]
+    }; }
+    static get style() { return IcBadgeStyle0; }
+}, [17, "ic-badge", {
+        "accessibleLabel": [1, "accessible-label"],
+        "customColor": [1, "custom-color"],
+        "maxNumber": [2, "max-number"],
+        "position": [1025],
+        "size": [1],
+        "label": [1],
+        "theme": [1],
+        "type": [1],
+        "variant": [1],
+        "visible": [4]
+    }, [[4, "icNavigationMenuOpened", "navBarMenuOpenHandler"], [4, "icNavigationMenuClosed", "navBarMenuCloseHandler"]], {
+        "accessibleLabel": ["accessibleLabelHandler"],
+        "customColor": ["customColorHandler"],
+        "variant": ["variantHandler"],
+        "visible": ["visibleHandler"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-badge", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Badge);
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IcBadge = Badge;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcBadge, defineCustomElement };
+
+//# sourceMappingURL=ic-badge.js.map

package/components/ic-badge.js.map

@@ -0,0 +1 @@
+{"file":"ic-badge.js","mappings":"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","names":[],"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\n@media (prefers-reduced-motion: reduce) {\n  :host(.ic-badge-hide) {\n    transition: none;\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/components/ic-breadcrumb-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IcBreadcrumbGroup extends Components.IcBreadcrumbGroup, HTMLElement {}
+export const IcBreadcrumbGroup: {
+    prototype: IcBreadcrumbGroup;
+    new (): IcBreadcrumbGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;