@vaadin/vaadin-time-picker - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0-alpha1

demo/demos.json

@@ -23,4 +23,14 @@ {
       }
+    },
+    {
+      "name": "Styling",
+      "url": "time-picker-styling-demos",
+      "src": "time-picker-styling-demos.js",
+      "meta": {
+        "title": "vaadin-time-picker Styling Examples",
+        "description": "",
+        "image": ""
+      }
     }
   ]
 }

demo/time-picker-advanced-demos.js

@@ -10,8 +10,43 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
       }
+    </style>
 
-    </style>
+    <h3>Custom Parser And Formatter</h3>
+    <vaadin-demo-snippet id="time-picker-advanced-demos-format-parse-example">
+      <template preserve-content="">
+        <vaadin-time-picker label="Arrival hour"></vaadin-time-picker>
+        <script>
+          window.addDemoReadyListener('#time-picker-advanced-demos-format-parse-example', function(document) {
+            const timePicker = document.querySelector('vaadin-time-picker');
+
+            timePicker.i18n = {
+              formatTime: function(timeObject) {
+                if (timeObject) {
+                  const pad = function(n) {
+                    n = parseInt(n || 0);
+                    return n < 10 ? '0' + n : n;
+                  };
+                  const period = timeObject.hours > 12 ? 'PM' : 'AM';
+                  const hours = timeObject.hours % 12 || 12;
+                  return pad(hours) + ':' + pad(timeObject.minutes) + ' ' + period;
+                }
+              },
+              parseTime: function(timeString) {
+                if (timeString) {
+                  const parts = /^(\\d{1,2})(?::(\\d{1,2}))?(?:\\s(\\w{2}))?\$/.exec(timeString);
+                  return parts && {
+                    hours: parseInt(parts[1]) + (parts[3] == 'PM' ? 12 : 0),
+                    minutes: parts[2]
+                  };
+                }
+              }
+            };
+          });
+        &lt;/script>
+      </template>
+    </vaadin-demo-snippet>
+
     <h3>Custom Validator</h3>
     <p>Extend <code>Vaadin.TimePickerElement</code> to create your own custom element,
-       then override the <code>checkValidity()</code> method to validate the input.
-    <vaadin-demo-snippet id="time-picker-advanced-demos-custom-validator">
+       then override the <code>checkValidity()</code> method to validate the input.</p>
+    <vaadin-demo-snippet id="time-picker-advanced-demos-custom-validator" ignore-ie="">
       <template preserve-content="">
@@ -36,4 +71,2 @@ <vaadin-time-picker-working-hours label="Delivery hour" error-message="Select a vaild working hour (9:00 to 17:00)"></vaadin-time-picker-working-hours>
     </vaadin-demo-snippet>
-
-  </p>
 `;
@@ -40,0 +73,0 @@ }

demo/time-picker-basic-demos.js

@@ -30,37 +30,2 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
     </vaadin-demo-snippet>
-
-    <h3>Custom Parser And Formatter</h3>
-    <vaadin-demo-snippet id="time-picker-basic-demos-format-parse-example">
-      <template preserve-content="">
-        <vaadin-time-picker label="Arrival hour"></vaadin-time-picker>
-        <script>
-          window.addDemoReadyListener('#time-picker-basic-demos-format-parse-example', function(document) {
-            const timePicker = document.querySelector('vaadin-time-picker');
-
-            timePicker.i18n = {
-              formatTime: function(timeObject) {
-                if (timeObject) {
-                  const pad = function(n) {
-                    n = parseInt(n || 0);
-                    return n < 10 ? '0' + n : n;
-                  };
-                  const period = timeObject.hours > 12 ? 'PM' : 'AM';
-                  const hours = timeObject.hours % 12 || 12;
-                  return pad(hours) + ':' + pad(timeObject.minutes) + ' ' + period;
-                }
-              },
-              parseTime: function(timeString) {
-                if (timeString) {
-                  const parts = /^(\\d{1,2})(?::(\\d{1,2}))?(?:\\s(\\w{2}))?\$/.exec(timeString);
-                  return parts && {
-                    hours: parseInt(parts[1]) + (parts[3] == 'PM' ? 12 : 0),
-                    minutes: parts[2]
-                  };
-                }
-              }
-            };
-          });
-        &lt;/script>
-      </template>
-    </vaadin-demo-snippet>
 `;
@@ -67,0 +32,0 @@ }

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-time-picker",
-  "version": "1.0.0",
+  "version": "1.1.0-alpha1",
   "main": "vaadin-time-picker.js",
@@ -24,9 +24,8 @@ "author": "Vaadin Ltd",
     "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.18",
-    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
-    "@vaadin/vaadin-themable-mixin": "^1.2.1",
+    "@vaadin/vaadin-themable-mixin": "^1.3.2",
     "@vaadin/vaadin-element-mixin": "^2.1.1",
-    "@vaadin/vaadin-lumo-styles": "^1.1.1",
-    "@vaadin/vaadin-material-styles": "^1.1.1",
+    "@vaadin/vaadin-lumo-styles": "^1.2.0",
+    "@vaadin/vaadin-material-styles": "^1.2.0",
     "@vaadin/vaadin-text-field": "^2.1.1",
-    "@vaadin/vaadin-combo-box": "^4.1.0",
+    "@vaadin/vaadin-combo-box": "^4.2.0-alpha3",
     "@vaadin/vaadin-control-state-mixin": "^2.1.1"
@@ -43,8 +42,9 @@ },
     "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
+    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "wct-browser-legacy": "^1.0.1",
     "@polymer/test-fixture": "^3.0.0-pre.18",
-    "@vaadin/vaadin-demo-helpers": "^2.0.2",
+    "@vaadin/vaadin-demo-helpers": "^2.1.0",
     "@polymer/iron-form": "^3.0.0-pre.18"
   }
 }

README.md

@@ -8,5 +8,5 @@ [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-time-picker)
 
