@alegendstale/holly-components 2.0.5 → 2.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +81 -81
- package/package.json +9 -28
package/custom-elements.json
CHANGED
|
@@ -2,31 +2,6 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
-
{
|
|
6
|
-
"kind": "javascript-module",
|
|
7
|
-
"path": "dist/decorators/condCustomElement.js",
|
|
8
|
-
"declarations": [
|
|
9
|
-
{
|
|
10
|
-
"kind": "function",
|
|
11
|
-
"name": "o",
|
|
12
|
-
"parameters": [
|
|
13
|
-
{
|
|
14
|
-
"name": "t"
|
|
15
|
-
}
|
|
16
|
-
]
|
|
17
|
-
}
|
|
18
|
-
],
|
|
19
|
-
"exports": [
|
|
20
|
-
{
|
|
21
|
-
"kind": "js",
|
|
22
|
-
"name": "condCustomElement",
|
|
23
|
-
"declaration": {
|
|
24
|
-
"name": "o",
|
|
25
|
-
"module": "dist/decorators/condCustomElement.js"
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
]
|
|
29
|
-
},
|
|
30
5
|
{
|
|
31
6
|
"kind": "javascript-module",
|
|
32
7
|
"path": "dist/utils/basicUtils.js",
|
|
@@ -590,6 +565,31 @@
|
|
|
590
565
|
}
|
|
591
566
|
]
|
|
592
567
|
},
|
|
568
|
+
{
|
|
569
|
+
"kind": "javascript-module",
|
|
570
|
+
"path": "dist/decorators/condCustomElement.js",
|
|
571
|
+
"declarations": [
|
|
572
|
+
{
|
|
573
|
+
"kind": "function",
|
|
574
|
+
"name": "o",
|
|
575
|
+
"parameters": [
|
|
576
|
+
{
|
|
577
|
+
"name": "t"
|
|
578
|
+
}
|
|
579
|
+
]
|
|
580
|
+
}
|
|
581
|
+
],
|
|
582
|
+
"exports": [
|
|
583
|
+
{
|
|
584
|
+
"kind": "js",
|
|
585
|
+
"name": "condCustomElement",
|
|
586
|
+
"declaration": {
|
|
587
|
+
"name": "o",
|
|
588
|
+
"module": "dist/decorators/condCustomElement.js"
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
]
|
|
592
|
+
},
|
|
593
593
|
{
|
|
594
594
|
"kind": "javascript-module",
|
|
595
595
|
"path": "src/decorators/condCustomElement.ts",
|
|
@@ -4725,45 +4725,33 @@
|
|
|
4725
4725
|
},
|
|
4726
4726
|
{
|
|
4727
4727
|
"kind": "javascript-module",
|
|
4728
|
-
"path": "dist/components/color-palette/
|
|
4728
|
+
"path": "dist/components/color-palette/menu/color-palette-menu.js",
|
|
4729
4729
|
"declarations": [
|
|
4730
4730
|
{
|
|
4731
4731
|
"kind": "variable",
|
|
4732
|
-
"name": "
|
|
4733
|
-
|
|
4734
|
-
{
|
|
4735
|
-
"kind": "variable",
|
|
4736
|
-
"name": "a",
|
|
4737
|
-
"default": "class extends x { constructor() { super(...arguments), this.colors = [], this.settings = { height: u.height, width: u.width, direction: u.direction, gradient: u.gradient, preventHover: u.preventHover, hideText: u.hideText, override: u.override, aliases: [] }, this.selectedInput = \"Color Picker\", this.combination = f.Random, this.colorPickerDisabled = !1, this.emitter = new A(); } disconnectedCallback() { this.emitter.clear(); } render() { const t = () => { switch (this.selectedInput) { case \"Color Picker\": return this.pickerOption(); case \"Generate\": return this.generateOption(); case \"Image\": return this.imageOption(); case \"URL\": return this.urlOption(); } }, n = (s) => { s instanceof B && s.emitter.on(\"changed\", (o, r) => { this.colors = o, this.settings = r; }); }; return l` <div id=\"color-palette-editor\"> <h1>Editor</h1> <section id='colors'> <h3>Colors</h3> <div id=\"control-container\"> <button title=\"Color Picker\" @click=${() => this.selectedInput = \"Color Picker\"} > ${p(U)} </button> <button title=\"Generate\" @click=${() => this.selectedInput = \"Generate\"} > ${p(C)} </button> <button title=\"Image\" @click=${() => this.selectedInput = \"Image\"} > ${p(O)} </button> <button title=\"URL\" @click=${() => this.selectedInput = \"URL\"} > ${p(R)} </button> </div> <div id='colors-container'> ${t()} </div> </section> <section id='preview'> <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=${!0} maxWidth=${560} ${m(n)} > </color-palette> </section> <section id='settings'> <h3>Settings</h3> ${this.renderSettings()} <button id='create-btn' @click=${() => { try { this.colors.length === 0 && (this.colors = L(f.Random).colors), this.emitter.emit(\"submit\", this.colors, this.settings); } catch { } }} > Create </button> </section> </div> `; } /** Renders the settings fields. */ renderSettings() { return l` <setting-item name='Height' > <input type='number' value=${this.settings.height} step=${5} @input=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, height: +t.target.value }); }} > </setting-item> <setting-item name='Width' description='Caution - Might cause palette to display incorrectly.' > <input type='number' value=${this.settings.width} step=${10} @input=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, width: +t.target.value }); }} > </setting-item> <setting-item name='Direction' > <select @change=${(t) => { t.target instanceof HTMLSelectElement && (this.settings = { ...this.settings, direction: t.target.value }); }} > ${Object.values(M).map((t) => l`<option ?selected=${this.settings.direction === t}>${t}</option>`)} </select> </setting-item> <setting-item name='Gradient' > <input type='checkbox' ?checked=${this.settings.gradient} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, gradient: t.target.checked }); }} > </setting-item> <setting-item name='Prevent Hover' description='Toggles whether palettes can be hovered' > <input type='checkbox' ?checked=${this.settings.preventHover} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, preventHover: t.target.checked }); }} > </setting-item> <setting-item name='Hide Text' description='Disables color and alias visibility' > <input type='checkbox' ?checked=${this.settings.hideText} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, hideText: t.target.checked }); }} > </setting-item> <setting-item name='Override' description='Disables color validation for full control (advanced)' > <input type='checkbox' ?checked=${this.settings.override} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, override: t.target.checked }); }} > </setting-item> `; } /** Renders the picker option. */ pickerOption() { return l` <setting-item name='Color Picker' description='Use handpicked colors' > <input type='color' @change=${(t) => { t.target instanceof HTMLInputElement && (this.colors = [...this.colors, t.target.value], this.settings.aliases.push(\"\")); }} > </setting-item> `; } /** Renders the generate option. */ generateOption() { return this.colorPickerDisabled = this.combination === f.Random, l` <setting-item name='Generate' description='Generate colors based on color theory' > <select @change=${(t) => { t.target instanceof HTMLSelectElement && (this.combination = t.target.value, this.colorPickerDisabled = this.combination === f.Random); }} > ${Object.values(f).map((t) => l`<option ?selected=${this.combination === t}>${t}</option>`)} </select> <input type='color' ?disabled=${this.colorPickerDisabled} @change=${(t) => { t.target instanceof HTMLInputElement && (this.baseColor = b(t.target.value)); }} @contextmenu=${(t) => { t.preventDefault(), t.target instanceof HTMLInputElement && (t.target.value = b(\"#000\").hex(), this.baseColor = void 0); }} > <button title='Loads the generated colors' @click=${(t) => { const n = L(this.combination, { baseColor: this.baseColor, settings: this.settings }); this.colors = n.colors, n.settings && (this.settings = n.settings); }} > ${p(C)} </button> </setting-item> `; } /** Renders the image option. */ imageOption() { let t = \"\", n = $(), s = $(), o = $(), r = n.value?.value || \"\", c, h = $(), I = (e) => { e instanceof w && (c = e, e.emitter.clear(), e.emitter.on(\"click\", async (i) => await j(i.toUpperCase(), S.Raw)), e.emitter.on(\"move\", (i) => { if (!h.value) return; let d = h.value; d.text = e.getCanvasHex(i.x, i.y).toUpperCase(), d.setClampedPosition(i, e.getBoundingClientRect()); })); }; const E = async () => { if (!s.value || !c) return; const e = s.value; return await c.getPalette(+e.value); }, y = async () => { const e = await E(); e && (this.colors = e.map((i) => b(i).hex(0)), this.settings.aliases = []); }, k = async (e) => { if (!URL.canParse(e) || !c) return; const i = c; i.imageURL = e, await y(); }; return l` <setting-item name='Image' description='Convert image into palette' > <input type='url' placeholder='Enter URL or select file' ${m(n)} > <button title='Right click to clear URL' @click=${async (e) => { try { if (!o.value) return; let i = o.value; if (r !== \"\") if (URL.canParse(r)) await k(r); else throw new Error(\"URL provided is not valid.\"); else i.click(); } catch { } }} @contextmenu=${(e) => { if (e.preventDefault(), !n.value) return; const i = n.value; i.value = \"\"; }} > ${p(D)} </button> <input type ='file' accept = 'image/*' @change=${(e) => { try { const i = new FileReader(), d = e.target.files?.[0]; d && i.readAsDataURL(d), i.addEventListener(\"load\", async () => { typeof i.result == \"string\" && (r = i.result, await k(r)); }), i.addEventListener(\"error\", () => { throw new Error(\"Error processing image\"); }); } catch { } }} ${m(o)} > </setting-item> <setting-item name='Count' description='Set the number of colors to generate from the image' > <input id='range-slider' type='range' min='4' max='12' value='8' @change=${async () => { await y(); }} ${m(s)} > </setting-item> <tool-tip trigger='hover' ${m(h)} > <canvas-image width=${this.palette.getBoundingClientRect().width} height=${this.palette.getBoundingClientRect().height} @mousemove=${(e) => { e.target instanceof w && (t = e.target.getCanvasHex(e.clientX, e.clientY)); }} @click=${(e) => { t && (this.colors = [...this.colors, t], this.settings.aliases = [...this.settings.aliases, \"\"]); }} ${m(I)} > </canvas-image> </tool-tip> `; } /** Renders the URL option. */ urlOption() { let t; return l` <setting-item name='URL' description='Only coolors.co & colorhunt.co are currently supported' > <input type='url' placeholder='Enter URL' @change=${(n) => { n.target instanceof HTMLInputElement && (t = n.target); }} > <button title='Right click to clear URL' @click=${(n) => { try { if (!t.value.match(G)) throw new Error(\"URL provided is not valid.\"); this.colors = _(t.value), this.settings.aliases = []; } catch { } }} @contextmenu=${(n) => { n.preventDefault(), t && (t.value = \"\"); }} > ${p(R)} </button> </setting-item> `; } }"
|
|
4732
|
+
"name": "s",
|
|
4733
|
+
"default": "class extends y { constructor() { super(...arguments), this.colors = [], this.editMode = !1, this.copyFormat = v.copyFormat, this.reorder = !1, this.emitter = new C(); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return c` ${this.reorder ? this.reorderItems() : this.menuItems()} `; } /** Renders the menu items. */ menuItems() { const i = { colors: this.colors, settings: this.settings }; return c` <menu> <li> <button @click=${(t) => { t.stopPropagation(), this.reorder = !this.reorder; }} > ${r(E)} <span>Reorder</span> </button> </li> <li> <button @click=${() => { this.emitter.emit(\"openEditor\"); }} > ${r(P)} <span>Edit Mode</span> </button> </li> ${// Only show toggle edit mode option when palette is not a gradient this.settings?.gradient ? d : c` <li> <button @click=${() => { this.emitter.emit(\"editMode\", !this.editMode); }} > ${r(k)} <span>Quick Edit</span> ${this.editMode ? r(M) : d} </button> </li> `} <hr> <li> <button @click=${() => { const t = this.colors.map((o) => { const e = u(o).rgb(); return `rgb(${e[0]}, ${e[1]}, ${e[2]})`; }); this.emitter.emit(\"change\", t); }} > ${r(h)} <span>Convert to RGB</span> </button> </li> <li> <button @click=${() => { const t = this.colors.map((o) => { const e = u(o).hsl(); return `hsl(${e[0]} ${e[1]}% ${e[2]}%)`; }); this.emitter.emit(\"change\", t); }} > ${r(h)} <span>Convert to HSL</span> </button> </li> <li> <button @click=${() => { const t = this.colors.map((o) => u(o).hex(2)); this.emitter.emit(\"change\", t); }} > ${r(h)} <span>Convert to HEX</span> </button> </li> <hr> <li> <button @click=${async () => { await b(JSON.stringify(i), this.copyFormat), this.emitter.emit(\"change\", []); }} > ${r(O)} <span>Cut</span> </button> </li> <li> <button @click=${async () => { await b(JSON.stringify(i), this.copyFormat); }} > ${r(w)} <span>Copy</span> </button> </li> </menu> `; } /** Renders the reorder items. */ reorderItems() { const i = (t) => { t instanceof _ && (t.emitter.clear(), t.emitter.on(\"submit\", (o) => { this.emitter.emit(\"change\", o), this.reorder = !1; })); }; return c` <color-palette-reorder .colors=${this.colors} ${S(i)} > </color-palette-reorder> `; } }"
|
|
4738
4734
|
}
|
|
4739
4735
|
],
|
|
4740
4736
|
"exports": [
|
|
4741
4737
|
{
|
|
4742
4738
|
"kind": "js",
|
|
4743
|
-
"name": "
|
|
4744
|
-
"declaration": {
|
|
4745
|
-
"name": "a",
|
|
4746
|
-
"module": "dist/components/color-palette/editor/color-palette-editor.js"
|
|
4747
|
-
}
|
|
4748
|
-
},
|
|
4749
|
-
{
|
|
4750
|
-
"kind": "js",
|
|
4751
|
-
"name": "SelectedInput",
|
|
4739
|
+
"name": "ColorPaletteMenu",
|
|
4752
4740
|
"declaration": {
|
|
4753
|
-
"name": "
|
|
4754
|
-
"module": "dist/components/color-palette/
|
|
4741
|
+
"name": "s",
|
|
4742
|
+
"module": "dist/components/color-palette/menu/color-palette-menu.js"
|
|
4755
4743
|
}
|
|
4756
4744
|
}
|
|
4757
4745
|
]
|
|
4758
4746
|
},
|
|
4759
4747
|
{
|
|
4760
4748
|
"kind": "javascript-module",
|
|
4761
|
-
"path": "dist/components/color-palette/
|
|
4749
|
+
"path": "dist/components/color-palette/menu/color-palette-menu.styles.js",
|
|
4762
4750
|
"declarations": [
|
|
4763
4751
|
{
|
|
4764
4752
|
"kind": "variable",
|
|
4765
|
-
"name": "
|
|
4766
|
-
"default": "
|
|
4753
|
+
"name": "t",
|
|
4754
|
+
"default": "r` :host { display: block; } menu { display: grid; grid-template-columns: 1fr; padding: 0.5rem; margin: 0; border-radius: 5px; color: rgb(245, 245, 245); background-color: #222222; } li { display: grid; grid-template-columns: subgrid; list-style: none; } button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: flex-start; column-gap: 0.5rem; background-color: inherit; color: inherit; border: none; cursor: pointer; padding: 4px 8px; text-wrap: nowrap; &:hover { background-color: #323232; } span { font-size: 14px; } } hr { width: 95%; border-color: rgb(45, 45, 45); } `"
|
|
4767
4755
|
}
|
|
4768
4756
|
],
|
|
4769
4757
|
"exports": [
|
|
@@ -4771,41 +4759,41 @@
|
|
|
4771
4759
|
"kind": "js",
|
|
4772
4760
|
"name": "default",
|
|
4773
4761
|
"declaration": {
|
|
4774
|
-
"name": "
|
|
4775
|
-
"module": "dist/components/color-palette/
|
|
4762
|
+
"name": "t",
|
|
4763
|
+
"module": "dist/components/color-palette/menu/color-palette-menu.styles.js"
|
|
4776
4764
|
}
|
|
4777
4765
|
}
|
|
4778
4766
|
]
|
|
4779
4767
|
},
|
|
4780
4768
|
{
|
|
4781
4769
|
"kind": "javascript-module",
|
|
4782
|
-
"path": "dist/components/color-palette/
|
|
4770
|
+
"path": "dist/components/color-palette/menu/color-palette-reorder.js",
|
|
4783
4771
|
"declarations": [
|
|
4784
4772
|
{
|
|
4785
4773
|
"kind": "variable",
|
|
4786
|
-
"name": "
|
|
4787
|
-
"default": "class extends
|
|
4774
|
+
"name": "o",
|
|
4775
|
+
"default": "class extends m { constructor() { super(...arguments), this.colors = [], this.emitter = new y(); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return c` <menu> ${x( Object.keys(i), (r) => c` <button @click=${(s) => { this.selectOption(r); }} > <span>${r}</span> </button> ` )} </menu> `; } /** Reorders the palette colors based on the selected option. */ selectOption(r) { const s = this.colors.map((e) => u(e)); let a = []; switch (r) { case \"Hue\": a = s.sort((e, t) => e.hue() - t.hue()).map((e) => e.hex()); break; case \"Saturation\": a = s.sort((e, t) => e.saturation() - t.saturation()).map((e) => e.hex()); break; case \"Lightness\": a = s.sort((e, t) => e.lightness() - t.lightness()).map((e) => e.hex()); break; case \"Red\": a = s.sort((e, t) => e.red() - t.red()).map((e) => e.hex()); break; case \"Green\": a = s.sort((e, t) => e.green() - t.green()).map((e) => e.hex()); break; case \"Blue\": a = s.sort((e, t) => e.blue() - t.blue()).map((e) => e.hex()); break; case \"Alpha\": a = s.sort((e, t) => e.alpha() - t.alpha()).map((e) => e.hex()); break; } this.emitter.emit(\"submit\", a); } }"
|
|
4788
4776
|
}
|
|
4789
4777
|
],
|
|
4790
4778
|
"exports": [
|
|
4791
4779
|
{
|
|
4792
4780
|
"kind": "js",
|
|
4793
|
-
"name": "
|
|
4781
|
+
"name": "ColorPaletteReorder",
|
|
4794
4782
|
"declaration": {
|
|
4795
|
-
"name": "
|
|
4796
|
-
"module": "dist/components/color-palette/
|
|
4783
|
+
"name": "o",
|
|
4784
|
+
"module": "dist/components/color-palette/menu/color-palette-reorder.js"
|
|
4797
4785
|
}
|
|
4798
4786
|
}
|
|
4799
4787
|
]
|
|
4800
4788
|
},
|
|
4801
4789
|
{
|
|
4802
4790
|
"kind": "javascript-module",
|
|
4803
|
-
"path": "dist/components/color-palette/
|
|
4791
|
+
"path": "dist/components/color-palette/menu/color-palette-reorder.styles.js",
|
|
4804
4792
|
"declarations": [
|
|
4805
4793
|
{
|
|
4806
4794
|
"kind": "variable",
|
|
4807
|
-
"name": "
|
|
4808
|
-
"default": "
|
|
4795
|
+
"name": "n",
|
|
4796
|
+
"default": "o` :host { display: block; } menu { display: flex; flex-direction: column; gap: 0.5rem; background-color: rgb(27, 27, 27); padding: 0.5rem; border-radius: 5px; button { color: rgb(245, 245, 245); background-color: transparent; border: none; padding: 4px 12px; cursor: pointer; &:hover { background-color: rgb(75, 75, 75); } span { font-size: 14px; } } } `"
|
|
4809
4797
|
}
|
|
4810
4798
|
],
|
|
4811
4799
|
"exports": [
|
|
@@ -4813,8 +4801,8 @@
|
|
|
4813
4801
|
"kind": "js",
|
|
4814
4802
|
"name": "default",
|
|
4815
4803
|
"declaration": {
|
|
4816
|
-
"name": "
|
|
4817
|
-
"module": "dist/components/color-palette/
|
|
4804
|
+
"name": "n",
|
|
4805
|
+
"module": "dist/components/color-palette/menu/color-palette-reorder.styles.js"
|
|
4818
4806
|
}
|
|
4819
4807
|
}
|
|
4820
4808
|
]
|
|
@@ -4905,33 +4893,45 @@
|
|
|
4905
4893
|
},
|
|
4906
4894
|
{
|
|
4907
4895
|
"kind": "javascript-module",
|
|
4908
|
-
"path": "dist/components/color-palette/
|
|
4896
|
+
"path": "dist/components/color-palette/editor/color-palette-editor.js",
|
|
4909
4897
|
"declarations": [
|
|
4910
4898
|
{
|
|
4911
4899
|
"kind": "variable",
|
|
4912
|
-
"name": "
|
|
4913
|
-
|
|
4900
|
+
"name": "X"
|
|
4901
|
+
},
|
|
4902
|
+
{
|
|
4903
|
+
"kind": "variable",
|
|
4904
|
+
"name": "a",
|
|
4905
|
+
"default": "class extends x { constructor() { super(...arguments), this.colors = [], this.settings = { height: u.height, width: u.width, direction: u.direction, gradient: u.gradient, preventHover: u.preventHover, hideText: u.hideText, override: u.override, aliases: [] }, this.selectedInput = \"Color Picker\", this.combination = f.Random, this.colorPickerDisabled = !1, this.emitter = new A(); } disconnectedCallback() { this.emitter.clear(); } render() { const t = () => { switch (this.selectedInput) { case \"Color Picker\": return this.pickerOption(); case \"Generate\": return this.generateOption(); case \"Image\": return this.imageOption(); case \"URL\": return this.urlOption(); } }, n = (s) => { s instanceof B && s.emitter.on(\"changed\", (o, r) => { this.colors = o, this.settings = r; }); }; return l` <div id=\"color-palette-editor\"> <h1>Editor</h1> <section id='colors'> <h3>Colors</h3> <div id=\"control-container\"> <button title=\"Color Picker\" @click=${() => this.selectedInput = \"Color Picker\"} > ${p(U)} </button> <button title=\"Generate\" @click=${() => this.selectedInput = \"Generate\"} > ${p(C)} </button> <button title=\"Image\" @click=${() => this.selectedInput = \"Image\"} > ${p(O)} </button> <button title=\"URL\" @click=${() => this.selectedInput = \"URL\"} > ${p(R)} </button> </div> <div id='colors-container'> ${t()} </div> </section> <section id='preview'> <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=${!0} maxWidth=${560} ${m(n)} > </color-palette> </section> <section id='settings'> <h3>Settings</h3> ${this.renderSettings()} <button id='create-btn' @click=${() => { try { this.colors.length === 0 && (this.colors = L(f.Random).colors), this.emitter.emit(\"submit\", this.colors, this.settings); } catch { } }} > Create </button> </section> </div> `; } /** Renders the settings fields. */ renderSettings() { return l` <setting-item name='Height' > <input type='number' value=${this.settings.height} step=${5} @input=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, height: +t.target.value }); }} > </setting-item> <setting-item name='Width' description='Caution - Might cause palette to display incorrectly.' > <input type='number' value=${this.settings.width} step=${10} @input=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, width: +t.target.value }); }} > </setting-item> <setting-item name='Direction' > <select @change=${(t) => { t.target instanceof HTMLSelectElement && (this.settings = { ...this.settings, direction: t.target.value }); }} > ${Object.values(M).map((t) => l`<option ?selected=${this.settings.direction === t}>${t}</option>`)} </select> </setting-item> <setting-item name='Gradient' > <input type='checkbox' ?checked=${this.settings.gradient} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, gradient: t.target.checked }); }} > </setting-item> <setting-item name='Prevent Hover' description='Toggles whether palettes can be hovered' > <input type='checkbox' ?checked=${this.settings.preventHover} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, preventHover: t.target.checked }); }} > </setting-item> <setting-item name='Hide Text' description='Disables color and alias visibility' > <input type='checkbox' ?checked=${this.settings.hideText} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, hideText: t.target.checked }); }} > </setting-item> <setting-item name='Override' description='Disables color validation for full control (advanced)' > <input type='checkbox' ?checked=${this.settings.override} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, override: t.target.checked }); }} > </setting-item> `; } /** Renders the picker option. */ pickerOption() { return l` <setting-item name='Color Picker' description='Use handpicked colors' > <input type='color' @change=${(t) => { t.target instanceof HTMLInputElement && (this.colors = [...this.colors, t.target.value], this.settings.aliases.push(\"\")); }} > </setting-item> `; } /** Renders the generate option. */ generateOption() { return this.colorPickerDisabled = this.combination === f.Random, l` <setting-item name='Generate' description='Generate colors based on color theory' > <select @change=${(t) => { t.target instanceof HTMLSelectElement && (this.combination = t.target.value, this.colorPickerDisabled = this.combination === f.Random); }} > ${Object.values(f).map((t) => l`<option ?selected=${this.combination === t}>${t}</option>`)} </select> <input type='color' ?disabled=${this.colorPickerDisabled} @change=${(t) => { t.target instanceof HTMLInputElement && (this.baseColor = b(t.target.value)); }} @contextmenu=${(t) => { t.preventDefault(), t.target instanceof HTMLInputElement && (t.target.value = b(\"#000\").hex(), this.baseColor = void 0); }} > <button title='Loads the generated colors' @click=${(t) => { const n = L(this.combination, { baseColor: this.baseColor, settings: this.settings }); this.colors = n.colors, n.settings && (this.settings = n.settings); }} > ${p(C)} </button> </setting-item> `; } /** Renders the image option. */ imageOption() { let t = \"\", n = $(), s = $(), o = $(), r = n.value?.value || \"\", c, h = $(), I = (e) => { e instanceof w && (c = e, e.emitter.clear(), e.emitter.on(\"click\", async (i) => await j(i.toUpperCase(), S.Raw)), e.emitter.on(\"move\", (i) => { if (!h.value) return; let d = h.value; d.text = e.getCanvasHex(i.x, i.y).toUpperCase(), d.setClampedPosition(i, e.getBoundingClientRect()); })); }; const E = async () => { if (!s.value || !c) return; const e = s.value; return await c.getPalette(+e.value); }, y = async () => { const e = await E(); e && (this.colors = e.map((i) => b(i).hex(0)), this.settings.aliases = []); }, k = async (e) => { if (!URL.canParse(e) || !c) return; const i = c; i.imageURL = e, await y(); }; return l` <setting-item name='Image' description='Convert image into palette' > <input type='url' placeholder='Enter URL or select file' ${m(n)} > <button title='Right click to clear URL' @click=${async (e) => { try { if (!o.value) return; let i = o.value; if (r !== \"\") if (URL.canParse(r)) await k(r); else throw new Error(\"URL provided is not valid.\"); else i.click(); } catch { } }} @contextmenu=${(e) => { if (e.preventDefault(), !n.value) return; const i = n.value; i.value = \"\"; }} > ${p(D)} </button> <input type ='file' accept = 'image/*' @change=${(e) => { try { const i = new FileReader(), d = e.target.files?.[0]; d && i.readAsDataURL(d), i.addEventListener(\"load\", async () => { typeof i.result == \"string\" && (r = i.result, await k(r)); }), i.addEventListener(\"error\", () => { throw new Error(\"Error processing image\"); }); } catch { } }} ${m(o)} > </setting-item> <setting-item name='Count' description='Set the number of colors to generate from the image' > <input id='range-slider' type='range' min='4' max='12' value='8' @change=${async () => { await y(); }} ${m(s)} > </setting-item> <tool-tip trigger='hover' ${m(h)} > <canvas-image width=${this.palette.getBoundingClientRect().width} height=${this.palette.getBoundingClientRect().height} @mousemove=${(e) => { e.target instanceof w && (t = e.target.getCanvasHex(e.clientX, e.clientY)); }} @click=${(e) => { t && (this.colors = [...this.colors, t], this.settings.aliases = [...this.settings.aliases, \"\"]); }} ${m(I)} > </canvas-image> </tool-tip> `; } /** Renders the URL option. */ urlOption() { let t; return l` <setting-item name='URL' description='Only coolors.co & colorhunt.co are currently supported' > <input type='url' placeholder='Enter URL' @change=${(n) => { n.target instanceof HTMLInputElement && (t = n.target); }} > <button title='Right click to clear URL' @click=${(n) => { try { if (!t.value.match(G)) throw new Error(\"URL provided is not valid.\"); this.colors = _(t.value), this.settings.aliases = []; } catch { } }} @contextmenu=${(n) => { n.preventDefault(), t && (t.value = \"\"); }} > ${p(R)} </button> </setting-item> `; } }"
|
|
4914
4906
|
}
|
|
4915
4907
|
],
|
|
4916
4908
|
"exports": [
|
|
4917
4909
|
{
|
|
4918
4910
|
"kind": "js",
|
|
4919
|
-
"name": "
|
|
4911
|
+
"name": "ColorPaletteEditor",
|
|
4920
4912
|
"declaration": {
|
|
4921
|
-
"name": "
|
|
4922
|
-
"module": "dist/components/color-palette/
|
|
4913
|
+
"name": "a",
|
|
4914
|
+
"module": "dist/components/color-palette/editor/color-palette-editor.js"
|
|
4915
|
+
}
|
|
4916
|
+
},
|
|
4917
|
+
{
|
|
4918
|
+
"kind": "js",
|
|
4919
|
+
"name": "SelectedInput",
|
|
4920
|
+
"declaration": {
|
|
4921
|
+
"name": "X",
|
|
4922
|
+
"module": "dist/components/color-palette/editor/color-palette-editor.js"
|
|
4923
4923
|
}
|
|
4924
4924
|
}
|
|
4925
4925
|
]
|
|
4926
4926
|
},
|
|
4927
4927
|
{
|
|
4928
4928
|
"kind": "javascript-module",
|
|
4929
|
-
"path": "dist/components/color-palette/
|
|
4929
|
+
"path": "dist/components/color-palette/editor/color-palette-editor.styles.js",
|
|
4930
4930
|
"declarations": [
|
|
4931
4931
|
{
|
|
4932
4932
|
"kind": "variable",
|
|
4933
|
-
"name": "
|
|
4934
|
-
"default": "
|
|
4933
|
+
"name": "r",
|
|
4934
|
+
"default": "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)); } } } } `"
|
|
4935
4935
|
}
|
|
4936
4936
|
],
|
|
4937
4937
|
"exports": [
|
|
@@ -4939,41 +4939,41 @@
|
|
|
4939
4939
|
"kind": "js",
|
|
4940
4940
|
"name": "default",
|
|
4941
4941
|
"declaration": {
|
|
4942
|
-
"name": "
|
|
4943
|
-
"module": "dist/components/color-palette/
|
|
4942
|
+
"name": "r",
|
|
4943
|
+
"module": "dist/components/color-palette/editor/color-palette-editor.styles.js"
|
|
4944
4944
|
}
|
|
4945
4945
|
}
|
|
4946
4946
|
]
|
|
4947
4947
|
},
|
|
4948
4948
|
{
|
|
4949
4949
|
"kind": "javascript-module",
|
|
4950
|
-
"path": "dist/components/color-palette/
|
|
4950
|
+
"path": "dist/components/color-palette/editor/settings-item.js",
|
|
4951
4951
|
"declarations": [
|
|
4952
4952
|
{
|
|
4953
4953
|
"kind": "variable",
|
|
4954
|
-
"name": "
|
|
4955
|
-
"default": "class extends
|
|
4954
|
+
"name": "e",
|
|
4955
|
+
"default": "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> `; } }"
|
|
4956
4956
|
}
|
|
4957
4957
|
],
|
|
4958
4958
|
"exports": [
|
|
4959
4959
|
{
|
|
4960
4960
|
"kind": "js",
|
|
4961
|
-
"name": "
|
|
4961
|
+
"name": "SettingItem",
|
|
4962
4962
|
"declaration": {
|
|
4963
|
-
"name": "
|
|
4964
|
-
"module": "dist/components/color-palette/
|
|
4963
|
+
"name": "e",
|
|
4964
|
+
"module": "dist/components/color-palette/editor/settings-item.js"
|
|
4965
4965
|
}
|
|
4966
4966
|
}
|
|
4967
4967
|
]
|
|
4968
4968
|
},
|
|
4969
4969
|
{
|
|
4970
4970
|
"kind": "javascript-module",
|
|
4971
|
-
"path": "dist/components/color-palette/
|
|
4971
|
+
"path": "dist/components/color-palette/editor/settings-item.styles.js",
|
|
4972
4972
|
"declarations": [
|
|
4973
4973
|
{
|
|
4974
4974
|
"kind": "variable",
|
|
4975
|
-
"name": "
|
|
4976
|
-
"default": "
|
|
4975
|
+
"name": "o",
|
|
4976
|
+
"default": "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; } `"
|
|
4977
4977
|
}
|
|
4978
4978
|
],
|
|
4979
4979
|
"exports": [
|
|
@@ -4981,8 +4981,8 @@
|
|
|
4981
4981
|
"kind": "js",
|
|
4982
4982
|
"name": "default",
|
|
4983
4983
|
"declaration": {
|
|
4984
|
-
"name": "
|
|
4985
|
-
"module": "dist/components/color-palette/
|
|
4984
|
+
"name": "o",
|
|
4985
|
+
"module": "dist/components/color-palette/editor/settings-item.styles.js"
|
|
4986
4986
|
}
|
|
4987
4987
|
}
|
|
4988
4988
|
]
|
package/package.json
CHANGED
|
@@ -2,39 +2,20 @@
|
|
|
2
2
|
"private": false,
|
|
3
3
|
"name": "@alegendstale/holly-components",
|
|
4
4
|
"description": "Reusable UI components created using lit",
|
|
5
|
-
"version": "2.0.
|
|
5
|
+
"version": "2.0.6",
|
|
6
6
|
"author": "ALegendsTale",
|
|
7
7
|
"license": "GPL-3.0",
|
|
8
8
|
"customElements": "custom-elements.json",
|
|
9
9
|
"type": "module",
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
"*": {
|
|
12
|
-
"components/*": [
|
|
13
|
-
"dist/components/*"
|
|
14
|
-
],
|
|
15
|
-
"decorators/*": [
|
|
16
|
-
"dist/decorators/*"
|
|
17
|
-
],
|
|
18
|
-
"utils/*": [
|
|
19
|
-
"dist/utils/*"
|
|
20
|
-
]
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
10
|
"exports": {
|
|
24
|
-
"./components
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
"./
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"./utils/*.js": {
|
|
33
|
-
"types": "./dist/utils/*.d.ts",
|
|
34
|
-
"import": "./dist/utils/*.js"
|
|
35
|
-
},
|
|
36
|
-
"./package.json": "./package.json",
|
|
37
|
-
"./custom-elements.json": "./custom-elements.json"
|
|
11
|
+
"./dist/components": "./dist/components",
|
|
12
|
+
"./dist/components/*": "./dist/components/*",
|
|
13
|
+
"./dist/decorators": "./dist/decorators",
|
|
14
|
+
"./dist/decorators/*": "./dist/decorators/*",
|
|
15
|
+
"./dist/utils": "./dist/utils",
|
|
16
|
+
"./dist/utils/*": "./dist/utils/*",
|
|
17
|
+
"./custom-elements.json": "./custom-elements.json",
|
|
18
|
+
"./package.json": "./package.json"
|
|
38
19
|
},
|
|
39
20
|
"files": [
|
|
40
21
|
"dist",
|