@alegendstale/holly-components 4.0.1 → 4.0.2
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 +232 -222
- package/dist/components/absolute-container/absolute-container.d.ts.map +1 -1
- package/dist/components/absolute-container/absolute-container.js +30 -30
- package/dist/components/color-palette/component/color-palette-component.d.ts +5 -3
- package/dist/components/color-palette/component/color-palette-component.d.ts.map +1 -1
- package/dist/components/color-palette/component/color-palette-component.js +36 -32
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -2,38 +2,6 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
-
{
|
|
6
|
-
"kind": "javascript-module",
|
|
7
|
-
"path": "dist/events/palette-change.js",
|
|
8
|
-
"declarations": [
|
|
9
|
-
{
|
|
10
|
-
"kind": "class",
|
|
11
|
-
"description": "",
|
|
12
|
-
"name": "a",
|
|
13
|
-
"members": [
|
|
14
|
-
{
|
|
15
|
-
"kind": "field",
|
|
16
|
-
"name": "detail",
|
|
17
|
-
"default": "e"
|
|
18
|
-
}
|
|
19
|
-
],
|
|
20
|
-
"superclass": {
|
|
21
|
-
"name": "Event",
|
|
22
|
-
"module": "dist/events/palette-change.js"
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
],
|
|
26
|
-
"exports": [
|
|
27
|
-
{
|
|
28
|
-
"kind": "js",
|
|
29
|
-
"name": "PaletteChangeEvent",
|
|
30
|
-
"declaration": {
|
|
31
|
-
"name": "a",
|
|
32
|
-
"module": "dist/events/palette-change.js"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
]
|
|
36
|
-
},
|
|
37
5
|
{
|
|
38
6
|
"kind": "javascript-module",
|
|
39
7
|
"path": "dist/controllers/ResponsiveController.js",
|
|
@@ -185,6 +153,38 @@
|
|
|
185
153
|
}
|
|
186
154
|
]
|
|
187
155
|
},
|
|
156
|
+
{
|
|
157
|
+
"kind": "javascript-module",
|
|
158
|
+
"path": "dist/events/palette-change.js",
|
|
159
|
+
"declarations": [
|
|
160
|
+
{
|
|
161
|
+
"kind": "class",
|
|
162
|
+
"description": "",
|
|
163
|
+
"name": "a",
|
|
164
|
+
"members": [
|
|
165
|
+
{
|
|
166
|
+
"kind": "field",
|
|
167
|
+
"name": "detail",
|
|
168
|
+
"default": "e"
|
|
169
|
+
}
|
|
170
|
+
],
|
|
171
|
+
"superclass": {
|
|
172
|
+
"name": "Event",
|
|
173
|
+
"module": "dist/events/palette-change.js"
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
],
|
|
177
|
+
"exports": [
|
|
178
|
+
{
|
|
179
|
+
"kind": "js",
|
|
180
|
+
"name": "PaletteChangeEvent",
|
|
181
|
+
"declaration": {
|
|
182
|
+
"name": "a",
|
|
183
|
+
"module": "dist/events/palette-change.js"
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
]
|
|
187
|
+
},
|
|
188
188
|
{
|
|
189
189
|
"kind": "javascript-module",
|
|
190
190
|
"path": "dist/utils/basicUtils.js",
|
|
@@ -1595,8 +1595,8 @@
|
|
|
1595
1595
|
"declarations": [
|
|
1596
1596
|
{
|
|
1597
1597
|
"kind": "variable",
|
|
1598
|
-
"name": "
|
|
1599
|
-
"default": "class extends h { constructor() { super(...arguments), this.dialogRef = m(), this._open = !1, this.left = 0, this.top = 0, this.disableContextEvent = !1; } set open(e) { this._open = e, requestAnimationFrame(() => { if (!this.dialogRef.value) return; let t = this.dialogRef.value; t.open ? t.close() : t.showModal(); }), this.dispatchEvent(new CustomEvent(\"visibility\", { detail: e })); } get open() { return this._open; } render() { const e = { inset: this.left === 0 && this.top === 0 ? 0 : \"unset\", left: `${this.left}px`, top: `${this.top}px` }; return u` <dialog part='__dialog' style=${
|
|
1598
|
+
"name": "i",
|
|
1599
|
+
"default": "class extends h { constructor() { super(...arguments), this.dialogRef = m(), this._open = !1, this.left = 0, this.top = 0, this.disableContextEvent = !1; } set open(e) { this._open = e, requestAnimationFrame(() => { if (!this.dialogRef.value) return; let t = this.dialogRef.value; t.open ? t.close() : t.showModal(); }), this.dispatchEvent(new CustomEvent(\"visibility\", { detail: e })); } get open() { return this._open; } render() { const e = { inset: this.left === 0 && this.top === 0 ? 0 : \"unset\", left: `${this.left}px`, top: `${this.top}px` }; return u` <dialog part='__dialog' style=${g(e)} @mousedown=${(t) => { if (!(t.target instanceof HTMLDialogElement)) return; const o = t.target.getBoundingClientRect(); (t.clientX < o.left || t.clientX > o.right || t.clientY < o.top || t.clientY > o.bottom) && (this.open = !1); }} @contextmenu=${(t) => this.disableContextEvent && t.preventDefault()} ${d(this.dialogRef)} > <slot></slot> </dialog> `; } /** Toggle whether container is open. */ toggle() { this.open = !this.open; } /** Set whether the container is open. */ setOpen(e) { this.open = e; } /** Set the x and y position of the container. */ setPosition(e, t) { this.left = e, this.top = t; } }"
|
|
1600
1600
|
}
|
|
1601
1601
|
],
|
|
1602
1602
|
"exports": [
|
|
@@ -1604,7 +1604,7 @@
|
|
|
1604
1604
|
"kind": "js",
|
|
1605
1605
|
"name": "AbsoluteContainer",
|
|
1606
1606
|
"declaration": {
|
|
1607
|
-
"name": "
|
|
1607
|
+
"name": "i",
|
|
1608
1608
|
"module": "dist/components/absolute-container/absolute-container.js"
|
|
1609
1609
|
}
|
|
1610
1610
|
}
|
|
@@ -3406,124 +3406,6 @@
|
|
|
3406
3406
|
}
|
|
3407
3407
|
]
|
|
3408
3408
|
},
|
|
3409
|
-
{
|
|
3410
|
-
"kind": "javascript-module",
|
|
3411
|
-
"path": "src/components/carousel-scroller/carousel-scroller.styles.ts",
|
|
3412
|
-
"declarations": [],
|
|
3413
|
-
"exports": [
|
|
3414
|
-
{
|
|
3415
|
-
"kind": "js",
|
|
3416
|
-
"name": "default",
|
|
3417
|
-
"declaration": {
|
|
3418
|
-
"module": "src/components/carousel-scroller/carousel-scroller.styles.ts"
|
|
3419
|
-
}
|
|
3420
|
-
}
|
|
3421
|
-
]
|
|
3422
|
-
},
|
|
3423
|
-
{
|
|
3424
|
-
"kind": "javascript-module",
|
|
3425
|
-
"path": "src/components/carousel-scroller/carousel-scroller.ts",
|
|
3426
|
-
"declarations": [
|
|
3427
|
-
{
|
|
3428
|
-
"kind": "class",
|
|
3429
|
-
"description": "A carousel which can have any number of slides, and rotates circularly.",
|
|
3430
|
-
"name": "CarouselScroller",
|
|
3431
|
-
"cssProperties": [
|
|
3432
|
-
{
|
|
3433
|
-
"type": {
|
|
3434
|
-
"text": "<length>"
|
|
3435
|
-
},
|
|
3436
|
-
"description": "The size of the scroller padding.",
|
|
3437
|
-
"name": "--padding"
|
|
3438
|
-
},
|
|
3439
|
-
{
|
|
3440
|
-
"type": {
|
|
3441
|
-
"text": "<length>"
|
|
3442
|
-
},
|
|
3443
|
-
"description": "The size of the scroller margin.",
|
|
3444
|
-
"name": "--margin"
|
|
3445
|
-
}
|
|
3446
|
-
],
|
|
3447
|
-
"members": [
|
|
3448
|
-
{
|
|
3449
|
-
"kind": "field",
|
|
3450
|
-
"name": "slotEl",
|
|
3451
|
-
"type": {
|
|
3452
|
-
"text": "HTMLSlotElement"
|
|
3453
|
-
},
|
|
3454
|
-
"privacy": "protected",
|
|
3455
|
-
"description": "The items that will be used as slides."
|
|
3456
|
-
},
|
|
3457
|
-
{
|
|
3458
|
-
"kind": "field",
|
|
3459
|
-
"name": "slotChildren",
|
|
3460
|
-
"type": {
|
|
3461
|
-
"text": "HTMLElement[]"
|
|
3462
|
-
},
|
|
3463
|
-
"privacy": "protected",
|
|
3464
|
-
"default": "[]",
|
|
3465
|
-
"description": "The slides being used."
|
|
3466
|
-
},
|
|
3467
|
-
{
|
|
3468
|
-
"kind": "method",
|
|
3469
|
-
"name": "getCurrentSlide",
|
|
3470
|
-
"privacy": "public",
|
|
3471
|
-
"description": "Gets the current slide.",
|
|
3472
|
-
"return": {
|
|
3473
|
-
"type": {
|
|
3474
|
-
"text": ""
|
|
3475
|
-
}
|
|
3476
|
-
}
|
|
3477
|
-
},
|
|
3478
|
-
{
|
|
3479
|
-
"kind": "method",
|
|
3480
|
-
"name": "scrollToPrevSlide",
|
|
3481
|
-
"privacy": "public",
|
|
3482
|
-
"description": "Scrolls to the slide before the current slide."
|
|
3483
|
-
},
|
|
3484
|
-
{
|
|
3485
|
-
"kind": "method",
|
|
3486
|
-
"name": "scrollToNextSlide",
|
|
3487
|
-
"privacy": "public",
|
|
3488
|
-
"description": "Scrolls to the slide after the current slide."
|
|
3489
|
-
}
|
|
3490
|
-
],
|
|
3491
|
-
"events": [
|
|
3492
|
-
{
|
|
3493
|
-
"name": "slots-loaded",
|
|
3494
|
-
"type": {
|
|
3495
|
-
"text": "HTMLElement[]"
|
|
3496
|
-
},
|
|
3497
|
-
"description": "Emits when the slots have fully loaded."
|
|
3498
|
-
}
|
|
3499
|
-
],
|
|
3500
|
-
"superclass": {
|
|
3501
|
-
"name": "LitElement",
|
|
3502
|
-
"package": "lit"
|
|
3503
|
-
},
|
|
3504
|
-
"tagName": "carousel-scroller",
|
|
3505
|
-
"customElement": true
|
|
3506
|
-
}
|
|
3507
|
-
],
|
|
3508
|
-
"exports": [
|
|
3509
|
-
{
|
|
3510
|
-
"kind": "js",
|
|
3511
|
-
"name": "CarouselScroller",
|
|
3512
|
-
"declaration": {
|
|
3513
|
-
"name": "CarouselScroller",
|
|
3514
|
-
"module": "src/components/carousel-scroller/carousel-scroller.ts"
|
|
3515
|
-
}
|
|
3516
|
-
},
|
|
3517
|
-
{
|
|
3518
|
-
"kind": "custom-element-definition",
|
|
3519
|
-
"name": "carousel-scroller",
|
|
3520
|
-
"declaration": {
|
|
3521
|
-
"name": "CarouselScroller",
|
|
3522
|
-
"module": "src/components/carousel-scroller/carousel-scroller.ts"
|
|
3523
|
-
}
|
|
3524
|
-
}
|
|
3525
|
-
]
|
|
3526
|
-
},
|
|
3527
3409
|
{
|
|
3528
3410
|
"kind": "javascript-module",
|
|
3529
3411
|
"path": "src/components/color-palette/color-palette-utils.ts",
|
|
@@ -4465,6 +4347,124 @@
|
|
|
4465
4347
|
}
|
|
4466
4348
|
]
|
|
4467
4349
|
},
|
|
4350
|
+
{
|
|
4351
|
+
"kind": "javascript-module",
|
|
4352
|
+
"path": "src/components/carousel-scroller/carousel-scroller.styles.ts",
|
|
4353
|
+
"declarations": [],
|
|
4354
|
+
"exports": [
|
|
4355
|
+
{
|
|
4356
|
+
"kind": "js",
|
|
4357
|
+
"name": "default",
|
|
4358
|
+
"declaration": {
|
|
4359
|
+
"module": "src/components/carousel-scroller/carousel-scroller.styles.ts"
|
|
4360
|
+
}
|
|
4361
|
+
}
|
|
4362
|
+
]
|
|
4363
|
+
},
|
|
4364
|
+
{
|
|
4365
|
+
"kind": "javascript-module",
|
|
4366
|
+
"path": "src/components/carousel-scroller/carousel-scroller.ts",
|
|
4367
|
+
"declarations": [
|
|
4368
|
+
{
|
|
4369
|
+
"kind": "class",
|
|
4370
|
+
"description": "A carousel which can have any number of slides, and rotates circularly.",
|
|
4371
|
+
"name": "CarouselScroller",
|
|
4372
|
+
"cssProperties": [
|
|
4373
|
+
{
|
|
4374
|
+
"type": {
|
|
4375
|
+
"text": "<length>"
|
|
4376
|
+
},
|
|
4377
|
+
"description": "The size of the scroller padding.",
|
|
4378
|
+
"name": "--padding"
|
|
4379
|
+
},
|
|
4380
|
+
{
|
|
4381
|
+
"type": {
|
|
4382
|
+
"text": "<length>"
|
|
4383
|
+
},
|
|
4384
|
+
"description": "The size of the scroller margin.",
|
|
4385
|
+
"name": "--margin"
|
|
4386
|
+
}
|
|
4387
|
+
],
|
|
4388
|
+
"members": [
|
|
4389
|
+
{
|
|
4390
|
+
"kind": "field",
|
|
4391
|
+
"name": "slotEl",
|
|
4392
|
+
"type": {
|
|
4393
|
+
"text": "HTMLSlotElement"
|
|
4394
|
+
},
|
|
4395
|
+
"privacy": "protected",
|
|
4396
|
+
"description": "The items that will be used as slides."
|
|
4397
|
+
},
|
|
4398
|
+
{
|
|
4399
|
+
"kind": "field",
|
|
4400
|
+
"name": "slotChildren",
|
|
4401
|
+
"type": {
|
|
4402
|
+
"text": "HTMLElement[]"
|
|
4403
|
+
},
|
|
4404
|
+
"privacy": "protected",
|
|
4405
|
+
"default": "[]",
|
|
4406
|
+
"description": "The slides being used."
|
|
4407
|
+
},
|
|
4408
|
+
{
|
|
4409
|
+
"kind": "method",
|
|
4410
|
+
"name": "getCurrentSlide",
|
|
4411
|
+
"privacy": "public",
|
|
4412
|
+
"description": "Gets the current slide.",
|
|
4413
|
+
"return": {
|
|
4414
|
+
"type": {
|
|
4415
|
+
"text": ""
|
|
4416
|
+
}
|
|
4417
|
+
}
|
|
4418
|
+
},
|
|
4419
|
+
{
|
|
4420
|
+
"kind": "method",
|
|
4421
|
+
"name": "scrollToPrevSlide",
|
|
4422
|
+
"privacy": "public",
|
|
4423
|
+
"description": "Scrolls to the slide before the current slide."
|
|
4424
|
+
},
|
|
4425
|
+
{
|
|
4426
|
+
"kind": "method",
|
|
4427
|
+
"name": "scrollToNextSlide",
|
|
4428
|
+
"privacy": "public",
|
|
4429
|
+
"description": "Scrolls to the slide after the current slide."
|
|
4430
|
+
}
|
|
4431
|
+
],
|
|
4432
|
+
"events": [
|
|
4433
|
+
{
|
|
4434
|
+
"name": "slots-loaded",
|
|
4435
|
+
"type": {
|
|
4436
|
+
"text": "HTMLElement[]"
|
|
4437
|
+
},
|
|
4438
|
+
"description": "Emits when the slots have fully loaded."
|
|
4439
|
+
}
|
|
4440
|
+
],
|
|
4441
|
+
"superclass": {
|
|
4442
|
+
"name": "LitElement",
|
|
4443
|
+
"package": "lit"
|
|
4444
|
+
},
|
|
4445
|
+
"tagName": "carousel-scroller",
|
|
4446
|
+
"customElement": true
|
|
4447
|
+
}
|
|
4448
|
+
],
|
|
4449
|
+
"exports": [
|
|
4450
|
+
{
|
|
4451
|
+
"kind": "js",
|
|
4452
|
+
"name": "CarouselScroller",
|
|
4453
|
+
"declaration": {
|
|
4454
|
+
"name": "CarouselScroller",
|
|
4455
|
+
"module": "src/components/carousel-scroller/carousel-scroller.ts"
|
|
4456
|
+
}
|
|
4457
|
+
},
|
|
4458
|
+
{
|
|
4459
|
+
"kind": "custom-element-definition",
|
|
4460
|
+
"name": "carousel-scroller",
|
|
4461
|
+
"declaration": {
|
|
4462
|
+
"name": "CarouselScroller",
|
|
4463
|
+
"module": "src/components/carousel-scroller/carousel-scroller.ts"
|
|
4464
|
+
}
|
|
4465
|
+
}
|
|
4466
|
+
]
|
|
4467
|
+
},
|
|
4468
4468
|
{
|
|
4469
4469
|
"kind": "javascript-module",
|
|
4470
4470
|
"path": "src/components/responsive-svg/responsive-svg.styles.ts",
|
|
@@ -4939,33 +4939,33 @@
|
|
|
4939
4939
|
},
|
|
4940
4940
|
{
|
|
4941
4941
|
"kind": "javascript-module",
|
|
4942
|
-
"path": "dist/components/color-palette/
|
|
4942
|
+
"path": "dist/components/color-palette/component/color-palette-component.js",
|
|
4943
4943
|
"declarations": [
|
|
4944
4944
|
{
|
|
4945
4945
|
"kind": "variable",
|
|
4946
|
-
"name": "
|
|
4947
|
-
"default": "class extends
|
|
4946
|
+
"name": "t",
|
|
4947
|
+
"default": "class extends g { constructor() { super(...arguments), this.colors = [], this.settings = { height: r.height, width: r.width, direction: r.direction, gradient: r.gradient, preventHover: r.preventHover, hideText: r.hideText, override: r.override, aliases: [] }, this.editMode = !1, this.responsiveController = new $(this, \"1400px\"); } /** Whether the screen is mobile sized. */ get isMobile() { return this.responsiveController.isMobile; } render() { return a` <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(), this.isMobile ? this._menuSheet && this._menuSheet.toggleSheet() : (this._menuWrapper.toggle(), this._menuWrapper.setPosition(e.clientX + 16, e.clientY)); }} @palette-change=${({ detail: { colors: e, settings: i } }) => { this.colors = e, i && (this.settings = i); }} > </color-palette> ${this.isMobile ? a` <bottom-sheet id=\"menu-wrapper\" .snapPoints=${[0, 50]}> <color-palette-menu .colors=${this.colors} .settings=${this.settings} ?editMode=${this.editMode} @click=${() => this._menuSheet.toggleSheet()} @palette-change=${this.handlePaletteChange} @edit-mode=${this.handleEditMode} @open-editor=${this.handleOpenEditor} > </color-palette-menu> </bottom-sheet> ` : a` <absolute-container id=\"menu-wrapper\" @visibility=${({ detail: e }) => { e === !1 && (this._menu.reorder = !1); }} > <color-palette-menu .colors=${this.colors} .settings=${this.settings} ?editMode=${this.editMode} @click=${() => this._menuWrapper.toggle()} @palette-change=${this.handlePaletteChange} @edit-mode=${this.handleEditMode} @open-editor=${this.handleOpenEditor} > </color-palette-menu> </absolute-container> `} <absolute-container id=\"editor-wrapper\"> <color-palette-editor .colors=${this.colors} .settings=${this.settings} @palette-change=${(e) => { const { colors: i, settings: n } = e.detail; this.colors = i, this.settings = n, this._editorWrapper.setOpen(!1); }} > </color-palette-editor> </absolute-container> `; } handlePaletteChange({ detail: { colors: e } }) { e && (this.colors = e); } handleEditMode({ detail: e }) { this.editMode = e; } handleOpenEditor() { this._editorWrapper.toggle(), this._editor.colors = this.colors, this._editor.settings = this.settings; } }"
|
|
4948
4948
|
}
|
|
4949
4949
|
],
|
|
4950
4950
|
"exports": [
|
|
4951
4951
|
{
|
|
4952
4952
|
"kind": "js",
|
|
4953
|
-
"name": "
|
|
4953
|
+
"name": "ColorPaletteComponent",
|
|
4954
4954
|
"declaration": {
|
|
4955
|
-
"name": "
|
|
4956
|
-
"module": "dist/components/color-palette/
|
|
4955
|
+
"name": "t",
|
|
4956
|
+
"module": "dist/components/color-palette/component/color-palette-component.js"
|
|
4957
4957
|
}
|
|
4958
4958
|
}
|
|
4959
4959
|
]
|
|
4960
4960
|
},
|
|
4961
4961
|
{
|
|
4962
4962
|
"kind": "javascript-module",
|
|
4963
|
-
"path": "dist/components/color-palette/
|
|
4963
|
+
"path": "dist/components/color-palette/component/color-palette-component.styles.js",
|
|
4964
4964
|
"declarations": [
|
|
4965
4965
|
{
|
|
4966
4966
|
"kind": "variable",
|
|
4967
|
-
"name": "
|
|
4968
|
-
"default": "o` :host
|
|
4967
|
+
"name": "r",
|
|
4968
|
+
"default": "o` :host { display: block; } absolute-container::part(dialog)::backdrop { background-color: rgba(0, 0, 0, 0.8); } `"
|
|
4969
4969
|
}
|
|
4970
4970
|
],
|
|
4971
4971
|
"exports": [
|
|
@@ -4973,41 +4973,53 @@
|
|
|
4973
4973
|
"kind": "js",
|
|
4974
4974
|
"name": "default",
|
|
4975
4975
|
"declaration": {
|
|
4976
|
-
"name": "
|
|
4977
|
-
"module": "dist/components/color-palette/
|
|
4976
|
+
"name": "r",
|
|
4977
|
+
"module": "dist/components/color-palette/component/color-palette-component.styles.js"
|
|
4978
4978
|
}
|
|
4979
4979
|
}
|
|
4980
4980
|
]
|
|
4981
4981
|
},
|
|
4982
4982
|
{
|
|
4983
4983
|
"kind": "javascript-module",
|
|
4984
|
-
"path": "dist/components/color-palette/
|
|
4984
|
+
"path": "dist/components/color-palette/editor/color-palette-editor.js",
|
|
4985
4985
|
"declarations": [
|
|
4986
4986
|
{
|
|
4987
4987
|
"kind": "variable",
|
|
4988
|
-
"name": "
|
|
4989
|
-
|
|
4988
|
+
"name": "x"
|
|
4989
|
+
},
|
|
4990
|
+
{
|
|
4991
|
+
"kind": "variable",
|
|
4992
|
+
"name": "s",
|
|
4993
|
+
"default": "class extends u { constructor() { super(...arguments), this.colors = [], this.settings = { height: o.height, width: o.width, direction: o.direction, gradient: o.gradient, preventHover: o.preventHover, hideText: o.hideText, override: o.override, aliases: [] }, this.selectedInput = \"Color Picker\", this.combination = d.Random; } render() { const t = () => { switch (this.selectedInput) { case \"Color Picker\": return r` <picker-manual @change=${(e) => { this.colors = [...this.colors, e.detail], this.settings.aliases = [...this.settings.aliases, \"\"]; }} > </picker-manual> `; case \"Generate\": return r` <picker-generate .baseColor=${this.baseColor} combination=${this.combination} .settings=${this.settings} @palette-change=${({ detail: { colors: e, settings: i } }) => { this.colors = e, i && (this.settings = i); }} > </picker-generate> `; case \"Image\": return r` <picker-image width=${this._wrapper.getBoundingClientRect().width} height=${this._wrapper.getBoundingClientRect().width} @select=${(e) => { this.colors = [...this.colors, e.detail], this.settings.aliases = [...this.settings.aliases, \"\"]; }} @palette-change=${({ detail: { colors: e } }) => { this.colors = e, this.settings.aliases = []; }} > </picker-image> `; case \"URL\": return r` <picker-url @change=${({ detail: e }) => { this.colors = e, this.settings.aliases = []; }} > </picker-url> `; } }; return r` <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\"} > ${l(v)} </button> <button title=\"Generate\" @click=${() => this.selectedInput = \"Generate\"} > ${l(f)} </button> <button title=\"Image\" @click=${() => this.selectedInput = \"Image\"} > ${l(b)} </button> <button title=\"URL\" @click=${() => this.selectedInput = \"URL\"} > ${l(k)} </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} @palette-change=${({ detail: { colors: e, settings: i } }) => { this.colors = e, i && (this.settings = i); }} > </color-palette> </section> <section id='settings'> <h3>Settings</h3> ${this.renderSettings()} <button id='create-btn' @click=${() => { this.colors.length === 0 && (this.colors = C(d.Random).colors), this.dispatchEvent(new H({ colors: this.colors, settings: this.settings })); }} > Create </button> </section> </div> `; } /** Renders the settings fields. */ renderSettings() { return r` <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(y).map((t) => r`<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> `; } }"
|
|
4990
4994
|
}
|
|
4991
4995
|
],
|
|
4992
4996
|
"exports": [
|
|
4993
4997
|
{
|
|
4994
4998
|
"kind": "js",
|
|
4995
|
-
"name": "
|
|
4999
|
+
"name": "ColorPaletteEditor",
|
|
4996
5000
|
"declaration": {
|
|
4997
|
-
"name": "
|
|
4998
|
-
"module": "dist/components/color-palette/
|
|
5001
|
+
"name": "s",
|
|
5002
|
+
"module": "dist/components/color-palette/editor/color-palette-editor.js"
|
|
5003
|
+
}
|
|
5004
|
+
},
|
|
5005
|
+
{
|
|
5006
|
+
"kind": "js",
|
|
5007
|
+
"name": "SelectedInput",
|
|
5008
|
+
"declaration": {
|
|
5009
|
+
"name": "x",
|
|
5010
|
+
"module": "dist/components/color-palette/editor/color-palette-editor.js"
|
|
4999
5011
|
}
|
|
5000
5012
|
}
|
|
5001
5013
|
]
|
|
5002
5014
|
},
|
|
5003
5015
|
{
|
|
5004
5016
|
"kind": "javascript-module",
|
|
5005
|
-
"path": "dist/components/color-palette/
|
|
5017
|
+
"path": "dist/components/color-palette/editor/color-palette-editor.styles.js",
|
|
5006
5018
|
"declarations": [
|
|
5007
5019
|
{
|
|
5008
5020
|
"kind": "variable",
|
|
5009
|
-
"name": "
|
|
5010
|
-
"default": "
|
|
5021
|
+
"name": "r",
|
|
5022
|
+
"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)); } } } } `"
|
|
5011
5023
|
}
|
|
5012
5024
|
],
|
|
5013
5025
|
"exports": [
|
|
@@ -5015,41 +5027,41 @@
|
|
|
5015
5027
|
"kind": "js",
|
|
5016
5028
|
"name": "default",
|
|
5017
5029
|
"declaration": {
|
|
5018
|
-
"name": "
|
|
5019
|
-
"module": "dist/components/color-palette/
|
|
5030
|
+
"name": "r",
|
|
5031
|
+
"module": "dist/components/color-palette/editor/color-palette-editor.styles.js"
|
|
5020
5032
|
}
|
|
5021
5033
|
}
|
|
5022
5034
|
]
|
|
5023
5035
|
},
|
|
5024
5036
|
{
|
|
5025
5037
|
"kind": "javascript-module",
|
|
5026
|
-
"path": "dist/components/color-palette/
|
|
5038
|
+
"path": "dist/components/color-palette/editor/setting-item.js",
|
|
5027
5039
|
"declarations": [
|
|
5028
5040
|
{
|
|
5029
5041
|
"kind": "variable",
|
|
5030
|
-
"name": "
|
|
5031
|
-
"default": "class extends
|
|
5042
|
+
"name": "e",
|
|
5043
|
+
"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> `; } }"
|
|
5032
5044
|
}
|
|
5033
5045
|
],
|
|
5034
5046
|
"exports": [
|
|
5035
5047
|
{
|
|
5036
5048
|
"kind": "js",
|
|
5037
|
-
"name": "
|
|
5049
|
+
"name": "SettingItem",
|
|
5038
5050
|
"declaration": {
|
|
5039
|
-
"name": "
|
|
5040
|
-
"module": "dist/components/color-palette/
|
|
5051
|
+
"name": "e",
|
|
5052
|
+
"module": "dist/components/color-palette/editor/setting-item.js"
|
|
5041
5053
|
}
|
|
5042
5054
|
}
|
|
5043
5055
|
]
|
|
5044
5056
|
},
|
|
5045
5057
|
{
|
|
5046
5058
|
"kind": "javascript-module",
|
|
5047
|
-
"path": "dist/components/color-palette/
|
|
5059
|
+
"path": "dist/components/color-palette/editor/setting-item.styles.js",
|
|
5048
5060
|
"declarations": [
|
|
5049
5061
|
{
|
|
5050
5062
|
"kind": "variable",
|
|
5051
|
-
"name": "
|
|
5052
|
-
"default": "
|
|
5063
|
+
"name": "o",
|
|
5064
|
+
"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; } `"
|
|
5053
5065
|
}
|
|
5054
5066
|
],
|
|
5055
5067
|
"exports": [
|
|
@@ -5057,53 +5069,41 @@
|
|
|
5057
5069
|
"kind": "js",
|
|
5058
5070
|
"name": "default",
|
|
5059
5071
|
"declaration": {
|
|
5060
|
-
"name": "
|
|
5061
|
-
"module": "dist/components/color-palette/
|
|
5072
|
+
"name": "o",
|
|
5073
|
+
"module": "dist/components/color-palette/editor/setting-item.styles.js"
|
|
5062
5074
|
}
|
|
5063
5075
|
}
|
|
5064
5076
|
]
|
|
5065
5077
|
},
|
|
5066
5078
|
{
|
|
5067
5079
|
"kind": "javascript-module",
|
|
5068
|
-
"path": "dist/components/color-palette/
|
|
5080
|
+
"path": "dist/components/color-palette/item/color-palette-item-edit.js",
|
|
5069
5081
|
"declarations": [
|
|
5070
|
-
{
|
|
5071
|
-
"kind": "variable",
|
|
5072
|
-
"name": "x"
|
|
5073
|
-
},
|
|
5074
5082
|
{
|
|
5075
5083
|
"kind": "variable",
|
|
5076
5084
|
"name": "s",
|
|
5077
|
-
"default": "class extends
|
|
5085
|
+
"default": "class extends n { constructor() { super(...arguments), this.stabilizeWhileEditing = !1, this._storedAlias = \"\"; } /** Renders the content. */ content() { return p` <input value=${this.alias || this.color} @pointerdown=${(t) => { t.target instanceof HTMLInputElement && (t.stopPropagation(), this._storedAlias = t.target.value, t.target.value = \"\", t.target.focus()); }} @contextmenu=${(t) => { t.target instanceof HTMLInputElement && (t.stopPropagation(), t.preventDefault(), t.target.value = this.color.toUpperCase(), this.alias = \"\", t.target.blur()); }} @keypress=${(t) => { t.target instanceof HTMLInputElement && t.key === \"Enter\" && t.target.blur(); }} @focusout=${(t) => { t.target instanceof HTMLInputElement && (t.target.value.trim() === \"\" ? t.target.value = this._storedAlias : t.target.value !== this.color && (this.alias = t.target.value), this.dispatchEvent(new CustomEvent(\"alias\", { detail: this.alias }))); }} > <button id='trash' title='Remove' @click=${(t) => this.dispatchEvent(new Event(\"trash\", t))} > ${c(h)} </button> `; } }"
|
|
5078
5086
|
}
|
|
5079
5087
|
],
|
|
5080
5088
|
"exports": [
|
|
5081
5089
|
{
|
|
5082
5090
|
"kind": "js",
|
|
5083
|
-
"name": "
|
|
5091
|
+
"name": "ColorPaletteItemEdit",
|
|
5084
5092
|
"declaration": {
|
|
5085
5093
|
"name": "s",
|
|
5086
|
-
"module": "dist/components/color-palette/
|
|
5087
|
-
}
|
|
5088
|
-
},
|
|
5089
|
-
{
|
|
5090
|
-
"kind": "js",
|
|
5091
|
-
"name": "SelectedInput",
|
|
5092
|
-
"declaration": {
|
|
5093
|
-
"name": "x",
|
|
5094
|
-
"module": "dist/components/color-palette/editor/color-palette-editor.js"
|
|
5094
|
+
"module": "dist/components/color-palette/item/color-palette-item-edit.js"
|
|
5095
5095
|
}
|
|
5096
5096
|
}
|
|
5097
5097
|
]
|
|
5098
5098
|
},
|
|
5099
5099
|
{
|
|
5100
5100
|
"kind": "javascript-module",
|
|
5101
|
-
"path": "dist/components/color-palette/
|
|
5101
|
+
"path": "dist/components/color-palette/item/color-palette-item-edit.styles.js",
|
|
5102
5102
|
"declarations": [
|
|
5103
5103
|
{
|
|
5104
5104
|
"kind": "variable",
|
|
5105
|
-
"name": "
|
|
5106
|
-
"default": "o` :host {
|
|
5105
|
+
"name": "e",
|
|
5106
|
+
"default": "o` :host([stabilizeWhileEditing]:hover) { flex-basis: 0 !important; } :host(:not([stabilizeWhileEditing])) #container { display: none; } :host(:not([stabilizeWhileEditing]):hover) #container { display: flex; } #container { input { color: var(--palette-item-color); font-size: var(--palette-item-font-size); font-weight: bold; user-select: none; border: none; background-color: transparent; field-sizing: content; min-width: 2rem; max-width: 5rem; cursor: pointer; text-align: center; } /* Color Trash Button */ #trash { background-color: var(--palette-item-background-color); color: var(--palette-item-color); box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 20px -28px inset; cursor: pointer; border: none; border-radius: 5px; padding: 4px 12px; &:hover { background-color: rgb(75, 75, 75); } svg { width: 18px; height: 18px; } } } `"
|
|
5107
5107
|
}
|
|
5108
5108
|
],
|
|
5109
5109
|
"exports": [
|
|
@@ -5111,41 +5111,41 @@
|
|
|
5111
5111
|
"kind": "js",
|
|
5112
5112
|
"name": "default",
|
|
5113
5113
|
"declaration": {
|
|
5114
|
-
"name": "
|
|
5115
|
-
"module": "dist/components/color-palette/
|
|
5114
|
+
"name": "e",
|
|
5115
|
+
"module": "dist/components/color-palette/item/color-palette-item-edit.styles.js"
|
|
5116
5116
|
}
|
|
5117
5117
|
}
|
|
5118
5118
|
]
|
|
5119
5119
|
},
|
|
5120
5120
|
{
|
|
5121
5121
|
"kind": "javascript-module",
|
|
5122
|
-
"path": "dist/components/color-palette/
|
|
5122
|
+
"path": "dist/components/color-palette/item/color-palette-item.js",
|
|
5123
5123
|
"declarations": [
|
|
5124
5124
|
{
|
|
5125
5125
|
"kind": "variable",
|
|
5126
|
-
"name": "
|
|
5127
|
-
"default": "class extends
|
|
5126
|
+
"name": "t",
|
|
5127
|
+
"default": "class extends d { constructor() { super(...arguments), this.color = \"\", this.alias = \"\", this.aliasMode = c.aliasMode, this.direction = c.direction, this.editMode = !1, this.height = c.height, this.preventHover = !1, this.hideText = !1, this.colorCount = 0; } render() { return this.style.setProperty(\"--palette-item-background-color\", this.color), this.style.setProperty(\"--palette-item-color\", f(this.color)), this.style.setProperty(\"--palette-item-font-size\", `${g(this.colorCount)}px`), p` <div id='container' @click=${(i) => this.dispatchEvent(new Event(\"select\", i))} > ${this.content()} </div> `; } /** Renders the content */ content() { const i = this.aliasMode === u.Both || this.alias == null || this.alias.trim() === \"\"; return p` ${i ? p`<span id='text'>${this.color.trim().toUpperCase()}</span>` : y} ${this.alias !== \"\" ? p` <span id=\"alias\">${this.alias}</span> ` : y} `; } }"
|
|
5128
5128
|
}
|
|
5129
5129
|
],
|
|
5130
5130
|
"exports": [
|
|
5131
5131
|
{
|
|
5132
5132
|
"kind": "js",
|
|
5133
|
-
"name": "
|
|
5133
|
+
"name": "ColorPaletteItem",
|
|
5134
5134
|
"declaration": {
|
|
5135
|
-
"name": "
|
|
5136
|
-
"module": "dist/components/color-palette/
|
|
5135
|
+
"name": "t",
|
|
5136
|
+
"module": "dist/components/color-palette/item/color-palette-item.js"
|
|
5137
5137
|
}
|
|
5138
5138
|
}
|
|
5139
5139
|
]
|
|
5140
5140
|
},
|
|
5141
5141
|
{
|
|
5142
5142
|
"kind": "javascript-module",
|
|
5143
|
-
"path": "dist/components/color-palette/
|
|
5143
|
+
"path": "dist/components/color-palette/item/color-palette-item.styles.js",
|
|
5144
5144
|
"declarations": [
|
|
5145
5145
|
{
|
|
5146
5146
|
"kind": "variable",
|
|
5147
5147
|
"name": "o",
|
|
5148
|
-
"default": "
|
|
5148
|
+
"default": "e` :host { --palette-item-background-color: #000000; --palette-item-color: #ffffff; --palette-item-font-size: 16px; display: flex; flex: 1; transition: all 0.1s ease-in-out; background-color: var(--palette-item-background-color); color: var(--palette-item-color); } /* Animation Size */ :host(:not([preventHover]):hover) { flex-basis: var(--palette-column-flex-basis); } :host([direction='column']:not([preventHover]):hover) { flex-basis: 80px; } /* Hover States */ :host(:not([preventHover])) #container > span { display: none; } :host(:not([preventHover]):hover) #container > span { display: block; } :host([hideText]) #container > span { display: none; } :host([hideText]:hover) #container > span { display: none; } /* Container Directions */ :host([direction='column']) > #container { display: flex; flex-direction: column; justify-content: center; } :host([direction='row']) > #container { display: flex; justify-content: center; } :host([direction='row'][editMode]) > #container { display: grid; grid-template-columns: 1fr 1fr; } #container { flex: 1; gap: 3%; *:first-child { justify-self: flex-end; align-self: center; } *:last-child { justify-self: flex-start; align-self: center; } span { display: block; text-align: center; font-size: 100%; font-weight: bold; user-select: none; } } `"
|
|
5149
5149
|
}
|
|
5150
5150
|
],
|
|
5151
5151
|
"exports": [
|
|
@@ -5154,7 +5154,7 @@
|
|
|
5154
5154
|
"name": "default",
|
|
5155
5155
|
"declaration": {
|
|
5156
5156
|
"name": "o",
|
|
5157
|
-
"module": "dist/components/color-palette/
|
|
5157
|
+
"module": "dist/components/color-palette/item/color-palette-item.styles.js"
|
|
5158
5158
|
}
|
|
5159
5159
|
}
|
|
5160
5160
|
]
|
|
@@ -5896,6 +5896,14 @@
|
|
|
5896
5896
|
},
|
|
5897
5897
|
"privacy": "private"
|
|
5898
5898
|
},
|
|
5899
|
+
{
|
|
5900
|
+
"kind": "field",
|
|
5901
|
+
"name": "_menu",
|
|
5902
|
+
"type": {
|
|
5903
|
+
"text": "ColorPaletteMenu"
|
|
5904
|
+
},
|
|
5905
|
+
"privacy": "private"
|
|
5906
|
+
},
|
|
5899
5907
|
{
|
|
5900
5908
|
"kind": "field",
|
|
5901
5909
|
"name": "_editor",
|
|
@@ -5939,13 +5947,15 @@
|
|
|
5939
5947
|
},
|
|
5940
5948
|
{
|
|
5941
5949
|
"kind": "field",
|
|
5942
|
-
"name": "
|
|
5943
|
-
"type": {
|
|
5944
|
-
"text": "boolean"
|
|
5945
|
-
},
|
|
5950
|
+
"name": "responsiveController",
|
|
5946
5951
|
"privacy": "protected",
|
|
5947
|
-
"default": "
|
|
5948
|
-
|
|
5952
|
+
"default": "new ResponsiveController(this, '1400px')"
|
|
5953
|
+
},
|
|
5954
|
+
{
|
|
5955
|
+
"kind": "field",
|
|
5956
|
+
"name": "isMobile",
|
|
5957
|
+
"description": "Whether the screen is mobile sized.",
|
|
5958
|
+
"readonly": true
|
|
5949
5959
|
},
|
|
5950
5960
|
{
|
|
5951
5961
|
"kind": "method",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"absolute-container.d.ts","sourceRoot":"","sources":["../../../src/components/absolute-container/absolute-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC;;;;;;GAMG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BAAY;IAEzB,gBAAgB;IAChB,OAAO,CAAC,SAAS,CAAuC;IAExD,gBAAgB;IAChB,OAAO,CAAC,KAAK,CAAkB;IAC/B;;;;OAIG;IACH,IACI,IAAI,CAAC,GAAG,EAAE,OAAO,EAYpB;IACD,IAAI,IAAI,IAbM,OAAO,CAepB;IAED,gBAAgB;IAEhB,SAAS,CAAC,IAAI,EAAE,MAAM,CAAK;IAE3B,gBAAgB;IAEhB,SAAS,CAAC,GAAG,EAAE,MAAM,CAAK;IAE1B;;;OAGG;IAEI,mBAAmB,EAAE,OAAO,CAAS;IAE5C,MAAM;
|
|
1
|
+
{"version":3,"file":"absolute-container.d.ts","sourceRoot":"","sources":["../../../src/components/absolute-container/absolute-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC;;;;;;GAMG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BAAY;IAEzB,gBAAgB;IAChB,OAAO,CAAC,SAAS,CAAuC;IAExD,gBAAgB;IAChB,OAAO,CAAC,KAAK,CAAkB;IAC/B;;;;OAIG;IACH,IACI,IAAI,CAAC,GAAG,EAAE,OAAO,EAYpB;IACD,IAAI,IAAI,IAbM,OAAO,CAepB;IAED,gBAAgB;IAEhB,SAAS,CAAC,IAAI,EAAE,MAAM,CAAK;IAE3B,gBAAgB;IAEhB,SAAS,CAAC,GAAG,EAAE,MAAM,CAAK;IAE1B;;;OAGG;IAEI,mBAAmB,EAAE,OAAO,CAAS;IAE5C,MAAM;IAiCN,wCAAwC;IACjC,MAAM;IAIb,yCAAyC;IAClC,OAAO,CAAC,GAAG,EAAE,OAAO;IAI3B,iDAAiD;IAC1C,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM;CAI5C;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,iBAAiB,CAAC;KACxC;CACD"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { LitElement as h, html as u } from "lit";
|
|
2
|
-
import { property as
|
|
3
|
-
import { createRef as m, ref as
|
|
4
|
-
import { styleMap as
|
|
2
|
+
import { property as a, state as f, customElement as c } from "lit/decorators.js";
|
|
3
|
+
import { createRef as m, ref as d } from "lit/directives/ref.js";
|
|
4
|
+
import { styleMap as g } from "lit/directives/style-map.js";
|
|
5
5
|
import v from "./absolute-container.styles.js";
|
|
6
|
-
var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor,
|
|
7
|
-
for (var
|
|
8
|
-
(p = e[
|
|
9
|
-
return
|
|
6
|
+
var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (e, t, o, n) => {
|
|
7
|
+
for (var s = n > 1 ? void 0 : n ? _(t, o) : t, r = e.length - 1, p; r >= 0; r--)
|
|
8
|
+
(p = e[r]) && (s = (n ? p(t, o, s) : p(s)) || s);
|
|
9
|
+
return n && s && y(t, o, s), s;
|
|
10
10
|
};
|
|
11
|
-
let
|
|
11
|
+
let i = class extends h {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments), this.dialogRef = m(), this._open = !1, this.left = 0, this.top = 0, this.disableContextEvent = !1;
|
|
14
14
|
}
|
|
@@ -31,14 +31,14 @@ let s = class extends h {
|
|
|
31
31
|
return u`
|
|
32
32
|
<dialog
|
|
33
33
|
part='__dialog'
|
|
34
|
-
style=${
|
|
34
|
+
style=${g(e)}
|
|
35
35
|
@mousedown=${(t) => {
|
|
36
|
-
if (!(t.target instanceof
|
|
37
|
-
const
|
|
38
|
-
(
|
|
36
|
+
if (!(t.target instanceof HTMLDialogElement)) return;
|
|
37
|
+
const o = t.target.getBoundingClientRect();
|
|
38
|
+
(t.clientX < o.left || t.clientX > o.right || t.clientY < o.top || t.clientY > o.bottom) && (this.open = !1);
|
|
39
39
|
}}
|
|
40
40
|
@contextmenu=${(t) => this.disableContextEvent && t.preventDefault()}
|
|
41
|
-
${
|
|
41
|
+
${d(this.dialogRef)}
|
|
42
42
|
>
|
|
43
43
|
<slot></slot>
|
|
44
44
|
</dialog>
|
|
@@ -57,22 +57,22 @@ let s = class extends h {
|
|
|
57
57
|
this.left = e, this.top = t;
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
],
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
],
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
],
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
],
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
],
|
|
60
|
+
i.styles = [v];
|
|
61
|
+
l([
|
|
62
|
+
a({ type: Boolean, reflect: !0 })
|
|
63
|
+
], i.prototype, "open", 1);
|
|
64
|
+
l([
|
|
65
|
+
f()
|
|
66
|
+
], i.prototype, "left", 2);
|
|
67
|
+
l([
|
|
68
|
+
f()
|
|
69
|
+
], i.prototype, "top", 2);
|
|
70
|
+
l([
|
|
71
|
+
a({ type: Boolean, reflect: !0 })
|
|
72
|
+
], i.prototype, "disableContextEvent", 2);
|
|
73
|
+
i = l([
|
|
74
|
+
c("absolute-container")
|
|
75
|
+
], i);
|
|
76
76
|
export {
|
|
77
|
-
|
|
77
|
+
i as AbsoluteContainer
|
|
78
78
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
2
|
import { PaletteSettings } from '../color-palette-utils.js';
|
|
3
3
|
import { PaletteChangeEvent } from '../../../events/palette-change.js';
|
|
4
4
|
import '../color-palette.js';
|
|
@@ -6,6 +6,7 @@ import '../../bottom-sheet/bottom-sheet.js';
|
|
|
6
6
|
import '../menu/color-palette-menu.js';
|
|
7
7
|
import '../../absolute-container/absolute-container.js';
|
|
8
8
|
import '../editor/color-palette-editor.js';
|
|
9
|
+
import { ResponsiveController } from '../../../controllers/ResponsiveController.js';
|
|
9
10
|
/**
|
|
10
11
|
* color-palette components combined.
|
|
11
12
|
*
|
|
@@ -20,6 +21,7 @@ export declare class ColorPaletteComponent extends LitElement {
|
|
|
20
21
|
private _menuWrapper;
|
|
21
22
|
private _editorWrapper;
|
|
22
23
|
private _menuSheet;
|
|
24
|
+
private _menu;
|
|
23
25
|
private _editor;
|
|
24
26
|
/** The palette colors. */
|
|
25
27
|
colors: string[];
|
|
@@ -27,9 +29,9 @@ export declare class ColorPaletteComponent extends LitElement {
|
|
|
27
29
|
settings: PaletteSettings;
|
|
28
30
|
/** Whether the palette is in edit mode. */
|
|
29
31
|
editMode: boolean;
|
|
32
|
+
protected responsiveController: ResponsiveController;
|
|
30
33
|
/** Whether the screen is mobile sized. */
|
|
31
|
-
|
|
32
|
-
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
34
|
+
get isMobile(): boolean;
|
|
33
35
|
render(): import("lit-html").TemplateResult<1>;
|
|
34
36
|
handlePaletteChange({ detail: { colors } }: PaletteChangeEvent): void;
|
|
35
37
|
handleEditMode({ detail: editMode }: CustomEvent<boolean>): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-palette-component.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/component/color-palette-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,
|
|
1
|
+
{"version":3,"file":"color-palette-component.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/component/color-palette-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAmB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAI7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oCAAoC,CAAC;AAC5C,OAAO,+BAA+B,CAAC;AACvC,OAAO,gDAAgD,CAAC;AACxD,OAAO,mCAAmC,CAAC;AAE3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AAEpF;;;;;;;;GAQG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACpD,MAAM,CAAC,MAAM,4BAAY;IAGzB,OAAO,CAAC,YAAY,CAAqB;IAGzC,OAAO,CAAC,cAAc,CAAqB;IAG3C,OAAO,CAAC,UAAU,CAAe;IAGjC,OAAO,CAAC,KAAK,CAAoB;IAGjC,OAAO,CAAC,OAAO,CAAsB;IAErC,0BAA0B;IAEnB,MAAM,EAAE,MAAM,EAAE,CAAM;IAE7B,4BAA4B;IAErB,QAAQ,EAAE,eAAe,CAS9B;IAEF,2CAA2C;IAEpC,QAAQ,EAAE,OAAO,CAAS;IAEjC,SAAS,CAAC,oBAAoB,uBAA4C;IAC1E,0CAA0C;IAC1C,IAAI,QAAQ,YAEX;IAED,MAAM;IAsFN,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,kBAAkB;IAI9D,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,WAAW,CAAC,OAAO,CAAC;IAIzD,gBAAgB;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,qBAAqB,CAAC;KACjD;CACD"}
|
|
@@ -1,30 +1,29 @@
|
|
|
1
1
|
import { LitElement as g, html as a } from "lit";
|
|
2
|
-
import { query as
|
|
3
|
-
import { defaultSettings as
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
import { query as l, property as c, customElement as m } from "lit/decorators.js";
|
|
3
|
+
import { defaultSettings as r } from "../color-palette-utils.js";
|
|
4
|
+
import u from "./color-palette-component.styles.js";
|
|
5
|
+
import { ResponsiveController as $ } from "../../../controllers/ResponsiveController.js";
|
|
6
|
+
var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (e, i, n, h) => {
|
|
7
|
+
for (var s = h > 1 ? void 0 : h ? _(i, n) : i, p = e.length - 1, d; p >= 0; p--)
|
|
8
|
+
(d = e[p]) && (s = (h ? d(i, n, s) : d(s)) || s);
|
|
9
|
+
return h && s && v(i, n, s), s;
|
|
9
10
|
};
|
|
10
11
|
let t = class extends g {
|
|
11
12
|
constructor() {
|
|
12
13
|
super(...arguments), this.colors = [], this.settings = {
|
|
13
|
-
height:
|
|
14
|
-
width:
|
|
15
|
-
direction:
|
|
16
|
-
gradient:
|
|
17
|
-
preventHover:
|
|
18
|
-
hideText:
|
|
19
|
-
override:
|
|
14
|
+
height: r.height,
|
|
15
|
+
width: r.width,
|
|
16
|
+
direction: r.direction,
|
|
17
|
+
gradient: r.gradient,
|
|
18
|
+
preventHover: r.preventHover,
|
|
19
|
+
hideText: r.hideText,
|
|
20
|
+
override: r.override,
|
|
20
21
|
aliases: []
|
|
21
|
-
}, this.editMode = !1, this.
|
|
22
|
+
}, this.editMode = !1, this.responsiveController = new $(this, "1400px");
|
|
22
23
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
this.isMobile = l.contentRect.width < 1400;
|
|
27
|
-
}).observe(this);
|
|
24
|
+
/** Whether the screen is mobile sized. */
|
|
25
|
+
get isMobile() {
|
|
26
|
+
return this.responsiveController.isMobile;
|
|
28
27
|
}
|
|
29
28
|
render() {
|
|
30
29
|
return a`
|
|
@@ -62,7 +61,12 @@ let t = class extends g {
|
|
|
62
61
|
</color-palette-menu>
|
|
63
62
|
</bottom-sheet>
|
|
64
63
|
` : a`
|
|
65
|
-
<absolute-container
|
|
64
|
+
<absolute-container
|
|
65
|
+
id="menu-wrapper"
|
|
66
|
+
@visibility=${({ detail: e }) => {
|
|
67
|
+
e === !1 && (this._menu.reorder = !1);
|
|
68
|
+
}}
|
|
69
|
+
>
|
|
66
70
|
<color-palette-menu
|
|
67
71
|
.colors=${this.colors}
|
|
68
72
|
.settings=${this.settings}
|
|
@@ -81,8 +85,8 @@ let t = class extends g {
|
|
|
81
85
|
.colors=${this.colors}
|
|
82
86
|
.settings=${this.settings}
|
|
83
87
|
@palette-change=${(e) => {
|
|
84
|
-
const { colors: i, settings:
|
|
85
|
-
this.colors = i, this.settings =
|
|
88
|
+
const { colors: i, settings: n } = e.detail;
|
|
89
|
+
this.colors = i, this.settings = n, this._editorWrapper.setOpen(!1);
|
|
86
90
|
}}
|
|
87
91
|
>
|
|
88
92
|
</color-palette-editor>
|
|
@@ -99,18 +103,21 @@ let t = class extends g {
|
|
|
99
103
|
this._editorWrapper.toggle(), this._editor.colors = this.colors, this._editor.settings = this.settings;
|
|
100
104
|
}
|
|
101
105
|
};
|
|
102
|
-
t.styles = [
|
|
106
|
+
t.styles = [u];
|
|
103
107
|
o([
|
|
104
|
-
|
|
108
|
+
l("#menu-wrapper")
|
|
105
109
|
], t.prototype, "_menuWrapper", 2);
|
|
106
110
|
o([
|
|
107
|
-
|
|
111
|
+
l("#editor-wrapper")
|
|
108
112
|
], t.prototype, "_editorWrapper", 2);
|
|
109
113
|
o([
|
|
110
|
-
|
|
114
|
+
l("bottom-sheet")
|
|
111
115
|
], t.prototype, "_menuSheet", 2);
|
|
112
116
|
o([
|
|
113
|
-
|
|
117
|
+
l("color-palette-menu")
|
|
118
|
+
], t.prototype, "_menu", 2);
|
|
119
|
+
o([
|
|
120
|
+
l("color-palette-editor")
|
|
114
121
|
], t.prototype, "_editor", 2);
|
|
115
122
|
o([
|
|
116
123
|
c({ type: Array })
|
|
@@ -121,11 +128,8 @@ o([
|
|
|
121
128
|
o([
|
|
122
129
|
c({ type: Boolean })
|
|
123
130
|
], t.prototype, "editMode", 2);
|
|
124
|
-
o([
|
|
125
|
-
m()
|
|
126
|
-
], t.prototype, "isMobile", 2);
|
|
127
131
|
t = o([
|
|
128
|
-
|
|
132
|
+
m("color-palette-component")
|
|
129
133
|
], t);
|
|
130
134
|
export {
|
|
131
135
|
t as ColorPaletteComponent
|
package/package.json
CHANGED