@alegendstale/holly-components 0.2.9 → 0.2.10

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

@@ -0,0 +1,39 @@
+import { html } from 'lit';
+import { Combination, generateColors } from '../../../utils/generateUtils';
+import { ref } from 'lit/directives/ref.js';
+import { ColorPaletteEditor } from './color-palette-editor';
+import { defaultSettings } from '../color-palette-utils';
+import { pluginToPaletteSettings } from '../../../utils/basicUtils';
+const meta = {
+    title: 'Color Palette/Palette Editor',
+    tags: ['autodocs'],
+    component: 'color-palette-editor',
+};
+export default meta;
+function setEditorEvents(editor) {
+    if (!(editor instanceof ColorPaletteEditor))
+        return;
+    editor.emitter.clear();
+    editor.emitter.on('submit', (colors, settings) => {
+        alert(`colors ${colors} settings ${JSON.stringify(settings)}`);
+    });
+}
+const Template = {
+    render: ({ colors, settings }) => {
+        return html `
+			<color-palette-editor
+				.colors=${colors}
+				.settings=${settings}
+				${ref(setEditorEvents)}
+			>
+			</color-palette-editor>
+		`;
+    },
+};
+export const Default = {
+    ...Template,
+    args: {
+        colors: generateColors(Combination.Random).colors,
+        settings: pluginToPaletteSettings(defaultSettings)
+    }
+};

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

@@ -0,0 +1 @@
+import './color-palette-editor';

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

@@ -1,7 +1,5 @@
-import "./color-palette.js";
-import "./item/color-palette-item.js";
-import "./item/color-palette-item-edit.js";
-import "./menu/color-palette-menu.js";
-import "./menu/color-palette-reorder.js";
-import "./component/color-palette-component.js";
-import "./editor/color-palette-editor.js";
+import './color-palette';
+import './item';
+import './menu';
+import './component';
+import './editor';

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

@@ -1,91 +1,118 @@
-import { css as l, html as p } from "lit";
-import { customElement as u } from "lit/decorators.js";
-import { EventEmitter as c } from "../../../utils/EventEmitter.js";
-import { ColorPaletteItem as m } from "./color-palette-item.js";
-import { createElement as f, Trash2 as g } from "lucide";
-var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, d = Object.getPrototypeOf, b = Reflect.get, x = (t, r, o, i) => {
-  for (var e = i > 1 ? void 0 : i ? v(r, o) : r, n = t.length - 1, s; n >= 0; n--)
-    (s = t[n]) && (e = (i ? s(r, o, e) : s(e)) || e);
-  return i && e && h(r, o, e), e;
-}, _ = (t, r, o) => b(d(t), o, r);
-let a = class extends m {
-  constructor() {
-    super(...arguments), this.storedAlias = "", this.emitter = new c();
-  }
-  content() {
-    return p`
-			<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)}
-			>
-				${f(g)}
-			</button>
+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 { customElement } from 'lit/decorators.js';
+import { EventEmitter } from "../../../utils/EventEmitter";
+import { ColorPaletteItem } from "./color-palette-item";
+import { createElement, Trash2 } from 'lucide';
+let ColorPaletteItemEdit = class ColorPaletteItemEdit extends ColorPaletteItem {
+    constructor() {
+        super(...arguments);
+        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>
 		`;
-  }
+    }
 };
