npm - @ukic/web-components - Versions diffs - 2.5.0 → 2.7.0 - Mend

@ukic/web-components 2.5.0 → 2.7.0

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

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

@@ -32,9 +32,13 @@ export class Switch {
     this.label = undefined;
     this.name = this.inputId;
     this.showState = false;
+    this.size = "default";
     this.small = false;
     this.value = "on";
   }
+  checkedChangeHandler() {
+    this.checkedState = this.checked;
+  }
   disconnectedCallback() {
     removeFormResetListener(this.el, this.handleFormReset);
   }
@@ -55,17 +59,17 @@ export class Switch {
     }
   }
   render() {
-    const { label, checkedState, small, disabled, name, showState, value, hideLabel, helperText, inputId, } = this;
+    const { label, checkedState, small, size, disabled, name, showState, value, hideLabel, helperText, inputId, } = this;
     renderHiddenInput(true, this.el, name, checkedState ? value : "", disabled);
     const describedBy = getInputDescribedByText(inputId, helperText !== "", false);
     return (h(Host, null, h("label", { class: {
         ["ic-switch-container"]: true,
         ["ic-switch-disabled"]: disabled,
-        ["ic-switch-small"]: small,
+        ["ic-switch-small"]: small || size === "small",
       }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, readonly: true, disabled: disabled, class: {
         ["ic-switch-label"]: true,
-        ["ic-switch-label-small"]: small,
-      } })), !hideLabel && h("span", { class: "ic-switch-line-break" }), h("input", { checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": describedBy, role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { class: "ic-switch-toggle" }, h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { class: "ic-switch-icon-line", x1: "9", y1: small ? "2" : "1", x2: "9", y2: small ? "8" : "9" })), h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: small ? "3.335" : "4.445" }))), h("slot", { name: "right-adornment" }), showState && (h("ic-typography", { "aria-hidden": "true", variant: "label", class: "ic-switch-checked-status" }, checkedState ? "On" : "Off")))));
+        ["ic-switch-label-small"]: small || size === "small",
+      } })), !hideLabel && h("span", { class: "ic-switch-line-break" }), h("input", { checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": describedBy, role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { class: "ic-switch-toggle" }, h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { class: "ic-switch-icon-line", x1: "9", y1: small || size === "small" ? "2" : "1", x2: "9", y2: small || size === "small" ? "8" : "9" })), h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: small || size === "small" ? "3.335" : "4.445" }))), h("slot", { name: "right-adornment" }), showState && (h("ic-typography", { "aria-hidden": "true", variant: "label", class: "ic-switch-checked-status" }, checkedState ? "On" : "Off")))));
   }
   static get is() { return "ic-switch"; }
   static get encapsulation() { return "shadow"; }
@@ -207,6 +211,30 @@ export class Switch {
         "reflect": false,
         "defaultValue": "false"
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcSizesNoLarge",
+          "resolved": "\"default\" | \"small\"",
+          "references": {
+            "IcSizesNoLarge": {
+              "location": "import",
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcSizesNoLarge"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the switch component."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "small": {
         "type": "boolean",
         "mutable": false,
@@ -218,8 +246,11 @@ export class Switch {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "If `true`, the small styling will be applied to the switch."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
+            }],
+          "text": ""
         },
         "attribute": "small",
         "reflect": false,
@@ -327,5 +358,11 @@ export class Switch {
     };
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "checked",
+        "methodName": "checkedChangeHandler"
+      }];
+  }
 }
 //# sourceMappingURL=ic-switch.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-switch.js","sourceRoot":"","sources":["../../../src/components/ic-switch/ic-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n Method,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\n\nlet inputIds = 0;\n\n/*\n @slot right-adornment - Content is placed to the right of switch before state label.\n /\n@Component({\n tag: \"ic-switch\",\n styleUrl: \"ic-switch.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Switch {\n private inputId = `ic-switch-input-${inputIds++}`;\n\n @Element() el: HTMLIcSwitchElement;\n\n @State() checkedState: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /\n If `true`, the switch will display as checked.\n /\n @Prop() checked?: boolean = false;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText?: string = \"\";\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel?: boolean = false;\n\n /\n The aria-label applied to the switch when no visual 'name' is provided.\n /\n @Prop() label!: string;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name?: string = this.inputId;\n\n /\n If `true`, the switch will render the On/Off state text.\n /\n @Prop() showState?: boolean = false;\n\n /\n If `true`, the small styling will be applied to the switch.\n /\n @Prop() small?: boolean = false;\n\n /\n The value of the toggle does not mean if it's checked or not, use the `checked`\n * property for that.\n \n The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n * it's only used when the toggle participates in a native `<form>`.\n /\n @Prop() value?: string \| null = \"on\";\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() icBlur!: EventEmitter<void>;\n\n /\n Emitted when the value property has changed.\n /\n @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() icFocus!: EventEmitter<void>;\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n componentWillLoad(): void {\n this.checkedState = this.checked;\n addFormResetListener(this.el, this.handleFormReset);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Switch\"\n );\n }\n\n /\n Sets focus on the switch.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"input\")) {\n this.el.shadowRoot.querySelector(\"input\").focus();\n }\n }\n\n private handleChange = () => {\n this.checkedState = !this.checkedState;\n this.icChange.emit({\n checked: this.checkedState,\n value: this.value,\n });\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private handleFormReset = (): void => {\n this.checkedState = this.initiallyChecked;\n };\n\n render() {\n const {\n label,\n checkedState,\n small,\n disabled,\n name,\n showState,\n value,\n hideLabel,\n helperText,\n inputId,\n } = this;\n\n renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n );\n\n return (\n <Host>\n <label\n class={{\n [\"ic-switch-container\"]: true,\n [\"ic-switch-disabled\"]: disabled,\n [\"ic-switch-small\"]: small,\n }}\n htmlFor={inputId}\n >\n {!hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n readonly={true}\n disabled={disabled}\n class={{\n [\"ic-switch-label\"]: true,\n [\"ic-switch-label-small\"]: small,\n }}\n ></ic-input-label>\n )}\n {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n <input\n checked={checkedState}\n disabled={disabled}\n aria-label={label}\n aria-checked={checkedState ? \"true\" : \"false\"}\n aria-describedby={describedBy}\n role=\"switch\"\n class=\"ic-switch-input\"\n type=\"checkbox\"\n name=\"toggle\"\n id={inputId}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onChange={this.handleChange}\n />\n <span class=\"ic-switch-toggle\">\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n class=\"ic-switch-icon-line\"\n x1=\"9\"\n y1={small ? \"2\" : \"1\"}\n x2=\"9\"\n y2={small ? \"8\" : \"9\"}\n />\n </svg>\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n class=\"ic-switch-icon-circle\"\n fill=\"none\"\n cx=\"5\"\n cy=\"5\"\n r={small ? \"3.335\" : \"4.445\"}\n />\n </svg>\n </span>\n <slot name=\"right-adornment\"></slot>\n {showState && (\n <ic-typography\n aria-hidden=\"true\"\n variant=\"label\"\n class=\"ic-switch-checked-status\"\n >\n {checkedState ? \"On\" : \"Off\"}\n </ic-typography>\n )}\n </label>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-switch.js","sourceRoot":"","sources":["../../../src/components/ic-switch/ic-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\nimport { IcSizesNoLarge } from \"../../utils/types\";\n\nlet inputIds = 0;\n\n/*\n @slot right-adornment - Content is placed to the right of switch before state label.\n /\n@Component({\n tag: \"ic-switch\",\n styleUrl: \"ic-switch.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Switch {\n private inputId = `ic-switch-input-${inputIds++}`;\n\n @Element() el: HTMLIcSwitchElement;\n\n @State() checkedState: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /\n If `true`, the switch will display as checked.\n /\n @Prop() checked?: boolean = false;\n\n @Watch(\"checked\")\n checkedChangeHandler(): void {\n this.checkedState = this.checked;\n }\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText?: string = \"\";\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel?: boolean = false;\n\n /\n The aria-label applied to the switch when no visual 'name' is provided.\n /\n @Prop() label!: string;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name?: string = this.inputId;\n\n /\n If `true`, the switch will render the On/Off state text.\n /\n @Prop() showState?: boolean = false;\n\n /\n The size of the switch component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n The value of the toggle does not mean if it's checked or not, use the `checked`\n * property for that.\n \n The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n * it's only used when the toggle participates in a native `<form>`.\n /\n @Prop() value?: string \| null = \"on\";\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() icBlur!: EventEmitter<void>;\n\n /\n Emitted when the value property has changed.\n /\n @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() icFocus!: EventEmitter<void>;\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n componentWillLoad(): void {\n this.checkedState = this.checked;\n addFormResetListener(this.el, this.handleFormReset);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Switch\"\n );\n }\n\n /\n Sets focus on the switch.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"input\")) {\n this.el.shadowRoot.querySelector(\"input\").focus();\n }\n }\n\n private handleChange = () => {\n this.checkedState = !this.checkedState;\n this.icChange.emit({\n checked: this.checkedState,\n value: this.value,\n });\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private handleFormReset = (): void => {\n this.checkedState = this.initiallyChecked;\n };\n\n render() {\n const {\n label,\n checkedState,\n small,\n size,\n disabled,\n name,\n showState,\n value,\n hideLabel,\n helperText,\n inputId,\n } = this;\n\n renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n );\n\n return (\n <Host>\n <label\n class={{\n [\"ic-switch-container\"]: true,\n [\"ic-switch-disabled\"]: disabled,\n [\"ic-switch-small\"]: small \|\| size === \"small\",\n }}\n htmlFor={inputId}\n >\n {!hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n readonly={true}\n disabled={disabled}\n class={{\n [\"ic-switch-label\"]: true,\n [\"ic-switch-label-small\"]: small \|\| size === \"small\",\n }}\n ></ic-input-label>\n )}\n {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n <input\n checked={checkedState}\n disabled={disabled}\n aria-label={label}\n aria-checked={checkedState ? \"true\" : \"false\"}\n aria-describedby={describedBy}\n role=\"switch\"\n class=\"ic-switch-input\"\n type=\"checkbox\"\n name=\"toggle\"\n id={inputId}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onChange={this.handleChange}\n />\n <span class=\"ic-switch-toggle\">\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n class=\"ic-switch-icon-line\"\n x1=\"9\"\n y1={small \|\| size === \"small\" ? \"2\" : \"1\"}\n x2=\"9\"\n y2={small \|\| size === \"small\" ? \"8\" : \"9\"}\n />\n </svg>\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n class=\"ic-switch-icon-circle\"\n fill=\"none\"\n cx=\"5\"\n cy=\"5\"\n r={small \|\| size === \"small\" ? \"3.335\" : \"4.445\"}\n />\n </svg>\n </span>\n <slot name=\"right-adornment\"></slot>\n {showState && (\n <ic-typography\n aria-hidden=\"true\"\n variant=\"label\"\n class=\"ic-switch-checked-status\"\n >\n {checkedState ? \"On\" : \"Off\"}\n </ic-typography>\n )}\n </label>\n </Host>\n );\n }\n}\n"]}

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

