@plcmp/pl-checkbox - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

package.json

 {
     "name": "@plcmp/pl-checkbox",
-    "version": "0.1.5",
+    "version": "0.1.6",
     "description": "Simple checkbox component.",
@@ -5,0 +5,0 @@ "main": "pl-checkbox.js",

pl-checkbox.js

@@ -6,4 +6,3 @@ import { PlElement, html, css } from "polylib";
 class PlCheckbox extends PlElement {
-    static get properties() {
-        return {
+    static properties = {
             label: { type: String },
@@ -17,7 +16,6 @@ variant: { type: String },
             checked: { type: Boolean, observer: '_checkedObserver' }
-        }
-    }
+    };
 
-    static get css() {
-        return css`
+
+    static css = css`
             :host {
@@ -98,3 +96,3 @@ display: inline-block;
 
-            .checkbox.checked {
+            .checkbox[state=checked] {
                 background: var(--primary-base);
@@ -107,3 +105,3 @@ border: none;
 
-            .checkbox.checked:hover {
+            .checkbox[state=checked]:hover {
                 background: var(--primary-dark);
@@ -116,3 +114,3 @@ border: none;
 
-            .checkbox.indeterminate {
+            .checkbox[state=indeterminate] {
                 background: var(--white);
@@ -122,3 +120,3 @@ border: 1px solid var(--grey-base);
 
-            .checkbox.indeterminate:after {
+            .checkbox[state=indeterminate]:after {
                 display: block;
@@ -134,7 +132,6 @@ content: '';
 
-            .checkbox.indeterminate:hover {
+            .checkbox[state=indeterminate]:hover {
                 border: 1px solid var(--grey-dark);
             }
-		`;
-    }
+    `;
 
@@ -144,4 +141,2 @@
         super.connectedCallback();
-        this._checkboxContainer = this.root.querySelector('.checkbox');
-        this._checkedObserver();
 
@@ -154,8 +149,7 @@ if (this.variant) {
 
-    static get template() {
-        return html`
+    static template = html`
             <pl-labeled-container label="[[label]]" orientation="[[orientation]]">
                 <slot name="label-prefix" slot="label-prefix"></slot>
                 <div class="checkbox-container" on-click="[[_onClick]]">
-                    <div class="checkbox"></div>
+                    <div id="checkbox" class="checkbox"></div>
                     <div class="caption">[[caption]]</div>
@@ -165,17 +159,11 @@ </div>
             </pl-labeled-container>
-		`;
-    }
+    `;
 
-    _checkedObserver() {
-        if (this.checked === undefined) {
-            this._checkboxContainer.classList.add('indeterminate');
-        } else {
-            this._checkboxContainer.classList.remove('indeterminate');
-        }
-
-        if (this.checked) {
-            this._checkboxContainer.classList.add('checked');
-        } else {
-            this._checkboxContainer.classList.remove('checked');
-        }
+    _checkedObserver(v) {
+        if (v === undefined || v === null)
+            this.$.checkbox.setAttribute('state', 'indeterminate');
+        else if (v)
+            this.$.checkbox.setAttribute('state', 'checked');
+        else
+            this.$.checkbox.setAttribute('state', 'unchecked');
     }
@@ -182,0 +170,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

7601

-3.25%

Lines of code

139

-7.95%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes