@iamproperty/components 7.4.0 → 7.5.0

package/assets/ts/components/card/card.component.ts

@@ -1,5 +1,6 @@
 import { trackComponent, trackComponentRegistered } from '../_global';
 import { cardHTML, setupCard } from '../../modules/card.module';
+import iamMenu from '../menu/menu.component';
 
 trackComponentRegistered('iam-card');
 
@@ -36,15 +37,7 @@ class iamCard extends HTMLElement {
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
 
-    if (!window.customElements.get(`iam-menu`)) {
-      import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)
-        .then((module) => {
-          window.customElements.define(`iam-menu`, module.default);
-        })
-        .catch((err) => {
-          console.log(err.message);
-        });
-    }
+    if (!window.customElements.get(`iam-menu`)) window.customElements.define(`iam-menu`, iamMenu);
 
     setupCard(cardComponent);
 

package/assets/ts/components/carousel/carousel.component.ts

@@ -15,34 +15,32 @@ class iamCarousel extends HTMLElement {
     const loadCSS = `@import "${assetLocation}/css/components/carousel.component.css";`;
 
     const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    ${loadCSS}
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    </style>
-    <div class="carousel" part="carousel">
-      <div class="carousel__wrapper">
-        <div class="carousel__inner">
-          <div class="carousel__content" part="content">
-            <slot></slot>
+    template.innerHTML = /* HTML */ `
+      <style>
+        ${loadCSS}
+        ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+      </style>
+      <div class="carousel" part="carousel">
+        <div class="carousel__wrapper">
+          <div class="carousel__inner">
+            <div class="carousel__content" part="content">
+              <slot></slot>
+            </div>
           </div>
         </div>
- 
-      </div>
         <div class="carousel__btns" part="btns">
-          <button class="btn btn-secondary btn-compact fa-plus-large btn-prev" data-go="0" disabled  part="prev">Prev</button>
+          <button class="btn btn-secondary btn-compact fa-plus-large btn-prev" data-go="0" disabled part="prev">
+            Prev
+          </button>
           <button class="btn btn-secondary btn-compact fa-plus-large btn-next" data-go="2" part="next">Next</button>
         </div>
 
-        <div class="carousel__controls" part="controls">
-          
-        </div>
+        <div class="carousel__controls" part="controls"></div>
 
         <div class="carousel__progress" part="progress">
-          <input type="range" min="0" max="100" value="1" step="1">
+          <input type="range" min="0" max="100" value="1" step="1" />
         </div>
-
-    </div>
+      </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }

package/assets/ts/components/darkmode/darkmode.component.ts

@@ -0,0 +1,85 @@
+// Data layer Web component created
+declare global {
+  interface Window {
+    dataLayer: Array<object>;
+  }
+}
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  event: 'customElementRegistered',
+  element: 'Dark mode button',
+});
+
+class iamDarkMode 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/darkmode.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>${loadCSS}
+    </style>
+      <slot></slot>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    const label = this.querySelector('label');
+
+    const storedTheme = localStorage.getItem('user-theme');
+
+    // Work from local storage first then look at the media preferences
+    label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
+    if (storedTheme == 'dark-theme') {
+      label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
+      label?.classList.add('dark-theme');
+    } else if (storedTheme == 'light-theme') {
+      label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
+      label?.classList.remove('dark-theme');
+    }
+
+    const hasDarkPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (hasDarkPreference) {
+      label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
+      label?.classList.remove('dark-theme');
+    }
+
+    this.addEventListener('click', (event) => {
+      console.log(label?.querySelector('input:checked'));
+
+      if (label?.querySelector('input:checked')) {
+        label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
+        localStorage.setItem('user-theme', 'dark-theme');
+        document.documentElement.className = 'dark-theme';
+        label?.classList.add('dark-theme');
+      } else {
+        label?.innerHTML = `<input type="checkbox" name="dark-mode" /> Light mode`;
+        localStorage.setItem('user-theme', 'light-theme');
+        document.documentElement.className = 'light-theme';
+        label?.classList.remove('dark-theme');
+      }
+    });
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
+      if (matches) {
+        label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
+        label?.classList.add('dark-theme');
+      }
+    });
+
+    window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', ({ matches }) => {
+      if (matches) {
+        label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
+        label?.classList.remove('dark-theme');
+      }
+    });
+  }
+}
+
+export default iamDarkMode;

package/assets/ts/components/menu/menu.component.ts

@@ -6,13 +6,13 @@ class iamMenu extends HTMLElement {
     const assetLocation = document.body.hasAttribute('data-assets-location')
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
-    const loadCSS = `@import "${assetLocation}/css/components/menu.component.css";`;
+    const menuCSS = `@import "${assetLocation}/css/components/menu.component.css";`;
 
     const template = document.createElement('template');
 
     template.innerHTML = `
     <style>
-    ${loadCSS}
+    ${menuCSS}
     </style>
     <div class="menu--inner" part="inner">
       <slot></slot>

package/assets/ts/components/milestone/milestone.component.ts

@@ -1,45 +1,43 @@
-import { trackComponent, trackComponentRegistered } from '../_global';
-import milestone from '../../modules/milestone';
-
-trackComponentRegistered('iam-milestone');
-
-class iamMilestone extends HTMLElement {
-  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`;
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    @import "${coreCSS}";
-    </style>
-      <div class="milestone-wrap" part="milestone-wrap">
-        <slot name="milestone-intro" class="milestone-intro" part="milestone-intro"></slot>
-        <slot>
-          <div class="task-wrap" part="milestone-task-wrap"></div>
-        </slot>
-      </div>
-    `;
-    this.shadowRoot?.appendChild(template.content.cloneNode(true));
-  }
-
-  connectedCallback(): void {
-    const milestoneComponent = this;
-
-    trackComponent(milestoneComponent, 'iam-milestone', [
-      'milestone-item-closed', 
-      'milestone-item-opened',
-    ]);
-
-    milestone(this);
-  }
-}
-
-export default iamMilestone;
+import { trackComponent, trackComponentRegistered } from '../_global';
+import milestone from '../../modules/milestone';
+
+trackComponentRegistered('iam-milestone');
+
+class iamMilestone extends HTMLElement {
+  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`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    </style>
+      <div class="milestone-wrap" part="milestone-wrap">
+        <slot name="milestone-intro" class="milestone-intro" part="milestone-intro"></slot>
+        <slot>
+          <div class="task-wrap" part="milestone-task-wrap"></div>
+        </slot>
+      </div>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const milestoneComponent = this;
+
+    trackComponent(milestoneComponent, 'iam-milestone', ['milestone-item-closed', 'milestone-item-opened']);
+
+    milestone(this);
+  }
+}
+
+export default iamMilestone;

package/assets/ts/components/milestone-group/milestone-group.component.ts

@@ -1,41 +1,39 @@
-import { trackComponent, trackComponentRegistered } from '../_global';
-import milestoneGroup from '../../modules/milestone-group';
-
-trackComponentRegistered('iam-milestone-group');
-
-class iamMilestoneGroup extends HTMLElement {
-  constructor() {
-    super();
-    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 template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    @import "${coreCSS}";
-    </style>
-      <div class="milestone-group" part="milestone-group">
-        <slot>
-        </slot>
-      </div>
-    `;
-    this.shadowRoot?.appendChild(template.content.cloneNode(true));
-  }
-
-  connectedCallback(): void {
-    const milestoneGroupComponent = this;
-
-    trackComponent(milestoneGroupComponent, 'iam-milestone-group', [
-      'hide-future-items', 
-      'show-future-items'
-    ]);
-
-    milestoneGroup(this);
-  }
-}
-
-export default iamMilestoneGroup;
+import { trackComponent, trackComponentRegistered } from '../_global';
+import milestoneGroup from '../../modules/milestone-group';
+
+trackComponentRegistered('iam-milestone-group');
+
+class iamMilestoneGroup extends HTMLElement {
+  constructor() {
+    super();
+    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 template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    </style>
+      <div class="milestone-group" part="milestone-group">
+        <slot>
+        </slot>
+      </div>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const milestoneGroupComponent = this;
+
+    trackComponent(milestoneGroupComponent, 'iam-milestone-group', ['hide-future-items', 'show-future-items']);
+
+    milestoneGroup(this);
+  }
+}
+
+export default iamMilestoneGroup;

