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

Reusable UI components created using lit

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 { html, css } from 'lit';
import { property } from 'lit/decorators.js';
import { EventEmitter } from "../../../utils/EventEmitter.js";
import { ColorPaletteItem } from "./color-palette-item.js";
import { createElement, Trash2 } from 'lucide';
import { condCustomElement } from '../../../decorators/condCustomElement.js';
let ColorPaletteItemEdit = class ColorPaletteItemEdit extends ColorPaletteItem {
    constructor() {
        super(...arguments);
        this.stabilizeWhileEditing = false;
        this.storedAlias = '';
        this.emitter = new EventEmitter();
    }
    content() {
        return html `
			<input
				value=${this.alias || this.color}
				@pointerdown=${(e) => {
            // Focus color & allow for editing alias
            if (!(e.target instanceof HTMLInputElement))
                return;
            e.stopPropagation();
            this.storedAlias = e.target.value;
            e.target.value = '';
            e.target.focus();
        }}
				@contextmenu=${(e) => {
            // Remove alias on right click
            if (!(e.target instanceof HTMLInputElement))
                return;
            e.stopPropagation();
            e.preventDefault();
            e.target.value = this.color.toUpperCase();
            this.alias = '';
            e.target.blur();
        }}
				@keypress=${(e) => {
            if (!(e.target instanceof HTMLInputElement))
                return;
            if (e.key === 'Enter')
                e.target.blur();
        }}
				@focusout=${(e) => {
            // Set alias if changed & de-focus
            if (!(e.target instanceof HTMLInputElement))
                return;
            // Reset input text to stored if user left it empty
            if (e.target.value.trim() === '')
                e.target.value = this.storedAlias;
            // Set alias color if user modified text
            else if (e.target.value !== this.color) {
                this.alias = e.target.value;
            }
            this.emitter.emit('alias', this.alias);
        }}
			>
			<button
				id='trash'
				title='Remove'
				@click=${(e) => this.emitter.emit('trash', e)}
			>
				${createElement(Trash2)}
			</button>
		`;
    }
};
ColorPaletteItemEdit.styles = [
    ...ColorPaletteItem.styles,
    css `
			:host([stabilizeWhileEditing]:hover) {
				flex-basis: 0 !important;
			}

			:host(:not([stabilizeWhileEditing])) #container {
				display: none;
			}

			:host(:not([stabilizeWhileEditing]):hover) #container {
				display: flex;
			}

			#container {
				input {
					color: var(--palette-item-color);
					font-size: var(--palette-item-font-size);
					font-weight: bold;
					user-select: none;
					border: none;
					background-color: transparent;
					field-sizing: content;
					min-width: 2rem;
					max-width: 5rem;
					cursor: pointer;
					text-align: center;
				}

				/* Color Trash Button */
				#trash {
					background-color: var(--palette-item-background-color);
					color: var(--palette-item-color);
					box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 20px -28px inset;
					cursor: pointer;

					border: none;
					border-radius: 5px;
					padding: 4px 12px;

					&:hover {
						background-color: rgb(75, 75, 75);
					}

					svg {
						width: 18px;
						height: 18px;
					}
				}
			}
		`
];
__decorate([
    property({ type: Boolean, reflect: true })
], ColorPaletteItemEdit.prototype, "stabilizeWhileEditing", void 0);
ColorPaletteItemEdit = __decorate([
    condCustomElement('color-palette-item-edit')
], ColorPaletteItemEdit);
export { ColorPaletteItemEdit };