@alegendstale/holly-components 0.2.9 → 0.2.11

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

@@ -1,148 +1,190 @@
-import { css as $, LitElement as v, html as g } from "lit";
-import { query as u, property as f, state as b, customElement as y } from "lit/decorators.js";
-import { createRef as M, ref as p } from "lit/directives/ref.js";
-import { ColorPalette as P } from "../color-palette.js";
-import { ColorPaletteMenu as m } from "../menu/color-palette-menu.js";
-import { defaultSettings as c } from "../color-palette-utils.js";
-import { ColorPaletteEditor as w } from "../editor/color-palette-editor.js";
-var O = Object.defineProperty, R = Object.getOwnPropertyDescriptor, a = (n, s, i, r) => {
-  for (var l = r > 1 ? void 0 : r ? R(s, i) : s, h = n.length - 1, t; h >= 0; h--)
-    (t = n[h]) && (l = (r ? t(s, i, l) : t(l)) || l);
-  return r && l && O(s, i, l), l;
+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 o = class extends v {
-  constructor() {
-    super(...arguments), this.colors = [], this.settings = {
-      height: c.height,
-      width: c.width,
-      direction: c.direction,
-      gradient: c.gradient,
-      preventHover: c.preventHover,
-      override: c.override,
-      aliases: []
-    }, this.editMode = !1, this.isMobile = !1, this.edit = !1;
-  }
-  firstUpdated(n) {
-    super.firstUpdated(n), new ResizeObserver((i) => {
-      for (const r of i)
-        this.isMobile = r.contentRect.width < 1400;
-    }).observe(this);
-  }
-  render() {
-    let n = M(), s, i;
-    const r = (t) => {
-      t instanceof m && (s = 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(), i.colors = this.colors, i.settings = this.settings;
-      }));
-    }, l = (t) => {
-      t instanceof P && (t.emitter.clear(), t.emitter.on("changed", (e, d) => {
-        this.colors = e, this.settings = d;
-      }));
-    }, h = (t) => {
-      t instanceof w && (i = 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}
-				?override=${this.settings.override}
-				.aliases=${this.settings.aliases}
-				?editMode=${this.editMode}
-				@contextmenu=${(t) => {
-      t.preventDefault();
-      let e = n.value;
-      this.isMobile ? e && e.toggleSheet() : (s.absolute.toggle(), s.absolute.setPosition(t.clientX + 16, t.clientY));
-    }}
-				${p(l)}
-			>
-			</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}
+import { LitElement, html, css } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ref, createRef } from 'lit/directives/ref.js';
+import { ColorPalette } from '../color-palette';
+import { ColorPaletteMenu } from '../menu/color-palette-menu';
+import { defaultSettings } from '../color-palette-utils';
+import { ColorPaletteEditor } from '../editor/color-palette-editor';
+let ColorPaletteComponent = class ColorPaletteComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.colors = [];
+        this.settings = {
+            height: defaultSettings.height,
+            width: defaultSettings.width,
+            direction: defaultSettings.direction,
+            gradient: defaultSettings.gradient,
+            preventHover: defaultSettings.preventHover,
+            override: defaultSettings.override,
+            aliases: []
+        };
+        this.editMode = false;
+        this.isMobile = false;
+        this.edit = false;
+    }
+    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}
+				?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}
 							@click=${() => {
-      let t = n.value;
-      t && t.toggleSheet();
-    }}
-							${p(r)}
-						>
-						</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(r)}
-					>
-					</color-palette-menu>
-				`}
-			
-			<absolute-container>
-				<color-palette-editor
-					.colors=${this.colors}
-					.settings=${this.settings}
-					${p(h)}
-				>
-				</color-palette-editor>
-			</absolute-container>
+                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>
 		`;
-  }
+    }
 };
-o.styles = [
-  $`
-			:host {
-				display: block;
-			}
-
-			absolute-container::part(dialog)::backdrop {
-				background-color: rgba(0, 0, 0, .8);
-			}
+ColorPaletteComponent.styles = [
+    css `
+			:host {
+				display: block;
+			}
+
+			absolute-container::part(dialog)::backdrop {
+				background-color: rgba(0, 0, 0, .8);
+			}
 		`
 ];
-a([
-  u("color-palette")
-], o.prototype, "palette", 2);
-a([
-  u("absolute-container")
-], o.prototype, "absolute", 2);
-a([
-  f({ type: Array })
-], o.prototype, "colors", 2);
-a([
-  f({ type: Object })
-], o.prototype, "settings", 2);
-a([
-  f({ type: Boolean })
-], o.prototype, "editMode", 2);
-a([
-  b()
-], o.prototype, "isMobile", 2);
-a([
-  b()
-], o.prototype, "edit", 2);
-o = a([
-  y("color-palette-component")
-], o);
-export {
-  o 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);
+__decorate([
+    state()
+], ColorPaletteComponent.prototype, "edit", void 0);
+ColorPaletteComponent = __decorate([
+    customElement('color-palette-component')
+], ColorPaletteComponent);
+export { ColorPaletteComponent };

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

@@ -0,0 +1,74 @@
+import { html } from 'lit';
+import { Direction } from '../color-palette-utils';
+const meta = {
+    title: 'Color Palette/Component',
+    tags: ['autodocs'],
+    component: 'color-palette-component',
+    subcomponents: {
+        ColorPaletteComponent: 'color-palette-component',
+        ColorPaletteMenu: 'color-palette-menu',
+        ColorPaletteEditor: 'color-palette-editor'
+    },
+    argTypes: {
+        direction: {
+            options: ['row', 'column'],
+            control: {
+                type: 'select',
+            }
+        },
+    }
+};
+export default meta;
+const colors = [
+    '#E6C47D',
+    '#DEB052',
+    '#D59C28',
+    '#AA7D20',
+    '#7F5D18'
+];
+const ColorPaletteTemplate = {
+    render: ({ colors, height, width, direction, gradient, preventHover, override, aliases }) => {
+        const settings = {
+            height,
+            width,
+            direction,
+            gradient,
+            preventHover,
+            override,
+            aliases
+        };
+        return html `
+			<color-palette-component
+				.colors=${colors}
+				.settings=${settings}
+			>
+			</color-palette-component>
+		`;
+    },
+};
+export const ManyItems = {
+    ...ColorPaletteTemplate,
+    args: {
+        colors,
+        height: 150,
+        width: 700,
+        direction: Direction.Column,
+        gradient: false,
+        preventHover: false,
+        override: false,
+        aliases: ['', '', 'test', '', '']
+    },
+};
+export const Gradient = {
+    ...ColorPaletteTemplate,
+    args: {
+        colors,
+        height: 150,
+        width: 700,
+        direction: Direction.Column,
+        gradient: true,
+        preventHover: false,
+        override: false,
+        aliases: ['', '', 'test', '', '']
+    },
+};

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

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