@dnncommunity/dnn-elements 0.14.1 → 0.15.0-beta.3

package/dist/collection/components/dnn-button/dnn-button.stories.js

@@ -0,0 +1,72 @@
+import { html } from "lit-html";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import readme from './readme.md';
+export default {
+  title: 'Elements/Button',
+  component: 'dnn-button',
+  parameters: {
+    actions: {
+      handles: ['confirmed', 'canceled'],
+    },
+    notes: readme,
+  },
+  argTypes: {
+    'type': {
+      options: ['primary', 'secondary', 'tertiary'],
+      control: {
+        type: 'select',
+      },
+    },
+    'reversed': {
+      control: 'boolean',
+    },
+    'size': {
+      options: ['small', 'normal', 'large'],
+      control: {
+        type: 'select',
+      },
+    },
+    'confirm': {
+      control: 'boolean',
+    },
+    'confirm-yes-text': {
+      control: 'text',
+    },
+    'confirm-no-text': {
+      control: 'text',
+    },
+    'confirm-message': {
+      control: 'text',
+    },
+    'disabled': {
+      control: 'boolean',
+    },
+  },
+};
+const Template = (args) => html `
+        <dnn-button
+            type=${ifDefined(args.type)}
+            ?reversed=${ifDefined(args.reversed)}
+            size=${ifDefined(args.size)}
+            ?confirm=${ifDefined(args.confirm)}
+            confirm-yes-text=${ifDefined(args.confirmYesText)}
+            confirm-no-text=${ifDefined(args.confirmNoText)}
+            confirm-message=${ifDefined(args.confirmMessage)}
+            ?disabled=${ifDefined(args.disabled)}>
+            ${unsafeHTML(args.slot)}
+        </dnn-button>
+    `;
+export const Button = Template.bind({});
+Button.args = {
+  type: 'primary',
+  reversed: false,
+  size: 'medium',
+  confirm: true,
+  confirmYesText: 'Yes',
+  confirmNoText: 'No',
+  confirmMessage: 'Are you sure?',
+  disabled: false,
+  slot: 'Click me!'
+};
+//# sourceMappingURL=dnn-button.stories.js.map