@@ -51,7 +51,7 @@ export class Tab {
     this.tabEnabled.emit();
   }
   connectedCallback() {
-    this.tabCreated.emit(this.host);
+    this.tabCreated.emit(this.el);
   }
   disconnectedCallback() {
     const tabContext = document.querySelector(`ic-tab-context[context-id=${this.contextId}]`);
@@ -60,7 +60,7 @@ export class Tab {
     }
   }
   componentWillLoad() {
-    removeDisabledFalse(this.disabled, this.host);
+    removeDisabledFalse(this.disabled, this.el);
   }
   componentDidUpdate() {
     this.isInitialRender = false;
@@ -69,8 +69,8 @@ export class Tab {
    * Sets focus on the tab.
    */
   async setFocus() {
-    if (this.host) {
-      this.host.focus();
+    if (this.el) {
+      this.el.focus();
     }
   }
   render() {
@@ -80,7 +80,7 @@ export class Tab {
         ["ic-tab-light"]: appearance === IcThemeForegroundEnum.Light,
         ["selected"]: selected,
         ["disabled"]: disabled,
-      }, role: "tab", "aria-selected": selected ? "true" : "false", onClick: this.handleClick, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown, "aria-disabled": disabled ? "true" : "false", tabindex: this.selected ? 0 : -1 }, this.host.querySelector('[slot="icon"]') && h("slot", { name: "icon" }), h("ic-typography", { class: "ic-tab-label", variant: "label" }, h("span", null, h("slot", null))), isSlotUsed(this.host, "badge") && h("slot", { name: "badge" })));
+      }, role: "tab", "aria-selected": selected ? "true" : "false", onClick: this.handleClick, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown, "aria-disabled": disabled ? "true" : "false", tabindex: this.selected ? 0 : -1 }, this.el.querySelector('[slot="icon"]') && h("slot", { name: "icon" }), h("ic-typography", { class: "ic-tab-label", variant: "label" }, h("span", null, h("slot", null))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" })));
   }
   static get is() { return "ic-tab"; }
   static get encapsulation() { return "shadow"; }
@@ -356,7 +356,7 @@ export class Tab {
       }
     };
   }
