@luzmo/lucero 1.0.1-alpha.7 → 1.0.1-alpha.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.
|
@@ -3,6 +3,7 @@ import { LuzmoElement } from '../../utils/base';
|
|
|
3
3
|
import { ColorValue } from '../../utils/reactive-controllers/color';
|
|
4
4
|
import '../color-menu';
|
|
5
5
|
import '../overlay';
|
|
6
|
+
import { Placement } from '../overlay/overlay-types';
|
|
6
7
|
import '../popover';
|
|
7
8
|
import '../swatch';
|
|
8
9
|
import { SwatchRounding, SwatchShape } from './../swatch/swatch';
|
|
@@ -17,13 +18,41 @@ declare const LuzmoColorPicker_base: typeof LuzmoElement & {
|
|
|
17
18
|
*/
|
|
18
19
|
export declare class LuzmoColorPicker extends LuzmoColorPicker_base {
|
|
19
20
|
static styles: import("lit").CSSResult;
|
|
21
|
+
/**
|
|
22
|
+
* The color of the color picker.
|
|
23
|
+
*/
|
|
20
24
|
color?: ColorValue;
|
|
25
|
+
/**
|
|
26
|
+
* Whether the color picker is open.
|
|
27
|
+
*/
|
|
21
28
|
open: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Whether the color picker is disabled.
|
|
31
|
+
*/
|
|
22
32
|
disabled: boolean;
|
|
23
|
-
|
|
33
|
+
/**
|
|
34
|
+
* Whether the color picker is read only.
|
|
35
|
+
*/
|
|
36
|
+
readOnly: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* The placement of the color picker.
|
|
39
|
+
*/
|
|
40
|
+
placement: Placement;
|
|
41
|
+
/**
|
|
42
|
+
* The rounding of the color picker.
|
|
43
|
+
*/
|
|
24
44
|
rounding?: SwatchRounding;
|
|
25
|
-
|
|
45
|
+
/**
|
|
46
|
+
* The shape of the color picker.
|
|
47
|
+
*/
|
|
48
|
+
shape?: SwatchShape;
|
|
49
|
+
/**
|
|
50
|
+
* The swatches of the color picker.
|
|
51
|
+
*/
|
|
26
52
|
swatches: string[];
|
|
53
|
+
/**
|
|
54
|
+
* Whether the color picker has an alpha channel.
|
|
55
|
+
*/
|
|
27
56
|
noAlphaChannel: boolean;
|
|
28
57
|
private menuElement;
|
|
29
58
|
private overlayElement;
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../base-CBCg3yyw.cjs"),
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../base-CBCg3yyw.cjs"),h=require("../state-D8JEtYqe.cjs"),u=require("../query-BL-TJj7K.cjs"),c=require("../sized-mixin-CPxE5C96.cjs");require("../color-menu/index.cjs");require("../overlay/index.cjs");const d=require("../slottable-request-event-BfUUt1Mh.cjs");require("../popover/index.cjs");require("../swatch/index.cjs");const m="luzmo-popover{margin-left:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap));margin-right:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap))}luzmo-swatch{cursor:pointer}:host([read-only]) luzmo-swatch{cursor:default;pointer-events:none}:host{--luzmo-popover-content-area-spacing-vertical: 0;--color-picker-popover-horizontal-gap: var(--luzmo-spacing-4)}:host([size=s]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-3)}:host([size=l]),:host([size=xl]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-5)}";var y=Object.defineProperty,o=(i,r,a,v)=>{for(var l=void 0,n=i.length-1,p;n>=0;n--)(p=i[n])&&(l=p(r,a,l)||l);return l&&y(r,a,l),l};const s=class s extends c.SizedMixin(t.LuzmoElement){constructor(){super(...arguments),this.color="rgb(255, 0, 0)",this.open=!1,this.disabled=!1,this.readOnly=!1,this.placement="left-start",this.rounding="full",this.swatches=[],this.noAlphaChannel=!1,this._renderMenu=!1}overlayCloseEvent(){this.open=!1}overlayOpenEvent(){this.open=!0}handleColorChange(){const r=this.menuElement.color;this.color=typeof r=="string"?r:String(r),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}firstUpdated(){this.overlayElement.addEventListener("slottable-request",r=>{this._renderMenu=r.data!==d.removeSlottableRequest})}updated(r){r.has("open")&&this.open===!0&&(this._renderMenu=!0)}renderColorMenu(){return t.x`
|
|
19
19
|
<luzmo-color-menu
|
|
20
20
|
.size=${this.size}
|
|
21
21
|
.color=${this.color}
|
|
@@ -32,11 +32,12 @@
|
|
|
32
32
|
.color=${this.color}
|
|
33
33
|
.selected=${this.open&&!this.disabled}
|
|
34
34
|
?disabled=${this.disabled}
|
|
35
|
+
?read-only=${this.readOnly}
|
|
35
36
|
@luzmo-closed=${this.overlayCloseEvent}
|
|
36
37
|
@luzmo-opened=${this.overlayOpenEvent}
|
|
37
38
|
></luzmo-swatch>
|
|
38
39
|
<luzmo-overlay
|
|
39
|
-
trigger=${this.disabled?"":"trigger@click"}
|
|
40
|
+
trigger=${this.disabled||this.readOnly?"":"trigger@click"}
|
|
40
41
|
.placement=${this.placement}
|
|
41
42
|
type="auto"
|
|
42
43
|
>
|
|
@@ -44,4 +45,4 @@
|
|
|
44
45
|
${this._renderMenu?this.renderColorMenu():t.x``}
|
|
45
46
|
</luzmo-popover>
|
|
46
47
|
</luzmo-overlay>
|
|
47
|
-
`}};s.styles=t.r(m);let e=s;o([t.n({type:String,reflect:!0})],e.prototype,"color");o([t.n({type:Boolean,reflect:!0})],e.prototype,"open");o([t.n({type:Boolean,reflect:!0})],e.prototype,"disabled");o([t.n({type:String,reflect:!0})],e.prototype,"placement");o([t.n({type:String,reflect:!0})],e.prototype,"rounding");o([t.n({type:String,reflect:!0})],e.prototype,"shape");o([t.n({type:Array,reflect:!0})],e.prototype,"swatches");o([t.n({type:Boolean,reflect:!0,attribute:"no-alpha-channel"})],e.prototype,"noAlphaChannel");o([u.e("luzmo-color-menu")],e.prototype,"menuElement");o([u.e("luzmo-overlay")],e.prototype,"overlayElement");o([
|
|
48
|
+
`}};s.styles=t.r(m);let e=s;o([t.n({type:String,reflect:!0})],e.prototype,"color");o([t.n({type:Boolean,reflect:!0})],e.prototype,"open");o([t.n({type:Boolean,reflect:!0})],e.prototype,"disabled");o([t.n({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly");o([t.n({type:String,reflect:!0})],e.prototype,"placement");o([t.n({type:String,reflect:!0})],e.prototype,"rounding");o([t.n({type:String,reflect:!0})],e.prototype,"shape");o([t.n({type:Array,reflect:!0})],e.prototype,"swatches");o([t.n({type:Boolean,reflect:!0,attribute:"no-alpha-channel"})],e.prototype,"noAlphaChannel");o([u.e("luzmo-color-menu")],e.prototype,"menuElement");o([u.e("luzmo-overlay")],e.prototype,"overlayElement");o([h.r()],e.prototype,"_renderMenu");customElements.get("luzmo-color-picker")||customElements.define("luzmo-color-picker",e);exports.LuzmoColorPicker=e;
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
* */
|
|
18
18
|
import { a as z, r as d, x as u, n as l } from "../base-WsynuqaS.js";
|
|
19
19
|
import { r as h } from "../state-Deh-vKYE.js";
|
|
20
|
-
import { e as
|
|
20
|
+
import { e as m } from "../query-D_KR_GUc.js";
|
|
21
21
|
import { S as g } from "../sized-mixin-D4ACoVUr.js";
|
|
22
22
|
import "../color-menu/index.js";
|
|
23
23
|
import "../overlay/index.js";
|
|
@@ -31,15 +31,15 @@ const p = () => {
|
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
33
|
p();
|
|
34
|
-
const b = "luzmo-popover{margin-left:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap));margin-right:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap))}luzmo-swatch{cursor:pointer}:host{--luzmo-popover-content-area-spacing-vertical: 0;--color-picker-popover-horizontal-gap: var(--luzmo-spacing-4)}:host([size=s]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-3)}:host([size=l]),:host([size=xl]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-5)}";
|
|
35
|
-
var v = Object.defineProperty, e = (t, r, s,
|
|
36
|
-
for (var n = void 0, i = t.length - 1,
|
|
37
|
-
(
|
|
34
|
+
const b = "luzmo-popover{margin-left:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap));margin-right:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap))}luzmo-swatch{cursor:pointer}:host([read-only]) luzmo-swatch{cursor:default;pointer-events:none}:host{--luzmo-popover-content-area-spacing-vertical: 0;--color-picker-popover-horizontal-gap: var(--luzmo-spacing-4)}:host([size=s]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-3)}:host([size=l]),:host([size=xl]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-5)}";
|
|
35
|
+
var v = Object.defineProperty, e = (t, r, s, y) => {
|
|
36
|
+
for (var n = void 0, i = t.length - 1, c; i >= 0; i--)
|
|
37
|
+
(c = t[i]) && (n = c(r, s, n) || n);
|
|
38
38
|
return n && v(r, s, n), n;
|
|
39
39
|
};
|
|
40
40
|
const a = class a extends g(z) {
|
|
41
41
|
constructor() {
|
|
42
|
-
super(...arguments), this.color = "rgb(255, 0, 0)", this.open = !1, this.disabled = !1, this.placement = "left-start", this.rounding = "full", this.swatches = [], this.noAlphaChannel = !1, this._renderMenu = !1;
|
|
42
|
+
super(...arguments), this.color = "rgb(255, 0, 0)", this.open = !1, this.disabled = !1, this.readOnly = !1, this.placement = "left-start", this.rounding = "full", this.swatches = [], this.noAlphaChannel = !1, this._renderMenu = !1;
|
|
43
43
|
}
|
|
44
44
|
overlayCloseEvent() {
|
|
45
45
|
this.open = !1;
|
|
@@ -85,11 +85,12 @@ const a = class a extends g(z) {
|
|
|
85
85
|
.color=${this.color}
|
|
86
86
|
.selected=${this.open && !this.disabled}
|
|
87
87
|
?disabled=${this.disabled}
|
|
88
|
+
?read-only=${this.readOnly}
|
|
88
89
|
@luzmo-closed=${this.overlayCloseEvent}
|
|
89
90
|
@luzmo-opened=${this.overlayOpenEvent}
|
|
90
91
|
></luzmo-swatch>
|
|
91
92
|
<luzmo-overlay
|
|
92
|
-
trigger=${this.disabled ? "" : "trigger@click"}
|
|
93
|
+
trigger=${this.disabled || this.readOnly ? "" : "trigger@click"}
|
|
93
94
|
.placement=${this.placement}
|
|
94
95
|
type="auto"
|
|
95
96
|
>
|
|
@@ -111,6 +112,9 @@ e([
|
|
|
111
112
|
e([
|
|
112
113
|
l({ type: Boolean, reflect: !0 })
|
|
113
114
|
], o.prototype, "disabled");
|
|
115
|
+
e([
|
|
116
|
+
l({ type: Boolean, reflect: !0, attribute: "read-only" })
|
|
117
|
+
], o.prototype, "readOnly");
|
|
114
118
|
e([
|
|
115
119
|
l({ type: String, reflect: !0 })
|
|
116
120
|
], o.prototype, "placement");
|
|
@@ -127,10 +131,10 @@ e([
|
|
|
127
131
|
l({ type: Boolean, reflect: !0, attribute: "no-alpha-channel" })
|
|
128
132
|
], o.prototype, "noAlphaChannel");
|
|
129
133
|
e([
|
|
130
|
-
|
|
134
|
+
m("luzmo-color-menu")
|
|
131
135
|
], o.prototype, "menuElement");
|
|
132
136
|
e([
|
|
133
|
-
|
|
137
|
+
m("luzmo-overlay")
|
|
134
138
|
], o.prototype, "overlayElement");
|
|
135
139
|
e([
|
|
136
140
|
h()
|