package/dist/collection/components/dnn-button/dnn-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-button.stories.js","sourceRoot":"","sources":["../../../../src/components/dnn-button/dnn-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAEhE,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACX,KAAK,EAAE,iBAAiB;EACxB,SAAS,EAAE,YAAY;EACvB,UAAU,EAAE;IACR,OAAO,EAAE;MACL,OAAO,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC;KACrC;IACD,KAAK,EAAG,MAAM;GACjB;EACD,QAAQ,EAAE;IACN,MAAM,EAAE;MACN,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;MAC7C,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;KACF;IACD,UAAU,EAAE;MACV,OAAO,EAAE,SAAS;KACnB;IACD,MAAM,EAAE;MACJ,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;MACrC,OAAO,EAAE;QACL,IAAI,EAAE,QAAQ;OACjB;KACJ;IACD,SAAS,EAAE;MACP,OAAO,EAAE,SAAS;KACrB;IACD,kBAAkB,EAAE;MAChB,OAAO,EAAE,MAAM;KAClB;IACD,iBAAiB,EAAE;MACf,OAAO,EAAE,MAAM;KAClB;IACD,iBAAiB,EAAE;MACf,OAAO,EAAE,MAAM;KAClB;IACD,UAAU,EAAE;MACV,OAAO,EAAE,SAAS;KACnB;GACF;CACE,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CACtB,IAAI,CAAA;;mBAEW,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;wBACf,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;mBAC7B,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;uBAChB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;+BACf,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC;8BAC/B,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;8BAC7B,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC;wBACpC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;cAClC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;KAE9B,CAAC;AAEN,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACV,IAAI,EAAE,SAAS;EACf,QAAQ,EAAE,KAAK;EACf,IAAI,EAAE,QAAQ;EACd,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,KAAK;EACrB,aAAa,EAAE,IAAI;EACnB,cAAc,EAAE,eAAe;EAC/B,QAAQ,EAAE,KAAK;EACf,IAAI,EAAE,WAAW;CACpB,CAAC","sourcesContent":["import { html } from \"lit-html\";\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { Meta } from \"@storybook/web-components\";\nimport readme from './readme.md';\n\nexport default {\n    title: 'Elements/Button',\n    component: 'dnn-button',\n    parameters: {\n        actions: {\n            handles: ['confirmed', 'canceled'],\n        },\n        notes:  readme,\n    },\n    argTypes: {\n        'type': {\n          options: ['primary', 'secondary', 'tertiary'],\n          control: {\n            type: 'select',\n          },\n        },\n        'reversed': {\n          control: 'boolean',\n        },\n        'size': {\n            options: ['small', 'normal', 'large'],\n            control: {\n                type: 'select',\n            },\n        },\n        'confirm': {\n            control: 'boolean',\n        },\n        'confirm-yes-text': {\n            control: 'text',\n        },\n        'confirm-no-text': {\n            control: 'text',\n        },\n        'confirm-message': {\n            control: 'text',\n        },\n        'disabled': {\n          control: 'boolean',\n        },\n      },\n} as Meta;\n\nconst Template = (args) =>\n    html`\n        <dnn-button\n            type=${ifDefined(args.type)}\n            ?reversed=${ifDefined(args.reversed)}\n            size=${ifDefined(args.size)}\n            ?confirm=${ifDefined(args.confirm)}\n            confirm-yes-text=${ifDefined(args.confirmYesText)}\n            confirm-no-text=${ifDefined(args.confirmNoText)}\n            confirm-message=${ifDefined(args.confirmMessage)}\n            ?disabled=${ifDefined(args.disabled)}>\n            ${unsafeHTML(args.slot)}\n        </dnn-button>\n    `;\n\nexport const Button = Template.bind({});\nButton.args = {\n    type: 'primary',\n    reversed: false,\n    size: 'medium',\n    confirm: true,\n    confirmYesText: 'Yes',\n    confirmNoText: 'No',\n    confirmMessage: 'Are you sure?',\n    disabled: false,\n    slot: 'Click me!'\n};\n"]}

package/dist/collection/components/dnn-checkbox/dnn-checkbox.css

@@ -19,6 +19,12 @@ button {
   justify-content: center;
   align-items: center;
 }
+button .unchecked, button .checked, button .intermediate {
+  display: none;
+}
+button.checked .checked, button.unchecked .unchecked, button.intermediate .intermediate {
+  display: block;
+}
 button svg.undefined {
   opacity: 0.45;
 }

package/dist/collection/components/dnn-checkbox/dnn-checkbox.js