-  static get elementRef() { return "host"; }
+  static get elementRef() { return "el"; }
   static get watchers() {
     return [{
         "propName": "disabled",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tab.js","sourceRoot":"","sources":["../../../src/components/ic-tab/ic-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AAGvB,OAAO,EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAEtE;;;GAGG;AAMH,MAAM,OAAO,GAAG;;IACN,mBAAc,GAAY,KAAK,CAAC;IAEhC,oBAAe,GAAY,IAAI,CAAC;IAqFhC,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;OAC3B,CAAC,CAAC;MACH,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;OAC7B;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;QAE7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;OACJ;IACH,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAG,EAAE;MAC7B,iDAAiD;MACjD,wFAAwF;MACxF,iFAAiF;MACjF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC,CAAC;sBAjHgD,MAAM;qBAGV,SAAS;oBAK1B,KAAK;oBAGY,KAAK;;;;EASnD,oBAAoB;IAClB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;EACzB,CAAC;EA2BD,iBAAiB;IACf,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,~~IAAI~~,CAAC,CAAC;~~EAClC~~,CAAC;EAED,oBAAoB;IAClB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CACvC,6BAA6B,IAAI,CAAC,SAAS,GAAG,CACpB,CAAC;IAC7B,IAAI,UAAU,EAAE;MACd,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACjD;EACH,CAAC;EAED,iBAAiB;IACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,~~IAAI~~,CAAC,CAAC;~~EAChD~~,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;EAC/B,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,IAAI,CAAC,~~IAAI~~,EAAE;~~MACb~~,IAAI,CAAC,~~IAAI~~,CAAC,KAAK,EAAE,CAAC;~~KACnB~~;EACH,CAAC;EAqCD,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAChD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe;QAC1C,CAAC,cAAc,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;QAC5D,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,UAAU,CAAC,EAAE,QAAQ;OACvB,EACD,IAAI,EAAC,KAAK,mBACK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,eAAe,mBAClB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MAE/B,IAAI,CAAC,~~IAAI~~,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ;~~MACtE~~,qBAAe,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,OAAO;QACjD;UACE,eAAa,CACR,CACO;MACf,UAAU,CAAC,IAAI,CAAC,~~IAAI~~,EAAE,OAAO,CAAC,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,~~CACxD~~,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n Method,\n Watch,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\n\n/*\n @slot icon - Content will be rendered next to the tab label.\n * @slot badge - Badge component displayed inline with the tab.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n private focusFromClick: boolean = false;\n private focusTabId: string;\n private isInitialRender: boolean = true;\n\n @Element() ~~host~~: HTMLIcTabElement;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /* @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n /* @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. /\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /* @internal The shared ID between panel and tab. /\n @Prop({ reflect: true }) tabId?: string;\n\n /* @internal The position of the tab inside the tabs array in context. /\n @Prop() tabPosition?: number;\n\n @Watch(\"disabled\")\n disabledWatchHandler(): void {\n this.tabEnabled.emit();\n }\n\n /\n @internal Emitted when a tab is selected.\n /\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is dynamically created.\n /\n @Event() tabCreated: EventEmitter<HTMLIcTabElement>;\n\n /\n @internal Emitted when a tab's disabled prop changes\n /\n @Event() tabEnabled: EventEmitter<void>;\n\n /\n @internal Emitted when a tab is focussed.\n /\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is unmounted.\n /\n @Event() tabRemoved: EventEmitter<void>;\n\n connectedCallback(): void {\n this.tabCreated.emit(this.~~host~~);\n }\n\n disconnectedCallback(): void {\n const tabContext = document.querySelector(\n `ic-tab-context[context-id=${this.contextId}]`\n ) as HTMLIcTabContextElement;\n if (tabContext) {\n tabContext.tabRemovedHandler(!!this.focusTabId);\n }\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.~~host~~);\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n /\n Sets focus on the tab.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.~~host~~) {\n this.~~host~~.focus();\n }\n }\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.focusTabId = this.tabId;\n\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a seperate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n render() {\n const { disabled, selected, appearance } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-light\"]: appearance === IcThemeForegroundEnum.Light,\n [\"selected\"]: selected,\n [\"disabled\"]: disabled,\n }}\n role=\"tab\"\n aria-selected={selected ? \"true\" : \"false\"}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n aria-disabled={disabled ? \"true\" : \"false\"}\n tabindex={this.selected ? 0 : -1}\n >\n {this.~~host~~.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n {isSlotUsed(this.~~host~~, \"badge\") && <slot name=\"badge\"></slot>}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-tab.js","sourceRoot":"","sources":["../../../src/components/ic-tab/ic-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n Method,\n Watch,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\n\n/*\n @slot icon - Content will be rendered next to the tab label.\n * @slot badge - Badge component displayed inline with the tab.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n private focusFromClick: boolean = false;\n private focusTabId: string;\n private isInitialRender: boolean = true;\n\n @Element() el: HTMLIcTabElement;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /* @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n /* @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. /\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /* @internal The shared ID between panel and tab. /\n @Prop({ reflect: true }) tabId?: string;\n\n /* @internal The position of the tab inside the tabs array in context. /\n @Prop() tabPosition?: number;\n\n @Watch(\"disabled\")\n disabledWatchHandler(): void {\n this.tabEnabled.emit();\n }\n\n /\n @internal Emitted when a tab is selected.\n /\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is dynamically created.\n /\n @Event() tabCreated: EventEmitter<HTMLIcTabElement>;\n\n /\n @internal Emitted when a tab's disabled prop changes\n /\n @Event() tabEnabled: EventEmitter<void>;\n\n /\n @internal Emitted when a tab is focussed.\n /\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is unmounted.\n /\n @Event() tabRemoved: EventEmitter<void>;\n\n connectedCallback(): void {\n this.tabCreated.emit(this.el);\n }\n\n disconnectedCallback(): void {\n const tabContext = document.querySelector(\n `ic-tab-context[context-id=${this.contextId}]`\n ) as HTMLIcTabContextElement;\n if (tabContext) {\n tabContext.tabRemovedHandler(!!this.focusTabId);\n }\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n /\n Sets focus on the tab.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el) {\n this.el.focus();\n }\n }\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.focusTabId = this.tabId;\n\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a seperate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n render() {\n const { disabled, selected, appearance } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-light\"]: appearance === IcThemeForegroundEnum.Light,\n [\"selected\"]: selected,\n [\"disabled\"]: disabled,\n }}\n role=\"tab\"\n aria-selected={selected ? \"true\" : \"false\"}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n aria-disabled={disabled ? \"true\" : \"false\"}\n tabindex={this.selected ? 0 : -1}\n >\n {this.el.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-tab-context/ic-tab-context.js CHANGED Viewed

@@ -34,9 +34,9 @@ export class TabContext {
     // Gets tabs and tabpanels with the same context ID
     // Using querySelector to selector the children in relation to the host
     this.getChildren = () => {
-      this.tabGroup = this.host.querySelector("ic-tab-group");
+      this.tabGroup = this.el.querySelector("ic-tab-group");
       this.tabs = Array.from(this.tabGroup.querySelectorAll("ic-tab"));
-      this.tabPanels = Array.from(this.host.children).filter((child) => child.tagName === "IC-TAB-PANEL");
+      this.tabPanels = Array.from(this.el.children).filter((child) => child.tagName === "IC-TAB-PANEL");
       this.enabledTabs = this.getEnabledTabs();
     };
     this.keydownHandler = (event) => {
@@ -418,7 +418,7 @@ export class TabContext {
       }
     };
   }
-  static get elementRef() { return "host"; }
+  static get elementRef() { return "el"; }
   static get watchers() {
     return [{
         "propName": "selectedTabIndex",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tab-context.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Prop,\n State,\n h,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport {\n IcActivationTypes,\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nimport {\n IcTabClickEventDetail,\n IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\n@Component({\n tag: \"ic-tab-context\",\n})\nexport class TabContext {\n private controlledMode: boolean;\n private enabledTabs: HTMLIcTabElement[];\n private focusedTabIndex: number;\n private newTabPanels: HTMLIcTabPanelElement[] = [];\n private newTabs: HTMLIcTabElement[] = [];\n private tabs: HTMLIcTabElement[];\n private tabGroup: HTMLIcTabGroupElement;\n private tabPanels: HTMLIcTabPanelElement[];\n\n @Element() host: HTMLIcTabContextElement;\n\n @State() selectedTab: number \| null;\n\n /*\n Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.\n /\n @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n /\n The appearance of the tab context, e.g dark, or light.\n /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /\n The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.\n /\n @Prop() selectedTabIndex?: number;\n\n @Watch(\"selectedTabIndex\")\n updateSelectedTab(newValue: number): void {\n this.selectedTab = newValue;\n }\n\n /\n Emitted when a user selects a tab.\n /\n @Event({ bubbles: false }) icTabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n /\n @deprecated This event should not be used anymore. Use icTabSelect instead.\n /\n @Event({ bubbles: false }) tabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n componentDidLoad(): void {\n this.setControlledMode();\n this.getChildren();\n this.linkTabs();\n this.attatchEventListeners();\n this.setInitialTab();\n this.configureTabs();\n }\n\n componentWillUpdate(): void {\n this.configureTabs();\n }\n\n disconnectedCallback(): void {\n this.tabGroup.removeEventListener(\"keydown\", this.keydownHandler);\n }\n\n @Listen(\"tabClick\")\n tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n if (\n this.selectedTabIndex === undefined &&\n event.detail.contextId === this.contextId\n ) {\n this.selectedTab = event.detail.position;\n }\n this.icTabSelect.emit({\n tabIndex: event.detail.position,\n });\n this.tabSelect.emit({\n tabIndex: event.detail.position,\n });\n event.stopImmediatePropagation();\n }\n\n @Listen(\"tabCreated\")\n @Listen(\"tabPanelCreated\")\n tabCreatedHandler(ev: CustomEvent): void {\n if (this.tabs && this.tabPanels) {\n (ev.detail.setFocus ? this.newTabs : this.newTabPanels).push(ev.detail);\n if (this.newTabs.length === this.newTabPanels.length) {\n this.tabs.push(...this.newTabs);\n this.tabPanels.push(...this.newTabPanels);\n this.enabledTabs = this.getEnabledTabs();\n this.linkTabs();\n this.newTabs = [];\n this.newTabPanels = [];\n }\n }\n }\n\n @Listen(\"tabEnabled\")\n tabEnabledHandler(): void {\n this.enabledTabs = this.getEnabledTabs();\n }\n\n /\n @internal Used to set tab/tab panel IDs when a tab/tab panel has been removed\n */\n @Method()\n async tabRemovedHandler(hadFocus?: boolean): Promise<void> {\n this.getChildren();\n this.enabledTabs = this.getEnabledTabs();\n this.linkTabs();\n if (this.tabs[this.selectedTab] && this.tabPanels[this.selectedTab]) {\n this.tabs[this.selectedTab].selected = true;\n this.tabPanels[this.selectedTab].selectedTab =\n this.tabs[this.selectedTab].tabId;\n } else {\n this.setInitialTab();\n }\n\n if (hadFocus) {\n this.tabs[this.selectedTab].setFocus();\n }\n }\n\n // Sets attributes to link tab-group, tabs and tab-panels\n private linkTabs = () => {\n this.tabs.forEach((tab, index) => {\n const tabId = `ic-tab-${index}-context-${this.contextId}`;\n const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;\n const shared = `ic-tab--${index}-context-${this.contextId}`;\n const contextIdAttr = \"context-id\";\n tab.setAttribute(\"id\", tabId);\n tab.tabId = shared;\n tab.tabPosition = index;\n tab.setAttribute(\"aria-controls\", tabPanelId);\n tab.setAttribute(contextIdAttr, this.contextId);\n this.tabGroup.setAttribute(contextIdAttr, this.contextId);\n this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n this.tabPanels[index].panelId = shared;\n this.tabPanels[index].tabPosition = index;\n this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n this.tabPanels[index].setAttribute(contextIdAttr, this.contextId);\n\n if (this.appearance === IcThemeForegroundEnum.Light) {\n tab.appearance = this.appearance;\n this.tabPanels[index].appearance = this.appearance;\n }\n });\n\n if (this.appearance === IcThemeForegroundEnum.Light) {\n this.tabGroup.appearance = this.appearance;\n }\n };\n\n // Gets tabs and tabpanels with the same context ID\n // Using querySelector to selector the children in relation to the host\n private getChildren = (): void => {\n this.tabGroup = this.host.querySelector(\"ic-tab-group\");\n this.tabs = Array.from(this.tabGroup.querySelectorAll(\"ic-tab\"));\n this.tabPanels = Array.from(this.host.children).filter(\n (child) => child.tagName === \"IC-TAB-PANEL\"\n ) as HTMLIcTabPanelElement[];\n this.enabledTabs = this.getEnabledTabs();\n };\n\n private keydownHandler = (event: KeyboardEvent) => {\n if (this.activationType === \"automatic\") {\n this.handleKeyBoardNavAutomatic(event);\n } else {\n this.handleKeyBoardNavManual(event);\n }\n };\n\n // Determines how keyboard navigation is to be handled based on the activation type\n private attatchEventListeners = (): void => {\n this.tabGroup.addEventListener(\"keydown\", this.keydownHandler);\n };\n\n // Determines whether the selected tab is being controlled within the component\n // or by the user (via selectedTabIndex and onIcTabSelect)\n private setControlledMode = (): void => {\n if (this.selectedTabIndex !== undefined) {\n this.controlledMode = true;\n this.selectedTab = this.selectedTabIndex;\n }\n };\n\n // Sets the tab that is selected on initial render\n private setInitialTab = (): void => {\n if (this.controlledMode) {\n this.selectedTab = this.selectedTabIndex;\n this.focusedTabIndex = this.selectedTabIndex;\n } else {\n const firstEnabledTabIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[0].tabId\n );\n this.selectedTab = firstEnabledTabIndex;\n this.focusedTabIndex = firstEnabledTabIndex;\n }\n };\n\n // Passes the selected tab to the tab and tab panel components\n private configureTabs = () => {\n this.enabledTabs.forEach((tab) => {\n tab.selected = tab.tabPosition === this.selectedTab;\n });\n this.tabPanels.forEach((tabPanel) => {\n tabPanel.selectedTab = this.tabs[this.selectedTab].tabId;\n });\n };\n\n private getEnabledTabs = () => {\n return Array.from(this.tabs).filter((child) => !child.disabled);\n };\n\n private getIndexOfEnabledTab = (allTabsIndex: number) => {\n return this.enabledTabs.findIndex(\n (tab) => tab.tabId === this.tabs[allTabsIndex].tabId\n );\n };\n\n // Sets focus on tab and selects it\n private keyboardSelectTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n if (!this.controlledMode) {\n this.selectedTab = newIndex;\n } else {\n this.icTabSelect.emit({ tabIndex: newIndex });\n this.tabSelect.emit({ tabIndex: newIndex });\n }\n };\n\n // Sets focus on tab without selecting it (for manual activation)\n private keyboardFocusTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n this.focusedTabIndex = newIndex;\n };\n\n private handleKeyBoardNavAutomatic = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.selectedTab);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardSelectTab(0);\n break;\n case \"End\":\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardSelectTab(enabledTabIndex + 1);\n } else {\n this.keyboardSelectTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardSelectTab(enabledTabIndex - 1);\n } else {\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n }\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n private handleKeyBoardNavManual = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.focusedTabIndex);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardFocusTab(0);\n break;\n case \"End\":\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardFocusTab(enabledTabIndex + 1);\n } else {\n this.keyboardFocusTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardFocusTab(enabledTabIndex - 1);\n } else {\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n }\n break;\n case \"Enter\":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n case \" \":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n render() {\n return <slot></slot>;\n }\n}\n"]}
1	+ {"version":3,"file":"ic-tab-context.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Prop,\n State,\n h,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport {\n IcActivationTypes,\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nimport {\n IcTabClickEventDetail,\n IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\n@Component({\n tag: \"ic-tab-context\",\n})\nexport class TabContext {\n private controlledMode: boolean;\n private enabledTabs: HTMLIcTabElement[];\n private focusedTabIndex: number;\n private newTabPanels: HTMLIcTabPanelElement[] = [];\n private newTabs: HTMLIcTabElement[] = [];\n private tabs: HTMLIcTabElement[];\n private tabGroup: HTMLIcTabGroupElement;\n private tabPanels: HTMLIcTabPanelElement[];\n\n @Element() el: HTMLIcTabContextElement;\n\n @State() selectedTab: number \| null;\n\n /*\n Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.\n /\n @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n /\n The appearance of the tab context, e.g dark, or light.\n /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /\n The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.\n /\n @Prop() selectedTabIndex?: number;\n\n @Watch(\"selectedTabIndex\")\n updateSelectedTab(newValue: number): void {\n this.selectedTab = newValue;\n }\n\n /\n Emitted when a user selects a tab.\n /\n @Event({ bubbles: false }) icTabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n /\n @deprecated This event should not be used anymore. Use icTabSelect instead.\n /\n @Event({ bubbles: false }) tabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n componentDidLoad(): void {\n this.setControlledMode();\n this.getChildren();\n this.linkTabs();\n this.attatchEventListeners();\n this.setInitialTab();\n this.configureTabs();\n }\n\n componentWillUpdate(): void {\n this.configureTabs();\n }\n\n disconnectedCallback(): void {\n this.tabGroup.removeEventListener(\"keydown\", this.keydownHandler);\n }\n\n @Listen(\"tabClick\")\n tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n if (\n this.selectedTabIndex === undefined &&\n event.detail.contextId === this.contextId\n ) {\n this.selectedTab = event.detail.position;\n }\n this.icTabSelect.emit({\n tabIndex: event.detail.position,\n });\n this.tabSelect.emit({\n tabIndex: event.detail.position,\n });\n event.stopImmediatePropagation();\n }\n\n @Listen(\"tabCreated\")\n @Listen(\"tabPanelCreated\")\n tabCreatedHandler(ev: CustomEvent): void {\n if (this.tabs && this.tabPanels) {\n (ev.detail.setFocus ? this.newTabs : this.newTabPanels).push(ev.detail);\n if (this.newTabs.length === this.newTabPanels.length) {\n this.tabs.push(...this.newTabs);\n this.tabPanels.push(...this.newTabPanels);\n this.enabledTabs = this.getEnabledTabs();\n this.linkTabs();\n this.newTabs = [];\n this.newTabPanels = [];\n }\n }\n }\n\n @Listen(\"tabEnabled\")\n tabEnabledHandler(): void {\n this.enabledTabs = this.getEnabledTabs();\n }\n\n /\n @internal Used to set tab/tab panel IDs when a tab/tab panel has been removed\n */\n @Method()\n async tabRemovedHandler(hadFocus?: boolean): Promise<void> {\n this.getChildren();\n this.enabledTabs = this.getEnabledTabs();\n this.linkTabs();\n if (this.tabs[this.selectedTab] && this.tabPanels[this.selectedTab]) {\n this.tabs[this.selectedTab].selected = true;\n this.tabPanels[this.selectedTab].selectedTab =\n this.tabs[this.selectedTab].tabId;\n } else {\n this.setInitialTab();\n }\n\n if (hadFocus) {\n this.tabs[this.selectedTab].setFocus();\n }\n }\n\n // Sets attributes to link tab-group, tabs and tab-panels\n private linkTabs = () => {\n this.tabs.forEach((tab, index) => {\n const tabId = `ic-tab-${index}-context-${this.contextId}`;\n const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;\n const shared = `ic-tab--${index}-context-${this.contextId}`;\n const contextIdAttr = \"context-id\";\n tab.setAttribute(\"id\", tabId);\n tab.tabId = shared;\n tab.tabPosition = index;\n tab.setAttribute(\"aria-controls\", tabPanelId);\n tab.setAttribute(contextIdAttr, this.contextId);\n this.tabGroup.setAttribute(contextIdAttr, this.contextId);\n this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n this.tabPanels[index].panelId = shared;\n this.tabPanels[index].tabPosition = index;\n this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n this.tabPanels[index].setAttribute(contextIdAttr, this.contextId);\n\n if (this.appearance === IcThemeForegroundEnum.Light) {\n tab.appearance = this.appearance;\n this.tabPanels[index].appearance = this.appearance;\n }\n });\n\n if (this.appearance === IcThemeForegroundEnum.Light) {\n this.tabGroup.appearance = this.appearance;\n }\n };\n\n // Gets tabs and tabpanels with the same context ID\n // Using querySelector to selector the children in relation to the host\n private getChildren = (): void => {\n this.tabGroup = this.el.querySelector(\"ic-tab-group\");\n this.tabs = Array.from(this.tabGroup.querySelectorAll(\"ic-tab\"));\n this.tabPanels = Array.from(this.el.children).filter(\n (child) => child.tagName === \"IC-TAB-PANEL\"\n ) as HTMLIcTabPanelElement[];\n this.enabledTabs = this.getEnabledTabs();\n };\n\n private keydownHandler = (event: KeyboardEvent) => {\n if (this.activationType === \"automatic\") {\n this.handleKeyBoardNavAutomatic(event);\n } else {\n this.handleKeyBoardNavManual(event);\n }\n };\n\n // Determines how keyboard navigation is to be handled based on the activation type\n private attatchEventListeners = (): void => {\n this.tabGroup.addEventListener(\"keydown\", this.keydownHandler);\n };\n\n // Determines whether the selected tab is being controlled within the component\n // or by the user (via selectedTabIndex and onIcTabSelect)\n private setControlledMode = (): void => {\n if (this.selectedTabIndex !== undefined) {\n this.controlledMode = true;\n this.selectedTab = this.selectedTabIndex;\n }\n };\n\n // Sets the tab that is selected on initial render\n private setInitialTab = (): void => {\n if (this.controlledMode) {\n this.selectedTab = this.selectedTabIndex;\n this.focusedTabIndex = this.selectedTabIndex;\n } else {\n const firstEnabledTabIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[0].tabId\n );\n this.selectedTab = firstEnabledTabIndex;\n this.focusedTabIndex = firstEnabledTabIndex;\n }\n };\n\n // Passes the selected tab to the tab and tab panel components\n private configureTabs = () => {\n this.enabledTabs.forEach((tab) => {\n tab.selected = tab.tabPosition === this.selectedTab;\n });\n this.tabPanels.forEach((tabPanel) => {\n tabPanel.selectedTab = this.tabs[this.selectedTab].tabId;\n });\n };\n\n private getEnabledTabs = () => {\n return Array.from(this.tabs).filter((child) => !child.disabled);\n };\n\n private getIndexOfEnabledTab = (allTabsIndex: number) => {\n return this.enabledTabs.findIndex(\n (tab) => tab.tabId === this.tabs[allTabsIndex].tabId\n );\n };\n\n // Sets focus on tab and selects it\n private keyboardSelectTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n if (!this.controlledMode) {\n this.selectedTab = newIndex;\n } else {\n this.icTabSelect.emit({ tabIndex: newIndex });\n this.tabSelect.emit({ tabIndex: newIndex });\n }\n };\n\n // Sets focus on tab without selecting it (for manual activation)\n private keyboardFocusTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n this.focusedTabIndex = newIndex;\n };\n\n private handleKeyBoardNavAutomatic = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.selectedTab);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardSelectTab(0);\n break;\n case \"End\":\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardSelectTab(enabledTabIndex + 1);\n } else {\n this.keyboardSelectTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardSelectTab(enabledTabIndex - 1);\n } else {\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n }\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n private handleKeyBoardNavManual = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.focusedTabIndex);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardFocusTab(0);\n break;\n case \"End\":\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardFocusTab(enabledTabIndex + 1);\n } else {\n this.keyboardFocusTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardFocusTab(enabledTabIndex - 1);\n } else {\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n }\n break;\n case \"Enter\":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n case \" \":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n render() {\n return <slot></slot>;\n }\n}\n"]}

package/dist/collection/components/ic-tab-context/test/basic/ic-tab-context.e2e.js CHANGED Viewed

@@ -15,6 +15,33 @@ const testTabs = `
   <ic-tab-panel>Tab panel 3</ic-tab-panel>
 </ic-tab-context>
 `;
+const testTabsResponsive = `
+<style>
+  #container{
+    width: 300px;
+  }
+</style>
+<div id="container">
+  <ic-tab-context>
+    <ic-tab-group label="Example tab group">
+      <ic-tab>One</ic-tab>
+      <ic-tab>Two</ic-tab>
+      <ic-tab id="tab3">Three</ic-tab>
+      <ic-tab>Four</ic-tab>
+      <ic-tab>Five</ic-tab>
+      <ic-tab>Six</ic-tab>
+      <ic-tab>Seven</ic-tab>
+    </ic-tab-group>
+    <ic-tab-panel>Tab One</ic-tab-panel>
+    <ic-tab-panel>Tab Two</ic-tab-panel>
+    <ic-tab-panel>Tab Three</ic-tab-panel>
+    <ic-tab-panel>Tab Four</ic-tab-panel>
+    <ic-tab-panel>Tab Five</ic-tab-panel>
+    <ic-tab-panel>Tab Six</ic-tab-panel>
+    <ic-tab-panel>Tab Seven</ic-tab-panel>
+  </ic-tab-context>
+</div>
+`;
 describe("ic-tab-context component", () => {
   it("should display a tab panel when its corresponding tab is clicked", async () => {
     const page = await newE2EPage({ html: testTabs });
@@ -313,5 +340,13 @@ describe("ic-tab-context component", () => {
       tabIndex: 1,
     });
   });
+  it("should select tab and load content when clicked - responsive tabs", async () => {
+    const page = await newE2EPage({ html: testTabsResponsive });
+    await page.waitForChanges();
+    const tab3 = await page.find('ic-tab[tab-id="ic-tab--2-context-default"]');
+    await tab3.click();
+    await page.waitForChanges();
+    expect(tab3).toHaveClass("selected");
+  });
 });
 //# sourceMappingURL=ic-tab-context.e2e.js.map

package/dist/collection/components/ic-tab-context/test/basic/ic-tab-context.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tab-context.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-tab-context/test/basic/ic-tab-context.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\nbeforeAll(() => {\n jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\nconst testTabs = `\n<ic-tab-context>\n <ic-tab-group label=\"Tabs e2e label\">\n <ic-tab>Tab 1</ic-tab>\n <ic-tab>Tab 2</ic-tab>\n <ic-tab>Tab 3</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab panel 1</ic-tab-panel>\n <ic-tab-panel>Tab panel 2</ic-tab-panel>\n <ic-tab-panel>Tab panel 3</ic-tab-panel>\n</ic-tab-context>\n`;\n\ndescribe(\"ic-tab-context component\", () => {\n it(\"should display a tab panel when its corresponding tab is clicked\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab1 = await page.find('ic-tab[tab-id=\"ic-tab--1-context-default\"]');\n await tab1.click();\n await page.waitForChanges();\n const tabPanel1 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--1-context-default\"]'\n );\n expect(tabPanel1).not.toHaveAttribute(\"hidden\");\n });\n\n it(\"should hide the other tab panels when a tab is clicked\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab1 = await page.find('ic-tab[tab-id=\"ic-tab--1-context-default\"]');\n await tab1.click();\n await page.waitForChanges();\n const tabPanel0 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--0-context-default\"]'\n );\n const tabPanel2 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--2-context-default\"]'\n );\n expect(tabPanel0).toHaveAttribute(\"hidden\");\n expect(tabPanel2).toHaveAttribute(\"hidden\");\n });\n\n it(\"should move focus to the next tab when the right arrow key is pressed\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-1-context-default\");\n });\n\n it(\"should move focus to the previous tab when the left arrow key is pressed\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab1 = await page.find('ic-tab[tab-id=\"ic-tab--1-context-default\"]');\n await tab1.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowLeft\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-0-context-default\");\n });\n\n it(\"should move focus to the first tab when the right arrow key is pressed if currently on the last tab\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab2 = await page.find('ic-tab[tab-id=\"ic-tab--2-context-default\"]');\n await tab2.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-0-context-default\");\n });\n\n it(\"should move focus to the last tab when the left arrow key is pressed if currently on the first tab\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowLeft\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-2-context-default\");\n });\n\n it(\"should move focus to the first tab when the Home key is pressed\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab2 = await page.find('ic-tab[tab-id=\"ic-tab--2-context-default\"]');\n await tab2.click();\n await page.waitForChanges();\n await page.keyboard.press(\"Home\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-0-context-default\");\n });\n\n it(\"should move focus to the last tab when the End key is pressed\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"End\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-2-context-default\");\n });\n\n it(\"should not allow a disabled tab to be selected\", async () => {\n const page = await newE2EPage({\n html: `\n <ic-tab-context>\n <ic-tab-group label=\"Tabs e2e label\">\n <ic-tab>Tab 1</ic-tab>\n <ic-tab disabled>Tab 2</ic-tab>\n <ic-tab>Tab 3</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab panel 1</ic-tab-panel>\n <ic-tab-panel>Tab panel 2</ic-tab-panel>\n <ic-tab-panel>Tab panel 3</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-2-context-default\");\n });\n\n it(\"should display the tab panels automatically using the arrow keys when using automatic activation\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n const tabPanel0 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--0-context-default\"]'\n );\n const tabPanel1 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--1-context-default\"]'\n );\n const tabPanel2 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--2-context-default\"]'\n );\n expect(tabPanel0).toHaveAttribute(\"hidden\");\n expect(tabPanel1).not.toHaveAttribute(\"hidden\");\n expect(tabPanel2).toHaveAttribute(\"hidden\");\n });\n\n it(\"should not display the tab panels automatically using the arrow keys when using manual activation\", async () => {\n const page = await newE2EPage({\n html: `\n <ic-tab-context activation-type=\"manual\">\n <ic-tab-group label=\"Tabs e2e label\">\n <ic-tab>Tab 1</ic-tab>\n <ic-tab>Tab 2</ic-tab>\n <ic-tab>Tab 3</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab panel 1</ic-tab-panel>\n <ic-tab-panel>Tab panel 2</ic-tab-panel>\n <ic-tab-panel>Tab panel 3</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowLeft\");\n await page.waitForChanges();\n const tabPanel0 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--0-context-default\"]'\n );\n const tabPanel1 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--1-context-default\"]'\n );\n const tabPanel2 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--2-context-default\"]'\n );\n expect(tabPanel0).not.toHaveAttribute(\"hidden\");\n expect(tabPanel1).toHaveAttribute(\"hidden\");\n expect(tabPanel2).toHaveAttribute(\"hidden\");\n });\n\n it(\"should set the selected tab in controlled mode to be the value that is passed in\", async () => {\n const page = await newE2EPage({\n html: `\n <ic-tab-context selected-tab-index=\"1\">\n <ic-tab-group label=\"Tabs e2e label\">\n <ic-tab>Tab 1</ic-tab>\n <ic-tab>Tab 2</ic-tab>\n <ic-tab>Tab 3</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab panel 1</ic-tab-panel>\n <ic-tab-panel>Tab panel 2</ic-tab-panel>\n <ic-tab-panel>Tab panel 3</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n const tabPanel1 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--1-context-default\"]'\n );\n expect(tabPanel1).not.toHaveAttribute(\"hidden\");\n });\n\n it(\"should call icTabSelect event in controlled mode when clicked\", async () => {\n const page = await newE2EPage({\n html: `\n <ic-tab-context selected-tab-index=\"1\">\n <ic-tab-group label=\"Tabs e2e label\">\n <ic-tab>Tab 1</ic-tab>\n <ic-tab>Tab 2</ic-tab>\n <ic-tab>Tab 3</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab panel 1</ic-tab-panel>\n <ic-tab-panel>Tab panel 2</ic-tab-panel>\n <ic-tab-panel>Tab panel 3</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n const tabs = await page.find(\"ic-tab-context\");\n const tab1 = await page.find('ic-tab[tab-id=\"ic-tab--1-context-default\"]');\n const tabSelect = await tabs.spyOnEvent(\"icTabSelect\");\n await tab1.click();\n await page.waitForChanges();\n expect(tabSelect).toHaveReceivedEventDetail({\n tabIndex: 1,\n });\n });\n\n it(\"should move focus to next tab if focused tab is removed\", async () => {\n const page = await newE2EPage({\n html: `<ic-tab-context>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>One</ic-tab>\n <ic-tab>Two</ic-tab>\n <ic-tab>Three</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab One</ic-tab-panel>\n <ic-tab-panel>Tab Two</ic-tab-panel>\n <ic-tab-panel>Tab Three</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n\n let focusedTabId = await page.evaluate(() => document.activeElement.id);\n\n expect(focusedTabId).toBe(\"ic-tab-1-context-default\");\n\n await page.evaluate(() => {\n const tabGroup = document.querySelector(\"ic-tab-group\");\n const allTabs = tabGroup.querySelectorAll(\"ic-tab\");\n\n const tabContext = document.querySelector(\"ic-tab-context\");\n const allTabPanels = tabContext.querySelectorAll(\"ic-tab-panel\");\n\n allTabs[allTabs.length - 2].remove();\n allTabPanels[allTabPanels.length - 2].remove();\n });\n\n await waitForTimeout(250);\n\n focusedTabId = await page.evaluate(() => document.activeElement.id);\n\n expect(focusedTabId).toBe(\"ic-tab-1-context-default\");\n\n const focusedTab = await page.find('ic-tab[id=\"ic-tab-1-context-default\"]');\n const tabPanel = await page.find(\n 'ic-tab-panel[id=\"ic-tab-panel-1-context-default\"]'\n );\n\n expect(focusedTab.textContent).toBe(\"Three\");\n expect(tabPanel).not.toHaveAttribute(\"hidden\");\n });\n\n it(\"should move focus to first tab if last tab is focused and removed\", async () => {\n const page = await newE2EPage({\n html: `<ic-tab-context>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>One</ic-tab>\n <ic-tab>Two</ic-tab>\n <ic-tab>Three</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab One</ic-tab-panel>\n <ic-tab-panel>Tab Two</ic-tab-panel>\n <ic-tab-panel>Tab Three</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n\n let focusedTabId = await page.evaluate(() => document.activeElement.id);\n\n expect(focusedTabId).toBe(\"ic-tab-2-context-default\");\n\n await page.evaluate(() => {\n const tabGroup = document.querySelector(\"ic-tab-group\");\n const allTabs = tabGroup.querySelectorAll(\"ic-tab\");\n\n const tabContext = document.querySelector(\"ic-tab-context\");\n const allTabPanels = tabContext.querySelectorAll(\"ic-tab-panel\");\n\n allTabs[allTabs.length - 1].remove();\n allTabPanels[allTabPanels.length - 1].remove();\n });\n\n await waitForTimeout(250);\n\n focusedTabId = await page.evaluate(() => document.activeElement.id);\n\n expect(focusedTabId).toBe(\"ic-tab-0-context-default\");\n\n const focusedTab = await page.find('ic-tab[id=\"ic-tab-0-context-default\"]');\n const tabPanel = await page.find(\n 'ic-tab-panel[id=\"ic-tab-panel-0-context-default\"]'\n );\n\n expect(focusedTab.textContent).toBe(\"One\");\n expect(tabPanel).not.toHaveAttribute(\"hidden\");\n });\n\n it(\"should not trigger icTabSelect event in parent tab\", async () => {\n const page = await newE2EPage({\n html: `<ic-tab-context id='parent'>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>One</ic-tab>\n <ic-tab>Two</ic-tab>\n <ic-tab>Three</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>\n <ic-tab-context context-id='child' id='nested'>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>One</ic-tab>\n <ic-tab>Two</ic-tab>\n <ic-tab>Three</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab One</ic-tab-panel>\n <ic-tab-panel>Tab Two</ic-tab-panel>\n <ic-tab-panel>Tab Three</ic-tab-panel>\n </ic-tab-context>\n </ic-tab-panel>\n <ic-tab-panel>Tab Two</ic-tab-panel>\n <ic-tab-panel>Tab Three</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n\n const mainTabs = await page.find('ic-tab-context[context-id=\"default\"]');\n const nestedTabs = await page.find('ic-tab-context[context-id=\"child\"]');\n\n const parentTabSelect = await mainTabs.spyOnEvent(\"icTabSelect\");\n const nestedTabSelect = await nestedTabs.spyOnEvent(\"icTabSelect\");\n\n const nestedTab1 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--0-context-default\"] ic-tab[tab-id=\"ic-tab--1-context-child\"]'\n );\n\n await nestedTab1.click();\n await page.waitForChanges();\n\n expect(parentTabSelect).not.toHaveReceivedEvent();\n expect(nestedTabSelect).toHaveReceivedEventDetail({\n tabIndex: 1,\n });\n });\n});\n"]}
1	+ {"version":3,"file":"ic-tab-context.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-tab-context/test/basic/ic-tab-context.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\nbeforeAll(() => {\n jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\nconst testTabs = `\n<ic-tab-context>\n <ic-tab-group label=\"Tabs e2e label\">\n <ic-tab>Tab 1</ic-tab>\n <ic-tab>Tab 2</ic-tab>\n <ic-tab>Tab 3</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab panel 1</ic-tab-panel>\n <ic-tab-panel>Tab panel 2</ic-tab-panel>\n <ic-tab-panel>Tab panel 3</ic-tab-panel>\n</ic-tab-context>\n`;\n\nconst testTabsResponsive = `\n<style>\n #container{\n width: 300px;\n }\n</style>\n<div id=\"container\">\n <ic-tab-context>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>One</ic-tab>\n <ic-tab>Two</ic-tab>\n <ic-tab id=\"tab3\">Three</ic-tab>\n <ic-tab>Four</ic-tab>\n <ic-tab>Five</ic-tab>\n <ic-tab>Six</ic-tab>\n <ic-tab>Seven</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab One</ic-tab-panel>\n <ic-tab-panel>Tab Two</ic-tab-panel>\n <ic-tab-panel>Tab Three</ic-tab-panel>\n <ic-tab-panel>Tab Four</ic-tab-panel>\n <ic-tab-panel>Tab Five</ic-tab-panel>\n <ic-tab-panel>Tab Six</ic-tab-panel>\n <ic-tab-panel>Tab Seven</ic-tab-panel>\n </ic-tab-context>\n</div>\n`;\n\ndescribe(\"ic-tab-context component\", () => {\n it(\"should display a tab panel when its corresponding tab is clicked\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab1 = await page.find('ic-tab[tab-id=\"ic-tab--1-context-default\"]');\n await tab1.click();\n await page.waitForChanges();\n const tabPanel1 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--1-context-default\"]'\n );\n expect(tabPanel1).not.toHaveAttribute(\"hidden\");\n });\n\n it(\"should hide the other tab panels when a tab is clicked\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab1 = await page.find('ic-tab[tab-id=\"ic-tab--1-context-default\"]');\n await tab1.click();\n await page.waitForChanges();\n const tabPanel0 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--0-context-default\"]'\n );\n const tabPanel2 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--2-context-default\"]'\n );\n expect(tabPanel0).toHaveAttribute(\"hidden\");\n expect(tabPanel2).toHaveAttribute(\"hidden\");\n });\n\n it(\"should move focus to the next tab when the right arrow key is pressed\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-1-context-default\");\n });\n\n it(\"should move focus to the previous tab when the left arrow key is pressed\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab1 = await page.find('ic-tab[tab-id=\"ic-tab--1-context-default\"]');\n await tab1.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowLeft\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-0-context-default\");\n });\n\n it(\"should move focus to the first tab when the right arrow key is pressed if currently on the last tab\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab2 = await page.find('ic-tab[tab-id=\"ic-tab--2-context-default\"]');\n await tab2.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-0-context-default\");\n });\n\n it(\"should move focus to the last tab when the left arrow key is pressed if currently on the first tab\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowLeft\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-2-context-default\");\n });\n\n it(\"should move focus to the first tab when the Home key is pressed\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab2 = await page.find('ic-tab[tab-id=\"ic-tab--2-context-default\"]');\n await tab2.click();\n await page.waitForChanges();\n await page.keyboard.press(\"Home\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-0-context-default\");\n });\n\n it(\"should move focus to the last tab when the End key is pressed\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"End\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-2-context-default\");\n });\n\n it(\"should not allow a disabled tab to be selected\", async () => {\n const page = await newE2EPage({\n html: `\n <ic-tab-context>\n <ic-tab-group label=\"Tabs e2e label\">\n <ic-tab>Tab 1</ic-tab>\n <ic-tab disabled>Tab 2</ic-tab>\n <ic-tab>Tab 3</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab panel 1</ic-tab-panel>\n <ic-tab-panel>Tab panel 2</ic-tab-panel>\n <ic-tab-panel>Tab panel 3</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n const activeElement = await page.evaluate(() => document.activeElement.id);\n expect(activeElement).toEqual(\"ic-tab-2-context-default\");\n });\n\n it(\"should display the tab panels automatically using the arrow keys when using automatic activation\", async () => {\n const page = await newE2EPage({ html: testTabs });\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n const tabPanel0 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--0-context-default\"]'\n );\n const tabPanel1 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--1-context-default\"]'\n );\n const tabPanel2 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--2-context-default\"]'\n );\n expect(tabPanel0).toHaveAttribute(\"hidden\");\n expect(tabPanel1).not.toHaveAttribute(\"hidden\");\n expect(tabPanel2).toHaveAttribute(\"hidden\");\n });\n\n it(\"should not display the tab panels automatically using the arrow keys when using manual activation\", async () => {\n const page = await newE2EPage({\n html: `\n <ic-tab-context activation-type=\"manual\">\n <ic-tab-group label=\"Tabs e2e label\">\n <ic-tab>Tab 1</ic-tab>\n <ic-tab>Tab 2</ic-tab>\n <ic-tab>Tab 3</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab panel 1</ic-tab-panel>\n <ic-tab-panel>Tab panel 2</ic-tab-panel>\n <ic-tab-panel>Tab panel 3</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowLeft\");\n await page.waitForChanges();\n const tabPanel0 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--0-context-default\"]'\n );\n const tabPanel1 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--1-context-default\"]'\n );\n const tabPanel2 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--2-context-default\"]'\n );\n expect(tabPanel0).not.toHaveAttribute(\"hidden\");\n expect(tabPanel1).toHaveAttribute(\"hidden\");\n expect(tabPanel2).toHaveAttribute(\"hidden\");\n });\n\n it(\"should set the selected tab in controlled mode to be the value that is passed in\", async () => {\n const page = await newE2EPage({\n html: `\n <ic-tab-context selected-tab-index=\"1\">\n <ic-tab-group label=\"Tabs e2e label\">\n <ic-tab>Tab 1</ic-tab>\n <ic-tab>Tab 2</ic-tab>\n <ic-tab>Tab 3</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab panel 1</ic-tab-panel>\n <ic-tab-panel>Tab panel 2</ic-tab-panel>\n <ic-tab-panel>Tab panel 3</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n const tabPanel1 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--1-context-default\"]'\n );\n expect(tabPanel1).not.toHaveAttribute(\"hidden\");\n });\n\n it(\"should call icTabSelect event in controlled mode when clicked\", async () => {\n const page = await newE2EPage({\n html: `\n <ic-tab-context selected-tab-index=\"1\">\n <ic-tab-group label=\"Tabs e2e label\">\n <ic-tab>Tab 1</ic-tab>\n <ic-tab>Tab 2</ic-tab>\n <ic-tab>Tab 3</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab panel 1</ic-tab-panel>\n <ic-tab-panel>Tab panel 2</ic-tab-panel>\n <ic-tab-panel>Tab panel 3</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n const tabs = await page.find(\"ic-tab-context\");\n const tab1 = await page.find('ic-tab[tab-id=\"ic-tab--1-context-default\"]');\n const tabSelect = await tabs.spyOnEvent(\"icTabSelect\");\n await tab1.click();\n await page.waitForChanges();\n expect(tabSelect).toHaveReceivedEventDetail({\n tabIndex: 1,\n });\n });\n\n it(\"should move focus to next tab if focused tab is removed\", async () => {\n const page = await newE2EPage({\n html: `<ic-tab-context>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>One</ic-tab>\n <ic-tab>Two</ic-tab>\n <ic-tab>Three</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab One</ic-tab-panel>\n <ic-tab-panel>Tab Two</ic-tab-panel>\n <ic-tab-panel>Tab Three</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n\n let focusedTabId = await page.evaluate(() => document.activeElement.id);\n\n expect(focusedTabId).toBe(\"ic-tab-1-context-default\");\n\n await page.evaluate(() => {\n const tabGroup = document.querySelector(\"ic-tab-group\");\n const allTabs = tabGroup.querySelectorAll(\"ic-tab\");\n\n const tabContext = document.querySelector(\"ic-tab-context\");\n const allTabPanels = tabContext.querySelectorAll(\"ic-tab-panel\");\n\n allTabs[allTabs.length - 2].remove();\n allTabPanels[allTabPanels.length - 2].remove();\n });\n\n await waitForTimeout(250);\n\n focusedTabId = await page.evaluate(() => document.activeElement.id);\n\n expect(focusedTabId).toBe(\"ic-tab-1-context-default\");\n\n const focusedTab = await page.find('ic-tab[id=\"ic-tab-1-context-default\"]');\n const tabPanel = await page.find(\n 'ic-tab-panel[id=\"ic-tab-panel-1-context-default\"]'\n );\n\n expect(focusedTab.textContent).toBe(\"Three\");\n expect(tabPanel).not.toHaveAttribute(\"hidden\");\n });\n\n it(\"should move focus to first tab if last tab is focused and removed\", async () => {\n const page = await newE2EPage({\n html: `<ic-tab-context>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>One</ic-tab>\n <ic-tab>Two</ic-tab>\n <ic-tab>Three</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab One</ic-tab-panel>\n <ic-tab-panel>Tab Two</ic-tab-panel>\n <ic-tab-panel>Tab Three</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n\n const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n await tab0.click();\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n await page.keyboard.press(\"ArrowRight\");\n await page.waitForChanges();\n\n let focusedTabId = await page.evaluate(() => document.activeElement.id);\n\n expect(focusedTabId).toBe(\"ic-tab-2-context-default\");\n\n await page.evaluate(() => {\n const tabGroup = document.querySelector(\"ic-tab-group\");\n const allTabs = tabGroup.querySelectorAll(\"ic-tab\");\n\n const tabContext = document.querySelector(\"ic-tab-context\");\n const allTabPanels = tabContext.querySelectorAll(\"ic-tab-panel\");\n\n allTabs[allTabs.length - 1].remove();\n allTabPanels[allTabPanels.length - 1].remove();\n });\n\n await waitForTimeout(250);\n\n focusedTabId = await page.evaluate(() => document.activeElement.id);\n\n expect(focusedTabId).toBe(\"ic-tab-0-context-default\");\n\n const focusedTab = await page.find('ic-tab[id=\"ic-tab-0-context-default\"]');\n const tabPanel = await page.find(\n 'ic-tab-panel[id=\"ic-tab-panel-0-context-default\"]'\n );\n\n expect(focusedTab.textContent).toBe(\"One\");\n expect(tabPanel).not.toHaveAttribute(\"hidden\");\n });\n\n it(\"should not trigger icTabSelect event in parent tab\", async () => {\n const page = await newE2EPage({\n html: `<ic-tab-context id='parent'>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>One</ic-tab>\n <ic-tab>Two</ic-tab>\n <ic-tab>Three</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>\n <ic-tab-context context-id='child' id='nested'>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>One</ic-tab>\n <ic-tab>Two</ic-tab>\n <ic-tab>Three</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab One</ic-tab-panel>\n <ic-tab-panel>Tab Two</ic-tab-panel>\n <ic-tab-panel>Tab Three</ic-tab-panel>\n </ic-tab-context>\n </ic-tab-panel>\n <ic-tab-panel>Tab Two</ic-tab-panel>\n <ic-tab-panel>Tab Three</ic-tab-panel>\n </ic-tab-context>\n `,\n });\n\n const mainTabs = await page.find('ic-tab-context[context-id=\"default\"]');\n const nestedTabs = await page.find('ic-tab-context[context-id=\"child\"]');\n\n const parentTabSelect = await mainTabs.spyOnEvent(\"icTabSelect\");\n const nestedTabSelect = await nestedTabs.spyOnEvent(\"icTabSelect\");\n\n const nestedTab1 = await page.find(\n 'ic-tab-panel[panel-id=\"ic-tab--0-context-default\"] ic-tab[tab-id=\"ic-tab--1-context-child\"]'\n );\n\n await nestedTab1.click();\n await page.waitForChanges();\n\n expect(parentTabSelect).not.toHaveReceivedEvent();\n expect(nestedTabSelect).toHaveReceivedEventDetail({\n tabIndex: 1,\n });\n });\n\n it(\"should select tab and load content when clicked - responsive tabs\", async () => {\n const page = await newE2EPage({ html: testTabsResponsive });\n await page.waitForChanges();\n\n const tab3 = await page.find('ic-tab[tab-id=\"ic-tab--2-context-default\"]');\n await tab3.click();\n await page.waitForChanges();\n expect(tab3).toHaveClass(\"selected\");\n });\n});\n"]}

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

@@ -18,7 +18,7 @@ export class TabGroup {
         ["inline"]: this.inline,
       } }, h("ic-horizontal-scroll", { appearance: appearance === IcThemeForegroundEnum.Dark
         ? IcThemeForegroundEnum.Default
-        : appearance }, h("div", { class: "tabs-container" }, h("slot", null)))));
+        : appearance, "focus-trigger": "tabFocus" }, h("div", { class: "tabs-container" }, h("slot", null)))));
   }
   static get is() { return "ic-tab-group"; }
   static get encapsulation() { return "shadow"; }
