@digital-realty/ix-grid 1.3.8 → 1.3.10

package/src/components/IxGridRowFilter.ts

@@ -1,9 +1,10 @@
 import '@digital-realty/ix-button/ix-button.js';
 import '@digital-realty/ix-date/ix-date.js';
+import '@digital-realty/ix-date-next/ix-date-next.js';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
 import '@digital-realty/ix-icon/ix-icon.js';
 import '@digital-realty/ix-select/ix-select.js';
-import { formatDate } from 'date-fns/format.js';
+import { format, formatDate } from 'date-fns/format.js';
 import { LitElement, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -29,6 +30,8 @@ export class IxGridRowFilter extends LitElement {
 
   @property({ type: Boolean }) readParamsFromURL = false;
 
+  @property({ type: Boolean }) useNewDatePicker = false;
+
   @property({ type: String }) maxDate: string = formatDate(
     new Date(),
     'yyyy-MM-dd'
@@ -255,12 +258,19 @@ export class IxGridRowFilter extends LitElement {
     }
     return html` <p>${this.activeFilters.length} ${copy.activeFilter}</p>
       <ul>
-        ${this.activeFilters.map(
-          filter => html`<li>
+        ${this.activeFilters.map(filter => {
+          let displayValue = filter.value;
+
+          if (filter.dataType === 'dateTime' && this.useNewDatePicker) {
+            const date = this.shadowRoot?.querySelector(`ix-date-next`) as any;
+            displayValue = format(displayValue, date.format);
+          }
+
+          return html`<li>
             ${this.formatCamelCaseToEnglish(filter.columnField)}
-            ${filter.operatorValue} ${filter.value}
-          </li>`
-        )}
+            ${filter.operatorValue} ${displayValue}
+          </li>`;
+        })}
       </ul>`;
   }
 
@@ -278,15 +288,26 @@ export class IxGridRowFilter extends LitElement {
   }
 
   private renderDateInput(value: any, index: number) {
-    return html` <ix-date
-      data-testid=${`filterValueInput-${index}`}
-      .value=${value.value}
-      max=${this.maxDate}
-      name="${value.columnField}-valueDate"
-      .errorText=${this.fromDateErrorText}
-      .onChanged=${e => this.onDatefilterValueChange(index, e)}
-    >
-    </ix-date>`;
+    return this.useNewDatePicker
+      ? html`<ix-date-next
+          data-testid=${`filterValueInput-${index}`}
+          .value=${value.value}
+          max=${this.maxDate}
+          name="${value.columnField}-valueDate"
+          showCalendarOnMouseDown="true"
+          .errorText=${this.fromDateErrorText}
+          .onChanged=${e => this.onDatefilterValueChange(index, e)}
+        >
+        </ix-date-next>`
+      : html`<ix-date
+          data-testid=${`filterValueInput-${index}`}
+          .value=${value.value}
+          max=${this.maxDate}
+          name="${value.columnField}-valueDate"
+          .errorText=${this.fromDateErrorText}
+          .onChanged=${e => this.onDatefilterValueChange(index, e)}
+        >
+        </ix-date>`;
   }
 
   private renderFilterInputControl(value: any, index: number) {

package/src/components/IxPagination.ts

@@ -18,6 +18,8 @@ export class IxPagination extends LitElement {
 
   @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];
 
+  @property({ type: Boolean, attribute: 'simple' }) isSimple = false;
+
   private changePage(offset: number) {
     this.page += offset;
     this.updatePagination();
@@ -49,8 +51,8 @@ export class IxPagination extends LitElement {
   render() {
     const back = this.page > 1;
     const next = this.recordCount > this.page * this.pageSize;
-    return html` <div class="pagination">
-      <div>
+    return html` <div class="pagination ${this.isSimple ? 'simple' : ''}">
+      <div ?hidden=${this.isSimple}>
         <p class="rows-per-page" data-testid="ix-pagination-rows-per-page">
           ${copy.rowsPerPage}:
         </p>

package/src/components/grid-row-filter-styles.ts

@@ -160,8 +160,14 @@ export const IxGridRowFilterStyles = css`
     flex-direction: column;
     align-items: baseline;
     height: 54px;
-    justify-content: flex-end;
+    justify-content: space-between;
     font-family: var(--text-default-font, sans-serif);
+    white-space: wrap;
+
+    ix-date-next,
+    ix-date {
+      margin-top: 10px;
+    }
   }
 
   option {

package/src/components/pagination-styles.ts

@@ -8,6 +8,10 @@ export const PaginationStyles = css`
     );
   }
 
+  [hidden] {
+    display: none !important;
+  }
+
   .pagination {
     display: flex;
     align-items: center;
@@ -23,6 +27,10 @@ export const PaginationStyles = css`
     margin: 1.25rem 0.5rem 1.25rem 1rem;
   }
 
+  .pagination.simple {
+    margin: 0;
+  }
+
   .pagination > div {
     display: flex;
     align-items: center;

package/src/grid-view-styles.ts

@@ -154,7 +154,7 @@ export const IxGridViewStyles = css`
 
   .progress-container {
     position: relative;
-    top: 60px;
+    top: var(--progress-bar-top, 60px);
     z-index: 1;
   }
 
@@ -193,6 +193,17 @@ export const IxGridViewStyles = css`
 
   .row-controls {
     border-top: solid 1px var(--clr-border-outline, #0922411f);
+    padding: 8px;
+  }
+
+  .more-pagination {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .pagination {
+    flex-grow: 1;
   }
 
   .row-limit {
@@ -206,17 +217,12 @@ export const IxGridViewStyles = css`
 
   /* launchpad variant */
   .launchpad vaadin-grid {
-    --_lumo-grid-border-width: 0;
     --lumo-size-xl: auto;
   }
 
-  .launchpad vaadin-grid-cell-content {
-    padding: 11px 24px;
-    border-bottom: 0;
-  }
-
-  .launchpad vaadin-grid::part(body-row) {
-    border-bottom: 1px solid var(--clr-border-outline, rgba(9, 34, 65, 0.12));
+  .launchpad {
+    --ix-grid-cell-height: 44px;
+    --ix-grid-cell-padding: 14px 24px;
   }
 
   .launchpad .grid-header {

package/src/test/ix-grid-row-filter.test.ts

@@ -385,5 +385,35 @@ describe('IxGridRowFilter', () => {
       const today = new Date().toISOString().split('T')[0];
       expect(dateInput?.getAttribute('max')).to.equal(today);
     });
+
+    it('should render ix-date-next if "useNewDatePicker" is true', async () => {
+      const columnsWithDataType = [
+        {
+          name: 'dateField',
+          header: 'Date Field',
+          filterable: true,
+          filterOperators: ['='],
+          dataType: 'dateTime',
+        },
+      ];
+
+      const el = await fixture(
+        html`<ix-grid-row-filter
+          .columns=${columnsWithDataType}
+          .useNewDatePicker=${true}
+        ></ix-grid-row-filter>`
+      );
+
+      const openMenu = el.shadowRoot?.querySelector(
+        '.filter-button'
+      ) as HTMLElement;
+      openMenu?.click();
+      await elementUpdated(el);
+
+      const dateInput = el.shadowRoot?.querySelector(
+        'div.filterValueField ix-date-next'
+      );
+      expect(dateInput).to.exist;
+    });
   });
 });