@vaadin-component-factory/vcf-date-range-picker - npm Package Compare versions

Comparing version 4.8.3 to 4.8.4

package.json

 {
   "name": "@vaadin-component-factory/vcf-date-range-picker",
-  "version": "4.8.3",
+  "version": "4.8.4",
   "description": "Polymer element providing a date range selection field with scrollable month calendar",
@@ -44,3 +44,4 @@ "main": "vcf-date-range-picker.js",
     "@vaadin/vaadin-text-field": "^2.8.0",
-    "@vaadin/vaadin-themable-mixin": "^1.6.1"
+    "@vaadin/vaadin-themable-mixin": "^1.6.1",
+    "@vaadin/vaadin-form-layout": "^2.3.0"
   },
@@ -47,0 +48,0 @@ "devDependencies": {

src/vcf-date-range-picker.js

@@ -103,3 +103,3 @@ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
       :host {
-        display: inline-block;
+        display: inline-flex;
         white-space: nowrap;
@@ -117,8 +117,10 @@ }
       [part="start-text-field"] {
-        width: 11ch;
-        min-width: 0;
+        align-self: baseline;
+        flex-grow: 0;
+        --vaadin-text-field-default-width: 11ch;
       }
       [part="end-text-field"] {
-        width: 16ch;
-        min-width: 0;
+        align-self: baseline;
+        flex-grow: 1;
+        --vaadin-text-field-default-width: 16ch;
       }
@@ -128,55 +130,68 @@ [part="dash"][hidden] {
       }
+      [part="drp-container"] {
+        display:flex; 
+        min-width:100%; 
+        max-width:100%; 
+      }
 
     </style>
 
-
-    <vcf-date-range-picker-text-field id="startInput"
-        role="application"
-        autocomplete="off"
-        on-focus="_focusStart"
-        value="{{_userInputStartValue}}"
-        invalid="[[invalid]]"
-        label="[[label]]"
-        name="[[name]]"
-        placeholder="[[placeholder]]"
-        required="[[required]]"
-        disabled="[[disabled]]"
-        readonly="[[readonly]]"
-        error-message="[[errorMessage]]"
-        aria-label$="[[label]]"
-        part="start-text-field"
-        helper-text="[[helperText]]"
-        theme$="[[theme]]"
-        class="startDate"
-        autoselect="true"
-        hidden="[[hideTextFields]]"
-      >
-      <slot name="prefix" slot="prefix"></slot>
-      <slot name="helper" slot="helper">[[helperText]]</slot>
-    </vcf-date-range-picker-text-field><div hidden="[[hideTextFields]]" part="dash"></div><vcf-date-range-picker-text-field id="endInput"
-        role="application"
-        autocomplete="off"
-        on-focus="_focusEnd"
-        on-change="_clearStartTextField"
-        value="{{_userInputEndValue}}"
-        invalid="[[invalid]]"
-        label="&nbsp;"
-        name="[[name]]"
-        placeholder="[[endPlaceholder]]"
-        required="[[required]]"
-        disabled="[[disabled]]"
-        readonly="[[readonly]]"
-        clear-button-visible$="[[clearButtonVisible]]"
-        part="end-text-field"
-        helper-end-text="[[helperEndText]]"
-        theme$="[[theme]]"
-        class="endDate"
-        autoselect="true"
-        hidden="[[hideTextFields]]"
-      >
-      <slot name="prefix" slot="prefix"></slot>
-      <slot name="helper" slot="helper">[[helperEndText]]</slot>
-      <div part="toggle-button" slot="suffix" on-tap="_toggle" role="button" aria-label$="[[i18n.calendar]]" aria-expanded$="[[_getAriaExpanded(opened)]]"></div>
-    </vcf-date-range-picker-text-field>
-
+    <div part="drp-container">
+      <vcf-date-range-picker-text-field id="startInput"
+          role="application"
+          autocomplete="off"
+          on-focus="_focusStart"
+          value="{{_userInputStartValue}}"
+          invalid="[[invalid]]"
+          label="[[label]]"
+          name="[[name]]"
+          placeholder="[[placeholder]]"
+          required="[[required]]"
+          disabled="[[disabled]]"
+          readonly="[[readonly]]"
+          error-message="[[errorMessage]]"
+          aria-label$="[[label]]"
+          part="start-text-field"
+          helper-text="[[helperText]]"
+          theme$="[[theme]]"
+          class="startDate"
+          autoselect="true"
+          hidden="[[hideTextFields]]"
+        >
+        <slot name="prefix" slot="prefix"></slot>
+        <slot name="helper" slot="helper">[[helperText]]</slot>
+      </vcf-date-range-picker-text-field
+      ><vcf-date-range-picker-text-field 
+          disabled="[[disabled]]" 
+          class="dash" 
+          value="—" 
+          invalid="[[invalid]]"
+          readonly="[[readonly]]"
+          hidden="[[hideTextFields]]" 
+          part="dash"></vcf-date-range-picker-text-field
+      ><vcf-date-range-picker-text-field id="endInput"
+          role="application"
+          autocomplete="off"
+          on-focus="_focusEnd"
+          on-change="_clearStartTextField"
+          value="{{_userInputEndValue}}"
+          invalid="[[invalid]]"
+          name="[[name]]"
+          placeholder="[[endPlaceholder]]"
+          required="[[required]]"
+          disabled="[[disabled]]"
+          readonly="[[readonly]]"
+          clear-button-visible$="[[clearButtonVisible]]"
+          part="end-text-field"
+          helper-end-text="[[helperEndText]]"
+          theme$="[[theme]]"
+          class="endDate"
+          autoselect="true"
+          hidden="[[hideTextFields]]"
+        >
+        <slot name="prefix" slot="prefix"></slot>
+        <slot name="helper" slot="helper">[[helperEndText]]</slot>
+        <div part="toggle-button" slot="suffix" on-tap="_toggle" role="button" aria-label$="[[i18n.calendar]]" aria-expanded$="[[_getAriaExpanded(opened)]]"></div>
+      </vcf-date-range-picker-text-field>
+    </div>
     <vcf-date-range-picker-overlay
@@ -359,2 +374,17 @@ id="overlay"
     });
