npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.10 → 3.0.0-alpha.12 - Mend

@ukic/web-components 3.0.0-alpha.10 → 3.0.0-alpha.12

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-breadcrumb.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport {\n getSlotElements,\n isPropDefined,\n isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n/*\n @slot icon - Content will be rendered to the left of the breadcrumb page title.\n /\n@Component({\n tag: \"ic-breadcrumb\",\n styleUrl: \"ic-breadcrumb.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Breadcrumb {\n private HREF_ATTR = \"href\";\n private linkSlotContent: HTMLElement;\n private slottedLinkEl: HTMLElement \| null;\n private slottedLinkHref: string;\n\n @Element() el: HTMLIcBreadcrumbElement;\n\n /\n If `true`, aria-current will be set on the breadcrumb.\n /\n @Prop() current?: boolean = false;\n @Watch(\"current\")\n watchCurrentHandler(): void {\n this.updatedSlottedLinkFocus();\n this.el.ariaCurrent = this.current ? \"page\" : null;\n }\n\n /\n The URL that the breadcrumb link points to.\n /\n @Prop() href?: string;\n\n /\n @internal If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.\n /\n @Prop() monochrome?: boolean = false;\n\n /\n The title of the breadcrumb.\n /\n @Prop() pageTitle!: string;\n\n /\n @internal If `true`, back icon will be displayed.\n /\n @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n /\n @internal 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 // Prevent focus on breadcrumb if current page and contains slotted link\n private updatedSlottedLinkFocus = (): void => {\n // Sets tabindex on wrong element in unit test snapshots\n // - related to known Jest issue: https://github.com/ionic-team/stencil/issues/2830\n if (this.linkSlotContent) {\n this.linkSlotContent.tabIndex = this.current ? -1 : 0; // Prevent focus\n }\n\n if (this.slottedLinkEl) {\n if (this.current) {\n this.slottedLinkEl.removeAttribute(this.HREF_ATTR); // Prevent screen reader announcing breadcrumb as a link\n } else {\n this.slottedLinkEl.setAttribute(this.HREF_ATTR, this.slottedLinkHref);\n }\n }\n };\n\n private getSlottedLinkEl = (): HTMLElement \| null => {\n const link = this.linkSlotContent;\n if (link) {\n const elWithHref = link.hasAttribute(this.HREF_ATTR)\n ? link\n : link.querySelector(\"[href]\");\n return elWithHref as HTMLElement;\n }\n return null;\n };\n\n componentDidLoad(): void {\n const slottedLinkWrapper =\n this.el.shadowRoot.querySelector(\".link-wrapper\");\n\n if (slottedLinkWrapper) {\n this.linkSlotContent = getSlotElements(\n slottedLinkWrapper\n )[0] as HTMLElement;\n this.slottedLinkEl = this.getSlottedLinkEl();\n this.slottedLinkHref = this.slottedLinkEl?.getAttribute(\"href\");\n this.updatedSlottedLinkFocus();\n }\n }\n\n componentWillRender(): void {\n this.setSlottedCurrentPageClass();\n }\n\n /\n Sets focus on the breadcrumb.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"ic-link\")) {\n this.el.shadowRoot.querySelector(\"ic-link\").focus();\n }\n }\n\n private renderDefaultBreadcrumb = (\n current: boolean,\n pageTitle: string,\n describedById: string,\n href: string\n ): IcBreadcrumbDefault => {\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n\n if (current && hasPageTitle) {\n return (\n <span\n class={{\n \"current-page-container\": current,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </span>\n );\n }\n\n return (\n <ic-link\n theme={this.theme}\n monochrome={this.monochrome}\n href={href}\n class=\"breadcrumb-link\"\n aria-describedby={this.showBackIcon && describedById && describedById}\n >\n {this.showBackIcon && (\n <div class=\"back-icon\" innerHTML={backIcon}></div>\n )}\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </ic-link>\n );\n };\n\n private setSlottedCurrentPageClass = () => {\n const icLink = this.el.querySelector(\"ic-link\");\n const currentPage = \"current-page\";\n if (icLink) {\n icLink.classList.remove(currentPage);\n if (this.current) {\n const hasCurrentPageClass = icLink.classList.contains(currentPage);\n if (!hasCurrentPageClass) {\n icLink.classList.add(\"breadcrumb-link\", currentPage);\n }\n }\n }\n };\n\n render() {\n const { current, href, pageTitle } = this;\n const describedById = `${\n pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n }-describedby`;\n\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n const hasHref = href !== null && isPropDefined(href) && href !== \"\";\n\n return (\n <Host\n class={{\n \"ic-breadcrumb-back\": this.showBackIcon,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n \"ic-breadcrumb-monochrome\": this.monochrome,\n }}\n aria-current={current && \"page\"}\n role=\"listitem\"\n >\n <div class=\"breadcrumb\">\n <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n {this.showBackIcon && describedById && (\n <span\n id={describedById}\n class=\"hide\"\n >{`Back to ${pageTitle}`}</span>\n )}\n {hasPageTitle && hasHref ? (\n this.renderDefaultBreadcrumb(\n current,\n pageTitle,\n describedById,\n href\n )\n ) : (\n <span class=\"link-wrapper\">\n <slot />\n </span>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-breadcrumb.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport {\n getSlotElements,\n isPropDefined,\n isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n/*\n @slot icon - Content will be rendered to the left of the breadcrumb page title.\n /\n@Component({\n tag: \"ic-breadcrumb\",\n styleUrl: \"ic-breadcrumb.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Breadcrumb {\n private HREF_ATTR = \"href\";\n private linkSlotContent: HTMLElement;\n private slottedLinkEl: HTMLElement \| null;\n private slottedLinkHref: string;\n\n @Element() el: HTMLIcBreadcrumbElement;\n\n /\n If `true`, aria-current will be set on the breadcrumb.\n /\n @Prop() current?: boolean = false;\n @Watch(\"current\")\n watchCurrentHandler(): void {\n this.updatedSlottedLinkFocus();\n this.el.ariaCurrent = this.current ? \"page\" : null;\n }\n\n /\n The URL that the breadcrumb link points to.\n /\n @Prop() href?: string;\n\n /\n @internal If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.\n /\n @Prop() monochrome?: boolean = false;\n\n /\n The title of the breadcrumb.\n /\n @Prop() pageTitle!: string;\n\n /\n @internal If `true`, back icon will be displayed.\n /\n @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n /\n @internal 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 // Prevent focus on breadcrumb if current page and contains slotted link\n private updatedSlottedLinkFocus = (): void => {\n // Sets tabindex on wrong element in unit test snapshots\n // - related to known Jest issue: https://github.com/ionic-team/stencil/issues/2830\n if (this.linkSlotContent) {\n this.linkSlotContent.tabIndex = this.current ? -1 : 0; // Prevent focus\n }\n\n if (this.slottedLinkEl) {\n if (this.current) {\n this.slottedLinkEl.removeAttribute(this.HREF_ATTR); // Prevent screen reader announcing breadcrumb as a link\n } else {\n this.slottedLinkEl.setAttribute(this.HREF_ATTR, this.slottedLinkHref);\n }\n }\n };\n\n private getSlottedLinkEl = (): HTMLElement \| null => {\n const link = this.linkSlotContent;\n if (link) {\n const elWithHref = link.hasAttribute(this.HREF_ATTR)\n ? link\n : link.querySelector(\"[href]\");\n return elWithHref as HTMLElement;\n }\n return null;\n };\n\n componentDidLoad(): void {\n const slottedLinkWrapper =\n this.el.shadowRoot.querySelector(\".link-wrapper\");\n\n if (slottedLinkWrapper) {\n this.linkSlotContent = getSlotElements(\n slottedLinkWrapper\n )[0] as HTMLElement;\n this.slottedLinkEl = this.getSlottedLinkEl();\n this.slottedLinkHref = this.slottedLinkEl?.getAttribute(\"href\");\n this.updatedSlottedLinkFocus();\n }\n }\n\n componentWillRender(): void {\n this.setSlottedCurrentPageClass();\n }\n\n /\n Sets focus on the breadcrumb.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"ic-link\")) {\n this.el.shadowRoot.querySelector(\"ic-link\").focus();\n }\n }\n\n private renderBackIcon = () => (\n <div class=\"back-icon\" innerHTML={backIcon}></div>\n );\n\n private renderDefaultBreadcrumb = (\n current: boolean,\n pageTitle: string,\n describedById: string,\n href: string\n ): IcBreadcrumbDefault => {\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n\n if (current && hasPageTitle) {\n return (\n <span\n class={{\n \"current-page-container\": current,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </span>\n );\n }\n\n return (\n <ic-link\n theme={this.theme}\n monochrome={this.monochrome}\n href={href}\n class=\"breadcrumb-link\"\n aria-describedby={this.showBackIcon && describedById && describedById}\n >\n {this.showBackIcon && this.renderBackIcon()}\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </ic-link>\n );\n };\n\n private setSlottedCurrentPageClass = () => {\n const icLink = this.el.querySelector(\"ic-link\");\n const currentPage = \"current-page\";\n if (icLink) {\n icLink.classList.remove(currentPage);\n if (this.current) {\n const hasCurrentPageClass = icLink.classList.contains(currentPage);\n if (!hasCurrentPageClass) {\n icLink.classList.add(\"breadcrumb-link\", currentPage);\n }\n }\n }\n };\n\n render() {\n const { current, href, pageTitle } = this;\n const describedById = `${\n pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n }-describedby`;\n\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n const hasHref = href !== null && isPropDefined(href) && href !== \"\";\n\n return (\n <Host\n class={{\n \"ic-breadcrumb-back\": this.showBackIcon,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n \"ic-breadcrumb-monochrome\": this.monochrome,\n }}\n aria-current={current && \"page\"}\n role=\"listitem\"\n >\n <div class=\"breadcrumb\">\n <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n {this.showBackIcon && describedById && (\n <span\n id={describedById}\n class=\"hide\"\n >{`Back to ${pageTitle}`}</span>\n )}\n {hasPageTitle && hasHref ? (\n this.renderDefaultBreadcrumb(\n current,\n pageTitle,\n describedById,\n href\n )\n ) : (\n <div class=\"slotted-link-container\">\n {this.showBackIcon && this.renderBackIcon()}\n <span class=\"link-wrapper\">\n <slot />\n </span>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -6,7 +6,7 @@ describe("ic-breadcrumb", () => {
             components: [Breadcrumb],
             html: `<ic-breadcrumb></ic-breadcrumb>`,
         });
-        expect(page.root).toEqualHtml(`
+        expect(page.root).toMatchSnapshot(`
       <ic-breadcrumb role="listitem">
         <mock:shadow-root>
           <div class="breadcrumb">
@@ -26,7 +26,7 @@ describe("ic-breadcrumb", () => {
             components: [Breadcrumb],
             html: `<ic-breadcrumb page-title="foo" href="/"></ic-breadcrumb>`,
         });
-        expect(page.root).toEqualHtml(`
+        expect(page.root).toMatchSnapshot(`
       <ic-breadcrumb href="/" page-title="foo" role="listitem">
         <mock:shadow-root>
           <div class="breadcrumb">
@@ -46,7 +46,7 @@ describe("ic-breadcrumb", () => {
             components: [Breadcrumb],
             html: `<ic-breadcrumb page-title="foo" href="/" current="true"></ic-breadcrumb>`,
         });
-        expect(page.root).toEqualHtml(`
+        expect(page.root).toMatchSnapshot(`
       <ic-breadcrumb current="true" href="/" page-title="foo" role="listitem" aria-current="page">
         <mock:shadow-root>
           <div class="breadcrumb">
@@ -81,7 +81,7 @@ describe("ic-breadcrumb", () => {
         </svg>
       </ic-breadcrumb>`,
         });
-        expect(page.root).toEqualHtml(`
+        expect(page.root).toMatchSnapshot(`
       <ic-breadcrumb current="true" href="/" page-title="foo" aria-current="page" role="listitem">
         <mock:shadow-root>
           <div class="breadcrumb">

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-breadcrumb.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-breadcrumb/test/basic/ic-breadcrumb.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,iCAAiC;SACxC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,2DAA2D;SAClE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,0EAA0E;SACjF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;;;;;;;;;;;;;uBAeW;SAClB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;KAiB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+DAA+D,EAAE,KAAK,IAAI,EAAE;QAC7E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,iGAAiG;SACxG,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,0BAA0B,EAAE,CAAC;QAErD,MAAM,CACJ,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAC3E,CAAC,UAAU,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,iCAAiC;SACxC,CAAC,CAAC;QAEH,6EAA6E;QAC7E,MAAM,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wEAAwE,EAAE,KAAK,IAAI,EAAE;QACtF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,iGAAiG;SACxG,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QACjC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,QAAQ,GAAG,CAAC,CAAC;QAC/C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,mHAAmH;QACnH,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAClD,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,aAAa,CAAC;QAChD,IAAI;aACD,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC;aACzD,kBAAkB,EAAE,CAAC;QAExB,IAAI,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC;QAC5C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5D,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC7E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2EAA2E,EAAE,KAAK,IAAI,EAAE;QACzF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,iGAAiG;SACxG,CAAC,CAAC;QAEH,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAClD,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,aAAa,CAAC;QAChD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,IAAI;aACD,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC;aACtD,kBAAkB,EAAE,CAAC;QAExB,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QACjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;QAClC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QAChD,IAAI,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC;QAC5C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC3D,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,gBAAgB,EAAE,CAAC;QAExE,IAAI,CAAC,YAAY,CAAC,eAAe,GAAG,IAAI,CAAC;QACzC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { Breadcrumb } from \"../../ic-breadcrumb\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-breadcrumb\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: `<ic-breadcrumb></ic-breadcrumb>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-breadcrumb role=\"listitem\">\n <mock:shadow-root>\n <div class=\"breadcrumb\">\n <span aria-hidden=\"true\" class=\"chevron\">\n svg\n </span>\n <span class=\"link-wrapper\" tabindex=\"0\">\n <slot></slot>\n </span>\n </div>\n </mock:shadow-root>\n </ic-breadcrumb>\n `);\n });\n\n it(\"should render with page-title and href\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: `<ic-breadcrumb page-title=\"foo\" href=\"/\"></ic-breadcrumb>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-breadcrumb href=\"/\" page-title=\"foo\" role=\"listitem\">\n <mock:shadow-root>\n <div class=\"breadcrumb\">\n <span aria-hidden=\"true\" class=\"chevron\">\n svg\n </span>\n <ic-link theme=\"inherit\" class=\"breadcrumb-link\" href=\"/\">\n foo\n </ic-link>\n </div>\n </mock:shadow-root>\n </ic-breadcrumb>\n `);\n });\n\n it(\"should render with page-title, href, current\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: `<ic-breadcrumb page-title=\"foo\" href=\"/\" current=\"true\"></ic-breadcrumb>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-breadcrumb current=\"true\" href=\"/\" page-title=\"foo\" role=\"listitem\" aria-current=\"page\">\n <mock:shadow-root>\n <div class=\"breadcrumb\">\n <span aria-hidden=\"true\" class=\"chevron\">\n svg\n </span>\n <span class=\"current-page-container\">\n foo\n </span>\n </div>\n </mock:shadow-root>\n </ic-breadcrumb>\n `);\n });\n\n it(\"should render with icon\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: `\n <ic-breadcrumb page-title=\"foo\" href=\"/\" current=\"true\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </ic-breadcrumb>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-breadcrumb current=\"true\" href=\"/\" page-title=\"foo\" aria-current=\"page\" role=\"listitem\">\n <mock:shadow-root>\n <div class=\"breadcrumb\">\n <span aria-hidden=\"true\" class=\"chevron\">\n svg\n </span>\n <span class=\"current-page-container\">\n <slot name=\"icon\"></slot>\n foo\n </span>\n </div>\n </mock:shadow-root>\n <svg fill=\"none\" height=\"24\" slot=\"icon\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\" fill=\"currentColor\"></path>\n </svg>\n </ic-breadcrumb>\n `);\n });\n\n it(\"should add the 'current-page' class when current prop is true\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: \"<ic-breadcrumb id='ic-breadcrumb' current=true><ic-link href='/'>Link</ic-link></ic-breadcrumb>\",\n });\n\n await page.rootInstance.setSlottedCurrentPageClass();\n\n expect(\n document.querySelector(\"ic-breadcrumb\").classList.contains(\"current-page\")\n ).toBeTruthy;\n });\n\n it(\"should call 'setFocus' when breadcrumb is focused\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: `<ic-breadcrumb></ic-breadcrumb>`,\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 prevent focus on the slotted link within the current breadcrumb\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: \"<ic-breadcrumb id='ic-breadcrumb' current=true><ic-link href='/'>Link</ic-link></ic-breadcrumb>\",\n });\n\n page.rootInstance.current = true;\n page.rootInstance.linkSlotContent.tabIndex = 0;\n await page.waitForChanges();\n\n // Cannot check for actual slot updates in the HTML due to assignedElements not being available in test environment\n const slottedLinkEl = document.createElement(\"a\");\n page.rootInstance.slottedLinkEl = slottedLinkEl;\n jest\n .spyOn(page.rootInstance.slottedLinkEl, \"removeAttribute\")\n .mockImplementation();\n\n page.rootInstance.updatedSlottedLinkFocus();\n await page.waitForChanges();\n\n expect(page.rootInstance.linkSlotContent.tabIndex).toBe(-1);\n expect(page.rootInstance.slottedLinkEl.removeAttribute).toHaveBeenCalled();\n });\n\n it(\"should change to allow focus on slotted link when current prop is removed\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: \"<ic-breadcrumb id='ic-breadcrumb' current=true><ic-link href='/'>Link</ic-link></ic-breadcrumb>\",\n });\n\n const slottedLinkEl = document.createElement(\"a\");\n page.rootInstance.slottedLinkEl = slottedLinkEl;\n await page.waitForChanges();\n\n jest\n .spyOn(page.rootInstance.slottedLinkEl, \"setAttribute\")\n .mockImplementation();\n\n page.rootInstance.current = true;\n await page.waitForChanges();\n\n page.rootInstance.current = false;\n page.rootInstance.linkSlotContent.tabIndex = -1;\n page.rootInstance.updatedSlottedLinkFocus();\n await page.waitForChanges();\n\n expect(page.rootInstance.linkSlotContent.tabIndex).toBe(0);\n expect(page.rootInstance.slottedLinkEl.setAttribute).toHaveBeenCalled();\n\n page.rootInstance.linkSlotContent = null;\n await page.waitForChanges();\n\n expect(page.rootInstance.getSlottedLinkEl()).toBe(null);\n });\n});\n"]}
1	+ {"version":3,"file":"ic-breadcrumb.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-breadcrumb/test/basic/ic-breadcrumb.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { Breadcrumb } from \"../../ic-breadcrumb\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-breadcrumb\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: `<ic-breadcrumb></ic-breadcrumb>`,\n });\n\n expect(page.root).toMatchSnapshot(`\n <ic-breadcrumb role=\"listitem\">\n <mock:shadow-root>\n <div class=\"breadcrumb\">\n <span aria-hidden=\"true\" class=\"chevron\">\n svg\n </span>\n <span class=\"link-wrapper\" tabindex=\"0\">\n <slot></slot>\n </span>\n </div>\n </mock:shadow-root>\n </ic-breadcrumb>\n `);\n });\n\n it(\"should render with page-title and href\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: `<ic-breadcrumb page-title=\"foo\" href=\"/\"></ic-breadcrumb>`,\n });\n\n expect(page.root).toMatchSnapshot(`\n <ic-breadcrumb href=\"/\" page-title=\"foo\" role=\"listitem\">\n <mock:shadow-root>\n <div class=\"breadcrumb\">\n <span aria-hidden=\"true\" class=\"chevron\">\n svg\n </span>\n <ic-link theme=\"inherit\" class=\"breadcrumb-link\" href=\"/\">\n foo\n </ic-link>\n </div>\n </mock:shadow-root>\n </ic-breadcrumb>\n `);\n });\n\n it(\"should render with page-title, href, current\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: `<ic-breadcrumb page-title=\"foo\" href=\"/\" current=\"true\"></ic-breadcrumb>`,\n });\n\n expect(page.root).toMatchSnapshot(`\n <ic-breadcrumb current=\"true\" href=\"/\" page-title=\"foo\" role=\"listitem\" aria-current=\"page\">\n <mock:shadow-root>\n <div class=\"breadcrumb\">\n <span aria-hidden=\"true\" class=\"chevron\">\n svg\n </span>\n <span class=\"current-page-container\">\n foo\n </span>\n </div>\n </mock:shadow-root>\n </ic-breadcrumb>\n `);\n });\n\n it(\"should render with icon\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: `\n <ic-breadcrumb page-title=\"foo\" href=\"/\" current=\"true\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </ic-breadcrumb>`,\n });\n\n expect(page.root).toMatchSnapshot(`\n <ic-breadcrumb current=\"true\" href=\"/\" page-title=\"foo\" aria-current=\"page\" role=\"listitem\">\n <mock:shadow-root>\n <div class=\"breadcrumb\">\n <span aria-hidden=\"true\" class=\"chevron\">\n svg\n </span>\n <span class=\"current-page-container\">\n <slot name=\"icon\"></slot>\n foo\n </span>\n </div>\n </mock:shadow-root>\n <svg fill=\"none\" height=\"24\" slot=\"icon\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\" fill=\"currentColor\"></path>\n </svg>\n </ic-breadcrumb>\n `);\n });\n\n it(\"should add the 'current-page' class when current prop is true\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: \"<ic-breadcrumb id='ic-breadcrumb' current=true><ic-link href='/'>Link</ic-link></ic-breadcrumb>\",\n });\n\n await page.rootInstance.setSlottedCurrentPageClass();\n\n expect(\n document.querySelector(\"ic-breadcrumb\").classList.contains(\"current-page\")\n ).toBeTruthy;\n });\n\n it(\"should call 'setFocus' when breadcrumb is focused\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: `<ic-breadcrumb></ic-breadcrumb>`,\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 prevent focus on the slotted link within the current breadcrumb\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: \"<ic-breadcrumb id='ic-breadcrumb' current=true><ic-link href='/'>Link</ic-link></ic-breadcrumb>\",\n });\n\n page.rootInstance.current = true;\n page.rootInstance.linkSlotContent.tabIndex = 0;\n await page.waitForChanges();\n\n // Cannot check for actual slot updates in the HTML due to assignedElements not being available in test environment\n const slottedLinkEl = document.createElement(\"a\");\n page.rootInstance.slottedLinkEl = slottedLinkEl;\n jest\n .spyOn(page.rootInstance.slottedLinkEl, \"removeAttribute\")\n .mockImplementation();\n\n page.rootInstance.updatedSlottedLinkFocus();\n await page.waitForChanges();\n\n expect(page.rootInstance.linkSlotContent.tabIndex).toBe(-1);\n expect(page.rootInstance.slottedLinkEl.removeAttribute).toHaveBeenCalled();\n });\n\n it(\"should change to allow focus on slotted link when current prop is removed\", async () => {\n const page = await newSpecPage({\n components: [Breadcrumb],\n html: \"<ic-breadcrumb id='ic-breadcrumb' current=true><ic-link href='/'>Link</ic-link></ic-breadcrumb>\",\n });\n\n const slottedLinkEl = document.createElement(\"a\");\n page.rootInstance.slottedLinkEl = slottedLinkEl;\n await page.waitForChanges();\n\n jest\n .spyOn(page.rootInstance.slottedLinkEl, \"setAttribute\")\n .mockImplementation();\n\n page.rootInstance.current = true;\n await page.waitForChanges();\n\n page.rootInstance.current = false;\n page.rootInstance.linkSlotContent.tabIndex = -1;\n page.rootInstance.updatedSlottedLinkFocus();\n await page.waitForChanges();\n\n expect(page.rootInstance.linkSlotContent.tabIndex).toBe(0);\n expect(page.rootInstance.slottedLinkEl.setAttribute).toHaveBeenCalled();\n\n page.rootInstance.linkSlotContent = null;\n await page.waitForChanges();\n\n expect(page.rootInstance.getSlottedLinkEl()).toBe(null);\n });\n});\n"]}

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

@@ -78,27 +78,28 @@ export class BreadcrumbGroup {
             this.handleHiddenCollapsedBreadcrumbs();
         };
         this.renderCollapsedBreadcrumb = () => {
-            this.collapsedBreadcrumbWrapper = document.createElement("ic-breadcrumb");
-            this.collapsedBreadcrumbWrapper.classList.add("collapsed-breadcrumb-wrapper");
-            this.collapsedBreadcrumbEl = document.createElement("button");
-            const ariaLabel = document.createElement("span");
-            ariaLabel.id = "collapsed-button-label";
-            ariaLabel.innerText = "Collapsed breadcrumbs";
-            ariaLabel.className = "hide";
-            this.collapsedBreadcrumbEl.setAttribute("aria-labelledby", "collapsed-button-label");
-            const ariaDescribed = document.createElement("span");
-            ariaDescribed.id = "collapsed-button-described";
-            ariaDescribed.innerText = "Select to view collapsed breadcrumbs";
-            ariaDescribed.className = "hide";
-            this.collapsedBreadcrumbEl.setAttribute("aria-describedby", "collapsed-button-described");
-            this.collapsedBreadcrumbEl.id = "collapsed-ellipsis";
-            this.collapsedBreadcrumbEl.innerText = "...";
-            this.collapsedBreadcrumbEl.classList.add("collapsed-breadcrumb");
-            this.collapsedBreadcrumbEl.addEventListener("click", this.clickHandler);
-            this.collapsedBreadcrumbWrapper.append(ariaDescribed);
-            this.collapsedBreadcrumbWrapper.append(ariaLabel);
-            this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);
-            return this.collapsedBreadcrumbWrapper;
+            if (this.collapsedBreadcrumbEl === undefined) {
+                this.collapsedBreadcrumbWrapper = document.createElement("ic-breadcrumb");
+                this.collapsedBreadcrumbWrapper.classList.add("collapsed-breadcrumb-wrapper");
+                this.collapsedBreadcrumbEl = document.createElement("button");
+                const ariaLabel = document.createElement("span");
+                ariaLabel.id = "collapsed-button-label";
+                ariaLabel.innerText = "Collapsed breadcrumbs";
+                ariaLabel.className = "hide";
+                this.collapsedBreadcrumbEl.setAttribute("aria-labelledby", "collapsed-button-label");
+                const ariaDescribed = document.createElement("span");
+                ariaDescribed.id = "collapsed-button-described";
+                ariaDescribed.innerText = "Select to view collapsed breadcrumbs";
+                ariaDescribed.className = "hide";
+                this.collapsedBreadcrumbEl.setAttribute("aria-describedby", "collapsed-button-described");
+                this.collapsedBreadcrumbEl.id = "collapsed-ellipsis";
+                this.collapsedBreadcrumbEl.innerText = "...";
+                this.collapsedBreadcrumbEl.classList.add("collapsed-breadcrumb");
+                this.collapsedBreadcrumbEl.addEventListener("click", this.clickHandler);
+                this.collapsedBreadcrumbWrapper.append(ariaDescribed);
+                this.collapsedBreadcrumbWrapper.append(ariaLabel);
+                this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);
+            }
         };
         this.handleHiddenCollapsedBreadcrumbs = () => {
             this.collapsedBreadcrumbWrapper.remove();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-breadcrumb-group.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-breadcrumb-group\",\n styleUrl: \"ic-breadcrumb-group.css\",\n shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n private ADD_CLASS_DELAY = 50;\n private breadcrumb: HTMLIcBreadcrumbElement;\n private breadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbEl: HTMLButtonElement;\n private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n private resizeObserver: ResizeObserver = null;\n private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n @Element() el: HTMLIcBreadcrumbGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() expandedBreadcrumbs: boolean = false;\n\n /*\n If `true`, display only a single breadcrumb for the parent page with a back icon.\n /\n @Prop() backBreadcrumbOnly: boolean = false;\n @Watch(\"backBreadcrumbOnly\")\n watchBackBreadcrumbHandler(): void {\n this.setBackBreadcrumb();\n }\n\n /\n If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n /\n @Prop() collapsed: boolean = false;\n @Watch(\"collapsed\")\n watchCollapsedHandler(): void {\n this.setCollapsed();\n }\n\n /\n If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.\n /\n @Prop() monochrome?: boolean = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.setBreadcrumbMonochrome();\n }\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 @Watch(\"theme\")\n watchThemeHandler(): void {\n this.setBreadcrumbTheme();\n }\n\n componentWillLoad(): void {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n this.setBreadcrumbTheme();\n this.setBreadcrumbMonochrome();\n\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumb();\n } else {\n checkResizeObserver(this.runResizeObserver);\n }\n\n if (this.collapsed && allBreadcrumbs.length > 2) {\n if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setCollapsed();\n }\n }\n }\n\n disconnectedCallback(): void {\n this.breadcrumb &&\n this.breadcrumb.removeEventListener(\n \"transitionend\",\n this.transitionendHandler\n );\n\n this.collapsedBreadcrumbEl &&\n this.collapsedBreadcrumbEl.removeEventListener(\n \"click\",\n this.clickHandler\n );\n }\n\n private setBreadcrumbTheme = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n allBreadcrumbs.forEach((breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.theme = this.theme;\n });\n };\n\n private setBreadcrumbMonochrome = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n allBreadcrumbs.forEach((breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.monochrome = this.monochrome;\n });\n };\n\n private setBackBreadcrumb = () => {\n if (this.backBreadcrumbOnly) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.revertLastParentCollapsedBreadcrumb();\n }\n };\n\n private setBackBreadcrumbAttr = () => {\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.add(\"show\");\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n }\n };\n\n private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement \| null => {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n if (allBreadcrumbs.length === 1) {\n return null;\n }\n\n this.breadcrumbs = allBreadcrumbs;\n this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 2];\n\n return this.breadcrumb;\n };\n\n private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n private setDefaultBreadcrumbs = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n });\n };\n\n private setCollapsed = () => {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n const firstBreadcrumb = allBreadcrumbs[0];\n if (this.collapsedBreadcrumbs) {\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.remove(\"visuallyhidden\");\n breadcrumb.classList.remove(\"fade\");\n });\n }\n\n if (this.collapsed) {\n this.renderCollapsedBreadcrumb();\n\n this.collapsedBreadcrumbs = allBreadcrumbs\n .splice(1, allBreadcrumbs.length - 2)\n .filter(\n (breadcrumb) =>\n !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n );\n if (!this.backBreadcrumbOnly) {\n this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n breadcrumb.classList.add(\"hide\")\n );\n }\n\n if (firstBreadcrumb) {\n firstBreadcrumb.insertAdjacentElement(\n \"afterend\",\n this.collapsedBreadcrumbWrapper\n );\n }\n } else {\n this.collapsedBreadcrumbWrapper.remove();\n }\n };\n\n private clickHandler = () => {\n this.handleHiddenCollapsedBreadcrumbs();\n };\n\n private renderCollapsedBreadcrumb = () => {\n this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n this.collapsedBreadcrumbWrapper.classList.add(\n \"collapsed-breadcrumb-wrapper\"\n );\n this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n const ariaLabel = document.createElement(\"span\");\n ariaLabel.id = \"collapsed-button-label\";\n ariaLabel.innerText = \"Collapsed breadcrumbs\";\n ariaLabel.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-labelledby\",\n \"collapsed-button-label\"\n );\n\n const ariaDescribed = document.createElement(\"span\");\n ariaDescribed.id = \"collapsed-button-described\";\n ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n ariaDescribed.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-describedby\",\n \"collapsed-button-described\"\n );\n\n this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n this.collapsedBreadcrumbEl.innerText = \"...\";\n this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n this.collapsedBreadcrumbWrapper.append(ariaLabel);\n this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n\n return this.collapsedBreadcrumbWrapper;\n };\n\n private handleHiddenCollapsedBreadcrumbs = () => {\n this.collapsedBreadcrumbWrapper.remove();\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.add(\"visuallyhidden\");\n breadcrumb.classList.remove(\"hide\");\n setTimeout(() => {\n breadcrumb.classList.add(\"fade\");\n }, this.ADD_CLASS_DELAY);\n\n this.removeVisuallyHiddenClass(breadcrumb);\n });\n this.expandedBreadcrumbs = true;\n // Set focus to first unhidden breadcrumb\n this.collapsedBreadcrumbs[0].setFocus();\n };\n\n private transitionendHandler = (event: TransitionEvent) => {\n if (event.propertyName === \"opacity\") {\n (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n }\n };\n\n private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n };\n\n private setLastParentCollapsedBackBreadcrumb = () => {\n this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n this.setBackBreadcrumbAttr();\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.remove(\"hide\");\n this.lastParentBreadcrumb.classList.add(\"show\");\n }\n };\n\n private revertLastParentCollapsedBreadcrumb = () => {\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n if (this.collapsed) {\n this.lastParentBreadcrumb.classList.add(\"hide\");\n }\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n\n if (this.deviceSize <= DEVICE_SIZES.S) {\n this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n if (this.collapsed) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setBackBreadcrumb();\n }\n } else {\n this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n this.revertLastParentCollapsedBreadcrumb();\n if (this.expandedBreadcrumbs) {\n this.setDefaultBreadcrumbs();\n } else {\n this.setCollapsed();\n }\n } else {\n this.setDefaultBreadcrumbs();\n }\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n \"ic-breadcrumb-group-back\": this.backBreadcrumbOnly,\n \"ic-breadcrumb-group-collapsed\": this.collapsed,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <nav aria-label=\"breadcrumbs\">\n <ol>\n <slot />\n </ol>\n </nav>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-breadcrumb-group.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-breadcrumb-group\",\n styleUrl: \"ic-breadcrumb-group.css\",\n shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n private ADD_CLASS_DELAY = 50;\n private breadcrumb: HTMLIcBreadcrumbElement;\n private breadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbEl: HTMLButtonElement;\n private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n private resizeObserver: ResizeObserver = null;\n private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n @Element() el: HTMLIcBreadcrumbGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() expandedBreadcrumbs: boolean = false;\n\n /*\n If `true`, display only a single breadcrumb for the parent page with a back icon.\n /\n @Prop() backBreadcrumbOnly: boolean = false;\n @Watch(\"backBreadcrumbOnly\")\n watchBackBreadcrumbHandler(): void {\n this.setBackBreadcrumb();\n }\n\n /\n If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n /\n @Prop() collapsed: boolean = false;\n @Watch(\"collapsed\")\n watchCollapsedHandler(): void {\n this.setCollapsed();\n }\n\n /\n If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.\n /\n @Prop() monochrome?: boolean = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.setBreadcrumbMonochrome();\n }\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 @Watch(\"theme\")\n watchThemeHandler(): void {\n this.setBreadcrumbTheme();\n }\n\n componentWillLoad(): void {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n this.setBreadcrumbTheme();\n this.setBreadcrumbMonochrome();\n\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumb();\n } else {\n checkResizeObserver(this.runResizeObserver);\n }\n\n if (this.collapsed && allBreadcrumbs.length > 2) {\n if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setCollapsed();\n }\n }\n }\n\n disconnectedCallback(): void {\n this.breadcrumb &&\n this.breadcrumb.removeEventListener(\n \"transitionend\",\n this.transitionendHandler\n );\n\n this.collapsedBreadcrumbEl &&\n this.collapsedBreadcrumbEl.removeEventListener(\n \"click\",\n this.clickHandler\n );\n }\n\n private setBreadcrumbTheme = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n allBreadcrumbs.forEach((breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.theme = this.theme;\n });\n };\n\n private setBreadcrumbMonochrome = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n allBreadcrumbs.forEach((breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.monochrome = this.monochrome;\n });\n };\n\n private setBackBreadcrumb = () => {\n if (this.backBreadcrumbOnly) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.revertLastParentCollapsedBreadcrumb();\n }\n };\n\n private setBackBreadcrumbAttr = () => {\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.add(\"show\");\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n }\n };\n\n private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement \| null => {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n if (allBreadcrumbs.length === 1) {\n return null;\n }\n\n this.breadcrumbs = allBreadcrumbs;\n this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 2];\n\n return this.breadcrumb;\n };\n\n private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n private setDefaultBreadcrumbs = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n });\n };\n\n private setCollapsed = () => {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n const firstBreadcrumb = allBreadcrumbs[0];\n if (this.collapsedBreadcrumbs) {\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.remove(\"visuallyhidden\");\n breadcrumb.classList.remove(\"fade\");\n });\n }\n\n if (this.collapsed) {\n this.renderCollapsedBreadcrumb();\n\n this.collapsedBreadcrumbs = allBreadcrumbs\n .splice(1, allBreadcrumbs.length - 2)\n .filter(\n (breadcrumb) =>\n !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n );\n if (!this.backBreadcrumbOnly) {\n this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n breadcrumb.classList.add(\"hide\")\n );\n }\n\n if (firstBreadcrumb) {\n firstBreadcrumb.insertAdjacentElement(\n \"afterend\",\n this.collapsedBreadcrumbWrapper\n );\n }\n } else {\n this.collapsedBreadcrumbWrapper.remove();\n }\n };\n\n private clickHandler = () => {\n this.handleHiddenCollapsedBreadcrumbs();\n };\n\n private renderCollapsedBreadcrumb = () => {\n if (this.collapsedBreadcrumbEl === undefined) {\n this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n this.collapsedBreadcrumbWrapper.classList.add(\n \"collapsed-breadcrumb-wrapper\"\n );\n this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n const ariaLabel = document.createElement(\"span\");\n ariaLabel.id = \"collapsed-button-label\";\n ariaLabel.innerText = \"Collapsed breadcrumbs\";\n ariaLabel.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-labelledby\",\n \"collapsed-button-label\"\n );\n\n const ariaDescribed = document.createElement(\"span\");\n ariaDescribed.id = \"collapsed-button-described\";\n ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n ariaDescribed.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-describedby\",\n \"collapsed-button-described\"\n );\n\n this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n this.collapsedBreadcrumbEl.innerText = \"...\";\n this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n this.collapsedBreadcrumbWrapper.append(ariaLabel);\n this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n }\n };\n\n private handleHiddenCollapsedBreadcrumbs = () => {\n this.collapsedBreadcrumbWrapper.remove();\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.add(\"visuallyhidden\");\n breadcrumb.classList.remove(\"hide\");\n setTimeout(() => {\n breadcrumb.classList.add(\"fade\");\n }, this.ADD_CLASS_DELAY);\n\n this.removeVisuallyHiddenClass(breadcrumb);\n });\n this.expandedBreadcrumbs = true;\n // Set focus to first unhidden breadcrumb\n this.collapsedBreadcrumbs[0].setFocus();\n };\n\n private transitionendHandler = (event: TransitionEvent) => {\n if (event.propertyName === \"opacity\") {\n (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n }\n };\n\n private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n };\n\n private setLastParentCollapsedBackBreadcrumb = () => {\n this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n this.setBackBreadcrumbAttr();\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.remove(\"hide\");\n this.lastParentBreadcrumb.classList.add(\"show\");\n }\n };\n\n private revertLastParentCollapsedBreadcrumb = () => {\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n if (this.collapsed) {\n this.lastParentBreadcrumb.classList.add(\"hide\");\n }\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n\n if (this.deviceSize <= DEVICE_SIZES.S) {\n this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n if (this.collapsed) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setBackBreadcrumb();\n }\n } else {\n this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n this.revertLastParentCollapsedBreadcrumb();\n if (this.expandedBreadcrumbs) {\n this.setDefaultBreadcrumbs();\n } else {\n this.setCollapsed();\n }\n } else {\n this.setDefaultBreadcrumbs();\n }\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n \"ic-breadcrumb-group-back\": this.backBreadcrumbOnly,\n \"ic-breadcrumb-group-collapsed\": this.collapsed,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <nav aria-label=\"breadcrumbs\">\n <ol>\n <slot />\n </ol>\n </nav>\n </Host>\n );\n }\n}\n"]}

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

@@ -3,7 +3,7 @@ import { newSpecPage } from "@stencil/core/testing";
 import { Breadcrumb } from "../../../ic-breadcrumb/ic-breadcrumb";
 import { DEVICE_SIZES } from "../../../../utils/helpers";
 import * as helpers from "../../../../utils/helpers";
-import { waitForTimeout } from "../../../../testspec.setup";
+import { waitForTimeout, resizeTo } from "../../../../testspec.setup";
 describe("ic-breadcrumb-group", () => {
     it("should render", async () => {
         const page = await newSpecPage({
@@ -76,6 +76,21 @@ describe("ic-breadcrumb-group", () => {
         });
         expect(page.root).toMatchSnapshot("should render with collapse button");
     });
+    it("should only render one collapse button when window is resized", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup, Breadcrumb],
+            html: `
+        <ic-breadcrumb-group collapsed="true">
+          <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb current="true" page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+        </ic-breadcrumb-group>`,
+        });
+        resizeTo(window, 1920, 1080);
+        page.rootInstance.resizeObserverCallback();
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
     it("should set hasShadowDom", async () => {
         const page = await newSpecPage({
             components: [BreadcrumbGroup],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-breadcrumb-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { BreadcrumbGroup } from \"../../ic-breadcrumb-group\";\nimport { newSpecPage } from \"@stencil/core/testing\";\nimport { Breadcrumb } from \"../../../ic-breadcrumb/ic-breadcrumb\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\ndescribe(\"ic-breadcrumb-group\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup],\n html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render\");\n });\n\n it(\"should render styling from props\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup],\n html: `<ic-breadcrumb-group collapsed=\"true\" back-breadcrumb-only=\"true\"></ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render styling from props\");\n });\n\n it(\"should render current theme styling\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group theme=\"light\">\n <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" current=\"true\" href=\"/\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render current theme styling\");\n });\n\n it(\"should render with ic-breadcrumb\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group><ic-breadcrumb></ic-breadcrumb></ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render with ic-breadcrumb\");\n });\n\n it(\"should render with collapse button\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `\n <ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render with collapse button\");\n });\n\n it(\"should set hasShadowDom\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup],\n html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n });\n\n const element = page.root.shadowRoot.querySelector(\"nav\");\n expect(helpers.hasShadowDom(element)).toBe(false);\n });\n\n it(\"should handle the hidden collapsed breadcrumbs\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `\n <ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n const collapsedEllipsis: HTMLElement =\n page.doc.getElementById(\"collapsed-ellipsis\");\n collapsedEllipsis.click();\n\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(\n \"should handle the hidden collapsed breadcrumbs\"\n );\n });\n\n it(\"should test collapsed behaviour on resize to small devices\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n expect(page.root).toMatchSnapshot(\n \"should test collapsed behaviour on resize to small devices\"\n );\n });\n\n it(\"should test behaviour on small devices\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group>\n <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n expect(page.rootInstance.backBreadcrumbOnly).toBe(true);\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n });\n\n it(\"should test behaviour on change to medium devices\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n page.rootInstance.expandedBreadcrumbGroup = true;\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n });\n\n it(\"should test resize observer after expanding breadcrumbs\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n // page.rootInstance.expandedBreadcrumbGroup = true;\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n\n const button = page.root.querySelector(\n \"#collapsed-ellipsis\"\n ) as HTMLButtonElement;\n button.click();\n await page.waitForChanges();\n //delay to test setTimeout in code\n await waitForTimeout(100);\n\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n await page.waitForChanges();\n\n expect(page.rootInstance.expandedBreadcrumbs).toBe(true);\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n });\n\n it(\"should test resize observer with collapsed false\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n // page.rootInstance.expandedBreadcrumbGroup = true;\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n await page.waitForChanges();\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n await page.waitForChanges();\n\n // expect(true).toBeTruthy;\n\n expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n // expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n });\n\n it(\"should return null for last parent breadcrumb when there is only 1 breadcrumb\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n expect(page.rootInstance.getLastParentBreadcrumb()).toBeNull();\n });\n\n //this test has to go last as it changes the device size\n it(\"should render collapse on already small devices\", async () => {\n const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);\n Object.defineProperty(helpers, \"getCurrentDeviceSize\", {\n value: myfunc,\n });\n\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(\n \"should render collapse on already small devices\"\n );\n });\n});\n"]}
1	+ {"version":3,"file":"ic-breadcrumb-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { BreadcrumbGroup } from \"../../ic-breadcrumb-group\";\nimport { newSpecPage } from \"@stencil/core/testing\";\nimport { Breadcrumb } from \"../../../ic-breadcrumb/ic-breadcrumb\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport { waitForTimeout, resizeTo } from \"../../../../testspec.setup\";\n\ndescribe(\"ic-breadcrumb-group\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup],\n html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render\");\n });\n\n it(\"should render styling from props\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup],\n html: `<ic-breadcrumb-group collapsed=\"true\" back-breadcrumb-only=\"true\"></ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render styling from props\");\n });\n\n it(\"should render current theme styling\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group theme=\"light\">\n <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" current=\"true\" href=\"/\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render current theme styling\");\n });\n\n it(\"should render with ic-breadcrumb\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group><ic-breadcrumb></ic-breadcrumb></ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render with ic-breadcrumb\");\n });\n\n it(\"should render with collapse button\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `\n <ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render with collapse button\");\n });\n\n it(\"should only render one collapse button when window is resized\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `\n <ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n resizeTo(window, 1920, 1080);\n\n page.rootInstance.resizeObserverCallback();\n\n await page.waitForChanges();\n expect(page.root).toMatchSnapshot();\n });\n\n it(\"should set hasShadowDom\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup],\n html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n });\n\n const element = page.root.shadowRoot.querySelector(\"nav\");\n expect(helpers.hasShadowDom(element)).toBe(false);\n });\n\n it(\"should handle the hidden collapsed breadcrumbs\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `\n <ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n const collapsedEllipsis: HTMLElement =\n page.doc.getElementById(\"collapsed-ellipsis\");\n collapsedEllipsis.click();\n\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(\n \"should handle the hidden collapsed breadcrumbs\"\n );\n });\n\n it(\"should test collapsed behaviour on resize to small devices\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n expect(page.root).toMatchSnapshot(\n \"should test collapsed behaviour on resize to small devices\"\n );\n });\n\n it(\"should test behaviour on small devices\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group>\n <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n expect(page.rootInstance.backBreadcrumbOnly).toBe(true);\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n });\n\n it(\"should test behaviour on change to medium devices\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n page.rootInstance.expandedBreadcrumbGroup = true;\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n });\n\n it(\"should test resize observer after expanding breadcrumbs\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n // page.rootInstance.expandedBreadcrumbGroup = true;\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n\n const button = page.root.querySelector(\n \"#collapsed-ellipsis\"\n ) as HTMLButtonElement;\n button.click();\n await page.waitForChanges();\n //delay to test setTimeout in code\n await waitForTimeout(100);\n\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n await page.waitForChanges();\n\n expect(page.rootInstance.expandedBreadcrumbs).toBe(true);\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n });\n\n it(\"should test resize observer with collapsed false\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n // page.rootInstance.expandedBreadcrumbGroup = true;\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n await page.waitForChanges();\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n await page.waitForChanges();\n\n // expect(true).toBeTruthy;\n\n expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n // expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n });\n\n it(\"should return null for last parent breadcrumb when there is only 1 breadcrumb\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n expect(page.rootInstance.getLastParentBreadcrumb()).toBeNull();\n });\n\n //this test has to go last as it changes the device size\n it(\"should render collapse on already small devices\", async () => {\n const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);\n Object.defineProperty(helpers, \"getCurrentDeviceSize\", {\n value: myfunc,\n });\n\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(\n \"should render collapse on already small devices\"\n );\n });\n});\n"]}

package/dist/collection/components/ic-card-vertical/ic-card-vertical.css CHANGED Viewed

@@ -687,4 +687,9 @@ button {
       }
     }
   }
+  .toggle-button:focus,
+  .toggle-button:hover {
+    outline-color: Highlight;
+  }
 }

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

@@ -687,3 +687,27 @@ video {
     display: none;
   }
 }
+/* Right to left */
+.checkmark:dir(rtl) {
+  right: 0;
+}
+.checkbox-label:dir(rtl) {
+  padding-right: var(--ic-space-sm);
+  padding-left: 0;
+}
+.indeterminate-symbol:dir(rtl) {
+  right: 0.288rem;
+}
+.branch-corner:dir(rtl) {
+  border-radius: 0 0 0.188rem 0;
+  border-right: 0.125rem solid var(--ic-action-default);
+  border-left: none;
+}
+.dynamic-container:dir(rtl) {
+  margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;
+}

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

@@ -613,6 +613,33 @@ export const TextFieldValueChange = {
   name: "TextField value change",
 };
+export const RTL = {
+  render: (args) => html`
+    <ic-checkbox-group label="This is a label" name="group1" dir="rtl">
+      <ic-checkbox
+        value="valueName1"
+        label="Indeterminate"
+        indeterminate="true"
+      ></ic-checkbox>
+      <ic-checkbox value="valueName2" label="Selected" checked></ic-checkbox>
+      <ic-checkbox value="valueName3" label="Disabled" disabled></ic-checkbox>
+      <ic-checkbox
+        additional-field-display="dynamic"
+        value="valueName4"
+        label="Conditional dynamic"
+      >
+        <ic-text-field
+          slot="additional-field"
+          placeholder="Placeholder"
+          label="What's your favourite type of coffee?"
+        ></ic-text-field>
+      </ic-checkbox>
+    </ic-checkbox-group>
+  `,
+  name: "RTL",
+};
 const inlineRadioSelector = "inline-radio";
 export const Playground = {

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

@@ -549,17 +549,11 @@ video {
 }
 .content-area {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
   padding: 0 var(--ic-space-md);
   margin: 0;
   overflow-y: auto;
 }
-.content-area::-webkit-scrollbar {
-  display: none;
-}
 #dialog-content {
   margin-bottom: var(--ic-space-sm);
 }

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

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import closeIcon from "../../assets/close-icon.svg";
-import { isSlotUsed, checkResizeObserver, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+import { isSlotUsed, checkResizeObserver, onComponentRequiredPropUndefined, getSlotElements, } from "../../utils/helpers";
 /**
  * @slot dialog-controls - Content will be place at the bottom of the dialog.
  * @slot heading - Content will be placed at the top of the dialog.
@@ -9,6 +9,7 @@ import { isSlotUsed, checkResizeObserver, onComponentRequiredPropUndefined, } fr
  */
 export class Dialog {
     constructor() {
+        this.contentAreaMutationObserver = null;
         this.DATA_GETS_FOCUS = "data-gets-focus";
         this.DATA_GETS_FOCUS_SELECTOR = "[data-gets-focus]";
         this.DIALOG_CONTROLS = "dialog-controls";
@@ -62,12 +63,26 @@ export class Dialog {
             }
         };
         this.refreshInteractiveElementsOnSlotChange = () => {
-            this.contentArea = this.el.shadowRoot.querySelector("#dialog-content slot");
+            const contentWrapper = this.el.shadowRoot.querySelector("#dialog-content");
+            this.contentArea = contentWrapper.querySelector("slot");
+            // Detect changes to slotted elements
             this.contentArea.addEventListener("slotchange", this.getInteractiveElements);
+            this.contentAreaMutationObserver = new MutationObserver(() => {
+                this.getInteractiveElements();
+            });
+            // Detect changes to children of slotted elements
+            getSlotElements(contentWrapper).forEach((el) => {
+                this.contentAreaMutationObserver.observe(el, {
+                    childList: true,
+                    subtree: true,
+                });
+            });
         };
         this.removeSlotChangeListener = () => {
+            var _a;
             if (this.contentArea) {
                 this.contentArea.removeEventListener("slotchange", this.getInteractiveElements);
+                (_a = this.contentAreaMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
             }
         };
         this.setInitialFocus = () => {
@@ -107,9 +122,9 @@ export class Dialog {
         };
         this.getInteractiveElements = () => {
             this.interactiveElementList = Array.from(this.el.shadowRoot.querySelectorAll("ic-button"));
-            const slottedInteractiveElements = Array.from(this.el.querySelectorAll(`a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex="-1"]),
-          ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group,
-          ic-back-to-top, ic-breadcrumb, ic-chip[dismissible="true"], ic-footer-link, ic-link, ic-navigation-button,
+            const slottedInteractiveElements = Array.from(this.el.querySelectorAll(`a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex="-1"]),
+          ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group,
+          ic-back-to-top, ic-breadcrumb, ic-chip[dismissible="true"], ic-footer-link, ic-link, ic-navigation-button,
           ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion, ic-date-input, ic-date-picker`));
             if (slottedInteractiveElements.length > 0) {
                 if (slottedInteractiveElements[0].slot !== this.DIALOG_CONTROLS) {