@alegendstale/holly-components/dist/components/color-palette/item/color-palette-item.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 { LitElement, html, css, nothing } from 'lit';
import { property, query } from 'lit/decorators.js';
import { AliasMode, defaultSettings } from '../color-palette-utils.js';
import { EventEmitter } from '../../../utils/EventEmitter.js';
import { getAdjustedFontSize, getForegroundColor } from '../../../utils/basicUtils.js';
import { condCustomElement } from '../../../decorators/condCustomElement.js';
let ColorPaletteItem = class ColorPaletteItem extends LitElement {
    constructor() {
        super(...arguments);
        this.color = '';
        this.alias = '';
        this.aliasMode = defaultSettings.aliasMode;
        this.direction = defaultSettings.direction;
        this.editMode = false;
        this.height = defaultSettings.height;
        this.preventHover = false;
        this.hideText = false;
        this.colorCount = 0;
        this.emitter = new EventEmitter();
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.emitter.clear();
    }
    render() {
        this.style.setProperty('--palette-item-background-color', this.color);
        this.style.setProperty('--palette-item-color', getForegroundColor(this.color));
        this.style.setProperty('--palette-item-font-size', `${getAdjustedFontSize(this.colorCount)}px`);
        return html `
			<div
				id='container'
				@click=${(e) => this.emitter.emit('click', e)}
			>
				${this.content()}
			</div>
		`;
    }
    content() {
        // Display hex if alias mode is set to both OR if alias is not set
        const showText = this.aliasMode === AliasMode.Both || this.alias == null || this.alias.trim() === '';
        return html `
			${showText
            ? html `<span id='text'>${this.color.trim().toUpperCase()}</span>`
            : nothing}
			${this.alias !== ''
            ? html `
					<span id="alias">${this.alias}</span>
				`
            : nothing}
			
		`;
    }
};
ColorPaletteItem.styles = [
    css `
			:host {
				--palette-item-background-color: #000000;
				--palette-item-color: #ffffff;
				--palette-item-font-size: 16px;

				display: flex;
				flex: 1;
				transition: all 0.1s ease-in-out;
				background-color: var(--palette-item-background-color);
				color: var(--palette-item-color);
			}

			/* Animation Size */

			:host(:not([preventHover]):hover) {
				flex-basis: var(--palette-column-flex-basis);
			}

			:host([direction='column']:not([preventHover]):hover) {
				flex-basis: 80px;
			}

			/* Hover States */

			:host(:not([preventHover])) #container > span {
				display: none;
			}

			:host(:not([preventHover]):hover) #container > span {
				display: block;
			}

			:host([hideText]) #container > span {
				display: none;
			}

			:host([hideText]:hover) #container > span {
				display: none;
			}

			/* Container Directions */
			
			:host([direction='column']) > #container{
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			:host([direction='row']) > #container {
				display: flex;
				justify-content: center;
			}

			:host([direction='row'][editMode]) > #container {
				display: grid;
				grid-template-columns: 1fr 1fr;
			}

			#container {
				flex: 1;
				gap: 3%;

				*:first-child {
					justify-self: flex-end;
					align-self: center;
				}

				*:last-child {
					justify-self: flex-start;
					align-self: center;
				}

				span {
					display: block;
					text-align: center;
					font-size: 100%;
					font-weight: bold;
					user-select: none;
				}
			}
		`
];
__decorate([
    query('#container')
], ColorPaletteItem.prototype, "container", void 0);
__decorate([
    property({ type: String })
], ColorPaletteItem.prototype, "color", void 0);
__decorate([
    property({ type: String })
], ColorPaletteItem.prototype, "alias", void 0);
__decorate([
    property({ type: String })
], ColorPaletteItem.prototype, "aliasMode", void 0);
__decorate([
    property({ type: String, reflect: true })
], ColorPaletteItem.prototype, "direction", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ColorPaletteItem.prototype, "editMode", void 0);
__decorate([
    property({ type: Number })
], ColorPaletteItem.prototype, "height", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ColorPaletteItem.prototype, "preventHover", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ColorPaletteItem.prototype, "hideText", void 0);
__decorate([
    property({ type: Number })
], ColorPaletteItem.prototype, "colorCount", void 0);
ColorPaletteItem = __decorate([
    condCustomElement('color-palette-item')
], ColorPaletteItem);
export { ColorPaletteItem };