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

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

@@ -1,172 +1,173 @@
-import setupNotification, { closeNotification } from '../../modules/notification';
-import { trackComponent, trackComponentRegistered } from '../_global';
-
-trackComponentRegistered('iam-notification');
-
-class iamNotification 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/notification.css";`;
-    const loadExtraCSS = `@import "${assetLocation}/css/components/notification.global.css";`;
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    ${loadCSS}
-    ${this.hasAttribute('data-css') ? `${this.getAttribute('data-css')}` : ``}
-    </style>
-
-    <div class="notification">
-      <div class="notification__icon"><slot name="icon"></slot></div>
-      <div class="notification__inner"><div class="notification__text"><slot></slot></div><div class="notification__btns"><slot name="btns"></slot></div></div>
-      <div class="notification__dismiss"></div>
-    </div>
-    
-    `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-    // insert extra CSS
-    if (!document.getElementById('notificationHolder'))
-      document.head.insertAdjacentHTML('beforeend', `<style id="notificationHolder">${loadExtraCSS}</style>`);
-  }
-
-  addColour = (component, status):void => {
-
-    if (component.hasAttribute('data-type')) 
-      component.classList.add(`bg-${status}`);
-    else 
-      component.classList.add(`colour-${status}`);
-  }
-
-  addIcon = (component, status):void => {
-
-    switch (status) {
-      case 'danger':
-        component.insertAdjacentHTML(
-          'beforeend',
-          '<i class="fa-solid fa-circle-exclamation" aria-hidden="true" slot="icon"></i>'
-        );
-        break;
-      case 'warning':
-        component.insertAdjacentHTML(
-          'beforeend',
-          '<i class="fa-solid fa-triangle-exclamation" aria-hidden="true" slot="icon"></i>'
-        );
-        break;
-      case 'success':
-        component.insertAdjacentHTML(
-          'beforeend',
-          '<i class="fa-solid fa-check-circle" aria-hidden="true" slot="icon"></i>'
-        );
-        break;
-      default:
-        component.insertAdjacentHTML(
-          'beforeend',
-          '<i class="fa-solid fa-circle-info" aria-hidden="true" slot="icon"></i>'
-        );
-    }
-  }
-
-  addDismissBtn = (component):void => {
-    component.shadowRoot.querySelector('.notification__dismiss')?.innerHTML = `<button data-dismiss-button part="dismiss-btn">Dismiss</button>`;
-
-    component.shadowRoot.querySelector('.notification__dismiss [data-dismiss-button]').addEventListener(
-      'click',
-      function () {
-        closeNotification(component);
-
-        const customEvent = new CustomEvent('dismiss', {
-          detail: {
-            class: component.classList,
-          },
-        });
-
-        component.dispatchEvent(customEvent);
-      },
-      false
-    );
-  }
-
-  connectedCallback(): void {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const wrapper = this;
-    const defaultStatusBG = this.hasAttribute('data-type') ? 'white' : 'info';
-    const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : defaultStatusBG;
-
-    this.addColour(this, statusBG);
-
-    if (!this.querySelector('i')) {
-      this.addIcon(this, statusBG);
-    }
-    
-
-    const buttons = this.querySelectorAll('a,button');
-
-    Array.from(buttons).forEach((button) => {
-      button.setAttribute('slot', 'btns');
-      button.classList.add('link');
-    });
-
-    if (buttons.length || this.hasAttribute('data-dismiss')) {
-      this.classList.add('notification--dismissable');
-    }
-
-    if (!buttons.length) {
-      this.shadowRoot?.querySelector('.notification__btns')?.classList.add('empty');
-    } else {
-      this.shadowRoot?.querySelector('.notification__btns')?.classList.remove('empty');
-    }
-
-    if (this.hasAttribute('data-dismiss')) {
-
-      this.addDismissBtn(this);
-    }
-
-    setupNotification(this);
-
-    trackComponent(this, 'iam-notification', ['dismiss']);
-  }
-  
-  static get observedAttributes(): any {
-    return ['data-status','data-dismiss'];
-  }
-
-  attributeChangedCallback(attrName, oldVal, newVal): void {
-    switch (attrName) {
-      case 'data-status': {
-        if (oldVal != newVal) {
-          
-          this.classList.remove('bg-danger');
-          this.classList.remove('bg-warning');
-          this.classList.remove('bg-success');
-          this.classList.remove('bg-white');
-          this.querySelector('i')?.remove();
-
-          this.addColour(this, newVal);
-          this.addIcon(this, newVal);
-        }
-        break;
-      }
-      case 'data-dismiss': {
-        if (oldVal != newVal) {
-          if (this.hasAttribute('data-dismiss')) {
-            
-            this.addDismissBtn(this);
-          }
-          else {
-            this.shadowRoot.querySelector('.notification__dismiss')?.innerHTML = '';
-          }
-        }
-        break;
-      }
-    }
-  }
-
-}
-
-export default iamNotification;
+import setupNotification, { closeNotification } from '../../modules/notification';
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-notification');
+
+class iamNotification 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/notification.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/notification.global.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    ${this.hasAttribute('data-css') ? `${this.getAttribute('data-css')}` : ``}
+    </style>
+
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
+    <div class="notification">
+      <div class="notification__icon"><slot name="icon"></slot></div>
+      <div class="notification__inner"><div class="notification__text"><slot></slot></div><div class="notification__btns"><slot name="btns"></slot></div></div>
+      <div class="notification__dismiss"></div>
+    </div>
+    
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // insert extra CSS
+    if (!document.getElementById('notificationHolder'))
+      document.head.insertAdjacentHTML('beforeend', `<style id="notificationHolder">${loadExtraCSS}</style>`);
+  }
+
+  addColour = (component, status):void => {
+
+    if (component.hasAttribute('data-type')) 
+      component.classList.add(`bg-${status}`);
+    else 
+      component.classList.add(`colour-${status}`);
+  }
+
+  addIcon = (component, status):void => {
+
+    switch (status) {
+      case 'danger':
+        component.insertAdjacentHTML(
+          'beforeend',
+          '<i class="fa-solid fa-circle-exclamation" aria-hidden="true" slot="icon"></i>'
+        );
+        break;
+      case 'warning':
+        component.insertAdjacentHTML(
+          'beforeend',
+          '<i class="fa-solid fa-triangle-exclamation" aria-hidden="true" slot="icon"></i>'
+        );
+        break;
+      case 'success':
+        component.insertAdjacentHTML(
+          'beforeend',
+          '<i class="fa-solid fa-check-circle" aria-hidden="true" slot="icon"></i>'
+        );
+        break;
+      default:
+        component.insertAdjacentHTML(
+          'beforeend',
+          '<i class="fa-solid fa-circle-info" aria-hidden="true" slot="icon"></i>'
+        );
+    }
+  }
+
+  addDismissBtn = (component):void => {
+    component.shadowRoot.querySelector('.notification__dismiss')?.innerHTML = `<button data-dismiss-button part="dismiss-btn" class="btn btn-secondary btn-compact fa-xmark">Dismiss</button>`;
+
+    component.shadowRoot.querySelector('.notification__dismiss [data-dismiss-button]').addEventListener(
+      'click',
+      function () {
+        closeNotification(component);
+
+        const customEvent = new CustomEvent('dismiss', {
+          detail: {
+            class: component.classList,
+          },
+        });
+
+        component.dispatchEvent(customEvent);
+      },
+      false
+    );
+  }
+
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const wrapper = this;
+    const defaultStatusBG = this.hasAttribute('data-type') ? 'white' : 'info';
+    const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : defaultStatusBG;
+
+    this.addColour(this, statusBG);
+
+    if (!this.querySelector('i')) {
+      this.addIcon(this, statusBG);
+    }
+    
+
+    const buttons = this.querySelectorAll('a,button');
+
+    Array.from(buttons).forEach((button) => {
+      button.setAttribute('slot', 'btns');
+      button.classList.add('link');
+    });
+
+    if (buttons.length || this.hasAttribute('data-dismiss')) {
+      this.classList.add('notification--dismissable');
+    }
+
+    if (!buttons.length) {
+      this.shadowRoot?.querySelector('.notification__btns')?.classList.add('empty');
+    } else {
+      this.shadowRoot?.querySelector('.notification__btns')?.classList.remove('empty');
+    }
+
+    if (this.hasAttribute('data-dismiss')) {
+
+      this.addDismissBtn(this);
+    }
+
+    setupNotification(this);
+
+    trackComponent(this, 'iam-notification', ['dismiss']);
+  }
+  
+  static get observedAttributes(): any {
+    return ['data-status','data-dismiss'];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal): void {
+    switch (attrName) {
+      case 'data-status': {
+        if (oldVal != newVal) {
+          
+          this.classList.remove('bg-danger');
+          this.classList.remove('bg-warning');
+          this.classList.remove('bg-success');
+          this.classList.remove('bg-white');
+          this.querySelector('i')?.remove();
+
+          this.addColour(this, newVal);
+          this.addIcon(this, newVal);
+        }
+        break;
+      }
+      case 'data-dismiss': {
+        if (oldVal != newVal) {
+          if (this.hasAttribute('data-dismiss')) {
+            
+            this.addDismissBtn(this);
+          }
+          else {
+            this.shadowRoot.querySelector('.notification__dismiss')?.innerHTML = '';
+          }
+        }
+        break;
+      }
+    }
+  }
+
+}
+
+export default iamNotification;