{"mappings":"AACA,cAAc,sBAAiC;AAG/C,SAAS,mBAA+C;;;;;;;;;AAaxD,cA0DM,eAAe,YAAY;;;;CAI/B,AACA;;;;CAKA,AACA;;;;CAKA,AACA;;;;CAKA,AACA;;;;CAKA,AACA;CAEA,UACU,YAAY;CACtB,UACU,OAAO;CAEjB,UAAU,UAAU,eAAe;CAYnC;CAQA;CAKA;CAKA,UAAU,aAAa,GAAG;CAW1B,UAAU,aAAa,GAAG;;AA+B5B,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/button/component.ts"],"sourcesContent":["import { attr, godown, htmlSlot, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\n\nimport { GlobalStyle, cssGlobalVars, scopePrefix } from \"../../internal/global-style.js\";\n\nconst protoName = \"button\";\nconst cssScope = scopePrefix(protoName);\n\n/**\n * {@linkcode Button} renders a button.\n *\n * Create modal animation upon clicking.\n *\n * @slot - The content of the button.\n * @category input\n */\n@godown(protoName)\n@styles(\n  css`\n    :host(:not([disabled]):active) {\n      transform: scale(var(${cssScope}--focus-scale));\n    }\n\n    :host([round]) {\n      border-radius: calc(infinity * 1px);\n    }\n\n    :host([disabled]) {\n      cursor: not-allowed;\n      filter: brightness(0.85);\n    }\n\n    :host([plain]) {\n      ${cssScope}--gradients: unset;\n      ${cssScope}--focus-scale: unset;\n    }\n  `,\n  css`\n    :host {\n      ${cssScope}--modal-animation-duration: 1.5s;\n      ${cssScope}--focus-scale: .97;\n      ${cssScope}--deg: 45deg;\n      color: var(${cssGlobalVars.primaryForeground});\n      background: var(${cssGlobalVars.primaryBackground});\n      display: inline-block;\n      overflow: hidden;\n      text-align: center;\n      cursor: pointer;\n    }\n\n    [part=\"root\"] {\n      padding-block: 0.25em;\n      padding-inline: 1em;\n      position: relative;\n      user-select: none;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    i {\n      position: absolute;\n      inset: 0;\n      opacity: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      visibility: visible;\n      pointer-events: none;\n      transform-origin: 0 0;\n      background: currentColor;\n    }\n  `,\n)\nclass Button extends GlobalStyle {\n  /**\n   * If true, remove gradient, modal animation, focus scale.\n   */\n  @property({ type: Boolean, reflect: true })\n  plain = false;\n\n  /**\n   * Whether this element is disabled or not.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether this element is active or not.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Display rounded.\n   */\n  @property({ type: Boolean, reflect: true })\n  round = false;\n\n  /**\n   * Content text.\n   */\n  @property()\n  content: string;\n\n  @query(\"[part=modal-root]\")\n  protected _modalRoot: HTMLElement;\n  @query(\"[part=root]\")\n  protected _root: HTMLElement;\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <div\n        part=\"root\"\n        ${attr(this.observedRecord)}\n      >\n        ${htmlSlot(\"\", this.content)}\n        <span part=\"modal-root\"></span>\n      </div>\n    `;\n  }\n\n  focus(): void {\n    if (this.disabled) {\n      return;\n    }\n    this.active = true;\n    super.focus();\n  }\n\n  blur(): void {\n    this.active = false;\n    super.blur();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.events.add(this, \"click\", this._handelClick);\n  }\n\n  protected _handelClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.stopPropagation();\n      e.preventDefault();\n      return;\n    }\n    if (!this.plain) {\n      this._handleModal(e);\n    }\n  }\n\n  protected _handleModal(e: MouseEvent): void {\n    const modal = document.createElement(\"i\");\n    const { width, height } = this.getBoundingClientRect();\n    const { x, y } = this._root.getBoundingClientRect();\n    const size = `${Math.sqrt(height ** 2 + width ** 2) * 2}px`;\n    modal.style.height = size;\n    modal.style.width = size;\n    modal.style.left = `${e.x - x}px`;\n    modal.style.top = `${e.y - y}px`;\n    this._modalRoot.appendChild(modal);\n    const keyframes = [\n      {\n        transform: \"scale(0) translate(-50%, -50%)\",\n        opacity: 0.1,\n      },\n      {\n        transform: \"scale(1) translate(-50%, -50%)\",\n        offset: 0.8,\n      },\n      {\n        opacity: 0,\n      },\n    ];\n    modal.animate(keyframes, {\n      duration: 800,\n      iterations: 1,\n    });\n    modal.addEventListener(\"animationend\", () => modal.remove(), { once: true });\n  }\n}\n\nexport default Button;\nexport { Button };\n"],"version":3,"file":"component.d.ts"}