@felleslosninger/minid-elements 0.0.99 → 0.0.101

package/dist/components/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../src/components/dropdown.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './popup.component';\nimport { classMap } from 'lit/directives/class-map.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-dropdown': MinidDropdown;\n  }\n}\n\nlet nextUniqueId = 0;\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n    }\n  `,\n];\n\n/**\n * @slot -- Default slot for content of the dropdown panel\n * @slot trigger - Used for the button element that will be used to open the dropdown menu\n * @part panel - Select the dropdown panel host element\n */\n@customElement('mid-dropdown')\nexport class MinidDropdown extends styled(LitElement, styles) {\n  private readonly popupId = `mid-dropdown-${nextUniqueId++}`;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-end';\n\n  /**\n   * Sync the dropdown panel size with the trigger element\n   */\n  @property({ reflect: true })\n  sync?: 'width' | 'height' | 'both';\n\n  /**\n   * Distance between trigger and dropdown panel\n   */\n  @property({ type: Number })\n  distance = 4;\n\n  /**\n   * Nudge the dropdown panel position. Accepts a negative or positive number.\n   */\n  @property({ type: Number })\n  skidding = 0;\n\n  @property({ type: Boolean })\n  arrow = false;\n\n  /**\n   * Choose if position is `fixed` or `absolute`. `absolute` is more performant,\n   * but `fixed` can solve issues with overflow clipping\n   */\n  @property({ type: Boolean })\n  hoist = false;\n\n  private handleClickOutside = (event: Event) => {\n    if (!event.composedPath().includes(this)) {\n      this.toggleDropdownOpen(event, false);\n    }\n  };\n\n  private toggleDropdownOpen(event: Event, open?: boolean) {\n    event.stopPropagation();\n\n    if (open !== undefined) {\n      this.open = open;\n    } else {\n      this.open = !this.open;\n    }\n\n    if (this.open) {\n      addEventListener('click', this.handleClickOutside);\n      addEventListener(\n        'mid-anchor-click',\n        this.handleAnchorClick as EventListener\n      );\n    } else {\n      this.blur();\n      removeEventListener(\n        'mid-anchor-click',\n        this.handleAnchorClick as EventListener\n      );\n      removeEventListener('click', this.handleClickOutside);\n    }\n  }\n\n  private handleAnchorClick = (event: CustomEvent<{ id: string }>) => {\n    // to make sure clicking another element's anchor closes current element's dropdown menu\n    if (event.detail.id !== this.popupId) {\n      this.toggleDropdownOpen(event, false);\n    }\n  };\n\n  override render() {\n    return html`\n      <mid-popup\n        id=\"${this.popupId}\"\n        class=\"${classMap({\n          'text-body-sm': this.size === 'sm',\n          'text-body-md': this.size === 'md',\n          'text-body-lg': this.size === 'lg',\n        })} [--arrow-border-color:var(--border-color-neutral-subtle)] [--arrow-size:8px]\"\n        distance=${this.distance}\n        placement=\"${this.placement}\"\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        flip\n        shift\n        auto-size=\"vertical\"\n        auto-size-padding=\"10\"\n        sync=${ifDefined(this.sync)}\n        ?active=${this.open}\n        ?arrow=${this.arrow}\n        @click=${this.toggleDropdownOpen}\n      >\n        <slot slot=\"anchor\" name=\"trigger\"> </slot>\n        <div\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-labelledby=\"${this.popupId}\"\n        >\n          <slot part=\"panel\"></slot>\n        </div>\n      </mid-popup>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"dropdown.js","sources":["../../src/components/dropdown.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './popup.component';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry.ts';\nimport { waitForEvent } from '../internal/event.ts';\nimport { MinidPopup } from './popup.component';\nimport { watch } from '../internal/watch.ts';\nimport { animateTo, stopAnimations } from '../internal/animate.ts';\nimport { getTabbableBoundary } from '../internal/tabbable.ts';\nimport { MinidButton } from '../components/button.component.ts';\nimport { MidSelectEvent } from '../events/mid-select.ts';\nimport { MinidMenu } from '../components/menu.component.ts';\nimport { MinidMenuItem } from 'src/components/menu-item.component.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-dropdown': MinidDropdown;\n  }\n}\n\nlet nextUniqueId = 0;\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n    }\n  `,\n];\n\n/**\n * @slot -- Default slot for content of the dropdown panel\n * @slot trigger - Used for the button element that will be used to open the dropdown menu\n * @part panel - Select the dropdown panel host element\n */\n@customElement('mid-dropdown')\nexport class MinidDropdown extends styled(LitElement, styles) {\n  private readonly popupId = `mid-dropdown-${nextUniqueId++}`;\n  private closeWatcher?: CloseWatcher | null;\n\n  @query('.popup')\n  popup!: MinidPopup;\n\n  @query('.trigger')\n  trigger!: HTMLSlotElement;\n\n  @query('.panel')\n  panel!: HTMLSlotElement;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\n   * dropdowns that allow for multiple interactions.\n   */\n  @property({ type: Boolean, reflect: true })\n  stayopenonselect = false;\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-end';\n\n  /**\n   * Sync the dropdown panel size with the trigger element\n   */\n  @property({ reflect: true })\n  sync?: 'width' | 'height' | 'both';\n\n  /**\n   * Distance between trigger and dropdown panel\n   */\n  @property({ type: Number })\n  distance = 4;\n\n  /**\n   * Nudge the dropdown panel position. Accepts a negative or positive number.\n   */\n  @property({ type: Number })\n  skidding = 0;\n\n  @property({ type: Boolean })\n  arrow = false;\n\n  /**\n   * Choose if position is `fixed` or `absolute`. `absolute` is more performant,\n   * but `fixed` can solve issues with overflow clipping\n   */\n  @property({ type: Boolean })\n  hoist = false;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\n   * components that use a dropdown internally.\n   */\n  @property({ attribute: false })\n  containingElement?: HTMLElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (!this.containingElement) {\n      this.containingElement = this;\n    }\n  }\n\n  firstUpdated() {\n    this.panel.hidden = !this.open;\n\n    // If the dropdown is visible on init, update its position\n    if (this.open) {\n      this.addOpenListeners();\n      this.popup.active = true;\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeOpenListeners();\n    this.hide();\n  }\n\n  focusOnTrigger() {\n    const trigger = this.trigger.assignedElements({ flatten: true })[0] as\n      | HTMLElement\n      | undefined;\n    if (typeof trigger?.focus === 'function') {\n      trigger.focus();\n    }\n  }\n\n  getMenu() {\n    return this.panel\n      .assignedElements({ flatten: true })\n      .find((el) => el.tagName.toLowerCase() === 'mid-menu') as\n      | MinidMenu\n      | undefined;\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation\n    // in case any ancestors are also listening for this key.\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n      this.focusOnTrigger();\n    }\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Close when escape or tab is pressed\n    if (event.key === 'Escape' && this.open && !this.closeWatcher) {\n      event.stopPropagation();\n      this.focusOnTrigger();\n      this.hide();\n      return;\n    }\n\n    // Handle tabbing\n    if (event.key === 'Tab') {\n      const composedPath = event.composedPath();\n      const tabbedIsMenuItem = composedPath.some(\n        (e): e is MinidMenuItem =>\n          (e as HTMLElement).tagName?.toLowerCase() === 'mid-menu-item'\n      );\n\n      // Tabbing within an open menu should close the dropdown and refocus the trigger\n      if (this.open && tabbedIsMenuItem) {\n        event.preventDefault();\n        this.hide();\n        this.focusOnTrigger();\n        return;\n      }\n\n      // Tabbing outside of the containing element closes the panel\n      //\n      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,\n      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.\n      setTimeout(() => {\n        if (composedPath.every((target) => target !== this.containingElement)) {\n          this.hide();\n        }\n      });\n    }\n  };\n\n  private handleDocumentMouseDown = (event: MouseEvent) => {\n    // Close when clicking outside of the containing element\n    const path = event.composedPath();\n\n    if (this.containingElement && !path.includes(this.containingElement)) {\n      this.hide();\n    }\n  };\n\n  private handlePanelSelect = (event: MidSelectEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (!this.stayopenonselect && target.tagName.toLowerCase() === 'mid-menu') {\n      this.hide();\n      this.focusOnTrigger();\n    }\n  };\n\n  handleTriggerClick() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n      this.focusOnTrigger();\n    }\n  }\n\n  async handleTriggerKeyDown(event: KeyboardEvent) {\n    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same\n    // key again to hide the menu in case they don't want to make a selection.\n    if ([' ', 'Enter'].includes(event.key)) {\n      event.preventDefault();\n      this.handleTriggerClick();\n      return;\n    }\n\n    const menu = this.getMenu();\n\n    if (menu) {\n      const menuItems = menu.getAllSelectableItems();\n      const firstMenuItem = menuItems[0];\n      const lastMenuItem = menuItems[menuItems.length - 1];\n\n      // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a\n      // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for\n      // faster navigation.\n      if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n        event.preventDefault();\n\n        // Show the menu if it's not already open\n        if (!this.open) {\n          this.show();\n\n          // Wait for the dropdown to open before focusing, but not the animation\n          await this.updateComplete;\n        }\n\n        if (menuItems.length > 0) {\n          // Focus on the first/last menu item after showing\n          this.updateComplete.then(() => {\n            if (event.key === 'ArrowDown' || event.key === 'Home') {\n              menu.setCurrentItem(firstMenuItem);\n              firstMenuItem.focus();\n            }\n\n            if (event.key === 'ArrowUp' || event.key === 'End') {\n              menu.setCurrentItem(lastMenuItem);\n              lastMenuItem.focus();\n            }\n          });\n        }\n      }\n    }\n  }\n\n  handleTriggerKeyUp(event: KeyboardEvent) {\n    // Prevent space from triggering a click event in Firefox\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n  }\n\n  handleTriggerSlotChange() {\n    this.updateAccessibleTrigger();\n  }\n\n  updateAccessibleTrigger() {\n    const assignedElements = this.trigger.assignedElements({\n      flatten: true,\n    }) as HTMLElement[];\n    const accessibleTrigger = assignedElements.find(\n      (el) => getTabbableBoundary(el).start\n    );\n    let target: HTMLElement;\n    if (accessibleTrigger) {\n      if (accessibleTrigger.tagName.toLowerCase() === 'mid-button') {\n        target = (accessibleTrigger as MinidButton).button;\n      } else {\n        target = accessibleTrigger;\n      }\n\n      target.setAttribute('aria-haspopup', 'true');\n      target.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n    }\n  }\n\n  /**\n   * Shows the dropdown panel.\n   */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'mid-after-show');\n  }\n\n  /**\n   * Hides the dropdown panel\n   */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'mid-after-hide');\n  }\n\n  /**\n   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\n   * is activated.\n   */\n  reposition() {\n    this.popup.reposition();\n  }\n\n  addOpenListeners() {\n    this.panel.addEventListener('mid-select', this.handlePanelSelect);\n    if ('CloseWatcher' in window) {\n      this.closeWatcher?.destroy();\n      this.closeWatcher = new CloseWatcher();\n      this.closeWatcher.onclose = () => {\n        this.hide();\n        this.focusOnTrigger();\n      };\n    } else {\n      this.panel.addEventListener('keydown', this.handleKeyDown);\n    }\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n  }\n\n  removeOpenListeners() {\n    if (this.panel) {\n      this.panel.removeEventListener('mid-select', this.handlePanelSelect);\n      this.panel.removeEventListener('keydown', this.handleKeyDown);\n    }\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    this.closeWatcher?.destroy();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.disabled) {\n      this.open = false;\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n\n    if (this.open) {\n      // Show\n      this.dispatchEvent(new Event('mid-show'));\n      this.addOpenListeners();\n\n      await stopAnimations(this);\n      this.panel.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'dropdown.show');\n      await animateTo(this.popup.popup, keyframes, options);\n\n      this.dispatchEvent(new Event('mid-after-show'));\n    } else {\n      // Hide\n      this.dispatchEvent(new Event('mid-hide'));\n      this.removeOpenListeners();\n\n      await stopAnimations(this);\n      const { keyframes, options } = getAnimation(this, 'dropdown.hide');\n      await animateTo(this.popup.popup, keyframes, options);\n      this.panel.hidden = true;\n      this.popup.active = false;\n\n      this.dispatchEvent(new Event('mid-after-hide'));\n    }\n  }\n\n  override render() {\n    return html`\n      <mid-popup\n        id=\"${this.popupId}\"\n        class=\"${classMap({\n          'text-body-sm': this.size === 'sm',\n          'text-body-md': this.size === 'md',\n          'text-body-lg': this.size === 'lg',\n        })} popup [--arrow-border-color:var(--border-color-neutral-subtle)] [--arrow-size:8px]\"\n        distance=${this.distance}\n        placement=\"${this.placement}\"\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        flip\n        shift\n        auto-size=\"vertical\"\n        auto-size-padding=\"10\"\n        sync=${ifDefined(this.sync)}\n        ?arrow=${this.arrow}\n      >\n        <slot\n          slot=\"anchor\"\n          name=\"trigger\"\n          class=\"trigger\"\n          @click=${this.handleTriggerClick}\n          @keydown=${this.handleTriggerKeyDown}\n          @keyup=${this.handleTriggerKeyUp}\n          @slotchange=${this.handleTriggerSlotChange}\n        >\n        </slot>\n        <div\n          class=\"bg-accent min-w-68\"\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-labelledby=\"${this.popupId}\"\n        >\n          <slot part=\"panel\" class=\"panel\"></slot>\n        </div>\n      </mid-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('dropdown.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 100, easing: 'ease' },\n});\n\nsetDefaultAnimation('dropdown.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.9 },\n  ],\n  options: { duration: 100, easing: 'ease' },\n});\n"],"names":[],"mappings":"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"}

package/dist/components/link.js

@@ -16,7 +16,7 @@ let MinidLink = class extends styled(LitElement) {
   render() {
     return html`
       <a
-        class="text-accent-subtle visited:text-link-visited focus-visible:bg-focus-outer inline-flex items-center gap-2 underline decoration-[.0625rem] underline-offset-[.27em] outline-0 focus-visible:text-white"
+        class="text-accent-subtle visited:text-link-visited focus-visible:bg-focus-outer hover:text-accent inline-flex items-center gap-2 underline decoration-[.0625rem] underline-offset-[.27em] outline-0 hover:decoration-[.125rem] focus-visible:text-white"
         href=${ifDefined(this.href)}
         target=${ifDefined(this.target)}
       >

package/dist/components/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["../../src/components/link.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-link': MinidLink;\n  }\n}\n\n@customElement('mid-link')\nexport class MinidLink extends styled(LitElement) {\n  @property()\n  href?: string;\n\n  @property()\n  target?: string;\n\n  override render() {\n    return html`\n      <a\n        class=\"text-accent-subtle visited:text-link-visited focus-visible:bg-focus-outer inline-flex items-center gap-2 underline decoration-[.0625rem] underline-offset-[.27em] outline-0 focus-visible:text-white\"\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYO,IAAM,YAAN,cAAwB,OAAO,UAAU,EAAE;AAAA,EAOvC,SAAS;AACT,WAAA;AAAA;AAAA;AAAA,eAGI,UAAU,KAAK,IAAI,CAAC;AAAA,iBAClB,UAAU,KAAK,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMvC;AAhBE,gBAAA;AAAA,EADC,SAAS;AAAA,GADC,UAEX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GAJC,UAKX,WAAA,UAAA,CAAA;AALW,YAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,SAAA;"}
+{"version":3,"file":"link.js","sources":["../../src/components/link.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-link': MinidLink;\n  }\n}\n\n@customElement('mid-link')\nexport class MinidLink extends styled(LitElement) {\n  @property()\n  href?: string;\n\n  @property()\n  target?: string;\n\n  override render() {\n    return html`\n      <a\n        class=\"text-accent-subtle visited:text-link-visited focus-visible:bg-focus-outer hover:text-accent inline-flex items-center gap-2 underline decoration-[.0625rem] underline-offset-[.27em] outline-0 hover:decoration-[.125rem] focus-visible:text-white\"\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYO,IAAM,YAAN,cAAwB,OAAO,UAAU,EAAE;AAAA,EAOvC,SAAS;AACT,WAAA;AAAA;AAAA;AAAA,eAGI,UAAU,KAAK,IAAI,CAAC;AAAA,iBAClB,UAAU,KAAK,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMvC;AAhBE,gBAAA;AAAA,EADC,SAAS;AAAA,GADC,UAEX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GAJC,UAKX,WAAA,UAAA,CAAA;AALW,YAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,SAAA;"}

package/dist/components/menu-item.component.d.ts

@@ -25,6 +25,9 @@ export declare class MinidMenuItem extends MinidMenuItem_base {
      */
     active: boolean;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleHostFocus(): void;
     focus(): void;
     setActive(active: boolean): void;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/menu-item.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.component.d.ts","sourceRoot":"","sources":["../../src/components/menu-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,aAAa,CAAC;KAChC;CACF;;AAED,qBACa,aAAc,SAAQ,kBAAkB;IAEnD,MAAM,EAAG,WAAW,CAAC;IAErB;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IAEH,OAAO,EAAE,UAAU,GAAG,UAAU,CAAc;IAE9C;;OAEG;IAEH,MAAM,UAAS;IAEf,iBAAiB,IAAI,IAAI;IAKzB,KAAK,IAAI,IAAI;IAIb,SAAS,CAAC,MAAM,EAAE,OAAO;IAIhB,MAAM;CA0BhB"}
+{"version":3,"file":"menu-item.component.d.ts","sourceRoot":"","sources":["../../src/components/menu-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,aAAa,CAAC;KAChC;CACF;;AAED,qBACa,aAAc,SAAQ,kBAAkB;IAEnD,MAAM,EAAG,WAAW,CAAC;IAErB;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IAEH,OAAO,EAAE,UAAU,GAAG,UAAU,CAAc;IAE9C;;OAEG;IAEH,MAAM,UAAS;IAEf,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAM5B,aAAa,CAAC,KAAK,EAAE,aAAa;IAMlC,eAAe;IAQf,KAAK,IAAI,IAAI;IAIb,SAAS,CAAC,MAAM,EAAE,OAAO;IAIhB,MAAM;CA0BhB"}

package/dist/components/menu-item.js

@@ -23,6 +23,24 @@ let MinidMenuItem = class extends styled(LitElement) {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "menuitem");
+    this.addEventListener("focus", this.handleHostFocus);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("focus", this.handleHostFocus);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  handleKeyDown(event) {
+    if (this.href && event.key === "Enter") {
+      window.location.href = this.href;
+    }
+  }
+  handleHostFocus() {
+    if (this.shadowRoot?.activeElement === this.button) {
+      return;
+    }
+    this.focus();
   }
   focus() {
     this.button.focus();
@@ -37,7 +55,7 @@ let MinidMenuItem = class extends styled(LitElement) {
         "border-transparent": !this.active,
         "bg-accent-tinted": this.active,
         "border-accent-base": this.active
-      })} block w-full rounded border-l-[5px] px-3 py-2 font-medium"
+      })} button block w-full rounded border-l-[5px] px-3 py-2 font-medium"
         href=${ifDefined(this.href)}
       >
         <div class="flex items-center gap-2">
@@ -47,7 +65,7 @@ let MinidMenuItem = class extends styled(LitElement) {
     }
     return html`
       <mid-button
-        class="flex w-full [&::part(base)]:justify-start"
+        class="button flex w-full [&::part(base)]:justify-start"
         variant="tertiary"
         href=${ifDefined(this.href)}
       >

package/dist/components/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sources":["../../src/components/menu-item.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport './button.component';\nimport { MinidButton } from './button.component';\nimport { classMap } from 'lit/directives/class-map.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-menu-item': MinidMenuItem;\n  }\n}\n\n@customElement('mid-menu-item')\nexport class MinidMenuItem extends styled(LitElement) {\n  @query('.button')\n  button!: MinidButton;\n\n  /**\n   * If set, the interactive element will be an anchor element\n   */\n  @property()\n  href: string | undefined;\n\n  /**\n   * The items value\n   */\n  @property()\n  value?: string;\n\n  /**\n   * Controls which styling to use\n   */\n  @property()\n  variant: 'combobox' | 'dropdown' = 'dropdown';\n\n  /**\n   * Used as a focus state. So the actual focus can be somewhere else\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'menuitem');\n  }\n\n  focus(): void {\n    this.button.focus();\n  }\n\n  setActive(active: boolean) {\n    this.active = active;\n  }\n\n  override render() {\n    if (this.variant === 'combobox') {\n      return html` <button\n        class=\"${classMap({\n          'border-transparent': !this.active,\n          'bg-accent-tinted': this.active,\n          'border-accent-base': this.active,\n        })} block w-full rounded border-l-[5px] px-3 py-2 font-medium\"\n        href=${ifDefined(this.href)}\n      >\n        <div class=\"flex items-center gap-2\">\n          <slot></slot>\n        </div>\n      </button>`;\n    }\n\n    return html`\n      <mid-button\n        class=\"flex w-full [&::part(base)]:justify-start\"\n        variant=\"tertiary\"\n        href=${ifDefined(this.href)}\n      >\n        <slot></slot>\n      </mid-button>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAeO,IAAM,gBAAN,cAA4B,OAAO,UAAU,EAAE;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AAoB8B,SAAA,UAAA;AAM1B,SAAA,SAAA;AAAA,EAAA;AAAA,EAET,oBAA0B;AACxB,UAAM,kBAAkB;AACnB,SAAA,aAAa,QAAQ,UAAU;AAAA,EAAA;AAAA,EAGtC,QAAc;AACZ,SAAK,OAAO,MAAM;AAAA,EAAA;AAAA,EAGpB,UAAU,QAAiB;AACzB,SAAK,SAAS;AAAA,EAAA;AAAA,EAGP,SAAS;AACZ,QAAA,KAAK,YAAY,YAAY;AACxB,aAAA;AAAA,iBACI,SAAS;AAAA,QAChB,sBAAsB,CAAC,KAAK;AAAA,QAC5B,oBAAoB,KAAK;AAAA,QACzB,sBAAsB,KAAK;AAAA,MAAA,CAC5B,CAAC;AAAA,eACK,UAAU,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAQxB,WAAA;AAAA;AAAA;AAAA;AAAA,eAII,UAAU,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMnC;AAjEE,gBAAA;AAAA,EADC,MAAM,SAAS;AAAA,GADL,cAEX,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAPC,cAQX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAbC,cAcX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAnBC,cAoBX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAM,CAAA;AAAA,GAzB/B,cA0BX,WAAA,UAAA,CAAA;AA1BW,gBAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,aAAA;"}
+{"version":3,"file":"menu-item.js","sources":["../../src/components/menu-item.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport './button.component';\nimport { MinidButton } from './button.component';\nimport { classMap } from 'lit/directives/class-map.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-menu-item': MinidMenuItem;\n  }\n}\n\n@customElement('mid-menu-item')\nexport class MinidMenuItem extends styled(LitElement) {\n  @query('.button')\n  button!: MinidButton;\n\n  /**\n   * If set, the interactive element will be an anchor element\n   */\n  @property()\n  href: string | undefined;\n\n  /**\n   * The items value\n   */\n  @property()\n  value?: string;\n\n  /**\n   * Controls which styling to use\n   */\n  @property()\n  variant: 'combobox' | 'dropdown' = 'dropdown';\n\n  /**\n   * Used as a focus state. So the actual focus can be somewhere else\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'menuitem');\n    this.addEventListener('focus', this.handleHostFocus);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('focus', this.handleHostFocus);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.href && event.key === 'Enter') {\n      window.location.href = this.href;\n    }\n  }\n\n  handleHostFocus() {\n    if (this.shadowRoot?.activeElement === this.button) {\n      return;\n    }\n\n    this.focus();\n  }\n\n  focus(): void {\n    this.button.focus();\n  }\n\n  setActive(active: boolean) {\n    this.active = active;\n  }\n\n  override render() {\n    if (this.variant === 'combobox') {\n      return html` <button\n        class=\"${classMap({\n          'border-transparent': !this.active,\n          'bg-accent-tinted': this.active,\n          'border-accent-base': this.active,\n        })} button block w-full rounded border-l-[5px] px-3 py-2 font-medium\"\n        href=${ifDefined(this.href)}\n      >\n        <div class=\"flex items-center gap-2\">\n          <slot></slot>\n        </div>\n      </button>`;\n    }\n\n    return html`\n      <mid-button\n        class=\"button flex w-full [&::part(base)]:justify-start\"\n        variant=\"tertiary\"\n        href=${ifDefined(this.href)}\n      >\n        <slot></slot>\n      </mid-button>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAeO,IAAM,gBAAN,cAA4B,OAAO,UAAU,EAAE;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AAoB8B,SAAA,UAAA;AAM1B,SAAA,SAAA;AAAA,EAAA;AAAA,EAET,oBAA0B;AACxB,UAAM,kBAAkB;AACnB,SAAA,aAAa,QAAQ,UAAU;AAC/B,SAAA,iBAAiB,SAAS,KAAK,eAAe;AAC9C,SAAA,iBAAiB,WAAW,KAAK,aAAa;AAAA,EAAA;AAAA,EAGrD,uBAA6B;AAC3B,UAAM,qBAAqB;AACtB,SAAA,oBAAoB,SAAS,KAAK,eAAe;AACjD,SAAA,oBAAoB,WAAW,KAAK,aAAa;AAAA,EAAA;AAAA,EAGxD,cAAc,OAAsB;AAClC,QAAI,KAAK,QAAQ,MAAM,QAAQ,SAAS;AAC/B,aAAA,SAAS,OAAO,KAAK;AAAA,IAAA;AAAA,EAC9B;AAAA,EAGF,kBAAkB;AAChB,QAAI,KAAK,YAAY,kBAAkB,KAAK,QAAQ;AAClD;AAAA,IAAA;AAGF,SAAK,MAAM;AAAA,EAAA;AAAA,EAGb,QAAc;AACZ,SAAK,OAAO,MAAM;AAAA,EAAA;AAAA,EAGpB,UAAU,QAAiB;AACzB,SAAK,SAAS;AAAA,EAAA;AAAA,EAGP,SAAS;AACZ,QAAA,KAAK,YAAY,YAAY;AACxB,aAAA;AAAA,iBACI,SAAS;AAAA,QAChB,sBAAsB,CAAC,KAAK;AAAA,QAC5B,oBAAoB,KAAK;AAAA,QACzB,sBAAsB,KAAK;AAAA,MAAA,CAC5B,CAAC;AAAA,eACK,UAAU,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAQxB,WAAA;AAAA;AAAA;AAAA;AAAA,eAII,UAAU,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMnC;AAvFE,gBAAA;AAAA,EADC,MAAM,SAAS;AAAA,GADL,cAEX,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAPC,cAQX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAbC,cAcX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAnBC,cAoBX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAM,CAAA;AAAA,GAzB/B,cA0BX,WAAA,UAAA,CAAA;AA1BW,gBAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,aAAA;"}

package/dist/components/menu.component.d.ts

@@ -21,7 +21,7 @@ export declare class MinidMenu extends MinidMenu_base {
      * Wether the menu should be styled as a dropdown or a combobox
      */
     variant: 'combobox' | 'dropdown';
-    emptyItemList: boolean;
+    isEmptyItemList: boolean;
     protected firstUpdated(): void;
     connectedCallback(): void;
     private handleClick;

package/dist/components/menu.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.component.d.ts","sourceRoot":"","sources":["../../src/components/menu.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGtD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,SAAS,CAAC;KACvB;CACF;;AAWD;;GAEG;AACH,qBACa,SAAU,SAAQ,cAA0B;IAEvD,WAAW,EAAG,eAAe,CAAC;IAG9B,WAAW,EAAG,gBAAgB,CAAC;IAG/B,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,OAAO,EAAE,UAAU,GAAG,UAAU,CAAc;IAG9C,aAAa,UAAS;IAEtB,SAAS,CAAC,YAAY,IAAI,IAAI;IAS9B,iBAAiB;IAKjB,OAAO,CAAC,WAAW;IAoCnB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,UAAU;IASlB;;;OAGG;IACH,MAAM,GAAI,UAAU,CAAC,IAAI,EAAE,aAAa,KAAK,OAAO,UAUlD;IAEF,WAAW;IAMX;;OAEG;IACH,qBAAqB;IAQrB,WAAW;IAQX;;;OAGG;IACH,cAAc;IAMd;;;OAGG;IACH,cAAc,CAAC,IAAI,EAAE,aAAa;IAUlC,gBAAgB;IAMP,MAAM;CAwChB"}
+{"version":3,"file":"menu.component.d.ts","sourceRoot":"","sources":["../../src/components/menu.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGtD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,SAAS,CAAC;KACvB;CACF;;AAWD;;GAEG;AACH,qBACa,SAAU,SAAQ,cAA0B;IAEvD,WAAW,EAAG,eAAe,CAAC;IAG9B,WAAW,EAAG,gBAAgB,CAAC;IAG/B,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,OAAO,EAAE,UAAU,GAAG,UAAU,CAAc;IAG9C,eAAe,UAAS;IAExB,SAAS,CAAC,YAAY,IAAI,IAAI;IAS9B,iBAAiB;IAKjB,OAAO,CAAC,WAAW;IAoCnB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,UAAU;IASlB;;;OAGG;IACH,MAAM,GAAI,UAAU,CAAC,IAAI,EAAE,aAAa,KAAK,OAAO,UAUlD;IAEF,WAAW;IAMX;;OAEG;IACH,qBAAqB;IAQrB,WAAW;IAQX;;;OAGG;IACH,cAAc;IAMd;;;OAGG;IACH,cAAc,CAAC,IAAI,EAAE,aAAa;IAUlC,gBAAgB;IAMP,MAAM;CAwChB"}

package/dist/components/menu.js

@@ -25,7 +25,7 @@ let MinidMenu = class extends styled(LitElement, styles) {
     super(...arguments);
     this.searchable = false;
     this.variant = "dropdown";
-    this.emptyItemList = false;
+    this.isEmptyItemList = false;
     this.filter = (filterFn) => {
       this.getAllItems().forEach((item) => {
         if (filterFn(item)) {
@@ -78,7 +78,7 @@ let MinidMenu = class extends styled(LitElement, styles) {
       (item) => item.innerText.toLowerCase().includes(this.filterInput.value.toLowerCase())
     );
     const items = this.getAllSelectableItems();
-    this.emptyItemList = items.length === 0;
+    this.isEmptyItemList = items.length === 0;
     this.setCurrentItem(items[0]);
   }
   scrollOptionIntoView(item) {
@@ -187,7 +187,7 @@ let MinidMenu = class extends styled(LitElement, styles) {
   render() {
     return html`
       <div
-        class="text-body-md text-neutral border-neutral-subtle rounded-md border shadow-md"
+        class="text-neutral border-neutral-subtle rounded-md border shadow-md"
       >
         ${!this.searchable ? nothing : html`<div
               class="border-neutral-subtle flex items-center gap-2 border-b p-2"
@@ -215,7 +215,7 @@ let MinidMenu = class extends styled(LitElement, styles) {
             @keydown=${this.handleKeyDown}
             @mousedown=${this.handleMouseDown}
           ></slot>
-          ${this.emptyItemList ? html`<div class="p-2">Fant ingen treff</div>` : nothing}
+          ${this.isEmptyItemList ? html`<div class="p-2">Fant ingen treff</div>` : nothing}
         </ul>
       </div>
     `;
@@ -238,7 +238,7 @@ __decorateClass([
 ], MinidMenu.prototype, "variant", 2);
 __decorateClass([
   state()
-], MinidMenu.prototype, "emptyItemList", 2);
+], MinidMenu.prototype, "isEmptyItemList", 2);
 MinidMenu = __decorateClass([
   customElement("mid-menu")
 ], MinidMenu);

package/dist/components/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/components/menu.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { MinidMenuItem } from './menu-item.component';\nimport { scrollIntoView } from '../internal/scroll';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-menu': MinidMenu;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --max-height: none;\n      --max-width: none;\n    }\n  `,\n];\n\n/**\n *  @event {{ detail: { item: MidMenuItem } }} mid-select - Emitted when a menu item is selected.\n */\n@customElement('mid-menu')\nexport class MinidMenu extends styled(LitElement, styles) {\n  @query('slot')\n  defaultSlot!: HTMLSlotElement;\n\n  @query('.filter-input')\n  filterInput!: HTMLInputElement;\n\n  @query('.item-list')\n  itemList!: HTMLUListElement;\n\n  /**\n   * Adds an input element that filters selectable menu items\n   */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /**\n   * Wether the menu should be styled as a dropdown or a combobox\n   */\n  @property()\n  variant: 'combobox' | 'dropdown' = 'dropdown';\n\n  @state()\n  emptyItemList = false;\n\n  protected firstUpdated(): void {\n    this.getAllItems().forEach((item) => {\n      item.variant = this.variant;\n      item.addEventListener('mouseenter', () => {\n        this.setCurrentItem(item);\n      });\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n    const composedPath = event.composedPath();\n    const target = composedPath.find((el) =>\n      menuItemTypes.includes((el as HTMLElement)?.getAttribute?.('role') || '')\n    );\n\n    if (!target) return;\n\n    const closestMenu = composedPath.find(\n      (el) => (el as HTMLElement)?.getAttribute?.('role') === 'menu'\n    );\n    const clickHasSubmenu = closestMenu !== this;\n\n    // Make sure we're the menu thats supposed to be handling the click event.\n    if (clickHasSubmenu) {\n      return;\n    }\n\n    // This isn't true. But we use it for TypeScript checks below.\n    const item = target as MinidMenuItem;\n\n    // if (item.type === 'checkbox') {\n    //   item.checked = !item.checked;\n    // }\n\n    this.dispatchEvent(\n      new CustomEvent('mid-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      })\n    );\n  }\n\n  private handleFilterItems() {\n    this.filter((item) =>\n      item.innerText\n        .toLowerCase()\n        .includes(this.filterInput.value.toLowerCase())\n    );\n\n    const items = this.getAllSelectableItems();\n    this.emptyItemList = items.length === 0;\n    this.setCurrentItem(items[0]);\n  }\n\n  private scrollOptionIntoView(item: MinidMenuItem): void {\n    scrollIntoView(item, this.itemList, 'vertical', 'auto');\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter or space\n    if (event.key === 'Enter' || event.key === ' ') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Move the selection when pressing down or up\n    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllSelectableItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        this.scrollOptionIntoView(items[index]);\n\n        if (!this.searchable) {\n          items[index].focus();\n        }\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as MinidMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllSelectableItems();\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'mid-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n        item.getAttribute('role') ?? ''\n      )\n    );\n  }\n\n  /**\n   * Pass a filter function to enable/disable menu items in the menu\n   * @type {(item: MinidMenuItem) => boolean}\n   */\n  filter = (filterFn: (item: MinidMenuItem) => boolean) => {\n    this.getAllItems().forEach((item) => {\n      if (filterFn(item)) {\n        item.removeAttribute('hidden');\n        item.removeAttribute('inert');\n      } else {\n        item.setAttribute('inert', 'true');\n        item.setAttribute('hidden', 'true');\n      }\n    });\n  };\n\n  clearFilter() {\n    this.filterInput.value = '';\n    this.itemList.scrollTop = 0;\n    this.filterInput.dispatchEvent(new Event('input'));\n  }\n\n  /**\n   * @internal Gets all slotted menu items, ignoring dividers, headers, and other elements.\n   */\n  getAllSelectableItems() {\n    return [\n      ...(this.defaultSlot.assignedElements({\n        flatten: true,\n      }) as MinidMenuItem[]),\n    ].filter((el) => !(el.inert || !this.isMenuItem(el)));\n  }\n\n  getAllItems() {\n    return [\n      ...(this.defaultSlot.assignedElements({\n        flatten: true,\n      }) as MinidMenuItem[]),\n    ].filter((el) => this.isMenuItem(el));\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllSelectableItems().find(\n      (i) => i.getAttribute('tabindex') === '0'\n    );\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: MinidMenuItem) {\n    const items = this.getAllSelectableItems();\n\n    // Update tab indexes\n    items.forEach((i) => {\n      i.setActive(i === item);\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  focusSearchField() {\n    if (this.searchable) {\n      this.filterInput.focus();\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"text-body-md text-neutral border-neutral-subtle rounded-md border shadow-md\"\n      >\n        ${!this.searchable\n          ? nothing\n          : html`<div\n              class=\"border-neutral-subtle flex items-center gap-2 border-b p-2\"\n            >\n              <mid-icon\n                class=\"text-6\"\n                slot=\"prefix\"\n                library=\"system\"\n                name=\"magnifying-glass\"\n              >\n              </mid-icon>\n              <input\n                @input=${this.handleFilterItems}\n                @keydown=${this.handleKeyDown}\n                class=\"filter-input border-neutral-subtle focus-visible:outline-focus-outer h-8 w-full rounded border px-2\"\n                type=\"search\"\n              />\n            </div>`}\n        <ul\n          class=\"item-list max-h-(--max-height) max-w-(--max-width) overflow-y-auto px-2 py-3\"\n        >\n          <slot\n            @slotchange=${this.handleSlotChange}\n            @click=${this.handleClick}\n            @keydown=${this.handleKeyDown}\n            @mousedown=${this.handleMouseDown}\n          ></slot>\n          ${this.emptyItemList\n            ? html`<div class=\"p-2\">Fant ingen treff</div>`\n            : nothing}\n        </ul>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../src/components/menu.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { MinidMenuItem } from './menu-item.component';\nimport { scrollIntoView } from '../internal/scroll';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-menu': MinidMenu;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --max-height: none;\n      --max-width: none;\n    }\n  `,\n];\n\n/**\n *  @event {{ detail: { item: MidMenuItem } }} mid-select - Emitted when a menu item is selected.\n */\n@customElement('mid-menu')\nexport class MinidMenu extends styled(LitElement, styles) {\n  @query('slot')\n  defaultSlot!: HTMLSlotElement;\n\n  @query('.filter-input')\n  filterInput!: HTMLInputElement;\n\n  @query('.item-list')\n  itemList!: HTMLUListElement;\n\n  /**\n   * Adds an input element that filters selectable menu items\n   */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /**\n   * Wether the menu should be styled as a dropdown or a combobox\n   */\n  @property()\n  variant: 'combobox' | 'dropdown' = 'dropdown';\n\n  @state()\n  isEmptyItemList = false;\n\n  protected firstUpdated(): void {\n    this.getAllItems().forEach((item) => {\n      item.variant = this.variant;\n      item.addEventListener('mouseenter', () => {\n        this.setCurrentItem(item);\n      });\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n    const composedPath = event.composedPath();\n    const target = composedPath.find((el) =>\n      menuItemTypes.includes((el as HTMLElement)?.getAttribute?.('role') || '')\n    );\n\n    if (!target) return;\n\n    const closestMenu = composedPath.find(\n      (el) => (el as HTMLElement)?.getAttribute?.('role') === 'menu'\n    );\n    const clickHasSubmenu = closestMenu !== this;\n\n    // Make sure we're the menu thats supposed to be handling the click event.\n    if (clickHasSubmenu) {\n      return;\n    }\n\n    // This isn't true. But we use it for TypeScript checks below.\n    const item = target as MinidMenuItem;\n\n    // if (item.type === 'checkbox') {\n    //   item.checked = !item.checked;\n    // }\n\n    this.dispatchEvent(\n      new CustomEvent('mid-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      })\n    );\n  }\n\n  private handleFilterItems() {\n    this.filter((item) =>\n      item.innerText\n        .toLowerCase()\n        .includes(this.filterInput.value.toLowerCase())\n    );\n\n    const items = this.getAllSelectableItems();\n    this.isEmptyItemList = items.length === 0;\n    this.setCurrentItem(items[0]);\n  }\n\n  private scrollOptionIntoView(item: MinidMenuItem): void {\n    scrollIntoView(item, this.itemList, 'vertical', 'auto');\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter or space\n    if (event.key === 'Enter' || event.key === ' ') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Move the selection when pressing down or up\n    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllSelectableItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        this.scrollOptionIntoView(items[index]);\n\n        if (!this.searchable) {\n          items[index].focus();\n        }\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as MinidMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllSelectableItems();\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'mid-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n        item.getAttribute('role') ?? ''\n      )\n    );\n  }\n\n  /**\n   * Pass a filter function to enable/disable menu items in the menu\n   * @type {(item: MinidMenuItem) => boolean}\n   */\n  filter = (filterFn: (item: MinidMenuItem) => boolean) => {\n    this.getAllItems().forEach((item) => {\n      if (filterFn(item)) {\n        item.removeAttribute('hidden');\n        item.removeAttribute('inert');\n      } else {\n        item.setAttribute('inert', 'true');\n        item.setAttribute('hidden', 'true');\n      }\n    });\n  };\n\n  clearFilter() {\n    this.filterInput.value = '';\n    this.itemList.scrollTop = 0;\n    this.filterInput.dispatchEvent(new Event('input'));\n  }\n\n  /**\n   * @internal Gets all slotted menu items, ignoring dividers, headers, and other elements.\n   */\n  getAllSelectableItems() {\n    return [\n      ...(this.defaultSlot.assignedElements({\n        flatten: true,\n      }) as MinidMenuItem[]),\n    ].filter((el) => !(el.inert || !this.isMenuItem(el)));\n  }\n\n  getAllItems() {\n    return [\n      ...(this.defaultSlot.assignedElements({\n        flatten: true,\n      }) as MinidMenuItem[]),\n    ].filter((el) => this.isMenuItem(el));\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllSelectableItems().find(\n      (i) => i.getAttribute('tabindex') === '0'\n    );\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: MinidMenuItem) {\n    const items = this.getAllSelectableItems();\n\n    // Update tab indexes\n    items.forEach((i) => {\n      i.setActive(i === item);\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  focusSearchField() {\n    if (this.searchable) {\n      this.filterInput.focus();\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"text-neutral border-neutral-subtle rounded-md border shadow-md\"\n      >\n        ${!this.searchable\n          ? nothing\n          : html`<div\n              class=\"border-neutral-subtle flex items-center gap-2 border-b p-2\"\n            >\n              <mid-icon\n                class=\"text-6\"\n                slot=\"prefix\"\n                library=\"system\"\n                name=\"magnifying-glass\"\n              >\n              </mid-icon>\n              <input\n                @input=${this.handleFilterItems}\n                @keydown=${this.handleKeyDown}\n                class=\"filter-input border-neutral-subtle focus-visible:outline-focus-outer h-8 w-full rounded border px-2\"\n                type=\"search\"\n              />\n            </div>`}\n        <ul\n          class=\"item-list max-h-(--max-height) max-w-(--max-width) overflow-y-auto px-2 py-3\"\n        >\n          <slot\n            @slotchange=${this.handleSlotChange}\n            @click=${this.handleClick}\n            @keydown=${this.handleKeyDown}\n            @mousedown=${this.handleMouseDown}\n          ></slot>\n          ${this.isEmptyItemList\n            ? html`<div class=\"p-2\">Fant ingen treff</div>`\n            : nothing}\n        </ul>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/phone-input.component.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { CountryCode } from 'libphonenumber-js';
-import { HasSlotController } from '../internal/slot';
 declare global {
     interface HTMLElementTagNameMap {
         'mid-phone-input': MinidPhoneInput;
@@ -21,8 +20,11 @@ declare const MinidPhoneInput_base: typeof LitElement & import('../types/mixin-c
  * @part input - Select the phone number input
  */
 export declare class MinidPhoneInput extends MinidPhoneInput_base {
-    #private;
-    hasSlotControler: HasSlotController;
+    private formatter;
+    private skipCountryUpdate;
+    private currentEvent;
+    private currentTemplate;
+    private hasSlotControler;
     input: HTMLInputElement;
     /**
      * The value of the phone number in E.164 format. Example: `"+4799999999"`

package/dist/components/phone-input.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"phone-input.component.d.ts","sourceRoot":"","sources":["../../src/components/phone-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,EAIL,WAAW,EAEZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAS/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF;;AAUD;;;;;;;;;;;;GAYG;AACH,qBACa,eAAgB,SAAQ,oBAEpC;;IAKC,gBAAgB,oBAAwC;IAGxD,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,WAAW,CAAC;IAGtB,QAAQ,UAAS;IAEjB,kBAAkB;IAMlB,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAQzC,iBAAiB,IAAI,IAAI;IAkBzB,IAAI,aAAa,yCAEhB;IAED,IAAI,cAAc,0CAEjB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,QAAQ;IAkBhB,OAAO,CAAC,mBAAmB,CAkBzB;IAEF,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IAUzB,KAAK;IAWL,mBAAmB;IAmBV,MAAM;CAiEhB"}
+{"version":3,"file":"phone-input.component.d.ts","sourceRoot":"","sources":["../../src/components/phone-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,EAIL,WAAW,EAEZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAW/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF;;AAUD;;;;;;;;;;;;GAYG;AACH,qBACa,eAAgB,SAAQ,oBAEpC;IACC,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,YAAY,CAAiB;IACrC,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,gBAAgB,CAAwC;IAGhE,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,WAAW,CAAC;IAGtB,QAAQ,UAAS;IAEjB,kBAAkB;IAMlB,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAQzC,iBAAiB,IAAI,IAAI;IAkBzB,IAAI,aAAa,yCAEhB;IAED,IAAI,cAAc,0CAEjB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,QAAQ;IAkBhB,OAAO,CAAC,mBAAmB,CAkBzB;IAEF,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IAUzB,KAAK;IAWL,mBAAmB;IAmBV,MAAM;CAiEhB"}

package/dist/components/phone-input.js

@@ -10,9 +10,6 @@ import { FormControllerMixin } from "../mixins/form-controller.mixin.js";
 import { HasSlotController } from "../internal/slot.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -21,11 +18,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _formatter, _skipCountryUpdate, _currentEvent, _currentTemplate;
 const styles = [
   css`
     :host {
@@ -38,10 +30,10 @@ let MinidPhoneInput = class extends FormControllerMixin(
 ) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _formatter, new AsYouType());
-    __privateAdd(this, _skipCountryUpdate, false);
-    __privateAdd(this, _currentEvent, new Event(""));
-    __privateAdd(this, _currentTemplate, "");
+    this.formatter = new AsYouType();
+    this.skipCountryUpdate = false;
+    this.currentEvent = new Event("");
+    this.currentTemplate = "";
     this.hasSlotControler = new HasSlotController(this, "label");
     this.value = "";
     this.nationalnumber = "";
@@ -50,15 +42,15 @@ let MinidPhoneInput = class extends FormControllerMixin(
     this.hidelabel = false;
     this.hasFocus = false;
     this.valueChangeCallback = (value) => {
-      const country = value.length < 2 ? void 0 : __privateGet(this, _formatter).getCountry() ?? this.country;
+      const country = value.length < 2 ? void 0 : this.formatter.getCountry() ?? this.country;
       if (country !== this.country) {
         this.country = country;
         this.countrycode = this.country ? `+${getCountryCallingCode(this.country)}` : "+";
-        __privateSet(this, _skipCountryUpdate, true);
+        this.skipCountryUpdate = true;
       }
       this.value = value;
       this.nationalnumber = this.removePhonePrefix(value);
-      this.dispatchEvent(__privateGet(this, _currentEvent));
+      this.dispatchEvent(this.currentEvent);
       this.setFormValue(this.value);
     };
   }
@@ -76,8 +68,8 @@ let MinidPhoneInput = class extends FormControllerMixin(
   }
   connectedCallback() {
     super.connectedCallback();
-    __privateGet(this, _formatter).input(this.value);
-    this.country = __privateGet(this, _formatter).getCountry() ?? this.country;
+    this.formatter.input(this.value);
+    this.country = this.formatter.getCountry() ?? this.country;
     this.countrycode = this.country ? `+${getCountryCallingCode(this.country)}` : "+";
     this.value = formatIncompletePhoneNumber(this.value);
     this.value ??= this.countrycode;
@@ -87,10 +79,10 @@ let MinidPhoneInput = class extends FormControllerMixin(
     }, 0);
   }
   get parseTemplate() {
-    return templateParser(__privateGet(this, _currentTemplate), parsePhoneNumberCharacter);
+    return templateParser(this.currentTemplate, parsePhoneNumberCharacter);
   }
   get formatTemplate() {
-    return templateFormatter(__privateGet(this, _currentTemplate));
+    return templateFormatter(this.currentTemplate);
   }
   handleBlur() {
     this.hasFocus = false;
@@ -99,10 +91,10 @@ let MinidPhoneInput = class extends FormControllerMixin(
     );
   }
   handleChange(event) {
-    __privateSet(this, _currentEvent, new Event("mid-change", {
+    this.currentEvent = new Event("mid-change", {
       bubbles: true,
       composed: true
-    }));
+    });
     this.setValue(event);
   }
   handleKeydown(event) {
@@ -119,19 +111,19 @@ let MinidPhoneInput = class extends FormControllerMixin(
     );
   }
   handleInput(event) {
-    __privateSet(this, _currentEvent, new Event("mid-input", {
+    this.currentEvent = new Event("mid-input", {
       composed: true,
       bubbles: true
-    }));
+    });
     this.setValue(event);
   }
   setValue(event) {
-    __privateGet(this, _formatter).reset();
+    this.formatter.reset();
     if (!this.input.value.startsWith("+")) {
       this.input.value = `+${this.input.value}`;
     }
-    __privateGet(this, _formatter).input(this.input.value);
-    __privateSet(this, _currentTemplate, __privateGet(this, _formatter).getTemplate());
+    this.formatter.input(this.input.value);
+    this.currentTemplate = this.formatter.getTemplate();
     onChange(
       event,
       this.input,
@@ -165,11 +157,11 @@ let MinidPhoneInput = class extends FormControllerMixin(
     }, 0);
   }
   handleCountryChange() {
-    if (__privateGet(this, _skipCountryUpdate)) {
-      __privateSet(this, _skipCountryUpdate, false);
+    if (this.skipCountryUpdate) {
+      this.skipCountryUpdate = false;
       return;
     }
-    __privateSet(this, _formatter, new AsYouType(this.country));
+    this.formatter = new AsYouType(this.country);
     this.nationalnumber = this.removePhonePrefix(this.input.value);
     this.countrycode = this.country ? `+${getCountryCallingCode(this.country)}` : "+";
     this.input.value = formatIncompletePhoneNumber(
@@ -191,7 +183,7 @@ let MinidPhoneInput = class extends FormControllerMixin(
       "text-body-sm": sm,
       "text-body-md": md,
       "text-body-lg": lg
-    })} grow"
+    })}"
       >
         <label
           for="input"
@@ -224,7 +216,7 @@ let MinidPhoneInput = class extends FormControllerMixin(
 
           <input
             id="input"
-            class="border-neutral p focus-visible:focus-ring grow rounded-r border px-3"
+            class="border-neutral focus-visible:focus-ring grow rounded-r border px-3"
             part="phone-number"
             type="tel"
             autocomplete="tel"
@@ -240,10 +232,6 @@ let MinidPhoneInput = class extends FormControllerMixin(
     `;
   }
 };
-_formatter = /* @__PURE__ */ new WeakMap();
-_skipCountryUpdate = /* @__PURE__ */ new WeakMap();
-_currentEvent = /* @__PURE__ */ new WeakMap();
-_currentTemplate = /* @__PURE__ */ new WeakMap();
 __decorateClass([
   query("#input")
 ], MinidPhoneInput.prototype, "input", 2);

package/dist/components/phone-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-input.js","sources":["../../src/components/phone-input.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport {\n  AsYouType,\n  formatIncompletePhoneNumber,\n  getCountryCallingCode,\n  CountryCode,\n  parsePhoneNumberCharacter,\n} from 'libphonenumber-js';\nimport './icon/icon.component';\nimport {\n  onChange,\n  onKeyDown,\n  templateFormatter,\n  templateParser,\n} from 'input-format';\nimport { watch } from '../internal/watch';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin';\nimport { HasSlotController } from '../internal/slot';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-phone-input': MinidPhoneInput;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\n/**\n * @event {Event} mid-country-click - Emitted when the country button is clicked\n * @event {Event} mid-change - Emitted when the value is modified by the user\n * @event {Event} mid-input - Emitted after a new user input\n * @event {Event} mid-blur - Emitted after focus is moved away from input\n * @event {Event} mid-focus - Emitted after input gains focus\n *\n * @part base - Select the container outside the country button and phone number input\n * @part field - Select the container around the label and the inputs\n * @part label - Select the label element\n * @part country-button - Select the country button\n * @part input - Select the phone number input\n */\n@customElement('mid-phone-input')\nexport class MinidPhoneInput extends FormControllerMixin(\n  styled(LitElement, styles)\n) {\n  #formatter = new AsYouType();\n  #skipCountryUpdate = false; // avoids unwanted update loop\n  #currentEvent = new Event(''); // the event to be emitted after value is set\n  #currentTemplate = '';\n  hasSlotControler = new HasSlotController(this, 'label');\n\n  @query('#input')\n  input!: HTMLInputElement;\n\n  /**\n   * The value of the phone number in E.164 format. Example: `\"+4799999999\"`\n   *\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * The phone number without the country code prefix. Example: `\"99999999\"`\n   */\n  @property({ reflect: true })\n  nationalnumber = '';\n\n  /**\n   * The country code of the current phone number value. Example: `\"+47\"`\n   */\n  @property({ reflect: true })\n  countrycode = '';\n\n  /**\n   * Label for the phone input.\n   * Passed label will be encapsulated by a label element.\n   */\n  @property()\n  label = '';\n\n  /**\n   * Hide label visually. Still available for screen readers\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * The country selected. A two letter ISO country code like: `\"NO\"`\n   */\n  @property({ reflect: true })\n  country?: CountryCode;\n\n  @state()\n  hasFocus = false;\n\n  handleCountryClick() {\n    this.dispatchEvent(\n      new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n    );\n  }\n\n  handleCountryKeyDown(event: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(event.key)) {\n      this.dispatchEvent(\n        new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#formatter.input(this.value);\n    this.country = this.#formatter.getCountry() ?? this.country;\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n\n    this.value = formatIncompletePhoneNumber(this.value);\n    this.value ??= this.countrycode;\n    this.nationalnumber = this.removePhonePrefix(this.value);\n\n    setTimeout(() => {\n      this.input.value = `${this.countrycode}${this.nationalnumber}`;\n    }, 0);\n  }\n\n  get parseTemplate() {\n    return templateParser(this.#currentTemplate, parsePhoneNumberCharacter);\n  }\n\n  get formatTemplate() {\n    return templateFormatter(this.#currentTemplate);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange(event: Event) {\n    // Event is dispatched after value is set\n    this.#currentEvent = new Event('mid-change', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.setValue(event);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Backspace' && this.input.selectionStart === 1) {\n      event.preventDefault();\n      return;\n    }\n\n    onKeyDown(\n      event,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private handleInput(event: InputEvent) {\n    // Event is dispatched after value is set\n    this.#currentEvent = new Event('mid-input', {\n      composed: true,\n      bubbles: true,\n    });\n    this.setValue(event);\n  }\n\n  private setValue(event: Event) {\n    this.#formatter.reset();\n\n    if (!this.input.value.startsWith('+')) {\n      this.input.value = `+${this.input.value}`;\n    }\n    this.#formatter.input(this.input.value);\n    this.#currentTemplate = this.#formatter.getTemplate();\n\n    onChange(\n      event,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private valueChangeCallback = (value: string) => {\n    const country =\n      value.length < 2\n        ? undefined\n        : (this.#formatter.getCountry() ?? this.country);\n\n    if (country !== this.country) {\n      this.country = country;\n      this.countrycode = this.country\n        ? `+${getCountryCallingCode(this.country)}`\n        : '+';\n      this.#skipCountryUpdate = true;\n    }\n\n    this.value = value;\n    this.nationalnumber = this.removePhonePrefix(value);\n    this.dispatchEvent(this.#currentEvent);\n    this.setFormValue(this.value);\n  };\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private removePhonePrefix(value: string) {\n    if (this.countrycode) {\n      value = value.slice(this.countrycode.length);\n      if (value[0] === ' ') {\n        value = value.slice(1);\n      }\n    }\n    return value;\n  }\n\n  focus() {\n    this.input.focus();\n    setTimeout(() => {\n      this.input.setSelectionRange(\n        (this.countrycode?.length ?? 0) + 1,\n        this.input.value.length\n      );\n    }, 0);\n  }\n\n  @watch('country', { waitUntilFirstUpdate: true })\n  handleCountryChange() {\n    if (this.#skipCountryUpdate) {\n      this.#skipCountryUpdate = false;\n      return;\n    }\n\n    this.#formatter = new AsYouType(this.country);\n    this.nationalnumber = this.removePhonePrefix(this.input.value);\n\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n    this.input.value = formatIncompletePhoneNumber(\n      `${this.countrycode}${this.nationalnumber}`\n    );\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  override render() {\n    const lg = false;\n    const md = true;\n    const sm = false;\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n\n    return html`\n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })} grow\"\n      >\n        <label\n          for=\"input\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        <div part=\"base\" class=\"flex h-12\">\n          <button\n            part=\"country-button\"\n            class=\"border-neutral focus-visible:focus-ring flex h-full items-center rounded-l border border-r-0 pl-3\"\n            iconstyled\n            variant=\"tertiary\"\n            @click=${this.handleCountryClick}\n            @keydown=${this.handleCountryKeyDown}\n          >\n            ${this.country\n              ? html`\n                  <mid-icon\n                    class=\"h-4 w-6 overflow-hidden rounded\"\n                    library=\"country\"\n                    name=\"${this.country}\"\n                  ></mid-icon>\n                `\n              : html`<div\n                  class=\"bg-neutral-surface-active h-4 w-6 overflow-hidden rounded\"\n                ></div>`}\n            <mid-icon name=\"chevron-down\"></mid-icon>\n          </button>\n\n          <input\n            id=\"input\"\n            class=\"border-neutral p focus-visible:focus-ring grow rounded-r border px-3\"\n            part=\"phone-number\"\n            type=\"tel\"\n            autocomplete=\"tel\"\n            value=${this.value}\n            @input=${this.handleInput}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n            @change=${this.handleChange}\n          />\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"phone-input.js","sources":["../../src/components/phone-input.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport {\n  AsYouType,\n  formatIncompletePhoneNumber,\n  getCountryCallingCode,\n  CountryCode,\n  parsePhoneNumberCharacter,\n} from 'libphonenumber-js';\nimport './icon/icon.component';\nimport {\n  onChange,\n  onKeyDown,\n  templateFormatter,\n  templateParser,\n} from 'input-format';\nimport { watch } from '../internal/watch';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin';\nimport { HasSlotController } from '../internal/slot';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-phone-input': MinidPhoneInput;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\n/**\n * @event {Event} mid-country-click - Emitted when the country button is clicked\n * @event {Event} mid-change - Emitted when the value is modified by the user\n * @event {Event} mid-input - Emitted after a new user input\n * @event {Event} mid-blur - Emitted after focus is moved away from input\n * @event {Event} mid-focus - Emitted after input gains focus\n *\n * @part base - Select the container outside the country button and phone number input\n * @part field - Select the container around the label and the inputs\n * @part label - Select the label element\n * @part country-button - Select the country button\n * @part input - Select the phone number input\n */\n@customElement('mid-phone-input')\nexport class MinidPhoneInput extends FormControllerMixin(\n  styled(LitElement, styles)\n) {\n  private formatter = new AsYouType();\n  private skipCountryUpdate = false; // avoids unwanted update loop\n  private currentEvent = new Event(''); // the event to be emitted after value is set\n  private currentTemplate = '';\n  private hasSlotControler = new HasSlotController(this, 'label');\n\n  @query('#input')\n  input!: HTMLInputElement;\n\n  /**\n   * The value of the phone number in E.164 format. Example: `\"+4799999999\"`\n   *\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * The phone number without the country code prefix. Example: `\"99999999\"`\n   */\n  @property({ reflect: true })\n  nationalnumber = '';\n\n  /**\n   * The country code of the current phone number value. Example: `\"+47\"`\n   */\n  @property({ reflect: true })\n  countrycode = '';\n\n  /**\n   * Label for the phone input.\n   * Passed label will be encapsulated by a label element.\n   */\n  @property()\n  label = '';\n\n  /**\n   * Hide label visually. Still available for screen readers\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * The country selected. A two letter ISO country code like: `\"NO\"`\n   */\n  @property({ reflect: true })\n  country?: CountryCode;\n\n  @state()\n  hasFocus = false;\n\n  handleCountryClick() {\n    this.dispatchEvent(\n      new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n    );\n  }\n\n  handleCountryKeyDown(event: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(event.key)) {\n      this.dispatchEvent(\n        new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.formatter.input(this.value);\n    this.country = this.formatter.getCountry() ?? this.country;\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n\n    this.value = formatIncompletePhoneNumber(this.value);\n    this.value ??= this.countrycode;\n    this.nationalnumber = this.removePhonePrefix(this.value);\n\n    setTimeout(() => {\n      this.input.value = `${this.countrycode}${this.nationalnumber}`;\n    }, 0);\n  }\n\n  get parseTemplate() {\n    return templateParser(this.currentTemplate, parsePhoneNumberCharacter);\n  }\n\n  get formatTemplate() {\n    return templateFormatter(this.currentTemplate);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange(event: Event) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-change', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.setValue(event);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Backspace' && this.input.selectionStart === 1) {\n      event.preventDefault();\n      return;\n    }\n\n    onKeyDown(\n      event,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private handleInput(event: InputEvent) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-input', {\n      composed: true,\n      bubbles: true,\n    });\n    this.setValue(event);\n  }\n\n  private setValue(event: Event) {\n    this.formatter.reset();\n\n    if (!this.input.value.startsWith('+')) {\n      this.input.value = `+${this.input.value}`;\n    }\n    this.formatter.input(this.input.value);\n    this.currentTemplate = this.formatter.getTemplate();\n\n    onChange(\n      event,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private valueChangeCallback = (value: string) => {\n    const country =\n      value.length < 2\n        ? undefined\n        : (this.formatter.getCountry() ?? this.country);\n\n    if (country !== this.country) {\n      this.country = country;\n      this.countrycode = this.country\n        ? `+${getCountryCallingCode(this.country)}`\n        : '+';\n      this.skipCountryUpdate = true;\n    }\n\n    this.value = value;\n    this.nationalnumber = this.removePhonePrefix(value);\n    this.dispatchEvent(this.currentEvent);\n    this.setFormValue(this.value);\n  };\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private removePhonePrefix(value: string) {\n    if (this.countrycode) {\n      value = value.slice(this.countrycode.length);\n      if (value[0] === ' ') {\n        value = value.slice(1);\n      }\n    }\n    return value;\n  }\n\n  focus() {\n    this.input.focus();\n    setTimeout(() => {\n      this.input.setSelectionRange(\n        (this.countrycode?.length ?? 0) + 1,\n        this.input.value.length\n      );\n    }, 0);\n  }\n\n  @watch('country', { waitUntilFirstUpdate: true })\n  handleCountryChange() {\n    if (this.skipCountryUpdate) {\n      this.skipCountryUpdate = false;\n      return;\n    }\n\n    this.formatter = new AsYouType(this.country);\n    this.nationalnumber = this.removePhonePrefix(this.input.value);\n\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n    this.input.value = formatIncompletePhoneNumber(\n      `${this.countrycode}${this.nationalnumber}`\n    );\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  override render() {\n    const lg = false;\n    const md = true;\n    const sm = false;\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n\n    return html`\n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })}\"\n      >\n        <label\n          for=\"input\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        <div part=\"base\" class=\"flex h-12\">\n          <button\n            part=\"country-button\"\n            class=\"border-neutral focus-visible:focus-ring flex h-full items-center rounded-l border border-r-0 pl-3\"\n            iconstyled\n            variant=\"tertiary\"\n            @click=${this.handleCountryClick}\n            @keydown=${this.handleCountryKeyDown}\n          >\n            ${this.country\n              ? html`\n                  <mid-icon\n                    class=\"h-4 w-6 overflow-hidden rounded\"\n                    library=\"country\"\n                    name=\"${this.country}\"\n                  ></mid-icon>\n                `\n              : html`<div\n                  class=\"bg-neutral-surface-active h-4 w-6 overflow-hidden rounded\"\n                ></div>`}\n            <mid-icon name=\"chevron-down\"></mid-icon>\n          </button>\n\n          <input\n            id=\"input\"\n            class=\"border-neutral focus-visible:focus-ring grow rounded-r border px-3\"\n            part=\"phone-number\"\n            type=\"tel\"\n            autocomplete=\"tel\"\n            value=${this.value}\n            @input=${this.handleInput}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n            @change=${this.handleChange}\n          />\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/popup.component.d.ts

@@ -40,7 +40,6 @@ declare const MinidPopup_base: typeof LitElement;
  *  available when using `auto-size`.
  */
 export declare class MinidPopup extends MinidPopup_base {
-    #private;
     private anchorEl;
     private cleanup?;
     /**

package/dist/components/popup.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popup.component.d.ts","sourceRoot":"","sources":["../../src/components/popup.component.ts"],"names":[],"mappings":"AAuBA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;AAED,MAAM,WAAW,cAAc;IAC7B,qBAAqB,EAAE,MAAM,OAAO,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;;AAkHD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,qBACa,UAAW,SAAQ,eAA0B;;IACxD,OAAO,CAAC,QAAQ,CAAyC;IACzD,OAAO,CAAC,OAAO,CAAC,CAAgC;IAEhD;;OAEG;IAEH,KAAK,EAAG,WAAW,CAAC;IAGpB,OAAO,CAAC,OAAO,CAAe;IAE9B;;;;OAIG;IAEH,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,cAAc,CAAM;IAE/C;;;OAGG;IAEH,MAAM,UAAS;IAEf;;;OAGG;IAEH,SAAS,EACL,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,OAAO,GACP,aAAa,GACb,WAAW,GACX,MAAM,GACN,YAAY,GACZ,UAAU,CAAS;IAEvB;;;OAGG;IAEH,QAAQ,EAAE,UAAU,GAAG,OAAO,CAAc;IAE5C;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAEb;;;;OAIG;IAEH,KAAK,UAAS;IAEd;;;;OAIG;IAEH,cAAc,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAY;IAEjE;;;OAGG;IAEH,YAAY,SAAM;IAElB;;;OAGG;IAEH,IAAI,UAAS;IAEb;;;;OAIG;IAeH,sBAAsB,SAAM;IAE5B;;;;OAIG;IAEH,oBAAoB,EAAE,UAAU,GAAG,SAAS,CAAc;IAE1D;;;;OAIG;IAEH,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAEnC;;OAEG;IAEH,WAAW,SAAK;IAEhB;;OAEG;IAEH,KAAK,UAAS;IAEd;;;;OAIG;IAEH,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAEpC;;OAEG;IAEH,YAAY,SAAK;IAEjB,yGAAyG;IACnE,QAAQ,CAAC,EAC3C,YAAY,GACZ,UAAU,GACV,MAAM,CAAC;IAEX;;OAEG;IAEH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEnC;;;;OAIG;IAEH,gBAAgB,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAEvC;;OAEG;IACyD,eAAe,SACvE;IAEJ;;;;;OAKG;IACqD,WAAW,UAAS;IAEtE,iBAAiB;IAQvB,oBAAoB;IAKd,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;YAwBlC,kBAAkB;IAgChC,OAAO,CAAC,KAAK;YAWC,IAAI;IAelB,6DAA6D;IAC7D,UAAU;IAiNV,OAAO,CAAC,iBAAiB,CAsFvB;IAaF,MAAM;CAoCP"}
+{"version":3,"file":"popup.component.d.ts","sourceRoot":"","sources":["../../src/components/popup.component.ts"],"names":[],"mappings":"AAuBA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;AAED,MAAM,WAAW,cAAc;IAC7B,qBAAqB,EAAE,MAAM,OAAO,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;;AAkHD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,qBACa,UAAW,SAAQ,eAA0B;IACxD,OAAO,CAAC,QAAQ,CAAyC;IACzD,OAAO,CAAC,OAAO,CAAC,CAAgC;IAEhD;;OAEG;IAEH,KAAK,EAAG,WAAW,CAAC;IAGpB,OAAO,CAAC,OAAO,CAAe;IAE9B;;;;OAIG;IAEH,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,cAAc,CAAM;IAE/C;;;OAGG;IAEH,MAAM,UAAS;IAEf;;;OAGG;IAEH,SAAS,EACL,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,OAAO,GACP,aAAa,GACb,WAAW,GACX,MAAM,GACN,YAAY,GACZ,UAAU,CAAS;IAEvB;;;OAGG;IAEH,QAAQ,EAAE,UAAU,GAAG,OAAO,CAAc;IAE5C;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAEb;;;;OAIG;IAEH,KAAK,UAAS;IAEd;;;;OAIG;IAEH,cAAc,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAY;IAEjE;;;OAGG;IAEH,YAAY,SAAM;IAElB;;;OAGG;IAEH,IAAI,UAAS;IAEb;;;;OAIG;IAeH,sBAAsB,SAAM;IAE5B;;;;OAIG;IAEH,oBAAoB,EAAE,UAAU,GAAG,SAAS,CAAc;IAE1D;;;;OAIG;IAEH,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAEnC;;OAEG;IAEH,WAAW,SAAK;IAEhB;;OAEG;IAEH,KAAK,UAAS;IAEd;;;;OAIG;IAEH,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAEpC;;OAEG;IAEH,YAAY,SAAK;IAEjB,yGAAyG;IACnE,QAAQ,CAAC,EAC3C,YAAY,GACZ,UAAU,GACV,MAAM,CAAC;IAEX;;OAEG;IAEH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEnC;;;;OAIG;IAEH,gBAAgB,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAEvC;;OAEG;IACyD,eAAe,SACvE;IAEJ;;;;;OAKG;IACqD,WAAW,UAAS;IAEtE,iBAAiB;IAQvB,oBAAoB;IAKd,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;YAwBlC,kBAAkB;IAgChC,OAAO,CAAC,KAAK;YAWC,IAAI;IAelB,6DAA6D;IAC7D,UAAU;IAiNV,OAAO,CAAC,iBAAiB,CAsFvB;IAEF,MAAM;CAgCP"}