npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.5 → 3.0.0-alpha.7 - Mend

@ukic/web-components 3.0.0-alpha.5 → 3.0.0-alpha.7

Files changed (629) hide show

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

@@ -1,4 +1,5 @@
 import { Host, h, } from "@stencil/core";
+import { removeDisabledFalse } from "../../utils/helpers";
 const TOGGLE_GROUP = "IC-TOGGLE-BUTTON-GROUP";
 export class ToggleButtonGroup {
     constructor() {
@@ -97,6 +98,7 @@ export class ToggleButtonGroup {
         this.getAllToggleButtons().forEach((el) => {
             el.disabled = this.disabled;
         });
+        removeDisabledFalse(this.disabled, this.el);
     }
     watchMonochromeHandler() {
         this.getAllToggleButtons().forEach((el) => {
@@ -142,6 +144,7 @@ export class ToggleButtonGroup {
         this.selectType === "multi" && (this.selectMethod = "manual");
         this.selectMethod === "auto" && this.selectType === "single";
         document.addEventListener("keydown", this.keyListener);
+        removeDisabledFalse(this.disabled, this.el);
     }
     componentDidLoad() {
         this.getAllToggleButtons().forEach((el, i) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-toggle-button-group.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcSizes,\n IcSelectTypes,\n IcSelectMethodTypes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\n\ninterface lastKey {\n key: string \| null;\n shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n tag: \"ic-toggle-button-group\",\n styleUrl: \"ic-toggle-button-group.css\",\n shadow: true,\n})\nexport class ToggleButtonGroup {\n @Element() el: HTMLIcToggleButtonGroupElement;\n\n @State() lastKeyPressed: lastKey = {\n key: null,\n shift: false,\n };\n\n /*\n The accessible label of the toggle button group component to provide context for screen reader users.\n /\n @Prop() accessibleLabel?: string = \"Toggle button group\";\n\n /\n If `true`, the toggle button group will be set to the disabled state.\n /\n @Prop() disabled: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.disabled = this.disabled;\n });\n }\n\n /\n If `true`, the toggle button group will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n The placement of the icons in relation to the toggle button labels.\n /\n @Prop() iconPlacement?: \"left\" \| \"right\" \| \"top\";\n\n /\n If `true`, the toggle button group will be in loading state.\n /\n @Prop() loading?: boolean = false;\n\n /\n If `true`, the toggle button group will display as black in the light theme, and white in dark theme.\n /\n @Prop() monochrome?: boolean = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.monochrome = this.monochrome;\n });\n }\n\n /\n If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n /\n @Prop({ mutable: true }) selectMethod?: IcSelectMethodTypes = \"manual\";\n\n /\n Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n /\n @Prop() selectType?: IcSelectTypes = \"single\";\n\n /\n The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\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 @Watch(\"theme\")\n watchThemeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.theme = this.theme;\n });\n }\n\n /\n The variant of the toggle button.\n /\n @Prop({ reflect: true }) variant: \"default\" \| \"icon\" = \"default\";\n\n /\n Emitted when a toggle button is selected.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icToggleChecked\")\n selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n const allToggles = this.getAllToggleButtons();\n let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n // tabTarget used in proxySelectHandler\n tabTarget && tabTarget.focus();\n if (this.selectType === \"single\") {\n if (!clickedToggle) {\n clickedToggle = tabTarget;\n }\n allToggles.forEach((el) => {\n if (el.id !== clickedToggle.id && el.checked) {\n el.checked = false;\n }\n });\n\n this.icChange.emit({\n checked: ev.detail.checked,\n selectedOption: clickedToggle,\n });\n } else {\n const toggledOptions = this.getAllToggleButtons().filter(\n (el) => el.checked && !el.disabled\n );\n\n this.icChange.emit({\n checked: toggledOptions.map((opt) => opt.checked),\n toggledOptions: toggledOptions.map((opt) => ({\n toggleButton: opt,\n })),\n selectedOption: clickedToggle,\n });\n }\n }\n\n componentWillLoad(): void {\n this.selectType === \"multi\" && (this.selectMethod = \"manual\");\n this.selectMethod === \"auto\" && this.selectType === \"single\";\n document.addEventListener(\"keydown\", this.keyListener);\n }\n\n componentDidLoad(): void {\n this.getAllToggleButtons().forEach((el, i) => {\n this.setSlottedAria(el);\n el.size = this.size;\n el.loading = this.loading;\n el.iconPlacement = this.iconPlacement;\n el.disabled ? null : (el.disabled = this.disabled);\n el.theme = this.theme;\n el.monochrome = this.monochrome;\n el.variant = this.variant;\n el.fullWidth = this.fullWidth;\n el.id = i.toString();\n el.tabIndex = -1;\n el.addEventListener(\"keydown\", (ev) => {\n this.handleKeyDown(ev);\n });\n el.classList.add(\"expand-toggle-group-child\");\n });\n }\n\n disconnectedCallback(): void {\n document?.removeEventListener(\"keydown\", this.keyListener);\n }\n\n private keyListener = (ev: KeyboardEvent) => {\n this.lastKeyPressed = {\n key: ev.key,\n shift: ev.shiftKey,\n };\n };\n\n private setSlottedAria = (el: HTMLIcToggleButtonElement) => {\n const btn = el.shadowRoot\n .querySelector(\"ic-button\")\n .shadowRoot.querySelector(\"button\") as HTMLButtonElement;\n let aria = btn.getAttribute(\"aria-label\");\n aria += \", \";\n aria += this.accessibleLabel;\n btn.setAttribute(\"aria-label\", aria);\n };\n\n private handleHostFocus = (ev: FocusEvent): void => {\n if (this.loading \|\| this.disabled) {\n return null;\n }\n const el = ev.target as HTMLIcToggleButtonGroupElement;\n const relEl = ev.relatedTarget as HTMLIcToggleButtonElement;\n const toggleButtons = Array.from(el.querySelectorAll(\"ic-toggle-button\"));\n if (\n ((toggleButtons.every((el) => !el.checked) \|\|\n this.selectType !== \"single\") &&\n this.lastKeyPressed.shift === false) \|\|\n (toggleButtons.every((el) => !el.checked) &&\n this.lastKeyPressed.shift === true &&\n relEl.tagName == TOGGLE_GROUP)\n ) {\n toggleButtons[0].focus();\n } else if (\n this.lastKeyPressed.shift === false \|\|\n (this.lastKeyPressed.shift === true && relEl.tagName == TOGGLE_GROUP)\n ) {\n // if checked is true and selectMethod is \"single\", focus that toggle\n const toggledButton = toggleButtons.filter((el) => el.checked);\n toggledButton[0].focus();\n }\n };\n\n // trigger selectHandler when unable to add 'target'\n private proxySelectHandler(toggle: HTMLIcToggleButtonElement): void {\n toggle.checked = true;\n const customEv = new CustomEvent(\"icToggleChecked\", {\n detail: {\n checked: toggle.checked,\n },\n });\n this.selectHandler(customEv, toggle);\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const focussedChild = toggleButtonOptions.indexOf(\n toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.selectMethod === \"auto\"\n ? this.proxySelectHandler(\n toggleButtonOptions[this.getNextItemToSelect(focussedChild, true)]\n )\n : toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, true)\n ].focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.selectMethod === \"auto\"\n ? this.proxySelectHandler(\n toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, false)\n ]\n )\n : toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, false)\n ].focus();\n break;\n case \"Tab\":\n break;\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const numToggles = toggleButtonOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = numToggles;\n } else if (nextItem > numToggles) {\n nextItem = 0;\n }\n\n if (toggleButtonOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private getAllToggleButtons(): HTMLIcToggleButtonElement[] {\n return Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n }\n\n render() {\n return (\n <Host\n role=\"group\"\n aria-label={this.accessibleLabel}\n aria-disabled={this.disabled ? \"true\" : \"false\"}\n tabindex={0}\n class={{\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n [\"ic-toggle-button-group-full-width\"]: this.fullWidth,\n [\"ic-toggle-button-group-loading\"]: this.loading,\n [\"ic-toggle-button-group-disabled\"]: this.disabled,\n [`ic-toggle-button-group-monochrome`]: this.monochrome,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n onFocus={this.handleHostFocus}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-toggle-button-group.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcSizes,\n IcSelectTypes,\n IcSelectMethodTypes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\nimport { removeDisabledFalse } from \"../../utils/helpers\";\n\ninterface lastKey {\n key: string \| null;\n shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n tag: \"ic-toggle-button-group\",\n styleUrl: \"ic-toggle-button-group.css\",\n shadow: true,\n})\nexport class ToggleButtonGroup {\n @Element() el: HTMLIcToggleButtonGroupElement;\n\n @State() lastKeyPressed: lastKey = {\n key: null,\n shift: false,\n };\n\n /*\n The accessible label of the toggle button group component to provide context for screen reader users.\n /\n @Prop() accessibleLabel?: string = \"Toggle button group\";\n\n /\n If `true`, the toggle button group will be set to the disabled state.\n /\n @Prop() disabled: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.disabled = this.disabled;\n });\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the toggle button group will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n The placement of the icons in relation to the toggle button labels.\n /\n @Prop() iconPlacement?: \"left\" \| \"right\" \| \"top\";\n\n /\n If `true`, the toggle button group will be in loading state.\n /\n @Prop() loading?: boolean = false;\n\n /\n If `true`, the toggle button group will display as black in the light theme, and white in dark theme.\n /\n @Prop() monochrome?: boolean = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.monochrome = this.monochrome;\n });\n }\n\n /\n If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n /\n @Prop({ mutable: true }) selectMethod?: IcSelectMethodTypes = \"manual\";\n\n /\n Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n /\n @Prop() selectType?: IcSelectTypes = \"single\";\n\n /\n The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\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 @Watch(\"theme\")\n watchThemeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.theme = this.theme;\n });\n }\n\n /\n The variant of the toggle button.\n /\n @Prop({ reflect: true }) variant: \"default\" \| \"icon\" = \"default\";\n\n /\n Emitted when a toggle button is selected.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icToggleChecked\")\n selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n const allToggles = this.getAllToggleButtons();\n let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n // tabTarget used in proxySelectHandler\n tabTarget && tabTarget.focus();\n if (this.selectType === \"single\") {\n if (!clickedToggle) {\n clickedToggle = tabTarget;\n }\n allToggles.forEach((el) => {\n if (el.id !== clickedToggle.id && el.checked) {\n el.checked = false;\n }\n });\n\n this.icChange.emit({\n checked: ev.detail.checked,\n selectedOption: clickedToggle,\n });\n } else {\n const toggledOptions = this.getAllToggleButtons().filter(\n (el) => el.checked && !el.disabled\n );\n\n this.icChange.emit({\n checked: toggledOptions.map((opt) => opt.checked),\n toggledOptions: toggledOptions.map((opt) => ({\n toggleButton: opt,\n })),\n selectedOption: clickedToggle,\n });\n }\n }\n\n componentWillLoad(): void {\n this.selectType === \"multi\" && (this.selectMethod = \"manual\");\n this.selectMethod === \"auto\" && this.selectType === \"single\";\n document.addEventListener(\"keydown\", this.keyListener);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.getAllToggleButtons().forEach((el, i) => {\n this.setSlottedAria(el);\n el.size = this.size;\n el.loading = this.loading;\n el.iconPlacement = this.iconPlacement;\n el.disabled ? null : (el.disabled = this.disabled);\n el.theme = this.theme;\n el.monochrome = this.monochrome;\n el.variant = this.variant;\n el.fullWidth = this.fullWidth;\n el.id = i.toString();\n el.tabIndex = -1;\n el.addEventListener(\"keydown\", (ev) => {\n this.handleKeyDown(ev);\n });\n el.classList.add(\"expand-toggle-group-child\");\n });\n }\n\n disconnectedCallback(): void {\n document?.removeEventListener(\"keydown\", this.keyListener);\n }\n\n private keyListener = (ev: KeyboardEvent) => {\n this.lastKeyPressed = {\n key: ev.key,\n shift: ev.shiftKey,\n };\n };\n\n private setSlottedAria = (el: HTMLIcToggleButtonElement) => {\n const btn = el.shadowRoot\n .querySelector(\"ic-button\")\n .shadowRoot.querySelector(\"button\") as HTMLButtonElement;\n let aria = btn.getAttribute(\"aria-label\");\n aria += \", \";\n aria += this.accessibleLabel;\n btn.setAttribute(\"aria-label\", aria);\n };\n\n private handleHostFocus = (ev: FocusEvent): void => {\n if (this.loading \|\| this.disabled) {\n return null;\n }\n const el = ev.target as HTMLIcToggleButtonGroupElement;\n const relEl = ev.relatedTarget as HTMLIcToggleButtonElement;\n const toggleButtons = Array.from(el.querySelectorAll(\"ic-toggle-button\"));\n if (\n ((toggleButtons.every((el) => !el.checked) \|\|\n this.selectType !== \"single\") &&\n this.lastKeyPressed.shift === false) \|\|\n (toggleButtons.every((el) => !el.checked) &&\n this.lastKeyPressed.shift === true &&\n relEl.tagName == TOGGLE_GROUP)\n ) {\n toggleButtons[0].focus();\n } else if (\n this.lastKeyPressed.shift === false \|\|\n (this.lastKeyPressed.shift === true && relEl.tagName == TOGGLE_GROUP)\n ) {\n // if checked is true and selectMethod is \"single\", focus that toggle\n const toggledButton = toggleButtons.filter((el) => el.checked);\n toggledButton[0].focus();\n }\n };\n\n // trigger selectHandler when unable to add 'target'\n private proxySelectHandler(toggle: HTMLIcToggleButtonElement): void {\n toggle.checked = true;\n const customEv = new CustomEvent(\"icToggleChecked\", {\n detail: {\n checked: toggle.checked,\n },\n });\n this.selectHandler(customEv, toggle);\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const focussedChild = toggleButtonOptions.indexOf(\n toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.selectMethod === \"auto\"\n ? this.proxySelectHandler(\n toggleButtonOptions[this.getNextItemToSelect(focussedChild, true)]\n )\n : toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, true)\n ].focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.selectMethod === \"auto\"\n ? this.proxySelectHandler(\n toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, false)\n ]\n )\n : toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, false)\n ].focus();\n break;\n case \"Tab\":\n break;\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const numToggles = toggleButtonOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = numToggles;\n } else if (nextItem > numToggles) {\n nextItem = 0;\n }\n\n if (toggleButtonOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private getAllToggleButtons(): HTMLIcToggleButtonElement[] {\n return Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n }\n\n render() {\n return (\n <Host\n role=\"group\"\n aria-label={this.accessibleLabel}\n aria-disabled={this.disabled ? \"true\" : \"false\"}\n tabindex={0}\n class={{\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n [\"ic-toggle-button-group-full-width\"]: this.fullWidth,\n [\"ic-toggle-button-group-loading\"]: this.loading,\n [\"ic-toggle-button-group-disabled\"]: this.disabled,\n [`ic-toggle-button-group-monochrome`]: this.monochrome,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n onFocus={this.handleHostFocus}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js CHANGED Viewed

@@ -5,6 +5,110 @@ import { Button } from "../../ic-button/ic-button";
 const keyboard = (key) => {
     return new KeyboardEvent("keydown", { key: key });
 };
+describe("ic-toggle-button-group component snapshot tests", () => {
+    it("should render and update disabled", async () => {
+        const page = await newSpecPage({
+            components: [ToggleButtonGroup, ToggleButton, Button],
+            html: `<ic-toggle-button-group select-type="single" disabled>
+              <ic-toggle-button label="Toggle"></ic-toggle-button>
+              <ic-toggle-button label="Toggle"></ic-toggle-button>
+              <ic-toggle-button label="Toggle"></ic-toggle-button>
+            </ic-toggle-button-group>`,
+        });
+        expect(page.root)
+            .toEqualHtml(`<ic-toggle-button-group aria-disabled="true" aria-label="Toggle button group" class="ic-toggle-button-group-disabled" disabled="" role="group" select-type="single" tabindex="0" variant="default">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      <ic-toggle-button class="expand-toggle-group-child ic-toggle-button-disabled ic-toggle-button-medium" id="0" label="Toggle" tabindex="-1" variant="default">
+        <mock:shadow-root>
+          <ic-button aria-disabled="true" aria-pressed="false" class="ic-button-disabled ic-button-size-medium ic-button-variant-secondary" exportparts="button">
+            <mock:shadow-root>
+              <button aria-disabled="false" aria-label="Toggle, unticked, Toggle button group" class="button" disabled="" part="button" type="button">
+                <slot></slot>
+              </button>
+            </mock:shadow-root>
+            Toggle
+            <slot></slot>
+          </ic-button>
+        </mock:shadow-root>
+      </ic-toggle-button>
+      <ic-toggle-button class="expand-toggle-group-child ic-toggle-button-disabled ic-toggle-button-medium" id="1" label="Toggle" tabindex="-1" variant="default">
+        <mock:shadow-root>
+          <ic-button aria-disabled="true" aria-pressed="false" class="ic-button-disabled ic-button-size-medium ic-button-variant-secondary" exportparts="button">
+            <mock:shadow-root>
+              <button aria-disabled="false" aria-label="Toggle, unticked, Toggle button group" class="button" disabled="" part="button" type="button">
+                <slot></slot>
+              </button>
+            </mock:shadow-root>
+            Toggle
+            <slot></slot>
+          </ic-button>
+        </mock:shadow-root>
+      </ic-toggle-button>
+      <ic-toggle-button class="expand-toggle-group-child ic-toggle-button-disabled ic-toggle-button-medium" id="2" label="Toggle" tabindex="-1" variant="default">
+        <mock:shadow-root>
+          <ic-button aria-disabled="true" aria-pressed="false" class="ic-button-disabled ic-button-size-medium ic-button-variant-secondary" exportparts="button">
+            <mock:shadow-root>
+              <button aria-disabled="false" aria-label="Toggle, unticked, Toggle button group" class="button" disabled="" part="button" type="button">
+                <slot></slot>
+              </button>
+            </mock:shadow-root>
+            Toggle
+            <slot></slot>
+          </ic-button>
+        </mock:shadow-root>
+      </ic-toggle-button>
+    </ic-toggle-button-group>`);
+        page.rootInstance.disabled = false;
+        await page.waitForChanges();
+        expect(page.root)
+            .toEqualHtml(`<ic-toggle-button-group aria-disabled="false" aria-label="Toggle button group" role="group" select-type="single" tabindex="0" variant="default">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      <ic-toggle-button class="expand-toggle-group-child ic-toggle-button-medium" id="0" label="Toggle" tabindex="-1" variant="default">
+        <mock:shadow-root>
+          <ic-button aria-disabled="false" aria-pressed="false" class="ic-button-size-medium ic-button-variant-secondary" exportparts="button">
+            <mock:shadow-root>
+              <button aria-disabled="false" aria-label="Toggle, unticked, Toggle button group" class="button" part="button" type="button">
+                <slot></slot>
+              </button>
+            </mock:shadow-root>
+            Toggle
+            <slot></slot>
+          </ic-button>
+        </mock:shadow-root>
+      </ic-toggle-button>
+      <ic-toggle-button class="expand-toggle-group-child ic-toggle-button-medium" id="1" label="Toggle" tabindex="-1" variant="default">
+        <mock:shadow-root>
+          <ic-button aria-disabled="false" aria-pressed="false" class="ic-button-size-medium ic-button-variant-secondary" exportparts="button">
+            <mock:shadow-root>
+              <button aria-disabled="false" aria-label="Toggle, unticked, Toggle button group" class="button" part="button" type="button">
+                <slot></slot>
+              </button>
+            </mock:shadow-root>
+            Toggle
+            <slot></slot>
+          </ic-button>
+        </mock:shadow-root>
+      </ic-toggle-button>
+      <ic-toggle-button class="expand-toggle-group-child ic-toggle-button-medium" id="2" label="Toggle" tabindex="-1" variant="default">
+        <mock:shadow-root>
+          <ic-button aria-disabled="false" aria-pressed="false" class="ic-button-size-medium ic-button-variant-secondary" exportparts="button">
+            <mock:shadow-root>
+              <button aria-disabled="false" aria-label="Toggle, unticked, Toggle button group" class="button" part="button" type="button">
+                <slot></slot>
+              </button>
+            </mock:shadow-root>
+            Toggle
+            <slot></slot>
+          </ic-button>
+        </mock:shadow-root>
+      </ic-toggle-button>
+    </ic-toggle-button-group>`);
+    });
+});
 describe("ic-toggle-button-group component unit tests", () => {
     it("should getAllToggleButtons and return an array of slotted ic-toggle-buttons", async () => {
         const page = await newSpecPage({

package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-toggle-button-group.spec.js","sourceRoot":"","sources":["../../../../src/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ToggleButtonGroup } from \"../ic-toggle-button-group\";\nimport { ToggleButton } from \"../../ic-toggle-button/ic-toggle-button\";\nimport { Button } from \"../../ic-button/ic-button\";\n\nconst keyboard = (key: string): KeyboardEvent => {\n return new KeyboardEvent(\"keydown\", { key: key });\n};\n\ndescribe(\"ic-toggle-button-group component unit tests\", () => {\n it(\"should getAllToggleButtons and return an array of slotted ic-toggle-buttons\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group select-type=\"single\" size=\"small\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n\n const toggleButtonArray = page.rootInstance.getAllToggleButtons();\n await page.waitForChanges();\n expect(toggleButtonArray.length).toBe(3);\n });\n it(\"should test when the toggle button group receives focus, it should cause the first toggle button inside the group to get focused (when select method is 'single' and no item is already selected)\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group select-type=\"single\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n const toggleGroup = (await document.querySelector(\n \"ic-toggle-button-group\"\n )) as HTMLIcToggleButtonGroupElement;\n const buttons = await Array.from(\n toggleGroup.querySelectorAll(\"ic-toggle-button\")\n );\n await page.waitForChanges();\n toggleGroup.focus();\n\n await page.waitForChanges();\n\n expect(buttons[0].checked).toBeFalsy();\n });\n it(\"should test that focusing group when an ic-toggle-button selected should not select first option\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group select-type=\"single\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n const toggleGroup = (await document.querySelector(\n \"ic-toggle-button-group\"\n )) as HTMLIcToggleButtonGroupElement;\n const buttons = await Array.from(\n toggleGroup.querySelectorAll(\"ic-toggle-button\")\n );\n await page.waitForChanges();\n\n buttons[1].checked = true;\n\n toggleGroup.focus();\n\n await page.waitForChanges();\n\n expect(buttons[0].checked).toBeFalsy();\n expect(buttons[1].checked).toBeTruthy();\n });\n it(\"should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group select-type=\"multi\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n\n const toggleGroup = (await document.querySelector(\n \"ic-toggle-button-group\"\n )) as HTMLIcToggleButtonGroupElement;\n const buttons = await Array.from(\n toggleGroup.querySelectorAll(\"ic-toggle-button\")\n );\n await page.waitForChanges();\n\n toggleGroup.focus();\n\n await page.waitForChanges();\n\n expect(buttons[0].checked).toBeFalsy();\n });\n it(\"should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group select-type=\"multi\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n\n const eventSpy = jest.fn();\n page.win.addEventListener(\"icChange\", eventSpy);\n\n const toggleGroup = (await document.querySelector(\n \"ic-toggle-button-group\"\n )) as HTMLIcToggleButtonGroupElement;\n const buttons = await Array.from(\n toggleGroup.querySelectorAll(\"ic-toggle-button\")\n );\n await page.waitForChanges();\n buttons[0].checked = true;\n buttons[1].checked = true;\n\n const customEv = new CustomEvent(\"icToggleChecked\", {});\n\n page.rootInstance.selectHandler(customEv);\n\n await page.waitForChanges();\n\n expect(eventSpy).toHaveBeenCalled();\n });\n it(\"should test handleKeyDown function\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group select-method=\"auto\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n\n const firstButton = (await document.querySelector(\n \"#0\"\n )) as HTMLIcToggleButtonElement;\n const secondButton = (await document.querySelector(\n \"#1\"\n )) as HTMLIcToggleButtonElement;\n const thirdButton = (await document.querySelector(\n \"#2\"\n )) as HTMLIcToggleButtonElement;\n\n expect(firstButton.checked).toBeFalsy();\n await firstButton.click();\n expect(firstButton.checked).toBeTruthy();\n\n await page.waitForChanges();\n page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n expect(thirdButton.checked).toBeTruthy();\n expect(firstButton.checked).toBeFalsy();\n\n await page.waitForChanges();\n await firstButton.click();\n page.rootInstance.handleKeyDown(keyboard(\"ArrowUp\"));\n expect(thirdButton.checked).toBeTruthy();\n expect(firstButton.checked).toBeFalsy();\n\n await page.waitForChanges();\n await firstButton.click();\n page.rootInstance.handleKeyDown(keyboard(\"ArrowDown\"));\n expect(secondButton.checked).toBeTruthy();\n expect(firstButton.checked).toBeFalsy();\n\n await page.waitForChanges();\n await firstButton.click();\n page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n expect(thirdButton.checked).toBeTruthy();\n expect(firstButton.checked).toBeFalsy();\n\n secondButton.disabled = true;\n\n await page.waitForChanges();\n await firstButton.click();\n page.rootInstance.handleKeyDown(keyboard(\"ArrowRight\"));\n expect(thirdButton.checked).toBeTruthy();\n expect(firstButton.checked).toBeFalsy();\n\n // for coverage\n page.rootInstance.handleKeyDown(keyboard(\"Tab\"));\n document.dispatchEvent(keyboard(\"Tab\"));\n });\n it(\"should test handleKeyDown on disabled toggle-button-group\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group disabled>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n\n const mockEvent = new FocusEvent(\"focus\");\n\n expect(page.rootInstance.handleHostFocus(mockEvent)).toBeNull();\n\n await page.rootInstance.disconnectedCallback();\n });\n it(\"should test that setting the theme prop on toggle-button-group sets the theme on all toggle buttons\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group theme=\"dark\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n\n const toggleGroup = (await document.querySelector(\n \"ic-toggle-button-group\"\n )) as HTMLIcToggleButtonGroupElement;\n const buttons = await Array.from(\n toggleGroup.querySelectorAll(\"ic-toggle-button\")\n );\n await page.rootInstance.watchThemeHandler(\"dark\");\n await page.waitForChanges();\n\n expect(buttons[0].theme).toBe(\"dark\");\n expect(buttons[1].theme).toBe(\"dark\");\n expect(buttons[2].theme).toBe(\"dark\");\n });\n});\n"]}
1	+ {"version":3,"file":"ic-toggle-button-group.spec.js","sourceRoot":"","sources":["../../../../src/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ToggleButtonGroup } from \"../ic-toggle-button-group\";\nimport { ToggleButton } from \"../../ic-toggle-button/ic-toggle-button\";\nimport { Button } from \"../../ic-button/ic-button\";\n\nconst keyboard = (key: string): KeyboardEvent => {\n return new KeyboardEvent(\"keydown\", { key: key });\n};\n\ndescribe(\"ic-toggle-button-group component snapshot tests\", () => {\n it(\"should render and update disabled\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group select-type=\"single\" disabled>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n\n expect(page.root)\n .toEqualHtml(`<ic-toggle-button-group aria-disabled=\"true\" aria-label=\"Toggle button group\" class=\"ic-toggle-button-group-disabled\" disabled=\"\" role=\"group\" select-type=\"single\" tabindex=\"0\" variant=\"default\">\n <mock:shadow-root>\n <slot></slot>\n </mock:shadow-root>\n <ic-toggle-button class=\"expand-toggle-group-child ic-toggle-button-disabled ic-toggle-button-medium\" id=\"0\" label=\"Toggle\" tabindex=\"-1\" variant=\"default\">\n <mock:shadow-root>\n <ic-button aria-disabled=\"true\" aria-pressed=\"false\" class=\"ic-button-disabled ic-button-size-medium ic-button-variant-secondary\" exportparts=\"button\">\n <mock:shadow-root>\n <button aria-disabled=\"false\" aria-label=\"Toggle, unticked, Toggle button group\" class=\"button\" disabled=\"\" part=\"button\" type=\"button\">\n <slot></slot>\n </button>\n </mock:shadow-root>\n Toggle\n <slot></slot>\n </ic-button>\n </mock:shadow-root>\n </ic-toggle-button>\n <ic-toggle-button class=\"expand-toggle-group-child ic-toggle-button-disabled ic-toggle-button-medium\" id=\"1\" label=\"Toggle\" tabindex=\"-1\" variant=\"default\">\n <mock:shadow-root>\n <ic-button aria-disabled=\"true\" aria-pressed=\"false\" class=\"ic-button-disabled ic-button-size-medium ic-button-variant-secondary\" exportparts=\"button\">\n <mock:shadow-root>\n <button aria-disabled=\"false\" aria-label=\"Toggle, unticked, Toggle button group\" class=\"button\" disabled=\"\" part=\"button\" type=\"button\">\n <slot></slot>\n </button>\n </mock:shadow-root>\n Toggle\n <slot></slot>\n </ic-button>\n </mock:shadow-root>\n </ic-toggle-button>\n <ic-toggle-button class=\"expand-toggle-group-child ic-toggle-button-disabled ic-toggle-button-medium\" id=\"2\" label=\"Toggle\" tabindex=\"-1\" variant=\"default\">\n <mock:shadow-root>\n <ic-button aria-disabled=\"true\" aria-pressed=\"false\" class=\"ic-button-disabled ic-button-size-medium ic-button-variant-secondary\" exportparts=\"button\">\n <mock:shadow-root>\n <button aria-disabled=\"false\" aria-label=\"Toggle, unticked, Toggle button group\" class=\"button\" disabled=\"\" part=\"button\" type=\"button\">\n <slot></slot>\n </button>\n </mock:shadow-root>\n Toggle\n <slot></slot>\n </ic-button>\n </mock:shadow-root>\n </ic-toggle-button>\n </ic-toggle-button-group>`);\n\n page.rootInstance.disabled = false;\n\n await page.waitForChanges();\n expect(page.root)\n .toEqualHtml(`<ic-toggle-button-group aria-disabled=\"false\" aria-label=\"Toggle button group\" role=\"group\" select-type=\"single\" tabindex=\"0\" variant=\"default\">\n <mock:shadow-root>\n <slot></slot>\n </mock:shadow-root>\n <ic-toggle-button class=\"expand-toggle-group-child ic-toggle-button-medium\" id=\"0\" label=\"Toggle\" tabindex=\"-1\" variant=\"default\">\n <mock:shadow-root>\n <ic-button aria-disabled=\"false\" aria-pressed=\"false\" class=\"ic-button-size-medium ic-button-variant-secondary\" exportparts=\"button\">\n <mock:shadow-root>\n <button aria-disabled=\"false\" aria-label=\"Toggle, unticked, Toggle button group\" class=\"button\" part=\"button\" type=\"button\">\n <slot></slot>\n </button>\n </mock:shadow-root>\n Toggle\n <slot></slot>\n </ic-button>\n </mock:shadow-root>\n </ic-toggle-button>\n <ic-toggle-button class=\"expand-toggle-group-child ic-toggle-button-medium\" id=\"1\" label=\"Toggle\" tabindex=\"-1\" variant=\"default\">\n <mock:shadow-root>\n <ic-button aria-disabled=\"false\" aria-pressed=\"false\" class=\"ic-button-size-medium ic-button-variant-secondary\" exportparts=\"button\">\n <mock:shadow-root>\n <button aria-disabled=\"false\" aria-label=\"Toggle, unticked, Toggle button group\" class=\"button\" part=\"button\" type=\"button\">\n <slot></slot>\n </button>\n </mock:shadow-root>\n Toggle\n <slot></slot>\n </ic-button>\n </mock:shadow-root>\n </ic-toggle-button>\n <ic-toggle-button class=\"expand-toggle-group-child ic-toggle-button-medium\" id=\"2\" label=\"Toggle\" tabindex=\"-1\" variant=\"default\">\n <mock:shadow-root>\n <ic-button aria-disabled=\"false\" aria-pressed=\"false\" class=\"ic-button-size-medium ic-button-variant-secondary\" exportparts=\"button\">\n <mock:shadow-root>\n <button aria-disabled=\"false\" aria-label=\"Toggle, unticked, Toggle button group\" class=\"button\" part=\"button\" type=\"button\">\n <slot></slot>\n </button>\n </mock:shadow-root>\n Toggle\n <slot></slot>\n </ic-button>\n </mock:shadow-root>\n </ic-toggle-button>\n </ic-toggle-button-group>`);\n });\n});\n\ndescribe(\"ic-toggle-button-group component unit tests\", () => {\n it(\"should getAllToggleButtons and return an array of slotted ic-toggle-buttons\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group select-type=\"single\" size=\"small\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n\n const toggleButtonArray = page.rootInstance.getAllToggleButtons();\n await page.waitForChanges();\n expect(toggleButtonArray.length).toBe(3);\n });\n it(\"should test when the toggle button group receives focus, it should cause the first toggle button inside the group to get focused (when select method is 'single' and no item is already selected)\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group select-type=\"single\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n const toggleGroup = (await document.querySelector(\n \"ic-toggle-button-group\"\n )) as HTMLIcToggleButtonGroupElement;\n const buttons = await Array.from(\n toggleGroup.querySelectorAll(\"ic-toggle-button\")\n );\n await page.waitForChanges();\n toggleGroup.focus();\n\n await page.waitForChanges();\n\n expect(buttons[0].checked).toBeFalsy();\n });\n it(\"should test that focusing group when an ic-toggle-button selected should not select first option\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group select-type=\"single\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n const toggleGroup = (await document.querySelector(\n \"ic-toggle-button-group\"\n )) as HTMLIcToggleButtonGroupElement;\n const buttons = await Array.from(\n toggleGroup.querySelectorAll(\"ic-toggle-button\")\n );\n await page.waitForChanges();\n\n buttons[1].checked = true;\n\n toggleGroup.focus();\n\n await page.waitForChanges();\n\n expect(buttons[0].checked).toBeFalsy();\n expect(buttons[1].checked).toBeTruthy();\n });\n it(\"should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group select-type=\"multi\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n\n const toggleGroup = (await document.querySelector(\n \"ic-toggle-button-group\"\n )) as HTMLIcToggleButtonGroupElement;\n const buttons = await Array.from(\n toggleGroup.querySelectorAll(\"ic-toggle-button\")\n );\n await page.waitForChanges();\n\n toggleGroup.focus();\n\n await page.waitForChanges();\n\n expect(buttons[0].checked).toBeFalsy();\n });\n it(\"should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group select-type=\"multi\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n\n const eventSpy = jest.fn();\n page.win.addEventListener(\"icChange\", eventSpy);\n\n const toggleGroup = (await document.querySelector(\n \"ic-toggle-button-group\"\n )) as HTMLIcToggleButtonGroupElement;\n const buttons = await Array.from(\n toggleGroup.querySelectorAll(\"ic-toggle-button\")\n );\n await page.waitForChanges();\n buttons[0].checked = true;\n buttons[1].checked = true;\n\n const customEv = new CustomEvent(\"icToggleChecked\", {});\n\n page.rootInstance.selectHandler(customEv);\n\n await page.waitForChanges();\n\n expect(eventSpy).toHaveBeenCalled();\n });\n it(\"should test handleKeyDown function\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group select-method=\"auto\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n\n const firstButton = (await document.querySelector(\n \"#0\"\n )) as HTMLIcToggleButtonElement;\n const secondButton = (await document.querySelector(\n \"#1\"\n )) as HTMLIcToggleButtonElement;\n const thirdButton = (await document.querySelector(\n \"#2\"\n )) as HTMLIcToggleButtonElement;\n\n expect(firstButton.checked).toBeFalsy();\n await firstButton.click();\n expect(firstButton.checked).toBeTruthy();\n\n await page.waitForChanges();\n page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n expect(thirdButton.checked).toBeTruthy();\n expect(firstButton.checked).toBeFalsy();\n\n await page.waitForChanges();\n await firstButton.click();\n page.rootInstance.handleKeyDown(keyboard(\"ArrowUp\"));\n expect(thirdButton.checked).toBeTruthy();\n expect(firstButton.checked).toBeFalsy();\n\n await page.waitForChanges();\n await firstButton.click();\n page.rootInstance.handleKeyDown(keyboard(\"ArrowDown\"));\n expect(secondButton.checked).toBeTruthy();\n expect(firstButton.checked).toBeFalsy();\n\n await page.waitForChanges();\n await firstButton.click();\n page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n expect(thirdButton.checked).toBeTruthy();\n expect(firstButton.checked).toBeFalsy();\n\n secondButton.disabled = true;\n\n await page.waitForChanges();\n await firstButton.click();\n page.rootInstance.handleKeyDown(keyboard(\"ArrowRight\"));\n expect(thirdButton.checked).toBeTruthy();\n expect(firstButton.checked).toBeFalsy();\n\n // for coverage\n page.rootInstance.handleKeyDown(keyboard(\"Tab\"));\n document.dispatchEvent(keyboard(\"Tab\"));\n });\n it(\"should test handleKeyDown on disabled toggle-button-group\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group disabled>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n\n const mockEvent = new FocusEvent(\"focus\");\n\n expect(page.rootInstance.handleHostFocus(mockEvent)).toBeNull();\n\n await page.rootInstance.disconnectedCallback();\n });\n it(\"should test that setting the theme prop on toggle-button-group sets the theme on all toggle buttons\", async () => {\n const page = await newSpecPage({\n components: [ToggleButtonGroup, ToggleButton, Button],\n html: `<ic-toggle-button-group theme=\"dark\">\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n </ic-toggle-button-group>`,\n });\n\n const toggleGroup = (await document.querySelector(\n \"ic-toggle-button-group\"\n )) as HTMLIcToggleButtonGroupElement;\n const buttons = await Array.from(\n toggleGroup.querySelectorAll(\"ic-toggle-button\")\n );\n await page.rootInstance.watchThemeHandler(\"dark\");\n await page.waitForChanges();\n\n expect(buttons[0].theme).toBe(\"dark\");\n expect(buttons[1].theme).toBe(\"dark\");\n expect(buttons[2].theme).toBe(\"dark\");\n });\n});\n"]}

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

@@ -449,8 +449,8 @@ video {
   --ic-typography-color: var(--ic-top-navigation-text);
-  --ic-button-secondary-text-monochrome: var(--ic-theme-text);
-  --ic-button-secondary-border-monochrome: var(--ic-theme-text);
+  --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);
+  --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);
 }
 :host(.dark) {
@@ -753,4 +753,8 @@ slot[name="toggle-icon"] svg {
   slot[name="app-icon"]::slotted(*) {
     fill: currentcolor;
   }
+  slot[name="toggle-icon"] svg {
+    fill: currentcolor;
+  }
 }

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

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
-import { IcThemeForegroundEnum, } from "../../utils/types";
-import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, getThemeForegroundColor, getSlot, onComponentPropUndefinedChange, onComponentRequiredPropUndefined, isSlotUsed, isEmptyString, isPropDefined, } from "../../utils/helpers";
+import { IcBrandForegroundEnum, } from "../../utils/types";
+import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, getBrandForegroundAppearance, getSlot, onComponentPropUndefinedChange, onComponentRequiredPropUndefined, isSlotUsed, isEmptyString, isPropDefined, } from "../../utils/helpers";
 /**
  * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.
  * @slot app-title - Handle routing by nesting a route in the app title.
@@ -77,7 +77,7 @@ export class TopNavigation {
             this.resizeObserver.observe(this.el);
         };
         this.deviceSize = DEVICE_SIZES.XL;
-        this.foregroundColor = getThemeForegroundColor();
+        this.foregroundColor = getBrandForegroundAppearance();
         this.hasFullWidthSearchBar = false;
         this.mobileSearchBarVisible = false;
         this.mobileSearchHiddenOnBlur = false;
@@ -132,7 +132,7 @@ export class TopNavigation {
     searchValueChangeHandler({ detail }) {
         this.searchValue = detail.value;
     }
-    themeChangeHandler({ detail }) {
+    brandChangeHandler({ detail }) {
         this.foregroundColor = detail.mode;
     }
     toggleSearchBar() {
@@ -178,11 +178,15 @@ export class TopNavigation {
         return (h(Host, { class: {
                 "fullwidth-searchbar": hasFullWidthSearchBar,
                 "mobile-mode": overMobileBreakpoint,
-                [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
+                [IcBrandForegroundEnum.Dark]: foregroundColor === IcBrandForegroundEnum.Dark,
                 [`ic-theme-${theme}`]: theme !== "inherit",
             } }, h("div", { class: "top-navigation" }, h("ic-section-container", { aligned: contentAligned, "full-height": true }, h("header", { role: "banner" }, h("div", { class: "top-panel-container" }, h("div", { class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ class: "title-link" }, attrs), hasAppIcon && (h("div", { class: "app-icon-container" }, h("slot", { name: "app-icon" }))), deviceSize <= DEVICE_SIZES.S &&
             (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
-                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, !overMobileBreakpoint && h("slot", { name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor == "light" ? "dark" : "light", onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasIconButtons && !overMobileBreakpoint && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", theme: foregroundColor == "light" ? "light" : "dark", variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { class: "navigation-tabs" }, h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { monochrome: true, appearance: foregroundColor }, h("ul", { class: "navigation-item-list", tabindex: "-1" }, h("slot", { name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { version: version, status: status, class: {
+                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, !overMobileBreakpoint && h("slot", { name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor == IcBrandForegroundEnum.Light
+                ? IcBrandForegroundEnum.Dark
+                : IcBrandForegroundEnum.Light, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasIconButtons && !overMobileBreakpoint && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", theme: foregroundColor == IcBrandForegroundEnum.Light
+                ? IcBrandForegroundEnum.Dark
+                : IcBrandForegroundEnum.Light, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { class: "navigation-tabs" }, h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { monochrome: true, appearance: foregroundColor }, h("ul", { class: "navigation-item-list", tabindex: "-1" }, h("slot", { name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { version: version, status: status, class: {
                 ["inline"]: inline,
             } }, hasIconButtons && (h("div", { class: "menu-buttons-slot", slot: "buttons" }, h("slot", { name: "buttons" }))), h("ul", { slot: "navigation" }, h("slot", { name: "navigation" }))))));
     }
@@ -474,8 +478,8 @@ export class TopNavigation {
                 "capture": false,
                 "passive": false
             }, {
-                "name": "themeChange",
-                "method": "themeChangeHandler",
+                "name": "brandChange",
+                "method": "brandChangeHandler",
                 "target": "document",
                 "capture": false,
                 "passive": false

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-top-navigation.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n IcTypographyVariants,\n IcAlignment,\n IcThemeForeground,\n IcThemeForegroundEnum,\n IcTheme,\n IcDeviceSizes,\n IcValueEventDetail,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getSlot,\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n isEmptyString,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/*\n @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n /\n@Component({\n tag: \"ic-top-navigation\",\n styleUrl: \"ic-top-navigation.css\",\n shadow: true,\n})\nexport class TopNavigation {\n private hasAppIcon: boolean = false;\n private hasIconButtons: boolean = false;\n private hasNavigation: boolean = false;\n private hasSearchSlotContent: boolean = false;\n private mobileSearchButtonEl: HTMLIcButtonElement;\n private resizeObserver: ResizeObserver = null;\n private searchBar: HTMLIcSearchBarElement = null;\n\n @Element() el: HTMLIcTopNavigationElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n @State() hasFullWidthSearchBar: boolean = false;\n @State() mobileSearchBarVisible: boolean = false;\n @State() mobileSearchHiddenOnBlur: boolean = false;\n @State() navMenuVisible: boolean = false;\n @State() searchButtonClick: boolean = false;\n @State() searchValue: string = \"\";\n\n /\n The alignment of the top navigation content.\n /\n @Prop() contentAligned: IcAlignment = \"full-width\";\n /\n Can set a custom breakpoint for the top navigation to switch to mobile mode.\n * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n /\n @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n /\n The URL to navigate to when the app title is clicked.\n /\n @Prop() href: string = \"/\";\n\n /\n If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n /\n @Prop() inline: boolean = false;\n\n /\n The short title of the app to be displayed at small screen sizes in place of the app title.\n /\n @Prop() shortAppTitle: string = \"\";\n\n /\n The status info to be displayed.\n /\n @Prop() status: 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 version info to be displayed.\n /\n @Prop() version: string = \"\";\n\n /\n The app title to be displayed. This is required, unless a slotted app title link is used.\n /\n @Prop() appTitle: string;\n\n @Watch(\"appTitle\")\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 //this watch can be removed once Gatsby hydration issue is resolved\n onComponentPropUndefinedChange(\n oldValue,\n newValue,\n this.initialiseSearchBar\n );\n }\n\n /\n @internal - Emitted when the menu is closed.\n /\n @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n /\n @internal - Emitted when the menu is opened.\n /\n @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n /\n Emitted when the top navigation is resized.\n */\n @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.checkSlots();\n this.deviceSize = getCurrentDeviceSize();\n this.initialiseSearchBar();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n !isSlotUsed(this.el, \"app-title\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Top Navigation\"\n );\n }\n\n componentWillRender(): void {\n this.checkSlots();\n }\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n this.el.shadowRoot.querySelector<HTMLElement>(\"#menu-button\").focus();\n }\n\n @Listen(\"icSearchBarBlur\", {})\n searchInputBlurHandler({\n detail,\n }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n if (detail !== null) {\n if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n this.toggleSearchBar();\n }\n this.searchValue = detail.value as string;\n }\n }\n\n @Listen(\"icChange\", {})\n searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n this.searchValue = detail.value as string;\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n this.foregroundColor = detail.mode;\n }\n\n private checkSlots = () => {\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n };\n\n private initialiseSearchBar = () => {\n if (this.hasSearchSlotContent) {\n const slot = getSlot(this.el, \"search\");\n if (slot?.tagName === \"IC-SEARCH-BAR\") {\n this.searchBar = slot as HTMLIcSearchBarElement;\n } else if (slot?.tagName === \"FORM\") {\n this.searchBar = slot.querySelector(\"ic-search-bar\");\n }\n\n if (this.searchBar !== null) {\n this.searchBar.hideLabel = true;\n }\n }\n };\n\n private toggleSearchBar(): void {\n this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n if (this.searchBar !== null) {\n this.mobileSearchButtonEl.setAttribute(\n \"aria-label\",\n `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n );\n this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n this.searchBar.fullWidth = this.mobileSearchBarVisible;\n if (this.mobileSearchBarVisible) {\n setTimeout(() => {\n this.searchBar.focus();\n }, 100);\n }\n }\n }\n\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu(show: boolean): void {\n this.navMenuVisible = show;\n (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n document.body.style.height = show ? \"100%\" : \"auto\";\n document.body.style.overflow = show ? \"hidden\" : \"auto\";\n }\n\n private searchButtonMouseDownHandler = () => {\n this.searchButtonClick = true;\n };\n\n private searchButtonClickHandler = () => {\n this.toggleSearchBar();\n this.searchButtonClick = false;\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n if (currSize > this.customMobileBreakpoint) {\n this.showNavMenu(false);\n if (this.mobileSearchBarVisible) {\n this.toggleSearchBar();\n }\n }\n this.icTopNavResized.emit({\n size: currSize,\n });\n if (this.searchBar && document.activeElement === this.searchBar) {\n this.searchBar.setAttribute(\"hidden\", \"true\");\n //remove attribute again as this trigger a redraw & applies css\n this.searchBar.removeAttribute(\"hidden\");\n setTimeout(() => {\n this.searchBar.focus();\n }, 100);\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback(getCurrentDeviceSize());\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n const {\n appTitle,\n contentAligned,\n customMobileBreakpoint,\n deviceSize,\n el,\n foregroundColor,\n hasAppIcon,\n hasFullWidthSearchBar,\n hasIconButtons,\n hasNavigation,\n hasSearchSlotContent,\n href,\n inline,\n menuButtonClick,\n mobileSearchBarVisible,\n navMenuVisible,\n searchButtonClickHandler,\n searchButtonMouseDownHandler,\n shortAppTitle,\n status,\n version,\n theme,\n } = this;\n\n const hasStatus = status !== \"\";\n const hasVersion = version !== \"\";\n const hasMenuContent =\n hasNavigation \|\| hasIconButtons \|\| hasStatus \|\| hasVersion;\n\n const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"medium\" : \"large\";\n const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n ? deviceSize <= DEVICE_SIZES.S\n ? \"subtitle-small\"\n : \"h4\"\n : \"h3\";\n\n const mobileSearchButtonTitle = `${\n mobileSearchBarVisible ? \"Hide\" : \"Show\"\n } search`;\n const menuSize = deviceSize <= DEVICE_SIZES.S ? \"small\" : \"medium\";\n\n const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n const hasAppTitleSlot = isSlotUsed(el, \"app-title\");\n const Component = hasAppTitleSlot ? \"div\" : \"a\";\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\n <Host\n class={{\n \"fullwidth-searchbar\": hasFullWidthSearchBar,\n \"mobile-mode\": overMobileBreakpoint,\n [IcThemeForegroundEnum.Dark]:\n foregroundColor === IcThemeForegroundEnum.Dark,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"top-navigation\">\n <ic-section-container aligned={contentAligned} full-height>\n <header role=\"banner\">\n <div class=\"top-panel-container\">\n <div class=\"app-details-container\">\n {(hasTitle \|\| hasAppTitleSlot) && (\n <Component class=\"title-link\" {...attrs}>\n {hasAppIcon && (\n <div class=\"app-icon-container\">\n <slot name=\"app-icon\" />\n </div>\n )}\n {deviceSize <= DEVICE_SIZES.S &&\n (!isEmptyString(shortAppTitle) \|\| shortAppTitleSlot) ? (\n <ic-typography\n variant=\"subtitle-small\"\n aria-label={\n (!hasAppTitleSlot \|\| !shortAppTitleSlot) &&\n `${appTitle} (${shortAppTitle})`\n }\n >\n <h1>\n {shortAppTitleSlot ? (\n <slot name=\"short-app-title\"></slot>\n ) : (\n shortAppTitle\n )}\n </h1>\n </ic-typography>\n ) : (\n <ic-typography variant={appTitleVariant}>\n <h1 class=\"title-wrap\">\n {hasAppTitleSlot ? (\n <slot name=\"app-title\"></slot>\n ) : (\n appTitle\n )}\n </h1>\n </ic-typography>\n )}\n </Component>\n )}\n {hasStatus && (\n <div class=\"app-status\">\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {status}\n </ic-typography>\n </div>\n )}\n {hasVersion && (\n <div class=\"app-version\">\n <ic-typography\n variant=\"label\"\n class=\"app-version-text\"\n aria-label=\"app version\"\n >\n {version}\n </ic-typography>\n </div>\n )}\n </div>\n\n {(hasSearchSlotContent \|\| hasMenuContent) && (\n <div class=\"search-menu-container\">\n <div class=\"search-actions-container\">\n {!overMobileBreakpoint && <slot name=\"search\"></slot>}\n\n {hasSearchSlotContent && overMobileBreakpoint && (\n <ic-button\n id=\"search-toggle-button\"\n ref={(el) => (this.mobileSearchButtonEl = el)}\n onMouseDown={searchButtonMouseDownHandler}\n variant=\"icon-tertiary\"\n monochrome\n size={searchButtonSize}\n aria-label={mobileSearchButtonTitle}\n theme={foregroundColor == \"light\" ? \"dark\" : \"light\"}\n onClick={searchButtonClickHandler}\n >\n <slot name=\"toggle-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"#ffffff\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n </svg>\n </slot>\n </ic-button>\n )}\n\n {hasIconButtons && !overMobileBreakpoint && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {hasMenuContent && overMobileBreakpoint && (\n <div class=\"menu-button-container\">\n <span\n id=\"navigation-landmark-button-text\"\n class=\"navigation-landmark-button-text\"\n aria-hidden=\"true\"\n >\n Main navigation button\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-button-text\"\n aria-hidden={`${navMenuVisible}`}\n >\n <ic-button\n id=\"menu-button\"\n theme={\n foregroundColor == \"light\" ? \"light\" : \"dark\"\n }\n variant=\"secondary\"\n monochrome\n aria-expanded=\"false\"\n aria-haspopup=\"true\"\n aria-label={`Open ${\n hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n size={menuSize}\n onClick={menuButtonClick}\n >\n Menu\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#ffffff\"\n slot=\"left-icon\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n </svg>\n </ic-button>\n </nav>\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n\n {mobileSearchBarVisible && (\n <div class=\"search-bar-container\">\n <slot name=\"search\"></slot>\n </div>\n )}\n\n {hasNavigation && !overMobileBreakpoint && (\n <div class=\"navigation-tabs\">\n <span\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n aria-hidden=\"true\"\n >\n Main pages\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n class=\"nav-panel-container\"\n >\n <ic-horizontal-scroll\n monochrome\n appearance={foregroundColor}\n >\n <ul class=\"navigation-item-list\" tabindex=\"-1\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-horizontal-scroll>\n </nav>\n </div>\n )}\n </header>\n </ic-section-container>\n </div>\n {navMenuVisible && (\n <ic-navigation-menu\n version={version}\n status={status}\n class={{\n [\"inline\"]: inline,\n }}\n >\n {hasIconButtons && (\n <div class=\"menu-buttons-slot\" slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n <ul slot=\"navigation\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-navigation-menu>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-top-navigation.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n IcTypographyVariants,\n IcAlignment,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcBrand,\n IcDeviceSizes,\n IcValueEventDetail,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getSlot,\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n isEmptyString,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/*\n @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n /\n@Component({\n tag: \"ic-top-navigation\",\n styleUrl: \"ic-top-navigation.css\",\n shadow: true,\n})\nexport class TopNavigation {\n private hasAppIcon: boolean = false;\n private hasIconButtons: boolean = false;\n private hasNavigation: boolean = false;\n private hasSearchSlotContent: boolean = false;\n private mobileSearchButtonEl: HTMLIcButtonElement;\n private resizeObserver: ResizeObserver = null;\n private searchBar: HTMLIcSearchBarElement = null;\n\n @Element() el: HTMLIcTopNavigationElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() hasFullWidthSearchBar: boolean = false;\n @State() mobileSearchBarVisible: boolean = false;\n @State() mobileSearchHiddenOnBlur: boolean = false;\n @State() navMenuVisible: boolean = false;\n @State() searchButtonClick: boolean = false;\n @State() searchValue: string = \"\";\n\n /\n The alignment of the top navigation content.\n /\n @Prop() contentAligned: IcAlignment = \"full-width\";\n /\n Can set a custom breakpoint for the top navigation to switch to mobile mode.\n * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n /\n @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n /\n The URL to navigate to when the app title is clicked.\n /\n @Prop() href: string = \"/\";\n\n /\n If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n /\n @Prop() inline: boolean = false;\n\n /\n The short title of the app to be displayed at small screen sizes in place of the app title.\n /\n @Prop() shortAppTitle: string = \"\";\n\n /\n The status info to be displayed.\n /\n @Prop() status: 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 version info to be displayed.\n /\n @Prop() version: string = \"\";\n\n /\n The app title to be displayed. This is required, unless a slotted app title link is used.\n /\n @Prop() appTitle: string;\n\n @Watch(\"appTitle\")\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 //this watch can be removed once Gatsby hydration issue is resolved\n onComponentPropUndefinedChange(\n oldValue,\n newValue,\n this.initialiseSearchBar\n );\n }\n\n /\n @internal - Emitted when the menu is closed.\n /\n @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n /\n @internal - Emitted when the menu is opened.\n /\n @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n /\n Emitted when the top navigation is resized.\n */\n @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.checkSlots();\n this.deviceSize = getCurrentDeviceSize();\n this.initialiseSearchBar();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n !isSlotUsed(this.el, \"app-title\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Top Navigation\"\n );\n }\n\n componentWillRender(): void {\n this.checkSlots();\n }\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n this.el.shadowRoot.querySelector<HTMLElement>(\"#menu-button\").focus();\n }\n\n @Listen(\"icSearchBarBlur\", {})\n searchInputBlurHandler({\n detail,\n }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n if (detail !== null) {\n if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n this.toggleSearchBar();\n }\n this.searchValue = detail.value as string;\n }\n }\n\n @Listen(\"icChange\", {})\n searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n this.searchValue = detail.value as string;\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.foregroundColor = detail.mode;\n }\n\n private checkSlots = () => {\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n };\n\n private initialiseSearchBar = () => {\n if (this.hasSearchSlotContent) {\n const slot = getSlot(this.el, \"search\");\n if (slot?.tagName === \"IC-SEARCH-BAR\") {\n this.searchBar = slot as HTMLIcSearchBarElement;\n } else if (slot?.tagName === \"FORM\") {\n this.searchBar = slot.querySelector(\"ic-search-bar\");\n }\n\n if (this.searchBar !== null) {\n this.searchBar.hideLabel = true;\n }\n }\n };\n\n private toggleSearchBar(): void {\n this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n if (this.searchBar !== null) {\n this.mobileSearchButtonEl.setAttribute(\n \"aria-label\",\n `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n );\n this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n this.searchBar.fullWidth = this.mobileSearchBarVisible;\n if (this.mobileSearchBarVisible) {\n setTimeout(() => {\n this.searchBar.focus();\n }, 100);\n }\n }\n }\n\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu(show: boolean): void {\n this.navMenuVisible = show;\n (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n document.body.style.height = show ? \"100%\" : \"auto\";\n document.body.style.overflow = show ? \"hidden\" : \"auto\";\n }\n\n private searchButtonMouseDownHandler = () => {\n this.searchButtonClick = true;\n };\n\n private searchButtonClickHandler = () => {\n this.toggleSearchBar();\n this.searchButtonClick = false;\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n if (currSize > this.customMobileBreakpoint) {\n this.showNavMenu(false);\n if (this.mobileSearchBarVisible) {\n this.toggleSearchBar();\n }\n }\n this.icTopNavResized.emit({\n size: currSize,\n });\n if (this.searchBar && document.activeElement === this.searchBar) {\n this.searchBar.setAttribute(\"hidden\", \"true\");\n //remove attribute again as this trigger a redraw & applies css\n this.searchBar.removeAttribute(\"hidden\");\n setTimeout(() => {\n this.searchBar.focus();\n }, 100);\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback(getCurrentDeviceSize());\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n const {\n appTitle,\n contentAligned,\n customMobileBreakpoint,\n deviceSize,\n el,\n foregroundColor,\n hasAppIcon,\n hasFullWidthSearchBar,\n hasIconButtons,\n hasNavigation,\n hasSearchSlotContent,\n href,\n inline,\n menuButtonClick,\n mobileSearchBarVisible,\n navMenuVisible,\n searchButtonClickHandler,\n searchButtonMouseDownHandler,\n shortAppTitle,\n status,\n version,\n theme,\n } = this;\n\n const hasStatus = status !== \"\";\n const hasVersion = version !== \"\";\n const hasMenuContent =\n hasNavigation \|\| hasIconButtons \|\| hasStatus \|\| hasVersion;\n\n const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"medium\" : \"large\";\n const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n ? deviceSize <= DEVICE_SIZES.S\n ? \"subtitle-small\"\n : \"h4\"\n : \"h3\";\n\n const mobileSearchButtonTitle = `${\n mobileSearchBarVisible ? \"Hide\" : \"Show\"\n } search`;\n const menuSize = deviceSize <= DEVICE_SIZES.S ? \"small\" : \"medium\";\n\n const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n const hasAppTitleSlot = isSlotUsed(el, \"app-title\");\n const Component = hasAppTitleSlot ? \"div\" : \"a\";\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\n <Host\n class={{\n \"fullwidth-searchbar\": hasFullWidthSearchBar,\n \"mobile-mode\": overMobileBreakpoint,\n [IcBrandForegroundEnum.Dark]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"top-navigation\">\n <ic-section-container aligned={contentAligned} full-height>\n <header role=\"banner\">\n <div class=\"top-panel-container\">\n <div class=\"app-details-container\">\n {(hasTitle \|\| hasAppTitleSlot) && (\n <Component class=\"title-link\" {...attrs}>\n {hasAppIcon && (\n <div class=\"app-icon-container\">\n <slot name=\"app-icon\" />\n </div>\n )}\n {deviceSize <= DEVICE_SIZES.S &&\n (!isEmptyString(shortAppTitle) \|\| shortAppTitleSlot) ? (\n <ic-typography\n variant=\"subtitle-small\"\n aria-label={\n (!hasAppTitleSlot \|\| !shortAppTitleSlot) &&\n `${appTitle} (${shortAppTitle})`\n }\n >\n <h1>\n {shortAppTitleSlot ? (\n <slot name=\"short-app-title\"></slot>\n ) : (\n shortAppTitle\n )}\n </h1>\n </ic-typography>\n ) : (\n <ic-typography variant={appTitleVariant}>\n <h1 class=\"title-wrap\">\n {hasAppTitleSlot ? (\n <slot name=\"app-title\"></slot>\n ) : (\n appTitle\n )}\n </h1>\n </ic-typography>\n )}\n </Component>\n )}\n {hasStatus && (\n <div class=\"app-status\">\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {status}\n </ic-typography>\n </div>\n )}\n {hasVersion && (\n <div class=\"app-version\">\n <ic-typography\n variant=\"label\"\n class=\"app-version-text\"\n aria-label=\"app version\"\n >\n {version}\n </ic-typography>\n </div>\n )}\n </div>\n\n {(hasSearchSlotContent \|\| hasMenuContent) && (\n <div class=\"search-menu-container\">\n <div class=\"search-actions-container\">\n {!overMobileBreakpoint && <slot name=\"search\"></slot>}\n\n {hasSearchSlotContent && overMobileBreakpoint && (\n <ic-button\n id=\"search-toggle-button\"\n ref={(el) => (this.mobileSearchButtonEl = el)}\n onMouseDown={searchButtonMouseDownHandler}\n variant=\"icon-tertiary\"\n monochrome\n size={searchButtonSize}\n aria-label={mobileSearchButtonTitle}\n theme={\n foregroundColor == IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light\n }\n onClick={searchButtonClickHandler}\n >\n <slot name=\"toggle-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"#ffffff\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n </svg>\n </slot>\n </ic-button>\n )}\n\n {hasIconButtons && !overMobileBreakpoint && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {hasMenuContent && overMobileBreakpoint && (\n <div class=\"menu-button-container\">\n <span\n id=\"navigation-landmark-button-text\"\n class=\"navigation-landmark-button-text\"\n aria-hidden=\"true\"\n >\n Main navigation button\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-button-text\"\n aria-hidden={`${navMenuVisible}`}\n >\n <ic-button\n id=\"menu-button\"\n theme={\n foregroundColor == IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light\n }\n variant=\"secondary\"\n monochrome\n aria-expanded=\"false\"\n aria-haspopup=\"true\"\n aria-label={`Open ${\n hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n size={menuSize}\n onClick={menuButtonClick}\n >\n Menu\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#ffffff\"\n slot=\"left-icon\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n </svg>\n </ic-button>\n </nav>\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n\n {mobileSearchBarVisible && (\n <div class=\"search-bar-container\">\n <slot name=\"search\"></slot>\n </div>\n )}\n\n {hasNavigation && !overMobileBreakpoint && (\n <div class=\"navigation-tabs\">\n <span\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n aria-hidden=\"true\"\n >\n Main pages\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n class=\"nav-panel-container\"\n >\n <ic-horizontal-scroll\n monochrome\n appearance={foregroundColor}\n >\n <ul class=\"navigation-item-list\" tabindex=\"-1\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-horizontal-scroll>\n </nav>\n </div>\n )}\n </header>\n </ic-section-container>\n </div>\n {navMenuVisible && (\n <ic-navigation-menu\n version={version}\n status={status}\n class={{\n [\"inline\"]: inline,\n }}\n >\n {hasIconButtons && (\n <div class=\"menu-buttons-slot\" slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n <ul slot=\"navigation\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-navigation-menu>\n )}\n </Host>\n );\n }\n}\n"]}

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

@@ -289,7 +289,7 @@ describe("ic-top-navigation", () => {
         });
         expect(page.rootInstance.searchValue).toBe("hi again!");
     });
-    it("should test theme change", async () => {
+    it("should test brand change", async () => {
         const page = await newSpecPage({
             components: [TopNavigation],
             html: `<ic-top-navigation
@@ -299,10 +299,10 @@ describe("ic-top-navigation", () => {
     >
     </ic-top-navigation>`,
         });
-        await page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
+        await page.rootInstance.brandChangeHandler({ detail: { mode: "dark" } });
         await page.waitForChanges();
         expect(page.rootInstance.foregroundColor).toBe("dark");
-        await page.rootInstance.themeChangeHandler({ detail: { mode: "light" } });
+        await page.rootInstance.brandChangeHandler({ detail: { mode: "light" } });
         await page.waitForChanges();
         expect(page.rootInstance.foregroundColor).toBe("light");
         //call runResizeObserver