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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-accordion.js","sourceRoot":"","sources":["../../../src/components/ic-accordion/ic-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Host,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/*\n @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n /\n\n@Component({\n tag: \"ic-accordion\",\n styleUrl: \"ic-accordion.css\",\n shadow: true,\n})\nexport class Accordion {\n private accordionId = `ic-accordion-${accordionIds++}`;\n private expandedContentEl: HTMLDivElement;\n private accordionBtnHeading: HTMLButtonElement;\n private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n @Element() el: HTMLIcAccordionElement;\n\n /\n If `true`, the accordion will be disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the accordion appears expanded.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n\n /\n The section header outlining section content.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the accordion.\n /\n @Prop() message?: string = \"\";\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n @internal Emitted when accordion is clicked.\n /\n @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n @Watch(\"expanded\")\n handleExpandedWatch(): void {\n this.animateExpandedContent();\n }\n\n /\n Sets focus on accordion heading.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.accordionBtnHeading) {\n this.accordionBtnHeading.focus();\n }\n }\n\n disconnectedCallback(): void {\n if (this.expandedContentEl) {\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n true\n );\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.hideExpandedContent(e, this.expandedContentEl),\n true\n );\n }\n }\n\n componentDidLoad(): void {\n // So accordion opens by default if expanded set to true\n if (this.expanded) {\n this.expandedContentEl.style.height = \"auto\";\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n }\n }\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n this.accordionClicked.emit({ id: this.accordionId });\n };\n\n // Set accordion animation\n private setAccordionAnimation = (\n el: HTMLElement,\n duration: string,\n property: string,\n delay: string\n ) => {\n el.style.transitionDuration = `${duration}ms`;\n el.style.transitionProperty = property;\n el.style.transitionDelay = delay;\n };\n\n private setExpandedContentStyle = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n expandedContent.classList.add(\"expanded-content-opened\");\n expandedContent.style.height = \"auto\";\n }\n };\n\n private hideExpandedContent = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n expandedContent.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"hidden\"\n );\n }\n };\n\n private animateExpandedContent = () => {\n const elementHeight = this.expandedContentEl.scrollHeight;\n if (elementHeight > 0 && this.expanded) {\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n this.expandedContentEl.style.height = `${elementHeight}px`;\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-out\"\n );\n\n this.expandedContentEl.addEventListener(\n \"transitionend\",\n (e: TransitionEvent) => {\n this.setExpandedContentStyle(e, this.expandedContentEl);\n }\n );\n } else if (!this.expanded) {\n this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n this.expandedContentEl.style.height = \"0\";\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-in\"\n );\n this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n }\n this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n this.hideExpandedContent(e, this.expandedContentEl);\n });\n }\n };\n\n render() {\n const { size, disabled, expanded, theme } = this;\n return (\n <Host\n id={this.accordionId}\n class={{\n [\"ic-accordion-disabled\"]: disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n aria-disabled={disabled ? \"true\" : \"false\"}\n >\n <button\n ref={(el) => (this.accordionBtnHeading = el)}\n id={`${this.accordionId}-button`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n class={{\n [`${size}`]: true,\n [\"section-button\"]: true,\n [\"section-button-open\"]: expanded && !disabled,\n }}\n aria-expanded={`${expanded}`}\n aria-controls=\"expanded-content-area\"\n onClick={this.toggleExpanded}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n this.heading\n )}\n </ic-typography>\n <span\n class={{\n [\"expand-chevron\"]: true,\n [\"content-expanded-chevron\"]: expanded && !disabled,\n }}\n aria-hidden=\"true\"\n innerHTML={chevronIcon}\n />\n </button>\n <div\n class={{\n [\"expanded-content\"]: true,\n }}\n aria-labelledby={`${this.accordionId}-button`}\n role=\"region\"\n aria-hidden={`${!expanded}`}\n id=\"expanded-content-area\"\n ref={(el) => (this.expandedContentEl = el)}\n >\n <div class=\"expanded-content-inner\">\n {this.message ? (\n <ic-typography variant=\"body\">{this.message}</ic-typography>\n ) : (\n <slot />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-accordion.js","sourceRoot":"","sources":["../../../src/components/ic-accordion/ic-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Host,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/*\n @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n /\n\n@Component({\n tag: \"ic-accordion\",\n styleUrl: \"ic-accordion.css\",\n shadow: true,\n})\nexport class Accordion {\n private accordionId = `ic-accordion-${accordionIds++}`;\n private expandedContentEl: HTMLDivElement;\n private accordionBtnHeading: HTMLButtonElement;\n private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n @Element() el: HTMLIcAccordionElement;\n\n /\n If `true`, the accordion will be disabled.\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 accordion appears expanded.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n\n /\n The section header outlining section content.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the accordion.\n /\n @Prop() message?: string = \"\";\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n @internal Emitted when accordion is clicked.\n /\n @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n @Watch(\"expanded\")\n handleExpandedWatch(): void {\n this.animateExpandedContent();\n }\n\n /\n Sets focus on accordion heading.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.accordionBtnHeading) {\n this.accordionBtnHeading.focus();\n }\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n disconnectedCallback(): void {\n if (this.expandedContentEl) {\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n true\n );\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.hideExpandedContent(e, this.expandedContentEl),\n true\n );\n }\n }\n\n componentDidLoad(): void {\n // So accordion opens by default if expanded set to true\n if (this.expanded) {\n this.expandedContentEl.style.height = \"auto\";\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n }\n }\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n this.accordionClicked.emit({ id: this.accordionId });\n };\n\n // Set accordion animation\n private setAccordionAnimation = (\n el: HTMLElement,\n duration: string,\n property: string,\n delay: string\n ) => {\n el.style.transitionDuration = `${duration}ms`;\n el.style.transitionProperty = property;\n el.style.transitionDelay = delay;\n };\n\n private setExpandedContentStyle = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n expandedContent.classList.add(\"expanded-content-opened\");\n expandedContent.style.height = \"auto\";\n }\n };\n\n private hideExpandedContent = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n expandedContent.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"hidden\"\n );\n }\n };\n\n private animateExpandedContent = () => {\n const elementHeight = this.expandedContentEl.scrollHeight;\n if (elementHeight > 0 && this.expanded) {\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n this.expandedContentEl.style.height = `${elementHeight}px`;\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-out\"\n );\n\n this.expandedContentEl.addEventListener(\n \"transitionend\",\n (e: TransitionEvent) => {\n this.setExpandedContentStyle(e, this.expandedContentEl);\n }\n );\n } else if (!this.expanded) {\n this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n this.expandedContentEl.style.height = \"0\";\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-in\"\n );\n this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n }\n this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n this.hideExpandedContent(e, this.expandedContentEl);\n });\n }\n };\n\n render() {\n const { size, disabled, expanded, theme } = this;\n return (\n <Host\n id={this.accordionId}\n class={{\n [\"ic-accordion-disabled\"]: disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n aria-disabled={disabled ? \"true\" : \"false\"}\n >\n <button\n ref={(el) => (this.accordionBtnHeading = el)}\n id={`${this.accordionId}-button`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n class={{\n [`${size}`]: true,\n [\"section-button\"]: true,\n [\"section-button-open\"]: expanded && !disabled,\n }}\n aria-expanded={`${expanded}`}\n aria-controls=\"expanded-content-area\"\n onClick={this.toggleExpanded}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n this.heading\n )}\n </ic-typography>\n <span\n class={{\n [\"expand-chevron\"]: true,\n [\"content-expanded-chevron\"]: expanded && !disabled,\n }}\n aria-hidden=\"true\"\n innerHTML={chevronIcon}\n />\n </button>\n <div\n class={{\n [\"expanded-content\"]: true,\n }}\n aria-labelledby={`${this.accordionId}-button`}\n role=\"region\"\n aria-hidden={`${!expanded}`}\n id=\"expanded-content-area\"\n ref={(el) => (this.expandedContentEl = el)}\n >\n <div class=\"expanded-content-inner\">\n {this.message ? (\n <ic-typography variant=\"body\">{this.message}</ic-typography>\n ) : (\n <slot />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -108,6 +108,9 @@ describe("ic-accordion snapshots", () => {
       </ic-accordion>`,
         });
         expect(page.root).toMatchSnapshot("disabled");
+        page.rootInstance.disabled = false;
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot("disabled-removed");
     });
     describe("ic-accordion component", () => {
         it("it should test the toggleExpanded function", async () => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-accordion.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-accordion/test/basic/ic-accordion.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Accordion } from \"../../ic-accordion\";\n\ndescribe(\"ic-accordion snapshots\", () => {\n it(\"should match default snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n `,\n });\n expect(page.root).toMatchSnapshot(\"renders as default\");\n });\n\n it(\"should match dark snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" theme=\"dark\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders as dark\");\n });\n\n it(\"should match with icon snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <svg\n slot=\"icon\"\n width=\"20\"\n height=\"1em\"\n viewBox=\"0 0 512 512\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z\"\n />\n </svg>\n <ic-typography variant=\"body\">\n This is an example of the main body text\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders with icon\");\n });\n\n it(\"should render with slot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" size=\"small\">\n <slot>This is an example of the main body text.</slot>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders small accordion\");\n });\n\n it(\"should match small snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" size=\"small\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders small accordion\");\n });\n\n it(\"should match large snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion size=\"large\" heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders large accordion\");\n });\n\n it(\"should render with a heading slot when supplied\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: ` \n <ic-accordion>\n <slot name=\"heading\"/></slot>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders with heading slot\");\n });\n\n it(\"should render in a disabled state\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" disabled>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"disabled\");\n });\n\n describe(\"ic-accordion component\", () => {\n it(\"it should test the toggleExpanded function\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n expect(page.root.expanded).toBe(false);\n await page.rootInstance.toggleExpanded();\n await page.waitForChanges();\n expect(page.root.expanded).toBe(true);\n });\n\n it(\"should test id number is added to accordion\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n const eventSpy = jest.fn();\n\n const accordionId = page.root.id;\n page.root.addEventListener(\"accordionClicked\", eventSpy);\n await page.waitForChanges();\n await page.rootInstance.toggleExpanded();\n await page.waitForChanges();\n\n expect(eventSpy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: expect.objectContaining({\n id: accordionId,\n }),\n })\n );\n });\n\n it(\"it should test the disabled function\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" disabled>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root.disabled).toBe(true);\n });\n\n it(\"it should add transition styling to the element\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" disabled>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n const div = document.createElement(\"div\");\n page.rootInstance.setAccordionAnimation(div, \"300\", \"height\", \"ease-out\");\n expect(div.style.transitionDuration).toBe(\"300ms\");\n expect(div.style.transitionProperty).toBe(\"height\");\n expect(div.style.transitionDelay).toBe(\"ease-out\");\n });\n\n it(\"it should call setAccordionAnimation if scroll height > 0 and expanded = true\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" expanded>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const spySetAccordionAnimation = jest.spyOn(\n page.rootInstance,\n \"setAccordionAnimation\"\n );\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n Object.defineProperty(\n page.rootInstance.expandedContentEl,\n \"scrollHeight\",\n { configurable: true, value: 500 }\n );\n page.rootInstance.animateExpandedContent();\n\n expect(spySetAccordionAnimation).toHaveBeenCalled();\n });\n\n it(\"it should call setAccordionAnimation if scroll height = '500' and expanded = 'false'\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n const spySetAccordionAnimation = jest.spyOn(\n page.rootInstance,\n \"setAccordionAnimation\"\n );\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n\n Object.defineProperty(\n page.rootInstance.expandedContentEl,\n \"scrollHeight\",\n { configurable: true, value: 500 }\n );\n page.rootInstance.animateExpandedContent();\n expect(spySetAccordionAnimation).toHaveBeenCalled();\n });\n\n it(\"should set height and .expanded-content-opened on expanded content\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 50;\n\n await page.rootInstance.setExpandedContentStyle(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n page.rootInstance.expandedContentEl.className.split(\" \")\n ).toContain(\"expanded-content-opened\");\n expect(page.rootInstance.expandedContentEl.style.height).toBe(\"auto\");\n });\n\n it(\"should not set height and .expanded-content-opened on expanded content\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 0;\n\n await page.rootInstance.setExpandedContentStyle(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n page.rootInstance.expandedContentEl.className.split(\" \")\n ).not.toContain(\"expanded-content-opened\");\n expect(page.rootInstance.expandedContentEl.style.height).toBe(\"\");\n\n await page.rootInstance.disconnectedCallback();\n });\n\n it(\"should set visibility on expanded content to hidden\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 0;\n\n await page.rootInstance.hideExpandedContent(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n (\n page.rootInstance.expandedContentEl as HTMLDivElement\n ).style.getPropertyValue(\"--ic-expanded-content-visibility\")\n ).toBe(\"hidden\");\n });\n\n it(\"should set visibility to undefined if client height is greater than 0\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 50;\n\n await page.rootInstance.hideExpandedContent(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n (\n page.rootInstance.expandedContentEl as HTMLDivElement\n ).style.getPropertyValue(\"--ic-expanded-content-visibility\")\n ).toBe(\"\");\n });\n\n it(\"should call 'setFocus' when accordion can be focused\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n //Can't expect anything in this test - this is to increase code coverage only\n await page.rootInstance.setFocus().toHaveBeenCalled;\n });\n\n it(\"should call setExpandedContentStyle when transitionend in animateExpandedContent and expanded is true\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const setExpandedContentStyleSpy = jest.spyOn(\n page.rootInstance,\n \"setExpandedContentStyle\"\n );\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.scrollHeight = 50;\n page.rootInstance.expanded = true;\n\n await page.rootInstance.animateExpandedContent();\n\n const event = new Event(\"transitionend\");\n page.rootInstance.expandedContentEl.dispatchEvent(event);\n\n expect(setExpandedContentStyleSpy).toHaveBeenCalled();\n });\n\n it(\"should call hideExpandedContent when transitionend in animateExpandedContent and expanded is false\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const hideExpandedContentSpy = jest.spyOn(\n page.rootInstance,\n \"hideExpandedContent\"\n );\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.scrollHeight = 50;\n page.rootInstance.expanded = false;\n\n await page.rootInstance.animateExpandedContent();\n\n const event = new Event(\"transitionend\");\n page.rootInstance.expandedContentEl.dispatchEvent(event);\n\n expect(hideExpandedContentSpy).toHaveBeenCalled();\n });\n });\n});\n"]}
1	+ {"version":3,"file":"ic-accordion.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-accordion/test/basic/ic-accordion.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Accordion } from \"../../ic-accordion\";\n\ndescribe(\"ic-accordion snapshots\", () => {\n it(\"should match default snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n `,\n });\n expect(page.root).toMatchSnapshot(\"renders as default\");\n });\n\n it(\"should match dark snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" theme=\"dark\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders as dark\");\n });\n\n it(\"should match with icon snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <svg\n slot=\"icon\"\n width=\"20\"\n height=\"1em\"\n viewBox=\"0 0 512 512\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z\"\n />\n </svg>\n <ic-typography variant=\"body\">\n This is an example of the main body text\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders with icon\");\n });\n\n it(\"should render with slot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" size=\"small\">\n <slot>This is an example of the main body text.</slot>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders small accordion\");\n });\n\n it(\"should match small snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" size=\"small\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders small accordion\");\n });\n\n it(\"should match large snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion size=\"large\" heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders large accordion\");\n });\n\n it(\"should render with a heading slot when supplied\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: ` \n <ic-accordion>\n <slot name=\"heading\"/></slot>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders with heading slot\");\n });\n\n it(\"should render in a disabled state\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" disabled>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"disabled\");\n\n page.rootInstance.disabled = false;\n\n await page.waitForChanges();\n expect(page.root).toMatchSnapshot(\"disabled-removed\");\n });\n\n describe(\"ic-accordion component\", () => {\n it(\"it should test the toggleExpanded function\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n expect(page.root.expanded).toBe(false);\n await page.rootInstance.toggleExpanded();\n await page.waitForChanges();\n expect(page.root.expanded).toBe(true);\n });\n\n it(\"should test id number is added to accordion\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n const eventSpy = jest.fn();\n\n const accordionId = page.root.id;\n page.root.addEventListener(\"accordionClicked\", eventSpy);\n await page.waitForChanges();\n await page.rootInstance.toggleExpanded();\n await page.waitForChanges();\n\n expect(eventSpy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: expect.objectContaining({\n id: accordionId,\n }),\n })\n );\n });\n\n it(\"it should test the disabled function\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" disabled>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root.disabled).toBe(true);\n });\n\n it(\"it should add transition styling to the element\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" disabled>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n const div = document.createElement(\"div\");\n page.rootInstance.setAccordionAnimation(div, \"300\", \"height\", \"ease-out\");\n expect(div.style.transitionDuration).toBe(\"300ms\");\n expect(div.style.transitionProperty).toBe(\"height\");\n expect(div.style.transitionDelay).toBe(\"ease-out\");\n });\n\n it(\"it should call setAccordionAnimation if scroll height > 0 and expanded = true\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" expanded>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const spySetAccordionAnimation = jest.spyOn(\n page.rootInstance,\n \"setAccordionAnimation\"\n );\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n Object.defineProperty(\n page.rootInstance.expandedContentEl,\n \"scrollHeight\",\n { configurable: true, value: 500 }\n );\n page.rootInstance.animateExpandedContent();\n\n expect(spySetAccordionAnimation).toHaveBeenCalled();\n });\n\n it(\"it should call setAccordionAnimation if scroll height = '500' and expanded = 'false'\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n const spySetAccordionAnimation = jest.spyOn(\n page.rootInstance,\n \"setAccordionAnimation\"\n );\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n\n Object.defineProperty(\n page.rootInstance.expandedContentEl,\n \"scrollHeight\",\n { configurable: true, value: 500 }\n );\n page.rootInstance.animateExpandedContent();\n expect(spySetAccordionAnimation).toHaveBeenCalled();\n });\n\n it(\"should set height and .expanded-content-opened on expanded content\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 50;\n\n await page.rootInstance.setExpandedContentStyle(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n page.rootInstance.expandedContentEl.className.split(\" \")\n ).toContain(\"expanded-content-opened\");\n expect(page.rootInstance.expandedContentEl.style.height).toBe(\"auto\");\n });\n\n it(\"should not set height and .expanded-content-opened on expanded content\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 0;\n\n await page.rootInstance.setExpandedContentStyle(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n page.rootInstance.expandedContentEl.className.split(\" \")\n ).not.toContain(\"expanded-content-opened\");\n expect(page.rootInstance.expandedContentEl.style.height).toBe(\"\");\n\n await page.rootInstance.disconnectedCallback();\n });\n\n it(\"should set visibility on expanded content to hidden\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 0;\n\n await page.rootInstance.hideExpandedContent(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n (\n page.rootInstance.expandedContentEl as HTMLDivElement\n ).style.getPropertyValue(\"--ic-expanded-content-visibility\")\n ).toBe(\"hidden\");\n });\n\n it(\"should set visibility to undefined if client height is greater than 0\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 50;\n\n await page.rootInstance.hideExpandedContent(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n (\n page.rootInstance.expandedContentEl as HTMLDivElement\n ).style.getPropertyValue(\"--ic-expanded-content-visibility\")\n ).toBe(\"\");\n });\n\n it(\"should call 'setFocus' when accordion can be focused\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n //Can't expect anything in this test - this is to increase code coverage only\n await page.rootInstance.setFocus().toHaveBeenCalled;\n });\n\n it(\"should call setExpandedContentStyle when transitionend in animateExpandedContent and expanded is true\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const setExpandedContentStyleSpy = jest.spyOn(\n page.rootInstance,\n \"setExpandedContentStyle\"\n );\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.scrollHeight = 50;\n page.rootInstance.expanded = true;\n\n await page.rootInstance.animateExpandedContent();\n\n const event = new Event(\"transitionend\");\n page.rootInstance.expandedContentEl.dispatchEvent(event);\n\n expect(setExpandedContentStyleSpy).toHaveBeenCalled();\n });\n\n it(\"should call hideExpandedContent when transitionend in animateExpandedContent and expanded is false\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const hideExpandedContentSpy = jest.spyOn(\n page.rootInstance,\n \"hideExpandedContent\"\n );\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.scrollHeight = 50;\n page.rootInstance.expanded = false;\n\n await page.rootInstance.animateExpandedContent();\n\n const event = new Event(\"transitionend\");\n page.rootInstance.expandedContentEl.dispatchEvent(event);\n\n expect(hideExpandedContentSpy).toHaveBeenCalled();\n });\n });\n});\n"]}

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

@@ -451,7 +451,8 @@ video {
 .container {
   min-height: 3.5rem;
-  border-radius: var(--ic-border-radius);
+  border-radius: var(--ic-space-xxs) var(--ic-space-xxxs) var(--ic-space-xxxs)
+    var(--ic-space-xxs);
   position: relative;
   display: flex;
   align-items: center;
@@ -459,22 +460,27 @@ video {
 .container-neutral {
   background-color: var(--ic-alert-background-neutral);
+  border: var(--ic-space-xxxs) solid var(--ic-alert-border-neutral);
 }
 .container-info {
   background-color: var(--ic-alert-background-info);
+  border: var(--ic-space-xxxs) solid var(--ic-alert-border-info);
 }
 .container-warning {
   background-color: var(--ic-alert-background-warning);
+  border: var(--ic-space-xxxs) solid var(--ic-alert-border-warning);
 }
 .container-error {
   background-color: var(--ic-alert-background-error);
+  border: var(--ic-space-xxxs) solid var(--ic-alert-border-error);
 }
 .container-success {
   background-color: var(--ic-alert-background-success);
+  border: var(--ic-space-xxxs) solid var(--ic-alert-border-success);
 }
 .alert-icon-container {

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

@@ -1,7 +1,7 @@
 import { Host, h, forceUpdate, } from "@stencil/core";
 import closeIcon from "../../assets/close-icon.svg";
 import { isSlotUsed, checkSlotInChildMutations } from "../../utils/helpers";
-import { IcThemeForegroundEnum, } from "../../utils/types";
+import { IcBrandForegroundEnum, } from "../../utils/types";
 import { VARIANT_ICONS } from "../../utils/constants";
 /**
  * @slot message - Content is placed to the right of the title.
@@ -55,7 +55,7 @@ export class Alert {
     render() {
         const { variant, heading, message, titleAbove, dismissible, announced, visible, showDefaultIcon, theme, } = this;
         return (visible && (h(Host, { role: announced ? "alert" : null, class: {
-                [IcThemeForegroundEnum.Dark]: true,
+                [IcBrandForegroundEnum.Dark]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
             } }, h("div", { class: {
                 ["container"]: true,
@@ -80,7 +80,7 @@ export class Alert {
             }, variant: "subtitle-large" }, h("p", null, heading))), h("slot", { name: "message" }, h("ic-typography", { variant: "body" }, message))), isSlotUsed(this.el, "action") && (h("div", { class: "alert-action-container" }, h("slot", { name: "action" })))), h("div", { class: "dismiss-icon-container" }, dismissible && (h("ic-button", { class: {
                 ["svg-container"]: true,
                 ["dismiss-icon"]: true,
-            }, innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", title: "dismiss" })))))));
+            }, innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", theme: "dark", title: "Dismiss" })))))));
     }
     static get is() { return "ic-alert"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-alert.js","sourceRoot":"","sources":["../../../src/components/ic-alert/ic-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, checkSlotInChildMutations } from \"../../utils/helpers\";\nimport {\n IcThemeForegroundEnum,\n IcStatusVariants,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/*\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced?: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the default icon for the neutral variant will appear on the left of the alert.\n /\n @Prop() showDefaultIcon: boolean = true;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove?: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant?: IcStatusVariants = \"neutral\";\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight > 24) this.alertTitleWrap = true;\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"action\")\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n showDefaultIcon,\n theme,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [IcThemeForegroundEnum.Dark]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n isSlotUsed(this.el, \"neutral-icon\") ? (\n <div class=\"alert-icon svg-container icon-neutral\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n ) : showDefaultIcon ? (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n ) : (\n <div class=\"icon-placeholder\"></div>\n )\n ) : (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove \|\| this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove \|\| this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n title=\"dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-alert.js","sourceRoot":"","sources":["../../../src/components/ic-alert/ic-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, checkSlotInChildMutations } from \"../../utils/helpers\";\nimport {\n IcBrandForegroundEnum,\n IcStatusVariants,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/*\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced?: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the default icon for the neutral variant will appear on the left of the alert.\n /\n @Prop() showDefaultIcon: boolean = true;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove?: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant?: IcStatusVariants = \"neutral\";\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight > 24) this.alertTitleWrap = true;\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"action\")\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n showDefaultIcon,\n theme,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [IcBrandForegroundEnum.Dark]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n isSlotUsed(this.el, \"neutral-icon\") ? (\n <div class=\"alert-icon svg-container icon-neutral\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n ) : showDefaultIcon ? (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n ) : (\n <div class=\"icon-placeholder\"></div>\n )\n ) : (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove \|\| this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove \|\| this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n theme=\"dark\"\n title=\"Dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"]}

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

@@ -123,7 +123,7 @@ describe("ic-alert component", () => {
                             </div>
                         </div>
                         <div class="dismiss-icon-container">
-                            <ic-button class="dismiss-icon svg-container" title="dismiss" variant="icon">
+                            <ic-button class="dismiss-icon svg-container" theme="dark" title="Dismiss" variant="icon">
                                 svg
                             </ic-button>
                         </div>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-alert.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-alert/test/basic/ic-alert.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,8CAA8C;SACrD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;oBA0Bd,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,8CAA8C;SACrD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;oBAuBd,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+DAA+D,EAAE,KAAK,IAAI,EAAE;QAC7E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,mFAAmF;SAC1F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2Bd,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4DAA4D,EAAE,KAAK,IAAI,EAAE;QAC1E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,sEAAsE;SAC7E,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0BV,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,kIAAkI;SACzI,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;oBA0Bd,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;;;;;;SAOH;SACJ,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA+BlB,CAAC,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;QAC1F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,iGAAiG;SACxG,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2Bd,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+FAA+F,EAAE,KAAK,IAAI,EAAE;QAC7G,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,uIAAuI;SAC9I,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA4BzB,CAAC,CAAC;IACT,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,sEAAsE;SAC7E,CAAC,CAAC;QAEH,IAAI,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAClD,uBAAuB,CACxB,CAAC;QACF,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAE5E,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC7B,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAErC,MAAM,aAAa,CAAC,KAAK,EAAE,CAAC;QAE5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAE1E,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,8CAA8C;SACrD,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAEtC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC;YACrC;gBACE,IAAI,EAAE,WAAW;gBACjB,UAAU,EAAE,CAAC,MAAM,CAAC;gBACpB,YAAY,EAAE,EAAE;aACjB;SACF,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../../ic-alert\";\n\ndescribe(\"ic-alert component\", () => {\n it(\"should render with a heading when supplied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Test heading\"></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Test heading\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Test heading\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\"></ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n </div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render with a message when supplied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"Test message\"></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" message=\"Test message\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n Test message\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n </div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render an action in the correct position when supplied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"This has an action\"><button slot=\"action\"></button></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" message=\"This has an action\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This has an action\n </ic-typography>\n </slot>\n </div>\n <div class=\"alert-action-container\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n </div>\n </div>\n </mock:shadow-root>\n <button slot=\"action\"></button>\n </ic-alert>`);\n });\n\n it(\"should render with a dismiss icon when the prop is applied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" message=\"This is dismissible\" dismissible=true role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This is dismissible\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n <ic-button class=\"dismiss-icon svg-container\" title=\"dismiss\" variant=\"icon\">\n svg\n </ic-button>\n </div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render an element in the message slot\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Using custom message\"><ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Using custom message\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Using custom message\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\"></ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n <ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography>\n </ic-alert>`);\n });\n\n it(\"should render an icon in the neutral-icon slot\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `\n <ic-alert heading=\"Using custom icon\" message=\"This has a slotted icon\">\n <svg slot=\"neutral-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\">\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"/>\n </svg>\n </ic-alert>\n `,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Using custom icon\" message=\"This has a slotted icon\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <div class=\"alert-icon icon-neutral svg-container\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Using custom icon\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This has a slotted icon\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n <svg fill=\"#000000\" height=\"24px\" slot=\"neutral-icon\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n </ic-alert>`);\n });\n\n it(\"should render with no icon when the show-default-icon prop is set to false\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"No icon\" message=\"This alert has no icon\" show-defaul-icon=false></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"No icon\" message=\"This alert has no icon\" role=\"alert\" show-defaul-icon=\"false\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n No icon\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This alert has no icon\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render default icon of success variant when the show-default-icon prop is set to false\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Success\" message=\"This alert has the default success icon\" variant=\"success\" show-default-icon=\"false\"></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Success\" message=\"This alert has the default success icon\" role=\"alert\" show-default-icon=\"false\" variant=\"success\">\n <mock:shadow-root>\n <div class=\"container container-success\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-success\"></div>\n <span class=\"alert-icon icon-success svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Success\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This alert has the default success icon\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n </ic-alert>\n `);\n });\n\n it(\"should close on dismiss icon click\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n });\n\n let alert = await page.root.shadowRoot.querySelector(\n \"div.container-neutral\"\n );\n const dismissButton = await page.root.shadowRoot.querySelector(\"ic-button\");\n\n expect(alert).not.toBeNull();\n expect(dismissButton).not.toBeNull();\n\n await dismissButton.click();\n\n await page.waitForChanges();\n alert = await page.root.shadowRoot.querySelector(\"div.container-neutral\");\n\n expect(alert).toBeNull();\n });\n\n it(\"should test rendering an action after initial render\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Test heading\"></ic-alert>`,\n });\n\n const action = document.createElement(\"button\");\n action.setAttribute(\"slot\", \"action\");\n\n page.rootInstance.hostMutationCallback([\n {\n type: \"childList\",\n addedNodes: [action],\n removedNodes: [],\n },\n ]);\n });\n});\n"]}
1	+ {"version":3,"file":"ic-alert.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-alert/test/basic/ic-alert.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../../ic-alert\";\n\ndescribe(\"ic-alert component\", () => {\n it(\"should render with a heading when supplied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Test heading\"></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Test heading\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Test heading\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\"></ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n </div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render with a message when supplied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"Test message\"></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" message=\"Test message\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n Test message\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n </div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render an action in the correct position when supplied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"This has an action\"><button slot=\"action\"></button></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" message=\"This has an action\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This has an action\n </ic-typography>\n </slot>\n </div>\n <div class=\"alert-action-container\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n </div>\n </div>\n </mock:shadow-root>\n <button slot=\"action\"></button>\n </ic-alert>`);\n });\n\n it(\"should render with a dismiss icon when the prop is applied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" message=\"This is dismissible\" dismissible=true role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This is dismissible\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n <ic-button class=\"dismiss-icon svg-container\" theme=\"dark\" title=\"Dismiss\" variant=\"icon\">\n svg\n </ic-button>\n </div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render an element in the message slot\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Using custom message\"><ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Using custom message\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Using custom message\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\"></ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n <ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography>\n </ic-alert>`);\n });\n\n it(\"should render an icon in the neutral-icon slot\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `\n <ic-alert heading=\"Using custom icon\" message=\"This has a slotted icon\">\n <svg slot=\"neutral-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\">\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"/>\n </svg>\n </ic-alert>\n `,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Using custom icon\" message=\"This has a slotted icon\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <div class=\"alert-icon icon-neutral svg-container\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Using custom icon\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This has a slotted icon\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n <svg fill=\"#000000\" height=\"24px\" slot=\"neutral-icon\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n </ic-alert>`);\n });\n\n it(\"should render with no icon when the show-default-icon prop is set to false\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"No icon\" message=\"This alert has no icon\" show-defaul-icon=false></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"No icon\" message=\"This alert has no icon\" role=\"alert\" show-defaul-icon=\"false\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n No icon\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This alert has no icon\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render default icon of success variant when the show-default-icon prop is set to false\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Success\" message=\"This alert has the default success icon\" variant=\"success\" show-default-icon=\"false\"></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Success\" message=\"This alert has the default success icon\" role=\"alert\" show-default-icon=\"false\" variant=\"success\">\n <mock:shadow-root>\n <div class=\"container container-success\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-success\"></div>\n <span class=\"alert-icon icon-success svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Success\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This alert has the default success icon\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n </ic-alert>\n `);\n });\n\n it(\"should close on dismiss icon click\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n });\n\n let alert = await page.root.shadowRoot.querySelector(\n \"div.container-neutral\"\n );\n const dismissButton = await page.root.shadowRoot.querySelector(\"ic-button\");\n\n expect(alert).not.toBeNull();\n expect(dismissButton).not.toBeNull();\n\n await dismissButton.click();\n\n await page.waitForChanges();\n alert = await page.root.shadowRoot.querySelector(\"div.container-neutral\");\n\n expect(alert).toBeNull();\n });\n\n it(\"should test rendering an action after initial render\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Test heading\"></ic-alert>`,\n });\n\n const action = document.createElement(\"button\");\n action.setAttribute(\"slot\", \"action\");\n\n page.rootInstance.hostMutationCallback([\n {\n type: \"childList\",\n addedNodes: [action],\n removedNodes: [],\n },\n ]);\n });\n});\n"]}

package/dist/collection/components/ic-back-to-top/ic-back-to-top.css CHANGED Viewed

@@ -454,7 +454,7 @@ video {
 ic-button {
   height: 2.5rem;
   align-items: center;
-  background-color: var(--ic-architectural-white);
+  background-color: var(--ic-color-background-primary);
   border-radius: 5rem;
   box-shadow: var(--ic-elevation-overlay);
   visibility: hidden;
@@ -467,9 +467,12 @@ ic-button {
   z-index: var(--ic-z-index-back-to-top);
 }
+:host([variant="icon"]) ic-button::part(button) {
+  margin: 0;
+}
 ic-button::part(button) {
   border-radius: 5rem;
-  border: var(--ic-border-width) solid var(--ic-action-default);
 }
 ic-button.show {

package/dist/collection/components/ic-back-to-top/ic-back-to-top.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import ArrowUpward from "./assets/ArrowUpward.svg";
 import { onComponentPropUndefinedChange, onComponentRequiredPropUndefined, } from "../../utils/helpers";
 const backToTopLabel = "Back to top";
@@ -87,6 +87,7 @@ export class BackToTop {
         this.footerVisible = false;
         this.targetElVisible = true;
         this.target = undefined;
+        this.theme = "inherit";
         this.variant = "default";
     }
     watchPropHandler(newValue, oldValue) {
@@ -115,15 +116,17 @@ export class BackToTop {
     }
     render() {
         const { variant, bannerOffset, targetElVisible, footerVisible } = this;
-        const btnVariant = variant === "icon" ? "icon" : "tertiary";
+        const btnVariant = variant === "icon" ? "icon-secondary" : "secondary";
         const size = variant === "icon" ? "large" : "medium";
         const label = variant === "icon" ? "" : backToTopLabel;
-        return (h("ic-button", { "aria-label": backToTopLabel, variant: btnVariant, size: size, onClick: this.handleClick, class: {
+        return (h(Host, { class: {
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
+            } }, h("ic-button", { "aria-label": backToTopLabel, variant: btnVariant, size: size, onClick: this.handleClick, class: {
                 ["offset-banner"]: bannerOffset,
                 ["show"]: !targetElVisible,
                 ["by-footer"]: footerVisible,
                 ["icon-only"]: variant === "icon",
-            } }, h("span", { class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), label));
+            }, theme: this.theme }, h("span", { class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), label)));
     }
     static get is() { return "ic-back-to-top"; }
     static get encapsulation() { return "shadow"; }
@@ -157,6 +160,30 @@ export class BackToTop {
                 "attribute": "target",
                 "reflect": false
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/ic-back-to-top/ic-back-to-top.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcBackToTopVariants } from \"./ic-back-to-top.types\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n tag: \"ic-back-to-top\",\n styleUrl: \"ic-back-to-top.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BackToTop {\n private isTargetElNull: boolean;\n private targetEl: Element;\n private topObserver: IntersectionObserver = null;\n\n @Element() el: HTMLIcBackToTopElement;\n\n @State() bannerOffset: boolean = false;\n @State() footerVisible: boolean = false;\n @State() targetElVisible: boolean = true;\n\n /*\n The ID of the element to jump back to when the link is clicked.\n /\n @Prop() target!: string;\n\n /\n The variant of the button to render\n */\n @Prop() variant: IcBackToTopVariants = \"default\";\n\n @Watch(\"target\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n onComponentPropUndefinedChange(oldValue, newValue, () => {\n this.createTopObserver(newValue);\n });\n }\n\n componentWillLoad(): void {\n this.createTopObserver(this.target);\n this.checkForClassificationBanner();\n\n //observer for when footer scrolls into view\n let footers = document.querySelectorAll(\n \"ic-footer\"\n ) as NodeListOf<HTMLElement>;\n if (footers.length === 0) {\n footers = document.querySelectorAll(\"footer\");\n }\n\n if (footers.length) {\n const footerEl = footers[footers.length - 1];\n const threshold = this.bannerOffset ? 0.15 : 0;\n const footerObserver = new IntersectionObserver(\n this.footerObserverCallback,\n { threshold: [threshold] }\n );\n footerObserver.observe(footerEl);\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.target, propName: \"target\" }],\n \"Back to Top\"\n );\n }\n\n private getObservedEl = () => {\n return document.querySelector(\"#ic-back-to-top-target\");\n };\n\n private setTargetElVisible = (visible: boolean) => {\n this.targetElVisible = visible;\n };\n\n private setFooterVisible = (visible: boolean) => {\n this.checkForClassificationBanner();\n this.footerVisible =\n typeof window !== \"undefined\" && window.scrollY === 0 ? false : visible;\n };\n\n private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setTargetElVisible(entries[0].isIntersecting);\n };\n\n private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setFooterVisible(entries[0].isIntersecting);\n };\n\n private findTargetEl = (target: string): Element => {\n let targetElement: Element = null;\n if (target === null \|\| target === undefined) {\n console.log(\n \"Error: No target ID specified for back to top component - defaulting to top of page\"\n );\n } else {\n targetElement = document.querySelector(\n `${target.startsWith(\"#\") ? \"\" : \"#\"}${target}`\n );\n if (targetElement === null) {\n console.log(\n `Error: Back to top target element '${target}' not found - defaulting to top of page`\n );\n }\n }\n return targetElement;\n };\n\n private createTopObserver = (target: string) => {\n this.targetEl = this.findTargetEl(target);\n let objParent: HTMLElement;\n\n //remove old element & observer\n if (this.topObserver !== null) {\n const observedEl = this.getObservedEl();\n if (observedEl !== null) {\n this.topObserver.unobserve(observedEl);\n observedEl.remove();\n }\n }\n\n if (this.targetEl === null) {\n objParent = document.body;\n this.targetEl = objParent.firstElementChild;\n this.isTargetElNull = true;\n } else {\n objParent = this.targetEl.parentNode as HTMLElement;\n this.isTargetElNull = false;\n }\n\n //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n const objBackToTopTargetEl = document.createElement(\"div\");\n objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n objBackToTopTargetEl.setAttribute(\"tabindex\", \"-1\"); // Needed for virtual cursor behaviour to work\n objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n // resize observer needs to factor in any top margin on the target el\n const marginTop = getComputedStyle(this.targetEl).marginTop;\n this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n threshold: [0],\n rootMargin: `${marginTop} 0px 0px 0px`,\n });\n this.topObserver.observe(objBackToTopTargetEl);\n };\n\n private handleClick = () => {\n if (this.isTargetElNull) {\n window.scrollTo(0, 0);\n } else {\n this.targetEl.scrollIntoView();\n }\n // Get virtual cursor to move\n (this.getObservedEl() as HTMLElement).focus();\n };\n\n private checkForClassificationBanner = () => {\n //adjust position for classification banner at bottom\n const banners = document.querySelectorAll(\n \"ic-classification-banner:not([inline='true'])\"\n );\n this.bannerOffset = banners.length > 0;\n };\n\n render() {\n const { variant, bannerOffset, targetElVisible, footerVisible } = this;\n const btnVariant = variant === \"icon\" ? \"icon\" : \"tertiary\";\n const size = variant === \"icon\" ? \"large\" : \"medium\";\n const label = variant === \"icon\" ? \"\" : backToTopLabel;\n\n return (\n <ic-button\n aria-label={backToTopLabel}\n variant={btnVariant}\n size={size}\n onClick={this.handleClick}\n class={{\n [\"offset-banner\"]: bannerOffset,\n [\"show\"]: !targetElVisible,\n [\"by-footer\"]: footerVisible,\n [\"icon-only\"]: variant === \"icon\",\n }}\n >\n <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n {label}\n </ic-button>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EACL,8BAA8B,EAC9B,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAI7B,MAAM,cAAc,GAAG,aAAa,CAAC;AASrC,MAAM,OAAO,SAAS;;QAGZ,gBAAW,GAAyB,IAAI,CAAC;QA6DzC,kBAAa,GAAG,GAAG,EAAE;YAC3B,OAAO,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAC1D,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,OAAgB,EAAE,EAAE;YAChD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QACjC,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,OAAgB,EAAE,EAAE;YAC9C,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACpC,IAAI,CAAC,aAAa;gBAChB,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;QAC5E,CAAC,CAAC;QAEM,6BAAwB,GAAG,CAAC,OAAoC,EAAE,EAAE;YAC1E,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;QACrD,CAAC,CAAC;QAEM,2BAAsB,GAAG,CAAC,OAAoC,EAAE,EAAE;YACxE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;QACnD,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,MAAc,EAAW,EAAE;YACjD,IAAI,aAAa,GAAY,IAAI,CAAC;YAClC,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;gBAC5C,OAAO,CAAC,GAAG,CACT,qFAAqF,CACtF,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,aAAa,GAAG,QAAQ,CAAC,aAAa,CACpC,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,MAAM,EAAE,CAChD,CAAC;gBACF,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;oBAC3B,OAAO,CAAC,GAAG,CACT,sCAAsC,MAAM,yCAAyC,CACtF,CAAC;gBACJ,CAAC;YACH,CAAC;YACD,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,MAAc,EAAE,EAAE;YAC7C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;YAC1C,IAAI,SAAsB,CAAC;YAE3B,+BAA+B;YAC/B,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,EAAE,CAAC;gBAC9B,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;gBACxC,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;oBACxB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;oBACvC,UAAU,CAAC,MAAM,EAAE,CAAC;gBACtB,CAAC;YACH,CAAC;YAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;gBAC3B,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC;gBAC1B,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,iBAAiB,CAAC;gBAC5C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC7B,CAAC;iBAAM,CAAC;gBACN,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAyB,CAAC;gBACpD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC9B,CAAC;YAED,6GAA6G;YAC7G,MAAM,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC3D,oBAAoB,CAAC,YAAY,CAAC,IAAI,EAAE,uBAAuB,CAAC,CAAC;YACjE,oBAAoB,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,8CAA8C;YACnG,SAAS,CAAC,YAAY,CAAC,oBAAoB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YAE5D,qEAAqE;YACrE,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC;YAC5D,IAAI,CAAC,WAAW,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,wBAAwB,EAAE;gBACzE,SAAS,EAAE,CAAC,CAAC,CAAC;gBACd,UAAU,EAAE,GAAG,SAAS,cAAc;aACvC,CAAC,CAAC;YACH,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;QACjD,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC;YACjC,CAAC;YACD,6BAA6B;YAC5B,IAAI,CAAC,aAAa,EAAkB,CAAC,KAAK,EAAE,CAAC;QAChD,CAAC,CAAC;QAEM,iCAA4B,GAAG,GAAG,EAAE;YAC1C,qDAAqD;YACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CACvC,+CAA+C,CAChD,CAAC;YACF,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;QACzC,CAAC,CAAC;4BAvJ+B,KAAK;6BACJ,KAAK;+BACH,IAAI;;qBAUV,SAAS;uBAKA,SAAS;;IAGhD,gBAAgB,CAAC,QAAgB,EAAE,QAAgB;QACjD,uGAAuG;QACvG,8BAA8B,CAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE;YACtD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,IAAI,CAAC,4BAA4B,EAAE,CAAC;QAEpC,4CAA4C;QAC5C,IAAI,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CACrC,WAAW,CACe,CAAC;QAC7B,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;YACnB,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/C,MAAM,cAAc,GAAG,IAAI,oBAAoB,CAC7C,IAAI,CAAC,sBAAsB,EAC3B,EAAE,SAAS,EAAE,CAAC,SAAS,CAAC,EAAE,CAC3B,CAAC;YACF,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAC3C,aAAa,CACd,CAAC;IACJ,CAAC;IAkGD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QACvE,MAAM,UAAU,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC;QACvE,MAAM,IAAI,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;QACrD,MAAM,KAAK,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;QAEvD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,YAAY,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;aACrD;YAED,+BACc,cAAc,EAC1B,OAAO,EAAE,UAAU,EACnB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;oBACL,CAAC,eAAe,CAAC,EAAE,YAAY;oBAC/B,CAAC,MAAM,CAAC,EAAE,CAAC,eAAe;oBAC1B,CAAC,WAAW,CAAC,EAAE,aAAa;oBAC5B,CAAC,WAAW,CAAC,EAAE,OAAO,KAAK,MAAM;iBAClC,EACD,KAAK,EAAE,IAAI,CAAC,KAAK;gBAEjB,YAAM,KAAK,EAAC,qBAAqB,EAAC,SAAS,EAAE,WAAW,GAAI;gBAC3D,KAAK,CACI,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { IcBackToTopVariants } from \"./ic-back-to-top.types\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n tag: \"ic-back-to-top\",\n styleUrl: \"ic-back-to-top.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BackToTop {\n private isTargetElNull: boolean;\n private targetEl: Element;\n private topObserver: IntersectionObserver = null;\n\n @Element() el: HTMLIcBackToTopElement;\n\n @State() bannerOffset: boolean = false;\n @State() footerVisible: boolean = false;\n @State() targetElVisible: boolean = true;\n\n /*\n The ID of the element to jump back to when the link is clicked.\n /\n @Prop() target!: string;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n The variant of the button to render\n */\n @Prop() variant: IcBackToTopVariants = \"default\";\n\n @Watch(\"target\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n onComponentPropUndefinedChange(oldValue, newValue, () => {\n this.createTopObserver(newValue);\n });\n }\n\n componentWillLoad(): void {\n this.createTopObserver(this.target);\n this.checkForClassificationBanner();\n\n //observer for when footer scrolls into view\n let footers = document.querySelectorAll(\n \"ic-footer\"\n ) as NodeListOf<HTMLElement>;\n if (footers.length === 0) {\n footers = document.querySelectorAll(\"footer\");\n }\n\n if (footers.length) {\n const footerEl = footers[footers.length - 1];\n const threshold = this.bannerOffset ? 0.15 : 0;\n const footerObserver = new IntersectionObserver(\n this.footerObserverCallback,\n { threshold: [threshold] }\n );\n footerObserver.observe(footerEl);\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.target, propName: \"target\" }],\n \"Back to Top\"\n );\n }\n\n private getObservedEl = () => {\n return document.querySelector(\"#ic-back-to-top-target\");\n };\n\n private setTargetElVisible = (visible: boolean) => {\n this.targetElVisible = visible;\n };\n\n private setFooterVisible = (visible: boolean) => {\n this.checkForClassificationBanner();\n this.footerVisible =\n typeof window !== \"undefined\" && window.scrollY === 0 ? false : visible;\n };\n\n private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setTargetElVisible(entries[0].isIntersecting);\n };\n\n private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setFooterVisible(entries[0].isIntersecting);\n };\n\n private findTargetEl = (target: string): Element => {\n let targetElement: Element = null;\n if (target === null \|\| target === undefined) {\n console.log(\n \"Error: No target ID specified for back to top component - defaulting to top of page\"\n );\n } else {\n targetElement = document.querySelector(\n `${target.startsWith(\"#\") ? \"\" : \"#\"}${target}`\n );\n if (targetElement === null) {\n console.log(\n `Error: Back to top target element '${target}' not found - defaulting to top of page`\n );\n }\n }\n return targetElement;\n };\n\n private createTopObserver = (target: string) => {\n this.targetEl = this.findTargetEl(target);\n let objParent: HTMLElement;\n\n //remove old element & observer\n if (this.topObserver !== null) {\n const observedEl = this.getObservedEl();\n if (observedEl !== null) {\n this.topObserver.unobserve(observedEl);\n observedEl.remove();\n }\n }\n\n if (this.targetEl === null) {\n objParent = document.body;\n this.targetEl = objParent.firstElementChild;\n this.isTargetElNull = true;\n } else {\n objParent = this.targetEl.parentNode as HTMLElement;\n this.isTargetElNull = false;\n }\n\n //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n const objBackToTopTargetEl = document.createElement(\"div\");\n objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n objBackToTopTargetEl.setAttribute(\"tabindex\", \"-1\"); // Needed for virtual cursor behaviour to work\n objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n // resize observer needs to factor in any top margin on the target el\n const marginTop = getComputedStyle(this.targetEl).marginTop;\n this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n threshold: [0],\n rootMargin: `${marginTop} 0px 0px 0px`,\n });\n this.topObserver.observe(objBackToTopTargetEl);\n };\n\n private handleClick = () => {\n if (this.isTargetElNull) {\n window.scrollTo(0, 0);\n } else {\n this.targetEl.scrollIntoView();\n }\n // Get virtual cursor to move\n (this.getObservedEl() as HTMLElement).focus();\n };\n\n private checkForClassificationBanner = () => {\n //adjust position for classification banner at bottom\n const banners = document.querySelectorAll(\n \"ic-classification-banner:not([inline='true'])\"\n );\n this.bannerOffset = banners.length > 0;\n };\n\n render() {\n const { variant, bannerOffset, targetElVisible, footerVisible } = this;\n const btnVariant = variant === \"icon\" ? \"icon-secondary\" : \"secondary\";\n const size = variant === \"icon\" ? \"large\" : \"medium\";\n const label = variant === \"icon\" ? \"\" : backToTopLabel;\n\n return (\n <Host\n class={{\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <ic-button\n aria-label={backToTopLabel}\n variant={btnVariant}\n size={size}\n onClick={this.handleClick}\n class={{\n [\"offset-banner\"]: bannerOffset,\n [\"show\"]: !targetElVisible,\n [\"by-footer\"]: footerVisible,\n [\"icon-only\"]: variant === \"icon\",\n }}\n theme={this.theme}\n >\n <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n {label}\n </ic-button>\n </Host>\n );\n }\n}\n"]}