@nopwdio/ui/dist/components/ui-border-token.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 UiBorderToken = class UiBorderToken extends LitElement {
    constructor() {
        super(...arguments);
        this.token = "";
        this.applyto = "";
    }
    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></label><ui-clipboard value=${this.token}></ui-clipboard>`;
    }
    updated(_changedProperties) {
        var _a, _b;
        super.updated(_changedProperties);
        (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("label")) === null || _b === void 0 ? void 0 : _b.setAttribute("style", `${this.applyto}:var(${this.token})`);
    }
    copyToClipboard() {
        var _a;
        const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ui-clipboard");
        if (el) {
            el.copyToClipboard();
        }
    }
};
UiBorderToken.styles = [
    css `
      :host {
        flex: 1;
        display: flex;
        align-items: center;
        gap: var(--np-gap);
        padding: var(--np-padding);
        border-radius: var(--np-border-radius);
        cursor: pointer;
      }

      label {
        margin: 0;
        border-radius: var(--np-border-radius);
        padding: var(--np-padding-muted) var(--np-padding-emphasis);

        font-size: var(--np-text-size);
        font-weight: var(--np-text-weight);
        color: var(--np-text-color);
        border: 1px solid var(--np-border-color-emphasis);
      }
      :host ui-clipboard {
        font-size: var(--np-text-size-muted);
        color: var(--np-text-color-muted);
      }

      :host(:hover) ui-clipboard {
        color: var(--np-text-color);
      }
    `,
];
__decorate([
    property({ type: String })
], UiBorderToken.prototype, "token", void 0);
__decorate([
    property({ type: String })
], UiBorderToken.prototype, "applyto", void 0);
UiBorderToken = __decorate([
    customElement("ui-border-token")
], UiBorderToken);
export { UiBorderToken };
//# sourceMappingURL=ui-border-token.js.map