@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/cjs/{tttx-datacard_1_9_101.cjs.entry.js → tttx-datacard_1_9_103.cjs.entry.js}

@@ -6,48 +6,48 @@ const index = require('./index-2c07dc57.js');
 
 const tttxDatacardCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:block;width:100%;height:100%}.datacard{font-family:\"Roboto\", Arial, Verdana, Tahoma, sans-serif;box-sizing:border-box;width:100%;height:100%;background-color:white;border-radius:4px;padding:0px 16px 16px 16px;margin-right:16px;margin-bottom:16px}.chart{width:100%;height:100%}h2{box-sizing:border-box;margin:0;padding:16px;width:100%;font-size:18px;font-weight:500;line-height:21.09px;text-align:left;height:40px}.lower{width:100%;display:flex}.right{box-sizing:border-box;flex-grow:1;border-left:1px solid #D5D5D5;padding-left:24px;font-size:24px;font-weight:500;line-height:28.13px;text-align:left}.flex{display:flex;justify-content:flex-start}.righticon{margin-top:1px;margin-right:4px;height:24px}.left{box-sizing:border-box;flex-grow:1;font-size:40px;font-weight:500;line-height:46.88px;text-align:right;margin-right:20px;padding-left:40px}.centered{box-sizing:border-box;flex-grow:1;font-size:40px;font-weight:500;line-height:46.88px;text-align:center;margin:0;padding-left:20px}.subtext{font-size:14px;font-weight:400;line-height:16.41px;text-align:left;color:#757575}";
 
-const TttxDatacard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cardTitle = undefined;
-    this.leftData = undefined;
-    this.rightData = undefined;
-    this.rightSubtext = undefined;
-    this.iconStyle = undefined;
-    this.cardType = undefined;
-    this.chartConfig = undefined;
-    this._chartConfig = undefined;
-    this.chartRender = undefined;
-  }
-  chartConfigChanged(newValue) {
-    this._chartConfig = JSON.parse(newValue);
-    this.chartRender = true;
-  }
-  componentDidLoad() {
-    if (this.chartConfig) {
-      this._chartConfig = JSON.parse(this.chartConfig);
-      this.chartRender = true;
-    }
-  }
-  renderIcon(iconstyle) {
-    switch (iconstyle) {
-      case 'up':
-        return index.h("tttx-icon_1_9_101", { size: 24, icon: "arrow_circle_up", color: "green" });
-      case 'down':
-        return index.h("tttx-icon_1_9_101", { size: 24, icon: "arrow_circle_down", color: "darkred" });
-      default:
-        return null;
-    }
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "datacard" }, this.cardTitle && index.h("h2", { style: { 'position': 'relative', 'top': '0', 'left': '0', 'height': '40px' } }, this.cardTitle), this.chartRender && this.cardType === 'chart' &&
-      index.h("tttx-graph_1_9_101", { style: { 'position': 'relative', 'width': '100%', 'height': this.cardTitle ? 'calc(100% - 40px)' : '100%' }, class: 'chart', "chart-data": this._chartConfig.chartData, "chart-text": this._chartConfig.chartText, "chart-type": this._chartConfig.chartType }), index.h("div", { style: { 'position': 'relative', 'width': '100%', 'height': this.cardTitle ? 'calc(100% - 40px)' : '100%' } }, index.h("div", { class: "lower" }, index.h("div", { class: this.rightData && this.rightData !== 'undefined' ? 'left' : 'centered' }, this.leftData), this.rightData && this.rightData !== 'undefined' &&
-      index.h("div", { class: "right" }, index.h("div", { class: "flex" }, index.h("div", { class: "righticon" }, this.renderIcon(this.iconStyle)), index.h("div", { class: "rightdata" }, this.rightData)), index.h("div", { class: "subtext" }, this.rightSubtext)))))));
-  }
-  static get watchers() { return {
-    "chartConfig": ["chartConfigChanged"]
-  }; }
-};
+const TttxDatacard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.cardTitle = undefined;
+    this.leftData = undefined;
+    this.rightData = undefined;
+    this.rightSubtext = undefined;
+    this.iconStyle = undefined;
+    this.cardType = undefined;
+    this.chartConfig = undefined;
+    this._chartConfig = undefined;
+    this.chartRender = undefined;
+  }
+  chartConfigChanged(newValue) {
+    this._chartConfig = JSON.parse(newValue);
+    this.chartRender = true;
+  }
+  componentDidLoad() {
+    if (this.chartConfig) {
+      this._chartConfig = JSON.parse(this.chartConfig);
+      this.chartRender = true;
+    }
+  }
+  renderIcon(iconstyle) {
+    switch (iconstyle) {
+      case 'up':
+        return index.h("tttx-icon_1_9_103", { size: 24, icon: "arrow_circle_up", color: "green" });
+      case 'down':
+        return index.h("tttx-icon_1_9_103", { size: 24, icon: "arrow_circle_down", color: "darkred" });
+      default:
+        return null;
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "datacard" }, this.cardTitle && index.h("h2", { style: { 'position': 'relative', 'top': '0', 'left': '0', 'height': '40px' } }, this.cardTitle), this.chartRender && this.cardType === 'chart' &&
+      index.h("tttx-graph_1_9_103", { style: { 'position': 'relative', 'width': '100%', 'height': this.cardTitle ? 'calc(100% - 40px)' : '100%' }, class: 'chart', "chart-data": this._chartConfig.chartData, "chart-text": this._chartConfig.chartText, "chart-type": this._chartConfig.chartType }), index.h("div", { style: { 'position': 'relative', 'width': '100%', 'height': this.cardTitle ? 'calc(100% - 40px)' : '100%' } }, index.h("div", { class: "lower" }, index.h("div", { class: this.rightData && this.rightData !== 'undefined' ? 'left' : 'centered' }, this.leftData), this.rightData && this.rightData !== 'undefined' &&
+      index.h("div", { class: "right" }, index.h("div", { class: "flex" }, index.h("div", { class: "righticon" }, this.renderIcon(this.iconStyle)), index.h("div", { class: "rightdata" }, this.rightData)), index.h("div", { class: "subtext" }, this.rightSubtext)))))));
+  }
+  static get watchers() { return {
+    "chartConfig": ["chartConfigChanged"]
+  }; }
+};
 TttxDatacard.style = tttxDatacardCss;
 
