{"mappings":"AAAA,cAAc,oBAA8C;AAC5D,cAAc,qBAAqB,sBAAiC;AAGpE,OAAO,iBAAkC;;;;;;;;;;;;;;;AAmBzC,cAyBM,eAAe,YAAY;CAC/B,AACA;CAEA,AACA;;;;CAKA,QAAQ;CAER,UACU,SAAS;CAEnB,UAAU,UAAU,eAAe;CAiBnC;CAMA;CAIA;CAIA,OAAO;CAIP,QAAQ;CACR,QAAQ;CAER,UAAU,QAAQ,mBAAmB;CAuBrC,UAAU,eAAe,GAAG;CAO5B,UAAU,cAAc,GAAG,aAAa;;AAQ1C,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/dialog/component.ts"],"sourcesContent":["import { type HandlerEvent, godown, htmlSlot, styles } from \"@godown/element\";\nimport { type PropertyValues, type TemplateResult, css, html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\n\nimport GlobalStyle, { scopePrefix } from \"../../internal/global-style.js\";\n\nconst protoName = \"dialog\";\nconst cssScope = scopePrefix(protoName);\n\n/**\n * {@linkcode Dialog} similar to `<dialog>`.\n *\n * Like dialog, it listens for submit events and closes itself when the target method is \"dialog\".\n *\n * Previous versions of Dialog did not contain triggers.\n * Therefore, unlike Tooltip which uses the default slot as the trigger.\n * Dialog needs to use slot=\"trigger\" as the trigger instead of an element without a slot name.\n *\n * @fires change - Fires when the open changes.\n * @slot trigger - The trigger element.\n * @slot - The dialog content.\n * @category feedback\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    ${cssScope}--background-modal: black;\n    ${cssScope}--opacity-modal: 0.2;\n    width: fit-content;\n    display: block;\n    background: none;\n  }\n\n  dialog {\n    position: relative;\n    background: none;\n    z-index: 1;\n    left: 50%;\n    top: 50%;\n    position: fixed;\n    transform: translate(-50%, -50%);\n  }\n\n  ::backdrop {\n    background: var(${cssScope}--background-modal);\n    opacity: var(${cssScope}--opacity-modal);\n  }\n`)\nclass Dialog extends GlobalStyle {\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: Boolean, reflect: true })\n  modal = false;\n\n  /**\n   * Indicates whether the modal has been invoked.\n   */\n  private __modalInvoke = false;\n\n  @query(\"[part=dialog]\")\n  protected _dialog: HTMLDialogElement;\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <div\n        part=\"root\"\n        @click=${this.show}\n      >\n        ${htmlSlot(\"trigger\")}\n      </div>\n      <dialog\n        part=\"dialog\"\n        role=\"dialog\"\n      >\n        ${htmlSlot(\"dialog\")}${htmlSlot()}\n      </dialog>\n    `;\n  }\n\n  showModal(): void {\n    this.modal = true;\n    this.__modalInvoke = true;\n    this.show();\n  }\n\n  show(): void {\n    this.open = true;\n  }\n\n  close(): void {\n    this.open = false;\n  }\n\n  toggle(to?: boolean): void {\n    this.open = to ?? !this.open;\n  }\n\n  private __submitEvent: EventListenerOrEventListenerObject;\n  private __keydownEvent: EventListenerOrEventListenerObject;\n\n  protected updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has(\"open\")) {\n      if (this.open) {\n        if (this.modal) {\n          this._dialog.showModal();\n        } else {\n          this._dialog.show();\n        }\n        this.__submitEvent = this.events.add(this, \"submit\", this._handelSubmit);\n\n        this.__keydownEvent = this.events.add(document, \"keydown\", this._handleKeydown.bind(this));\n      } else {\n        if (this.__modalInvoke) {\n          this.modal = false;\n          this.__modalInvoke = false;\n        }\n        this._dialog.close();\n        this.events.remove(this, \"submit\", this.__submitEvent);\n        this.events.remove(document, \"keydown\", this.__keydownEvent);\n      }\n    }\n  }\n\n  protected _handleKeydown(e: KeyboardEvent): void {\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      this.close();\n    }\n  }\n\n  protected _handelSubmit(e: HandlerEvent<HTMLFormElement>): void {\n    if (e.target.method === \"dialog\") {\n      e.preventDefault();\n      this.close();\n    }\n  }\n}\n\nexport default Dialog;\nexport { Dialog };\n"],"version":3,"file":"component.d.ts"}