@ukic/web-components 2.0.0-alpha.121

package/dist/collection/components/ic-tab-list/ic-tab-list.css

@@ -0,0 +1,139 @@
+:host {
+  --border-bottom-color: var(--ic-architectural-300);
+  --splitter-color: var(--ic-architectural-100);
+  --tab-scroll-focus: var(--ic-border-focus);
+  --tab-scroll-fill: var(--ic-action-default);
+  --tab-scroll-disabled-fill: var(--ic-architectural-300);
+  --tab-scroll-hover: var(--ic-action-default-bg-hover);
+  --tab-scroll-active: var(--ic-action-default-bg-active);
+
+  display: block;
+  margin-bottom: var(--ic-space-md);
+  margin-left: calc(-1 * var(--ic-space-xs));
+}
+
+:host(.dark) {
+  --splitter-color: var(--ic-architectural-white);
+  --tab-scroll-focus: var(--ic-border-focus-dark);
+  --tab-scroll-fill: var(--ic-action-light);
+  --tab-scroll-disabled-fill: var(--ic-architectural-500);
+  --tab-scroll-hover: var(--ic-action-dark-bg-hover);
+  --tab-scroll-active: var(--ic-action-dark-bg-active);
+}
+
+:host([inline]) {
+  margin-bottom: 0;
+}
+
+.tabs-container {
+  display: flex;
+  flex-direction: row;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  height: 100%;
+  align-items: center;
+  padding: var(--ic-space-xs);
+  scroll-behavior: smooth;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  margin: calc(-1 * var(--ic-space-xs)) 0;
+}
+
+.tabs-container::-webkit-scrollbar {
+  display: none;
+}
+
+.ic-tab-list-container {
+  display: flex;
+  align-items: center;
+}
+
+:host(.dark.ic-tab-list-not-inline) {
+  --border-bottom-color: var(--ic-architectural-white);
+}
+
+.scroll-container {
+  display: flex;
+}
+
+.scroll-container.hidden {
+  display: none;
+}
+
+.scroll-container:first-child {
+  margin-left: var(--ic-space-xs);
+}
+
+.scroll-arrow {
+  display: flex;
+  width: 36px;
+  height: 36px;
+  margin: var(--ic-space-xxs) var(--ic-space-xxxs);
+  align-items: center;
+  justify-content: center;
+  fill: var(--tab-scroll-fill);
+  cursor: pointer;
+}
+
+.scroll-arrow:focus {
+  outline: none;
+}
+
+.scroll-arrow:hover {
+  background-color: var(--tab-scroll-hover);
+}
+
+.scroll-arrow:active {
+  background-color: var(--tab-scroll-active);
+}
+
+.scroll-container.disabled .scroll-arrow {
+  fill: var(--tab-scroll-disabled-fill);
+  cursor: default;
+}
+
+.scroll-container.disabled .scroll-arrow:hover,
+.scroll-container.disabled .scroll-arrow:active,
+.scroll-container.disabled .scroll-arrow:focus {
+  background-color: unset;
+  box-shadow: none;
+}
+
+.scroll-container.disabled .ic-tooltip-container {
+  display: none !important;
+}
+
+.scroll-splitter-left,
+.scroll-splitter-right {
+  display: flex;
+  height: var(--ic-space-lg);
+  width: 1px;
+  margin-top: 10px;
+  background-color: var(--splitter-color);
+}
+
+.scroll-splitter-left {
+  margin-left: var(--ic-space-xxxs);
+}
+
+.scroll-splitter-right {
+  margin-right: var(--ic-space-xxxs);
+}
+
+.scroll-container.disabled .scroll-splitter-left,
+.scroll-container.disabled .scroll-splitter-right {
+  display: none;
+}
+
+.ic-tab-splitter {
+  display: block;
+  background-color: var(--border-bottom-color);
+  height: 1px;
+  right: 0;
+  left: 0;
+  margin-left: var(--ic-space-xs);
+}
+
+.ic-tab-splitter.hidden {
+  height: 0;
+}

package/dist/collection/components/ic-tab-list/ic-tab-list.js

