@six-group/ui-library 3.0.0-beta.1.7 → 3.0.0-beta.1.8

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

@@ -1,198 +1,198 @@
-import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
-let id = 0;
-/**
- * @since 1.0
- * @status stable
- *
- * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
- *
- * @slot - The tab's label.
- *
- * @part base - The component's base wrapper.
- * @part close-button - The close button, which is the icon button's base wrapper.
- */
-export class SixTab {
-  constructor() {
-    this.componentId = `tab-${++id}`;
-    /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
-    this.panel = '';
-    /** Set to true to draw the tab in an active state. */
-    this.active = false;
-    /** When true, the tab will be rendered with a close icon. */
-    this.closable = false;
-    /** Set to true to draw the tab in a disabled state. */
-    this.disabled = false;
-  }
-  connectedCallback() {
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-  }
-  /** Sets focus to the tab. */
-  async setFocus(options) {
-    this.tab.focus(options);
-  }
-  /** Removes focus from the tab. */
-  async removeFocus() {
-    this.tab.blur();
-  }
-  handleCloseClick() {
-    this.sixClose.emit();
-  }
-  render() {
-    return (
-    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
-    h(Host, { id: this.host.id || this.componentId },
-      h("div", { part: "base", ref: (el) => (this.tab = el), class: {
-          tab: true,
-          // States
-          'tab--active': this.active,
-          'tab--closable': this.closable,
-          'tab--disabled': this.disabled,
-        }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' },
-        h("slot", null),
-        this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" })))));
-  }
-  static get is() { return "six-tab"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-tab.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-tab.css"]
-  }; }
-  static get properties() { return {
-    "panel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The name of the tab panel the tab will control. The panel must be located in the same tab group."
-      },
-      "attribute": "panel",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "active": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw the tab in an active state."
-      },
-      "attribute": "active",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "closable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the tab will be rendered with a close icon."
-      },
-      "attribute": "closable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw the tab in a disabled state."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "sixClose",
-      "name": "six-tab-close",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the tab is closable and the close button is activated."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "(options?: FocusOptions) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "FocusOptions": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus to the tab.",
-        "tags": []
-      }
-    },
-    "removeFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Removes focus from the tab.",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-}
+import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
+let id = 0;
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The tab's label.
+ *
+ * @part base - The component's base wrapper.
+ * @part close-button - The close button, which is the icon button's base wrapper.
+ */
+export class SixTab {
+  constructor() {
+    this.componentId = `tab-${++id}`;
+    /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
+    this.panel = '';
+    /** Set to true to draw the tab in an active state. */
+    this.active = false;
+    /** When true, the tab will be rendered with a close icon. */
+    this.closable = false;
+    /** Set to true to draw the tab in a disabled state. */
+    this.disabled = false;
+  }
+  connectedCallback() {
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+  }
+  /** Sets focus to the tab. */
+  async setFocus(options) {
+    this.tab.focus(options);
+  }
+  /** Removes focus from the tab. */
+  async removeFocus() {
+    this.tab.blur();
+  }
+  handleCloseClick() {
+    this.sixClose.emit();
+  }
+  render() {
+    return (
+    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
+    h(Host, { id: this.host.id || this.componentId },
+      h("div", { part: "base", ref: (el) => (this.tab = el), class: {
+          tab: true,
+          // States
+          'tab--active': this.active,
+          'tab--closable': this.closable,
+          'tab--disabled': this.disabled,
+        }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' },
+        h("slot", null),
+        this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" })))));
+  }
+  static get is() { return "six-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-tab.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-tab.css"]
+  }; }
+  static get properties() { return {
+    "panel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the tab panel the tab will control. The panel must be located in the same tab group."
+      },
+      "attribute": "panel",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to draw the tab in an active state."
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "closable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, the tab will be rendered with a close icon."
+      },
+      "attribute": "closable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to draw the tab in a disabled state."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "sixClose",
+      "name": "six-tab-close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the tab is closable and the close button is activated."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "(options?: FocusOptions) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "FocusOptions": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets focus to the tab.",
+        "tags": []
+      }
+    },
+    "removeFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Removes focus from the tab.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}