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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { html, css, property, } from 'lit-element';
import WebComponent from '../../helpers/WebComponent';
export default class ArenaFigure extends WebComponent {
    constructor() {
        // @property({
        //   type: String,
        // })
        // src: string | undefined;
        super(...arguments);
        // @property({
        //   type: Number,
        // })
        // width: number | undefined;
        // @property({
        //   type: Number,
        // })
        // height: number | undefined;
        this.withCaption = false;
        // handleChange({ detail }: { detail: NodeAttributes }): void {
        //   this.fireChangeAttribute(detail);
        // }
    }
    // @property({
    //   type: Object,
    // })
    // arena: AnyArena | undefined;
    // loading = false;
    // get input(): HTMLInputElement | undefined {
    //   const input = this.renderRoot.querySelector('#input');
    //   return input ? input as HTMLInputElement : undefined;
    // }
    static get styles() {
        return [
            css `
        :host {
          display: block;
          margin: 0;
          user-select: none;
        }
        .caption {
          display: flex;
          position: relative;
          color: #7c7c7c;
          font-size: 0.8em;
        }
        .caption slot {
          margin-left: 1em;
          /* color: #2c2c2c; */
          flex: 1;
          min-height: 100%;
          display: block;
        }
        .caption-placeholder {
          pointer-events: none;
          font-style: italic;
        }
      `,
        ];
    }
    // Render element DOM by returning a `lit-html` template.
    render() {
        // const image = html`<arena-image
        //   class="preview-btn"
        //   src="${ifDefined(this.src)}"
        //   width="${ifDefined(this.width)}"
        //   height="${ifDefined(this.height)}"
        //   @change=${this.handleChange}
        //   .arena=${this.arena}
        // ></arena-image>`;
        // let caption;
        // if (this.withCaption) {
        // const caption = ;
        // }
        return html `
      <slot name="image"></slot>
      <slot name="image-caption"></slot>
    `;
    }
}
__decorate([
    property({
        type: Boolean,
    }),
    __metadata("design:type", Object)
], ArenaFigure.prototype, "withCaption", void 0);
//# sourceMappingURL=ArenaFigure.js.map