@dnncommunity/dnn-elements 0.15.0-beta.8 → 0.15.0-beta.9

package/dist/cjs/dnn-tabs.cjs.entry.js

@@ -1,52 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-d53702a3.js');
-
-const dnnTabsCss = ":host{display:block;--color-background:var(--dnn-color-secondary-dark, lightgray);--color-text:var(--dnn-color-secondary-contrast, #333);--color-visible:var(--dnn-color-primary, #3792ED);--color-visible-text:var(--dnn-color-primary-contrast, #FFF);--color-focus:var(--dnn-color-primary, #3792ed)}.tabTitles{display:-ms-flexbox;display:flex;background-color:var(--color-background);color:var(--color-text)}.tabTitles button{padding:0.5rem 1rem;border:0;margin:0;background-color:transparent}.tabTitles button.visible{background-color:var(--color-visible);color:var(--color-bisible-text)}.tabTitles button:focus,.tabTitles button:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--color-focus);box-shadow:0 0 2px 2px var(--color-focus)}.currentTab{border:1px solid var(--color-background);padding:1rem}";
-
-const DnnTabs = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tabTitles = [];
-    this.selectedTabTitle = "";
-  }
-  componentDidLoad() {
-    requestAnimationFrame(() => {
-      this.updateTitles();
-      this.showFirstTab();
-    });
-  }
-  getTabs() {
-    return this.component.shadowRoot.querySelector("slot").assignedElements();
-  }
-  updateTitles() {
-    const tabs = this.getTabs();
-    tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);
-  }
-  showFirstTab() {
-    const tab = this.getTabs()[0];
-    tab.show();
-    this.selectedTabTitle = tab.tabTitle;
-  }
-  showTab(tabTitle) {
-    const tabs = this.getTabs();
-    tabs.forEach(tab => {
-      if (tab.tabTitle == tabTitle) {
-        tab.show();
-        return;
-      }
-      tab.hide();
-    });
-    this.selectedTabTitle = tabTitle;
-  }
-  render() {
-    return (index.h(index.Host, { ref: el => this.component = el }, index.h("div", { class: "tabTitles" }, this.tabTitles.map(tabTitle => index.h("button", { class: this.selectedTabTitle == tabTitle ? "visible" : "", onClick: () => this.showTab(tabTitle) }, tabTitle))), index.h("div", { class: "currentTab" }, index.h("slot", null))));
-  }
-};
-DnnTabs.style = dnnTabsCss;
-
-exports.dnn_tabs = DnnTabs;
-
-//# sourceMappingURL=dnn-tabs.cjs.entry.js.map

package/dist/cjs/dnn-tabs.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dnn-tabs.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,uyBAAuyB;;MCO7yB,OAAO;EALpB;;IAQa,cAAS,GAAa,EAAE,CAAC;IACzB,qBAAgB,GAAW,EAAE,CAAC;GAwD1C;EAtDG,gBAAgB;IACZ,qBAAqB,CAAC;MAClB,IAAI,CAAC,YAAY,EAAE,CAAC;MACpB,IAAI,CAAC,YAAY,EAAE,CAAC;KACvB,CAAC,CAAC;GACN;EAEO,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAyB,CAAC;GACpG;EAEO,YAAY;IAChB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;GAC3E;EAEO,YAAY;IAChB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9B,GAAG,CAAC,IAAI,EAAE,CAAC;IACX,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,QAAQ,CAAC;GACxC;EAEO,OAAO,CAAC,QAAgB;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG;MACZ,IAAI,GAAG,CAAC,QAAQ,IAAI,QAAQ,EAAC;QACzB,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,OAAO;OACV;MAED,GAAG,CAAC,IAAI,EAAE,CAAC;KACd,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;GACpC;EAED,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAChCD,iBAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IACxBA,oBACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,GAAG,SAAS,GAAE,EAAE,EACxD,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC,EACNA,iBAAK,KAAK,EAAC,YAAY,IACnBA,qBAAa,CACX,CACH,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","./src/components/dnn-tabs/dnn-tabs.tsx"],"sourcesContent":[":host {\r\n    /**\r\n    * @prop --color-background: The color of the inactive tabs.\r\n    * @prop --color-text: The color of the text for inactive tabs.\r\n    * @prop --color-visible: The color of the active tab.\r\n    * @prop --color-visible-text: The color of the text for the active tab.\r\n    * @prop --color-focus: outline color when hovering or pre-selecting a tab.\r\n    */\r\n    display: block;\r\n    --color-background: var(--dnn-color-secondary-dark, lightgray);\r\n    --color-text: var(--dnn-color-secondary-contrast, #333);\r\n    --color-visible: var(--dnn-color-primary, #3792ED);\r\n    --color-visible-text: var(--dnn-color-primary-contrast, #FFF);\r\n    --color-focus: var(--dnn-color-primary, #3792ed);\r\n  }\r\n\r\n  .tabTitles{\r\n      display: flex;\r\n      background-color: var(--color-background);\r\n      color: var(--color-text);\r\n      button{\r\n          padding: 0.5rem 1rem;\r\n          border: 0;\r\n          margin: 0;\r\n          background-color: transparent;\r\n          &.visible{\r\n              background-color: var(--color-visible);\r\n              color: var(--color-bisible-text);\r\n          }\r\n          &:focus, &:hover{\r\n            outline: none;\r\n            box-shadow: 0 0 2px 2px var(--color-focus);\r\n          }\r\n      }\r\n  }\r\n\r\n  .currentTab{\r\n      border: 1px solid var(--color-background);\r\n      padding: 1rem;\r\n  }","import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'dnn-tabs',\r\n    styleUrl: 'dnn-tabs.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTabs {\r\n    private component: HTMLElement;\r\n\r\n    @State() tabTitles: string[] = [];\r\n    @State() selectedTabTitle: string = \"\";\r\n\r\n    componentDidLoad(){\r\n        requestAnimationFrame(() => {\r\n            this.updateTitles();\r\n            this.showFirstTab();\r\n        });\r\n    }\r\n\r\n    private getTabs() {\r\n        return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n    }\r\n\r\n    private updateTitles(){\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n    }\r\n\r\n    private showFirstTab(){\r\n        const tab = this.getTabs()[0];\r\n        tab.show();\r\n        this.selectedTabTitle = tab.tabTitle;\r\n    }\r\n\r\n    private showTab(tabTitle: string) {\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => {\r\n            if (tab.tabTitle == tabTitle){\r\n                tab.show();\r\n                return;\r\n            }\r\n\r\n            tab.hide();\r\n        });\r\n        this.selectedTabTitle = tabTitle;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host ref={el => this.component = el}>\r\n                <div class=\"tabTitles\">\r\n                    {this.tabTitles.map(tabTitle =>\r\n                        <button\r\n                            class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n                            onClick={() => this.showTab(tabTitle)}\r\n                        >\r\n                            {tabTitle}\r\n                        </button>\r\n                    )}\r\n                </div>\r\n                <div class=\"currentTab\">\r\n                    <slot></slot>\r\n                </div>\r\n            </Host>\r\n        );\r\n    }\r\n}"],"version":3}

package/dist/cjs/dnn-toggle.cjs.entry.js

@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-d53702a3.js');
-
-const dnnToggleCss = ":host{display:inline-block;outline:none;cursor:pointer}button{height:1.5em;width:2.5em;outline:none;background-color:var(--background, #888);border:0;border-radius:var(--border-radius, var(--dnn-controls-radius, 0.75em));padding:0.1em;position:relative;margin:0;-webkit-transition:background-color 300ms ease-in-out;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary);box-shadow:0 0 2px 2px var(--dnn-color-primary)}button.checked{background-color:var(--background-checked, var(--dnn-color-primary, blue))}button.checked .handle{left:calc(1em + 4px)}button:disabled{opacity:0.5;cursor:not-allowed;-webkit-box-shadow:none;box-shadow:none}button .handle{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;background-color:white;width:1em;height:1em;border-radius:var(--handle-border-radius, var(--dnn-controls-radius, 50%));position:absolute;top:calc(50% - 0.5em);left:2px}";
-
-const DnnToggle = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.checkChanged = index.createEvent(this, "checkChanged", 7);
-    /** If 'true' the toggle is checked (on). */
-    this.checked = false;
-    /** If 'true' the toggle is not be interacted with. */
-    this.disabled = false;
-  }
-  checkedChanged(isChecked) {
-    this.checkChanged.emit({ checked: isChecked });
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("button", { disabled: this.disabled, class: { 'checked': this.checked }, onClick: () => {
-        if (!this.disabled) {
-          this.checked = !this.checked;
-        }
-      } }, index.h("div", { class: "handle" }))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "checked": ["checkedChanged"]
-  }; }
-};
-DnnToggle.style = dnnToggleCss;
-
-exports.dnn_toggle = DnnToggle;
-
-//# sourceMappingURL=dnn-toggle.cjs.entry.js.map