@@ -1,140 +1,152 @@
-import { Component, Element, Host, h, Prop, Event } from '@stencil/core';
-export class DnnCheckbox {
-  constructor() {
-    /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */
-    this.checked = false;
-    /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */
-    this.useIntermediate = false;
-  }
-  changeState() {
-    if (!this.useIntermediate) {
-      this.checked = !this.checked;
-      this.emitEvents();
-      return;
-    }
-    if (this.checked === true) {
-      this.checked = false;
-      this.button.classList.remove("undefined");
-      this.emitEvents();
-      return;
-    }
-    if (this.checked === undefined) {
-      this.checked = true;
-      this.button.classList.remove("undefined");
-      this.emitEvents();
-      return;
-    }
-    if (this.checked === false) {
-      this.checked = undefined;
-      this.button.classList.add("undefined");
-      this.emitEvents();
-      return;
-    }
-  }
-  emitEvents() {
-    this.checkedchange.emit(this.checked);
-  }
-  render() {
-    return (h(Host, null,
-      h("button", { class: "icon", onClick: () => this.changeState(), ref: el => this.button = el },
-        this.checked === false &&
-          h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
-            h("path", { d: "M0 0h24v24H0z", fill: "none" }),
-            h("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })),
-        this.checked === true &&
-          h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
-            h("path", { d: "M0 0h24v24H0z", fill: "none" }),
-            h("path", { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })),
-        this.checked === undefined &&
-          h("svg", { class: "undefined", xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
-            h("g", null,
-              h("rect", { fill: "none", height: "24", width: "24" })),
-            h("g", null,
-              h("g", null,
-                h("g", null,
-                  h("path", { d: "M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z" })))))),
-      h("label", { htmlFor: this.el.id, onClick: () => this.changeState() },
-        h("slot", null))));
-  }
-  static get is() { return "dnn-checkbox"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dnn-checkbox.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dnn-checkbox.css"]
-  }; }
-  static get properties() { return {
-    "checked": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean | undefined",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined)"
-      },
-      "attribute": "checked",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "useIntermediate": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state)"
-      },
-      "attribute": "use-intermediate",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value for this checkbox (not to be confused with its checked state)."
-      },
-      "attribute": "value",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "checkedchange",
-      "name": "checkedchange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires up when the checkbox checked property changes."
-      },
-      "complexType": {
-        "original": "boolean | undefined",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-}
+import { Component, Element, Host, h, Prop, Event } from '@stencil/core';
+/**
+ * @slot - The label for the checkbox.
+ * @slot checkedicon - Allows overriding the default checked icon.
+ * @slot uncheckedicon - Allows overriding the unchecked icon.
+ * @slot intermediateicon - If intermadiate state is used, allows overriding its icon.
+ */
+export class DnnCheckbox {
+  constructor() {
+    /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */
+    this.checked = "unchecked";
+    /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */
+    this.useIntermediate = false;
+  }
+  changeState() {
+    if (!this.useIntermediate) {
+      switch (this.checked) {
+        case "checked":
+          this.checked = "unchecked";
+          break;
+        case "unchecked":
+        case "intermediate":
+          this.checked = "checked";
+          break;
+        default:
+          break;
+      }
+      this.checkedchange.emit(this.checked);
+      return;
+    }
+    switch (this.checked) {
+      case "checked":
+        this.checked = "intermediate";
+        break;
+      case "intermediate":
+        this.checked = "unchecked";
+        break;
+      case "unchecked":
+        this.checked = "checked";
+        break;
+      default:
+        break;
+    }
+    this.checkedchange.emit(this.checked);
+  }
+  render() {
+    return (h(Host, null,
+      h("button", { class: `icon ${this.checked}`, onClick: () => this.changeState() },
+        h("div", { class: "unchecked" },
+          h("slot", { name: "uncheckedicon" },
+            h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+              h("path", { d: "M0 0h24v24H0z", fill: "none" }),
+              h("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })))),
+        h("div", { class: "checked" },
+          h("slot", { name: "checkedicon" },
+            h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+              h("path", { d: "M0 0h24v24H0z", fill: "none" }),
+              h("path", { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })))),
+        h("div", { class: "intermediate" },
+          h("slot", { name: "intermediateicon" },
+            h("svg", { class: "undefined", xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+              h("g", null,
+                h("rect", { fill: "none", height: "24", width: "24" })),
+              h("g", null,
+                h("g", null,
+                  h("g", null,
+                    h("path", { d: "M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z" })))))))),
+      h("label", { htmlFor: this.el.id, onClick: () => this.changeState() },
+        h("slot", null))));
+  }
+  static get is() { return "dnn-checkbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-checkbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-checkbox.css"]
+  }; }
+  static get properties() { return {
+    "checked": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "\"checked\" | \"unchecked\" | \"intermediate\"",
+        "resolved": "\"checked\" | \"intermediate\" | \"unchecked\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined)"
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "\"unchecked\""
+    },
+    "useIntermediate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state)"
+      },
+      "attribute": "use-intermediate",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The value for this checkbox (not to be confused with its checked state)."
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "checkedchange",
+      "name": "checkedchange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires up when the checkbox checked property changes."
+      },
+      "complexType": {
+        "original": "\"checked\" | \"unchecked\" | \"intermediate\"",
+        "resolved": "\"checked\" | \"intermediate\" | \"unchecked\"",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}
 //# sourceMappingURL=dnn-checkbox.js.map

package/dist/collection/components/dnn-checkbox/dnn-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"dnn-checkbox.js","sourceRoot":"","sources":["../../../src/components/dnn-checkbox/dnn-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-checkbox',\r\n  styleUrl: 'dnn-checkbox.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnCheckbox {\r\n  @Element() el: HTMLDnnCheckboxElement;\r\n\r\n  /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */\r\n  @Prop({mutable: true}) checked: boolean | undefined = false;\r\n\r\n  /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */\r\n  @Prop() useIntermediate: boolean = false;\r\n\r\n  /** The value for this checkbox (not to be confused with its checked state). */\r\n  @Prop() value: string;\r\n\r\n  /** Fires up when the checkbox checked property changes. */\r\n  @Event() checkedchange: EventEmitter<boolean | undefined>;\r\n  \r\n  private button: HTMLButtonElement;\r\n\r\n  private changeState(): void {\r\n    if (!this.useIntermediate){\r\n      this.checked = !this.checked;\r\n      this.emitEvents();\r\n      return;\r\n    }\r\n    if (this.checked === true){\r\n      this.checked = false;\r\n      this.button.classList.remove(\"undefined\");\r\n      this.emitEvents();\r\n      return;\r\n    }\r\n    if (this.checked === undefined){\r\n      this.checked = true;\r\n      this.button.classList.remove(\"undefined\");\r\n      this.emitEvents();\r\n      return;\r\n    }\r\n    if (this.checked === false){\r\n      this.checked = undefined;\r\n      this.button.classList.add(\"undefined\");\r\n      this.emitEvents();\r\n      return;\r\n    }\r\n  }\r\n\r\n  private emitEvents() {\r\n    this.checkedchange.emit(this.checked);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class=\"icon\" onClick={() => this.changeState()} ref={el => this.button = el}>\r\n          {this.checked === false &&\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>\r\n          }\r\n          {this.checked === true &&\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\r\n          }\r\n          {this.checked === undefined &&\r\n            <svg class=\"undefined\" xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><g><g><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z\"/></g></g></g></svg>\r\n          }\r\n        </button>\r\n        <label htmlFor={this.el.id} onClick={() => this.changeState()}><slot></slot></label>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dnn-checkbox.js","sourceRoot":"","sources":["../../../../src/components/dnn-checkbox/dnn-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot - The label for the checkbox.\n * @slot checkedicon - Allows overriding the default checked icon.\n * @slot uncheckedicon - Allows overriding the unchecked icon.\n * @slot intermediateicon - If intermadiate state is used, allows overriding its icon.\n */\n@Component({\n  tag: 'dnn-checkbox',\n  styleUrl: 'dnn-checkbox.scss',\n  shadow: true,\n})\nexport class DnnCheckbox {\n  @Element() el: HTMLDnnCheckboxElement;\n\n  /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */\n  @Prop({mutable: true}) checked: \"checked\" | \"unchecked\" | \"intermediate\" = \"unchecked\";\n\n  /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */\n  @Prop() useIntermediate: boolean = false;\n\n  /** The value for this checkbox (not to be confused with its checked state). */\n  @Prop() value: string;\n\n  /** Fires up when the checkbox checked property changes. */\n  @Event() checkedchange: EventEmitter<\"checked\" | \"unchecked\" | \"intermediate\">;\n\n  private changeState(): void {\n    if (!this.useIntermediate){\n      switch (this.checked) {\n        case \"checked\":\n          this.checked = \"unchecked\";\n          break;\n        case \"unchecked\":\n        case \"intermediate\":\n          this.checked = \"checked\";\n          break;\n        default:\n          break;\n      }\n      this.checkedchange.emit(this.checked);\n      return;\n    }\n    switch (this.checked) {\n      case \"checked\":\n        this.checked = \"intermediate\";\n        break;\n      case \"intermediate\":\n        this.checked = \"unchecked\";\n        break;\n      case \"unchecked\":\n        this.checked = \"checked\";\n        break;\n      default:\n        break;\n    }\n    this.checkedchange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={`icon ${this.checked}`}\n          onClick={() => this.changeState()}\n        >\n          <div class=\"unchecked\">\n            <slot name=\"uncheckedicon\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>\n            </slot>\n          </div>\n          <div class=\"checked\">\n            <slot name=\"checkedicon\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n            </slot>\n          </div>\n          <div class=\"intermediate\">\n            <slot name=\"intermediateicon\">\n              <svg class=\"undefined\" xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><g><g><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z\"/></g></g></g></svg>\n            </slot>\n          </div>\n        </button>\n        <label htmlFor={this.el.id} onClick={() => this.changeState()}><slot></slot></label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dnn-checkbox/dnn-checkbox.stories.js

@@ -0,0 +1,39 @@
+import { html } from "lit-html";
+import readme from './readme.md';
+import { ifDefined } from "lit-html/directives/if-defined";
+export default {
+  title: 'Elements/Checkbox',
+  component: 'dnn-checkbox',
+  parameters: {
+    actions: {
+      handles: ['checkedchange'],
+    },
+    notes: readme,
+  },
+  argTypes: {
+    'checked': {
+      options: ['checked', 'unchecked', 'intermediate'],
+      control: 'radio',
+    },
+    'use-intermediate': {
+      control: 'boolean',
+    },
+    'value': {
+      control: 'text',
+    },
+  },
+};
+const Template = (args) => html `
+        <dnn-checkbox
+            checked=${args.checked}
+            ?use-intermediate=${ifDefined(args.useIntermediate)}
+            value=${args.value}>
+        </dnn-checkbox>
+    `;
+export const Checkbox = Template.bind({});
+Checkbox.args = {
+  checked: 'unchecked',
+  useIntermediate: false,
+  value: '1',
+};
+//# sourceMappingURL=dnn-checkbox.stories.js.map

package/dist/collection/components/dnn-checkbox/dnn-checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/dnn-checkbox/dnn-checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,eAAe;EACX,KAAK,EAAE,mBAAmB;EAC1B,SAAS,EAAE,cAAc;EACzB,UAAU,EAAE;IACR,OAAO,EAAE;MACL,OAAO,EAAE,CAAC,eAAe,CAAC;KAC7B;IACD,KAAK,EAAG,MAAM;GACjB;EACD,QAAQ,EAAE;IACN,SAAS,EAAE;MACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,cAAc,CAAC;MACjD,OAAO,EAAE,OAAO;KACnB;IACD,kBAAkB,EAAE;MAChB,OAAO,EAAE,SAAS;KACrB;IACD,OAAO,EAAE;MACL,OAAO,EAAE,MAAM;KAClB;GACF;CACE,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CACtB,IAAI,CAAA;;sBAEc,IAAI,CAAC,OAAO;gCACF,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;oBAC3C,IAAI,CAAC,KAAK;;KAEzB,CAAC;AAEN,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;EACZ,OAAO,EAAE,WAAW;EACpB,eAAe,EAAE,KAAK;EACtB,KAAK,EAAE,GAAG;CACb,CAAC","sourcesContent":["import { html } from \"lit-html\";\nimport { Meta } from \"@storybook/web-components\";\nimport readme from './readme.md';\nimport { ifDefined } from \"lit-html/directives/if-defined\";\n\nexport default {\n    title: 'Elements/Checkbox',\n    component: 'dnn-checkbox',\n    parameters: {\n        actions: {\n            handles: ['checkedchange'],\n        },\n        notes:  readme,\n    },\n    argTypes: {\n        'checked': {\n            options: ['checked', 'unchecked', 'intermediate'],\n            control: 'radio',\n        },\n        'use-intermediate': {\n            control: 'boolean',\n        },\n        'value': {\n            control: 'text',\n        },\n      },\n} as Meta;\n\nconst Template = (args) =>\n    html`\n        <dnn-checkbox\n            checked=${args.checked}\n            ?use-intermediate=${ifDefined(args.useIntermediate)}\n            value=${args.value}>\n        </dnn-checkbox>\n    `;\n\nexport const Checkbox = Template.bind({});\nCheckbox.args = {\n    checked: 'unchecked',\n    useIntermediate: false,\n    value: '1',\n};\n"]}