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 { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { BLOCK_ID_ATTR } from '../consts.js';
let Loader = class Loader extends LitElement {
    constructor() {
        super();
        this.hostModel = null;
        this.radius = '8px';
        this.width = '150px';
    }
    connectedCallback() {
        super.connectedCallback();
        if (this.hostModel) {
            this.setAttribute(BLOCK_ID_ATTR, this.hostModel.id);
            this.setAttribute('data-service-loading', 'true');
        }
        const width = this.width;
        this.style.setProperty('--loader-width', typeof width === 'string' ? width : `${width}px`);
    }
    render() {
        return html `
      <div class="load-container">
        <div class="load load1"></div>
        <div class="load load2"></div>
        <div class="load"></div>
      </div>
    `;
    }
};
Loader.styles = css `
    .load-container {
      margin: 10px auto;
      width: var(--loader-width);
      text-align: center;
    }

    .load-container .load {
      width: 8px;
      height: 8px;
      background-color: var(--affine-text-primary-color);

      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out;
      /* Prevent first note from flickering when animation starts */
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    .load-container .load1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    .load-container .load2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

    @-webkit-keyframes bouncedelay {
      0%,
      80%,
      100% {
        -webkit-transform: scale(0.625);
      }
      40% {
        -webkit-transform: scale(1);
      }
    }

    @keyframes bouncedelay {
      0%,
      80%,
      100% {
        transform: scale(0);
        -webkit-transform: scale(0.625);
      }
      40% {
        transform: scale(1);
        -webkit-transform: scale(1);
      }
    }
  `;
__decorate([
    property({ attribute: false })
], Loader.prototype, "hostModel", void 0);
__decorate([
    property({ attribute: false })
], Loader.prototype, "radius", void 0);
__decorate([
    property({ attribute: false })
], Loader.prototype, "width", void 0);
Loader = __decorate([
    customElement('loader-element')
], Loader);
export { Loader };
//# sourceMappingURL=loader.js.map