@iamproperty/components 7.5.1--beta10 → 7.5.1--beta11

package/assets/sass/components/tooltip.component.scss

@@ -0,0 +1,120 @@
+@use '../_func.scss' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@layer components {
+
+  :host {
+    display: inline;
+    position: relative;
+    text-decoration: underline;
+    text-decoration-style: dashed;
+    text-underline-offset: 0.2em;
+    overflow-anchor: none; 
+    cursor: pointer;
+  }
+
+  .tooltip__anchor {
+
+    anchor-name: --anchor;
+    position: absolute;
+    display: block;
+    inset: 0;
+    height: 100%;
+    width: 100%;
+    min-width: 1rem;
+    left: auto;
+    right: 0;
+  }
+
+  :host(:empty) .tooltip__anchor{
+
+    height: 1rem;
+    width: 1rem;
+  }
+
+  :host(:empty) .tooltip__anchor:after {
+    font-family: "Font Awesome 6 Pro";
+    font-weight: 900;
+    content: "\f059";
+    display: block;
+    margin: 0;
+    line-height: 1;
+    color: var(--colour-primary);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+  }
+
+  .tooltip__content {
+    position: fixed;
+    position-anchor: --anchor;
+    position-area: center end;
+    position-try-fallbacks:  bottom span-all, top span-all, start;
+
+    container-type: anchored;
+    max-width: #{rem(270)};
+    background: var(--colour-primary);
+    color: var(--colour-white);
+    padding: rem(24);
+    border: none;
+    border-radius: 0.5rem;
+    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
+    margin: 0.75rem;
+    overflow: visible;
+
+    > strong:first-child {
+      display: block;
+      padding-bottom: 1rem;
+      color: inherit;
+    }
+
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      max-width: #{rem(335)};
+    }
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      max-width: #{rem(360)};
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 50%;
+      left: -0.45rem;   
+      transform: translate(-50%, 0);
+      border-width: 0.5rem;
+      border-style: solid;
+      border-color: transparent var(--colour-primary) transparent transparent;
+      margin-bottom: -0.5rem;
+
+      @container anchored(fallback: top span-all) {
+
+        left: 50%;    
+        bottom: auto;
+        top: 100%;
+        border-color: var(--colour-primary) transparent transparent transparent;
+        margin-bottom: -1px;
+      }
+  
+      @container anchored(fallback: bottom span-all) {
+
+        top: auto;
+        bottom: 100%;
+        left: 50%;    
+        border-color: transparent transparent var(--colour-primary) transparent;
+        margin-bottom: -1px;
+      }
+  
+      @container anchored(fallback: start) {
+
+        display: none;
+      }
+    }
+  }
+}

package/assets/sass/elements/buttons--special.scss

@@ -0,0 +1,45 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+
+  // #region btn compact
+  .btn[popovertarget] {
+  
+    position: relative;
+    anchor-name: --button2;
+
+    > .fa-chevron-down {
+      display: none;
+    }
+
+    &:after {
+      content: '';
+
+      display: inline-block;
+      margin-left: 1em;
+
+      height: 0.8em;
+      width: 0.8em;
+      z-index: var(--index-focus);
+      background: currentColor;
+      mask-image: var(--icon-arrow);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-arrow);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+
+      transform: rotate(90deg);
+    }
+
+    &[aria-pressed]:after {
+      transform: rotate(270deg);
+    }
+  }
+
+  // #endregion

package/assets/sass/elements/buttons.scss

@@ -29,3 +29,9 @@ $darkMode: 'true' !default;
   $darkMode: $darkMode,
   $mobileOnly: $mobileOnly
 );
+
+@use './buttons--special.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);

package/assets/sass/elements/dialog.scss

@@ -12,7 +12,8 @@ $darkMode: 'true' !default;
   }
 
   // #region Default styling of both modals
