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

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,