@iamproperty/components 7.7.1--beta6 → 7.7.1--beta7

package/assets/ts/components/rankings/rankings.component.ts

@@ -1,79 +1,79 @@
-import { trackComponent, trackComponentRegistered } from '../_global';
-import iamRank from '../rank/rank.component';
-
-trackComponentRegistered('iam-rankings');
-class iamRankings extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-
-    const assetLocation = document.body.hasAttribute('data-assets-location')
-      ? document.body.getAttribute('data-assets-location')
-      : '/assets';
-
-    const loadCSS = `@import "${assetLocation}/css/components/rankings.component.css";`;
-    const loadExtraCSS = `@import "${assetLocation}/css/components/rankings.global.css";`;
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    ${loadCSS}
-    </style>
-    <div class="podium">
-      <div>
-        <iam-rank class="rank--trophy first-position">1st</iam-rank>
-      </div>
-      <div>
-        <iam-rank class="second-position">2nd</iam-rank>
-      </div>
-      <div>
-        <iam-rank class="third-position">3rd</iam-rank>
-      </div>
-    </div>
-    <div class="mh-md" part="leaderboard"><slot></slot></div>
-    `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-    // insert extra CSS
-    if (!document.getElementById('rankingsGlobal'))
-      document.head.insertAdjacentHTML('beforeend', `<style id="rankingsGlobal">${loadExtraCSS}</style>`);
-  }
-
-  connectedCallback(): void {
-    const firstText = this.shadowRoot?.querySelector('.first-position');
-    const secondText = this.shadowRoot?.querySelector('.second-position');
-    const thirdText = this.shadowRoot?.querySelector('.third-position');
-
-    firstText?.setAttribute(
-      'data-title',
-      this.querySelector('tbody tr:nth-child(1) :is(td,th):nth-child(1)')?.textContent
-    );
-    secondText?.setAttribute(
-      'data-title',
-      this.querySelector('tbody tr:nth-child(2) :is(td,th):nth-child(1)')?.textContent
-    );
-    thirdText?.setAttribute(
-      'data-title',
-      this.querySelector('tbody tr:nth-child(3) :is(td,th):nth-child(1)')?.textContent
-    );
-
-    const max = this.hasAttribute('data-max') ? this.getAttribute('data-max') : 100;
-    this.querySelectorAll('tbody tr').forEach((element) => {
-      const value = element.querySelector('td:last-child')?.textContent?.trim();
-
-      if (!element.querySelector(':first-child progress'))
-        element.querySelector(':first-child')?.innerHTML += `<progress max="${max}" value="${value}"></progress>`;
-    });
-
-    if (!this.classList.contains('hide-gold')) {
-      const firstRow = this.querySelector('tbody tr th');
-
-      firstRow?.insertAdjacentHTML('afterbegin', `<iam-rank class="rank--medal first-position">1st</iam-rank>`);
-    }
-
-    if (!window.customElements.get(`iam-rank`)) window.customElements.define(`iam-rank`, iamRank);
-  }
-}
-
-
-export default iamRankings;
+import { trackComponent, trackComponentRegistered } from '../_global';
+import iamRank from '../rank/rank.component';
+
+trackComponentRegistered('iam-rankings');
+class iamRankings extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    const loadCSS = `@import "${assetLocation}/css/components/rankings.component.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/rankings.global.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <div class="podium">
+      <div>
+        <iam-rank class="rank--trophy first-position">1st</iam-rank>
+      </div>
+      <div>
+        <iam-rank class="second-position">2nd</iam-rank>
+      </div>
+      <div>
+        <iam-rank class="third-position">3rd</iam-rank>
+      </div>
+    </div>
+    <div class="mh-md" part="leaderboard"><slot></slot></div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // insert extra CSS
+    if (!document.getElementById('rankingsGlobal'))
+      document.head.insertAdjacentHTML('beforeend', `<style id="rankingsGlobal">${loadExtraCSS}</style>`);
+  }
+
+  connectedCallback(): void {
+    const firstText = this.shadowRoot?.querySelector('.first-position');
+    const secondText = this.shadowRoot?.querySelector('.second-position');
+    const thirdText = this.shadowRoot?.querySelector('.third-position');
+
+    firstText?.setAttribute(
+      'data-title',
+      this.querySelector('tbody tr:nth-child(1) :is(td,th):nth-child(1)')?.textContent
+    );
+    secondText?.setAttribute(
+      'data-title',
+      this.querySelector('tbody tr:nth-child(2) :is(td,th):nth-child(1)')?.textContent
+    );
+    thirdText?.setAttribute(
+      'data-title',
+      this.querySelector('tbody tr:nth-child(3) :is(td,th):nth-child(1)')?.textContent
+    );
+
+    const max = this.hasAttribute('data-max') ? this.getAttribute('data-max') : 100;
+    this.querySelectorAll('tbody tr').forEach((element) => {
+      const value = element.querySelector('td:last-child')?.textContent?.trim();
+
+      if (!element.querySelector(':first-child progress'))
+        element.querySelector(':first-child')?.innerHTML += `<progress max="${max}" value="${value}"></progress>`;
+    });
+
+    if (!this.classList.contains('hide-gold')) {
+      const firstRow = this.querySelector('tbody tr th');
+
+      firstRow?.insertAdjacentHTML('afterbegin', `<iam-rank class="rank--medal first-position">1st</iam-rank>`);
+    }
+
+    if (!window.customElements.get(`iam-rank`)) window.customElements.define(`iam-rank`, iamRank);
+  }
+}
+
+
+export default iamRankings;

