npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.6 → 3.0.0-alpha.8 - Mend

@ukic/web-components 3.0.0-alpha.6 → 3.0.0-alpha.8

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

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

@@ -1,6 +1,6 @@
-import { Host, h, forceUpdate, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { IcBrandForegroundEnum, } from "../../utils/types";
-import { slotHasContent, getBrandForegroundAppearance, onComponentRequiredPropUndefined, isPropDefined, isSlotUsed, checkSlotInChildMutations, } from "../../utils/helpers";
+import { slotHasContent, getBrandForegroundAppearance, onComponentRequiredPropUndefined, isPropDefined, isSlotUsed, renderDynamicChildSlots, } from "../../utils/helpers";
 /**
  * @slot heading - Content will be rendered in the title area, in place of the heading.
  * @slot subheading - Content will be rendered in the title area, in place of the subheading.
@@ -10,13 +10,6 @@ import { slotHasContent, getBrandForegroundAppearance, onComponentRequiredPropUn
 export class Hero {
     constructor() {
         this.hostMutationObserver = null;
-        this.hostMutationCallback = (mutationList) => {
-            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
-                ? checkSlotInChildMutations(addedNodes, removedNodes, "secondary")
-                : false)) {
-                forceUpdate(this);
-            }
-        };
         this.foregroundColor = getBrandForegroundAppearance();
         this.rightContent = false;
         this.leftContentFullWidth = !this.rightContent && this.secondaryHeading === undefined;
@@ -41,7 +34,7 @@ export class Hero {
     componentDidLoad() {
         !isSlotUsed(this.el, "heading") &&
             onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Hero");
-        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, "secondary", this));
         this.hostMutationObserver.observe(this.el, {
             childList: true,
         });

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 forceUpdate,\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 checkSlotInChildMutations,\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;\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(this.hostMutationCallback);\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 const factor = 0.4;\n const y = -100 + scrolltotop factor;\n this.scrollFactor = \"right \" + y + \"px\";\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"secondary\")\n : false\n )\n ) {\n forceUpdate(this);\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 [\"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} 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;\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 const factor = 0.4;\n const y = -100 + scrolltotop factor;\n this.scrollFactor = \"right \" + y + \"px\";\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 [\"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"]}

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

@@ -1,6 +1,13 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Hero } from "../../ic-hero";
+import { mockHasDynamicChildSlots, mockMutationObserverImplementation, mockRenderDynamicChildSlots, } from "../../../../testspec.setup";
 describe("ic-hero component", () => {
+    afterAll(() => {
+        jest.restoreAllMocks();
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
     it("should render", async () => {
         const page = await newSpecPage({
             components: [Hero],
@@ -77,15 +84,26 @@ describe("ic-hero component", () => {
             components: [Hero],
             html: `<ic-hero heading="Test title" subheading="Test text"></ic-hero>`,
         });
+        const component = page.rootInstance;
+        const host = page.root;
+        const observerInstance = mockMutationObserverImplementation.mock.results[0].value;
         const icon = document.createElement("svg");
         icon.setAttribute("slot", "secondary");
-        page.rootInstance.hostMutationCallback([
+        observerInstance.observe(host, { childList: true });
+        host.appendChild(icon);
+        const mockMutationRecord = [
             {
-                type: "childList",
                 addedNodes: [icon],
                 removedNodes: [],
+                target: host,
             },
-        ]);
+        ];
+        observerInstance.trigger(mockMutationRecord);
+        await page.waitForChanges();
+        expect(mockRenderDynamicChildSlots).toHaveBeenCalledTimes(1);
+        expect(mockRenderDynamicChildSlots).toHaveBeenCalledWith(mockMutationRecord, "secondary", component);
+        expect(mockHasDynamicChildSlots).toHaveBeenCalledTimes(1);
+        expect(page.root).toMatchSnapshot();
     });
 });
 //# sourceMappingURL=ic-hero.spec.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-hero.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-hero/test/basic/ic-hero.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AAErC~~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~~IAAI~~,CAAC,~~YAAY~~,CAAC,~~oBAAoB~~,CAAC;~~YACrC;gBACE~~,IAAI,~~EAAE~~,WAAW;~~gBACjB~~,UAAU,EAAE,CAAC,IAAI,CAAC;gBAClB,YAAY,EAAE,EAAE;~~aACjB~~;SACF,CAAC,CAAC;~~IACL~~,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Hero } from \"../../ic-hero\";\n\ndescribe(\"ic-hero component\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders\");\n });\n\n it(\"should render with a secondary heading\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\" secondary-heading=\"Test title\" secondary-subheading=\"Test text\"></ic-hero>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-secondary-heading\");\n });\n\n it(\"should render with interaction content\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"><ic-button slot=\"interaction\">Button</ic-button></ic-hero>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-interaction-content\");\n });\n\n it(\"should render with secondary content\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"><ic-card-vertical slot=\"secondary\" heading=\"Test card\"></ic-card-vertical></ic-hero>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-secondary-content\");\n });\n\n it(\"should render with a background image when given\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\" background-image=\"test.png\"><ic-card-vertical slot=\"secondary\" heading=\"Test card\"></ic-card-vertical></ic-hero>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-background-image\");\n });\n\n it(\"should use parallax on scroll when a background image is given\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\" background-image=\"test.png\"><ic-card-vertical slot=\"secondary\" heading=\"Test card\"></ic-card-vertical></ic-hero>`,\n });\n\n page.doc.scrollingElement.scrollTop = 50;\n page.doc.dispatchEvent(new CustomEvent(\"scroll\"));\n\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(\"renders-with-parallax-on-scroll\");\n });\n\n it(\"should use not parallax on scroll when a background image is given, but parallax disabled\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" disable-background-parallax subheading=\"Test text\" background-image=\"test.png\"><ic-card-vertical slot=\"secondary\" heading=\"Test card\"></ic-card-vertical></ic-hero>`,\n });\n\n page.doc.scrollingElement.scrollTop = 50;\n page.doc.dispatchEvent(new CustomEvent(\"scroll\"));\n\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-parallax-on-scroll-disabled\"\n );\n });\n\n it(\"should render at size small\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero size=\"small\" heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-small-variant\");\n });\n\n it(\"should correctly set foregroundColor on brand change\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n });\n\n await page.rootInstance.brandChangeHandler({ detail: { mode: \"dark\" } });\n await page.waitForChanges();\n\n expect(page.rootInstance.foregroundColor).toBe(\"dark\");\n });\n\n it(\"should test rendering secondary slot after initial render\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n });\n\n const icon = document.createElement(\"svg\");\n icon.setAttribute(\"slot\", \"secondary\");\n\n ~~page~~.~~rootInstance.hostMutationCallback~~([\n {\n ~~type~~: \~~"childList~~\~~",\~~n addedNodes: [icon],\n removedNodes: [],\n },\n ]);\n });\n});\n"]}
1	+ {"version":3,"file":"ic-hero.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-hero/test/basic/ic-hero.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Hero } from \"../../ic-hero\";\nimport {\n mockHasDynamicChildSlots,\n mockMutationObserverImplementation,\n MockMutationRecord,\n mockRenderDynamicChildSlots,\n} from \"../../../../testspec.setup\";\n\ndescribe(\"ic-hero component\", () => {\n afterAll(() => {\n jest.restoreAllMocks();\n });\n\n afterEach(() => {\n jest.clearAllMocks();\n });\n\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders\");\n });\n\n it(\"should render with a secondary heading\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\" secondary-heading=\"Test title\" secondary-subheading=\"Test text\"></ic-hero>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-secondary-heading\");\n });\n\n it(\"should render with interaction content\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"><ic-button slot=\"interaction\">Button</ic-button></ic-hero>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-interaction-content\");\n });\n\n it(\"should render with secondary content\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"><ic-card-vertical slot=\"secondary\" heading=\"Test card\"></ic-card-vertical></ic-hero>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-secondary-content\");\n });\n\n it(\"should render with a background image when given\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\" background-image=\"test.png\"><ic-card-vertical slot=\"secondary\" heading=\"Test card\"></ic-card-vertical></ic-hero>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-background-image\");\n });\n\n it(\"should use parallax on scroll when a background image is given\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\" background-image=\"test.png\"><ic-card-vertical slot=\"secondary\" heading=\"Test card\"></ic-card-vertical></ic-hero>`,\n });\n\n page.doc.scrollingElement.scrollTop = 50;\n page.doc.dispatchEvent(new CustomEvent(\"scroll\"));\n\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(\"renders-with-parallax-on-scroll\");\n });\n\n it(\"should use not parallax on scroll when a background image is given, but parallax disabled\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" disable-background-parallax subheading=\"Test text\" background-image=\"test.png\"><ic-card-vertical slot=\"secondary\" heading=\"Test card\"></ic-card-vertical></ic-hero>`,\n });\n\n page.doc.scrollingElement.scrollTop = 50;\n page.doc.dispatchEvent(new CustomEvent(\"scroll\"));\n\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-parallax-on-scroll-disabled\"\n );\n });\n\n it(\"should render at size small\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero size=\"small\" heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-small-variant\");\n });\n\n it(\"should correctly set foregroundColor on brand change\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n });\n\n await page.rootInstance.brandChangeHandler({ detail: { mode: \"dark\" } });\n await page.waitForChanges();\n\n expect(page.rootInstance.foregroundColor).toBe(\"dark\");\n });\n\n it(\"should test rendering secondary slot after initial render\", async () => {\n const page = await newSpecPage({\n components: [Hero],\n html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n });\n\n const component = page.rootInstance;\n const host = page.root;\n\n const observerInstance =\n mockMutationObserverImplementation.mock.results[0].value;\n\n const icon = document.createElement(\"svg\");\n icon.setAttribute(\"slot\", \"secondary\");\n\n observerInstance.observe(host, { childList: true });\n\n host.appendChild(icon);\n\n const mockMutationRecord: MockMutationRecord[] = [\n {\n addedNodes: [icon],\n removedNodes: [],\n target: host,\n },\n ];\n\n observerInstance.trigger(mockMutationRecord);\n\n await page.waitForChanges();\n\n expect(mockRenderDynamicChildSlots).toHaveBeenCalledTimes(1);\n expect(mockRenderDynamicChildSlots).toHaveBeenCalledWith(\n mockMutationRecord,\n \"secondary\",\n component\n );\n\n expect(mockHasDynamicChildSlots).toHaveBeenCalledTimes(1);\n\n expect(page.root).toMatchSnapshot();\n });\n});\n"]}

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

@@ -1,19 +1,12 @@
-import { Host, forceUpdate, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { IcInformationStatus, } from "../../utils/types";
 import successIcon from "../../assets/success-icon.svg";
-import { checkSlotInChildMutations, removeDisabledFalse, slotHasContent, } from "../../utils/helpers";
+import { removeDisabledFalse, renderDynamicChildSlots, slotHasContent, } from "../../utils/helpers";
 /**
  * @slot left-icon - Content will be placed to the left of the input.
  */
 export class InputComponentContainer {
     constructor() {
-        this.hostMutationCallback = (mutationList) => {
-            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
-                ? checkSlotInChildMutations(addedNodes, removedNodes, "left-icon")
-                : false)) {
-                forceUpdate(this);
-            }
-        };
         this.disabled = false;
         this.fullWidth = false;
         this.multiLine = false;
@@ -29,7 +22,7 @@ export class InputComponentContainer {
         removeDisabledFalse(this.disabled, this.el);
     }
     componentDidLoad() {
-        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, "left-icon", this));
         this.hostMutationObserver.observe(this.el, { childList: true });
     }
     render() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-input-component-container.js","sourceRoot":"","sources":["../../../src/components/ic-input-component-container/ic-input-component-container.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EACL~~,SAAS,~~EACT~~,OAAO,~~EACP~~,IAAI,~~EACJ~~,IAAI,~~EACJ~~,KAAK,~~EACL~~,~~WAAW,EACX,~~CAAC,~~GACF~~,MAAM,eAAe,CAAC;~~AAEvB~~,OAAO,EACL,mBAAmB,GAGpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACL,~~yBAAyB,EACzB,~~mBAAmB,EACnB,cAAc,GACf,MAAM,qBAAqB,CAAC;AAE7B;;GAEG;AAKH,MAAM,OAAO,uBAAuB;;~~QAoD1B~~,~~yBAAoB,GAAG,CAAC,YAA8B,EAAQ,EAAE;YACtE,IACE,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,EAAE,CACvD,IAAI,~~KAAK~~,WAAW~~;~~gBAClB,CAAC,CAAC,yBAAyB,CAAC,UAAU,EAAE,YAAY,EAAE,WAAW,CAAC;gBAClE,CAAC,CAAC,KAAK,CACV,EACD,CAAC;gBACD,WAAW,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;wBAvD0B,KAAK;~~yBASJ,KAAK;yBAKL,KAAK;wBAKN,KAAK;oBAKR,QAAQ;gCAKG,KAAK;gCAKc,EAAE;;IAhCzD,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IAgCD,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,~~IAAI~~,CAAC,~~oBAAoB~~,CAAC,CAAC;~~QAC5E~~,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAClE,CAAC;~~IAcD~~,MAAM;QACJ,MAAM,EACJ,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,gBAAgB,GACjB,GAAG,IAAI,CAAC;QAET,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,gCAAgC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAC9C,CAAC,gCAAgC,gBAAgB,EAAE,CAAC,EAClD,gBAAgB,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ;gBACnD,uCAAuC,EAAE,QAAQ;gBACjD,uCAAuC,EAAE,QAAQ;gBACjD,wCAAwC,EAAE,SAAS;gBACnD,yCAAyC,EAAE,SAAS;aACrD,mBACc,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;YAEvC,WAAK,KAAK,EAAC,iBAAiB;gBACzB,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,IAAI,CACvC,WAAK,KAAK,EAAC,gBAAgB;oBACzB,YAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP;gBACD,eAAa;gBAEZ,gBAAgB;oBACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,IAAI,CAClD,YAAM,KAAK,EAAC,gBAAgB,EAAC,SAAS,EAAE,WAAW,GAAI,CACxD,CACC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component~~,\n~~ Element~~,\n~~ Host~~,\n~~ Prop~~,\n~~ Watch~~,\n forceUpdate,\n~~ h~~,\n~~} from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n IcSizes,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport {\n ~~checkSlotInChildMutations~~,\n ~~removeDisabledFalse~~,\n slotHasContent,\n} from \"../../utils/helpers\";\n\n/*\n @slot left-icon - Content will be placed to the left of the input.\n /\n@Component({\n tag: \"ic-input-component-container\",\n styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n private hostMutationObserver: MutationObserver;\n @Element() el: HTMLIcInputComponentContainerElement;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the input component container will fill the width of the container it is in.\n /\n @Prop() fullWidth: boolean = false;\n\n /\n If `true`, the input component container will allow for multiple lines.\n /\n @Prop() multiLine: boolean = false;\n\n /\n If `true`, the readonly state will be set.\n /\n @Prop() readonly: boolean = false;\n\n /\n The size of the input component container component.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n If `true`, the validation will display inline.\n /\n @Prop() validationInline: boolean = false;\n\n /\n The validation status of the input component container - e.g. 'error' \| 'warning' \| 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver(this~~.hostMutationCallback~~);\n this.hostMutationObserver.observe(this.el, { childList: true });\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"left-icon\")\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n size,\n validationStatus,\n disabled,\n readonly,\n multiLine,\n fullWidth,\n validationInline,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-input-component-container-${size}`]: true,\n [`ic-input-component-container-${validationStatus}`]:\n validationStatus !== \"\" && !disabled && !readonly,\n \"ic-input-component-container-disabled\": disabled,\n \"ic-input-component-container-readonly\": readonly,\n \"ic-input-component-container-multiline\": multiLine,\n \"ic-input-component-container-full-width\": fullWidth,\n }}\n aria-disabled={disabled ? \"true\" : null}\n >\n <div class=\"focus-indicator\">\n {slotHasContent(this.el, \"left-icon\") && (\n <div class=\"icon-container\">\n <slot name=\"left-icon\" />\n </div>\n )}\n <slot></slot>\n\n {validationInline &&\n validationStatus === IcInformationStatus.Success && (\n <span class=\"inline-success\" innerHTML={successIcon} />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-input-component-container.js","sourceRoot":"","sources":["../../../src/components/ic-input-component-container/ic-input-component-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EACL,mBAAmB,GAGpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,GACf,MAAM,qBAAqB,CAAC;AAE7B;;GAEG;AAKH,MAAM,OAAO,uBAAuB;;wBAON,KAAK;yBASJ,KAAK;yBAKL,KAAK;wBAKN,KAAK;oBAKR,QAAQ;gCAKG,KAAK;gCAKc,EAAE;;IAhCzD,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IAgCD,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,EAAE,EAAE,CAChE,uBAAuB,CAAC,YAAY,EAAE,WAAW,EAAE,IAAI,CAAC,CACzD,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAClE,CAAC;IAED,MAAM;QACJ,MAAM,EACJ,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,gBAAgB,GACjB,GAAG,IAAI,CAAC;QAET,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,gCAAgC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAC9C,CAAC,gCAAgC,gBAAgB,EAAE,CAAC,EAClD,gBAAgB,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ;gBACnD,uCAAuC,EAAE,QAAQ;gBACjD,uCAAuC,EAAE,QAAQ;gBACjD,wCAAwC,EAAE,SAAS;gBACnD,yCAAyC,EAAE,SAAS;aACrD,mBACc,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;YAEvC,WAAK,KAAK,EAAC,iBAAiB;gBACzB,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,IAAI,CACvC,WAAK,KAAK,EAAC,gBAAgB;oBACzB,YAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP;gBACD,eAAa;gBAEZ,gBAAgB;oBACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,IAAI,CAClD,YAAM,KAAK,EAAC,gBAAgB,EAAC,SAAS,EAAE,WAAW,GAAI,CACxD,CACC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, Watch, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n IcSizes,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport {\n removeDisabledFalse,\n renderDynamicChildSlots,\n slotHasContent,\n} from \"../../utils/helpers\";\n\n/*\n @slot left-icon - Content will be placed to the left of the input.\n /\n@Component({\n tag: \"ic-input-component-container\",\n styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n private hostMutationObserver: MutationObserver;\n @Element() el: HTMLIcInputComponentContainerElement;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the input component container will fill the width of the container it is in.\n /\n @Prop() fullWidth: boolean = false;\n\n /\n If `true`, the input component container will allow for multiple lines.\n /\n @Prop() multiLine: boolean = false;\n\n /\n If `true`, the readonly state will be set.\n /\n @Prop() readonly: boolean = false;\n\n /\n The size of the input component container component.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n If `true`, the validation will display inline.\n /\n @Prop() validationInline: boolean = false;\n\n /\n The validation status of the input component container - e.g. 'error' \| 'warning' \| 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"left-icon\", this)\n );\n this.hostMutationObserver.observe(this.el, { childList: true });\n }\n\n render() {\n const {\n size,\n validationStatus,\n disabled,\n readonly,\n multiLine,\n fullWidth,\n validationInline,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-input-component-container-${size}`]: true,\n [`ic-input-component-container-${validationStatus}`]:\n validationStatus !== \"\" && !disabled && !readonly,\n \"ic-input-component-container-disabled\": disabled,\n \"ic-input-component-container-readonly\": readonly,\n \"ic-input-component-container-multiline\": multiLine,\n \"ic-input-component-container-full-width\": fullWidth,\n }}\n aria-disabled={disabled ? \"true\" : null}\n >\n <div class=\"focus-indicator\">\n {slotHasContent(this.el, \"left-icon\") && (\n <div class=\"icon-container\">\n <slot name=\"left-icon\" />\n </div>\n )}\n <slot></slot>\n\n {validationInline &&\n validationStatus === IcInformationStatus.Success && (\n <span class=\"inline-success\" innerHTML={successIcon} />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -1,6 +1,13 @@
+import { mockHasDynamicChildSlots, mockMutationObserverImplementation, mockRenderDynamicChildSlots, } from "../../../../testspec.setup";
 import { InputComponentContainer } from "../../ic-input-component-container";
 import { newSpecPage } from "@stencil/core/testing";
 describe("ic-input-component-container", () => {
+    afterAll(() => {
+        jest.restoreAllMocks();
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
     it("should render", async () => {
         const page = await newSpecPage({
             components: [InputComponentContainer],
@@ -140,15 +147,26 @@ describe("ic-input-component-container", () => {
             components: [InputComponentContainer],
             html: `<ic-input-component-container>content</ic-input-component-container>`,
         });
+        const component = page.rootInstance;
+        const host = page.root;
+        const observerInstance = mockMutationObserverImplementation.mock.results[0].value;
         const icon = document.createElement("svg");
         icon.setAttribute("slot", "left-icon");
-        page.rootInstance.hostMutationCallback([
+        observerInstance.observe(host, { childList: true });
+        host.appendChild(icon);
+        const mockMutationRecord = [
             {
-                type: "childList",
                 addedNodes: [icon],
                 removedNodes: [],
+                target: host,
             },
-        ]);
+        ];
+        observerInstance.trigger(mockMutationRecord);
+        await page.waitForChanges();
+        expect(mockRenderDynamicChildSlots).toHaveBeenCalledTimes(1);
+        expect(mockRenderDynamicChildSlots).toHaveBeenCalledWith(mockMutationRecord, "left-icon", component);
+        expect(mockHasDynamicChildSlots).toHaveBeenCalledTimes(1);
+        expect(page.root).toMatchSnapshot();
     });
 });
 //# sourceMappingURL=ic-input-component-container.spec.js.map

package/dist/collection/components/ic-input-component-container/test/basic/ic-input-component-container.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-input-component-container.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-component-container/test/basic/ic-input-component-container.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { InputComponentContainer } from \"../../ic-input-component-container\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-component-container\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-medium\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should render with validation status\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container validation-status=\"success\">content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-medium ic-input-component-container-success\" validation-status=\"success\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container> \n `);\n });\n\n it(\"should render with validation inline\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container validation-status=\"success\" validation-inline=true>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-medium ic-input-component-container-success\" validation-inline=\"true\" validation-status=\"success\">\n <div class=\"focus-indicator\">\n content\n <span class=\"inline-success\">\n svg\n </span>\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should ignore validation inline if not success\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container validation-status=\"error\" validation-inline=true>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-error ic-input-component-container-medium\" validation-inline=\"true\" validation-status=\"error\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should render with size small, multiline & fullwidth props set\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container size=\"small\" multi-line=true full-width=true>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-small ic-input-component-container-full-width ic-input-component-container-multiline\" full-width=\"true\" multi-line=\"true\" size=\"small\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should render with size large\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container size=large>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-large\" size=\"large\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should render disabled\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container validation-status=\"success\" disabled=true>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container aria-disabled=\"true\" class=\"ic-input-component-container-disabled ic-input-component-container-medium\" disabled=\"true\" validation-status=\"success\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n\n page.rootInstance.disabled = false;\n\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-medium ic-input-component-container-success\" validation-status=\"success\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should render readonly\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container validation-status=\"success\" readonly=true>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-medium ic-input-component-container-readonly\" readonly=\"true\" validation-status=\"success\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should render with slotted content\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container validation-status=\"success\" disabled=true><span slot=\"left-icon\">slotted content</span>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container aria-disabled=\"true\" class=\"ic-input-component-container-disabled ic-input-component-container-medium\" disabled=\"true\" validation-status=\"success\">\n <div class=\"focus-indicator\">\n <div class=\"icon-container\">\n <span slot=\"left-icon\">\n slotted content\n </span>\n </div>\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should test rendering icon after initial render\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container>content</ic-input-component-container>`,\n });\n\n const icon = document.createElement(\"svg\");\n icon.setAttribute(\"slot\", \"left-icon\");\n\n page.rootInstance.hostMutationCallback([\n {\n type: \"childList\",\n addedNodes: [icon],\n removedNodes: [],\n },\n ]);\n });\n});\n"]}
1	+ {"version":3,"file":"ic-input-component-container.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-component-container/test/basic/ic-input-component-container.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n mockHasDynamicChildSlots,\n mockMutationObserverImplementation,\n MockMutationRecord,\n mockRenderDynamicChildSlots,\n} from \"../../../../testspec.setup\";\nimport { InputComponentContainer } from \"../../ic-input-component-container\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-component-container\", () => {\n afterAll(() => {\n jest.restoreAllMocks();\n });\n\n afterEach(() => {\n jest.clearAllMocks();\n });\n\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-medium\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should render with validation status\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container validation-status=\"success\">content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-medium ic-input-component-container-success\" validation-status=\"success\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container> \n `);\n });\n\n it(\"should render with validation inline\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container validation-status=\"success\" validation-inline=true>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-medium ic-input-component-container-success\" validation-inline=\"true\" validation-status=\"success\">\n <div class=\"focus-indicator\">\n content\n <span class=\"inline-success\">\n svg\n </span>\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should ignore validation inline if not success\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container validation-status=\"error\" validation-inline=true>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-error ic-input-component-container-medium\" validation-inline=\"true\" validation-status=\"error\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should render with size small, multiline & fullwidth props set\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container size=\"small\" multi-line=true full-width=true>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-small ic-input-component-container-full-width ic-input-component-container-multiline\" full-width=\"true\" multi-line=\"true\" size=\"small\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should render with size large\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container size=large>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-large\" size=\"large\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should render disabled\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container validation-status=\"success\" disabled=true>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container aria-disabled=\"true\" class=\"ic-input-component-container-disabled ic-input-component-container-medium\" disabled=\"true\" validation-status=\"success\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n\n page.rootInstance.disabled = false;\n\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-medium ic-input-component-container-success\" validation-status=\"success\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should render readonly\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container validation-status=\"success\" readonly=true>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container class=\"ic-input-component-container-medium ic-input-component-container-readonly\" readonly=\"true\" validation-status=\"success\">\n <div class=\"focus-indicator\">\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should render with slotted content\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container validation-status=\"success\" disabled=true><span slot=\"left-icon\">slotted content</span>content</ic-input-component-container>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-input-component-container aria-disabled=\"true\" class=\"ic-input-component-container-disabled ic-input-component-container-medium\" disabled=\"true\" validation-status=\"success\">\n <div class=\"focus-indicator\">\n <div class=\"icon-container\">\n <span slot=\"left-icon\">\n slotted content\n </span>\n </div>\n content\n </div>\n </ic-input-component-container>\n `);\n });\n\n it(\"should test rendering icon after initial render\", async () => {\n const page = await newSpecPage({\n components: [InputComponentContainer],\n html: `<ic-input-component-container>content</ic-input-component-container>`,\n });\n\n const component = page.rootInstance;\n const host = page.root;\n\n const observerInstance =\n mockMutationObserverImplementation.mock.results[0].value;\n\n const icon = document.createElement(\"svg\");\n icon.setAttribute(\"slot\", \"left-icon\");\n\n observerInstance.observe(host, { childList: true });\n\n host.appendChild(icon);\n\n const mockMutationRecord: MockMutationRecord[] = [\n {\n addedNodes: [icon],\n removedNodes: [],\n target: host,\n },\n ];\n\n observerInstance.trigger(mockMutationRecord);\n\n await page.waitForChanges();\n\n expect(mockRenderDynamicChildSlots).toHaveBeenCalledTimes(1);\n expect(mockRenderDynamicChildSlots).toHaveBeenCalledWith(\n mockMutationRecord,\n \"left-icon\",\n component\n );\n\n expect(mockHasDynamicChildSlots).toHaveBeenCalledTimes(1);\n\n expect(page.root).toMatchSnapshot();\n });\n});\n"]}

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

@@ -733,4 +733,10 @@ video {
     outline: none;
     border: 0.125rem solid transparent;
   }
+  .disabled-option {
+    color: GrayText;
+    --ic-typography-color: GrayText;
+  }
 }

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

@@ -7,6 +7,7 @@ export class Menu {
     constructor() {
         this.ACTIVE_DESCENDANT = "aria-activedescendant";
         this.CLEAR_BUTTON_ID = "clear-button";
+        this.SEARCH_BAR_TAG = "IC-SEARCH-BAR";
         this.disabledOptionSelected = false;
         this.hasPreviouslyBlurred = false;
         this.hasTimedOut = false;
@@ -71,7 +72,7 @@ export class Menu {
             }
         };
         this.getParentEl = (parent) => {
-            if (parent.tagName === "IC-SEARCH-BAR") {
+            if (parent.tagName === this.SEARCH_BAR_TAG) {
                 this.isSearchBar = true;
             }
             else if (parent.tagName === "IC-SELECT") {
@@ -323,7 +324,7 @@ export class Menu {
                         // Otherwise, if a different OS, checks Ctrl key
                         if ((isMacDevice() && event.metaKey) ||
                             (!isMacDevice() && event.ctrlKey)) {
-                            this.emitSelectAll();
+                            this.emitSelectAllEvents();
                             this.lastOptionFocused = null;
                             this.lastOptionSelected = null;
                         }
@@ -449,7 +450,7 @@ export class Menu {
         this.handleSelectAllClick = () => {
             this.keyboardNav = false;
             this.menu.focus();
-            this.emitSelectAll();
+            this.emitSelectAllEvents();
             this.lastOptionFocused = null;
             this.lastOptionSelected = null;
         };
@@ -520,13 +521,17 @@ export class Menu {
                     ? this.lastOptionSelected
                     : null;
         };
-        this.emitSelectAll = () => {
-            var _a;
+        this.emitSelectAllEvents = () => {
+            var _a, _b;
             // Select all if there is either no value or not all options are selected
             // 'true' means select all, 'false' means clear all
             this.menuOptionSelectAll.emit({
                 select: !this.value || !(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === this.ungroupedOptions.length),
             });
+            // Emit clear event if all options are selected
+            if (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) === this.ungroupedOptions.length) {
+                this.icClear.emit();
+            }
         };
         this.emitMenuKeyPress = (isNavKey, key) => {
             this.menuKeyPress.emit({ isNavKey: isNavKey, key: key });
@@ -671,7 +676,7 @@ export class Menu {
             const showCheckIcon = !!option[this.valueField] &&
                 !!this.value &&
                 selected &&
-                this.parentEl.tagName !== "IC-SEARCH-BAR";
+                this.parentEl.tagName !== this.SEARCH_BAR_TAG;
             return (h(Fragment, null, option.loading && h("ic-loading-indicator", { size: "icon" }), h("div", { class: {
                     "option-text-container": true,
                     "show-check-icon": showCheckIcon,
@@ -792,8 +797,7 @@ export class Menu {
                     highlightedEl.focus();
                 }
             }
-            else if (this.inputEl.tagName !== "IC-TEXT-FIELD" &&
-                this.inputEl.tagName !== "INPUT") {
+            else if (this.inputEl.tagName !== "INPUT") {
                 this.menu.focus();
             }
         }
@@ -879,16 +883,24 @@ export class Menu {
         this.focusFromSearchKeypress = true;
     }
     render() {
-        const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, } = this;
+        const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, } = 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, { class: {
                 "ic-menu-full-width": fullWidth,
-                "ic-menu-no-focus": (inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" || hasTimedOut || isLoading,
+                "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) ||
+                    hasTimedOut ||
+                    isLoading,
                 [`ic-menu-${size}`]: true,
                 "ic-menu-open": open && options.length !== 0,
                 "ic-menu-multiple": this.isMultiSelect,
-            } }, options.length !== 0 && (h("ul", { id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": this.isMultiSelect ? "true" : "false", tabindex: open && !keyboardNav && (inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) !== "INPUT" ? "0" : "-1", ref: (el) => (this.menu = el), onKeyDown: this.handleMenuKeyDown, onKeyUp: this.handleMenuKeyUp, onBlur: this.handleBlur }, this.getSortedOptions(options).map((option, index) => {
+            } }, options.length !== 0 && (h("ul", { id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": this.isMultiSelect ? "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)
+                ? "0"
+                : "-1", ref: (el) => (this.menu = el), onKeyDown: this.handleMenuKeyDown, onKeyUp: this.handleMenuKeyUp, onBlur: this.handleBlur }, this.getSortedOptions(options).map((option, index) => {
             if (option.children) {
                 if (option.children.length > 0) {
                     return (h("div", null, h("ic-typography", { class: "option-group-title", role: "presentation", variant: "subtitle-small" }, h("p", null, option[this.labelField])), option.children.map((childOption) => childOption.label &&
@@ -1279,6 +1291,21 @@ export class Menu {
     }
     static get events() {
         return [{
+                "method": "icClear",
+                "name": "icClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the clear all button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
                 "method": "menuKeyPress",
                 "name": "menuKeyPress",
                 "bubbles": true,