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

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

@@ -1 +1 @@
-{"file":"dnn-vertical-overflow-menu.entry.esm.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,itCAAitC;;ICOvuC,uBAAuB;EALpC;;IASW,uBAAkB,GAAG,KAAK,CAAC;IAC3B,qBAAgB,GAAG,KAAK,CAAC;IAM1B,sBAAiB,GAAG,CAAC,CAAC;GAiI/B;EA/HC,kBAAkB;IAChB,qBAAqB,CAAC;MACpB,IAAI,CAAC,8BAA8B,EAAE,CAAC;MACtC,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO;QAC9C,KAAK,IAAI,KAAK,IAAI,OAAO,EAAC;UACxB,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAC;YACnD,IAAI,CAAC,8BAA8B,EAAE,CAAA;WACtC;UACD,IAAI,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAC;YACjF,IAAI,CAAC,yBAAyB,EAAE,CAAC;WAClC;UACD,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;SAClD;OACF,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC3C,CAAC,CAAC;GACJ;EAEO,8BAA8B;IACpC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACjF,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAC/D,IAAI,WAAW,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAC,CAAC,CAAC;IACxE,SAAS,CAAC,OAAO,CAAC,IAAI,IAAI,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;IAClE,WAAW,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC5F,IAAI,WAAW,GAAG,cAAc,EAAC;MAC/B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;MAC/B,IAAI,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAE,CAAC,CAAC,CAAC;MAC9C,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAC;QAC7B,OAAO;OACR;MACD,QAAQ,CAAC,IAAI,GAAG,UAAU,CAAC;MAC3B,IAAI,CAAC,8BAA8B,EAAE,CAAC;KACvC;GACF;EAEO,yBAAyB;IAC/B,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAC;MAC/D,OAAO;KACR;IACD,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACjF,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAC/D,IAAI,WAAW,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAC,CAAC,CAAC;IACxE,WAAW,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC5F,SAAS,CAAC,OAAO,CAAC,IAAI,IAAI,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;IAClE,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5E,IAAI,SAAS,IAAI,SAAS,EAAC;MACzB,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;KAC7C;IAED,IAAI,WAAW,GAAG,cAAc,EAAC;MAC/B,IAAI,SAAS,IAAI,SAAS,EAAC;QACzB,SAAS,CAAC,IAAI,GAAG,EAAE,CAAC;OACrB;MACD,IAAG,SAAS,IAAI,SAAS,EAAC;QACxB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAC1C,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;OACjC;KACF;GACF;EAEO,YAAY,CAAC,IAAa;IAChC,IAAI,KAAK,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAC/C,IAAI,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACpC,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IACvC,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IACzC,OAAO,KAAK,CAAC;GACd;EAEO,kBAAkB;IACxB,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;IAC/C,IAAI,IAAI,CAAC,gBAAgB,EAAC;MACxB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;MACvC,IAAI,aAAa,GAAG,CAAC,CAAC;MACtB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC;MACjF,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,aAAa,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,CAAC;MAC5E,IAAI,QAAQ,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC;MAC1E,IAAI,gBAAgB,GAAG,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;MACtE,aAAa,IAAI,gBAAgB,CAAC;MAClC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,aAAa,IAAI,CAAC;MAClD,MAAM,WAAW,GAAG,CAAC,CAAa;QAChC,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACvD,IACE,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,IAAI;UAC3B,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,KAAK;UAC5B,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG;UAC1B,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,EAAC;UAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;QACD,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;OACtD,CAAC;MACF,UAAU,CAAC;QACT,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;OACxD,EAAE,GAAG,CAAC,CAAC;KACT;SACG;MACF,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;MAC1C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;KACpC;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,IAAI,GAAG,EAAE,IACzC,eAAa,CACT,EACH,IAAI,CAAC,kBAAkB;MACtB,WAAK,KAAK,EAAC,UAAU,IACnB,cACE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,EAC3B,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,IACxC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,mJAAmJ,GAAE,CAAM,CACvS,EACT,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IACjD,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACF,CAEJ,CACH,EACP;GACH;;;;;;;","names":[],"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 {\r\n  display: block;\r\n\r\n  /** Defines the menu background color. */\r\n  --background-color: var(--dnn-color-primary-contrast, white);\r\n\r\n  /** A color that contrasts well over the background color. */\r\n  --foreground-color: var(--dnn-color-primary, blue);\r\n\r\n  /** The color of the text. */\r\n  --text-color: #222;\r\n}\r\n\r\n.menu-container{\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  background-color: var(--background-color);\r\n  color: var(--text-color);\r\n  .menu{\r\n    margin: 0.5em;\r\n    display: flex;\r\n    gap: 1em;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n    white-space: nowrap;\r\n    width: 100%;\r\n  }\r\n  .overflow {\r\n    margin-left: auto;\r\n    position: relative;\r\n    button{\r\n      cursor: pointer;\r\n      svg{\r\n        fill: var(--foreground-color);\r\n      }\r\n      padding: 0;\r\n      margin: 0;\r\n      background-color: transparent;\r\n      border: none;\r\n    }\r\n    .dropdown{\r\n      position:absolute;\r\n      display: flex;\r\n      flex-direction: column;\r\n      white-space: nowrap;\r\n      right: 0;\r\n      transition: 100ms ease-in-out;\r\n      height: 0;\r\n      overflow: hidden;\r\n      &.visible{\r\n        padding: 1em;\r\n        gap: 0.5em;\r\n        background-color: var(--background-color);\r\n        box-shadow: 2px 2px 4px rgba(0,0,0,0.7);\r\n      }\r\n    }\r\n  }\r\n}\r\n","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.entry.esm.js","mappings":"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","names":[],"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/dnn/dnn-vertical-overflow-menu.system.entry.js

@@ -1,2 +1,2 @@
-System.register(["./index-a3a55419.system.js"],(function(e){"use strict";var t,o,n,r;return{setters:[function(e){t=e.r;o=e.h;n=e.f;r=e.g}],execute:function(){var i=":host{display:block;--background-color:var(--dnn-color-primary-contrast, white);--foreground-color:var(--dnn-color-primary, blue);--text-color:#222}.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);color:var(--text-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)}";var s=e("dnn_vertical_overflow_menu",function(){function e(e){t(this,e);this.showDropdownButton=false;this.showDropdownMenu=false;this.previousMenuWidth=0}e.prototype.componentDidRender=function(){var e=this;requestAnimationFrame((function(){e.moveItemsToDropDownIfNecessery();e.resizeObserver=new ResizeObserver((function(t){for(var o=0,n=t;o<n.length;o++){var r=n[o];if(r.contentRect.width<e.previousMenuWidth){e.moveItemsToDropDownIfNecessery()}if(e.previousMenuWidth>0&&r.contentRect.width>e.previousMenuWidth){e.moveItemsToMenuIfPossible()}e.previousMenuWidth=r.contentRect.width}}));e.resizeObserver.observe(e.element)}))};e.prototype.moveItemsToDropDownIfNecessery=function(){var e=this;var t=Array.from(this.menu.querySelector("slot").assignedElements());var o=this.menu.getBoundingClientRect().width;var n=parseFloat(getComputedStyle(this.element).fontSize)*2;t.forEach((function(t){return n+=e.getFullWidth(t)}));n+=(t.length-1)*parseFloat(getComputedStyle(this.element).fontSize);if(n>o){this.showDropdownButton=true;var r=t[t.length-1];if(this.dropdown==undefined){return}r.slot="dropdown";this.moveItemsToDropDownIfNecessery()}};e.prototype.moveItemsToMenuIfPossible=function(){var e=this;if(this.dropdown==undefined||!this.dropdown.hasChildNodes()){return}var t=Array.from(this.menu.querySelector("slot").assignedElements());var o=this.menu.getBoundingClientRect().width;var n=parseFloat(getComputedStyle(this.element).fontSize)*2;n+=(t.length-1)*parseFloat(getComputedStyle(this.element).fontSize);t.forEach((function(t){return n+=e.getFullWidth(t)}));var r=this.dropdown.querySelector("slot").assignedElements()[0];if(r!=undefined){n+=this.getFullWidth(r)}if(n<o){if(r!=undefined){r.slot=""}if(r==undefined){this.dropdown.classList.remove("visible");this.showDropdownMenu=false;this.showDropdownButton=false}}};e.prototype.getFullWidth=function(e){var t=e.getBoundingClientRect().width;var o=getComputedStyle(e);t+=parseFloat(o.marginLeft);t+=parseFloat(o.marginRight);t+=parseFloat(o.paddingLeft);t+=parseFloat(o.paddingRight);return t};e.prototype.toggleOverflowMenu=function(){var e=this;this.showDropdownMenu=!this.showDropdownMenu;if(this.showDropdownMenu){this.dropdown.classList.add("visible");var t=0;var o=Array.from(this.dropdown.querySelector("slot").assignedElements());o.forEach((function(e){return t+=e.getBoundingClientRect().height}));var n=parseFloat(getComputedStyle(this.dropdown).fontSize)*.5;var r=n*(this.dropdown.children.length-1);t+=r;this.dropdown.style.height=t+"px";var i=function(t){var o=e.button.getBoundingClientRect();if(t.clientX<o.left||t.clientX>o.right||t.clientY<o.top||t.clientY>o.bottom){e.toggleOverflowMenu()}document.removeEventListener("click",i)};setTimeout((function(){document.addEventListener("click",i,false)}),100)}else{this.dropdown.classList.remove("visible");this.dropdown.style.height="0px"}};e.prototype.render=function(){var e=this;return o(n,null,o("div",{class:"menu-container"},o("div",{class:"menu",ref:function(t){return e.menu=t}},o("slot",null)),this.showDropdownButton&&o("div",{class:"overflow"},o("button",{ref:function(t){return e.button=t},class:"icon",onClick:function(){return e.toggleOverflowMenu()}},o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("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"}))),o("div",{class:"dropdown",ref:function(t){return e.dropdown=t}},o("slot",{name:"dropdown"})))))};Object.defineProperty(e.prototype,"element",{get:function(){return r(this)},enumerable:false,configurable:true});return e}());s.style=i}}}));
+System.register(["./index-c3cc3b5b.system.js"],(function(e){"use strict";var t,o,n,r;return{setters:[function(e){t=e.r;o=e.h;n=e.f;r=e.g}],execute:function(){var i=":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)}";var s=e("dnn_vertical_overflow_menu",function(){function e(e){t(this,e);this.showDropdownButton=false;this.showDropdownMenu=false;this.previousMenuWidth=0}e.prototype.componentDidRender=function(){var e=this;requestAnimationFrame((function(){e.moveItemsToDropDownIfNecessery();e.resizeObserver=new ResizeObserver((function(t){for(var o=0,n=t;o<n.length;o++){var r=n[o];if(r.contentRect.width<e.previousMenuWidth){e.moveItemsToDropDownIfNecessery()}if(e.previousMenuWidth>0&&r.contentRect.width>e.previousMenuWidth){e.moveItemsToMenuIfPossible()}e.previousMenuWidth=r.contentRect.width}}));e.resizeObserver.observe(e.element)}))};e.prototype.moveItemsToDropDownIfNecessery=function(){var e=this;var t=Array.from(this.menu.querySelector("slot").assignedElements());var o=this.menu.getBoundingClientRect().width;var n=parseFloat(getComputedStyle(this.element).fontSize)*2;t.forEach((function(t){return n+=e.getFullWidth(t)}));n+=(t.length-1)*parseFloat(getComputedStyle(this.element).fontSize);if(n>o){this.showDropdownButton=true;var r=t[t.length-1];if(this.dropdown==undefined){return}r.slot="dropdown";this.moveItemsToDropDownIfNecessery()}};e.prototype.moveItemsToMenuIfPossible=function(){var e=this;if(this.dropdown==undefined||!this.dropdown.hasChildNodes()){return}var t=Array.from(this.menu.querySelector("slot").assignedElements());var o=this.menu.getBoundingClientRect().width;var n=parseFloat(getComputedStyle(this.element).fontSize)*2;n+=(t.length-1)*parseFloat(getComputedStyle(this.element).fontSize);t.forEach((function(t){return n+=e.getFullWidth(t)}));var r=this.dropdown.querySelector("slot").assignedElements()[0];if(r!=undefined){n+=this.getFullWidth(r)}if(n<o){if(r!=undefined){r.slot=""}if(r==undefined){this.dropdown.classList.remove("visible");this.showDropdownMenu=false;this.showDropdownButton=false}}};e.prototype.getFullWidth=function(e){var t=e.getBoundingClientRect().width;var o=getComputedStyle(e);t+=parseFloat(o.marginLeft);t+=parseFloat(o.marginRight);t+=parseFloat(o.paddingLeft);t+=parseFloat(o.paddingRight);return t};e.prototype.toggleOverflowMenu=function(){var e=this;this.showDropdownMenu=!this.showDropdownMenu;if(this.showDropdownMenu){this.dropdown.classList.add("visible");var t=0;var o=Array.from(this.dropdown.querySelector("slot").assignedElements());o.forEach((function(e){return t+=e.getBoundingClientRect().height}));var n=parseFloat(getComputedStyle(this.dropdown).fontSize);var r=n*(this.dropdown.children.length-1)/2;t+=r;var i=n*2;t+=i;this.dropdown.style.height="".concat(t,"px");var s=function(t){var o=e.button.getBoundingClientRect();if(t.clientX<o.left||t.clientX>o.right||t.clientY<o.top||t.clientY>o.bottom){e.toggleOverflowMenu()}document.removeEventListener("click",s)};setTimeout((function(){document.addEventListener("click",s,false)}),100)}else{this.dropdown.classList.remove("visible");this.dropdown.style.height="0px"}};e.prototype.render=function(){var e=this;return o(n,null,o("div",{class:"menu-container"},o("div",{class:"menu",ref:function(t){return e.menu=t}},o("slot",null)),this.showDropdownButton&&o("div",{class:"overflow"},o("button",{ref:function(t){return e.button=t},class:"icon",onClick:function(){return e.toggleOverflowMenu()}},o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("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"}))),o("div",{class:"dropdown",ref:function(t){return e.dropdown=t}},o("slot",{name:"dropdown"})))))};Object.defineProperty(e.prototype,"element",{get:function(){return r(this)},enumerable:false,configurable:true});return e}());s.style=i}}}));
 //# sourceMappingURL=dnn-vertical-overflow-menu.system.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["dnnVerticalOverflowMenuCss","DnnVerticalOverflowMenu","exports","class_1","hostRef","this","showDropdownButton","showDropdownMenu","previousMenuWidth","prototype","componentDidRender","_this","requestAnimationFrame","moveItemsToDropDownIfNecessery","resizeObserver","ResizeObserver","entries","_i","entries_1","length","entry","contentRect","width","moveItemsToMenuIfPossible","observe","element","menuItems","Array","from","menu","querySelector","assignedElements","availableWidth","getBoundingClientRect","neededWidth","parseFloat","getComputedStyle","fontSize","forEach","item","getFullWidth","lastItem","dropdown","undefined","slot","hasChildNodes","firstItem","classList","remove","styles","marginLeft","marginRight","paddingLeft","paddingRight","toggleOverflowMenu","add","contentHeight_1","items","height","emHeight","additionalHeight","children","style","dismissMenu_1","e","buttonRect","button","clientX","left","right","clientY","top","bottom","document","removeEventListener","setTimeout","addEventListener","render","h","Host","class","ref","el","onClick","xmlns","viewBox","fill","d","name"],"mappings":"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","sourcesContent":[":host {\r\n  display: block;\r\n\r\n  /** Defines the menu background color. */\r\n  --background-color: var(--dnn-color-primary-contrast, white);\r\n\r\n  /** A color that contrasts well over the background color. */\r\n  --foreground-color: var(--dnn-color-primary, blue);\r\n\r\n  /** The color of the text. */\r\n  --text-color: #222;\r\n}\r\n\r\n.menu-container{\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  background-color: var(--background-color);\r\n  color: var(--text-color);\r\n  .menu{\r\n    margin: 0.5em;\r\n    display: flex;\r\n    gap: 1em;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n    white-space: nowrap;\r\n    width: 100%;\r\n  }\r\n  .overflow {\r\n    margin-left: auto;\r\n    position: relative;\r\n    button{\r\n      cursor: pointer;\r\n      svg{\r\n        fill: var(--foreground-color);\r\n      }\r\n      padding: 0;\r\n      margin: 0;\r\n      background-color: transparent;\r\n      border: none;\r\n    }\r\n    .dropdown{\r\n      position:absolute;\r\n      display: flex;\r\n      flex-direction: column;\r\n      white-space: nowrap;\r\n      right: 0;\r\n      transition: 100ms ease-in-out;\r\n      height: 0;\r\n      overflow: hidden;\r\n      &.visible{\r\n        padding: 1em;\r\n        gap: 0.5em;\r\n        background-color: var(--background-color);\r\n        box-shadow: 2px 2px 4px rgba(0,0,0,0.7);\r\n      }\r\n    }\r\n  }\r\n}\r\n","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,"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"],"names":["dnnVerticalOverflowMenuCss","DnnVerticalOverflowMenu","exports","class_1","hostRef","this","showDropdownButton","showDropdownMenu","previousMenuWidth","prototype","componentDidRender","_this","requestAnimationFrame","moveItemsToDropDownIfNecessery","resizeObserver","ResizeObserver","entries","_i","entries_1","length","entry","contentRect","width","moveItemsToMenuIfPossible","observe","element","menuItems","Array","from","menu","querySelector","assignedElements","availableWidth","getBoundingClientRect","neededWidth","parseFloat","getComputedStyle","fontSize","forEach","item","getFullWidth","lastItem","dropdown","undefined","slot","hasChildNodes","firstItem","classList","remove","styles","marginLeft","marginRight","paddingLeft","paddingRight","toggleOverflowMenu","add","contentHeight_1","items","height","emHeight","gapsHeight","children","marginHeight","style","concat","dismissMenu_1","e","buttonRect","button","clientX","left","right","clientY","top","bottom","document","removeEventListener","setTimeout","addEventListener","render","h","Host","class","ref","el","onClick","xmlns","viewBox","fill","d","name"],"mappings":"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","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"]}

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

