npm - @ukic/web-components - Versions diffs - 3.13.0 → 3.15.0 - Mend

@ukic/web-components 3.13.0 → 3.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (510) hide show

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

@@ -519,20 +519,41 @@ ic-typography.heading-bottom-spacing {
   gap: var(--ic-space-md);
   margin-top: var(--ic-space-lg);
   flex-wrap: wrap;
+  --ic-date-input-label: var(--ic-brand-text-color);
+  --ic-time-picker-label: var(--ic-brand-text-color);
+  --ic-checkbox-group-label: var(--ic-brand-text-color);
+  --ic-radio-button-input-field-label: var(--ic-brand-text-color);
+  --ic-search-bar-label: var(--ic-brand-text-color);
+  --ic-select-field-label: var(--ic-brand-text-color);
+  --ic-switch-label: var(--ic-brand-text-color);
+  --ic-text-field-label: var(--ic-brand-text-color);
+  --ic-date-input-subtitle: var(--ic-brand-text-color);
+  --ic-time-picker-subtitle: var(--ic-brand-text-color);
+  --ic-checkbox-group-subtitle: var(--ic-brand-text-color);
+  --ic-radio-button-input-field-subtitle: var(--ic-brand-text-color);
+  --ic-search-bar-subtitle: var(--ic-brand-text-color);
+  --ic-select-input-field-label-subtitle: var(--ic-brand-text-color);
+  --ic-switch-subtitle: var(--ic-brand-text-color);
+  --ic-text-field-subtitle: var(--ic-brand-text-color);
+  --ic-checkbox-text: var(--ic-brand-text-color);
+  --ic-radio-button-text-option: var(--ic-brand-text-color);
 }
 .secondary-subheading {
   margin-top: var(--ic-space-xxs);
 }
