@infinite-canvas-tutorial/webcomponents/esm/spectrum/thread.js

WebComponents UI implementation

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 { when } from 'lit/directives/when.js';
let Thread = class Thread extends LitElement {
    render() {
        var _a;
        const firstComment = (_a = this.cluster.comments) === null || _a === void 0 ? void 0 : _a[0];
        return html `
      <div
        class="thread"
        style="position: absolute; left: ${this.x}px; top: ${this.y}px;"
      >
        ${when(firstComment, () => html `
              <div class="avatar">
                <img src=${firstComment.avatar} alt="Avatar" />
              </div>
            `)}
        ${when(!firstComment, () => { var _a; return html `<div class="avatar">${(_a = this.cluster.properties) === null || _a === void 0 ? void 0 : _a.count}</div> `; })}
      </div>
    `;
    }
};
Thread.styles = css `
    .thread {
      display: flex;
      position: absolute;
      left: 0px;
      bottom: 0px;
      min-width: 26px;
      align-self: flex-start;
      justify-self: flex-start;
      flex-direction: row;
      max-width: 240px;
      box-sizing: border-box;
      padding: 3px 3px;
      font-size: 11px;
      line-height: 16px;
      color: black;
      background-color: white;
      border-radius: 16px 16px 16px 0px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

      user-select: none;
      -webkit-user-select: none;
      overflow: hidden;
      pointer-events: none;
    }

    .avatar {
      display: flex;
      flex-direction: row-reverse;
      justify-content: center;
      align-items: center;
      min-width: 26px;
      min-height: 26px;

      img {
        width: 24px;
        height: 24px;
        border-radius: 100%;
        border: 1px solid var(--color-bg);
        background: linear-gradient(
            136.68deg,
            rgba(0, 0, 0, 0.05) 11.37%,
            rgba(255, 255, 255, 0.039) 82.26%
          ),
          #f0f0f0;
      }
    }
  `;
__decorate([
    property()
], Thread.prototype, "x", void 0);
__decorate([
    property()
], Thread.prototype, "y", void 0);
__decorate([
    property()
], Thread.prototype, "cluster", void 0);
Thread = __decorate([
    customElement('ic-spectrum-thread')
], Thread);
export { Thread };
//# sourceMappingURL=thread.js.map