package/dist/cjs/dnn-toggle.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dnn-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,6+BAA6+B;;MCSr/B,SAAS;EALtB;;;;IAU2B,YAAO,GAAG,KAAK,CAAC;;IAG/B,aAAQ,GAAG,KAAK,CAAC;GAyB5B;EAnBG,cAAc,CAAC,SAAkB;IAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,OAAO,EAAE,SAAS,EAAC,CAAC,CAAC;GAChD;EAED,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,oBAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAC,EAC7D,OAAO,EAAE;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;UAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAChC;OACJ,IAEDA,iBAAK,KAAK,EAAC,QAAQ,GAAO,CACrB,CACN,EACT;GACL;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-toggle/dnn-toggle.scss?tag=dnn-toggle&encapsulation=shadow","./src/components/dnn-toggle/dnn-toggle.tsx"],"sourcesContent":[":host {\n    /**\n     * @prop --background: Background of the toggle.\n     * @prop --background-checked: Background of the toggle when checked.\n     * @prop --handle-background:  Background of the handle.\n     * @prop --handle-background-checked:  Background of the handle when checked.\n     * @prop --border-radius: The radius of the background borders.\n     * @prop --handle-border-radius: The radius of the handle.\n    */\n\n    display: inline-block;\n    outline: none;\n    cursor: pointer;\n}\n\nbutton {\n    height: 1.5em;\n    width: 2.5em;\n    outline: none;\n    background-color: var(--background, #888);\n    border: 0;\n    border-radius: var(--border-radius, var(--dnn-controls-radius, 0.75em));\n    padding: 0.1em;\n    position: relative;\n    margin: 0;\n    transition: background-color 300ms ease-in-out;\n    position: relative;\n    cursor: pointer;\n    &:hover, &:focus{\n        box-shadow: 0 0 2px 2px var(--dnn-color-primary);\n    }\n    &.checked{\n        background-color: var(--background-checked, var(--dnn-color-primary, blue));\n        .handle{\n            left: calc(1em + 4px);\n        }\n    }\n    &:disabled{\n        opacity: 0.5;\n        cursor: not-allowed;\n        box-shadow: none;\n    }\n    .handle{\n        transition: all 300ms ease-in-out;\n        background-color:white;\n        width: 1em;\n        height: 1em;\n        border-radius: var(--handle-border-radius, var(--dnn-controls-radius, 50%));\n        position: absolute;\n        top: calc(50% - 0.5em);\n        left: 2px;\n    }\n}","import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host } from \"@stencil/core\";\nimport { DnnToggleChangeEventDetail } from \"./toggle-interface\";\n\n\n@Component({\n    tag: \"dnn-toggle\",\n    styleUrl: \"dnn-toggle.scss\",\n    shadow: true\n})\nexport class DnnToggle {\n\n    @Element() element: HTMLDnnToggleElement;\n\n    /** If 'true' the toggle is checked (on). */\n    @Prop({mutable: true}) checked = false;\n\n    /** If 'true' the toggle is not be interacted with. */\n    @Prop() disabled = false;\n\n    /** Fires when the toggle changed */\n    @Event() checkChanged!: EventEmitter<DnnToggleChangeEventDetail>;\n\n    @Watch(\"checked\")\n    checkedChanged(isChecked: boolean){\n        this.checkChanged.emit({checked: isChecked});\n    }\n\n    render() {\n        return (\n            <Host>\n                <button disabled={this.disabled} class={{'checked': this.checked}}\n                    onClick={() => {\n                        if (!this.disabled) {\n                            this.checked = !this.checked;\n                        }\n                    }}\n                >\n                    <div class=\"handle\"></div>\n                </button>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -1,68 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-d53702a3.js');
-
-const dnnTreeviewItemCss = ":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}";
-
-const DnnTreeviewItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.userExpanded = index.createEvent(this, "userExpanded", 3);
-    this.userCollapsed = index.createEvent(this, "userCollapsed", 3);
-    /** 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 child = this.childElement.children[0];
-      const count = child.assignedElements().length;
-      if (count > 0) {
-        this.hasChildren = true;
-      }
-      if (this.expanded) {
-        this.expander.classList.add("expanded");
-        this.collapsible.expanded = false;
-        setTimeout(() => {
-          this.collapsible.expanded = true;
-        }, 300);
-      }
-    });
-  }
-  toggleCollapse() {
-    this.expanded = !this.expanded;
-    if (this.expanded) {
-      this.expander.classList.add("expanded");
-      this.userExpanded.emit();
-      return;
-    }
-    this.expander.classList.remove("expanded");
-    this.userCollapsed.emit();
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "expander", ref: el => this.expander = el }, this.hasChildren &&
-      index.h("button", { onClick: () => this.toggleCollapse() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M10 17l5-5-5-5v10z" }), index.h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))), index.h("div", { class: "item" }, index.h("div", { class: "item-slot" }, index.h("slot", null)), index.h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded }, index.h("div", { ref: el => this.childElement = el }, index.h("slot", { name: "children" }))))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "expanded": ["watchExpanded"]
-  }; }
-};
-DnnTreeviewItem.style = dnnTreeviewItemCss;
-
-exports.dnn_treeview_item = DnnTreeviewItem;
-
-//# sourceMappingURL=dnn-treeview-item.cjs.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"dnn-treeview-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,u6BAAu6B;;MCWr7B,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,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACfA,oBACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAEpCA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,oBAAoB,GAAE,EAAAA,kBAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACNA,iBAAK,KAAK,EAAC,MAAM,IACfA,iBAAK,KAAK,EAAC,WAAW,IACpBA,qBAAa,CACT,EACNA,6BAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxEA,iBAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,IACpCA,kBAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;;;;","names":["h","Host"],"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 {\n  display: flex;\n  overflow: visible;\n}\n.expander{\n  width: 24px;\n  height: 24px;\n  button{\n    transition: all 150ms ease-in-out;\n    background-color:transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    height: 1em;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    position: relative;\n    top: 2px;\n    svg{\n      :first-child{\n        transition: all 150ms ease-in-out;\n        fill: white;\n        stroke: black\n      }\n    }\n  }\n  &.expanded{\n    button{\n      transform: rotate(45deg);\n      svg{\n        :first-child{\n          fill: black;\n          stroke: black;\n        }\n      }\n    }\n  }\n}\ndiv.item{\n  .item-slot{\n    display: flex;\n    align-items: center;\n    gap: 0.25em;\n    min-height: 24px;\n  }\n  div.children{\n    overflow: hidden;\n    height:0;\n    transition: all 150ms ease-in-out;\n  }\n}","import { Component, Host, h, Prop, State, Element, Event, EventEmitter, Watch } from '@stencil/core';\n\n/** \n * @slot - The content of this node.\n * @slot children - The content nested under this node.\n*/\n@Component({\n  tag: 'dnn-treeview-item',\n  styleUrl: 'dnn-treeview-item.scss',\n  shadow: true,\n})\nexport class DnnTreeviewItem {\n  \n  private expander!: HTMLDivElement;\n\n  @Element() el!: HTMLDnnTreeviewItemElement;\n  \n  /** Defines if the current node is expanded.  */\n  @Prop({mutable: true, reflect: true}) expanded: boolean = false;\n\n  /** Fires when the user expands a node. */\n  @Event({bubbles: false}) userExpanded: EventEmitter<void>;\n\n  /** Fires when the user collapses a node. */\n  @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\n\n  /** Manages state for whether or not item has children. */\n  @State() hasChildren: boolean = false;\n\n  /** Watch expanded Prop */\n  @Watch('expanded')\n  watchExpanded(expanded: boolean) {\n    if (expanded) {\n      this.expander.classList.add(\"expanded\");\n      this.collapsible.expanded = true;\n      return;\n    }\n    \n    this.expander.classList.remove(\"expanded\");\n    this.collapsible.expanded = false;\n  }\n      \n  \n  private childElement!: HTMLDivElement;\n  private collapsible!: HTMLDnnCollapsibleElement;\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      const child = this.childElement.children[0] as HTMLSlotElement;\n      const count = child.assignedElements().length\n      if (count > 0){\n        this.hasChildren = true;\n      }\n      if (this.expanded){\n        this.expander.classList.add(\"expanded\");\n        this.collapsible.expanded = false;\n        setTimeout(() => {\n          this.collapsible.expanded = true;\n        }, 300);\n      }\n    });\n  }\n\n  private toggleCollapse(): void {\n    this.expanded = !this.expanded;\n    if (this.expanded){\n      this.expander.classList.add(\"expanded\");\n      this.userExpanded.emit();\n      return;\n    }\n\n    this.expander.classList.remove(\"expanded\");\n    this.userCollapsed.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"expander\" ref={el => this.expander = el}>\n          {this.hasChildren &&\n            <button\n              onClick={() => this.toggleCollapse()}\n            >\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>\n            </button>\n          }\n        </div>\n        <div class=\"item\">\n          <div class=\"item-slot\">\n            <slot></slot>\n          </div>\n          <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\n            <div ref={el => this.childElement = el}>\n              <slot name=\"children\"></slot>\n            </div>\n          </dnn-collapsible>\n          </div>\n      </Host>\n    );\n  }\n}\n\nexport interface ExpandedToggledEvent{\n  state: \"expanded\" | \"collapsed\";\n  height: number;\n}"],"version":3}

package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js

@@ -1,124 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-d53702a3.js');
-
-const dnnVerticalOverflowMenuCss = ":host{--background-color:var(--dnn-color-primary-contrast, white);--foreground-color:var(--dnn-color-primary, #3792ED);display:block}.menu-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;background-color:var(--background-color)}.menu-container .menu{margin:0.5em;display:-ms-flexbox;display:flex;gap:1em;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;white-space:nowrap;width:100%}.menu-container .overflow{margin-left:auto;position:relative}.menu-container .overflow button{cursor:pointer;padding:0;margin:0;background-color:transparent;border:none}.menu-container .overflow button svg{fill:var(--foreground-color)}.menu-container .overflow .dropdown{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;white-space:nowrap;right:0;-webkit-transition:100ms ease-in-out;transition:100ms ease-in-out;height:0;overflow:hidden}.menu-container .overflow .dropdown.visible{padding:1em;gap:0.5em;background-color:var(--background-color);-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7);box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7)}";
-
-const DnnVerticalOverflowMenu = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.showDropdownButton = false;
-    this.showDropdownMenu = false;
-    this.previousMenuWidth = 0;
-  }
-  componentDidRender() {
-    requestAnimationFrame(() => {
-      this.moveItemsToDropDownIfNecessery();
-      this.resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-          if (entry.contentRect.width < this.previousMenuWidth) {
-            this.moveItemsToDropDownIfNecessery();
-          }
-          if (this.previousMenuWidth > 0 && entry.contentRect.width > this.previousMenuWidth) {
-            this.moveItemsToMenuIfPossible();
-          }
-          this.previousMenuWidth = entry.contentRect.width;
-        }
-      });
-      this.resizeObserver.observe(this.element);
-    });
-  }
-  moveItemsToDropDownIfNecessery() {
-    const menuItems = Array.from(this.menu.querySelector("slot").assignedElements());
-    const availableWidth = this.menu.getBoundingClientRect().width;
-    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize) * 2;
-    menuItems.forEach(item => neededWidth += this.getFullWidth(item));
-    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);
-    if (neededWidth > availableWidth) {
-      this.showDropdownButton = true;
-      var lastItem = menuItems[menuItems.length - 1];
-      if (this.dropdown == undefined) {
-        return;
-      }
-      lastItem.slot = "dropdown";
-      this.moveItemsToDropDownIfNecessery();
-    }
-  }
-  moveItemsToMenuIfPossible() {
-    if (this.dropdown == undefined || !this.dropdown.hasChildNodes()) {
-      return;
-    }
-    const menuItems = Array.from(this.menu.querySelector("slot").assignedElements());
-    const availableWidth = this.menu.getBoundingClientRect().width;
-    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize) * 2;
-    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);
-    menuItems.forEach(item => neededWidth += this.getFullWidth(item));
-    const firstItem = this.dropdown.querySelector("slot").assignedElements()[0];
-    if (firstItem != undefined) {
-      neededWidth += this.getFullWidth(firstItem);
-    }
-    if (neededWidth < availableWidth) {
-      if (firstItem != undefined) {
-        firstItem.slot = "";
-      }
-      if (firstItem == undefined) {
-        this.dropdown.classList.remove("visible");
-        this.showDropdownMenu = false;
-        this.showDropdownButton = false;
-      }
-    }
-  }
-  getFullWidth(item) {
-    var width = item.getBoundingClientRect().width;
-    var styles = getComputedStyle(item);
-    width += parseFloat(styles.marginLeft);
-    width += parseFloat(styles.marginRight);
-    width += parseFloat(styles.paddingLeft);
-    width += parseFloat(styles.paddingRight);
-    return width;
-  }
-  toggleOverflowMenu() {
-    this.showDropdownMenu = !this.showDropdownMenu;
-    if (this.showDropdownMenu) {
-      this.dropdown.classList.add("visible");
-      let contentHeight = 0;
-      const items = Array.from(this.dropdown.querySelector("slot").assignedElements());
-      items.forEach(item => contentHeight += item.getBoundingClientRect().height);
-      const emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize);
-      const gapsHeight = emHeight * (this.dropdown.children.length - 1) / 2;
-      contentHeight += gapsHeight;
-      const marginHeight = emHeight * 2;
-      contentHeight += marginHeight;
-      this.dropdown.style.height = `${contentHeight}px`;
-      const dismissMenu = (e) => {
-        const buttonRect = this.button.getBoundingClientRect();
-        if (e.clientX < buttonRect.left ||
-          e.clientX > buttonRect.right ||
-          e.clientY < buttonRect.top ||
-          e.clientY > buttonRect.bottom) {
-          this.toggleOverflowMenu();
-        }
-        document.removeEventListener("click", dismissMenu);
-      };
-      setTimeout(() => {
-        document.addEventListener("click", dismissMenu, false);
-      }, 100);
-    }
-    else {
-      this.dropdown.classList.remove("visible");
-      this.dropdown.style.height = "0px";
-    }
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "menu-container" }, index.h("div", { class: "menu", ref: el => this.menu = el }, index.h("slot", null)), this.showDropdownButton &&
-      index.h("div", { class: "overflow" }, index.h("button", { ref: el => this.button = el, class: "icon", onClick: () => this.toggleOverflowMenu() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }))), index.h("div", { class: "dropdown", ref: el => this.dropdown = el }, index.h("slot", { name: "dropdown" }))))));
-  }
-  get element() { return index.getElement(this); }
-};
-DnnVerticalOverflowMenu.style = dnnVerticalOverflowMenuCss;
-
-exports.dnn_vertical_overflow_menu = DnnVerticalOverflowMenu;
-
-//# sourceMappingURL=dnn-vertical-overflow-menu.cjs.entry.js.map