-  dialog {
+  dialog,
+  [popover] {
     --dialog-padding: #{rem(24)};
 
     --mh-padding-inline: var(--dialog-padding);
@@ -42,13 +43,15 @@ $darkMode: 'true' !default;
     overscroll-behavior: contain;
   }
 
-  dialog[open] {
+  dialog[open],
+  [popover]:popover-open {
     display: flex;
     flex-direction: column;
   }
 
   // TODO: when the old modals are depreciated this selector can be simplified
-  *:not(.dialog__wrapper) > dialog[open]:not([popover]) {
+  *:not(.dialog__wrapper) > dialog[open],
+  *:not(.dialog__wrapper) > [popover]:popover-open {
 
     overflow-y: auto;
     width: 90vw;
@@ -59,8 +62,8 @@ $darkMode: 'true' !default;
     overscroll-behavior: contain;
 
     @include media-breakpoint-up(sm, $mobileOnly) {
-      --dialog-padding: #{rem(32)};
-      padding: var(--dialog-padding);
+      //--dialog-padding: #{rem(32)};
+      //padding: var(--dialog-padding);
       min-width: rem(335);
       width: fit-content;
       max-width: rem(686);
@@ -75,11 +78,9 @@ $darkMode: 'true' !default;
   }
   // #endregion
 
-
   details.bg-light {
     margin-inline: calc(var(--dialog-padding) * -1);
     padding-inline: var(--dialog-padding);
   }
 
 }
-

package/assets/sass/elements/forms.scss

@@ -3,7 +3,7 @@
 
 @use '../_func' as *;
 
-@use 'input' as *;
+@use './input' as *;
 
 
 $icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-8.8 0-16 7.2-16 16V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16zm24 224a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z' fill='#dc3545'/></svg>");

package/assets/sass/elements/popover.scss

@@ -71,7 +71,8 @@ $darkMode: 'true' !default;
 
       //right: auto;
       margin: 0 0 0 #{rem(4)};
-      padding: rem(16);
+      //padding: rem(16);
+      padding: rem(24);
 
       &::backdrop {
         display: none;
@@ -94,7 +95,6 @@ $darkMode: 'true' !default;
       min-width: rem(320);
       border-radius: rem(16);
       width: rem(320);
-      padding: rem(24);
 
       @include media-breakpoint-up(sm, $mobileOnly) {
         width: rem(335);
@@ -256,3 +256,4 @@ $darkMode: 'true' !default;
   }
   // #endregion
 }
+

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

@@ -40,6 +40,7 @@ class iamMenu extends HTMLElement {
     // Set the needed CSS styles to connect the ID attribute to the anchor name
     if (menuID && menuButton) {
       this.setAttribute('role', 'menu');
+      this.setAttribute('popover', 'auto');
       this.style['position-anchor'] = `--${menuID}`;
 
       menuButton?.setAttribute('aria-haspopup', 'true');

package/assets/ts/components/popover/popover.component.ts

@@ -0,0 +1,50 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+
+trackComponentRegistered('iam-popover');
+
+class iamPopover 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/popover.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <div>
+    <slot></slot>
+    </div>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+
+    const id = this.getAttribute('id');
+    const button = document.querySelector(`[popovertarget="${id}"]`);
+    
+    this.setAttribute('popover','auto');
+
+
+    button?.addEventListener('click',() => {
+
+      if(this.matches(':popover-open')){
+        button.removeAttribute('aria-pressed');
+      }
+      else {
+        
+        button.setAttribute('aria-pressed','true');
+      }
+    });
+  }
+}
+
+export default iamPopover;

package/assets/ts/components/table-basic/table-basic.component.ts

@@ -48,7 +48,7 @@ class iamTableBasic extends HTMLElement {
     setupBasicTable(this, table, form, pagination);
 
     paginateTable(this, table, form, pagination, () => {
-      paginateRows(component);
+      paginateRows(this);
     });
   }
 }

package/assets/ts/components/tooltip/tooltip.component.ts

@@ -0,0 +1,98 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+
+trackComponentRegistered('iam-tooltip');
+
+class iamTooltip 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/popover.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <slot></slot>
+    <div class="tooltip__anchor">
+    </div>
+    <div class="tooltip__content" id="tooltip"></div>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+
+
+    const contentWrapper = this.shadowRoot?.querySelector('.tooltip__content');
+    const anchor = this.shadowRoot?.querySelector('.tooltip__anchor');
+
+    if(this.hasAttribute('data-heading'))
+      contentWrapper?.innerHTML += `<strong>${this.getAttribute('data-heading')}</strong>`;
+
+    contentWrapper?.innerHTML += this.getAttribute('title');
+
+
+    this.removeAttribute('title');
+
+    contentWrapper?.setAttribute('popover', 'auto');
+
+    this?.addEventListener('mouseenter', (event) => {
+      
+        contentWrapper.showPopover();
+    });
+    this?.addEventListener('mouseleave', (event) => {
+
+      if(!contentWrapper?.classList.contains('show-popover'))
+        contentWrapper.hidePopover();
+    });
+
+
+    // Check if th component sets the tooltip open by default
+    if(this.classList.contains('show-popover')){
+      contentWrapper?.classList.add('show-popover');
+      
+      contentWrapper?.setAttribute('popover', 'manual'); // Switch popover type first before showing popover
+      contentWrapper.showPopover();
+    }
+
+    this?.addEventListener('click', (event) => {
+      
+      contentWrapper?.classList.toggle('show-popover');
+
+      if(contentWrapper?.classList.contains('show-popover')){
+        
+        contentWrapper?.setAttribute('popover', 'manual'); // Switch popover type first before showing popover
+        contentWrapper.showPopover();
+      }
+      else {
+        
+        contentWrapper?.setAttribute('popover', 'auto');
+        contentWrapper.hidePopover();
+      }
+    });
+
+    // Used for documentation
+    this?.parentNode?.addEventListener('update', (event) => {
+      contentWrapper?.setAttribute('popover', 'auto');
+      contentWrapper.hidePopover();
+
+      setTimeout(() => {
+          
+        contentWrapper?.classList.add('show-popover');
+        
+        contentWrapper?.setAttribute('popover', 'manual'); // Switch popover type first before showing popover
+        contentWrapper.showPopover();
+
+      }, 100);
+    });
+  }
+}
+
+export default iamTooltip;

