@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/collection/components/molecules/tttx-date-range-picker/tttx-date-range-picker.js

@@ -1,292 +1,292 @@
-import { h, Host } from '@stencil/core';
-export class TttxDateRangePicker {
-  constructor() {
-    this.handleOutsideClick = (e) => {
-      if (this.showCalendar && this.inputRef && !this.inputRef.contains(e.target)) {
-        this.showCalendar = false;
-      }
-    };
-    this.toggleCalendar = () => {
-      this.showCalendar = !this.showCalendar;
-    };
-    this.handleInputClick = (e) => {
-      e.stopPropagation();
-      this.toggleCalendar();
-    };
-    this.handleClear = (e) => {
-      e.stopPropagation();
-      this.resetRange();
-    };
-    this.initialValue = undefined;
-    this.placeholderText = 'dd/mm/yyyy - dd/mm/yyyy';
-    this.showCalendar = false;
-    this.startDate = '';
-    this.endDate = '';
-    this.currentMonth = new Date().getMonth();
-    this.currentYear = new Date().getFullYear();
-    this.isSelecting = true;
-    this.hoverDate = '';
-  }
-  componentDidLoad() {
-    document.addEventListener('click', this.handleOutsideClick);
-  }
-  disconnectedCallback() {
-    document.removeEventListener('click', this.handleOutsideClick);
-  }
-  componentWillLoad() {
-    this.initializeRangeFromProp();
-  }
-  watchInitialValue() {
-    this.initializeRangeFromProp();
-  }
-  initializeRangeFromProp() {
-    let start = '';
-    let end = '';
-    if (typeof this.initialValue === 'string') {
-      try {
-        const parsed = JSON.parse(this.initialValue);
-        start = parsed.start;
-        end = parsed.end;
-      }
-      catch (_a) {
-        console.error('Invalid JSON passed to initialValue');
-      }
-    }
-    else if (typeof this.initialValue === 'object' && this.initialValue !== null) {
-      start = this.initialValue.start;
-      end = this.initialValue.end;
-    }
-    if (start && start.includes('/'))
-      start = this.parseDDMMYYYYToISO(start);
-    if (end && end.includes('/'))
-      end = this.parseDDMMYYYYToISO(end);
-    if (start)
-      this.startDate = start;
-    if (end)
-      this.endDate = end;
-    if (start || end) {
-      this.emitRangeChange(start, end);
-    }
-  }
-  resetRange() {
-    this.startDate = '';
-    this.endDate = '';
-    this.isSelecting = true;
-    this.emitRangeChange('', '');
-  }
-  emitRangeChange(start, end) {
-    const startDate = start ? this.formatToDDMMYYYY(start) : '';
-    const endDate = end ? this.formatToDDMMYYYY(end) : '';
-    this.dateRangeChanged.emit({ name: 'customDateRange', value: { start: startDate, end: endDate } });
-  }
-  handleDateClick(date) {
-    const selectedDate = new Date(date);
-    if (this.isSelecting) {
-      this.startDate = date;
-      this.endDate = '';
-      this.hoverDate = ''; // Reset hover
-      this.emitRangeChange(this.startDate, '');
-      this.isSelecting = false;
-    }
-    else {
-      const start = new Date(this.startDate);
-      if (selectedDate >= start) {
-        this.endDate = date;
-        this.emitRangeChange(this.startDate, this.endDate);
-        this.showCalendar = false;
-        this.isSelecting = true;
-        this.hoverDate = ''; // Reset hover
-      }
-      else {
-        this.startDate = date;
-        this.endDate = '';
-        this.hoverDate = ''; // Reset hover
-        this.emitRangeChange(this.startDate, '');
-      }
-    }
-  }
-  changeMonth(direction) {
-    if (direction === 'prev') {
-      this.currentMonth = this.currentMonth === 0 ? 11 : this.currentMonth - 1;
-      this.currentYear = this.currentMonth === 11 ? this.currentYear - 1 : this.currentYear;
-    }
-    else {
-      this.currentMonth = this.currentMonth === 11 ? 0 : this.currentMonth + 1;
-      this.currentYear = this.currentMonth === 0 ? this.currentYear + 1 : this.currentYear;
-    }
-  }
-  formatToDDMMYYYY(dateStr) {
-    const date = new Date(dateStr);
-    const day = String(date.getDate()).padStart(2, '0');
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const year = date.getFullYear();
-    return `${day}/${month}/${year}`;
-  }
-  parseDDMMYYYYToISO(dateStr) {
-    const [dd, mm, yyyy] = dateStr.split('/');
-    return new Date(`${yyyy}-${mm}-${dd}`).toISOString().split('T')[0];
-  }
-  generateCalendarGrid(year, month) {
-    const firstDay = new Date(year, month, 1).getDay();
-    const daysInMonth = new Date(year, month + 1, 0).getDate();
-    const grid = [];
-    for (let i = 0; i < firstDay; i++) {
-      grid.push({ date: null, isCurrentMonth: false });
-    }
-    for (let day = 1; day <= daysInMonth; day++) {
-      const dateObj = new Date(year, month, day);
-      const yyyy = dateObj.getFullYear();
-      const mm = String(dateObj.getMonth() + 1).padStart(2, '0');
-      const dd = String(dateObj.getDate()).padStart(2, '0');
-      const formattedDate = `${yyyy}-${mm}-${dd}`;
-      grid.push({ date: formattedDate, isCurrentMonth: true });
-    }
-    while (grid.length < 42) {
-      grid.push({ date: null, isCurrentMonth: false });
-    }
-    return grid;
-  }
-  getMonthName(month) {
-    return new Date(2000, month).toLocaleString('default', { month: 'long' });
-  }
-  renderCalendar(year, month, selectDate) {
-    const grid = this.generateCalendarGrid(year, month);
-    const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-    return (h("div", { class: "calendar" }, h("div", { class: "calendar-header" }, h("button", { class: "nav-btn", onClick: e => { e.stopPropagation(); this.changeMonth('prev'); } }, "<"), h("span", { class: "month-label" }, this.getMonthName(month), " ", year), h("button", { class: "nav-btn", onClick: e => { e.stopPropagation(); this.changeMonth('next'); } }, ">")), h("div", { class: "calendar-grid" }, weekDays.map(day => h("div", { class: "calendar-weekday", key: day }, day)), grid.map((cell, i) => {
-      var _a;
-      if (!cell.isCurrentMonth || !cell.date) {
-        return (h("div", { class: "calendar-date empty", key: `empty-${i}`, onClick: e => e.stopPropagation() }));
-      }
-      const date = cell.date;
-      const isRangeStart = date === this.startDate;
-      const isRangeEnd = date === this.endDate;
-      const isInRange = this.startDate &&
-        this.endDate &&
-        new Date(date) > new Date(this.startDate) &&
-        new Date(date) < new Date(this.endDate);
-      const isHoverRange = this.startDate &&
-        !this.endDate &&
-        this.hoverDate &&
-        new Date(date) > new Date(this.startDate) &&
-        new Date(date) <= new Date(this.hoverDate);
-      const prevDate = (_a = grid[i - 1]) === null || _a === void 0 ? void 0 : _a.date;
-      const isHoverStart = isHoverRange && (i === 0 ||
-        !prevDate ||
-        (this.startDate && new Date(prevDate) < new Date(this.startDate)));
-      const isHoverEnd = isHoverRange && date === this.hoverDate;
-      return (h("div", { class: {
-          'calendar-date': true,
-          'range-start': isRangeStart,
-          'range-end': isRangeEnd,
-          'inrange': isInRange,
-          'hoverrange': isHoverRange,
-          'range-hover-start': isHoverStart,
-          'range-hover-end': isHoverEnd,
-        }, onClick: e => {
-          e.stopPropagation();
-          selectDate(date);
-        }, onMouseEnter: () => {
-          if (!this.isSelecting && this.startDate) {
-            this.hoverDate = date;
-          }
-        }, onMouseLeave: () => {
-          this.hoverDate = '';
-        }, key: date }, new Date(date).getDate()));
-    }))));
-  }
-  render() {
-    const rangeText = this.startDate && this.endDate
-      ? `${this.formatToDDMMYYYY(this.startDate)} – ${this.formatToDDMMYYYY(this.endDate)}`
-      : this.startDate
-        ? `${this.formatToDDMMYYYY(this.startDate)} –`
-        : this.placeholderText;
-    return (h(Host, null, h("div", { class: "date-range-input", tabIndex: 0, "aria-haspopup": "dialog", "aria-expanded": this.showCalendar ? 'true' : 'false', ref: el => (this.inputRef = el), onClick: this.handleInputClick }, h("span", { class: {
-        'range-text': true,
-        'is-placeholder': !(this.startDate || this.endDate),
-      } }, rangeText), (this.startDate || this.endDate) && (h("button", { class: "clear-btn", "aria-label": "Clear", onClick: this.handleClear }, "\u00D7")), h("span", { class: "calendar-icon", "aria-hidden": "true" }, h("tttx-icon_1_9_101", { icon: 'calendar_month' }))), this.showCalendar && (h("div", { class: "calendar-popup single" }, this.renderCalendar(this.currentYear, this.currentMonth, this.handleDateClick.bind(this))))));
-  }
-  static get is() { return "tttx-date-range-picker"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-date-range-picker.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-date-range-picker.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "initialValue": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "{ start: string; end: string }",
-          "resolved": "{ start: string; end: string; }",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "placeholderText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "placeholder-text",
-        "reflect": false,
-        "defaultValue": "'dd/mm/yyyy - dd/mm/yyyy'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "showCalendar": {},
-      "startDate": {},
-      "endDate": {},
-      "currentMonth": {},
-      "currentYear": {},
-      "isSelecting": {},
-      "hoverDate": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dateRangeChanged",
-        "name": "dateRangeChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ name: string; value: { start: string; end: string } }",
-          "resolved": "{ name: string; value: { start: string; end: string; }; }",
-          "references": {}
-        }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "initialValue",
-        "methodName": "watchInitialValue"
-      }];
-  }
-}
+import { h, Host } from '@stencil/core';
+export class TttxDateRangePicker {
+  constructor() {
+    this.handleOutsideClick = (e) => {
+      if (this.showCalendar && this.inputRef && !this.inputRef.contains(e.target)) {
+        this.showCalendar = false;
+      }
+    };
+    this.toggleCalendar = () => {
+      this.showCalendar = !this.showCalendar;
+    };
+    this.handleInputClick = (e) => {
+      e.stopPropagation();
+      this.toggleCalendar();
+    };
+    this.handleClear = (e) => {
+      e.stopPropagation();
+      this.resetRange();
+    };
+    this.initialValue = undefined;
+    this.placeholderText = 'dd/mm/yyyy - dd/mm/yyyy';
+    this.showCalendar = false;
+    this.startDate = '';
+    this.endDate = '';
+    this.currentMonth = new Date().getMonth();
+    this.currentYear = new Date().getFullYear();
+    this.isSelecting = true;
+    this.hoverDate = '';
+  }
+  componentDidLoad() {
+    document.addEventListener('click', this.handleOutsideClick);
+  }
+  disconnectedCallback() {
+    document.removeEventListener('click', this.handleOutsideClick);
+  }
+  componentWillLoad() {
+    this.initializeRangeFromProp();
+  }
+  watchInitialValue() {
+    this.initializeRangeFromProp();
+  }
+  initializeRangeFromProp() {
+    let start = '';
+    let end = '';
+    if (typeof this.initialValue === 'string') {
+      try {
+        const parsed = JSON.parse(this.initialValue);
+        start = parsed.start;
+        end = parsed.end;
+      }
+      catch (_a) {
+        console.error('Invalid JSON passed to initialValue');
+      }
+    }
+    else if (typeof this.initialValue === 'object' && this.initialValue !== null) {
+      start = this.initialValue.start;
+      end = this.initialValue.end;
+    }
+    if (start && start.includes('/'))
+      start = this.parseDDMMYYYYToISO(start);
+    if (end && end.includes('/'))
+      end = this.parseDDMMYYYYToISO(end);
+    if (start)
+      this.startDate = start;
+    if (end)
+      this.endDate = end;
+    if (start || end) {
+      this.emitRangeChange(start, end);
+    }
+  }
+  resetRange() {
+    this.startDate = '';
+    this.endDate = '';
+    this.isSelecting = true;
+    this.emitRangeChange('', '');
+  }
+  emitRangeChange(start, end) {
+    const startDate = start ? this.formatToDDMMYYYY(start) : '';
+    const endDate = end ? this.formatToDDMMYYYY(end) : '';
+    this.dateRangeChanged.emit({ name: 'customDateRange', value: { start: startDate, end: endDate } });
+  }
+  handleDateClick(date) {
+    const selectedDate = new Date(date);
+    if (this.isSelecting) {
+      this.startDate = date;
+      this.endDate = '';
+      this.hoverDate = ''; // Reset hover
+      this.emitRangeChange(this.startDate, '');
+      this.isSelecting = false;
+    }
+    else {
+      const start = new Date(this.startDate);
+      if (selectedDate >= start) {
+        this.endDate = date;
+        this.emitRangeChange(this.startDate, this.endDate);
+        this.showCalendar = false;
+        this.isSelecting = true;
+        this.hoverDate = ''; // Reset hover
+      }
+      else {
+        this.startDate = date;
+        this.endDate = '';
+        this.hoverDate = ''; // Reset hover
+        this.emitRangeChange(this.startDate, '');
+      }
+    }
+  }
+  changeMonth(direction) {
+    if (direction === 'prev') {
+      this.currentMonth = this.currentMonth === 0 ? 11 : this.currentMonth - 1;
+      this.currentYear = this.currentMonth === 11 ? this.currentYear - 1 : this.currentYear;
+    }
+    else {
+      this.currentMonth = this.currentMonth === 11 ? 0 : this.currentMonth + 1;
+      this.currentYear = this.currentMonth === 0 ? this.currentYear + 1 : this.currentYear;
+    }
+  }
+  formatToDDMMYYYY(dateStr) {
+    const date = new Date(dateStr);
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const year = date.getFullYear();
+    return `${day}/${month}/${year}`;
+  }
+  parseDDMMYYYYToISO(dateStr) {
+    const [dd, mm, yyyy] = dateStr.split('/');
+    return new Date(`${yyyy}-${mm}-${dd}`).toISOString().split('T')[0];
+  }
+  generateCalendarGrid(year, month) {
+    const firstDay = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const grid = [];
+    for (let i = 0; i < firstDay; i++) {
+      grid.push({ date: null, isCurrentMonth: false });
+    }
+    for (let day = 1; day <= daysInMonth; day++) {
+      const dateObj = new Date(year, month, day);
+      const yyyy = dateObj.getFullYear();
+      const mm = String(dateObj.getMonth() + 1).padStart(2, '0');
+      const dd = String(dateObj.getDate()).padStart(2, '0');
+      const formattedDate = `${yyyy}-${mm}-${dd}`;
+      grid.push({ date: formattedDate, isCurrentMonth: true });
+    }
+    while (grid.length < 42) {
+      grid.push({ date: null, isCurrentMonth: false });
+    }
+    return grid;
+  }
+  getMonthName(month) {
+    return new Date(2000, month).toLocaleString('default', { month: 'long' });
+  }
+  renderCalendar(year, month, selectDate) {
+    const grid = this.generateCalendarGrid(year, month);
+    const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    return (h("div", { class: "calendar" }, h("div", { class: "calendar-header" }, h("button", { class: "nav-btn", onClick: e => { e.stopPropagation(); this.changeMonth('prev'); } }, "<"), h("span", { class: "month-label" }, this.getMonthName(month), " ", year), h("button", { class: "nav-btn", onClick: e => { e.stopPropagation(); this.changeMonth('next'); } }, ">")), h("div", { class: "calendar-grid" }, weekDays.map(day => h("div", { class: "calendar-weekday", key: day }, day)), grid.map((cell, i) => {
+      var _a;
+      if (!cell.isCurrentMonth || !cell.date) {
+        return (h("div", { class: "calendar-date empty", key: `empty-${i}`, onClick: e => e.stopPropagation() }));
+      }
+      const date = cell.date;
+      const isRangeStart = date === this.startDate;
+      const isRangeEnd = date === this.endDate;
+      const isInRange = this.startDate &&
+        this.endDate &&
+        new Date(date) > new Date(this.startDate) &&
+        new Date(date) < new Date(this.endDate);
+      const isHoverRange = this.startDate &&
+        !this.endDate &&
+        this.hoverDate &&
+        new Date(date) > new Date(this.startDate) &&
+        new Date(date) <= new Date(this.hoverDate);
+      const prevDate = (_a = grid[i - 1]) === null || _a === void 0 ? void 0 : _a.date;
+      const isHoverStart = isHoverRange && (i === 0 ||
+        !prevDate ||
+        (this.startDate && new Date(prevDate) < new Date(this.startDate)));
+      const isHoverEnd = isHoverRange && date === this.hoverDate;
+      return (h("div", { class: {
+          'calendar-date': true,
+          'range-start': isRangeStart,
+          'range-end': isRangeEnd,
+          'inrange': isInRange,
+          'hoverrange': isHoverRange,
+          'range-hover-start': isHoverStart,
+          'range-hover-end': isHoverEnd,
+        }, onClick: e => {
+          e.stopPropagation();
+          selectDate(date);
+        }, onMouseEnter: () => {
+          if (!this.isSelecting && this.startDate) {
+            this.hoverDate = date;
+          }
+        }, onMouseLeave: () => {
+          this.hoverDate = '';
+        }, key: date }, new Date(date).getDate()));
+    }))));
+  }
+  render() {
+    const rangeText = this.startDate && this.endDate
+      ? `${this.formatToDDMMYYYY(this.startDate)} – ${this.formatToDDMMYYYY(this.endDate)}`
+      : this.startDate
+        ? `${this.formatToDDMMYYYY(this.startDate)} –`
+        : this.placeholderText;
+    return (h(Host, null, h("div", { class: "date-range-input", tabIndex: 0, "aria-haspopup": "dialog", "aria-expanded": this.showCalendar ? 'true' : 'false', ref: el => (this.inputRef = el), onClick: this.handleInputClick }, h("span", { class: {
+        'range-text': true,
+        'is-placeholder': !(this.startDate || this.endDate),
+      } }, rangeText), (this.startDate || this.endDate) && (h("button", { class: "clear-btn", "aria-label": "Clear", onClick: this.handleClear }, "\u00D7")), h("span", { class: "calendar-icon", "aria-hidden": "true" }, h("tttx-icon_1_9_103", { icon: 'calendar_month' }))), this.showCalendar && (h("div", { class: "calendar-popup single" }, this.renderCalendar(this.currentYear, this.currentMonth, this.handleDateClick.bind(this))))));
+  }
+  static get is() { return "tttx-date-range-picker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-date-range-picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-date-range-picker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "initialValue": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ start: string; end: string }",
+          "resolved": "{ start: string; end: string; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "placeholderText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder-text",
+        "reflect": false,
+        "defaultValue": "'dd/mm/yyyy - dd/mm/yyyy'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "showCalendar": {},
+      "startDate": {},
+      "endDate": {},
+      "currentMonth": {},
+      "currentYear": {},
+      "isSelecting": {},
+      "hoverDate": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dateRangeChanged",
+        "name": "dateRangeChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ name: string; value: { start: string; end: string } }",
+          "resolved": "{ name: string; value: { start: string; end: string; }; }",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "initialValue",
+        "methodName": "watchInitialValue"
+      }];
+  }
+}