@alegendstale/holly-components 2.0.2 → 2.0.4

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

@@ -1,147 +1,150 @@
-import { css } from 'lit';
-export default css `
-	:host {
-		display: block;
-		contain: content;
-		width: 560px;
-		padding: 16px;
-		background-color: rgb(27, 27, 27);
-		color: rgba(245, 245, 245, 0.9);
-		border-radius: 5px;
-
-		--cta-background: hsl(262, 83%, 69%);
-	}
-
-	input[type='file'] {
-		display: none;
-	}
-
-	:host([selectedInput='Color Picker']) {
-		#color-palette-editor #colors {
-			div:nth-of-type(1) {
-				button[title='Color Picker'] {
-					background-color: var(--cta-background);
-				}
-			}
-			div:nth-of-type(2) {
-				canvas {
-					max-width: 100%;
-					max-height: fit-content;
-					object-fit: cover;
-				}
-			}
-		}
-	}
-
-	:host([selectedInput='Generate']) {
-		#color-palette-editor #colors div {
-			button[title='Generate'] {
-				background-color: var(--cta-background);
-			}
-		}
-	}
-
-	:host([selectedInput='Image']) {
-		#color-palette-editor #colors div {
-			button[title='Image'] {
-				background-color: var(--cta-background);
-			}
-		}
-	}
-
-	:host([selectedInput='URL']) {
-		#color-palette-editor #colors div {
-			button[title='URL'] {
-				background-color: var(--cta-background);
-			}
-		}
-	}
-
-	#color-palette-editor {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-
-		h1 {
-			font-size: 2.25rem;
-		}
-
-		button {
-			cursor: pointer;
-		}
-
-		#colors {
-			div {
-				input:not([type='color']) {
-					color: rgb(245, 245, 245);
-					background-color: rgb(38, 38, 38);
-					border: none;
-					border-radius: 5px;
-					height: fit-content;
-					width: fit-content;
-					padding: 0.5rem;
-				}
-
-				select {
-					color: rgb(245, 245, 245);
-					background-color: rgb(38, 38, 38);
-					border: none;
-					border-radius: 5px;
-					height: fit-content;
-					width: fit-content;
-					padding: 0.5rem;
-				}
-
-				button {
-					color: rgb(245, 245, 245);
-					background-color: rgb(38, 38, 38);
-					border: none;
-					border-radius: 5px;
-					height: fit-content;
-					width: fit-content;
-					padding: 4px 12px;
-				}
-			}
-		}
-
-		#settings {
-			display: flex;
-			flex-direction: column;
-
-			input {
-				color: rgb(245, 245, 245);
-				background-color: rgb(38, 38, 38);
-				border: none;
-				border-radius: 5px;
-				height: fit-content;
-				width: fit-content;
-				padding: 0.5rem;
-			}
-
-			select {
-				color: rgb(245, 245, 245);
-				background-color: rgb(38, 38, 38);
-				border: none;
-				border-radius: 5px;
-				height: fit-content;
-				width: fit-content;
-				padding: 0.5rem;
-			}
-
-			#create-btn {
-				background-color: var(--cta-background);
-				color: white;
-				border-radius: 5px;
-				padding: 4px 12px;
-				user-select: none;
-				border: none;
-				width: fit-content;
-				align-self: flex-end;
-
-				&:hover {
-					background-color: hsl(calc(262 - 3), calc(83% * 1.02), calc(69% * 1.15));
-				}
-			}
-		}
-	}
+import { css as o } from "lit";
+const r = o`
+	:host {
+		display: block;
+		contain: content;
+		width: 560px;
+		padding: 16px;
+		background-color: rgb(27, 27, 27);
+		color: rgba(245, 245, 245, 0.9);
+		border-radius: 5px;
+
+		--cta-background: hsl(262, 83%, 69%);
+	}
+
+	input[type='file'] {
+		display: none;
+	}
+
+	:host([selectedInput='Color Picker']) {
+		#color-palette-editor #colors {
+			div:nth-of-type(1) {
+				button[title='Color Picker'] {
+					background-color: var(--cta-background);
+				}
+			}
+			div:nth-of-type(2) {
+				canvas {
+					max-width: 100%;
+					max-height: fit-content;
+					object-fit: cover;
+				}
+			}
+		}
+	}
+
+	:host([selectedInput='Generate']) {
+		#color-palette-editor #colors div {
+			button[title='Generate'] {
+				background-color: var(--cta-background);
+			}
+		}
+	}
+
+	:host([selectedInput='Image']) {
+		#color-palette-editor #colors div {
+			button[title='Image'] {
+				background-color: var(--cta-background);
+			}
+		}
+	}
+
+	:host([selectedInput='URL']) {
+		#color-palette-editor #colors div {
+			button[title='URL'] {
+				background-color: var(--cta-background);
+			}
+		}
+	}
+
+	#color-palette-editor {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+
+		h1 {
+			font-size: 2.25rem;
+		}
+
+		button {
+			cursor: pointer;
+		}
+
+		#colors {
+			div {
+				input:not([type='color']) {
+					color: rgb(245, 245, 245);
+					background-color: rgb(38, 38, 38);
+					border: none;
+					border-radius: 5px;
+					height: fit-content;
+					width: fit-content;
+					padding: 0.5rem;
+				}
+
+				select {
+					color: rgb(245, 245, 245);
+					background-color: rgb(38, 38, 38);
+					border: none;
+					border-radius: 5px;
+					height: fit-content;
+					width: fit-content;
+					padding: 0.5rem;
+				}
+
+				button {
+					color: rgb(245, 245, 245);
+					background-color: rgb(38, 38, 38);
+					border: none;
+					border-radius: 5px;
+					height: fit-content;
+					width: fit-content;
+					padding: 4px 12px;
+				}
+			}
+		}
+
+		#settings {
+			display: flex;
+			flex-direction: column;
+
+			input {
+				color: rgb(245, 245, 245);
+				background-color: rgb(38, 38, 38);
+				border: none;
+				border-radius: 5px;
+				height: fit-content;
+				width: fit-content;
+				padding: 0.5rem;
+			}
+
+			select {
+				color: rgb(245, 245, 245);
+				background-color: rgb(38, 38, 38);
+				border: none;
+				border-radius: 5px;
+				height: fit-content;
+				width: fit-content;
+				padding: 0.5rem;
+			}
+
+			#create-btn {
+				background-color: var(--cta-background);
+				color: white;
+				border-radius: 5px;
+				padding: 4px 12px;
+				user-select: none;
+				border: none;
+				width: fit-content;
+				align-self: flex-end;
+
+				&:hover {
+					background-color: hsl(calc(262 - 3), calc(83% * 1.02), calc(69% * 1.15));
+				}
+			}
+		}
+	}
 `;
+export {
+  r as default
+};

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

@@ -1,43 +1,35 @@
-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 c, html as f } from "lit";
+import { property as l, customElement as h } from "lit/decorators.js";
+import v from "./settings-item.styles.js";
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (m, r, p, s) => {
+  for (var t = s > 1 ? void 0 : s ? y(r, p) : r, o = m.length - 1, i; o >= 0; o--)
+    (i = m[o]) && (t = (s ? i(r, p, t) : i(t)) || t);
+  return s && t && u(r, p, t), t;
 };
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import styles from './settings-item.styles.js';
-/**
- * The settings item using inside of the editor.
- *
- * @slot - The setting.
- */
-let SettingItem = class SettingItem extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** The name of the setting. */
-        this.name = '';
-        /** The description of the setting. */
-        this.description = '';
-    }
-    static { this.styles = [styles]; }
-    render() {
-        return html `
-			<div>
-				<h3>${this.name}</h3>
-				<p>${this.description}</p>
-			</div>
-			<slot></slot>
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.name = "", this.description = "";
+  }
+  render() {
+    return f`
+			<div>
+				<h3>${this.name}</h3>
+				<p>${this.description}</p>
+			</div>
+			<slot></slot>
 		`;
-    }
+  }
+};
+e.styles = [v];
+n([
+  l({ type: String })
+], e.prototype, "name", 2);
+n([
+  l({ type: String })
+], e.prototype, "description", 2);
+e = n([
+  h("setting-item")
+], e);
+export {
+  e as SettingItem
 };
