@aquera/nile-elements 1.3.4-beta-1.3 → 1.3.4-beta-1.5

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.3.4-beta-1.3",
+  "version": "1.3.4-beta-1.5",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-date-picker/nile-date-picker-utils.ts

@@ -0,0 +1,105 @@
+export function parseDateFromFormat(str: string, format: string): Date | null {
+    if (!str) return null;
+  
+    const sepMatch = format.match(/[^A-Z]/i);
+    if (!sepMatch) return null;
+    const sep = sepMatch[0];
+  
+    if (!str.includes(sep)) return null;
+  
+    const parts = str.split(sep);
+    const fmtParts = format.split(sep);
+  
+    let day: number | null = null;
+    let month: number | null = null;
+    let year: number | null = null;
+  
+    for (let i = 0; i < fmtParts.length; i++) {
+      const f = fmtParts[i];
+      const v = parts[i];
+      if (!v) return null;
+  
+      if (f === "DD") {
+        if (v.length !== 2) return null;
+        day = Number(v);
+      }
+  
+      if (f === "MM") {
+        if (v.length !== 2) return null;
+        month = Number(v) - 1;
+      }
+  
+      if (f === "YYYY") {
+        if (v.length !== 4) return null;
+        year = Number(v);
+      }
+    }
+  
+    if (day == null || month == null || year == null) return null;
+  
+    const d = new Date(year, month, day);
+    if (
+      d.getFullYear() !== year ||
+      d.getMonth() !== month ||
+      d.getDate() !== day
+    ) return null;
+  
+    return d;
+  }
+
+  export function formatDateToFormat(date: Date, format: string): string {
+    if (!date) return "";
+  
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const year = date.getFullYear();
+  
+    switch (format) {
+      case "DD/MM/YYYY":
+        return `${day}/${month}/${year}`;
+      case "MM/DD/YYYY":
+        return `${month}/${day}/${year}`;
+      case "YYYY/MM/DD":
+        return `${year}/${month}/${day}`;
+      case "YYYY.MM.DD":
+        return `${year}.${month}.${day}`;
+      case "DD.MM.YYYY":
+        return `${day}.${month}.${year}`;
+      default:
+        return `${day}/${month}/${year}`;
+    }
+  }
+
+  export function parseRangeFromFormat(
+    input: string,
+    format: string,
+    isRange: boolean,
+    separator: string
+  ) {
+    if (!isRange) {
+      return { first: parseDateFromFormat(input, format), second: null };
+    }
+  
+    if (!input.includes(separator)) {
+      return { first: parseDateFromFormat(input, format), second: null };
+    }
+  
+    const [firstRaw, secondRaw] = input.split(separator);
+  
+    const first = parseDateFromFormat(firstRaw, format);
+    const second = secondRaw ? parseDateFromFormat(secondRaw, format) : null;
+  
+    return { first, second };
+  }
+  
+  
+  export function normalizeDateRange(
+    first: Date | null,
+    second: Date | null
+  ): [Date | null, Date | null] {
+    if (first && second && first.getTime() > second.getTime()) {
+      return [second, first];
+    }
+    return [first, second];
+  }
+  

package/src/nile-date-picker/nile-date-picker.ts