-[Live Demo ↗](https://vaadin.com/components/vaadin-time-picker/html-examples)
+[Live Demo ↗](https://cdn.vaadin.com/vaadin-time-picker/1.0.0/demo/)
 |
-[API documentation ↗](https://vaadin.com/components/vaadin-time-picker/html-api)
+[API documentation ↗](https://cdn.vaadin.com/vaadin-time-picker/1.0.0)
 
@@ -13,0 +13,0 @@

src/vaadin-time-picker.js

@@ -9,2 +9,3 @@ /**
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
@@ -29,2 +30,35 @@ import '@vaadin/vaadin-combo-box/src/vaadin-combo-box-light.js';
  *
+ * ### Styling
+ *
+ * The following custom properties are available for styling:
+ *
+ * Part name | Description
+ * ----------------|----------------
+ * `toggle-button` | The toggle button
+ *
+ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description | Part name
+ * -------------|-------------|------------
+ * `disabled` | Set to a disabled time picker | :host
+ * `readonly` | Set to a read only time picker | :host
+ * `invalid` | Set when the element is invalid | :host
+ * `focused` | Set when the element is focused | :host
+ * `focus-ring` | Set when the element is keyboard focused | :host
+ *
+ * In addition to `<vaadin-time-picker>` itself, the following internal
+ * components are themable:
+ *
+ * - `<vaadin-time-picker-text-field>`, see
+ *   [`<vaadin-text-field>` documentation](https://vaadin.com/components/vaadin-text-field/html-api/elements/Vaadin.TextFieldElement)
+ *   for the text field parts.
+ * - `<vaadin-combo-box-light>`, see
+ *   [`<vaadin-combo-box>` documentation](https://vaadin.com/components/vaadin-combo-box/html-api/elements/Vaadin.ComboBoxElement)
+ *   for the combo box parts.
+ *
+ * Note: the `theme` attribute value set on `<vaadin-time-picker>` is
+ * propagated to the internal themable components listed above.
+ *
  * @memberof Vaadin
@@ -34,2 +68,3 @@ * @mixes Vaadin.ElementMixin
  * @mixes Vaadin.ThemableMixin
+ * @mixes Vaadin.ThemePropertyMixin
  * @demo demo/index.html
@@ -40,3 +75,4 @@ */
     ControlStateMixin(
-      ThemableMixin(PolymerElement))) {
+      ThemableMixin(
+        ThemePropertyMixin(PolymerElement)))) {
   static get template() {
@@ -62,7 +98,7 @@ return html`
     </style>
-    <vaadin-combo-box-light allow-custom-value="" item-label-path="value" filtered-items="[[__dropdownItems]]" disabled="[[disabled]]" readonly="[[readonly]]">
+    <vaadin-combo-box-light allow-custom-value="" item-label-path="value" filtered-items="[[__dropdownItems]]" disabled="[[disabled]]" readonly="[[readonly]]" theme\$="[[theme]]">
       <template>
         [[item.label]]
       </template>
-      <vaadin-time-picker-text-field class="input" name="[[name]]" invalid="[[invalid]]" autocomplete="off" label="[[label]]" required="[[required]]" disabled="[[disabled]]" prevent-invalid-input="[[preventInvalidInput]]" pattern="[[pattern]]" error-message="[[errorMessage]]" autofocus="[[autofocus]]" placeholder="[[placeholder]]" readonly="[[readonly]]" role="application" aria-live="assertive" aria-label\$="[[label]]">
+      <vaadin-time-picker-text-field class="input" name="[[name]]" invalid="[[invalid]]" autocomplete="off" label="[[label]]" required="[[required]]" disabled="[[disabled]]" prevent-invalid-input="[[preventInvalidInput]]" pattern="[[pattern]]" error-message="[[errorMessage]]" autofocus="[[autofocus]]" placeholder="[[placeholder]]" readonly="[[readonly]]" role="application" aria-live="assertive" aria-label\$="[[label]]" theme\$="[[theme]]">
         <span slot="suffix" part="toggle-button" role="button" aria-label\$="[[i18n.selector]]"></span>
@@ -78,3 +114,3 @@ </vaadin-time-picker-text-field>
   static get version() {
-    return '1.0.0';
+    return '1.1.0-alpha1';
   }
@@ -81,0 +117,0 @@

test/test-suites.js

@@ -7,3 +7,4 @@ window.TimePickerElementSuites = [
   'form-input.html',
-  'keyboard-navigation.html'
+  'keyboard-navigation.html',
+  'styling.html'
 ];

theme/material/vaadin-time-picker-styles.js

@@ -1,4 +0,2 @@
-import '@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-dropdown-styles.js';
-import '@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-item-styles.js';
-import '@vaadin/vaadin-combo-box/src/vaadin-combo-box-light.js';
+import '@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light.js';
 import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
@@ -20,9 +18,1 @@ import '@vaadin/vaadin-material-styles/mixins/field-button.js';
 document.head.appendChild($_documentContainer.content);
-
-/* TODO(manolo): should be a ...theme/material/vaadin-combo-box-light.html */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

9

decreased by-10%

Worsened metrics

Total package byte prevSize

210956

decreased by-33.99%

Dev dependency count

8

increased by14.29%

Number of package files

32

decreased by-17.95%

Lines of code

769

decreased by-34.22%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removed@polymer/iron-test-helpers@^3.0.0-pre.18

• - Removed@polymer/iron-test-helpers@3.0.1(transitive)

• Updated@vaadin/vaadin-combo-box@^4.2.0-alpha3

• Updated@vaadin/vaadin-lumo-styles@^1.2.0

• Updated@vaadin/vaadin-material-styles@^1.2.0

• Updated@vaadin/vaadin-themable-mixin@^1.3.2