package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dnn-vertical-overflow-menu.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.scss?tag=dnn-vertical-overflow-menu&encapsulation=shadow","./src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.tsx"],"sourcesContent":[":host {\n  /**\n    * @prop --background-color:  Defines the menu background color.\n    * @prop --foreground-color: A color that contrasts with the background color.\n  */\n  --background-color: var(--dnn-color-primary-contrast, white);\n  --foreground-color: var(--dnn-color-primary, #3792ED);\n\n  display: block;\n}\n\n.menu-container{\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  background-color: var(--background-color);\n  .menu{\n    margin: 0.5em;\n    display: flex;\n    gap: 1em;\n    justify-content: flex-start;\n    align-items: center;\n    white-space: nowrap;\n    width: 100%;\n  }\n  .overflow {\n    margin-left: auto;\n    position: relative;\n    button{\n      cursor: pointer;\n      svg{\n        fill: var(--foreground-color);\n      }\n      padding: 0;\n      margin: 0;\n      background-color: transparent;\n      border: none;\n    }\n    .dropdown{\n      position:absolute;\n      display: flex;\n      flex-direction: column;\n      white-space: nowrap;\n      right: 0;\n      transition: 100ms ease-in-out;\n      height: 0;\n      overflow: hidden;\n      &.visible{\n        padding: 1em;\n        gap: 0.5em;\n        background-color: var(--background-color);\n        box-shadow: 2px 2px 4px rgba(0,0,0,0.7);\n      }\n    }\n  }\n}\n","import { Component, Element, Host, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'dnn-vertical-overflow-menu',\n  styleUrl: 'dnn-vertical-overflow-menu.scss',\n  shadow: true,\n})\nexport class DnnVerticalOverflowMenu {\n\n  @Element() element!: HTMLDnnVerticalOverflowMenuElement;\n  \n  @State() showDropdownButton = false;\n  @State() showDropdownMenu = false;\n\n  private menu!: HTMLDivElement;\n  private dropdown: HTMLDivElement;\n  private resizeObserver: ResizeObserver;\n  private button!: HTMLButtonElement;\n  private previousMenuWidth = 0;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.moveItemsToDropDownIfNecessery();\n      this.resizeObserver = new ResizeObserver(entries => {\n        for (let entry of entries){\n          if (entry.contentRect.width < this.previousMenuWidth){\n            this.moveItemsToDropDownIfNecessery()\n          }\n          if (this.previousMenuWidth > 0 && entry.contentRect.width > this.previousMenuWidth){\n            this.moveItemsToMenuIfPossible();\n          }\n          this.previousMenuWidth = entry.contentRect.width;\n        }\n      });\n      this.resizeObserver.observe(this.element);\n    });\n  }\n\n  private moveItemsToDropDownIfNecessery(){\n    const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\n    const availableWidth = this.menu.getBoundingClientRect().width;\n    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)*2;\n    menuItems.forEach(item => neededWidth += this.getFullWidth(item));\n    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);\n    if (neededWidth > availableWidth){\n      this.showDropdownButton = true;\n      var lastItem = menuItems[menuItems.length -1];\n      if (this.dropdown == undefined){\n        return;\n      }\n      lastItem.slot = \"dropdown\";\n      this.moveItemsToDropDownIfNecessery();\n    }\n  }\n  \n  private moveItemsToMenuIfPossible(){\n    if (this.dropdown == undefined || !this.dropdown.hasChildNodes()){\n      return;\n    }\n    const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\n    const availableWidth = this.menu.getBoundingClientRect().width;\n    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)*2;\n    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);\n    menuItems.forEach(item => neededWidth += this.getFullWidth(item));\n    const firstItem = this.dropdown.querySelector(\"slot\").assignedElements()[0];\n    if (firstItem != undefined){\n      neededWidth += this.getFullWidth(firstItem);\n    }\n\n    if (neededWidth < availableWidth){\n      if (firstItem != undefined){\n        firstItem.slot = \"\";\n      }\n      if(firstItem == undefined){\n        this.dropdown.classList.remove(\"visible\");\n        this.showDropdownMenu = false;\n        this.showDropdownButton = false;\n      }\n    }    \n  }\n\n  private getFullWidth(item: Element) {\n    var width = item.getBoundingClientRect().width;\n    var styles = getComputedStyle(item);\n    width += parseFloat(styles.marginLeft);\n    width += parseFloat(styles.marginRight);\n    width += parseFloat(styles.paddingLeft);\n    width += parseFloat(styles.paddingRight);\n    return width;\n  }\n\n  private toggleOverflowMenu(): void {\n    this.showDropdownMenu = !this.showDropdownMenu;\n    if (this.showDropdownMenu){\n      this.dropdown.classList.add(\"visible\");\n      let contentHeight = 0;\n      const items = Array.from(this.dropdown.querySelector(\"slot\").assignedElements());\n      items.forEach(item => contentHeight += item.getBoundingClientRect().height);\n      const emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize);\n      const gapsHeight = emHeight * (this.dropdown.children.length - 1) / 2;\n      contentHeight += gapsHeight;\n      const marginHeight = emHeight * 2;\n      contentHeight += marginHeight;\n      this.dropdown.style.height = `${contentHeight}px`;\n      const dismissMenu = (e: MouseEvent) => {\n        const buttonRect = this.button.getBoundingClientRect();\n        if (\n          e.clientX < buttonRect.left ||\n          e.clientX > buttonRect.right ||\n          e.clientY < buttonRect.top ||\n          e.clientY > buttonRect.bottom){\n            this.toggleOverflowMenu();\n          }\n          document.removeEventListener(\"click\", dismissMenu);\n      };\n      setTimeout(() => {\n        document.addEventListener(\"click\", dismissMenu, false);\n      }, 100);\n    }\n    else{\n      this.dropdown.classList.remove(\"visible\");\n      this.dropdown.style.height = \"0px\";\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"menu-container\">\n          <div class=\"menu\" ref={el => this.menu = el}>\n            <slot></slot>\n          </div>\n            {this.showDropdownButton &&\n              <div class=\"overflow\">\n                <button\n                  ref={el => this.button = el}\n                  class=\"icon\"\n                  onClick={() => this.toggleOverflowMenu()}>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>\n                </button>\n                <div class=\"dropdown\" ref={el => this.dropdown = el}>\n                  <slot name=\"dropdown\"></slot>\n                </div>\n              </div>\n            }\n          </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,133 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-d53702a3.js');
-const mouseUtilities = require('./mouseUtilities-ecd5ecf7.js');
-
-const dnnVerticalSplitviewCss = ":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}";
-
-const DnnVerticalSplitview = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.widthChanged = index.createEvent(this, "widthChanged", 7);
-    /** The width of the splitter area. */
-    this.splitterWidth = 16;
-    /** The percentage position of the splitter in the container. */
-    this.splitWidthPercentage = 30;
-    this.leftWidth = 0;
-    this.rightWidth = 0;
-  }
-  /** Sets the width percentage of the divider */
-  async setSplitWidthPercentage(newWidth) {
-    const panes = this.element.shadowRoot.querySelectorAll(".pane");
-    requestAnimationFrame(() => {
-      panes.forEach(pane => pane.classList.add("transition"));
-      this.splitter.classList.add("transition");
-      requestAnimationFrame(() => {
-        const fullWidth = this.element.getBoundingClientRect().width;
-        let newLeft = fullWidth * newWidth / 100;
-        if (newLeft < 0) {
-          newLeft = 0;
-        }
-        if (newLeft > fullWidth) {
-          newLeft = fullWidth;
-        }
-        this.leftWidth = newLeft;
-        this.rightWidth = fullWidth - newLeft;
-        setTimeout(() => {
-          panes.forEach(pane => pane.classList.remove("transition"));
-          this.splitter.classList.remove("transition");
-        }, 300);
-      });
-    });
-  }
-  /** Gets the current divider position percentage. */
-  async getSplitWidthPercentage() {
-    const fullWidth = this.element.getBoundingClientRect().width;
-    return this.leftWidth / fullWidth;
-  }
-  componentDidLoad() {
-    requestAnimationFrame(() => {
-      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) => {
-      requestAnimationFrame(() => {
-        let fullWidth = this.element.getBoundingClientRect().width;
-        let { movementX } = mouseUtilities.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);
-      document.removeEventListener("touchmove", handleDrag);
-      const fullWidth = this.element.getBoundingClientRect().width;
-      const newPercentage = this.leftWidth / fullWidth * 100;
-      this.widthChanged.emit(newPercentage);
-    };
-    document.addEventListener("mouseup", handleDragFinished);
-    document.addEventListener("touchend", handleDragFinished);
-    document.addEventListener("mousemove", handleDrag);
-    document.addEventListener("touchmove", handleDrag);
-  }
-  handleKeyDown(e) {
-    let movementX = 0;
-    switch (e.key) {
-      case "ArrowLeft":
-        movementX = -10;
-        break;
-      case "ArrowRight":
-        movementX = 10;
-        break;
-      default:
-        return;
-    }
-    if (e.shiftKey) {
-      movementX = movementX * 10;
-    }
-    const 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 - this.leftWidth;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "left pane", style: {
-        width: `${this.leftWidth}px`,
-      } }, index.h("slot", { name: "left" })), index.h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), ref: el => this.splitter = el, style: {
-        minWidth: `${this.splitterWidth.toString()}px`,
-        left: `${this.leftWidth - 2}px`,
-      } }, index.h("slot", null)), index.h("div", { class: "right pane", style: {
-        width: `${this.rightWidth}px`,
-      } }, index.h("slot", { name: "right" }))));
-  }
-  get element() { return index.getElement(this); }
-};
-DnnVerticalSplitview.style = dnnVerticalSplitviewCss;
-
-exports.dnn_vertical_splitview = DnnVerticalSplitview;
-
-//# sourceMappingURL=dnn-vertical-splitview.cjs.entry.js.map

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

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

