[BUMP] Update dependency ember-template-lint to v6 (dossier racine) (PIX-12410)

addon/components/pix-filterable-and-searchable-select.hbs

@@ -28,7 +28,6 @@
       <:default as |option|>{{option.label}}</:default>
     </PixMultiSelect>
     <PixSelect
-      {{did-insert this.setSelectWidth}}
       @id={{this.pixSelectId}}
       @placeholder={{@placeholder}}
       @value={{@value}}

addon/components/pix-filterable-and-searchable-select.js

@@ -1,14 +1,38 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
-import { createClass } from '../common/add-dynamic-style-tag';
 
 export default class PixFilterableAndSearchableSelect extends Component {
+  @service elementHelper;
   @tracked selectedCategories = [];
-  mainId = 'pix-pfass-' + guidFor(this);
-  pixSelectId = 'pix-pfass-select-' + guidFor(this);
-  pixMultiSelectId = 'pix-pfass-multi-select-' + guidFor(this);
+
+  constructor(...args) {
+    super(...args);
+    this.mainId = 'pix-pfass-' + guidFor(this);
+    this.pixSelectId = 'pix-pfass-select-' + guidFor(this);
+    this.pixMultiSelectId = 'pix-pfass-multi-select-' + guidFor(this);
+
+    this.elementHelper.waitForElement(this.pixSelectId).then(() => {
+      const baseFontRemRatio = Number(
+        getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
+      );
+
+      const multiSelectWidth = document
+        .getElementById(this.pixMultiSelectId)
+        .getBoundingClientRect().width;
+
+      const selectWidth = Math.ceil(multiSelectWidth / baseFontRemRatio);
+
+      const className = `sizing-select-${this.pixSelectId}`;
+      this.elementHelper.createClass(`.${className}`, `width: calc(100% - ${selectWidth}rem);`);
+
+      const element = document.getElementById(`container-${this.pixSelectId}`);
+
+      element.className = element.className + ' ' + className;
+    });
+  }
 
   @action
   selectCategories(categories) {
@@ -47,22 +71,4 @@ export default class PixFilterableAndSearchableSelect extends Component {
 
     return selectableOptions;
   }
-
-  @action
-  setSelectWidth(element) {
-    const baseFontRemRatio = Number(
-      getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
-    );
-
-    const multiSelectWidth = document
-      .getElementById(this.pixMultiSelectId)
-      .getBoundingClientRect().width;
-
-    const selectWidth = Math.ceil(multiSelectWidth / baseFontRemRatio);
-
-    const className = `sizing-select-${this.pixSelectId}`;
-    createClass(`.${className}`, `width: calc(100% - ${selectWidth}rem);`);
-
-    element.className = element.className + ' ' + className;
-  }
 }

addon/components/pix-pagination.hbs

@@ -1,4 +1,4 @@
-<footer class={{this.isCondensed}} {{did-update this.checkCurrentPageAgainstPageCount @pagination}}>
+<footer class={{this.isCondensed}}>
   <section class="pix-pagination__size">
     <span class="pagination-size__label">{{this.beforeResultsPerPage}}</span>
     <PixSelect

addon/components/pix-pagination.js

@@ -118,13 +118,4 @@ export default class PixPagination extends Component {
   goToPreviousPage() {
     this.router.replaceWith({ queryParams: { pageNumber: this.previousPage } });
   }
-
-  @action
-  checkCurrentPageAgainstPageCount() {
-    const pageCount = this.args.pagination.pageCount;
-    if (pageCount === 0) return;
-    if (this.currentPage > pageCount) {
-      this.router.replaceWith({ queryParams: { pageNumber: pageCount } });
-    }
-  }
 }

addon/components/pix-select.hbs

@@ -4,7 +4,6 @@
   {{on-click-outside this.hideDropdown}}
   {{on-arrow-down-up-action this.listId this.showDropdown this.isExpanded}}
   {{on-escape-action this.hideDropdown this.selectId}}
-  {{did-insert this.setSelectWidth}}
   {{on "keydown" this.lockTab}}
   ...attributes
 >
@@ -47,7 +46,6 @@
       <div
         {{popover}}
         class="pix-select__dropdown{{unless this.isExpanded ' pix-select__dropdown--closed'}}"
-        id={{this.dropDownId}}
         {{on "transitionend" this.focus}}
       >
         {{#if @isSearchable}}

addon/components/pix-select.js

@@ -1,30 +1,47 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
-import { createClass } from '../common/add-dynamic-style-tag';
 
 export default class PixSelect extends Component {
+  @service elementHelper;
   @tracked isExpanded = false;
   @tracked searchValue = null;
-  searchId = 'search-input-' + guidFor(this);
 
   constructor(...args) {
     super(...args);
 
     const categories = [];
+
+    this.searchId = 'search-input-' + guidFor(this);
+    this.selectId = this.args.id ? this.args.id : 'select-' + guidFor(this);
+    this.listId = `listbox-${this.selectId}`;
+
     this.args.options.forEach((element) => {
       if (!categories.includes(element.category) && element.category !== undefined) {
         categories.push(element.category);
       }
     });
-
     this.displayCategory = categories.length > 0;
-  }
 
-  get selectId() {
-    if (this.args.id) return this.args.id;
-    return 'select-' + guidFor(this);
+    if (!this.args.isComputeWidthDisabled) {
+      this.elementHelper.waitForElement(this.selectId).then((elementList) => {
+        const baseFontRemRatio = Number(
+          getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
+        );
+        const checkIconWidth = 1.125 * baseFontRemRatio;
+        const listWidth = elementList.getBoundingClientRect().width;
+        const selectWidth = (listWidth + checkIconWidth) / baseFontRemRatio;
+
+        const className = `sizing-select-${this.selectId}`;
+        this.elementHelper.createClass(`.${className}`, `width: ${selectWidth}rem;`);
+
+        const element = document.getElementById(`container-${this.selectId}`);
+
+        element.className = element.className + ' ' + className;
+      });
+    }
   }
 
   get displayDefaultOption() {
@@ -51,14 +68,6 @@ export default class PixSelect extends Component {
     return this.isExpanded ? 'true' : 'false';
   }
 
-  get listId() {
-    return `listbox-${this.selectId}`;
-  }
-
-  get dropDownId() {
-    return `dropdown-${this.selectId}`;
-  }
-
   get placeholder() {
     if (!this.args.value) return this.args.placeholder;
     const option = this.args.options.find((option) => option.value === this.args.value);
@@ -155,23 +164,4 @@ export default class PixSelect extends Component {
       }
     }
   }
-
-  @action
-  setSelectWidth() {
-    if (!this.args.isComputeWidthDisabled) {
-      const baseFontRemRatio = Number(
-        getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
-      );
-      const checkIconWidth = 1.125 * baseFontRemRatio;
-      const listWidth = document.getElementById(this.listId).getBoundingClientRect().width;
-      const selectWidth = (listWidth + checkIconWidth) / baseFontRemRatio;
-
-      const className = `sizing-select-${this.selectId}`;
-      createClass(`.${className}`, `width: ${selectWidth}rem;`);
-
-      const element = document.getElementById(`container-${this.selectId}`);
-
-      element.className = element.className + ' ' + className;
-    }
-  }
 }

app/services/element-helper.js

@@ -0,0 +1,32 @@
+import Service from '@ember/service';
+
+export default class ElementService extends Service {
+  waitForElement(id) {
+    return new Promise((resolve) => {
+      if (document.getElementById(id)) {
+        return resolve(document.getElementById(id));
+      }
+
+      const observer = new MutationObserver(() => {
+        if (document.getElementById(id)) {
+          resolve(document.getElementById(id));
+          observer.disconnect();
+        }
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    });
+  }
+
+  createClass(name, rules) {
+    var style = document.createElement('style');
+    style.type = 'text/css';
+    document.getElementsByTagName('head')[0].appendChild(style);
+
+    if (!(style.sheet || {}).insertRule) (style.styleSheet || style.sheet).addRule(name, rules);
+    else style.sheet.insertRule(name + '{' + rules + '}', 0);
+  }
+}