@alegendstale/holly-components 2.0.2 → 2.0.4

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

@@ -1,90 +1,93 @@
-import { css } from 'lit';
-export default css `
-	:host {
-		display: block;
-		width: fit-content;
-	}
-
-	:host([direction='row']) #palette {
-		flex-direction: column;
-	}
-
-	/* Edit Mode */
-	:host([editMode]) #palette {
-		overflow-x: auto;
-	}
-
-	// Invalid Palette
-	:host(:not([status='Valid'])) #palette {
-	}
-
-	/* Palette Container */
-
-	#container {
-		cursor: pointer;
-		position: relative;
-		background-color: #000;
-		contain: paint;
-	}
-
-	#container.palette-scroll {
-		overflow-x: auto;
-	}
-
-	/* Palette */
-
-	#palette {
-		/* fallback vars */
-		--palette-height: 150px;
-		--palette-width: 700px;
-		--palette-background-color: transparent;
-		--palette-color: #000;
-		--palette-column-flex-basis: 80px;
-		--palette-corners: 5px;
-
-		display: flex;
-		flex-direction: row;
-		border-radius: var(--palette-corners);
-		overflow: hidden;
-		cursor: pointer;
-		height: var(--palette-height);
-		width: var(--palette-width);
-		position: relative;
-		scrollbar-width: thin;
-
-		/* Drag & Drop */
-
-		& > .is-dragging {
-			opacity: 0;
-		}
-
-		& > #invalid {
-			position: absolute;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			height: var(--palette-height);
-			width: var(--palette-width);
-			background-color: #000000c0;
-			border-radius: var(--palette-corners);
-
-			& > span {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				color: white;
-				background-color: #000;
-				width: 100%;
-				height: 30%;
-				text-align: center;
-				user-select: none;
-			}
-		}
-	}
-
-	@keyframes pulse {
-		50% {
-			background-color: #ffff0080;
-		}
-	}
+import { css as t } from "lit";
+const o = t`
+	:host {
+		display: block;
+		width: fit-content;
+	}
+
+	:host([direction='row']) #palette {
+		flex-direction: column;
+	}
+
+	/* Edit Mode */
+	:host([editMode]) #palette {
+		overflow-x: auto;
+	}
+
+	// Invalid Palette
+	:host(:not([status='Valid'])) #palette {
+	}
+
+	/* Palette Container */
+
+	#container {
+		cursor: pointer;
+		position: relative;
+		background-color: #000;
+		contain: paint;
+	}
+
+	#container.palette-scroll {
+		overflow-x: auto;
+	}
+
+	/* Palette */
+
+	#palette {
+		/* fallback vars */
+		--palette-height: 150px;
+		--palette-width: 700px;
+		--palette-background-color: transparent;
+		--palette-color: #000;
+		--palette-column-flex-basis: 80px;
+		--palette-corners: 5px;
+
+		display: flex;
+		flex-direction: row;
+		border-radius: var(--palette-corners);
+		overflow: hidden;
+		cursor: pointer;
+		height: var(--palette-height);
+		width: var(--palette-width);
+		position: relative;
+		scrollbar-width: thin;
+
+		/* Drag & Drop */
+
+		& > .is-dragging {
+			opacity: 0;
+		}
+
+		& > #invalid {
+			position: absolute;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: var(--palette-height);
+			width: var(--palette-width);
+			background-color: #000000c0;
+			border-radius: var(--palette-corners);
+
+			& > span {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				color: white;
+				background-color: #000;
+				width: 100%;
+				height: 30%;
+				text-align: center;
+				user-select: none;
+			}
+		}
+	}
+
+	@keyframes pulse {
+		50% {
+			background-color: #ffff0080;
+		}
+	}
 `;
+export {
+  o as default
+};

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

@@ -1,192 +1,138 @@
-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 $, html as g } from "lit";
+import { query as u, property as f, state as v, customElement as b } from "lit/decorators.js";
+import { createRef as M, ref as p } from "lit/directives/ref.js";
+import { ColorPalette as y } from "../color-palette.js";
+import { ColorPaletteMenu as m } from "../menu/color-palette-menu.js";
+import { defaultSettings as a } from "../color-palette-utils.js";
+import { ColorPaletteEditor as P } from "../editor/color-palette-editor.js";
+import w from "./color-palette-component.styles.js";
+var x = Object.defineProperty, O = Object.getOwnPropertyDescriptor, h = (n, o, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? O(o, s) : o, c = n.length - 1, t; c >= 0; c--)
+    (t = n[c]) && (r = (i ? t(o, s, r) : t(r)) || r);
+  return i && r && x(o, s, r), r;
 };
-import { LitElement, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { ref, createRef } from 'lit/directives/ref.js';
-import { ColorPalette } from '../color-palette.js';
-import { ColorPaletteMenu } from '../menu/color-palette-menu.js';
-import { defaultSettings } from '../color-palette-utils.js';
-import { ColorPaletteEditor } from '../editor/color-palette-editor.js';
-import styles from './color-palette-component.styles.js';
-/**
- * color-palette components combined.
- *
- * @dependency color-palette
- * @dependency bottom-sheet
- * @dependency color-palette-menu
- * @dependency absolute-container
- * @dependency color-palette-editor
- */
-let ColorPaletteComponent = class ColorPaletteComponent extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** The palette colors. */
-        this.colors = [];
-        /** The palette settings. */
-        this.settings = {
-            height: defaultSettings.height,
-            width: defaultSettings.width,
-            direction: defaultSettings.direction,
-            gradient: defaultSettings.gradient,
-            preventHover: defaultSettings.preventHover,
-            hideText: defaultSettings.hideText,
-            override: defaultSettings.override,
-            aliases: []
-        };
-        /** Whether the palette is in edit mode. */
-        this.editMode = false;
-        /** Whether the screen is mobile sized. */
-        this.isMobile = false;
-    }
-    static { this.styles = [styles]; }
-    firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
-        const observer = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                this.isMobile = entry.contentRect.width < 1400;
-            }
-        });
-        observer.observe(this);
-    }
-    render() {
-        let sheetRef = createRef();
-        let menuEl;
-        let editorEl;
-        const menuRef = (menu) => {
-            if (!(menu instanceof ColorPaletteMenu))
-                return;
-            menuEl = menu;
-            // Reset emitters each time menu updates
-            menu.emitter.clear();
-            menu.emitter.on('change', (colors) => {
-                if (colors)
-                    this.colors = colors;
-            });
-            menu.emitter.on('editMode', (val) => this.editMode = val);
-            menu.emitter.on('openEditor', () => {
-                this.absolute.toggle();
-                // Reset editor before opening
-                editorEl.colors = this.colors;
-                editorEl.settings = this.settings;
-            });
-        };
-        const paletteRef = (palette) => {
-            if (!(palette instanceof ColorPalette))
-                return;
-            palette.emitter.clear();
-            palette.emitter.on('changed', (colors, settings) => {
-                this.colors = colors;
-                this.settings = settings;
-            });
-        };
-        const editorRef = (editor) => {
-            if (!(editor instanceof ColorPaletteEditor))
-                return;
-            editorEl = editor;
-            editor.emitter.clear();
-            editor.emitter.on('submit', (colors, settings) => {
-                this.colors = colors;
-                this.settings = settings;
-                this.absolute.setOpen(false);
-            });
-        };
-        return html `
-			<color-palette
-				.colors=${this.colors}
-				height=${this.settings.height}
-				width=${this.settings.width}
-				direction=${this.settings.direction}
-				?gradient=${this.settings.gradient}
-				?preventHover=${this.settings.preventHover}
-				?hideText=${this.settings.hideText}
-				?override=${this.settings.override}
-				.aliases=${this.settings.aliases}
-				?editMode=${this.editMode}
-				@contextmenu=${(e) => {
-            e.preventDefault();
-            let sheet = sheetRef.value;
-            if (this.isMobile)
-                sheet && sheet.toggleSheet();
-            else {
-                menuEl.absolute.toggle();
-                menuEl.absolute.setPosition(e.clientX + 16, e.clientY);
-            }
-        }}
-				${ref(paletteRef)}
-			>
-			</color-palette>
-
-			${this.isMobile
-            ? html `
-					<bottom-sheet
-						.snapPoints=${[0, 50]}
-						${ref(sheetRef)}
-					>
-						<color-palette-menu
-							.palette=${this}
-							.colors=${this.colors}
-							.settings=${this.settings}
-							?editMode=${this.editMode}
+let l = class extends $ {
+  constructor() {
+    super(...arguments), this.colors = [], this.settings = {
+      height: a.height,
+      width: a.width,
+      direction: a.direction,
+      gradient: a.gradient,
+      preventHover: a.preventHover,
+      hideText: a.hideText,
+      override: a.override,
+      aliases: []
+    }, this.editMode = !1, this.isMobile = !1;
+  }
+  firstUpdated(n) {
+    super.firstUpdated(n), new ResizeObserver((s) => {
+      for (const i of s)
+        this.isMobile = i.contentRect.width < 1400;
+    }).observe(this);
+  }
+  render() {
+    let n = M(), o, s;
+    const i = (t) => {
+      t instanceof m && (o = t, t.emitter.clear(), t.emitter.on("change", (e) => {
+        e && (this.colors = e);
+      }), t.emitter.on("editMode", (e) => this.editMode = e), t.emitter.on("openEditor", () => {
+        this.absolute.toggle(), s.colors = this.colors, s.settings = this.settings;
+      }));
+    }, r = (t) => {
+      t instanceof y && (t.emitter.clear(), t.emitter.on("changed", (e, d) => {
+        this.colors = e, this.settings = d;
+      }));
+    }, c = (t) => {
+      t instanceof P && (s = t, t.emitter.clear(), t.emitter.on("submit", (e, d) => {
+        this.colors = e, this.settings = d, this.absolute.setOpen(!1);
+      }));
+    };
+    return g`
+			<color-palette
+				.colors=${this.colors}
+				height=${this.settings.height}
+				width=${this.settings.width}
+				direction=${this.settings.direction}
+				?gradient=${this.settings.gradient}
+				?preventHover=${this.settings.preventHover}
+				?hideText=${this.settings.hideText}
+				?override=${this.settings.override}
+				.aliases=${this.settings.aliases}
+				?editMode=${this.editMode}
+				@contextmenu=${(t) => {
+      t.preventDefault();
+      let e = n.value;
+      this.isMobile ? e && e.toggleSheet() : (o.absolute.toggle(), o.absolute.setPosition(t.clientX + 16, t.clientY));
+    }}
+				${p(r)}
+			>
+			</color-palette>
+
+			${this.isMobile ? g`
+					<bottom-sheet
+						.snapPoints=${[0, 50]}
+						${p(n)}
+					>
+						<color-palette-menu
+							.palette=${this}
+							.colors=${this.colors}
+							.settings=${this.settings}
+							?editMode=${this.editMode}
 							@click=${() => {
-                let sheet = sheetRef.value;
-                if (sheet)
-                    sheet.toggleSheet();
-            }}
-							${ref(menuRef)}
-						>
-						</color-palette-menu>
-					</bottom-sheet>
-				`
-            : html `
-					<color-palette-menu
-						.palette=${this}
-						.colors=${this.colors}
-						.settings=${this.settings}
-						?editMode=${this.editMode}
-						@click=${(e) => {
-                if (!(e.target instanceof ColorPaletteMenu))
-                    return;
-                e.target.absolute.toggle();
-            }}
-						${ref(menuRef)}
-					>
-					</color-palette-menu>
-				`}
-			
-			<absolute-container>
-				<color-palette-editor
-					.colors=${this.colors}
-					.settings=${this.settings}
-					${ref(editorRef)}
-				>
-				</color-palette-editor>
-			</absolute-container>
+      let t = n.value;
+      t && t.toggleSheet();
+    }}
+							${p(i)}
+						>
+						</color-palette-menu>
+					</bottom-sheet>
+				` : g`
+					<color-palette-menu
+						.palette=${this}
+						.colors=${this.colors}
+						.settings=${this.settings}
+						?editMode=${this.editMode}
+						@click=${(t) => {
+      t.target instanceof m && t.target.absolute.toggle();
+    }}
+						${p(i)}
+					>
+					</color-palette-menu>
+				`}
+			
+			<absolute-container>
+				<color-palette-editor
+					.colors=${this.colors}
+					.settings=${this.settings}
+					${p(c)}
+				>
+				</color-palette-editor>
+			</absolute-container>
 		`;
