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

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

@@ -1,107 +1,107 @@
-import { Component, Host, h, Prop, Event } from '@stencil/core';
-import { Watch } from '@stencil/core';
-export class DnnChevron {
-  constructor() {
-    /** Expand text for screen readers */
-    this.expandText = "expand";
-    /** Collapse text for screen readers */
-    this.collapseText = "collapse";
-    /** Is the chevron expanded */
-    this.expanded = false;
-  }
-  handleExpandedChanged(newValue) {
-    this.changed.emit(newValue);
-  }
-  render() {
-    return (h(Host, null,
-      h("button", { "aria-label": this.expanded ? this.collapseText : this.expandText, onClick: () => this.expanded = !this.expanded },
-        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: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })))));
-  }
-  static get is() { return "dnn-chevron"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dnn-chevron.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dnn-chevron.css"]
-  }; }
-  static get properties() { return {
-    "expandText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Expand text for screen readers"
-      },
-      "attribute": "expand-text",
-      "reflect": false,
-      "defaultValue": "\"expand\""
-    },
-    "collapseText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Collapse text for screen readers"
-      },
-      "attribute": "collapse-text",
-      "reflect": false,
-      "defaultValue": "\"collapse\""
-    },
-    "expanded": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Is the chevron expanded"
-      },
-      "attribute": "expanded",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "changed",
-      "name": "changed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires up when the expanded status changes"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get watchers() { return [{
-      "propName": "expanded",
-      "methodName": "handleExpandedChanged"
-    }]; }
-}
+import { Component, Host, h, Prop, Event } from '@stencil/core';
+import { Watch } from '@stencil/core';
+export class DnnChevron {
+  constructor() {
+    /** Expand text for screen readers */
+    this.expandText = "expand";
+    /** Collapse text for screen readers */
+    this.collapseText = "collapse";
+    /** Is the chevron expanded */
+    this.expanded = false;
+  }
+  handleExpandedChanged(newValue) {
+    this.changed.emit(newValue);
+  }
+  render() {
+    return (h(Host, null,
+      h("button", { "aria-label": this.expanded ? this.collapseText : this.expandText, onClick: () => this.expanded = !this.expanded },
+        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: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })))));
+  }
+  static get is() { return "dnn-chevron"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-chevron.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-chevron.css"]
+  }; }
+  static get properties() { return {
+    "expandText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Expand text for screen readers"
+      },
+      "attribute": "expand-text",
+      "reflect": false,
+      "defaultValue": "\"expand\""
+    },
+    "collapseText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Collapse text for screen readers"
+      },
+      "attribute": "collapse-text",
+      "reflect": false,
+      "defaultValue": "\"collapse\""
+    },
+    "expanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Is the chevron expanded"
+      },
+      "attribute": "expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "changed",
+      "name": "changed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires up when the expanded status changes"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "expanded",
+      "methodName": "handleExpandedChanged"
+    }]; }
+}
 //# sourceMappingURL=dnn-chevron.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dnn-chevron.js","sourceRoot":"","sources":["../../../src/components/dnn-chevron/dnn-chevron.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOtC,MAAM,OAAO,UAAU;EALvB;IAOE,qCAAqC;IAC7B,eAAU,GAAY,QAAQ,CAAC;IAEvC,uCAAuC;IAC/B,iBAAY,GAAY,UAAU,CAAC;IAE3C,8BAA8B;IACQ,aAAQ,GAAa,KAAK,CAAC;GAsBlE;EAhBC,qBAAqB,CAAC,QAAiB;IACrC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EAC9B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,4BAAoB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EACrE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;QAE7C,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;UAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE;UAAA,YAAM,CAAC,EAAC,gDAAgD,GAAE,CAAM,CACpM,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Event } from '@stencil/core';\r\nimport { EventEmitter } from '@stencil/core';\r\nimport { Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-chevron',\r\n  styleUrl: 'dnn-chevron.scss',\r\n  shadow: true\r\n})\r\nexport class DnnChevron {\r\n\r\n  /** Expand text for screen readers */\r\n  @Prop() expandText?: string = \"expand\";\r\n\r\n  /** Collapse text for screen readers */\r\n  @Prop() collapseText?: string = \"collapse\";\r\n\r\n  /** Is the chevron expanded */\r\n  @Prop({mutable: true, reflect: true}) expanded?: boolean = false;\r\n\r\n  /** Fires up when the expanded status changes */\r\n  @Event() changed: EventEmitter;\r\n\r\n  @Watch('expanded')\r\n  handleExpandedChanged(newValue: boolean) {\r\n    this.changed.emit(newValue);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button aria-label={this.expanded ? this.collapseText : this.expandText}\r\n          onClick={() => this.expanded = !this.expanded}\r\n        >\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=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/></svg>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"]}
+{"version":3,"file":"dnn-chevron.js","sourceRoot":"","sources":["../../../../src/components/dnn-chevron/dnn-chevron.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOtC,MAAM,OAAO,UAAU;EALvB;IAOE,qCAAqC;IAC7B,eAAU,GAAY,QAAQ,CAAC;IAEvC,uCAAuC;IAC/B,iBAAY,GAAY,UAAU,CAAC;IAE3C,8BAA8B;IACQ,aAAQ,GAAa,KAAK,CAAC;GAsBlE;EAhBC,qBAAqB,CAAC,QAAiB;IACrC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EAC9B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,4BAAoB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EACrE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;QAE7C,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;UAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE;UAAA,YAAM,CAAC,EAAC,gDAAgD,GAAE,CAAM,CACpM,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Event } from '@stencil/core';\nimport { EventEmitter } from '@stencil/core';\nimport { Watch } from '@stencil/core';\n\n@Component({\n  tag: 'dnn-chevron',\n  styleUrl: 'dnn-chevron.scss',\n  shadow: true\n})\nexport class DnnChevron {\n\n  /** Expand text for screen readers */\n  @Prop() expandText?: string = \"expand\";\n\n  /** Collapse text for screen readers */\n  @Prop() collapseText?: string = \"collapse\";\n\n  /** Is the chevron expanded */\n  @Prop({mutable: true, reflect: true}) expanded?: boolean = false;\n\n  /** Fires up when the expanded status changes */\n  @Event() changed: EventEmitter;\n\n  @Watch('expanded')\n  handleExpandedChanged(newValue: boolean) {\n    this.changed.emit(newValue);\n  }\n\n  render() {\n    return (\n      <Host>\n        <button aria-label={this.expanded ? this.collapseText : this.expandText}\n          onClick={() => this.expanded = !this.expanded}\n        >\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=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/></svg>\n        </button>\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -0,0 +1,38 @@
+import { html } from "lit-html";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import readme from './readme.md';
+export default {
+  title: 'Elements/Chevron',
+  component: 'dnn-chevron',
+  parameters: {
+    actions: {
+      handles: ['changed'],
+    },
+    notes: readme,
+  },
+  argTypes: {
+    'expand-text': {
+      control: 'text',
+    },
+    'collapse-text': {
+      control: 'text',
+    },
+    'expanded': {
+      control: 'boolean',
+    },
+  },
+};
+const Template = (args) => html `
+        <dnn-chevron
+            expand-text=${ifDefined(args.expandText)}
+            collapse-text=${ifDefined(args.collapseText)}
+            ?expanded=${ifDefined(args.expanded)}>
+        </dnn-chevron>
+    `;
+export const Chevron = Template.bind({});
+Chevron.args = {
+  expandText: 'expand',
+  collapseText: 'collapse',
+  expanded: false,
+};
+//# sourceMappingURL=dnn-chevron.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-chevron.stories.js","sourceRoot":"","sources":["../../../../src/components/dnn-chevron/dnn-chevron.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACX,KAAK,EAAE,kBAAkB;EACzB,SAAS,EAAE,aAAa;EACxB,UAAU,EAAE;IACR,OAAO,EAAE;MACL,OAAO,EAAE,CAAC,SAAS,CAAC;KACvB;IACD,KAAK,EAAG,MAAM;GACjB;EACD,QAAQ,EAAE;IACN,aAAa,EAAE;MACX,OAAO,EAAE,MAAM;KAClB;IACD,eAAe,EAAE;MACb,OAAO,EAAE,MAAM;KAClB;IACD,UAAU,EAAE;MACR,OAAO,EAAE,SAAS;KACnB;GACF;CACA,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CACtB,IAAI,CAAA;;0BAEkB,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;4BACxB,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC;wBAChC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;;KAE3C,CAAC;AAEN,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;EACX,UAAU,EAAE,QAAQ;EACpB,YAAY,EAAE,UAAU;EACxB,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { html } from \"lit-html\";\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { Meta } from \"@storybook/web-components\";\nimport readme from './readme.md';\n\nexport default {\n    title: 'Elements/Chevron',\n    component: 'dnn-chevron',\n    parameters: {\n        actions: {\n            handles: ['changed'],\n        },\n        notes:  readme,\n    },\n    argTypes: {\n        'expand-text': {\n            control: 'text',\n        },\n        'collapse-text': {\n            control: 'text',\n        },\n        'expanded': {\n            control: 'boolean',\n          },\n        },\n} as Meta;\n\nconst Template = (args) =>\n    html`\n        <dnn-chevron\n            expand-text=${ifDefined(args.expandText)}\n            collapse-text=${ifDefined(args.collapseText)}\n            ?expanded=${ifDefined(args.expanded)}>\n        </dnn-chevron>\n    `;\n\nexport const Chevron = Template.bind({});\nChevron.args = {\n    expandText: 'expand',\n    collapseText: 'collapse',\n    expanded: false,\n};\n"]}

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

@@ -1,143 +1,146 @@
-import { Component, Host, h, Prop, Element, Event, Watch, Listen, Method } from '@stencil/core';
-export class DnnCollapsible {
-  constructor() {
-    /** Defines if the panel is expanded or not. */
-    this.expanded = false;
-    /** Defines the transition time in ms, defaults to 100ms */
-    this.transitionDuration = 150;
-  }
-  handleHeightChanged() {
-    requestAnimationFrame(() => {
-      this.updateSize();
-    });
-  }
-  /**
-   * Updates the component height, use to update after a slot content changes.
-   */
-  async updateSize() {
-    if (this.expanded) {
-      requestAnimationFrame(() => {
-        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
-      });
-      setTimeout(() => {
-        this.container.style.maxHeight = "none";
-      }, this.transitionDuration);
-    }
-  }
-  handledExpandedChanged(expanded) {
-    if (expanded) {
-      this.updateSize();
-    }
-    else {
-      requestAnimationFrame(() => {
-        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
-        requestAnimationFrame(() => {
-          this.container.style.maxHeight = "0px";
-        });
-      });
-    }
-    setTimeout(() => {
-      requestAnimationFrame(() => {
-        this.dnnCollapsibleHeightChanged.emit();
-      });
-    }, this.transitionDuration);
-  }
-  render() {
-    return (h(Host, null,
-      h("div", { id: "container", class: this.expanded && "expanded", ref: el => this.container = el },
-        h("slot", null))));
-  }
-  static get is() { return "dnn-collapsible"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dnn-collapsible.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dnn-collapsible.css"]
-  }; }
-  static get properties() { return {
-    "expanded": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines if the panel is expanded or not."
-      },
-      "attribute": "expanded",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "transitionDuration": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Defines the transition time in ms, defaults to 100ms"
-      },
-      "attribute": "transition-duration",
-      "reflect": false,
-      "defaultValue": "150"
-    }
-  }; }
-  static get events() { return [{
-      "method": "dnnCollapsibleHeightChanged",
-      "name": "dnnCollapsibleHeightChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires whenever the collapsible height has changed"
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "updateSize": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Updates the component height, use to update after a slot content changes.",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "expanded",
-      "methodName": "handledExpandedChanged"
-    }]; }
-  static get listeners() { return [{
-      "name": "dnnCollapsibleHeightChanged",
-      "method": "handleHeightChanged",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}
+import { Component, Host, h, Prop, Element, Event, Watch, Listen, Method } from '@stencil/core';
+export class DnnCollapsible {
+  constructor() {
+    /** Defines if the panel is expanded or not. */
+    this.expanded = false;
+    /** Defines the transition time in ms, defaults to 150ms */
+    this.transitionDuration = 150;
+  }
+  handleHeightChanged() {
+    requestAnimationFrame(() => {
+      this.updateSize();
+    });
+  }
+  /**
+   * Updates the component height, use to update after a slot content changes.
+   */
+  async updateSize() {
+    if (this.expanded) {
+      requestAnimationFrame(() => {
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
+      });
+      setTimeout(() => {
+        this.container.style.maxHeight = "none";
+      }, this.transitionDuration);
+    }
+  }
+  handledExpandedChanged(expanded) {
+    if (expanded) {
+      this.updateSize();
+    }
+    else {
+      requestAnimationFrame(() => {
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
+        requestAnimationFrame(() => {
+          this.container.style.maxHeight = "0px";
+        });
+      });
+    }
+    setTimeout(() => {
+      requestAnimationFrame(() => {
+        this.dnnCollapsibleHeightChanged.emit();
+      });
+    }, this.transitionDuration);
+  }
+  componentDidLoad() {
+    this.container.style.transition = `max-height ${this.transitionDuration}ms ease-in-out`;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { id: "container", class: this.expanded && "expanded", ref: el => this.container = el, style: { transition: `max-height ${this.transitionDuration}ms ease-in-out` } },
+        h("slot", null))));
+  }
+  static get is() { return "dnn-collapsible"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-collapsible.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-collapsible.css"]
+  }; }
+  static get properties() { return {
+    "expanded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines if the panel is expanded or not."
+      },
+      "attribute": "expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "transitionDuration": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines the transition time in ms, defaults to 150ms"
+      },
+      "attribute": "transition-duration",
+      "reflect": false,
+      "defaultValue": "150"
+    }
+  }; }
+  static get events() { return [{
+      "method": "dnnCollapsibleHeightChanged",
+      "name": "dnnCollapsibleHeightChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires whenever the collapsible height has changed"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "updateSize": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Updates the component height, use to update after a slot content changes.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "expanded",
+      "methodName": "handledExpandedChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "dnnCollapsibleHeightChanged",
+      "method": "handleHeightChanged",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
 //# sourceMappingURL=dnn-collapsible.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dnn-collapsible.js","sourceRoot":"","sources":["../../../src/components/dnn-collapsible/dnn-collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAO9G,MAAM,OAAO,cAAc;EAL3B;IASE,+CAA+C;IACxB,aAAQ,GAAY,KAAK,CAAC;IAEjD,2DAA2D;IACnD,uBAAkB,GAAY,GAAG,CAAC;GA2D3C;EArDC,mBAAmB;IACjB,qBAAqB,CAAC,GAAG,EAAE;MACzB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC,CAAC,CAAA;EACJ,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,UAAU;IACd,IAAI,IAAI,CAAC,QAAQ,EAAC;MACd,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;MACtE,CAAC,CAAC,CAAC;MACH,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;MAC1C,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC/B;EACH,CAAC;EAGD,sBAAsB,CAAC,QAAiB;IACtC,IAAI,QAAQ,EAAC;MACX,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;SACG;MACF,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;QACpE,qBAAqB,CAAC,GAAG,EAAE;UACzB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;QACzC,CAAC,CAAC,CAAC;MACL,CAAC,CAAC,CAAC;KACJ;IACD,UAAU,CAAC,GAAG,EAAE;MACd,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;MAC1C,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;EAC9B,CAAC;EAID,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,EAAE,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE;QAClF,eAAa,CACX,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch, Listen, Method } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: \"dnn-collapsible\",\r\n  styleUrl: \"dnn-collapsible.scss\",\r\n  shadow: true\r\n})\r\nexport class DnnCollapsible {\r\n\r\n  @Element() el: HTMLDnnCollapsibleElement;\r\n\r\n  /** Defines if the panel is expanded or not. */\r\n  @Prop({reflect: true}) expanded: boolean = false;\r\n\r\n  /** Defines the transition time in ms, defaults to 100ms */\r\n  @Prop() transitionDuration?: number = 150;\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event({bubbles: true, composed: true}) dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen(\"dnnCollapsibleHeightChanged\")\r\n  handleHeightChanged(){\r\n    requestAnimationFrame(() => {\r\n      this.updateSize();\r\n    })\r\n  }\r\n\r\n  /**\r\n   * Updates the component height, use to update after a slot content changes.\r\n   */\r\n  @Method()\r\n  async updateSize() {\r\n    if (this.expanded){\r\n        requestAnimationFrame(() => {\r\n          this.container.style.maxHeight = `${this.container.scrollHeight}px`;\r\n        });\r\n        setTimeout(() => {\r\n          this.container.style.maxHeight = \"none\";\r\n        }, this.transitionDuration);\r\n    }\r\n  }\r\n  \r\n  @Watch(\"expanded\")\r\n  handledExpandedChanged(expanded: boolean){\r\n    if (expanded){\r\n      this.updateSize();\r\n    }\r\n    else{\r\n      requestAnimationFrame(() => {\r\n        this.container.style.maxHeight = `${this.container.scrollHeight}px`;\r\n        requestAnimationFrame(() => {\r\n          this.container.style.maxHeight = \"0px\";\r\n        });\r\n      });\r\n    }\r\n    setTimeout(() => {\r\n      requestAnimationFrame(() => {\r\n        this.dnnCollapsibleHeightChanged.emit();\r\n      });\r\n    }, this.transitionDuration);\r\n  }\r\n  \r\n  private container: HTMLDivElement;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\" class={this.expanded && \"expanded\"} ref={el => this.container = el}>\r\n            <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"]}
+{"version":3,"file":"dnn-collapsible.js","sourceRoot":"","sources":["../../../../src/components/dnn-collapsible/dnn-collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAO9G,MAAM,OAAO,cAAc;EAL3B;IASE,+CAA+C;IACxB,aAAQ,GAAY,KAAK,CAAC;IAEjD,2DAA2D;IACnD,uBAAkB,GAAY,GAAG,CAAC;GAoE3C;EA9DC,mBAAmB;IACjB,qBAAqB,CAAC,GAAG,EAAE;MACzB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC,CAAC,CAAA;EACJ,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,UAAU;IACd,IAAI,IAAI,CAAC,QAAQ,EAAC;MACd,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;MACtE,CAAC,CAAC,CAAC;MACH,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;MAC1C,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC/B;EACH,CAAC;EAGD,sBAAsB,CAAC,QAAiB;IACtC,IAAI,QAAQ,EAAC;MACX,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;SACG;MACF,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;QACpE,qBAAqB,CAAC,GAAG,EAAE;UACzB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;QACzC,CAAC,CAAC,CAAC;MACL,CAAC,CAAC,CAAC;KACJ;IACD,UAAU,CAAC,GAAG,EAAE;MACd,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;MAC1C,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;EAC9B,CAAC;EAID,gBAAgB;IACd,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG,cAAc,IAAI,CAAC,kBAAkB,gBAAgB,CAAC;EAC1F,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,EAAE,EAAC,WAAW,EACd,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,EAClC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,EAC9B,KAAK,EAAE,EAAC,UAAU,EAAE,cAAc,IAAI,CAAC,kBAAkB,gBAAgB,EAAC;QAExE,eAAa,CACX,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch, Listen, Method } from '@stencil/core';\n\n@Component({\n  tag: \"dnn-collapsible\",\n  styleUrl: \"dnn-collapsible.scss\",\n  shadow: true\n})\nexport class DnnCollapsible {\n\n  @Element() el: HTMLDnnCollapsibleElement;\n\n  /** Defines if the panel is expanded or not. */\n  @Prop({reflect: true}) expanded: boolean = false;\n\n  /** Defines the transition time in ms, defaults to 150ms */\n  @Prop() transitionDuration?: number = 150;\n\n  /** Fires whenever the collapsible height has changed */\n  @Event({bubbles: true, composed: true}) dnnCollapsibleHeightChanged: EventEmitter<void>;\n\n  @Listen(\"dnnCollapsibleHeightChanged\")\n  handleHeightChanged(){\n    requestAnimationFrame(() => {\n      this.updateSize();\n    })\n  }\n\n  /**\n   * Updates the component height, use to update after a slot content changes.\n   */\n  @Method()\n  async updateSize() {\n    if (this.expanded){\n        requestAnimationFrame(() => {\n          this.container.style.maxHeight = `${this.container.scrollHeight}px`;\n        });\n        setTimeout(() => {\n          this.container.style.maxHeight = \"none\";\n        }, this.transitionDuration);\n    }\n  }\n  \n  @Watch(\"expanded\")\n  handledExpandedChanged(expanded: boolean){\n    if (expanded){\n      this.updateSize();\n    }\n    else{\n      requestAnimationFrame(() => {\n        this.container.style.maxHeight = `${this.container.scrollHeight}px`;\n        requestAnimationFrame(() => {\n          this.container.style.maxHeight = \"0px\";\n        });\n      });\n    }\n    setTimeout(() => {\n      requestAnimationFrame(() => {\n        this.dnnCollapsibleHeightChanged.emit();\n      });\n    }, this.transitionDuration);\n  }\n  \n  private container: HTMLDivElement;\n\n  componentDidLoad() {\n    this.container.style.transition = `max-height ${this.transitionDuration}ms ease-in-out`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          id=\"container\"\n          class={this.expanded && \"expanded\"}\n          ref={el => this.container = el}\n          style={{transition: `max-height ${this.transitionDuration}ms ease-in-out`}}\n        >\n            <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -0,0 +1,39 @@
+import { html } from "lit-html";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import readme from "./readme.md";
+export default {
+  title: "Elements/Collapsible",
+  component: "dnn-collapsible",
+  parameters: {
+    notes: readme,
+    actions: {
+      handles: ['dnnCollapsibleHeightChanged'],
+    },
+  },
+  argTypes: {
+    expanded: {
+      type: "boolean",
+    },
+    transitionDuration: {
+      type: "number",
+    },
+    'transition-duration': {
+      type: "number",
+      control: "number",
+    }
+  }
+};
+const Template = (args) => html `
+        <dnn-collapsible ?expanded=${ifDefined(args.expanded)} transition-duration=${ifDefined(args.transitionDuration)}>
+            <div style="border: 1px solid lightgray">
+                <h1>This title is inside the collapsible</h1>
+                <p>Bacon ipsum dolor amet cupim hamburger beef ribs pork belly porchetta shankle swine. Pork belly jowl rump swine corned beef, pancetta kevin cow. Picanha pork chop pork loin corned beef beef prosciutto t-bone short loin bresaola short ribs chicken andouille. Pig leberkas meatball alcatra ribeye meatloaf. Prosciutto shoulder tongue chuck burgdoggen tenderloin, shank sirloin landjaeger doner shankle meatball kevin pork loin ham hock.</p>
+            </div>
+        </dnn-collapsible>
+    `;
+export const Collapsible = Template.bind({});
+Collapsible.args = {
+  expanded: false,
+  transitionDuration: 150,
+};
+//# sourceMappingURL=dnn-collapsible.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-collapsible.stories.js","sourceRoot":"","sources":["../../../../src/components/dnn-collapsible/dnn-collapsible.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACX,KAAK,EAAE,sBAAsB;EAC7B,SAAS,EAAE,iBAAiB;EAC5B,UAAU,EAAE;IACR,KAAK,EAAE,MAAM;IACb,OAAO,EAAE;MACL,OAAO,EAAE,CAAC,6BAA6B,CAAC;KAC3C;GACJ;EACD,QAAQ,EAAE;IACN,QAAQ,EAAE;MACN,IAAI,EAAE,SAAS;KAClB;IACD,kBAAkB,EAAE;MAChB,IAAI,EAAE,QAAQ;KACjB;IACD,qBAAqB,EAAE;MACnB,IAAI,EAAE,QAAQ;MACd,OAAO,EAAE,QAAQ;KACpB;GACJ;CACI,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAwD,EAAE,EAAE,CAC1E,IAAI,CAAA;qCAC6B,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,wBAAwB,SAAS,CAAC,IAAI,CAAC,kBAAkB,CAAC;;;;;;KAMlH,CAAC;AAEN,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;EACf,QAAQ,EAAE,KAAK;EACf,kBAAkB,EAAE,GAAG;CAC1B,CAAC","sourcesContent":["import { html } from \"lit-html\";\r\nimport { ifDefined } from 'lit-html/directives/if-defined';\r\nimport { Meta } from \"@storybook/web-components\";\r\nimport readme from \"./readme.md\";\r\n\r\nexport default {\r\n    title: \"Elements/Collapsible\",\r\n    component: \"dnn-collapsible\",\r\n    parameters: {\r\n        notes: readme,\r\n        actions: {\r\n            handles: ['dnnCollapsibleHeightChanged'],\r\n        },\r\n    },\r\n    argTypes: {\r\n        expanded: {\r\n            type: \"boolean\",\r\n        },\r\n        transitionDuration: {\r\n            type: \"number\",\r\n        },\r\n        'transition-duration': {\r\n            type: \"number\",\r\n            control: \"number\",\r\n        }\r\n    }\r\n} as Meta;\r\n\r\nconst Template = (args: { expanded: boolean; transitionDuration: number; }) =>\r\n    html`\r\n        <dnn-collapsible ?expanded=${ifDefined(args.expanded)} transition-duration=${ifDefined(args.transitionDuration)}>\r\n            <div style=\"border: 1px solid lightgray\">\r\n                <h1>This title is inside the collapsible</h1>\r\n                <p>Bacon ipsum dolor amet cupim hamburger beef ribs pork belly porchetta shankle swine. Pork belly jowl rump swine corned beef, pancetta kevin cow. Picanha pork chop pork loin corned beef beef prosciutto t-bone short loin bresaola short ribs chicken andouille. Pig leberkas meatball alcatra ribeye meatloaf. Prosciutto shoulder tongue chuck burgdoggen tenderloin, shank sirloin landjaeger doner shankle meatball kevin pork loin ham hock.</p>\r\n            </div>\r\n        </dnn-collapsible>\r\n    `;\r\n\r\nexport const Collapsible = Template.bind({});\r\nCollapsible.args = {\r\n    expanded: false,\r\n    transitionDuration: 150,\r\n};"]}