overview-components 0.2.1 → 0.2.2

package/dist/shared/filter-inputs.js

@@ -144,6 +144,70 @@ let FilterInputs = class FilterInputs extends LitElement {
             focusableElements[nextIndex]?.focus();
         }
     }
+    _convertToStandardDate(match, format) {
+        let year, month, day;
+        switch (format) {
+            case 'dd.MM.yyyy':
+            case 'dd/MM/yyyy':
+                [day, month, year] = match.slice(1, 4);
+                break;
+            case 'd.M.yyyy':
+                [day, month, year] = match.slice(1, 4);
+                break;
+            case 'MM/dd/yyyy':
+                [month, day, year] = match.slice(1, 4);
+                break;
+            case 'yyyy-MM-dd':
+                [year, month, day] = match.slice(1, 4);
+                break;
+        }
+        // Convert to ISO format (YYYY-MM-DD)
+        return `${year}-${month?.padStart(2, '0')}-${day?.padStart(2, '0')}`;
+    }
+    _parseDate(dateStr) {
+        // Regular expressions for different date formats
+        // Patterns for different formats
+        const patterns = [
+            { regex: /^(\d{2})\.(\d{2})\.(\d{4})$/, format: 'dd.MM.yyyy' }, // dd.MM.yyyy
+            { regex: /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/, format: 'd.M.yyyy' }, // d.M.yyyy
+            { regex: /^(\d{2})\/(\d{2})\/(\d{4})$/, format: 'dd/MM/yyyy' }, // dd/MM/yyyy
+            { regex: /^(\d{2})\/(\d{2})\/(\d{4})$/, format: 'MM/dd/yyyy' }, // MM/dd/yyyy
+            { regex: /^(\d{4})-(\d{2})-(\d{2})$/, format: 'yyyy-MM-dd' }, // yyyy-MM-dd
+        ];
+        for (const { regex, format } of patterns) {
+            const match = dateStr.match(regex);
+            if (match) {
+                return this._convertToStandardDate(match, format);
+            }
+        }
+        return null;
+    }
+    handleDateInputStart(event) {
+        const target = event.target;
+        const dateStr = target.value;
+        if (!dateStr) {
+            this.handleFilterDateChange(undefined, this.endDate);
+            return;
+        }
+        const parsedDate = this._parseDate(dateStr);
+        if (parsedDate) {
+            this.startDate = parsedDate;
+            this.startDatePicker.selectDate(this.startDate);
+        }
+    }
+    handleDateInputEnd(event) {
+        const target = event.target;
+        const dateStr = target.value;
+        if (!dateStr) {
+            this.handleFilterDateChange(this.startDate, undefined);
+            return;
+        }
+        const parsedDate = this._parseDate(dateStr);
+        if (parsedDate) {
+            this.endDate = parsedDate;
+            this.endDatePicker.selectDate(this.endDate);
+        }
+    }
     render() {
         if (this.filterVariant === 'range') {
             return this.renderRangeInput();
@@ -161,7 +225,7 @@ let FilterInputs = class FilterInputs extends LitElement {
             return this.renderDateInput();
         }
         else if (this.filterVariant === 'dateTime') {
-            return this.renderDateInput(true);
+            return this.renderDateInput();
         }
         else {
             return this.renderTextInput();
@@ -172,336 +236,336 @@ let FilterInputs = class FilterInputs extends LitElement {
             this.column.setFilterValue([min, max]);
             this.requestUpdate();
         });
-        return html `
-            <div class="range">
-                <div class="custom-icon-wrapper" style="min-width: 70px">
-                    <input
-                        type="number"
-                        placeholder="Min"
+        return html `
+            <div class="range">
+                <div class="custom-icon-wrapper" style="min-width: 70px">
+                    <input
+                        type="number"
+                        placeholder="Min"
                         @input=${(e) => {
             const min = e.target.value ? Number(e.target.value) : undefined;
             const currentMax = this.column.getFilterValue()?.[1];
             debouncedSetRangeFilter(min, currentMax);
-        }}
-                        .value="${this.column.getFilterValue()?.[0] || ''}"
-                        tabindex="0"
-                        @keydown="${this.handleTabSwitch}"
-                    />
-                    ${this.renderClearButton(0)}
-                </div>
-
-                <div class="custom-icon-wrapper" style="min-width: 70px">
-                    <input
-                        type="number"
-                        placeholder="Max"
+        }}
+                        .value="${this.column.getFilterValue()?.[0] || ''}"
+                        tabindex="0"
+                        @keydown="${this.handleTabSwitch}"
+                    />
+                    ${this.renderClearButton(0)}
+                </div>
+
+                <div class="custom-icon-wrapper" style="min-width: 70px">
+                    <input
+                        type="number"
+                        placeholder="Max"
                         @input=${(e) => {
             const max = e.target.value ? Number(e.target.value) : undefined;
             const currentMin = this.column.getFilterValue()?.[0];
             debouncedSetRangeFilter(currentMin, max);
-        }}
-                        .value="${this.column.getFilterValue()?.[1] || ''}"
-                        tabindex="0"
-                        @keydown="${this.handleTabSwitch}"
-                    />
-                    ${this.renderClearButton(1)}
-                </div>
-            </div>
+        }}
+                        .value="${this.column.getFilterValue()?.[1] || ''}"
+                        tabindex="0"
+                        @keydown="${this.handleTabSwitch}"
+                    />
+                    ${this.renderClearButton(1)}
+                </div>
+            </div>
         `;
     }
     renderSelectInput(multiselect = false) {
-        return html `
-            <lit-select
-                .value="${this.column.getFilterValue() || []}"
+        return html `
+            <lit-select
+                .value="${this.column.getFilterValue() || []}"
                 .options="${[
             ...this.sortedUniqueValues.map((value) => ({
                 value,
                 label: value,
             })),
-        ]}"
+        ]}"
                 .onChange="${(selectedValue) => {
             const filterValue = selectedValue.length === 0 ? undefined : selectedValue;
             this.column.setFilterValue(filterValue);
             this.requestUpdate(); // Aktualizácia komponentu po zmene
-        }}"
-                tabindex="0"
-                @keydown="${this.handleTabSwitch}"
-                .multiple="${multiselect}"
-            ></lit-select>
+        }}"
+                tabindex="0"
+                @keydown="${this.handleTabSwitch}"
+                .multiple="${multiselect}"
+            ></lit-select>
         `;
     }
     renderNumberInput() {
-        return html `
-            <div class="custom-icon-wrapper">
-                <input
-                    class="inputs"
-                    type="number"
+        return html `
+            <div class="custom-icon-wrapper">
+                <input
+                    class="inputs"
+                    type="number"
                     @input=${(e) => {
             const value = e.target.value;
             this.debouncedSetNumberFilter(value);
-        }}
-                    .value="${this.column?.getFilterValue() || ''}"
-                    tabindex="0"
-                    @keydown="${this.handleTabSwitch}"
-                />
-                ${this.renderClearButton()}
-            </div>
+        }}
+                    .value="${this.column?.getFilterValue() || ''}"
+                    tabindex="0"
+                    @keydown="${this.handleTabSwitch}"
+                />
+                ${this.renderClearButton()}
+            </div>
         `;
     }
-    renderDateInput(time = false) {
-        return html `
-            <div class="range">
-                <div class="custom-icon-wrapper" style="min-width: 70px">
-                    <input
-                        id="startDateInput"
-                        class="inputs customCell"
-                        type="text"
-                        placeholder="${msg('Od')}"
-                        value="${this.startDate || ''}"
-                        readonly
-                        @click=${() => this.switchDatePickers('start')}
-                        tabindex="0"
-                        @keydown="${this.handleTabSwitch}"
-                    />
-                    <div
-                        class="events-icon"
+    renderDateInput() {
+        return html `
+            <div class="range">
+                <div class="custom-icon-wrapper" style="min-width: 70px">
+                    <input
+                        id="startDateInput"
+                        class="inputs customCell"
+                        type="text"
+                        placeholder="${msg('Od')}"
+                        value="${this.startDate || ''}"
+                        @input=${this.handleDateInputStart}
+                        @click=${() => this.switchDatePickers('start')}
+                        tabindex="0"
+                        @keydown="${this.handleTabSwitch}"
+                    />
+                    <div
+                        class="events-icon"
                         @click=${() => {
             this.startDatePicker.show();
             this.switchDatePickers('start');
-        }}
-                    >
-                        <lit-icon-button
-                            icon="events"
-                            size="small"
-                            variant="text"
-                        ></lit-icon-button>
-                    </div>
+        }}
+                    >
+                        <lit-icon-button
+                            icon="events"
+                            size="small"
+                            variant="text"
+                        ></lit-icon-button>
+                    </div>
                     ${this.startDate
-            ? html `
-                              <div
-                                  class="custom-icon-date"
+            ? html `
+                              <div
+                                  class="custom-icon-date"
                                   @click=${() => {
                 this.startDate = undefined;
                 this.handleFilterDateChange(this.startDate, this.endDate);
                 this.startDatePicker.clear();
-            }}
-                              >
-                                  <lit-icon-button
-                                      icon="close"
-                                      size="small"
-                                      variant="text"
-                                  ></lit-icon-button>
-                              </div>
+            }}
+                              >
+                                  <lit-icon-button
+                                      icon="close"
+                                      size="small"
+                                      variant="text"
+                                  ></lit-icon-button>
+                              </div>
                           `
-            : ''}
-                </div>
-
-                <div class="custom-icon-wrapper" style="min-width: 70px">
-                    <input
-                        id="endDateInput"
-                        class="inputs"
-                        type="text"
-                        placeholder="${msg('Do')}"
-                        value="${this.endDate || ''}"
-                        readonly
-                        @click=${() => this.switchDatePickers('end')}
-                        tabindex="0"
-                        @keydown="${this.handleTabSwitch}"
-                    />
-                    <div
-                        class="events-icon"
+            : ''}
+                </div>
+
+                <div class="custom-icon-wrapper" style="min-width: 70px">
+                    <input
+                        id="endDateInput"
+                        class="inputs"
+                        type="text"
+                        placeholder="${msg('Do')}"
+                        value="${this.endDate || ''}"
+                        @click=${() => this.switchDatePickers('end')}
+                        tabindex="0"
+                        @keydown="${this.handleTabSwitch}"
+                        @input=${this.handleDateInputEnd}
+                    />
+                    <div
+                        class="events-icon"
                         @click=${() => {
             this.endDatePicker.show();
             this.switchDatePickers('end');
-        }}
-                    >
-                        <lit-icon-button
-                            icon="events"
-                            size="small"
-                            variant="text"
-                        ></lit-icon-button>
-                    </div>
+        }}
+                    >
+                        <lit-icon-button
+                            icon="events"
+                            size="small"
+                            variant="text"
+                        ></lit-icon-button>
+                    </div>
                     ${this.endDate
-            ? html `
-                              <div
-                                  class="custom-icon-date"
+            ? html `
+                              <div
+                                  class="custom-icon-date"
                                   @click=${() => {
                 this.endDate = undefined;
                 this.handleFilterDateChange(this.startDate, this.endDate);
                 this.endDatePicker.clear();
-            }}
-                              >
-                                  <lit-icon-button
-                                      icon="close"
-                                      size="small"
-                                      variant="text"
-                                  ></lit-icon-button>
-                              </div>
+            }}
+                              >
+                                  <lit-icon-button
+                                      icon="close"
+                                      size="small"
+                                      variant="text"
+                                  ></lit-icon-button>
+                              </div>
                           `
-            : ''}
-                </div>
-            </div>
+            : ''}
+                </div>
+            </div>
         `;
     }
     renderTextInput() {
-        return html `
-            <div class="custom-icon-wrapper">
-                <input
-                    class="inputs"
-                    type="text"
+        return html `
+            <div class="custom-icon-wrapper">
+                <input
+                    class="inputs"
+                    type="text"
                     @input=${(e) => {
             const value = e.target.value;
             this.debouncedSetTextFilter(value);
-        }}
-                    .value="${this.column?.getFilterValue() || ''}"
-                    tabindex="0"
-                    @keydown="${this.handleTabSwitch}"
-                />
-                ${this.renderClearButton()}
-            </div>
+        }}
+                    .value="${this.column?.getFilterValue() || ''}"
+                    tabindex="0"
+                    @keydown="${this.handleTabSwitch}"
+                />
+                ${this.renderClearButton()}
+            </div>
         `;
     }
     renderClearButton(rangeIndex) {
-        return html `
+        return html `
             ${rangeIndex === undefined
             ? this.column?.getFilterValue()
-                ? html `
-                          <div
-                              class="custom-icon"
+                ? html `
+                          <div
+                              class="custom-icon"
                               @click=${() => {
                     this.column?.setFilterValue(''); // Vymaže textový filter
                     this.requestUpdate();
-                }}
-                              style="cursor: pointer; pointer-events: auto"
-                          >
-                              <lit-icon-button
-                                  icon="close"
-                                  size="small"
-                                  variant="text"
-                              ></lit-icon-button>
-                          </div>
+                }}
+                              style="cursor: pointer; pointer-events: auto"
+                          >
+                              <lit-icon-button
+                                  icon="close"
+                                  size="small"
+                                  variant="text"
+                              ></lit-icon-button>
+                          </div>
                       `
                 : ''
             : this.column?.getFilterValue()?.[rangeIndex] !== undefined
