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

package/assets/ts/components/content/content.component.ts

@@ -1,78 +1,78 @@
-class iamContent 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/content.component.css";`;
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    ${loadCSS}
-
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    </style>
-    <div class="content__container">
-      <slot></slot>
-    </div>
-    `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  connectedCallback(): void {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const component = this;
-    const url = this.getAttribute('data-url');
-
-    const registerComponents = (contentComponent): void => {
-      const components = ['card', 'marketing', 'notification'];
-
-      const assetLocation = document.body.hasAttribute('data-assets-location')
-        ? document.body.getAttribute('data-assets-location')
-        : '/assets';
-
-      // Load components - Each component will load once the first of its type has been loaded
-      components.forEach((component) => {
-        if (component == 'notification') {
-          document.querySelectorAll('[data-notification]').forEach((element) => {
-            element.outerHTML = element.outerHTML
-              .replace(/<div/g, '<iam-notification')
-              .replace(/<\/div>/g, '</iam-notification>');
-          });
-        }
-
-        if (contentComponent.getElementsByTagName(`iam-${component}`).length === 0) return;
-
-        import(/* @vite-ignore */ `${assetLocation}/js/components/${component}/${component}.component.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-${component}`))
-              window.customElements.define(`iam-${component}`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    };
-
-    if (url) {
-      const newXHRRequest = new XMLHttpRequest();
-      newXHRRequest.open('GET', url, true);
-
-      newXHRRequest.onload = function (): void {
-        if (this.status === 200) {
-          const response = JSON.parse(this.responseText);
-          component.innerHTML = `${response.content.rendered}`;
-
-          registerComponents(component);
-        }
-      };
-
-      newXHRRequest.send();
-    }
-  }
-}
-
-export default iamContent;
+class iamContent 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/content.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="content__container">
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const component = this;
+    const url = this.getAttribute('data-url');
+
+    const registerComponents = (contentComponent): void => {
+      const components = ['card', 'marketing', 'notification'];
+
+      const assetLocation = document.body.hasAttribute('data-assets-location')
+        ? document.body.getAttribute('data-assets-location')
+        : '/assets';
+
+      // Load components - Each component will load once the first of its type has been loaded
+      components.forEach((component) => {
+        if (component == 'notification') {
+          document.querySelectorAll('[data-notification]').forEach((element) => {
+            element.outerHTML = element.outerHTML
+              .replace(/<div/g, '<iam-notification')
+              .replace(/<\/div>/g, '</iam-notification>');
+          });
+        }
+
+        if (contentComponent.getElementsByTagName(`iam-${component}`).length === 0) return;
+
+        import(/* @vite-ignore */ `${assetLocation}/js/components/${component}/${component}.component.js`)
+          .then((module) => {
+            if (!window.customElements.get(`iam-${component}`))
+              window.customElements.define(`iam-${component}`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
+      });
+    };
+
+    if (url) {
+      const newXHRRequest = new XMLHttpRequest();
+      newXHRRequest.open('GET', url, true);
+
+      newXHRRequest.onload = function (): void {
+        if (this.status === 200) {
+          const response = JSON.parse(this.responseText);
+          component.innerHTML = `${response.content.rendered}`;
+
+          registerComponents(component);
+        }
+      };
+
+      newXHRRequest.send();
+    }
+  }
+}
+
+export default iamContent;

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

@@ -1,108 +1,108 @@
-// 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 storedTheme = localStorage.getItem('user-theme');
-    const hasDarkPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-    // Work from local storage first then look at the media preferences
-    this?.innerHTML = `<label class="toggle"><input type="checkbox" name="dark-mode" /> <span style="all: unset!important;">Light mode</span></label>`;
-
-    const label = this.querySelector('label');
-    const input = this.querySelector('input');
-    const span = this.querySelector('span');
-
-    const setDark = (): void => {
-      
-      document.documentElement.classList.add('dark-theme');
-      document.documentElement.classList.remove('light-theme');
-
-      input.checked = true;
-      span?.innerHTML = `Dark mode`;
-      label?.classList.add('dark-theme');
-    }
-
-    const unsetDark = (): void => {
-
-      document.documentElement.classList.remove('dark-theme');
-      document.documentElement.classList.add('light-theme');
-
-      input.checked = false;
-      span?.innerHTML = `Light mode`;
-      label?.classList.remove('dark-theme');
-    }
-
-    if (storedTheme == 'light-theme') {
-      document.documentElement.classList.add('light-theme');
-    }
-    else if (storedTheme == 'dark-theme') {
-      setDark();
-    }
-    else if(hasDarkPreference) {
-      setDark();
-    }
-
-    input.addEventListener('change', () => {
-      
-      if(input.checked){
-        localStorage.setItem('user-theme', 'dark-theme');
-        setDark();
-      }
-      else {
-        localStorage.setItem('user-theme', 'light-theme');
-        unsetDark();
-      }
-
-      // Dispatch event so other toggles can then detect it
-      const customEvent = new CustomEvent('theme-change');
-      document.dispatchEvent(customEvent);
-    });
-
-    // Detect if the theme has been changed outside of this toggle; i.e. another toggle or via other javascript
-    document.addEventListener('theme-change', () => {
-
-      if(document.documentElement.classList.contains('dark-theme'))
-        setDark();
-      else
-        unsetDark();
-    })
-
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
-      if (matches)
-        setDark();
-      else 
-        unsetDark();
-    });
-  }
-}
-
-export default iamDarkMode;
+// 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 storedTheme = localStorage.getItem('user-theme');
+    const hasDarkPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    // Work from local storage first then look at the media preferences
+    this?.innerHTML = `<label class="toggle"><input type="checkbox" name="dark-mode" /> <span style="all: unset!important;">Light mode</span></label>`;
+
+    const label = this.querySelector('label');
+    const input = this.querySelector('input');
+    const span = this.querySelector('span');
+
+    const setDark = (): void => {
+      
+      document.documentElement.classList.add('dark-theme');
+      document.documentElement.classList.remove('light-theme');
+
+      input.checked = true;
+      span?.innerHTML = `Dark mode`;
+      label?.classList.add('dark-theme');
+    }
+
+    const unsetDark = (): void => {
+
+      document.documentElement.classList.remove('dark-theme');
+      document.documentElement.classList.add('light-theme');
+
+      input.checked = false;
+      span?.innerHTML = `Light mode`;
+      label?.classList.remove('dark-theme');
+    }
+
+    if (storedTheme == 'light-theme') {
+      document.documentElement.classList.add('light-theme');
+    }
+    else if (storedTheme == 'dark-theme') {
+      setDark();
+    }
+    else if(hasDarkPreference) {
+      setDark();
+    }
+
+    input.addEventListener('change', () => {
+      
+      if(input.checked){
+        localStorage.setItem('user-theme', 'dark-theme');
+        setDark();
+      }
+      else {
+        localStorage.setItem('user-theme', 'light-theme');
+        unsetDark();
+      }
+
+      // Dispatch event so other toggles can then detect it
+      const customEvent = new CustomEvent('theme-change');
+      document.dispatchEvent(customEvent);
+    });
+
+    // Detect if the theme has been changed outside of this toggle; i.e. another toggle or via other javascript
+    document.addEventListener('theme-change', () => {
+
+      if(document.documentElement.classList.contains('dark-theme'))
+        setDark();
+      else
+        unsetDark();
+    })
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
+      if (matches)
+        setDark();
+      else 
+        unsetDark();
+    });
+  }
+}
+
+export default iamDarkMode;

package/assets/ts/components/fileupload/fileupload.component.ts

@@ -1,74 +1,74 @@
-import fileupload from '../../modules/fileupload';
-
-// Data layer Web component created
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-  event: 'customElementRegistered',
-  element: 'fileupload',
-});
-
-class iamFileupload 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/fileupload.css";`;
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    ${loadCSS}
-    
-    </style>
-    <div class="file-upload">
-      <span class="file-upload__title" part="title">Upload file</span>
-      <p class="helper-text"><slot name="helper"></slot></p>
-      <button class="btn btn-primary" type="button" part="button"><slot name="btn"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>
-      <div class="drop-area"></div>
-      <hr/>
-      <slot></slot>
-      <div class="files" part="files"><slot name="files"></slot></div>
-      <span class="invalid-feedback ext">Some files did not match the accepted extension type.</span>
-      <span class="invalid-feedback size">Some files were too large to upload.</span>
-    </div>
-    `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  connectedCallback(): void {
-    this.innerHTML += '<i class="fa-regular fa-arrow-up-from-bracket me-2" aria-hidden="true" slot="btn"></i>';
-
-    const wrapper = this.shadowRoot.querySelector('.file-upload');
-    const input = this.querySelector('input');
-    const helperText = this.shadowRoot.querySelector('.helper-text');
-
-    if (!this.querySelector('[slot="helper"]'))
-      helperText.innerHTML = `${this.hasAttribute('data-maxsize') ? `Max file size is ${this.getAttribute('data-maxsize')}kb. ` : ''}${input.hasAttribute('accept') ? `Supported file types are ${input.getAttribute('accept')}` : ''}`;
-
-    fileupload(this, wrapper);
-  }
-
-  static get observedAttributes(): any {
-    return ['data-filename'];
-  }
-
-  attributeChangedCallback(attrName, oldVal, newVal): void {
-    switch (attrName) {
-      case 'data-filename': {
-        if (oldVal != newVal) {
-          const filesWrapper = this.shadowRoot.querySelector('.files');
-
-          if (newVal != null && newVal != 'null' && newVal != '')
-            filesWrapper.innerHTML = `<span class="file" part="file">${newVal} <button data-file="${newVal}" part="file__remove">Remove</button></span>`;
-        }
-        break;
-      }
-    }
-  }
-}
-
-export default iamFileupload;
+import fileupload from '../../modules/fileupload';
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  event: 'customElementRegistered',
+  element: 'fileupload',
+});
+
+class iamFileupload 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/fileupload.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    
+    </style>
+    <div class="file-upload">
+      <span class="file-upload__title" part="title">Upload file</span>
+      <p class="helper-text"><slot name="helper"></slot></p>
+      <button class="btn btn-primary" type="button" part="button"><slot name="btn"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>
+      <div class="drop-area"></div>
+      <hr/>
+      <slot></slot>
+      <div class="files" part="files"><slot name="files"></slot></div>
+      <span class="invalid-feedback ext">Some files did not match the accepted extension type.</span>
+      <span class="invalid-feedback size">Some files were too large to upload.</span>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    this.innerHTML += '<i class="fa-regular fa-arrow-up-from-bracket me-2" aria-hidden="true" slot="btn"></i>';
+
+    const wrapper = this.shadowRoot.querySelector('.file-upload');
+    const input = this.querySelector('input');
+    const helperText = this.shadowRoot.querySelector('.helper-text');
+
+    if (!this.querySelector('[slot="helper"]'))
+      helperText.innerHTML = `${this.hasAttribute('data-maxsize') ? `Max file size is ${this.getAttribute('data-maxsize')}kb. ` : ''}${input.hasAttribute('accept') ? `Supported file types are ${input.getAttribute('accept')}` : ''}`;
+
+    fileupload(this, wrapper);
+  }
+
+  static get observedAttributes(): any {
+    return ['data-filename'];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal): void {
+    switch (attrName) {
+      case 'data-filename': {
+        if (oldVal != newVal) {
+          const filesWrapper = this.shadowRoot.querySelector('.files');
+
+          if (newVal != null && newVal != 'null' && newVal != '')
+            filesWrapper.innerHTML = `<span class="file" part="file">${newVal} <button data-file="${newVal}" part="file__remove">Remove</button></span>`;
+        }
+        break;
+      }
+    }
+  }
+}
+
+export default iamFileupload;