-a.styles = [
-  ..._(a, a, "styles"),
-  l`
-			:host(:not([preventHover]):hover) {
-				flex-basis: 0 !important;
-			}
-
-			#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;
-					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;
-					}
-				}
-			}
+ColorPaletteItemEdit.styles = [
+    ...(void 0).styles,
+    css `
+			:host(:not([preventHover]):hover) {
+				flex-basis: 0 !important;
+			}
+
+			#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;
+					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;
+					}
+				}
+			}
 		`
 ];
-a = x([
-  u("color-palette-item-edit")
-], a);
-export {
-  a as ColorPaletteItemEdit
-};
+ColorPaletteItemEdit = __decorate([
+    customElement('color-palette-item-edit')
+], ColorPaletteItemEdit);
+export { ColorPaletteItemEdit };

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

@@ -1,146 +1,161 @@
-import { css as h, LitElement as m, html as s, nothing as f } from "lit";
-import { query as u, property as o, customElement as y } from "lit/decorators.js";
-import { defaultSettings as d, AliasMode as g } from "../color-palette-utils.js";
-import { EventEmitter as v } from "../../../utils/EventEmitter.js";
-import { styleMap as x } from "lit/directives/style-map.js";
-import { getForegroundColor as b, getAdjustedFontSize as C } from "../../../utils/basicUtils.js";
-var M = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, e = (r, l, a, n) => {
-  for (var i = n > 1 ? void 0 : n ? $(l, a) : l, c = r.length - 1, p; c >= 0; c--)
-    (p = r[c]) && (i = (n ? p(l, a, i) : p(i)) || i);
-  return n && i && M(l, a, i), i;
+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;
 };
-let t = class extends m {
-  constructor() {
-    super(...arguments), this.color = "", this.alias = "", this.aliasMode = d.aliasMode, this.direction = d.direction, this.editMode = !1, this.height = d.height, this.preventHover = !1, this.hoverWhileEditing = !1, this.colorCount = 0, this.emitter = new v();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.emitter.clear();
-  }
-  render() {
-    const r = {
-      "--palette-item-background-color": this.color,
-      "--palette-item-color": b(this.color),
-      "--palette-item-font-size": `${C(this.colorCount)}px`
-    };
-    return s`
-			<div
-				id='container'
-				style=${x(r)}
-				@click=${(l) => this.emitter.emit("click", l)}
-			>
-				${this.content()}
-			</div>
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { AliasMode, defaultSettings } from '../color-palette-utils';
+import { EventEmitter } from '../../../utils/EventEmitter';
+import { styleMap } from 'lit/directives/style-map.js';
+import { getAdjustedFontSize, getForegroundColor } from '../../../utils/basicUtils';
+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.hoverWhileEditing = false;
+        this.colorCount = 0;
+        this.emitter = new EventEmitter();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.emitter.clear();
+    }
+    render() {
+        const containerStyles = {
+            '--palette-item-background-color': this.color,
+            '--palette-item-color': getForegroundColor(this.color),
+            '--palette-item-font-size': `${getAdjustedFontSize(this.colorCount)}px`
+        };
+        return html `
+			<div
+				id='container'
+				style=${styleMap(containerStyles)}
+				@click=${(e) => this.emitter.emit('click', e)}
+			>
+				${this.content()}
+			</div>
 		`;
-  }
-  content() {
-    const r = this.aliasMode === g.Both || this.alias == null || this.alias.trim() === "";
-    return s`
-			${r ? s`<span id='text'>${this.color.trim().toUpperCase()}</span>` : f}
-			${this.alias !== "" ? s`
-					<span id="alias">${this.alias}</span>
-				` : f}
-			
+    }
+    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}
+			
 		`;
-  }
+    }
 };
-t.styles = [
-  h`
-			:host {
-				display: flex;
-				flex: 1;
-				transition: all 0.1s ease-in-out;
-				--palette-item-background-color: #000000;
-				--palette-item-color: #ffffff;
-				--palette-item-font-size: 16px;
-			}
-
-			:host(:not([preventHover]):hover) {
-				flex-basis: var(--palette-column-flex-basis);
-
-				#container > span {
-					display: block;
-				}
-			}
-
-			:host([direction='column']:not([preventHover]):hover) {
-				flex-basis: 80px;
-			}
-			
-			: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%;
-				background-color: var(--palette-item-background-color);
-				color: var(--palette-item-color);
-
-				*:first-child {
-					justify-self: flex-end;
-					align-self: center;
-				}
-
-				*:last-child {
-					justify-self: flex-start;
-					align-self: center;
-				}
-
-				span {
-					display: none;
-					text-align: center;
-					font-size: 100%;
-					font-weight: bold;
-					user-select: none;
-				}
-			}
+ColorPaletteItem.styles = [
+    css `
+			:host {
+				display: flex;
+				flex: 1;
+				transition: all 0.1s ease-in-out;
+				--palette-item-background-color: #000000;
+				--palette-item-color: #ffffff;
+				--palette-item-font-size: 16px;
+			}
+
+			:host(:not([preventHover]):hover) {
+				flex-basis: var(--palette-column-flex-basis);
+
+				#container > span {
+					display: block;
+				}
+			}
+
+			:host([direction='column']:not([preventHover]):hover) {
+				flex-basis: 80px;
+			}
+			
+			: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%;
+				background-color: var(--palette-item-background-color);
+				color: var(--palette-item-color);
+
+				*:first-child {
+					justify-self: flex-end;
+					align-self: center;
+				}
+
+				*:last-child {
+					justify-self: flex-start;
+					align-self: center;
+				}
+
+				span {
+					display: none;
+					text-align: center;
+					font-size: 100%;
+					font-weight: bold;
+					user-select: none;
+				}
+			}
 		`
 ];
-e([
-  u("#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 })
-], t.prototype, "hoverWhileEditing", 2);
-e([
-  o({ type: Number })
-], t.prototype, "colorCount", 2);
-t = e([
-  y("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 })
+], ColorPaletteItem.prototype, "hoverWhileEditing", 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/index.js

@@ -0,0 +1,2 @@
+import './color-palette-item';
+import './color-palette-item-edit';