-__decorate([
-    property({ type: String })
-], SettingItem.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], SettingItem.prototype, "description", void 0);
-SettingItem = __decorate([
-    customElement('setting-item')
-], SettingItem);
-export { SettingItem };

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

@@ -1,34 +1,37 @@
-import { css } from 'lit';
-export default css `
-	:host {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		padding-block: 2%;
-	}
-
-	:host(:not([description])) p {
-		display: none;
-	}
-
-	h3 {
-		margin: 0;
-		font-size: 15px;
-	}
-
-	p {
-		margin: 0;
-		padding-top: 4px;
-		font-size: 12px;
-	}
-
-	slot {
-		display: flex;
-		justify-self: flex-end;
-		align-items: center;
-		gap: 5%;
-	}
-
-	::slotted(input[type='color']) {
-		border: none;
-	}
+import { css as t } from "lit";
+const o = t`
+	:host {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		padding-block: 2%;
+	}
+
+	:host(:not([description])) p {
+		display: none;
+	}
+
+	h3 {
+		margin: 0;
+		font-size: 15px;
+	}
+
+	p {
+		margin: 0;
+		padding-top: 4px;
+		font-size: 12px;
+	}
+
+	slot {
+		display: flex;
+		justify-self: flex-end;
+		align-items: center;
+		gap: 5%;
+	}
+
+	::slotted(input[type='color']) {
+		border: none;
+	}
 `;
+export {
+  o as default
+};

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

@@ -1,87 +1,53 @@
-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 as m } from "lit";
+import { property as p, customElement as f } from "lit/decorators.js";
+import { EventEmitter as c } from "../../../utils/EventEmitter.js";
+import { ColorPaletteItem as n } from "./color-palette-item.js";
+import { createElement as h, Trash2 as g } from "lucide";
+import v from "./color-palette-item-edit.styles.js";
+var E = Object.defineProperty, b = Object.getOwnPropertyDescriptor, u = (t, r, a, i) => {
+  for (var e = i > 1 ? void 0 : i ? b(r, a) : r, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (e = (i ? l(r, a, e) : l(e)) || e);
+  return i && e && E(r, a, e), e;
 };
-import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { EventEmitter } from "../../../utils/EventEmitter.js";
-import { ColorPaletteItem } from "./color-palette-item.js";
-import { createElement, Trash2 } from 'lucide';
-import styles from './color-palette-item-edit.styles.js';
-/**
- * A color item in its edit state meant to be used with color-palette.
- */
-let ColorPaletteItemEdit = class ColorPaletteItemEdit extends ColorPaletteItem {
-    constructor() {
-        super(...arguments);
-        /** Prevent hover while item is being edited. */
-        this.stabilizeWhileEditing = false;
-        /** @internal */
-        this.storedAlias = '';
-        /** Public way to subscribe to events. */
-        this.emitter = new EventEmitter();
-    }
-    static { this.styles = [...ColorPaletteItem.styles, styles]; }
-    /** Renders the content. */
-    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>
+let s = class extends n {
+  constructor() {
+    super(...arguments), this.stabilizeWhileEditing = !1, this.storedAlias = "", this.emitter = new c();
+  }
+  /** Renders the content. */
+  content() {
+    return m`
+			<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.emitter.emit("alias", this.alias));
+    }}
+			>
+			<button
+				id='trash'
+				title='Remove'
+				@click=${(t) => this.emitter.emit("trash", t)}
+			>
+				${h(g)}
+			</button>
 		`;
-    }
+  }
+};
+s.styles = [...n.styles, v];
+u([
+  p({ type: Boolean, reflect: !0 })
+], s.prototype, "stabilizeWhileEditing", 2);
+s = u([
+  f("color-palette-item-edit")
+], s);
+export {
+  s as ColorPaletteItemEdit
 };
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ColorPaletteItemEdit.prototype, "stabilizeWhileEditing", void 0);
-ColorPaletteItemEdit = __decorate([
-    customElement('color-palette-item-edit')
-], ColorPaletteItemEdit);
-export { ColorPaletteItemEdit };