@nopwdio/ui/dist/components/ui-color.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 { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import "./ui-clipboard.js";
let UiColor = class UiColor extends LitElement {
    constructor() {
        super(...arguments);
        this.color = "black";
    }
    connectedCallback() {
        super.connectedCallback();
        this.copyToClipboard = this.copyToClipboard.bind(this);
        this.addEventListener("click", this.copyToClipboard);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener("click", this.copyToClipboard);
    }
    render() {
        return html `<label><slot></slot><ui-clipboard value=${this.color}></ui-clipboard></label
      ><span class="preview"></span>`;
    }
    updated(_changedProperties) {
        var _a, _b;
        super.updated(_changedProperties);
        (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".preview")) === null || _b === void 0 ? void 0 : _b.setAttribute("style", `background-color:var(${this.color})`);
    }
    copyToClipboard() {
        var _a;
        const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ui-clipboard");
        if (el) {
            el.copyToClipboard();
        }
    }
};
UiColor.styles = [
    css `
      :host {
        flex: 1;
        display: flex;
        flex-flow: column;
        overflow: hidden;
        cursor: pointer;
      }

      :host(:hover) {
        border-color: var(--np-border-color-emphasis);
      }

      label {
        display: flex;
        flex: 1;

        margin: 0;
        justify-content: space-between;
        padding: var(--np-padding);
        background-color: var(--np-bg-color);

        font-size: var(--np-text-size-muted);
        font-weight: var(--np-text-weight-emphasis);
        color: var(--np-text-color-muted);
      }

      :host(:hover) label {
        color: var(--np-text-color);
      }

      .preview {
        flex: 1;
        margin: 0;
        padding: var(--np-padding-emphasis);
        border-radius: var(--np-border-radius);

        box-shadow: var(--np-shadow-muted);
      }
    `,
];
__decorate([
    property({ type: String })
], UiColor.prototype, "color", void 0);
UiColor = __decorate([
    customElement("ui-color")
], UiColor);
export { UiColor };
//# sourceMappingURL=ui-color.js.map