@digital-realty/ix-checkbox - npm Package Compare versions

Comparing version 1.2.4 to 1.2.5

dist/ix-checkbox.min.js

@@ -1,1 +0,16 @@
-import{__decorate}from"tslib";import{LitElement,html}from"lit";import{ifDefined}from"lit/directives/if-defined.js";import{query,property}from"lit/decorators.js";import"@material/web/checkbox/checkbox.js";class IxCheckbox extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.checked=!1,this.error=!1,this.indeterminate=!1,this.required=!1,this.label="",this.ariaLabel=null,this.target="",this.htmlId=void 0,this.value="on",this.name=""}focus(){this.component.focus()}createRenderRoot(){return this}get renderCheckbox(){return html`<md-checkbox class="checkbox" aria-label="${this.ariaLabel||this.label}" ?checked="${this.checked}" ?disabled="${this.disabled}" ?indeterminate="${this.indeterminate}" touch-target="${this.target}" id="${ifDefined(this.htmlId)}" ?required="${this.required}" name="${this.name}"></md-checkbox>`}render(){return this.label?html`<style>.checkbox-label{align-items:center;display:flex;gap:var(--ix-checkbox-radio-gap,.5rem)}.checkbox-label[error]{color:#db0028;--md-checkbox-outline-color:#db0028;--md-checkbox-focus-outline-color:#db0028;--md-checkbox-hover-outline-color:#db0028}</style><label class="checkbox-label" ?error="${this.error}">${this.renderCheckbox}<span>${this.label}</span></label>`:this.renderCheckbox}}__decorate([query(".checkbox")],IxCheckbox.prototype,"component",void 0),__decorate([property({type:Boolean})],IxCheckbox.prototype,"disabled",void 0),__decorate([property({type:Boolean})],IxCheckbox.prototype,"checked",void 0),__decorate([property({type:Boolean})],IxCheckbox.prototype,"error",void 0),__decorate([property({type:Boolean})],IxCheckbox.prototype,"indeterminate",void 0),__decorate([property({type:Boolean})],IxCheckbox.prototype,"required",void 0),__decorate([property()],IxCheckbox.prototype,"label",void 0),__decorate([property({attribute:"aria-label"})],IxCheckbox.prototype,"ariaLabel",void 0),__decorate([property({attribute:"touch-target"})],IxCheckbox.prototype,"target",void 0),__decorate([property({attribute:"html-id"})],IxCheckbox.prototype,"htmlId",void 0),__decorate([property()],IxCheckbox.prototype,"value",void 0),__decorate([property()],IxCheckbox.prototype,"name",void 0),window.customElements.define("ix-checkbox",IxCheckbox);
+import{__decorate}from"tslib";import{LitElement,html}from"lit";import{ifDefined}from"lit/directives/if-defined.js";import{query,property}from"lit/decorators.js";import"@material/web/checkbox/checkbox.js";class IxCheckbox extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.checked=!1,this.error=!1,this.indeterminate=!1,this.required=!1,this.label="",this.ariaLabel=null,this.target="",this.htmlId=void 0,this.value="on",this.name=""}focus(){this.component.focus()}createRenderRoot(){return this}get renderCheckbox(){return html`<md-checkbox class="checkbox" aria-label="${this.ariaLabel||this.label}" ?checked="${this.checked}" ?disabled="${this.disabled}" ?indeterminate="${this.indeterminate}" touch-target="${this.target}" id="${ifDefined(this.htmlId)}" ?required="${this.required}" name="${this.name}"></md-checkbox>`}render(){return this.label?html`<style>[error]{--md-outlined-field-outline-width:2px}.checkbox-label{align-items:center;display:flex;gap:var(--ix-checkbox-radio-gap,.5rem)}.checkbox-label[error]{color:var(--ix-checkbox-clr-critical,var(--clr-critical,#db0028));--md-checkbox-outline-color:var(
+              --ix-checkbox-clr-critical,
+              var(--clr-critical, #db0028)
+            );--md-checkbox-focus-outline-color:var(
+              --ix-checkbox-clr-critical,
+              var(--clr-critical, #db0028)
+            );--md-checkbox-hover-outline-color:var(
+              --ix-checkbox-clr-critical,
+              var(--clr-critical, #db0028)
+            )}.checkbox-label[disabled]{color:var(--ix-checkbox-clr-disabled,var(--clr-on-surface-disabled,#09224180))}[indeterminate]{--md-sys-color-primary:var(--clr-form-outline, #0922411f);--md-checkbox-outline-color:transparent;--md-checkbox-focus-outline-color:var(
+              --ix-checkbox-indeterminante-focus-outline-color,
+              transparent
+            );--md-checkbox-hover-outline-color:var(
+              --ix-checkbox-indeterminante-hover-outline-color,
+              transparent
+            )}</style><label class="checkbox-label" ?disabled="${this.disabled}" ?error="${this.error}">${this.renderCheckbox}<span>${this.label}</span></label>`:this.renderCheckbox}}__decorate([query(".checkbox")],IxCheckbox.prototype,"component",void 0),__decorate([property({type:Boolean})],IxCheckbox.prototype,"disabled",void 0),__decorate([property({type:Boolean})],IxCheckbox.prototype,"checked",void 0),__decorate([property({type:Boolean})],IxCheckbox.prototype,"error",void 0),__decorate([property({type:Boolean})],IxCheckbox.prototype,"indeterminate",void 0),__decorate([property({type:Boolean})],IxCheckbox.prototype,"required",void 0),__decorate([property()],IxCheckbox.prototype,"label",void 0),__decorate([property({attribute:"aria-label"})],IxCheckbox.prototype,"ariaLabel",void 0),__decorate([property({attribute:"touch-target"})],IxCheckbox.prototype,"target",void 0),__decorate([property({attribute:"html-id"})],IxCheckbox.prototype,"htmlId",void 0),__decorate([property()],IxCheckbox.prototype,"value",void 0),__decorate([property()],IxCheckbox.prototype,"name",void 0),window.customElements.define("ix-checkbox",IxCheckbox);

