@dnncommunity/dnn-elements 0.14.0-beta.9 → 0.14.1

package/dist/dnn/dnn-treeview-item.entry.js

@@ -7,14 +7,25 @@ let DnnTreeviewItem = class {
     registerInstance(this, hostRef);
     this.userExpanded = createEvent(this, "userExpanded", 3);
     this.userCollapsed = createEvent(this, "userCollapsed", 3);
-    /** Defines if the current node is expanded  */
+    /** Defines if the current node is expanded.  */
     this.expanded = false;
+    /** Manages state for whether or not item has children. */
     this.hasChildren = false;
   }
+  /** Watch expanded Prop */
+  watchExpanded(expanded) {
+    if (expanded) {
+      this.expander.classList.add("expanded");
+      this.collapsible.expanded = true;
+      return;
+    }
+    this.expander.classList.remove("expanded");
+    this.collapsible.expanded = false;
+  }
   componentDidLoad() {
     requestAnimationFrame(() => {
-      const children = this.childrenElement.children[0];
-      const count = children.assignedElements().length;
+      const child = this.childElement.children[0];
+      const count = child.assignedElements().length;
       if (count > 0) {
         this.hasChildren = true;
       }
@@ -39,9 +50,12 @@ let DnnTreeviewItem = class {
   }
   render() {
     return (h(Host, null, h("div", { class: "expander", ref: el => this.expander = el }, this.hasChildren &&
-      h("button", { onClick: () => this.toggleCollapse() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M10 17l5-5-5-5v10z" }), h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))), h("div", { class: "item" }, h("div", { class: "item-slot" }, h("slot", null)), h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded }, h("div", { ref: el => this.childrenElement = el }, h("slot", { name: "children" }))))));
+      h("button", { onClick: () => this.toggleCollapse() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M10 17l5-5-5-5v10z" }), h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))), h("div", { class: "item" }, h("div", { class: "item-slot" }, h("slot", null)), h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded }, h("div", { ref: el => this.childElement = el }, h("slot", { name: "children" }))))));
   }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "expanded": ["watchExpanded"]
+  }; }
 };
 DnnTreeviewItem.style = dnnTreeviewItemCss;
 

package/dist/dnn/dnn-treeview-item.entry.js.map

@@ -1 +1 @@
-{"file":"dnn-treeview-item.entry.esm.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,u6BAAu6B;;ICOr7B,eAAe;EAL5B;;;;;IAYyB,aAAQ,GAAY,KAAK,CAAC;IAQxC,gBAAW,GAAY,KAAK,CAAC;GA2DvC;EAtDC,gBAAgB;IACd,qBAAqB,CAAC;MACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAoB,CAAC;MACrE,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAA;MAChD,IAAI,KAAK,GAAG,CAAC,EAAC;QACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;OACzB;MACD,IAAI,IAAI,CAAC,QAAQ,EAAC;QAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;QAClC,UAAU,CAAC;UACT,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;SAClC,EAAE,GAAG,CAAC,CAAC;OACT;KACF,CAAC,CAAC;GACJ;EAEO,cAAc;IACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;MACzB,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACf,cACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAEpC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,oBAAoB,GAAE,EAAA,YAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACN,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,WAAW,IACpB,eAAa,CACT,EACN,uBAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxE,WAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,eAAe,GAAG,EAAE,IACvC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","./src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  overflow: visible;\r\n}\r\n.expander{\r\n  width: 24px;\r\n  height: 24px;\r\n  button{\r\n    transition: all 150ms ease-in-out;\r\n    background-color:transparent;\r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    height: 1em;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    position: relative;\r\n    top: 2px;\r\n    svg{\r\n      :first-child{\r\n        transition: all 150ms ease-in-out;\r\n        fill: white;\r\n        stroke: black\r\n      }\r\n    }\r\n  }\r\n  &.expanded{\r\n    button{\r\n      transform: rotate(45deg);\r\n      svg{\r\n        :first-child{\r\n          fill: black;\r\n          stroke: black;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\ndiv.item{\r\n  .item-slot{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.25em;\r\n    min-height: 24px;\r\n  }\r\n  div.children{\r\n    overflow: hidden;\r\n    height:0;\r\n    transition: all 150ms ease-in-out;\r\n  }\r\n}","import { Component, Host, h, Prop, State, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-treeview-item',\r\n  styleUrl: 'dnn-treeview-item.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnTreeviewItem {\r\n  \r\n  private expander!: HTMLDivElement;\r\n\r\n  @Element() el!: HTMLDnnTreeviewItemElement;\r\n  \r\n  /** Defines if the current node is expanded  */\r\n  @Prop({mutable: true}) expanded: boolean = false;\r\n\r\n  /** Fires when the user expands a node. */\r\n  @Event({bubbles: false}) userExpanded: EventEmitter<void>;\r\n\r\n  /** Fires when the user collapses a node. */\r\n  @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\r\n\r\n  @State() hasChildren: boolean = false;\r\n  \r\n  private childrenElement!: HTMLDivElement;\r\n  private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      const children = this.childrenElement.children[0] as HTMLSlotElement;\r\n      const count = children.assignedElements().length\r\n      if (count > 0){\r\n        this.hasChildren = true;\r\n      }\r\n      if (this.expanded){\r\n        this.expander.classList.add(\"expanded\");\r\n        this.collapsible.expanded = false;\r\n        setTimeout(() => {\r\n          this.collapsible.expanded = true;\r\n        }, 300);\r\n      }\r\n    });\r\n  }\r\n\r\n  private toggleCollapse(): void {\r\n    this.expanded = !this.expanded;\r\n    if (this.expanded){\r\n      this.expander.classList.add(\"expanded\");\r\n      this.userExpanded.emit();\r\n      return;\r\n    }\r\n\r\n    this.expander.classList.remove(\"expanded\");\r\n    this.userCollapsed.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"expander\" ref={el => this.expander = el}>\r\n          {this.hasChildren &&\r\n            <button\r\n              onClick={() => this.toggleCollapse()}\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=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"item\">\r\n          <div class=\"item-slot\">\r\n            <slot></slot>\r\n          </div>\r\n          <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n            <div ref={el => this.childrenElement = el}>\r\n              <slot name=\"children\"></slot>\r\n            </div>\r\n          </dnn-collapsible>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n  state: \"expanded\" | \"collapsed\";\r\n  height: number;\r\n}"],"version":3}
+{"file":"dnn-treeview-item.entry.esm.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,u6BAAu6B;;ICOr7B,eAAe;EAL5B;;;;;IAYwC,aAAQ,GAAY,KAAK,CAAC;;IASvD,gBAAW,GAAY,KAAK,CAAC;GAyEvC;;EArEC,aAAa,CAAC,QAAiB;IAC7B,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;MACjC,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;GACnC;EAMD,gBAAgB;IACd,qBAAqB,CAAC;MACpB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAoB,CAAC;MAC/D,MAAM,KAAK,GAAG,KAAK,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAA;MAC7C,IAAI,KAAK,GAAG,CAAC,EAAC;QACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;OACzB;MACD,IAAI,IAAI,CAAC,QAAQ,EAAC;QAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;QAClC,UAAU,CAAC;UACT,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;SAClC,EAAE,GAAG,CAAC,CAAC;OACT;KACF,CAAC,CAAC;GACJ;EAEO,cAAc;IACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;MACzB,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACf,cACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAEpC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,oBAAoB,GAAE,EAAA,YAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACN,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,WAAW,IACpB,eAAa,CACT,EACN,uBAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxE,WAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,IACpC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","./src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  overflow: visible;\r\n}\r\n.expander{\r\n  width: 24px;\r\n  height: 24px;\r\n  button{\r\n    transition: all 150ms ease-in-out;\r\n    background-color:transparent;\r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    height: 1em;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    position: relative;\r\n    top: 2px;\r\n    svg{\r\n      :first-child{\r\n        transition: all 150ms ease-in-out;\r\n        fill: white;\r\n        stroke: black\r\n      }\r\n    }\r\n  }\r\n  &.expanded{\r\n    button{\r\n      transform: rotate(45deg);\r\n      svg{\r\n        :first-child{\r\n          fill: black;\r\n          stroke: black;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\ndiv.item{\r\n  .item-slot{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.25em;\r\n    min-height: 24px;\r\n  }\r\n  div.children{\r\n    overflow: hidden;\r\n    height:0;\r\n    transition: all 150ms ease-in-out;\r\n  }\r\n}","import { Component, Host, h, Prop, State, Element, Event, EventEmitter, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-treeview-item',\r\n  styleUrl: 'dnn-treeview-item.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnTreeviewItem {\r\n  \r\n  private expander!: HTMLDivElement;\r\n\r\n  @Element() el!: HTMLDnnTreeviewItemElement;\r\n  \r\n  /** Defines if the current node is expanded.  */\r\n  @Prop({mutable: true, reflect: true}) expanded: boolean = false;\r\n\r\n  /** Fires when the user expands a node. */\r\n  @Event({bubbles: false}) userExpanded: EventEmitter<void>;\r\n\r\n  /** Fires when the user collapses a node. */\r\n  @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\r\n\r\n  /** Manages state for whether or not item has children. */\r\n  @State() hasChildren: boolean = false;\r\n\r\n  /** Watch expanded Prop */\r\n  @Watch('expanded')\r\n  watchExpanded(expanded: boolean) {\r\n    if (expanded) {\r\n      this.expander.classList.add(\"expanded\");\r\n      this.collapsible.expanded = true;\r\n      return;\r\n    }\r\n    \r\n    this.expander.classList.remove(\"expanded\");\r\n    this.collapsible.expanded = false;\r\n  }\r\n      \r\n  \r\n  private childElement!: HTMLDivElement;\r\n  private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      const child = this.childElement.children[0] as HTMLSlotElement;\r\n      const count = child.assignedElements().length\r\n      if (count > 0){\r\n        this.hasChildren = true;\r\n      }\r\n      if (this.expanded){\r\n        this.expander.classList.add(\"expanded\");\r\n        this.collapsible.expanded = false;\r\n        setTimeout(() => {\r\n          this.collapsible.expanded = true;\r\n        }, 300);\r\n      }\r\n    });\r\n  }\r\n\r\n  private toggleCollapse(): void {\r\n    this.expanded = !this.expanded;\r\n    if (this.expanded){\r\n      this.expander.classList.add(\"expanded\");\r\n      this.userExpanded.emit();\r\n      return;\r\n    }\r\n\r\n    this.expander.classList.remove(\"expanded\");\r\n    this.userCollapsed.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"expander\" ref={el => this.expander = el}>\r\n          {this.hasChildren &&\r\n            <button\r\n              onClick={() => this.toggleCollapse()}\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=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"item\">\r\n          <div class=\"item-slot\">\r\n            <slot></slot>\r\n          </div>\r\n          <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n            <div ref={el => this.childElement = el}>\r\n              <slot name=\"children\"></slot>\r\n            </div>\r\n          </dnn-collapsible>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n  state: \"expanded\" | \"collapsed\";\r\n  height: number;\r\n}"],"version":3}

package/dist/dnn/dnn-treeview-item.system.entry.js

@@ -1,2 +1,2 @@
-System.register(["./index-a3a55419.system.js"],(function(e){"use strict";var t,n,i,s,a;return{setters:[function(e){t=e.r;n=e.e;i=e.h;s=e.f;a=e.g}],execute:function(){var l=":host{display:-ms-flexbox;display:flex;overflow:visible}.expander{width:24px;height:24px}.expander button{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;height:1em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25em;min-height:24px}div.item div.children{overflow:hidden;height:0;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}";var r=e("dnn_treeview_item",function(){function e(e){t(this,e);this.userExpanded=n(this,"userExpanded",3);this.userCollapsed=n(this,"userCollapsed",3);this.expanded=false;this.hasChildren=false}e.prototype.componentDidLoad=function(){var e=this;requestAnimationFrame((function(){var t=e.childrenElement.children[0];var n=t.assignedElements().length;if(n>0){e.hasChildren=true}if(e.expanded){e.expander.classList.add("expanded");e.collapsible.expanded=false;setTimeout((function(){e.collapsible.expanded=true}),300)}}))};e.prototype.toggleCollapse=function(){this.expanded=!this.expanded;if(this.expanded){this.expander.classList.add("expanded");this.userExpanded.emit();return}this.expander.classList.remove("expanded");this.userCollapsed.emit()};e.prototype.render=function(){var e=this;return i(s,null,i("div",{class:"expander",ref:function(t){return e.expander=t}},this.hasChildren&&i("button",{onClick:function(){return e.toggleCollapse()}},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M10 17l5-5-5-5v10z"}),i("path",{d:"M0 24V0h24v24H0z",fill:"none"})))),i("div",{class:"item"},i("div",{class:"item-slot"},i("slot",null)),i("dnn-collapsible",{ref:function(t){return e.collapsible=t},expanded:this.expanded},i("div",{ref:function(t){return e.childrenElement=t}},i("slot",{name:"children"})))))};Object.defineProperty(e.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return e}());r.style=l}}}));
+System.register(["./index-a3a55419.system.js"],(function(e){"use strict";var t,n,i,s,a;return{setters:[function(e){t=e.r;n=e.e;i=e.h;s=e.f;a=e.g}],execute:function(){var r=":host{display:-ms-flexbox;display:flex;overflow:visible}.expander{width:24px;height:24px}.expander button{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;height:1em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25em;min-height:24px}div.item div.children{overflow:hidden;height:0;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}";var l=e("dnn_treeview_item",function(){function e(e){t(this,e);this.userExpanded=n(this,"userExpanded",3);this.userCollapsed=n(this,"userCollapsed",3);this.expanded=false;this.hasChildren=false}e.prototype.watchExpanded=function(e){if(e){this.expander.classList.add("expanded");this.collapsible.expanded=true;return}this.expander.classList.remove("expanded");this.collapsible.expanded=false};e.prototype.componentDidLoad=function(){var e=this;requestAnimationFrame((function(){var t=e.childElement.children[0];var n=t.assignedElements().length;if(n>0){e.hasChildren=true}if(e.expanded){e.expander.classList.add("expanded");e.collapsible.expanded=false;setTimeout((function(){e.collapsible.expanded=true}),300)}}))};e.prototype.toggleCollapse=function(){this.expanded=!this.expanded;if(this.expanded){this.expander.classList.add("expanded");this.userExpanded.emit();return}this.expander.classList.remove("expanded");this.userCollapsed.emit()};e.prototype.render=function(){var e=this;return i(s,null,i("div",{class:"expander",ref:function(t){return e.expander=t}},this.hasChildren&&i("button",{onClick:function(){return e.toggleCollapse()}},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M10 17l5-5-5-5v10z"}),i("path",{d:"M0 24V0h24v24H0z",fill:"none"})))),i("div",{class:"item"},i("div",{class:"item-slot"},i("slot",null)),i("dnn-collapsible",{ref:function(t){return e.collapsible=t},expanded:this.expanded},i("div",{ref:function(t){return e.childElement=t}},i("slot",{name:"children"})))))};Object.defineProperty(e.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{expanded:["watchExpanded"]}},enumerable:false,configurable:true});return e}());l.style=r}}}));
 //# sourceMappingURL=dnn-treeview-item.system.entry.js.map

package/dist/dnn/dnn-treeview-item.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"names":["dnnTreeviewItemCss","DnnTreeviewItem","exports","class_1","hostRef","this","expanded","hasChildren","prototype","componentDidLoad","_this","requestAnimationFrame","children","childrenElement","count","assignedElements","length","expander","classList","add","collapsible","setTimeout","toggleCollapse","userExpanded","emit","remove","userCollapsed","render","h","Host","class","ref","el","onClick","xmlns","height","viewBox","width","fill","d","name"],"mappings":"sKAAA,IAAMA,EAAqB,46BCOdC,EAAeC,EAAA,oBAAA,WAL5B,SAAAC,EAAAC,qGAYyBC,KAAAC,SAAoB,MAQlCD,KAAAE,YAAuB,MAKhCJ,EAAAK,UAAAC,iBAAA,WAAA,IAAAC,EAAAL,KACEM,uBAAsB,WACpB,IAAMC,EAAWF,EAAKG,gBAAgBD,SAAS,GAC/C,IAAME,EAAQF,EAASG,mBAAmBC,OAC1C,GAAIF,EAAQ,EAAE,CACZJ,EAAKH,YAAc,KAErB,GAAIG,EAAKJ,SAAS,CAChBI,EAAKO,SAASC,UAAUC,IAAI,YAC5BT,EAAKU,YAAYd,SAAW,MAC5Be,YAAW,WACTX,EAAKU,YAAYd,SAAW,OAC3B,UAKDH,EAAAK,UAAAc,eAAA,WACNjB,KAAKC,UAAYD,KAAKC,SACtB,GAAID,KAAKC,SAAS,CAChBD,KAAKY,SAASC,UAAUC,IAAI,YAC5Bd,KAAKkB,aAAaC,OAClB,OAGFnB,KAAKY,SAASC,UAAUO,OAAO,YAC/BpB,KAAKqB,cAAcF,QAGrBrB,EAAAK,UAAAmB,OAAA,WAAA,IAAAjB,EAAAL,KACE,OACEuB,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKE,MAAM,WAAWC,IAAK,SAAAC,GAAM,OAAAtB,EAAKO,SAAWe,IAC9C3B,KAAKE,aACJqB,EAAA,SAAA,CACEK,QAAS,WAAM,OAAAvB,EAAKY,mBAEpBM,EAAA,MAAA,CAAKM,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUV,EAAA,OAAA,CAAMW,EAAE,uBAAsBX,EAAA,OAAA,CAAMW,EAAE,mBAAmBD,KAAK,YAI1KV,EAAA,MAAA,CAAKE,MAAM,QACTF,EAAA,MAAA,CAAKE,MAAM,aACTF,EAAA,OAAA,OAEFA,EAAA,kBAAA,CAAiBG,IAAK,SAAAC,GAAM,OAAAtB,EAAKU,YAAcY,GAAI1B,SAAUD,KAAKC,UAChEsB,EAAA,MAAA,CAAKG,IAAK,SAAAC,GAAM,OAAAtB,EAAKG,gBAAkBmB,IACrCJ,EAAA,OAAA,CAAMY,KAAK,uIAnEG","sourcesContent":[":host {\r\n  display: flex;\r\n  overflow: visible;\r\n}\r\n.expander{\r\n  width: 24px;\r\n  height: 24px;\r\n  button{\r\n    transition: all 150ms ease-in-out;\r\n    background-color:transparent;\r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    height: 1em;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    position: relative;\r\n    top: 2px;\r\n    svg{\r\n      :first-child{\r\n        transition: all 150ms ease-in-out;\r\n        fill: white;\r\n        stroke: black\r\n      }\r\n    }\r\n  }\r\n  &.expanded{\r\n    button{\r\n      transform: rotate(45deg);\r\n      svg{\r\n        :first-child{\r\n          fill: black;\r\n          stroke: black;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\ndiv.item{\r\n  .item-slot{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.25em;\r\n    min-height: 24px;\r\n  }\r\n  div.children{\r\n    overflow: hidden;\r\n    height:0;\r\n    transition: all 150ms ease-in-out;\r\n  }\r\n}","import { Component, Host, h, Prop, State, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-treeview-item',\r\n  styleUrl: 'dnn-treeview-item.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnTreeviewItem {\r\n  \r\n  private expander!: HTMLDivElement;\r\n\r\n  @Element() el!: HTMLDnnTreeviewItemElement;\r\n  \r\n  /** Defines if the current node is expanded  */\r\n  @Prop({mutable: true}) expanded: boolean = false;\r\n\r\n  /** Fires when the user expands a node. */\r\n  @Event({bubbles: false}) userExpanded: EventEmitter<void>;\r\n\r\n  /** Fires when the user collapses a node. */\r\n  @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\r\n\r\n  @State() hasChildren: boolean = false;\r\n  \r\n  private childrenElement!: HTMLDivElement;\r\n  private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      const children = this.childrenElement.children[0] as HTMLSlotElement;\r\n      const count = children.assignedElements().length\r\n      if (count > 0){\r\n        this.hasChildren = true;\r\n      }\r\n      if (this.expanded){\r\n        this.expander.classList.add(\"expanded\");\r\n        this.collapsible.expanded = false;\r\n        setTimeout(() => {\r\n          this.collapsible.expanded = true;\r\n        }, 300);\r\n      }\r\n    });\r\n  }\r\n\r\n  private toggleCollapse(): void {\r\n    this.expanded = !this.expanded;\r\n    if (this.expanded){\r\n      this.expander.classList.add(\"expanded\");\r\n      this.userExpanded.emit();\r\n      return;\r\n    }\r\n\r\n    this.expander.classList.remove(\"expanded\");\r\n    this.userCollapsed.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"expander\" ref={el => this.expander = el}>\r\n          {this.hasChildren &&\r\n            <button\r\n              onClick={() => this.toggleCollapse()}\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=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"item\">\r\n          <div class=\"item-slot\">\r\n            <slot></slot>\r\n          </div>\r\n          <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n            <div ref={el => this.childrenElement = el}>\r\n              <slot name=\"children\"></slot>\r\n            </div>\r\n          </dnn-collapsible>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n  state: \"expanded\" | \"collapsed\";\r\n  height: number;\r\n}"]}
+{"version":3,"sources":["src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"names":["dnnTreeviewItemCss","DnnTreeviewItem","exports","class_1","hostRef","this","expanded","hasChildren","prototype","watchExpanded","expander","classList","add","collapsible","remove","componentDidLoad","_this","requestAnimationFrame","child","childElement","children","count","assignedElements","length","setTimeout","toggleCollapse","userExpanded","emit","userCollapsed","render","h","Host","class","ref","el","onClick","xmlns","height","viewBox","width","fill","d","name"],"mappings":"sKAAA,IAAMA,EAAqB,46BCOdC,EAAeC,EAAA,oBAAA,WAL5B,SAAAC,EAAAC,qGAYwCC,KAAAC,SAAoB,MASjDD,KAAAE,YAAuB,MAIhCJ,EAAAK,UAAAC,cAAA,SAAcH,GACZ,GAAIA,EAAU,CACZD,KAAKK,SAASC,UAAUC,IAAI,YAC5BP,KAAKQ,YAAYP,SAAW,KAC5B,OAGFD,KAAKK,SAASC,UAAUG,OAAO,YAC/BT,KAAKQ,YAAYP,SAAW,OAO9BH,EAAAK,UAAAO,iBAAA,WAAA,IAAAC,EAAAX,KACEY,uBAAsB,WACpB,IAAMC,EAAQF,EAAKG,aAAaC,SAAS,GACzC,IAAMC,EAAQH,EAAMI,mBAAmBC,OACvC,GAAIF,EAAQ,EAAE,CACZL,EAAKT,YAAc,KAErB,GAAIS,EAAKV,SAAS,CAChBU,EAAKN,SAASC,UAAUC,IAAI,YAC5BI,EAAKH,YAAYP,SAAW,MAC5BkB,YAAW,WACTR,EAAKH,YAAYP,SAAW,OAC3B,UAKDH,EAAAK,UAAAiB,eAAA,WACNpB,KAAKC,UAAYD,KAAKC,SACtB,GAAID,KAAKC,SAAS,CAChBD,KAAKK,SAASC,UAAUC,IAAI,YAC5BP,KAAKqB,aAAaC,OAClB,OAGFtB,KAAKK,SAASC,UAAUG,OAAO,YAC/BT,KAAKuB,cAAcD,QAGrBxB,EAAAK,UAAAqB,OAAA,WAAA,IAAAb,EAAAX,KACE,OACEyB,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKE,MAAM,WAAWC,IAAK,SAAAC,GAAM,OAAAlB,EAAKN,SAAWwB,IAC9C7B,KAAKE,aACJuB,EAAA,SAAA,CACEK,QAAS,WAAM,OAAAnB,EAAKS,mBAEpBK,EAAA,MAAA,CAAKM,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUV,EAAA,OAAA,CAAMW,EAAE,uBAAsBX,EAAA,OAAA,CAAMW,EAAE,mBAAmBD,KAAK,YAI1KV,EAAA,MAAA,CAAKE,MAAM,QACTF,EAAA,MAAA,CAAKE,MAAM,aACTF,EAAA,OAAA,OAEFA,EAAA,kBAAA,CAAiBG,IAAK,SAAAC,GAAM,OAAAlB,EAAKH,YAAcqB,GAAI5B,SAAUD,KAAKC,UAChEwB,EAAA,MAAA,CAAKG,IAAK,SAAAC,GAAM,OAAAlB,EAAKG,aAAee,IAClCJ,EAAA,OAAA,CAAMY,KAAK,mQAlFG","sourcesContent":[":host {\r\n  display: flex;\r\n  overflow: visible;\r\n}\r\n.expander{\r\n  width: 24px;\r\n  height: 24px;\r\n  button{\r\n    transition: all 150ms ease-in-out;\r\n    background-color:transparent;\r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    height: 1em;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    position: relative;\r\n    top: 2px;\r\n    svg{\r\n      :first-child{\r\n        transition: all 150ms ease-in-out;\r\n        fill: white;\r\n        stroke: black\r\n      }\r\n    }\r\n  }\r\n  &.expanded{\r\n    button{\r\n      transform: rotate(45deg);\r\n      svg{\r\n        :first-child{\r\n          fill: black;\r\n          stroke: black;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\ndiv.item{\r\n  .item-slot{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.25em;\r\n    min-height: 24px;\r\n  }\r\n  div.children{\r\n    overflow: hidden;\r\n    height:0;\r\n    transition: all 150ms ease-in-out;\r\n  }\r\n}","import { Component, Host, h, Prop, State, Element, Event, EventEmitter, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-treeview-item',\r\n  styleUrl: 'dnn-treeview-item.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnTreeviewItem {\r\n  \r\n  private expander!: HTMLDivElement;\r\n\r\n  @Element() el!: HTMLDnnTreeviewItemElement;\r\n  \r\n  /** Defines if the current node is expanded.  */\r\n  @Prop({mutable: true, reflect: true}) expanded: boolean = false;\r\n\r\n  /** Fires when the user expands a node. */\r\n  @Event({bubbles: false}) userExpanded: EventEmitter<void>;\r\n\r\n  /** Fires when the user collapses a node. */\r\n  @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\r\n\r\n  /** Manages state for whether or not item has children. */\r\n  @State() hasChildren: boolean = false;\r\n\r\n  /** Watch expanded Prop */\r\n  @Watch('expanded')\r\n  watchExpanded(expanded: boolean) {\r\n    if (expanded) {\r\n      this.expander.classList.add(\"expanded\");\r\n      this.collapsible.expanded = true;\r\n      return;\r\n    }\r\n    \r\n    this.expander.classList.remove(\"expanded\");\r\n    this.collapsible.expanded = false;\r\n  }\r\n      \r\n  \r\n  private childElement!: HTMLDivElement;\r\n  private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      const child = this.childElement.children[0] as HTMLSlotElement;\r\n      const count = child.assignedElements().length\r\n      if (count > 0){\r\n        this.hasChildren = true;\r\n      }\r\n      if (this.expanded){\r\n        this.expander.classList.add(\"expanded\");\r\n        this.collapsible.expanded = false;\r\n        setTimeout(() => {\r\n          this.collapsible.expanded = true;\r\n        }, 300);\r\n      }\r\n    });\r\n  }\r\n\r\n  private toggleCollapse(): void {\r\n    this.expanded = !this.expanded;\r\n    if (this.expanded){\r\n      this.expander.classList.add(\"expanded\");\r\n      this.userExpanded.emit();\r\n      return;\r\n    }\r\n\r\n    this.expander.classList.remove(\"expanded\");\r\n    this.userCollapsed.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"expander\" ref={el => this.expander = el}>\r\n          {this.hasChildren &&\r\n            <button\r\n              onClick={() => this.toggleCollapse()}\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=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"item\">\r\n          <div class=\"item-slot\">\r\n            <slot></slot>\r\n          </div>\r\n          <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n            <div ref={el => this.childElement = el}>\r\n              <slot name=\"children\"></slot>\r\n            </div>\r\n          </dnn-collapsible>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n  state: \"expanded\" | \"collapsed\";\r\n  height: number;\r\n}"]}

package/dist/dnn/dnn-vertical-splitview.entry.js

@@ -45,26 +45,32 @@ let DnnVerticalSplitview = class {
   }
   componentDidLoad() {
     requestAnimationFrame(() => {
-      const fullWidth = this.element.getBoundingClientRect().width;
-      this.leftWidth = fullWidth * this.splitWidthPercentage / 100;
-      this.rightWidth = fullWidth - this.leftWidth;
-      this.widthChanged.emit(this.splitWidthPercentage);
+      this.resizeObserver = new ResizeObserver(() => {
+        const fullWidth = this.element.getBoundingClientRect().width;
+        this.leftWidth = fullWidth * this.splitWidthPercentage / 100;
+        this.rightWidth = fullWidth - this.leftWidth;
+        this.widthChanged.emit(this.splitWidthPercentage);
+      });
+      this.resizeObserver.observe(this.element);
     });
   }
   handleMouseDown(event) {
     event.preventDefault();
     const handleDrag = (ev) => {
-      let { movementX } = getMovementFromEvent(ev, this.previousTouch);
-      let fullWidth = this.element.getBoundingClientRect().width;
-      let newLeft = this.leftWidth + movementX;
-      if (newLeft < 0) {
-        newLeft = 0;
-      }
-      if (newLeft > fullWidth) {
-        newLeft = fullWidth;
-      }
-      this.leftWidth = newLeft;
-      this.rightWidth = fullWidth - newLeft;
+      requestAnimationFrame(() => {
+        let fullWidth = this.element.getBoundingClientRect().width;
+        let { movementX } = getMovementFromEvent(ev, this.previousTouch);
+        let newLeft = this.leftWidth + movementX;
+        if (newLeft < 0) {
+          newLeft = 0;
+        }
+        if (newLeft > fullWidth) {
+          newLeft = fullWidth;
+        }
+        this.leftWidth = newLeft;
+        this.rightWidth = fullWidth - newLeft;
+        this.splitWidthPercentage = this.leftWidth / fullWidth * 100;
+      });
     };
     const handleDragFinished = () => {
       document.removeEventListener("mousemove", handleDrag);

package/dist/dnn/dnn-vertical-splitview.entry.js.map

@@ -1 +1 @@
-{"file":"dnn-vertical-splitview.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","./src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: stretch;\r\n  margin: 0 auto;\r\n  position: relative;\r\n\r\n  /** @prop --left-pane-background-color:  Allows customizing the left pane background-color */\r\n  --left-pane-background-color: transparent;\r\n\r\n  /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n  --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n  border: none;\r\n  margin:0;\r\n  padding:0;\r\n  cursor: ew-resize;\r\n  position: absolute;\r\n  height: 100%;\r\n  background-color: transparent;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n}\r\n\r\n\r\n.pane{\r\n  overflow-y: auto;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n  &.left{\r\n    background-color: var(--left-pane-background-color);\r\n  }\r\n  &.right{\r\n    background-color: var(--right-pane-background-color);\r\n    flex-grow: 1;\r\n  }\r\n}","import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * @slot default - The split divider control you want to use.\r\n * @slot left - The content of the left pane.\r\n * @slot right - The content of the right pane.\r\n */\r\n@Component({\r\n  tag: 'dnn-vertical-splitview',\r\n  styleUrl: 'dnn-vertical-splitview.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnVerticalSplitview {\r\n\r\n  /** The width of the splitter area. */\r\n  @Prop() splitterWidth = 16;\r\n\r\n  /** The percentage position of the splitter in the container. */\r\n  @Prop() splitWidthPercentage = 30;\r\n  \r\n  private splitter!: HTMLButtonElement;\r\n\r\n  /** Sets the width percentage of the divider */\r\n  @Method()\r\n  async setSplitWidthPercentage(newWidth: number) {\r\n    const panes = this.element.shadowRoot.querySelectorAll(\".pane\");\r\n    requestAnimationFrame(() => {\r\n      panes.forEach(pane => pane.classList.add(\"transition\"));\r\n      this.splitter.classList.add(\"transition\");\r\n      requestAnimationFrame(() => {\r\n        const fullWidth = this.element.getBoundingClientRect().width;\r\n        let newLeft = fullWidth * newWidth / 100;\r\n        if (newLeft < 0){\r\n          newLeft = 0;\r\n        }\r\n        if (newLeft > fullWidth){\r\n          newLeft = fullWidth;\r\n        }\r\n        this.leftWidth = newLeft;\r\n        this.rightWidth = fullWidth - newLeft;\r\n        setTimeout(() => {\r\n          panes.forEach(pane => pane.classList.remove(\"transition\"));\r\n          this.splitter.classList.remove(\"transition\");\r\n        }, 300);\r\n      });\r\n    });\r\n  }\r\n\r\n  /** Gets the current divider position percentage. */\r\n  @Method()\r\n  async getSplitWidthPercentage(){\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    return this.leftWidth / fullWidth;\r\n  }\r\n\r\n  /** Fires when the width of the divider changes. */\r\n  @Event() widthChanged: EventEmitter<number>;\r\n\r\n  @State() leftWidth = 0;\r\n  @State() rightWidth = 0;\r\n\r\n  @Element() element : HTMLDnnVerticalSplitviewElement;\r\n  \r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      const fullWidth = this.element.getBoundingClientRect().width;\r\n      this.leftWidth = fullWidth * this.splitWidthPercentage / 100;\r\n      this.rightWidth = fullWidth - this.leftWidth;\r\n      this.widthChanged.emit(this.splitWidthPercentage);\r\n    });\r\n  }\r\n  \r\n  private previousTouch: Touch;\r\n\r\n  private handleMouseDown(event: MouseEvent | TouchEvent) {\r\n    event.preventDefault();\r\n    const handleDrag = (ev: MouseEvent | TouchEvent) => {\r\n      let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n      let fullWidth = this.element.getBoundingClientRect().width;\r\n      let newLeft = this.leftWidth + movementX;\r\n      if (newLeft < 0){\r\n        newLeft = 0;\r\n      }\r\n      if (newLeft > fullWidth){\r\n        newLeft = fullWidth;\r\n      }\r\n      this.leftWidth = newLeft;\r\n      this.rightWidth = fullWidth - newLeft;\r\n    }\r\n    const handleDragFinished = () => {\r\n      document.removeEventListener(\"mousemove\", handleDrag);\r\n      document.removeEventListener(\"touchmove\", handleDrag);\r\n      const fullWidth = this.element.getBoundingClientRect().width;\r\n      const newPercentage = this.leftWidth / fullWidth * 100;\r\n      this.widthChanged.emit(newPercentage);\r\n    };\r\n    document.addEventListener(\"mouseup\", handleDragFinished);\r\n    document.addEventListener(\"touchend\", handleDragFinished);\r\n    document.addEventListener(\"mousemove\", handleDrag);\r\n    document.addEventListener(\"touchmove\", handleDrag);\r\n  }\r\n\r\n  private handleKeyDown(e: KeyboardEvent): void {\r\n    let movementX = 0;\r\n    switch (e.key) {\r\n      case \"ArrowLeft\":\r\n        movementX = -10;\r\n        break;\r\n      case \"ArrowRight\":\r\n        movementX = 10;\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n    if (e.shiftKey){\r\n      movementX = movementX * 10;\r\n    }\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    let newLeft = this.leftWidth + movementX;\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newLeft > fullWidth){\r\n      newLeft = fullWidth;\r\n    }\r\n    this.leftWidth = newLeft;\r\n    this.rightWidth = fullWidth - this.leftWidth;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n          <div class=\"left pane\" style={{\r\n            width: `${this.leftWidth}px`,\r\n            }}>\r\n            <slot name=\"left\"></slot>\r\n          </div>\r\n          <button\r\n            onMouseDown={e => this.handleMouseDown(e)}\r\n            onTouchStart={e => this.handleMouseDown(e)}\r\n            onKeyDown={e => this.handleKeyDown(e)}\r\n            ref={el => this.splitter = el}\r\n            style={{\r\n              minWidth: `${this.splitterWidth.toString()}px`,\r\n              left: `${this.leftWidth - 2}px`,\r\n            }}\r\n          >\r\n            <slot></slot>\r\n          </button>\r\n          <div\r\n            class=\"right pane\"\r\n            style={{\r\n              width: `${this.rightWidth}px`,\r\n            }}>\r\n            <slot name=\"right\"></slot>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dnn-vertical-splitview.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","./src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: stretch;\r\n  margin: 0 auto;\r\n  position: relative;\r\n\r\n  /** @prop --left-pane-background-color:  Allows customizing the left pane background-color */\r\n  --left-pane-background-color: transparent;\r\n\r\n  /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n  --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n  border: none;\r\n  margin:0;\r\n  padding:0;\r\n  cursor: ew-resize;\r\n  position: absolute;\r\n  height: 100%;\r\n  background-color: transparent;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n}\r\n\r\n\r\n.pane{\r\n  overflow-y: auto;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n  &.left{\r\n    background-color: var(--left-pane-background-color);\r\n  }\r\n  &.right{\r\n    background-color: var(--right-pane-background-color);\r\n    flex-grow: 1;\r\n  }\r\n}","import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * @slot default - The split divider control you want to use.\r\n * @slot left - The content of the left pane.\r\n * @slot right - The content of the right pane.\r\n */\r\n@Component({\r\n  tag: 'dnn-vertical-splitview',\r\n  styleUrl: 'dnn-vertical-splitview.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnVerticalSplitview {\r\n\r\n  /** The width of the splitter area. */\r\n  @Prop() splitterWidth = 16;\r\n\r\n  /** The percentage position of the splitter in the container. */\r\n  @Prop({mutable: true}) splitWidthPercentage = 30;\r\n  \r\n  private splitter!: HTMLButtonElement;\r\n\r\n  private resizeObserver: ResizeObserver;\r\n\r\n  /** Sets the width percentage of the divider */\r\n  @Method()\r\n  async setSplitWidthPercentage(newWidth: number) {\r\n    const panes = this.element.shadowRoot.querySelectorAll(\".pane\");\r\n    requestAnimationFrame(() => {\r\n      panes.forEach(pane => pane.classList.add(\"transition\"));\r\n      this.splitter.classList.add(\"transition\");\r\n      requestAnimationFrame(() => {\r\n        const fullWidth = this.element.getBoundingClientRect().width;\r\n        let newLeft = fullWidth * newWidth / 100;\r\n        if (newLeft < 0){\r\n          newLeft = 0;\r\n        }\r\n        if (newLeft > fullWidth){\r\n          newLeft = fullWidth;\r\n        }\r\n        this.leftWidth = newLeft;\r\n        this.rightWidth = fullWidth - newLeft;\r\n        setTimeout(() => {\r\n          panes.forEach(pane => pane.classList.remove(\"transition\"));\r\n          this.splitter.classList.remove(\"transition\");\r\n        }, 300);\r\n      });\r\n    });\r\n  }\r\n\r\n  /** Gets the current divider position percentage. */\r\n  @Method()\r\n  async getSplitWidthPercentage(){\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    return this.leftWidth / fullWidth;\r\n  }\r\n\r\n  /** Fires when the width of the divider changes. */\r\n  @Event() widthChanged: EventEmitter<number>;\r\n\r\n  @State() leftWidth = 0;\r\n  @State() rightWidth = 0;\r\n\r\n  @Element() element : HTMLDnnVerticalSplitviewElement;\r\n  \r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      this.resizeObserver = new ResizeObserver(() => {\r\n        const fullWidth = this.element.getBoundingClientRect().width;\r\n        this.leftWidth = fullWidth * this.splitWidthPercentage / 100;\r\n        this.rightWidth = fullWidth - this.leftWidth;\r\n        this.widthChanged.emit(this.splitWidthPercentage);\r\n      });\r\n      this.resizeObserver.observe(this.element);\r\n    });\r\n  }\r\n  \r\n  private previousTouch: Touch;\r\n\r\n  private handleMouseDown(event: MouseEvent | TouchEvent) {\r\n    event.preventDefault();\r\n    const handleDrag = (ev: MouseEvent | TouchEvent) => {\r\n      requestAnimationFrame(() => {\r\n        let fullWidth = this.element.getBoundingClientRect().width;\r\n        let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n        let newLeft = this.leftWidth + movementX;\r\n        if (newLeft < 0){\r\n          newLeft = 0;\r\n        }\r\n        if (newLeft > fullWidth){\r\n          newLeft = fullWidth;\r\n        }\r\n        this.leftWidth = newLeft;\r\n        this.rightWidth = fullWidth - newLeft;\r\n        this.splitWidthPercentage = this.leftWidth / fullWidth * 100;\r\n      });\r\n    }\r\n    const handleDragFinished = () => {\r\n      document.removeEventListener(\"mousemove\", handleDrag);\r\n      document.removeEventListener(\"touchmove\", handleDrag);\r\n      const fullWidth = this.element.getBoundingClientRect().width;\r\n      const newPercentage = this.leftWidth / fullWidth * 100;\r\n      this.widthChanged.emit(newPercentage);\r\n    };\r\n    document.addEventListener(\"mouseup\", handleDragFinished);\r\n    document.addEventListener(\"touchend\", handleDragFinished);\r\n    document.addEventListener(\"mousemove\", handleDrag);\r\n    document.addEventListener(\"touchmove\", handleDrag);\r\n  }\r\n\r\n  private handleKeyDown(e: KeyboardEvent): void {\r\n    let movementX = 0;\r\n    switch (e.key) {\r\n      case \"ArrowLeft\":\r\n        movementX = -10;\r\n        break;\r\n      case \"ArrowRight\":\r\n        movementX = 10;\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n    if (e.shiftKey){\r\n      movementX = movementX * 10;\r\n    }\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    let newLeft = this.leftWidth + movementX;\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newLeft > fullWidth){\r\n      newLeft = fullWidth;\r\n    }\r\n    this.leftWidth = newLeft;\r\n    this.rightWidth = fullWidth - this.leftWidth;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n          <div class=\"left pane\" style={{\r\n              width: `${this.leftWidth}px`,\r\n            }}>\r\n            <slot name=\"left\"></slot>\r\n          </div>\r\n          <button\r\n            onMouseDown={e => this.handleMouseDown(e)}\r\n            onTouchStart={e => this.handleMouseDown(e)}\r\n            onKeyDown={e => this.handleKeyDown(e)}\r\n            ref={el => this.splitter = el}\r\n            style={{\r\n              minWidth: `${this.splitterWidth.toString()}px`,\r\n              left: `${this.leftWidth - 2}px`,\r\n            }}\r\n          >\r\n            <slot></slot>\r\n          </button>\r\n          <div\r\n            class=\"right pane\"\r\n            style={{\r\n              width: `${this.rightWidth}px`,\r\n            }}>\r\n            <slot name=\"right\"></slot>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/dnn/dnn-vertical-splitview.system.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,i){function r(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function a(t){try{u(i.next(t))}catch(t){o(t)}}function s(t){try{u(i["throw"](t))}catch(t){o(t)}}function u(t){t.done?n(t.value):r(t.value).then(a,s)}u((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){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:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return u([t,e])}}function u(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=e.call(t,n)}catch(t){a=[6,t];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-a3a55419.system.js","./mouseUtilities-e7e4e78f.system.js"],(function(t){"use strict";var e,n,i,r,o,a;return{setters:[function(t){e=t.r;n=t.e;i=t.h;r=t.f;o=t.g},function(t){a=t.g}],execute:function(){var s=":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;position:relative;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{border:none;margin:0;padding:0;cursor:ew-resize;position:absolute;height:100%;background-color:transparent}button.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";var u=t("dnn_vertical_splitview",function(){function t(t){e(this,t);this.widthChanged=n(this,"widthChanged",7);this.splitterWidth=16;this.splitWidthPercentage=30;this.leftWidth=0;this.rightWidth=0}t.prototype.setSplitWidthPercentage=function(t){return __awaiter(this,void 0,void 0,(function(){var e;var n=this;return __generator(this,(function(i){e=this.element.shadowRoot.querySelectorAll(".pane");requestAnimationFrame((function(){e.forEach((function(t){return t.classList.add("transition")}));n.splitter.classList.add("transition");requestAnimationFrame((function(){var i=n.element.getBoundingClientRect().width;var r=i*t/100;if(r<0){r=0}if(r>i){r=i}n.leftWidth=r;n.rightWidth=i-r;setTimeout((function(){e.forEach((function(t){return t.classList.remove("transition")}));n.splitter.classList.remove("transition")}),300)}))}));return[2]}))}))};t.prototype.getSplitWidthPercentage=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){t=this.element.getBoundingClientRect().width;return[2,this.leftWidth/t]}))}))};t.prototype.componentDidLoad=function(){var t=this;requestAnimationFrame((function(){var e=t.element.getBoundingClientRect().width;t.leftWidth=e*t.splitWidthPercentage/100;t.rightWidth=e-t.leftWidth;t.widthChanged.emit(t.splitWidthPercentage)}))};t.prototype.handleMouseDown=function(t){var e=this;t.preventDefault();var n=function(t){var n=a(t,e.previousTouch).movementX;var i=e.element.getBoundingClientRect().width;var r=e.leftWidth+n;if(r<0){r=0}if(r>i){r=i}e.leftWidth=r;e.rightWidth=i-r};var i=function(){document.removeEventListener("mousemove",n);document.removeEventListener("touchmove",n);var t=e.element.getBoundingClientRect().width;var i=e.leftWidth/t*100;e.widthChanged.emit(i)};document.addEventListener("mouseup",i);document.addEventListener("touchend",i);document.addEventListener("mousemove",n);document.addEventListener("touchmove",n)};t.prototype.handleKeyDown=function(t){var e=0;switch(t.key){case"ArrowLeft":e=-10;break;case"ArrowRight":e=10;break;default:return}if(t.shiftKey){e=e*10}var n=this.element.getBoundingClientRect().width;var i=this.leftWidth+e;if(i<0){i=0}if(i>n){i=n}this.leftWidth=i;this.rightWidth=n-this.leftWidth};t.prototype.render=function(){var t=this;return i(r,null,i("div",{class:"left pane",style:{width:this.leftWidth+"px"}},i("slot",{name:"left"})),i("button",{onMouseDown:function(e){return t.handleMouseDown(e)},onTouchStart:function(e){return t.handleMouseDown(e)},onKeyDown:function(e){return t.handleKeyDown(e)},ref:function(e){return t.splitter=e},style:{minWidth:this.splitterWidth.toString()+"px",left:this.leftWidth-2+"px"}},i("slot",null)),i("div",{class:"right pane",style:{width:this.rightWidth+"px"}},i("slot",{name:"right"})))};Object.defineProperty(t.prototype,"element",{get:function(){return o(this)},enumerable:false,configurable:true});return t}());u.style=s}}}));
+var __awaiter=this&&this.__awaiter||function(t,e,n,i){function r(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function a(t){try{u(i.next(t))}catch(t){o(t)}}function s(t){try{u(i["throw"](t))}catch(t){o(t)}}function u(t){t.done?n(t.value):r(t.value).then(a,s)}u((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){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:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return u([t,e])}}function u(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=e.call(t,n)}catch(t){a=[6,t];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-a3a55419.system.js","./mouseUtilities-e7e4e78f.system.js"],(function(t){"use strict";var e,n,i,r,o,a;return{setters:[function(t){e=t.r;n=t.e;i=t.h;r=t.f;o=t.g},function(t){a=t.g}],execute:function(){var s=":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;position:relative;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{border:none;margin:0;padding:0;cursor:ew-resize;position:absolute;height:100%;background-color:transparent}button.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";var u=t("dnn_vertical_splitview",function(){function t(t){e(this,t);this.widthChanged=n(this,"widthChanged",7);this.splitterWidth=16;this.splitWidthPercentage=30;this.leftWidth=0;this.rightWidth=0}t.prototype.setSplitWidthPercentage=function(t){return __awaiter(this,void 0,void 0,(function(){var e;var n=this;return __generator(this,(function(i){e=this.element.shadowRoot.querySelectorAll(".pane");requestAnimationFrame((function(){e.forEach((function(t){return t.classList.add("transition")}));n.splitter.classList.add("transition");requestAnimationFrame((function(){var i=n.element.getBoundingClientRect().width;var r=i*t/100;if(r<0){r=0}if(r>i){r=i}n.leftWidth=r;n.rightWidth=i-r;setTimeout((function(){e.forEach((function(t){return t.classList.remove("transition")}));n.splitter.classList.remove("transition")}),300)}))}));return[2]}))}))};t.prototype.getSplitWidthPercentage=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){t=this.element.getBoundingClientRect().width;return[2,this.leftWidth/t]}))}))};t.prototype.componentDidLoad=function(){var t=this;requestAnimationFrame((function(){t.resizeObserver=new ResizeObserver((function(){var e=t.element.getBoundingClientRect().width;t.leftWidth=e*t.splitWidthPercentage/100;t.rightWidth=e-t.leftWidth;t.widthChanged.emit(t.splitWidthPercentage)}));t.resizeObserver.observe(t.element)}))};t.prototype.handleMouseDown=function(t){var e=this;t.preventDefault();var n=function(t){requestAnimationFrame((function(){var n=e.element.getBoundingClientRect().width;var i=a(t,e.previousTouch).movementX;var r=e.leftWidth+i;if(r<0){r=0}if(r>n){r=n}e.leftWidth=r;e.rightWidth=n-r;e.splitWidthPercentage=e.leftWidth/n*100}))};var i=function(){document.removeEventListener("mousemove",n);document.removeEventListener("touchmove",n);var t=e.element.getBoundingClientRect().width;var i=e.leftWidth/t*100;e.widthChanged.emit(i)};document.addEventListener("mouseup",i);document.addEventListener("touchend",i);document.addEventListener("mousemove",n);document.addEventListener("touchmove",n)};t.prototype.handleKeyDown=function(t){var e=0;switch(t.key){case"ArrowLeft":e=-10;break;case"ArrowRight":e=10;break;default:return}if(t.shiftKey){e=e*10}var n=this.element.getBoundingClientRect().width;var i=this.leftWidth+e;if(i<0){i=0}if(i>n){i=n}this.leftWidth=i;this.rightWidth=n-this.leftWidth};t.prototype.render=function(){var t=this;return i(r,null,i("div",{class:"left pane",style:{width:this.leftWidth+"px"}},i("slot",{name:"left"})),i("button",{onMouseDown:function(e){return t.handleMouseDown(e)},onTouchStart:function(e){return t.handleMouseDown(e)},onKeyDown:function(e){return t.handleKeyDown(e)},ref:function(e){return t.splitter=e},style:{minWidth:this.splitterWidth.toString()+"px",left:this.leftWidth-2+"px"}},i("slot",null)),i("div",{class:"right pane",style:{width:this.rightWidth+"px"}},i("slot",{name:"right"})))};Object.defineProperty(t.prototype,"element",{get:function(){return o(this)},enumerable:false,configurable:true});return t}());u.style=s}}}));
 //# sourceMappingURL=dnn-vertical-splitview.system.entry.js.map

package/dist/dnn/dnn-vertical-splitview.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"names":["dnnVerticalSplitviewCss","DnnVerticalSplitview","exports","class_1","hostRef","this","splitterWidth","splitWidthPercentage","leftWidth","rightWidth","prototype","setSplitWidthPercentage","newWidth","panes","element","shadowRoot","querySelectorAll","requestAnimationFrame","forEach","pane","classList","add","_this","splitter","fullWidth","getBoundingClientRect","width","newLeft","setTimeout","remove","getSplitWidthPercentage","componentDidLoad","widthChanged","emit","handleMouseDown","event","preventDefault","handleDrag","ev","movementX","getMovementFromEvent","previousTouch","handleDragFinished","document","removeEventListener","newPercentage","addEventListener","handleKeyDown","e","key","shiftKey","render","h","Host","class","style","name","onMouseDown","onTouchStart","onKeyDown","ref","el","minWidth","toString","left"],"mappings":"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","sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: stretch;\r\n  margin: 0 auto;\r\n  position: relative;\r\n\r\n  /** @prop --left-pane-background-color:  Allows customizing the left pane background-color */\r\n  --left-pane-background-color: transparent;\r\n\r\n  /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n  --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n  border: none;\r\n  margin:0;\r\n  padding:0;\r\n  cursor: ew-resize;\r\n  position: absolute;\r\n  height: 100%;\r\n  background-color: transparent;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n}\r\n\r\n\r\n.pane{\r\n  overflow-y: auto;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n  &.left{\r\n    background-color: var(--left-pane-background-color);\r\n  }\r\n  &.right{\r\n    background-color: var(--right-pane-background-color);\r\n    flex-grow: 1;\r\n  }\r\n}","import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * @slot default - The split divider control you want to use.\r\n * @slot left - The content of the left pane.\r\n * @slot right - The content of the right pane.\r\n */\r\n@Component({\r\n  tag: 'dnn-vertical-splitview',\r\n  styleUrl: 'dnn-vertical-splitview.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnVerticalSplitview {\r\n\r\n  /** The width of the splitter area. */\r\n  @Prop() splitterWidth = 16;\r\n\r\n  /** The percentage position of the splitter in the container. */\r\n  @Prop() splitWidthPercentage = 30;\r\n  \r\n  private splitter!: HTMLButtonElement;\r\n\r\n  /** Sets the width percentage of the divider */\r\n  @Method()\r\n  async setSplitWidthPercentage(newWidth: number) {\r\n    const panes = this.element.shadowRoot.querySelectorAll(\".pane\");\r\n    requestAnimationFrame(() => {\r\n      panes.forEach(pane => pane.classList.add(\"transition\"));\r\n      this.splitter.classList.add(\"transition\");\r\n      requestAnimationFrame(() => {\r\n        const fullWidth = this.element.getBoundingClientRect().width;\r\n        let newLeft = fullWidth * newWidth / 100;\r\n        if (newLeft < 0){\r\n          newLeft = 0;\r\n        }\r\n        if (newLeft > fullWidth){\r\n          newLeft = fullWidth;\r\n        }\r\n        this.leftWidth = newLeft;\r\n        this.rightWidth = fullWidth - newLeft;\r\n        setTimeout(() => {\r\n          panes.forEach(pane => pane.classList.remove(\"transition\"));\r\n          this.splitter.classList.remove(\"transition\");\r\n        }, 300);\r\n      });\r\n    });\r\n  }\r\n\r\n  /** Gets the current divider position percentage. */\r\n  @Method()\r\n  async getSplitWidthPercentage(){\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    return this.leftWidth / fullWidth;\r\n  }\r\n\r\n  /** Fires when the width of the divider changes. */\r\n  @Event() widthChanged: EventEmitter<number>;\r\n\r\n  @State() leftWidth = 0;\r\n  @State() rightWidth = 0;\r\n\r\n  @Element() element : HTMLDnnVerticalSplitviewElement;\r\n  \r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      const fullWidth = this.element.getBoundingClientRect().width;\r\n      this.leftWidth = fullWidth * this.splitWidthPercentage / 100;\r\n      this.rightWidth = fullWidth - this.leftWidth;\r\n      this.widthChanged.emit(this.splitWidthPercentage);\r\n    });\r\n  }\r\n  \r\n  private previousTouch: Touch;\r\n\r\n  private handleMouseDown(event: MouseEvent | TouchEvent) {\r\n    event.preventDefault();\r\n    const handleDrag = (ev: MouseEvent | TouchEvent) => {\r\n      let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n      let fullWidth = this.element.getBoundingClientRect().width;\r\n      let newLeft = this.leftWidth + movementX;\r\n      if (newLeft < 0){\r\n        newLeft = 0;\r\n      }\r\n      if (newLeft > fullWidth){\r\n        newLeft = fullWidth;\r\n      }\r\n      this.leftWidth = newLeft;\r\n      this.rightWidth = fullWidth - newLeft;\r\n    }\r\n    const handleDragFinished = () => {\r\n      document.removeEventListener(\"mousemove\", handleDrag);\r\n      document.removeEventListener(\"touchmove\", handleDrag);\r\n      const fullWidth = this.element.getBoundingClientRect().width;\r\n      const newPercentage = this.leftWidth / fullWidth * 100;\r\n      this.widthChanged.emit(newPercentage);\r\n    };\r\n    document.addEventListener(\"mouseup\", handleDragFinished);\r\n    document.addEventListener(\"touchend\", handleDragFinished);\r\n    document.addEventListener(\"mousemove\", handleDrag);\r\n    document.addEventListener(\"touchmove\", handleDrag);\r\n  }\r\n\r\n  private handleKeyDown(e: KeyboardEvent): void {\r\n    let movementX = 0;\r\n    switch (e.key) {\r\n      case \"ArrowLeft\":\r\n        movementX = -10;\r\n        break;\r\n      case \"ArrowRight\":\r\n        movementX = 10;\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n    if (e.shiftKey){\r\n      movementX = movementX * 10;\r\n    }\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    let newLeft = this.leftWidth + movementX;\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newLeft > fullWidth){\r\n      newLeft = fullWidth;\r\n    }\r\n    this.leftWidth = newLeft;\r\n    this.rightWidth = fullWidth - this.leftWidth;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n          <div class=\"left pane\" style={{\r\n            width: `${this.leftWidth}px`,\r\n            }}>\r\n            <slot name=\"left\"></slot>\r\n          </div>\r\n          <button\r\n            onMouseDown={e => this.handleMouseDown(e)}\r\n            onTouchStart={e => this.handleMouseDown(e)}\r\n            onKeyDown={e => this.handleKeyDown(e)}\r\n            ref={el => this.splitter = el}\r\n            style={{\r\n              minWidth: `${this.splitterWidth.toString()}px`,\r\n              left: `${this.leftWidth - 2}px`,\r\n            }}\r\n          >\r\n            <slot></slot>\r\n          </button>\r\n          <div\r\n            class=\"right pane\"\r\n            style={{\r\n              width: `${this.rightWidth}px`,\r\n            }}>\r\n            <slot name=\"right\"></slot>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"names":["dnnVerticalSplitviewCss","DnnVerticalSplitview","exports","class_1","hostRef","this","splitterWidth","splitWidthPercentage","leftWidth","rightWidth","prototype","setSplitWidthPercentage","newWidth","panes","element","shadowRoot","querySelectorAll","requestAnimationFrame","forEach","pane","classList","add","_this","splitter","fullWidth","getBoundingClientRect","width","newLeft","setTimeout","remove","getSplitWidthPercentage","componentDidLoad","resizeObserver","ResizeObserver","widthChanged","emit","observe","handleMouseDown","event","preventDefault","handleDrag","ev","movementX","getMovementFromEvent","previousTouch","handleDragFinished","document","removeEventListener","newPercentage","addEventListener","handleKeyDown","e","key","shiftKey","render","h","Host","class","style","name","onMouseDown","onTouchStart","onKeyDown","ref","el","minWidth","toString","left"],"mappings":"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","sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: stretch;\r\n  margin: 0 auto;\r\n  position: relative;\r\n\r\n  /** @prop --left-pane-background-color:  Allows customizing the left pane background-color */\r\n  --left-pane-background-color: transparent;\r\n\r\n  /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n  --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n  border: none;\r\n  margin:0;\r\n  padding:0;\r\n  cursor: ew-resize;\r\n  position: absolute;\r\n  height: 100%;\r\n  background-color: transparent;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n}\r\n\r\n\r\n.pane{\r\n  overflow-y: auto;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n  &.left{\r\n    background-color: var(--left-pane-background-color);\r\n  }\r\n  &.right{\r\n    background-color: var(--right-pane-background-color);\r\n    flex-grow: 1;\r\n  }\r\n}","import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * @slot default - The split divider control you want to use.\r\n * @slot left - The content of the left pane.\r\n * @slot right - The content of the right pane.\r\n */\r\n@Component({\r\n  tag: 'dnn-vertical-splitview',\r\n  styleUrl: 'dnn-vertical-splitview.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnVerticalSplitview {\r\n\r\n  /** The width of the splitter area. */\r\n  @Prop() splitterWidth = 16;\r\n\r\n  /** The percentage position of the splitter in the container. */\r\n  @Prop({mutable: true}) splitWidthPercentage = 30;\r\n  \r\n  private splitter!: HTMLButtonElement;\r\n\r\n  private resizeObserver: ResizeObserver;\r\n\r\n  /** Sets the width percentage of the divider */\r\n  @Method()\r\n  async setSplitWidthPercentage(newWidth: number) {\r\n    const panes = this.element.shadowRoot.querySelectorAll(\".pane\");\r\n    requestAnimationFrame(() => {\r\n      panes.forEach(pane => pane.classList.add(\"transition\"));\r\n      this.splitter.classList.add(\"transition\");\r\n      requestAnimationFrame(() => {\r\n        const fullWidth = this.element.getBoundingClientRect().width;\r\n        let newLeft = fullWidth * newWidth / 100;\r\n        if (newLeft < 0){\r\n          newLeft = 0;\r\n        }\r\n        if (newLeft > fullWidth){\r\n          newLeft = fullWidth;\r\n        }\r\n        this.leftWidth = newLeft;\r\n        this.rightWidth = fullWidth - newLeft;\r\n        setTimeout(() => {\r\n          panes.forEach(pane => pane.classList.remove(\"transition\"));\r\n          this.splitter.classList.remove(\"transition\");\r\n        }, 300);\r\n      });\r\n    });\r\n  }\r\n\r\n  /** Gets the current divider position percentage. */\r\n  @Method()\r\n  async getSplitWidthPercentage(){\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    return this.leftWidth / fullWidth;\r\n  }\r\n\r\n  /** Fires when the width of the divider changes. */\r\n  @Event() widthChanged: EventEmitter<number>;\r\n\r\n  @State() leftWidth = 0;\r\n  @State() rightWidth = 0;\r\n\r\n  @Element() element : HTMLDnnVerticalSplitviewElement;\r\n  \r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      this.resizeObserver = new ResizeObserver(() => {\r\n        const fullWidth = this.element.getBoundingClientRect().width;\r\n        this.leftWidth = fullWidth * this.splitWidthPercentage / 100;\r\n        this.rightWidth = fullWidth - this.leftWidth;\r\n        this.widthChanged.emit(this.splitWidthPercentage);\r\n      });\r\n      this.resizeObserver.observe(this.element);\r\n    });\r\n  }\r\n  \r\n  private previousTouch: Touch;\r\n\r\n  private handleMouseDown(event: MouseEvent | TouchEvent) {\r\n    event.preventDefault();\r\n    const handleDrag = (ev: MouseEvent | TouchEvent) => {\r\n      requestAnimationFrame(() => {\r\n        let fullWidth = this.element.getBoundingClientRect().width;\r\n        let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n        let newLeft = this.leftWidth + movementX;\r\n        if (newLeft < 0){\r\n          newLeft = 0;\r\n        }\r\n        if (newLeft > fullWidth){\r\n          newLeft = fullWidth;\r\n        }\r\n        this.leftWidth = newLeft;\r\n        this.rightWidth = fullWidth - newLeft;\r\n        this.splitWidthPercentage = this.leftWidth / fullWidth * 100;\r\n      });\r\n    }\r\n    const handleDragFinished = () => {\r\n      document.removeEventListener(\"mousemove\", handleDrag);\r\n      document.removeEventListener(\"touchmove\", handleDrag);\r\n      const fullWidth = this.element.getBoundingClientRect().width;\r\n      const newPercentage = this.leftWidth / fullWidth * 100;\r\n      this.widthChanged.emit(newPercentage);\r\n    };\r\n    document.addEventListener(\"mouseup\", handleDragFinished);\r\n    document.addEventListener(\"touchend\", handleDragFinished);\r\n    document.addEventListener(\"mousemove\", handleDrag);\r\n    document.addEventListener(\"touchmove\", handleDrag);\r\n  }\r\n\r\n  private handleKeyDown(e: KeyboardEvent): void {\r\n    let movementX = 0;\r\n    switch (e.key) {\r\n      case \"ArrowLeft\":\r\n        movementX = -10;\r\n        break;\r\n      case \"ArrowRight\":\r\n        movementX = 10;\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n    if (e.shiftKey){\r\n      movementX = movementX * 10;\r\n    }\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    let newLeft = this.leftWidth + movementX;\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newLeft > fullWidth){\r\n      newLeft = fullWidth;\r\n    }\r\n    this.leftWidth = newLeft;\r\n    this.rightWidth = fullWidth - this.leftWidth;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n          <div class=\"left pane\" style={{\r\n              width: `${this.leftWidth}px`,\r\n            }}>\r\n            <slot name=\"left\"></slot>\r\n          </div>\r\n          <button\r\n            onMouseDown={e => this.handleMouseDown(e)}\r\n            onTouchStart={e => this.handleMouseDown(e)}\r\n            onKeyDown={e => this.handleKeyDown(e)}\r\n            ref={el => this.splitter = el}\r\n            style={{\r\n              minWidth: `${this.splitterWidth.toString()}px`,\r\n              left: `${this.leftWidth - 2}px`,\r\n            }}\r\n          >\r\n            <slot></slot>\r\n          </button>\r\n          <div\r\n            class=\"right pane\"\r\n            style={{\r\n              width: `${this.rightWidth}px`,\r\n            }}>\r\n            <slot name=\"right\"></slot>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/dnn/dnn.esm.js

@@ -121,7 +121,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(options => {
   globalScripts();
-  return bootstrapLazy([["dnn-image-cropper",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1028],"hasChildren":[32]}]]],["dnn-checkbox",[[1,"dnn-checkbox",{"checked":[1028],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[2,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-button",[[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",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]]]]],["dnn-dropzone",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[64]}]]]], options);
+  return bootstrapLazy([["dnn-image-cropper",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32]}]]],["dnn-checkbox",[[1,"dnn-checkbox",{"checked":[1028],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-button",[[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",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]]]]],["dnn-dropzone",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[64]}]]]], options);
 });
 
 //# sourceMappingURL=dnn.esm.js.map

package/dist/dnn/dnn.system.js

@@ -1,2 +1,2 @@
-System.register(["./index-a3a55419.system.js","./app-globals-497eb362.system.js"],(function(e,t){"use strict";var n,r,i,s,o,a,c,d,l,m;return{setters:[function(e){n=e.B;r=e.c;i=e.p;s=e.w;o=e.H;a=e.d;c=e.N;d=e.a;l=e.b},function(e){m=e.g}],execute:function(){var e=function(e){return"__sc_import_"+e.replace(/\s|-/g,"_")};var p=function(){if(n.isDev&&!n.isTesting){r("Running in development mode.")}if(n.cssVarShim){i.$cssShim$=s.__cssshim}if(n.cloneNodeFix){h(o.prototype)}if(n.profile&&!performance.mark){performance.mark=performance.measure=function(){};performance.getEntriesByName=function(){return[]}}var e=n.scriptDataOpts||n.safari10||n.dynamicImportShim?Array.from(a.querySelectorAll("script")).find((function(e){return new RegExp("/"+c+"(\\.esm)?\\.js($|\\?|#)").test(e.src)||e.getAttribute("data-stencil-namespace")===c})):null;var l=t.meta.url;var m=n.scriptDataOpts?e["data-opts"]||{}:{};if(n.safari10&&"onbeforeload"in e&&!history.scrollRestoration){return{then:function(){}}}if(!n.safari10&&l!==""){m.resourcesUrl=new URL(".",l).href}else if(n.dynamicImportShim||n.safari10){m.resourcesUrl=new URL(".",new URL(e.getAttribute("data-resources-url")||e.src,s.location.href)).href;if(n.dynamicImportShim){u(m.resourcesUrl,e)}if(n.dynamicImportShim&&!s.customElements){return t.import("./dom-938307ec.system.js").then((function(){return m}))}}return d(m)};var u=function(t,n){var r=e(c);try{s[r]=new Function("w","return import(w);//"+Math.random())}catch(e){var i=new Map;s[r]=function(e){var o=new URL(e,t).href;var c=i.get(o);if(!c){var d=a.createElement("script");d.type="module";d.crossOrigin=n.crossOrigin;d.src=URL.createObjectURL(new Blob(["import * as m from '"+o+"'; window."+r+".m = m;"],{type:"application/javascript"}));c=new Promise((function(e){d.onload=function(){e(s[r].m);d.remove()}}));i.set(o,c);a.head.appendChild(d)}return c}}};var h=function(e){var t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}var n=t.call(this,false);var r=this.childNodes;if(e){for(var i=0;i<r.length;i++){if(r[i].nodeType!==2){n.appendChild(r[i].cloneNode(true))}}}return n}};p().then((function(e){m();return l([["dnn-image-cropper.system",[[1,"dnn-image-cropper",{width:[2],height:[2],resx:[16],quality:[2],preventUndersized:[4,"prevent-undersized"],view:[32]}]]],["dnn-treeview-item.system",[[1,"dnn-treeview-item",{expanded:[1028],hasChildren:[32]}]]],["dnn-checkbox.system",[[1,"dnn-checkbox",{checked:[1028],useIntermediate:[4,"use-intermediate"],value:[1]}]]],["dnn-chevron.system",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540]}]]],["dnn-color-picker.system",[[1,"dnn-color-picker",{color:[1],colorBoxHeight:[1,"color-box-height"],currentColor:[32],rgbDisplay:[32],hslDisplay:[32],hexDisplay:[32]}]]],["dnn-searchbox.system",[[1,"dnn-searchbox",{placeholder:[1],debounced:[4],query:[1025]}]]],["dnn-sort-icon.system",[[1,"dnn-sort-icon",{sortDirection:[1,"sort-direction"]}]]],["dnn-tab.system",[[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}]]],["dnn-tabs.system",[[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["dnn-toggle.system",[[1,"dnn-toggle",{checked:[1028],disabled:[4]}]]],["dnn-vertical-overflow-menu.system",[[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["dnn-vertical-splitview.system",[[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[2,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["dnn-button.system",[[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.system",[[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]]]]],["dnn-dropzone.system",[[1,"dnn-dropzone",{resx:[16],allowedExtensions:[16],allowCameraMode:[4,"allow-camera-mode"],captureQuality:[2,"capture-quality"],canTakeSnapshots:[32],takingPicture:[32]}]]],["dnn-modal.system",[[1,"dnn-modal",{backdropDismiss:[4,"backdrop-dismiss"],closeText:[1,"close-text"],showCloseButton:[4,"show-close-button"],visible:[32],show:[64],hide:[64]}]]]],e)}))}}}));
+System.register(["./index-a3a55419.system.js","./app-globals-497eb362.system.js"],(function(e,t){"use strict";var n,r,i,s,o,a,c,d,l,m;return{setters:[function(e){n=e.B;r=e.c;i=e.p;s=e.w;o=e.H;a=e.d;c=e.N;d=e.a;l=e.b},function(e){m=e.g}],execute:function(){var e=function(e){return"__sc_import_"+e.replace(/\s|-/g,"_")};var p=function(){if(n.isDev&&!n.isTesting){r("Running in development mode.")}if(n.cssVarShim){i.$cssShim$=s.__cssshim}if(n.cloneNodeFix){h(o.prototype)}if(n.profile&&!performance.mark){performance.mark=performance.measure=function(){};performance.getEntriesByName=function(){return[]}}var e=n.scriptDataOpts||n.safari10||n.dynamicImportShim?Array.from(a.querySelectorAll("script")).find((function(e){return new RegExp("/"+c+"(\\.esm)?\\.js($|\\?|#)").test(e.src)||e.getAttribute("data-stencil-namespace")===c})):null;var l=t.meta.url;var m=n.scriptDataOpts?e["data-opts"]||{}:{};if(n.safari10&&"onbeforeload"in e&&!history.scrollRestoration){return{then:function(){}}}if(!n.safari10&&l!==""){m.resourcesUrl=new URL(".",l).href}else if(n.dynamicImportShim||n.safari10){m.resourcesUrl=new URL(".",new URL(e.getAttribute("data-resources-url")||e.src,s.location.href)).href;if(n.dynamicImportShim){u(m.resourcesUrl,e)}if(n.dynamicImportShim&&!s.customElements){return t.import("./dom-938307ec.system.js").then((function(){return m}))}}return d(m)};var u=function(t,n){var r=e(c);try{s[r]=new Function("w","return import(w);//"+Math.random())}catch(e){var i=new Map;s[r]=function(e){var o=new URL(e,t).href;var c=i.get(o);if(!c){var d=a.createElement("script");d.type="module";d.crossOrigin=n.crossOrigin;d.src=URL.createObjectURL(new Blob(["import * as m from '"+o+"'; window."+r+".m = m;"],{type:"application/javascript"}));c=new Promise((function(e){d.onload=function(){e(s[r].m);d.remove()}}));i.set(o,c);a.head.appendChild(d)}return c}}};var h=function(e){var t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}var n=t.call(this,false);var r=this.childNodes;if(e){for(var i=0;i<r.length;i++){if(r[i].nodeType!==2){n.appendChild(r[i].cloneNode(true))}}}return n}};p().then((function(e){m();return l([["dnn-image-cropper.system",[[1,"dnn-image-cropper",{width:[2],height:[2],resx:[16],quality:[2],preventUndersized:[4,"prevent-undersized"],view:[32]}]]],["dnn-treeview-item.system",[[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32]}]]],["dnn-checkbox.system",[[1,"dnn-checkbox",{checked:[1028],useIntermediate:[4,"use-intermediate"],value:[1]}]]],["dnn-chevron.system",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540]}]]],["dnn-color-picker.system",[[1,"dnn-color-picker",{color:[1],colorBoxHeight:[1,"color-box-height"],currentColor:[32],rgbDisplay:[32],hslDisplay:[32],hexDisplay:[32]}]]],["dnn-searchbox.system",[[1,"dnn-searchbox",{placeholder:[1],debounced:[4],query:[1025]}]]],["dnn-sort-icon.system",[[1,"dnn-sort-icon",{sortDirection:[1,"sort-direction"]}]]],["dnn-tab.system",[[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}]]],["dnn-tabs.system",[[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["dnn-toggle.system",[[1,"dnn-toggle",{checked:[1028],disabled:[4]}]]],["dnn-vertical-overflow-menu.system",[[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["dnn-vertical-splitview.system",[[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["dnn-button.system",[[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.system",[[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]]]]],["dnn-dropzone.system",[[1,"dnn-dropzone",{resx:[16],allowedExtensions:[16],allowCameraMode:[4,"allow-camera-mode"],captureQuality:[2,"capture-quality"],canTakeSnapshots:[32],takingPicture:[32]}]]],["dnn-modal.system",[[1,"dnn-modal",{backdropDismiss:[4,"backdrop-dismiss"],closeText:[1,"close-text"],showCloseButton:[4,"show-close-button"],visible:[32],show:[64],hide:[64]}]]]],e)}))}}}));
 //# sourceMappingURL=dnn.system.js.map

package/dist/dnn/dnn.system.js.map

@@ -1 +1 @@
-{"version":3,"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"names":["getDynamicImportFunction","namespace","replace","patchBrowser","BUILD","isDev","isTesting","consoleDevInfo","cssVarShim","plt","$cssShim$","win","__cssshim","cloneNodeFix","patchCloneNodeFix","H","prototype","profile","performance","mark","measure","getEntriesByName","scriptElm","scriptDataOpts","safari10","dynamicImportShim","Array","from","doc","querySelectorAll","find","s","RegExp","NAMESPACE","test","src","getAttribute","importMeta","module","meta","url","opts","history","scrollRestoration","then","resourcesUrl","URL","href","location","patchDynamicImport","customElements","import","promiseResolve","base","orgScriptElm","importFunctionName","Function","Math","random","e","moduleMap_1","Map","mod","get","script_1","createElement","type","crossOrigin","createObjectURL","Blob","Promise","resolve","onload","m","remove","set","head","appendChild","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","options","globalScripts","bootstrapLazy","width","height","resx","quality","preventUndersized","view","expanded","hasChildren","checked","useIntermediate","value","expandText","collapseText","color","colorBoxHeight","currentColor","rgbDisplay","hslDisplay","hexDisplay","placeholder","debounced","query","sortDirection","tabTitle","visible","show","hide","tabTitles","selectedTabTitle","disabled","showDropdownButton","showDropdownMenu","splitterWidth","splitWidthPercentage","leftWidth","rightWidth","setSplitWidthPercentage","getSplitWidthPercentage","reversed","size","confirm","confirmYesText","confirmNoText","confirmMessage","modalVisible","transitionDuration","updateSize","allowedExtensions","allowCameraMode","captureQuality","canTakeSnapshots","takingPicture","backdropDismiss","closeText","showCloseButton"],"mappings":"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","sourcesContent":["/*\n Stencil Client Patch Browser v2.13.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","import { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"]}
+{"version":3,"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"names":["getDynamicImportFunction","namespace","replace","patchBrowser","BUILD","isDev","isTesting","consoleDevInfo","cssVarShim","plt","$cssShim$","win","__cssshim","cloneNodeFix","patchCloneNodeFix","H","prototype","profile","performance","mark","measure","getEntriesByName","scriptElm","scriptDataOpts","safari10","dynamicImportShim","Array","from","doc","querySelectorAll","find","s","RegExp","NAMESPACE","test","src","getAttribute","importMeta","module","meta","url","opts","history","scrollRestoration","then","resourcesUrl","URL","href","location","patchDynamicImport","customElements","import","promiseResolve","base","orgScriptElm","importFunctionName","Function","Math","random","e","moduleMap_1","Map","mod","get","script_1","createElement","type","crossOrigin","createObjectURL","Blob","Promise","resolve","onload","m","remove","set","head","appendChild","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","options","globalScripts","bootstrapLazy","width","height","resx","quality","preventUndersized","view","expanded","hasChildren","checked","useIntermediate","value","expandText","collapseText","color","colorBoxHeight","currentColor","rgbDisplay","hslDisplay","hexDisplay","placeholder","debounced","query","sortDirection","tabTitle","visible","show","hide","tabTitles","selectedTabTitle","disabled","showDropdownButton","showDropdownMenu","splitterWidth","splitWidthPercentage","leftWidth","rightWidth","setSplitWidthPercentage","getSplitWidthPercentage","reversed","size","confirm","confirmYesText","confirmNoText","confirmMessage","modalVisible","transitionDuration","updateSize","allowedExtensions","allowCameraMode","captureQuality","canTakeSnapshots","takingPicture","backdropDismiss","closeText","showCloseButton"],"mappings":"gQAKA,IAAMA,EAA2B,SAACC,GAAc,MAAA,eAAeA,EAAUC,QAAQ,QAAS,MAC1F,IAAMC,EAAe,WAEjB,GAAIC,EAAMC,QAAUD,EAAME,UAAW,CACjCC,EAAe,gCAEnB,GAAIH,EAAMI,WAAY,CAElBC,EAAIC,UAAYC,EAAIC,UAExB,GAAIR,EAAMS,aAAc,CAEpBC,EAAkBC,EAAEC,WAExB,GAAIZ,EAAMa,UAAYC,YAAYC,KAAM,CAEpCD,YAAYC,KAAOD,YAAYE,QAAU,aAGzCF,YAAYG,iBAAmB,WAAM,MAAA,IAGzC,IAAMC,EAAYlB,EAAMmB,gBAAkBnB,EAAMoB,UAAYpB,EAAMqB,kBAC5DC,MAAMC,KAAKC,EAAIC,iBAAiB,WAAWC,MAAK,SAACC,GAAM,OAAA,IAAIC,OAAO,IAAKC,EAAS,2BAA2BC,KAAKH,EAAEI,MAChHJ,EAAEK,aAAa,4BAA8BH,KAC/C,KACN,IAAMI,EAAaC,EAAAC,KAAAC,IACnB,IAAMC,EAAOrC,EAAMmB,eAAiBD,EAAU,cAAgB,GAAK,GACnE,GAAIlB,EAAMoB,UAAY,iBAAkBF,IAAcoB,QAAQC,kBAAsC,CAQhG,MAAO,CACHC,KAAI,cAKZ,IAAKxC,EAAMoB,UAAYa,IAAe,GAAI,CACtCI,EAAKI,aAAe,IAAIC,IAAI,IAAKT,GAAYU,UAE5C,GAAI3C,EAAMqB,mBAAqBrB,EAAMoB,SAAU,CAChDiB,EAAKI,aAAe,IAAIC,IAAI,IAAK,IAAIA,IAAIxB,EAAUc,aAAa,uBAAyBd,EAAUa,IAAKxB,EAAIqC,SAASD,OAAOA,KAC5H,GAAI3C,EAAMqB,kBAAmB,CACzBwB,EAAmBR,EAAKI,aAAcvB,GAE1C,GAAIlB,EAAMqB,oBAAsBd,EAAIuC,eAAgB,CAGhD,OAAOZ,EAAAa,OAA+C,4BAAYP,MAAK,WAAM,OAAAH,MAGrF,OAAOW,EAAeX,IAE1B,IAAMQ,EAAqB,SAACI,EAAMC,GAC9B,IAAMC,EAAqBvD,EAAyBiC,GACpD,IAKItB,EAAI4C,GAAsB,IAAIC,SAAS,IAAK,sBAAsBC,KAAKC,UAE3E,MAAOC,GAIH,IAAMC,EAAY,IAAIC,IACtBlD,EAAI4C,GAAsB,SAACpB,GACvB,IAAMK,EAAM,IAAIM,IAAIX,EAAKkB,GAAMN,KAC/B,IAAIe,EAAMF,EAAUG,IAAIvB,GACxB,IAAKsB,EAAK,CACN,IAAME,EAASpC,EAAIqC,cAAc,UACjCD,EAAOE,KAAO,SACdF,EAAOG,YAAcb,EAAaa,YAClCH,EAAO7B,IAAMW,IAAIsB,gBAAgB,IAAIC,KAAK,CAAC,uBAAuB7B,EAAG,aAAae,EAAkB,WAAY,CAC5GW,KAAM,4BAEVJ,EAAM,IAAIQ,SAAQ,SAACC,GACfP,EAAOQ,OAAS,WACZD,EAAQ5D,EAAI4C,GAAoBkB,GAChCT,EAAOU,aAGfd,EAAUe,IAAInC,EAAKsB,GACnBlC,EAAIgD,KAAKC,YAAYb,GAEzB,OAAOF,KAInB,IAAMhD,EAAoB,SAACgE,GACvB,IAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAAUC,GACvC,GAAIC,KAAKC,WAAa,WAAY,CAC9B,OAAOJ,EAAkBK,KAAKF,KAAMD,GAExC,IAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,IAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACN,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAE3C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACjCL,EAAWR,YAAYS,EAAcE,GAAGR,UAAU,SAI9D,OAAOK,ICjHflF,IAAeyC,MAAK,SAAA+C,GAClBC,IACA,OAAOC,EAAc,CAAA,CAAA,2BAA4B,CAAE,CAAA,EAAA,oBAAS,CAAAC,MAAA,CAAA,GAAAC,OAAA,CAAA,GAAAC,KAAA,CAAA,IAAAC,QAAA,CAAA,GAAAC,kBAAA,CAAA,EAAA,sBAAAC,KAAA,CAAA,QAAA,CAAA,2BAAA,CAAA,CAAA,EAAA,oBAAA,CAAAC,SAAA,CAAA,MAAAC,YAAA,CAAA,QAAA,CAAA,sBAAA,CAAA,CAAA,EAAA,eAAA,CAAAC,QAAA,CAAA,MAAAC,gBAAA,CAAA,EAAA,oBAAAC,MAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,CAAA,EAAA,cAAA,CAAAC,WAAA,CAAA,EAAA,eAAAC,aAAA,CAAA,EAAA,iBAAAN,SAAA,CAAA,UAAA,CAAA,0BAAA,CAAA,CAAA,EAAA,mBAAA,CAAAO,MAAA,CAAA,GAAAC,eAAA,CAAA,EAAA,oBAAAC,aAAA,CAAA,IAAAC,WAAA,CAAA,IAAAC,WAAA,CAAA,IAAAC,WAAA,CAAA,QAAA,CAAA,uBAAA,CAAA,CAAA,EAAA,gBAAA,CAAAC,YAAA,CAAA,GAAAC,UAAA,CAAA,GAAAC,MAAA,CAAA,UAAA,CAAA,uBAAA,CAAA,CAAA,EAAA,gBAAA,CAAAC,cAAA,CAAA,EAAA,sBAAA,CAAA,iBAAA,CAAA,CAAA,EAAA,UAAA,CAAAC,SAAA,CAAA,EAAA,aAAAC,QAAA,CAAA,IAAAC,KAAA,CAAA,IAAAC,KAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,CAAA,EAAA,WAAA,CAAAC,UAAA,CAAA,IAAAC,iBAAA,CAAA,QAAA,CAAA,oBAAA,CAAA,CAAA,EAAA,aAAA,CAAApB,QAAA,CAAA,MAAAqB,SAAA,CAAA,OAAA,CAAA,oCAAA,CAAA,CAAA,EAAA,6BAAA,CAAAC,mBAAA,CAAA,IAAAC,iBAAA,CAAA,QAAA,CAAA,gCAAA,CAAA,CAAA,EAAA,yBAAA,CAAAC,cAAA,CAAA,EAAA,kBAAAC,qBAAA,CAAA,KAAA,0BAAAC,UAAA,CAAA,IAAAC,WAAA,CAAA,IAAAC,wBAAA,CAAA,IAAAC,wBAAA,CAAA,QAAA,CAAA,oBAAA,CAAA,CAAA,EAAA,aAAA,CAAAjE,KAAA,CAAA,GAAAkE,SAAA,CAAA,GAAAC,KAAA,CAAA,GAAAC,QAAA,CAAA,GAAAC,eAAA,CAAA,EAAA,oBAAAC,cAAA,CAAA,EAAA,mBAAAC,eAAA,CAAA,EAAA,mBAAAd,SAAA,CAAA,GAAAe,aAAA,CAAA,QAAA,CAAA,yBAAA,CAAA,CAAA,EAAA,kBAAA,CAAAtC,SAAA,CAAA,KAAAuC,mBAAA,CAAA,EAAA,uBAAAC,WAAA,CAAA,KAAA,CAAA,CAAA,EAAA,8BAAA,2BAAA,CAAA,sBAAA,CAAA,CAAA,EAAA,eAAA,CAAA5C,KAAA,CAAA,IAAA6C,kBAAA,CAAA,IAAAC,gBAAA,CAAA,EAAA,qBAAAC,eAAA,CAAA,EAAA,mBAAAC,iBAAA,CAAA,IAAAC,cAAA,CAAA,QAAA,CAAA,mBAAA,CAAA,CAAA,EAAA,YAAA,CAAAC,gBAAA,CAAA,EAAA,oBAAAC,UAAA,CAAA,EAAA,cAAAC,gBAAA,CAAA,EAAA,qBAAA9B,QAAA,CAAA,IAAAC,KAAA,CAAA,IAAAC,KAAA,CAAA,SAAA7B","sourcesContent":["/*\n Stencil Client Patch Browser v2.13.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","import { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"]}