Merge branch 'main' into 8502-about-remove-mobile-info

infor-design · May 21, 2024 · 01a4be4 · 01a4be4
2 parents f2181a0 + 05ce8b2
commit 01a4be4
Show file tree

Hide file tree

Showing 15 changed files with 69 additions and 29 deletions.
diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md
@@ -5,6 +5,9 @@
 ### 1.2.0 Fixes
 
 - `[About]` Removed mobile info from about page. ([#8502](https://github.com/infor-design/enterprise/issues/8502))
+- `[DatePicker]` Fix datepicker value syncing with manual input changes. ([#2207](https://github.com/infor-design/enterprise-wc/issues/2207))
+- `[Dropdown]` Added additional fixes so that typeahead works in the angular examples. ([#2249](https://github.com/infor-design/enterprise-wc/issues/2249))
+- `[Pager]` Fix `ids-pager-button` so that it can be enabled if `page-total` is unknown or not provided. ([#1506](https://github.com/infor-design/enterprise-wc/issues/1506))
 - `[PopupMenu]` Fix popupmenu truncation bug for menu items with shortcuts. ([#2250](https://github.com/infor-design/enterprise-wc/issues/2250))
 - `[Popupmenu]` Changed the `position-style` default to `fixed` this causes better placement in scroll containers. ([#2289](https://github.com/infor-design/enterprise-wc/issues/2289))
 - `[Toolbar]` Converted toolbar tests to playwright. ([#1984](https://github.com/infor-design/enterprise-wc/issues/1984))
@@ -19,6 +22,7 @@
 - `[Datagrid]` Added the ability to create multiline header text [see docs](https://github.com/infor-design/enterprise-wc/tree/main/src/components/ids-data-grid#multiline-header-code-examples) for details. ([#1793](https://github.com/infor-design/enterprise-wc/issues/1793))
 - `[Datagrid]` Fix problem with datagrid pagination where setting the `pageTotal` property causes some of the rows to be incorrectly sorted. ([#2232](https://github.com/infor-design/enterprise-wc/issues/2232))
 - `[Datagrid]` Fixed bugged where adding `pageTotal` to datagrid messed up data order. ([#2232](https://github.com/infor-design/enterprise-wc/issues/2232))
+- `[Datagrid]` Fix grid popup alignment issues, by removing children if there are more than one instance of the child. ([#2246](https://github.com/infor-design/enterprise-wc/issues/2246))
 - `[Splitter]` If the panel is resized to 0, it will have `collapsed` attribute, enabling it to expand to its original position. ([#2083](https://github.com/infor-design/enterprise-wc/issues/2083))
 
 ### 1.1.0 Fixes

diff --git a/src/components/ids-data-grid/ids-data-grid-filters.ts b/src/components/ids-data-grid/ids-data-grid-filters.ts
@@ -760,7 +760,7 @@ export default class IdsDataGridFilters {
       let triggerField = node?.querySelector('ids-trigger-field');
       const datePickerPopup = node?.querySelector('ids-date-picker-popup');
       const timePickerPopup = node?.querySelector('ids-time-picker-popup');
-      let menuAttachment = '.ids-data-grid';
+      let menuAttachment = '.ids-data-grid-wrapper';
 
       // Slotted filter only
       if (slot && (input || dropdown || datePicker || timePicker || btn)) {

diff --git a/src/components/ids-date-picker/ids-date-picker.ts b/src/components/ids-date-picker/ids-date-picker.ts
@@ -370,6 +370,14 @@ class IdsDatePicker extends Base {
       this.#togglePopup(false);
     });
 
+    // Input value change
+    this.offEvent('change.date-picker-input');
+    this.onEvent('change.date-picker-input', this.triggerField, (e) => {
+      if (!this.useRange && isValidDate(this.getDateValue(e.detail.value))) {
+        this.setAttribute(attributes.VALUE, e.detail.value);
+      }
+    });
+
     return this;
   }
 
@@ -722,6 +730,7 @@ class IdsDatePicker extends Base {
 
     if (!this.disabled && !this.readonly) {
       this.setAttribute(attributes.VALUE, String(val));
+      this.picker?.setAttribute(attributes.VALUE, String(val));
       this.triggerField?.setAttribute(attributes.VALUE, val);
     }
   }

diff --git a/src/components/ids-dropdown/ids-dropdown.ts b/src/components/ids-dropdown/ids-dropdown.ts
@@ -633,6 +633,19 @@ export default class IdsDropdown extends Base {
     }
   }
 
+  /**
+   * Attach events for typeahead
+   */
+  #attachTypeaheadEvents() {
+    this.onEvent('input.dropdown', this.input?.input, (e: any) => {
+      if (this.typeahead) {
+        this.#typeAhead(e.target?.value);
+      } else {
+        this.#selectMatch(e.target?.value);
+      }
+    });
+  }
+
   /**
    * Open the dropdown list
    * @param {boolean} shouldSelect whether or not the input text should be selected
@@ -669,6 +682,7 @@ export default class IdsDropdown extends Base {
 
     // Focus and select input when typeahead is enabled
     if (this.typeahead) {
+      this.#attachTypeaheadEvents();
       this.input?.removeAttribute(attributes.READONLY);
       this.input?.focus();
     }
@@ -965,14 +979,6 @@ export default class IdsDropdown extends Base {
       }
     });
 
-    this.onEvent('input.dropdown', this.input?.input, (e: any) => {
-      if (this.typeahead) {
-        this.#typeAhead(e.target?.value);
-      } else {
-        this.#selectMatch(e.target?.value);
-      }
-    });
-
     // Handle up and down arrow
     this.listen(['ArrowDown', 'ArrowUp'], this, (e: KeyboardEvent) => {
       e.stopPropagation();

diff --git a/src/components/ids-pager/ids-pager-button.ts b/src/components/ids-pager/ids-pager-button.ts
@@ -88,7 +88,6 @@ export default class IdsPagerButton extends Base {
     super.attributeChangedCallback(name, oldValue, newValue);
 
     const shouldRerender = [
-      attributes.DISABLED,
       attributes.PAGE_NUMBER,
       attributes.PAGE_SIZE,
       attributes.STEP,
@@ -114,7 +113,7 @@ export default class IdsPagerButton extends Base {
       this.disabled = this.pager.disabled;
       this.pageNumber = this.pager.pageNumber;
       this.pageSize = this.pager.pageSize;
-      this.total = this.pager.total;
+      this.total = this.pager?.total ?? 0;
     }
 
     this.#updateNavDisabled();
@@ -137,7 +136,7 @@ export default class IdsPagerButton extends Base {
    */
   get pageCount(): number | null {
     const val = this.hasAttribute(attributes.TOTAL)
-      ? Math.ceil(this.total / this.pageSize)
+      ? Math.max(Math.ceil(this.total / this.pageSize), 1)
       : null;
     return this.pager?.pageCount ?? val;
   }
@@ -208,7 +207,7 @@ export default class IdsPagerButton extends Base {
    */
   set total(value: number) {
     let val = stringToNumber(value);
-    if (Number.isNaN(val) || val < 1) val = 1;
+    if (Number.isNaN(val) || val < 1) val = 0;
     this.setAttribute(attributes.TOTAL, String(val));
 
     this.#updateNavDisabled();
@@ -417,12 +416,12 @@ export default class IdsPagerButton extends Base {
     switch (this.type) {
       case attributes.FIRST:
       case attributes.PREVIOUS: {
-        isNavDisabled = this.pageNumber <= 1;
+        isNavDisabled = this.pageNumber <= 1 && this.total > 0;
         break;
       }
       case attributes.NEXT:
       case attributes.LAST: {
-        isNavDisabled = this.pageNumber >= (this.pageCount || 0);
+        isNavDisabled = this.pageNumber >= (this.pageCount || 0) && this.total > 0;
         break;
       }
       default: {

diff --git a/src/components/ids-pager/ids-pager-input.ts b/src/components/ids-pager/ids-pager-input.ts
@@ -215,7 +215,7 @@ export default class IdsPagerInput extends Base {
   /** @param {string|number} value The number of items to track */
   set total(value: string | number) {
     let val = stringToNumber(value);
-    if (Number.isNaN(val) || val < 1) val = 1;
+    if (Number.isNaN(val) || val < 1) val = 0;
     this.setAttribute(attributes.TOTAL, String(val));
     this.#updatePageCountShown();
   }
@@ -229,7 +229,7 @@ export default class IdsPagerInput extends Base {
   /** @returns {number|null} The calculated pageCount using total and pageSize */
   get pageCount(): number | null {
     const val = this.hasAttribute(attributes.TOTAL)
-      ? Math.ceil(this.total / this.pageSize)
+      ? Math.max(Math.ceil(this.total / this.pageSize), 1)
       : null;
     return this.pager?.pageCount ?? val;
   }
@@ -316,7 +316,7 @@ export default class IdsPagerInput extends Base {
   /** Updates text found in page-count within ids-text span */
   #updatePageCountShown(): void {
     const pageCount = this.pageCount;
-    const pageCountShown = (pageCount === null) ? 'N/A' : pageCount;
+    const pageCountShown = (pageCount === null || Number.isNaN(pageCount)) ? 'N/A' : pageCount;
     const pageCountElem = this.shadowRoot?.querySelector('span.page-count');
     if (pageCountElem) {
       pageCountElem.textContent = String(pageCountShown);

diff --git a/src/components/ids-pager/ids-pager-number-list.ts b/src/components/ids-pager/ids-pager-number-list.ts
@@ -151,7 +151,7 @@ export default class IdsPagerNumberList extends Base {
   /** @param {number} value The number of items to track */
   set total(value: number) {
     let val = stringToNumber(value);
-    if (Number.isNaN(val) || val < 1) val = 1;
+    if (Number.isNaN(val) || val < 1) val = 0;
     this.setAttribute(attributes.TOTAL, String(val));
   }
 
@@ -164,7 +164,7 @@ export default class IdsPagerNumberList extends Base {
   /** @returns {number|null} The calculated pageCount using total and pageSize */
   get pageCount(): number | null {
     const val = this.hasAttribute(attributes.TOTAL)
-      ? Math.ceil(this.total / this.pageSize)
+      ? Math.max(Math.ceil(this.total / this.pageSize), 1)
       : null;
     return this.pager?.pageCount ?? val;
   }

diff --git a/src/components/ids-pager/ids-pager.ts b/src/components/ids-pager/ids-pager.ts
@@ -254,7 +254,7 @@ export default class IdsPager extends IdsEventsMixin(IdsElement) {
   /** @returns {number|null} The calculated pageCount using total and pageSize */
   get pageCount(): number | null {
     return (this.total !== null && !Number.isNaN(this.total))
-      ? Math.ceil(this.total / this.pageSize)
+      ? Math.max(Math.ceil(this.total / this.pageSize), 1)
       : null;
   }
 
@@ -280,7 +280,7 @@ export default class IdsPager extends IdsEventsMixin(IdsElement) {
   /** @param {number} value The number of items to track */
   set total(value) {
     let val = stringToNumber(value);
-    if (Number.isNaN(val) || val < 1) val = 1;
+    if (Number.isNaN(val) || val < 1) val = 0;
     this.setAttribute(attributes.TOTAL, String(val));
     this.#keepPageNumberInBounds();
   }

diff --git a/src/components/ids-popup/ids-popup.ts b/src/components/ids-popup/ids-popup.ts
@@ -556,10 +556,10 @@ export default class IdsPopup extends Base {
     const val = validMaxHeight(value);
     if (val) {
       this.setAttribute(attributes.MAX_HEIGHT, val);
+      this.#updateMaxHeightProp(val);
     } else {
       this.removeAttribute(attributes.MAX_HEIGHT);
     }
-    this.#updateMaxHeightProp(val);
   }
 
   /**

diff --git a/src/mixins/ids-attachment-mixin/ids-attachment-mixin.ts b/src/mixins/ids-attachment-mixin/ids-attachment-mixin.ts
@@ -78,6 +78,19 @@ const IdsAttachmentMixin = <T extends IdsBaseConstructor>(superclass: T) => clas
    */
   appendToTargetParent(): void {
     if (!this.attachmentParentElement) return;
+
+    if (this.id) {
+      /**
+       * Remove Child if there are more than one instance of the component
+       */
+      const [first, ...others] = this.attachmentParentElement.querySelectorAll(`#${this.id}`);
+      if (first && others.length) {
+        others.forEach((elem) => {
+          elem.remove();
+        });
+      }
+    }
+
     this.attachmentParentElement.append(this);
   }
 

diff --git a/tests/ids-date-picker/ids-date-picker.spec.ts b/tests/ids-date-picker/ids-date-picker.spec.ts
@@ -586,6 +586,15 @@ test.describe('IdsDatePicker tests', () => {
       expect(datePickerValue.dayUnset).toEqual((new Date()).getDate());
     });
 
+    test('setting input value should reflect in datepicker value', async ({ page }) => {
+      const datePickerHandle = page.locator('ids-date-picker').first();
+      const datePikcerValue = await datePickerHandle.evaluate((datePicker: IdsDatePicker) => {
+        datePicker.triggerField.value = '4/21/1990';
+        return datePicker.value;
+      });
+      expect(datePikcerValue).toEqual('4/21/1990');
+    });
+
     test('should set focus', async ({ page }) => {
       const hasFocus = await page.evaluate(() => {
         const component = document.querySelector<IdsDatePicker>('ids-date-picker')!;

diff --git a/tests/ids-date-picker/snapshots/date-picker-shadow.snap b/tests/ids-date-picker/snapshots/date-picker-shadow.snap
@@ -7,6 +7,6 @@
             <ids-icon part="icon" icon="schedule"></ids-icon>
           </ids-trigger-button>
         </ids-trigger-field>
-        <ids-date-picker-popup id="popup-datepicker-value" show-today="true" show-week-numbers="false" first-day-of-week="0" year="2016" month="2" day="4" trigger-type="click" target="#datepicker-value" trigger-elem="#triggerBtn-datepicker-value" format="M/d/yyyy" value="3/4/2016"></ids-date-picker-popup>
+        <ids-date-picker-popup id="popup-datepicker-value" show-today="true" show-week-numbers="false" first-day-of-week="0" year="2016" month="2" day="4" value="3/4/2016" trigger-type="click" target="#datepicker-value" trigger-elem="#triggerBtn-datepicker-value" format="M/d/yyyy"></ids-date-picker-popup>
       </div>
 
diff --git a/tests/ids-pager/ids-pager.spec.ts b/tests/ids-pager/ids-pager.spec.ts
@@ -240,7 +240,7 @@ test.describe('IdsPager tests', () => {
       const testData = [
         { data: 100, expected: 100 },
         { data: '50', expected: 50 },
-        { data: 'ACE', expected: 1 }
+        { data: 'ACE', expected: 0 }
       ];
 
       expect(await idsPager.evaluate((element: IdsPager) => element.total)).toEqual(200);

diff --git a/tests/ids-pager/snapshots/pager-html.snap b/tests/ids-pager/snapshots/pager-html.snap
@@ -1,6 +1,6 @@
 <ids-pager page-number="1" page-size="20" total="200" id="ids-pager-example">
-          <ids-pager-button first="" page-number="1" nav-disabled="" page-size="20" total="200"></ids-pager-button>
-          <ids-pager-button previous="" page-number="1" nav-disabled="" page-size="20" total="200"></ids-pager-button>
+          <ids-pager-button first="" page-number="1" page-size="20" total="200" nav-disabled=""></ids-pager-button>
+          <ids-pager-button previous="" page-number="1" page-size="20" total="200" nav-disabled=""></ids-pager-button>
           <ids-pager-input page-size="20" total="200" page-number="1"></ids-pager-input>
           <ids-pager-button next="" page-number="1" page-size="20" total="200"></ids-pager-button>
           <ids-pager-button last="" page-number="1" page-size="20" total="200"></ids-pager-button>

diff --git a/tests/ids-popup/snapshots/popup-shadow.snap b/tests/ids-popup/snapshots/popup-shadow.snap
@@ -1,6 +1,6 @@
-<div class="ids-popup animated animation-fade has-maxheight position-absolute menu" part="popup" style="--ids-popup-maxheight: 0px;">
+<div class="ids-popup animated animation-fade position-absolute menu" part="popup">
       <div class="arrow right" part="arrow-right"></div>
-      <div class="content-wrapper" tabindex="0">
+      <div class="content-wrapper">
         <slot name="content"></slot>
       </div>
     </div>