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

package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"dnn-treeview-item.js","sourceRoot":"","sources":["../../../src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"names":[],"mappings":"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","sourcesContent":["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,"file":"dnn-treeview-item.js","sourceRoot":"","sources":["../../../../src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"names":[],"mappings":"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","sourcesContent":["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}"]}

package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.stories.js

@@ -0,0 +1,36 @@
+import { html } from "lit-html";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import readme from './readme.md';
+export default {
+  title: "Elements/Treeview Item",
+  component: "dnn-treeview-item",
+  parameters: {
+    notes: readme,
+  },
+  argTypes: {
+    expanded: {
+      control: "boolean",
+    },
+  },
+};
+const Template = (args) => html `
+        <dnn-treeview-item
+            ?expanded=${ifDefined(args.expanded)}
+        >
+            <span>Root Item</span>
+            <dnn-treeview-item slot="children">
+                <span>Child 1</span>
+            </dnn-treeview-item>
+            <dnn-treeview-item slot="children">
+                <span>Child 2</span>
+            </dnn-treeview-item>
+            <dnn-treeview-item slot="children">
+                <span>Child 3</span>
+            </dnn-treeview-item>
+        </dnn-treeview-item>
+    `;
+export const TreeviewItem = Template.bind({});
+TreeviewItem.args = {
+  expanded: false,
+};
+//# sourceMappingURL=dnn-treeview-item.stories.js.map

package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-treeview-item.stories.js","sourceRoot":"","sources":["../../../../src/components/dnn-treeview-item/dnn-treeview-item.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACX,KAAK,EAAE,wBAAwB;EAC/B,SAAS,EAAE,mBAAmB;EAC9B,UAAU,EAAE;IACR,KAAK,EAAE,MAAM;GAChB;EACD,QAAQ,EAAE;IACN,QAAQ,EAAE;MACN,OAAO,EAAE,SAAS;KACrB;GACJ;CACI,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAEjB,EAAE,EAAE,CACD,IAAI,CAAA;;wBAEgB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;;;;;;;;;;KAa3C,CAAC;AAEN,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;EAChB,QAAQ,EAAE,KAAK;CAClB,CAAA","sourcesContent":["import { html } from \"lit-html\";\r\nimport { ifDefined } from 'lit-html/directives/if-defined';\r\nimport { Meta } from \"@storybook/web-components\";\r\nimport readme from './readme.md';\r\n\r\nexport default {\r\n    title: \"Elements/Treeview Item\",\r\n    component: \"dnn-treeview-item\",\r\n    parameters: {\r\n        notes: readme,\r\n    },\r\n    argTypes: {\r\n        expanded: {\r\n            control: \"boolean\",\r\n        },\r\n    },\r\n} as Meta;\r\n\r\nconst Template = (args: {\r\n    expanded: boolean,\r\n}) =>\r\n    html`\r\n        <dnn-treeview-item\r\n            ?expanded=${ifDefined(args.expanded)}\r\n        >\r\n            <span>Root Item</span>\r\n            <dnn-treeview-item slot=\"children\">\r\n                <span>Child 1</span>\r\n            </dnn-treeview-item>\r\n            <dnn-treeview-item slot=\"children\">\r\n                <span>Child 2</span>\r\n            </dnn-treeview-item>\r\n            <dnn-treeview-item slot=\"children\">\r\n                <span>Child 3</span>\r\n            </dnn-treeview-item>\r\n        </dnn-treeview-item>\r\n    `;\r\n\r\nexport const TreeviewItem = Template.bind({});\r\nTreeviewItem.args = {\r\n    expanded: false,\r\n}"]}

package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.css