@@ -0,0 +1,258 @@
+import { Host, h, } from "@stencil/core";
+import LeftArrow from "./assets/left-arrow.svg";
+import RightArrow from "./assets/right-arrow.svg";
+import { checkResizeObserver, elementOverflowsX, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+const SCROLL_DELAY_MS = 200;
+export class TabList {
+  constructor() {
+    this.buttonStateSet = false;
+    this.resizeObserverCallback = () => {
+      if (this.tabListEl === null || this.tabListEl === undefined) {
+        this.tabListEl = this.host.shadowRoot.querySelector(".tabs-container");
+      }
+      this.tabOverflow = elementOverflowsX(this.tabListEl);
+      if (this.tabOverflow) {
+        this.lastTabVisible =
+          this.tabListEl.offsetWidth + this.tabListEl.scrollLeft >=
+            this.tabListEl.scrollWidth;
+      }
+    };
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.resizeObserverCallback();
+      });
+      this.resizeObserver.observe(this.splitterEl);
+    };
+    this.scrollLeft = () => {
+      this.scrollTabIntoView(this.getCurrentLeftTab() - 1);
+    };
+    this.scrollRight = () => {
+      this.scrollTabIntoView(this.getCurrentLeftTab() + 1);
+    };
+    this.longScrollRight = () => {
+      this.scrollRight();
+      this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);
+    };
+    this.longScrollLeft = () => {
+      this.scrollLeft();
+      this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);
+    };
+    this.leftArrowMouseDownHandler = () => {
+      this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);
+    };
+    this.rightArrowMouseDownHandler = () => {
+      this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);
+    };
+    this.arrowMouseUpHandler = () => {
+      window.clearTimeout(this.scrollDelay);
+    };
+    this.getCurrentLeftTab = () => {
+      const index = this.tabOffsets.findIndex((el) => el > this.tabListEl.scrollLeft);
+      return index < 0 ? 0 : index;
+    };
+    this.scrollHandler = () => {
+      window.clearTimeout(this.isScrolling);
+      // Set a timeout to run after scrolling ends
+      this.isScrolling = window.setTimeout(this.scrollStopped, 50);
+    };
+    this.scrollStopped = () => {
+      // if scrollTabIntoView has been called, the button states will already be set
+      // can't just handle it here as it causes strange jumping behaviour in positioning
+      if (this.buttonStateSet === false) {
+        this.firstTabVisible = this.tabListEl.scrollLeft === 0;
+        this.lastTabVisible =
+          this.tabListEl.offsetWidth + this.tabListEl.scrollLeft >=
+            this.tabListEl.scrollWidth;
+      }
+      this.buttonStateSet = false;
+    };
+    this.contextId = "default";
+    this.inline = false;
+    this.label = undefined;
+    this.dark = false;
+    this.firstTabVisible = true;
+    this.lastTabVisible = false;
+    this.tabOverflow = false;
+  }
+  /**
+   * @internal if tab side scrolling enabled, scrolls the specified tab into view
+   */
+  async scrollTabIntoView(tabNumber) {
+    this.firstTabVisible = tabNumber <= 0;
+    const newScrollPos = tabNumber <= 0 ? 0 : this.tabOffsets[tabNumber - 1];
+    this.lastTabVisible =
+      this.tabListEl.offsetWidth + newScrollPos >= this.tabListEl.scrollWidth;
+    this.buttonStateSet = true;
+    this.tabListEl.scrollLeft = newScrollPos;
+  }
+  tabFocusHandler(event) {
+    if (this.tabOverflow) {
+      this.scrollTabIntoView(event.detail.position);
+    }
+  }
+  componentDidLoad() {
+    this.tabs = Array.from(this.host.querySelectorAll("ic-tab"));
+    let runningTotal = 0;
+    this.tabOffsets = this.tabs.map((tab) => {
+      runningTotal += tab.offsetWidth;
+      return runningTotal;
+    });
+    checkResizeObserver(this.runResizeObserver);
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tab List");
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  render() {
+    const { inline, dark, label, firstTabVisible, lastTabVisible, tabOverflow, } = this;
+    return (h(Host, { role: "tablist", "aria-label": label, class: {
+        ["dark"]: dark,
+        ["ic-tab-list-not-inline"]: !inline,
+      } }, h("div", { class: "ic-tab-list-container" }, this.tabOverflow && (h("div", { "aria-hidden": "true", id: "scroll-container-left", class: {
+        ["scroll-container"]: true,
+        ["hidden"]: !tabOverflow,
+        ["disabled"]: firstTabVisible,
+      } }, h("ic-tooltip", { placement: "bottom-start", label: "Scroll left", "element-id": "left-arrow" }, h("span", { id: "left-arrow", class: "scroll-arrow", innerHTML: LeftArrow, onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler, onMouseUp: this.arrowMouseUpHandler })), h("span", { class: "scroll-splitter-left" }))), h("div", { class: "tabs-container", ref: (el) => (this.tabListEl = el), onScroll: this.scrollHandler }, h("slot", null)), this.tabOverflow && (h("div", { "aria-hidden": "true", id: "scroll-container-right", class: {
+        ["scroll-container"]: true,
+        ["hidden"]: !tabOverflow,
+        ["disabled"]: lastTabVisible,
+      } }, h("span", { class: "scroll-splitter-right" }), h("ic-tooltip", { placement: "bottom-start", label: "Scroll right", "element-id": "right-arrow" }, h("span", { id: "right-arrow", class: "scroll-arrow", innerHTML: RightArrow, onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler, onMouseUp: this.arrowMouseUpHandler }))))), h("div", { "aria-hidden": "true", class: {
+        ["ic-tab-splitter"]: true,
+        ["hidden"]: inline,
+      }, ref: (el) => (this.splitterEl = el) })));
+  }
+  static get is() { return "ic-tab-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-tab-list.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-tab-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "contextId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel."
+        },
+        "attribute": "context-id",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Use when tabs and tab panels are to be positioned separately."
+        },
+        "attribute": "inline",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Provide a label to describe the purpose of the set of tabs to screen reader users."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "dark": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Determines whether the dark variant of the tabs should be displayed."
+            }],
+          "text": ""
+        },
+        "attribute": "dark",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "firstTabVisible": {},
+      "lastTabVisible": {},
+      "tabOverflow": {}
+    };
+  }
+  static get methods() {
+    return {
+      "scrollTabIntoView": {
+        "complexType": {
+          "signature": "(tabNumber: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "if tab side scrolling enabled, scrolls the specified tab into view"
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "tabFocus",
+        "method": "tabFocusHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=ic-tab-list.js.map

package/dist/collection/components/ic-tab-list/ic-tab-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tab-list.js","sourceRoot":"","sources":["../../../src/components/ic-tab-list/ic-tab-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Method,\n  Listen,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\n\nimport {\n  checkResizeObserver,\n  elementOverflowsX,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTabClickEventDetail } from \"../ic-tab/ic-tab.types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n  tag: \"ic-tab-list\",\n  styleUrl: \"ic-tab-list.css\",\n  shadow: true,\n})\nexport class TabList {\n  @Element() host: HTMLIcTabListElement;\n\n  /**\n   * Provide a unique context 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   * Use when tabs and tab panels are to be positioned separately.\n   */\n  @Prop({ reflect: true }) inline?: boolean = false;\n\n  /**\n   * Provide a label to describe the purpose of the set of tabs to screen reader users.\n   */\n  @Prop() label!: string;\n\n  /** @internal Determines whether the dark variant of the tabs should be displayed. */\n  @Prop() dark?: boolean = false;\n\n  @State() firstTabVisible: boolean = true;\n  @State() lastTabVisible: boolean = false;\n  @State() tabOverflow: boolean = false;\n\n  private tabs: HTMLIcTabElement[];\n  private tabOffsets: number[];\n  private tabListEl: HTMLElement;\n  private splitterEl: HTMLElement;\n  private resizeObserver: ResizeObserver;\n  private isScrolling: number;\n  private scrollDelay: number;\n  private buttonStateSet: boolean = false;\n\n  /**\n   * @internal if tab side scrolling enabled, scrolls the specified tab into view\n   */\n  @Method()\n  async scrollTabIntoView(tabNumber: number): Promise<void> {\n    this.firstTabVisible = tabNumber <= 0;\n    const newScrollPos = tabNumber <= 0 ? 0 : this.tabOffsets[tabNumber - 1];\n    this.lastTabVisible =\n      this.tabListEl.offsetWidth + newScrollPos >= this.tabListEl.scrollWidth;\n    this.buttonStateSet = true;\n    this.tabListEl.scrollLeft = newScrollPos;\n  }\n\n  @Listen(\"tabFocus\")\n  tabFocusHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n    if (this.tabOverflow) {\n      this.scrollTabIntoView(event.detail.position);\n    }\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.tabListEl === null || this.tabListEl === undefined) {\n      this.tabListEl = this.host.shadowRoot.querySelector(\".tabs-container\");\n    }\n    this.tabOverflow = elementOverflowsX(this.tabListEl);\n    if (this.tabOverflow) {\n      this.lastTabVisible =\n        this.tabListEl.offsetWidth + this.tabListEl.scrollLeft >=\n        this.tabListEl.scrollWidth;\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.splitterEl);\n  };\n\n  private scrollLeft = () => {\n    this.scrollTabIntoView(this.getCurrentLeftTab() - 1);\n  };\n\n  private scrollRight = () => {\n    this.scrollTabIntoView(this.getCurrentLeftTab() + 1);\n  };\n\n  private longScrollRight = () => {\n    this.scrollRight();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private longScrollLeft = () => {\n    this.scrollLeft();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private leftArrowMouseDownHandler = () => {\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private rightArrowMouseDownHandler = () => {\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private arrowMouseUpHandler = () => {\n    window.clearTimeout(this.scrollDelay);\n  };\n\n  private getCurrentLeftTab = (): number => {\n    const index = this.tabOffsets.findIndex(\n      (el) => el > this.tabListEl.scrollLeft\n    );\n    return index < 0 ? 0 : index;\n  };\n\n  private scrollHandler = () => {\n    window.clearTimeout(this.isScrolling);\n    // Set a timeout to run after scrolling ends\n    this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n  };\n\n  private scrollStopped = () => {\n    // if scrollTabIntoView has been called, the button states will already be set\n    // can't just handle it here as it causes strange jumping behaviour in positioning\n    if (this.buttonStateSet === false) {\n      this.firstTabVisible = this.tabListEl.scrollLeft === 0;\n      this.lastTabVisible =\n        this.tabListEl.offsetWidth + this.tabListEl.scrollLeft >=\n        this.tabListEl.scrollWidth;\n    }\n    this.buttonStateSet = false;\n  };\n\n  componentDidLoad(): void {\n    this.tabs = Array.from(this.host.querySelectorAll(\"ic-tab\"));\n    let runningTotal = 0;\n    this.tabOffsets = this.tabs.map((tab) => {\n      runningTotal += tab.offsetWidth;\n      return runningTotal;\n    });\n    checkResizeObserver(this.runResizeObserver);\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tab List\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    const {\n      inline,\n      dark,\n      label,\n      firstTabVisible,\n      lastTabVisible,\n      tabOverflow,\n    } = this;\n\n    return (\n      <Host\n        role=\"tablist\"\n        aria-label={label}\n        class={{\n          [\"dark\"]: dark,\n          [\"ic-tab-list-not-inline\"]: !inline,\n        }}\n      >\n        <div class=\"ic-tab-list-container\">\n          {this.tabOverflow && (\n            <div\n              aria-hidden=\"true\"\n              id=\"scroll-container-left\"\n              class={{\n                [\"scroll-container\"]: true,\n                [\"hidden\"]: !tabOverflow,\n                [\"disabled\"]: firstTabVisible,\n              }}\n            >\n              <ic-tooltip\n                placement=\"bottom-start\"\n                label=\"Scroll left\"\n                element-id=\"left-arrow\"\n              >\n                <span\n                  id=\"left-arrow\"\n                  class=\"scroll-arrow\"\n                  innerHTML={LeftArrow}\n                  onClick={this.scrollLeft}\n                  onMouseDown={this.leftArrowMouseDownHandler}\n                  onMouseUp={this.arrowMouseUpHandler}\n                ></span>\n              </ic-tooltip>\n              <span class=\"scroll-splitter-left\"></span>\n            </div>\n          )}\n          <div\n            class=\"tabs-container\"\n            ref={(el) => (this.tabListEl = el)}\n            onScroll={this.scrollHandler}\n          >\n            <slot></slot>\n          </div>\n          {this.tabOverflow && (\n            <div\n              aria-hidden=\"true\"\n              id=\"scroll-container-right\"\n              class={{\n                [\"scroll-container\"]: true,\n                [\"hidden\"]: !tabOverflow,\n                [\"disabled\"]: lastTabVisible,\n              }}\n            >\n              <span class=\"scroll-splitter-right\"></span>\n              <ic-tooltip\n                placement=\"bottom-start\"\n                label=\"Scroll right\"\n                element-id=\"right-arrow\"\n              >\n                <span\n                  id=\"right-arrow\"\n                  class=\"scroll-arrow\"\n                  innerHTML={RightArrow}\n                  onClick={this.scrollRight}\n                  onMouseDown={this.rightArrowMouseDownHandler}\n                  onMouseUp={this.arrowMouseUpHandler}\n                ></span>\n              </ic-tooltip>\n            </div>\n          )}\n        </div>\n\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"ic-tab-splitter\"]: true,\n            [\"hidden\"]: inline,\n          }}\n          ref={(el) => (this.splitterEl = el)}\n        ></div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-tab-panel/ic-tab-panel.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js

@@ -0,0 +1,115 @@
+import { Host, h } from "@stencil/core";
+import { onComponentRequiredPropUndefined } from "../../utils/helpers";
+export class TabPanel {
+  constructor() {
+    this.contextId = "default";
+    this.tabPosition = undefined;
+    this.panelId = undefined;
+    this.selectedTab = undefined;
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.tabPosition, propName: "tab-position" }], "Tab Panel");
+  }
+  render() {
+    const { panelId, selectedTab } = this;
+    return (h(Host, { role: "tabpanel", hidden: panelId !== undefined && selectedTab !== undefined
+        ? !(panelId === selectedTab)
+        : true }, h("div", null, h("slot", null))));
+  }
+  static get is() { return "ic-tab-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-tab-panel.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-tab-panel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "contextId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel."
+        },
+        "attribute": "context-id",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "tabPosition": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "The position of the tab panel inside the tabs array in context."
+            }],
+          "text": ""
+        },
+        "attribute": "tab-position",
+        "reflect": true
+      },
+      "panelId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "The shared ID that links the panel and tab."
+            }],
+          "text": ""
+        },
+        "attribute": "panel-id",
+        "reflect": true
+      },
+      "selectedTab": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "The shared ID of the currently selected tab."
+            }],
+          "text": ""
+        },
+        "attribute": "selected-tab",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=ic-tab-panel.js.map

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tab-panel.js","sourceRoot":"","sources":["../../../src/components/ic-tab-panel/ic-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAOvE,MAAM,OAAO,QAAQ;;qBAM2B,SAAS;;;;;EAWvD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,EACtD,WAAW,CACZ,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IACtC,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,UAAU,EACf,MAAM,EACJ,OAAO,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS;QAChD,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,WAAW,CAAC;QAC5B,CAAC,CAAC,IAAI;MAGV;QACE,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tab-panel\",\n  styleUrl: \"ic-tab-panel.css\",\n  shadow: true,\n})\nexport class TabPanel {\n  @Element() host: HTMLIcTabPanelElement;\n\n  /**\n   * Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /** @internal The position of the tab panel inside the tabs array in context. */\n  @Prop({ reflect: true }) tabPosition!: number;\n\n  /** @internal The shared ID that links the panel and tab. */\n  @Prop({ reflect: true }) panelId?: string;\n\n  /** @internal The shared ID of the currently selected tab. */\n  @Prop() selectedTab?: string;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.tabPosition, propName: \"tab-position\" }],\n      \"Tab Panel\"\n    );\n  }\n\n  render() {\n    const { panelId, selectedTab } = this;\n    return (\n      <Host\n        role=\"tabpanel\"\n        hidden={\n          panelId !== undefined && selectedTab !== undefined\n            ? !(panelId === selectedTab)\n            : true\n        }\n      >\n        <div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}