@fooloomanzoo/input-picker-pattern - npm Package Compare versions

Comparing version 3.0.6 to 3.0.7

dropdown-style.js

@@ -1,10 +0,4 @@
-import { PolymerElement, html } from '../../@polymer/polymer/polymer-element.js';
-/**
-`dropdown-style`
-styles for used for a inner dropdown
-*/
-const styleElement = document.createElement('dom-module');
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-styleElement.innerHTML =
-`<template>
+export const style = html`
   <style>
@@ -89,5 +83,2 @@ :host {
     }
-  </style>
-</template>`;
-
-styleElement.register('dropdown-style');
+  </style>`;

dropdown-tip-style.js

@@ -1,10 +0,4 @@
-import { PolymerElement, html } from '../../@polymer/polymer/polymer-element.js';
-/*
-`dropdown-style`
-styles for used for a tip of the dropdown
-*/
-const styleElement = document.createElement('dom-module');
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-styleElement.innerHTML =
-`<template>
+export const style = html`
   <style>
@@ -83,5 +77,2 @@ :host {
     }
-  </style>
-</template>`;
-
-styleElement.register('dropdown-tip-style');
+  </style>`;

form-element-mixin.js

@@ -1,3 +0,12 @@
-import { dedupingMixin } from '../../@polymer/polymer/lib/utils/mixin.js';
+import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { html } from '../../@polymer/polymer/lib/utils/html-tag.js';
+
 /**
+ * reset/cancel button template
+ */
+export const resetButtonTemplate =  html`
+  <button class="icon reset" invisible$="[[!valueIsSet]]" hidden$="[[disabled]]" on-click="reset"><svg viewBox="0 0 24 24"><g><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></g></svg></button>
+`;
+
+/**
  * mixin to extend an element, to be compatible with iron-form
@@ -4,0 +13,0 @@ *

input-pattern.js

 import { dedupingMixin } from '../../@polymer/polymer/lib/utils/mixin.js';
-import { html, htmlLiteral } from '../../@polymer/polymer/lib/utils/html-tag.js';
+import { html } from '../../@polymer/polymer/lib/utils/html-tag.js';
 import { FormElementMixin } from './form-element-mixin.js';
-import './input-shared-style.js';
+import { style as inputStyle } from './input-shared-style.js';
 
@@ -65,4 +65,3 @@ /**
       return html`
-        <style include="${this.styleToInclude}"></style>
-        <style>${this.styleTemplate}</style>
+        ${this.styleTemplate}</style>
         ${this.inputTemplate}
@@ -74,27 +73,26 @@ <div id="size">[[input]]</div>
 
-    static get styleToInclude() {
-      return htmlLiteral`input-shared-style`;
-    }
-
     static get styleTemplate() {
-      return htmlLiteral`
-        #input {
-          width: 0;
-        }
-        #minlength,
-        #size {
-          position: fixed;
-          top: 0; left: 0; right: auto; bottom: auto;
-          font-family: inherit;
-          font-size: inherit;
-          font-weight: inherit;
-          font-style: inherit;
-          letter-spacing: inherit;
-          outline: none;
-          min-width: inherit;
-          max-width: inherit;
-          margin: 0;
-          padding: 0;
-          visibility: hidden;
-        }
+      return html`
+        ${inputStyle}
+        <style>
+          #input {
+            width: 0;
+          }
+          #minlength,
+          #size {
+            position: fixed;
+            top: 0; left: 0; right: auto; bottom: auto;
+            font-family: inherit;
+            font-size: inherit;
+            font-weight: inherit;
+            font-style: inherit;
+            letter-spacing: inherit;
+            outline: none;
+            min-width: inherit;
+            max-width: inherit;
+            margin: 0;
+            padding: 0;
+            visibility: hidden;
+          }
+        </style>
       `;
@@ -101,0 +99,0 @@ }

input-picker-pattern.js

@@ -1,8 +0,8 @@
-import { dedupingMixin } from '../../@polymer/polymer/lib/utils/mixin.js';
-import { GestureEventListeners } from '../../@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import { addListener, setTouchAction, removeListener } from '../../@polymer/polymer/lib/utils/gestures.js';
-import { html, htmlLiteral } from '../../@polymer/polymer/lib/utils/html-tag.js';
+import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
+import { addListener, setTouchAction, removeListener } from '@polymer/polymer/lib/utils/gestures.js';
+import { html, htmlLiteral } from '@polymer/polymer/lib/utils/html-tag.js';
 
-import './input-picker-shared-style.js';
-import './dropdown-tip-style.js';
+import { style as inputPickerStyle } from './input-picker-shared-style.js';
+import { style as dropdownTipStyle } from  './dropdown-tip-style.js';
 import { FormElementMixin } from './form-element-mixin.js';
@@ -54,4 +54,3 @@ /**
       return html`
-        <style include="${this.styleToInclude}"></style>
-        <style>${this.styleTemplate}</style>
+        ${this.styleTemplate}
         ${this.hasNative ? this.nativeTemplate : this.polyfillTemplate}
@@ -62,10 +61,2 @@ `
     /**
-     * custom style to include in `<style include="..."`
-     * @type {string}
-     */
-    static get styleToInclude() {
-      return htmlLiteral`input-picker-shared-style dropdown-tip-style ${super.styleToInclude || htmlLiteral``}`;
-    }
-
-    /**
      * custom style content
@@ -75,16 +66,20 @@ * @type {string}
     static get styleTemplate() {
-      return htmlLiteral`
-        ${super.styleTemplate || htmlLiteral``}
-        :host {
-          display: inline-flex;
-          position: relative;
-        }
-        #picker #buttons {
-          display: inline-flex;
-          position: relative;
-          align-self: stretch;
-          align-items: flex-end;
-          justify-content: flex-end;
-          padding-top: 0;
-        }
+      return html`
+        ${inputPickerStyle}
+        ${dropdownTipStyle}
+        ${super.styleTemplate || html``}
+        <style>
+          :host {
+            display: inline-flex;
+            position: relative;
+          }
+          #picker #buttons {
+            display: inline-flex;
+            position: relative;
+            align-self: stretch;
+            align-items: flex-end;
+            justify-content: flex-end;
+            padding-top: 0;
+          }
+        </style>
       `;
@@ -91,0 +86,0 @@ }

input-picker-shared-style.js

@@ -1,7 +0,4 @@
-import { PolymerElement, html } from '../../@polymer/polymer/polymer-element.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-const styleElement = document.createElement('dom-module');
-
-styleElement.innerHTML =
-`<template>
+export const style = html`
   <style>
@@ -147,5 +144,2 @@ :host {
     }
-  </style>
-</template>`;
-
-styleElement.register('input-picker-shared-style');
+  </style>`;

input-shared-style.js

@@ -1,7 +0,4 @@
-import { PolymerElement, html } from '../../@polymer/polymer/polymer-element.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-const styleElement = document.createElement('dom-module');
-
-styleElement.innerHTML =
-`<template>
+export const style = html`
   <style>
@@ -304,4 +301,2 @@ :host {
     ::-webkit-input-edit-text,
-    ::-webkit-inner-spin-button,
-    ::-webkit-outer-spin-button,
     ::-webkit-search-cancel-button,
@@ -314,2 +309,7 @@ ::-webkit-clear-button {
     }
+    
+    ::-webkit-inner-spin-button,
+    ::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+    }
 
@@ -346,5 +346,2 @@ ::-webkit-search-cancel-button,
     }
-  </style>
-</template>`;
-
-styleElement.register('input-shared-style');
+  </style>`;

overlay-element.js

@@ -1,5 +0,5 @@
-import { IronOverlayBehavior } from '../../@polymer/iron-overlay-behavior/iron-overlay-behavior.js';
-import { mixinBehaviors } from '../../@polymer/polymer/lib/legacy/class.js';
-import { PolymerElement } from '../../@polymer/polymer/polymer-element.js';
-import { html } from '../../@polymer/polymer/lib/utils/html-tag.js';
+import { IronOverlayBehavior } from '@polymer/iron-overlay-behavior/iron-overlay-behavior.js';
+import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 /**
@@ -6,0 +6,0 @@ * `overlay-element`

overlay-picker-mixin.js

@@ -1,3 +0,3 @@
-import { dedupingMixin } from '../../@polymer/polymer/lib/utils/mixin.js';
-import { html, htmlLiteral } from '../../@polymer/polymer/lib/utils/html-tag.js';
+import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import './overlay-element.js';
@@ -107,9 +107,11 @@
     static get styleTemplate() {
-      return htmlLiteral`
-        ${super.styleTemplate || htmlLiteral``}
-        #overlay {
-          display: inline-flex;
-          flex-shrink: 0;
-          padding: 0;
-        }
+      return html`
+        ${super.styleTemplate || html``}
+        <style>
+          #overlay {
+            display: inline-flex;
+            flex-shrink: 0;
+            padding: 0;
+          }
+        </style>
       `;
@@ -116,0 +118,0 @@ }

package.json

@@ -17,3 +17,3 @@ {
   "name": "@fooloomanzoo/input-picker-pattern",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "authors": [
@@ -20,0 +20,0 @@ "Johannes Brautzsch <fooloomanzoo>"

switch-mixin.js

@@ -1,4 +0,4 @@
-import { dedupingMixin } from '../../@polymer/polymer/lib/utils/mixin.js';
-import { addListener, removeListener } from '../../@polymer/polymer/lib/utils/gestures.js';
-import { html } from '../../@polymer/polymer/lib/utils/html-tag.js';
+import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { addListener, removeListener } from '@polymer/polymer/lib/utils/gestures.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 /**
@@ -5,0 +5,0 @@ * Mixin to extend an element for binding switch button to increment properties. Button-switches should be of class `switch` and have the attributes `prop` and `step` that define the property to increment in the given step.

No alert changes

Worsened metrics

Total package byte prevSize

319742

decreased by-0.17%

Lines of code

7618

decreased by-0.24%

No dependency changes