@alegendstale/holly-components 2.0.6 → 2.0.8
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 +123 -123
- package/package.json +7 -7
package/custom-elements.json
CHANGED
|
@@ -2,6 +2,31 @@
|
|
|
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
|
+
},
|
|
5
30
|
{
|
|
6
31
|
"kind": "javascript-module",
|
|
7
32
|
"path": "dist/utils/basicUtils.js",
|
|
@@ -565,31 +590,6 @@
|
|
|
565
590
|
}
|
|
566
591
|
]
|
|
567
592
|
},
|
|
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",
|
|
@@ -1575,48 +1575,6 @@
|
|
|
1575
1575
|
}
|
|
1576
1576
|
]
|
|
1577
1577
|
},
|
|
1578
|
-
{
|
|
1579
|
-
"kind": "javascript-module",
|
|
1580
|
-
"path": "dist/components/draw-svg/draw-svg.js",
|
|
1581
|
-
"declarations": [
|
|
1582
|
-
{
|
|
1583
|
-
"kind": "variable",
|
|
1584
|
-
"name": "i",
|
|
1585
|
-
"default": "class extends l { constructor() { super(...arguments), this.isIntersecting = !1, this.intersectionObserver = new IntersectionObserver(([s]) => { this.isIntersecting = s.isIntersecting, this.emitter.emit(\"intersection\", s.isIntersecting); }), this.emitter = new m(); } svgClasses() { return super.svgClasses(), { animation: this.isIntersecting }; } connectedCallback() { super.connectedCallback(), this.intersectionObserver.observe(this); } disconnectedCallback() { super.disconnectedCallback(), this.intersectionObserver.disconnect(); } }"
|
|
1586
|
-
}
|
|
1587
|
-
],
|
|
1588
|
-
"exports": [
|
|
1589
|
-
{
|
|
1590
|
-
"kind": "js",
|
|
1591
|
-
"name": "DrawSvg",
|
|
1592
|
-
"declaration": {
|
|
1593
|
-
"name": "i",
|
|
1594
|
-
"module": "dist/components/draw-svg/draw-svg.js"
|
|
1595
|
-
}
|
|
1596
|
-
}
|
|
1597
|
-
]
|
|
1598
|
-
},
|
|
1599
|
-
{
|
|
1600
|
-
"kind": "javascript-module",
|
|
1601
|
-
"path": "dist/components/draw-svg/draw-svg.styles.js",
|
|
1602
|
-
"declarations": [
|
|
1603
|
-
{
|
|
1604
|
-
"kind": "variable",
|
|
1605
|
-
"name": "e",
|
|
1606
|
-
"default": "t` :host { stroke: white; fill: white; } /* Override responsive-svg path fill */ :host(:not([svgColors])) path { fill: transparent; } path { stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: 1000; } .animation { path { animation: textAnimation 2s ease-in-out 1 forwards; will-change: fill, stroke-width, stroke-dashoffset; } } @keyframes textAnimation { 0% { stroke-dashoffset: 1000; } 60% { fill: transparent; } 100% { fill: inherit; stroke-dashoffset: 0; stroke-width: 1; } } `"
|
|
1607
|
-
}
|
|
1608
|
-
],
|
|
1609
|
-
"exports": [
|
|
1610
|
-
{
|
|
1611
|
-
"kind": "js",
|
|
1612
|
-
"name": "default",
|
|
1613
|
-
"declaration": {
|
|
1614
|
-
"name": "e",
|
|
1615
|
-
"module": "dist/components/draw-svg/draw-svg.styles.js"
|
|
1616
|
-
}
|
|
1617
|
-
}
|
|
1618
|
-
]
|
|
1619
|
-
},
|
|
1620
1578
|
{
|
|
1621
1579
|
"kind": "javascript-module",
|
|
1622
1580
|
"path": "dist/components/color-palette/color-palette-utils.js",
|
|
@@ -1825,6 +1783,48 @@
|
|
|
1825
1783
|
}
|
|
1826
1784
|
]
|
|
1827
1785
|
},
|
|
1786
|
+
{
|
|
1787
|
+
"kind": "javascript-module",
|
|
1788
|
+
"path": "dist/components/draw-svg/draw-svg.js",
|
|
1789
|
+
"declarations": [
|
|
1790
|
+
{
|
|
1791
|
+
"kind": "variable",
|
|
1792
|
+
"name": "i",
|
|
1793
|
+
"default": "class extends l { constructor() { super(...arguments), this.isIntersecting = !1, this.intersectionObserver = new IntersectionObserver(([s]) => { this.isIntersecting = s.isIntersecting, this.emitter.emit(\"intersection\", s.isIntersecting); }), this.emitter = new m(); } svgClasses() { return super.svgClasses(), { animation: this.isIntersecting }; } connectedCallback() { super.connectedCallback(), this.intersectionObserver.observe(this); } disconnectedCallback() { super.disconnectedCallback(), this.intersectionObserver.disconnect(); } }"
|
|
1794
|
+
}
|
|
1795
|
+
],
|
|
1796
|
+
"exports": [
|
|
1797
|
+
{
|
|
1798
|
+
"kind": "js",
|
|
1799
|
+
"name": "DrawSvg",
|
|
1800
|
+
"declaration": {
|
|
1801
|
+
"name": "i",
|
|
1802
|
+
"module": "dist/components/draw-svg/draw-svg.js"
|
|
1803
|
+
}
|
|
1804
|
+
}
|
|
1805
|
+
]
|
|
1806
|
+
},
|
|
1807
|
+
{
|
|
1808
|
+
"kind": "javascript-module",
|
|
1809
|
+
"path": "dist/components/draw-svg/draw-svg.styles.js",
|
|
1810
|
+
"declarations": [
|
|
1811
|
+
{
|
|
1812
|
+
"kind": "variable",
|
|
1813
|
+
"name": "e",
|
|
1814
|
+
"default": "t` :host { stroke: white; fill: white; } /* Override responsive-svg path fill */ :host(:not([svgColors])) path { fill: transparent; } path { stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: 1000; } .animation { path { animation: textAnimation 2s ease-in-out 1 forwards; will-change: fill, stroke-width, stroke-dashoffset; } } @keyframes textAnimation { 0% { stroke-dashoffset: 1000; } 60% { fill: transparent; } 100% { fill: inherit; stroke-dashoffset: 0; stroke-width: 1; } } `"
|
|
1815
|
+
}
|
|
1816
|
+
],
|
|
1817
|
+
"exports": [
|
|
1818
|
+
{
|
|
1819
|
+
"kind": "js",
|
|
1820
|
+
"name": "default",
|
|
1821
|
+
"declaration": {
|
|
1822
|
+
"name": "e",
|
|
1823
|
+
"module": "dist/components/draw-svg/draw-svg.styles.js"
|
|
1824
|
+
}
|
|
1825
|
+
}
|
|
1826
|
+
]
|
|
1827
|
+
},
|
|
1828
1828
|
{
|
|
1829
1829
|
"kind": "javascript-module",
|
|
1830
1830
|
"path": "dist/components/responsive-svg/responsive-svg.js",
|
|
@@ -4725,33 +4725,45 @@
|
|
|
4725
4725
|
},
|
|
4726
4726
|
{
|
|
4727
4727
|
"kind": "javascript-module",
|
|
4728
|
-
"path": "dist/components/color-palette/
|
|
4728
|
+
"path": "dist/components/color-palette/editor/color-palette-editor.js",
|
|
4729
4729
|
"declarations": [
|
|
4730
4730
|
{
|
|
4731
4731
|
"kind": "variable",
|
|
4732
|
-
"name": "
|
|
4733
|
-
|
|
4732
|
+
"name": "X"
|
|
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> `; } }"
|
|
4734
4738
|
}
|
|
4735
4739
|
],
|
|
4736
4740
|
"exports": [
|
|
4737
4741
|
{
|
|
4738
4742
|
"kind": "js",
|
|
4739
|
-
"name": "
|
|
4743
|
+
"name": "ColorPaletteEditor",
|
|
4740
4744
|
"declaration": {
|
|
4741
|
-
"name": "
|
|
4742
|
-
"module": "dist/components/color-palette/
|
|
4745
|
+
"name": "a",
|
|
4746
|
+
"module": "dist/components/color-palette/editor/color-palette-editor.js"
|
|
4747
|
+
}
|
|
4748
|
+
},
|
|
4749
|
+
{
|
|
4750
|
+
"kind": "js",
|
|
4751
|
+
"name": "SelectedInput",
|
|
4752
|
+
"declaration": {
|
|
4753
|
+
"name": "X",
|
|
4754
|
+
"module": "dist/components/color-palette/editor/color-palette-editor.js"
|
|
4743
4755
|
}
|
|
4744
4756
|
}
|
|
4745
4757
|
]
|
|
4746
4758
|
},
|
|
4747
4759
|
{
|
|
4748
4760
|
"kind": "javascript-module",
|
|
4749
|
-
"path": "dist/components/color-palette/
|
|
4761
|
+
"path": "dist/components/color-palette/editor/color-palette-editor.styles.js",
|
|
4750
4762
|
"declarations": [
|
|
4751
4763
|
{
|
|
4752
4764
|
"kind": "variable",
|
|
4753
|
-
"name": "
|
|
4754
|
-
"default": "
|
|
4765
|
+
"name": "r",
|
|
4766
|
+
"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)); } } } } `"
|
|
4755
4767
|
}
|
|
4756
4768
|
],
|
|
4757
4769
|
"exports": [
|
|
@@ -4759,41 +4771,41 @@
|
|
|
4759
4771
|
"kind": "js",
|
|
4760
4772
|
"name": "default",
|
|
4761
4773
|
"declaration": {
|
|
4762
|
-
"name": "
|
|
4763
|
-
"module": "dist/components/color-palette/
|
|
4774
|
+
"name": "r",
|
|
4775
|
+
"module": "dist/components/color-palette/editor/color-palette-editor.styles.js"
|
|
4764
4776
|
}
|
|
4765
4777
|
}
|
|
4766
4778
|
]
|
|
4767
4779
|
},
|
|
4768
4780
|
{
|
|
4769
4781
|
"kind": "javascript-module",
|
|
4770
|
-
"path": "dist/components/color-palette/
|
|
4782
|
+
"path": "dist/components/color-palette/editor/settings-item.js",
|
|
4771
4783
|
"declarations": [
|
|
4772
4784
|
{
|
|
4773
4785
|
"kind": "variable",
|
|
4774
|
-
"name": "
|
|
4775
|
-
"default": "class extends
|
|
4786
|
+
"name": "e",
|
|
4787
|
+
"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> `; } }"
|
|
4776
4788
|
}
|
|
4777
4789
|
],
|
|
4778
4790
|
"exports": [
|
|
4779
4791
|
{
|
|
4780
4792
|
"kind": "js",
|
|
4781
|
-
"name": "
|
|
4793
|
+
"name": "SettingItem",
|
|
4782
4794
|
"declaration": {
|
|
4783
|
-
"name": "
|
|
4784
|
-
"module": "dist/components/color-palette/
|
|
4795
|
+
"name": "e",
|
|
4796
|
+
"module": "dist/components/color-palette/editor/settings-item.js"
|
|
4785
4797
|
}
|
|
4786
4798
|
}
|
|
4787
4799
|
]
|
|
4788
4800
|
},
|
|
4789
4801
|
{
|
|
4790
4802
|
"kind": "javascript-module",
|
|
4791
|
-
"path": "dist/components/color-palette/
|
|
4803
|
+
"path": "dist/components/color-palette/editor/settings-item.styles.js",
|
|
4792
4804
|
"declarations": [
|
|
4793
4805
|
{
|
|
4794
4806
|
"kind": "variable",
|
|
4795
|
-
"name": "
|
|
4796
|
-
"default": "
|
|
4807
|
+
"name": "o",
|
|
4808
|
+
"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; } `"
|
|
4797
4809
|
}
|
|
4798
4810
|
],
|
|
4799
4811
|
"exports": [
|
|
@@ -4801,8 +4813,8 @@
|
|
|
4801
4813
|
"kind": "js",
|
|
4802
4814
|
"name": "default",
|
|
4803
4815
|
"declaration": {
|
|
4804
|
-
"name": "
|
|
4805
|
-
"module": "dist/components/color-palette/
|
|
4816
|
+
"name": "o",
|
|
4817
|
+
"module": "dist/components/color-palette/editor/settings-item.styles.js"
|
|
4806
4818
|
}
|
|
4807
4819
|
}
|
|
4808
4820
|
]
|
|
@@ -4893,45 +4905,33 @@
|
|
|
4893
4905
|
},
|
|
4894
4906
|
{
|
|
4895
4907
|
"kind": "javascript-module",
|
|
4896
|
-
"path": "dist/components/color-palette/
|
|
4908
|
+
"path": "dist/components/color-palette/menu/color-palette-menu.js",
|
|
4897
4909
|
"declarations": [
|
|
4898
4910
|
{
|
|
4899
4911
|
"kind": "variable",
|
|
4900
|
-
"name": "
|
|
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> `; } }"
|
|
4912
|
+
"name": "s",
|
|
4913
|
+
"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> `; } }"
|
|
4906
4914
|
}
|
|
4907
4915
|
],
|
|
4908
4916
|
"exports": [
|
|
4909
4917
|
{
|
|
4910
4918
|
"kind": "js",
|
|
4911
|
-
"name": "
|
|
4912
|
-
"declaration": {
|
|
4913
|
-
"name": "a",
|
|
4914
|
-
"module": "dist/components/color-palette/editor/color-palette-editor.js"
|
|
4915
|
-
}
|
|
4916
|
-
},
|
|
4917
|
-
{
|
|
4918
|
-
"kind": "js",
|
|
4919
|
-
"name": "SelectedInput",
|
|
4919
|
+
"name": "ColorPaletteMenu",
|
|
4920
4920
|
"declaration": {
|
|
4921
|
-
"name": "
|
|
4922
|
-
"module": "dist/components/color-palette/
|
|
4921
|
+
"name": "s",
|
|
4922
|
+
"module": "dist/components/color-palette/menu/color-palette-menu.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/menu/color-palette-menu.styles.js",
|
|
4930
4930
|
"declarations": [
|
|
4931
4931
|
{
|
|
4932
4932
|
"kind": "variable",
|
|
4933
|
-
"name": "
|
|
4934
|
-
"default": "
|
|
4933
|
+
"name": "t",
|
|
4934
|
+
"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); } `"
|
|
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": "t",
|
|
4943
|
+
"module": "dist/components/color-palette/menu/color-palette-menu.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/menu/color-palette-reorder.js",
|
|
4951
4951
|
"declarations": [
|
|
4952
4952
|
{
|
|
4953
4953
|
"kind": "variable",
|
|
4954
|
-
"name": "
|
|
4955
|
-
"default": "class extends
|
|
4954
|
+
"name": "o",
|
|
4955
|
+
"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); } }"
|
|
4956
4956
|
}
|
|
4957
4957
|
],
|
|
4958
4958
|
"exports": [
|
|
4959
4959
|
{
|
|
4960
4960
|
"kind": "js",
|
|
4961
|
-
"name": "
|
|
4961
|
+
"name": "ColorPaletteReorder",
|
|
4962
4962
|
"declaration": {
|
|
4963
|
-
"name": "
|
|
4964
|
-
"module": "dist/components/color-palette/
|
|
4963
|
+
"name": "o",
|
|
4964
|
+
"module": "dist/components/color-palette/menu/color-palette-reorder.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/menu/color-palette-reorder.styles.js",
|
|
4972
4972
|
"declarations": [
|
|
4973
4973
|
{
|
|
4974
4974
|
"kind": "variable",
|
|
4975
|
-
"name": "
|
|
4976
|
-
"default": "
|
|
4975
|
+
"name": "n",
|
|
4976
|
+
"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; } } } `"
|
|
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": "n",
|
|
4985
|
+
"module": "dist/components/color-palette/menu/color-palette-reorder.styles.js"
|
|
4986
4986
|
}
|
|
4987
4987
|
}
|
|
4988
4988
|
]
|
package/package.json
CHANGED
|
@@ -2,18 +2,18 @@
|
|
|
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.8",
|
|
6
6
|
"author": "ALegendsTale",
|
|
7
7
|
"license": "GPL-3.0",
|
|
8
8
|
"customElements": "custom-elements.json",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"exports": {
|
|
11
|
-
"./
|
|
12
|
-
"./
|
|
13
|
-
"./
|
|
14
|
-
"./
|
|
15
|
-
"./
|
|
16
|
-
"./
|
|
11
|
+
"./components": "./dist/components",
|
|
12
|
+
"./decorators": "./dist/decorators",
|
|
13
|
+
"./utils": "./dist/utils",
|
|
14
|
+
"./components/*.js": "./dist/components/*.js",
|
|
15
|
+
"./decorators/*.js": "./dist/decorators/*.js",
|
|
16
|
+
"./utils/*.js": "./dist/utils/*.js",
|
|
17
17
|
"./custom-elements.json": "./custom-elements.json",
|
|
18
18
|
"./package.json": "./package.json"
|
|
19
19
|
},
|