package/assets/ts/modules/applied-filters.ts

@@ -127,6 +127,10 @@ function createAppliedFilters(container, filters): void {
 
 
   const filterClicked = (filter) => {
+
+    if(!filter?.hasAttribute('data-name'))
+      return false;
+
     const names = filter.getAttribute('data-name').split(',');
 
     for (let t = 0; t < names.length; t++) {
@@ -172,6 +176,9 @@ function createAppliedFilters(container, filters): void {
 
         filterClicked(filter);
 
+        const clickedEvent = new CustomEvent('filter-clicked',{'detail':filterName });
+        container.dispatchEvent(clickedEvent);
+
         // If you clicked on the filter on the parent component we want to tell the child component which filter to copy
         if(container.querySelector('dialog iam-applied-filters')) {
           const event = new CustomEvent('filter',{'detail':filterName });
@@ -196,10 +203,14 @@ function createAppliedFilters(container, filters): void {
   });
 
   if(dialog){
+    const primaryButton = container.querySelector('.btn-primary') ? container.querySelector('.btn-primary') : container.shadowRoot.querySelector('.btn-primary');
     // Force the filters inside of the dialog to effect the filters above
-    container.querySelector('.btn-primary')?.addEventListener('click', (e) => {
+    primaryButton?.addEventListener('click', (e) => {
 
       const event = new CustomEvent('update');
+      const submitEvent = new CustomEvent('submit');
+
+      container.dispatchEvent(submitEvent);
       
       if(container.parentElement.closest('iam-applied-filters'))
         container.parentElement.closest('iam-applied-filters').dispatchEvent(event);

package/assets/ts/modules/table.ts

@@ -1396,7 +1396,7 @@ export const loadAjaxTable = async function (component, table, form, pagination)
             tbody.appendChild(table_row);
           });
 
-          //component.setAttribute('data-total', parseInt(totalNumber));
+          component.setAttribute('data-total', parseInt(totalNumber));
           //component.setAttribute('data-page', parseInt(currentPage));
 
           //pagination.setAttribute('data-total', totalNumber);