@alegendstale/holly-components 2.0.2 → 2.0.4

package/dist/components/color-palette/item/color-palette-item-edit.styles.js

@@ -1,51 +1,54 @@
-import { css } from 'lit';
-export default 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;
-			}
-		}
-	}
+import { css as o } from "lit";
+const e = o`
+	: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;
+			}
+		}
+	}
 `;
+export {
+  e as default
+};

package/dist/components/color-palette/item/color-palette-item.js

@@ -1,111 +1,76 @@
-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 as y, html as p, nothing as m } from "lit";
+import { query as d, property as o, customElement as u } from "lit/decorators.js";
+import { defaultSettings as h, AliasMode as f } from "../color-palette-utils.js";
+import { EventEmitter as g } from "../../../utils/EventEmitter.js";
+import { getForegroundColor as v, getAdjustedFontSize as C } from "../../../utils/basicUtils.js";
+import P from "./color-palette-item.styles.js";
+var b = 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, c; a >= 0; a--)
+    (c = i[a]) && (r = (l ? c(s, n, r) : c(r)) || r);
+  return l && r && b(s, n, r), r;
 };
-import { LitElement, html, nothing } from 'lit';
-import { customElement, 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 styles from './color-palette-item.styles.js';
-/**
- * A color item meant to be used with color-palette.
- *
- * @cssprop {<color>} --palette-item-background-color - The background color of the item.
- * @cssprop {<color>} --palette-item-color - The color of the item.
- * @cssprop {<length>} --palette-item-font-size - The font-size the item will use.
- */
-let ColorPaletteItem = class ColorPaletteItem extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** The color the item will display. */
-        this.color = '';
-        /** The alias for the color. */
-        this.alias = '';
-        /** How the alias will display. */
-        this.aliasMode = defaultSettings.aliasMode;
-        /** The direction the palette wants the item to display.  */
-        this.direction = defaultSettings.direction;
-        /** Whether the item is being edited. */
-        this.editMode = false;
-        /** The height of the item. */
-        this.height = defaultSettings.height;
-        /** Whether hovering over the item is permitted. */
-        this.preventHover = false;
-        /** Whether the text on the item is hidden. */
-        this.hideText = false;
-        /** The total number of colors the palette expects. */
-        this.colorCount = 0;
-        /** Public way to subscribe to events. */
-        this.emitter = new EventEmitter();
-    }
-    static { this.styles = [styles]; }
-    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>
+let t = class extends y {
+  constructor() {
+    super(...arguments), this.color = "", this.alias = "", this.aliasMode = h.aliasMode, this.direction = h.direction, this.editMode = !1, this.height = h.height, this.preventHover = !1, this.hideText = !1, this.colorCount = 0, this.emitter = new g();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.emitter.clear();
+  }
+  render() {
+    return this.style.setProperty("--palette-item-background-color", this.color), this.style.setProperty("--palette-item-color", v(this.color)), this.style.setProperty("--palette-item-font-size", `${C(this.colorCount)}px`), p`
+			<div
+				id='container'
+				@click=${(i) => this.emitter.emit("click", i)}
+			>
+				${this.content()}
+			</div>
 		`;
-    }
-    /** Renders the content */
-    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}
+  }
+  /** Renders the content */
+  content() {
+    const i = this.aliasMode === f.Both || this.alias == null || this.alias.trim() === "";
+    return p`
+			${i ? p`<span id='text'>${this.color.trim().toUpperCase()}</span>` : m}
+			${this.alias !== "" ? p`
+					<span id="alias">${this.alias}</span>
+				` : m}
 		`;
-    }
+  }
+};
+t.styles = [P];
+e([
+  d("#container")
+], t.prototype, "container", 2);
+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([
+  u("color-palette-item")
+], t);
+export {
+  t as ColorPaletteItem
 };
-__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([
-    customElement('color-palette-item')
-], ColorPaletteItem);
-export { ColorPaletteItem };

package/dist/components/color-palette/item/color-palette-item.styles.js

@@ -1,83 +1,86 @@
-import { css } from 'lit';
-export default 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;
-		}
-	}
+import { css as e } from "lit";
+const o = e`
+	: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;
+		}
+	}
 `;
+export {
+  o as default
+};