@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.d82aaa2

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

@@ -1,4 +1,6 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
+import { EventListeners } from "../../utils/event-listeners";
+import FormControl from "../../functional-components/form-control/form-control";
 let id = 0;
 /**
  * @since 1.0
@@ -17,11 +19,12 @@ export class SixSwitch {
   constructor() {
     this.switchId = `switch-${++id}`;
     this.labelId = `switch-label-${id}`;
-    /** default value the switch will be reverted to when reset is executed */
-    this.defaultValue = '';
+    this.errorTextId = `input-error-text-${id}`;
+    this.eventListeners = new EventListeners();
     this.handleClick = () => {
       if (this.inputElement != null) {
         this.checked = this.inputElement.checked;
+        this.sixChange.emit(this.checked);
       }
     };
     this.handleBlur = () => {
@@ -36,10 +39,12 @@ export class SixSwitch {
       if (event.key === 'ArrowLeft') {
         event.preventDefault();
         this.checked = false;
+        this.sixChange.emit(this.checked);
       }
       if (event.key === 'ArrowRight') {
         event.preventDefault();
         this.checked = true;
+        this.sixChange.emit(this.checked);
       }
     };
     this.handleMouseDown = (event) => {
@@ -54,6 +59,8 @@ export class SixSwitch {
     this.disabled = false;
     this.required = false;
     this.checked = false;
+    this.label = '';
+    this.errorText = '';
     this.invalid = false;
   }
   handleCheckedChange() {
@@ -61,10 +68,14 @@ export class SixSwitch {
       this.inputElement.checked = this.checked;
       this.checked = this.inputElement.checked;
     }
-    this.sixChange.emit(this.checked);
   }
-  componentWillLoad() {
-    this.defaultValue = this.value;
+  connectedCallback() {
+    this.eventListeners.forward('six-switch-change', 'change', this.host);
+    this.eventListeners.forward('six-switch-blur', 'blur', this.host);
+    this.eventListeners.forward('six-switch-focus', 'focus', this.host);
+  }
+  disconnectedCallback() {
+    this.eventListeners.removeAll();
   }
   /** Sets focus on the switch. */
   async setFocus(options) {
@@ -76,37 +87,13 @@ export class SixSwitch {
     var _a;
     (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.blur();
   }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    var _a;
-    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    var _a;
-    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.validity.valid;
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    if (this.inputElement != null) {
-      this.inputElement.setCustomValidity(message);
-      this.invalid = !this.inputElement.checkValidity();
-    }
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    var _a;
-    this.value = this.defaultValue;
-    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
-    this.invalid = false;
-  }
   render() {
-    return (h("label", { part: "base", htmlFor: this.switchId, class: {
+    return (h(FormControl, { inputId: this.switchId, label: this.label, labelId: this.labelId, hasLabelSlot: false, errorTextId: this.errorTextId, errorText: this.errorText, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { part: "base", htmlFor: this.switchId, class: {
         switch: true,
         'switch--checked': this.checked,
         'switch--disabled': this.disabled,
         'switch--focused': this.hasFocus,
-      }, onMouseDown: this.handleMouseDown }, h("span", { part: "control", class: "switch__control" }, h("span", { part: "thumb", class: "switch__thumb" }), h("input", { ref: (el) => (this.inputElement = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), h("span", { part: "label", id: this.labelId, class: "switch__label" }, h("slot", null))));
+      }, onMouseDown: this.handleMouseDown }, h("span", { part: "control", class: "switch__control" }, h("span", { part: "thumb", class: "switch__thumb" }), h("input", { ref: (el) => (this.inputElement = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), h("span", { part: "label", id: this.labelId, class: "switch__label" }, h("slot", null)))));
   }
   static get is() { return "six-switch"; }
   static get encapsulation() { return "shadow"; }
@@ -188,7 +175,7 @@ export class SixSwitch {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to true to make the switch a required field."
+          "text": "Set to true to show an asterisk beneath the label."
         },
         "attribute": "required",
         "reflect": false,
@@ -212,9 +199,45 @@ export class SixSwitch {
         "reflect": true,
         "defaultValue": "false"
       },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label text."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "errorText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The error message shown, if `invalid` is set to true."
+        },
+        "attribute": "error-text",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "invalid": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -224,7 +247,7 @@ export class SixSwitch {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "This will be true when the control is in an invalid state. Validity is determined by the `required` prop."
+          "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
         },
         "attribute": "invalid",
         "reflect": true,
@@ -284,7 +307,8 @@ export class SixSwitch {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -301,10 +325,12 @@ export class SixSwitch {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -320,7 +346,8 @@ export class SixSwitch {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -329,76 +356,10 @@ export class SixSwitch {
           "text": "Removes focus from the switch.",
           "tags": []
         }
-      },
-      "reportValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean | undefined>"
-        },
-        "docs": {
-          "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
-          "tags": []
-        }
-      },
-      "checkValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean | undefined>"
-        },
-        "docs": {
-          "text": "Checks for validity.",
-          "tags": []
-        }
-      },
-      "setCustomValidity": {
-        "complexType": {
-          "signature": "(message: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
-          "tags": []
-        }
-      },
-      "reset": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Resets the formcontrol",
-          "tags": []
-        }
       }
     };
   }
+  static get elementRef() { return "host"; }
   static get watchers() {
     return [{
         "propName": "checked",

package/dist/collection/components/six-switch/six-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-switch.js","sourceRoot":"","sources":["../../../src/components/six-switch/six-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The switch's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n */\n\n@Component({\n  tag: 'six-switch',\n  styleUrl: 'six-switch.scss',\n  shadow: true,\n})\nexport class SixSwitch {\n  private switchId = `switch-${++id}`;\n  private labelId = `switch-label-${id}`;\n  private inputElement?: HTMLInputElement;\n\n  @State() hasFocus = false;\n\n  /** The switch's name attribute. */\n  @Prop() name = '';\n\n  /** The switch's value attribute. */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the switch. */\n  @Prop() disabled = false;\n\n  /** Set to true to make the switch a required field. */\n  @Prop() required = false;\n\n  /** Set to true to draw the switch in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.inputElement != null) {\n      this.inputElement.checked = this.checked;\n      this.checked = this.inputElement.checked;\n    }\n    this.sixChange.emit(this.checked);\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** default value the switch will be reverted to when reset is executed */\n  private defaultValue = '';\n\n  componentWillLoad() {\n    this.defaultValue = this.value;\n  }\n\n  /** Sets focus on the switch. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.inputElement?.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  @Method()\n  async removeFocus() {\n    this.inputElement?.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.inputElement?.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.inputElement?.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    if (this.inputElement != null) {\n      this.inputElement.setCustomValidity(message);\n      this.invalid = !this.inputElement.checkValidity();\n    }\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.inputElement?.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  private handleClick = () => {\n    if (this.inputElement != null) {\n      this.checked = this.inputElement.checked;\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit(this.checked);\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.checked = false;\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.checked = true;\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.inputElement?.focus();\n  };\n\n  render() {\n    return (\n      <label\n        part=\"base\"\n        htmlFor={this.switchId}\n        class={{\n          switch: true,\n          'switch--checked': this.checked,\n          'switch--disabled': this.disabled,\n          'switch--focused': this.hasFocus,\n        }}\n        onMouseDown={this.handleMouseDown}\n      >\n        <span part=\"control\" class=\"switch__control\">\n          <span part=\"thumb\" class=\"switch__thumb\" />\n\n          <input\n            ref={(el) => (this.inputElement = el)}\n            id={this.switchId}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled}\n            required={this.required}\n            role=\"switch\"\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-labelledby={this.labelId}\n            onClick={this.handleClick}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onKeyDown={this.handleKeyDown}\n          />\n        </span>\n\n        <span part=\"label\" id={this.labelId} class=\"switch__label\">\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-switch.js","sourceRoot":"","sources":["../../../src/components/six-switch/six-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The switch's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n */\n\n@Component({\n  tag: 'six-switch',\n  styleUrl: 'six-switch.scss',\n  shadow: true,\n})\nexport class SixSwitch {\n  private switchId = `switch-${++id}`;\n  private labelId = `switch-label-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n\n  private inputElement?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixSwitchElement;\n\n  @State() hasFocus = false;\n\n  /** The switch's name attribute. */\n  @Prop() name = '';\n\n  /** The switch's value attribute. */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the switch. */\n  @Prop() disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** Set to true to draw the switch in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText = '';\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.inputElement != null) {\n      this.inputElement.checked = this.checked;\n      this.checked = this.inputElement.checked;\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.eventListeners.forward('six-switch-change', 'change', this.host);\n    this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n    this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the switch. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.inputElement?.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  @Method()\n  async removeFocus() {\n    this.inputElement?.blur();\n  }\n\n  private handleClick = () => {\n    if (this.inputElement != null) {\n      this.checked = this.inputElement.checked;\n      this.sixChange.emit(this.checked);\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit(this.checked);\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.checked = false;\n      this.sixChange.emit(this.checked);\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.checked = true;\n      this.sixChange.emit(this.checked);\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.inputElement?.focus();\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.switchId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={false}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <label\n          part=\"base\"\n          htmlFor={this.switchId}\n          class={{\n            switch: true,\n            'switch--checked': this.checked,\n            'switch--disabled': this.disabled,\n            'switch--focused': this.hasFocus,\n          }}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"switch__control\">\n            <span part=\"thumb\" class=\"switch__thumb\" />\n\n            <input\n              ref={(el) => (this.inputElement = el)}\n              id={this.switchId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"switch\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onClick={this.handleClick}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n              onKeyDown={this.handleKeyDown}\n            />\n          </span>\n\n          <span part=\"label\" id={this.labelId} class=\"switch__label\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-switch/test/six-switch.spec.js

@@ -0,0 +1,69 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixSwitch } from "../six-switch";
+describe('six-switch', () => {
+  it('default', async () => {
+    const page = await newSpecPage({
+      components: [SixSwitch],
+      html: `<six-switch></six-switch>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-switch>
+        <mock:shadow-root>
+          <div class="form-control form-control--medium" part="form-control">
+            <label aria-hidden="true" class="form-control__label" htmlfor="switch-1" id="switch-label-1" part="label">
+              <slot name="label"></slot>
+            </label>
+            <div class="form-control__input">
+              <label class="switch" htmlfor="switch-1" part="base">
+                <span class="switch__control" part="control">
+                  <span class="switch__thumb" part="thumb"></span>
+                  <input aria-checked="false" aria-labelledby="switch-label-1" id="switch-1" role="switch" type="checkbox" value="on">
+                </span>
+                <span class="switch__label" id="switch-label-1" part="label">
+                  <slot></slot>
+                </span>
+              </label>
+            </div>
+            <div aria-hidden="true" class="form-control__error-text" id="input-error-text-1" part="error-text"></div>
+            <div aria-hidden="true" class="form-control__help-text" part="help-text">
+              <slot name="help-text"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </six-switch>
+    `);
+  });
+  it('checked', async () => {
+    const page = await newSpecPage({
+      components: [SixSwitch],
+      html: `<six-switch checked></six-switch>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-switch checked="">
+        <mock:shadow-root>
+          <div class="form-control form-control--medium" part="form-control">
+            <label aria-hidden="true" class="form-control__label" htmlfor="switch-2" id="switch-label-2" part="label">
+              <slot name="label"></slot>
+            </label>
+            <div class="form-control__input">
+              <label class="switch switch--checked" htmlfor="switch-2" part="base">
+                <span class="switch__control" part="control">
+                  <span class="switch__thumb" part="thumb"></span>
+                  <input aria-checked="true" aria-labelledby="switch-label-2" checked="" id="switch-2" role="switch" type="checkbox" value="on">
+                </span>
+                <span class="switch__label" id="switch-label-2" part="label">
+                  <slot></slot>
+                </span>
+              </label>
+            </div>
+            <div aria-hidden="true" class="form-control__error-text" id="input-error-text-2" part="error-text"></div>
+            <div aria-hidden="true" class="form-control__help-text" part="help-text">
+              <slot name="help-text"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </six-switch>
+    `);
+  });
+});
+//# sourceMappingURL=six-switch.spec.js.map

package/dist/collection/components/six-switch/test/six-switch.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-switch.spec.js","sourceRoot":"","sources":["../../../../src/components/six-switch/test/six-switch.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,2BAA2B;KAClC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,mCAAmC;KAC1C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixSwitch } from '../six-switch';\n\ndescribe('six-switch', () => {\n  it('default', async () => {\n    const page = await newSpecPage({\n      components: [SixSwitch],\n      html: `<six-switch></six-switch>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-switch>\n        <mock:shadow-root>\n          <div class=\"form-control form-control--medium\" part=\"form-control\">\n            <label aria-hidden=\"true\" class=\"form-control__label\" htmlfor=\"switch-1\" id=\"switch-label-1\" part=\"label\">\n              <slot name=\"label\"></slot>\n            </label>\n            <div class=\"form-control__input\">\n              <label class=\"switch\" htmlfor=\"switch-1\" part=\"base\">\n                <span class=\"switch__control\" part=\"control\">\n                  <span class=\"switch__thumb\" part=\"thumb\"></span>\n                  <input aria-checked=\"false\" aria-labelledby=\"switch-label-1\" id=\"switch-1\" role=\"switch\" type=\"checkbox\" value=\"on\">\n                </span>\n                <span class=\"switch__label\" id=\"switch-label-1\" part=\"label\">\n                  <slot></slot>\n                </span>\n              </label>\n            </div>\n            <div aria-hidden=\"true\" class=\"form-control__error-text\" id=\"input-error-text-1\" part=\"error-text\"></div>\n            <div aria-hidden=\"true\" class=\"form-control__help-text\" part=\"help-text\">\n              <slot name=\"help-text\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </six-switch>\n    `);\n  });\n\n  it('checked', async () => {\n    const page = await newSpecPage({\n      components: [SixSwitch],\n      html: `<six-switch checked></six-switch>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-switch checked=\"\">\n        <mock:shadow-root>\n          <div class=\"form-control form-control--medium\" part=\"form-control\">\n            <label aria-hidden=\"true\" class=\"form-control__label\" htmlfor=\"switch-2\" id=\"switch-label-2\" part=\"label\">\n              <slot name=\"label\"></slot>\n            </label>\n            <div class=\"form-control__input\">\n              <label class=\"switch switch--checked\" htmlfor=\"switch-2\" part=\"base\">\n                <span class=\"switch__control\" part=\"control\">\n                  <span class=\"switch__thumb\" part=\"thumb\"></span>\n                  <input aria-checked=\"true\" aria-labelledby=\"switch-label-2\" checked=\"\" id=\"switch-2\" role=\"switch\" type=\"checkbox\" value=\"on\">\n                </span>\n                <span class=\"switch__label\" id=\"switch-label-2\" part=\"label\">\n                  <slot></slot>\n                </span>\n              </label>\n            </div>\n            <div aria-hidden=\"true\" class=\"form-control__error-text\" id=\"input-error-text-2\" part=\"error-text\"></div>\n            <div aria-hidden=\"true\" class=\"form-control__help-text\" part=\"help-text\">\n              <slot name=\"help-text\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </six-switch>\n    `);\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 let id = 0;
 /**
  * @since 1.0
@@ -151,7 +151,8 @@ export class SixTab {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -168,10 +169,12 @@ export class SixTab {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -187,7 +190,8 @@ export class SixTab {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

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

@@ -1 +1 @@
-{"version":3,"file":"six-tab.js","sourceRoot":"","sources":["../../../src/components/six-tab/six-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG/F,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,MAAM;;IACT,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;iBAMH,EAAE;kBAGD,KAAK;oBAGpB,KAAK;oBAGY,KAAK;;EAKzC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC3D,CAAC;EAED,6BAA6B;EAE7B,KAAK,CAAC,QAAQ,CAAC,OAAsB;;IACnC,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;EAC3B,CAAC;EAED,kCAAkC;EAElC,KAAK,CAAC,WAAW;;IACf,MAAA,IAAI,CAAC,GAAG,0CAAE,IAAI,EAAE,CAAC;EACnB,CAAC;EAEO,gBAAgB;IACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;EACvB,CAAC;EAED,MAAM;IACJ,OAAO;IACL,sGAAsG;IACtG,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW;MACxC,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;UACL,GAAG,EAAE,IAAI;UAET,SAAS;UACT,aAAa,EAAE,IAAI,CAAC,MAAM;UAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;UAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;SAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;QAEpD,eAAQ;QACP,IAAI,CAAC,QAAQ,IAAI,CAChB,uBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  private componentId = `tab-${++id}`;\n  private tab?: HTMLElement;\n\n  @Element() host!: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab?.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab?.blur();\n  }\n\n  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-tab.js","sourceRoot":"","sources":["../../../src/components/six-tab/six-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG/F,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,MAAM;;IACT,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;iBAMH,EAAE;kBAGD,KAAK;oBAGpB,KAAK;oBAGY,KAAK;;EAKzC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC3D,CAAC;EAED,6BAA6B;EAE7B,KAAK,CAAC,QAAQ,CAAC,OAAsB;;IACnC,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;EAC3B,CAAC;EAED,kCAAkC;EAElC,KAAK,CAAC,WAAW;;IACf,MAAA,IAAI,CAAC,GAAG,0CAAE,IAAI,EAAE,CAAC;EACnB,CAAC;EAEO,gBAAgB;IACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;EACvB,CAAC;EAED,MAAM;IACJ,OAAO;IACL,sGAAsG;IACtG,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW;MACxC,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;UACL,GAAG,EAAE,IAAI;UAET,SAAS;UACT,aAAa,EAAE,IAAI,CAAC,MAAM;UAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;UAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;SAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;QAEpD,eAAQ;QACP,IAAI,CAAC,QAAQ,IAAI,CAChB,uBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  private componentId = `tab-${++id}`;\n  private tab?: HTMLElement;\n\n  @Element() host!: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab?.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab?.blur();\n  }\n\n  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,20 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixTab } from "../six-tab";
+describe('six-tab', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixTab],
+      html: `<six-tab></six-tab>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-tab id="tab-1" panel="">
+        <mock:shadow-root>
+          <div aria-disabled="false" aria-selected="false" class="tab" part="base" role="tab" tabindex="-1">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </six-tab>
+    `);
+  });
+});
+//# sourceMappingURL=six-tab.spec.js.map

package/dist/collection/components/six-tab/test/six-tab.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-tab.spec.js","sourceRoot":"","sources":["../../../../src/components/six-tab/test/six-tab.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEpC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,qBAAqB;KAC5B,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixTab } from '../six-tab';\n\ndescribe('six-tab', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixTab],\n      html: `<six-tab></six-tab>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-tab id=\"tab-1\" panel=\"\">\n        <mock:shadow-root>\n          <div aria-disabled=\"false\" aria-selected=\"false\" class=\"tab\" part=\"base\" role=\"tab\" tabindex=\"-1\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </six-tab>\n    `);\n  });\n});\n"]}

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

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { getOffset } from '../../utils/offset';
-import { scrollIntoView } from '../../utils/scroll';
-import { focusVisible } from '../../utils/focus-visible';
+import { h } from "@stencil/core";
+import { getOffset } from "../../utils/offset";
+import { scrollIntoView } from "../../utils/scroll";
+import { focusVisible } from "../../utils/focus-visible";
 /**
  * @since 1.0
  * @status stable
@@ -323,7 +323,8 @@ export class SixTabGroup {
           "references": {
             "SixTabShowPayload": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-tab-group/six-tab-group.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-tab-group/six-tab-group.tsx",
+              "id": "src/components/six-tab-group/six-tab-group.tsx::SixTabShowPayload"
             }
           }
         }
@@ -343,7 +344,8 @@ export class SixTabGroup {
           "references": {
             "SixTabHidePayload": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-tab-group/six-tab-group.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-tab-group/six-tab-group.tsx",
+              "id": "src/components/six-tab-group/six-tab-group.tsx::SixTabHidePayload"
             }
           }
         }
@@ -360,7 +362,8 @@ export class SixTabGroup {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"