@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/ts/components/slider/slider.component.ts

@@ -3,19 +3,21 @@
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "Slider"
+  event: 'customElementRegistered',
+  element: 'Slider',
 });
 
-
 class iamSlider extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    this.attachShadow({ mode: 'open'});
-
-    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
-    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+    const coreCSS = document.body.hasAttribute('data-core-css')
+      ? document.body.getAttribute('data-core-css')
+      : `${assetLocation}/css/core.min.css`;
     const loadCSS = `@import "${assetLocation}/css/components/slider.css";`;
 
     const template = document.createElement('template');
@@ -36,154 +38,137 @@ class iamSlider extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-
+  connectedCallback() {
     const slider = this;
     const minElement = this.shadowRoot.querySelector('.min');
     const maxElement = this.shadowRoot.querySelector('.max');
-    const slidersHolder = this.shadowRoot.querySelector('.sliders')
+    const slidersHolder = this.shadowRoot.querySelector('.sliders');
     let inputs = this.querySelectorAll('input');
     const inputWrapper = this.shadowRoot.querySelector('.input__wrapper');
     const label = this.closest('label');
 
-    
-    let stepperInterval, stepperEvent = "mouseup", stepperStart = "mousedown";
-    
-    if("ontouchstart" in document.documentElement) {
-      stepperEvent = "touchend";
-      stepperStart = "touchstart";
-    }
-
-    let stepperFunction = function(input, eventType) {
+    let stepperInterval,
+      stepperEvent = 'mouseup',
+      stepperStart = 'mousedown';
 
-      let value = input.value;
-
-      let min = slider.shadowRoot.querySelector('.is-first').getAttribute('min');
-      let max = slider.shadowRoot.querySelector('.is-last').getAttribute('max');
+    if ('ontouchstart' in document.documentElement) {
+      stepperEvent = 'touchend';
+      stepperStart = 'touchstart';
+    }
 
-      if (input.classList.contains('is-last') && !input.classList.contains('is-first')){
+    const stepperFunction = function (input, eventType) {
+      const value = input.value;
 
-        let percent = ((value/(max-min)) * 100);
-        slider.style.setProperty('--percent', percent + "%");
+      const min = slider.shadowRoot.querySelector('.is-first').getAttribute('min');
+      const max = slider.shadowRoot.querySelector('.is-last').getAttribute('max');
 
-        if(parseFloat(input.value) <= parseFloat(slider.shadowRoot.querySelector('.is-first').value)){
+      if (input.classList.contains('is-last') && !input.classList.contains('is-first')) {
+        const percent = (value / (max - min)) * 100;
+        slider.style.setProperty('--percent', percent + '%');
 
+        if (parseFloat(input.value) <= parseFloat(slider.shadowRoot.querySelector('.is-first').value)) {
           slider.shadowRoot.querySelector('.is-first').value = input.value;
           slider.querySelector('.is-first').value = input.value;
-          slider.style.setProperty('--start-percent', percent + "%");
+          slider.style.setProperty('--start-percent', percent + '%');
         }
-      }
-      else if(input.classList.contains('is-first') && !input.classList.contains('is-last')){
-
-        let percent = ((value/(max-min)) * 100);
-        slider.style.setProperty('--start-percent', percent + "%");
-
-        if(parseFloat(input.value) >= parseFloat(slider.shadowRoot.querySelector('.is-last').value)){
+      } else if (input.classList.contains('is-first') && !input.classList.contains('is-last')) {
+        const percent = (value / (max - min)) * 100;
+        slider.style.setProperty('--start-percent', percent + '%');
 
+        if (parseFloat(input.value) >= parseFloat(slider.shadowRoot.querySelector('.is-last').value)) {
           slider.shadowRoot.querySelector('.is-last').value = input.value;
           slider.querySelector('.is-last').value = input.value;
-          slider.style.setProperty('--percent', percent + "%");
+          slider.style.setProperty('--percent', percent + '%');
         }
-      }
-      else {
-        
-        let percent = ((value/(max-min)) * 100).toFixed(2);
-        slider.style.setProperty('--percent', percent + "%");
+      } else {
+        const percent = ((value / (max - min)) * 100).toFixed(2);
+        slider.style.setProperty('--percent', percent + '%');
       }
     };
 
     // Create sliders
-    Array.from(inputs).forEach((input,index) => {
-
-      let rangeInput = input.cloneNode(true);
-      input.setAttribute('type','number');
-      rangeInput.setAttribute('type','range');
+    Array.from(inputs).forEach((input, index) => {
+      const rangeInput = input.cloneNode(true);
+      input.setAttribute('type', 'number');
+      rangeInput.setAttribute('type', 'range');
 
-      if(index == 0){
+      if (index == 0) {
         input.classList.add('is-first');
         rangeInput.classList.add('is-first');
 
         minElement.innerHTML = input.getAttribute('min');
         maxElement.innerHTML = input.getAttribute('max');
-          
+
         slidersHolder.appendChild(rangeInput);
       }
-      
-      if(index == inputs.length-1){
+
+      if (index == inputs.length - 1) {
         input.classList.add('is-last');
-        rangeInput.classList.add('is-last'); 
+        rangeInput.classList.add('is-last');
         slidersHolder.appendChild(rangeInput);
       }
 
-      if(index > 1) {
+      if (index > 1) {
         input.remove();
       }
-
     });
     inputs = this.querySelectorAll('input');
-    inputWrapper.setAttribute('data-elements',inputs.length);
+    inputWrapper.setAttribute('data-elements', inputs.length);
 
-    
     const sliders = this.shadowRoot.querySelectorAll('input');
 
-    Array.from(inputs).forEach((input,index) => {
-
-      input.addEventListener('keyup',function(event){
+    Array.from(inputs).forEach((input, index) => {
+      input.addEventListener('keyup', function (event) {
         sliders[index].value = input.value;
         stepperFunction(sliders[index]);
       });
-      input.addEventListener('keydown',function(event){
+      input.addEventListener('keydown', function (event) {
         sliders[index].value = input.value;
         stepperFunction(sliders[index]);
       });
 
-      input.addEventListener('change',function(event){
+      input.addEventListener('change', function (event) {
         sliders[index].value = input.value;
         stepperFunction(sliders[index]);
       });
     });
 
-    Array.from(sliders).forEach((input,index) => {
-
-      stepperFunction(input,'start');
+    Array.from(sliders).forEach((input, index) => {
+      stepperFunction(input, 'start');
 
-      input.addEventListener(stepperStart,function(event){
-        
+      input.addEventListener(stepperStart, function (event) {
         clearInterval(stepperInterval);
-        stepperInterval = setInterval(function() {
-          stepperFunction(input,'drag');
+        stepperInterval = setInterval(function () {
+          stepperFunction(input, 'drag');
           inputs[index].value = input.value;
         }, 10);
       });
 
-      input.addEventListener(stepperEvent,function(event){
+      input.addEventListener(stepperEvent, function (event) {
         clearInterval(stepperInterval);
       });
 
-      input.addEventListener('change',function(event){
+      input.addEventListener('change', function (event) {
         clearInterval(stepperInterval);
-        stepperFunction(input,'click');
+        stepperFunction(input, 'click');
         inputs[index].value = input.value;
       });
     });
 
     // Move focus to slider when clicking on label
-    label.addEventListener('click',function(event) {
-
+    label.addEventListener('click', function (event) {
       event.preventDefault();
 
       if (this === event.target) {
         /* click was on label */
         slider.shadowRoot.querySelector('input').focus();
-        
       } else {
         /* click was on input */
         event.stopPropagation();
         return false;
       }
     });
-
   } // Connected callback
 }
 
-export default iamSlider;
+export default iamSlider;

package/assets/ts/components/table/README.md

@@ -24,17 +24,17 @@ import('../node_modules/@iamproperty/components/assets/js/components/table/table
 
 **Properties**
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-show | int | 15 | Update how many rows can be shown per page |
-| data-filterby | string (form ID) | | Give an optional form ID to connect a form to the table and make it act like a filtering system |
-| data-no-scroll | flag | - | Stops the page from scrolling up to the top of the table |
-| data-expandable | flag | - | Adds expandable buttons to rows with will allow for larger paragraphs to be shown correctly |
+| Option          | Type             | Default Value | Description                                                                                     |
+| --------------- | ---------------- | ------------- | ----------------------------------------------------------------------------------------------- |
+| data-show       | int              | 15            | Update how many rows can be shown per page                                                      |
+| data-filterby   | string (form ID) |               | Give an optional form ID to connect a form to the table and make it act like a filtering system |
+| data-no-scroll  | flag             | -             | Stops the page from scrolling up to the top of the table                                        |
+| data-expandable | flag             | -             | Adds expandable buttons to rows with will allow for larger paragraphs to be shown correctly     |
 
-*Pagination properties can also be added to the table component so that they can be passed down to the child pagination element.*
+_Pagination properties can also be added to the table component so that they can be passed down to the child pagination element._
 
 **Class modifiers**
 
 - Adding a class of **.table--cta** to the table component will fix the last column of the table in place (While on tablet or desktop).
 - Adding a class of **.table--fullwidth** to the table component will prevent it from becoming a stacked view on mobile.
-- Adding a class of **.table--mh-small**,**.table--mh-medium** or **.table--mh-large** to the table component will give the table container a max height and the ability to scroll.
+- Adding a class of **.table--mh-small**,**.table--mh-medium** or **.table--mh-large** to the table component will give the table container a max height and the ability to scroll.

package/assets/ts/components/table/table.component.ts

@@ -1,15 +1,18 @@
 // @ts-nocheck
-import * as tableModule from "../../modules/table";
+import * as tableModule from '../../modules/table';
 class iamTable extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    this.attachShadow({ mode: 'open'});
-    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
-    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    this.attachShadow({ mode: 'open' });
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+    const coreCSS = document.body.hasAttribute('data-core-css')
+      ? document.body.getAttribute('data-core-css')
+      : `${assetLocation}/css/core.min.css`;
     const loadCSS = `@import "${assetLocation}/css/components/table.css";`;
     const loadExtraCSS = `@import "${assetLocation}/css/components/table.global.css";`;
-    
+
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
@@ -34,50 +37,48 @@ class iamTable extends HTMLElement {
       <slot></slot>
     </div>
     </div>
-    <iam-pagination part="pagination" class="pagination--table" ${this.hasAttribute('data-page')?`data-page="${this.getAttribute('data-page')}"`:''} ></iam-pagination>
+    <iam-pagination part="pagination" class="pagination--table" ${this.hasAttribute('data-page') ? `data-page="${this.getAttribute('data-page')}"` : ''} ></iam-pagination>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
     // insert extra CSS
-    if(!document.getElementById('tableExtras')){
-      document.head.insertAdjacentHTML('beforeend',`<style id="tableExtras">${loadExtraCSS}</style>`);
+    if (!document.getElementById('tableExtras')) {
+      document.head.insertAdjacentHTML('beforeend', `<style id="tableExtras">${loadExtraCSS}</style>`);
     }
   }
 
-	connectedCallback() {
-
-    const params = new URLSearchParams(window.location.search)
+  connectedCallback() {
+    const params = new URLSearchParams(window.location.search);
 
     // Set default attributes
-    if(!this.hasAttribute('data-total')){
+    if (!this.hasAttribute('data-total')) {
       this.setAttribute('data-total', this.querySelectorAll('table tbody tr').length);
     }
 
-    if(!this.hasAttribute('data-page')){
-      this.setAttribute('data-page', (params.has('page') ? params.get('page') : 1));
+    if (!this.hasAttribute('data-page')) {
+      this.setAttribute('data-page', params.has('page') ? params.get('page') : 1);
     }
 
-    if(!this.hasAttribute('data-show')){
-      this.setAttribute('data-show', (params.has('show') ? params.get('show') : 15));
+    if (!this.hasAttribute('data-show')) {
+      this.setAttribute('data-show', params.has('show') ? params.get('show') : 15);
     }
-      
-    if(!this.hasAttribute('data-increment')){
+
+    if (!this.hasAttribute('data-increment')) {
       this.setAttribute('data-increment', this.getAttribute('data-show'));
     }
-      
 
     // Update table__wrapper class
     let classList = this.classList.toString();
 
-    classList = classList.replace('table--cta','');
-    classList = classList.replace('table--loading','');
+    classList = classList.replace('table--cta', '');
+    classList = classList.replace('table--loading', '');
     //classList = classList.replace('mh-md','');
     this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
 
     // set actionbar class if needed
-    if(this.querySelector('.actionbar__sticky')){
+    if (this.querySelector('.actionbar__sticky')) {
       this.shadowRoot.querySelector('.table__wrapper').classList.add('has-actionbar');
-    } 
+    }
 
     this.table = this.querySelector('table');
     this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
@@ -88,51 +89,53 @@ class iamTable extends HTMLElement {
     this.pagination.setAttribute('data-show', this.getAttribute('data-show'));
     this.pagination.setAttribute('data-increment', this.getAttribute('data-show'));
 
-    if(this.hasAttribute('data-page-jump')){
+    if (this.hasAttribute('data-page-jump')) {
       this.pagination.setAttribute('data-page-jump', 'true');
     }
-    if(this.hasAttribute('data-per-page')){
+    if (this.hasAttribute('data-per-page')) {
       this.pagination.setAttribute('data-per-page', 'true');
     }
-    if(this.hasAttribute('data-item-count')){
+    if (this.hasAttribute('data-item-count')) {
       this.pagination.setAttribute('data-item-count', 'true');
     }
-    if(this.hasAttribute('data-loading')){
+    if (this.hasAttribute('data-loading')) {
       this.pagination.setAttribute('data-loading', 'true');
     }
-    if(this.classList.contains('table--fullwidth')){
+    if (this.classList.contains('table--fullwidth')) {
       this.pagination.setAttribute('data-minimal', 'true');
     }
 
     // Remove table CTA
     const isCTA = this.classList.contains('table--cta');
 
-    if(!isCTA)
-      this.shadowRoot.querySelector('.table--cta').classList.remove('table--cta');
+    if (!isCTA) this.shadowRoot.querySelector('.table--cta').classList.remove('table--cta');
 
     // Set events on the filter table
     this.form = document.createElement('form');
-    if(this.hasAttribute('data-filterby')){
-
+    if (this.hasAttribute('data-filterby')) {
       this.form = document.querySelector(`#${this.getAttribute('data-filterby')}`);
-    }
-    else {
-      
+    } else {
       this.table.parentNode.insertBefore(this.form, this.table.nextSibling);
     }
 
     // Set ajax class
-    if(this.form.hasAttribute('data-ajax')){
+    if (this.form.hasAttribute('data-ajax')) {
       this.table.classList.add('table--ajax');
     }
     // Create a data list if a search input is present
     tableModule.createSearchDataList(this.table, this.form);
 
-    if(!this.form.querySelector('[data-pagination]')){
-      this.form.insertAdjacentHTML('beforeend',`<input name="page" type="hidden" value="${this.getAttribute('data-page')}" data-pagination="true" />`);
+    if (!this.form.querySelector('[data-pagination]')) {
+      this.form.insertAdjacentHTML(
+        'beforeend',
+        `<input name="page" type="hidden" value="${this.getAttribute('data-page')}" data-pagination="true" />`
+      );
     }
-    if(!this.form.querySelector('[data-show]')){
-      this.form.insertAdjacentHTML('beforeend',`<input name="show" type="hidden" value="${this.getAttribute('data-show')}" data-show="true" />`);
+    if (!this.form.querySelector('[data-show]')) {
+      this.form.insertAdjacentHTML(
+        'beforeend',
+        `<input name="show" type="hidden" value="${this.getAttribute('data-show')}" data-show="true" />`
+      );
     }
 
     // Event listeners
@@ -141,87 +144,64 @@ class iamTable extends HTMLElement {
     tableModule.addPaginationEventListeners(this.table, this.form, this.pagination, this);
     tableModule.addExportEventListeners(this.shadowRoot.querySelector('[data-export]'), this.table);
 
-    if(this.form.getAttribute('data-ajax')){
+    if (this.form.getAttribute('data-ajax')) {
       tableModule.loadAjaxTable(this.table, this.form, this.pagination, this);
-    }
-    else {
-
-
-      function uniqueID(index = 1){
-
-        let ID = Math.floor(Math.random() * Date.now() * (index+1));
+    } else {
+      function uniqueID(index = 1) {
+        const ID = Math.floor(Math.random() * Date.now() * (index + 1));
 
         return ID;
       }
-      
 
       // Add in the checkboxes
 
-      if(this.querySelector('iam-actionbar[data-selectall]') || document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`)){
-        
-        const actionbar = this.querySelector('iam-actionbar[data-selectall]') ? this.querySelector('iam-actionbar[data-selectall]') : document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`);
+      if (
+        this.querySelector('iam-actionbar[data-selectall]') ||
+        document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`)
+      ) {
+        const actionbar = this.querySelector('iam-actionbar[data-selectall]')
+          ? this.querySelector('iam-actionbar[data-selectall]')
+          : document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`);
 
-        Array.from(this.table.querySelectorAll('thead tr')).forEach((row,index) => {
-              
-          row.insertAdjacentHTML(
-            'afterbegin',
-            `<th class="th--fixed"></th>`
-          );
+        Array.from(this.table.querySelectorAll('thead tr')).forEach((row, index) => {
+          row.insertAdjacentHTML('afterbegin', `<th class="th--fixed"></th>`);
         });
 
-        Array.from(this.table.querySelectorAll('tbody tr')).forEach((row,index) => {
-          
-
-          let rowID = `row${uniqueID(index)}`;
+        Array.from(this.table.querySelectorAll('tbody tr')).forEach((row, index) => {
+          const rowID = `row${uniqueID(index)}`;
           row.insertAdjacentHTML(
             'afterbegin',
             `<td class="td--fixed selectrow selected"><input type="checkbox" name="row" id="${rowID}" ${row.hasAttribute('data-selected') ? `checked="true"` : ''}/><label for="${rowID}"><span class="visually-hidden">Select row</span></label></td>`
           );
         });
 
-        this.table.addEventListener('change',(event) => {
-
-          if (event && event.target instanceof HTMLElement && event.target.closest('.selectrow input')){
-
-          
-            let count = this.table.querySelectorAll('.selectrow input[type="checkbox"]').length;
-            let countChecked = this.table.querySelectorAll('.selectrow input[type="checkbox"]:checked').length;
-
-            actionbar.setAttribute('data-selected', count == countChecked ? "all" : countChecked);
-          };
+        this.table.addEventListener('change', (event) => {
+          if (event && event.target instanceof HTMLElement && event.target.closest('.selectrow input')) {
+            const count = this.table.querySelectorAll('.selectrow input[type="checkbox"]').length;
+            const countChecked = this.table.querySelectorAll('.selectrow input[type="checkbox"]:checked').length;
 
+            actionbar.setAttribute('data-selected', count == countChecked ? 'all' : countChecked);
+          }
         });
 
         actionbar.addEventListener('selected', (event) => {
-
-          if(event.detail.selected == '0'){
-
-            Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input,index) => {
-              
+          if (event.detail.selected == '0') {
+            Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input, index) => {
               input.checked = false;
             });
-
-          }
-          else if(event.detail.selected == 'all'){
-            
-            Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input,index) => {
-              
+          } else if (event.detail.selected == 'all') {
+            Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input, index) => {
               input.checked = true;
             });
-
           }
-          
         });
-
       }
 
-      // Make the dialog menus columns fixed 
+      // Make the dialog menus columns fixed
       let colIndex = -1;
-      Array.from(this.table.querySelectorAll('tbody tr')).forEach((row,index) => {
-              
-        if(row.querySelector(':scope > td > .dialog__wrapper')){
-
-          let columnn = row.querySelector(':scope > td > .dialog__wrapper').parentNode;
+      Array.from(this.table.querySelectorAll('tbody tr')).forEach((row, index) => {
+        if (row.querySelector(':scope > td > .dialog__wrapper')) {
+          const columnn = row.querySelector(':scope > td > .dialog__wrapper').parentNode;
 
           columnn.classList.add('td--fixed');
 
@@ -229,84 +209,67 @@ class iamTable extends HTMLElement {
         }
       });
 
-      if(colIndex != -1){
-
-
-        this.table.querySelector(`thead tr th:nth-child(${colIndex+1})`).classList.add('th--fixed');
+      if (colIndex != -1) {
+        this.table.querySelector(`thead tr th:nth-child(${colIndex + 1})`).classList.add('th--fixed');
 
-        Array.from(this.table.querySelectorAll(`tbody tr td:nth-child(${colIndex+1})`)).forEach((col,index) => {
-            
+        Array.from(this.table.querySelectorAll(`tbody tr td:nth-child(${colIndex + 1})`)).forEach((col, index) => {
           col.classList.add('td--fixed');
         });
       }
 
-
-
       tableModule.makeTableFunctional(this.table, this.form, this.pagination, this);
-      
-      if(!this.hasAttribute('data-no-submit'))
-        tableModule.filterTable(this.table, this.form,this);
+
+      if (!this.hasAttribute('data-no-submit')) tableModule.filterTable(this.table, this.form, this);
 
       tableModule.populateDataQueries(this.table, this.form);
     }
 
-    this.shadowRoot.querySelector('.table__wrapper').addEventListener("scroll", (event) => {
-
-      if(this.table.querySelector('dialog[open]')){
-        
+    this.shadowRoot.querySelector('.table__wrapper').addEventListener('scroll', (event) => {
+      if (this.table.querySelector('dialog[open]')) {
         this.table.querySelector('dialog[open]').close();
         this.table.querySelector('.dialog__wrapper > button.active').classList.remove('active');
       }
-
     });
 
     // Push up the pagination events
     this.pagination.addEventListener('update-show', (event) => {
+      const show = event.detail.show;
 
-      let show = event.detail.show;
-
-      const updateEvent = new CustomEvent("update-show", { detail: { show: show } });
+      const updateEvent = new CustomEvent('update-show', { detail: { show: show } });
       this.dispatchEvent(updateEvent);
     });
 
     this.pagination.addEventListener('update-page', (event) => {
+      const page = event.detail.page;
 
-      let page = event.detail.page;
-
-      const updateEvent = new CustomEvent("update-page", { detail: { page: page } });
+      const updateEvent = new CustomEvent('update-page', { detail: { page: page } });
       this.dispatchEvent(updateEvent);
     });
   }
 
-
   static get observedAttributes() {
-    return ["data-total","data-page","data-show"];
+    return ['data-total', 'data-page', 'data-show'];
   }
-  
+
   attributeChangedCallback(attrName, oldVal, newVal) {
-    
-    
     this.pagination = this.shadowRoot.querySelector('iam-pagination');
 
     switch (attrName) {
-      case "data-total": {
-        
-        if(oldVal != newVal){
-          this.pagination.setAttribute('data-total',newVal);
+      case 'data-total': {
+        if (oldVal != newVal) {
+          this.pagination.setAttribute('data-total', newVal);
         }
         break;
       }
-      case "data-show": {
-        
-        if(oldVal != newVal){
-          this.pagination.setAttribute('data-show',newVal);
+      case 'data-show': {
+        if (oldVal != newVal) {
+          this.pagination.setAttribute('data-show', newVal);
         }
         break;
       }
-      case "data-page": {
-
-        if(oldVal != newVal){
-          this.pagination.setAttribute('data-page',newVal);
+      case 'data-page': {
+        if (oldVal != newVal) {
+          this.pagination.setAttribute('data-page', newVal);
         }
         break;
       }
@@ -314,4 +277,4 @@ class iamTable extends HTMLElement {
   }
 }
 
-export default iamTable;
+export default iamTable;