@nopwdio/ui
Version:
Nopwd Design System
71 lines (69 loc) • 2.32 kB
JavaScript
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-border-token.js";
let UiBorderTokens = class UiBorderTokens extends LitElement {
constructor() {
super(...arguments);
this.prefix = "";
this.suffix = "";
this.applyto = "";
}
render() {
return html `
<span class="prefix">${this.prefix}</span>
<span class="tokens">
${this.suffix.split(",").map((s) => {
return html `<ui-border-token
token="${this.prefix}${s.length ? `-${s}` : ``}"
applyto=${this.applyto}
>${s.length ? `-${s}` : `default`}</ui-border-token
>`;
})}
</span>
`;
}
};
UiBorderTokens.styles = [
css `
:host {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--np-gap);
}
.prefix {
font-size: var(--np-text-size-muted);
font-weight: var(--np-text-weight-emphasis);
padding: var(--np-padding) 0;
border-bottom: 1px solid var(--np-border-color-muted);
}
.tokens {
align-items: flex-end;
display: flex;
flex: 1;
font-size: var(--np-text-size);
overflow-x: scroll;
gap: var(--np-gap);
}
`,
];
__decorate([
property()
], UiBorderTokens.prototype, "prefix", void 0);
__decorate([
property()
], UiBorderTokens.prototype, "suffix", void 0);
__decorate([
property()
], UiBorderTokens.prototype, "applyto", void 0);
UiBorderTokens = __decorate([
customElement("ui-border-tokens")
], UiBorderTokens);
export { UiBorderTokens };
//# sourceMappingURL=ui-border-tokens.js.map