@@ -5,10 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
-
 import {
-  LitElement,
   html,
   CSSResultArray,
   TemplateResult,
@@ -18,156 +15,72 @@ import { styles } from './nile-date-picker.css';
 import NileElement from '../internal/nile-element';
 import { NileDropdown } from '../nile-dropdown';
 
-/**
- * Nile icon component.
- *
- * @tag nile-date-picker
- *
- */
+import {
+  parseDateFromFormat,
+  formatDateToFormat,
+  parseRangeFromFormat,
+  normalizeDateRange
+} from './nile-date-picker-utils';
+
+
 @customElement('nile-date-picker')
 export class NileDatePicker extends NileElement {
-  /**
-   * The styles for DatePicker
-   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-   */
   public static get styles(): CSSResultArray {
     return [styles];
   }
 
   @property({ type: Boolean }) range = false;
-
   @property({ type: Boolean }) hideTypes = false;
-
   @property({ type: Boolean, reflect: true }) doubleClickUnselect = false;
-
   @property({ type: Boolean, reflect: true }) allowClear = false;
-
   @property({ type: Boolean }) open = false;
-
   @property({ type: Boolean, attribute: 'hide-time-zone' }) hideTimeZone = false;
-
-  @property({ type: String, reflect: true }) type :'absolute' | 'relative' = 'absolute';
-
-  @property({ type: Boolean, attribute: 'showManualInputs' })
-  showManualInputs = false;
+  @property({ type: String, reflect: true }) type: 'absolute' | 'relative' = 'absolute';
+  @property({ type: Boolean, attribute: 'showManualInputs' }) showManualInputs = false;
 
   @property() value: any;
-  @property({ type: Array, attribute: 'hide-duration-fields' })
-  hideDurationFields: any = [];
-
+  @property({ type: Array, attribute: 'hide-duration-fields' }) hideDurationFields: any = [];
   @property({ attribute: 'allowedDates' }) allowedDates: any = '{}';
 
-  // Jump to typed date activated by user
-  @property({ type: Boolean, attribute: true, reflect: true }) jumpToTypedDate = false;
-
-  // Strict input format
-  @property({ type: String, attribute: true, reflect: true }) inputFormat = "DD/MM/YYYY";
+  @property({ type: Boolean, attribute: true, reflect: true }) syncDatePicker = false;
+  @property({ type: String, attribute: true, reflect: true }) dateFormat = "DD/MM/YYYY";  
+@property({ type: String, attribute: true, reflect: true }) rangeSeparator = " - ";
 
 
   @query('nile-dropdown') dropdown: NileDropdown;
 
-  /**
-   * Render method
-   * @slot This is a slot test
-   */
-   private parseDate(str: string): Date | null {
-    if (!str) return null;
-
-    const fmt = this.inputFormat; 
-    const sepMatch = fmt.match(/[^A-Z]/i);
-    if (!sepMatch) return null;
-    const sep = sepMatch[0];
-
-    if (!str.includes(sep)) return null;
+  firstUpdated() {
+    super.firstUpdated?.(new Map());
 
-    const parts = str.split(sep);
-    const fmtParts = fmt.split(sep);
+    if (!this.syncDatePicker) return;
 
-    let day = null, month = null, year = null;
+    const input = this.querySelector("nile-input");
+    if (!input) return;
 
-    for (let i = 0; i < fmtParts.length; i++) {
-      const f = fmtParts[i];
-      const v = parts[i];
-      if (!v) return null;
+    input.addEventListener("nile-input", (e: any) => {
+      const text = e.detail.value;
+      const { first, second } = parseRangeFromFormat(text, this.dateFormat, this.range, this.rangeSeparator);
 
-      if (f === "DD") {
-        if (v.length !== 2) return null;
-        day = Number(v);
+      if (!this.range) {
+        if (first) this.jumpTo(first);
+        return;
       }
 
-      if (f === "MM") {
-        if (v.length !== 2) return null;
-        month = Number(v) - 1;
+      if (first && !second) {
+        this.jumpTo(first);
+        this.syncRangeCalendar(first, null);
       }
 
-      if (f === "YYYY") {
-        if (v.length !== 4) return null;
-        year = Number(v);
+      if (first && second) {
+        const [start, end] = normalizeDateRange(first, second);
+        if (end) this.jumpTo(end);
+        this.syncRangeCalendar(start, end);
       }
-    }
-
-    if (day == null || month == null || year == null) return null;
-
-    const d = new Date(year, month, day);
-    if (
-      d.getFullYear() !== year ||
-      d.getMonth() !== month ||
-      d.getDate() !== day
-    ) return null;
-
-    return d;
-  }
-
-
-  private formatDate(date: Date): string {
-    if (!date) return "";
-  
-    const day = String(date.getDate()).padStart(2, "0");
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const year = date.getFullYear();
-  
-    switch (this.inputFormat) {
-      case "DD/MM/YYYY":
-        return `${day}/${month}/${year}`;
-      case "MM/DD/YYYY":
-        return `${month}/${day}/${year}`;
-      case "YYYY/MM/DD":
-        return `${year}/${month}/${day}`;
-      case "YYYY.MM.DD":
-        return `${year}.${month}.${day}`;
-      case "DD.MM.YYYY":
-        return `${day}.${month}.${year}`;
-      default:
-        return `${day}/${month}/${year}`;
-    }
-  }
-
-  private parseRange(input: string) {
-    if (!this.range) {
-      return { first: this.parseDate(input), second: null };
-    }
-
-    const RANGE_SEP = " - ";
-
-    if (!input.includes(RANGE_SEP)) {
-      return { first: this.parseDate(input), second: null };
-    }
-
-    const [firstRaw, secondRaw] = input.split(RANGE_SEP);
-
-    const first = this.parseDate(firstRaw);
-    let second = null;
-
-    if (secondRaw && secondRaw.length >= 10) {
-      second = this.parseDate(secondRaw);
-    }
-
-    return { first, second };
+    });
   }
 
   private jumpTo(date: Date) {
     this.open = true;
-
     const cal = this.shadowRoot!.querySelector("nile-calendar") as any;
     if (!cal) return;
 
@@ -177,72 +90,39 @@ export class NileDatePicker extends NileElement {
     cal.valueAttribute = date.toISOString();
   }
 
+
   private syncRangeCalendar(first: Date | null, second: Date | null) {
     const cal = this.shadowRoot!.querySelector("nile-calendar") as any;
     if (!cal) return;
 
-    if (!this.range) return;  
+    if (!this.range) return;
 
     if (first) cal.startDate = first;
     if (second) cal.endDate = second;
-
- 
-    if (first && second && first.getTime() > second.getTime()) {
-      cal.startDate = second;
-      cal.endDate = first;
-    }
   }
-  firstUpdated() {
-    super.firstUpdated?.(new Map());
-
-    if (!this.jumpToTypedDate) return;
-
-    const input = this.querySelector("nile-input");
-    if (!input) return;
-
-    input.addEventListener("nile-input", (e: any) => {
-      const text = e.detail.value;
-      const { first, second } = this.parseRange(text);
 
-      if (!this.range) {
-        if (first) this.jumpTo(first);
-        return;
-      }
-
-      if (first && !second) {
-        this.jumpTo(first);
-        this.syncRangeCalendar(first, null);
-      }
-
-      if (first && second) {
-        let start = first, end = second;
-        if (start.getTime() > end.getTime()) {
-          [start, end] = [end, start];
-        }
-
-        this.jumpTo(end);
-        this.syncRangeCalendar(start, end);
-      }
-    });
-  }
-
-  
   render(): TemplateResult {
     return html`
       <nile-dropdown .open="${this.open}" part="dd-base" .hoist="${true}" distance="6" exportparts="base">
         <slot slot="trigger" part="trigger" name="trigger"></slot>
+
         <nile-calendar
           .hideTypes="${this.hideTypes}"
-        	.type="${this.type}"
+          .type="${this.type}"
           value="${this.value}"
           .range="${this.range}"
-          @nile-init="${(e:CustomEvent)=>e.stopPropagation()}"
-          @nile-destroy="${(e:CustomEvent)=>e.stopPropagation()}"
-          @nile-changed="${(e:CustomEvent)=>e.stopPropagation()}"
+
+          @nile-init="${(e: CustomEvent) => e.stopPropagation()}"
+          @nile-destroy="${(e: CustomEvent) => e.stopPropagation()}"
+          @nile-changed="${(e: CustomEvent) => e.stopPropagation()}"
+
           @nile-change="${this.handleChanged}"
+
           .allowedDates="${this.allowedDates}"
-          @nile-type-change="${(e:CustomEvent)=>{e.stopPropagation();this.emit('nile-type-change',e.detail)}}"
-          @nile-clear="${(e:CustomEvent)=>{e.stopPropagation();this.emit('nile-clear')}}"
+
+          @nile-type-change="${(e: CustomEvent) => { e.stopPropagation(); this.emit('nile-type-change', e.detail); }}"
+          @nile-clear="${(e: CustomEvent) => { e.stopPropagation(); this.emit('nile-clear'); }}"
+
           .hideDurationFields="${this.hideDurationFields}"
           .showManualInputs="${this.showManualInputs}"
           .doubleClickUnselect="${this.doubleClickUnselect}"
@@ -252,50 +132,45 @@ export class NileDatePicker extends NileElement {
     `;
   }
 
+
   handleChanged(event: CustomEvent) {
     event.stopPropagation();
-  
-    const detail = event.detail;  
+
+    const detail = event.detail;
     const triggerInput = this.querySelector("nile-input");
-  
-    // SINGLE DATE
+
     if (!this.range) {
       const picked = detail.value;
-  
+
       if (picked && triggerInput) {
-        triggerInput.value = this.formatDate(new Date(picked));
+        triggerInput.value = formatDateToFormat(new Date(picked), this.dateFormat);
         triggerInput.emit("nile-input", { value: triggerInput.value });
       }
-  
- 
+
       this.emit("nile-changed", detail);
       this.emit("nile-change", detail);
-  
+
       this.dropdown?.hide();
       return;
     }
-  
-    // RANGE MODE
+
     const start = detail.startDate;
     const end = detail.endDate;
-  
+
     if (triggerInput) {
       let text = "";
-      if (start) text += this.formatDate(new Date(start));
-      if (start && end) text += " - " + this.formatDate(new Date(end));
-  
+      if (start) text += formatDateToFormat(new Date(start), this.dateFormat);
+      if (start && end) text += " - " + formatDateToFormat(new Date(end), this.dateFormat);
+
       triggerInput.value = text;
       triggerInput.emit("nile-input", { value: text });
     }
-  
- 
+
     this.emit("nile-changed", detail);
     this.emit("nile-change", detail);
-  
+
     this.dropdown?.hide();
   }
-  
-  
 
   connectedCallback() {
     super.connectedCallback();

package/vscode-html-custom-data.json

@@ -1102,7 +1102,7 @@
     },
     {
       "name": "nile-date-picker",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hide-time-zone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hide-duration-fields` - \n\n  * `allowedDates` - \n\n  * `jumpToTypedDate` {`boolean`} - \n\n  * `inputFormat` {`string`} - \n\nProperties:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hideTimeZone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hideDurationFields` - \n\n  * `allowedDates` - \n\n  * `jumpToTypedDate` {`boolean`} - \n\n  * `inputFormat` {`string`} - \n\n  * `dropdown` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hide-time-zone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hide-duration-fields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\nProperties:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hideTimeZone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hideDurationFields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\n  * `dropdown` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "range",
@@ -1164,13 +1164,17 @@
           "description": "`allowedDates` - \n\nProperty: allowedDates\n\nDefault: {}"
         },
         {
-          "name": "jumpToTypedDate",
-          "description": "`jumpToTypedDate` {`boolean`} - \n\nProperty: jumpToTypedDate\n\nDefault: false",
+          "name": "syncDatePicker",
+          "description": "`syncDatePicker` {`boolean`} - \n\nProperty: syncDatePicker\n\nDefault: false",
           "valueSet": "v"
         },
         {
-          "name": "inputFormat",
-          "description": "`inputFormat` {`string`} - \n\nProperty: inputFormat\n\nDefault: DD/MM/YYYY"
+          "name": "dateFormat",
+          "description": "`dateFormat` {`string`} - \n\nProperty: dateFormat\n\nDefault: DD/MM/YYYY"
+        },
+        {
+          "name": "rangeSeparator",
+          "description": "`rangeSeparator` {`string`} - \n\nProperty: rangeSeparator\n\nDefault:  - "
         }
       ]
     },