var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { ShadowlessElement, WithDisposable } from '@blockeditor/lit';
import { css, html, nothing } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { stopPropagation } from '../../utils/event.js';
let EmbedCardCaption = class EmbedCardCaption extends WithDisposable(ShadowlessElement) {
    get caption() {
        return this.block.model.caption ?? '';
    }
    _onInputChange() {
        this.block.model.page.updateBlock(this.block.model, {
            caption: this.input.value,
        });
        this.requestUpdate();
    }
    _onInputBlur() {
        this.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
    }
    render() {
        if (!this.display)
            return nothing;
        const model = this.block.model;
        return html `<input
      .disabled=${model.page.readonly}
      placeholder="Write a caption"
      class="affine-embed-card-caption"
      value=${this.caption}
      @input=${this._onInputChange}
      @blur=${this._onInputBlur}
      @pointerdown=${stopPropagation}
    />`;
    }
};
EmbedCardCaption.styles = css `
    .affine-embed-card-caption {
      width: 100%;
      font-size: var(--affine-font-sm);
      outline: none;
      border: 0;
      font-family: inherit;
      text-align: center;
      color: var(--affine-icon-color);
      display: inline-block;
      background: transparent;
    }
    .affine-embed-card-caption::placeholder {
      color: var(--affine-placeholder-color);
    }
  `;
__decorate([
    property({ attribute: false })
], EmbedCardCaption.prototype, "block", void 0);
__decorate([
    property({ attribute: false })
], EmbedCardCaption.prototype, "display", void 0);
__decorate([
    query('.affine-embed-card-caption')
], EmbedCardCaption.prototype, "input", void 0);
EmbedCardCaption = __decorate([
    customElement('embed-card-caption')
], EmbedCardCaption);
export { EmbedCardCaption };
//# sourceMappingURL=embed-card-caption.js.map