@3t-transform/threeteeui 1.9.102 → 1.9.103

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

@@ -3,248 +3,248 @@ import { d as defineCustomElement$2 } from './tttx-icon.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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.dateRangeChanged = 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 (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_localcomponent", { icon: 'calendar_month' }))), this.showCalendar && (h("div", { class: "calendar-popup single" }, this.renderCalendar(this.currentYear, this.currentMonth, this.handleDateClick.bind(this))))));
-  }
-  static get watchers() { return {
-    "initialValue": ["watchInitialValue"]
-  }; }
-  static get style() { return tttxDateRangePickerCss; }
-}, [1, "tttx-date-range-picker", {
-    "initialValue": [16],
-    "placeholderText": [1, "placeholder-text"],
-    "showCalendar": [32],
-    "startDate": [32],
-    "endDate": [32],
-    "currentMonth": [32],
-    "currentYear": [32],
-    "isSelecting": [32],
-    "hoverDate": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-date-range-picker", "tttx-icon_localcomponent"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-date-range-picker":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxDateRangePicker$1);
-      }
-      break;
-    case "tttx-icon_localcomponent":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+const TttxDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dateRangeChanged = 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 (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 watchers() { return {
+    "initialValue": ["watchInitialValue"]
+  }; }
+  static get style() { return tttxDateRangePickerCss; }
+}, [1, "tttx-date-range-picker", {
+    "initialValue": [16],
+    "placeholderText": [1, "placeholder-text"],
+    "showCalendar": [32],
+    "startDate": [32],
+    "endDate": [32],
+    "currentMonth": [32],
+    "currentYear": [32],
+    "isSelecting": [32],
+    "hoverDate": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-date-range-picker", "tttx-icon_1_9_103"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-date-range-picker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxDateRangePicker$1);
+      }
+      break;
+    case "tttx-icon_1_9_103":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 
 const TttxDateRangePicker = TttxDateRangePicker$1;

package/dist/components/tttx-dialog-box_1_9_103.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxDialogBox_1_9_103 extends Components.TttxDialogBox_1_9_103, HTMLElement {}
+export const TttxDialogBox_1_9_103: {
+  prototype: TttxDialogBox_1_9_103;
+  new (): TttxDialogBox_1_9_103;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;