@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/dist/collection/components/ic-switch/ic-switch.stories.js

@@ -0,0 +1,149 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  label: "Custom Switch",
+  helperText: "Custom helper text",
+  disabled: false,
+  checked: false,
+  hideLabel: false,
+  size: "medium",
+  theme: "inherit",
+};
+
+export default {
+  title: "Web Components/Switch",
+  component: "ic-switch",
+};
+
+export const Default = {
+  render: () => html` <ic-switch label="Label"></ic-switch> `,
+  name: "Default",
+};
+
+export const Name = {
+  render: () => html` <ic-switch label="Label"></ic-switch> `,
+  name: "Name",
+};
+
+export const Checked = {
+  render: () => html` <ic-switch checked="true" label="Label"></ic-switch> `,
+  name: "Checked",
+};
+
+export const Small = {
+  render: () => html` <ic-switch size="small" label="Label"></ic-switch> `,
+  name: "Small",
+};
+
+export const Disabled = {
+  render: () => html` <ic-switch disabled="true" label="Label"></ic-switch> `,
+  name: "Disabled",
+};
+
+export const DisabledAndName = {
+  render: () => html` <ic-switch disabled="true" label="Label"></ic-switch> `,
+  name: "Disabled and name",
+};
+
+export const DisabledNameAndChecked = {
+  render: () => html`
+    <ic-switch disabled="true" label="Label" checked="true"></ic-switch>
+  `,
+
+  name: "Disabled, name and checked",
+};
+
+export const AriaLabel = {
+  render: () => html`
+    <ic-switch label="Custom label" hide-label="true"></ic-switch>
+  `,
+  name: "ARIA label",
+};
+
+export const HelperText = {
+  render: () =>
+    html` <ic-switch label="Label" helper-text="Helper Text"></ic-switch>`,
+  name: "Helper text",
+};
+
+export const RightAdornment = {
+  render: () =>
+    html` <ic-switch label="Right adornment">
+      <svg
+        slot="right-adornment"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8ZM8 10C5.33 10 0 11.34 0 14V16H16V14C16 11.34 10.67 10 8 10Z"
+        />
+      </svg>
+    </ic-switch>`,
+
+  name: "Right adornment",
+};
+
+export const DefaultInForm = {
+  render: () =>
+    html` <form id="form" aria-label="test form">
+      <ic-switch id="switch" label="custom label" hide-label="true"></ic-switch>
+      <br />
+      <br />
+      <input type="submit" value="Submit" />
+      <input type="reset" value="Reset" />
+      <form>
+        <script>
+          const tcForm = document.getElementById("form");
+          tcForm.addEventListener("submit", handleSubmit);
+          function handleSubmit(e) {
+            e.preventDefault();
+            var data = "HTML Form Data (name: value): \\n";
+            for (const element of document.getElementById("form").elements) {
+              data += element.name + ": " + element.value + "\\n";
+            }
+            alert(data);
+          }
+        </script>
+      </form>
+    </form>`,
+
+  name: "Default in form",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-switch
+      disabled=${args.disabled}
+      label=${args.label}
+      checked=${args.checked}
+      hide-label=${args.hideLabel}
+      helper-text=${args.helperText}
+      size=${args.size}
+      theme=${args.theme}
+    ></ic-switch>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    size: {
+      options: ["medium", "small"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

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

@@ -465,6 +465,10 @@ video {
   fill: var(--ic-tab-icon);
 }
 
+:host(.ic-tab-disabled) ::slotted([slot="icon"]) {
+  fill: var(--ic-tab-icon-disabled);
+}
+
 :host(:focus) {
   box-shadow: var(--focus-indicator);
   border-radius: var(--ic-border-radius);
@@ -492,19 +496,25 @@ video {
 }
 
 :host(.ic-tab-disabled) ic-typography {
-  color: var(--ic-architectural-300);
-
-  --ic-typography-color: var(--ic-architectural-300);
+  --ic-typography-color: var(--ic-tab-label-disabled);
 }
 
 :host(.ic-tab-monochrome) {
   color: var(--ic-tab-label-monochrome);
 }
 
+:host(.ic-tab-monochrome.ic-tab-disabled) ic-typography {
+  color: var(--ic-tab-label-monochrome-disabled);
+}
+
 :host(.ic-tab-monochrome) ::slotted([slot="icon"]) {
   fill: var(--ic-tab-icon-monochrome);
 }
 
+:host(.ic-tab-monochrome.ic-tab-disabled) ::slotted([slot="icon"]) {
+  fill: var(--ic-tab-icon-monochrome-disabled);
+}
+
 :host(.ic-tab-monochrome.ic-tab-selected) {
   border-bottom: var(--ic-space-xxs) solid var(--ic-tab-item-monochrome);
 }

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

@@ -8,6 +8,18 @@ export class Tab {
     constructor() {
         this.focusFromClick = false;
         this.isInitialRender = true;
+        /** @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */
+        this.contextId = "default";
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /** @internal Determines whether black variant of the tabs should be displayed. */
+        this.monochrome = false;
+        /** @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. */
+        this.selected = false;
+        /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+        this.theme = "inherit";
         this.handleClick = () => {
             this.tabClick.emit({
                 tabId: this.tabId,
@@ -39,13 +51,6 @@ export class Tab {
             //the focus does need to be a separate event though to handle focus from keyboard
             this.focusFromClick = true;
         };
-        this.contextId = "default";
-        this.disabled = false;
-        this.monochrome = false;
-        this.selected = false;
-        this.tabId = undefined;
-        this.tabPosition = undefined;
-        this.theme = "inherit";
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
@@ -77,13 +82,13 @@ export class Tab {
     }
     render() {
         const { disabled, selected, theme, monochrome, handleClick, handleFocus, handleMouseDown, } = this;
-        return (h(Host, { class: {
+        return (h(Host, { key: '954c5dd86688230d4ebb36c8a98b9c30c1524fc9', class: {
                 ["with-transition"]: !this.isInitialRender,
-                ["ic-tab-selected"]: selected,
-                ["ic-tab-disabled"]: disabled,
+                ["ic-tab-selected"]: !!selected,
+                ["ic-tab-disabled"]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-                ["ic-tab-monochrome"]: monochrome,
-            }, role: "tab", "aria-selected": `${selected}`, onClick: handleClick, onFocus: handleFocus, onMouseDown: handleMouseDown, "aria-disabled": `${disabled}`, tabindex: selected ? 0 : -1 }, isSlotUsed(this.el, "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" })));
+                ["ic-tab-monochrome"]: !!monochrome,
+            }, role: "tab", "aria-selected": `${selected}`, onClick: handleClick, onFocus: handleFocus, onMouseDown: handleMouseDown, "aria-disabled": `${disabled}`, tabindex: selected ? 0 : -1 }, isSlotUsed(this.el, "icon") && h("slot", { key: '11506c4354b5dc44310df86479b02ed0638bbe32', name: "icon" }), h("ic-typography", { key: 'd466ad914e607cabb9ff47dc31b6428a081b08a7', class: "ic-tab-label", variant: "label" }, h("span", { key: '8cc33760084b7735ed7db8b222a2b0374c936f3f' }, h("slot", { key: '04bdfe11cd1eef76fad7f6e0afa7e059251ba3cc' }))), isSlotUsed(this.el, "badge") && h("slot", { key: 'a29692b7826b09874aba3ec5579dbca979cd791a', name: "badge" })));
     }
     static get is() { return "ic-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -104,7 +109,7 @@ export class Tab {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -116,6 +121,8 @@ export class Tab {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "context-id",
                 "reflect": true,
                 "defaultValue": "\"default\""
@@ -125,7 +132,7 @@ export class Tab {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -134,6 +141,8 @@ export class Tab {
                     "tags": [],
                     "text": "If `true`, the disabled state will be set."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -143,7 +152,7 @@ export class Tab {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -155,6 +164,8 @@ export class Tab {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "monochrome",
                 "reflect": false,
                 "defaultValue": "false"
@@ -164,7 +175,7 @@ export class Tab {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -176,6 +187,8 @@ export class Tab {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "selected",
                 "reflect": true,
                 "defaultValue": "false"
@@ -188,8 +201,8 @@ export class Tab {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -197,6 +210,8 @@ export class Tab {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tab-id",
                 "reflect": true
             },
@@ -208,8 +223,8 @@ export class Tab {
                     "resolved": "number",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -217,6 +232,8 @@ export class Tab {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tab-position",
                 "reflect": false
             },
@@ -225,7 +242,7 @@ export class Tab {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -243,6 +260,8 @@ export class Tab {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""

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

@@ -1 +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 { IcThemeMode } 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 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  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /** @internal Determines whether black variant of the tabs should be displayed. */\n  @Prop() monochrome?: 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  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() theme?: IcThemeMode = \"inherit\";\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    document\n      .querySelector<HTMLIcTabContextElement>(\n        `ic-tab-context[context-id=${this.contextId}]`\n      )\n      ?.tabRemovedHandler(!!this.focusTabId);\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 separate event though to handle focus from keyboard\n    this.focusFromClick = true;\n  };\n\n  render() {\n    const {\n      disabled,\n      selected,\n      theme,\n      monochrome,\n      handleClick,\n      handleFocus,\n      handleMouseDown,\n    } = this;\n    return (\n      <Host\n        class={{\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"ic-tab-selected\"]: selected,\n          [\"ic-tab-disabled\"]: disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-tab-monochrome\"]: monochrome,\n        }}\n        role=\"tab\"\n        aria-selected={`${selected}`}\n        onClick={handleClick}\n        onFocus={handleFocus}\n        onMouseDown={handleMouseDown}\n        aria-disabled={`${disabled}`}\n        tabindex={selected ? 0 : -1}\n      >\n        {isSlotUsed(this.el, \"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"]}
+{"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;AAIvB,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAEtE;;;GAGG;AAMH,MAAM,OAAO,GAAG;IALhB;QAMU,mBAAc,GAAY,KAAK,CAAC;QAEhC,oBAAe,GAAY,IAAI,CAAC;QAIxC,oIAAoI;QAC3G,cAAS,GAAY,SAAS,CAAC;QAExD;;WAEG;QACK,aAAQ,GAAa,KAAK,CAAC;QAMnC,kFAAkF;QAC1E,eAAU,GAAa,KAAK,CAAC;QAErC,oGAAoG;QAC3E,aAAQ,GAAa,KAAK,CAAC;QAQpD,8FAA8F;QACtF,UAAK,GAAiB,SAAS,CAAC;QA8DhC,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAU;gBAC1B,QAAQ,EAAE,IAAI,CAAC,WAAW;aAC3B,CAAC,CAAC;YACH,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,SAAS,EAAE,IAAI,CAAC,SAAU;oBAC1B,QAAQ,EAAE,IAAI,CAAC,WAAW;iBAC3B,CAAC,CAAC;gBACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;gBACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;gBAE7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,SAAS,EAAE,IAAI,CAAC,SAAU;oBAC1B,QAAQ,EAAE,IAAI,CAAC,WAAW;iBAC3B,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAG,EAAE;YAC7B,iDAAiD;YACjD,wFAAwF;YACxF,iFAAiF;YACjF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC,CAAC;KAuCH;IAvJC,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IAkBD,oBAAoB;QAClB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IA2BD,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChC,CAAC;IAED,oBAAoB;;QAClB,MAAA,QAAQ;aACL,aAAa,CACZ,6BAA6B,IAAI,CAAC,SAAS,GAAG,CAC/C,0CACC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC3C,CAAC;IAED,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IAC/B,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;QACZ,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;YACZ,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC;IACH,CAAC;IAqCD,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,UAAU,EACV,WAAW,EACX,WAAW,EACX,eAAe,GAChB,GAAG,IAAI,CAAC;QACT,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe;gBAC1C,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,QAAQ;gBAC/B,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,QAAQ;gBAC/B,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;gBAC1C,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,UAAU;aACpC,EACD,IAAI,EAAC,KAAK,mBACK,GAAG,QAAQ,EAAE,EAC5B,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,eAAe,mBACb,GAAG,QAAQ,EAAE,EAC5B,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAE1B,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,6DAAM,IAAI,EAAC,MAAM,GAAQ;YACzD,sEAAe,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,OAAO;gBACjD;oBACE,8DAAa,CACR,CACO;YACf,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtD,CACR,CAAC;IACJ,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 { IcThemeMode } 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 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  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /** @internal Determines whether black variant of the tabs should be displayed. */\n  @Prop() monochrome?: 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  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() theme?: IcThemeMode = \"inherit\";\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    document\n      .querySelector<HTMLIcTabContextElement>(\n        `ic-tab-context[context-id=${this.contextId}]`\n      )\n      ?.tabRemovedHandler(!!this.focusTabId);\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 separate event though to handle focus from keyboard\n    this.focusFromClick = true;\n  };\n\n  render() {\n    const {\n      disabled,\n      selected,\n      theme,\n      monochrome,\n      handleClick,\n      handleFocus,\n      handleMouseDown,\n    } = this;\n    return (\n      <Host\n        class={{\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"ic-tab-selected\"]: !!selected,\n          [\"ic-tab-disabled\"]: !!disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-tab-monochrome\"]: !!monochrome,\n        }}\n        role=\"tab\"\n        aria-selected={`${selected}`}\n        onClick={handleClick}\n        onFocus={handleFocus}\n        onMouseDown={handleMouseDown}\n        aria-disabled={`${disabled}`}\n        tabindex={selected ? 0 : -1}\n      >\n        {isSlotUsed(this.el, \"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"]}