@dnncommunity/dnn-elements 0.14.0-beta.7 → 0.14.0-beta.8

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ba8b86b1.js');
+const index = require('./index-aff4d89a.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -30,7 +30,7 @@ const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["dnn-image-cropper.cjs",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1028],"hasChildren":[32]}]]],["dnn-checkbox.cjs",[[1,"dnn-checkbox",{"checked":[1028],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs.cjs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle.cjs",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[2,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-button.cjs",[[1,"dnn-button",{"type":[1],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"modalVisible":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"animating":[32],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleOtherCollapsibleHeightChanged"]]]]],["dnn-dropzone.cjs",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[64]}]]]], options);
+  return index.bootstrapLazy([["dnn-image-cropper.cjs",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1028],"hasChildren":[32]}]]],["dnn-checkbox.cjs",[[1,"dnn-checkbox",{"checked":[1028],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs.cjs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle.cjs",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[2,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-button.cjs",[[1,"dnn-button",{"type":[1],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"modalVisible":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]]]]],["dnn-dropzone.cjs",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[64]}]]]], options);
   });
 };
 

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

@@ -1,8 +1,9 @@
 :host {
   display: block;
 }
-:host #container {
-  height: 0;
+
+#container {
+  max-height: 0;
   overflow: hidden;
-  transition: height 300ms ease-in-out;
+  transition: max-height 300ms ease-in-out;
 }

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

@@ -1,89 +1,45 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { Component, Host, h, Prop, Element, Watch, State, Method, Event, Listen } from '@stencil/core';
-import { Debounce } from '../../utilities/debounce';
+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;
-    this.animating = false;
   }
-  handleExpandedChanged(newValue) {
-    this.animating = true;
+  handleHeightChanged() {
     requestAnimationFrame(() => {
-      const container = this.el.shadowRoot.querySelector("#container");
-      if (newValue) {
-        container.style.height = container.scrollHeight + "px";
-      }
-      else {
-        container.style.height = "0px";
-      }
-    });
-    requestAnimationFrame(() => {
-      this.animating = false;
-      this.dnnCollapsibleHeightChanged.emit();
+      this.updateSize();
     });
   }
-  /** Updates the component height, use to update after a slot content changes. */
+  /**
+   * Updates the component height, use to update after a slot content changes.
+   */
   async updateSize() {
-    this.updateComponentSize();
-  }
-  updateComponentSize() {
     if (this.expanded) {
-      this.animating = true;
       requestAnimationFrame(() => {
-        const container = this.el.shadowRoot.querySelector("#container");
-        let newHeight = 0;
-        container.querySelector('slot').assignedElements().forEach(node => {
-          newHeight += node.scrollHeight;
-        });
-        container.style.height = newHeight + "px";
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
       });
+      setTimeout(() => {
+        this.container.style.maxHeight = "none";
+      }, this.transitionDuration);
     }
   }
-  handleOtherCollapsibleHeightChanged() {
+  handledExpandedChanged(expanded) {
+    if (expanded) {
+      this.updateSize();
+    }
+    else {
+      this.container.style.maxHeight = "0px";
+    }
     setTimeout(() => {
-      this.updateComponentSize();
-    }, this.transitionDuration);
-  }
-  handleMutation(mutationList) {
-    mutationList.forEach(mutation => {
       requestAnimationFrame(() => {
-        mutation.target.closest('dnn-collapsible').updateSize();
+        this.dnnCollapsibleHeightChanged.emit();
       });
-    });
-  }
-  componentWillLoad() {
-    this.mutationObserver = new MutationObserver((mutationList) => {
-      this.handleMutation(mutationList);
-    });
-  }
-  componentDidLoad() {
-    const container = this.el.shadowRoot.querySelector('#container');
-    container.style.transitionDuration = this.transitionDuration + 'ms';
-    // Monitor for content changes and update own height
-    const childNodes = [this.el];
-    childNodes.forEach(element => {
-      this.mutationObserver.observe(element, { attributes: true, characterData: true, childList: true, subtree: true });
-    });
-    const slot = this.el.shadowRoot.querySelector('slot');
-    slot.addEventListener("slotchange", () => {
-      this.updateSize();
-    });
-  }
-  disconnectedCallback() {
-    this.mutationObserver.disconnect();
+    }, this.transitionDuration);
   }
-  /*eslint-enable @stencil/own-methods-must-be-private */
   render() {
     return (h(Host, null,
-      h("div", { id: "container" },
+      h("div", { id: "container", class: this.expanded && "expanded", ref: el => this.container = el },
         h("slot", null))));
   }
   static get is() { return "dnn-collapsible"; }
@@ -132,9 +88,6 @@ export class DnnCollapsible {
       "defaultValue": "150"
     }
   }; }
