@luzmo/lucero 1.0.1-alpha.7 → 1.0.1-alpha.9
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/components/color-field/color-field.d.ts +7 -0
- package/components/color-field/index.cjs +4 -4
- package/components/color-field/index.js +31 -23
- package/components/color-picker/color-picker.d.ts +31 -2
- package/components/color-picker/index.cjs +4 -3
- package/components/color-picker/index.js +13 -9
- package/custom-elements.json +1 -1
- package/package.json +1 -1
|
@@ -7,7 +7,14 @@ import { LuzmoTextFieldBase } from './../text-field/text-field';
|
|
|
7
7
|
*/
|
|
8
8
|
export declare class LuzmoColorField extends LuzmoTextFieldBase {
|
|
9
9
|
static get styles(): CSSResultArray;
|
|
10
|
+
/**
|
|
11
|
+
* Whether the color handle with the preview color is shown
|
|
12
|
+
*/
|
|
10
13
|
viewColor: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Whether the alpha channel is not allowed
|
|
16
|
+
*/
|
|
17
|
+
noAlphaChannel: boolean;
|
|
11
18
|
private colorController;
|
|
12
19
|
constructor();
|
|
13
20
|
set value(value: string);
|
|
@@ -15,9 +15,9 @@
|
|
|
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
|
|
19
|
-
<
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../base-CBCg3yyw.cjs"),u=require("../color-controller-_ZwyhvaU.cjs"),h=require("../text-field-BTkr42k4.cjs"),d=":host{position:relative}";var c=Object.defineProperty,a=(i,e,l,v)=>{for(var o=void 0,s=i.length-1,n;s>=0;s--)(n=i[s])&&(o=n(e,l,o)||o);return o&&c(e,l,o),o};class r extends h.LuzmoTextFieldBase{constructor(){super(),this.viewColor=!1,this.noAlphaChannel=!1,this._value="",this.colorController=new u.ColorController(this)}static get styles(){return[...super.styles,t.r(d)]}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}renderColorHandle(){return this.viewColor&&this.valid?t.x`
|
|
19
|
+
<luzmo-color-handle
|
|
20
20
|
size="m"
|
|
21
21
|
color=${this.colorController.getColor("srgb").toString()}
|
|
22
|
-
></
|
|
23
|
-
`:
|
|
22
|
+
></luzmo-color-handle>
|
|
23
|
+
`:t.x``}getColorValue(){return this.valid?this.colorController.getColor("srgb").toString():""}render(){return this.viewColor&&Promise.resolve().then(()=>require("../color-handle/index.cjs")),t.x` ${super.render()} ${this.renderColorHandle()} `}checkValidity(){let e=super.checkValidity();if(this.value){const l=this.colorController.validateColorString(this.value);this.valid=e=l.isValid&&(!this.noAlphaChannel||l.alpha===1),this.invalid=!e,this.valid&&(this.colorController.color=this.value)}else this.valid=this.invalid=!1;return e}}a([t.n({type:Boolean,attribute:"view-color"})],r.prototype,"viewColor");a([t.n({type:Boolean,attribute:"no-alpha-channel"})],r.prototype,"noAlphaChannel");customElements.get("luzmo-color-field")||customElements.define("luzmo-color-field",r);exports.LuzmoColorField=r;
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import { r as
|
|
19
|
-
import { C as
|
|
20
|
-
import { a as
|
|
18
|
+
import { r as s, x as i, n as m } from "../base-WsynuqaS.js";
|
|
19
|
+
import { C as d } from "../color-controller-DTp1juRz.js";
|
|
20
|
+
import { a as z } from "../text-field-ol9Ed5lQ.js";
|
|
21
21
|
const c = () => {
|
|
22
22
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
23
23
|
const l = document.createElement("style");
|
|
@@ -25,34 +25,34 @@ const c = () => {
|
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
27
|
c();
|
|
28
|
-
const
|
|
29
|
-
var
|
|
30
|
-
for (var
|
|
31
|
-
(
|
|
32
|
-
return
|
|
28
|
+
const f = ":host{position:relative}";
|
|
29
|
+
var h = Object.defineProperty, a = (l, o, r, g) => {
|
|
30
|
+
for (var e = void 0, t = l.length - 1, n; t >= 0; t--)
|
|
31
|
+
(n = l[t]) && (e = n(o, r, e) || e);
|
|
32
|
+
return e && h(o, r, e), e;
|
|
33
33
|
};
|
|
34
|
-
class
|
|
34
|
+
class u extends z {
|
|
35
35
|
constructor() {
|
|
36
|
-
super(), this.viewColor = !1, this._value = "", this.colorController = new
|
|
36
|
+
super(), this.viewColor = !1, this.noAlphaChannel = !1, this._value = "", this.colorController = new d(this);
|
|
37
37
|
}
|
|
38
38
|
static get styles() {
|
|
39
|
-
return [...super.styles,
|
|
39
|
+
return [...super.styles, s(f)];
|
|
40
40
|
}
|
|
41
41
|
set value(o) {
|
|
42
42
|
if (o === this.value)
|
|
43
43
|
return;
|
|
44
|
-
const
|
|
45
|
-
this._value = o, this.requestUpdate("value",
|
|
44
|
+
const r = this._value;
|
|
45
|
+
this._value = o, this.requestUpdate("value", r);
|
|
46
46
|
}
|
|
47
47
|
get value() {
|
|
48
48
|
return this._value;
|
|
49
49
|
}
|
|
50
50
|
renderColorHandle() {
|
|
51
51
|
return this.viewColor && this.valid ? i`
|
|
52
|
-
<
|
|
52
|
+
<luzmo-color-handle
|
|
53
53
|
size="m"
|
|
54
54
|
color=${this.colorController.getColor("srgb").toString()}
|
|
55
|
-
></
|
|
55
|
+
></luzmo-color-handle>
|
|
56
56
|
` : i``;
|
|
57
57
|
}
|
|
58
58
|
getColorValue() {
|
|
@@ -63,15 +63,23 @@ class m extends d {
|
|
|
63
63
|
}
|
|
64
64
|
checkValidity() {
|
|
65
65
|
let o = super.checkValidity();
|
|
66
|
-
|
|
67
|
-
this.
|
|
68
|
-
|
|
66
|
+
if (this.value) {
|
|
67
|
+
const r = this.colorController.validateColorString(
|
|
68
|
+
this.value
|
|
69
|
+
);
|
|
70
|
+
this.valid = o = r.isValid && (!this.noAlphaChannel || r.alpha === 1), this.invalid = !o, this.valid && (this.colorController.color = this.value);
|
|
71
|
+
} else
|
|
72
|
+
this.valid = this.invalid = !1;
|
|
73
|
+
return o;
|
|
69
74
|
}
|
|
70
75
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
],
|
|
74
|
-
|
|
76
|
+
a([
|
|
77
|
+
m({ type: Boolean, attribute: "view-color" })
|
|
78
|
+
], u.prototype, "viewColor");
|
|
79
|
+
a([
|
|
80
|
+
m({ type: Boolean, attribute: "no-alpha-channel" })
|
|
81
|
+
], u.prototype, "noAlphaChannel");
|
|
82
|
+
customElements.get("luzmo-color-field") || customElements.define("luzmo-color-field", u);
|
|
75
83
|
export {
|
|
76
|
-
|
|
84
|
+
u as LuzmoColorField
|
|
77
85
|
};
|
|
@@ -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()
|