@luzmo/lucero 1.0.1-alpha.8 → 1.0.1-alpha.9

package/components/color-field/color-field.d.ts

@@ -7,7 +7,14 @@ import { LuzmoTextFieldBase } from './../text-field/text-field';
  */
 export declare class LuzmoColorField extends LuzmoTextFieldBase {
     static get styles(): CSSResultArray;
+    /**
+     * Whether the color handle with the preview color is shown
+     */
     viewColor: boolean;
+    /**
+     * Whether the alpha channel is not allowed
+     */
+    noAlphaChannel: boolean;
     private colorController;
     constructor();
     set value(value: string);

package/components/color-field/index.cjs

@@ -15,9 +15,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../base-CBCg3yyw.cjs"),a=require("../color-controller-_ZwyhvaU.cjs"),u=require("../text-field-BTkr42k4.cjs"),d=":host{position:relative}";var h=Object.defineProperty,v=(t,e,l,c)=>{for(var r=void 0,i=t.length-1,n;i>=0;i--)(n=t[i])&&(r=n(e,l,r)||r);return r&&h(e,l,r),r};class s extends u.LuzmoTextFieldBase{constructor(){super(),this.viewColor=!1,this._value="",this.colorController=new a.ColorController(this)}static get styles(){return[...super.styles,o.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?o.x`
-          <sp-color-handle
+"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`
+          <luzmo-color-handle
             size="m"
             color=${this.colorController.getColor("srgb").toString()}
-          ></sp-color-handle>
-        `:o.x``}getColorValue(){return this.valid?this.colorController.getColor("srgb").toString():""}render(){return this.viewColor&&Promise.resolve().then(()=>require("../color-handle/index.cjs")),o.x` ${super.render()} ${this.renderColorHandle()} `}checkValidity(){let e=super.checkValidity();return this.value?(this.valid=e=this.colorController.validateColorString(this.value).isValid,this.invalid=!e,this.valid&&(this.colorController.color=this.value)):this.valid=this.invalid=!1,e}}v([o.n({type:Boolean,attribute:"view-color"})],s.prototype,"viewColor");customElements.get("luzmo-color-field")||customElements.define("luzmo-color-field",s);exports.LuzmoColorField=s;
+          ></luzmo-color-handle>
+        `: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;

package/components/color-field/index.js

@@ -15,9 +15,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { r as n, x as i, n as s } from "../base-WsynuqaS.js";
-import { C as a } from "../color-controller-DTp1juRz.js";
-import { a as d } from "../text-field-ol9Ed5lQ.js";
+import { r as s, x as i, n as m } from "../base-WsynuqaS.js";
+import { C as d } from "../color-controller-DTp1juRz.js";
+import { a as z } from "../text-field-ol9Ed5lQ.js";
 const c = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const l = document.createElement("style");
@@ -25,34 +25,34 @@ const c = () => {
   }
 };
 c();
-const z = ":host{position:relative}";
-var f = Object.defineProperty, g = (l, o, e, h) => {
-  for (var r = void 0, t = l.length - 1, u; t >= 0; t--)
-    (u = l[t]) && (r = u(o, e, r) || r);
-  return r && f(o, e, r), r;
+const f = ":host{position:relative}";
+var h = Object.defineProperty, a = (l, o, r, g) => {
+  for (var e = void 0, t = l.length - 1, n; t >= 0; t--)
+    (n = l[t]) && (e = n(o, r, e) || e);
+  return e && h(o, r, e), e;
 };
-class m extends d {
+class u extends z {
   constructor() {
-    super(), this.viewColor = !1, this._value = "", this.colorController = new a(this);
+    super(), this.viewColor = !1, this.noAlphaChannel = !1, this._value = "", this.colorController = new d(this);
   }
   static get styles() {
-    return [...super.styles, n(z)];
+    return [...super.styles, s(f)];
   }
   set value(o) {
     if (o === this.value)
       return;
-    const e = this._value;
-    this._value = o, this.requestUpdate("value", e);
+    const r = this._value;
+    this._value = o, this.requestUpdate("value", r);
   }
   get value() {
     return this._value;
   }
   renderColorHandle() {
     return this.viewColor && this.valid ? i`
-          <sp-color-handle
+          <luzmo-color-handle
             size="m"
             color=${this.colorController.getColor("srgb").toString()}
-          ></sp-color-handle>
+          ></luzmo-color-handle>
         ` : i``;
   }
   getColorValue() {
@@ -63,15 +63,23 @@ class m extends d {
   }
   checkValidity() {
     let o = super.checkValidity();
-    return this.value ? (this.valid = o = this.colorController.validateColorString(
-      this.value
-    ).isValid, this.invalid = !o, this.valid && (this.colorController.color = this.value)) : this.valid = this.invalid = !1, o;
+    if (this.value) {
+      const r = this.colorController.validateColorString(
+        this.value
+      );
+      this.valid = o = r.isValid && (!this.noAlphaChannel || r.alpha === 1), this.invalid = !o, this.valid && (this.colorController.color = this.value);
+    } else
+      this.valid = this.invalid = !1;
+    return o;
   }
 }
-g([
-  s({ type: Boolean, attribute: "view-color" })
-], m.prototype, "viewColor");
-customElements.get("luzmo-color-field") || customElements.define("luzmo-color-field", m);
+a([
+  m({ type: Boolean, attribute: "view-color" })
+], u.prototype, "viewColor");
+a([
+  m({ type: Boolean, attribute: "no-alpha-channel" })
+], u.prototype, "noAlphaChannel");
+customElements.get("luzmo-color-field") || customElements.define("luzmo-color-field", u);
 export {
-  m as LuzmoColorField
+  u as LuzmoColorField
 };