npm - @ukic/web-components - Versions diffs - 2.1.0-beta.10 → 2.1.0-beta.12 - Mend

@ukic/web-components 2.1.0-beta.10 → 2.1.0-beta.12

Files changed (584) hide show

package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js CHANGED Viewed

@@ -100,7 +100,11 @@ export class HorizontalScroll {
     this.itemsContainerEl.addEventListener("scroll", this.scrollHandler);
     this.items = (getSlotElements(this.itemsContainerEl) ||
       Array.from(this.itemsContainerEl.children));
-    this.items.forEach((item) => item.addEventListener("focus", () => this.itemFocusHandler(Array.from(this.items).indexOf(item))));
+    this.items.forEach((item) => {
+      if (item.addEventListener) {
+        item.addEventListener("focus", () => this.itemFocusHandler(Array.from(this.items).indexOf(item)));
+      }
+    });
   }
   componentDidLoad() {
     let runningTotal = 0;
@@ -118,7 +122,9 @@ export class HorizontalScroll {
     });
   }
   disconnectedCallback() {
-    this.resizeObserver.disconnect();
+    if (this.resizeObserver !== undefined) {
+      this.resizeObserver.disconnect();
+    }
   }
   render() {
     const { appearance, firstItemVisible, lastItemVisible, itemOverflow } = this;

package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-horizontal-scroll.js","sourceRoot":"","sources":["../../../src/components/ic-horizontal-scroll/ic-horizontal-scroll.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n h,\n Host,\n State,\n Method,\n Prop,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\nimport { getSlotElements } from \"../../utils/helpers\";\n\nimport { checkResizeObserver, elementOverflowsX } from \"../../utils/helpers\";\nimport { IcThemeForeground, IcThemeForegroundEnum } from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n tag: \"ic-horizontal-scroll\",\n styleUrl: \"./ic-horizontal-scroll.css\",\n shadow: true,\n})\nexport class HorizontalScroll {\n @Element() el: HTMLIcHorizontalScrollElement;\n\n /*\n The appearance of the horizontal scroll, e.g. dark, light or the default.\n /\n @Prop() appearance?: IcThemeForeground = \"default\";\n\n @State() firstItemVisible: boolean = true;\n @State() lastItemVisible: boolean = false;\n @State() itemOverflow: boolean = false;\n\n private itemOffsets: number[];\n private itemsContainerEl: HTMLElement;\n private items: HTMLElement[];\n private resizeObserver: ResizeObserver;\n private isScrolling: number;\n private scrollDelay: number;\n private buttonStateSet: boolean = false;\n\n /\n @internal if side scrolling enabled, scrolls the specified item into view.\n */\n @Method()\n async scrollItemIntoView(itemPosition: number): Promise<void> {\n this.firstItemVisible = itemPosition <= 0;\n const newScrollPos =\n itemPosition <= 0 ? 0 : this.itemOffsets[itemPosition - 1];\n this.lastItemVisible =\n this.itemsContainerEl.offsetWidth + newScrollPos >=\n this.itemsContainerEl.scrollWidth;\n this.buttonStateSet = true;\n this.itemsContainerEl.scrollLeft = newScrollPos;\n }\n\n itemFocusHandler(itemPosition: number): void {\n if (this.itemOverflow) {\n this.scrollItemIntoView(itemPosition);\n }\n }\n\n private resizeObserverCallback = () => {\n if (this.el.clientWidth >= this.itemsContainerEl.scrollWidth) {\n this.itemOverflow = false;\n } else {\n this.itemOverflow = elementOverflowsX(this.itemsContainerEl);\n }\n\n if (this.itemOverflow) {\n this.lastItemVisible =\n this.itemsContainerEl.offsetWidth + this.itemsContainerEl.scrollLeft >=\n this.itemsContainerEl.scrollWidth;\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.itemsContainerEl);\n };\n\n private scrollLeft = () => {\n this.scrollItemIntoView(this.getCurrentLeftItem() - 1);\n };\n\n private scrollRight = () => {\n this.scrollItemIntoView(this.getCurrentLeftItem() + 1);\n };\n\n private longScrollRight = () => {\n this.scrollRight();\n this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n };\n\n private longScrollLeft = () => {\n this.scrollLeft();\n this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n };\n\n private leftArrowMouseDownHandler = (e: MouseEvent) => {\n e.preventDefault();\n this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n };\n\n private rightArrowMouseDownHandler = (e: MouseEvent) => {\n e.preventDefault();\n this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n };\n\n private arrowMouseUpHandler = () => {\n window.clearTimeout(this.scrollDelay);\n };\n\n private getCurrentLeftItem = (): number => {\n const index = this.itemOffsets.findIndex(\n (el) => el > Math.round(this.itemsContainerEl.scrollLeft)\n );\n return index < 0 ? 0 : index;\n };\n\n private scrollHandler = () => {\n window.clearTimeout(this.isScrolling);\n // Set a timeout to run after scrolling ends\n this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n };\n\n private scrollStopped = () => {\n // If scrollItemIntoView has been called, the button states will already be set\n // Can't just handle it here as it causes strange jumping behaviour in positioning\n const scrollLeft = Math.round(this.itemsContainerEl.scrollLeft);\n if (this.buttonStateSet === false) {\n this.firstItemVisible = scrollLeft === 0;\n this.lastItemVisible =\n this.itemsContainerEl.offsetWidth + scrollLeft >=\n this.itemsContainerEl.scrollWidth;\n }\n this.buttonStateSet = false;\n };\n\n componentWillLoad(): void {\n this.itemsContainerEl = this.el.children[0] as HTMLElement;\n this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n\n this.items = (getSlotElements(this.itemsContainerEl) \|\|\n Array.from(this.itemsContainerEl.children)) as HTMLElement[];\n this.items.forEach((item) =>\n item.addEventListener(\"focus\", () =>\n this.itemFocusHandler(Array.from(this.items).indexOf(item))\n )\n );\n }\n\n componentDidLoad(): void {\n let runningTotal = 0;\n this.itemOffsets = this.items.map((item) => {\n runningTotal += item.offsetWidth;\n return runningTotal;\n });\n\n checkResizeObserver(this.runResizeObserver);\n\n // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)\n // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons\n // - 'mouseup' otherwise not detected and scrolling not stopped\n const scrollArrows = Array.from(\n this.el.shadowRoot.querySelectorAll(\"div\")\n ) as HTMLElement[];\n [\"mouseup\", \"mouseleave\"].forEach((event) => {\n scrollArrows.forEach((arrow) =>\n arrow.addEventListener(event, this.arrowMouseUpHandler)\n );\n });\n }\n\n disconnectedCallback(): void {\n this.resizeObserver.disconnect();\n }\n\n render() {\n const { appearance, firstItemVisible, lastItemVisible, itemOverflow } =\n this;\n\n return (\n <Host\n class={{\n [\"visible\"]: itemOverflow,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n }}\n >\n <div\n aria-hidden=\"true\"\n class={{\n [\"scroll-container-left\"]: true,\n [\"hidden\"]: !itemOverflow,\n [\"disabled\"]: firstItemVisible,\n }}\n >\n <ic-button\n class=\"scroll-arrow\"\n variant=\"icon\"\n aria-label=\"Scroll left\"\n appearance={appearance}\n innerHTML={LeftArrow}\n disabled={firstItemVisible}\n tabindex=\"-1\"\n onClick={this.scrollLeft}\n onMouseDown={this.leftArrowMouseDownHandler}\n ></ic-button>\n <span class=\"scroll-splitter-left\"></span>\n </div>\n <slot></slot>\n <div\n aria-hidden=\"true\"\n class={{\n [\"scroll-container-right\"]: true,\n [\"hidden\"]: !itemOverflow,\n [\"disabled\"]: lastItemVisible,\n }}\n >\n <span class=\"scroll-splitter-right\"></span>\n <ic-button\n class=\"scroll-arrow\"\n variant=\"icon\"\n aria-label=\"Scroll right\"\n appearance={appearance}\n innerHTML={RightArrow}\n disabled={lastItemVisible}\n tabindex=\"-1\"\n onClick={this.scrollRight}\n onMouseDown={this.rightArrowMouseDownHandler}\n ></ic-button>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-horizontal-scroll.js","sourceRoot":"","sources":["../../../src/components/ic-horizontal-scroll/ic-horizontal-scroll.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n h,\n Host,\n State,\n Method,\n Prop,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\nimport { getSlotElements } from \"../../utils/helpers\";\n\nimport { checkResizeObserver, elementOverflowsX } from \"../../utils/helpers\";\nimport { IcThemeForeground, IcThemeForegroundEnum } from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n tag: \"ic-horizontal-scroll\",\n styleUrl: \"./ic-horizontal-scroll.css\",\n shadow: true,\n})\nexport class HorizontalScroll {\n @Element() el: HTMLIcHorizontalScrollElement;\n\n /*\n The appearance of the horizontal scroll, e.g. dark, light or the default.\n /\n @Prop() appearance?: IcThemeForeground = \"default\";\n\n @State() firstItemVisible: boolean = true;\n @State() lastItemVisible: boolean = false;\n @State() itemOverflow: boolean = false;\n\n private itemOffsets: number[];\n private itemsContainerEl: HTMLElement;\n private items: HTMLElement[];\n private resizeObserver: ResizeObserver;\n private isScrolling: number;\n private scrollDelay: number;\n private buttonStateSet: boolean = false;\n\n /\n @internal if side scrolling enabled, scrolls the specified item into view.\n */\n @Method()\n async scrollItemIntoView(itemPosition: number): Promise<void> {\n this.firstItemVisible = itemPosition <= 0;\n const newScrollPos =\n itemPosition <= 0 ? 0 : this.itemOffsets[itemPosition - 1];\n this.lastItemVisible =\n this.itemsContainerEl.offsetWidth + newScrollPos >=\n this.itemsContainerEl.scrollWidth;\n this.buttonStateSet = true;\n this.itemsContainerEl.scrollLeft = newScrollPos;\n }\n\n itemFocusHandler(itemPosition: number): void {\n if (this.itemOverflow) {\n this.scrollItemIntoView(itemPosition);\n }\n }\n\n private resizeObserverCallback = () => {\n if (this.el.clientWidth >= this.itemsContainerEl.scrollWidth) {\n this.itemOverflow = false;\n } else {\n this.itemOverflow = elementOverflowsX(this.itemsContainerEl);\n }\n\n if (this.itemOverflow) {\n this.lastItemVisible =\n this.itemsContainerEl.offsetWidth + this.itemsContainerEl.scrollLeft >=\n this.itemsContainerEl.scrollWidth;\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.itemsContainerEl);\n };\n\n private scrollLeft = () => {\n this.scrollItemIntoView(this.getCurrentLeftItem() - 1);\n };\n\n private scrollRight = () => {\n this.scrollItemIntoView(this.getCurrentLeftItem() + 1);\n };\n\n private longScrollRight = () => {\n this.scrollRight();\n this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n };\n\n private longScrollLeft = () => {\n this.scrollLeft();\n this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n };\n\n private leftArrowMouseDownHandler = (e: MouseEvent) => {\n e.preventDefault();\n this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n };\n\n private rightArrowMouseDownHandler = (e: MouseEvent) => {\n e.preventDefault();\n this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n };\n\n private arrowMouseUpHandler = () => {\n window.clearTimeout(this.scrollDelay);\n };\n\n private getCurrentLeftItem = (): number => {\n const index = this.itemOffsets.findIndex(\n (el) => el > Math.round(this.itemsContainerEl.scrollLeft)\n );\n return index < 0 ? 0 : index;\n };\n\n private scrollHandler = () => {\n window.clearTimeout(this.isScrolling);\n // Set a timeout to run after scrolling ends\n this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n };\n\n private scrollStopped = () => {\n // If scrollItemIntoView has been called, the button states will already be set\n // Can't just handle it here as it causes strange jumping behaviour in positioning\n const scrollLeft = Math.round(this.itemsContainerEl.scrollLeft);\n if (this.buttonStateSet === false) {\n this.firstItemVisible = scrollLeft === 0;\n this.lastItemVisible =\n this.itemsContainerEl.offsetWidth + scrollLeft >=\n this.itemsContainerEl.scrollWidth;\n }\n this.buttonStateSet = false;\n };\n\n componentWillLoad(): void {\n this.itemsContainerEl = this.el.children[0] as HTMLElement;\n this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n\n this.items = (getSlotElements(this.itemsContainerEl) \|\|\n Array.from(this.itemsContainerEl.children)) as HTMLElement[];\n this.items.forEach((item) => {\n if (item.addEventListener) {\n item.addEventListener(\"focus\", () =>\n this.itemFocusHandler(Array.from(this.items).indexOf(item))\n );\n }\n });\n }\n\n componentDidLoad(): void {\n let runningTotal = 0;\n this.itemOffsets = this.items.map((item) => {\n runningTotal += item.offsetWidth;\n return runningTotal;\n });\n\n checkResizeObserver(this.runResizeObserver);\n\n // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)\n // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons\n // - 'mouseup' otherwise not detected and scrolling not stopped\n const scrollArrows = Array.from(\n this.el.shadowRoot.querySelectorAll(\"div\")\n ) as HTMLElement[];\n [\"mouseup\", \"mouseleave\"].forEach((event) => {\n scrollArrows.forEach((arrow) =>\n arrow.addEventListener(event, this.arrowMouseUpHandler)\n );\n });\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== undefined) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const { appearance, firstItemVisible, lastItemVisible, itemOverflow } =\n this;\n\n return (\n <Host\n class={{\n [\"visible\"]: itemOverflow,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n }}\n >\n <div\n aria-hidden=\"true\"\n class={{\n [\"scroll-container-left\"]: true,\n [\"hidden\"]: !itemOverflow,\n [\"disabled\"]: firstItemVisible,\n }}\n >\n <ic-button\n class=\"scroll-arrow\"\n variant=\"icon\"\n aria-label=\"Scroll left\"\n appearance={appearance}\n innerHTML={LeftArrow}\n disabled={firstItemVisible}\n tabindex=\"-1\"\n onClick={this.scrollLeft}\n onMouseDown={this.leftArrowMouseDownHandler}\n ></ic-button>\n <span class=\"scroll-splitter-left\"></span>\n </div>\n <slot></slot>\n <div\n aria-hidden=\"true\"\n class={{\n [\"scroll-container-right\"]: true,\n [\"hidden\"]: !itemOverflow,\n [\"disabled\"]: lastItemVisible,\n }}\n >\n <span class=\"scroll-splitter-right\"></span>\n <ic-button\n class=\"scroll-arrow\"\n variant=\"icon\"\n aria-label=\"Scroll right\"\n appearance={appearance}\n innerHTML={RightArrow}\n disabled={lastItemVisible}\n tabindex=\"-1\"\n onClick={this.scrollRight}\n onMouseDown={this.rightArrowMouseDownHandler}\n ></ic-button>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-input-component-container/ic-input-component-container.css CHANGED Viewed

@@ -4,12 +4,13 @@ ic-input-component-container {
    */
   display: flex;
-  border: 0.063rem solid var(--border-color, var(--ic-architectural-400));
+  border: var(--ic-space-1px) solid
+    var(--border-color, var(--ic-architectural-400));
   border-radius: var(--ic-border-radius);
   transition: var(--ic-easing-transition-slow);
   height: 2.5rem;
   width: var(--input-width, 20rem);
-  padding: 0.063rem;
+  padding: var(--ic-space-1px);
   background-color: var(--ic-architectural-white);
   box-sizing: border-box;
   fill: var(--ic-architectural-400);
@@ -22,7 +23,7 @@ ic-input-component-container.fullwidth {
 ic-input-component-container.disabled,
 ic-input-component-container.disabled:hover {
-  border: 0.063rem dashed var(--ic-architectural-200);
+  border: var(--ic-space-1px) dashed var(--ic-architectural-200);
 }
 ic-input-component-container.readonly,
@@ -126,12 +127,12 @@ ic-input-component-container:hover {
   }
   ic-input-component-container:focus-within {
-    border: 0.063rem solid Highlight;
+    border: var(--ic-space-1px) solid Highlight;
     outline: 0.125rem solid Highlight;
   }
   ic-input-component-container.disabled,
   ic-input-component-container.disabled:hover {
-    border: 0.063rem dashed GrayText;
+    border: var(--ic-space-1px) dashed GrayText;
   }
 }

package/dist/collection/components/ic-link/ic-link.css CHANGED Viewed

@@ -468,10 +468,23 @@ video {
 :host(.link) .ic-link:focus,
 :host(.link) ::slotted(a:hover),
 :host(.link) ::slotted(a:focus) {
-  text-decoration-line: underline;
-  text-decoration-thickness: 25%;
-  text-underline-offset: 25%;
   outline: none;
+  border-bottom: 0.25rem solid !important;
+  margin-bottom: -0.25rem !important;
+  text-decoration: none;
+}
+@supports (text-decoration-thickness: 25%) {
+  :host(.link) .ic-link:hover,
+  :host(.link) .ic-link:focus,
+  :host(.link) ::slotted(a:hover),
+  :host(.link) ::slotted(a:focus) {
+    text-decoration-line: underline;
+    text-decoration-thickness: 25%;
+    text-underline-offset: 25%;
+    border-bottom: 0 !important;
+    margin-bottom: 0 !important;
+  }
 }
 :host(.link) .ic-link:active,

package/dist/collection/components/ic-link/ic-link.js CHANGED Viewed

@@ -60,7 +60,7 @@ export class Link {
     return (h(Host, { class: { ["link"]: true, [`${appearance}`]: true } }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h("a", Object.assign({ class: {
         ["ic-link"]: href !== null,
         [`${appearance}`]: href !== null,
-      }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href !== null ? "0" : "-1" }, this.inheritedAttributes), h("slot", null), showIcon && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
+      }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href !== null ? "0" : "-1" }, this.inheritedAttributes), h("slot", null), (showIcon || target === "_blank") && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
   }
   static get is() { return "ic-link"; }
   static get encapsulation() { return "shadow"; }
@@ -196,8 +196,11 @@ export class Link {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "If `true`, the 'open in new tab/window' icon will be displayed."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target=\"_blank\"."
+            }],
+          "text": ""
         },
         "attribute": "show-icon",
         "reflect": false

package/dist/collection/components/ic-link/ic-link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-link.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.tsx"],"names":[],"mappings":"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~~CACX~~,YAAM,KAAK,EAAC,0BAA0B,EAAC,SAAS,EAAE,SAAS,GAAI,CAChE,CACC,CACL,CACI,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {\n Component,\n Element,\n Prop,\n h,\n Host,\n Listen,\n Method,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\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]: unknown } = {};\n private routerSlot: HTMLElement;\n\n @Element() el: HTMLIcLinkElement;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n\n /\n The URL that the link points to.\n /\n @Prop() href?: string = null;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\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 If ~~`true`,~~ ~~the~~ 'open in new tab/window' icon will be ~~displayed~~.\n /\n @Prop() showIcon?: boolean;\n\n /\n The appearance of the link, e.g. dark, light, or default.\n /\n @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const theme = getThemeFromContext(this.el, newTheme \|\| null);\n\n switch (theme) {\n case IcThemeForegroundEnum.Light:\n this.appearance = IcThemeForegroundEnum.Light;\n break;\n case IcThemeForegroundEnum.Dark:\n this.appearance = IcThemeForegroundEnum.Dark;\n break;\n }\n }\n\n /\n Sets focus on the link.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"a\")) {\n this.el.shadowRoot.querySelector(\"a\").focus();\n }\n }\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"aria-expanded\",\n ]);\n\n this.updateTheme();\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 render() {\n const {\n download,\n href,\n hreflang,\n referrerpolicy,\n rel,\n target,\n showIcon,\n appearance,\n } = this;\n\n return (\n <Host class={{ [\"link\"]: true, [`${appearance}`]: true }}>\n {this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <a\n class={{\n [\"ic-link\"]: href !== null,\n [`${appearance}`]: href !== null,\n }}\n download={download !== false ? download : null}\n href={href}\n hrefLang={hreflang}\n referrerPolicy={referrerpolicy}\n rel={rel}\n target={target}\n tabindex={href !== null ? \"0\" : \"-1\"}\n {...this.inheritedAttributes}\n >\n <slot />\n {showIcon && (\n <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-link.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Prop,\n h,\n Host,\n Listen,\n Method,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\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]: unknown } = {};\n private routerSlot: HTMLElement;\n\n @Element() el: HTMLIcLinkElement;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n\n /\n The URL that the link points to.\n /\n @Prop() href?: string = null;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\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 @deprecated This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target=\"_blank\".\n /\n @Prop() showIcon?: boolean;\n\n /\n The appearance of the link, e.g. dark, light, or default.\n /\n @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const theme = getThemeFromContext(this.el, newTheme \|\| null);\n\n switch (theme) {\n case IcThemeForegroundEnum.Light:\n this.appearance = IcThemeForegroundEnum.Light;\n break;\n case IcThemeForegroundEnum.Dark:\n this.appearance = IcThemeForegroundEnum.Dark;\n break;\n }\n }\n\n /\n Sets focus on the link.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"a\")) {\n this.el.shadowRoot.querySelector(\"a\").focus();\n }\n }\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"aria-expanded\",\n ]);\n\n this.updateTheme();\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 render() {\n const {\n download,\n href,\n hreflang,\n referrerpolicy,\n rel,\n target,\n showIcon,\n appearance,\n } = this;\n\n return (\n <Host class={{ [\"link\"]: true, [`${appearance}`]: true }}>\n {this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <a\n class={{\n [\"ic-link\"]: href !== null,\n [`${appearance}`]: href !== null,\n }}\n download={download !== false ? download : null}\n href={href}\n hrefLang={hreflang}\n referrerPolicy={referrerpolicy}\n rel={rel}\n target={target}\n tabindex={href !== null ? \"0\" : \"-1\"}\n {...this.inheritedAttributes}\n >\n <slot />\n {(showIcon \|\| target === \"_blank\") && (\n <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css CHANGED Viewed