dist/IxCheckbox.js

@@ -45,2 +45,5 @@ import { __decorate } from "tslib";
             return html ` <style>
+          [error] {
+            --md-outlined-field-outline-width: 2px;
+          }
           .checkbox-label {
@@ -52,9 +55,42 @@ align-items: center;
           .checkbox-label[error] {
-            color: #db0028;
-            --md-checkbox-outline-color: #db0028;
-            --md-checkbox-focus-outline-color: #db0028;
-            --md-checkbox-hover-outline-color: #db0028;
+            color: var(
+              --ix-checkbox-clr-critical,
+              var(--clr-critical, #db0028)
+            );
+            --md-checkbox-outline-color: var(
+              --ix-checkbox-clr-critical,
+              var(--clr-critical, #db0028)
+            );
+            --md-checkbox-focus-outline-color: var(
+              --ix-checkbox-clr-critical,
+              var(--clr-critical, #db0028)
+            );
+            --md-checkbox-hover-outline-color: var(
+              --ix-checkbox-clr-critical,
+              var(--clr-critical, #db0028)
+            );
           }
+          .checkbox-label[disabled] {
+            color: var(
+              --ix-checkbox-clr-disabled,
+              var(--clr-on-surface-disabled, #09224180)
+            );
+          }
+          [indeterminate] {
+            --md-sys-color-primary: var(--clr-form-outline, #0922411f);
+            --md-checkbox-outline-color: transparent;
+            --md-checkbox-focus-outline-color: var(
+              --ix-checkbox-indeterminante-focus-outline-color,
+              transparent
+            );
+            --md-checkbox-hover-outline-color: var(
+              --ix-checkbox-indeterminante-hover-outline-color,
+              transparent
+            );
+          }
         </style>
-        <label class="checkbox-label" ?error=${this.error}
+        <label
+          class="checkbox-label"
+          ?disabled=${this.disabled}
+          ?error=${this.error}
           >${this.renderCheckbox}<span>${this.label}</span></label
@@ -61,0 +97,0 @@ >`;

package.json

@@ -6,3 +6,3 @@ {
   "author": "Digital Realty",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "type": "module",
@@ -51,2 +51,3 @@ "main": "dist/index.js",
     "prettier": "^2.4.1",
+    "rollup": "^4.29.1",
     "rollup-plugin-minify-html-literals": "^1.2.6",
@@ -109,3 +110,3 @@ "rollup-plugin-summary": "^2.0.0",
   ],
-  "gitHead": "cb4798e2a22a7e6b2eed58b8fc2d9fdddc875911"
+  "gitHead": "3590ef8890b3526a1395c48f0e94c72757c33c35"
 }

No alert changes

Improved metrics

Total package byte prevSize

20227

increased by20.36%

Lines of code

201

increased by34.9%

Worsened metrics

Dev dependency count

20

increased by5.26%

No dependency changes