@@ -120,6 +120,5 @@ export class TabGroup {
       }
     };
   }
-  static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=ic-tab-group.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tab-group.js","sourceRoot":"","sources":["../../../src/components/ic-tab-group/ic-tab-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,~~OAAO,EAAE,~~IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;~~AAElE~~,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAS3B,MAAM,OAAO,QAAQ;;~~sBAM~~+B,MAAM;qBAMV,SAAS;kBAKX,KAAK;;;EAOjD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,WAAW,CACZ,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEnC,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;QACrD,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,MAAM;OACxB;MAED,4BACE,UAAU,EACR,UAAU,KAAK,qBAAqB,CAAC,IAAI;UACvC,CAAC,CAAC,qBAAqB,CAAC,OAAO;UAC/B,CAAC,CAAC,UAAU;~~QAGhB~~,WAAK,KAAK,EAAC,gBAAgB;UACzB,eAAa,CACT,CACe,CAClB,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, ~~Element,~~ Host, Prop, h } from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n@Component({\n tag: \"ic-tab-group\",\n styleUrl: \"ic-tab-group.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class TabGroup {\n ~~@Element() host: HTMLIcTabGroupElement;\n\n~~ /*\n @internal The appearance of the tab group, e.g dark, or light.\n /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /\n @deprecated This is no longer required.\n * The context id is passed down from `ic-tab-context`\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n If `true`, the tabs and tab panels will be positioned separately.\n /\n @Prop({ reflect: true }) inline?: boolean = false;\n\n /\n The label to describe the purpose of the set of tabs to screen reader users.\n */\n @Prop() label!: string;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Tab Group\"\n );\n }\n\n render() {\n const { appearance, label } = this;\n\n return (\n <Host\n role=\"tablist\"\n aria-label={label}\n class={{\n [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n [\"inline\"]: this.inline,\n }}\n >\n <ic-horizontal-scroll\n appearance={\n appearance === IcThemeForegroundEnum.Dark\n ? IcThemeForegroundEnum.Default\n : appearance\n }\n >\n <div class=\"tabs-container\">\n <slot></slot>\n </div>\n </ic-horizontal-scroll>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-tab-group.js","sourceRoot":"","sources":["../../../src/components/ic-tab-group/ic-tab-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAS3B,MAAM,OAAO,QAAQ;;sBAI+B,MAAM;qBAMV,SAAS;kBAKX,KAAK;;;EAOjD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,WAAW,CACZ,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEnC,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;QACrD,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,MAAM;OACxB;MAED,4BACE,UAAU,EACR,UAAU,KAAK,qBAAqB,CAAC,IAAI;UACvC,CAAC,CAAC,qBAAqB,CAAC,OAAO;UAC/B,CAAC,CAAC,UAAU,mBAEF,UAAU;QAExB,WAAK,KAAK,EAAC,gBAAgB;UACzB,eAAa,CACT,CACe,CAClB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n@Component({\n tag: \"ic-tab-group\",\n styleUrl: \"ic-tab-group.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class TabGroup {\n /*\n @internal The appearance of the tab group, e.g dark, or light.\n /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /\n @deprecated This is no longer required.\n * The context id is passed down from `ic-tab-context`\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n If `true`, the tabs and tab panels will be positioned separately.\n /\n @Prop({ reflect: true }) inline?: boolean = false;\n\n /\n The label to describe the purpose of the set of tabs to screen reader users.\n */\n @Prop() label!: string;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Tab Group\"\n );\n }\n\n render() {\n const { appearance, label } = this;\n\n return (\n <Host\n role=\"tablist\"\n aria-label={label}\n class={{\n [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n [\"inline\"]: this.inline,\n }}\n >\n <ic-horizontal-scroll\n appearance={\n appearance === IcThemeForegroundEnum.Dark\n ? IcThemeForegroundEnum.Default\n : appearance\n }\n focus-trigger=\"tabFocus\"\n >\n <div class=\"tabs-container\">\n <slot></slot>\n </div>\n </ic-horizontal-scroll>\n </Host>\n );\n }\n}\n"]}