@scania/tegel 1.3.3-event-types.0 → 1.4.0

package/dist/collection/components/toggle/toggle.js

@@ -4,211 +4,211 @@ import generateUniqueId from "../../utils/generateUniqueId";
  * @slot label - Slot for the label text.
  */
 export class TdsToggle {
-  constructor() {
-    this.handleToggle = () => {
-      this.checked = !this.checked;
-      this.tdsToggle.emit({
-        toggleId: this.toggleId,
-        checked: this.checked,
-      });
-    };
-    this.checked = false;
-    this.required = false;
-    this.size = 'lg';
-    this.name = undefined;
-    this.headline = undefined;
-    this.disabled = false;
-    this.toggleId = generateUniqueId();
-  }
-  /** Toggles the Toggle. */
-  async toggle() {
-    this.checked = !this.checked;
-    return {
-      toggleId: this.toggleId,
-      checked: this.checked,
-    };
-  }
-  render() {
-    return (h("div", { class: "tds-toggle" }, this.headline && (h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { name: "label" }))));
-  }
-  static get is() { return "tds-toggle"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["toggle.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["toggle.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "checked": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the Toggle as checked"
-        },
-        "attribute": "checked",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Make the Toggle required"
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'sm' | 'lg'",
-          "resolved": "\"lg\" | \"sm\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of the Toggle"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name of the toggle's input element"
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "headline": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Headline for the Toggle"
-        },
-        "attribute": "headline",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the Toggle in a disabled state"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "toggleId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "ID of the Toggle's input element, if not specified, it's randomly generated"
-        },
-        "attribute": "toggle-id",
-        "reflect": false,
-        "defaultValue": "generateUniqueId()"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tdsToggle",
-        "name": "tdsToggle",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Sends unique Toggle identifier and status when it is toggled."
-        },
-        "complexType": {
-          "original": "{\n    toggleId: string;\n    checked: boolean;\n  }",
-          "resolved": "{ toggleId: string; checked: boolean; }",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "toggle": {
-        "complexType": {
-          "signature": "() => Promise<{ toggleId: string; checked: boolean; }>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    constructor() {
+        this.handleToggle = () => {
+            this.checked = !this.checked;
+            this.tdsToggle.emit({
+                toggleId: this.toggleId,
+                checked: this.checked,
+            });
+        };
+        this.checked = false;
+        this.required = false;
+        this.size = 'lg';
+        this.name = undefined;
+        this.headline = undefined;
+        this.disabled = false;
+        this.toggleId = generateUniqueId();
+    }
+    /** Toggles the Toggle. */
+    async toggle() {
+        this.checked = !this.checked;
+        return {
+            toggleId: this.toggleId,
+            checked: this.checked,
+        };
+    }
+    render() {
+        return (h("div", { class: "tds-toggle" }, this.headline && (h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { name: "label" }))));
+    }
+    static get is() { return "tds-toggle"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["toggle.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the Toggle as checked"
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the Toggle required"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'lg'",
+                    "resolved": "\"lg\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the Toggle"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'lg'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the toggle's input element"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "headline": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Headline for the Toggle"
+                },
+                "attribute": "headline",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the Toggle in a disabled state"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "toggleId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the Toggle's input element, if not specified, it's randomly generated"
+                },
+                "attribute": "toggle-id",
+                "reflect": false,
+                "defaultValue": "generateUniqueId()"
             }
-          },
-          "return": "Promise<{ toggleId: string; checked: boolean; }>"
-        },
-        "docs": {
-          "text": "Toggles the Toggle.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tdsToggle",
+                "name": "tdsToggle",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sends unique Toggle identifier and status when it is toggled."
+                },
+                "complexType": {
+                    "original": "{\n    toggleId: string;\n    checked: boolean;\n  }",
+                    "resolved": "{ toggleId: string; checked: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<{ toggleId: string; checked: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ toggleId: string; checked: boolean; }>"
+                },
+                "docs": {
+                    "text": "Toggles the Toggle.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/components/toggle/toggle.stories.js

@@ -2,77 +2,77 @@ import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
-  title: `${ComponentsFolder}/Toggle`,
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the Toggle.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
+    title: `${ComponentsFolder}/Toggle`,
+    parameters: {
+        notes: readme,
+        layout: 'centered',
+        design: [
+            {
+                name: 'Figma',
+                type: 'figma',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
+            },
+            {
+                name: 'Link',
+                type: 'link',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
+            },
+        ],
     },
-    headline: {
-      name: 'Headline',
-      description: 'Sets the headline, displayed above the Toggle.',
-      control: {
-        type: 'text',
-      },
+    argTypes: {
+        size: {
+            name: 'Size',
+            description: 'Sets the size of the Toggle.',
+            control: {
+                type: 'radio',
+            },
+            options: ['Large', 'Small'],
+            table: {
+                defaultValue: { summary: 'lg' },
+            },
+        },
+        headline: {
+            name: 'Headline',
+            description: 'Sets the headline, displayed above the Toggle.',
+            control: {
+                type: 'text',
+            },
+        },
+        label: {
+            name: 'Label text',
+            description: "Sets the label for the toggle's input element.",
+            control: {
+                type: 'text',
+            },
+        },
+        checked: {
+            name: 'Checked',
+            description: 'Sets the Toggle as checked.',
+            control: {
+                type: 'boolean',
+            },
+            table: {
+                defaultValue: { summary: false },
+            },
+        },
+        disabled: {
+            name: 'Disabled',
+            description: 'Disables the Toggle.',
+            control: {
+                type: 'boolean',
+            },
+            table: {
+                defaultValue: { summary: false },
+            },
+        },
     },
-    label: {
-      name: 'Label text',
-      description: "Sets the label for the toggle's input element.",
-      control: {
-        type: 'text',
-      },
+    args: {
+        size: 'Large',
+        headline: 'Headline',
+        label: 'Label',
+        checked: false,
+        disabled: false,
     },
-    checked: {
-      name: 'Checked',
-      description: 'Sets the Toggle as checked.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the Toggle.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    size: 'Large',
-    headline: 'Headline',
-    label: 'Label',
-    checked: false,
-    disabled: false,
-  },
 };
 const Template = ({ size, headline, label, checked, disabled }) => formatHtmlPreview(`
       <tds-toggle