@alegendstale/holly-components/dist/components/color-palette/item/color-palette-item-edit.js

Reusable UI components created using lit

import { html as u } from "lit";
import { property as f, customElement as m } from "lit/decorators.js";
import { ColorPaletteItem as n } from "./color-palette-item.js";
import { createElement as c, Trash2 as h } from "lucide";
import v from "./color-palette-item-edit.styles.js";
import { HCPaletteAliasEvent as g } from "../../../events/palette-alias.js";
var E = Object.defineProperty, d = Object.getOwnPropertyDescriptor, p = (t, r, s, a) => {
  for (var e = a > 1 ? void 0 : a ? d(r, s) : r, o = t.length - 1, l; o >= 0; o--)
    (l = t[o]) && (e = (a ? l(r, s, e) : l(e)) || e);
  return a && e && E(r, s, e), e;
};
let i = class extends n {
  constructor() {
    super(...arguments), this.stabilizeWhileEditing = !1, this._storedAlias = "";
  }
  /** Renders the content. */
  content() {
    return u`
			<input
				value=${this.alias || this.color}
				@pointerdown=${(t) => {
      t.target instanceof HTMLInputElement && (t.stopPropagation(), this._storedAlias = t.target.value, t.target.value = "", t.target.focus());
    }}
				@contextmenu=${(t) => {
      t.target instanceof HTMLInputElement && (t.stopPropagation(), t.preventDefault(), t.target.value = this.color.toUpperCase(), this.alias = "", t.target.blur());
    }}
				@keypress=${(t) => {
      t.target instanceof HTMLInputElement && t.key === "Enter" && t.target.blur();
    }}
				@focusout=${(t) => {
      t.target instanceof HTMLInputElement && (t.target.value.trim() === "" ? t.target.value = this._storedAlias : t.target.value !== this.color && (this.alias = t.target.value), this.dispatchEvent(new g({ alias: this.alias })));
    }}
			>
			<button
				id='trash'
				title='Remove'
				@click=${(t) => this.dispatchEvent(new Event("trash", t))}
			>
				${c(h)}
			</button>
		`;
  }
};
i.styles = [...n.styles, v];
p([
  f({ type: Boolean, reflect: !0 })
], i.prototype, "stabilizeWhileEditing", 2);
i = p([
  m("color-palette-item-edit")
], i);
export {
  i as ColorPaletteItemEdit
};