@@ -1,11 +1,11 @@
 :host {
-  display: block;
-  /** Defines the menu background color. */
+  /**
+    * @prop --background-color:  Defines the menu background color.
+    * @prop --foreground-color: A color that contrasts with the background color.
+  */
   --background-color: var(--dnn-color-primary-contrast, white);
-  /** A color that contrasts well over the background color. */
-  --foreground-color: var(--dnn-color-primary, blue);
-  /** The color of the text. */
-  --text-color: #222;
+  --foreground-color: var(--dnn-color-primary, #3792ED);
+  display: block;
 }
 
 .menu-container {
@@ -13,7 +13,6 @@
   justify-content: flex-start;
   align-items: center;
   background-color: var(--background-color);
-  color: var(--text-color);
 }
 .menu-container .menu {
   margin: 0.5em;

package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js

@@ -1,132 +1,134 @@
-import { Component, Element, Host, h, State } from '@stencil/core';
-export class DnnVerticalOverflowMenu {
-  constructor() {
-    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);
-      var emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize) * 0.5;
-      var additionalHeight = emHeight * (this.dropdown.children.length - 1);
-      contentHeight += additionalHeight;
-      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 (h(Host, null,
-      h("div", { class: "menu-container" },
-        h("div", { class: "menu", ref: el => this.menu = el },
-          h("slot", null)),
-        this.showDropdownButton &&
-          h("div", { class: "overflow" },
-            h("button", { ref: el => this.button = el, class: "icon", onClick: () => this.toggleOverflowMenu() },
-              h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
-                h("path", { d: "M0 0h24v24H0z", fill: "none" }),
-                h("path", { d: "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" }))),
-            h("div", { class: "dropdown", ref: el => this.dropdown = el },
-              h("slot", { name: "dropdown" }))))));
-  }
-  static get is() { return "dnn-vertical-overflow-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dnn-vertical-overflow-menu.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dnn-vertical-overflow-menu.css"]
-  }; }
-  static get states() { return {
-    "showDropdownButton": {},
-    "showDropdownMenu": {}
-  }; }
-  static get elementRef() { return "element"; }
-}
+import { Component, Element, Host, h, State } from '@stencil/core';
+export class DnnVerticalOverflowMenu {
+  constructor() {
+    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 (h(Host, null,
+      h("div", { class: "menu-container" },
+        h("div", { class: "menu", ref: el => this.menu = el },
+          h("slot", null)),
+        this.showDropdownButton &&
+          h("div", { class: "overflow" },
+            h("button", { ref: el => this.button = el, class: "icon", onClick: () => this.toggleOverflowMenu() },
+              h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+                h("path", { d: "M0 0h24v24H0z", fill: "none" }),
+                h("path", { d: "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" }))),
+            h("div", { class: "dropdown", ref: el => this.dropdown = el },
+              h("slot", { name: "dropdown" }))))));
+  }
+  static get is() { return "dnn-vertical-overflow-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-vertical-overflow-menu.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-vertical-overflow-menu.css"]
+  }; }
+  static get states() { return {
+    "showDropdownButton": {},
+    "showDropdownMenu": {}
+  }; }
+  static get elementRef() { return "element"; }
+}
 //# sourceMappingURL=dnn-vertical-overflow-menu.js.map

