@iamproperty/components 7.3.0 → 7.4.0

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -1,4 +1,4 @@
-import extendDialogs from '../../modules/dialogs';
+import { uniqueID } from '../../modules/helpers';
 
 // Data layer Web component created
 declare global {
@@ -58,23 +58,23 @@ class iamActionbar extends HTMLElement {
         <div class="safe-area">
           <slot></slot>
           <div class="body">
-            <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
-              <button class="btn btn-secondary btn-compact btn-sm fa-ellipsis-vertical m-0">More actions</button>
-              <dialog class="dialog--list" part="overflow">
+            <div class="menu__wrapper  menu__wrapper --right dialog-overflow d-none show">
+              <button class="btn btn-secondary btn-compact btn-sm fa-ellipsis-vertical m-0" popovertarget="overflow" style="anchor-name: --anchor-overflow;">More actions</button>
+              <iam-menu class="dialog--list" part="overflow" id="overflow" style="position-anchor: --anchor-overflow;" popover>
                 <slot name="overflow"></slot>
                 <slot name="menu"></slot>
-              </dialog>
+              </iam-menu>
             </div>
 
 
-            <div class="dialog__wrapper dialog__wrapper--right filter-columns">
-              <button class="btn btn-secondary btn-compact btn-sm mb-0 me-0 fa-regular fa-table-columns" title="Select colums">Filter</button>
-              <dialog class="dialog--list">
+            <div class="menu__wrapper  menu__wrapper --right filter-columns">
+              <button class="btn btn-secondary btn-compact btn-sm mb-0 me-0 fa-regular fa-table-columns" title="Select colums" popovertarget="filter" style="anchor-name: --anchor-filter;">Filter</button>
+              <iam-menu class="dialog--list" id="filter" style="position-anchor: --anchor-filter;" popover>
                 <div class="pb-0 mb-0 checklists">
                   
                 </div>
                 <div class="text-right checklist-btns"><button id="cancelColumns" class="btn btn-action">Cancel</button><button id="saveColumns" class="btn btn-action btn-secondary">Save</button></div>
-              </dialog>
+              </iam-menu>
             </div>
 
             <button class="btn btn-secondary btn-compact btn-sm fa-search" data-search="" part="search-btn">Search</button>
@@ -85,11 +85,11 @@ class iamActionbar extends HTMLElement {
         <div class="safe-area">
           <slot name="selected"></slot>
           <div class="body">
-            <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
-              <button class="btn btn-secondary btn-compact btn-sm fa-ellipsis-vertical m-0">More actions</button>
-              <dialog class="dialog--list" part="selected-overflow">
+            <div class="menu__wrapper  menu__wrapper --right dialog-overflow d-none show">
+              <button class="btn btn-secondary btn-compact btn-sm fa-ellipsis-vertical m-0" popovertarget="selected-overflow" style="anchor-name: --anchor-selected-overflow;">More actions</button>
+              <iam-menu class="dialog--list" part="selected-overflow" id="selected-overflow" style="position-anchor: --anchor-selected-overflow;" popover>
                 <slot name="selected-overflow"></slot>
-              </dialog>
+              </iam-menu>
             </div>
           </div>
         </div>
@@ -121,6 +121,37 @@ class iamActionbar extends HTMLElement {
     const actionbarWrapper = this.shadowRoot?.querySelector('.actionbar__wrapper');
     const checklistHolder = this.shadowRoot?.querySelector('.checklists');
 
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? 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);
+        });
+    }
+
+    const dialog = this.querySelector('.dialog__wrapper dialog');
+
+    // Transform dialog into a menu custom element
+    if (dialog) {
+      const btn = dialog.parentElement.querySelector('.btn');
+      const id = `menu${uniqueID(1)}`;
+
+      dialog.setAttribute('id', id);
+      dialog.setAttribute('popover', 'auto');
+      btn.setAttribute('popovertarget', id);
+
+      dialog.outerHTML = dialog.outerHTML.replace(/<dialog/g, '<iam-menu').replace(/<\/dialog>/g, '</iam-menu>');
+
+      dialog.parentElement?.classList.add('menu__wrapper');
+      dialog.parentElement?.classList.remove('dialog__wrapper');
+    }
+
     // #region select all
     if (this.hasAttribute('data-selectall')) {
       actionbarWrapper?.insertAdjacentHTML(
@@ -248,11 +279,6 @@ class iamActionbar extends HTMLElement {
     });
     // #endregion
 
-    // Make sure dialogs created in the shadow dom work
-    Array.from(this.shadowRoot.querySelectorAll('.body')).forEach((element) => {
-      extendDialogs(element);
-    });
-
     // #region Reponsive safe area
     const hideButtons = (): void => {
       const wrapperWidth = actionbarWrapper.scrollWidth;
@@ -294,7 +320,7 @@ class iamActionbar extends HTMLElement {
       if (wrapperWidth < 576) {
         Array.from(
           this.querySelectorAll(
-            ':scope > .btn:not(.js-updated), :scope > .dialog__wrapper > .btn[class*="fa-"]:first-child:not(.js-updated)'
+            ':scope > .btn:not(.js-updated), :scope > .menu__wrapper  > .btn[class*="fa-"]:first-child:not(.js-updated)'
           )
         ).forEach((element: HTMLElement) => {
           element.className = element.className.replace(' btn-compact', ' _btn-compact');
@@ -303,7 +329,7 @@ class iamActionbar extends HTMLElement {
         });
       } else {
         Array.from(
-          this.querySelectorAll(':scope > .btn.js-updated, :scope > .dialog__wrapper > .btn.js-updated:first-child')
+          this.querySelectorAll(':scope > .btn.js-updated, :scope > .menu__wrapper  > .btn.js-updated:first-child')
         ).forEach((element: HTMLElement) => {
           element.classList.remove('btn-compact');
           element.classList.remove('js-updated');
@@ -342,7 +368,7 @@ class iamActionbar extends HTMLElement {
 
         // Foreach element this isn't an action button or dialog wrapper add to the width, these will not be moved into the overflow slot
         for (let i = 0; i < elements.length; i++) {
-          if (!elements[i].classList.contains('btn-action') && !elements[i].classList.contains('dialog__wrapper')) {
+          if (!elements[i].classList.contains('btn-action') && !elements[i].classList.contains('menu__wrapper ')) {
             tempWidth += elements[i].offsetWidth;
             tempWidth += elementMargin;
           }
@@ -350,7 +376,7 @@ class iamActionbar extends HTMLElement {
 
         // Foreach dialog wrapper decide if safe in safe area or move into the overflow slot, dialog wrappers have priority over the action buttons
         for (let i = 0; i < elements.length; i++) {
-          if (elements[i].classList.contains('dialog__wrapper')) {
+          if (elements[i].classList.contains('menu__wrapper ')) {
             elements[i].classList.add('show');
             tempWidth += elements[i].offsetWidth;
             tempWidth += elementMargin / 2;
@@ -384,7 +410,7 @@ class iamActionbar extends HTMLElement {
 
         // Decide which elements go into the overflow slot
         for (let i = 0; i < elements.length; i++) {
-          if (elements[i].classList.contains('btn-action') || elements[i].classList.contains('dialog__wrapper')) {
+          if (elements[i].classList.contains('btn-action') || elements[i].classList.contains('menu__wrapper ')) {
             if (!elements[i].classList.contains('show')) {
               // Move to the slot by changing the attribute
               elements[i].setAttribute('slot', overflowSlot);

package/assets/ts/components/advanced-select/advanced-select.component.ts

@@ -0,0 +1,74 @@
+import advancedSelect from '../../modules/advanced-select';
+import { safeID, resolvePath, isTraversable } from '../../modules/helpers';
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  event: 'customElementRegistered',
+  element: 'Advanced select',
+});
+
+class iamAdvancedSelect 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}";
+    input {
+      background: red;
+    }
+    input:not(.is-invalid):not(:invalid) {
+      background: none!important;
+    }
+    .optional-text {
+      display: none;
+    } 
+    .js-hide {
+      display: none !important;
+    }
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <slot></slot>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    // Clone original input field, re-name and use for display purposes
+    const inputField = this.querySelector('input');
+    const displayInputField = inputField.cloneNode();
+    displayInputField.setAttribute('name', `${inputField.getAttribute('name')}Alt`);
+    inputField.removeAttribute('data-change-events');
+    displayInputField.removeAttribute('id');
+    let datalist = this.querySelector('datalist');
+
+    inputField.after(displayInputField);
+
+    // Hide original input field
+    inputField.setAttribute('type', 'hidden');
+
+    // if data list does not exist then create one and append
+    if (!datalist) {
+      datalist = document.createElement('datalist');
+      const listID = safeID('list');
+      datalist.setAttribute('id', listID);
+      searchWrapper.appendChild(datalist);
+
+      displayInputField.setAttribute('list', listID);
+    }
+
+    advancedSelect(this, displayInputField, datalist);
+  }
+}
+
+export default iamAdvancedSelect;