+
+    const wc = this;
+    const resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        if(entry.contentBoxSize) {
+          var size = wc.shadowRoot.host.offsetWidth;
+          wc._inputStartElement.shadowRoot.querySelector('[part="label"]')
+            .setAttribute('style', "width: " + size + "px; max-width: max-content; overflow: hidden;");
+          wc._inputStartElement.shadowRoot.querySelector('[part="error-message"]')
+            .setAttribute('style', "width: " + size + "px; max-width: max-content; overflow: hidden;");
+        }
+      }
+    });
+    
+    resizeObserver.observe(this);
   }
@@ -361,0 +391,0 @@

theme/lumo/vcf-date-range-picker-styles.js

@@ -12,26 +12,10 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
-      [part="dash"]::before {
-        content: var(--lumo-icons-minus);
-        font-family: "lumo-icons";
-        align-self: center;
-      }
-
       [part="dash"] {
         display: inline-flex;
-        background-color: var(--lumo-contrast-10pct);
-        height: var(--lumo-size-m);
+        align-self: baseline;
+        width: 26px;
       }
 
-      :host([disabled]) [part="dash"] {
-        background-color: var(--lumo-contrast-5pct);
-      }
 
-      :host([readonly]) [part="dash"] {
-        background-color: var(--lumo-contrast-0pct);
-      }
 
-      :host([invalid]) [part="dash"] {
-        background-color: var(--lumo-error-color-10pct);
-      }
-
       [part="toggle-button"]::before {
@@ -38,0 +22,0 @@ content: var(--lumo-icons-calendar);

theme/lumo/vcf-date-range-picker-text-field-styles.js

@@ -19,9 +19,10 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
       [part="label"] {
-        max-width: 32ch;  
+        max-width: 100%;
+        overflow: visible;
       }
 
       [part="error-message"] {
-        width: 35ch;
-        max-width: 35ch;
-        overflow: hidden;
+        width: 100%;
+        max-width: 100%;
+        overflow: visible;
         white-space: nowrap;
@@ -34,3 +35,16 @@ text-overflow: ellipsis;
       }
+      :host(.dash) {
+        pointer-events: none;
+      }
+      :host(.dash) [part="input-field"] {
+        border-radius: 0;
+      }
+      :host(:not([disabled]):not([invalid]):not([readonly]).dash) [part="input-field"] {
+        background-color: var(--lumo-contrast-10pct);
+      }
 
+      :host(.dash) [part="input-field"]::after {
+        border: none;
+      }
+
       :host([id="startInput"]) [part="input-field"] {
@@ -37,0 +51,0 @@ padding-right:0px;

No alert changes

Improved metrics

Total package byte prevSize

157385

increased by0.74%

Lines of code

4182

increased by0.7%

Worsened metrics

Dependency count

14

increased by7.69%

Dependency changes

• + Added@vaadin/vaadin-form-layout@^2.3.0

• + Added@vaadin/vaadin-form-layout@2.3.0(transitive)