package/assets/ts/components/rating/rating.component.ts

@@ -1,86 +1,86 @@
-import { trackComponent, trackComponentRegistered } from '../_global';
-
-trackComponentRegistered('iam-rating');
-
-class iamRating extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-
-    const assetLocation = document.body.hasAttribute('data-assets-location')
-      ? document.body.getAttribute('data-assets-location')
-      : '/assets';
-    const loadCSS = `@import "${assetLocation}/css/components/rating.component.css";`;
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-
-    ${loadCSS}
-    </style>
-    <div class="wrapper">
-      <input name="rating-component" type="range" />
-    </div>
-    <slot></slot>
-    `;
-
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  connectedCallback(): void {
-    const wrapper = this.shadowRoot?.querySelector('.wrapper');
-    const rating = this.shadowRoot?.querySelector('input');
-    const input = this.querySelector('input[type="number"],input[type="range"],select');
-
-    if(!input)
-      return false;
-
-    wrapper?.classList.add('show');
-    input?.classList.add('visually-hidden');
-    input?.setAttribute('tabindex',"-1");
-
-    rating?.setAttribute('min', input?.hasAttribute('min') ? input?.getAttribute('min') : '0');
-    rating?.setAttribute('max', input?.hasAttribute('max') ? input?.getAttribute('max') : '5');
-    rating?.setAttribute('step', input?.hasAttribute('step') ? input?.getAttribute('step') : '1');
-
-    if(input?.hasAttribute('disabled')){
-      rating?.setAttribute('disabled', 'disabled');
-    }
-    
-    rating.value = input.value ? input.value : rating?.getAttribute('min');
-
-    rating?.addEventListener('input', () => {
-
-      input.value = rating.value;
-
-      const changeEvent = new Event('change');
-      input.dispatchEvent(changeEvent);
-      const inputEvent = new Event('input');
-      input.dispatchEvent(inputEvent);
-    });
-
-    input?.addEventListener('input', () => {
-
-      rating.value = input.value;
-    });
-
-    /* Watch for any changes to the inputs attributes */
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if(mutation.type == "attributes"){
-          rating?.setAttribute(mutation.attributeName, input?.getAttribute(mutation.attributeName));
-        }
-      });
-    });
-
-    observer.observe(input, {
-      attributes: true,
-      childList: false,
-      subtree: false,
-    });
-
-
-  }
-}
-
-export default iamRating;
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-rating');
+
+class iamRating extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+    const loadCSS = `@import "${assetLocation}/css/components/rating.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+
+    ${loadCSS}
+    </style>
+    <div class="wrapper">
+      <input name="rating-component" type="range" />
+    </div>
+    <slot></slot>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    const wrapper = this.shadowRoot?.querySelector('.wrapper');
+    const rating = this.shadowRoot?.querySelector('input');
+    const input = this.querySelector('input[type="number"],input[type="range"],select');
+
+    if(!input)
+      return false;
+
+    wrapper?.classList.add('show');
+    input?.classList.add('visually-hidden');
+    input?.setAttribute('tabindex',"-1");
+
+    rating?.setAttribute('min', input?.hasAttribute('min') ? input?.getAttribute('min') : '0');
+    rating?.setAttribute('max', input?.hasAttribute('max') ? input?.getAttribute('max') : '5');
+    rating?.setAttribute('step', input?.hasAttribute('step') ? input?.getAttribute('step') : '1');
+
+    if(input?.hasAttribute('disabled')){
+      rating?.setAttribute('disabled', 'disabled');
+    }
+    
+    rating.value = input.value ? input.value : rating?.getAttribute('min');
+
+    rating?.addEventListener('input', () => {
+
+      input.value = rating.value;
+
+      const changeEvent = new Event('change');
+      input.dispatchEvent(changeEvent);
+      const inputEvent = new Event('input');
+      input.dispatchEvent(inputEvent);
+    });
+
+    input?.addEventListener('input', () => {
+
+      rating.value = input.value;
+    });
+
+    /* Watch for any changes to the inputs attributes */
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if(mutation.type == "attributes"){
+          rating?.setAttribute(mutation.attributeName, input?.getAttribute(mutation.attributeName));
+        }
+      });
+    });
+
+    observer.observe(input, {
+      attributes: true,
+      childList: false,
+      subtree: false,
+    });
+
+
+  }
+}
+
+export default iamRating;