@alegendstale/holly-components
Version:
Reusable UI components created using lit
70 lines (69 loc) • 2.27 kB
JavaScript
import { LitElement as d, html as p, nothing as y } from "lit";
import { property as o, customElement as m } from "lit/decorators.js";
import { defaultSettings as c, AliasMode as u } from "../color-palette-utils.js";
import { getForegroundColor as f, getAdjustedFontSize as g } from "../../../utils/basicUtils.js";
import v from "./color-palette-item.styles.js";
var P = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (i, s, n, l) => {
for (var r = l > 1 ? void 0 : l ? x(s, n) : s, a = i.length - 1, h; a >= 0; a--)
(h = i[a]) && (r = (l ? h(s, n, r) : h(r)) || r);
return l && r && P(s, n, r), r;
};
let t = class extends d {
constructor() {
super(...arguments), this.color = "", this.alias = "", this.aliasMode = c.aliasMode, this.direction = c.direction, this.editMode = !1, this.height = c.height, this.preventHover = !1, this.hideText = !1, this.colorCount = 0;
}
render() {
return this.style.setProperty("--palette-item-background-color", this.color), this.style.setProperty("--palette-item-color", f(this.color)), this.style.setProperty("--palette-item-font-size", `${g(this.colorCount)}px`), p`
<div
id='container'
=${(i) => this.dispatchEvent(new Event("select", i))}
>
${this.content()}
</div>
`;
}
/** Renders the content */
content() {
const i = this.aliasMode === u.Both || this.alias == null || this.alias.trim() === "";
return p`
${i ? p`<span id='text'>${this.color.trim().toUpperCase()}</span>` : y}
${this.alias !== "" ? p`
<span id="alias">${this.alias}</span>
` : y}
`;
}
};
t.styles = [v];
e([
o({ type: String })
], t.prototype, "color", 2);
e([
o({ type: String })
], t.prototype, "alias", 2);
e([
o({ type: String })
], t.prototype, "aliasMode", 2);
e([
o({ type: String, reflect: !0 })
], t.prototype, "direction", 2);
e([
o({ type: Boolean, reflect: !0 })
], t.prototype, "editMode", 2);
e([
o({ type: Number })
], t.prototype, "height", 2);
e([
o({ type: Boolean, reflect: !0 })
], t.prototype, "preventHover", 2);
e([
o({ type: Boolean, reflect: !0 })
], t.prototype, "hideText", 2);
e([
o({ type: Number })
], t.prototype, "colorCount", 2);
t = e([
m("color-palette-item")
], t);
export {
t as ColorPaletteItem
};