@@ -1,127 +1,127 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-b5a28c1d.js';
-import { g as getMovementFromEvent } from './mouseUtilities-817973b4.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-20e42ad7.js';
+import { g as getMovementFromEvent } from './mouseUtilities-b261ca4f.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}";
 
-let DnnVerticalSplitview = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.widthChanged = 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 } = 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 (h(Host, null, h("div", { class: "left pane", style: {
-        width: `${this.leftWidth}px`,
-      } }, h("slot", { name: "left" })), 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`,
-      } }, h("slot", null)), h("div", { class: "right pane", style: {
-        width: `${this.rightWidth}px`,
-      } }, h("slot", { name: "right" }))));
-  }
-  get element() { return getElement(this); }
-};
+const DnnVerticalSplitview = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.widthChanged = 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 } = 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 (h(Host, null, h("div", { class: "left pane", style: {
+        width: `${this.leftWidth}px`,
+      } }, h("slot", { name: "left" })), 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`,
+      } }, h("slot", null)), h("div", { class: "right pane", style: {
+        width: `${this.rightWidth}px`,
+      } }, h("slot", { name: "right" }))));
+  }
+  get element() { return getElement(this); }
+};
 DnnVerticalSplitview.style = dnnVerticalSplitviewCss;
 
 export { DnnVerticalSplitview as dnn_vertical_splitview };

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

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

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

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

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

package/dist/dnn/dnn.esm.js

@@ -1,8 +1,8 @@
-import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-b5a28c1d.js';
+import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-20e42ad7.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
- Stencil Client Patch Browser v2.13.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.14.2 | MIT Licensed | https://stenciljs.com
  */
 const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
 const patchBrowser = () => {
@@ -20,6 +20,10 @@ const patchBrowser = () => {
     }
     if (BUILD.profile && !performance.mark) {
         // not all browsers support performance.mark/measure (Safari 10)
+        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,
+        // simply stub the implementations out.
+        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)
+        // @ts-ignore
         performance.mark = performance.measure = () => {
             /*noop*/
         };
@@ -57,7 +61,7 @@ const patchBrowser = () => {
         if (BUILD.dynamicImportShim && !win.customElements) {
             // module support, but no custom elements support (Old Edge)
             // @ts-ignore
-            return import(/* webpackChunkName: "polyfills-dom" */ './dom-c5ed0ba5.js').then(() => opts);
+            return import(/* webpackChunkName: "polyfills-dom" */ './dom-a385e381.js').then(() => opts);
         }
     }
     return promiseResolve(opts);
@@ -121,7 +125,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(options => {
   globalScripts();
-  return bootstrapLazy([["dnn-image-cropper",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32]}]]],["dnn-checkbox",[[1,"dnn-checkbox",{"checked":[1028],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-button",[[1,"dnn-button",{"type":[1],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"modalVisible":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]]]]],["dnn-dropzone",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[64]}]]]], options);
+  return bootstrapLazy([["dnn-permissions-grid",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32]}]]],["dnn-image-cropper",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox",[[1,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-dropzone",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button",[[1,"dnn-button",{"type":[1],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"modalVisible":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]]]]]], options);
 });
 
 //# sourceMappingURL=dnn.esm.js.map