-                ? html `
-                        <div
-                            class="custom-icon"
+                ? html `
+                        <div
+                            class="custom-icon"
                             @click=${() => {
                     const currentValues = this.column.getFilterValue() || [];
                     currentValues[rangeIndex] = undefined; // Vymaž hodnotu pre daný index
                     this.column.setFilterValue(currentValues);
                     this.requestUpdate();
-                }}
-                            style="cursor: pointer; pointer-events: auto"
-                            xmlns="http://www.w3.org/1999/html"
-                        >
-                            <lit-icon-button
-                                icon="close"
-                                size="small"
-                                variant="text"
-                            ></lit-icon-button>
-                        </div>
+                }}
+                            style="cursor: pointer; pointer-events: auto"
+                            xmlns="http://www.w3.org/1999/html"
+                        >
+                            <lit-icon-button
+                                icon="close"
+                                size="small"
+                                variant="text"
+                            ></lit-icon-button>
+                        </div>
                     `
-                : ''}
+                : ''}
         `;
     }
 };
-FilterInputs.styles = css `
-        .range {
-            display: flex;
-            gap: 0.3125rem;
-        }
-
-        input {
-            padding: 0.5rem 0.75rem 0.5rem 0.75rem;
-            border: 0.0625rem solid var(--color-divider, #d0d3db);
-            border-radius: 0.25rem;
-            min-width: 0;
-            width: -webkit-fill-available;
-        }
-
-        input[type='number']::-webkit-inner-spin-button,
-        input[type='number']::-webkit-outer-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
-        }
-
-        input:hover {
-            border: 0.0625rem solid var(--color-secondary-main, #111827);
-        }
-
-        input:focus {
-            outline: none;
-            border: 0.0625rem solid var(--color-secondary-dark, #010204);
-        }
-
-        select {
-            width: -webkit-fill-available;
-            padding: 0.5rem 0.75rem 0.5rem 0.75rem;
-            border: 0.0625rem solid var(--color-divider, #d0d3db);
-            border-radius: 0.25rem;
-            appearance: none;
-            -webkit-appearance: none; /* pre Safari */
-            -moz-appearance: none; /* pre Firefox */
-        }
-
-        .custom-icon-wrapper {
-            position: relative;
-            width: 100%;
-            display: inline-block;
-        }
-
-        .custom-icon-wrapper .custom-icon {
-            display: none;
-            position: absolute;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            cursor: pointer;
-            pointer-events: auto;
-            background: var(--background-paper);
-        }
-
-        .custom-icon-wrapper:hover .custom-icon {
-            display: block;
-        }
-
-        .custom-icon-wrapper .custom-icon-date {
-            display: none;
-            position: absolute;
-            right: 30px;
-            top: 50%;
-            transform: translateY(-50%);
-            cursor: pointer;
-            pointer-events: auto;
-            background: var(--background-paper);
-        }
-
-        .custom-icon-wrapper:hover .custom-icon-date {
-            display: inline-block;
-        }
-
-        .custom-icon-wrapper .events-icon {
-            position: absolute;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            z-index: 0;
-            cursor: pointer;
-            pointer-events: auto;
-            background: var(--background-paper);
-        }
-
-        .custom-icon-wrapper select:focus {
-            border: 0.0625rem solid var(--color-secondary-dark, #010204) !important;
-            outline: none;
-        }
-
-        select:hover {
-            border: 0.0625rem solid var(--color-secondary-main, #111827);
-        }
-        .customCell {
-            --adp-cell-background-color-selected: red;
-        }
+FilterInputs.styles = css `
+        .range {
+            display: flex;
+            gap: 0.3125rem;
+        }
+
+        input {
+            padding: 0.5rem 0.75rem 0.5rem 0.75rem;
+            border: 0.0625rem solid var(--color-divider, #d0d3db);
+            border-radius: 0.25rem;
+            min-width: 0;
+            width: -webkit-fill-available;
+        }
+
+        input[type='number']::-webkit-inner-spin-button,
+        input[type='number']::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        input:hover {
+            border: 0.0625rem solid var(--color-secondary-main, #111827);
+        }
+
+        input:focus {
+            outline: none;
+            border: 0.0625rem solid var(--color-secondary-dark, #010204);
+        }
+
+        select {
+            width: -webkit-fill-available;
+            padding: 0.5rem 0.75rem 0.5rem 0.75rem;
+            border: 0.0625rem solid var(--color-divider, #d0d3db);
+            border-radius: 0.25rem;
+            appearance: none;
+            -webkit-appearance: none; /* pre Safari */
+            -moz-appearance: none; /* pre Firefox */
+        }
+
+        .custom-icon-wrapper {
+            position: relative;
+            width: 100%;
+            display: inline-block;
+        }
+
+        .custom-icon-wrapper .custom-icon {
+            display: none;
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            pointer-events: auto;
+            background: var(--background-paper);
+        }
+
+        .custom-icon-wrapper:hover .custom-icon {
+            display: block;
+        }
+
+        .custom-icon-wrapper .custom-icon-date {
+            display: none;
+            position: absolute;
+            right: 30px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            pointer-events: auto;
+            background: var(--background-paper);
+        }
+
+        .custom-icon-wrapper:hover .custom-icon-date {
+            display: inline-block;
+        }
+
+        .custom-icon-wrapper .events-icon {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 0;
+            cursor: pointer;
+            pointer-events: auto;
+            background: var(--background-paper);
+        }
+
+        .custom-icon-wrapper select:focus {
+            border: 0.0625rem solid var(--color-secondary-dark, #010204) !important;
+            outline: none;
+        }
+
+        select:hover {
+            border: 0.0625rem solid var(--color-secondary-main, #111827);
+        }
+        .customCell {
+            --adp-cell-background-color-selected: red;
+        }
     `;
 __decorate([
     property({ type: Object })