-:host([content-aligned="left"]) .left-container,
-:host([content-aligned="left"]) .interaction-container {
+:host(.ic-hero-content-aligned-left) .left-container,
+:host(.ic-hero-content-aligned-left) .interaction-container {
   justify-content: flex-start;
   text-align: left;
 }
-:host([content-aligned="center"]) .left-container,
-:host([content-aligned="center"]) .interaction-container {
+:host(.ic-hero-content-aligned-center) .left-container,
+:host(.ic-hero-content-aligned-center) .interaction-container {
   justify-content: center;
   text-align: center;
 }

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

@@ -31,6 +31,10 @@ export class Hero {
          * The size of the hero component.
          */
         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";
     }
     disconnectedCallback() {
         var _a;
@@ -66,7 +70,7 @@ export class Hero {
         }
     }
     render() {
-        const { aligned, size, heading, subheading, secondaryHeading, secondarySubheading, foregroundColor, backgroundImage, scrollFactor, } = this;
+        const { aligned, size, heading, subheading, secondaryHeading, secondarySubheading, foregroundColor, backgroundImage, scrollFactor, contentAligned, theme, } = this;
         let style = {};
         if (isPropDefined(backgroundImage)) {
             style = {
@@ -74,18 +78,20 @@ export class Hero {
                 "background-position": scrollFactor,
             };
         }
-        return (h(Host, { key: 'aee3d892e9e8aeda5b348da837eee5c8c1e8735a', class: {
+        return (h(Host, { key: '34d3c839d5827d5dadfdc1a160c4b6b2ae965cdf', class: {
                 [`ic-hero-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
                 ["has-background-image"]: backgroundImage !== undefined,
                 ["has-right-content"]: this.rightContent,
                 ["ic-hero-small"]: size === "small",
                 ["secondary-heading"]: !!secondaryHeading,
-            }, style: style }, h("ic-section-container", { key: '6f588f23372a118fbf316d0c5202d17af21f4e43', aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { key: '1c34b2d8b07a045c1c801d99b4e1d707e1a99e88', class: {
+                [`ic-hero-content-aligned-${contentAligned}`]: contentAligned !== undefined,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, style: style }, h("ic-section-container", { key: '92c885c6bb0532ed6d5adbea3927ff56c88ccf00', aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { key: '808e287fe214793b21c2da1d4db8410a0fecdcb9', class: {
                 ["left-container"]: true,
                 ["left-container-full-width"]: this.leftContentFullWidth,
-            } }, h("div", { key: '72acdd6b683c699d5e799aa83546bde5b52962db', class: "heading" }, h("slot", { key: '5915be3f3cd2a5329ba8beb46bc0b704693a7fec', name: "heading" }, h("ic-typography", { key: 'f9b16a498674c7a29e669be2b63ae3d730cbacba', variant: size === "small" ? "h2" : "h1", class: {
+            } }, h("div", { key: '09267f66de926f237092d55372f34ee75b3b1bb5', class: "heading" }, h("slot", { key: 'b30e4be509093aa6f7b2dbe906eb63c8ed1f70da', name: "heading" }, h("ic-typography", { key: 'a59edf905e413ecd324b09807acb4efc7730b1ef', variant: size === "small" ? "h2" : "h1", class: {
                 ["heading-bottom-spacing"]: size !== "small",
-            } }, h("h2", { key: '3ed6060a057a88fd332f8ef6b1d914702e6d3f40' }, heading)))), h("div", { key: 'a2ed35fcf9ff99f56cf80264a6374c2dc3cbfcbe', class: "subheading" }, h("slot", { key: '58027e2b2eeb3c49bd5322019435cb9de18cb77c', name: "subheading" }, h("ic-typography", { key: 'b04e16640e640e623142b2f5555e9a644c1a3929', variant: "body" }, subheading))), h("div", { key: '6d87fcd8ffd64077e483471c7d28ab41c7004b98', class: "interaction-container" }, h("slot", { key: 'e2421373570e5cf84e093971d70a75c542a0a0ba', name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (h("div", { key: 'ef2bdb160da3c3558f4764b85cebb01ebdfc086f', class: "right-container" }, h("slot", { key: 'dc5991ad4cbc856390335cece65e15400d3752ce', name: "secondary" }, secondaryHeading && (h("div", { key: '059273f8fc66599aa67a11d0bfeaab113a7fd21d', class: "secondary-container" }, h("div", { key: '966adc1a6f9c930c52766dbc2f884691a60f58ac', class: "secondary-heading" }, h("ic-typography", { key: '80fd633680cc4888363567e532db41806be62c2e', variant: "h4" }, h("h3", { key: 'a72f5272444bbfc0941fc552a47d2e8863b8e256' }, secondaryHeading))), h("div", { key: '60fac396776b1eaf7950675f880a1338409f0dbd', class: "secondary-subheading" }, h("ic-typography", { key: '7178ff3785d3d7d5dd9b737e618a720ce64de9c8', variant: "subtitle-small" }, secondarySubheading))))))))));
+            } }, h("h2", { key: 'f3d705dcea394926d050c5e9a518aa6d23e61c74' }, heading)))), h("div", { key: 'e67892b909d8d59b9714c9c39b07f5fbaa47cd5f', class: "subheading" }, h("slot", { key: '94601527aad82e6da4a1723f435b26221f562d3c', name: "subheading" }, h("ic-typography", { key: 'd10d05ad2ecbc02f3cc9612c5e5cd8507c95e7ba', variant: "body" }, subheading))), h("div", { key: '12ea9178058e547b57fd1ca454a00a9bdf542f41', class: "interaction-container" }, h("slot", { key: '8b3e37943fb688843dfcc6f28f7aab2d42c66454', name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (h("div", { key: '2783784a47d8a7667959b6bc0a102e0536050cab', class: "right-container" }, h("slot", { key: 'ad168f0963f7950cf70b8a77abd4390a0585ddff', name: "secondary" }, secondaryHeading && (h("div", { key: 'faa3a3a6f23962c99eab8d1e81e2fa5d96b8f6c2', class: "secondary-container" }, h("div", { key: '147945f65e18d6d3ade2342057e1cdaf68faca50', class: "secondary-heading" }, h("ic-typography", { key: '78a22d379cb17ec183b4f320f652696cf46155b4', variant: "h4" }, h("h3", { key: '87619d7363588a0887f4c704011d824d51f3caa2' }, secondaryHeading))), h("div", { key: '0cc920336ef6d241361f095317391c296ce81e81', class: "secondary-subheading" }, h("ic-typography", { key: '19db9e9c8c392b26e698427048de8ad1bf2b7a5a', variant: "subtitle-small" }, secondarySubheading))))))))));
     }
     static get is() { return "ic-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -293,6 +299,32 @@ export class Hero {
                 "setter": false,
                 "attribute": "subheading",
                 "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-hero.js","sourceRoot":"","sources":["../../../src/components/ic-hero/ic-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcAlignment,\n IcSizesNoLarge,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport {\n slotHasContent,\n getBrandForegroundAppearance,\n onComponentRequiredPropUndefined,\n isPropDefined,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/*\n @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n /\n\n@Component({\n tag: \"ic-hero\",\n styleUrl: \"ic-hero.css\",\n shadow: true,\n})\nexport class Hero {\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcHeroElement;\n\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() rightContent: boolean = false;\n // set by above state\n @State() leftContentFullWidth: boolean =\n !this.rightContent && this.secondaryHeading === undefined;\n @State() scrollFactor: string = \"right -100px\";\n\n /\n The alignment of the hero.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n\n /\n The optional background image.\n /\n @Prop() backgroundImage?: string;\n\n /\n The alignment of the hero content.\n /\n @Prop() contentAligned?: IcHeroContentAlignments = \"left\";\n\n /\n If `true`, the background image (if set) will not scroll using a parallax effect.\n /\n @Prop() disableBackgroundParallax?: boolean = false;\n\n /\n The heading of the hero. An <h2> level heading.\n /\n @Prop() heading?: string;\n\n /\n The optional secondary heading, an <h3> level heading. Replaced by slotted right content.\n /\n @Prop() secondaryHeading?: string;\n\n /\n The optional secondary subheading, replaced by slotted right content.\n /\n @Prop() secondarySubheading?: string;\n\n /\n The size of the hero component.\n /\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /\n The description for the hero.\n /\n @Prop() subheading?: string;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Hero\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"secondary\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n componentWillRender(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n @Listen(\"scroll\", { target: \"document\" })\n doScroll(): void {\n if (this.disableBackgroundParallax) {\n return;\n }\n\n const scrolltotop = document.scrollingElement?.scrollTop;\n if (scrolltotop) {\n const factor = 0.4;\n const y = -100 + scrolltotop factor;\n this.scrollFactor = \"right \" + y + \"px\";\n }\n }\n\n render() {\n const {\n aligned,\n size,\n heading,\n subheading,\n secondaryHeading,\n secondarySubheading,\n foregroundColor,\n backgroundImage,\n scrollFactor,\n } = this;\n\n let style = {};\n\n if (isPropDefined(backgroundImage)) {\n style = {\n \"background-image\": \"url(\" + backgroundImage + \")\",\n \"background-position\": scrollFactor,\n };\n }\n\n return (\n <Host\n class={{\n [`ic-hero-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [\"has-background-image\"]: backgroundImage !== undefined,\n [\"has-right-content\"]: this.rightContent,\n [\"ic-hero-small\"]: size === \"small\",\n [\"secondary-heading\"]: !!secondaryHeading,\n }}\n style={style}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight\n class=\"section-container\"\n >\n <div\n class={{\n [\"left-container\"]: true,\n [\"left-container-full-width\"]: this.leftContentFullWidth,\n }}\n >\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography\n variant={size === \"small\" ? \"h2\" : \"h1\"}\n class={{\n [\"heading-bottom-spacing\"]: size !== \"small\",\n }}\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n </div>\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n <div class=\"interaction-container\">\n <slot name=\"interaction\"></slot>\n </div>\n </div>\n {(isPropDefined(secondaryHeading) \|\| this.rightContent) && (\n <div class=\"right-container\">\n <slot name=\"secondary\">\n {secondaryHeading && (\n <div class=\"secondary-container\">\n <div class=\"secondary-heading\">\n <ic-typography variant=\"h4\">\n <h3>{secondaryHeading}</h3>\n </ic-typography>\n </div>\n <div class=\"secondary-subheading\">\n <ic-typography variant=\"subtitle-small\">\n {secondarySubheading}\n </ic-typography>\n </div>\n </div>\n )}\n </slot>\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-hero.js","sourceRoot":"","sources":["../../../src/components/ic-hero/ic-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcAlignment,\n IcSizesNoLarge,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n slotHasContent,\n getBrandForegroundAppearance,\n onComponentRequiredPropUndefined,\n isPropDefined,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/*\n @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n /\n\n@Component({\n tag: \"ic-hero\",\n styleUrl: \"ic-hero.css\",\n shadow: true,\n})\nexport class Hero {\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcHeroElement;\n\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() rightContent: boolean = false;\n // set by above state\n @State() leftContentFullWidth: boolean =\n !this.rightContent && this.secondaryHeading === undefined;\n @State() scrollFactor: string = \"right -100px\";\n\n /\n The alignment of the hero.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n\n /\n The optional background image.\n /\n @Prop() backgroundImage?: string;\n\n /\n The alignment of the hero content.\n /\n @Prop() contentAligned?: IcHeroContentAlignments = \"left\";\n\n /\n If `true`, the background image (if set) will not scroll using a parallax effect.\n /\n @Prop() disableBackgroundParallax?: boolean = false;\n\n /\n The heading of the hero. An <h2> level heading.\n /\n @Prop() heading?: string;\n\n /\n The optional secondary heading, an <h3> level heading. Replaced by slotted right content.\n /\n @Prop() secondaryHeading?: string;\n\n /\n The optional secondary subheading, replaced by slotted right content.\n /\n @Prop() secondarySubheading?: string;\n\n /\n The size of the hero component.\n /\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /\n The description for the hero.\n /\n @Prop() subheading?: string;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Hero\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"secondary\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n componentWillRender(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n @Listen(\"scroll\", { target: \"document\" })\n doScroll(): void {\n if (this.disableBackgroundParallax) {\n return;\n }\n\n const scrolltotop = document.scrollingElement?.scrollTop;\n if (scrolltotop) {\n const factor = 0.4;\n const y = -100 + scrolltotop factor;\n this.scrollFactor = \"right \" + y + \"px\";\n }\n }\n\n render() {\n const {\n aligned,\n size,\n heading,\n subheading,\n secondaryHeading,\n secondarySubheading,\n foregroundColor,\n backgroundImage,\n scrollFactor,\n contentAligned,\n theme,\n } = this;\n\n let style = {};\n\n if (isPropDefined(backgroundImage)) {\n style = {\n \"background-image\": \"url(\" + backgroundImage + \")\",\n \"background-position\": scrollFactor,\n };\n }\n\n return (\n <Host\n class={{\n [`ic-hero-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [\"has-background-image\"]: backgroundImage !== undefined,\n [\"has-right-content\"]: this.rightContent,\n [\"ic-hero-small\"]: size === \"small\",\n [\"secondary-heading\"]: !!secondaryHeading,\n [`ic-hero-content-aligned-${contentAligned}`]:\n contentAligned !== undefined,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n style={style}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight\n class=\"section-container\"\n >\n <div\n class={{\n [\"left-container\"]: true,\n [\"left-container-full-width\"]: this.leftContentFullWidth,\n }}\n >\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography\n variant={size === \"small\" ? \"h2\" : \"h1\"}\n class={{\n [\"heading-bottom-spacing\"]: size !== \"small\",\n }}\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n </div>\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n <div class=\"interaction-container\">\n <slot name=\"interaction\"></slot>\n </div>\n </div>\n {(isPropDefined(secondaryHeading) \|\| this.rightContent) && (\n <div class=\"right-container\">\n <slot name=\"secondary\">\n {secondaryHeading && (\n <div class=\"secondary-container\">\n <div class=\"secondary-heading\">\n <ic-typography variant=\"h4\">\n <h3>{secondaryHeading}</h3>\n </ic-typography>\n </div>\n <div class=\"secondary-subheading\">\n <ic-typography variant=\"subtitle-small\">\n {secondarySubheading}\n </ic-typography>\n </div>\n </div>\n )}\n </slot>\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-hero/ic-hero.stories.js CHANGED Viewed

@@ -19,6 +19,7 @@ const defaultArgs = {
   subheading:
     "Hero description. This is a Hero component, it should be used as a page heading.",
   showSecondary: false,
+  theme: "inherit",
 };
 export const Playground = {
@@ -32,6 +33,7 @@ export const Playground = {
     secondary-subheading=${args.secondarySubheading}
     size=${args.size}
     subheading=${args.subheading}
+    theme=${args.theme}
   >
     <ic-button variant="primary" slot="interaction"> Button </ic-button>
     <ic-button variant="secondary" slot="interaction"> Button </ic-button>
@@ -43,6 +45,12 @@ export const Playground = {
         slot="secondary"
       />
     `}
+    <ic-text-field
+      slot="interaction"
+      label="Input"
+      helper-text="This is an input"
+      placeholder="Please enter…"
+    />
   </ic-hero>`,
   args: defaultArgs,
@@ -76,6 +84,13 @@ export const Playground = {
         type: "select",
       },
     },
+    theme: {
+      options: ["inherit", "light", "dark"],
+      control: {
+        type: "inline-radio",
+      },
+    },
   },
 };

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

@@ -155,22 +155,22 @@ export class HorizontalScroll {
     }
     render() {
         const { firstItemVisible, lastItemVisible, itemOverflow } = this;
-        return (h(Host, { key: '70a4e7c8a5e6e69d64d78375798498b7807ae16a', class: {
+        return (h(Host, { key: '5c313665e71e0abc91a19f204ccf08d7b017f46b', class: {
                 ["ic-horizontal-scroll-visible"]: itemOverflow,
                 ["ic-horizontal-scroll-dark"]: this.appearance === IcBrandForegroundEnum.Dark,
                 ["ic-horizontal-scroll-light"]: this.appearance === IcBrandForegroundEnum.Light,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("div", { key: '586bf3284c05ffad1ebd3c61e44e992aa9d71c25', "aria-hidden": "true", class: {
+            } }, h("div", { key: '7a65d56af26a6bfe660c3e923beaf7b512f77de8', "aria-hidden": "true", class: {
                 ["scroll-container-left"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: firstItemVisible,
-            }, role: "tab" }, h("ic-button", { key: '0125b0d48b7ae82fb580bc890450d1fb14f71a5f', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("ic-button", { key: '0203d6acdde7444d03038b3ec86f3e318615030d', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
-                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { key: '363c0c48d85e455684573a12554afcf765c4ae95', class: "scroll-splitter-left" })), h("slot", { key: 'b12cc6de29b6345e3ef5ece250f4998252d9a54b' }), h("div", { key: '47d5456630571ac7e877f791401129ec6524d52b', "aria-hidden": "true", class: {
+                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { key: 'dffb5fee1c17005205216d0901141317e2dc4aa6', class: "scroll-splitter-left" })), h("slot", { key: 'f637c15f3020e1572a61179c2132dece11d0699a' }), h("div", { key: 'c563d5ca6d07a66f2111bea5aebe7d36ae481770', "aria-hidden": "true", class: {
                 ["scroll-container-right"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: lastItemVisible,
-            }, role: "tab" }, h("span", { key: '13b35c95c35dc6a44464996880c7f3a3fc671b42', class: "scroll-splitter-right" }), h("ic-button", { key: '95434e1cf988eaa4049bcb6926d515182a7f7072', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("span", { key: 'd8afe9aaf2304d13909815aeb8e60ac4f8952f7f', class: "scroll-splitter-right" }), h("ic-button", { key: '4f3be747e736a50705793742b0a1e9fab44d56db', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
                 : "light", monochrome: this.monochrome, innerHTML: RightArrow, disabled: lastItemVisible, tabindex: "-1", onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler }))));
     }

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

@@ -48,15 +48,15 @@ export class InputComponentContainer {
     }
     render() {
         const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;
-        return (h(Host, { key: '82e6604ab956d7648209ae1214797d48ce4a169c', class: {
+        return (h(Host, { key: 'c33ebfd9dd18101fb9161259538e8e0046f77a3d', class: {
                 [`ic-input-component-container-${size}`]: true,
                 [`ic-input-component-container-${validationStatus}`]: validationStatus !== "" && !disabled && !readonly,
                 "ic-input-component-container-disabled": !!disabled,
                 "ic-input-component-container-readonly": !!readonly,
                 "ic-input-component-container-multiline": !!multiLine,
                 "ic-input-component-container-full-width": !!fullWidth,
-            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: '0fd329a8f1397ab2b6f7b4f3fd62d180003ef7e4', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: '3af5861c01b3e6338e20288c0577d4554d9357e6', class: "icon-container" }, h("slot", { key: '25bd5414058904fb5ed05f0e4e7fda6fc4966fbb', name: "left-icon" }))), h("slot", { key: '2a63ea395d97ca2f3121f30fae1a3ac8bdfd7599' }), validationInline &&
-            validationStatus === IcInformationStatus.Success && (h("span", { key: 'ac962172c01b7cc0abf776b7a5ff0e58cd996ad7', class: "inline-success", innerHTML: successIcon })))));
+            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: 'a70f27a3235ac0edb9d9c5a18983ae3c02de2a48', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: 'aa0b233280382bd0e95a8ff932bf60a63603b7bf', class: "icon-container" }, h("slot", { key: 'ceb8ec9b420073ac2ecd5d6793ad4342ab9ebbdd', name: "left-icon" }))), h("slot", { key: '1850c6ed04510e678600c653a36e2114f982e561' }), validationInline &&
+            validationStatus === IcInformationStatus.Success && (h("span", { key: '58d228c595577c1cc9a0fe2b10538cc3efff53ab', class: "inline-success", innerHTML: successIcon })))));
     }
     static get is() { return "ic-input-component-container"; }
     static get originalStyleUrls() {

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

@@ -11,11 +11,11 @@ export class InputContainer {
         this.readonly = false;
     }
     render() {
-        return (h(Host, { key: 'd7a6f03073013efef8534f6305e64f66d2b58b91' }, h("div", { key: 'f93b5ad4fc27eed8fabf3fd83de73906b4592ca4', class: {
+        return (h(Host, { key: '32ae22db5e182cc2c092c8f48e61d42a318284a0' }, h("div", { key: 'bae9ef74f7f92004ec99c387a213822315c505ba', class: {
                 ["component-container"]: true,
                 ["disabled"]: !!this.disabled,
                 ["readonly"]: !!this.readonly,
-            } }, h("slot", { key: '59074f71d915aebc3205308c0406b4f6ab2a73ae' }))));
+            } }, h("slot", { key: 'acca571eaa0d8f19b0e3379d2592409aacf9dd95' }))));
     }
     static get is() { return "ic-input-container"; }
     static get originalStyleUrls() {

package/dist/collection/components/ic-input-label/ic-input-label.js CHANGED Viewed

@@ -63,11 +63,11 @@ export class InputLabel {
             "helpertext-readonly": readonly,
         };
         const helperTextSlot = this.el.querySelector("slot[name='helper-text']");
-        return (h(Host, { key: 'b4ae951684bc9fbacd077fd7586a60a680cb1114', class: {
+        return (h(Host, { key: 'da58fe3cac026661d1c624c69c56c6e64ff3c07a', class: {
                 "ic-input-label-disabled": !!disabled,
                 "ic-input-label-readonly": readonly,
                 "with-helper": this.isHelperTextSlotUsed(helperTextSlot) || helperText !== "",
-            } }, !hideLabel && (h("ic-typography", { key: 'dd5d6d73707aadd9cc59225224fffadefecda9c7', variant: "label", class: {
+            } }, !hideLabel && (h("ic-typography", { key: 'bb221e5f51681a0caa721c66f03fd475e4e08749', variant: "label", class: {
                 "readonly-label": readonly,
                 "error-label": status === "error" && !(readonly || disabled),
             } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), this.isHelperTextSlotUsed(helperTextSlot) ? (h("span", { id: helperTextId, class: helperTextClass }, h("slot", { name: "helper-text" }))) : (helperText !== "" && (h("ic-typography", { variant: "caption", class: helperTextClass }, h("span", { id: helperTextId }, helperText))))));

package/dist/collection/components/ic-input-validation/ic-input-validation.js CHANGED Viewed

@@ -43,14 +43,14 @@ export class InputValidation {
     render() {
         const { ariaLiveMode, fullWidth, status, message } = this;
         const displayIcon = status !== "" ? ICON[status] : "";
-        return (h(Host, { key: 'f1ba7e992a65cbd63d86411844668a0db4944cf2', class: {
+        return (h(Host, { key: '0513b4d21426f48a3751fbb4f16786d8cdde6f30', class: {
                 [`ic-input-validation-${status}`]: status !== "",
                 "ic-input-validation-full-width": !!fullWidth,
                 "ic-input-validation-with-status": status !== "",
-            } }, displayIcon !== "" && (h("span", { key: '43bf05c319e9f4cdb7f6e5affd403d745b7dac00', class: {
+            } }, displayIcon !== "" && (h("span", { key: '3e6de247d788f9836f338e109d7be5914fa2f320', class: {
                 "status-icon": true,
                 [`icon-${status}`]: true,
-            }, innerHTML: displayIcon })), h("ic-typography", { key: '8d0f570e79158d1add1410653c8bbdb5e052aaa3', variant: "caption", class: "statustext" }, h("span", { key: 'c363e60a30ef571a63779ed77a7e4e8358444d5f', id: this.for && getInputValidationTextID(this.for) }, message), h("span", { key: '53959e2fb2d6b51aaa5eca1f9526f0a6e55b5bea', ref: (el) => (this.messageEl = el), class: "sr-only", "aria-live": ariaLiveMode })), h("slot", { key: '861c3d827e89d6e4c917cb6d584e7d3ec6a5c27a', name: "validation-message-adornment" })));
+            }, innerHTML: displayIcon })), h("ic-typography", { key: '5ee4e673c1f2934d74eafbc08241cdfae1aa5f9f', variant: "caption", class: "statustext" }, h("span", { key: '850149ffb8c4cdab21ab0c05a8787747e399ca41', id: this.for && getInputValidationTextID(this.for) }, message), h("span", { key: 'a26f5aa58e81cf3e9d982d86b75b3ab7e14897ad', ref: (el) => (this.messageEl = el), class: "sr-only", "aria-live": ariaLiveMode })), h("slot", { key: '4dba13235c6ec27d634b0dd38523963798676b36', name: "validation-message-adornment" })));
     }
     static get is() { return "ic-input-validation"; }
     static get originalStyleUrls() {

package/dist/collection/components/ic-layout-grid/ic-layout-grid.js CHANGED Viewed

@@ -124,10 +124,10 @@ export class LayoutGrid {
     }
     render() {
         const { aligned, fullHeight } = this;
-        return (h(Host, { key: 'c7903c71e7a267ce14d624e371128b66b990319e', class: {
+        return (h(Host, { key: 'fa862e7110426cb032982c8743b7ad3024f06f9a', class: {
                 [`ic-layout-grid-aligned-${aligned}`]: true,
                 ["ic-layout-grid-no-vertical-padding"]: !!fullHeight,
-            } }, h("slot", { key: '7d501b244c1e6631ac1f712707b816be89014298' })));
+            } }, h("slot", { key: '716c4137c338797b4ce17c9dd946f8902064606f' })));
     }
     static get is() { return "ic-layout-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-layout-grid-item/ic-layout-grid-item.js CHANGED Viewed

@@ -42,9 +42,9 @@ export class LayoutGridItem {
     }
     render() {
         const { hideInMobileMode } = this;
-        return (h(Host, { key: 'a6e63c7a2e569fefef8bd1f801719ec0cfc999f2', class: {
+        return (h(Host, { key: '9e96a528f70c414a5728a7fd0773d0adb4063020', class: {
                 "ic-layout-grid-hide-in-mobile": !!hideInMobileMode,
-            } }, h("slot", { key: '976299cc75e2a275ce07dc9bb4ccde082c559175' })));
+            } }, h("slot", { key: '43b2b4891f8b1241fad2fb707016cd927632bdfd' })));
     }
     static get is() { return "ic-layout-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,7 +91,7 @@ export class Link {
     }
     render() {
         const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
-        return (h(Host, { key: '17cbca6abdc9b48879a9d307c5bb73fada03aa2d', class: {
+        return (h(Host, { key: '1d3ba1effcfab3255ea567c475e2252bd17de507', class: {
                 ["ic-link"]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-link-monochrome"]: !!monochrome,

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

@@ -469,20 +469,20 @@ video {
   align-items: center;
 }
-:host([size="small"]) {
+:host(.ic-loading-indicator-size-small) {
   --circular-diameter: 2.5rem;
   --linear-line-height: var(--ic-space-xxs);
 }
-:host([size="medium"]) {
+:host(.ic-loading-indicator-size-medium) {
   --circular-diameter: 5rem;
 }
-:host([size="large"]) {
+:host(.ic-loading-indicator-size-large) {
   --circular-diameter: 7.5rem;
 }
-:host([size="icon"]) {
+:host(.ic-loading-indicator-size-icon) {
   display: inline-block;
   --margin: var(--ic-space-xxxs);

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

@@ -179,23 +179,24 @@ export class LoadingIndicator {
     }
     render() {
         const { circularDiameter, circularDimensions: { x, y, r, dashArray, dashOffset }, description, fullWidth, indicatorLabel, innerLabel, label, max, min, monochrome, progress, size, theme, type, } = this;
-        return (h(Host, { key: '8e5015de29e0c003ae813d95e215031276669fed', class: {
+        return (h(Host, { key: '8f3a698fc177a9ff0c42efa2cb0d6fde7d09f2cb', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-loading-indicator-full-width": fullWidth,
                 "ic-loading-indicator-label": !!label,
                 "ic-loading-indicator-monochrome": monochrome,
-            } }, h("div", { key: 'fdd7384e07827cfc6f32cd7f7fde71807a441e7d', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: 'dd4b7dae54199c8313a6bd9c5a2133b11de29b57', ref: (el) => (this.outerElement = el), class: {
+                [`ic-loading-indicator-size-${size}`]: true,
+            } }, h("div", { key: '947ed45a2a33bb3efc98be184d144c7022a99341', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: '07cfd1daad6714aa3f0a9aa6639c62f07cd51319', ref: (el) => (this.outerElement = el), class: {
                 [`ic-loading-${type}-outer`]: true,
                 [progress === undefined ? "indeterminate" : "determinate"]: true,
-            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: 'ba4e9f7ec6e1cdafdd844bb2e357822cf316128c', ref: (el) => (this.innerElement = el), class: {
+            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '784dc31419e98ce922fc71941f22a063c26ab249', ref: (el) => (this.innerElement = el), class: {
                 [`ic-loading-${type}-inner`]: true,
                 "inner-label": !!innerLabel,
-            } }, innerLabel && size === "small" && (h("ic-typography", { key: '096a8f75dcbdaec7c0d2f71dcd447e08e279a41d', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (h("svg", { key: 'c048f6de73691df17ec79f75860d177e9c83bcc5', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: '5c52a4f617319167ab495785c736601f9d12bf08', cx: x, cy: y, r: r }), h("circle", { key: '7839b8b36e4306e224639f8a347ccde726aaa09c', style: {
+            } }, innerLabel && size === "small" && (h("ic-typography", { key: '8f55830d3c41595cecfdfdb3630af8ad2b93fc1e', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (h("svg", { key: '5505faa38e257e69a988217685c9a466f622489b', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: 'c2f46bcb23d2af900f8b6dbfabb317172b3fdb22', cx: x, cy: y, r: r }), h("circle", { key: 'f0d9f105bda3e40c78cba1a3a2986b31ccc0327a', 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: '868967e2a21589616e31a9b761849a69b458a2c1', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: '439329efda39e3ae81e56f494c8cbe5000265aa9' }, indicatorLabel))))));
+            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: '15d34b2712a2961d2e1b8a63ab6f65a82fa68d67', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: '25130595c4008fdd8acd8c47a6729d3aef5cf70c' }, indicatorLabel))))));
     }
     static get is() { return "ic-loading-indicator"; }
     static get encapsulation() { return "shadow"; }

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 { 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\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.type === \"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\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.\n /\n @Prop({ reflect: true }) type: IcLoadingTypes = \"circular\";\n @Watch(\"type\")\n setIndicatorDimensions(): void {\n if (this.type === \"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.type === \"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 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 label,\n max,\n min,\n monochrome,\n progress,\n size,\n theme,\n type,\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 }}\n >\n <div class=\"ic-loading-container\" part=\"ic-loading-container\">\n <div\n ref={(el) => (this.outerElement = el)}\n class={{\n [`ic-loading-${type}-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-${type}-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 {type === \"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"]}
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 { 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\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.type === \"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\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.\n /\n @Prop({ reflect: true }) type: IcLoadingTypes = \"circular\";\n @Watch(\"type\")\n setIndicatorDimensions(): void {\n if (this.type === \"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.type === \"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 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 label,\n max,\n min,\n monochrome,\n progress,\n size,\n theme,\n type,\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-${type}-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-${type}-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 {type === \"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"]}

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

@@ -916,7 +916,7 @@ export class Menu {
         const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, multiSelect, } = this;
         const selectAllButtonText = `${(value === null || value === void 0 ? void 0 : value.length) === this.ungroupedOptions.length ? "Clear" : "Select"} all`;
         const hasNoResults = this.host.classList.contains("no-results");
-        return (h(Host, { key: '3e49d54ba714dfa55e9695bd24fa5d2b87077232', class: {
+        return (h(Host, { key: '8dad972db607187821f9063a35f75768df5adcc1', class: {
                 "ic-menu-full-width": !!fullWidth,
                 "ic-menu-no-focus": ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" &&
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) !== SEARCH_BAR_TAG) ||
@@ -925,7 +925,7 @@ export class Menu {
                 [`ic-menu-${size}`]: true,
                 "ic-menu-open": open && options.length !== 0,
                 "ic-menu-multiple": multiSelect,
-            } }, options.length !== 0 && (h("ul", { key: '23fc717879b9c8bac93158984ccd81f0b0227ab9', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", tabindex: open &&
+            } }, options.length !== 0 && (h("ul", { key: 'bbdb630e801155ddb22240206eac4f919807ec2d', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", tabindex: open &&
                 !keyboardNav &&
                 ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) !== "INPUT" ||
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) === SEARCH_BAR_TAG)
@@ -953,7 +953,7 @@ export class Menu {
             multiSelect &&
             !isLoading &&
             !hasTimedOut &&
-            !hasNoResults && (h("div", { key: '997b84a875c8ab4cc763b6047ece029a51e03165', class: "option-bar" }, h("ic-typography", { key: 'ff3ef41753cebd248a6d59169ef68ae12f0563ca' }, h("p", { key: '3fe3ae4ca8f766216e5258eea8dbb71d1efd2169' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: 'f269fc5554327fd11a8093857f0f9208a3b1ca62', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
+            !hasNoResults && (h("div", { key: '2806fdd383f3450d651e681a0156c47cd98689c5', class: "option-bar" }, h("ic-typography", { key: 'dd2e0b74622eb359e4e53cc5c7b0f031ef577ca2' }, h("p", { key: 'f6132822d0bf66e869b4c2bceba7dfcf93e697be' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: 'e233f3ac017ce08d46d1973406a4bb99bcfa2cf6', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
     }
     static get is() { return "ic-menu"; }
     static get encapsulation() { return "scoped"; }

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

@@ -3,7 +3,7 @@ import { isPropDefined } from "../../utils/helpers";
 export class MenuGroup {
     render() {
         const parentMenu = this.el.closest("ic-popover-menu");
-        return (h(Host, { key: '0671b22234980b7b332889e7d643b8f5e42841c1', role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { key: '444d817f6505c858593b136e7c2040cf40502f56', variant: "subtitle-small" }, this.label)), h("span", { key: '4b79a7b6f40da4a1eab4121f9aff972776fb52f9', class: "menu-items-wrapper" }, h("slot", { key: '99160dcb17e825ac4a44ca8348dc0a1452b5f0e3' })), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", { key: '3591bc3153bcefa6ba7917332e0a106144b3ea74' }))));
+        return (h(Host, { key: '384be493b4b4148e4a09f0395bb1db6b651bfc2f', role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { key: '46982951ac8573a5ee8c5733043e109f268859f8', variant: "subtitle-small" }, this.label)), h("span", { key: 'd5a5fe976b9f88e61df589c1ddc105c31b8639e2', class: "menu-items-wrapper" }, h("slot", { key: '3b6cab53fde94c5a9cbc0a6a323c0aff28975a1c' })), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", { key: '60412dd9914569ad72a6160787b48d8b3239cebb' }))));
     }
     static get is() { return "ic-menu-group"; }
     static get encapsulation() { return "shadow"; }