package/dist/cjs/dom-14886762.js

@@ -1,77 +0,0 @@
-'use strict';
-
-/*
- Stencil Client Patch Browser v2.14.2 | MIT Licensed | https://stenciljs.com
- */
-(function(){
-var aa=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function g(a){var b=aa.has(a);a=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(a);return !b&&a}function l(a){var b=a.isConnected;if(void 0!==b)return b;for(;a&&!(a.__CE_isImportDocument||a instanceof Document);)a=a.parentNode||(window.ShadowRoot&&a instanceof ShadowRoot?a.host:void 0);return !(!a||!(a.__CE_isImportDocument||a instanceof Document))}
-  function n(a,b){for(;b&&b!==a&&!b.nextSibling;)b=b.parentNode;return b&&b!==a?b.nextSibling:null}
-  function p(a,b,d){d=void 0===d?new Set:d;for(var c=a;c;){if(c.nodeType===Node.ELEMENT_NODE){var e=c;b(e);var f=e.localName;if("link"===f&&"import"===e.getAttribute("rel")){c=e.import;if(c instanceof Node&&!d.has(c))for(d.add(c),c=c.firstChild;c;c=c.nextSibling)p(c,b,d);c=n(a,e);continue}else if("template"===f){c=n(a,e);continue}if(e=e.__CE_shadowRoot)for(e=e.firstChild;e;e=e.nextSibling)p(e,b,d);}c=c.firstChild?c.firstChild:n(a,c);}}function r(a,b,d){a[b]=d;}function u(){this.a=new Map;this.g=new Map;this.c=[];this.f=[];this.b=!1;}function ba(a,b,d){a.a.set(b,d);a.g.set(d.constructorFunction,d);}function ca(a,b){a.b=!0;a.c.push(b);}function da(a,b){a.b=!0;a.f.push(b);}function v(a,b){a.b&&p(b,function(b){return w(a,b)});}function w(a,b){if(a.b&&!b.__CE_patched){b.__CE_patched=!0;for(var d=0;d<a.c.length;d++)a.c[d](b);for(d=0;d<a.f.length;d++)a.f[d](b);}}
-  function x(a,b){var d=[];p(b,function(b){return d.push(b)});for(b=0;b<d.length;b++){var c=d[b];1===c.__CE_state?a.connectedCallback(c):y(a,c);}}function z(a,b){var d=[];p(b,function(b){return d.push(b)});for(b=0;b<d.length;b++){var c=d[b];1===c.__CE_state&&a.disconnectedCallback(c);}}
-  function A(a,b,d){d=void 0===d?{}:d;var c=d.u||new Set,e=d.i||function(b){return y(a,b)},f=[];p(b,function(b){if("link"===b.localName&&"import"===b.getAttribute("rel")){var d=b.import;d instanceof Node&&(d.__CE_isImportDocument=!0,d.__CE_hasRegistry=!0);d&&"complete"===d.readyState?d.__CE_documentLoadHandled=!0:b.addEventListener("load",function(){var d=b.import;if(!d.__CE_documentLoadHandled){d.__CE_documentLoadHandled=!0;var f=new Set(c);f.delete(d);A(a,d,{u:f,i:e});}});}else f.push(b);},c);if(a.b)for(b=
-  0;b<f.length;b++)w(a,f[b]);for(b=0;b<f.length;b++)e(f[b]);}
-  function y(a,b){if(void 0===b.__CE_state){var d=b.ownerDocument;if(d.defaultView||d.__CE_isImportDocument&&d.__CE_hasRegistry)if(d=a.a.get(b.localName)){d.constructionStack.push(b);var c=d.constructorFunction;try{try{if(new c!==b)throw Error("The custom element constructor did not produce the element being upgraded.");}finally{d.constructionStack.pop();}}catch(t){throw b.__CE_state=2,t;}b.__CE_state=1;b.__CE_definition=d;if(d.attributeChangedCallback)for(d=d.observedAttributes,c=0;c<d.length;c++){var e=
-  d[c],f=b.getAttribute(e);null!==f&&a.attributeChangedCallback(b,e,null,f,null);}l(b)&&a.connectedCallback(b);}}}u.prototype.connectedCallback=function(a){var b=a.__CE_definition;b.connectedCallback&&b.connectedCallback.call(a);};u.prototype.disconnectedCallback=function(a){var b=a.__CE_definition;b.disconnectedCallback&&b.disconnectedCallback.call(a);};
-  u.prototype.attributeChangedCallback=function(a,b,d,c,e){var f=a.__CE_definition;f.attributeChangedCallback&&-1<f.observedAttributes.indexOf(b)&&f.attributeChangedCallback.call(a,b,d,c,e);};function B(a){var b=document;this.c=a;this.a=b;this.b=void 0;A(this.c,this.a);"loading"===this.a.readyState&&(this.b=new MutationObserver(this.f.bind(this)),this.b.observe(this.a,{childList:!0,subtree:!0}));}function C(a){a.b&&a.b.disconnect();}B.prototype.f=function(a){var b=this.a.readyState;"interactive"!==b&&"complete"!==b||C(this);for(b=0;b<a.length;b++)for(var d=a[b].addedNodes,c=0;c<d.length;c++)A(this.c,d[c]);};function ea(){var a=this;this.b=this.a=void 0;this.c=new Promise(function(b){a.b=b;a.a&&b(a.a);});}function D(a){if(a.a)throw Error("Already resolved.");a.a=void 0;a.b&&a.b(void 0);}function E(a){this.c=!1;this.a=a;this.j=new Map;this.f=function(b){return b()};this.b=!1;this.g=[];this.o=new B(a);}
-  E.prototype.l=function(a,b){var d=this;if(!(b instanceof Function))throw new TypeError("Custom element constructors must be functions.");if(!g(a))throw new SyntaxError("The element name '"+a+"' is not valid.");if(this.a.a.get(a))throw Error("A custom element with name '"+a+"' has already been defined.");if(this.c)throw Error("A custom element is already being defined.");this.c=!0;try{var c=function(b){var a=e[b];if(void 0!==a&&!(a instanceof Function))throw Error("The '"+b+"' callback must be a function.");
-  return a},e=b.prototype;if(!(e instanceof Object))throw new TypeError("The custom element constructor's prototype is not an object.");var f=c("connectedCallback");var t=c("disconnectedCallback");var k=c("adoptedCallback");var h=c("attributeChangedCallback");var m=b.observedAttributes||[];}catch(q){return}finally{this.c=!1;}b={localName:a,constructorFunction:b,connectedCallback:f,disconnectedCallback:t,adoptedCallback:k,attributeChangedCallback:h,observedAttributes:m,constructionStack:[]};ba(this.a,
-  a,b);this.g.push(b);this.b||(this.b=!0,this.f(function(){return fa(d)}));};E.prototype.i=function(a){A(this.a,a);};
-  function fa(a){if(!1!==a.b){a.b=!1;for(var b=a.g,d=[],c=new Map,e=0;e<b.length;e++)c.set(b[e].localName,[]);A(a.a,document,{i:function(b){if(void 0===b.__CE_state){var e=b.localName,f=c.get(e);f?f.push(b):a.a.a.get(e)&&d.push(b);}}});for(e=0;e<d.length;e++)y(a.a,d[e]);for(;0<b.length;){var f=b.shift();e=f.localName;f=c.get(f.localName);for(var t=0;t<f.length;t++)y(a.a,f[t]);(e=a.j.get(e))&&D(e);}}}E.prototype.get=function(a){if(a=this.a.a.get(a))return a.constructorFunction};
-  E.prototype.m=function(a){if(!g(a))return Promise.reject(new SyntaxError("'"+a+"' is not a valid custom element name."));var b=this.j.get(a);if(b)return b.c;b=new ea;this.j.set(a,b);this.a.a.get(a)&&!this.g.some(function(b){return b.localName===a})&&D(b);return b.c};E.prototype.s=function(a){C(this.o);var b=this.f;this.f=function(d){return a(function(){return b(d)})};};window.CustomElementRegistry=E;E.prototype.define=E.prototype.l;E.prototype.upgrade=E.prototype.i;E.prototype.get=E.prototype.get;
-  E.prototype.whenDefined=E.prototype.m;E.prototype.polyfillWrapFlushCallback=E.prototype.s;var F=window.Document.prototype.createElement,G=window.Document.prototype.createElementNS,ha=window.Document.prototype.importNode,ia=window.Document.prototype.prepend,ja=window.Document.prototype.append,ka=window.DocumentFragment.prototype.prepend,la=window.DocumentFragment.prototype.append,H=window.Node.prototype.cloneNode,I=window.Node.prototype.appendChild,J=window.Node.prototype.insertBefore,K=window.Node.prototype.removeChild,L=window.Node.prototype.replaceChild,M=Object.getOwnPropertyDescriptor(window.Node.prototype,
-  "textContent"),N=window.Element.prototype.attachShadow,O=Object.getOwnPropertyDescriptor(window.Element.prototype,"innerHTML"),P=window.Element.prototype.getAttribute,Q=window.Element.prototype.setAttribute,R=window.Element.prototype.removeAttribute,S=window.Element.prototype.getAttributeNS,T=window.Element.prototype.setAttributeNS,U=window.Element.prototype.removeAttributeNS,ma=window.Element.prototype.insertAdjacentElement,na=window.Element.prototype.insertAdjacentHTML,oa=window.Element.prototype.prepend,
-  pa=window.Element.prototype.append,V=window.Element.prototype.before,qa=window.Element.prototype.after,ra=window.Element.prototype.replaceWith,sa=window.Element.prototype.remove,ta=window.HTMLElement,W=Object.getOwnPropertyDescriptor(window.HTMLElement.prototype,"innerHTML"),ua=window.HTMLElement.prototype.insertAdjacentElement,va=window.HTMLElement.prototype.insertAdjacentHTML;var wa=new function(){};function xa(){var a=X;window.HTMLElement=function(){function b(){var b=this.constructor,c=a.g.get(b);if(!c)throw Error("The custom element being constructed was not registered with `customElements`.");var e=c.constructionStack;if(0===e.length)return e=F.call(document,c.localName),Object.setPrototypeOf(e,b.prototype),e.__CE_state=1,e.__CE_definition=c,w(a,e),e;c=e.length-1;var f=e[c];if(f===wa)throw Error("The HTMLElement constructor was either called reentrantly for this constructor or called multiple times.");
-  e[c]=wa;Object.setPrototypeOf(f,b.prototype);w(a,f);return f}b.prototype=ta.prototype;Object.defineProperty(b.prototype,"constructor",{writable:!0,configurable:!0,enumerable:!1,value:b});return b}();}function Y(a,b,d){function c(b){return function(d){for(var e=[],c=0;c<arguments.length;++c)e[c]=arguments[c];c=[];for(var f=[],m=0;m<e.length;m++){var q=e[m];q instanceof Element&&l(q)&&f.push(q);if(q instanceof DocumentFragment)for(q=q.firstChild;q;q=q.nextSibling)c.push(q);else c.push(q);}b.apply(this,e);for(e=0;e<f.length;e++)z(a,f[e]);if(l(this))for(e=0;e<c.length;e++)f=c[e],f instanceof Element&&x(a,f);}}void 0!==d.h&&(b.prepend=c(d.h));void 0!==d.append&&(b.append=c(d.append));}function ya(){var a=X;r(Document.prototype,"createElement",function(b){if(this.__CE_hasRegistry){var d=a.a.get(b);if(d)return new d.constructorFunction}b=F.call(this,b);w(a,b);return b});r(Document.prototype,"importNode",function(b,d){b=ha.call(this,b,!!d);this.__CE_hasRegistry?A(a,b):v(a,b);return b});r(Document.prototype,"createElementNS",function(b,d){if(this.__CE_hasRegistry&&(null===b||"http://www.w3.org/1999/xhtml"===b)){var c=a.a.get(d);if(c)return new c.constructorFunction}b=G.call(this,b,
-  d);w(a,b);return b});Y(a,Document.prototype,{h:ia,append:ja});}function za(){function a(a,c){Object.defineProperty(a,"textContent",{enumerable:c.enumerable,configurable:!0,get:c.get,set:function(a){if(this.nodeType===Node.TEXT_NODE)c.set.call(this,a);else {var d=void 0;if(this.firstChild){var e=this.childNodes,k=e.length;if(0<k&&l(this)){d=Array(k);for(var h=0;h<k;h++)d[h]=e[h];}}c.set.call(this,a);if(d)for(a=0;a<d.length;a++)z(b,d[a]);}}});}var b=X;r(Node.prototype,"insertBefore",function(a,c){if(a instanceof DocumentFragment){var e=Array.prototype.slice.apply(a.childNodes);
-  a=J.call(this,a,c);if(l(this))for(c=0;c<e.length;c++)x(b,e[c]);return a}e=l(a);c=J.call(this,a,c);e&&z(b,a);l(this)&&x(b,a);return c});r(Node.prototype,"appendChild",function(a){if(a instanceof DocumentFragment){var c=Array.prototype.slice.apply(a.childNodes);a=I.call(this,a);if(l(this))for(var e=0;e<c.length;e++)x(b,c[e]);return a}c=l(a);e=I.call(this,a);c&&z(b,a);l(this)&&x(b,a);return e});r(Node.prototype,"cloneNode",function(a){a=H.call(this,!!a);this.ownerDocument.__CE_hasRegistry?A(b,a):v(b,
-  a);return a});r(Node.prototype,"removeChild",function(a){var c=l(a),e=K.call(this,a);c&&z(b,a);return e});r(Node.prototype,"replaceChild",function(a,c){if(a instanceof DocumentFragment){var e=Array.prototype.slice.apply(a.childNodes);a=L.call(this,a,c);if(l(this))for(z(b,c),c=0;c<e.length;c++)x(b,e[c]);return a}e=l(a);var f=L.call(this,a,c),d=l(this);d&&z(b,c);e&&z(b,a);d&&x(b,a);return f});M&&M.get?a(Node.prototype,M):ca(b,function(b){a(b,{enumerable:!0,configurable:!0,get:function(){for(var a=[],
-  b=0;b<this.childNodes.length;b++){var f=this.childNodes[b];f.nodeType!==Node.COMMENT_NODE&&a.push(f.textContent);}return a.join("")},set:function(a){for(;this.firstChild;)K.call(this,this.firstChild);null!=a&&""!==a&&I.call(this,document.createTextNode(a));}});});}function Aa(a){function b(b){return function(e){for(var c=[],d=0;d<arguments.length;++d)c[d]=arguments[d];d=[];for(var k=[],h=0;h<c.length;h++){var m=c[h];m instanceof Element&&l(m)&&k.push(m);if(m instanceof DocumentFragment)for(m=m.firstChild;m;m=m.nextSibling)d.push(m);else d.push(m);}b.apply(this,c);for(c=0;c<k.length;c++)z(a,k[c]);if(l(this))for(c=0;c<d.length;c++)k=d[c],k instanceof Element&&x(a,k);}}var d=Element.prototype;void 0!==V&&(d.before=b(V));void 0!==V&&(d.after=b(qa));void 0!==ra&&
-  r(d,"replaceWith",function(b){for(var e=[],c=0;c<arguments.length;++c)e[c]=arguments[c];c=[];for(var d=[],k=0;k<e.length;k++){var h=e[k];h instanceof Element&&l(h)&&d.push(h);if(h instanceof DocumentFragment)for(h=h.firstChild;h;h=h.nextSibling)c.push(h);else c.push(h);}k=l(this);ra.apply(this,e);for(e=0;e<d.length;e++)z(a,d[e]);if(k)for(z(a,this),e=0;e<c.length;e++)d=c[e],d instanceof Element&&x(a,d);});void 0!==sa&&r(d,"remove",function(){var b=l(this);sa.call(this);b&&z(a,this);});}function Ba(){function a(a,b){Object.defineProperty(a,"innerHTML",{enumerable:b.enumerable,configurable:!0,get:b.get,set:function(a){var e=this,d=void 0;l(this)&&(d=[],p(this,function(a){a!==e&&d.push(a);}));b.set.call(this,a);if(d)for(var f=0;f<d.length;f++){var t=d[f];1===t.__CE_state&&c.disconnectedCallback(t);}this.ownerDocument.__CE_hasRegistry?A(c,this):v(c,this);return a}});}function b(a,b){r(a,"insertAdjacentElement",function(a,e){var d=l(e);a=b.call(this,a,e);d&&z(c,e);l(a)&&x(c,e);return a});}
-  function d(a,b){function e(a,b){for(var e=[];a!==b;a=a.nextSibling)e.push(a);for(b=0;b<e.length;b++)A(c,e[b]);}r(a,"insertAdjacentHTML",function(a,c){a=a.toLowerCase();if("beforebegin"===a){var d=this.previousSibling;b.call(this,a,c);e(d||this.parentNode.firstChild,this);}else if("afterbegin"===a)d=this.firstChild,b.call(this,a,c),e(this.firstChild,d);else if("beforeend"===a)d=this.lastChild,b.call(this,a,c),e(d||this.firstChild,null);else if("afterend"===a)d=this.nextSibling,b.call(this,a,c),e(this.nextSibling,
-  d);else throw new SyntaxError("The value provided ("+String(a)+") is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.");});}var c=X;N&&r(Element.prototype,"attachShadow",function(a){a=N.call(this,a);var b=c;if(b.b&&!a.__CE_patched){a.__CE_patched=!0;for(var e=0;e<b.c.length;e++)b.c[e](a);}return this.__CE_shadowRoot=a});O&&O.get?a(Element.prototype,O):W&&W.get?a(HTMLElement.prototype,W):da(c,function(b){a(b,{enumerable:!0,configurable:!0,get:function(){return H.call(this,!0).innerHTML},
-  set:function(a){var b="template"===this.localName,c=b?this.content:this,e=G.call(document,this.namespaceURI,this.localName);for(e.innerHTML=a;0<c.childNodes.length;)K.call(c,c.childNodes[0]);for(a=b?e.content:e;0<a.childNodes.length;)I.call(c,a.childNodes[0]);}});});r(Element.prototype,"setAttribute",function(a,b){if(1!==this.__CE_state)return Q.call(this,a,b);var e=P.call(this,a);Q.call(this,a,b);b=P.call(this,a);c.attributeChangedCallback(this,a,e,b,null);});r(Element.prototype,"setAttributeNS",function(a,
-  b,d){if(1!==this.__CE_state)return T.call(this,a,b,d);var e=S.call(this,a,b);T.call(this,a,b,d);d=S.call(this,a,b);c.attributeChangedCallback(this,b,e,d,a);});r(Element.prototype,"removeAttribute",function(a){if(1!==this.__CE_state)return R.call(this,a);var b=P.call(this,a);R.call(this,a);null!==b&&c.attributeChangedCallback(this,a,b,null,null);});r(Element.prototype,"removeAttributeNS",function(a,b){if(1!==this.__CE_state)return U.call(this,a,b);var d=S.call(this,a,b);U.call(this,a,b);var e=S.call(this,
-  a,b);d!==e&&c.attributeChangedCallback(this,b,d,e,a);});ua?b(HTMLElement.prototype,ua):ma?b(Element.prototype,ma):console.warn("Custom Elements: `Element#insertAdjacentElement` was not patched.");va?d(HTMLElement.prototype,va):na?d(Element.prototype,na):console.warn("Custom Elements: `Element#insertAdjacentHTML` was not patched.");Y(c,Element.prototype,{h:oa,append:pa});Aa(c);}var Z=window.customElements;if(!Z||Z.forcePolyfill||"function"!=typeof Z.define||"function"!=typeof Z.get){var X=new u;xa();ya();Y(X,DocumentFragment.prototype,{h:ka,append:la});za();Ba();document.__CE_hasRegistry=!0;var customElements=new E(X);Object.defineProperty(window,"customElements",{configurable:!0,enumerable:!0,value:customElements});}}).call(self);
-
-// Polyfill document.baseURI
-"string"!==typeof document.baseURI&&Object.defineProperty(Document.prototype,"baseURI",{enumerable:!0,configurable:!0,get:function(){var a=document.querySelector("base");return a&&a.href?a.href:document.URL}});
-
-// Polyfill CustomEvent
-"function"!==typeof window.CustomEvent&&(window.CustomEvent=function(c,a){a=a||{bubbles:!1,cancelable:!1,detail:void 0};var b=document.createEvent("CustomEvent");b.initCustomEvent(c,a.bubbles,a.cancelable,a.detail);return b},window.CustomEvent.prototype=window.Event.prototype);
-
-// Event.composedPath
-(function(b,c,d){b.composedPath||(b.composedPath=function(){if(this.path)return this.path;var a=this.target;for(this.path=[];null!==a.parentNode;)this.path.push(a),a=a.parentNode;this.path.push(c,d);return this.path});})(Event.prototype,document,window);
-
-/*!
-Element.closest and Element.matches
-https://github.com/jonathantneal/closest
-Creative Commons Zero v1.0 Universal
-*/
-(function(a){"function"!==typeof a.matches&&(a.matches=a.msMatchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||function(a){a=(this.document||this.ownerDocument).querySelectorAll(a);for(var b=0;a[b]&&a[b]!==this;)++b;return !!a[b]});"function"!==typeof a.closest&&(a.closest=function(a){for(var b=this;b&&1===b.nodeType;){if(b.matches(a))return b;b=b.parentNode;}return null});})(window.Element.prototype);
-
-/*!
-Element.getRootNode()
-*/
-(function(c){function d(a){a=b(a);return a&&11===a.nodeType?d(a.host):a}function b(a){return a&&a.parentNode?b(a.parentNode):a}"function"!==typeof c.getRootNode&&(c.getRootNode=function(a){return a&&a.composed?d(this):b(this)});})(Element.prototype);
-
-/*!
-Element.isConnected()
-*/
-(function(a){"isConnected"in a||Object.defineProperty(a,"isConnected",{configurable:!0,enumerable:!0,get:function(){var a=this.getRootNode({composed:!0});return a&&9===a.nodeType}});})(Element.prototype);
-
-/*!
-Element.remove()
-*/
-(function(b){b.forEach(function(a){a.hasOwnProperty("remove")||Object.defineProperty(a,"remove",{configurable:!0,enumerable:!0,writable:!0,value:function(){null!==this.parentNode&&this.parentNode.removeChild(this);}});});})([Element.prototype,CharacterData.prototype,DocumentType.prototype]);
-
-/*!
-Element.classList
-*/
-!function(e){'classList'in e||Object.defineProperty(e,"classList",{get:function(){var e=this,t=(e.getAttribute("class")||"").replace(/^\s+|\s$/g,"").split(/\s+/g);function n(){t.length>0?e.setAttribute("class",t.join(" ")):e.removeAttribute("class");}return ""===t[0]&&t.splice(0,1),t.toggle=function(e,i){void 0!==i?i?t.add(e):t.remove(e):-1!==t.indexOf(e)?t.splice(t.indexOf(e),1):t.push(e),n();},t.add=function(){for(var e=[].slice.call(arguments),i=0,s=e.length;i<s;i++)-1===t.indexOf(e[i])&&t.push(e[i]);n();},t.remove=function(){for(var e=[].slice.call(arguments),i=0,s=e.length;i<s;i++)-1!==t.indexOf(e[i])&&t.splice(t.indexOf(e[i]),1);n();},t.item=function(e){return t[e]},t.contains=function(e){return -1!==t.indexOf(e)},t.replace=function(e,i){-1!==t.indexOf(e)&&t.splice(t.indexOf(e),1,i),n();},t.value=e.getAttribute("class")||"",t}});}(Element.prototype);
-
-/*!
-DOMTokenList
-*/
-(function(b){try{document.body.classList.add();}catch(e){var c=b.add,d=b.remove;b.add=function(){for(var a=0;a<arguments.length;a++)c.call(this,arguments[a]);};b.remove=function(){for(var a=0;a<arguments.length;a++)d.call(this,arguments[a]);};}})(DOMTokenList.prototype);
-
-//# sourceMappingURL=dom-14886762.js.map