-exports.tttx_datacard_1_9_101 = TttxDatacard;
+exports.tttx_datacard_1_9_103 = TttxDatacard;

package/dist/cjs/tttx-date-range-picker.cjs.entry.js

@@ -6,218 +6,218 @@ const index = require('./index-2c07dc57.js');
 
 const tttxDateRangePickerCss = ":host{display:block;position:relative;font-family:sans-serif}.date-range-input{display:inline-flex;align-items:center;justify-content:space-between;border:1px solid #ccc;padding:8px 4px;border-radius:4px;cursor:pointer;background:white;min-width:220px;width:100%;font-size:14px}.date-range-input .range-text{flex:1;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-size:15px;padding-left:5px}.date-range-input .range-text.is-placeholder{padding-left:10px;font-size:15px;font-weight:500;color:#212121}.date-range-input .clear-btn{background:none;border:none;font-size:16px;color:#888;margin-left:8px;cursor:pointer}.date-range-input .clear-btn:hover{color:#333}.date-range-input .calendar-icon{margin-left:8px;display:flex;align-items:center;margin-right:5px}.calendar-popup{position:absolute;z-index:1000;top:calc(100% + 4px);left:0;background:white;border:1px solid #ccc;padding:8px 4px;border-radius:4px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);width:auto;min-width:260px}.calendar-popup.single{display:flex;flex-direction:column}.calendar{display:flex;flex-direction:column;width:100%}.calendar .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5em}.calendar .calendar-header .nav-btn{background:none;border:none;cursor:pointer;font-size:16px;padding:0 8px;color:#333}.calendar .calendar-header .nav-btn:hover{color:#1479c6}.calendar .calendar-header .month-label{font-weight:bold;font-size:14px;color:#333}.calendar .calendar-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:4px}.calendar .calendar-grid .calendar-weekday{font-weight:bold;text-align:center;font-size:12px;padding-bottom:4px;color:#666}.calendar .calendar-grid .calendar-date{text-align:center;padding:0.5em;border-radius:4px;font-size:14px;cursor:pointer;transition:background 0.2s ease;color:#333}.calendar .calendar-grid .calendar-date:hover{background-color:#f0f0f0}.calendar .calendar-grid .calendar-date.range-start,.calendar .calendar-grid .calendar-date.range-end,.calendar .calendar-grid .calendar-date.inrange{background-color:#1479c6;color:white;font-weight:bold}.calendar .calendar-grid .calendar-date.empty{background:transparent;cursor:default}.calendar .calendar-date.hoverrange{position:relative;z-index:1}.calendar .calendar-date.hoverrange::before{content:\"\";position:absolute;inset:0;border:1px dotted #bdbdbd;background-color:white;z-index:-1;pointer-events:none}.calendar .calendar-date.hoverrange.range-hover-start::before{border-top-left-radius:999px;border-bottom-left-radius:999px;left:0}.calendar .calendar-date.hoverrange.range-hover-end::before{border-top-right-radius:999px;border-bottom-right-radius:999px;right:0}.calendar .calendar-date.hoverrange:first-child{border-top-left-radius:50%;border-bottom-left-radius:50%}.calendar .calendar-date.hoverrange:last-child{border-top-right-radius:50%;border-bottom-right-radius:50%}";
 
