@ukic/web-components 3.25.0 → 3.27.0

package/components/ic-link.js

@@ -0,0 +1,8 @@
+import { L as Link, d as defineCustomElement$1 } from './ic-link2.js';
+
+const IcLink = Link;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcLink, defineCustomElement };
+
+//# sourceMappingURL=ic-link.js.map

package/components/ic-link.js.map

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

package/components/ic-link2.js

@@ -0,0 +1,135 @@
+import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
+import { O as OpenInNew } from './OpenInNew.js';
+import { b as inheritAttributes, g as getBrandFromContext, I as IcBrandForegroundEnum } from './helpers.js';
+import { I as IC_INHERITED_ARIA } from './constants.js';
+
+const icLinkCss = "/*! 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(.ic-link) .link,:host(.ic-link) ::slotted(a){color:var(--ic-link-text);text-decoration:underline;font-weight:var(--ic-font-weight-bold);transition:var(--ic-easing-transition-fast)}:host(.ic-link) .link:visited,:host(.ic-link) ::slotted(a:visited),:host(.ic-link) .link:visited:hover,:host(.ic-link) ::slotted(a:visited:hover),:host(.ic-link) .link:visited:active,:host(.ic-link) ::slotted(a:visited:active),:host(.ic-link) .link:visited:focus,:host(.ic-link) ::slotted(a:visited:focus){color:var(--ic-link-text-visited)}:host(.ic-link) .link:hover{color:var(--ic-link-text-hover)}:host(.ic-link) .link:active{color:var(--ic-link-text-pressed)}:host(.ic-link) .link:focus{color:var(--ic-link-text-focused)}:host(.ic-link-monochrome) .link:hover{color:var(--ic-link-text-hover-monochrome)}:host(.ic-link-monochrome) .link:active{color:var(--ic-link-text-pressed-monochrome)}:host(.ic-link-monochrome) .link:focus{color:var(--ic-link-text-focused-monochrome)}:host(.ic-link) .link:hover,:host(.ic-link) .link:focus,:host(.ic-link) ::slotted(a:hover),:host(.ic-link) ::slotted(a:focus){outline:none;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}@supports (text-underline-offset: 10%){:host(.ic-link) .link:hover,:host(.ic-link) .link:focus,:host(.ic-link) ::slotted(a:hover),:host(.ic-link) ::slotted(a:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:10%;border-bottom:0 !important;margin-bottom:0 !important}}:host(.ic-link) .link:active,:host(.ic-link) .link:focus:active,:host(.ic-link) .link:visited:active,:host(.ic-link) ::slotted(a:active),:host(.ic-link) ::slotted(a:focus:active),:host(.ic-link) ::slotted(a:visited:active){text-decoration:none}.ic-link-open-in-new-icon{vertical-align:middle;margin-left:var(--ic-space-xxs)}.ic-link-open-in-new-icon>svg{width:var(--ic-space-md);height:var(--ic-space-md);fill:var(--ic-link-icon-launch)}.link:visited>.ic-link-open-in-new-icon>svg{fill:var(--ic-link-icon-launch-visited)}:host(.ic-link-monochrome) .link,:host(.ic-link-monochrome) ::slotted(a){color:var(--ic-link-text-monochrome)}:host(.ic-link-monochrome) .link:visited,:host(.ic-link-monochrome) ::slotted(a:visited),:host(.ic-link-monochrome) .link:visited:hover,:host(.ic-link-monochrome) ::slotted(a:visited:hover),:host(.ic-link-monochrome) .link:visited:active,:host(.ic-link-monochrome) ::slotted(a:visited:active),:host(.ic-link-monochrome) .link:visited:focus,:host(.ic-link-monochrome) ::slotted(a:visited:focus){color:var(--ic-link-text-visited-monochrome)}:host(.ic-link-monochrome) .link>.ic-link-open-in-new-icon>svg{fill:var(--ic-link-icon-launch-monochrome)}:host(.ic-link-monochrome) .link:visited>.ic-link-open-in-new-icon>svg{fill:var(--ic-link-icon-launch-visited-monochrome)}:host(.breadcrumb-link) .link{display:var(--breadcrumb-link-display);align-items:var(--breadcrumb-link-align-items);gap:var(--breadcrumb-link-gap)}:host(.breadcrumb-link) .link ::slotted(.back-icon){height:var(--ic-space-lg);width:var(--ic-space-lg)}:host(.breadcrumb-link.current-page) a,:host(.breadcrumb-link.current-page) ::slotted(a){font-weight:normal;color:inherit;text-decoration:none;display:flex;align-items:center}:host(.breadcrumb-link.current-page) .link,:host(.breadcrumb-link.current-page) ::slotted(a:focus){outline:var(--ic-hc-focus-outline);text-decoration:none}:host(.breadcrumb-link.current-page) .link:visited{color:var(--ic-color-text-primary)}:host(.footer-link) ::slotted(a){color:var(--ic-footer-link) !important}:host(.footer-link) .ic-link-open-in-new-icon>svg{fill:var(--ic-footer-icon) !important}@media (forced-colors: active){:host(.ic-link) .ic-link-open-in-new-icon>svg{fill:currentcolor !important}}@media (prefers-reduced-motion: reduce){:host(.ic-link) .link,:host(.ic-link) ::slotted(a){transition:none}}";
+const IcLinkStyle0 = icLinkCss;
+
+const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.inheritedAttributes = {};
+        this.hostMutationObserver = null;
+        /**
+         * If `true`, the user can save the linked URL instead of navigating to it. If the value is a string, it will be used as the filename for the download.
+         */
+        this.download = false;
+        /**
+         * If `true`, the link will display as black in the light theme, and white in the dark theme.
+         */
+        this.monochrome = false;
+        /**
+         * 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";
+        // triggered when attributes of host element change
+        this.hostMutationCallback = (mutationList) => {
+            let forceComponentUpdate = false;
+            mutationList.forEach(({ attributeName }) => {
+                if (attributeName) {
+                    const attribute = this.el.getAttribute(attributeName);
+                    if (attribute && IC_INHERITED_ARIA.includes(attributeName)) {
+                        this.inheritedAttributes[attributeName] = attribute;
+                        forceComponentUpdate = true;
+                    }
+                }
+            });
+            if (forceComponentUpdate) {
+                forceUpdate(this);
+            }
+        };
+        this.setDownloadAttribute = (value) => {
+            if (typeof value === "boolean") {
+                return value ? "" : undefined;
+            }
+            else {
+                return value === "true" ? "" : value === "false" ? undefined : value;
+            }
+        };
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);
+        this.updateTheme();
+        this.el.setAttribute("exportparts", "link");
+    }
+    componentDidLoad() {
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            attributes: true,
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    brandChangeHandler({ detail }) {
+        this.updateTheme(detail.mode);
+    }
+    /**
+     * Sets focus on the link.
+     */
+    async setFocus() {
+        var _a, _b;
+        (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("a")) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+    updateTheme(mode = null) {
+        const theme = getBrandFromContext(this.el, mode);
+        if (theme !== IcBrandForegroundEnum.Default) {
+            this.monochrome = true;
+            this.theme =
+                theme === IcBrandForegroundEnum.Light
+                    ? IcBrandForegroundEnum.Dark
+                    : IcBrandForegroundEnum.Light;
+        }
+    }
+    hasRouterSlot() {
+        this.routerSlot = this.el.querySelector('[slot="router-item"]');
+        if (this.routerSlot) {
+            this.routerSlot.ariaLabel = this.routerSlot.textContent;
+        }
+        return !!this.routerSlot;
+    }
+    render() {
+        const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
+        return (h(Host, { key: 'd62709776b71c1cbb259db22f9d56ae4bdb6d3c3', class: {
+                ["ic-link"]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                ["ic-link-monochrome"]: !!monochrome,
+            } }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h("a", Object.assign({ class: {
+                ["link"]: !!href,
+            }, download: this.setDownloadAttribute(download), href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href ? "0" : "-1" }, this.inheritedAttributes, { part: "link" }), h("slot", null), target === "_blank" && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return this; }
+    static get style() { return IcLinkStyle0; }
+}, [17, "ic-link", {
+        "download": [8],
+        "href": [1],
+        "hreflang": [1],
+        "monochrome": [1028],
+        "referrerpolicy": [1],
+        "rel": [1],
+        "target": [1],
+        "theme": [1025],
+        "setFocus": [64]
+    }, [[4, "brandChange", "brandChangeHandler"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-link":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Link);
+            }
+            break;
+    } });
+}
+
+export { Link as L, defineCustomElement as d };
+
+//# sourceMappingURL=ic-link2.js.map

package/components/ic-link2.js.map

@@ -0,0 +1 @@
+{"file":"ic-link2.js","mappings":"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","names":[],"sources":["src/components/ic-link/ic-link.css?tag=ic-link&encapsulation=shadow","src/components/ic-link/ic-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-link) .link,\n:host(.ic-link) ::slotted(a) {\n  color: var(--ic-link-text);\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host(.ic-link) .link:visited,\n:host(.ic-link) ::slotted(a:visited),\n:host(.ic-link) .link:visited:hover,\n:host(.ic-link) ::slotted(a:visited:hover),\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:visited:active),\n:host(.ic-link) .link:visited:focus,\n:host(.ic-link) ::slotted(a:visited:focus) {\n  color: var(--ic-link-text-visited);\n}\n\n:host(.ic-link) .link:hover {\n  color: var(--ic-link-text-hover);\n}\n\n:host(.ic-link) .link:active {\n  color: var(--ic-link-text-pressed);\n}\n\n:host(.ic-link) .link:focus {\n  color: var(--ic-link-text-focused);\n}\n\n:host(.ic-link-monochrome) .link:hover {\n  color: var(--ic-link-text-hover-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:active {\n  color: var(--ic-link-text-pressed-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:focus {\n  color: var(--ic-link-text-focused-monochrome);\n}\n\n:host(.ic-link) .link:hover,\n:host(.ic-link) .link:focus,\n:host(.ic-link) ::slotted(a:hover),\n:host(.ic-link) ::slotted(a:focus) {\n  outline: none;\n  border-bottom: 0.25rem solid !important;\n  margin-bottom: -0.25rem !important;\n  text-decoration: none;\n}\n\n@supports (text-underline-offset: 10%) {\n  :host(.ic-link) .link:hover,\n  :host(.ic-link) .link:focus,\n  :host(.ic-link) ::slotted(a:hover),\n  :host(.ic-link) ::slotted(a:focus) {\n    text-decoration-line: underline;\n    text-decoration-thickness: 25%;\n    text-underline-offset: 10%;\n    border-bottom: 0 !important;\n    margin-bottom: 0 !important;\n  }\n}\n\n:host(.ic-link) .link:active,\n:host(.ic-link) .link:focus:active,\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:active),\n:host(.ic-link) ::slotted(a:focus:active),\n:host(.ic-link) ::slotted(a:visited:active) {\n  text-decoration: none;\n}\n\n.ic-link-open-in-new-icon {\n  vertical-align: middle;\n  margin-left: var(--ic-space-xxs);\n}\n\n.ic-link-open-in-new-icon > svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  fill: var(--ic-link-icon-launch);\n}\n\n.link:visited > .ic-link-open-in-new-icon > svg {\n  fill: var(--ic-link-icon-launch-visited);\n}\n\n:host(.ic-link-monochrome) .link,\n:host(.ic-link-monochrome) ::slotted(a) {\n  color: var(--ic-link-text-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited,\n:host(.ic-link-monochrome) ::slotted(a:visited),\n:host(.ic-link-monochrome) .link:visited:hover,\n:host(.ic-link-monochrome) ::slotted(a:visited:hover),\n:host(.ic-link-monochrome) .link:visited:active,\n:host(.ic-link-monochrome) ::slotted(a:visited:active),\n:host(.ic-link-monochrome) .link:visited:focus,\n:host(.ic-link-monochrome) ::slotted(a:visited:focus) {\n  color: var(--ic-link-text-visited-monochrome);\n}\n\n:host(.ic-link-monochrome) .link > .ic-link-open-in-new-icon > svg {\n  fill: var(--ic-link-icon-launch-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited > .ic-link-open-in-new-icon > svg {\n  fill: var(--ic-link-icon-launch-visited-monochrome);\n}\n\n:host(.breadcrumb-link) .link {\n  display: var(--breadcrumb-link-display);\n  align-items: var(--breadcrumb-link-align-items);\n  gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .link ::slotted(.back-icon) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n  font-weight: normal;\n  color: inherit;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n  outline: var(--ic-hc-focus-outline);\n  text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .link:visited {\n  color: var(--ic-color-text-primary);\n}\n\n/* Footer link */\n\n:host(.footer-link) ::slotted(a) {\n  color: var(--ic-footer-link) !important;\n}\n\n:host(.footer-link) .ic-link-open-in-new-icon > svg {\n  fill: var(--ic-footer-icon) !important;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  :host(.ic-link) .ic-link-open-in-new-icon > svg {\n    fill: currentcolor !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.ic-link) .link,\n  :host(.ic-link) ::slotted(a) {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Prop,\n  h,\n  Host,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getBrandFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcThemeMode,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: string } = {};\n  private routerSlot: HTMLElement | null;\n  private hostMutationObserver: MutationObserver | null = null;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it. If the value is a string, it will be used as the filename for the download.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * If `true`, the link will display as black in the light theme, and white in the dark theme.\n   */\n  @Prop({ mutable: true }) monochrome?: boolean = false;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme?: IcThemeMode = \"inherit\";\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n    this.updateTheme();\n    this.el.setAttribute(\"exportparts\", \"link\");\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n    this.updateTheme(detail.mode);\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot?.querySelector(\"a\")?.focus();\n  }\n\n  private updateTheme(mode: IcBrandForeground | null = null): void {\n    const theme = getBrandFromContext(this.el, mode);\n\n    if (theme !== IcBrandForegroundEnum.Default) {\n      this.monochrome = true;\n      this.theme =\n        theme === IcBrandForegroundEnum.Light\n          ? IcBrandForegroundEnum.Dark\n          : IcBrandForegroundEnum.Light;\n    }\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (attributeName) {\n        const attribute = this.el.getAttribute(attributeName);\n        if (attribute && IC_INHERITED_ARIA.includes(attributeName)) {\n          this.inheritedAttributes[attributeName] = attribute;\n          forceComponentUpdate = true;\n        }\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  private setDownloadAttribute = (\n    value: string | boolean | undefined\n  ): string | undefined => {\n    if (typeof value === \"boolean\") {\n      return value ? \"\" : undefined;\n    } else {\n      return value === \"true\" ? \"\" : value === \"false\" ? undefined : value;\n    }\n  };\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      monochrome,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"ic-link\"]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-link-monochrome\"]: !!monochrome,\n        }}\n      >\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"link\"]: !!href,\n            }}\n            download={this.setDownloadAttribute(download)}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n            part=\"link\"\n          >\n            <slot />\n            {target === \"_blank\" && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ic-loading-indicator.d.ts

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

package/components/ic-loading-indicator.js

@@ -0,0 +1,8 @@
+import { L as LoadingIndicator, d as defineCustomElement$1 } from './ic-loading-indicator2.js';
+
+const IcLoadingIndicator = LoadingIndicator;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcLoadingIndicator, defineCustomElement };
+
+//# sourceMappingURL=ic-loading-indicator.js.map

package/components/ic-loading-indicator.js.map

@@ -0,0 +1 @@
+{"file":"ic-loading-indicator.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ic-loading-indicator2.js

@@ -0,0 +1,278 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './ic-typography2.js';
+
+const icLoadingIndicatorCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--linear-border-radius:0.25rem;--inner-color:var(--ic-loading-indicator-inner-color);--outer-color:var(--ic-loading-indicator-outer-color);--label-color:var(--ic-loading-indicator-label-color);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.ic-loading-indicator-monochrome){--inner-color:var(--ic-loading-indicator-inner-color-monochrome);--outer-color:var(--ic-loading-indicator-outer-color-monochrome);--label-color:var(--ic-loading-indicator-label-color-monochrome)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host(.ic-loading-indicator-size-small){--circular-diameter:2.5rem;--linear-line-height:var(--ic-space-xxs)}:host(.ic-loading-indicator-size-medium){--circular-diameter:5rem}:host(.ic-loading-indicator-size-large){--circular-diameter:7.5rem}:host(.ic-loading-indicator-size-icon){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:1.25rem}:host(.ic-loading-indicator-label){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{--ic-typography-color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-circular-outer[aria-valuenow=\"0\"] .ic-loading-circular-inner,.ic-loading-linear-outer[aria-valuenow=\"0\"] .ic-loading-linear-inner{--inner-color:var(--outer-color)}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host(.ic-loading-indicator-full-width){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--compact-step-outer-color, var(--outer-color));stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}.inner-label{height:100%;display:grid}.inner-label .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;--ic-typography-color:var(\n    --ic-step-indicator-text-current,\n    var(--ic-status-info-default)\n  )}:host(.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-step-indicator-text-disabled)}:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-architectural-400)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-border-hc)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}";
+const IcLoadingIndicatorStyle0 = icLoadingIndicatorCss;
+
+const LOADING_INDICATOR_WIDTHS = {
+    large: 120,
+    medium: 80,
+    small: 40,
+    icon: 20,
+};
+const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.labelList = [];
+        this.circularDiameter = 0;
+        this.circularLineWidth = 0;
+        this.circularDimensions = {
+            x: 0,
+            y: 0,
+            r: 0,
+        };
+        this.clipInnerElement = false;
+        this.internalType = "circular";
+        /**
+         * The description that will be set as the aria-label of the loading indicator when not using a visible label.
+         */
+        this.description = "Loading";
+        /**
+         * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.
+         */
+        this.fullWidth = false;
+        /**
+         * The time in milliseconds before the label changes.
+         */
+        this.labelDuration = 8000;
+        /**
+         * The maximum value that the progress value can take.
+         * Used to calculate the proportional width of the progress bar.
+         */
+        this.max = 100;
+        /**
+         * The minimum value that the progress value can take.
+         * Used to calculate the proportional width of the progress bar.
+         */
+        this.min = 0;
+        /**
+         * If `true`, the element will display as black and white.
+         */
+        this.monochrome = false;
+        /**
+         * The size of the loading indicator.
+         */
+        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 indicator, either linear or circular. When size is set to 'icon' the type will be set to circular.
+         */
+        this.type = "circular";
+        this.getLabel = (labelIndex) => new Promise(() => {
+            this.interval = setInterval(() => {
+                if (labelIndex < this.labelList.length - 1) {
+                    labelIndex++;
+                }
+                else {
+                    labelIndex = 0;
+                }
+                this.indicatorLabel = this.labelList[labelIndex];
+            }, this.labelDuration);
+        });
+        this.getLabelVariant = () => {
+            const width = this.internalType === "circular" ? this.calculateWidth() : 0;
+            if (this.size === "small" || (width && width < 60)) {
+                return "label";
+            }
+            else if (this.size === "large" || width >= 120) {
+                return "h2";
+            }
+            return "h4";
+        };
+        this.calculateWidth = () => {
+            var _a, _b, _c;
+            if ((_a = this.outerElement) === null || _a === void 0 ? void 0 : _a.offsetWidth)
+                return this.outerElement.offsetWidth;
+            if (this.outerElement) {
+                const { width } = window.getComputedStyle(this.outerElement);
+                if (width) {
+                    // Regex to check the units of the css string
+                    if (((_b = width.match(/\D+$/)) === null || _b === void 0 ? void 0 : _b[0]) !== "%")
+                        return parseFloat(width);
+                    const parentWidth = (_c = this.outerElement.parentElement) === null || _c === void 0 ? void 0 : _c.offsetWidth;
+                    if (parentWidth)
+                        return parentWidth * (parseFloat(width) / 100);
+                }
+            }
+            return LOADING_INDICATOR_WIDTHS[this.size];
+        };
+        this.calculateProportion = (progress) => {
+            const minProgress = Math.min(this.max, Math.max(this.min, progress));
+            return (minProgress - this.min) / (this.max - this.min);
+        };
+        this.setLinearDeterminateWidth = () => {
+            // Ensure progress cannot be out of bounds
+            if (!this.innerElement || !this.progress)
+                return;
+            const proportion = this.calculateProportion(this.progress);
+            this.clipInnerElement = proportion > 0.5;
+            if (this.clipInnerElement) {
+                this.innerElement.classList.remove("clip");
+            }
+            else {
+                this.innerElement.classList.add("clip");
+            }
+            this.innerElement.style.setProperty("--linear-width", `${proportion * 100}%`);
+        };
+        this.setInternalType = () => {
+            this.internalType = this.type;
+            if (this.type == "linear") {
+                this.internalType = this.size == "icon" ? "circular" : "linear";
+            }
+        };
+        this.updateLabel = () => {
+            if (!this.label)
+                return;
+            if (typeof this.label === "string") {
+                this.indicatorLabel = this.label;
+            }
+            else {
+                this.labelList = this.label;
+                this.indicatorLabel = this.labelList[0];
+                if (this.labelList.length > 1) {
+                    this.getLabel(0);
+                }
+            }
+        };
+        this.setCircleDimensions = () => {
+            if (this.circularDiameter <= 0)
+                return;
+            const r = this.circularDiameter / 2;
+            const nextRadius = r - this.circularLineWidth / 2;
+            const dashArray = 2 * Math.PI * nextRadius;
+            this.circularDimensions = {
+                x: r,
+                y: r,
+                r: nextRadius,
+                dashArray: `${dashArray}px`,
+                dashOffset: this.progress
+                    ? `${(-1 - this.calculateProportion(this.progress)) * dashArray}px`
+                    : undefined,
+            };
+        };
+    }
+    watchPropHandler() {
+        this.updateLabel();
+    }
+    handleProgressChange() {
+        if (this.internalType === "linear") {
+            this.setLinearDeterminateWidth();
+        }
+        else {
+            this.setCircleDimensions();
+        }
+    }
+    handleIconSize() {
+        this.setIndicatorDimensions();
+    }
+    setIndicatorDimensions() {
+        this.setInternalType();
+        if (this.internalType === "circular") {
+            // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property
+            const diameter = this.calculateWidth();
+            if (this.outerElement && diameter !== this.circularDiameter) {
+                this.circularLineWidth = diameter * 0.1;
+                this.circularDiameter = diameter;
+                this.outerElement.style.setProperty("--circular-line-width", `${this.circularLineWidth}px`);
+            }
+            this.setCircleDimensions();
+        }
+        else {
+            this.setLinearDeterminateWidth();
+        }
+    }
+    disconnectedCallback() {
+        clearInterval(this.interval);
+    }
+    componentWillLoad() {
+        this.updateLabel();
+        this.el.setAttribute("exportparts", "ic-loading-container");
+    }
+    componentDidLoad() {
+        this.setIndicatorDimensions();
+    }
+    render() {
+        const { circularDiameter, circularDimensions: { x, y, r, dashArray, dashOffset }, description, fullWidth, indicatorLabel, innerLabel, internalType, label, max, min, monochrome, progress, size, theme, } = this;
+        return (h(Host, { key: 'beb812375fe592948fd08a79719e2929f2465c28', class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                "ic-loading-indicator-full-width": fullWidth,
+                "ic-loading-indicator-label": !!label,
+                "ic-loading-indicator-monochrome": monochrome,
+                [`ic-loading-indicator-size-${size}`]: true,
+            } }, h("div", { key: '8a06331985f07e1abafcd9ecc35aa77301068283', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: '4efb469ea95efd064cd1bfa5b4ea7d4adab1783c', ref: (el) => (this.outerElement = el), class: {
+                [`ic-loading-${internalType}-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 }, h("div", { key: '59de7cfe38c013ea45f73bb3aa700f1faba75244', ref: (el) => (this.innerElement = el), class: {
+                [`ic-loading-${internalType}-inner`]: true,
+                "inner-label": !!innerLabel,
+            } }, innerLabel && size === "small" && (h("ic-typography", { key: '0450c339e59da5b47cf73d77b968fb4e34ebe57f', variant: "subtitle-small", class: "inner-text" }, innerLabel)), internalType === "circular" && (h("svg", { key: '4e7a06aad19b58afb8b568ee572863ebf60d1ee3', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: '1953d5576a4d86c2c5b18f62fa806a9408566ba3', cx: x, cy: y, r: r }), h("circle", { key: 'f8f6bbfbf38710de4ea96278512d0aca385ae069', 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" && (h("ic-typography", { key: 'c3ceae06e922246f12e188135f30400eb409894a', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: '6cbf517faab2093db5dc47f8b33c51fdc7af604b' }, indicatorLabel))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "label": ["watchPropHandler"],
+        "max": ["handleProgressChange"],
+        "min": ["handleProgressChange"],
+        "progress": ["handleProgressChange"],
+        "size": ["handleIconSize"],
+        "type": ["setIndicatorDimensions"]
+    }; }
+    static get style() { return IcLoadingIndicatorStyle0; }
+}, [1, "ic-loading-indicator", {
+        "description": [1],
+        "fullWidth": [516, "full-width"],
+        "innerLabel": [2, "inner-label"],
+        "label": [1],
+        "labelDuration": [2, "label-duration"],
+        "max": [2],
+        "min": [2],
+        "monochrome": [4],
+        "progress": [2],
+        "size": [513],
+        "theme": [1],
+        "type": [513],
+        "circularDiameter": [32],
+        "circularLineWidth": [32],
+        "circularDimensions": [32],
+        "indicatorLabel": [32],
+        "clipInnerElement": [32],
+        "internalType": [32]
+    }, undefined, {
+        "label": ["watchPropHandler"],
+        "max": ["handleProgressChange"],
+        "min": ["handleProgressChange"],
+        "progress": ["handleProgressChange"],
+        "size": ["handleIconSize"],
+        "type": ["setIndicatorDimensions"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-loading-indicator", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-loading-indicator":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LoadingIndicator);
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { LoadingIndicator as L, defineCustomElement as d };
+
+//# sourceMappingURL=ic-loading-indicator2.js.map

package/components/ic-loading-indicator2.js.map

@@ -0,0 +1 @@
+{"file":"ic-loading-indicator2.js","mappings":"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","names":[],"sources":["src/components/ic-loading-indicator/ic-loading-indicator.css?tag=ic-loading-indicator&encapsulation=shadow","src/components/ic-loading-indicator/ic-loading-indicator.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  /**\n   * @prop --circular-diameter: Diameter of the circular-indicator in px, rem or %\n   */\n\n  display: block;\n\n  --linear-border-radius: 0.25rem;\n  --inner-color: var(--ic-loading-indicator-inner-color);\n  --outer-color: var(--ic-loading-indicator-outer-color);\n  --label-color: var(--ic-loading-indicator-label-color);\n  --margin: none;\n  --linear-line-height: var(--ic-space-xs);\n}\n\n:host(.ic-loading-indicator-monochrome) {\n  --inner-color: var(--ic-loading-indicator-inner-color-monochrome);\n  --outer-color: var(--ic-loading-indicator-outer-color-monochrome);\n  --label-color: var(--ic-loading-indicator-label-color-monochrome);\n}\n\n.ic-loading-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n:host(.ic-loading-indicator-size-small) {\n  --circular-diameter: 2.5rem;\n  --linear-line-height: var(--ic-space-xxs);\n}\n\n:host(.ic-loading-indicator-size-medium) {\n  --circular-diameter: 5rem;\n}\n\n:host(.ic-loading-indicator-size-large) {\n  --circular-diameter: 7.5rem;\n}\n\n:host(.ic-loading-indicator-size-icon) {\n  display: inline-block;\n\n  --margin: var(--ic-space-xxxs);\n  --circular-diameter: 1.25rem;\n}\n\n:host(.ic-loading-indicator-label) {\n  --margin: 0 0 var(--ic-space-xs) 0;\n}\n\n.ic-loading-label {\n  --ic-typography-color: var(--label-color);\n\n  margin-left: var(--label-margin-left);\n}\n\n.ic-loading-circular-outer {\n  height: var(--circular-diameter);\n  width: var(--circular-diameter);\n}\n\n.ic-loading-circular-outer.indeterminate {\n  animation: circular-animation 1s linear;\n  animation-iteration-count: infinite;\n}\n\n@keyframes circular-animation {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ic-loading-circular-outer,\n.ic-loading-linear-outer {\n  margin: var(--margin);\n}\n\n.ic-loading-linear-outer {\n  background-color: var(--outer-color);\n  height: var(--linear-line-height);\n  width: 100%;\n  border-radius: var(--linear-border-radius);\n  overflow: hidden;\n}\n\n.ic-loading-circular-outer[aria-valuenow=\"0\"] .ic-loading-circular-inner,\n.ic-loading-linear-outer[aria-valuenow=\"0\"] .ic-loading-linear-inner {\n  --inner-color: var(--outer-color);\n}\n\n.ic-loading-linear-inner {\n  position: relative;\n  height: 100%;\n  background-color: var(--inner-color);\n  border-radius: var(--linear-border-radius);\n}\n\n.indeterminate > .ic-loading-linear-inner {\n  animation: linear-animation 2s infinite;\n}\n\n.determinate > .ic-loading-linear-inner {\n  transition: width 0.5s;\n  width: var(--linear-width);\n}\n\n:host(.ic-loading-indicator-full-width) {\n  --linear-border-radius: none;\n}\n\n@keyframes linear-animation {\n  0% {\n    width: 0%;\n    left: -1%;\n  }\n\n  25% {\n    width: 0%;\n    left: -1%;\n  }\n\n  50% {\n    width: 101%;\n    left: -1%;\n  }\n\n  75% {\n    width: 0%;\n    left: 101%;\n  }\n\n  100% {\n    width: 0%;\n    left: 101%;\n  }\n}\n\n.ic-loading-circular-svg {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transform: rotate(-90deg);\n}\n\n.ic-loading-circular-svg circle {\n  width: 100%;\n  height: 100%;\n  fill: none;\n  stroke: var(--compact-step-outer-color, var(--outer-color));\n  stroke-width: var(--circular-line-width);\n  stroke-linecap: round;\n}\n\n/* --stroke-dash-array calculated via dashArray method */\n.ic-loading-circular-svg circle:nth-child(2) {\n  --circular-indeterminate: calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );\n\n  stroke-dasharray: var(--stroke-dasharray), var(--stroke-dasharray);\n  stroke-dashoffset: var(--stroke-dashoffset, var(--circular-indeterminate));\n  stroke: var(--compact-step-inner-color, var(--inner-color));\n}\n\n.inner-label {\n  height: 100%;\n  display: grid;\n}\n\n.inner-label .ic-loading-circular-svg,\n.inner-text {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n/** ic-stepper **/\n:host(.not-required.compact-step-progress-indicator)\n  .ic-loading-circular-svg\n  circle:nth-child(2) {\n  stroke: var(--ic-architectural-300);\n}\n\n.inner-text {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ic-space-lg);\n  height: inherit;\n  overflow: hidden;\n  margin: auto;\n\n  --ic-typography-color: var(\n    --ic-step-indicator-text-current,\n    var(--ic-status-info-default)\n  );\n}\n\n:host(.not-required.compact-step-progress-indicator) .inner-text {\n  --ic-typography-color: var(--ic-step-indicator-text-disabled);\n}\n\n:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator)\n  .inner-text {\n  --ic-typography-color: var(--ic-architectural-400);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .indeterminate > .ic-loading-circular-inner {\n    forced-color-adjust: none;\n  }\n\n  .ic-loading-linear-outer {\n    border: var(--ic-border-hc);\n  }\n\n  .ic-loading-linear-inner {\n    background-color: canvastext;\n  }\n\n  .ic-loading-circular-svg circle {\n    stroke: Background;\n  }\n\n  .ic-loading-circular-svg circle:nth-child(2) {\n    stroke: canvastext;\n  }\n\n  :host(.not-required.compact-step-progress-indicator)\n    .ic-loading-circular-svg\n    circle:nth-child(2) {\n    stroke: GrayText;\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  IcLoadingCircleXYR,\n  IcLoadingSizes,\n  IcLoadingTypes,\n} from \"./ic-loading-indicator.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst LOADING_INDICATOR_WIDTHS = {\n  large: 120,\n  medium: 80,\n  small: 40,\n  icon: 20,\n};\n\n@Component({\n  tag: \"ic-loading-indicator\",\n  styleUrl: \"ic-loading-indicator.css\",\n  shadow: true,\n})\nexport class LoadingIndicator {\n  private innerElement?: HTMLDivElement;\n  private interval: ReturnType<typeof setInterval>;\n  private labelList: string[] = [];\n  private outerElement?: HTMLDivElement;\n\n  @Element() el: HTMLIcLoadingIndicatorElement;\n\n  @State() circularDiameter = 0;\n  @State() circularLineWidth = 0;\n  @State() circularDimensions: IcLoadingCircleXYR = {\n    x: 0,\n    y: 0,\n    r: 0,\n  };\n  @State() indicatorLabel?: string;\n  @State() clipInnerElement = false;\n  @State() internalType: IcLoadingTypes = \"circular\";\n\n  /**\n   * The description that will be set as the aria-label of the loading indicator when not using a visible label.\n   */\n  @Prop() description = \"Loading\";\n\n  /**\n   * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.\n   */\n  @Prop({ reflect: true }) fullWidth = false;\n\n  /**\n   * @internal The step number of a compact step, managed by ic-step.\n   */\n  @Prop() innerLabel?: number;\n\n  /**\n   * The label to be displayed beneath the loading indicator.\n   * Display a changing label by supplying an array of messages.\n   */\n  @Prop() label?: string | string[];\n  @Watch(\"label\")\n  watchPropHandler(): void {\n    this.updateLabel();\n  }\n\n  /**\n   * The time in milliseconds before the label changes.\n   */\n  @Prop() labelDuration = 8000;\n\n  /**\n   * The maximum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() max = 100;\n\n  /**\n   * The minimum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() min = 0;\n\n  /**\n   * If `true`, the element will display as black and white.\n   */\n  @Prop() monochrome = false;\n\n  /**\n   * The current amount of progress made.\n   * If not provided, component acts as an indeterminate loading indicator.\n   */\n  @Prop() progress?: number;\n  @Watch(\"max\")\n  @Watch(\"min\")\n  @Watch(\"progress\")\n  handleProgressChange(): void {\n    if (this.internalType === \"linear\") {\n      this.setLinearDeterminateWidth();\n    } else {\n      this.setCircleDimensions();\n    }\n  }\n\n  /**\n   * The size of the loading indicator.\n   */\n  @Prop({ reflect: true }) size: IcLoadingSizes = \"medium\";\n  @Watch(\"size\")\n  handleIconSize(): void {\n    this.setIndicatorDimensions();\n  }\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n\n  /**\n   * The type of indicator, either linear or circular. When size is set to 'icon' the type will be set to circular.\n   */\n  @Prop({ reflect: true }) type: IcLoadingTypes = \"circular\";\n  @Watch(\"type\")\n  setIndicatorDimensions(): void {\n    this.setInternalType();\n    if (this.internalType === \"circular\") {\n      // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n      const diameter = this.calculateWidth();\n      if (this.outerElement && diameter !== this.circularDiameter) {\n        this.circularLineWidth = diameter * 0.1;\n        this.circularDiameter = diameter;\n        this.outerElement.style.setProperty(\n          \"--circular-line-width\",\n          `${this.circularLineWidth}px`\n        );\n      }\n      this.setCircleDimensions();\n    } else {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  disconnectedCallback(): void {\n    clearInterval(this.interval);\n  }\n\n  componentWillLoad(): void {\n    this.updateLabel();\n    this.el.setAttribute(\"exportparts\", \"ic-loading-container\");\n  }\n\n  componentDidLoad(): void {\n    this.setIndicatorDimensions();\n  }\n\n  private getLabel = (labelIndex: number) =>\n    new Promise(() => {\n      this.interval = setInterval(() => {\n        if (labelIndex < this.labelList.length - 1) {\n          labelIndex++;\n        } else {\n          labelIndex = 0;\n        }\n        this.indicatorLabel = this.labelList[labelIndex];\n      }, this.labelDuration);\n    });\n\n  private getLabelVariant = () => {\n    const width = this.internalType === \"circular\" ? this.calculateWidth() : 0;\n\n    if (this.size === \"small\" || (width && width < 60)) {\n      return \"label\";\n    } else if (this.size === \"large\" || width >= 120) {\n      return \"h2\";\n    }\n    return \"h4\";\n  };\n\n  private calculateWidth = () => {\n    if (this.outerElement?.offsetWidth) return this.outerElement.offsetWidth;\n\n    if (this.outerElement) {\n      const { width } = window.getComputedStyle(this.outerElement);\n\n      if (width) {\n        // Regex to check the units of the css string\n        if (width.match(/\\D+$/)?.[0] !== \"%\") return parseFloat(width);\n\n        const parentWidth = this.outerElement.parentElement?.offsetWidth;\n        if (parentWidth) return parentWidth * (parseFloat(width) / 100);\n      }\n    }\n\n    return LOADING_INDICATOR_WIDTHS[this.size];\n  };\n\n  private calculateProportion = (progress: number) => {\n    const minProgress = Math.min(this.max, Math.max(this.min, progress));\n    return (minProgress - this.min) / (this.max - this.min);\n  };\n\n  private setLinearDeterminateWidth = () => {\n    // Ensure progress cannot be out of bounds\n    if (!this.innerElement || !this.progress) return;\n\n    const proportion = this.calculateProportion(this.progress);\n    this.clipInnerElement = proportion > 0.5;\n    if (this.clipInnerElement) {\n      this.innerElement.classList.remove(\"clip\");\n    } else {\n      this.innerElement.classList.add(\"clip\");\n    }\n    this.innerElement.style.setProperty(\n      \"--linear-width\",\n      `${proportion * 100}%`\n    );\n  };\n\n  private setInternalType = () => {\n    this.internalType = this.type;\n    if (this.type == \"linear\") {\n      this.internalType = this.size == \"icon\" ? \"circular\" : \"linear\";\n    }\n  };\n\n  private updateLabel = () => {\n    if (!this.label) return;\n\n    if (typeof this.label === \"string\") {\n      this.indicatorLabel = this.label;\n    } else {\n      this.labelList = this.label;\n      this.indicatorLabel = this.labelList[0];\n      if (this.labelList.length > 1) {\n        this.getLabel(0);\n      }\n    }\n  };\n\n  private setCircleDimensions = () => {\n    if (this.circularDiameter <= 0) return;\n\n    const r = this.circularDiameter / 2;\n    const nextRadius = r - this.circularLineWidth / 2;\n    const dashArray = 2 * Math.PI * nextRadius;\n\n    this.circularDimensions = {\n      x: r,\n      y: r,\n      r: nextRadius,\n      dashArray: `${dashArray}px`,\n      dashOffset: this.progress\n        ? `${(-1 - this.calculateProportion(this.progress)) * dashArray}px`\n        : undefined,\n    };\n  };\n\n  render() {\n    const {\n      circularDiameter,\n      circularDimensions: { x, y, r, dashArray, dashOffset },\n      description,\n      fullWidth,\n      indicatorLabel,\n      innerLabel,\n      internalType,\n      label,\n      max,\n      min,\n      monochrome,\n      progress,\n      size,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          \"ic-loading-indicator-full-width\": fullWidth,\n          \"ic-loading-indicator-label\": !!label,\n          \"ic-loading-indicator-monochrome\": monochrome,\n          [`ic-loading-indicator-size-${size}`]: true,\n        }}\n      >\n        <div class=\"ic-loading-container\" part=\"ic-loading-container\">\n          <div\n            ref={(el) => (this.outerElement = el)}\n            class={{\n              [`ic-loading-${internalType}-outer`]: true,\n              [progress === undefined ? \"indeterminate\" : \"determinate\"]: true,\n            }}\n            role=\"progressbar\"\n            aria-labelledby={label && size !== \"icon\" && \"ic-loading-label\"}\n            aria-label={description}\n            aria-valuenow={progress}\n            aria-valuemin={min}\n            aria-valuemax={max}\n          >\n            <div\n              ref={(el) => (this.innerElement = el)}\n              class={{\n                [`ic-loading-${internalType}-inner`]: true,\n                \"inner-label\": !!innerLabel,\n              }}\n            >\n              {innerLabel && size === \"small\" && (\n                <ic-typography variant=\"subtitle-small\" class=\"inner-text\">\n                  {innerLabel}\n                </ic-typography>\n              )}\n              {internalType === \"circular\" && (\n                <svg\n                  class=\"ic-loading-circular-svg\"\n                  viewBox={`0 0 ${circularDiameter} ${circularDiameter}`}\n                >\n                  <circle cx={x} cy={y} r={r}></circle>\n                  <circle\n                    style={{\n                      \"--circular-steps-max\": progress ? `${max}` : undefined,\n                      \"--progress-value\":\n                        progress !== undefined ? `${progress}` : undefined,\n                      \"--stroke-dasharray\": dashArray,\n                      \"--stroke-dashoffset\": dashOffset,\n                    }}\n                    cx={x}\n                    cy={y}\n                    r={r}\n                  ></circle>\n                </svg>\n              )}\n            </div>\n          </div>\n          {label && size !== \"icon\" && (\n            <ic-typography\n              id=\"ic-loading-label\"\n              class=\"ic-loading-label\"\n              role=\"alert\"\n              variant={this.getLabelVariant()}\n            >\n              <p>{indicatorLabel}</p>\n            </ic-typography>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ic-menu-group.d.ts

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

package/components/ic-menu-group.js

@@ -0,0 +1,47 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { m as isPropDefined } from './helpers.js';
+import { d as defineCustomElement$2 } from './ic-typography2.js';
+
+const icMenuGroupCss = "/*! 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-direction:column}ic-typography{--ic-typography-color:var(--ic-popover-parent-label);margin:var(--ic-space-xs) var(--ic-space-xs) 0}ul{list-style-type:none;margin:0;padding:0}hr{display:flex;align-self:stretch;border:calc(var(--ic-space-xxxs) / 2) solid var(--ic-popover-border);margin:var(--ic-space-xxs) 0 calc(var(--ic-space-sm) / 4)}";
+const IcMenuGroupStyle0 = icMenuGroupCss;
+
+const MenuGroup = /*@__PURE__*/ proxyCustomElement(class MenuGroup extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        const parentMenu = this.el.closest("ic-popover-menu");
+        return (h(Host, { key: 'b67fb3029530607dcb8b7462eeb56cbd7ef7322e', role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { key: 'cd75b3b4ab6862d17c0167a021b223911ff5f128', variant: "subtitle-small" }, this.label)), h("span", { key: '81cb0aafc38655f78a510988720f5831e4a90479', class: "menu-items-wrapper" }, h("slot", { key: '6dad74f6bf17000f8255b4764d70a28edd48cbe8' })), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", { key: '3c766f970b1ee1f2e2427b9afbf798d97bee454a' }))));
+    }
+    get el() { return this; }
+    static get style() { return IcMenuGroupStyle0; }
+}, [1, "ic-menu-group", {
+        "label": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-menu-group", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-menu-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MenuGroup);
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IcMenuGroup = MenuGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcMenuGroup, defineCustomElement };
+
+//# sourceMappingURL=ic-menu-group.js.map

package/components/ic-menu-group.js.map

@@ -0,0 +1 @@
+{"file":"ic-menu-group.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,yuFAAyuF,CAAC;AACjwF,0BAAe,cAAc;;MCOhB,SAAS;;;;;;IAOpB,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEtD,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,IACjE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KACxB,sEAAe,OAAO,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAiB,CACrE,EACD,6DAAM,KAAK,EAAC,oBAAoB,IAC9B,8DAAa,CACR,EAEN,IAAI,CAAC,EAAE,MAAK,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAC,0BAA0B,CAAC,CAAA,KAChE,4DAAM,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-menu-group/ic-menu-group.css?tag=ic-menu-group&encapsulation=shadow","src/components/ic-menu-group/ic-menu-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n}\n\nic-typography {\n  --ic-typography-color: var(--ic-popover-parent-label);\n\n  margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\nul {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\nhr {\n  display: flex;\n  align-self: stretch;\n  border: calc(var(--ic-space-xxxs) / 2) solid var(--ic-popover-border);\n  margin: var(--ic-space-xxs) 0 calc(var(--ic-space-sm) / 4);\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { isPropDefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-menu-group\",\n  styleUrl: \"ic-menu-group.css\",\n  shadow: true,\n})\nexport class MenuGroup {\n  @Element() el: HTMLIcMenuGroupElement;\n  /**\n   * The label to display as the title of the menu group.\n   */\n  @Prop() label?: string;\n\n  render() {\n    const parentMenu = this.el.closest(\"ic-popover-menu\");\n\n    return (\n      <Host role=\"group\" aria-label={this.label !== null ? this.label : \"\"}>\n        {isPropDefined(this.label) && (\n          <ic-typography variant=\"subtitle-small\">{this.label}</ic-typography>\n        )}\n        <span class=\"menu-items-wrapper\">\n          <slot></slot>\n        </span>\n        {/* The line under the menu group is added on all menu groups except in the case that the menu group is the last item in the popover menu */}\n        {this.el !== parentMenu?.querySelector(\"ic-menu-group:last-child\") && (\n          <hr />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}