package/assets/ts/components/multiselect/multiselect.component.ts

@@ -148,29 +148,24 @@ class iamMultiselect extends HTMLElement {
     });
 
     search.addEventListener('blur', (event) => {
-
       setTimeout(function () {
         const activeElement = document.activeElement;
-        
-        if(activeElement.getAttribute('type') != 'checkbox'){
-
-          if(multiselect.querySelector(`input[type="checkbox"][value="${search.value}" i]`)){
 
+        if (activeElement.getAttribute('type') != 'checkbox') {
+          if (multiselect.querySelector(`input[type="checkbox"][value="${search.value}" i]`)) {
             multiselect.querySelector(`input[type="checkbox"][value="${search.value}" i]`).checked = true;
             setItem(multiselect.querySelector(`input[type="checkbox"][value="${search.value}" i]`));
           }
-          search.value = "";
+          search.value = '';
 
           Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]`)).forEach((checkbox) => {
             setItem(checkbox);
           });
         }
-        
       }, 200);
 
       clearTimeout(hoverTimeout);
       hoverTimeout = setTimeout(function () {
-
         multiselect.classList.remove('hover');
       }, 1000);
     });
@@ -182,7 +177,7 @@ class iamMultiselect extends HTMLElement {
 
         setItem(checkbox);
 
-        search.value = "";
+        search.value = '';
         search.focus();
         clearTimeout(hoverTimeout);
         multiselect.classList.add('hover');
@@ -222,10 +217,8 @@ class iamMultiselect extends HTMLElement {
 
             if (prevCheckbox) prevCheckbox.focus();
             else search.focus();
-          }
-          else if (activeElement == multiselect){
-
-            const options = Array.from(multiselect.querySelectorAll('label[slot="checked"]')).sort(function(a, b) {
+          } else if (activeElement == multiselect) {
+            const options = Array.from(multiselect.querySelectorAll('label[slot="checked"]')).sort(function (a, b) {
               return +a.dataset.order - +b.dataset.order;
             });
 
@@ -294,7 +287,6 @@ class iamMultiselect extends HTMLElement {
           break;
         case 'Backspace':
           if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
-
             activeElement.checked = false;
             setItem(activeElement);
             search.focus();
@@ -315,7 +307,6 @@ class iamMultiselect extends HTMLElement {
       return lastTag;
     }
 
-
     search.addEventListener('keydown', function (event) {
       switch (
         event.key // change to event.key to key to use the above variable

package/assets/ts/components/nav/nav.component.ts

@@ -348,30 +348,23 @@ class iamNav extends HTMLElement {
       });
     }
 
-    if(this.classList.contains('nav--sticky')){
-      
-      console.log('hey');
-
+    if (this.classList.contains('nav--sticky')) {
       let oldScrollY = window.scrollY;
-      window.onscroll = function(e) {
-        if(oldScrollY < window.scrollY){
-          document.body.setAttribute('data-direction', "down");
+      window.onscroll = function (e): void {
+        if (oldScrollY < window.scrollY) {
+          document.body.setAttribute('data-direction', 'down');
         } else {
-          document.body.setAttribute('data-direction', "up");
+          document.body.setAttribute('data-direction', 'up');
         }
 
-        if(window.scrollY > 100){
+        if (window.scrollY > 100) {
           document.body.classList.add('past100');
-        }
-        else {
-
+        } else {
           document.body.classList.remove('past100');
         }
         oldScrollY = window.scrollY;
-      }
-
+      };
     }
-
   }
 }
 

package/assets/ts/components/notification/notification.component.ts

@@ -3,7 +3,6 @@ import { trackComponent, trackComponentRegistered } from '../_global';
 
 trackComponentRegistered('iam-notification');
 
-
 class iamNotification extends HTMLElement {
   constructor() {
     super();
@@ -110,7 +109,6 @@ class iamNotification extends HTMLElement {
           });
 
           this.dispatchEvent(customEvent);
-
         },
         false
       );
@@ -118,9 +116,7 @@ class iamNotification extends HTMLElement {
 
     setupNotification(this);
 
-    trackComponent(this, 'iam-notification', [
-      'dismiss'
-    ]);
+    trackComponent(this, 'iam-notification', ['dismiss']);
   }
 }
 

package/assets/ts/components/split-button/split-button.component.ts

@@ -35,9 +35,7 @@ class iamSplitButton extends HTMLElement {
         </button>
 
         <iam-menu id="actions" style="position-anchor: --anchor-el;" popover>
-          <slot name="menu-item">
-
-          </slot>
+          <slot name="menu-item"></slot>
         </iam-menu>
 
       </div>

package/assets/ts/components/word-count/word-count.component.ts

@@ -0,0 +1,91 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-word-count');
+
+class iamCard 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/word-count.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+
+    ${loadCSS}
+    </style>
+    <slot></slot>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    const input = this.querySelector('input,textarea,select');
+    let span = this.querySelector('[data-count]');
+
+    if (!span) {
+      span = document.createElement('span');
+      this.append(span);
+    }
+
+    console.log(input.value.split(' ').length);
+
+    if (this.hasAttribute('data-character')) span.setAttribute('data-count', input.value ? input.value.length : '0');
+    else span.setAttribute('data-count', input.value ? input.value.split(' ').length : '0');
+
+    const maxlength = this.getAttribute('data-max');
+    this.style.setProperty('--maxlength', maxlength);
+    span.setAttribute('data-max', this.getAttribute('data-max'));
+
+    input.addEventListener('input', (event) => {
+      if (this.hasAttribute('data-max') && span && this.hasAttribute('data-character')) {
+        input?.setAttribute('maxlength', this.getAttribute('data-max'));
+        span.setAttribute('data-count', input?.value.length);
+      } else if (this.hasAttribute('data-max') && span) {
+        if (input?.value.split(' ').length >= this.getAttribute('data-max')) {
+          event?.preventDefault();
+          input?.setAttribute('maxlength', input?.value.length);
+        } else {
+          input?.removeAttribute('maxlength');
+        }
+
+        span.setAttribute('data-count', input?.value.split(' ').length);
+        span.setAttribute('data-max', this.getAttribute('data-max'));
+      }
+    });
+
+    /*
+
+    // maxlength counter init
+    Array.from(document.querySelectorAll('input[maxlength],textarea[maxlength]')).forEach((input) => {
+      const wrapper = input.parentElement;
+      setMaxlengthVars(input, wrapper);
+    });
+
+
+
+const wrapper = input.parentElement;
+  const maxlength = input.getAttribute('maxlength');
+
+  wrapper.style.setProperty('--maxlength', maxlength);
+
+  let span = input.nextElementSibling;
+
+  if (!span || (span && span.classList.contains('invalid-feedback'))) {
+    span = document.createElement('span');
+    wrapper.insertBefore(span, input.nextSibling);
+  }
+ v
+  span.setAttribute('data-count', input.value.length);
+
+
+*/
+  }
+}
+
+export default iamCard;

package/assets/ts/components.ts

@@ -26,6 +26,7 @@ const components = [
   'marketing',
   'barchart',
   'splitbutton',
+  'word-count',
 ];
 
 const prefix = 'iam';