-const TttxDateRangePicker = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.dateRangeChanged = index.createEvent(this, "dateRangeChanged", 7);
-    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 (index.h("div", { class: "calendar" }, index.h("div", { class: "calendar-header" }, index.h("button", { class: "nav-btn", onClick: e => { e.stopPropagation(); this.changeMonth('prev'); } }, "<"), index.h("span", { class: "month-label" }, this.getMonthName(month), " ", year), index.h("button", { class: "nav-btn", onClick: e => { e.stopPropagation(); this.changeMonth('next'); } }, ">")), index.h("div", { class: "calendar-grid" }, weekDays.map(day => index.h("div", { class: "calendar-weekday", key: day }, day)), grid.map((cell, i) => {
-      var _a;
-      if (!cell.isCurrentMonth || !cell.date) {
-        return (index.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 (index.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 (index.h(index.Host, null, index.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 }, index.h("span", { class: {
-        'range-text': true,
-        'is-placeholder': !(this.startDate || this.endDate),
-      } }, rangeText), (this.startDate || this.endDate) && (index.h("button", { class: "clear-btn", "aria-label": "Clear", onClick: this.handleClear }, "\u00D7")), index.h("span", { class: "calendar-icon", "aria-hidden": "true" }, index.h("tttx-icon_1_9_101", { icon: 'calendar_month' }))), this.showCalendar && (index.h("div", { class: "calendar-popup single" }, this.renderCalendar(this.currentYear, this.currentMonth, this.handleDateClick.bind(this))))));
-  }
-  static get watchers() { return {
-    "initialValue": ["watchInitialValue"]
-  }; }
-};
+const TttxDateRangePicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.dateRangeChanged = index.createEvent(this, "dateRangeChanged", 7);
+    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 (index.h("div", { class: "calendar" }, index.h("div", { class: "calendar-header" }, index.h("button", { class: "nav-btn", onClick: e => { e.stopPropagation(); this.changeMonth('prev'); } }, "<"), index.h("span", { class: "month-label" }, this.getMonthName(month), " ", year), index.h("button", { class: "nav-btn", onClick: e => { e.stopPropagation(); this.changeMonth('next'); } }, ">")), index.h("div", { class: "calendar-grid" }, weekDays.map(day => index.h("div", { class: "calendar-weekday", key: day }, day)), grid.map((cell, i) => {
+      var _a;
+      if (!cell.isCurrentMonth || !cell.date) {
+        return (index.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 (index.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 (index.h(index.Host, null, index.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 }, index.h("span", { class: {
+        'range-text': true,
+        'is-placeholder': !(this.startDate || this.endDate),
+      } }, rangeText), (this.startDate || this.endDate) && (index.h("button", { class: "clear-btn", "aria-label": "Clear", onClick: this.handleClear }, "\u00D7")), index.h("span", { class: "calendar-icon", "aria-hidden": "true" }, index.h("tttx-icon_1_9_103", { icon: 'calendar_month' }))), this.showCalendar && (index.h("div", { class: "calendar-popup single" }, this.renderCalendar(this.currentYear, this.currentMonth, this.handleDateClick.bind(this))))));
+  }
+  static get watchers() { return {
+    "initialValue": ["watchInitialValue"]
+  }; }
+};
 TttxDateRangePicker.style = tttxDateRangePickerCss;
 
 exports.tttx_date_range_picker = TttxDateRangePicker;