@nopwdio/ui/dist/components/ui-editor.js

Nopwd Design System

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 { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { circle } from "../icons/solid.js";
import "./ui-clipboard.js";
let UiEditor = class UiEditor extends LitElement {
    constructor() {
        super(...arguments);
        this.title = "";
        this.clipboard = "";
    }
    render() {
        return html `
      <header>
        <span class="window">
          <span class="close">${circle}</span>
          <span class="reduce">${circle}</span>
          <span class="full">${circle}</span>
        </span>
        <h1>${this.title}</h1>
        <ui-clipboard value=${this.clipboard}></ui-clipboard>
      </header>
      <main><slot></slot></main>
    `;
    }
};
UiEditor.styles = css `
    :host {
      display: flex;
      flex-flow: column;
      border-radius: var(--np-core-font-size-xs);
      overflow: hidden;
      border: 1px solid var(--np-border-color-muted);
    }

    header {
      display: flex;
      align-items: center;
      gap: 0.5em;
      padding: 0.5em;
      justify-content: space-between;
      background-color: var(--np-bg-color-muted);
      border-bottom: 1px solid var(--np-border-color-muted);
    }

    .window .icon {
      width: 0.8em;
    }
    .window .close {
      color: var(--np-core-color-red-500);
    }

    .window .reduce {
      color: var(--np-core-color-orange-500);
    }

    .window .full {
      color: var(--np-core-color-green-500);
    }

    h1 {
      flex: 1;
      text-align: center;
      margin: 0;
      padding: var(--np-padding);
      font-size: var(--np-text-size-muted);
      font-weight: var(--np-text-weight-emphasis);
      color: var(--np-text-color-muted);
      border: 1px solid var(--np-border-color-muted);
      border-radius: var(--np-border-radius);
    }

    main {
      display: flex;
      padding: var(--np-padding);
      font-size: var(--np-text-size-muted);
      overflow-x: scroll;
      scroll-behavior: smooth;
    }

    main::-webkit-scrollbar {
      display: none;
    }

    .icon {
      height: var(--np-text-size);
    }

    ui-clipboard {
      color: var(--np-text-color-muted);
    }
  `;
__decorate([
    property()
], UiEditor.prototype, "title", void 0);
__decorate([
    property()
], UiEditor.prototype, "clipboard", void 0);
UiEditor = __decorate([
    customElement("ui-editor")
], UiEditor);
export { UiEditor };
//# sourceMappingURL=ui-editor.js.map