-    }
+  }
+};
+l.styles = [w];
+h([
+  u("color-palette")
+], l.prototype, "palette", 2);
+h([
+  u("absolute-container")
+], l.prototype, "absolute", 2);
+h([
+  f({ type: Array })
+], l.prototype, "colors", 2);
+h([
+  f({ type: Object })
+], l.prototype, "settings", 2);
+h([
+  f({ type: Boolean })
+], l.prototype, "editMode", 2);
+h([
+  v()
+], l.prototype, "isMobile", 2);
+l = h([
+  b("color-palette-component")
+], l);
+export {
+  l as ColorPaletteComponent
 };
-__decorate([
-    query('color-palette')
-], ColorPaletteComponent.prototype, "palette", void 0);
-__decorate([
-    query('absolute-container')
-], ColorPaletteComponent.prototype, "absolute", void 0);
-__decorate([
-    property({ type: Array })
-], ColorPaletteComponent.prototype, "colors", void 0);
-__decorate([
-    property({ type: Object })
-], ColorPaletteComponent.prototype, "settings", void 0);
-__decorate([
-    property({ type: Boolean })
-], ColorPaletteComponent.prototype, "editMode", void 0);
-__decorate([
-    state()
-], ColorPaletteComponent.prototype, "isMobile", void 0);
-ColorPaletteComponent = __decorate([
-    customElement('color-palette-component')
-], ColorPaletteComponent);
-export { ColorPaletteComponent };

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

@@ -1,10 +1,13 @@
-import { css } from 'lit';
-export default css `
-	:host {
-		display: block;
-	}
-
-	absolute-container::part(dialog)::backdrop {
-		background-color: rgba(0, 0, 0, 0.8);
-	}
+import { css as o } from "lit";
+const r = o`
+	:host {
+		display: block;
+	}
+
+	absolute-container::part(dialog)::backdrop {
+		background-color: rgba(0, 0, 0, 0.8);
+	}
 `;
+export {
+  r as default
+};