@iamproperty/components 7.4.0 → 7.5.1--beta1

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/collapsible-side/collapsible-side.component.ts

@@ -13,17 +13,13 @@ class iamCollapsibleSideMenu extends HTMLElement {
     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/collapsible-side.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style class="styles">
-    @import "${coreCSS}";
     ${loadCSS}
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
       <div class="container" part="container">

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/fileupload/fileupload.component.ts

@@ -15,17 +15,14 @@ class iamFileupload extends HTMLElement {
     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/fileupload.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
     </style>
     <div class="file-upload">
       <span class="file-upload__title" part="title">Upload file</span>

package/assets/ts/components/header/header.component.ts

@@ -13,17 +13,13 @@ class iamHeader extends HTMLElement {
     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/header.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="header-banner">
       <picture>

package/assets/ts/components/inline-edit/inline-edit.component.ts

@@ -13,15 +13,12 @@ class iamInlineEdit extends HTMLElement {
     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/inline-edit.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style class="styles">
-    @import "${coreCSS}";
+    
     ${loadCSS}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
@@ -53,13 +50,16 @@ class iamInlineEdit extends HTMLElement {
     const statusNotSaved = this.shadowRoot.querySelector('#notsaved');
 
     // Save the original value for later
-    let originalValue = input.value;
+    let originalValue = input ? input.value : '';
 
     // cancel
     cancelButton.addEventListener('click', () => {
-      input.value = originalValue;
+      if(input){
+          
+        input.value = originalValue;
+        input.blur();
+      }
 
-      input.blur();
       inlineEdit.blur();
 
       inlineEdit.classList.remove('was-validated');
@@ -86,39 +86,83 @@ class iamInlineEdit extends HTMLElement {
         detail: { name: input.getAttribute('name'), value: input.value },
       });
       inlineEdit.dispatchEvent(saveEvent);
-
-      //inlineEdit.setAttribute('data-saving','true');
-      input.disabled = true;
-
-      input.blur();
       inlineEdit.blur();
-
       statusSaving.classList.remove('d-none');
 
-      if (preview) {
-        console.log(input.value);
+      if(input){
+        input.disabled = true;
+
+        input.blur();
 
-        preview.innerHTML = input.value;
+        if (preview) {
+          preview.innerHTML = input.value;
+        }
       }
     });
 
-    // Save
-    if (input.tagName === 'INPUT') {
-      input.addEventListener('keydown', (event) => {
-        switch (
-          event.key // change to event.key to key to use the above variable
-        ) {
-          case 'Enter':
-            event.stopPropagation();
-            event.preventDefault();
-
-            saveButton.click();
-
-            break;
+    if(input){
+      // Save
+      if (input.tagName === 'INPUT') {
+        input.addEventListener('keydown', (event) => {
+          switch (
+            event.key // change to event.key to key to use the above variable
+          ) {
+            case 'Enter':
+              event.stopPropagation();
+              event.preventDefault();
+
+              saveButton.click();
+
+              break;
+          }
+        });
+      }
+
+      // enter key saves
+      if (input.tagName === 'SELECT') {
+        input.addEventListener('change', () => {
+          originalValue = input.value;
+
+          const saveEvent = new CustomEvent('inline-edit-save', {
+            detail: { name: input.getAttribute('name'), value: input.value },
+          });
+          inlineEdit.dispatchEvent(saveEvent);
+
+          inlineEdit.setAttribute('data-saving', 'true');
+          input.disabled = true;
+
+          input.blur();
+        });
+      }
+
+      if (input.tagName != 'SELECT') {
+        input.addEventListener('focus', () => {
+          input.select();
+        });
+      }
+
+      //blur it should autosave
+      input.addEventListener('blur', () => {
+        if (input.value != originalValue) {
+          if (inlineEdit.hasAttribute('data-autosave')) {
+            originalValue = input.value;
+
+            const saveEvent = new CustomEvent('inline-edit-autosave', {
+              detail: { name: input.getAttribute('name'), value: input.value },
+            });
+            inlineEdit.dispatchEvent(saveEvent);
+
+            statusSaving.classList.remove('d-none');
+
+            if (preview) {
+              preview.innerHTML = input.value;
+            }
+          } else if (!inlineEdit.querySelector('.inline-feedback')) {
+            statusNotSaved.classList.remove('d-none');
+          }
         }
       });
     }
-
     // Saved
     inlineEdit.addEventListener('inline-edit-saved', () => {
       setTimeout(() => {
@@ -142,51 +186,6 @@ class iamInlineEdit extends HTMLElement {
       }, 1000);
     });
 
-    // enter key saves
-    if (input.tagName === 'SELECT') {
-      input.addEventListener('change', () => {
-        originalValue = input.value;
-
-        const saveEvent = new CustomEvent('inline-edit-save', {
-          detail: { name: input.getAttribute('name'), value: input.value },
-        });
-        inlineEdit.dispatchEvent(saveEvent);
-
-        inlineEdit.setAttribute('data-saving', 'true');
-        input.disabled = true;
-
-        input.blur();
-      });
-    }
-
-    if (input.tagName != 'SELECT') {
-      input.addEventListener('focus', () => {
-        input.select();
-      });
-    }
-
-    //blur it should autosave
-    input.addEventListener('blur', () => {
-      if (input.value != originalValue) {
-        if (inlineEdit.hasAttribute('data-autosave')) {
-          originalValue = input.value;
-
-          const saveEvent = new CustomEvent('inline-edit-autosave', {
-            detail: { name: input.getAttribute('name'), value: input.value },
-          });
-          inlineEdit.dispatchEvent(saveEvent);
-
-          statusSaving.classList.remove('d-none');
-
-          if (preview) {
-            preview.innerHTML = input.value;
-          }
-        } else if (!inlineEdit.querySelector('.inline-feedback')) {
-          statusNotSaved.classList.remove('d-none');
-        }
-      }
-    });
-
     // checkboxes
     inlineEdit.addEventListener('change', (event) => {
       if (event && event.target instanceof HTMLElement && event.target.closest('input[type="checkbox"]')) {

package/assets/ts/components/marketing/marketing.component.ts

@@ -13,15 +13,11 @@ class iamMarketing extends HTMLElement {
     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/marketing.component.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
     
     </style>

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;