@spectrum-web-components/checkbox - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

CHANGELOG.md

@@ -6,8 +6,10 @@ # Change Log
 
-## 0.1.3 (2019-10-03)
+## [0.1.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/checkbox@0.1.3...@spectrum-web-components/checkbox@0.1.4) (2019-10-14)
 
-**Note:** Version bump only for package @spectrum-web-components/checkbox
+### Performance Improvements
 
+-   use imported TypeScript helpers instead of inlining them ([cc2bd0a](https://github.com/adobe/spectrum-web-components/commit/cc2bd0a))
+
 ## 0.1.3 (2019-10-03)
 
 **Note:** Version bump only for package @spectrum-web-components/checkbox

lib/checkbox-base.js

@@ -12,8 +12,3 @@ /*
 */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { __decorate } from "tslib";
 import { property, html, query } from 'lit-element';
@@ -20,0 +15,0 @@ import { Focusable } from '@spectrum-web-components/shared/lib/focusable.js';

lib/checkbox.css.js

@@ -23,7 +23,5 @@ /*
 var(--spectrum-global-dimension-font-size-25))/-2);margin-left:calc(var(--spectrum-icon-checkmark-small-width,
-var(--spectrum-global-dimension-font-size-25))/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box,:host([indeterminate]) #root #box{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box,:host([indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box,:host([indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}#root:hover #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-global-color-gray-900))}#root:active #box{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}#root:active #label{color:var(--spectrum-checkbox-text-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #input+#box{border-color:var(--spectrum-checkbox-box-border-color-disabled,var(--spectrum-global-color-gray-400))!important;background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-global-color-gray-500))}#input:focus+#box{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important;box-shadow:0 0 0 1px var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important}#input:focus~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-global-color-blue-600))!important}:host([quiet]) #input:checked+#box,:host([quiet][indeterminate]) #root #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box,:host([quiet][indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box,:host([quiet][indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box,:host([invalid]) #root #input:checked+#box{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #root #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #root:hover #box,:host([invalid]) #root:hover #input:checked+#box{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #root:hover #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #box,:host([invalid]) #root:active #input:checked+#box{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}:host{display:inline-flex;vertical-align:top}#box sp-icon#checkmark,#box sp-icon#partialCheckmark{margin-top:calc(var(---spectrum-alias-workflow-icon-size,
-var(--spectrum-global-dimension-size-225))/-2);margin-left:calc(var(--spectrum-alias-workflow-icon-size,
-var(--spectrum-global-dimension-size-225))/-2)}#label{overflow:visible}
+var(--spectrum-global-dimension-font-size-25))/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box,:host([indeterminate]) #root #box{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box,:host([indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box,:host([indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}#root:hover #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-global-color-gray-900))}#root:active #box{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}#root:active #label{color:var(--spectrum-checkbox-text-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #input+#box{border-color:var(--spectrum-checkbox-box-border-color-disabled,var(--spectrum-global-color-gray-400))!important;background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-global-color-gray-500))}#input:focus+#box{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important;box-shadow:0 0 0 1px var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important}#input:focus~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-global-color-blue-600))!important}:host([quiet]) #input:checked+#box,:host([quiet][indeterminate]) #root #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box,:host([quiet][indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box,:host([quiet][indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box,:host([invalid]) #root #input:checked+#box{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #root #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #root:hover #box,:host([invalid]) #root:hover #input:checked+#box{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #root:hover #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #box,:host([invalid]) #root:active #input:checked+#box{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}:host{display:inline-flex;vertical-align:top}#label{overflow:visible}
 `;
 export default styles;
 //# sourceMappingURL=checkbox.css.js.map

lib/checkbox.js

@@ -12,8 +12,3 @@ /*
 */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { __decorate } from "tslib";
 import { html, property } from 'lit-element';
@@ -24,2 +19,4 @@ import { CheckboxBase } from './checkbox-base.js';
 import checkboxStyles from './checkbox.css.js';
+import checkmarkSmallStyles from '@spectrum-web-components/icon/lib/spectrum-icon-checkmark-small.css.js';
+import dashSmallStyles from '@spectrum-web-components/icon/lib/spectrum-icon-dash-small.css.js';
 export class Checkbox extends CheckboxBase {
@@ -32,3 +29,3 @@ constructor() {
     static get styles() {
-        return [checkboxStyles];
+        return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];
     }
@@ -46,2 +43,3 @@ render() {
                         aria-hidden="true"
+                        class="checkmark-small"
                     ></sp-icon>
@@ -53,2 +51,3 @@ <sp-icon
                         aria-hidden="true"
+                        class="dash-small"
                     ></sp-icon>
@@ -55,0 +54,0 @@ </span>

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.1.3",
+    "version": "0.1.4",
     "description": "",
@@ -40,7 +40,8 @@ "main": "lib/index.js",
     "dependencies": {
-        "@spectrum-web-components/icon": "^0.1.3",
-        "@spectrum-web-components/icons": "^0.1.3",
-        "@spectrum-web-components/shared": "^0.1.3"
+        "@spectrum-web-components/icon": "^0.2.0",
+        "@spectrum-web-components/icons": "^0.1.4",
+        "@spectrum-web-components/shared": "^0.1.4",
+        "tslib": "^1.10.0"
     },
-    "gitHead": "5112887821c1408c1c4121949a4f91743c98ff6a"
+    "gitHead": "7c3e131bc2bc3b1195e736ff65d3c4e044590ace"
 }

src/checkbox.css.ts

@@ -23,6 +23,4 @@ /*
 var(--spectrum-global-dimension-font-size-25))/-2);margin-left:calc(var(--spectrum-icon-checkmark-small-width,
-var(--spectrum-global-dimension-font-size-25))/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box,:host([indeterminate]) #root #box{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box,:host([indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box,:host([indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}#root:hover #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-global-color-gray-900))}#root:active #box{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}#root:active #label{color:var(--spectrum-checkbox-text-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #input+#box{border-color:var(--spectrum-checkbox-box-border-color-disabled,var(--spectrum-global-color-gray-400))!important;background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-global-color-gray-500))}#input:focus+#box{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important;box-shadow:0 0 0 1px var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important}#input:focus~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-global-color-blue-600))!important}:host([quiet]) #input:checked+#box,:host([quiet][indeterminate]) #root #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box,:host([quiet][indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box,:host([quiet][indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box,:host([invalid]) #root #input:checked+#box{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #root #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #root:hover #box,:host([invalid]) #root:hover #input:checked+#box{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #root:hover #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #box,:host([invalid]) #root:active #input:checked+#box{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}:host{display:inline-flex;vertical-align:top}#box sp-icon#checkmark,#box sp-icon#partialCheckmark{margin-top:calc(var(---spectrum-alias-workflow-icon-size,
-var(--spectrum-global-dimension-size-225))/-2);margin-left:calc(var(--spectrum-alias-workflow-icon-size,
-var(--spectrum-global-dimension-size-225))/-2)}#label{overflow:visible}
+var(--spectrum-global-dimension-font-size-25))/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box,:host([indeterminate]) #root #box{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box,:host([indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box,:host([indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}#root:hover #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-global-color-gray-900))}#root:active #box{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}#root:active #label{color:var(--spectrum-checkbox-text-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #input+#box{border-color:var(--spectrum-checkbox-box-border-color-disabled,var(--spectrum-global-color-gray-400))!important;background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-global-color-gray-500))}#input:focus+#box{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important;box-shadow:0 0 0 1px var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important}#input:focus~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-global-color-blue-600))!important}:host([quiet]) #input:checked+#box,:host([quiet][indeterminate]) #root #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box,:host([quiet][indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box,:host([quiet][indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box,:host([invalid]) #root #input:checked+#box{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #root #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #root:hover #box,:host([invalid]) #root:hover #input:checked+#box{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #root:hover #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #box,:host([invalid]) #root:active #input:checked+#box{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}:host{display:inline-flex;vertical-align:top}#label{overflow:visible}
 `;
 export default styles;

src/checkbox.ts

@@ -18,2 +18,4 @@ /*
 import checkboxStyles from './checkbox.css.js';
+import checkmarkSmallStyles from '@spectrum-web-components/icon/lib/spectrum-icon-checkmark-small.css.js';
+import dashSmallStyles from '@spectrum-web-components/icon/lib/spectrum-icon-dash-small.css.js';
 
@@ -28,3 +30,3 @@ export class Checkbox extends CheckboxBase {
     public static get styles(): CSSResultArray {
-        return [checkboxStyles];
+        return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];
     }
@@ -43,2 +45,3 @@
                         aria-hidden="true"
+                        class="checkmark-small"
                     ></sp-icon>
@@ -50,2 +53,3 @@ <sp-icon
                         aria-hidden="true"
+                        class="dash-small"
                     ></sp-icon>
@@ -52,0 +56,0 @@ </span>

No alert changes

Worsened metrics

Total package byte prevSize

94755

-1.02%

Dependency count

6

20%

Lines of code

915

-2.35%

Dependency changes

• + Added

  tslib@^1.10.0

• + Added

  @spectrum-web-components/icon@0.2.0
  (transitive)

• - Removed

  @spectrum-web-components/icon@0.1.3
  (transitive)

• Updated

  @spectrum-web-components/icon@^0.2.0

• Updated

  @spectrum-web-components/icons@^0.1.4

• Updated

  @spectrum-web-components/shared@^0.1.4