@nyaruka/temba-components 0.117.0 → 0.118.0

package/out-tsc/src/button/Button.js

@@ -132,7 +132,6 @@ export class Button extends LitElement {
       }
 
       .lined-button .button-mask {
-        display: block;
         flex-grow: 1;
       }
 

package/out-tsc/src/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/button/Button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { getClasses } from '../utils';\n\nimport { property } from 'lit/decorators.js';\n\nexport class Button extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        align-self: stretch;\n        font-family: var(--font-family);\n        font-weight: 400;\n      }\n\n      .small {\n        font-size: 0.8em;\n        --button-y: 0px;\n        --button-x: 0.5em;\n      }\n\n      .v-2.button-container {\n        background: var(--button-bg);\n        background-image: var(--button-bg-img);\n        color: var(--button-text);\n        box-shadow: var(--button-shadow);\n        transition: all calc(var(--transition-speed) / 2) ease-in;\n      }\n\n      .button-container {\n        color: #fff;\n        cursor: pointer;\n        display: flex;\n        flex-grow: 1;\n        border-radius: var(--curvature);\n        outline: none;\n        transition: background ease-in var(--transition-speed);\n        user-select: none;\n        -webkit-user-select: none;\n        text-align: center;\n        border: var(--button-border, none);\n      }\n\n      .button-name {\n        white-space: nowrap;\n      }\n\n      .secondary-button:hover .button-mask {\n        border: 1px solid var(--color-button-secondary);\n      }\n\n      .button-mask:hover {\n        background: rgba(0, 0, 0, 0.05);\n      }\n\n      .button-container:focus {\n        outline: none;\n        margin: 0;\n      }\n\n      .button-container:focus {\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      .button-container.secondary-button:focus .button-mask {\n        background: transparent;\n      }\n\n      .button-mask {\n        padding: var(--button-y) var(--button-x);\n        border-radius: var(--curvature);\n        border: 1px solid transparent;\n        transition: var(--transition-speed);\n        background: var(--button-mask);\n        display: flex;\n        align-items: center;\n      }\n\n      .button-container.disabled-button {\n        background: rgba(0, 0, 0, 0.05);\n        color: rgba(255, 255, 255, 0.45);\n        cursor: default;\n      }\n\n      .button-container.disabled-button .button-mask {\n        box-shadow: 0 0 0px 1px var(--color-button-disabled);\n      }\n\n      .button-container.disabled-button:hover .button-mask {\n        box-shadow: 0 0 0px 1px var(--color-button-disabled);\n        background: rgba(0, 0, 0, 0.05);\n      }\n\n      .button-container.active-button .button-mask {\n      }\n\n      .secondary-button.active-button {\n        background: transparent;\n        color: var(--color-text);\n      }\n\n      .secondary-button.active-button .button-mask {\n        border: none;\n      }\n\n      .button-container.secondary-button.active-button:focus .button-mask {\n        background: transparent;\n        box-shadow: none;\n      }\n\n      .primary-button {\n        background: var(--color-button-primary);\n        color: var(--color-button-primary-text);\n      }\n\n      .affirmative {\n        background: var(--color-button-attention);\n      }\n\n      .light-button {\n        background: var(--color-button-light);\n        color: var(--color-button-light-text);\n      }\n\n      .lined-button {\n        border: 1px solid rgba(0, 0, 0, 0.1);\n        color: rgba(0, 0, 0, 0.7);\n        background: transparent;\n      }\n\n      .lined-button .button-mask {\n        display: block;\n        flex-grow: 1;\n      }\n\n      .lined-button .button-mask:hover {\n        background: rgba(0, 0, 0, 0.03);\n      }\n\n      .icon-button {\n        --button-y: 0.2em;\n        --button-x: 0em;\n      }\n\n      .icon-button temba-icon {\n        padding: 0 0.5em;\n      }\n\n      .attention-button {\n        background: var(--color-button-attention);\n        color: var(--color-button-primary-text);\n      }\n\n      .secondary-button {\n        background: transparent;\n        color: var(--color-text);\n      }\n\n      .destructive-button {\n        background: var(--color-button-destructive);\n        color: var(--color-button-destructive-text);\n      }\n\n      .button-mask.disabled-button {\n        background: rgba(0, 0, 0, 0.1);\n      }\n\n      .secondary-button .button-mask:hover {\n        background: transparent;\n      }\n\n      .submit-animation {\n        padding: 1px 4px;\n      }\n\n      .submit-animation temba-loading {\n        margin-bottom: -3px;\n        line-height: normal;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  primary: boolean;\n\n  @property({ type: Boolean })\n  secondary: boolean;\n\n  @property({ type: Boolean })\n  attention: boolean;\n\n  @property({ type: Number })\n  v = 1;\n\n  @property({ type: Boolean })\n  destructive: boolean;\n\n  @property({ type: Boolean })\n  light: boolean;\n\n  @property()\n  name: string;\n\n  @property({ type: Boolean })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  submitting: boolean;\n\n  @property({ type: Boolean })\n  active: boolean;\n\n  @property({ type: Boolean })\n  small: boolean;\n\n  @property({ type: Boolean })\n  lined: boolean;\n\n  @property({ type: String })\n  href: string;\n\n  @property({ type: Number })\n  index?: number;\n\n  @property({ type: String })\n  icon?: string;\n\n  private handleClick(evt: MouseEvent) {\n    if (this.disabled) {\n      evt.preventDefault();\n      evt.stopPropagation();\n    }\n\n    if (this.href && !this.disabled) {\n      this.ownerDocument.location.href = this.href;\n      evt.preventDefault();\n      evt.stopPropagation();\n    }\n  }\n\n  private handleKeyUp(event: KeyboardEvent): void {\n    this.active = false;\n    if (event.key === 'Enter') {\n      this.click();\n    }\n  }\n\n  private handleMouseDown(): void {\n    if (!this.disabled && !this.submitting) {\n      this.active = true;\n      this.classList.add('active');\n    }\n  }\n\n  private handleMouseUp(): void {\n    this.active = false;\n    this.classList.remove('active');\n  }\n\n  public render(): TemplateResult {\n    const buttonName = this.submitting\n      ? html`<div class=\"submit-animation\">\n          <temba-loading units=\"3\" size=\"8\" color=\"#eee\"></temba-loading>\n        </div>`\n      : this.name;\n\n    return html`\n      <div\n        class=\"button-container \n          v-${this.v}\n          ${getClasses({\n          'primary-button':\n            this.primary ||\n            (!this.primary &&\n              !this.secondary &&\n              !this.attention &&\n              this.v == 1),\n          'secondary-button': this.secondary,\n          'disabled-button': this.disabled,\n          'active-button': this.active,\n          'attention-button': this.attention,\n          'destructive-button': this.destructive,\n          'light-button': this.light,\n          'lined-button': this.lined,\n          'icon-button': !!this.icon,\n          small: this.small\n        })}\"\n        tabindex=\"0\"\n        @mousedown=${this.handleMouseDown}\n        @mouseup=${this.handleMouseUp}\n        @mouseleave=${this.handleMouseUp}\n        @keyup=${this.handleKeyUp}\n        @click=${this.handleClick}\n      >\n        <div class=\"button-mask\">\n          ${this.icon\n            ? html`<temba-icon name=\"${this.icon}\"></temba-icon>`\n            : null}\n          <div class=\"button-name\"><slot name=\"name\">${buttonName}</slot></div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/button/Button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { getClasses } from '../utils';\n\nimport { property } from 'lit/decorators.js';\n\nexport class Button extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        align-self: stretch;\n        font-family: var(--font-family);\n        font-weight: 400;\n      }\n\n      .small {\n        font-size: 0.8em;\n        --button-y: 0px;\n        --button-x: 0.5em;\n      }\n\n      .v-2.button-container {\n        background: var(--button-bg);\n        background-image: var(--button-bg-img);\n        color: var(--button-text);\n        box-shadow: var(--button-shadow);\n        transition: all calc(var(--transition-speed) / 2) ease-in;\n      }\n\n      .button-container {\n        color: #fff;\n        cursor: pointer;\n        display: flex;\n        flex-grow: 1;\n        border-radius: var(--curvature);\n        outline: none;\n        transition: background ease-in var(--transition-speed);\n        user-select: none;\n        -webkit-user-select: none;\n        text-align: center;\n        border: var(--button-border, none);\n      }\n\n      .button-name {\n        white-space: nowrap;\n      }\n\n      .secondary-button:hover .button-mask {\n        border: 1px solid var(--color-button-secondary);\n      }\n\n      .button-mask:hover {\n        background: rgba(0, 0, 0, 0.05);\n      }\n\n      .button-container:focus {\n        outline: none;\n        margin: 0;\n      }\n\n      .button-container:focus {\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      .button-container.secondary-button:focus .button-mask {\n        background: transparent;\n      }\n\n      .button-mask {\n        padding: var(--button-y) var(--button-x);\n        border-radius: var(--curvature);\n        border: 1px solid transparent;\n        transition: var(--transition-speed);\n        background: var(--button-mask);\n        display: flex;\n        align-items: center;\n      }\n\n      .button-container.disabled-button {\n        background: rgba(0, 0, 0, 0.05);\n        color: rgba(255, 255, 255, 0.45);\n        cursor: default;\n      }\n\n      .button-container.disabled-button .button-mask {\n        box-shadow: 0 0 0px 1px var(--color-button-disabled);\n      }\n\n      .button-container.disabled-button:hover .button-mask {\n        box-shadow: 0 0 0px 1px var(--color-button-disabled);\n        background: rgba(0, 0, 0, 0.05);\n      }\n\n      .button-container.active-button .button-mask {\n      }\n\n      .secondary-button.active-button {\n        background: transparent;\n        color: var(--color-text);\n      }\n\n      .secondary-button.active-button .button-mask {\n        border: none;\n      }\n\n      .button-container.secondary-button.active-button:focus .button-mask {\n        background: transparent;\n        box-shadow: none;\n      }\n\n      .primary-button {\n        background: var(--color-button-primary);\n        color: var(--color-button-primary-text);\n      }\n\n      .affirmative {\n        background: var(--color-button-attention);\n      }\n\n      .light-button {\n        background: var(--color-button-light);\n        color: var(--color-button-light-text);\n      }\n\n      .lined-button {\n        border: 1px solid rgba(0, 0, 0, 0.1);\n        color: rgba(0, 0, 0, 0.7);\n        background: transparent;\n      }\n\n      .lined-button .button-mask {\n        flex-grow: 1;\n      }\n\n      .lined-button .button-mask:hover {\n        background: rgba(0, 0, 0, 0.03);\n      }\n\n      .icon-button {\n        --button-y: 0.2em;\n        --button-x: 0em;\n      }\n\n      .icon-button temba-icon {\n        padding: 0 0.5em;\n      }\n\n      .attention-button {\n        background: var(--color-button-attention);\n        color: var(--color-button-primary-text);\n      }\n\n      .secondary-button {\n        background: transparent;\n        color: var(--color-text);\n      }\n\n      .destructive-button {\n        background: var(--color-button-destructive);\n        color: var(--color-button-destructive-text);\n      }\n\n      .button-mask.disabled-button {\n        background: rgba(0, 0, 0, 0.1);\n      }\n\n      .secondary-button .button-mask:hover {\n        background: transparent;\n      }\n\n      .submit-animation {\n        padding: 1px 4px;\n      }\n\n      .submit-animation temba-loading {\n        margin-bottom: -3px;\n        line-height: normal;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  primary: boolean;\n\n  @property({ type: Boolean })\n  secondary: boolean;\n\n  @property({ type: Boolean })\n  attention: boolean;\n\n  @property({ type: Number })\n  v = 1;\n\n  @property({ type: Boolean })\n  destructive: boolean;\n\n  @property({ type: Boolean })\n  light: boolean;\n\n  @property()\n  name: string;\n\n  @property({ type: Boolean })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  submitting: boolean;\n\n  @property({ type: Boolean })\n  active: boolean;\n\n  @property({ type: Boolean })\n  small: boolean;\n\n  @property({ type: Boolean })\n  lined: boolean;\n\n  @property({ type: String })\n  href: string;\n\n  @property({ type: Number })\n  index?: number;\n\n  @property({ type: String })\n  icon?: string;\n\n  private handleClick(evt: MouseEvent) {\n    if (this.disabled) {\n      evt.preventDefault();\n      evt.stopPropagation();\n    }\n\n    if (this.href && !this.disabled) {\n      this.ownerDocument.location.href = this.href;\n      evt.preventDefault();\n      evt.stopPropagation();\n    }\n  }\n\n  private handleKeyUp(event: KeyboardEvent): void {\n    this.active = false;\n    if (event.key === 'Enter') {\n      this.click();\n    }\n  }\n\n  private handleMouseDown(): void {\n    if (!this.disabled && !this.submitting) {\n      this.active = true;\n      this.classList.add('active');\n    }\n  }\n\n  private handleMouseUp(): void {\n    this.active = false;\n    this.classList.remove('active');\n  }\n\n  public render(): TemplateResult {\n    const buttonName = this.submitting\n      ? html`<div class=\"submit-animation\">\n          <temba-loading units=\"3\" size=\"8\" color=\"#eee\"></temba-loading>\n        </div>`\n      : this.name;\n\n    return html`\n      <div\n        class=\"button-container \n          v-${this.v}\n          ${getClasses({\n          'primary-button':\n            this.primary ||\n            (!this.primary &&\n              !this.secondary &&\n              !this.attention &&\n              this.v == 1),\n          'secondary-button': this.secondary,\n          'disabled-button': this.disabled,\n          'active-button': this.active,\n          'attention-button': this.attention,\n          'destructive-button': this.destructive,\n          'light-button': this.light,\n          'lined-button': this.lined,\n          'icon-button': !!this.icon,\n          small: this.small\n        })}\"\n        tabindex=\"0\"\n        @mousedown=${this.handleMouseDown}\n        @mouseup=${this.handleMouseUp}\n        @mouseleave=${this.handleMouseUp}\n        @keyup=${this.handleKeyUp}\n        @click=${this.handleClick}\n      >\n        <div class=\"button-mask\">\n          ${this.icon\n            ? html`<temba-icon name=\"${this.icon}\"></temba-icon>`\n            : null}\n          <div class=\"button-name\"><slot name=\"name\">${buttonName}</slot></div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/dropdown/Dropdown.js

@@ -53,7 +53,6 @@ export class Dropdown extends RapidElement {
         content: '';
         width: 0px;
         height: 0;
-        top: -6px;
         z-index: 10;
         position: absolute;
         border-left: 6px solid transparent;
@@ -155,7 +154,7 @@ export class Dropdown extends RapidElement {
     }
     calculatePosition() {
         const dropdown = this.shadowRoot.querySelector('.dropdown');
-        const toggle = this.querySelector('div[slot="toggle"]');
+        const toggle = this.querySelector('*[slot="toggle"]');
         const arrow = this.shadowRoot.querySelector('.arrow');
         let bumpedUp = false;
         let bumpedLeft = false;
@@ -183,8 +182,15 @@ export class Dropdown extends RapidElement {
                 dropdownStyle['margin-top'] = '-0.5em';
                 bumpedUp = true;
             }
+            // if our arrow is aligned with the left of the dropdown, scootch
+            // the dropdown left a pinch so our arrow still overlaps properly
+            let arrowLeft = toggleBounds.width / 2 - arrowBounds.width / 2;
+            if (arrowLeft <= 0) {
+                dropdownStyle['marginLeft'] = '-10px';
+                arrowLeft = 10;
+            }
             const arrowStyle = {
-                left: toggleBounds.width / 2 - arrowBounds.width / 2 + 'px',
+                left: arrowLeft + 'px',
                 borderWidth: this.arrowSize + 'px',
                 top: '-' + this.arrowSize + 'px'
             };

package/out-tsc/src/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { CustomEventType } from '../interfaces';\n\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\nexport class Dropdown extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n      }\n\n      .wrapper {\n        position: relative;\n      }\n\n      .toggle {\n        cursor: pointer;\n      }\n\n      .dropdown-wrapper {\n        position: relative;\n        overflow: auto;\n      }\n\n      .dropdown:focus {\n      }\n\n      .dropdown.dormant {\n        pointer-events: none;\n      }\n\n      .dropdown {\n        position: fixed;\n        z-index: 2;\n        padding: 0;\n        opacity: 0;\n        border-radius: calc(var(--curvature) * 1.5);\n        background: #fff;\n        transition: all calc(0.8 * var(--transition-speed)) var(--bounce);\n        user-select: none;\n        margin-top: 0px;\n        margin-left: 0px;\n        box-shadow: var(--dropdown-shadow);\n      }\n\n      .dropdown:focus {\n        outline: none;\n      }\n\n      .arrow {\n        content: '';\n        width: 0px;\n        height: 0;\n        top: -6px;\n        z-index: 10;\n        position: absolute;\n        border-left: 6px solid transparent;\n        border-right: 6px solid transparent;\n        border-bottom: 6px solid white;\n      }\n\n      .open .dropdown {\n        opacity: 1;\n        pointer-events: auto;\n        transform: translateY(0.5em) scale(1);\n      }\n\n      .mask {\n        position: absolute;\n        left: 0;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0, 0, 0, 0.7);\n        opacity: 0.5;\n        transition: opacity var(--transition-speed) ease-in-out;\n        pointer-events: none;\n        z-index: 1;\n      }\n\n      .mask.open {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .right {\n        right: 0;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open = false;\n\n  @property({ type: Boolean })\n  dormant = true;\n\n  @property({ type: Number })\n  arrowSize = 8;\n\n  @property({ type: Number })\n  margin = 10;\n\n  @property({ type: Boolean })\n  mask = false;\n\n  @property({ type: Object, attribute: false })\n  dropdownStyle = {};\n\n  @property({ type: Object, attribute: false })\n  arrowStyle = {};\n\n  constructor() {\n    super();\n    this.calculatePosition = this.calculatePosition.bind(this);\n  }\n\n  private activeFocus: any;\n  private blurHandler: any;\n\n  public firstUpdated(props: any) {\n    super.firstUpdated(props);\n    this.resetBlurHandler();\n  }\n\n  private resetBlurHandler() {\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n\n    if (this.activeFocus) {\n      this.activeFocus.removeEventListener('blur', this.blurHandler);\n    }\n\n    this.activeFocus = dropdown;\n    this.blurHandler = this.handleBlur.bind(this);\n\n    this.activeFocus.addEventListener('blur', this.blurHandler);\n  }\n\n  private handleBlur(event: FocusEvent) {\n    const newTarget = event.relatedTarget as any;\n\n    if (this.contains(newTarget)) {\n      newTarget.addEventListener('blur', this.blurHandler);\n      this.activeFocus = newTarget;\n    } else {\n      this.closeDropdown();\n    }\n  }\n\n  private openDropdown() {\n    this.open = true;\n    this.dormant = false;\n    this.resetBlurHandler();\n\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n    dropdown.focus();\n    dropdown.click();\n\n    this.fireCustomEvent(CustomEventType.Opened);\n  }\n\n  private closeDropdown() {\n    this.activeFocus.removeEventListener('blur', this.blurHandler);\n\n    this.open = false;\n    this.resetBlurHandler();\n\n    window.setTimeout(() => {\n      this.dormant = true;\n    }, 250);\n\n    this.blur();\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open')) {\n      this.dropdownStyle = {};\n    }\n\n    if (changedProperties.has('dropdownStyle')) {\n      if (Object.keys(this.dropdownStyle).length === 0) {\n        this.calculatePosition();\n      }\n    }\n  }\n\n  public calculatePosition() {\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n    const toggle = this.querySelector('div[slot=\"toggle\"]');\n\n    const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n\n    let bumpedUp = false;\n    let bumpedLeft = false;\n\n    if (dropdown && toggle) {\n      const dropdownBounds = dropdown.getBoundingClientRect();\n      const toggleBounds = toggle.getBoundingClientRect();\n      const arrowBounds = arrow.getBoundingClientRect();\n\n      if (!toggle) {\n        return;\n      }\n\n      const dropdownStyle = {\n        border: '1px solid rgba(0,0,0,0.1)',\n        marginTop: '0.5em'\n      };\n\n      // if off the the right, bump it left\n      if (dropdownBounds.right > window.innerWidth) {\n        dropdownStyle['left'] =\n          toggleBounds.right - dropdownBounds.width + 'px';\n        delete dropdownStyle['right'];\n        bumpedLeft = true;\n      }\n\n      // if off to the bottom, bump it up\n      if (dropdownBounds.bottom > window.innerHeight) {\n        dropdownStyle['top'] = toggleBounds.top - dropdownBounds.height + 'px';\n        dropdownStyle['margin-top'] = '-0.5em';\n        bumpedUp = true;\n      }\n\n      const arrowStyle = {\n        left: toggleBounds.width / 2 - arrowBounds.width / 2 + 'px',\n        borderWidth: this.arrowSize + 'px',\n        top: '-' + this.arrowSize + 'px'\n      };\n\n      if (bumpedUp) {\n        // rotate our arrow 180 degrees\n        arrowStyle['transform'] = 'rotate(180deg)';\n\n        // and place it at the bottom of the dropdown\n        arrowStyle['top'] = 'auto';\n        arrowStyle['bottom'] = '-' + this.arrowSize + 'px';\n      }\n\n      if (bumpedLeft) {\n        arrowStyle['right'] =\n          toggleBounds.width / 2 - arrowBounds.width / 2 + 'px';\n        delete arrowStyle['left'];\n      }\n\n      this.arrowStyle = arrowStyle;\n      this.dropdownStyle = dropdownStyle;\n    }\n    this.requestUpdate();\n  }\n\n  public handleToggleClicked(event: MouseEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.open && this.dormant) {\n      this.openDropdown();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.mask\n        ? html`<div class=\"mask  ${this.open ? 'open' : ''}\" />`\n        : null}\n\n      <div\n        class=\"wrapper ${getClasses({\n          open: this.open\n        })}\"\n      >\n        <slot\n          name=\"toggle\"\n          class=\"toggle\"\n          @click=${this.handleToggleClicked}\n        ></slot>\n        <div\n          class=\"${getClasses({\n            dropdown: true,\n            dormant: this.dormant\n          })}\"\n          style=${styleMap(this.dropdownStyle)}\n          tabindex=\"0\"\n        >\n          <div class=\"arrow\" style=${styleMap(this.arrowStyle)}></div>\n          <div class=\"dropdown-wrapper\">\n            <slot name=\"dropdown\" tabindex=\"1\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,MAAM,OAAO,QAAS,SAAQ,YAAY;IACxC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgFT,CAAC;IACJ,CAAC;IAuBD;QACE,KAAK,EAAE,CAAC;QArBV,SAAI,GAAG,KAAK,CAAC;QAGb,YAAO,GAAG,IAAI,CAAC;QAGf,cAAS,GAAG,CAAC,CAAC;QAGd,WAAM,GAAG,EAAE,CAAC;QAGZ,SAAI,GAAG,KAAK,CAAC;QAGb,kBAAa,GAAG,EAAE,CAAC;QAGnB,eAAU,GAAG,EAAE,CAAC;QAId,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7D,CAAC;IAKM,YAAY,CAAC,KAAU;QAC5B,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB;QACtB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC5C,WAAW,CACM,CAAC;QAEpB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACjE,CAAC;QAED,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;QAC5B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE9C,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9D,CAAC;IAEO,UAAU,CAAC,KAAiB;QAClC,MAAM,SAAS,GAAG,KAAK,CAAC,aAAoB,CAAC;QAE7C,IAAI,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YAC7B,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACrD,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC5C,WAAW,CACM,CAAC;QACpB,QAAQ,CAAC,KAAK,EAAE,CAAC;QACjB,QAAQ,CAAC,KAAK,EAAE,CAAC;QAEjB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/C,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAE/D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QAC1B,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;YAC3C,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACjD,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC;IACH,CAAC;IAEM,iBAAiB;QACtB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC5C,WAAW,CACM,CAAC;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QAEtD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAmB,CAAC;QAExE,IAAI,QAAQ,GAAG,KAAK,CAAC;QACrB,IAAI,UAAU,GAAG,KAAK,CAAC;QAEvB,IAAI,QAAQ,IAAI,MAAM,EAAE,CAAC;YACvB,MAAM,cAAc,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAC;YACxD,MAAM,YAAY,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;YACpD,MAAM,WAAW,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;YAElD,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,OAAO;YACT,CAAC;YAED,MAAM,aAAa,GAAG;gBACpB,MAAM,EAAE,2BAA2B;gBACnC,SAAS,EAAE,OAAO;aACnB,CAAC;YAEF,qCAAqC;YACrC,IAAI,cAAc,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;gBAC7C,aAAa,CAAC,MAAM,CAAC;oBACnB,YAAY,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,GAAG,IAAI,CAAC;gBACnD,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC;gBAC9B,UAAU,GAAG,IAAI,CAAC;YACpB,CAAC;YAED,mCAAmC;YACnC,IAAI,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;gBAC/C,aAAa,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,GAAG,GAAG,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC;gBACvE,aAAa,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC;gBACvC,QAAQ,GAAG,IAAI,CAAC;YAClB,CAAC;YAED,iEAAiE;YACjE,iEAAiE;YACjE,IAAI,SAAS,GAAG,YAAY,CAAC,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC;YAC/D,IAAI,SAAS,IAAI,CAAC,EAAE,CAAC;gBACnB,aAAa,CAAC,YAAY,CAAC,GAAG,OAAO,CAAC;gBACtC,SAAS,GAAG,EAAE,CAAC;YACjB,CAAC;YAED,MAAM,UAAU,GAAG;gBACjB,IAAI,EAAE,SAAS,GAAG,IAAI;gBACtB,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI;gBAClC,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI;aACjC,CAAC;YAEF,IAAI,QAAQ,EAAE,CAAC;gBACb,+BAA+B;gBAC/B,UAAU,CAAC,WAAW,CAAC,GAAG,gBAAgB,CAAC;gBAE3C,6CAA6C;gBAC7C,UAAU,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC;gBAC3B,UAAU,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACrD,CAAC;YAED,IAAI,UAAU,EAAE,CAAC;gBACf,UAAU,CAAC,OAAO,CAAC;oBACjB,YAAY,CAAC,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC;gBACxD,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC;YAC5B,CAAC;YAED,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;YAC7B,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACrC,CAAC;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEM,mBAAmB,CAAC,KAAiB;QAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM;YACxD,CAAC,CAAC,IAAI;;;yBAGW,UAAU,CAAC;YAC1B,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;;;;;mBAKS,IAAI,CAAC,mBAAmB;;;mBAGxB,UAAU,CAAC;YAClB,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC;kBACM,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC;;;qCAGT,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;;;;;;KAMzD,CAAC;IACJ,CAAC;CACF;AAvNC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CAC1B;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CAC7B","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { CustomEventType } from '../interfaces';\n\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\nexport class Dropdown extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n      }\n\n      .wrapper {\n        position: relative;\n      }\n\n      .toggle {\n        cursor: pointer;\n      }\n\n      .dropdown-wrapper {\n        position: relative;\n        overflow: auto;\n      }\n\n      .dropdown:focus {\n      }\n\n      .dropdown.dormant {\n        pointer-events: none;\n      }\n\n      .dropdown {\n        position: fixed;\n        z-index: 2;\n        padding: 0;\n        opacity: 0;\n        border-radius: calc(var(--curvature) * 1.5);\n        background: #fff;\n        transition: all calc(0.8 * var(--transition-speed)) var(--bounce);\n        user-select: none;\n        margin-top: 0px;\n        margin-left: 0px;\n        box-shadow: var(--dropdown-shadow);\n      }\n\n      .dropdown:focus {\n        outline: none;\n      }\n\n      .arrow {\n        content: '';\n        width: 0px;\n        height: 0;\n        z-index: 10;\n        position: absolute;\n        border-left: 6px solid transparent;\n        border-right: 6px solid transparent;\n        border-bottom: 6px solid white;\n      }\n\n      .open .dropdown {\n        opacity: 1;\n        pointer-events: auto;\n        transform: translateY(0.5em) scale(1);\n      }\n\n      .mask {\n        position: absolute;\n        left: 0;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0, 0, 0, 0.7);\n        opacity: 0.5;\n        transition: opacity var(--transition-speed) ease-in-out;\n        pointer-events: none;\n        z-index: 1;\n      }\n\n      .mask.open {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .right {\n        right: 0;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open = false;\n\n  @property({ type: Boolean })\n  dormant = true;\n\n  @property({ type: Number })\n  arrowSize = 8;\n\n  @property({ type: Number })\n  margin = 10;\n\n  @property({ type: Boolean })\n  mask = false;\n\n  @property({ type: Object, attribute: false })\n  dropdownStyle = {};\n\n  @property({ type: Object, attribute: false })\n  arrowStyle = {};\n\n  constructor() {\n    super();\n    this.calculatePosition = this.calculatePosition.bind(this);\n  }\n\n  private activeFocus: any;\n  private blurHandler: any;\n\n  public firstUpdated(props: any) {\n    super.firstUpdated(props);\n    this.resetBlurHandler();\n  }\n\n  private resetBlurHandler() {\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n\n    if (this.activeFocus) {\n      this.activeFocus.removeEventListener('blur', this.blurHandler);\n    }\n\n    this.activeFocus = dropdown;\n    this.blurHandler = this.handleBlur.bind(this);\n\n    this.activeFocus.addEventListener('blur', this.blurHandler);\n  }\n\n  private handleBlur(event: FocusEvent) {\n    const newTarget = event.relatedTarget as any;\n\n    if (this.contains(newTarget)) {\n      newTarget.addEventListener('blur', this.blurHandler);\n      this.activeFocus = newTarget;\n    } else {\n      this.closeDropdown();\n    }\n  }\n\n  private openDropdown() {\n    this.open = true;\n    this.dormant = false;\n    this.resetBlurHandler();\n\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n    dropdown.focus();\n    dropdown.click();\n\n    this.fireCustomEvent(CustomEventType.Opened);\n  }\n\n  private closeDropdown() {\n    this.activeFocus.removeEventListener('blur', this.blurHandler);\n\n    this.open = false;\n    this.resetBlurHandler();\n\n    window.setTimeout(() => {\n      this.dormant = true;\n    }, 250);\n\n    this.blur();\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open')) {\n      this.dropdownStyle = {};\n    }\n\n    if (changedProperties.has('dropdownStyle')) {\n      if (Object.keys(this.dropdownStyle).length === 0) {\n        this.calculatePosition();\n      }\n    }\n  }\n\n  public calculatePosition() {\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n    const toggle = this.querySelector('*[slot=\"toggle\"]');\n\n    const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n\n    let bumpedUp = false;\n    let bumpedLeft = false;\n\n    if (dropdown && toggle) {\n      const dropdownBounds = dropdown.getBoundingClientRect();\n      const toggleBounds = toggle.getBoundingClientRect();\n      const arrowBounds = arrow.getBoundingClientRect();\n\n      if (!toggle) {\n        return;\n      }\n\n      const dropdownStyle = {\n        border: '1px solid rgba(0,0,0,0.1)',\n        marginTop: '0.5em'\n      };\n\n      // if off the the right, bump it left\n      if (dropdownBounds.right > window.innerWidth) {\n        dropdownStyle['left'] =\n          toggleBounds.right - dropdownBounds.width + 'px';\n        delete dropdownStyle['right'];\n        bumpedLeft = true;\n      }\n\n      // if off to the bottom, bump it up\n      if (dropdownBounds.bottom > window.innerHeight) {\n        dropdownStyle['top'] = toggleBounds.top - dropdownBounds.height + 'px';\n        dropdownStyle['margin-top'] = '-0.5em';\n        bumpedUp = true;\n      }\n\n      // if our arrow is aligned with the left of the dropdown, scootch\n      // the dropdown left a pinch so our arrow still overlaps properly\n      let arrowLeft = toggleBounds.width / 2 - arrowBounds.width / 2;\n      if (arrowLeft <= 0) {\n        dropdownStyle['marginLeft'] = '-10px';\n        arrowLeft = 10;\n      }\n\n      const arrowStyle = {\n        left: arrowLeft + 'px',\n        borderWidth: this.arrowSize + 'px',\n        top: '-' + this.arrowSize + 'px'\n      };\n\n      if (bumpedUp) {\n        // rotate our arrow 180 degrees\n        arrowStyle['transform'] = 'rotate(180deg)';\n\n        // and place it at the bottom of the dropdown\n        arrowStyle['top'] = 'auto';\n        arrowStyle['bottom'] = '-' + this.arrowSize + 'px';\n      }\n\n      if (bumpedLeft) {\n        arrowStyle['right'] =\n          toggleBounds.width / 2 - arrowBounds.width / 2 + 'px';\n        delete arrowStyle['left'];\n      }\n\n      this.arrowStyle = arrowStyle;\n      this.dropdownStyle = dropdownStyle;\n    }\n    this.requestUpdate();\n  }\n\n  public handleToggleClicked(event: MouseEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.open && this.dormant) {\n      this.openDropdown();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.mask\n        ? html`<div class=\"mask  ${this.open ? 'open' : ''}\" />`\n        : null}\n\n      <div\n        class=\"wrapper ${getClasses({\n          open: this.open\n        })}\"\n      >\n        <slot\n          name=\"toggle\"\n          class=\"toggle\"\n          @click=${this.handleToggleClicked}\n        ></slot>\n        <div\n          class=\"${getClasses({\n            dropdown: true,\n            dormant: this.dormant\n          })}\"\n          style=${styleMap(this.dropdownStyle)}\n          tabindex=\"0\"\n        >\n          <div class=\"arrow\" style=${styleMap(this.arrowStyle)}></div>\n          <div class=\"dropdown-wrapper\">\n            <slot name=\"dropdown\" tabindex=\"1\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/list/TembaMenu.js

@@ -114,10 +114,6 @@ export class TembaMenu extends ResizeElement {
         align-items: center;
       }
 
-      .level-0 > temba-dropdown .icon-wrapper {
-        padding: 0.2em 0.4em 0.2em 0em;
-      }
-
       .level-0 > .item.selected::before,
       .level-0 > .item.selected::after {
         content: ' ';
@@ -607,7 +603,7 @@ export class TembaMenu extends ResizeElement {
       }
 
       .level-0 .icon-wrapper {
-        padding: 0.4em 0.9em;
+        padding: 0.4em 0.2em;
       }
 
       temba-workspace-select {
@@ -733,7 +729,10 @@ export class TembaMenu extends ResizeElement {
         ${menuItem.level === 0
                 ? menuItem.avatar
                     ? icon
-                    : html `<temba-tip style="display:flex;" text="${menuItem.name}"
+                    : html `<temba-tip
+                position="right"
+                style="display:flex;"
+                text="${menuItem.name}"
                 >${icon}</temba-tip
               >`
                 : html `${icon}${collapsedIcon}`}

package/out-tsc/src/list/TembaMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"TembaMenu.js","sourceRoot":"","sources":["../../../src/list/TembaMenu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC5E,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAkCjD,MAAM,QAAQ,GAAG,CACf,KAAiB,EACjB,EAAU,EACyB,EAAE;IACrC,MAAM,MAAM,GAAG,KAAK,IAAI,EAAE,CAAC;IAE3B,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,IAAc,EAAE,EAAE;QAChD,OAAO,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;QACf,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IACzB,CAAC;IAED,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,OAAO,SAAU,SAAQ,aAAa;IAC1C,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAslBT,CAAC;IACJ,CAAC;IAkCD;QACE,KAAK,EAAE,CAAC;QAhCV,UAAK,GAAG,KAAK,CAAC;QA4Bd,cAAS,GAAa,EAAE,CAAC;QACzB,UAAK,GAAoC,EAAE,CAAC;QAsFrC,YAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;QA0RvC,mBAAc,GAAG,CACvB,QAAkB,EAClB,SAAmB,IAAI,EACP,EAAE;YAClB,IAAI,QAAQ,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;gBAChC,OAAO,IAAI,CAAA,6BAA6B,CAAC;YAC3C,CAAC;YAED,IAAI,QAAQ,CAAC,IAAI,KAAK,wBAAwB,EAAE,CAAC;gBAC/C,OAAO,IAAI,CAAA;kBACC,CAAC,KAAK,EAAE,EAAE;oBAClB,KAAK,CAAC,eAAe,EAAE,CAAC;oBACxB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACzB,CAAC;kBACS,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;iCACf,CAAC;YAC9B,CAAC;YAED,IAAI,QAAQ,CAAC,IAAI,KAAK,yBAAyB,EAAE,CAAC;gBAChD,OAAO,IAAI,CAAA;mBACE,QAAQ,CAAC,IAAI;kCACE,CAAC;YAC/B,CAAC;YAED,IAAI,QAAQ,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC9B,OAAO,IAAI,CAAA,2BAA2B,CAAC;YACzC,CAAC;YAED,IAAI,QAAQ,CAAC,IAAI,KAAK,SAAS,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACnD,OAAO,IAAI,CAAA,4BAA4B,QAAQ,CAAC,IAAI,QAAQ,CAAC;YAC/D,CAAC;YAED,IAAI,QAAQ,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;gBACrC,OAAO,IAAI,CAAA;eACF,QAAQ,CAAC,IAAI;;eAEb,QAAQ,CAAC,IAAI;iBACX,CAAC,KAAK,EAAE,EAAE;oBACjB,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;gBAC1C,CAAC;SACA,CAAC;YACN,CAAC;YAED,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;YAC7C,MAAM,eAAe,GACnB,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;YAE3D,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI;gBACtB,CAAC,CAAC,IAAI,CAAA;;oBAEQ,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;oBAClC,QAAQ,CAAC,IAAI;;aAEpB,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK;oBACnC,CAAC,CAAC,IAAI,CAAA;2CACyB,QAAQ,CAAC,MAAM;;sBAEpC;oBACV,CAAC,CAAC,IAAI;eACH;gBACT,CAAC,CAAC,IAAI,CAAC;YAET,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc;gBAC3C,CAAC,CAAC,IAAI,CAAA;kBACM,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;kBAClC,QAAQ,CAAC,cAAc;;uBAElB;gBACjB,CAAC,CAAC,IAAI,CAAC;YAET,MAAM,WAAW,GAAG,UAAU,CAAC;gBAC7B,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI;gBAC7B,gBAAgB,EAAE,eAAe;gBACjC,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC;gBAChD,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,MAAM;gBACzB,KAAK,EAAE,QAAQ,CAAC,KAAK;gBACrB,MAAM,EAAE,QAAQ,CAAC,MAAM;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,EAAE;gBAC3D,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;gBACnC,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,CAAC,MAAM;gBACrD,OAAO,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,QAAQ,CAAC,EAAE;gBAC/D,aAAa,EAAE,QAAQ,CAAC,MAAM;aAC/B,CAAC,CAAC;YAEH,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACpB,IAAI,GAAG,YAAY,CAAC;oBAClB,IAAI,EAAE,QAAQ,CAAC,MAAM;oBACrB,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;iBAC1B,CAAC,CAAC;gBACH,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;oBACpB,IAAI,GAAG,IAAI,CAAA,GAAG,IAAI,GAAG,QAAQ,CAAC,MAAM;wBAClC,CAAC,CAAC,IAAI,CAAA;yCACyB,QAAQ,CAAC,MAAM;;oBAEpC;wBACV,CAAC,CAAC,IAAI,EAAE,CAAC;gBACb,CAAC;gBACD,IAAI,GAAG,IAAI,CAAA,gDAAgD,IAAI,QAAQ,CAAC;YAC1E,CAAC;YAED,MAAM,IAAI,GAAG,IAAI,CAAA;;eAEN,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;mBAChD,QAAQ,CAAC,EAAE;iBACb,WAAW;iBACX,CAAC,KAAK,EAAE,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBACxB,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;YAClD,CAAC;qBACY,GAAG,EAAE;gBAChB,IAAI,QAAQ,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC;oBACvB,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;gBAC9B,CAAC;YACH,CAAC;sBACa,GAAG,EAAE;gBACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YAC1B,CAAC;;UAEC,QAAQ,CAAC,KAAK,KAAK,CAAC;gBACpB,CAAC,CAAC,QAAQ,CAAC,MAAM;oBACf,CAAC,CAAC,IAAI;oBACN,CAAC,CAAC,IAAI,CAAA,0CAA0C,QAAQ,CAAC,IAAI;mBACtD,IAAI;gBACP;gBACN,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,GAAG,aAAa,EAAE;;;;;8DAKqB,IAAI,CAAC,KAAK;gBAC1D,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,QAAQ;;cAEV,QAAQ,CAAC,IAAI;;YAEf,QAAQ,CAAC,KAAK,GAAG,CAAC;gBAClB,CAAC,CAAC,QAAQ,CAAC,MAAM;oBACf,CAAC,CAAC,IAAI,CAAA;0BACM,UAAU,IAAI,eAAe;wBACnC,CAAC,CAAC,IAAI,CAAC,QAAQ;wBACf,CAAC,CAAC,IAAI,CAAC,UAAU;+BACN;oBACjB,CAAC,CAAC,IAAI,CAAA,GAAG,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,IAAI,CAAC;wBAC1C,CAAC,CAAC,IAAI,CAAA;;uCAEe,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;mDACnB,QAAQ,CAAC,MAAM;;0BAExC,QAAQ,CAAC,KAAK,CAAC,cAAc,EAAE;;qBAEpC;wBACH,CAAC,CAAC,IAAI,CAAA,2BAA2B,EAAE;gBACzC,CAAC,CAAC,IAAI;;;;KAIb,CAAC;YAEF,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC;gBACnB,OAAO,IAAI,CAAA;iCACgB,QAAQ,CAAC,EAAE;+BACb,IAAI;;;cAGrB,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAe,EAAE,EAAE;oBAC/C,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;oBACjC,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC;gBACvD,CAAC,CAAC;;;OAGP,CAAC;YACJ,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC;QA3hBA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE3C,8BAA8B;QAC9B,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;YACjC,IAAI,CAAC,UAAU;iBACZ,gBAAgB,CAAC,qCAAqC,CAAC;iBACvD,OAAO,CAAC,CAAC,GAAqB,EAAE,EAAE;gBACjC,GAAG,CAAC,WAAW,EAAE,CAAC;YACpB,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,SAAS,CAAC,EAAU,EAAE,KAAa;QACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC5C,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACxB,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC3B,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,gBAAgB,CAAC,EAAU;QACjC,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,IAAI,EAAE,EAAE,CAAC;YACP,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAC3B,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,SAAS,GAAG,EAAE,CAAC;gBACf,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;YAC7B,CAAC;QACH,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,IAAI,GAAG;gBACV,KAAK,EAAE,CAAC,CAAC;gBACT,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC;YAEF,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAChC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;QACH,CAAC;IACH,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAEM,KAAK,CAAC,SAAS;QACpB,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjC,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAErB,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YACrB,sEAAsE;YACtE,MAAM,IAAI,CAAC,YAAY,CAAC;YACxB,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YACxB,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5D,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAErB,6BAA6B;QAC7B,IAAI,CAAC,UAAU;aACZ,gBAAgB,CAAC,yBAAyB,CAAC;aAC3C,OAAO,CAAC,CAAC,GAAqB,EAAE,EAAE;YACjC,GAAG,CAAC,OAAO,EAAE,CAAC;QAChB,CAAC,CAAC,CAAC;IACP,CAAC;IAID,gEAAgE;IACxD,SAAS,CAAC,IAAc,EAAE,QAAoB,IAAI;QACxD,IAAI,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC;iBAC5C,IAAI,CAAC,CAAC,KAAiB,EAAE,EAAE;gBAC1B,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;oBACxB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;wBACnB,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,CACtC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,OAAO,CAAC,EAAE,CAChC,CAAC;wBACF,IAAI,QAAQ,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC;4BAC/B,OAAO,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;wBACjC,CAAC;oBACH,CAAC;gBACH,CAAC,CAAC,CAAC;gBAEH,wBAAwB;gBACxB,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;oBACxB,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;oBAC/B,mEAAmE;oBACnE,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;wBAClB,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;4BACnC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;wBACpC,CAAC,CAAC,CAAC;oBACL,CAAC;gBACH,CAAC,CAAC,CAAC;gBAEH,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBAErB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;oBAC/C,MAAM,GAAG,GAAG,IAAI,CAAC,uBAAuB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;oBACzD,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;gBACrC,CAAC;gBAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;oBACf,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;oBAC5C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACnB,CAAC;gBAED,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAC3B,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAChC,CAAC,CAAC;iBACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;gBACf,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;YACzD,CAAC,CAAC,CAAC;QACP,CAAC;IACH,CAAC;IAEO,iBAAiB,CACvB,KAAiB,EACjB,QAAkB,EAClB,SAAmB,IAAI;QAEvB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAU,CAAC;QAC7D,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,cAAc,GAAG,KAAK,CAAC,eAAe,EAAE,CAAC;YAC/C,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;oBAC7B,OAAO;gBACT,CAAC;YACH,CAAC;YACD,KAAK,CAAC,QAAQ,EAAE,CAAC;QACnB,CAAC;QAED,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;YAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC5C,gBAAgB,CACL,CAAC;YACd,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,CAAC,IAAI,EAAE,CAAC;YAClB,CAAC;YAED,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;oBAClD,IAAI,EAAE,QAAQ;oBACd,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE;oBAC9B,MAAM;iBACP,CAAC,CAAC;YACL,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC;YACnB,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;oBAClD,IAAI,EAAE,QAAQ;oBACd,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE;oBAC9B,MAAM;iBACP,CAAC,CAAC;YACL,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,QAAQ,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;YACrC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;gBAClD,IAAI,EAAE,QAAQ;gBACd,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE;gBAC9B,MAAM;aACP,CAAC,CAAC;YACH,OAAO;QACT,CAAC;QAED,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC;YAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;YACrC,OAAO;QACT,CAAC;QAED,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;YAC5B,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QACvC,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YACvC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;QAED,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC;YACvC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;gBAClD,IAAI,EAAE,QAAQ;gBACd,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE;gBAC9B,MAAM;aACP,CAAC,CAAC;YACH,OAAO;QACT,CAAC;QAED,uBAAuB;QACvB,IAAI,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YAC5C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;QACzD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,MAAM,CACnB,QAAQ,CAAC,KAAK,EACd,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,EACtC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAClC,CAAC;QACJ,CAAC;QAED,IAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC;YACtB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;YAEhC,qDAAqD;YACrD,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;gBACnB,OAAO;YACT,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QAED,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC;YAClB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;YACxC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;YAClD,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE;YAC9B,MAAM;SACP,CAAC,CAAC;IACL,CAAC;IAEM,sBAAsB;QAC3B,uCAAuC;QACvC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;YAC3D,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBACnB,GAAG,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YAC3D,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAEM,SAAS,CAAC,EAAU;QACzB,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAEhD,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YACnC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC9B,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEM,WAAW;QAChB,OAAO,IAAI,CAAC,uBAAuB,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,CAAC;IAEM,uBAAuB,CAAC,SAAmB;QAChD,MAAM,IAAI,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC;QAC5B,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvB,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAClC,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,GAAG,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC;gBAClC,IAAI,IAAI,EAAE,CAAC;oBACT,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;gBACrB,CAAC;qBAAM,CAAC;oBACN,MAAM;gBACR,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,MAAM;YACR,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,YAAY;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEM,YAAY;QACjB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAEM,cAAc;QACnB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEM,KAAK,CAAC,cAAc,CAAC,IAAY;QACtC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC7D,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,sDAAsD;QACtD,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC3B,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAChE,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,OAAO;YACT,CAAC;QACH,CAAC;QAED,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;QACtB,OAAO,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC9B,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,EAAE,CAAC;YACnC,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;oBACjB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBACtB,MAAM,IAAI,CAAC,YAAY,CAAC;gBAC1B,CAAC;gBAED,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC;gBAC3C,IAAI,CAAC,KAAK,EAAE,CAAC;oBACX,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;gBAC5C,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBACvB,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;QACzB,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;IAEO,UAAU,CAAC,QAAkB;QACnC,IAAI,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YAC3C,MAAM,QAAQ,GACZ,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;YACxE,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,UAAU,CAAC,QAAkB;QACnC,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CACpC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CACjD,CAAC;QACF,OAAO,QAAQ,CAAC;IAClB,CAAC;IAmLM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACnC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,EAAE,CAAC;QAElB,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QAEpE,MAAM,CAAC,IAAI,CACT,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;4CAEvB,IAAI,CAAC,YAAY;;sBAEvC,UAAU;;;;;;;;UAQtB,KAAK;aACJ,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;aAC9B,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC,CAAC;;;UAGF,KAAK;aACJ,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;aAC/B,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC,CAAC;;aAEC,CACR,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;YACnC,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC;YAE1C,IAAI,SAAS,GAAG,KAAK,CAAC;YACtB,IAAI,QAAQ,EAAE,CAAC;gBACb,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACvB,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACrD,uCAAuC;gBACvC,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;oBACxB,SAAS,GAAG,SAAS,CAAC,SAAS,KAAK,WAAW,CAAC;gBAClD,CAAC;gBACD,0CAA0C;qBACrC,CAAC;oBACJ,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC;wBAC/C,SAAS,GAAG,KAAK,CAAC;oBACpB,CAAC;gBACH,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,KAAK,GAAG,IAAI,CAAC;YACf,CAAC;YAED,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;YAEvE,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBAClD,MAAM,CAAC,IAAI,CACT,IAAI,CAAA;qBACO,UAAU,CAAC;oBAClB,KAAK,EAAE,IAAI;oBACX,CAAC,QAAQ,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI;oBAC9B,SAAS;iBACV,CAAC;;cAEA,CAAC,IAAI,CAAC,OAAO;oBACb,CAAC,CAAC,IAAI,CAAA;;6BAES,UAAU,CAAC;wBAClB,aAAa,EAAE,QAAQ,CAAC,WAAW;qBACpC,CAAC;;;;2CAIqB,QAAQ,CAAC,IAAI;;sBAElC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS;wBAC7B,CAAC,CAAC,IAAI,CAAA;iCACK,YAAY;;mCAEV,IAAI,CAAC,cAAc;uCACf;wBACjB,CAAC,CAAC,IAAI;;iBAEX;oBACH,CAAC,CAAC,IAAI;cACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;oBAC7B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;wBAC9B,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;;sBAEjC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAe,EAAE,EAAE;4BAC3C,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;wBAC1C,CAAC,CAAC;yBACG,CAAC;oBACZ,CAAC;oBACD,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;gBACnC,CAAC,CAAC;iBACG,CACR,CAAC;YACJ,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,IAAI,CAAA;eACN,UAAU,CAAC;YAClB,IAAI,EAAE,IAAI;YACV,iBAAiB,EAAE,IAAI,CAAC,SAAS;YACjC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE;SACxB,CAAC;;QAEA,MAAM;WACH,CAAC;QACR,OAAO,IAAI,CAAA,GAAG,IAAI,EAAE,CAAC;IACvB,CAAC;CACF;AArrBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACL","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { debounce, fetchResults, getClasses, renderAvatar } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { Dropdown } from '../dropdown/Dropdown';\nimport { NotificationList } from './NotificationList';\nimport { ResizeElement } from '../ResizeElement';\nimport { Store } from '../store/Store';\n\nexport interface MenuItem {\n  id?: string;\n  vanity_id?: string;\n  name?: string;\n  verbose_name?: string;\n  count?: number;\n  icon?: string;\n  collapsed_icon?: string;\n  endpoint?: string;\n  loading?: boolean;\n  bottom?: boolean;\n  level?: number;\n  href?: string;\n  show_header?: boolean;\n  items?: MenuItem[];\n  inline?: boolean;\n  type?: string;\n  on_submit?: string;\n  bubble?: string;\n  popup?: boolean;\n  avatar?: string;\n  trigger?: boolean;\n  event?: string;\n  mobile?: boolean;\n  initial?: string;\n}\n\ninterface MenuItemState {\n  collapsed?: string;\n}\n\nconst findItem = (\n  items: MenuItem[],\n  id: string\n): { item: MenuItem; index: number } => {\n  const search = items || [];\n\n  const index = search.findIndex((item: MenuItem) => {\n    return item.id == id || item.vanity_id == id;\n  });\n\n  if (index > -1) {\n    const item = search[index];\n    return { item, index };\n  }\n\n  return { item: null, index: -1 };\n};\n\nexport class TembaMenu extends ResizeElement {\n  static get styles() {\n    return css`\n      :host {\n        width: 100%;\n        display: block;\n        --color-widget-bg-focused: transparent;\n        --options-block-shadow: none;\n      }\n\n      .bubble {\n        width: 0.6em;\n        height: 0.6em;\n        right: 0em;\n        bottom: 0em;\n        border-radius: 99em;\n        border: 0.12em solid rgba(0, 0, 0, 0.1);\n        position: absolute;\n      }\n\n      .bubble.count {\n        position: relative;\n        width: inherit;\n        height: inherit;\n        right: inherit;\n        bottom: inherit;\n        color: #fff;\n        line-height: 1em;\n        padding: 0.12em;\n        min-width: 1em;\n        text-align: center;\n      }\n\n      .section {\n        font-size: 1.5em;\n        margin-bottom: 0.2em;\n        color: var(--color-text-dark);\n      }\n\n      .collapse-toggle {\n        width: 0.5em;\n        cursor: pointer;\n        display: block;\n        margin-right: 5px;\n        margin-top: 3px;\n        margin-bottom: 3px;\n      }\n\n      .collapse-toggle:hover {\n        background: rgb(100, 100, 100, 0.05);\n      }\n\n      .item {\n        cursor: pointer;\n        user-select: none;\n        -webkit-user-select: none;\n        display: flex;\n        --icon-color: var(--color-text-dark);\n      }\n\n      .item.selected,\n      .item.pressed {\n        background: var(--color-selection);\n        color: var(--color-primary-dark);\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .root {\n        display: flex;\n        flex-direction: row;\n        height: 100%;\n      }\n\n      .level {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .level.hidden {\n        display: none;\n      }\n\n      .popup {\n        --icon-color: rgba(255, 255, 255, 0.7);\n      }\n\n      .level-0 > .item,\n      .level-0 > temba-dropdown > div[slot='toggle'] > .avatar {\n        padding: 0px;\n        --icon-color: rgba(255, 255, 255, 0.7);\n        flex-direction: column;\n        border: 0px solid green;\n        width: 100%;\n        display: flex;\n        align-items: center;\n      }\n\n      .level-0 > temba-dropdown .icon-wrapper {\n        padding: 0.2em 0.4em 0.2em 0em;\n      }\n\n      .level-0 > .item.selected::before,\n      .level-0 > .item.selected::after {\n        content: ' ';\n        height: var(--curvature);\n        background: var(--color-primary-dark);\n        display: block;\n        width: 100%;\n      }\n\n      .level-0 > .item.selected::before {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .level-0 .item > temba-tip {\n        padding: 0.5em 0em;\n      }\n\n      .level-0 > .item.selected::after {\n        border-top-right-radius: var(--curvature);\n      }\n\n      .level-0 {\n        padding-top: var(--menu-padding) !important;\n      }\n\n      .level-0 > .empty {\n        background: var(--color-primary-dark);\n        align-self: stretch;\n        flex-grow: 1;\n      }\n\n      .level-0 > .bottom {\n        height: 1em;\n        background: var(--color-primary-dark);\n      }\n\n      .level-0 > temba-dropdown.open > div[slot='toggle'] > .avatar {\n        background: transparent !important;\n      }\n\n      .level-0 {\n        background: var(--color-primary-dark);\n      }\n\n      temba-dropdown {\n        margin: 0 0.25em;\n      }\n\n      temba-dropdown > div[slot='dropdown'] {\n        width: 300px;\n        overflow: hidden;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .avatar > .details {\n        margin-left: 0.75em;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .bubble.count {\n        margin-right: 0.75em;\n      }\n\n      .level-0 > .item > .details,\n      .level-0 > temba-dropdown > div[slot='toggle'] .details {\n        display: none !important;\n      }\n\n      .avatar {\n        align-items: center;\n      }\n\n      temba-dropdown > div[slot='dropdown'] {\n      }\n\n      temba-dropdown > div[slot='dropdown'] .avatar .avatar-circle,\n      temba-dropdown > div[slot='dropdown'] .avatar .bubble {\n        font-size: 0.7em;\n      }\n\n      .level-0.expanded {\n        background: inherit;\n      }\n\n      .level-0 > .item.selected {\n        background: white;\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .level {\n        padding: var(--menu-padding);\n      }\n\n      .level-0 {\n        padding: 0px;\n      }\n\n      .top {\n        display: flex;\n        align-items: center;\n        flex-direction: column;\n      }\n\n      .item {\n        padding: 0.2em 0.75em;\n        margin-top: 0.1em;\n        border-radius: var(--curvature);\n        display: flex;\n        min-width: 12em;\n        position: relative;\n      }\n\n      .item > temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .item > .details > .name {\n        flex-grow: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 0;\n      }\n\n      .level-0 .item {\n        margin-top: 0em;\n        border-radius: 0px;\n        min-width: inherit;\n        max-width: inherit;\n      }\n\n      .popup:hover {\n        --icon-color: #fff;\n      }\n\n      .level-0 > .item > temba-icon {\n        margin-right: 0px;\n      }\n\n      .level-0 > .item > .name {\n        min-width: 0px;\n      }\n\n      .count {\n        align-self: center;\n        margin-left: 1em;\n        font-size: 0.8em;\n        font-weight: 400;\n      }\n\n      .level-0 > .item-top {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom.selected {\n        border-top-right-radius: var(--curvature);\n      }\n\n      .level-0 > .item-top.selected {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .level-0 > .item:hover {\n        background: rgba(255, 255, 255, 0.15);\n        --icon-color: #fff;\n      }\n\n      .level-0 > .item.selected:hover {\n        background: white;\n        --icon-color: var(--color-primary-dark);\n        cursor: default;\n      }\n\n      .item.inline {\n        border: 0px solid transparent;\n      }\n\n      .level-1,\n      .level-2 {\n        border-right: 1px solid rgba(0 0 0 / 8%);\n        box-shadow: rgb(0 0 0 / 6%) 4px 0px 6px 1px;\n      }\n\n      .level-1 {\n        transition: opacity 100ms linear, margin 200ms linear;\n        overflow-y: scroll;\n      }\n\n      .mobile.root {\n        height: 100svh;\n      }\n\n      .mobile.root.fully-collapsed {\n        height: initial;\n      }\n\n      .root.fully-collapsed.mobile .level.level-0 {\n        padding-right: 0.5em;\n      }\n\n      .root.fully-collapsed.mobile .level.level-0 {\n        flex-direction: row;\n      }\n\n      .root.fully-collapsed.mobile .level.level-0 > .item {\n        display: none;\n      }\n\n      .root.fully-collapsed.mobile .level.level-0 > .empty {\n        display: block;\n        width: 100%;\n        min-width: inherit;\n        max-width: inherit;\n      }\n\n      .root .level.level-0 > .show-mobile {\n        display: none;\n      }\n\n      .root.mobile .level.level-0 > .show-mobile {\n        display: flex;\n      }\n\n      .root.fully-collapsed.mobile .level.level-0 > .show-mobile {\n        display: contents !important;\n      }\n\n      .root.fully-collapsed.mobile .level.level-0 .expand-icon {\n        max-height: 100%;\n        padding: 1em;\n      }\n\n      .mobile.fully-collapsed.root {\n        flex-direction: column;\n      }\n\n      .mobile.fully-collapsed.root .level-0 {\n        padding-top: 0px !important;\n      }\n\n      .mobile.fully-collapsed .level-1 {\n        display: none;\n      }\n\n      .mobile .level-1 {\n        flex-grow: 1;\n      }\n\n      .mobile .level-1 .item {\n        max-width: inherit;\n        min-width: inherit;\n      }\n\n      .mobile .level-1 .section {\n        max-width: inherit;\n        min-width: inherit;\n      }\n\n      .mobile.fully-collapsed .item {\n      }\n\n      .mobile .expand-icon {\n        transition: none;\n        transform: rotate(-90deg);\n        align-self: center;\n      }\n\n      .mobile.fully-collapsed .level-0 .empty {\n        flex-grow: 1;\n      }\n\n      .mobile.fully-collapsed .top-spacer {\n        flex-grow: 0;\n      }\n\n      .mobile.fully-collapsed #dd-workspace {\n        display: none;\n      }\n\n      .mobile.fully-collapsed .expand-icon {\n        transform: none;\n      }\n\n      .level-2 {\n        background: #fbfbfb;\n        overflow-y: auto;\n      }\n\n      .level-2 .item .details {\n        overflow: hidden;\n      }\n\n      .level-2 .item {\n        min-width: 12em;\n        max-width: 12em;\n      }\n\n      .level-1 .item {\n        overflow: hidden;\n        max-width: 12em;\n        min-width: 12em;\n        min-height: 1.5em;\n        max-height: 1.5em;\n        transition: min-width var(--transition-speed) !important;\n      }\n\n      .collapsed .item {\n        overflow: hidden;\n        min-width: 0;\n        margin: 0;\n      }\n\n      .item .details {\n        opacity: 1;\n        min-height: 1.5em;\n        max-height: 1.5em;\n        align-items: center;\n      }\n\n      .collapsed .item {\n        margin-bottom: 0.5em;\n      }\n\n      .collapsed .item .details {\n        overflow: hidden;\n        max-height: 0em;\n        max-width: 0em;\n      }\n\n      .collapsed .item .details {\n        max-height: 0em;\n      }\n\n      .collapsed .item temba-icon {\n        margin-right: 0;\n      }\n\n      .section {\n        max-width: 12em;\n      }\n\n      .collapsed .section {\n        opacity: 0;\n        max-width: 0em;\n        max-height: 0.6em;\n      }\n\n      .collapsed.level-1 {\n        overflow: hidden;\n        padding: 0.5em;\n        --icon-color: #999;\n      }\n\n      .collapsed .item .right {\n        flex-grow: 1;\n      }\n\n      .collapse-icon {\n        display: none;\n      }\n\n      .collapsed .collapse-icon {\n        --icon-color: #ccc;\n        display: block;\n      }\n\n      .collapsed .item.iconless {\n        max-height: 0em;\n        padding: 0em;\n        min-height: 0em;\n        margin-bottom: 0em;\n      }\n\n      .divider {\n        height: 1px;\n        background: #f3f3f3;\n        margin: 0.5em 0.75em;\n        min-height: 1px;\n      }\n\n      .space {\n        margin: 0.5em;\n      }\n\n      .collapsed .divider {\n        height: 0;\n        margin: 0;\n        padding: 0;\n        min-height: 0px;\n      }\n\n      .sub-section {\n        font-size: 0.9rem;\n        color: #888;\n        margin-top: 1rem;\n        margin-left: 0.3rem;\n      }\n\n      .fully-collapsed .level-1 {\n        margin-left: -208px;\n        pointer-events: none;\n        border: none;\n        overflow: hidden;\n      }\n\n      .fully-collapsed .level-1 > * {\n        opacity: 0;\n      }\n\n      .fully-collapsed .level-1 .item,\n      .fully-collapsed .level-1 .divider {\n        opacity: 0;\n      }\n\n      .fully-collapsed .level-2,\n      .fully-collapsed .level-3 {\n        display: none;\n      }\n\n      temba-button {\n        margin-top: 0.2em;\n        margin-bottom: 0.2em;\n        margin-left: 0.75em;\n        margin-right: 0.75em;\n      }\n\n      .expand-icon {\n        transform: rotate(180deg);\n        --icon-color: rgba(255, 255, 255, 0.5);\n        cursor: pointer;\n        max-height: 0px;\n        overflow: hidden;\n        opacity: 0;\n        transition: all 400ms ease-in-out 400ms;\n      }\n\n      .expand-icon:hover {\n        --icon-color: #fff;\n      }\n\n      .fully-collapsed .expand-icon {\n        padding-top: 0.5em;\n        max-height: 2em;\n        opacity: 1;\n      }\n\n      .section-header {\n        display: flex;\n        align-items: center;\n      }\n\n      .section-header .section {\n        flex-grow: 1;\n      }\n\n      .section-header temba-icon {\n        --icon-color: #ddd;\n        cursor: pointer;\n        padding-bottom: 0.5em;\n        padding-right: 0.5em;\n      }\n\n      .section-header temba-icon:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      a {\n        text-decoration: none;\n        color: var(--color-text-dark);\n      }\n\n      slot[name='header'] {\n        display: none;\n      }\n\n      slot[name='header'].show-header {\n        display: block;\n      }\n\n      .icon-wrapper {\n        position: relative;\n        padding: 0.2em 0.4em 0.2em 0em;\n      }\n\n      .level-0 .icon-wrapper {\n        padding: 0.4em 0.9em;\n      }\n\n      temba-workspace-select {\n        margin: 0.2em;\n        display: block;\n        --options-shadow: none;\n        --color-widget-border: transparent;\n        --widget-box-shadow: none;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  wraps = false;\n\n  @property({ type: Boolean })\n  wait: boolean;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  expanding: string;\n\n  @property({ type: String })\n  value: string;\n\n  // submenu to constrain to\n  @property({ type: String })\n  submenu: string;\n\n  @property({ type: Boolean })\n  collapsed: boolean;\n\n  @property({ type: Object })\n  pressedItem: MenuItem;\n\n  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  root: MenuItem;\n  selection: string[] = [];\n  state: { [id: string]: MenuItemState } = {};\n\n  constructor() {\n    super();\n    this.doRefresh = this.doRefresh.bind(this);\n\n    // scroll any lists to the top\n    this.addEventListener('blur', () => {\n      this.shadowRoot\n        .querySelectorAll('temba-list, temba-notification-list')\n        .forEach((ele: NotificationList) => {\n          ele.scrollToTop();\n        });\n    });\n  }\n\n  public setBubble(id: string, color: string) {\n    const found = findItem(this.root.items, id);\n    if (found && found.item) {\n      found.item.bubble = color;\n      this.requestUpdate('root');\n      return true;\n    }\n    return false;\n  }\n\n  private getMenuItemState(id: string): MenuItemState {\n    let itemState = {};\n    if (id) {\n      itemState = this.state[id];\n      if (!itemState) {\n        itemState = {};\n        this.state[id] = itemState;\n      }\n    }\n    return itemState;\n  }\n\n  public updated(changes: Map<string, any>) {\n    if (changes.has('endpoint')) {\n      this.root = {\n        level: -1,\n        endpoint: this.endpoint\n      };\n\n      if (!this.wait) {\n        this.loadItems(this.root);\n      } else {\n        this.fireCustomEvent(CustomEventType.Ready);\n      }\n    }\n\n    if (changes.has('root')) {\n      if (this.value) {\n        this.setFocusedItem(this.value);\n        this.value = null;\n      }\n    }\n  }\n\n  public reset() {\n    this.loadItems(this.root);\n  }\n\n  public async doRefresh() {\n    const path = [...this.selection];\n    let item = this.root;\n\n    while (path.length > 0) {\n      this.loadItems(item);\n      // we need to wait until the load is complete before doing the replace\n      await this.httpComplete;\n      const id = path.shift();\n      item = (item.items || []).find((_item) => _item.id == id);\n    }\n\n    this.loadItems(item);\n\n    // refresh any embedded lists\n    this.shadowRoot\n      .querySelectorAll('temba-notification-list')\n      .forEach((ele: NotificationList) => {\n        ele.refresh();\n      });\n  }\n\n  public refresh = debounce(this.doRefresh, 200);\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private loadItems(item: MenuItem, event: MouseEvent = null) {\n    if (item && item.endpoint) {\n      item.loading = true;\n      this.httpComplete = fetchResults(item.endpoint)\n        .then((items: MenuItem[]) => {\n          items.forEach((newItem) => {\n            if (!newItem.items) {\n              const prevItem = (item.items || []).find(\n                (prev) => prev.id == newItem.id\n              );\n              if (prevItem && prevItem.items) {\n                newItem.items = prevItem.items;\n              }\n            }\n          });\n\n          // update our item level\n          items.forEach((subItem) => {\n            subItem.level = item.level + 1;\n            // if we came with preset items, set the level for them accordingly\n            if (subItem.items) {\n              subItem.items.forEach((inlineItem) => {\n                inlineItem.level = item.level + 2;\n              });\n            }\n          });\n\n          item.items = items;\n          item.loading = false;\n\n          if (this.submenu && this.selection.length == 0) {\n            const sub = this.getMenuItemForSelection([this.submenu]);\n            this.handleItemClicked(event, sub);\n          }\n\n          if (!this.wait) {\n            this.fireCustomEvent(CustomEventType.Ready);\n            this.wait = true;\n          }\n\n          this.requestUpdate('root');\n          this.scrollSelectedIntoView();\n        })\n        .catch((error) => {\n          this.fireCustomEvent(CustomEventType.Error, { error });\n        });\n    }\n  }\n\n  private handleItemClicked(\n    event: MouseEvent,\n    menuItem: MenuItem,\n    parent: MenuItem = null\n  ) {\n    const store = document.querySelector('temba-store') as Store;\n    if (store) {\n      const unsavedMessage = store.getDirtyMessage();\n      if (unsavedMessage) {\n        if (!confirm(unsavedMessage)) {\n          return;\n        }\n      }\n      store.cleanAll();\n    }\n\n    if (parent && parent.popup) {\n      const dropdown = this.shadowRoot.querySelector(\n        'temba-dropdown'\n      ) as Dropdown;\n      if (dropdown) {\n        dropdown.blur();\n      }\n\n      if (event) {\n        this.fireCustomEvent(CustomEventType.ButtonClicked, {\n          item: menuItem,\n          selection: this.getSelection(),\n          parent\n        });\n      }\n      return;\n    }\n\n    if (menuItem.popup) {\n      if (event) {\n        this.fireCustomEvent(CustomEventType.ButtonClicked, {\n          item: menuItem,\n          selection: this.getSelection(),\n          parent\n        });\n      }\n      return;\n    }\n\n    if (menuItem.type === 'modax-button') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        item: menuItem,\n        selection: this.getSelection(),\n        parent\n      });\n      return;\n    }\n\n    if (event && event.metaKey && menuItem.href) {\n      event.preventDefault();\n      event.stopPropagation();\n      window.open(menuItem.href, '_blank');\n      return;\n    }\n\n    if (parent && parent.inline) {\n      this.handleItemClicked(null, parent);\n    }\n\n    if (this.collapsed && !this.isMobile()) {\n      this.collapsed = false;\n    }\n\n    if (this.isMobile()) {\n      this.collapsed = true;\n    }\n\n    if (menuItem.trigger || menuItem.event) {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        item: menuItem,\n        selection: this.getSelection(),\n        parent\n      });\n      return;\n    }\n\n    // update our selection\n    if (menuItem.level >= this.selection.length) {\n      this.selection.push(menuItem.vanity_id || menuItem.id);\n    } else {\n      this.selection.splice(\n        menuItem.level,\n        this.selection.length - menuItem.level,\n        menuItem.vanity_id || menuItem.id\n      );\n    }\n\n    if (menuItem.endpoint) {\n      this.loadItems(menuItem, event);\n\n      // make sure change events fire for events with hrefs\n      if (!menuItem.href) {\n        return;\n      }\n    } else {\n      this.requestUpdate();\n    }\n\n    if (menuItem.href) {\n      this.dispatchEvent(new Event('change'));\n      return;\n    }\n\n    this.fireCustomEvent(CustomEventType.ButtonClicked, {\n      item: menuItem,\n      selection: this.getSelection(),\n      parent\n    });\n  }\n\n  public scrollSelectedIntoView() {\n    // makes sure we are scrolled into view\n    window.setTimeout(() => {\n      const eles = this.shadowRoot.querySelectorAll('.selected');\n      eles.forEach((ele) => {\n        ele.scrollIntoView({ block: 'end', behavior: 'smooth' });\n      });\n    }, 0);\n  }\n\n  public clickItem(id: string): boolean {\n    const path = [...this.selection];\n    path.splice(path.length - 1, 1, id);\n    const item = this.getMenuItemForSelection(path);\n\n    if (item) {\n      this.handleItemClicked(null, item);\n      this.scrollSelectedIntoView();\n      return true;\n    }\n    return false;\n  }\n\n  public getMenuItem(): MenuItem {\n    return this.getMenuItemForSelection([...this.selection]);\n  }\n\n  public getMenuItemForSelection(selection: string[]) {\n    const path = [...selection];\n    let items = this.root.items;\n    let item = null;\n    while (path.length > 0) {\n      const step = path.splice(0, 1)[0];\n      if (items) {\n        item = findItem(items, step).item;\n        if (item) {\n          items = item.items;\n        } else {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n\n    return item;\n  }\n\n  public getSelection() {\n    return this.selection;\n  }\n\n  public handleExpand() {\n    this.collapsed = false;\n  }\n\n  public handleCollapse() {\n    this.collapsed = true;\n  }\n\n  public async setFocusedItem(path: string) {\n    const focusedPath = path.split('/').filter((step) => !!step);\n    if (!this.root) {\n      return;\n    }\n\n    // if we don't match at the first level, we are a noop\n    if (focusedPath.length > 0) {\n      const rootItem = findItem(this.root.items, focusedPath[0]).item;\n      if (!rootItem) {\n        return;\n      }\n    }\n\n    const newPath = [];\n    let level = this.root;\n    while (focusedPath.length > 0) {\n      const nextId = focusedPath.shift();\n      if (nextId) {\n        if (!level.items) {\n          this.loadItems(level);\n          await this.httpComplete;\n        }\n\n        level = findItem(level.items, nextId).item;\n        if (!level) {\n          focusedPath.splice(0, focusedPath.length);\n        } else {\n          newPath.push(nextId);\n        }\n      }\n    }\n\n    this.selection = newPath;\n    this.refresh();\n    this.requestUpdate('root');\n  }\n\n  private isSelected(menuItem: MenuItem) {\n    if (menuItem.level < this.selection.length) {\n      const selected =\n        this.selection[menuItem.level] == (menuItem.vanity_id || menuItem.id);\n      return selected;\n    }\n    return false;\n  }\n\n  private isExpanded(menuItem: MenuItem) {\n    const expanded = !!this.selection.find(\n      (id) => id === menuItem.vanity_id || menuItem.id\n    );\n    return expanded;\n  }\n\n  private renderMenuItem = (\n    menuItem: MenuItem,\n    parent: MenuItem = null\n  ): TemplateResult => {\n    if (menuItem.type === 'divider') {\n      return html`<div class=\"divider\"></div>`;\n    }\n\n    if (menuItem.type === 'temba-workspace-select') {\n      return html`<temba-workspace-select\n        @change=${(event) => {\n          event.stopPropagation();\n          event.preventDefault();\n        }}\n        .values=${[JSON.parse(menuItem.initial)]}\n      ></temba-workspace-select>`;\n    }\n\n    if (menuItem.type === 'temba-notification-list') {\n      return html`<temba-notification-list\n        endpoint=${menuItem.href}\n      ></temba-notification-list>`;\n    }\n\n    if (menuItem.type === 'space') {\n      return html`<div class=\"space\"></div>`;\n    }\n\n    if (menuItem.type === 'section' || menuItem.inline) {\n      return html`<div class=\"sub-section\">${menuItem.name}</div>`;\n    }\n\n    if (menuItem.type === 'modax-button') {\n      return html`<temba-button\n        name=${menuItem.name}\n        lined\n        icon=${menuItem.icon}\n        @click=${(event) => {\n          this.handleItemClicked(event, menuItem);\n        }}\n      />`;\n    }\n\n    const isSelected = this.isSelected(menuItem);\n    const isChildSelected =\n      isSelected && this.selection.length > menuItem.level + 1;\n\n    let icon = menuItem.icon\n      ? html`<div class=\"icon-wrapper\">\n          <temba-icon\n            size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n            name=\"${menuItem.icon}\"\n          ></temba-icon\n          >${menuItem.bubble && !menuItem.count\n            ? html`<div\n                style=\"background-color: ${menuItem.bubble}\"\n                class=\"bubble\"\n              ></div>`\n            : null}\n        </div>`\n      : null;\n\n    const collapsedIcon = menuItem.collapsed_icon\n      ? html`<temba-icon\n          size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n          name=\"${menuItem.collapsed_icon}\"\n          class=\"collapse-icon\"\n        ></temba-icon>`\n      : null;\n\n    const itemClasses = getClasses({\n      ['menu-' + menuItem.id]: true,\n      'child-selected': isChildSelected,\n      selected: isSelected,\n      item: !(menuItem.avatar && menuItem.level === 0),\n      avatar: !!menuItem.avatar,\n      popup: menuItem.popup,\n      inline: menuItem.inline,\n      expanding: this.expanding && this.expanding === menuItem.id,\n      expanded: this.isExpanded(menuItem),\n      iconless: !icon && !collapsedIcon && !menuItem.avatar,\n      pressed: this.pressedItem && this.pressedItem.id == menuItem.id,\n      'show-mobile': menuItem.mobile\n    });\n\n    if (menuItem.avatar) {\n      icon = renderAvatar({\n        name: menuItem.avatar,\n        scale: parent ? 0.9 : 1.2\n      });\n      if (menuItem.bubble) {\n        icon = html`${icon}${menuItem.bubble\n          ? html`<div\n              style=\"background-color: ${menuItem.bubble}\"\n              class=\"bubble\"\n            ></div>`\n          : null}`;\n      }\n      icon = html`<div style=\"position:relative; padding: 0em\">${icon}</div>`;\n    }\n\n    const item = html`\n      <a\n        href=${ifDefined(menuItem.href ? menuItem.href : undefined)}\n        id=\"menu-${menuItem.id}\"\n        class=\"${itemClasses}\"\n        @click=${(event) => {\n          event.preventDefault();\n          this.pressedItem = null;\n          this.handleItemClicked(event, menuItem, parent);\n        }}\n        @mousedown=${() => {\n          if (menuItem.level > 0) {\n            this.pressedItem = menuItem;\n          }\n        }}\n        @mouseleave=${() => {\n          this.pressedItem = null;\n        }}\n      >\n        ${menuItem.level === 0\n          ? menuItem.avatar\n            ? icon\n            : html`<temba-tip style=\"display:flex;\" text=\"${menuItem.name}\"\n                >${icon}</temba-tip\n              >`\n          : html`${icon}${collapsedIcon}`}\n\n        <div class=\"details\" style=\"flex-grow:1;display:flex\">\n          <div\n            class=\"name\"\n            style=\"flex-grow:1; flex-shrink:0; white-space: ${this.wraps\n              ? 'normal'\n              : 'nowrap'};\"\n          >\n            ${menuItem.name}\n          </div>\n          ${menuItem.level > 0\n            ? menuItem.inline\n              ? html`<temba-icon\n                  name=\"${isSelected || isChildSelected\n                    ? Icon.arrow_up\n                    : Icon.arrow_down}\"\n                ></temba-icon>`\n              : html`${menuItem.count || menuItem.count == 0\n                  ? html`\n                      <div\n                        class=\"count ${menuItem.bubble ? 'bubble' : ''}\"\n                        style=\"background-color: ${menuItem.bubble}\"\n                      >\n                        ${menuItem.count.toLocaleString()}\n                      </div>\n                    `\n                  : html`<div class=\"count\"></div>`}`\n            : null}\n        </div>\n        <div class=\"right\"></div>\n      </a>\n    `;\n\n    if (menuItem.popup) {\n      return html`\n        <temba-dropdown id=\"dd-${menuItem.id}\">\n          <div slot=\"toggle\">${item}</div>\n\n          <div slot=\"dropdown\">\n            ${(menuItem.items || []).map((child: MenuItem) => {\n              child.level = menuItem.level + 1;\n              return html`${this.renderMenuItem(child, menuItem)}`;\n            })}\n          </div>\n        </temba-dropdown>\n      `;\n    }\n    return item;\n  };\n\n  public render(): TemplateResult {\n    if (!this.root || !this.root.items) {\n      return null;\n    }\n\n    let items = this.root.items || [];\n    const levels = [];\n\n    const expandIcon = this.isMobile() ? Icon.menu : Icon.menu_collapse;\n\n    levels.push(\n      html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n        <div class=\"top\">\n          <div class=\"expand-icon\" @click=${this.handleExpand}>\n            <temba-icon\n              name=\"${expandIcon}\"\n              class=\"collapse expand\"\n              size=\"1.4\"\n            ></temba-icon>\n          </div>\n        </div>\n        <div class=\"top-spacer\"></div>\n\n        ${items\n          .filter((item) => !item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n\n        <div class=\"empty\"></div>\n        ${items\n          .filter((item) => !!item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n        <div class=\"bottom\"></div>\n      </div>`\n    );\n\n    this.selection.forEach((id, index) => {\n      const selected = findItem(items, id).item;\n\n      let collapsed = false;\n      if (selected) {\n        items = selected.items;\n        const itemState = this.getMenuItemState(selected.id);\n        // users set an explicit collapse state\n        if (itemState.collapsed) {\n          collapsed = itemState.collapsed === 'collapsed';\n        }\n        // otherwise pick a default collapse state\n        else {\n          if (this.selection.length > selected.level + 2) {\n            collapsed = false;\n          }\n        }\n      } else {\n        items = null;\n      }\n\n      const collapseIcon = this.isMobile() ? Icon.close : Icon.menu_collapse;\n\n      if (items && items.length > 0 && !selected.inline) {\n        levels.push(\n          html`<div\n            class=\"${getClasses({\n              level: true,\n              ['level-' + (index + 1)]: true,\n              collapsed\n            })}\"\n          >\n            ${!this.submenu\n              ? html`\n                  <slot\n                    class=\"${getClasses({\n                      'show-header': selected.show_header\n                    })}\"\n                    name=\"header\"\n                  ></slot>\n                  <div class=\"section-header\">\n                    <div class=\"section\">${selected.name}</div>\n\n                    ${index == 0 && !this.collapsed\n                      ? html`<temba-icon\n                          name=${collapseIcon}\n                          size=\"1.5\"\n                          @click=${this.handleCollapse}\n                        ></temba-icon>`\n                      : null}\n                  </div>\n                `\n              : null}\n            ${items.map((item: MenuItem) => {\n              if (item.inline && item.items) {\n                return html`${this.renderMenuItem(item)}\n                  <div class=\"inline-children\">\n                    ${(item.items || []).map((child: MenuItem) => {\n                      return this.renderMenuItem(child, item);\n                    })}\n                  </div>`;\n              }\n              return this.renderMenuItem(item);\n            })}\n          </div>`\n        );\n      }\n    });\n\n    const menu = html`<div\n      class=\"${getClasses({\n        root: true,\n        'fully-collapsed': this.collapsed,\n        mobile: this.isMobile()\n      })}\"\n    >\n      ${levels}\n    </div>`;\n    return html`${menu}`;\n  }\n}\n"]}
+{"version":3,"file":"TembaMenu.js","sourceRoot":"","sources":["../../../src/list/TembaMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { debounce, fetchResults, getClasses, renderAvatar } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { Dropdown } from '../dropdown/Dropdown';\nimport { NotificationList } from './NotificationList';\nimport { ResizeElement } from '../ResizeElement';\nimport { Store } from '../store/Store';\n\nexport interface MenuItem {\n  id?: string;\n  vanity_id?: string;\n  name?: string;\n  verbose_name?: string;\n  count?: number;\n  icon?: string;\n  collapsed_icon?: string;\n  endpoint?: string;\n  loading?: boolean;\n  bottom?: boolean;\n  level?: number;\n  href?: string;\n  show_header?: boolean;\n  items?: MenuItem[];\n  inline?: boolean;\n  type?: string;\n  on_submit?: string;\n  bubble?: string;\n  popup?: boolean;\n  avatar?: string;\n  trigger?: boolean;\n  event?: string;\n  mobile?: boolean;\n  initial?: string;\n}\n\ninterface MenuItemState {\n  collapsed?: string;\n}\n\nconst findItem = (\n  items: MenuItem[],\n  id: string\n): { item: MenuItem; index: number } => {\n  const search = items || [];\n\n  const index = search.findIndex((item: MenuItem) => {\n    return item.id == id || item.vanity_id == id;\n  });\n\n  if (index > -1) {\n    const item = search[index];\n    return { item, index };\n  }\n\n  return { item: null, index: -1 };\n};\n\nexport class TembaMenu extends ResizeElement {\n  static get styles() {\n    return css`\n      :host {\n        width: 100%;\n        display: block;\n        --color-widget-bg-focused: transparent;\n        --options-block-shadow: none;\n      }\n\n      .bubble {\n        width: 0.6em;\n        height: 0.6em;\n        right: 0em;\n        bottom: 0em;\n        border-radius: 99em;\n        border: 0.12em solid rgba(0, 0, 0, 0.1);\n        position: absolute;\n      }\n\n      .bubble.count {\n        position: relative;\n        width: inherit;\n        height: inherit;\n        right: inherit;\n        bottom: inherit;\n        color: #fff;\n        line-height: 1em;\n        padding: 0.12em;\n        min-width: 1em;\n        text-align: center;\n      }\n\n      .section {\n        font-size: 1.5em;\n        margin-bottom: 0.2em;\n        color: var(--color-text-dark);\n      }\n\n      .collapse-toggle {\n        width: 0.5em;\n        cursor: pointer;\n        display: block;\n        margin-right: 5px;\n        margin-top: 3px;\n        margin-bottom: 3px;\n      }\n\n      .collapse-toggle:hover {\n        background: rgb(100, 100, 100, 0.05);\n      }\n\n      .item {\n        cursor: pointer;\n        user-select: none;\n        -webkit-user-select: none;\n        display: flex;\n        --icon-color: var(--color-text-dark);\n      }\n\n      .item.selected,\n      .item.pressed {\n        background: var(--color-selection);\n        color: var(--color-primary-dark);\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .root {\n        display: flex;\n        flex-direction: row;\n        height: 100%;\n      }\n\n      .level {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .level.hidden {\n        display: none;\n      }\n\n      .popup {\n        --icon-color: rgba(255, 255, 255, 0.7);\n      }\n\n      .level-0 > .item,\n      .level-0 > temba-dropdown > div[slot='toggle'] > .avatar {\n        padding: 0px;\n        --icon-color: rgba(255, 255, 255, 0.7);\n        flex-direction: column;\n        border: 0px solid green;\n        width: 100%;\n        display: flex;\n        align-items: center;\n      }\n\n      .level-0 > .item.selected::before,\n      .level-0 > .item.selected::after {\n        content: ' ';\n        height: var(--curvature);\n        background: var(--color-primary-dark);\n        display: block;\n        width: 100%;\n      }\n\n      .level-0 > .item.selected::before {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .level-0 .item > temba-tip {\n        padding: 0.5em 0em;\n      }\n\n      .level-0 > .item.selected::after {\n        border-top-right-radius: var(--curvature);\n      }\n\n      .level-0 {\n        padding-top: var(--menu-padding) !important;\n      }\n\n      .level-0 > .empty {\n        background: var(--color-primary-dark);\n        align-self: stretch;\n        flex-grow: 1;\n      }\n\n      .level-0 > .bottom {\n        height: 1em;\n        background: var(--color-primary-dark);\n      }\n\n      .level-0 > temba-dropdown.open > div[slot='toggle'] > .avatar {\n        background: transparent !important;\n      }\n\n      .level-0 {\n        background: var(--color-primary-dark);\n      }\n\n      temba-dropdown {\n        margin: 0 0.25em;\n      }\n\n      temba-dropdown > div[slot='dropdown'] {\n        width: 300px;\n        overflow: hidden;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .avatar > .details {\n        margin-left: 0.75em;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .bubble.count {\n        margin-right: 0.75em;\n      }\n\n      .level-0 > .item > .details,\n      .level-0 > temba-dropdown > div[slot='toggle'] .details {\n        display: none !important;\n      }\n\n      .avatar {\n        align-items: center;\n      }\n\n      temba-dropdown > div[slot='dropdown'] {\n      }\n\n      temba-dropdown > div[slot='dropdown'] .avatar .avatar-circle,\n      temba-dropdown > div[slot='dropdown'] .avatar .bubble {\n        font-size: 0.7em;\n      }\n\n      .level-0.expanded {\n        background: inherit;\n      }\n\n      .level-0 > .item.selected {\n        background: white;\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .level {\n        padding: var(--menu-padding);\n      }\n\n      .level-0 {\n        padding: 0px;\n      }\n\n      .top {\n        display: flex;\n        align-items: center;\n        flex-direction: column;\n      }\n\n      .item {\n        padding: 0.2em 0.75em;\n        margin-top: 0.1em;\n        border-radius: var(--curvature);\n        display: flex;\n        min-width: 12em;\n        position: relative;\n      }\n\n      .item > temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .item > .details > .name {\n        flex-grow: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 0;\n      }\n\n      .level-0 .item {\n        margin-top: 0em;\n        border-radius: 0px;\n        min-width: inherit;\n        max-width: inherit;\n      }\n\n      .popup:hover {\n        --icon-color: #fff;\n      }\n\n      .level-0 > .item > temba-icon {\n        margin-right: 0px;\n      }\n\n      .level-0 > .item > .name {\n        min-width: 0px;\n      }\n\n      .count {\n        align-self: center;\n        margin-left: 1em;\n        font-size: 0.8em;\n        font-weight: 400;\n      }\n\n      .level-0 > .item-top {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom.selected {\n        border-top-right-radius: var(--curvature);\n      }\n\n      .level-0 > .item-top.selected {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .level-0 > .item:hover {\n        background: rgba(255, 255, 255, 0.15);\n        --icon-color: #fff;\n      }\n\n      .level-0 > .item.selected:hover {\n        background: white;\n        --icon-color: var(--color-primary-dark);\n        cursor: default;\n      }\n\n      .item.inline {\n        border: 0px solid transparent;\n      }\n\n      .level-1,\n      .level-2 {\n        border-right: 1px solid rgba(0 0 0 / 8%);\n        box-shadow: rgb(0 0 0 / 6%) 4px 0px 6px 1px;\n      }\n\n      .level-1 {\n        transition: opacity 100ms linear, margin 200ms linear;\n        overflow-y: scroll;\n      }\n\n      .mobile.root {\n        height: 100svh;\n      }\n\n      .mobile.root.fully-collapsed {\n        height: initial;\n      }\n\n      .root.fully-collapsed.mobile .level.level-0 {\n        padding-right: 0.5em;\n      }\n\n      .root.fully-collapsed.mobile .level.level-0 {\n        flex-direction: row;\n      }\n\n      .root.fully-collapsed.mobile .level.level-0 > .item {\n        display: none;\n      }\n\n      .root.fully-collapsed.mobile .level.level-0 > .empty {\n        display: block;\n        width: 100%;\n        min-width: inherit;\n        max-width: inherit;\n      }\n\n      .root .level.level-0 > .show-mobile {\n        display: none;\n      }\n\n      .root.mobile .level.level-0 > .show-mobile {\n        display: flex;\n      }\n\n      .root.fully-collapsed.mobile .level.level-0 > .show-mobile {\n        display: contents !important;\n      }\n\n      .root.fully-collapsed.mobile .level.level-0 .expand-icon {\n        max-height: 100%;\n        padding: 1em;\n      }\n\n      .mobile.fully-collapsed.root {\n        flex-direction: column;\n      }\n\n      .mobile.fully-collapsed.root .level-0 {\n        padding-top: 0px !important;\n      }\n\n      .mobile.fully-collapsed .level-1 {\n        display: none;\n      }\n\n      .mobile .level-1 {\n        flex-grow: 1;\n      }\n\n      .mobile .level-1 .item {\n        max-width: inherit;\n        min-width: inherit;\n      }\n\n      .mobile .level-1 .section {\n        max-width: inherit;\n        min-width: inherit;\n      }\n\n      .mobile.fully-collapsed .item {\n      }\n\n      .mobile .expand-icon {\n        transition: none;\n        transform: rotate(-90deg);\n        align-self: center;\n      }\n\n      .mobile.fully-collapsed .level-0 .empty {\n        flex-grow: 1;\n      }\n\n      .mobile.fully-collapsed .top-spacer {\n        flex-grow: 0;\n      }\n\n      .mobile.fully-collapsed #dd-workspace {\n        display: none;\n      }\n\n      .mobile.fully-collapsed .expand-icon {\n        transform: none;\n      }\n\n      .level-2 {\n        background: #fbfbfb;\n        overflow-y: auto;\n      }\n\n      .level-2 .item .details {\n        overflow: hidden;\n      }\n\n      .level-2 .item {\n        min-width: 12em;\n        max-width: 12em;\n      }\n\n      .level-1 .item {\n        overflow: hidden;\n        max-width: 12em;\n        min-width: 12em;\n        min-height: 1.5em;\n        max-height: 1.5em;\n        transition: min-width var(--transition-speed) !important;\n      }\n\n      .collapsed .item {\n        overflow: hidden;\n        min-width: 0;\n        margin: 0;\n      }\n\n      .item .details {\n        opacity: 1;\n        min-height: 1.5em;\n        max-height: 1.5em;\n        align-items: center;\n      }\n\n      .collapsed .item {\n        margin-bottom: 0.5em;\n      }\n\n      .collapsed .item .details {\n        overflow: hidden;\n        max-height: 0em;\n        max-width: 0em;\n      }\n\n      .collapsed .item .details {\n        max-height: 0em;\n      }\n\n      .collapsed .item temba-icon {\n        margin-right: 0;\n      }\n\n      .section {\n        max-width: 12em;\n      }\n\n      .collapsed .section {\n        opacity: 0;\n        max-width: 0em;\n        max-height: 0.6em;\n      }\n\n      .collapsed.level-1 {\n        overflow: hidden;\n        padding: 0.5em;\n        --icon-color: #999;\n      }\n\n      .collapsed .item .right {\n        flex-grow: 1;\n      }\n\n      .collapse-icon {\n        display: none;\n      }\n\n      .collapsed .collapse-icon {\n        --icon-color: #ccc;\n        display: block;\n      }\n\n      .collapsed .item.iconless {\n        max-height: 0em;\n        padding: 0em;\n        min-height: 0em;\n        margin-bottom: 0em;\n      }\n\n      .divider {\n        height: 1px;\n        background: #f3f3f3;\n        margin: 0.5em 0.75em;\n        min-height: 1px;\n      }\n\n      .space {\n        margin: 0.5em;\n      }\n\n      .collapsed .divider {\n        height: 0;\n        margin: 0;\n        padding: 0;\n        min-height: 0px;\n      }\n\n      .sub-section {\n        font-size: 0.9rem;\n        color: #888;\n        margin-top: 1rem;\n        margin-left: 0.3rem;\n      }\n\n      .fully-collapsed .level-1 {\n        margin-left: -208px;\n        pointer-events: none;\n        border: none;\n        overflow: hidden;\n      }\n\n      .fully-collapsed .level-1 > * {\n        opacity: 0;\n      }\n\n      .fully-collapsed .level-1 .item,\n      .fully-collapsed .level-1 .divider {\n        opacity: 0;\n      }\n\n      .fully-collapsed .level-2,\n      .fully-collapsed .level-3 {\n        display: none;\n      }\n\n      temba-button {\n        margin-top: 0.2em;\n        margin-bottom: 0.2em;\n        margin-left: 0.75em;\n        margin-right: 0.75em;\n      }\n\n      .expand-icon {\n        transform: rotate(180deg);\n        --icon-color: rgba(255, 255, 255, 0.5);\n        cursor: pointer;\n        max-height: 0px;\n        overflow: hidden;\n        opacity: 0;\n        transition: all 400ms ease-in-out 400ms;\n      }\n\n      .expand-icon:hover {\n        --icon-color: #fff;\n      }\n\n      .fully-collapsed .expand-icon {\n        padding-top: 0.5em;\n        max-height: 2em;\n        opacity: 1;\n      }\n\n      .section-header {\n        display: flex;\n        align-items: center;\n      }\n\n      .section-header .section {\n        flex-grow: 1;\n      }\n\n      .section-header temba-icon {\n        --icon-color: #ddd;\n        cursor: pointer;\n        padding-bottom: 0.5em;\n        padding-right: 0.5em;\n      }\n\n      .section-header temba-icon:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      a {\n        text-decoration: none;\n        color: var(--color-text-dark);\n      }\n\n      slot[name='header'] {\n        display: none;\n      }\n\n      slot[name='header'].show-header {\n        display: block;\n      }\n\n      .icon-wrapper {\n        position: relative;\n        padding: 0.2em 0.4em 0.2em 0em;\n      }\n\n      .level-0 .icon-wrapper {\n        padding: 0.4em 0.2em;\n      }\n\n      temba-workspace-select {\n        margin: 0.2em;\n        display: block;\n        --options-shadow: none;\n        --color-widget-border: transparent;\n        --widget-box-shadow: none;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  wraps = false;\n\n  @property({ type: Boolean })\n  wait: boolean;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  expanding: string;\n\n  @property({ type: String })\n  value: string;\n\n  // submenu to constrain to\n  @property({ type: String })\n  submenu: string;\n\n  @property({ type: Boolean })\n  collapsed: boolean;\n\n  @property({ type: Object })\n  pressedItem: MenuItem;\n\n  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  root: MenuItem;\n  selection: string[] = [];\n  state: { [id: string]: MenuItemState } = {};\n\n  constructor() {\n    super();\n    this.doRefresh = this.doRefresh.bind(this);\n\n    // scroll any lists to the top\n    this.addEventListener('blur', () => {\n      this.shadowRoot\n        .querySelectorAll('temba-list, temba-notification-list')\n        .forEach((ele: NotificationList) => {\n          ele.scrollToTop();\n        });\n    });\n  }\n\n  public setBubble(id: string, color: string) {\n    const found = findItem(this.root.items, id);\n    if (found && found.item) {\n      found.item.bubble = color;\n      this.requestUpdate('root');\n      return true;\n    }\n    return false;\n  }\n\n  private getMenuItemState(id: string): MenuItemState {\n    let itemState = {};\n    if (id) {\n      itemState = this.state[id];\n      if (!itemState) {\n        itemState = {};\n        this.state[id] = itemState;\n      }\n    }\n    return itemState;\n  }\n\n  public updated(changes: Map<string, any>) {\n    if (changes.has('endpoint')) {\n      this.root = {\n        level: -1,\n        endpoint: this.endpoint\n      };\n\n      if (!this.wait) {\n        this.loadItems(this.root);\n      } else {\n        this.fireCustomEvent(CustomEventType.Ready);\n      }\n    }\n\n    if (changes.has('root')) {\n      if (this.value) {\n        this.setFocusedItem(this.value);\n        this.value = null;\n      }\n    }\n  }\n\n  public reset() {\n    this.loadItems(this.root);\n  }\n\n  public async doRefresh() {\n    const path = [...this.selection];\n    let item = this.root;\n\n    while (path.length > 0) {\n      this.loadItems(item);\n      // we need to wait until the load is complete before doing the replace\n      await this.httpComplete;\n      const id = path.shift();\n      item = (item.items || []).find((_item) => _item.id == id);\n    }\n\n    this.loadItems(item);\n\n    // refresh any embedded lists\n    this.shadowRoot\n      .querySelectorAll('temba-notification-list')\n      .forEach((ele: NotificationList) => {\n        ele.refresh();\n      });\n  }\n\n  public refresh = debounce(this.doRefresh, 200);\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private loadItems(item: MenuItem, event: MouseEvent = null) {\n    if (item && item.endpoint) {\n      item.loading = true;\n      this.httpComplete = fetchResults(item.endpoint)\n        .then((items: MenuItem[]) => {\n          items.forEach((newItem) => {\n            if (!newItem.items) {\n              const prevItem = (item.items || []).find(\n                (prev) => prev.id == newItem.id\n              );\n              if (prevItem && prevItem.items) {\n                newItem.items = prevItem.items;\n              }\n            }\n          });\n\n          // update our item level\n          items.forEach((subItem) => {\n            subItem.level = item.level + 1;\n            // if we came with preset items, set the level for them accordingly\n            if (subItem.items) {\n              subItem.items.forEach((inlineItem) => {\n                inlineItem.level = item.level + 2;\n              });\n            }\n          });\n\n          item.items = items;\n          item.loading = false;\n\n          if (this.submenu && this.selection.length == 0) {\n            const sub = this.getMenuItemForSelection([this.submenu]);\n            this.handleItemClicked(event, sub);\n          }\n\n          if (!this.wait) {\n            this.fireCustomEvent(CustomEventType.Ready);\n            this.wait = true;\n          }\n\n          this.requestUpdate('root');\n          this.scrollSelectedIntoView();\n        })\n        .catch((error) => {\n          this.fireCustomEvent(CustomEventType.Error, { error });\n        });\n    }\n  }\n\n  private handleItemClicked(\n    event: MouseEvent,\n    menuItem: MenuItem,\n    parent: MenuItem = null\n  ) {\n    const store = document.querySelector('temba-store') as Store;\n    if (store) {\n      const unsavedMessage = store.getDirtyMessage();\n      if (unsavedMessage) {\n        if (!confirm(unsavedMessage)) {\n          return;\n        }\n      }\n      store.cleanAll();\n    }\n\n    if (parent && parent.popup) {\n      const dropdown = this.shadowRoot.querySelector(\n        'temba-dropdown'\n      ) as Dropdown;\n      if (dropdown) {\n        dropdown.blur();\n      }\n\n      if (event) {\n        this.fireCustomEvent(CustomEventType.ButtonClicked, {\n          item: menuItem,\n          selection: this.getSelection(),\n          parent\n        });\n      }\n      return;\n    }\n\n    if (menuItem.popup) {\n      if (event) {\n        this.fireCustomEvent(CustomEventType.ButtonClicked, {\n          item: menuItem,\n          selection: this.getSelection(),\n          parent\n        });\n      }\n      return;\n    }\n\n    if (menuItem.type === 'modax-button') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        item: menuItem,\n        selection: this.getSelection(),\n        parent\n      });\n      return;\n    }\n\n    if (event && event.metaKey && menuItem.href) {\n      event.preventDefault();\n      event.stopPropagation();\n      window.open(menuItem.href, '_blank');\n      return;\n    }\n\n    if (parent && parent.inline) {\n      this.handleItemClicked(null, parent);\n    }\n\n    if (this.collapsed && !this.isMobile()) {\n      this.collapsed = false;\n    }\n\n    if (this.isMobile()) {\n      this.collapsed = true;\n    }\n\n    if (menuItem.trigger || menuItem.event) {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        item: menuItem,\n        selection: this.getSelection(),\n        parent\n      });\n      return;\n    }\n\n    // update our selection\n    if (menuItem.level >= this.selection.length) {\n      this.selection.push(menuItem.vanity_id || menuItem.id);\n    } else {\n      this.selection.splice(\n        menuItem.level,\n        this.selection.length - menuItem.level,\n        menuItem.vanity_id || menuItem.id\n      );\n    }\n\n    if (menuItem.endpoint) {\n      this.loadItems(menuItem, event);\n\n      // make sure change events fire for events with hrefs\n      if (!menuItem.href) {\n        return;\n      }\n    } else {\n      this.requestUpdate();\n    }\n\n    if (menuItem.href) {\n      this.dispatchEvent(new Event('change'));\n      return;\n    }\n\n    this.fireCustomEvent(CustomEventType.ButtonClicked, {\n      item: menuItem,\n      selection: this.getSelection(),\n      parent\n    });\n  }\n\n  public scrollSelectedIntoView() {\n    // makes sure we are scrolled into view\n    window.setTimeout(() => {\n      const eles = this.shadowRoot.querySelectorAll('.selected');\n      eles.forEach((ele) => {\n        ele.scrollIntoView({ block: 'end', behavior: 'smooth' });\n      });\n    }, 0);\n  }\n\n  public clickItem(id: string): boolean {\n    const path = [...this.selection];\n    path.splice(path.length - 1, 1, id);\n    const item = this.getMenuItemForSelection(path);\n\n    if (item) {\n      this.handleItemClicked(null, item);\n      this.scrollSelectedIntoView();\n      return true;\n    }\n    return false;\n  }\n\n  public getMenuItem(): MenuItem {\n    return this.getMenuItemForSelection([...this.selection]);\n  }\n\n  public getMenuItemForSelection(selection: string[]) {\n    const path = [...selection];\n    let items = this.root.items;\n    let item = null;\n    while (path.length > 0) {\n      const step = path.splice(0, 1)[0];\n      if (items) {\n        item = findItem(items, step).item;\n        if (item) {\n          items = item.items;\n        } else {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n\n    return item;\n  }\n\n  public getSelection() {\n    return this.selection;\n  }\n\n  public handleExpand() {\n    this.collapsed = false;\n  }\n\n  public handleCollapse() {\n    this.collapsed = true;\n  }\n\n  public async setFocusedItem(path: string) {\n    const focusedPath = path.split('/').filter((step) => !!step);\n    if (!this.root) {\n      return;\n    }\n\n    // if we don't match at the first level, we are a noop\n    if (focusedPath.length > 0) {\n      const rootItem = findItem(this.root.items, focusedPath[0]).item;\n      if (!rootItem) {\n        return;\n      }\n    }\n\n    const newPath = [];\n    let level = this.root;\n    while (focusedPath.length > 0) {\n      const nextId = focusedPath.shift();\n      if (nextId) {\n        if (!level.items) {\n          this.loadItems(level);\n          await this.httpComplete;\n        }\n\n        level = findItem(level.items, nextId).item;\n        if (!level) {\n          focusedPath.splice(0, focusedPath.length);\n        } else {\n          newPath.push(nextId);\n        }\n      }\n    }\n\n    this.selection = newPath;\n    this.refresh();\n    this.requestUpdate('root');\n  }\n\n  private isSelected(menuItem: MenuItem) {\n    if (menuItem.level < this.selection.length) {\n      const selected =\n        this.selection[menuItem.level] == (menuItem.vanity_id || menuItem.id);\n      return selected;\n    }\n    return false;\n  }\n\n  private isExpanded(menuItem: MenuItem) {\n    const expanded = !!this.selection.find(\n      (id) => id === menuItem.vanity_id || menuItem.id\n    );\n    return expanded;\n  }\n\n  private renderMenuItem = (\n    menuItem: MenuItem,\n    parent: MenuItem = null\n  ): TemplateResult => {\n    if (menuItem.type === 'divider') {\n      return html`<div class=\"divider\"></div>`;\n    }\n\n    if (menuItem.type === 'temba-workspace-select') {\n      return html`<temba-workspace-select\n        @change=${(event) => {\n          event.stopPropagation();\n          event.preventDefault();\n        }}\n        .values=${[JSON.parse(menuItem.initial)]}\n      ></temba-workspace-select>`;\n    }\n\n    if (menuItem.type === 'temba-notification-list') {\n      return html`<temba-notification-list\n        endpoint=${menuItem.href}\n      ></temba-notification-list>`;\n    }\n\n    if (menuItem.type === 'space') {\n      return html`<div class=\"space\"></div>`;\n    }\n\n    if (menuItem.type === 'section' || menuItem.inline) {\n      return html`<div class=\"sub-section\">${menuItem.name}</div>`;\n    }\n\n    if (menuItem.type === 'modax-button') {\n      return html`<temba-button\n        name=${menuItem.name}\n        lined\n        icon=${menuItem.icon}\n        @click=${(event) => {\n          this.handleItemClicked(event, menuItem);\n        }}\n      />`;\n    }\n\n    const isSelected = this.isSelected(menuItem);\n    const isChildSelected =\n      isSelected && this.selection.length > menuItem.level + 1;\n\n    let icon = menuItem.icon\n      ? html`<div class=\"icon-wrapper\">\n          <temba-icon\n            size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n            name=\"${menuItem.icon}\"\n          ></temba-icon\n          >${menuItem.bubble && !menuItem.count\n            ? html`<div\n                style=\"background-color: ${menuItem.bubble}\"\n                class=\"bubble\"\n              ></div>`\n            : null}\n        </div>`\n      : null;\n\n    const collapsedIcon = menuItem.collapsed_icon\n      ? html`<temba-icon\n          size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n          name=\"${menuItem.collapsed_icon}\"\n          class=\"collapse-icon\"\n        ></temba-icon>`\n      : null;\n\n    const itemClasses = getClasses({\n      ['menu-' + menuItem.id]: true,\n      'child-selected': isChildSelected,\n      selected: isSelected,\n      item: !(menuItem.avatar && menuItem.level === 0),\n      avatar: !!menuItem.avatar,\n      popup: menuItem.popup,\n      inline: menuItem.inline,\n      expanding: this.expanding && this.expanding === menuItem.id,\n      expanded: this.isExpanded(menuItem),\n      iconless: !icon && !collapsedIcon && !menuItem.avatar,\n      pressed: this.pressedItem && this.pressedItem.id == menuItem.id,\n      'show-mobile': menuItem.mobile\n    });\n\n    if (menuItem.avatar) {\n      icon = renderAvatar({\n        name: menuItem.avatar,\n        scale: parent ? 0.9 : 1.2\n      });\n      if (menuItem.bubble) {\n        icon = html`${icon}${menuItem.bubble\n          ? html`<div\n              style=\"background-color: ${menuItem.bubble}\"\n              class=\"bubble\"\n            ></div>`\n          : null}`;\n      }\n      icon = html`<div style=\"position:relative; padding: 0em\">${icon}</div>`;\n    }\n\n    const item = html`\n      <a\n        href=${ifDefined(menuItem.href ? menuItem.href : undefined)}\n        id=\"menu-${menuItem.id}\"\n        class=\"${itemClasses}\"\n        @click=${(event) => {\n          event.preventDefault();\n          this.pressedItem = null;\n          this.handleItemClicked(event, menuItem, parent);\n        }}\n        @mousedown=${() => {\n          if (menuItem.level > 0) {\n            this.pressedItem = menuItem;\n          }\n        }}\n        @mouseleave=${() => {\n          this.pressedItem = null;\n        }}\n      >\n        ${menuItem.level === 0\n          ? menuItem.avatar\n            ? icon\n            : html`<temba-tip\n                position=\"right\"\n                style=\"display:flex;\"\n                text=\"${menuItem.name}\"\n                >${icon}</temba-tip\n              >`\n          : html`${icon}${collapsedIcon}`}\n\n        <div class=\"details\" style=\"flex-grow:1;display:flex\">\n          <div\n            class=\"name\"\n            style=\"flex-grow:1; flex-shrink:0; white-space: ${this.wraps\n              ? 'normal'\n              : 'nowrap'};\"\n          >\n            ${menuItem.name}\n          </div>\n          ${menuItem.level > 0\n            ? menuItem.inline\n              ? html`<temba-icon\n                  name=\"${isSelected || isChildSelected\n                    ? Icon.arrow_up\n                    : Icon.arrow_down}\"\n                ></temba-icon>`\n              : html`${menuItem.count || menuItem.count == 0\n                  ? html`\n                      <div\n                        class=\"count ${menuItem.bubble ? 'bubble' : ''}\"\n                        style=\"background-color: ${menuItem.bubble}\"\n                      >\n                        ${menuItem.count.toLocaleString()}\n                      </div>\n                    `\n                  : html`<div class=\"count\"></div>`}`\n            : null}\n        </div>\n        <div class=\"right\"></div>\n      </a>\n    `;\n\n    if (menuItem.popup) {\n      return html`\n        <temba-dropdown id=\"dd-${menuItem.id}\">\n          <div slot=\"toggle\">${item}</div>\n\n          <div slot=\"dropdown\">\n            ${(menuItem.items || []).map((child: MenuItem) => {\n              child.level = menuItem.level + 1;\n              return html`${this.renderMenuItem(child, menuItem)}`;\n            })}\n          </div>\n        </temba-dropdown>\n      `;\n    }\n    return item;\n  };\n\n  public render(): TemplateResult {\n    if (!this.root || !this.root.items) {\n      return null;\n    }\n\n    let items = this.root.items || [];\n    const levels = [];\n\n    const expandIcon = this.isMobile() ? Icon.menu : Icon.menu_collapse;\n\n    levels.push(\n      html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n        <div class=\"top\">\n          <div class=\"expand-icon\" @click=${this.handleExpand}>\n            <temba-icon\n              name=\"${expandIcon}\"\n              class=\"collapse expand\"\n              size=\"1.4\"\n            ></temba-icon>\n          </div>\n        </div>\n        <div class=\"top-spacer\"></div>\n\n        ${items\n          .filter((item) => !item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n\n        <div class=\"empty\"></div>\n        ${items\n          .filter((item) => !!item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n        <div class=\"bottom\"></div>\n      </div>`\n    );\n\n    this.selection.forEach((id, index) => {\n      const selected = findItem(items, id).item;\n\n      let collapsed = false;\n      if (selected) {\n        items = selected.items;\n        const itemState = this.getMenuItemState(selected.id);\n        // users set an explicit collapse state\n        if (itemState.collapsed) {\n          collapsed = itemState.collapsed === 'collapsed';\n        }\n        // otherwise pick a default collapse state\n        else {\n          if (this.selection.length > selected.level + 2) {\n            collapsed = false;\n          }\n        }\n      } else {\n        items = null;\n      }\n\n      const collapseIcon = this.isMobile() ? Icon.close : Icon.menu_collapse;\n\n      if (items && items.length > 0 && !selected.inline) {\n        levels.push(\n          html`<div\n            class=\"${getClasses({\n              level: true,\n              ['level-' + (index + 1)]: true,\n              collapsed\n            })}\"\n          >\n            ${!this.submenu\n              ? html`\n                  <slot\n                    class=\"${getClasses({\n                      'show-header': selected.show_header\n                    })}\"\n                    name=\"header\"\n                  ></slot>\n                  <div class=\"section-header\">\n                    <div class=\"section\">${selected.name}</div>\n\n                    ${index == 0 && !this.collapsed\n                      ? html`<temba-icon\n                          name=${collapseIcon}\n                          size=\"1.5\"\n                          @click=${this.handleCollapse}\n                        ></temba-icon>`\n                      : null}\n                  </div>\n                `\n              : null}\n            ${items.map((item: MenuItem) => {\n              if (item.inline && item.items) {\n                return html`${this.renderMenuItem(item)}\n                  <div class=\"inline-children\">\n                    ${(item.items || []).map((child: MenuItem) => {\n                      return this.renderMenuItem(child, item);\n                    })}\n                  </div>`;\n              }\n              return this.renderMenuItem(item);\n            })}\n          </div>`\n        );\n      }\n    });\n\n    const menu = html`<div\n      class=\"${getClasses({\n        root: true,\n        'fully-collapsed': this.collapsed,\n        mobile: this.isMobile()\n      })}\"\n    >\n      ${levels}\n    </div>`;\n    return html`${menu}`;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.117.0",
+  "version": "0.118.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/button/Button.ts

@@ -129,7 +129,6 @@ export class Button extends LitElement {
       }
 
       .lined-button .button-mask {
-        display: block;
         flex-grow: 1;
       }
 

package/src/dropdown/Dropdown.ts

@@ -54,7 +54,6 @@ export class Dropdown extends RapidElement {
         content: '';
         width: 0px;
         height: 0;
-        top: -6px;
         z-index: 10;
         position: absolute;
         border-left: 6px solid transparent;
@@ -197,7 +196,7 @@ export class Dropdown extends RapidElement {
     const dropdown = this.shadowRoot.querySelector(
       '.dropdown'
     ) as HTMLDivElement;
-    const toggle = this.querySelector('div[slot="toggle"]');
+    const toggle = this.querySelector('*[slot="toggle"]');
 
     const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;
 
@@ -233,8 +232,16 @@ export class Dropdown extends RapidElement {
         bumpedUp = true;
       }
 
+      // if our arrow is aligned with the left of the dropdown, scootch
+      // the dropdown left a pinch so our arrow still overlaps properly
+      let arrowLeft = toggleBounds.width / 2 - arrowBounds.width / 2;
+      if (arrowLeft <= 0) {
+        dropdownStyle['marginLeft'] = '-10px';
+        arrowLeft = 10;
+      }
+
       const arrowStyle = {
-        left: toggleBounds.width / 2 - arrowBounds.width / 2 + 'px',
+        left: arrowLeft + 'px',
         borderWidth: this.arrowSize + 'px',
         top: '-' + this.arrowSize + 'px'
       };

package/src/list/TembaMenu.ts

@@ -155,10 +155,6 @@ export class TembaMenu extends ResizeElement {
         align-items: center;
       }
 
-      .level-0 > temba-dropdown .icon-wrapper {
-        padding: 0.2em 0.4em 0.2em 0em;
-      }
-
       .level-0 > .item.selected::before,
       .level-0 > .item.selected::after {
         content: ' ';
@@ -648,7 +644,7 @@ export class TembaMenu extends ResizeElement {
       }
 
       .level-0 .icon-wrapper {
-        padding: 0.4em 0.9em;
+        padding: 0.4em 0.2em;
       }
 
       temba-workspace-select {
@@ -1182,7 +1178,10 @@ export class TembaMenu extends ResizeElement {
         ${menuItem.level === 0
           ? menuItem.avatar
             ? icon
-            : html`<temba-tip style="display:flex;" text="${menuItem.name}"
+            : html`<temba-tip
+                position="right"
+                style="display:flex;"
+                text="${menuItem.name}"
                 >${icon}</temba-tip
               >`
           : html`${icon}${collapsedIcon}`}