@3mo/checkbox - npm Package Compare versions

Comparing version 0.0.11 to 0.1.0

dist/Checkbox.d.ts

 import { Component } from '@a11d/lit';
-import '@material/mwc-checkbox';
+import '@material/web/checkbox/checkbox.js';
 import '@3mo/theme';
@@ -15,4 +15,2 @@ /**
  * @cssprop --mo-checkbox-disabled-color
- * @cssprop --mo-checkbox-unchecked-color
- * @cssprop --mo-checkbox-ink-color
  *
@@ -31,2 +29,3 @@ * @fires change - Fired when the checked state of the checkbox changes.
     protected get template(): import("lit-html").TemplateResult<1>;
+    protected get checkboxTemplate(): import("lit-html").TemplateResult<1>;
     protected handleChange(event: Event): void;
@@ -33,0 +32,0 @@ }

dist/Checkbox.js

 import { __decorate } from "tslib";
 import { component, property, css, Component, html, event } from '@a11d/lit';
-import { Formfield as FormField } from '@material/mwc-formfield';
 import { disabledProperty } from '@3mo/disabled-property';
-import '@material/mwc-checkbox';
+import '@material/web/checkbox/checkbox.js';
 import '@3mo/theme';
@@ -18,4 +17,2 @@ /**
  * @cssprop --mo-checkbox-disabled-color
- * @cssprop --mo-checkbox-unchecked-color
- * @cssprop --mo-checkbox-ink-color
  *
@@ -66,32 +63,47 @@ * @fires change - Fired when the checked state of the checkbox changes.
 
-			mwc-checkbox {
-				--mdc-theme-secondary: var(--mo-checkbox-accent-color, var(--mo-color-accent));
-				--mdc-checkbox-touch-target-size: 36px;
-				--mdc-checkbox-ripple-size: 36px;
-				--mdc-checkbox-disabled-color: var(--mo-checkbox-disabled-color, var(--mo-color-gray-transparent));
-				--mdc-checkbox-unchecked-color: var(--mo-checkbox-unchecked-color, var(--mo-color-foreground-transparent));
-				--mdc-checkbox-ink-color: var(--mo-checkbox-ink-color, var(--mo-color-on-accent));
+			md-checkbox {
+				margin-block: 7px;
+				--md-checkbox-selected-container-color: var(--mo-checkbox-accent-color, var(--mo-color-accent));
+				--md-checkbox-container-shape: var(--mo-border-radius);
+				--md-checkbox-selected-disabled-container-color: var(--mo-checkbox-disabled-color, var(--mo-color-gray));
+				--md-checkbox-selected-disabled-container-opacity: 0.5;
 			}
 
-			mwc-formfield::part(label) {
-				padding-inline-start: 0px;
-				text-align: start;
+			label {
+				display: flex;
+				align-items: center;
+				gap: 8px;
 				color: var(--mo-color-foreground);
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				letter-spacing: 0.0178571429em;
+				-webkit-font-smoothing: antialiased;
 			}
 
-			:host([disabled]) mwc-formfield::part(label) {
-				color: var(--mo-checkbox-disabled-color, var(--mo-color-gray-transparent));
+			label > md-checkbox {
+				--md-checkbox-selected-disabled-container-opacity: 1;
 			}
+
+			:host([disabled]) label {
+				color: var(--mo-checkbox-disabled-color, var(--mo-color-gray));
+				opacity: 0.5;
+			}
 		`;
     }
     get template() {
+        return !this.label ? this.checkboxTemplate : html `
+			<label>
+				${this.checkboxTemplate}
+				${this.label}
+			</label>
+		`;
+    }
+    get checkboxTemplate() {
         return html `
-			<mwc-formfield label=${this.label}>
-				<mwc-checkbox reducedTouchTarget
-					?disabled=${this.disabled}
-					?indeterminate=${this.indeterminate}
-					?checked=${this.checked}
-					@change=${this.handleChange.bind(this)}
-				></mwc-checkbox>
-			</mwc-formfield>
+			<md-checkbox
+				?disabled=${this.disabled}
+				?indeterminate=${this.indeterminate}
+				?checked=${this.checked}
+				@change=${this.handleChange.bind(this)}
+			></md-checkbox>
 		`;
@@ -129,7 +141,1 @@ }
 export { Checkbox };
-FormField.addInitializer(async (element) => {
-    var _a;
-    const formField = element;
-    await formField.updateComplete;
-    (_a = formField.renderRoot.querySelector('label')) === null || _a === void 0 ? void 0 : _a.setAttribute('part', 'label');
-});

package.json

 {
 	"name": "@3mo/checkbox",
-	"version": "0.0.11",
+	"version": "0.1.0",
 	"description": "A checkbox web-component based on Material Web Components (MWC).",
@@ -28,5 +28,4 @@ "repository": {
 		"@3mo/theme": "x",
-		"@material/mwc-checkbox": "x",
-		"@material/mwc-formfield": "x"
+		"@material/web": "x"
 	}
 }

New alerts

Floating dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 1 instance in 1 package

Fixed alerts

Floating dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 2 instances in 1 package

Improved metrics

Dependency count

4

decreased by-20%

Lines of code

171

increased by2.4%

Number of medium quality alerts

5

decreased by-16.67%

Worsened metrics

Total package byte prevSize

70891

decreased by-2.13%

Dependency changes

• + Added@material/web@x

• + Added@material/web@1.5.0(transitive)

• - Removed@material/mwc-checkbox@x

• - Removed@material/mwc-formfield@x

• - Removed@lit/reactive-element@1.6.3(transitive)

• - Removed@material/mwc-base@0.27.0(transitive)

• - Removed@material/mwc-checkbox@0.27.0(transitive)

• - Removed@material/mwc-formfield@0.27.0(transitive)

• - Removed@material/mwc-ripple@0.27.0(transitive)

• - Removedlit@2.8.0(transitive)

• - Removedlit-element@3.3.3(transitive)

• - Removedlit-html@2.8.0(transitive)