-  static get states() { return {
-    "animating": {}
-  }; }
   static get events() { return [{
       "method": "dnnCollapsibleHeightChanged",
       "name": "dnnCollapsibleHeightChanged",
@@ -172,17 +125,14 @@ export class DnnCollapsible {
   static get elementRef() { return "el"; }
   static get watchers() { return [{
       "propName": "expanded",
-      "methodName": "handleExpandedChanged"
+      "methodName": "handledExpandedChanged"
     }]; }
   static get listeners() { return [{
       "name": "dnnCollapsibleHeightChanged",
-      "method": "handleOtherCollapsibleHeightChanged",
+      "method": "handleHeightChanged",
       "target": undefined,
       "capture": false,
       "passive": false
     }]; }
 }
-__decorate([
-  Debounce()
-], DnnCollapsible.prototype, "updateSize", null);
 //# 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":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Watch, State, Method, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\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  @State() animating: boolean = false;\r\n\r\n  @Watch(\"expanded\")\r\n  handleExpandedChanged(newValue: boolean){\r\n    this.animating = true;\r\n    requestAnimationFrame(() => {\r\n      const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n      if (newValue){\r\n        container.style.height = container.scrollHeight + \"px\";\r\n      }\r\n      else{\r\n        container.style.height = \"0px\";\r\n      }\r\n    });\r\n    \r\n    requestAnimationFrame(() => {\r\n      this.animating = false;\r\n      this.dnnCollapsibleHeightChanged.emit();\r\n    });\r\n  }\r\n\r\n  /** Updates the component height, use to update after a slot content changes. */\r\n  @Debounce()\r\n  @Method()\r\n  async updateSize() {\r\n    this.updateComponentSize();\r\n  }\r\n\r\n  private updateComponentSize(){\r\n    if (this.expanded){\r\n      this.animating = true;\r\n      requestAnimationFrame(() => {\r\n        const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n        let newHeight = 0;\r\n        container.querySelector('slot').assignedElements().forEach(node => {\r\n          newHeight += node.scrollHeight;\r\n        });\r\n        container.style.height = newHeight + \"px\";\r\n      });\r\n    }\r\n  }\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event() dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen('dnnCollapsibleHeightChanged')\r\n  handleOtherCollapsibleHeightChanged(){\r\n    setTimeout(() => {\r\n      this.updateComponentSize();\r\n    }, this.transitionDuration);\r\n  }\r\n\r\n  private mutationObserver: MutationObserver;\r\n\r\n  private handleMutation(mutationList){\r\n    mutationList.forEach(mutation => {\r\n      requestAnimationFrame(() => {\r\n        mutation.target.closest('dnn-collapsible').updateSize();\r\n      });\r\n    });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.mutationObserver = new MutationObserver((mutationList) => {\r\n      this.handleMutation(mutationList);\r\n    });\r\n  }\r\n\r\n  componentDidLoad(){\r\n    const container = this.el.shadowRoot.querySelector('#container') as HTMLDivElement;\r\n    container.style.transitionDuration = this.transitionDuration + 'ms';\r\n\r\n    // Monitor for content changes and update own height\r\n    const childNodes = [this.el];\r\n    childNodes.forEach(element => {\r\n      this.mutationObserver.observe(element, {attributes: true, characterData: true, childList: true, subtree: true});\r\n    });\r\n\r\n    const slot = this.el.shadowRoot.querySelector('slot');\r\n    slot.addEventListener(\"slotchange\", () => {\r\n      this.updateSize();\r\n    });\r\n  }\r\n\r\n  disconnectedCallback(){\r\n    this.mutationObserver.disconnect();\r\n  }\r\n  /*eslint-enable @stencil/own-methods-must-be-private */\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\">\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;GAsD3C;EAhDC,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,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;KACxC;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      this.container.style.maxHeight = \"0px\";\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"]}

package/dist/dnn/dnn-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-b5a28c1d.js';
 
 const dnnButtonCss = ":host{--background-color:transparent;--color:#333;--border-size:1px;--border-color:var(--backround-color);--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);display:inline-block;width:auto}:host(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--color:var(--dnn-color-primary-contrast, white);--focus-color:var(--background-color)}:host(.primary.reversed){--background-color:var(--dnn-color-primary-contrast, white);--color:var(--dnn-color-primary, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--focus-color:var(--color)}:host(.hydrated) button{border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);padding:var(--padding) calc(var(--padding) * 2);background-color:transparent;background-color:var(--background-color);color:var(--color);outline:none}:host(.hydrated) button:focus,:host(.hydrated) button:hover{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";
 

package/dist/dnn/dnn-button.system.entry.js

@@ -1,2 +1,2 @@
-System.register(["./index-5c2c8f16.system.js"],(function(o){"use strict";var r,e,t,n,a;return{setters:[function(o){r=o.r;e=o.e;t=o.h;n=o.f;a=o.g}],execute:function(){var s=":host{--background-color:transparent;--color:#333;--border-size:1px;--border-color:var(--backround-color);--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);display:inline-block;width:auto}:host(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--color:var(--dnn-color-primary-contrast, white);--focus-color:var(--background-color)}:host(.primary.reversed){--background-color:var(--dnn-color-primary-contrast, white);--color:var(--dnn-color-primary, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--focus-color:var(--color)}:host(.hydrated) button{border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);padding:var(--padding) calc(var(--padding) * 2);background-color:transparent;background-color:var(--background-color);color:var(--color);outline:none}:host(.hydrated) button:focus,:host(.hydrated) button:hover{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";var i=o("dnn_button",function(){function o(o){r(this,o);this.confirmed=e(this,"confirmed",3);this.canceled=e(this,"canceled",3);this.type="primary";this.reversed=false;this.size="normal";this.confirm=false;this.confirmYesText="Yes";this.confirmNoText="No";this.confirmMessage="Are you sure ?";this.disabled=false;this.modalVisible=false}o.prototype.componentDidLoad=function(){this.el.classList.add(this.type);if(this.reversed){this.el.classList.add("reversed")}if(this.size!=="normal"){this.el.classList.add(this.size)}this.modal=this.el.shadowRoot.querySelector("dnn-modal")};o.prototype.handleConfirm=function(){this.modal.hide();this.modalVisible=false;this.confirmed.emit()};o.prototype.handleCancel=function(){this.modal.hide();this.modalVisible=false;this.canceled.emit()};o.prototype.handleClick=function(){if(this.confirm&&!this.modalVisible){this.modal.show();this.modalVisible=true}};o.prototype.render=function(){var o=this;return t(n,{disabled:this.disabled,style:{"pointer-events":this.disabled?"none":"all"}},t("button",{class:"button",onClick:function(){return o.handleClick()},disabled:this.disabled},t("slot",null)),this.confirm&&t("dnn-modal",{showCloseButton:false,backdropDismiss:false},t("p",null,this.confirmMessage),t("div",{style:{display:"flex",justifyContent:"flex-end"}},t("dnn-button",{type:"primary",style:{margin:"5px"},onClick:function(){return o.handleConfirm()}},this.confirmYesText),t("dnn-button",{type:"secondary",style:{margin:"5px"},onClick:function(){return o.handleCancel()}},this.confirmNoText))))};Object.defineProperty(o.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return o}());i.style=s}}}));
+System.register(["./index-a3a55419.system.js"],(function(o){"use strict";var r,e,t,n,a;return{setters:[function(o){r=o.r;e=o.e;t=o.h;n=o.f;a=o.g}],execute:function(){var s=":host{--background-color:transparent;--color:#333;--border-size:1px;--border-color:var(--backround-color);--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);display:inline-block;width:auto}:host(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--color:var(--dnn-color-primary-contrast, white);--focus-color:var(--background-color)}:host(.primary.reversed){--background-color:var(--dnn-color-primary-contrast, white);--color:var(--dnn-color-primary, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--focus-color:var(--color)}:host(.hydrated) button{border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);padding:var(--padding) calc(var(--padding) * 2);background-color:transparent;background-color:var(--background-color);color:var(--color);outline:none}:host(.hydrated) button:focus,:host(.hydrated) button:hover{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";var i=o("dnn_button",function(){function o(o){r(this,o);this.confirmed=e(this,"confirmed",3);this.canceled=e(this,"canceled",3);this.type="primary";this.reversed=false;this.size="normal";this.confirm=false;this.confirmYesText="Yes";this.confirmNoText="No";this.confirmMessage="Are you sure ?";this.disabled=false;this.modalVisible=false}o.prototype.componentDidLoad=function(){this.el.classList.add(this.type);if(this.reversed){this.el.classList.add("reversed")}if(this.size!=="normal"){this.el.classList.add(this.size)}this.modal=this.el.shadowRoot.querySelector("dnn-modal")};o.prototype.handleConfirm=function(){this.modal.hide();this.modalVisible=false;this.confirmed.emit()};o.prototype.handleCancel=function(){this.modal.hide();this.modalVisible=false;this.canceled.emit()};o.prototype.handleClick=function(){if(this.confirm&&!this.modalVisible){this.modal.show();this.modalVisible=true}};o.prototype.render=function(){var o=this;return t(n,{disabled:this.disabled,style:{"pointer-events":this.disabled?"none":"all"}},t("button",{class:"button",onClick:function(){return o.handleClick()},disabled:this.disabled},t("slot",null)),this.confirm&&t("dnn-modal",{showCloseButton:false,backdropDismiss:false},t("p",null,this.confirmMessage),t("div",{style:{display:"flex",justifyContent:"flex-end"}},t("dnn-button",{type:"primary",style:{margin:"5px"},onClick:function(){return o.handleConfirm()}},this.confirmYesText),t("dnn-button",{type:"secondary",style:{margin:"5px"},onClick:function(){return o.handleCancel()}},this.confirmNoText))))};Object.defineProperty(o.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return o}());i.style=s}}}));
 //# sourceMappingURL=dnn-button.system.entry.js.map

package/dist/dnn/dnn-checkbox.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-b5a28c1d.js';
 
 const dnnCheckboxCss = ":host{--focus-color:var(--dnn-color-primary, #3792ED);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:0.25rem;margin:3px}button{background-color:transparent;border:0;padding:0;margin:0;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}button svg.undefined{opacity:0.45}button:focus{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}";
 

package/dist/dnn/dnn-checkbox.system.entry.js

@@ -1,2 +1,2 @@
-System.register(["./index-5c2c8f16.system.js"],(function(e){"use strict";var t,n,i,c,s;return{setters:[function(e){t=e.r;n=e.e;i=e.h;c=e.f;s=e.g}],execute:function(){var h=":host{--focus-color:var(--dnn-color-primary, #3792ED);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:0.25rem;margin:3px}button{background-color:transparent;border:0;padding:0;margin:0;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}button svg.undefined{opacity:0.45}button:focus{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}";var r=e("dnn_checkbox",function(){function e(e){t(this,e);this.checkedchange=n(this,"checkedchange",7);this.checked=false;this.useIntermediate=false}e.prototype.changeState=function(){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}};e.prototype.emitEvents=function(){this.checkedchange.emit(this.checked)};e.prototype.render=function(){var e=this;return i(c,null,i("button",{class:"icon",onClick:function(){return e.changeState()},ref:function(t){return e.button=t}},this.checked===false&&i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("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&&i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("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&&i("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"},i("g",null,i("rect",{fill:"none",height:"24",width:"24"})),i("g",null,i("g",null,i("g",null,i("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"})))))),i("label",{htmlFor:this.el.id,onClick:function(){return e.changeState()}},i("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});return e}());r.style=h}}}));
+System.register(["./index-a3a55419.system.js"],(function(e){"use strict";var t,n,i,s,c;return{setters:[function(e){t=e.r;n=e.e;i=e.h;s=e.f;c=e.g}],execute:function(){var h=":host{--focus-color:var(--dnn-color-primary, #3792ED);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:0.25rem;margin:3px}button{background-color:transparent;border:0;padding:0;margin:0;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}button svg.undefined{opacity:0.45}button:focus{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}";var r=e("dnn_checkbox",function(){function e(e){t(this,e);this.checkedchange=n(this,"checkedchange",7);this.checked=false;this.useIntermediate=false}e.prototype.changeState=function(){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}};e.prototype.emitEvents=function(){this.checkedchange.emit(this.checked)};e.prototype.render=function(){var e=this;return i(s,null,i("button",{class:"icon",onClick:function(){return e.changeState()},ref:function(t){return e.button=t}},this.checked===false&&i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("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&&i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("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&&i("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"},i("g",null,i("rect",{fill:"none",height:"24",width:"24"})),i("g",null,i("g",null,i("g",null,i("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"})))))),i("label",{htmlFor:this.el.id,onClick:function(){return e.changeState()}},i("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return c(this)},enumerable:false,configurable:true});return e}());r.style=h}}}));
 //# sourceMappingURL=dnn-checkbox.system.entry.js.map

package/dist/dnn/dnn-chevron.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-3e56049b.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-b5a28c1d.js';
 
 const dnnChevronCss = ":host{display:inline-block}button{border:none;padding:0px;margin:0px;min-width:15px;min-height:15px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background-color:transparent;outline:none}svg{height:2em;width:2em;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}button:focus svg,button:hover svg{color:var(--dnn-color-primary)}:host([expanded]) svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}";
 

package/dist/dnn/dnn-chevron.system.entry.js

@@ -1,2 +1,2 @@
-System.register(["./index-5c2c8f16.system.js"],(function(e){"use strict";var t,n,i,a;return{setters:[function(e){t=e.r;n=e.e;i=e.h;a=e.f}],execute:function(){var r=":host{display:inline-block}button{border:none;padding:0px;margin:0px;min-width:15px;min-height:15px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background-color:transparent;outline:none}svg{height:2em;width:2em;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}button:focus svg,button:hover svg{color:var(--dnn-color-primary)}:host([expanded]) svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}";var s=e("dnn_chevron",function(){function e(e){t(this,e);this.changed=n(this,"changed",7);this.expandText="expand";this.collapseText="collapse";this.expanded=false}e.prototype.handleExpandedChanged=function(e){this.changed.emit(e)};e.prototype.render=function(){var e=this;return i(a,null,i("button",{"aria-label":this.expanded?this.collapseText:this.expandText,onClick:function(){return e.expanded=!e.expanded}},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}))))};Object.defineProperty(e,"watchers",{get:function(){return{expanded:["handleExpandedChanged"]}},enumerable:false,configurable:true});return e}());s.style=r}}}));
+System.register(["./index-a3a55419.system.js"],(function(e){"use strict";var t,n,a,i;return{setters:[function(e){t=e.r;n=e.e;a=e.h;i=e.f}],execute:function(){var r=":host{display:inline-block}button{border:none;padding:0px;margin:0px;min-width:15px;min-height:15px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background-color:transparent;outline:none}svg{height:2em;width:2em;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}button:focus svg,button:hover svg{color:var(--dnn-color-primary)}:host([expanded]) svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}";var s=e("dnn_chevron",function(){function e(e){t(this,e);this.changed=n(this,"changed",7);this.expandText="expand";this.collapseText="collapse";this.expanded=false}e.prototype.handleExpandedChanged=function(e){this.changed.emit(e)};e.prototype.render=function(){var e=this;return a(i,null,a("button",{"aria-label":this.expanded?this.collapseText:this.expandText,onClick:function(){return e.expanded=!e.expanded}},a("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},a("path",{d:"M0 0h24v24H0z",fill:"none"}),a("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}))))};Object.defineProperty(e,"watchers",{get:function(){return{expanded:["handleExpandedChanged"]}},enumerable:false,configurable:true});return e}());s.style=r}}}));
 //# sourceMappingURL=dnn-chevron.system.entry.js.map

package/dist/dnn/dnn-collapsible.entry.js

@@ -1,18 +1,7 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.js';
-import { D as Debounce } from './debounce-06f55268.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-b5a28c1d.js';
 
-const dnnCollapsibleCss = ":host{display:block}:host #container{height:0;overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}";
+const dnnCollapsibleCss = ":host{display:block}#container{max-height:0;overflow:hidden;-webkit-transition:max-height 300ms ease-in-out;transition:max-height 300ms ease-in-out}";
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 let DnnCollapsible = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -21,86 +10,46 @@ let DnnCollapsible = class {
     this.expanded = false;
     /** Defines the transition time in ms, defaults to 100ms */
     this.transitionDuration = 150;
-    this.animating = false;
   }
-  handleExpandedChanged(newValue) {
-    this.animating = true;
-    requestAnimationFrame(() => {
-      const container = this.el.shadowRoot.querySelector("#container");
-      if (newValue) {
-        container.style.height = container.scrollHeight + "px";
-      }
-      else {
-        container.style.height = "0px";
-      }
-    });
+  handleHeightChanged() {
     requestAnimationFrame(() => {
-      this.animating = false;
-      this.dnnCollapsibleHeightChanged.emit();
+      this.updateSize();
     });
   }
-  /** Updates the component height, use to update after a slot content changes. */
+  /**
+   * Updates the component height, use to update after a slot content changes.
+   */
   async updateSize() {
-    this.updateComponentSize();
-  }
-  updateComponentSize() {
     if (this.expanded) {
-      this.animating = true;
       requestAnimationFrame(() => {
-        const container = this.el.shadowRoot.querySelector("#container");
-        let newHeight = 0;
-        container.querySelector('slot').assignedElements().forEach(node => {
-          newHeight += node.scrollHeight;
-        });
-        container.style.height = newHeight + "px";
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
       });
+      setTimeout(() => {
+        this.container.style.maxHeight = "none";
+      }, this.transitionDuration);
     }
   }
-  handleOtherCollapsibleHeightChanged() {
+  handledExpandedChanged(expanded) {
+    if (expanded) {
+      this.updateSize();
+    }
+    else {
+      this.container.style.maxHeight = "0px";
+    }
     setTimeout(() => {
-      this.updateComponentSize();
-    }, this.transitionDuration);
-  }
-  handleMutation(mutationList) {
-    mutationList.forEach(mutation => {
       requestAnimationFrame(() => {
-        mutation.target.closest('dnn-collapsible').updateSize();
+        this.dnnCollapsibleHeightChanged.emit();
       });
-    });
-  }
-  componentWillLoad() {
-    this.mutationObserver = new MutationObserver((mutationList) => {
-      this.handleMutation(mutationList);
-    });
-  }
-  componentDidLoad() {
-    const container = this.el.shadowRoot.querySelector('#container');
-    container.style.transitionDuration = this.transitionDuration + 'ms';
-    // Monitor for content changes and update own height
-    const childNodes = [this.el];
-    childNodes.forEach(element => {
-      this.mutationObserver.observe(element, { attributes: true, characterData: true, childList: true, subtree: true });
-    });
-    const slot = this.el.shadowRoot.querySelector('slot');
-    slot.addEventListener("slotchange", () => {
-      this.updateSize();
-    });
-  }
-  disconnectedCallback() {
-    this.mutationObserver.disconnect();
+    }, this.transitionDuration);
   }
-  /*eslint-enable @stencil/own-methods-must-be-private */
   render() {
-    return (h(Host, null, h("div", { id: "container" }, h("slot", null))));
+    return (h(Host, null, h("div", { id: "container", class: this.expanded && "expanded", ref: el => this.container = el }, h("slot", null))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "expanded": ["handleExpandedChanged"]
+    "expanded": ["handledExpandedChanged"]
   }; }
 };
-__decorate([
-  Debounce()
-], DnnCollapsible.prototype, "updateSize", null);
 DnnCollapsible.style = dnnCollapsibleCss;
 
 export { DnnCollapsible as dnn_collapsible };

package/dist/dnn/dnn-collapsible.entry.js.map

@@ -1 +1 @@
-{"file":"dnn-collapsible.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","./src/components/dnn-collapsible/dnn-collapsible.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n  #container{\r\n    height:0;\r\n    overflow: hidden;\r\n    transition: height 300ms ease-in-out;\r\n  }\r\n}","import { Component, Host, h, Prop, Element, Watch, State, Method, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\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  @State() animating: boolean = false;\r\n\r\n  @Watch(\"expanded\")\r\n  handleExpandedChanged(newValue: boolean){\r\n    this.animating = true;\r\n    requestAnimationFrame(() => {\r\n      const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n      if (newValue){\r\n        container.style.height = container.scrollHeight + \"px\";\r\n      }\r\n      else{\r\n        container.style.height = \"0px\";\r\n      }\r\n    });\r\n    \r\n    requestAnimationFrame(() => {\r\n      this.animating = false;\r\n      this.dnnCollapsibleHeightChanged.emit();\r\n    });\r\n  }\r\n\r\n  /** Updates the component height, use to update after a slot content changes. */\r\n  @Debounce()\r\n  @Method()\r\n  async updateSize() {\r\n    this.updateComponentSize();\r\n  }\r\n\r\n  private updateComponentSize(){\r\n    if (this.expanded){\r\n      this.animating = true;\r\n      requestAnimationFrame(() => {\r\n        const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n        let newHeight = 0;\r\n        container.querySelector('slot').assignedElements().forEach(node => {\r\n          newHeight += node.scrollHeight;\r\n        });\r\n        container.style.height = newHeight + \"px\";\r\n      });\r\n    }\r\n  }\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event() dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen('dnnCollapsibleHeightChanged')\r\n  handleOtherCollapsibleHeightChanged(){\r\n    setTimeout(() => {\r\n      this.updateComponentSize();\r\n    }, this.transitionDuration);\r\n  }\r\n\r\n  private mutationObserver: MutationObserver;\r\n\r\n  private handleMutation(mutationList){\r\n    mutationList.forEach(mutation => {\r\n      requestAnimationFrame(() => {\r\n        mutation.target.closest('dnn-collapsible').updateSize();\r\n      });\r\n    });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.mutationObserver = new MutationObserver((mutationList) => {\r\n      this.handleMutation(mutationList);\r\n    });\r\n  }\r\n\r\n  componentDidLoad(){\r\n    const container = this.el.shadowRoot.querySelector('#container') as HTMLDivElement;\r\n    container.style.transitionDuration = this.transitionDuration + 'ms';\r\n\r\n    // Monitor for content changes and update own height\r\n    const childNodes = [this.el];\r\n    childNodes.forEach(element => {\r\n      this.mutationObserver.observe(element, {attributes: true, characterData: true, childList: true, subtree: true});\r\n    });\r\n\r\n    const slot = this.el.shadowRoot.querySelector('slot');\r\n    slot.addEventListener(\"slotchange\", () => {\r\n      this.updateSize();\r\n    });\r\n  }\r\n\r\n  disconnectedCallback(){\r\n    this.mutationObserver.disconnect();\r\n  }\r\n  /*eslint-enable @stencil/own-methods-must-be-private */\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\">\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.entry.esm.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,sJAAsJ;;ICOnK,cAAc;EAL3B;;;;IAUyB,aAAQ,GAAY,KAAK,CAAC;;IAGzC,uBAAkB,GAAY,GAAG,CAAC;GAsD3C;EAhDC,mBAAmB;IACjB,qBAAqB,CAAC;MACpB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB,CAAC,CAAA;GACH;;;;EAMD,MAAM,UAAU;IACd,IAAI,IAAI,CAAC,QAAQ,EAAC;MACd,qBAAqB,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;OACrE,CAAC,CAAC;MACH,UAAU,CAAC;QACT,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;OACzC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC/B;GACF;EAGD,sBAAsB,CAAC,QAAiB;IACtC,IAAI,QAAQ,EAAC;MACX,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;SACG;MACF,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;KACxC;IACD,UAAU,CAAC;MACT,qBAAqB,CAAC;QACpB,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;OACzC,CAAC,CAAC;KACJ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;GAC7B;EAID,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,EAAE,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,EAAE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAClF,eAAa,CACX,CACD,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","./src/components/dnn-collapsible/dnn-collapsible.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n#container{\r\n  max-height:0;\r\n  overflow: hidden;\r\n  transition: max-height 300ms ease-in-out;\r\n}","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      this.container.style.maxHeight = \"0px\";\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}

package/dist/dnn/dnn-collapsible.system.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,i){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function a(e){try{s(i.next(e))}catch(e){o(e)}}function u(e){try{s(i["throw"](e))}catch(e){o(e)}}function s(e){e.done?n(e.value):r(e.value).then(a,u)}s((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,r,o,a;return a={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function u(e){return function(t){return s([e,t])}}function s(a){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,r&&(o=a[0]&2?r["return"]:a[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;if(r=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;r=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){n.label=a[1];break}if(a[0]===6&&n.label<o[1]){n.label=o[1];o=a;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(a);break}if(o[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(e){a=[6,e];r=0}finally{i=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./index-5c2c8f16.system.js","./debounce-eef81bf7.system.js"],(function(e){"use strict";var t,n,i,r,o,a;return{setters:[function(e){t=e.r;n=e.e;i=e.h;r=e.f;o=e.g},function(e){a=e.D}],execute:function(){var u=":host{display:block}:host #container{height:0;overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}";var s=undefined&&undefined.__decorate||function(e,t,n,i){var r=arguments.length,o=r<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,n):i,a;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,t,n,i);else for(var u=e.length-1;u>=0;u--)if(a=e[u])o=(r<3?a(o):r>3?a(t,n,o):a(t,n))||o;return r>3&&o&&Object.defineProperty(t,n,o),o};var l=e("dnn_collapsible",function(){function e(e){t(this,e);this.dnnCollapsibleHeightChanged=n(this,"dnnCollapsibleHeightChanged",7);this.expanded=false;this.transitionDuration=150;this.animating=false}e.prototype.handleExpandedChanged=function(e){var t=this;this.animating=true;requestAnimationFrame((function(){var n=t.el.shadowRoot.querySelector("#container");if(e){n.style.height=n.scrollHeight+"px"}else{n.style.height="0px"}}));requestAnimationFrame((function(){t.animating=false;t.dnnCollapsibleHeightChanged.emit()}))};e.prototype.updateSize=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.updateComponentSize();return[2]}))}))};e.prototype.updateComponentSize=function(){var e=this;if(this.expanded){this.animating=true;requestAnimationFrame((function(){var t=e.el.shadowRoot.querySelector("#container");var n=0;t.querySelector("slot").assignedElements().forEach((function(e){n+=e.scrollHeight}));t.style.height=n+"px"}))}};e.prototype.handleOtherCollapsibleHeightChanged=function(){var e=this;setTimeout((function(){e.updateComponentSize()}),this.transitionDuration)};e.prototype.handleMutation=function(e){e.forEach((function(e){requestAnimationFrame((function(){e.target.closest("dnn-collapsible").updateSize()}))}))};e.prototype.componentWillLoad=function(){var e=this;this.mutationObserver=new MutationObserver((function(t){e.handleMutation(t)}))};e.prototype.componentDidLoad=function(){var e=this;var t=this.el.shadowRoot.querySelector("#container");t.style.transitionDuration=this.transitionDuration+"ms";var n=[this.el];n.forEach((function(t){e.mutationObserver.observe(t,{attributes:true,characterData:true,childList:true,subtree:true})}));var i=this.el.shadowRoot.querySelector("slot");i.addEventListener("slotchange",(function(){e.updateSize()}))};e.prototype.disconnectedCallback=function(){this.mutationObserver.disconnect()};e.prototype.render=function(){return i(r,null,i("div",{id:"container"},i("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{expanded:["handleExpandedChanged"]}},enumerable:false,configurable:true});return e}());s([a()],l.prototype,"updateSize",null);l.style=u}}}));
+var __awaiter=this&&this.__awaiter||function(e,t,n,i){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function o(e){try{s(i.next(e))}catch(e){a(e)}}function u(e){try{s(i["throw"](e))}catch(e){a(e)}}function s(e){e.done?n(e.value):r(e.value).then(o,u)}s((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},i,r,a,o;return o={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function u(e){return function(t){return s([e,t])}}function s(o){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,r&&(a=o[0]&2?r["return"]:o[0]?r["throw"]||((a=r["return"])&&a.call(r),0):r.next)&&!(a=a.call(r,o[1])).done)return a;if(r=0,a)o=[o[0]&2,a.value];switch(o[0]){case 0:case 1:a=o;break;case 4:n.label++;return{value:o[1],done:false};case 5:n.label++;r=o[1];o=[0];continue;case 7:o=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){n=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){n.label=o[1];break}if(o[0]===6&&n.label<a[1]){n.label=a[1];a=o;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(o);break}if(a[2])n.ops.pop();n.trys.pop();continue}o=t.call(e,n)}catch(e){o=[6,e];r=0}finally{i=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./index-a3a55419.system.js"],(function(e){"use strict";var t,n,i,r,a;return{setters:[function(e){t=e.r;n=e.e;i=e.h;r=e.f;a=e.g}],execute:function(){var o=":host{display:block}#container{max-height:0;overflow:hidden;-webkit-transition:max-height 300ms ease-in-out;transition:max-height 300ms ease-in-out}";var u=e("dnn_collapsible",function(){function e(e){t(this,e);this.dnnCollapsibleHeightChanged=n(this,"dnnCollapsibleHeightChanged",7);this.expanded=false;this.transitionDuration=150}e.prototype.handleHeightChanged=function(){var e=this;requestAnimationFrame((function(){e.updateSize()}))};e.prototype.updateSize=function(){return __awaiter(this,void 0,void 0,(function(){var e=this;return __generator(this,(function(t){if(this.expanded){requestAnimationFrame((function(){e.container.style.maxHeight=e.container.scrollHeight+"px"}));setTimeout((function(){e.container.style.maxHeight="none"}),this.transitionDuration)}return[2]}))}))};e.prototype.handledExpandedChanged=function(e){var t=this;if(e){this.updateSize()}else{this.container.style.maxHeight="0px"}setTimeout((function(){requestAnimationFrame((function(){t.dnnCollapsibleHeightChanged.emit()}))}),this.transitionDuration)};e.prototype.render=function(){var e=this;return i(r,null,i("div",{id:"container",class:this.expanded&&"expanded",ref:function(t){return e.container=t}},i("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{expanded:["handledExpandedChanged"]}},enumerable:false,configurable:true});return e}());u.style=o}}}));
 //# sourceMappingURL=dnn-collapsible.system.entry.js.map

package/dist/dnn/dnn-collapsible.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","src/components/dnn-collapsible/dnn-collapsible.tsx"],"names":["dnnCollapsibleCss","DnnCollapsible","exports","class_1","hostRef","this","expanded","transitionDuration","animating","prototype","handleExpandedChanged","newValue","_this","requestAnimationFrame","container","el","shadowRoot","querySelector","style","height","scrollHeight","dnnCollapsibleHeightChanged","emit","updateSize","updateComponentSize","newHeight","assignedElements","forEach","node","handleOtherCollapsibleHeightChanged","setTimeout","handleMutation","mutationList","mutation","target","closest","componentWillLoad","mutationObserver","MutationObserver","componentDidLoad","childNodes","element","observe","attributes","characterData","childList","subtree","slot","addEventListener","disconnectedCallback","disconnect","render","h","Host","id","Debounce"],"mappings":"opDAAA,IAAMA,EAAoB,ggBCQbC,EAAcC,EAAA,kBAAA,WAL3B,SAAAC,EAAAC,sFAUyBC,KAAAC,SAAoB,MAGnCD,KAAAE,mBAA8B,IAE7BF,KAAAG,UAAqB,MAG9BL,EAAAM,UAAAC,sBAAA,SAAsBC,GAAtB,IAAAC,EAAAP,KACEA,KAAKG,UAAY,KACjBK,uBAAsB,WACpB,IAAMC,EAAYF,EAAKG,GAAGC,WAAWC,cAAc,cACnD,GAAIN,EAAS,CACXG,EAAUI,MAAMC,OAASL,EAAUM,aAAe,SAEhD,CACFN,EAAUI,MAAMC,OAAS,UAI7BN,uBAAsB,WACpBD,EAAKJ,UAAY,MACjBI,EAAKS,4BAA4BC,WAO/BnB,EAAAM,UAAAc,WAAN,gGACElB,KAAKmB,uCAGCrB,EAAAM,UAAAe,oBAAA,WAAA,IAAAZ,EAAAP,KACN,GAAIA,KAAKC,SAAS,CAChBD,KAAKG,UAAY,KACjBK,uBAAsB,WACpB,IAAMC,EAAYF,EAAKG,GAAGC,WAAWC,cAAc,cACnD,IAAIQ,EAAY,EAChBX,EAAUG,cAAc,QAAQS,mBAAmBC,SAAQ,SAAAC,GACzDH,GAAaG,EAAKR,gBAEpBN,EAAUI,MAAMC,OAASM,EAAY,UAS3CtB,EAAAM,UAAAoB,oCAAA,WAAA,IAAAjB,EAAAP,KACEyB,YAAW,WACTlB,EAAKY,wBACJnB,KAAKE,qBAKFJ,EAAAM,UAAAsB,eAAA,SAAeC,GACrBA,EAAaL,SAAQ,SAAAM,GACnBpB,uBAAsB,WACpBoB,EAASC,OAAOC,QAAQ,mBAAmBZ,oBAKjDpB,EAAAM,UAAA2B,kBAAA,WAAA,IAAAxB,EAAAP,KACEA,KAAKgC,iBAAmB,IAAIC,kBAAiB,SAACN,GAC5CpB,EAAKmB,eAAeC,OAIxB7B,EAAAM,UAAA8B,iBAAA,WAAA,IAAA3B,EAAAP,KACE,IAAMS,EAAYT,KAAKU,GAAGC,WAAWC,cAAc,cACnDH,EAAUI,MAAMX,mBAAqBF,KAAKE,mBAAqB,KAG/D,IAAMiC,EAAa,CAACnC,KAAKU,IACzByB,EAAWb,SAAQ,SAAAc,GACjB7B,EAAKyB,iBAAiBK,QAAQD,EAAS,CAACE,WAAY,KAAMC,cAAe,KAAMC,UAAW,KAAMC,QAAS,UAG3G,IAAMC,EAAO1C,KAAKU,GAAGC,WAAWC,cAAc,QAC9C8B,EAAKC,iBAAiB,cAAc,WAClCpC,EAAKW,iBAITpB,EAAAM,UAAAwC,qBAAA,WACE5C,KAAKgC,iBAAiBa,cAIxB/C,EAAAM,UAAA0C,OAAA,WACE,OACEC,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKE,GAAG,aACJF,EAAA,OAAA,kQAvGe,OAgCxBG","sourcesContent":[":host {\r\n  display: block;\r\n  #container{\r\n    height:0;\r\n    overflow: hidden;\r\n    transition: height 300ms ease-in-out;\r\n  }\r\n}","import { Component, Host, h, Prop, Element, Watch, State, Method, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\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  @State() animating: boolean = false;\r\n\r\n  @Watch(\"expanded\")\r\n  handleExpandedChanged(newValue: boolean){\r\n    this.animating = true;\r\n    requestAnimationFrame(() => {\r\n      const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n      if (newValue){\r\n        container.style.height = container.scrollHeight + \"px\";\r\n      }\r\n      else{\r\n        container.style.height = \"0px\";\r\n      }\r\n    });\r\n    \r\n    requestAnimationFrame(() => {\r\n      this.animating = false;\r\n      this.dnnCollapsibleHeightChanged.emit();\r\n    });\r\n  }\r\n\r\n  /** Updates the component height, use to update after a slot content changes. */\r\n  @Debounce()\r\n  @Method()\r\n  async updateSize() {\r\n    this.updateComponentSize();\r\n  }\r\n\r\n  private updateComponentSize(){\r\n    if (this.expanded){\r\n      this.animating = true;\r\n      requestAnimationFrame(() => {\r\n        const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n        let newHeight = 0;\r\n        container.querySelector('slot').assignedElements().forEach(node => {\r\n          newHeight += node.scrollHeight;\r\n        });\r\n        container.style.height = newHeight + \"px\";\r\n      });\r\n    }\r\n  }\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event() dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen('dnnCollapsibleHeightChanged')\r\n  handleOtherCollapsibleHeightChanged(){\r\n    setTimeout(() => {\r\n      this.updateComponentSize();\r\n    }, this.transitionDuration);\r\n  }\r\n\r\n  private mutationObserver: MutationObserver;\r\n\r\n  private handleMutation(mutationList){\r\n    mutationList.forEach(mutation => {\r\n      requestAnimationFrame(() => {\r\n        mutation.target.closest('dnn-collapsible').updateSize();\r\n      });\r\n    });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.mutationObserver = new MutationObserver((mutationList) => {\r\n      this.handleMutation(mutationList);\r\n    });\r\n  }\r\n\r\n  componentDidLoad(){\r\n    const container = this.el.shadowRoot.querySelector('#container') as HTMLDivElement;\r\n    container.style.transitionDuration = this.transitionDuration + 'ms';\r\n\r\n    // Monitor for content changes and update own height\r\n    const childNodes = [this.el];\r\n    childNodes.forEach(element => {\r\n      this.mutationObserver.observe(element, {attributes: true, characterData: true, childList: true, subtree: true});\r\n    });\r\n\r\n    const slot = this.el.shadowRoot.querySelector('slot');\r\n    slot.addEventListener(\"slotchange\", () => {\r\n      this.updateSize();\r\n    });\r\n  }\r\n\r\n  disconnectedCallback(){\r\n    this.mutationObserver.disconnect();\r\n  }\r\n  /*eslint-enable @stencil/own-methods-must-be-private */\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\">\r\n            <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"]}
+{"version":3,"sources":["src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","src/components/dnn-collapsible/dnn-collapsible.tsx"],"names":["dnnCollapsibleCss","DnnCollapsible","exports","class_1","hostRef","this","expanded","transitionDuration","prototype","handleHeightChanged","_this","requestAnimationFrame","updateSize","container","style","maxHeight","scrollHeight","setTimeout","handledExpandedChanged","dnnCollapsibleHeightChanged","emit","render","h","Host","id","class","ref","el"],"mappings":"+lDAAA,IAAMA,EAAoB,2JCObC,EAAcC,EAAA,kBAAA,WAL3B,SAAAC,EAAAC,sFAUyBC,KAAAC,SAAoB,MAGnCD,KAAAE,mBAA8B,IAMtCJ,EAAAK,UAAAC,oBAAA,WAAA,IAAAC,EAAAL,KACEM,uBAAsB,WACpBD,EAAKE,iBAQHT,EAAAK,UAAAI,WAAN,2GACE,GAAIP,KAAKC,SAAS,CACdK,uBAAsB,WACpBD,EAAKG,UAAUC,MAAMC,UAAeL,EAAKG,UAAUG,aAAY,QAEjEC,YAAW,WACTP,EAAKG,UAAUC,MAAMC,UAAY,SAChCV,KAAKE,qCAKdJ,EAAAK,UAAAU,uBAAA,SAAuBZ,GAAvB,IAAAI,EAAAL,KACE,GAAIC,EAAS,CACXD,KAAKO,iBAEH,CACFP,KAAKQ,UAAUC,MAAMC,UAAY,MAEnCE,YAAW,WACTN,uBAAsB,WACpBD,EAAKS,4BAA4BC,YAElCf,KAAKE,qBAKVJ,EAAAK,UAAAa,OAAA,WAAA,IAAAX,EAAAL,KACE,OACEiB,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKE,GAAG,YAAYC,MAAOpB,KAAKC,UAAY,WAAYoB,IAAK,SAAAC,GAAM,OAAAjB,EAAKG,UAAYc,IAChFL,EAAA,OAAA,mQAxDe","sourcesContent":[":host {\r\n  display: block;\r\n}\r\n#container{\r\n  max-height:0;\r\n  overflow: hidden;\r\n  transition: max-height 300ms ease-in-out;\r\n}","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      this.container.style.maxHeight = \"0px\";\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"]}

package/dist/dnn/dnn-color-picker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-3e56049b.js';
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-b5a28c1d.js';
 import { D as Debounce } from './debounce-06f55268.js';
 
 /** Color utility class with hsl and rgb converters

package/dist/dnn/dnn-color-picker.system.entry.js

@@ -1,4 +1,4 @@
-System.register(["./index-5c2c8f16.system.js","./debounce-eef81bf7.system.js"],(function(e){"use strict";var n,t,o,r,i;return{setters:[function(e){n=e.r;t=e.e;o=e.h;r=e.g},function(e){i=e.D}],execute:function(){
+System.register(["./index-a3a55419.system.js","./debounce-eef81bf7.system.js"],(function(e){"use strict";var n,t,o,r,i;return{setters:[function(e){n=e.r;t=e.e;o=e.h;r=e.g},function(e){i=e.D}],execute:function(){
 /** Color utility class with hsl and rgb converters
        * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV
        * @copyright Copyright (c) .NET Foundation. All rights reserved.

package/dist/dnn/dnn-dropzone.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-3e56049b.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-b5a28c1d.js';
 
 const dnnDropzoneCss = ":host{--border-color:var(--dnn-color-tertiary-contrast, lightgray);--border-radius:var(--dnn-controls-radius, 5px);--drop-background-color:var(--dnn-color-tertiary, lightblue);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border:0px;margin:0;padding:0;background-color:transparent}button:hover{cursor:pointer}button svg{margin-right:0.5rem}label.upload-file{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.video-preview button{margin:1rem}";
 

package/dist/dnn/dnn-dropzone.system.entry.js

@@ -1,2 +1,2 @@
-System.register(["./index-5c2c8f16.system.js"],(function(e){"use strict";var t,i,n,r;return{setters:[function(e){t=e.r;i=e.e;n=e.h;r=e.f}],execute:function(){var o=":host{--border-color:var(--dnn-color-tertiary-contrast, lightgray);--border-radius:var(--dnn-controls-radius, 5px);--drop-background-color:var(--dnn-color-tertiary, lightblue);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border:0px;margin:0;padding:0;background-color:transparent}button:hover{cursor:pointer}button svg{margin-right:0.5rem}label.upload-file{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.video-preview button{margin:1rem}";var a=e("dnn_dropzone",function(){function e(e){var n=this;t(this,e);this.filesSelected=i(this,"filesSelected",7);this.resx={dragAndDropFile:"Drag and drop a file",capture:"Capture",or:"or",takePicture:"Take a picture",uploadFile:"Upload a file"};this.allowCameraMode=false;this.captureQuality=.8;this.canTakeSnapshots=false;this.takingPicture=false;this.handleDragOver=function(e){e.stopPropagation();e.preventDefault();e.dataTransfer.dropEffect="copy";n.dropzone.classList.add("dropping")};this.handleDrop=function(e){e.stopPropagation();e.preventDefault();var t=e.dataTransfer.files;if(n.hasInvalidExtensions(t)){return}var i=n.getFilesFromFileList(t);n.filesSelected.emit(i)}}e.prototype.componentDidLoad=function(){var e=this;if(this.allowCameraMode){this.checkIfBrowserCanTakeSnapshots().then((function(t){return e.canTakeSnapshots=t}))}if(this.allowedExtensions!=undefined&&this.allowedExtensions.length>0){var t=this.allowedExtensions.map((function(e){return"."+e}));var i=t.join(",");this.fileInput.accept=i}};e.prototype.checkIfBrowserCanTakeSnapshots=function(){return new Promise((function(e){var t=navigator.mediaDevices;if(t==undefined||t.enumerateDevices==undefined){e(false)}t.enumerateDevices().then((function(t){var i=t.some((function(e){return e.kind=="videoinput"}));e(i)}))}))};e.prototype.getFilesFromFileList=function(e){var t=[];for(var i=0;i<e.length;i++){var n=e[i];t.push(n)}return t};e.prototype.handleUploadButton=function(e){var t=this.getFilesFromFileList(e.files);this.filesSelected.emit(t)};e.prototype.hasInvalidExtensions=function(e){var t=false;for(var i=0;i<e.length;i++){var n=e[i];var r=/(?:\.([^.]+))?$/;var o=r.exec(n.name)[1];if(o==undefined){t=true}if(this.allowedExtensions!=undefined&&!this.allowedExtensions.includes(o)){t=true}return t}};e.prototype.takeSnapshot=function(){var e=this;this.takingPicture=true;navigator.mediaDevices.getUserMedia({video:true,audio:false}).then((function(t){t;e.videoPreview.srcObject=t;e.videoPreview.play().then((function(){e.videoSettings=t.getVideoTracks()[0].getSettings()}))})).catch((function(e){return alert(e)}))};e.prototype.applySnapshot=function(){var e=this;var t=document.createElement("canvas");var i=t.getContext("2d");t.width=this.videoSettings.width;t.height=this.videoSettings.height;i.drawImage(this.videoPreview,0,0);t.toBlob((function(t){var i=new File([t],"image.jpeg",{type:"image/jpeg"});e.takingPicture=false;var n=[i];e.filesSelected.emit(n)}),"image/jpeg",this.captureQuality)};e.prototype.render=function(){var e=this;var t,i,o,a,s,l;return n(r,{ref:function(t){return e.dropzone=t},class:"dropzone",onDragOver:this.handleDragOver,onDrop:this.handleDrop,onDragLeave:function(){return e.dropzone.classList.remove("dropping")}},!this.takingPicture&&[n("p",null,(t=this.resx)===null||t===void 0?void 0:t.dragAndDropFile),n("p",null,"- ",(i=this.resx)===null||i===void 0?void 0:i.or," -"),n("label",{class:"upload-file"},n("input",{type:"file",ref:function(t){return e.fileInput=t},onChange:function(t){return e.handleUploadButton(t.target)}}),n("span",null,n("svg",{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"},n("g",null,n("rect",{fill:"none",height:"24",width:"24"})),n("g",null,n("path",{d:"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z"}))))," ",(o=this.resx)===null||o===void 0?void 0:o.uploadFile),this.canTakeSnapshots&&[n("p",null,"- ",(a=this.resx)===null||a===void 0?void 0:a.or," -"),n("button",{onClick:function(){return e.takeSnapshot()}},n("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},n("path",{d:"M0 0h24v24H0z",fill:"none"}),n("circle",{cx:"12",cy:"12",r:"3.2"}),n("path",{d:"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"})),(s=this.resx)===null||s===void 0?void 0:s.takePicture)]],this.takingPicture&&n("div",{class:"video-preview"},n("video",{ref:function(t){return e.videoPreview=t}}),n("button",{onClick:function(){return e.applySnapshot()}},n("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},n("path",{d:"M0 0h24v24H0z",fill:"none"}),n("circle",{cx:"12",cy:"12",r:"3.2"}),n("path",{d:"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"}))," ",(l=this.resx)===null||l===void 0?void 0:l.capture)))};return e}());a.style=o}}}));
+System.register(["./index-a3a55419.system.js"],(function(e){"use strict";var t,i,n,r;return{setters:[function(e){t=e.r;i=e.e;n=e.h;r=e.f}],execute:function(){var o=":host{--border-color:var(--dnn-color-tertiary-contrast, lightgray);--border-radius:var(--dnn-controls-radius, 5px);--drop-background-color:var(--dnn-color-tertiary, lightblue);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border:0px;margin:0;padding:0;background-color:transparent}button:hover{cursor:pointer}button svg{margin-right:0.5rem}label.upload-file{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.video-preview button{margin:1rem}";var a=e("dnn_dropzone",function(){function e(e){var n=this;t(this,e);this.filesSelected=i(this,"filesSelected",7);this.resx={dragAndDropFile:"Drag and drop a file",capture:"Capture",or:"or",takePicture:"Take a picture",uploadFile:"Upload a file"};this.allowCameraMode=false;this.captureQuality=.8;this.canTakeSnapshots=false;this.takingPicture=false;this.handleDragOver=function(e){e.stopPropagation();e.preventDefault();e.dataTransfer.dropEffect="copy";n.dropzone.classList.add("dropping")};this.handleDrop=function(e){e.stopPropagation();e.preventDefault();var t=e.dataTransfer.files;if(n.hasInvalidExtensions(t)){return}var i=n.getFilesFromFileList(t);n.filesSelected.emit(i)}}e.prototype.componentDidLoad=function(){var e=this;if(this.allowCameraMode){this.checkIfBrowserCanTakeSnapshots().then((function(t){return e.canTakeSnapshots=t}))}if(this.allowedExtensions!=undefined&&this.allowedExtensions.length>0){var t=this.allowedExtensions.map((function(e){return"."+e}));var i=t.join(",");this.fileInput.accept=i}};e.prototype.checkIfBrowserCanTakeSnapshots=function(){return new Promise((function(e){var t=navigator.mediaDevices;if(t==undefined||t.enumerateDevices==undefined){e(false)}t.enumerateDevices().then((function(t){var i=t.some((function(e){return e.kind=="videoinput"}));e(i)}))}))};e.prototype.getFilesFromFileList=function(e){var t=[];for(var i=0;i<e.length;i++){var n=e[i];t.push(n)}return t};e.prototype.handleUploadButton=function(e){var t=this.getFilesFromFileList(e.files);this.filesSelected.emit(t)};e.prototype.hasInvalidExtensions=function(e){var t=false;for(var i=0;i<e.length;i++){var n=e[i];var r=/(?:\.([^.]+))?$/;var o=r.exec(n.name)[1];if(o==undefined){t=true}if(this.allowedExtensions!=undefined&&!this.allowedExtensions.includes(o)){t=true}return t}};e.prototype.takeSnapshot=function(){var e=this;this.takingPicture=true;navigator.mediaDevices.getUserMedia({video:true,audio:false}).then((function(t){t;e.videoPreview.srcObject=t;e.videoPreview.play().then((function(){e.videoSettings=t.getVideoTracks()[0].getSettings()}))})).catch((function(e){return alert(e)}))};e.prototype.applySnapshot=function(){var e=this;var t=document.createElement("canvas");var i=t.getContext("2d");t.width=this.videoSettings.width;t.height=this.videoSettings.height;i.drawImage(this.videoPreview,0,0);t.toBlob((function(t){var i=new File([t],"image.jpeg",{type:"image/jpeg"});e.takingPicture=false;var n=[i];e.filesSelected.emit(n)}),"image/jpeg",this.captureQuality)};e.prototype.render=function(){var e=this;var t,i,o,a,s,l;return n(r,{ref:function(t){return e.dropzone=t},class:"dropzone",onDragOver:this.handleDragOver,onDrop:this.handleDrop,onDragLeave:function(){return e.dropzone.classList.remove("dropping")}},!this.takingPicture&&[n("p",null,(t=this.resx)===null||t===void 0?void 0:t.dragAndDropFile),n("p",null,"- ",(i=this.resx)===null||i===void 0?void 0:i.or," -"),n("label",{class:"upload-file"},n("input",{type:"file",ref:function(t){return e.fileInput=t},onChange:function(t){return e.handleUploadButton(t.target)}}),n("span",null,n("svg",{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"},n("g",null,n("rect",{fill:"none",height:"24",width:"24"})),n("g",null,n("path",{d:"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z"}))))," ",(o=this.resx)===null||o===void 0?void 0:o.uploadFile),this.canTakeSnapshots&&[n("p",null,"- ",(a=this.resx)===null||a===void 0?void 0:a.or," -"),n("button",{onClick:function(){return e.takeSnapshot()}},n("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},n("path",{d:"M0 0h24v24H0z",fill:"none"}),n("circle",{cx:"12",cy:"12",r:"3.2"}),n("path",{d:"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"})),(s=this.resx)===null||s===void 0?void 0:s.takePicture)]],this.takingPicture&&n("div",{class:"video-preview"},n("video",{ref:function(t){return e.videoPreview=t}}),n("button",{onClick:function(){return e.applySnapshot()}},n("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},n("path",{d:"M0 0h24v24H0z",fill:"none"}),n("circle",{cx:"12",cy:"12",r:"3.2"}),n("path",{d:"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"}))," ",(l=this.resx)===null||l===void 0?void 0:l.capture)))};return e}());a.style=o}}}));
 //# sourceMappingURL=dnn-dropzone.system.entry.js.map

package/dist/dnn/dnn-image-cropper.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-3e56049b.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-b5a28c1d.js';
 import { g as getMovementFromEvent } from './mouseUtilities-817973b4.js';
 
 var CornerType;