@felleslosninger/minid-elements 0.0.119 → 0.0.120

package/dist/components/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../src/components/alert.component.ts"],"sourcesContent":["import { html, LitElement, nothing } 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.ts';\nimport './icon/icon.component';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../internal/watch';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { type MidIconName } from '../types/icon-name';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-alert': MinidAlert;\n  }\n}\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'mid-toast-stack',\n});\n\n/**\n * Alerts need to have the `open` attribute to be displayed\n * @csspart base - Select the base of the alert\n *\n * @event mid-show - Emitted when the alert opens.\n * @event mid-after-show - Emitted after the alert opens and all animations are complete.\n * @event mid-hide - Emitted when the alert closes.\n * @event mid-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @slot -- The default slot for the content of the alert\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n@customElement('mid-alert')\nexport class MinidAlert extends styled(LitElement) {\n  private autoHideTimeout?: number;\n  private remainingTimeInterval?: number;\n\n  @query('[part~=\"base\"]')\n  private base!: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Enables a close button that allows the user to dismiss the alert.\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number })\n  duration = Infinity;\n\n  /**\n   * Sets color and icon according to severity\n   */\n  @property({ reflect: true })\n  severity: 'warning' | 'info' | 'danger' | 'success' = 'info';\n\n  /**\n   * Sets size of icon, padding and font-size.\n   */\n  @property({ reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Adds a shadow to elevate the component\n   */\n  @property({ type: Boolean })\n  elevated = false;\n\n  /**\n   * Sets the `aria-label` on the icon\n   * Use this to inform screenreaders of severity. Defaults to Norwegian.\n   */\n  @property({ type: String })\n  iconlabel?: string;\n\n  @state()\n  private remainingTime = this.duration;\n\n  @state()\n  private notificationContent?: {\n    title?: string;\n    message: string;\n    details?: string;\n  };\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n      this.remainingTime = this.duration;\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  private pauseAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n  }\n\n  private resumeAutoHide() {\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.remainingTime\n      );\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { composed: true, bubbles: true })\n      );\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show');\n      await animateTo(this.base, keyframes, options);\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { composed: true, bubbles: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { composed: true, bubbles: true })\n      );\n\n      clearTimeout(this.autoHideTimeout);\n      clearInterval(this.remainingTimeInterval);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide');\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /**\n   * Shows the alert.\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 alert\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   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast(\n    content: MinidAlert['notificationContent'],\n    duration?: number,\n    severity?: MinidAlert['severity'],\n    closable = true\n  ) {\n    return new Promise<void>((resolve) => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      if (content) {\n        this.notificationContent = content;\n      }\n\n      if (severity) {\n        this.severity = severity;\n      }\n\n      if (duration) {\n        this.duration = duration;\n      }\n\n      this.closable = closable;\n      this.elevated = true;\n\n      // We wrap this in a timeout for `getBoundingClientRect` to get the height properly\n      setTimeout(() => {\n        toastStack.appendChild(this);\n\n        animateTo(\n          toastStack,\n          [\n            {\n              transform: `translateY(${this.getBoundingClientRect().height}px)`,\n            },\n            { transform: 'translateY(0px)' },\n          ],\n          { duration: 250, easing: 'ease-out' }\n        );\n      }, 0);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // Force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'mid-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('mid-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  override render() {\n    const danger = this.severity === 'danger';\n    const warning = this.severity === 'warning';\n    const info = this.severity === 'info';\n    const success = this.severity === 'success';\n    const sm = this.size === 'sm';\n    const md = this.size === 'md';\n    const lg = this.size === 'lg';\n    const iconName: MidIconName =\n      (danger && 'xmark-octagon-fill') ||\n      (warning && 'exclamationmark-triangle-fill') ||\n      (success && 'checkmark-circle-fill') ||\n      'information-square-fill';\n    this.iconlabel ??=\n      (danger && 'Feil') ||\n      (warning && 'Advarsel') ||\n      (success && 'Suksess') ||\n      'Informasjon';\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n          'bg-danger-surface-tinted': danger,\n          'bg-info-surface-tinted': info,\n          'bg-success-surface-tinted': success,\n          'bg-warning-surface-tinted': warning,\n          'border-danger': danger,\n          'border-info': info,\n          'border-success': success,\n          'border-warning': warning,\n          'text-danger': danger,\n          'text-info': info,\n          'text-success': success,\n          'text-warning': warning,\n          'shadow-md': this.elevated,\n        })} grid grid-cols-[auto_1fr_auto] gap-2 rounded border p-6\"\n        @mouseenter=${this.pauseAutoHide}\n        @mouseleave=${this.resumeAutoHide}\n      >\n        <mid-icon\n          class=\"${classMap({\n            'text-info-subtle': info,\n            'text-danger-subtle': danger,\n            'text-success-subtle': success,\n            'text-warning-subtle': warning,\n          })} size-7\"\n          name=\"${iconName}\"\n          library=\"system\"\n          alt=${ifDefined(this.iconlabel)}\n        ></mid-icon>\n        <div aria-live=\"polite\">\n          <slot>\n            ${!this.notificationContent?.title\n              ? nothing\n              : html`<h2 class=\"text-heading-xs\">\n                  ${this.notificationContent?.title}\n                </h2>`}\n            ${this.notificationContent?.message}\n            ${!this.notificationContent?.details\n              ? nothing\n              : html`<div\n                  class=\"${classMap({\n                    'border-danger': danger,\n                    'border-info': info,\n                    'border-success': success,\n                    'border-warning': warning,\n                    'bg-danger-surface-hover': danger,\n                    'bg-info-surface-hover': info,\n                    'bg-success-surface-hover': success,\n                    'bg-warning-surface-hover': warning,\n                  })} text-body-sm mt-0.5 border-l-4 p-3\"\n                >\n                  <pre class=\"break-all whitespace-pre-wrap\">\n${this.notificationContent?.details}</pre\n                  >\n                </div>`}\n          </slot>\n        </div>\n        ${this.closable\n          ? html`\n              <button\n                class=\"${classMap({\n                  'text-info-subtle': info,\n                  'text-danger-subtle': danger,\n                  'text-success-subtle': success,\n                  'text-warning-subtle': warning,\n                  'hover:bg-danger-surface-hover': danger,\n                  'hover:bg-info-surface-hover': info,\n                  'hover:bg-success-surface-hover': success,\n                  'hover:bg-warning-surface-hover': warning,\n                })} -my-4 -mr-4 flex self-center rounded p-4\"\n                @click=\"${this.hide}\"\n                aria-label=\"Dismiss alert\"\n              >\n                <mid-icon class=\"size-6\" name=\"xmark\"> </mid-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, transform: 'translateY(100%)' },\n    { opacity: 1, transform: 'translateY(0px)' },\n  ],\n  options: { duration: 400, easing: 'ease-out' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease-in' },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"alert.js","sources":["../../src/components/alert.component.ts"],"sourcesContent":["import { html, LitElement, nothing } 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.ts';\nimport './icon/icon.component';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../internal/watch';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { type MidIconName } from '../types/icon-name';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-alert': MinidAlert;\n  }\n}\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'mid-toast-stack',\n});\n\n/**\n * Alerts need to have the `open` attribute to be displayed\n * @csspart base - Select the base of the alert\n *\n * @event mid-show - Emitted when the alert opens.\n * @event mid-after-show - Emitted after the alert opens and all animations are complete.\n * @event mid-hide - Emitted when the alert closes.\n * @event mid-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @slot -- The default slot for the content of the alert\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n@customElement('mid-alert')\nexport class MinidAlert extends styled(LitElement) {\n  private autoHideTimeout?: number;\n  private remainingTimeInterval?: number;\n\n  @query('[part~=\"base\"]')\n  private base!: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Enables a close button that allows the user to dismiss the alert.\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number })\n  duration = Infinity;\n\n  /**\n   * Sets color and icon according to severity\n   */\n  @property({ reflect: true })\n  severity: 'warning' | 'info' | 'danger' | 'success' = 'info';\n\n  /**\n   * Sets size of icon, padding and font-size.\n   */\n  @property({ reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Adds a shadow to elevate the component\n   */\n  @property({ type: Boolean })\n  elevated = false;\n\n  /**\n   * Sets the `aria-label` on the icon\n   * Use this to inform screenreaders of severity. Defaults to Norwegian.\n   */\n  @property({ type: String })\n  iconlabel?: string;\n\n  @state()\n  private remainingTime = this.duration;\n\n  @state()\n  private notificationContent?: {\n    title?: string;\n    message: string;\n    details?: string;\n  };\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n      this.remainingTime = this.duration;\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  private pauseAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n  }\n\n  private resumeAutoHide() {\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.remainingTime\n      );\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { composed: true, bubbles: true })\n      );\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show');\n      await animateTo(this.base, keyframes, options);\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { composed: true, bubbles: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { composed: true, bubbles: true })\n      );\n\n      clearTimeout(this.autoHideTimeout);\n      clearInterval(this.remainingTimeInterval);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide');\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /**\n   * Shows the alert.\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 alert\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   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast(\n    content: MinidAlert['notificationContent'],\n    duration?: number,\n    severity?: MinidAlert['severity'],\n    closable = true\n  ) {\n    return new Promise<void>((resolve) => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      if (content) {\n        this.notificationContent = content;\n      }\n\n      if (severity) {\n        this.severity = severity;\n      }\n\n      if (duration) {\n        this.duration = duration;\n      }\n\n      this.closable = closable;\n      this.elevated = true;\n\n      // We wrap this in a timeout for `getBoundingClientRect` to get the height properly\n      setTimeout(() => {\n        toastStack.appendChild(this);\n\n        animateTo(\n          toastStack,\n          [\n            {\n              transform: `translateY(${this.getBoundingClientRect().height}px)`,\n            },\n            { transform: 'translateY(0px)' },\n          ],\n          { duration: 250, easing: 'ease-out' }\n        );\n      }, 0);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // Force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'mid-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('mid-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  override render() {\n    const danger = this.severity === 'danger';\n    const warning = this.severity === 'warning';\n    const info = this.severity === 'info';\n    const success = this.severity === 'success';\n    const sm = this.size === 'sm';\n    const md = this.size === 'md';\n    const lg = this.size === 'lg';\n    const iconName: MidIconName =\n      (danger && 'xmark-octagon-fill') ||\n      (warning && 'exclamationmark-triangle-fill') ||\n      (success && 'checkmark-circle-fill') ||\n      'information-square-fill';\n    this.iconlabel ??=\n      (danger && 'Feil') ||\n      (warning && 'Advarsel') ||\n      (success && 'Suksess') ||\n      'Informasjon';\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n          'bg-danger-surface-tinted': danger,\n          'bg-info-surface-tinted': info,\n          'bg-success-surface-tinted': success,\n          'bg-warning-surface-tinted': warning,\n          'border-danger': danger,\n          'border-info': info,\n          'border-success': success,\n          'border-warning': warning,\n          'text-danger': danger,\n          'text-info': info,\n          'text-success': success,\n          'text-warning': warning,\n          'shadow-md': this.elevated,\n        })} grid grid-cols-[auto_1fr_auto] gap-2 rounded border p-6\"\n        @mouseenter=${this.pauseAutoHide}\n        @mouseleave=${this.resumeAutoHide}\n      >\n        <mid-icon\n          class=\"${classMap({\n            'text-info-subtle': info,\n            'text-danger-subtle': danger,\n            'text-success-subtle': success,\n            'text-warning-subtle': warning,\n          })} size-7\"\n          name=\"${iconName}\"\n          library=\"system\"\n          alt=${ifDefined(this.iconlabel)}\n        ></mid-icon>\n        <div aria-live=\"polite\">\n          <slot>\n            ${!this.notificationContent?.title\n              ? nothing\n              : html`<h2 class=\"text-heading-xs\">\n                  ${this.notificationContent?.title}\n                </h2>`}\n            ${this.notificationContent?.message}\n            ${!this.notificationContent?.details\n              ? nothing\n              : html`<div\n                  class=\"${classMap({\n                    'border-danger': danger,\n                    'border-info': info,\n                    'border-success': success,\n                    'border-warning': warning,\n                    'bg-danger-surface-hover': danger,\n                    'bg-info-surface-hover': info,\n                    'bg-success-surface-hover': success,\n                    'bg-warning-surface-hover': warning,\n                  })} text-body-sm mt-0.5 border-l-4 p-3\"\n                >\n                  <pre class=\"break-all whitespace-pre-wrap\">\n${this.notificationContent?.details}</pre\n                  >\n                </div>`}\n          </slot>\n        </div>\n        ${this.closable\n          ? html`\n              <button\n                class=\"${classMap({\n                  'text-info-subtle': info,\n                  'text-danger-subtle': danger,\n                  'text-success-subtle': success,\n                  'text-warning-subtle': warning,\n                  'hover:bg-danger-surface-hover': danger,\n                  'hover:bg-info-surface-hover': info,\n                  'hover:bg-success-surface-hover': success,\n                  'hover:bg-warning-surface-hover': warning,\n                })} -my-4 -mr-4 flex self-center rounded p-4\"\n                @click=\"${this.hide}\"\n                aria-label=\"Dismiss alert\"\n              >\n                <mid-icon class=\"size-6\" name=\"xmark\"> </mid-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, transform: 'translateY(100%)' },\n    { opacity: 1, transform: 'translateY(0px)' },\n  ],\n  options: { duration: 400, easing: 'ease-out' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease-in' },\n});\n"],"names":[],"mappings":"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"}

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../src/components/button.component.ts"],"sourcesContent":["import { css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './spinner.component.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-button': MinidButton;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n    }\n  `,\n];\n\n/**\n * A regular old button\n */\n@customElement('mid-button')\nexport class MinidButton extends FormControlMixin(styled(LitElement, styles)) {\n  @query('.button')\n  button!: HTMLButtonElement | HTMLLinkElement;\n\n  /**\n   * The value of the button (optional)\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * The variant of the button\n   */\n  @property({ type: String })\n  variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button. Defaults to 'md'\n   */\n  @property({ type: String })\n  size: 'md' | 'lg' | 'sm' = 'md';\n\n  /**\n   * The type of the button. Defaults to normal 'button'\n   */\n  @property({ type: String })\n  type: 'submit' | 'button' | 'reset' = 'button';\n\n  /**\n   * The href of the button. If set, the button will be rendered as an anchor tag\n   */\n  @property({ type: String })\n  href: string | undefined;\n\n  /**\n   * Whether the button is disabled\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   *\n   */\n  @property({ type: Boolean })\n  loading = false;\n\n  @property()\n  loadingtext = '';\n\n  /**\n   * Toggle icon only styling\n   */\n  @property({ type: Boolean })\n  iconstyled = false;\n\n  handleClick() {\n    if (this.type === 'submit') {\n      this.value && this.setValue(this.value);\n      this.internals.form?.requestSubmit();\n    } else if (this.type === 'reset') {\n      this.internals.form?.reset();\n    }\n  }\n\n  private get isLink() {\n    return !!this.href;\n  }\n\n  click() {\n    this.button.click();\n  }\n\n  blur() {\n    this.button.blur();\n  }\n\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  override render() {\n    const tag = this.isLink ? literal`a` : literal`button`;\n    const primary = this.variant === 'primary';\n    const secondary = this.variant === 'secondary';\n    const tertiary = this.variant === 'tertiary';\n    const sm = this.size === 'sm';\n    const md = this.size === 'md';\n    const lg = this.size === 'lg';\n    const spinnerOnly = this.loading && !this.loadingtext;\n\n    return html`<${tag}\n      part=\"base\"\n      class=\"${classMap({\n        button: true,\n        'w-12': this.iconstyled,\n        'h-12': this.iconstyled,\n        'py-2': !this.iconstyled,\n        'px-4': !this.iconstyled,\n        'bg-accent-base': primary,\n        'text-accent-base-contrast': primary,\n        'border-transparent': primary || tertiary,\n        'hover:bg-accent-base-hover': primary,\n        'active:bg-accent-base-active': primary,\n        'bg-transparent': secondary || tertiary,\n        'active:bg-accent-surface-active': secondary || tertiary,\n        'hover:bg-accent-surface-hover': secondary || tertiary,\n        'text-accent-subtle': secondary || tertiary,\n        'hover:text-accent': secondary || tertiary,\n        'border-accent-strong': secondary,\n        'text-body-sm': sm,\n        'text-body-md': md,\n        'text-body-lg': lg,\n        'cursor-wait': this.loading && !this.disabled,\n        'cursor-pointer': !this.loading && !this.disabled,\n        'cursor-not-allowed': this.disabled,\n        relative: spinnerOnly,\n        'gap-0': spinnerOnly,\n        'opacity-disabled': this.disabled && !this.loading,\n      })} grow focus-visible:focus-ring leading-sm flex h-fit min-h-12 min-w-12 items-center justify-center gap-2 rounded border font-medium\"\n      type=${this.type}\n      aria-busy=${this.loading}\n      ?disabled=${this.disabled || this.loading}\n      href=\"${ifDefined(this.href)}\"\n      @click=\"${this.handleClick}\"\n    >\n      <slot\n        class=\"${classMap({\n          invisible: spinnerOnly,\n        })}\"\n        ?hidden=${this.loading && !!this.loadingtext}\n      ></slot>\n      <span ?hidden=${!this.loading || !this.loadingtext}>\n        ${this.loadingtext}\n      </span>\n      ${\n        this.loading\n          ? html`<mid-spinner\n              class=\"${classMap({\n                'text-[1.4rem]': true,\n                absolute: spinnerOnly,\n                'top-[calc(50%_-_0.5em)]': spinnerOnly,\n                'left-[calc(50%_-_0.5em)]': spinnerOnly,\n              })}\"\n              part=\"spinner\"\n            ></mid-spinner>`\n          : ''\n      }\n    </${tag}>`;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../src/components/button.component.ts"],"sourcesContent":["import { css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './spinner.component.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-button': MinidButton;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n    }\n  `,\n];\n\n/**\n * A regular old button\n */\n@customElement('mid-button')\nexport class MinidButton extends FormControlMixin(styled(LitElement, styles)) {\n  @query('.button')\n  button!: HTMLButtonElement | HTMLLinkElement;\n\n  /**\n   * The value of the button (optional)\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * The variant of the button\n   */\n  @property({ type: String })\n  variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button. Defaults to 'md'\n   */\n  @property({ type: String })\n  size: 'md' | 'lg' | 'sm' = 'md';\n\n  /**\n   * The type of the button. Defaults to normal 'button'\n   */\n  @property({ type: String })\n  type: 'submit' | 'button' | 'reset' = 'button';\n\n  /**\n   * The href of the button. If set, the button will be rendered as an anchor tag\n   */\n  @property({ type: String })\n  href: string | undefined;\n\n  /**\n   * Whether the button is disabled\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   *\n   */\n  @property({ type: Boolean })\n  loading = false;\n\n  @property()\n  loadingtext = '';\n\n  /**\n   * Toggle icon only styling\n   */\n  @property({ type: Boolean })\n  iconstyled = false;\n\n  handleClick() {\n    if (this.type === 'submit') {\n      this.value && this.setValue(this.value);\n      this.internals.form?.requestSubmit();\n    } else if (this.type === 'reset') {\n      this.internals.form?.reset();\n    }\n  }\n\n  private get isLink() {\n    return !!this.href;\n  }\n\n  click() {\n    this.button.click();\n  }\n\n  blur() {\n    this.button.blur();\n  }\n\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  override render() {\n    const tag = this.isLink ? literal`a` : literal`button`;\n    const primary = this.variant === 'primary';\n    const secondary = this.variant === 'secondary';\n    const tertiary = this.variant === 'tertiary';\n    const sm = this.size === 'sm';\n    const md = this.size === 'md';\n    const lg = this.size === 'lg';\n    const spinnerOnly = this.loading && !this.loadingtext;\n\n    return html`<${tag}\n      part=\"base\"\n      class=\"${classMap({\n        button: true,\n        'w-12': this.iconstyled,\n        'h-12': this.iconstyled,\n        'py-2': !this.iconstyled,\n        'px-4': !this.iconstyled,\n        'bg-accent-base': primary,\n        'text-accent-base-contrast': primary,\n        'border-transparent': primary || tertiary,\n        'hover:bg-accent-base-hover': primary,\n        'active:bg-accent-base-active': primary,\n        'bg-transparent': secondary || tertiary,\n        'active:bg-accent-surface-active': secondary || tertiary,\n        'hover:bg-accent-surface-hover': secondary || tertiary,\n        'text-accent-subtle': secondary || tertiary,\n        'hover:text-accent': secondary || tertiary,\n        'border-accent-strong': secondary,\n        'text-body-sm': sm,\n        'text-body-md': md,\n        'text-body-lg': lg,\n        'cursor-wait': this.loading && !this.disabled,\n        'cursor-pointer': !this.loading && !this.disabled,\n        'cursor-not-allowed': this.disabled,\n        relative: spinnerOnly,\n        'gap-0': spinnerOnly,\n        'opacity-disabled': this.disabled && !this.loading,\n      })} grow focus-visible:focus-ring leading-sm flex h-fit min-h-12 min-w-12 items-center justify-center gap-2 rounded border font-medium\"\n      type=${this.type}\n      aria-busy=${this.loading}\n      ?disabled=${this.disabled || this.loading}\n      href=\"${ifDefined(this.href)}\"\n      @click=\"${this.handleClick}\"\n    >\n      <slot\n        class=\"${classMap({\n          invisible: spinnerOnly,\n        })}\"\n        ?hidden=${this.loading && !!this.loadingtext}\n      ></slot>\n      <span ?hidden=${!this.loading || !this.loadingtext}>\n        ${this.loadingtext}\n      </span>\n      ${\n        this.loading\n          ? html`<mid-spinner\n              class=\"${classMap({\n                'text-[1.4rem]': true,\n                absolute: spinnerOnly,\n                'top-[calc(50%_-_0.5em)]': spinnerOnly,\n                'left-[calc(50%_-_0.5em)]': spinnerOnly,\n              })}\"\n              part=\"spinner\"\n            ></mid-spinner>`\n          : ''\n      }\n    </${tag}>`;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from '../mixins/validators.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n/**\n *\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(styled(LitElement)) {\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  /**\n   * The name of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The current value of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  value = 'on';\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    // this.indeterminate = false;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  /**\n   * Simulates a click on the checkbox.\n   */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input.blur();\n  }\n\n  @watch(['checked', 'value'])\n  handleStateChange() {\n    // this.input.indeterminate = this.indeterminate; // force a sync update\n    this.setValue(this.value);\n  }\n\n  override render() {\n    return html`\n      <label\n        class=\"${classMap({\n          'opacity-disabled': this.disabled,\n          'cursor-not-allowed': this.disabled,\n        })} grid grid-cols-[auto_1fr] gap-2\"\n      >\n        <span\n          class=\"${classMap({\n            'bg-accent-base': !this.readonly && this.checked && !this.invalid,\n            'bg-danger-base': !this.readonly && this.checked && this.invalid,\n            'border-accent-base':\n              !this.readonly && this.checked && !this.invalid,\n            'border-neutral': !this.readonly && !this.checked && !this.invalid,\n            'border-danger-base': !this.readonly && this.invalid,\n            'border-neutral-subtle': this.readonly,\n            'bg-neutral-surface-tinted': this.readonly,\n          })} focus-within:focus-ring inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-2\"\n        >\n          <input\n            class=\"pointer-events-none appearance-none\"\n            type=\"checkbox\"\n            value=${ifDefined(this.value)}\n            .checked=${live(this.checked)}\n            ?disabled=${this.disabled}\n            ?checked=${this.checked}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            @click=${this.handleClick}\n          />\n          ${this.checked\n            ? html`<mid-icon\n                class=\"${classMap({\n                  'text-accent-base-contrast': this.checked && !this.readonly,\n                })} size-6 shrink-0 scale-125\"\n                name=\"checkmark\"\n              ></mid-icon>`\n            : ''}\n        </span>\n        <div part=\"label\">\n          <slot></slot>\n        </div>\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBO,IAAM,gBAAN,cAA4B,iBAAiB,OAAO,UAAU,CAAC,EAAE;AAAA,EAAjE,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,OAAO;AAMP,SAAA,QAAQ;AAGR,SAAA,UAAU;AAGV,SAAA,WAAW;AAGX,SAAA,WAAW;AAGX,SAAA,UAAU;AAGV,SAAA,WAAW;AAAA,EAAA;AAAA,EAEX,WAAW,wBAAwB;AACjC,WAAO,CAAC,iBAAiB;AAAA,EAAA;AAAA,EAG3B,wBAAiC;AAC/B,WAAO,KAAK;AAAA,EAAA;AAAA,EAGd,IAAI,mBAAmB;AACrB,WAAO,KAAK;AAAA,EAAA;AAAA,EAGN,cAAc;AACpB,SAAK,UAAU,CAAC,KAAK;AAErB,SAAK,cAAc,IAAI,MAAM,YAAY,CAAC;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAM5C,QAAQ;AACN,SAAK,MAAM,MAAA;AAAA,EAAM;AAAA;AAAA;AAAA;AAAA,EAMnB,MAAM,SAAwB;AAC5B,SAAK,MAAM,MAAM,OAAO;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAM1B,OAAO;AACL,SAAK,MAAM,KAAA;AAAA,EAAK;AAAA,EAIlB,oBAAoB;AAElB,SAAK,SAAS,KAAK,KAAK;AAAA,EAAA;AAAA,EAGjB,SAAS;AAChB,WAAO;AAAA;AAAA,iBAEM,SAAS;AAAA,MAChB,oBAAoB,KAAK;AAAA,MACzB,sBAAsB,KAAK;AAAA,IAAA,CAC5B,CAAC;AAAA;AAAA;AAAA,mBAGS,SAAS;AAAA,MAChB,kBAAkB,CAAC,KAAK,YAAY,KAAK,WAAW,CAAC,KAAK;AAAA,MAC1D,kBAAkB,CAAC,KAAK,YAAY,KAAK,WAAW,KAAK;AAAA,MACzD,sBACE,CAAC,KAAK,YAAY,KAAK,WAAW,CAAC,KAAK;AAAA,MAC1C,kBAAkB,CAAC,KAAK,YAAY,CAAC,KAAK,WAAW,CAAC,KAAK;AAAA,MAC3D,sBAAsB,CAAC,KAAK,YAAY,KAAK;AAAA,MAC7C,yBAAyB,KAAK;AAAA,MAC9B,6BAA6B,KAAK;AAAA,IAAA,CACnC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKQ,UAAU,KAAK,KAAK,CAAC;AAAA,uBAClB,KAAK,KAAK,OAAO,CAAC;AAAA,wBACjB,KAAK,QAAQ;AAAA,uBACd,KAAK,OAAO;AAAA,wBACX,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,qBAChB,KAAK,WAAW;AAAA;AAAA,YAEzB,KAAK,UACH;AAAA,yBACW,SAAS;AAAA,MAChB,6BAA6B,KAAK,WAAW,CAAC,KAAK;AAAA,IAAA,CACpD,CAAC;AAAA;AAAA,8BAGJ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQhB;AAxHU,gBAAA;AAAA,EADP,MAAM,wBAAwB;AAAA,GADpB,cAEH,WAAA,SAAA,CAAA;AAMR,gBAAA;AAAA,EADC,SAAA;AAAS,GAPC,cAQX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GAbC,cAcX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAhBhB,cAiBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAnBhB,cAoBX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAtBhB,cAuBX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzBhB,cA0BX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA5B/B,cA6BX,WAAA,YAAA,CAAA;AA0CA,gBAAA;AAAA,EADC,MAAM,CAAC,WAAW,OAAO,CAAC;AAAA,GAtEhB,cAuEX,WAAA,qBAAA,CAAA;AAvEW,gBAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,aAAA;"}
+{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from '../mixins/validators.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n/**\n *\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(styled(LitElement)) {\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  /**\n   * The name of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The current value of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  value = 'on';\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    // this.indeterminate = false;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  /**\n   * Simulates a click on the checkbox.\n   */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input.blur();\n  }\n\n  @watch(['checked', 'value'])\n  handleStateChange() {\n    // this.input.indeterminate = this.indeterminate; // force a sync update\n    this.setValue(this.value);\n  }\n\n  override render() {\n    return html`\n      <label\n        class=\"${classMap({\n          'opacity-disabled': this.disabled,\n          'cursor-not-allowed': this.disabled,\n        })} grid grid-cols-[auto_1fr] gap-2\"\n      >\n        <span\n          class=\"${classMap({\n            'bg-accent-base': !this.readonly && this.checked && !this.invalid,\n            'bg-danger-base': !this.readonly && this.checked && this.invalid,\n            'border-accent-base':\n              !this.readonly && this.checked && !this.invalid,\n            'border-neutral': !this.readonly && !this.checked && !this.invalid,\n            'border-danger-base': !this.readonly && this.invalid,\n            'border-neutral-subtle': this.readonly,\n            'bg-neutral-surface-tinted': this.readonly,\n          })} focus-within:focus-ring inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-2\"\n        >\n          <input\n            class=\"pointer-events-none appearance-none\"\n            type=\"checkbox\"\n            value=${ifDefined(this.value)}\n            .checked=${live(this.checked)}\n            ?disabled=${this.disabled}\n            ?checked=${this.checked}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            @click=${this.handleClick}\n          />\n          ${this.checked\n            ? html`<mid-icon\n                class=\"${classMap({\n                  'text-accent-base-contrast': this.checked && !this.readonly,\n                })} size-6 shrink-0 scale-125\"\n                name=\"checkmark\"\n              ></mid-icon>`\n            : ''}\n        </span>\n        <div part=\"label\">\n          <slot></slot>\n        </div>\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/code-input-old.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-input-old.js","sources":["../../src/components/code-input-old.component.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { webOtpApiClose, webOtpApiInit } from '../utilities/web-otp-api';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { ConstraintsValidationMixin } from '../mixins/form-controller.mixin';\nimport './icon/icon.component';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input-old': MinidCodeInputOld;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      container: otc / inline-size;\n      text-align: left;\n      --otc-background: white;\n      --otc-error-background: white;\n      --otc-length: 5;\n      --otc-width: 11.45cqw;\n    }\n\n    input {\n      all: unset;\n      background: var(--otc-background);\n      caret-color: transparent;\n      clip-path: inset(0% 1ch 0% 0%);\n      font-family: ui-monospace, monospace;\n      font-size: var(--otc-width);\n      inline-size: calc(var(--otc-length) * 3ch);\n      letter-spacing: 2ch;\n      padding-block: 0.25ch;\n      padding-inline-start: calc(0.5ch * 1.5);\n      flex-grow: 1;\n\n      &:focus-visible:focus {\n        outline-style: none;\n      }\n\n      &:-webkit-autofill {\n        animation-name: onAutoFillStart;\n      }\n    }\n\n    @keyframes onAutoFillStart {\n      from {\n      }\n      to {\n      }\n    }\n\n    input.error {\n      background: var(--otc-error-background);\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n@customElement('mid-code-input-old')\nexport class MinidCodeInputOld extends ConstraintsValidationMixin(\n  styled(LitElement, styles)\n) {\n  private readonly caretColor = 'var(--color-neutral-surface-tinted)';\n  private readonly caretHighlightColor = 'var(--color-accent-surface-active)';\n  private readonly inputId = `mid-code-input-${nextUniqueId++}`;\n\n  public inputRef: Ref<HTMLInputElement> = createRef();\n\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  @property({ type: Boolean })\n  required = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  inputmode = 'numeric';\n\n  /**\n   * Display custom error message, and force invalid state\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * The length of the code input\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property()\n  fontsize = '11.45cqw';\n\n  @state()\n  renderError = false;\n\n  @state()\n  localErrorNode: Node | null = null;\n\n  constructor() {\n    super();\n    this.addEventListener('invalid', (e) => {\n      this.renderError = true;\n      if (this.localErrorNode) {\n        e.preventDefault();\n        this.localErrorNode.textContent = this.validationMessage || 'Error';\n      }\n    });\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._whenSettled();\n  }\n\n  async _whenSettled() {\n    await this.updateComplete;\n    this.inputRef.value?.addEventListener(\n      'animationstart',\n      this.autoFillEventHandler.bind(this)\n    );\n    this.calcInputStyle();\n  }\n\n  override disconnectedCallback() {\n    webOtpApiClose();\n    this.inputRef.value?.removeEventListener(\n      'animationstart',\n      this.autoFillEventHandler.bind(this)\n    );\n  }\n\n  private calcInputStyle() {\n    const inputStyle = this.inputRef.value?.style;\n\n    inputStyle?.setProperty('--otc-length', this.length.toString());\n\n    let gradientStyle = 'linear-gradient(90deg, ';\n    for (let i = 0; i < this.length; i++) {\n      gradientStyle += `var(--char-${i + 1}-color) ${i ? i * 3 + 'ch' : '0'} ${i * 3 + 2.5}ch, transparent ${i * 3 + 2.5}ch ${i * 3 + 3}ch${i + 1 < this.length ? ', ' : ''}`;\n    }\n    gradientStyle += `) no-repeat 0 0 / ${this.length * 3}ch 100%`;\n    inputStyle?.setProperty('--otc-background', gradientStyle);\n\n    const gradientErrorStyle = `linear-gradient(90deg, var(--color-danger-surface-active) calc(${this.length}ch / 2), transparent 0) 0 0 / 3ch 100%`;\n    inputStyle?.setProperty('--otc-error-background', gradientErrorStyle);\n\n    inputStyle?.setProperty('--otc-width', this.fontsize);\n  }\n\n  private autoFillEventHandler(e: AnimationEvent) {\n    e.animationName === 'onAutoFillStart' &&\n      (this.value = (this.inputRef.value as HTMLInputElement).value);\n  }\n\n  get selectionEnd() {\n    return this.inputRef.value?.selectionEnd;\n  }\n\n  private handleFocusOut() {\n    for (let i = 0; i < this.length; i++) {\n      this.inputRef.value?.style.setProperty(\n        `--char-${i + 1}-color`,\n        this.caretColor\n      );\n    }\n  }\n\n  private handleFocusIn = () => {\n    const currentChar = this.value.length + 1;\n    this.inputRef.value?.style.setProperty(\n      `--char-${currentChar}-color`,\n      this.caretHighlightColor\n    );\n  };\n\n  private handleClick() {\n    this.value = this.value.substring(0, this.selectionEnd || 0);\n\n    this.renderError = false;\n    this.setCustomValidity('');\n    if (this.localErrorNode) {\n      this.localErrorNode.textContent = '';\n    }\n\n    this.setFormValue(this.value);\n    this.setValidity({} as ValidityState);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.internals.form?.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleChange = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n      })\n    );\n  };\n\n  private handleSlotchange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const childNodes = slot.assignedNodes({ flatten: true });\n\n    this.localErrorNode = this.findErrorMessageNode(childNodes);\n    if (this.localErrorNode && this.invalidmessage) {\n      // display if slot set, and error override in effect\n      this.renderError = true;\n      this.localErrorNode.textContent = this.invalidmessage;\n      this.setValidity({} as ValidityState); // cancel built-in visual feedback\n    }\n  }\n\n  private findErrorMessageNode(nodes: Node[]): Node | null {\n    for (const node of nodes) {\n      if (node instanceof Element && node.classList.contains('error-message')) {\n        return node;\n      }\n      const childNodesArray = Array.from(node.childNodes);\n      const foundNode = this.findErrorMessageNode(childNodesArray);\n      if (foundNode) {\n        return foundNode;\n      }\n    }\n    return null;\n  }\n\n  firstUpdated(_changedProperties: PropertyValues) {\n    this.focus();\n    webOtpApiInit(this.renderRoot);\n  }\n\n  updated(_changedProperties: PropertyValues): void {\n    for (let i = 0; i < this.length; i++) {\n      const color =\n        i === this.value.length ? this.caretHighlightColor : this.caretColor;\n      this.inputRef.value?.style.setProperty(`--char-${i + 1}-color`, color);\n    }\n\n    if (_changedProperties.has('_forcedErrorMessage')) {\n      this.setCustomValidity(this.invalidmessage);\n    }\n\n    this.setFormValue(this.value);\n    this.setValidity(\n      this.inputRef.value!.validity,\n      this.inputRef.value!.validationMessage,\n      this.inputRef!.value\n    );\n  }\n\n  focus(options?: FocusOptions) {\n    const notMobile = !window.matchMedia('only screen and (max-width: 768px)')\n      .matches;\n    notMobile && this.inputRef.value?.focus(options);\n  }\n\n  setCustomValidity(error: string) {\n    this.inputRef!.value?.setCustomValidity(error);\n  }\n\n  override render() {\n    return html`\n      <label\n        class=\"${classMap({\n          'sr-only': this.hidelabel,\n          'mb-2': !!this.label,\n        })} font-medium\"\n        for=\"${this.inputId}\"\n        >${this.label}\n      </label>\n      <input\n        ${ref(this.inputRef)}\n        id=${this.inputId}\n        .value=\"${live(this.value)}\"\n        class=\"${classMap({\n          error: this.invalidmessage,\n        })}\"\n        autocomplete=\"${'one-time-code' as any}\"\n        inputmode=\"${this.inputmode}\"\n        @input=\"${this.handleChange}\"\n        @change=\"${this.handleChange}\"\n        @focusout=\"${this.handleFocusOut}\"\n        @focusin=\"${this.handleFocusIn}\"\n        @keydown=\"${this.handleKeydown}\"\n        @click=\"${this.handleClick}\"\n        minlength=\"${this.length}\"\n        maxlength=\"${this.length}\"\n        ?disabled=\"${this.disabled}\"\n        ?required=\"${this.required}\"\n      />\n      <slot name=\"error-message\" @slotchange=${this.handleSlotchange}>\n        <div\n          class=\"text-danger-subtle mt-2 flex gap-1\"\n          aria-live=\"polite\"\n          ?hidden=${!this.invalidmessage}\n        >\n          <mid-icon\n            name=\"xmark-octagon-fill\"\n            class=\"mt-1 min-h-5 min-w-5\"\n          ></mid-icon>\n          ${this.invalidmessage}\n        </div>\n      </slot>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"code-input-old.js","sources":["../../src/components/code-input-old.component.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { webOtpApiClose, webOtpApiInit } from '../utilities/web-otp-api';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { ConstraintsValidationMixin } from '../mixins/form-controller.mixin';\nimport './icon/icon.component';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input-old': MinidCodeInputOld;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      container: otc / inline-size;\n      text-align: left;\n      --otc-background: white;\n      --otc-error-background: white;\n      --otc-length: 5;\n      --otc-width: 11.45cqw;\n    }\n\n    input {\n      all: unset;\n      background: var(--otc-background);\n      caret-color: transparent;\n      clip-path: inset(0% 1ch 0% 0%);\n      font-family: ui-monospace, monospace;\n      font-size: var(--otc-width);\n      inline-size: calc(var(--otc-length) * 3ch);\n      letter-spacing: 2ch;\n      padding-block: 0.25ch;\n      padding-inline-start: calc(0.5ch * 1.5);\n      flex-grow: 1;\n\n      &:focus-visible:focus {\n        outline-style: none;\n      }\n\n      &:-webkit-autofill {\n        animation-name: onAutoFillStart;\n      }\n    }\n\n    @keyframes onAutoFillStart {\n      from {\n      }\n      to {\n      }\n    }\n\n    input.error {\n      background: var(--otc-error-background);\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n@customElement('mid-code-input-old')\nexport class MinidCodeInputOld extends ConstraintsValidationMixin(\n  styled(LitElement, styles)\n) {\n  private readonly caretColor = 'var(--color-neutral-surface-tinted)';\n  private readonly caretHighlightColor = 'var(--color-accent-surface-active)';\n  private readonly inputId = `mid-code-input-${nextUniqueId++}`;\n\n  public inputRef: Ref<HTMLInputElement> = createRef();\n\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  @property({ type: Boolean })\n  required = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  inputmode = 'numeric';\n\n  /**\n   * Display custom error message, and force invalid state\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * The length of the code input\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property()\n  fontsize = '11.45cqw';\n\n  @state()\n  renderError = false;\n\n  @state()\n  localErrorNode: Node | null = null;\n\n  constructor() {\n    super();\n    this.addEventListener('invalid', (e) => {\n      this.renderError = true;\n      if (this.localErrorNode) {\n        e.preventDefault();\n        this.localErrorNode.textContent = this.validationMessage || 'Error';\n      }\n    });\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._whenSettled();\n  }\n\n  async _whenSettled() {\n    await this.updateComplete;\n    this.inputRef.value?.addEventListener(\n      'animationstart',\n      this.autoFillEventHandler.bind(this)\n    );\n    this.calcInputStyle();\n  }\n\n  override disconnectedCallback() {\n    webOtpApiClose();\n    this.inputRef.value?.removeEventListener(\n      'animationstart',\n      this.autoFillEventHandler.bind(this)\n    );\n  }\n\n  private calcInputStyle() {\n    const inputStyle = this.inputRef.value?.style;\n\n    inputStyle?.setProperty('--otc-length', this.length.toString());\n\n    let gradientStyle = 'linear-gradient(90deg, ';\n    for (let i = 0; i < this.length; i++) {\n      gradientStyle += `var(--char-${i + 1}-color) ${i ? i * 3 + 'ch' : '0'} ${i * 3 + 2.5}ch, transparent ${i * 3 + 2.5}ch ${i * 3 + 3}ch${i + 1 < this.length ? ', ' : ''}`;\n    }\n    gradientStyle += `) no-repeat 0 0 / ${this.length * 3}ch 100%`;\n    inputStyle?.setProperty('--otc-background', gradientStyle);\n\n    const gradientErrorStyle = `linear-gradient(90deg, var(--color-danger-surface-active) calc(${this.length}ch / 2), transparent 0) 0 0 / 3ch 100%`;\n    inputStyle?.setProperty('--otc-error-background', gradientErrorStyle);\n\n    inputStyle?.setProperty('--otc-width', this.fontsize);\n  }\n\n  private autoFillEventHandler(e: AnimationEvent) {\n    e.animationName === 'onAutoFillStart' &&\n      (this.value = (this.inputRef.value as HTMLInputElement).value);\n  }\n\n  get selectionEnd() {\n    return this.inputRef.value?.selectionEnd;\n  }\n\n  private handleFocusOut() {\n    for (let i = 0; i < this.length; i++) {\n      this.inputRef.value?.style.setProperty(\n        `--char-${i + 1}-color`,\n        this.caretColor\n      );\n    }\n  }\n\n  private handleFocusIn = () => {\n    const currentChar = this.value.length + 1;\n    this.inputRef.value?.style.setProperty(\n      `--char-${currentChar}-color`,\n      this.caretHighlightColor\n    );\n  };\n\n  private handleClick() {\n    this.value = this.value.substring(0, this.selectionEnd || 0);\n\n    this.renderError = false;\n    this.setCustomValidity('');\n    if (this.localErrorNode) {\n      this.localErrorNode.textContent = '';\n    }\n\n    this.setFormValue(this.value);\n    this.setValidity({} as ValidityState);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.internals.form?.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleChange = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n      })\n    );\n  };\n\n  private handleSlotchange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const childNodes = slot.assignedNodes({ flatten: true });\n\n    this.localErrorNode = this.findErrorMessageNode(childNodes);\n    if (this.localErrorNode && this.invalidmessage) {\n      // display if slot set, and error override in effect\n      this.renderError = true;\n      this.localErrorNode.textContent = this.invalidmessage;\n      this.setValidity({} as ValidityState); // cancel built-in visual feedback\n    }\n  }\n\n  private findErrorMessageNode(nodes: Node[]): Node | null {\n    for (const node of nodes) {\n      if (node instanceof Element && node.classList.contains('error-message')) {\n        return node;\n      }\n      const childNodesArray = Array.from(node.childNodes);\n      const foundNode = this.findErrorMessageNode(childNodesArray);\n      if (foundNode) {\n        return foundNode;\n      }\n    }\n    return null;\n  }\n\n  firstUpdated(_changedProperties: PropertyValues) {\n    this.focus();\n    webOtpApiInit(this.renderRoot);\n  }\n\n  updated(_changedProperties: PropertyValues): void {\n    for (let i = 0; i < this.length; i++) {\n      const color =\n        i === this.value.length ? this.caretHighlightColor : this.caretColor;\n      this.inputRef.value?.style.setProperty(`--char-${i + 1}-color`, color);\n    }\n\n    if (_changedProperties.has('_forcedErrorMessage')) {\n      this.setCustomValidity(this.invalidmessage);\n    }\n\n    this.setFormValue(this.value);\n    this.setValidity(\n      this.inputRef.value!.validity,\n      this.inputRef.value!.validationMessage,\n      this.inputRef!.value\n    );\n  }\n\n  focus(options?: FocusOptions) {\n    const notMobile = !window.matchMedia('only screen and (max-width: 768px)')\n      .matches;\n    notMobile && this.inputRef.value?.focus(options);\n  }\n\n  setCustomValidity(error: string) {\n    this.inputRef!.value?.setCustomValidity(error);\n  }\n\n  override render() {\n    return html`\n      <label\n        class=\"${classMap({\n          'sr-only': this.hidelabel,\n          'mb-2': !!this.label,\n        })} font-medium\"\n        for=\"${this.inputId}\"\n        >${this.label}\n      </label>\n      <input\n        ${ref(this.inputRef)}\n        id=${this.inputId}\n        .value=\"${live(this.value)}\"\n        class=\"${classMap({\n          error: this.invalidmessage,\n        })}\"\n        autocomplete=\"${'one-time-code' as any}\"\n        inputmode=\"${this.inputmode}\"\n        @input=\"${this.handleChange}\"\n        @change=\"${this.handleChange}\"\n        @focusout=\"${this.handleFocusOut}\"\n        @focusin=\"${this.handleFocusIn}\"\n        @keydown=\"${this.handleKeydown}\"\n        @click=\"${this.handleClick}\"\n        minlength=\"${this.length}\"\n        maxlength=\"${this.length}\"\n        ?disabled=\"${this.disabled}\"\n        ?required=\"${this.required}\"\n      />\n      <slot name=\"error-message\" @slotchange=${this.handleSlotchange}>\n        <div\n          class=\"text-danger-subtle mt-2 flex gap-1\"\n          aria-live=\"polite\"\n          ?hidden=${!this.invalidmessage}\n        >\n          <mid-icon\n            name=\"xmark-octagon-fill\"\n            class=\"mt-1 min-h-5 min-w-5\"\n          ></mid-icon>\n          ${this.invalidmessage}\n        </div>\n      </slot>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, queryAll, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { HasSlotController } from '../internal/slot.ts';\nimport './icon/icon.component.ts';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators.ts';\nimport { webOtpApiInit } from '../utilities/web-otp-api.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input': MinidCodeInput;\n  }\n}\n\nlet nextUniqueId = 0;\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n\n    /* Hide increment/decrement buttons on inputs */\n    input[type='number']::-webkit-outer-spin-button,\n    input[type='number']::-webkit-inner-spin-button,\n    input[type='number'] {\n      -webkit-appearance: none;\n      margin: 0;\n      -moz-appearance: textfield !important;\n    }\n  `,\n];\n\n/**\n *\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n *\n * @slot label - The input's label if you need to use HTML. Alternatively, you can use the `label` attribute.\n *\n * @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.\n *\n */\n@customElement('mid-code-input')\nexport class MinidCodeInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly hasSlotControler = new HasSlotController(this, 'label');\n  #skipValueVisualUpdate = false;\n  private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n\n  @queryAll('input')\n  private inputElements!: NodeListOf<HTMLInputElement>;\n\n  @property({ reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  @property()\n  type: 'number' | 'text' = 'text';\n\n  /**\n   * For displaying appropriate virtual keyboard\n   */\n  @property()\n  inputmode: 'numeric' | 'text' = 'text';\n\n  /**\n   * Adjusts the font-size of the code inputs\n   */\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /**\n   * Number of input characters or digits\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Focuses the first input element on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  @state()\n  private internalValues = Array<string>(this.length).fill('');\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  get validationTarget() {\n    return this.inputElements?.length ? this.inputElements[0] : null;\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    webOtpApiInit(this.renderRoot);\n  }\n\n  private handleFocus(index: number) {\n    return () => {\n      this.inputElements[index].setAttribute('placeholder', '');\n    };\n  }\n\n  private handleBlur(index: number) {\n    return () => {\n      this.inputElements[index].setAttribute('placeholder', '○');\n    };\n  }\n\n  private handleKeydown(index: number) {\n    return (event: KeyboardEvent) => {\n      this.internalValues[index] = (event.target as HTMLInputElement).value;\n      this.value = this.internalValues.join('');\n      const input = event.target as HTMLInputElement;\n      const hasModifier =\n        event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n      if (event.key === 'Backspace') {\n        if (input.value === '' && index > 0) {\n          // If current input is empty, move to previous and clear it\n          this.inputElements[index - 1].focus();\n          this.internalValues[index - 1] = '';\n          this.updateValueAndEmit(true);\n        } else if (input.value !== '') {\n          // If current input has a value, clear it\n          input.value = '';\n          this.internalValues[index] = '';\n          this.updateValueAndEmit(true);\n        }\n      } else if (event.key === 'ArrowLeft') {\n        if (index > 0) {\n          this.inputElements[index - 1].focus();\n        }\n      } else if (event.key === 'ArrowRight') {\n        if (index < this.length - 1) {\n          this.inputElements[index + 1].focus();\n        }\n      } else if (event.key === 'Delete') {\n        // Clear current field without moving\n        input.value = '';\n        this.internalValues[index] = '';\n        this.updateValueAndEmit(true);\n      } else if (event.key === 'Enter' && !hasModifier) {\n        // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n        // submitting to allow users to cancel the keydown event if they need to\n        setTimeout(() => {\n          //\n          // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n          // to check for this is to look at event.isComposing, which will be true when the IME is open.\n          if (!event.defaultPrevented && !event.isComposing) {\n            this.form?.requestSubmit();\n          }\n        });\n      }\n    };\n  }\n\n  private handleInput(index: number) {\n    return (event: InputEvent) => {\n      const input = event.target as HTMLInputElement;\n      let inputValue = input.value;\n\n      // Only allow single digit input\n      if (inputValue.length > 1) {\n        inputValue = inputValue.charAt(0);\n        input.value = inputValue; // Correct the input value\n      }\n\n      this.internalValues[index] = inputValue;\n      this.updateValueAndEmit(true);\n\n      // Auto-focus next input if a digit was entered and it's not the last one\n      if (inputValue !== '' && index < this.length - 1) {\n        this.inputElements[index + 1].focus();\n      }\n\n      this.dispatchEvent(\n        new Event('mid-input', { bubbles: true, composed: true })\n      );\n    };\n  }\n\n  private handlePaste(index: number) {\n    return (event: ClipboardEvent) => {\n      event.preventDefault(); // Prevent default paste behavior\n      const pasteData = event.clipboardData?.getData('text').trim();\n\n      if (pasteData) {\n        const pasteChars = pasteData.split('');\n        for (let i = 0; i < this.length; i++) {\n          if (index + i < this.length && pasteChars[i]) {\n            this.internalValues[index + i] = pasteChars[i];\n            // Update the actual input element's value directly as well\n            // if (this.inputElements[index + i]) {\n            //   this.inputElements[index + i].value = pasteChars[i];\n            // }\n          }\n        }\n        this.updateValueAndEmit();\n\n        // Focus the last filled input or the last input if all are filled\n        const lastFilledIndex = Math.min(\n          index + pasteChars.length - 1,\n          this.length - 1\n        );\n        this.inputElements[lastFilledIndex]?.focus();\n      }\n    };\n  }\n\n  private updateValueAndEmit(skipValueUpdate = false) {\n    this.#skipValueVisualUpdate = skipValueUpdate;\n    this.value = this.internalValues.join('');\n    this.dispatchEvent(\n      new Event('mid-change', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (\n      this.value.length === this.length &&\n      this.internalValues.every((digit) => digit !== '')\n    ) {\n      this.dispatchEvent(\n        new Event('mid-complete', {\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  private valueVisualUpdate(value: string) {\n    const chars = value.split('');\n    this.internalValues.forEach((_, index) => {\n      this.internalValues[index] = chars[index];\n    });\n  }\n\n  @watch('length')\n  handleLengthChange() {\n    this.internalValues = Array(this.length).fill('');\n    this.valueVisualUpdate(this.value);\n  }\n\n  @watch('value')\n  handleValueChange() {\n    this.setValue(this.value);\n\n    if (this.#skipValueVisualUpdate) {\n      this.#skipValueVisualUpdate = false;\n      return;\n    }\n\n    this.valueVisualUpdate(this.value);\n  }\n\n  override render() {\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    return html`\n      <label\n        id=\"${this.labelId}\"\n        class=\"${classMap({\n          'sr-only': this.hidelabel || !hasLabel,\n          'opacity-disabled': this.disabled,\n        })} mb-2 block items-center gap-1 font-medium\"\n      >\n        <slot name=\"label\"> ${this.label} </slot>\n      </label>\n      <div\n        part=\"input-container\"\n        class=\"${classMap({\n          'text-heading-sm': this.size === 'sm',\n          'text-heading-md': this.size === 'md',\n          'text-heading-lg': this.size === 'lg',\n        })} inline-flex gap-2\"\n      >\n        ${this.internalValues.map((value, index) => {\n          return html`\n            <input\n              .value=\"${live(value || '')}\"\n              id=\"mid-code-input-${index}\"\n              class=\"${classMap({\n                border: !this.invalidmessage,\n                'border-2': this.invalidmessage,\n                'border-neutral': !this.invalidmessage,\n                'border-danger': this.invalidmessage,\n                'bg-neutral': !this.invalidmessage,\n                'bg-danger-tinted': this.invalidmessage,\n                'placeholder:text-neutral-surface-active': !this.invalidmessage,\n                'placeholder:text-danger-surface-active': this.invalidmessage,\n              })} focus:focus-ring-sm disabled:opacity-disabled size-9 rounded-md text-center font-mono disabled:cursor-not-allowed\"\n              type=\"${this.type}\"\n              placeholder=\"○\"\n              aria-labelledby=\"${this.labelId}\"\n              size=\"1\"\n              ?autofocus=\"${!index && this.autofocus}\"\n              ?disabled=\"${this.disabled}\"\n              inputmode=\"${this.inputmode}\"\n              @keydown=\"${this.handleKeydown(index)}\"\n              @input=\"${this.handleInput(index)}\"\n              @paste=\"${this.handlePaste(index)}\"\n              @focus=\"${this.handleFocus(index)}\"\n              @blur=\"${this.handleBlur(index)}\"\n            />\n          `;\n        })}\n      </div>\n      <div\n        class=\"text-danger-subtle mt-2 flex gap-1\"\n        aria-live=\"polite\"\n        ?hidden=${!this.invalidmessage}\n      >\n        <mid-icon\n          name=\"xmark-octagon-fill\"\n          class=\"mt-1 min-h-5 min-w-5\"\n        ></mid-icon>\n        ${this.invalidmessage}\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, queryAll, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { HasSlotController } from '../internal/slot.ts';\nimport './icon/icon.component.ts';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators.ts';\nimport { webOtpApiInit } from '../utilities/web-otp-api.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input': MinidCodeInput;\n  }\n}\n\nlet nextUniqueId = 0;\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n\n    /* Hide increment/decrement buttons on inputs */\n    input[type='number']::-webkit-outer-spin-button,\n    input[type='number']::-webkit-inner-spin-button,\n    input[type='number'] {\n      -webkit-appearance: none;\n      margin: 0;\n      -moz-appearance: textfield !important;\n    }\n  `,\n];\n\n/**\n *\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n *\n * @slot label - The input's label if you need to use HTML. Alternatively, you can use the `label` attribute.\n *\n * @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.\n *\n */\n@customElement('mid-code-input')\nexport class MinidCodeInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly hasSlotControler = new HasSlotController(this, 'label');\n  #skipValueVisualUpdate = false;\n  private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n\n  @queryAll('input')\n  private inputElements!: NodeListOf<HTMLInputElement>;\n\n  @property({ reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  @property()\n  type: 'number' | 'text' = 'text';\n\n  /**\n   * For displaying appropriate virtual keyboard\n   */\n  @property()\n  inputmode: 'numeric' | 'text' = 'text';\n\n  /**\n   * Adjusts the font-size of the code inputs\n   */\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /**\n   * Number of input characters or digits\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Focuses the first input element on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  @state()\n  private internalValues = Array<string>(this.length).fill('');\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  get validationTarget() {\n    return this.inputElements?.length ? this.inputElements[0] : null;\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    webOtpApiInit(this.renderRoot);\n  }\n\n  private handleFocus(index: number) {\n    return () => {\n      this.inputElements[index].setAttribute('placeholder', '');\n    };\n  }\n\n  private handleBlur(index: number) {\n    return () => {\n      this.inputElements[index].setAttribute('placeholder', '○');\n    };\n  }\n\n  private handleKeydown(index: number) {\n    return (event: KeyboardEvent) => {\n      this.internalValues[index] = (event.target as HTMLInputElement).value;\n      this.value = this.internalValues.join('');\n      const input = event.target as HTMLInputElement;\n      const hasModifier =\n        event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n      if (event.key === 'Backspace') {\n        if (input.value === '' && index > 0) {\n          // If current input is empty, move to previous and clear it\n          this.inputElements[index - 1].focus();\n          this.internalValues[index - 1] = '';\n          this.updateValueAndEmit(true);\n        } else if (input.value !== '') {\n          // If current input has a value, clear it\n          input.value = '';\n          this.internalValues[index] = '';\n          this.updateValueAndEmit(true);\n        }\n      } else if (event.key === 'ArrowLeft') {\n        if (index > 0) {\n          this.inputElements[index - 1].focus();\n        }\n      } else if (event.key === 'ArrowRight') {\n        if (index < this.length - 1) {\n          this.inputElements[index + 1].focus();\n        }\n      } else if (event.key === 'Delete') {\n        // Clear current field without moving\n        input.value = '';\n        this.internalValues[index] = '';\n        this.updateValueAndEmit(true);\n      } else if (event.key === 'Enter' && !hasModifier) {\n        // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n        // submitting to allow users to cancel the keydown event if they need to\n        setTimeout(() => {\n          //\n          // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n          // to check for this is to look at event.isComposing, which will be true when the IME is open.\n          if (!event.defaultPrevented && !event.isComposing) {\n            this.form?.requestSubmit();\n          }\n        });\n      }\n    };\n  }\n\n  private handleInput(index: number) {\n    return (event: InputEvent) => {\n      const input = event.target as HTMLInputElement;\n      let inputValue = input.value;\n\n      // Only allow single digit input\n      if (inputValue.length > 1) {\n        inputValue = inputValue.charAt(0);\n        input.value = inputValue; // Correct the input value\n      }\n\n      this.internalValues[index] = inputValue;\n      this.updateValueAndEmit(true);\n\n      // Auto-focus next input if a digit was entered and it's not the last one\n      if (inputValue !== '' && index < this.length - 1) {\n        this.inputElements[index + 1].focus();\n      }\n\n      this.dispatchEvent(\n        new Event('mid-input', { bubbles: true, composed: true })\n      );\n    };\n  }\n\n  private handlePaste(index: number) {\n    return (event: ClipboardEvent) => {\n      event.preventDefault(); // Prevent default paste behavior\n      const pasteData = event.clipboardData?.getData('text').trim();\n\n      if (pasteData) {\n        const pasteChars = pasteData.split('');\n        for (let i = 0; i < this.length; i++) {\n          if (index + i < this.length && pasteChars[i]) {\n            this.internalValues[index + i] = pasteChars[i];\n            // Update the actual input element's value directly as well\n            // if (this.inputElements[index + i]) {\n            //   this.inputElements[index + i].value = pasteChars[i];\n            // }\n          }\n        }\n        this.updateValueAndEmit();\n\n        // Focus the last filled input or the last input if all are filled\n        const lastFilledIndex = Math.min(\n          index + pasteChars.length - 1,\n          this.length - 1\n        );\n        this.inputElements[lastFilledIndex]?.focus();\n      }\n    };\n  }\n\n  private updateValueAndEmit(skipValueUpdate = false) {\n    this.#skipValueVisualUpdate = skipValueUpdate;\n    this.value = this.internalValues.join('');\n    this.dispatchEvent(\n      new Event('mid-change', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (\n      this.value.length === this.length &&\n      this.internalValues.every((digit) => digit !== '')\n    ) {\n      this.dispatchEvent(\n        new Event('mid-complete', {\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  private valueVisualUpdate(value: string) {\n    const chars = value.split('');\n    this.internalValues.forEach((_, index) => {\n      this.internalValues[index] = chars[index];\n    });\n  }\n\n  @watch('length')\n  handleLengthChange() {\n    this.internalValues = Array(this.length).fill('');\n    this.valueVisualUpdate(this.value);\n  }\n\n  @watch('value')\n  handleValueChange() {\n    this.setValue(this.value);\n\n    if (this.#skipValueVisualUpdate) {\n      this.#skipValueVisualUpdate = false;\n      return;\n    }\n\n    this.valueVisualUpdate(this.value);\n  }\n\n  override render() {\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    return html`\n      <label\n        id=\"${this.labelId}\"\n        class=\"${classMap({\n          'sr-only': this.hidelabel || !hasLabel,\n          'opacity-disabled': this.disabled,\n        })} mb-2 block items-center gap-1 font-medium\"\n      >\n        <slot name=\"label\"> ${this.label} </slot>\n      </label>\n      <div\n        part=\"input-container\"\n        class=\"${classMap({\n          'text-heading-sm': this.size === 'sm',\n          'text-heading-md': this.size === 'md',\n          'text-heading-lg': this.size === 'lg',\n        })} inline-flex gap-2\"\n      >\n        ${this.internalValues.map((value, index) => {\n          return html`\n            <input\n              .value=\"${live(value || '')}\"\n              id=\"mid-code-input-${index}\"\n              class=\"${classMap({\n                border: !this.invalidmessage,\n                'border-2': this.invalidmessage,\n                'border-neutral': !this.invalidmessage,\n                'border-danger': this.invalidmessage,\n                'bg-neutral': !this.invalidmessage,\n                'bg-danger-tinted': this.invalidmessage,\n                'placeholder:text-neutral-surface-active': !this.invalidmessage,\n                'placeholder:text-danger-surface-active': this.invalidmessage,\n              })} focus:focus-ring-sm disabled:opacity-disabled size-9 rounded-md text-center font-mono disabled:cursor-not-allowed\"\n              type=\"${this.type}\"\n              placeholder=\"○\"\n              aria-labelledby=\"${this.labelId}\"\n              size=\"1\"\n              ?autofocus=\"${!index && this.autofocus}\"\n              ?disabled=\"${this.disabled}\"\n              inputmode=\"${this.inputmode}\"\n              @keydown=\"${this.handleKeydown(index)}\"\n              @input=\"${this.handleInput(index)}\"\n              @paste=\"${this.handlePaste(index)}\"\n              @focus=\"${this.handleFocus(index)}\"\n              @blur=\"${this.handleBlur(index)}\"\n            />\n          `;\n        })}\n      </div>\n      <div\n        class=\"text-danger-subtle mt-2 flex gap-1\"\n        aria-live=\"polite\"\n        ?hidden=${!this.invalidmessage}\n      >\n        <mid-icon\n          name=\"xmark-octagon-fill\"\n          class=\"mt-1 min-h-5 min-w-5\"\n        ></mid-icon>\n        ${this.invalidmessage}\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","sources":["../../src/components/combobox.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport './popup.component';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { MinidPopup } from './popup.component';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { getTabbableBoundary } from '../internal/tabbable';\nimport { MinidButton } from './button.component';\nimport { MinidMenu } from '../components/menu.component';\nimport { MinidPhoneInput } from '../components/phone-input.component';\nimport { MinidTextfield } from '../components/textfield.component';\nimport { MinidMenuItem } from '../components/menu-item.component.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-combobox': MinidCombobox;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: 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-combobox')\nexport class MinidCombobox extends styled(LitElement, styles) {\n  private closeWatcher?: CloseWatcher;\n  private triggerElement: 'mid-textfield' | 'mid-phone-input' = 'mid-textfield';\n\n  @query('#combobox')\n  private popup!: MinidPopup;\n\n  @query('.combobox__trigger')\n  private trigger!: HTMLSlotElement;\n\n  @query('.combobox__panel')\n  private panel!: HTMLSlotElement;\n\n  @queryAssignedElements({ slot: 'trigger' })\n  private triggerElements!: (\n    | MinidTextfield\n    | MinidPhoneInput\n    | HTMLInputElement\n  )[];\n\n  /**\n   * By default, the combobox is closed when an item is selected. This attribute will keep it open instead. Useful for\n   * comboboxs that allow for multiple interactions.\n   */\n  @property({ type: Boolean, reflect: true })\n  stayopenonselect = false;\n\n  /**\n   * Indicates wether the combobox panel is open. You can use this or the show/hide methods.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Distance between trigger and combobox panel\n   */\n  @property({ type: Number })\n  distance = 4;\n\n  /**\n   * Nudge the combobox panel position. Accepts a negative or positive number.\n   */\n  @property({ type: Number })\n  skidding = 0;\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  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * The combobox will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\n   * components that use a combobox internally.\n   */\n  @property({ attribute: false })\n  private containingElement?: HTMLElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (!this.containingElement) {\n      this.containingElement = this;\n    }\n  }\n\n  firstUpdated() {\n    const input = this.triggerElements[0];\n    if (input.tagName.toLowerCase() === 'mid-phone-input') {\n      this.triggerElement = 'mid-phone-input';\n    } else if (input.tagName.toLowerCase() === 'mid-textfield') {\n      this.triggerElement = 'mid-textfield';\n    }\n\n    this.panel.hidden = !this.open;\n\n    const menu = this.getMenu();\n    if (menu) {\n      menu.variant = 'combobox';\n    }\n\n    // If the combobox panel 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\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 handleCountryClick = () => {\n    const menu = this.getMenu();\n\n    this.open ? this.hide() : this.show();\n    if (this.open && menu && menu.searchable) {\n      // Delay focus slightly to win the focus battle\n      setTimeout(() => {\n        menu.clearFilter();\n        menu.focusSearchField();\n      }, 1);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Close when escape is pressed inside an open combobox. 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 combobox 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 combobox 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    if (this.containingElement && !path.includes(this.containingElement)) {\n      this.hide();\n    }\n  };\n\n  private handlePanelSelect = (event: CustomEvent) => {\n    if (this.triggerElement !== 'mid-phone-input') {\n      return;\n    }\n\n    // Transfer selected country from panel to input field\n    const input = this.triggerElements[0] as MinidPhoneInput;\n    const country = event.detail.item.value;\n    input.country = country;\n\n    const target = event.target as HTMLElement;\n\n    // Hide the combobox 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.triggerElement === 'mid-phone-input') {\n      return;\n    }\n\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      if (this.triggerElement === 'mid-textfield') {\n        this.handleTriggerClick();\n      }\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 combobox 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              if (this.triggerElement === 'mid-textfield') {\n                firstMenuItem.focus();\n              } else {\n                menu.clearFilter();\n                menu.focusSearchField();\n              }\n            }\n\n            if (event.key === 'ArrowUp' || event.key === 'End') {\n              menu.setCurrentItem(lastMenuItem);\n              if (this.triggerElement === 'mid-textfield') {\n                lastMenuItem.focus();\n              } else {\n                menu.clearFilter();\n                menu.focusSearchField();\n              }\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  //\n  // Slotted triggers can be arbitrary content, but we need to link them to the combobox panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  // a child of the slotted element, or an element in the slotted element's shadow root.\n  //\n  // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.\n  //\n  // To determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\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\n    if (accessibleTrigger) {\n      switch (accessibleTrigger.tagName.toLowerCase()) {\n        // buttons have to update the internal button so it's announced correctly by screen readers\n        case 'mid-button':\n          target = (accessibleTrigger as MinidButton).button;\n          break;\n\n        default:\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 combobox 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 combobox 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 combobox 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    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    }\n\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n  }\n\n  removeOpenListeners() {\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(\n        new Event('mid-show', { bubbles: true, composed: true })\n      );\n      this.addOpenListeners();\n\n      await stopAnimations(this);\n      this.panel.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'combobox.show');\n      await animateTo(this.popup.popup, keyframes, options);\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { bubbles: true, composed: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n      this.removeOpenListeners();\n      await stopAnimations(this);\n      const { keyframes, options } = getAnimation(this, 'combobox.hide');\n      await animateTo(this.popup.popup, keyframes, options);\n      this.panel.hidden = true;\n      this.popup.active = false;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { bubbles: true, composed: true })\n      );\n    }\n  }\n\n  override render() {\n    return html`\n      <mid-popup\n        id=\"combobox\"\n        distance=${this.distance}\n        placement=\"bottom-end\"\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=\"width\"\n        ?active=${this.open}\n      >\n        <slot\n          class=\"combobox__trigger\"\n          slot=\"anchor\"\n          name=\"trigger\"\n          @click=${this.handleTriggerClick}\n          @keydown=${this.handleTriggerKeyDown}\n          @keyup=${this.handleTriggerKeyUp}\n          @slotchange=${this.handleTriggerSlotChange}\n          @mid-country-click=${this.handleCountryClick}\n        ></slot>\n        <div\n          class=\"bg-accent\"\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-labelledby=\"combobox\"\n        >\n          <slot\n            class=\"combobox__panel\"\n            part=\"panel\"\n            @keydown=${this.handleKeyDown}\n            @mid-select=${this.handlePanelSelect}\n          ></slot>\n        </div>\n      </mid-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('combobox.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 100, easing: 'ease' },\n});\n\nsetDefaultAnimation('combobox.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":";;;;;;;;;;;;;;;;;;;AA8BA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAKF;AAQO,IAAM,gBAAN,cAA4B,OAAO,YAAY,MAAM,EAAE;AAAA,EAAvD,cAAA;AAAA,UAAA,GAAA,SAAA;AAEL,SAAQ,iBAAsD;AAuB9D,SAAA,mBAAmB;AAMnB,SAAA,OAAO;AAGP,SAAA,OAA2B;AAM3B,SAAA,WAAW;AAMX,SAAA,WAAW;AAOX,SAAA,QAAQ;AAGR,SAAA,WAAW;AA+DX,SAAQ,qBAAqB,MAAM;AACjC,YAAM,OAAO,KAAK,QAAA;AAElB,WAAK,OAAO,KAAK,KAAA,IAAS,KAAK,KAAA;AAC/B,UAAI,KAAK,QAAQ,QAAQ,KAAK,YAAY;AAExC,mBAAW,MAAM;AACf,eAAK,YAAA;AACL,eAAK,iBAAA;AAAA,QAAiB,GACrB,CAAC;AAAA,MAAA;AAAA,IACN;AAGF,SAAQ,gBAAgB,CAAC,UAAyB;AAGhD,UAAI,KAAK,QAAQ,MAAM,QAAQ,UAAU;AACvC,cAAM,gBAAA;AACN,aAAK,KAAA;AACL,aAAK,eAAA;AAAA,MAAe;AAAA,IACtB;AAGF,SAAQ,wBAAwB,CAAC,UAAyB;AAExD,UAAI,MAAM,QAAQ,YAAY,KAAK,QAAQ,CAAC,KAAK,cAAc;AAC7D,cAAM,gBAAA;AACN,aAAK,eAAA;AACL,aAAK,KAAA;AACL;AAAA,MAAA;AAIF,UAAI,MAAM,QAAQ,OAAO;AACvB,cAAM,eAAe,MAAM,aAAA;AAC3B,cAAM,mBAAmB,aAAa;AAAA,UACpC,CAAC,MACE,EAAkB,SAAS,kBAAkB;AAAA,QAAA;AAIlD,YAAI,KAAK,QAAQ,kBAAkB;AACjC,gBAAM,eAAA;AACN,eAAK,KAAA;AACL,eAAK,eAAA;AACL;AAAA,QAAA;AAOF,mBAAW,MAAM;AACf,cAAI,aAAa,MAAM,CAAC,WAAW,WAAW,KAAK,iBAAiB,GAAG;AACrE,iBAAK,KAAA;AAAA,UAAK;AAAA,QACZ,CACD;AAAA,MAAA;AAAA,IACH;AAGF,SAAQ,0BAA0B,CAAC,UAAsB;AAEvD,YAAM,OAAO,MAAM,aAAA;AACnB,UAAI,KAAK,qBAAqB,CAAC,KAAK,SAAS,KAAK,iBAAiB,GAAG;AACpE,aAAK,KAAA;AAAA,MAAK;AAAA,IACZ;AAGF,SAAQ,oBAAoB,CAAC,UAAuB;AAClD,UAAI,KAAK,mBAAmB,mBAAmB;AAC7C;AAAA,MAAA;AAIF,YAAM,QAAQ,KAAK,gBAAgB,CAAC;AACpC,YAAM,UAAU,MAAM,OAAO,KAAK;AAClC,YAAM,UAAU;AAEhB,YAAM,SAAS,MAAM;AAGrB,UAAI,CAAC,KAAK,oBAAoB,OAAO,QAAQ,YAAA,MAAkB,YAAY;AACzE,aAAK,KAAA;AACL,aAAK,eAAA;AAAA,MAAe;AAAA,IACtB;AAAA,EACF;AAAA,EA3IA,oBAAoB;AAClB,UAAM,kBAAA;AAEN,QAAI,CAAC,KAAK,mBAAmB;AAC3B,WAAK,oBAAoB;AAAA,IAAA;AAAA,EAC3B;AAAA,EAGF,eAAe;AACb,UAAM,QAAQ,KAAK,gBAAgB,CAAC;AACpC,QAAI,MAAM,QAAQ,YAAA,MAAkB,mBAAmB;AACrD,WAAK,iBAAiB;AAAA,IAAA,WACb,MAAM,QAAQ,YAAA,MAAkB,iBAAiB;AAC1D,WAAK,iBAAiB;AAAA,IAAA;AAGxB,SAAK,MAAM,SAAS,CAAC,KAAK;AAE1B,UAAM,OAAO,KAAK,QAAA;AAClB,QAAI,MAAM;AACR,WAAK,UAAU;AAAA,IAAA;AAIjB,QAAI,KAAK,MAAM;AACb,WAAK,iBAAA;AACL,WAAK,MAAM,SAAS;AAAA,IAAA;AAAA,EACtB;AAAA,EAGF,uBAAuB;AACrB,UAAM,qBAAA;AACN,SAAK,oBAAA;AACL,SAAK,KAAA;AAAA,EAAK;AAAA,EAGZ,iBAAiB;AACf,UAAM,UAAU,KAAK,QAAQ,iBAAiB,EAAE,SAAS,MAAM,EAAE,CAAC;AAIlE,QAAI,OAAO,SAAS,UAAU,YAAY;AACxC,cAAQ,MAAA;AAAA,IAAM;AAAA,EAChB;AAAA,EAGF,UAAU;AACR,WAAO,KAAK,MACT,iBAAiB,EAAE,SAAS,KAAA,CAAM,EAClC,KAAK,CAAC,OAAO,GAAG,QAAQ,YAAA,MAAkB,UAAU;AAAA,EAAA;AAAA,EA4FzD,qBAAqB;AACnB,QAAI,KAAK,mBAAmB,mBAAmB;AAC7C;AAAA,IAAA;AAGF,QAAI,KAAK,MAAM;AACb,WAAK,KAAA;AAAA,IAAK,OACL;AACL,WAAK,KAAA;AACL,WAAK,eAAA;AAAA,IAAe;AAAA,EACtB;AAAA,EAGF,MAAM,qBAAqB,OAAsB;AAG/C,QAAI,CAAC,KAAK,OAAO,EAAE,SAAS,MAAM,GAAG,GAAG;AACtC,YAAM,eAAA;AACN,UAAI,KAAK,mBAAmB,iBAAiB;AAC3C,aAAK,mBAAA;AAAA,MAAmB;AAE1B;AAAA,IAAA;AAGF,UAAM,OAAO,KAAK,QAAA;AAElB,QAAI,MAAM;AACR,YAAM,YAAY,KAAK,sBAAA;AACvB,YAAM,gBAAgB,UAAU,CAAC;AACjC,YAAM,eAAe,UAAU,UAAU,SAAS,CAAC;AAKnD,UAAI,CAAC,aAAa,WAAW,QAAQ,KAAK,EAAE,SAAS,MAAM,GAAG,GAAG;AAC/D,cAAM,eAAA;AAGN,YAAI,CAAC,KAAK,MAAM;AACd,eAAK,KAAA;AAGL,gBAAM,KAAK;AAAA,QAAA;AAGb,YAAI,UAAU,SAAS,GAAG;AAExB,eAAK,eAAe,KAAK,MAAM;AAC7B,gBAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,QAAQ;AACrD,mBAAK,eAAe,aAAa;AACjC,kBAAI,KAAK,mBAAmB,iBAAiB;AAC3C,8BAAc,MAAA;AAAA,cAAM,OACf;AACL,qBAAK,YAAA;AACL,qBAAK,iBAAA;AAAA,cAAiB;AAAA,YACxB;AAGF,gBAAI,MAAM,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAClD,mBAAK,eAAe,YAAY;AAChC,kBAAI,KAAK,mBAAmB,iBAAiB;AAC3C,6BAAa,MAAA;AAAA,cAAM,OACd;AACL,qBAAK,YAAA;AACL,qBAAK,iBAAA;AAAA,cAAiB;AAAA,YACxB;AAAA,UACF,CACD;AAAA,QAAA;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAAA,EAGF,mBAAmB,OAAsB;AAEvC,QAAI,MAAM,QAAQ,KAAK;AACrB,YAAM,eAAA;AAAA,IAAe;AAAA,EACvB;AAAA,EAGF,0BAA0B;AACxB,SAAK,wBAAA;AAAA,EAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAa/B,0BAA0B;AACxB,UAAM,mBAAmB,KAAK,QAAQ,iBAAiB;AAAA,MACrD,SAAS;AAAA,IAAA,CACV;AACD,UAAM,oBAAoB,iBAAiB;AAAA,MACzC,CAAC,OAAO,oBAAoB,EAAE,EAAE;AAAA,IAAA;AAElC,QAAI;AAEJ,QAAI,mBAAmB;AACrB,cAAQ,kBAAkB,QAAQ,YAAA,GAAY;AAAA;AAAA,QAE5C,KAAK;AACH,mBAAU,kBAAkC;AAC5C;AAAA,QAEF;AACE,mBAAS;AAAA,MAAA;AAGb,aAAO,aAAa,iBAAiB,MAAM;AAC3C,aAAO,aAAa,iBAAiB,KAAK,OAAO,SAAS,OAAO;AAAA,IAAA;AAAA,EACnE;AAAA;AAAA;AAAA;AAAA,EAMF,MAAM,OAAO;AACX,QAAI,KAAK,MAAM;AACb,aAAO;AAAA,IAAA;AAGT,SAAK,OAAO;AACZ,WAAO,aAAa,MAAM,gBAAgB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAM5C,MAAM,OAAO;AACX,QAAI,CAAC,KAAK,MAAM;AACd,aAAO;AAAA,IAAA;AAGT,SAAK,OAAO;AACZ,WAAO,aAAa,MAAM,gBAAgB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5C,aAAa;AACX,SAAK,MAAM,WAAA;AAAA,EAAW;AAAA,EAGxB,mBAAmB;AACjB,QAAI,kBAAkB,QAAQ;AAC5B,WAAK,cAAc,QAAA;AACnB,WAAK,eAAe,IAAI,aAAA;AACxB,WAAK,aAAa,UAAU,MAAM;AAChC,aAAK,KAAA;AACL,aAAK,eAAA;AAAA,MAAe;AAAA,IACtB;AAGF,aAAS,iBAAiB,WAAW,KAAK,qBAAqB;AAC/D,aAAS,iBAAiB,aAAa,KAAK,uBAAuB;AAAA,EAAA;AAAA,EAGrE,sBAAsB;AACpB,aAAS,oBAAoB,WAAW,KAAK,qBAAqB;AAClE,aAAS,oBAAoB,aAAa,KAAK,uBAAuB;AACtE,SAAK,cAAc,QAAA;AAAA,EAAQ;AAAA,EAI7B,MAAM,mBAAmB;AACvB,QAAI,KAAK,UAAU;AACjB,WAAK,OAAO;AACZ;AAAA,IAAA;AAGF,SAAK,wBAAA;AAEL,QAAI,KAAK,MAAM;AAEb,WAAK;AAAA,QACH,IAAI,MAAM,YAAY,EAAE,SAAS,MAAM,UAAU,MAAM;AAAA,MAAA;AAEzD,WAAK,iBAAA;AAEL,YAAM,eAAe,IAAI;AACzB,WAAK,MAAM,SAAS;AACpB,WAAK,MAAM,SAAS;AACpB,YAAM,EAAE,WAAW,QAAA,IAAY,aAAa,MAAM,eAAe;AACjE,YAAM,UAAU,KAAK,MAAM,OAAO,WAAW,OAAO;AAEpD,WAAK;AAAA,QACH,IAAI,MAAM,kBAAkB,EAAE,SAAS,MAAM,UAAU,MAAM;AAAA,MAAA;AAAA,IAC/D,OACK;AAEL,WAAK;AAAA,QACH,IAAI,MAAM,YAAY,EAAE,SAAS,MAAM,UAAU,MAAM;AAAA,MAAA;AAEzD,WAAK,oBAAA;AACL,YAAM,eAAe,IAAI;AACzB,YAAM,EAAE,WAAW,QAAA,IAAY,aAAa,MAAM,eAAe;AACjE,YAAM,UAAU,KAAK,MAAM,OAAO,WAAW,OAAO;AACpD,WAAK,MAAM,SAAS;AACpB,WAAK,MAAM,SAAS;AAEpB,WAAK;AAAA,QACH,IAAI,MAAM,kBAAkB,EAAE,SAAS,MAAM,UAAU,MAAM;AAAA,MAAA;AAAA,IAC/D;AAAA,EACF;AAAA,EAGO,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA,mBAGQ,KAAK,QAAQ;AAAA;AAAA,mBAEb,KAAK,QAAQ;AAAA,mBACb,KAAK,QAAQ,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMlC,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMR,KAAK,kBAAkB;AAAA,qBACrB,KAAK,oBAAoB;AAAA,mBAC3B,KAAK,kBAAkB;AAAA,wBAClB,KAAK,uBAAuB;AAAA,+BACrB,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA,wBAI9B,KAAK,OAAO,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAM7B,KAAK,aAAa;AAAA,0BACf,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMhD;AAvcU,gBAAA;AAAA,EADP,MAAM,WAAW;AAAA,GAJP,cAKH,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAM,oBAAoB;AAAA,GAPhB,cAQH,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAM,kBAAkB;AAAA,GAVd,cAWH,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADP,sBAAsB,EAAE,MAAM,UAAA,CAAW;AAAA,GAb/B,cAcH,WAAA,mBAAA,CAAA;AAWR,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAxB/B,cAyBX,WAAA,oBAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA9B/B,cA+BX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAjCC,cAkCX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvCf,cAwCX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7Cf,cA8CX,WAAA,YAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GApDhB,cAqDX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAvDhB,cAwDX,WAAA,YAAA,CAAA;AAOQ,gBAAA;AAAA,EADP,SAAS,EAAE,WAAW,MAAA,CAAO;AAAA,GA9DnB,cA+DH,WAAA,qBAAA,CAAA;AA2TF,gBAAA;AAAA,EADL,MAAM,QAAQ,EAAE,sBAAsB,MAAM;AAAA,GAzXlC,cA0XL,WAAA,oBAAA,CAAA;AA1XK,gBAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,aAAA;AA8cb,oBAAoB,iBAAiB;AAAA,EACnC,WAAW;AAAA,IACT,EAAE,SAAS,GAAG,OAAO,IAAA;AAAA,IACrB,EAAE,SAAS,GAAG,OAAO,EAAA;AAAA,EAAE;AAAA,EAEzB,SAAS,EAAE,UAAU,KAAK,QAAQ,OAAA;AACpC,CAAC;AAED,oBAAoB,iBAAiB;AAAA,EACnC,WAAW;AAAA,IACT,EAAE,SAAS,GAAG,OAAO,EAAA;AAAA,IACrB,EAAE,SAAS,GAAG,OAAO,IAAA;AAAA,EAAI;AAAA,EAE3B,SAAS,EAAE,UAAU,KAAK,QAAQ,OAAA;AACpC,CAAC;"}
+{"version":3,"file":"combobox.js","sources":["../../src/components/combobox.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport './popup.component';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { MinidPopup } from './popup.component';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { getTabbableBoundary } from '../internal/tabbable';\nimport { MinidButton } from './button.component';\nimport { MinidMenu } from '../components/menu.component';\nimport { MinidPhoneInput } from '../components/phone-input.component';\nimport { MinidTextfield } from '../components/textfield.component';\nimport { MinidMenuItem } from '../components/menu-item.component.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-combobox': MinidCombobox;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: 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-combobox')\nexport class MinidCombobox extends styled(LitElement, styles) {\n  private closeWatcher?: CloseWatcher;\n  private triggerElement: 'mid-textfield' | 'mid-phone-input' = 'mid-textfield';\n\n  @query('#combobox')\n  private popup!: MinidPopup;\n\n  @query('.combobox__trigger')\n  private trigger!: HTMLSlotElement;\n\n  @query('.combobox__panel')\n  private panel!: HTMLSlotElement;\n\n  @queryAssignedElements({ slot: 'trigger' })\n  private triggerElements!: (\n    | MinidTextfield\n    | MinidPhoneInput\n    | HTMLInputElement\n  )[];\n\n  /**\n   * By default, the combobox is closed when an item is selected. This attribute will keep it open instead. Useful for\n   * comboboxs that allow for multiple interactions.\n   */\n  @property({ type: Boolean, reflect: true })\n  stayopenonselect = false;\n\n  /**\n   * Indicates wether the combobox panel is open. You can use this or the show/hide methods.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Distance between trigger and combobox panel\n   */\n  @property({ type: Number })\n  distance = 4;\n\n  /**\n   * Nudge the combobox panel position. Accepts a negative or positive number.\n   */\n  @property({ type: Number })\n  skidding = 0;\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  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * The combobox will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\n   * components that use a combobox internally.\n   */\n  @property({ attribute: false })\n  private containingElement?: HTMLElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (!this.containingElement) {\n      this.containingElement = this;\n    }\n  }\n\n  firstUpdated() {\n    const input = this.triggerElements[0];\n    if (input.tagName.toLowerCase() === 'mid-phone-input') {\n      this.triggerElement = 'mid-phone-input';\n    } else if (input.tagName.toLowerCase() === 'mid-textfield') {\n      this.triggerElement = 'mid-textfield';\n    }\n\n    this.panel.hidden = !this.open;\n\n    const menu = this.getMenu();\n    if (menu) {\n      menu.variant = 'combobox';\n    }\n\n    // If the combobox panel 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\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 handleCountryClick = () => {\n    const menu = this.getMenu();\n\n    this.open ? this.hide() : this.show();\n    if (this.open && menu && menu.searchable) {\n      // Delay focus slightly to win the focus battle\n      setTimeout(() => {\n        menu.clearFilter();\n        menu.focusSearchField();\n      }, 1);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Close when escape is pressed inside an open combobox. 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 combobox 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 combobox 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    if (this.containingElement && !path.includes(this.containingElement)) {\n      this.hide();\n    }\n  };\n\n  private handlePanelSelect = (event: CustomEvent) => {\n    if (this.triggerElement !== 'mid-phone-input') {\n      return;\n    }\n\n    // Transfer selected country from panel to input field\n    const input = this.triggerElements[0] as MinidPhoneInput;\n    const country = event.detail.item.value;\n    input.country = country;\n\n    const target = event.target as HTMLElement;\n\n    // Hide the combobox 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.triggerElement === 'mid-phone-input') {\n      return;\n    }\n\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      if (this.triggerElement === 'mid-textfield') {\n        this.handleTriggerClick();\n      }\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 combobox 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              if (this.triggerElement === 'mid-textfield') {\n                firstMenuItem.focus();\n              } else {\n                menu.clearFilter();\n                menu.focusSearchField();\n              }\n            }\n\n            if (event.key === 'ArrowUp' || event.key === 'End') {\n              menu.setCurrentItem(lastMenuItem);\n              if (this.triggerElement === 'mid-textfield') {\n                lastMenuItem.focus();\n              } else {\n                menu.clearFilter();\n                menu.focusSearchField();\n              }\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  //\n  // Slotted triggers can be arbitrary content, but we need to link them to the combobox panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  // a child of the slotted element, or an element in the slotted element's shadow root.\n  //\n  // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.\n  //\n  // To determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\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\n    if (accessibleTrigger) {\n      switch (accessibleTrigger.tagName.toLowerCase()) {\n        // buttons have to update the internal button so it's announced correctly by screen readers\n        case 'mid-button':\n          target = (accessibleTrigger as MinidButton).button;\n          break;\n\n        default:\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 combobox 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 combobox 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 combobox 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    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    }\n\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n  }\n\n  removeOpenListeners() {\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(\n        new Event('mid-show', { bubbles: true, composed: true })\n      );\n      this.addOpenListeners();\n\n      await stopAnimations(this);\n      this.panel.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'combobox.show');\n      await animateTo(this.popup.popup, keyframes, options);\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { bubbles: true, composed: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n      this.removeOpenListeners();\n      await stopAnimations(this);\n      const { keyframes, options } = getAnimation(this, 'combobox.hide');\n      await animateTo(this.popup.popup, keyframes, options);\n      this.panel.hidden = true;\n      this.popup.active = false;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { bubbles: true, composed: true })\n      );\n    }\n  }\n\n  override render() {\n    return html`\n      <mid-popup\n        id=\"combobox\"\n        distance=${this.distance}\n        placement=\"bottom-end\"\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=\"width\"\n        ?active=${this.open}\n      >\n        <slot\n          class=\"combobox__trigger\"\n          slot=\"anchor\"\n          name=\"trigger\"\n          @click=${this.handleTriggerClick}\n          @keydown=${this.handleTriggerKeyDown}\n          @keyup=${this.handleTriggerKeyUp}\n          @slotchange=${this.handleTriggerSlotChange}\n          @mid-country-click=${this.handleCountryClick}\n        ></slot>\n        <div\n          class=\"bg-accent\"\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-labelledby=\"combobox\"\n        >\n          <slot\n            class=\"combobox__panel\"\n            part=\"panel\"\n            @keydown=${this.handleKeyDown}\n            @mid-select=${this.handlePanelSelect}\n          ></slot>\n        </div>\n      </mid-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('combobox.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 100, easing: 'ease' },\n});\n\nsetDefaultAnimation('combobox.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/countdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"countdown.js","sources":["../../src/components/countdown.component.ts"],"sourcesContent":["import { customElement, property, state } from 'lit/decorators.js';\nimport { css, html, LitElement } from 'lit';\nimport { styled } from '../mixins/tailwind.mixin.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-countdown': MinidCountdown;\n  }\n}\n\n@customElement('mid-countdown')\nexport class MinidCountdown extends styled(LitElement) {\n  static override styles = [\n    css`\n      :host {\n        display: inline-block;\n        margin: auto;\n      }\n    `,\n  ];\n\n  /**\n   * Timestamp in ms for when the countdown should expire\n   */\n  @property({ type: Number })\n  expiry: number = Date.now() + 30 * 1000; // future timestamp in ms\n\n  /**\n   * Diameter of circle in pixels\n   */\n  @property({ type: String })\n  size: string = '150';\n\n  @state()\n  private expired = false;\n\n  // TODO: add event emitter for countdown expired\n  @property({ attribute: false })\n  callback?: () => void;\n\n  firstUpdated() {\n    const canvas = <HTMLCanvasElement>this.shadowRoot!.querySelector('canvas');\n\n    canvas.width = parseInt(this.size);\n    canvas.height = parseInt(this.size);\n\n    const ctx = <CanvasRenderingContext2D>canvas.getContext('2d');\n    const centerX = canvas.width / 2;\n    const centerY = canvas.height / 2;\n    const radius = canvas.height / 2 - 1;\n    const duration = this.expiry - Date.now(); // total countdown time\n    let prevTimeRemaining = duration;\n\n    const drawCountdown = () => {\n      const timeRemaining = this.expiry - Date.now();\n\n      if (prevTimeRemaining - timeRemaining < 50) {\n        // Skip drawing if time difference is less than 50ms\n        requestAnimationFrame(drawCountdown); // otherwise this will update 60 times per second...\n        return;\n      }\n\n      prevTimeRemaining = timeRemaining;\n\n      if (timeRemaining > 0) {\n        const elapsedTime = duration - timeRemaining;\n\n        const arcLength = 2 * Math.PI * (elapsedTime / duration);\n        const startAngle = arcLength - Math.PI / 2;\n\n        const secondsRemaining = Math.max(Math.ceil(timeRemaining / 1000), 0); // Ensure non-negative\n        const minutes = Math.floor(secondsRemaining / 60);\n        const seconds = secondsRemaining % 60;\n        const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n\n        // draw arc\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        ctx.beginPath();\n        ctx.moveTo(centerX, centerY);\n        ctx.arc(centerX, centerY, radius, startAngle, -Math.PI / 2);\n        ctx.lineWidth = 2;\n        ctx.strokeStyle = 'grey';\n        ctx.fillStyle = '#edf3f9';\n        ctx.closePath();\n        ctx.fill();\n        ctx.stroke();\n\n        // draw text\n        ctx.font = '30px Arial';\n        ctx.textAlign = 'center';\n        ctx.textBaseline = 'middle';\n        ctx.fillStyle = 'grey';\n        const textOffset = centerY / 3;\n        ctx.fillText(formattedTime, centerX, centerY + textOffset);\n\n        requestAnimationFrame(drawCountdown);\n      } else {\n        this.expired = true;\n        this.dispatchEvent(\n          new CustomEvent('countdown-expired', {\n            bubbles: true,\n            composed: true,\n          })\n        );\n      }\n    };\n\n    drawCountdown();\n  }\n\n  override render() {\n    return this.expired ? html`<slot></slot>` : html`<canvas></canvas>`;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAWO,IAAM,iBAAN,cAA6B,OAAO,UAAU,EAAE;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAcL,SAAA,SAAiB,KAAK,IAAA,IAAQ,KAAK;AAMnC,SAAA,OAAe;AAGf,SAAQ,UAAU;AAAA,EAAA;AAAA,EAMlB,eAAe;AACb,UAAM,SAA4B,KAAK,WAAY,cAAc,QAAQ;AAEzE,WAAO,QAAQ,SAAS,KAAK,IAAI;AACjC,WAAO,SAAS,SAAS,KAAK,IAAI;AAElC,UAAM,MAAgC,OAAO,WAAW,IAAI;AAC5D,UAAM,UAAU,OAAO,QAAQ;AAC/B,UAAM,UAAU,OAAO,SAAS;AAChC,UAAM,SAAS,OAAO,SAAS,IAAI;AACnC,UAAM,WAAW,KAAK,SAAS,KAAK,IAAA;AACpC,QAAI,oBAAoB;AAExB,UAAM,gBAAgB,MAAM;AAC1B,YAAM,gBAAgB,KAAK,SAAS,KAAK,IAAA;AAEzC,UAAI,oBAAoB,gBAAgB,IAAI;AAE1C,8BAAsB,aAAa;AACnC;AAAA,MAAA;AAGF,0BAAoB;AAEpB,UAAI,gBAAgB,GAAG;AACrB,cAAM,cAAc,WAAW;AAE/B,cAAM,YAAY,IAAI,KAAK,MAAM,cAAc;AAC/C,cAAM,aAAa,YAAY,KAAK,KAAK;AAEzC,cAAM,mBAAmB,KAAK,IAAI,KAAK,KAAK,gBAAgB,GAAI,GAAG,CAAC;AACpE,cAAM,UAAU,KAAK,MAAM,mBAAmB,EAAE;AAChD,cAAM,UAAU,mBAAmB;AACnC,cAAM,gBAAgB,GAAG,QAAQ,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAI,QAAQ,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC;AAGnG,YAAI,UAAU,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AAC/C,YAAI,UAAA;AACJ,YAAI,OAAO,SAAS,OAAO;AAC3B,YAAI,IAAI,SAAS,SAAS,QAAQ,YAAY,CAAC,KAAK,KAAK,CAAC;AAC1D,YAAI,YAAY;AAChB,YAAI,cAAc;AAClB,YAAI,YAAY;AAChB,YAAI,UAAA;AACJ,YAAI,KAAA;AACJ,YAAI,OAAA;AAGJ,YAAI,OAAO;AACX,YAAI,YAAY;AAChB,YAAI,eAAe;AACnB,YAAI,YAAY;AAChB,cAAM,aAAa,UAAU;AAC7B,YAAI,SAAS,eAAe,SAAS,UAAU,UAAU;AAEzD,8BAAsB,aAAa;AAAA,MAAA,OAC9B;AACL,aAAK,UAAU;AACf,aAAK;AAAA,UACH,IAAI,YAAY,qBAAqB;AAAA,YACnC,SAAS;AAAA,YACT,UAAU;AAAA,UAAA,CACX;AAAA,QAAA;AAAA,MACH;AAAA,IACF;AAGF,kBAAA;AAAA,EAAc;AAAA,EAGP,SAAS;AAChB,WAAO,KAAK,UAAU,sBAAsB;AAAA,EAAA;AAEhD;AAtGa,eACK,SAAS;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMF;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAbf,eAcX,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnBf,eAoBX,WAAA,QAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAtBI,eAuBH,WAAA,WAAA,CAAA;AAIR,gBAAA;AAAA,EADC,SAAS,EAAE,WAAW,MAAA,CAAO;AAAA,GA1BnB,eA2BX,WAAA,YAAA,CAAA;AA3BW,iBAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,cAAA;"}
+{"version":3,"file":"countdown.js","sources":["../../src/components/countdown.component.ts"],"sourcesContent":["import { customElement, property, state } from 'lit/decorators.js';\nimport { css, html, LitElement } from 'lit';\nimport { styled } from '../mixins/tailwind.mixin.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-countdown': MinidCountdown;\n  }\n}\n\n@customElement('mid-countdown')\nexport class MinidCountdown extends styled(LitElement) {\n  static override styles = [\n    css`\n      :host {\n        display: inline-block;\n        margin: auto;\n      }\n    `,\n  ];\n\n  /**\n   * Timestamp in ms for when the countdown should expire\n   */\n  @property({ type: Number })\n  expiry: number = Date.now() + 30 * 1000; // future timestamp in ms\n\n  /**\n   * Diameter of circle in pixels\n   */\n  @property({ type: String })\n  size: string = '150';\n\n  @state()\n  private expired = false;\n\n  // TODO: add event emitter for countdown expired\n  @property({ attribute: false })\n  callback?: () => void;\n\n  firstUpdated() {\n    const canvas = <HTMLCanvasElement>this.shadowRoot!.querySelector('canvas');\n\n    canvas.width = parseInt(this.size);\n    canvas.height = parseInt(this.size);\n\n    const ctx = <CanvasRenderingContext2D>canvas.getContext('2d');\n    const centerX = canvas.width / 2;\n    const centerY = canvas.height / 2;\n    const radius = canvas.height / 2 - 1;\n    const duration = this.expiry - Date.now(); // total countdown time\n    let prevTimeRemaining = duration;\n\n    const drawCountdown = () => {\n      const timeRemaining = this.expiry - Date.now();\n\n      if (prevTimeRemaining - timeRemaining < 50) {\n        // Skip drawing if time difference is less than 50ms\n        requestAnimationFrame(drawCountdown); // otherwise this will update 60 times per second...\n        return;\n      }\n\n      prevTimeRemaining = timeRemaining;\n\n      if (timeRemaining > 0) {\n        const elapsedTime = duration - timeRemaining;\n\n        const arcLength = 2 * Math.PI * (elapsedTime / duration);\n        const startAngle = arcLength - Math.PI / 2;\n\n        const secondsRemaining = Math.max(Math.ceil(timeRemaining / 1000), 0); // Ensure non-negative\n        const minutes = Math.floor(secondsRemaining / 60);\n        const seconds = secondsRemaining % 60;\n        const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n\n        // draw arc\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        ctx.beginPath();\n        ctx.moveTo(centerX, centerY);\n        ctx.arc(centerX, centerY, radius, startAngle, -Math.PI / 2);\n        ctx.lineWidth = 2;\n        ctx.strokeStyle = 'grey';\n        ctx.fillStyle = '#edf3f9';\n        ctx.closePath();\n        ctx.fill();\n        ctx.stroke();\n\n        // draw text\n        ctx.font = '30px Arial';\n        ctx.textAlign = 'center';\n        ctx.textBaseline = 'middle';\n        ctx.fillStyle = 'grey';\n        const textOffset = centerY / 3;\n        ctx.fillText(formattedTime, centerX, centerY + textOffset);\n\n        requestAnimationFrame(drawCountdown);\n      } else {\n        this.expired = true;\n        this.dispatchEvent(\n          new CustomEvent('countdown-expired', {\n            bubbles: true,\n            composed: true,\n          })\n        );\n      }\n    };\n\n    drawCountdown();\n  }\n\n  override render() {\n    return this.expired ? html`<slot></slot>` : html`<canvas></canvas>`;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAWO,IAAM,iBAAN,cAA6B,OAAO,UAAU,EAAE;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAcL,SAAA,SAAiB,KAAK,IAAA,IAAQ,KAAK;AAMnC,SAAA,OAAe;AAGf,SAAQ,UAAU;AAAA,EAAA;AAAA,EAMlB,eAAe;AACb,UAAM,SAA4B,KAAK,WAAY,cAAc,QAAQ;AAEzE,WAAO,QAAQ,SAAS,KAAK,IAAI;AACjC,WAAO,SAAS,SAAS,KAAK,IAAI;AAElC,UAAM,MAAgC,OAAO,WAAW,IAAI;AAC5D,UAAM,UAAU,OAAO,QAAQ;AAC/B,UAAM,UAAU,OAAO,SAAS;AAChC,UAAM,SAAS,OAAO,SAAS,IAAI;AACnC,UAAM,WAAW,KAAK,SAAS,KAAK,IAAA;AACpC,QAAI,oBAAoB;AAExB,UAAM,gBAAgB,MAAM;AAC1B,YAAM,gBAAgB,KAAK,SAAS,KAAK,IAAA;AAEzC,UAAI,oBAAoB,gBAAgB,IAAI;AAE1C,8BAAsB,aAAa;AACnC;AAAA,MACF;AAEA,0BAAoB;AAEpB,UAAI,gBAAgB,GAAG;AACrB,cAAM,cAAc,WAAW;AAE/B,cAAM,YAAY,IAAI,KAAK,MAAM,cAAc;AAC/C,cAAM,aAAa,YAAY,KAAK,KAAK;AAEzC,cAAM,mBAAmB,KAAK,IAAI,KAAK,KAAK,gBAAgB,GAAI,GAAG,CAAC;AACpE,cAAM,UAAU,KAAK,MAAM,mBAAmB,EAAE;AAChD,cAAM,UAAU,mBAAmB;AACnC,cAAM,gBAAgB,GAAG,QAAQ,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAI,QAAQ,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC;AAGnG,YAAI,UAAU,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AAC/C,YAAI,UAAA;AACJ,YAAI,OAAO,SAAS,OAAO;AAC3B,YAAI,IAAI,SAAS,SAAS,QAAQ,YAAY,CAAC,KAAK,KAAK,CAAC;AAC1D,YAAI,YAAY;AAChB,YAAI,cAAc;AAClB,YAAI,YAAY;AAChB,YAAI,UAAA;AACJ,YAAI,KAAA;AACJ,YAAI,OAAA;AAGJ,YAAI,OAAO;AACX,YAAI,YAAY;AAChB,YAAI,eAAe;AACnB,YAAI,YAAY;AAChB,cAAM,aAAa,UAAU;AAC7B,YAAI,SAAS,eAAe,SAAS,UAAU,UAAU;AAEzD,8BAAsB,aAAa;AAAA,MACrC,OAAO;AACL,aAAK,UAAU;AACf,aAAK;AAAA,UACH,IAAI,YAAY,qBAAqB;AAAA,YACnC,SAAS;AAAA,YACT,UAAU;AAAA,UAAA,CACX;AAAA,QAAA;AAAA,MAEL;AAAA,IACF;AAEA,kBAAA;AAAA,EACF;AAAA,EAES,SAAS;AAChB,WAAO,KAAK,UAAU,sBAAsB;AAAA,EAC9C;AACF;AAtGa,eACK,SAAS;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMF;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAbf,eAcX,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnBf,eAoBX,WAAA,QAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAtBI,eAuBH,WAAA,WAAA,CAAA;AAIR,gBAAA;AAAA,EADC,SAAS,EAAE,WAAW,MAAA,CAAO;AAAA,GA1BnB,eA2BX,WAAA,YAAA,CAAA;AA3BW,iBAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,cAAA;"}

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../src/components/dialog.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../internal/scroll';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-dialog': MinidDialog;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --width: 40rem;\n      display: block;\n    }\n  `,\n];\n\n/**\n *\n * @event mid-show - Emitted when the dialog opens.\n * @event mid-after-show - Emitted after the dialog opens and all animations are complete.\n * @event mid-hide - Emitted when the dialog closes.\n * @event mid-after-hide - Emitted after the dialog closes and all animations are complete.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} mid-request-close - Emitted when the user attempts to\n *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - Select the base `dialog` element\n * @csspart header - Select the `header` element\n * @csspart body - Select the `article` element\n * @csspart footer - Select the `footer` element\n *\n * @slot -- The default slot for the body content of the dialog\n * @slot heading - The content inside the `h2` element\n * @slot footer - The content inside the `footer` element\n *\n * @animation dialog.show - The animation to use when showing the dialog.\n * @animation dialog.hide - The animation to use when hiding the dialog.\n * @animation dialog.denyClose - The animation to use when closing the dialog is prevented.\n *\n */\n@customElement('mid-dialog')\nexport class MinidDialog extends styled(LitElement, styles) {\n  @query('#dialog')\n  dialog!: HTMLDialogElement;\n\n  /**\n   * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @property({ reflect: true })\n  heading = '';\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const requestCloseEvent = new CustomEvent('mid-request-close', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: { source },\n    });\n    this.dispatchEvent(requestCloseEvent);\n\n    if (requestCloseEvent.defaultPrevented) {\n      const { keyframes, options } = getAnimation(this, 'dialog.denyClose');\n      animateTo(this.dialog, keyframes, options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n\n    if (event.defaultPrevented) {\n      this.requestClose('keyboard');\n    } else {\n      this.hide();\n    }\n  };\n\n  private handleBackdropClick({ target }: Event) {\n    // if the target is the dialog, the backdrop was clicked\n    if (target === this.dialog) {\n      this.requestClose('overlay');\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { composed: true, bubbles: true })\n      );\n      // this.addOpenListeners();\n      this.dialog.showModal();\n\n      lockBodyScrolling(this);\n\n      const panelAnimation = getAnimation(this, 'dialog.show');\n      await animateTo(\n        this.dialog,\n        panelAnimation.keyframes,\n        panelAnimation.options\n      ),\n        this.dispatchEvent(\n          new Event('mid-after-show', { bubbles: true, composed: true })\n        );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n\n      await Promise.all([stopAnimations(this.dialog)]);\n      const panelAnimation = getAnimation(this, 'dialog.hide');\n\n      // The backdrop can only be animated with css because it's a pseudo element\n      // so we add a animation class to trigger it at the same time as the dialog animation\n      this.dialog.classList.add('backdrop:animate-fade-out');\n      await animateTo(\n        this.dialog,\n        panelAnimation.keyframes,\n        panelAnimation.options\n      );\n      this.dialog.classList.remove('backdrop:animate-fade-out');\n      this.dialog.close();\n      this.dialog.hidden = false;\n      unlockBodyScrolling(this);\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  /**\n   * Shows the dialog.\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 dialog\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  override render() {\n    return html`\n      <dialog\n        part=\"base\"\n        id=\"dialog\"\n        class=\"text-neutral m-auto max-h-[calc(100%---spacing(8))] w-(--width) max-w-[calc(100%---spacing(8))] flex-col rounded-lg p-6 shadow-xl backdrop:bg-black/50 open:flex open:animate-none\"\n        @cancel=${this.handleDialogCancel}\n        @click=${this.handleBackdropClick}\n      >\n        <header part=\"header\" class=\"text-heading-sm flex justify-between\">\n          <slot name=\"heading\"></slot>\n          <div class=\"h-0\">\n            <button\n              autofocus\n              @click=\"${() => this.requestClose('close-button')}\"\n              class=\"text-body-md focus-visible:focus-ring text-neutral hover:bg-neutral-surface-hover float-right flex size-12 translate-x-3 -translate-y-3 items-center justify-center rounded\"\n            >\n              <mid-icon class=\"size-6\" name=\"xmark\"></mid-icon>\n            </button>\n          </div>\n        </header>\n        <div part=\"body\" class=\"overflow-auto\">\n          <slot> </slot>\n        </div>\n        <footer part=\"footer\">\n          <slot name=\"footer\"> </slot>\n        </footer>\n      </dialog>\n    `;\n  }\n}\n\nsetDefaultAnimation('dialog.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('dialog.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('dialog.denyClose', {\n  keyframes: [{ scale: 1 }, { scale: 1.03 }, { scale: 1 }],\n  options: { duration: 100 },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"dialog.js","sources":["../../src/components/dialog.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../internal/scroll';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-dialog': MinidDialog;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --width: 40rem;\n      display: block;\n    }\n  `,\n];\n\n/**\n *\n * @event mid-show - Emitted when the dialog opens.\n * @event mid-after-show - Emitted after the dialog opens and all animations are complete.\n * @event mid-hide - Emitted when the dialog closes.\n * @event mid-after-hide - Emitted after the dialog closes and all animations are complete.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} mid-request-close - Emitted when the user attempts to\n *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - Select the base `dialog` element\n * @csspart header - Select the `header` element\n * @csspart body - Select the `article` element\n * @csspart footer - Select the `footer` element\n *\n * @slot -- The default slot for the body content of the dialog\n * @slot heading - The content inside the `h2` element\n * @slot footer - The content inside the `footer` element\n *\n * @animation dialog.show - The animation to use when showing the dialog.\n * @animation dialog.hide - The animation to use when hiding the dialog.\n * @animation dialog.denyClose - The animation to use when closing the dialog is prevented.\n *\n */\n@customElement('mid-dialog')\nexport class MinidDialog extends styled(LitElement, styles) {\n  @query('#dialog')\n  dialog!: HTMLDialogElement;\n\n  /**\n   * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @property({ reflect: true })\n  heading = '';\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const requestCloseEvent = new CustomEvent('mid-request-close', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: { source },\n    });\n    this.dispatchEvent(requestCloseEvent);\n\n    if (requestCloseEvent.defaultPrevented) {\n      const { keyframes, options } = getAnimation(this, 'dialog.denyClose');\n      animateTo(this.dialog, keyframes, options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n\n    if (event.defaultPrevented) {\n      this.requestClose('keyboard');\n    } else {\n      this.hide();\n    }\n  };\n\n  private handleBackdropClick({ target }: Event) {\n    // if the target is the dialog, the backdrop was clicked\n    if (target === this.dialog) {\n      this.requestClose('overlay');\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { composed: true, bubbles: true })\n      );\n      // this.addOpenListeners();\n      this.dialog.showModal();\n\n      lockBodyScrolling(this);\n\n      const panelAnimation = getAnimation(this, 'dialog.show');\n      await animateTo(\n        this.dialog,\n        panelAnimation.keyframes,\n        panelAnimation.options\n      ),\n        this.dispatchEvent(\n          new Event('mid-after-show', { bubbles: true, composed: true })\n        );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n\n      await Promise.all([stopAnimations(this.dialog)]);\n      const panelAnimation = getAnimation(this, 'dialog.hide');\n\n      // The backdrop can only be animated with css because it's a pseudo element\n      // so we add a animation class to trigger it at the same time as the dialog animation\n      this.dialog.classList.add('backdrop:animate-fade-out');\n      await animateTo(\n        this.dialog,\n        panelAnimation.keyframes,\n        panelAnimation.options\n      );\n      this.dialog.classList.remove('backdrop:animate-fade-out');\n      this.dialog.close();\n      this.dialog.hidden = false;\n      unlockBodyScrolling(this);\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  /**\n   * Shows the dialog.\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 dialog\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  override render() {\n    return html`\n      <dialog\n        part=\"base\"\n        id=\"dialog\"\n        class=\"text-neutral m-auto max-h-[calc(100%---spacing(8))] w-(--width) max-w-[calc(100%---spacing(8))] flex-col rounded-lg p-6 shadow-xl backdrop:bg-black/50 open:flex open:animate-none\"\n        @cancel=${this.handleDialogCancel}\n        @click=${this.handleBackdropClick}\n      >\n        <header part=\"header\" class=\"text-heading-sm flex justify-between\">\n          <slot name=\"heading\"></slot>\n          <div class=\"h-0\">\n            <button\n              autofocus\n              @click=\"${() => this.requestClose('close-button')}\"\n              class=\"text-body-md focus-visible:focus-ring text-neutral hover:bg-neutral-surface-hover float-right flex size-12 translate-x-3 -translate-y-3 items-center justify-center rounded\"\n            >\n              <mid-icon class=\"size-6\" name=\"xmark\"></mid-icon>\n            </button>\n          </div>\n        </header>\n        <div part=\"body\" class=\"overflow-auto\">\n          <slot> </slot>\n        </div>\n        <footer part=\"footer\">\n          <slot name=\"footer\"> </slot>\n        </footer>\n      </dialog>\n    `;\n  }\n}\n\nsetDefaultAnimation('dialog.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('dialog.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('dialog.denyClose', {\n  keyframes: [{ scale: 1 }, { scale: 1.03 }, { scale: 1 }],\n  options: { duration: 100 },\n});\n"],"names":[],"mappings":"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"}