package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dnn-vertical-overflow-menu.js","sourceRoot":"","sources":["../../../src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-vertical-overflow-menu',\r\n  styleUrl: 'dnn-vertical-overflow-menu.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnVerticalOverflowMenu {\r\n\r\n  @Element() element!: HTMLDnnVerticalOverflowMenuElement;\r\n  \r\n  @State() showDropdownButton = false;\r\n  @State() showDropdownMenu = false;\r\n\r\n  private menu!: HTMLDivElement;\r\n  private dropdown: HTMLDivElement;\r\n  private resizeObserver: ResizeObserver;\r\n  private button!: HTMLButtonElement;\r\n  private previousMenuWidth = 0;\r\n\r\n  componentDidRender() {\r\n    requestAnimationFrame(() => {\r\n      this.moveItemsToDropDownIfNecessery();\r\n      this.resizeObserver = new ResizeObserver(entries => {\r\n        for (let entry of entries){\r\n          if (entry.contentRect.width < this.previousMenuWidth){\r\n            this.moveItemsToDropDownIfNecessery()\r\n          }\r\n          if (this.previousMenuWidth > 0 && entry.contentRect.width > this.previousMenuWidth){\r\n            this.moveItemsToMenuIfPossible();\r\n          }\r\n          this.previousMenuWidth = entry.contentRect.width;\r\n        }\r\n      });\r\n      this.resizeObserver.observe(this.element);\r\n    });\r\n  }\r\n\r\n  private moveItemsToDropDownIfNecessery(){\r\n    const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\r\n    const availableWidth = this.menu.getBoundingClientRect().width;\r\n    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)*2;\r\n    menuItems.forEach(item => neededWidth += this.getFullWidth(item));\r\n    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);\r\n    if (neededWidth > availableWidth){\r\n      this.showDropdownButton = true;\r\n      var lastItem = menuItems[menuItems.length -1];\r\n      if (this.dropdown == undefined){\r\n        return;\r\n      }\r\n      lastItem.slot = \"dropdown\";\r\n      this.moveItemsToDropDownIfNecessery();\r\n    }\r\n  }\r\n  \r\n  private moveItemsToMenuIfPossible(){\r\n    if (this.dropdown == undefined || !this.dropdown.hasChildNodes()){\r\n      return;\r\n    }\r\n    const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\r\n    const availableWidth = this.menu.getBoundingClientRect().width;\r\n    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)*2;\r\n    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);\r\n    menuItems.forEach(item => neededWidth += this.getFullWidth(item));\r\n    const firstItem = this.dropdown.querySelector(\"slot\").assignedElements()[0];\r\n    if (firstItem != undefined){\r\n      neededWidth += this.getFullWidth(firstItem);\r\n    }\r\n\r\n    if (neededWidth < availableWidth){\r\n      if (firstItem != undefined){\r\n        firstItem.slot = \"\";\r\n      }\r\n      if(firstItem == undefined){\r\n        this.dropdown.classList.remove(\"visible\");\r\n        this.showDropdownMenu = false;\r\n        this.showDropdownButton = false;\r\n      }\r\n    }    \r\n  }\r\n\r\n  private getFullWidth(item: Element) {\r\n    var width = item.getBoundingClientRect().width;\r\n    var styles = getComputedStyle(item);\r\n    width += parseFloat(styles.marginLeft);\r\n    width += parseFloat(styles.marginRight);\r\n    width += parseFloat(styles.paddingLeft);\r\n    width += parseFloat(styles.paddingRight);\r\n    return width;\r\n  }\r\n\r\n  private toggleOverflowMenu(): void {\r\n    this.showDropdownMenu = !this.showDropdownMenu;\r\n    if (this.showDropdownMenu){\r\n      this.dropdown.classList.add(\"visible\");\r\n      let contentHeight = 0;\r\n      const items = Array.from(this.dropdown.querySelector(\"slot\").assignedElements());\r\n      items.forEach(item => contentHeight += item.getBoundingClientRect().height);\r\n      var emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize) * 0.5;\r\n      var additionalHeight = emHeight * (this.dropdown.children.length - 1);\r\n      contentHeight += additionalHeight;\r\n      this.dropdown.style.height = `${contentHeight}px`;\r\n      const dismissMenu = (e: MouseEvent) => {\r\n        const buttonRect = this.button.getBoundingClientRect();\r\n        if (\r\n          e.clientX < buttonRect.left ||\r\n          e.clientX > buttonRect.right ||\r\n          e.clientY < buttonRect.top ||\r\n          e.clientY > buttonRect.bottom){\r\n            this.toggleOverflowMenu();\r\n          }\r\n          document.removeEventListener(\"click\", dismissMenu);\r\n      };\r\n      setTimeout(() => {\r\n        document.addEventListener(\"click\", dismissMenu, false);\r\n      }, 100);\r\n    }\r\n    else{\r\n      this.dropdown.classList.remove(\"visible\");\r\n      this.dropdown.style.height = \"0px\";\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"menu-container\">\r\n          <div class=\"menu\" ref={el => this.menu = el}>\r\n            <slot></slot>\r\n          </div>\r\n            {this.showDropdownButton &&\r\n              <div class=\"overflow\">\r\n                <button\r\n                  ref={el => this.button = el}\r\n                  class=\"icon\"\r\n                  onClick={() => this.toggleOverflowMenu()}>\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"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>\r\n                </button>\r\n                <div class=\"dropdown\" ref={el => this.dropdown = el}>\r\n                  <slot name=\"dropdown\"></slot>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dnn-vertical-overflow-menu.js","sourceRoot":"","sources":["../../../../src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.stories.js

@@ -0,0 +1,60 @@
+import { html } from "lit-html";
+import readme from './readme.md';
+import { injectStyles } from "../../../.storybook/utilities";
+export default {
+  title: 'Elements/Vertical Overflow Menu',
+  component: 'dnn-vertical-overflow-menu',
+  parameters: {
+    notes: readme,
+  },
+  argTypes: {
+    '--background-color': {
+      control: 'color',
+    },
+    '--foreground-color': {
+      control: 'color',
+    },
+  }
+};
+const Template = (args, context) => html `
+<style type="text/css">
+    dnn-vertical-overflow-menu svg{
+        fill: #3792ED;
+    }
+    dnn-vertical-overflow-menu button{
+        display: flex;
+        align-items: center;
+    }
+    dnn-vertical-overflow-menu a{
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        color: black;
+    }
+</style>
+<dnn-vertical-overflow-menu
+    style=${injectStyles(args, context)}>
+    <button>
+        <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="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/></svg>
+        <span>Create a new item</span>
+        </button>
+    <a href="#">
+        <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="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
+        <span>Copy an item</span>
+    </a>
+    <a href="#">
+        <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"/><circle cx="6" cy="18" fill="none" r="2"/><circle cx="12" cy="12" fill="none" r=".5"/><circle cx="6" cy="6" fill="none" r="2"/><path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"/></svg>
+        <span>Cut an item</span>
+    </a>
+    <a href="#">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/></svg>
+        <span>Paste an item</span>
+    </a>
+    <a href="#">
+        <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="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>
+        <span>Save the item</span>
+    </a>
+</dnn-vertical-overflow-menu>
+    `;
+export const VerticalOverflowMenu = Template.bind({});
+//# sourceMappingURL=dnn-vertical-overflow-menu.stories.js.map

package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-vertical-overflow-menu.stories.js","sourceRoot":"","sources":["../../../../src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,eAAe;EACX,KAAK,EAAE,iCAAiC;EACxC,SAAS,EAAE,4BAA4B;EACvC,UAAU,EAAE;IACR,KAAK,EAAG,MAAM;GACjB;EACD,QAAQ,EAAE;IACN,oBAAoB,EAAE;MAClB,OAAO,EAAE,OAAO;KACnB;IACD,oBAAoB,EAAE;MAClB,OAAO,EAAE,OAAO;KACnB;GACJ;CACI,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAQ,EAAE,OAAO,EAAE,EAAE,CACnC,IAAI,CAAA;;;;;;;;;;;;;;;;;YAiBI,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsBlC,CAAC;AAEN,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { html } from \"lit-html\";\nimport { Meta } from \"@storybook/web-components\";\nimport readme from './readme.md';\nimport { injectStyles } from \"../../../.storybook/utilities\";\n\nexport default {\n    title: 'Elements/Vertical Overflow Menu',\n    component: 'dnn-vertical-overflow-menu',\n    parameters: {\n        notes:  readme,\n    },\n    argTypes: {\n        '--background-color': {\n            control: 'color',\n        },\n        '--foreground-color': {\n            control: 'color',\n        },\n    }\n} as Meta;\n\nconst Template = (args: {}, context) => \n    html`\n<style type=\"text/css\">\n    dnn-vertical-overflow-menu svg{\n        fill: #3792ED;\n    }\n    dnn-vertical-overflow-menu button{\n        display: flex;\n        align-items: center;\n    }\n    dnn-vertical-overflow-menu a{\n        display: flex;\n        align-items: center;\n        text-decoration: none;\n        color: black;\n    }\n</style>\n<dnn-vertical-overflow-menu\n    style=${injectStyles(args, context)}>\n    <button>\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=\"M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z\"/></svg>\n        <span>Create a new item</span>\n        </button>\n    <a href=\"#\">\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=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"/></svg>\n        <span>Copy an item</span>\n    </a>\n    <a href=\"#\">\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\"/><circle cx=\"6\" cy=\"18\" fill=\"none\" r=\"2\"/><circle cx=\"12\" cy=\"12\" fill=\"none\" r=\".5\"/><circle cx=\"6\" cy=\"6\" fill=\"none\" r=\"2\"/><path d=\"M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z\"/></svg>\n        <span>Cut an item</span>\n    </a>\n    <a href=\"#\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z\"/></svg>\n        <span>Paste an item</span>\n    </a>\n    <a href=\"#\">\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=\"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z\"/></svg>\n        <span>Save the item</span>\n    </a>\n</dnn-vertical-overflow-menu>\n    `;\n\nexport const VerticalOverflowMenu = Template.bind({});\n"]}

package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.css

@@ -1,11 +1,13 @@
 :host {
+  /**
+    * @prop --left-pane-background-color:  Allows customizing the left pane background-color
+    * @prop --right-pane-background-color: Allows customizing the right pane background-color
+  */
   display: flex;
   align-items: stretch;
   margin: 0 auto;
   position: relative;
-  /** @prop --left-pane-background-color:  Allows customizing the left pane background-color */
   --left-pane-background-color: transparent;
-  /** @prop --right-pane-background-color: Allows customizing the right pane background-color */
   --right-pane-background-color: transparent;
 }