@@ -489,7 +489,7 @@ video {
   --circular-diameter: 1.25rem;
 }
-:host([label]) {
+:host(.label) {
   --margin: 0 0 var(--ic-space-xs) 0;
 }
@@ -544,7 +544,7 @@ video {
   width: var(--linear-width);
 }
-:host([full-width]) {
+:host(.full-width) {
   --linear-border-radius: none;
 }
@@ -602,11 +602,11 @@ video {
   stroke: var(--compact-step-inner-color, var(--inner-color));
 }
-:host([inner-label]) .ic-loading-circular-inner {
+:host(.inner-label) .ic-loading-circular-inner {
   display: grid;
 }
-:host([inner-label]) .ic-loading-circular-svg,
+:host(.inner-label) .ic-loading-circular-svg,
 .inner-text {
   grid-column: 1;
   grid-row: 1;

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js CHANGED Viewed

@@ -9,7 +9,7 @@ export class LoadingIndicator {
     };
     this.getLabel = (labelIndex, setLabel) => {
       return new Promise(() => {
-        setInterval(() => {
+        this.interval = setInterval(() => {
           if (labelIndex < this.labelList.length - 1) {
             labelIndex++;
           }
@@ -156,10 +156,18 @@ export class LoadingIndicator {
       this.setLinearDeterminateWidth();
     }
   }
+  disconnectedCallback() {
+    clearInterval(this.interval);
+  }
   render() {
-    const { appearance, label, description, size } = this;
+    const { appearance, label, description, size, fullWidth, innerLabel } = this;
     const { x, y, r } = this.setCircleXY();
-    return (h(Host, { class: { ["light"]: appearance === IcThemeForegroundEnum.Light } }, h("div", { class: "ic-loading-container" }, h("div", { ref: (el) => (this.outerElement = el), class: this.calcOuterClass(), role: "progressbar", "aria-labelledby": this.label && this.size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": this.progress, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.innerLabel &&
+    return (h(Host, { class: {
+        ["light"]: appearance === IcThemeForegroundEnum.Light,
+        ["label"]: !!label,
+        ["full-width"]: fullWidth,
+        ["inner-label"]: !!innerLabel,
+      } }, h("div", { class: "ic-loading-container" }, h("div", { ref: (el) => (this.outerElement = el), class: this.calcOuterClass(), role: "progressbar", "aria-labelledby": this.label && this.size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": this.progress, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.innerLabel &&
       this.innerLabel !== undefined &&
       this.size === "small" && (h("ic-typography", { variant: "subtitle-small", class: "inner-text" }, this.innerLabel)), this.type === "circular" && (h("svg", { class: "ic-loading-circular-svg", viewBox: `0 0 ${this.circularDiameter || 0} ${this.circularDiameter || 0}` }, h("circle", { cx: `${x}`, cy: `${y}`, r: `${r}` }), h("circle", { cx: `${x}`, cy: `${y}`, r: `${r}` }))))), label && size !== "icon" && (h("ic-typography", { id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", null, this.indicatorLabel))))));
   }

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-loading-indicator.js","sourceRoot":"","sources":["../../../src/components/ic-loading-indicator/ic-loading-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["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 {\n IcThemeForegroundEnum,\n IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n tag: \"ic-loading-indicator\",\n styleUrl: \"ic-loading-indicator.css\",\n shadow: true,\n})\nexport class LoadingIndicator {\n @Element() host: HTMLIcLoadingIndicatorElement;\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\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?: number = 0;\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?: number = 100;\n\n /\n The label to be displayed beneath the loading indicator.\n * Display a changing label by separating multiple messages with forward slashes.\n /\n @Prop() label?: string;\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?: string = \"Loading\";\n\n /\n @internal The step number of a compact step, managed by ic-step.\n /\n @Prop() innerLabel?: number;\n\n /\n The time in milliseconds before the label changes.\n /\n @Prop() labelDuration?: number = 8000;\n\n /\n The size of the loading indicator.\n /\n @Prop({ reflect: true }) size?: IcLoadingSizes = \"default\";\n\n /\n The type of indicator, either linear or circular.\n /\n @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\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?: boolean = false;\n\n /\n The appearance of the loading indicator, e.g. dark or light.\n /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n @State() indicatorLabel: string;\n @State() indeterminate: boolean;\n @State() showSecond: boolean = false;\n @State() circularLineWidth: number;\n @State() circularDiameter: number;\n\n @Watch(\"label\")\n watchPropHandler(): void {\n this.updateLabel();\n }\n\n @Watch(\"progress\")\n watchProgressHandler(): void {\n if (this.type === \"circular\") {\n this.updateCircularProgressMeter();\n }\n }\n\n private outerElement?: HTMLDivElement;\n private innerElement?: HTMLDivElement;\n private labelList: string[];\n private circularMeter: SVGCircleElement;\n\n private updateCircularProgressMeter = () => {\n if (!this.indeterminate) {\n this.circularMeter.style.setProperty(\n \"--progress-value\",\n String(this.progress)\n );\n }\n };\n\n private getLabel = (\n labelIndex: number,\n setLabel: (label: string) => void\n ) => {\n return new Promise(() => {\n setInterval(() => {\n if (labelIndex < this.labelList.length - 1) {\n labelIndex++;\n } else {\n labelIndex = 0;\n }\n setLabel(this.labelList[labelIndex]);\n }, this.labelDuration);\n });\n };\n\n private getLabelVariant = () => {\n let variant: \"label\" \| \"h4\" \| \"h2\" = \"h4\";\n const width = this.outerElement?.offsetWidth;\n if (this.size === \"small\" \|\| (this.type === \"circular\" && width < 60)) {\n variant = \"label\";\n } else if (\n this.size === \"large\" \|\|\n (this.type === \"circular\" && width >= 120)\n ) {\n variant = \"h2\";\n }\n return variant;\n };\n\n // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n private setCircleLineWidth = () => {\n const { offsetWidth: width } = this.outerElement;\n\n const compactStepCircularLineWidth = this.host.classList.contains(\n \"compact-step-progress-indicator\"\n )\n ? 40\n : 0;\n const toastDismissTimerCircularLineWidth = this.host.classList.contains(\n \"toast-dismiss-timer\"\n )\n ? 20\n : 0;\n\n if (\n width \|\|\n compactStepCircularLineWidth \|\|\n toastDismissTimerCircularLineWidth\n ) {\n this.circularLineWidth =\n (compactStepCircularLineWidth \|\|\n toastDismissTimerCircularLineWidth \|\|\n width) 0.1;\n this.circularDiameter =\n compactStepCircularLineWidth \|\|\n toastDismissTimerCircularLineWidth \|\|\n width;\n this.outerElement.style.setProperty(\n \"--circular-line-width\",\n `${this.circularLineWidth}px`\n );\n }\n };\n\n private setLinearDeterminateWidth = () => {\n if (!this.innerElement) return;\n // Ensure progress cannot be out of bounds\n\n const progress = Math.min(this.max, Math.max(this.min, this.progress));\n const proportion = (progress - this.min) / (this.max - this.min);\n this.showSecond = proportion > 0.5;\n if (this.showSecond) {\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 calcOuterClass = (): string => {\n let cls = `ic-loading-${this.type}-outer`;\n cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n return cls;\n };\n\n private updateLabel = (): void => {\n if (this.label !== undefined) {\n this.labelList = this.label.split(\"/\");\n const labelIndex = 0;\n this.indicatorLabel = this.labelList[labelIndex];\n if (this.labelList.length > 1) {\n this.getLabel(labelIndex, (label) => {\n this.indicatorLabel = label;\n });\n }\n }\n };\n\n private setCircleXY = (): IcLoadingCircleXYR => {\n if (this.circularDiameter > 0) {\n const r = this.circularDiameter / 2;\n const x = r;\n const y = r;\n const nextRadius = r - this.circularLineWidth / 2;\n this.setDashSteps(nextRadius);\n\n return { x, y, r: nextRadius };\n }\n return { x: 0, y: 0, r: 0 };\n };\n\n private setDashSteps = (radius: number) => {\n const dashArray = 2 * Math.PI * radius;\n const progress = Math.min(Math.max(this.progress, this.min), this.max);\n const proportion = -1 - (progress - this.min) / (this.max - this.min);\n\n this.circularMeter.style.setProperty(\n \"--stroke-dasharray\",\n `${dashArray}px`\n );\n\n if (!this.indeterminate) {\n this.circularMeter.style.setProperty(\n \"--circular-steps-max\",\n String(this.max)\n );\n this.circularMeter.style.setProperty(\n \"--stroke-dashoffset\",\n `${proportion * dashArray}px`\n );\n }\n };\n\n componentWillLoad(): void {\n this.indeterminate = this.progress === undefined;\n this.updateLabel();\n }\n\n componentDidLoad(): void {\n if (this.type === \"circular\") {\n this.setCircleLineWidth();\n this.circularMeter = this.host.shadowRoot.querySelector(\n \".ic-loading-circular-svg circle:nth-child(2)\"\n );\n this.updateCircularProgressMeter();\n }\n\n if (Number(this.progress) >= 0 && this.type === \"linear\") {\n this.setLinearDeterminateWidth();\n }\n }\n\n componentWillUpdate(): void {\n this.indeterminate = this.progress === undefined;\n }\n\n componentDidUpdate(): void {\n if (Number(this.progress) >= 0 && this.type === \"linear\") {\n this.setLinearDeterminateWidth();\n }\n }\n\n render() {\n const { appearance, label, description, size } = this;\n const { x, y, r } = this.setCircleXY();\n\n return (\n <Host class={{ [\"light\"]: appearance === IcThemeForegroundEnum.Light }}>\n <div class=\"ic-loading-container\">\n <div\n ref={(el) => (this.outerElement = el as HTMLDivElement)}\n class={this.calcOuterClass()}\n role=\"progressbar\"\n aria-labelledby={\n this.label && this.size !== \"icon\" && \"ic-loading-label\"\n }\n aria-label={description}\n aria-valuenow={this.progress}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n >\n <div\n ref={(el) => (this.innerElement = el as HTMLDivElement)}\n class={`ic-loading-${this.type}-inner`}\n >\n {this.innerLabel &&\n this.innerLabel !== undefined &&\n this.size === \"small\" && (\n <ic-typography variant=\"subtitle-small\" class=\"inner-text\">\n {this.innerLabel}\n </ic-typography>\n )}\n {this.type === \"circular\" && (\n <svg\n class=\"ic-loading-circular-svg\"\n viewBox={`0 0 ${this.circularDiameter \|\| 0} ${\n this.circularDiameter \|\| 0\n }`}\n >\n <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></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=\"status\"\n variant={this.getLabelVariant()}\n >\n <p>{this.indicatorLabel}</p>\n </ic-typography>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-loading-indicator.js","sourceRoot":"","sources":["../../../src/components/ic-loading-indicator/ic-loading-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["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 {\n IcThemeForegroundEnum,\n IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n tag: \"ic-loading-indicator\",\n styleUrl: \"ic-loading-indicator.css\",\n shadow: true,\n})\nexport class LoadingIndicator {\n @Element() host: HTMLIcLoadingIndicatorElement;\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\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?: number = 0;\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?: number = 100;\n\n /\n The label to be displayed beneath the loading indicator.\n * Display a changing label by separating multiple messages with forward slashes.\n /\n @Prop() label?: string;\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?: string = \"Loading\";\n\n /\n @internal The step number of a compact step, managed by ic-step.\n /\n @Prop() innerLabel?: number;\n\n /\n The time in milliseconds before the label changes.\n /\n @Prop() labelDuration?: number = 8000;\n\n /\n The size of the loading indicator.\n /\n @Prop({ reflect: true }) size?: IcLoadingSizes = \"default\";\n\n /\n The type of indicator, either linear or circular.\n /\n @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\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?: boolean = false;\n\n /\n The appearance of the loading indicator, e.g. dark or light.\n /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n @State() indicatorLabel: string;\n @State() indeterminate: boolean;\n @State() showSecond: boolean = false;\n @State() circularLineWidth: number;\n @State() circularDiameter: number;\n\n @Watch(\"label\")\n watchPropHandler(): void {\n this.updateLabel();\n }\n\n @Watch(\"progress\")\n watchProgressHandler(): void {\n if (this.type === \"circular\") {\n this.updateCircularProgressMeter();\n }\n }\n\n private outerElement?: HTMLDivElement;\n private innerElement?: HTMLDivElement;\n private labelList: string[];\n private circularMeter: SVGCircleElement;\n private interval: ReturnType<typeof setInterval>;\n\n private updateCircularProgressMeter = () => {\n if (!this.indeterminate) {\n this.circularMeter.style.setProperty(\n \"--progress-value\",\n String(this.progress)\n );\n }\n };\n\n private getLabel = (\n labelIndex: number,\n setLabel: (label: string) => void\n ) => {\n return new Promise(() => {\n this.interval = setInterval(() => {\n if (labelIndex < this.labelList.length - 1) {\n labelIndex++;\n } else {\n labelIndex = 0;\n }\n setLabel(this.labelList[labelIndex]);\n }, this.labelDuration);\n });\n };\n\n private getLabelVariant = () => {\n let variant: \"label\" \| \"h4\" \| \"h2\" = \"h4\";\n const width = this.outerElement?.offsetWidth;\n if (this.size === \"small\" \|\| (this.type === \"circular\" && width < 60)) {\n variant = \"label\";\n } else if (\n this.size === \"large\" \|\|\n (this.type === \"circular\" && width >= 120)\n ) {\n variant = \"h2\";\n }\n return variant;\n };\n\n // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n private setCircleLineWidth = () => {\n const { offsetWidth: width } = this.outerElement;\n\n const compactStepCircularLineWidth = this.host.classList.contains(\n \"compact-step-progress-indicator\"\n )\n ? 40\n : 0;\n const toastDismissTimerCircularLineWidth = this.host.classList.contains(\n \"toast-dismiss-timer\"\n )\n ? 20\n : 0;\n\n if (\n width \|\|\n compactStepCircularLineWidth \|\|\n toastDismissTimerCircularLineWidth\n ) {\n this.circularLineWidth =\n (compactStepCircularLineWidth \|\|\n toastDismissTimerCircularLineWidth \|\|\n width) 0.1;\n this.circularDiameter =\n compactStepCircularLineWidth \|\|\n toastDismissTimerCircularLineWidth \|\|\n width;\n this.outerElement.style.setProperty(\n \"--circular-line-width\",\n `${this.circularLineWidth}px`\n );\n }\n };\n\n private setLinearDeterminateWidth = () => {\n if (!this.innerElement) return;\n // Ensure progress cannot be out of bounds\n\n const progress = Math.min(this.max, Math.max(this.min, this.progress));\n const proportion = (progress - this.min) / (this.max - this.min);\n this.showSecond = proportion > 0.5;\n if (this.showSecond) {\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 calcOuterClass = (): string => {\n let cls = `ic-loading-${this.type}-outer`;\n cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n return cls;\n };\n\n private updateLabel = (): void => {\n if (this.label !== undefined) {\n this.labelList = this.label.split(\"/\");\n const labelIndex = 0;\n this.indicatorLabel = this.labelList[labelIndex];\n if (this.labelList.length > 1) {\n this.getLabel(labelIndex, (label) => {\n this.indicatorLabel = label;\n });\n }\n }\n };\n\n private setCircleXY = (): IcLoadingCircleXYR => {\n if (this.circularDiameter > 0) {\n const r = this.circularDiameter / 2;\n const x = r;\n const y = r;\n const nextRadius = r - this.circularLineWidth / 2;\n this.setDashSteps(nextRadius);\n\n return { x, y, r: nextRadius };\n }\n return { x: 0, y: 0, r: 0 };\n };\n\n private setDashSteps = (radius: number) => {\n const dashArray = 2 * Math.PI * radius;\n const progress = Math.min(Math.max(this.progress, this.min), this.max);\n const proportion = -1 - (progress - this.min) / (this.max - this.min);\n\n this.circularMeter.style.setProperty(\n \"--stroke-dasharray\",\n `${dashArray}px`\n );\n\n if (!this.indeterminate) {\n this.circularMeter.style.setProperty(\n \"--circular-steps-max\",\n String(this.max)\n );\n this.circularMeter.style.setProperty(\n \"--stroke-dashoffset\",\n `${proportion * dashArray}px`\n );\n }\n };\n\n componentWillLoad(): void {\n this.indeterminate = this.progress === undefined;\n this.updateLabel();\n }\n\n componentDidLoad(): void {\n if (this.type === \"circular\") {\n this.setCircleLineWidth();\n this.circularMeter = this.host.shadowRoot.querySelector(\n \".ic-loading-circular-svg circle:nth-child(2)\"\n );\n this.updateCircularProgressMeter();\n }\n\n if (Number(this.progress) >= 0 && this.type === \"linear\") {\n this.setLinearDeterminateWidth();\n }\n }\n\n componentWillUpdate(): void {\n this.indeterminate = this.progress === undefined;\n }\n\n componentDidUpdate(): void {\n if (Number(this.progress) >= 0 && this.type === \"linear\") {\n this.setLinearDeterminateWidth();\n }\n }\n\n disconnectedCallback(): void {\n clearInterval(this.interval);\n }\n render() {\n const { appearance, label, description, size, fullWidth, innerLabel } =\n this;\n const { x, y, r } = this.setCircleXY();\n\n return (\n <Host\n class={{\n [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n [\"label\"]: !!label,\n [\"full-width\"]: fullWidth,\n [\"inner-label\"]: !!innerLabel,\n }}\n >\n <div class=\"ic-loading-container\">\n <div\n ref={(el) => (this.outerElement = el as HTMLDivElement)}\n class={this.calcOuterClass()}\n role=\"progressbar\"\n aria-labelledby={\n this.label && this.size !== \"icon\" && \"ic-loading-label\"\n }\n aria-label={description}\n aria-valuenow={this.progress}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n >\n <div\n ref={(el) => (this.innerElement = el as HTMLDivElement)}\n class={`ic-loading-${this.type}-inner`}\n >\n {this.innerLabel &&\n this.innerLabel !== undefined &&\n this.size === \"small\" && (\n <ic-typography variant=\"subtitle-small\" class=\"inner-text\">\n {this.innerLabel}\n </ic-typography>\n )}\n {this.type === \"circular\" && (\n <svg\n class=\"ic-loading-circular-svg\"\n viewBox={`0 0 ${this.circularDiameter \|\| 0} ${\n this.circularDiameter \|\| 0\n }`}\n >\n <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></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=\"status\"\n variant={this.getLabelVariant()}\n >\n <p>{this.indicatorLabel}</p>\n </ic-typography>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-menu/ic-menu.css CHANGED Viewed

@@ -446,7 +446,7 @@ video {
  */
 @media (prefers-reduced-motion: no-preference) {
-  :host([open]) .menu {
+  :host(.open) .menu {
     transition: max-height var(--ic-transition-duration-slow);
   }
 }
@@ -470,7 +470,7 @@ video {
 .menu {
   text-decoration: none;
   list-style-type: none;
-  border: 0.063rem solid var(--ic-architectural-400);
+  border: var(--ic-space-1px) solid var(--ic-architectural-400);
   border-radius: var(--ic-border-radius);
   background-color: var(--ic-architectural-white);
   visibility: hidden;
@@ -486,12 +486,12 @@ video {
   outline: none;
 }
-:host([open]) {
+:host(.open) {
   max-height: none;
   display: block;
 }
-:host([open]) .menu {
+:host(.open) .menu {
   visibility: visible;
   max-height: 20.125rem;
 }
@@ -508,16 +508,16 @@ video {
   align-items: center;
 }
-:host([small]) .option {
+:host(.small) .option {
   padding: 0.25rem 0.438rem;
 }
 .option:last-child {
-  border-radius: 0 0 0.063rem 0.063rem;
+  border-radius: 0 0 var(--ic-space-1px) var(--ic-space-1px);
 }
 .option:first-child {
-  border-radius: 0.063rem 0.063rem 0 0;
+  border-radius: var(--ic-space-1px) var(--ic-space-1px) 0 0;
 }
 .option:not(.disabled-option):hover {
@@ -556,12 +556,12 @@ video {
   color: var(--ic-color-tertiary-text);
 }
-:host([small]) .option-group-title {
+:host(.small) .option-group-title {
   padding: 0.75rem 0.438rem 0.25rem;
 }
 .last-recommended-option {
-  border-bottom: 0.063rem solid var(--ic-architectural-400);
+  border-bottom: var(--ic-space-1px) solid var(--ic-architectural-400);
 }
 .disabled-option {

package/dist/collection/components/ic-menu/ic-menu.js CHANGED Viewed

@@ -95,7 +95,7 @@ export class Menu {
     };
     this.manSetInputValueKeyboardOpen = (event) => {
       const highlightedOptionIndex = this.options.findIndex((option) => option.value === this.optionHighlighted);
-      const getOptionId = (index) => Array.from(this.host.shadowRoot.querySelectorAll("li"))[index].id;
+      const getOptionId = (index) => Array.from(this.host.querySelectorAll("li"))[index].id;
       switch (event.key) {
         case "ArrowDown":
           this.arrowBehaviour(event);
@@ -269,7 +269,11 @@ export class Menu {
       }
     };
     this.getSortedOptions = (options) => {
-      return options.sort((optionA, optionB) => optionA.recommended && !optionB.recommended ? -1 : 0);
+      let sorted = [];
+      if (options.sort) {
+        sorted = options.sort((optionA, optionB) => optionA.recommended && !optionB.recommended ? -1 : 0);
+      }
+      return sorted;
     };
     this.isManualMode = this.activationType === "manual";
     this.scrollToSelected = (menu) => {
@@ -284,7 +288,7 @@ export class Menu {
       }
     };
     this.loadUngroupedOptions = () => {
-      if (this.options.length > 0) {
+      if (this.options.length > 0 && this.options.map) {
         this.options.map((option) => {
           if (option.children) {
             option.children.map((option) => !option.disabled && this.ungroupedOptions.push(option));
@@ -299,7 +303,7 @@ export class Menu {
     };
     this.setMenuScrollbar = () => {
       let optionsHeight = 0;
-      this.host.shadowRoot
+      this.host
         .querySelectorAll(".option")
         .forEach((option) => (optionsHeight += option.clientHeight));
       if (optionsHeight >= 320) {
@@ -448,7 +452,7 @@ export class Menu {
       else if (optionHighlightedIsSet &&
         !this.focusFromSearchKeypress &&
         !this.preventIncorrectTabOrder) {
-        const highlightedEl = this.host.shadowRoot.querySelector(`li[data-value="${this.optionHighlighted}"]`);
+        const highlightedEl = this.host.querySelector(`li[data-value="${this.optionHighlighted}"]`);
         if (highlightedEl) {
           highlightedEl.focus();
         }
@@ -465,6 +469,8 @@ export class Menu {
     return (h(Host, { class: {
         "full-width": fullWidth,
         "no-focus": ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT",
+        small: this.small,
+        open: this.open,
       } }, options.length !== 0 && (h("ul", { id: menuId, class: "menu", role: "listbox", "aria-label": inputLabel, "aria-activedescendant": value != null && value !== "" ? this.getOptionId(value) : "", tabindex: open && !this.keyboardNav && ((_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.tagName) !== "INPUT"
         ? "0"
         : "-1", ref: (el) => (this.menu = el), onKeyDown: this.handleMenuKeyDown, onKeyUp: this.handleMenuKeyUp, onBlur: this.handleBlur }, this.getSortedOptions(options).map((option, index) => {
@@ -482,7 +488,7 @@ export class Menu {
     })))));
   }
   static get is() { return "ic-menu"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["ic-menu.css"]