@iamproperty/components 7.8.2--beta3 → 7.8.2--beta5

package/assets/js/components/search/search.component.js

@@ -1,216 +1,265 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
+import search, { filterDatalist, datalistSelectOption } from '../../modules/search';
+const getIntegerAttribute = (element, attributeName, fallback) => {
+    const value = Number.parseInt(element.getAttribute(attributeName) || '', 10);
+    return Number.isNaN(value) ? fallback : value;
 };
-import Cookies from '../../../../node_modules/js-cookie/dist/js.cookie.mjs';
-import { safeID, resolvePath, isTraversable } from '../../modules/helpers';
-import advancedSelect from '../../modules/advanced-select';
+const getOptionFromEvent = (event) => event.target instanceof HTMLElement ? event.target.closest('option') : null;
 // Data layer Web component created
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
+const searchWindow = window;
+searchWindow.dataLayer = searchWindow.dataLayer || [];
+searchWindow.dataLayer.push({
     event: 'customElementRegistered',
     element: 'Search',
 });
 class iamSearch extends HTMLElement {
     constructor() {
         super();
-        this.attachShadow({ mode: 'open' });
-        const assetLocation = document.body.hasAttribute('data-assets-location')
-            ? document.body.getAttribute('data-assets-location')
-            : '/assets';
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        const assetLocation = document.body.getAttribute('data-assets-location') || '/assets';
         const loadCSS = `@import "${assetLocation}/css/components/search.component.css";`;
         const template = document.createElement('template');
-        template.innerHTML = `
+        template.innerHTML = /* HTML */ `
     <style>
     ${loadCSS}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
-    <span class="wrapper"><span class="input__wrapper"><slot></slot></span><span class="suffix fa-regular fa-search"></span></span>
+    <span class="wrapper">
+      <span class="input__wrapper">
+        <slot></slot>
+        <button class="clear-search btn btn-action" type="button"><i class="fa-light fa-times me-0"></i></button>
+      </span>
+      <button class="suffix fa-regular fa-search"></button>
+    </span>
     <slot name="datalist"></slot>
     `;
-        this.shadowRoot.appendChild(template.content.cloneNode(true));
+        shadowRoot.appendChild(template.content.cloneNode(true));
     }
     connectedCallback() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Make the datalist a dropdown
-            this.classList.add('dropdown__wrapper');
-            if (this.querySelector('input.input--sm'))
-                this.classList.add('hasInputSm');
-            if (this.querySelector('label'))
-                this.classList.add('has-label');
-            // eslint-disable-next-line @typescript-eslint/no-this-alias
-            const searchWrapper = this;
-            const inputField = this.querySelector('input');
-            const valueSchema = this.hasAttribute('data-value-schema') ? this.getAttribute('data-value-schema') : 'value';
-            const displaySchema = this.hasAttribute('data-display-schema') ? this.getAttribute('data-display-schema') : 'label';
-            const loopSchema = this.hasAttribute('data-schema') ? this.getAttribute('data-schema') : '';
-            let datalist = this.querySelector('datalist');
-            let minLength = this.hasAttribute('data-min-length') ? this.getAttribute('data-min-length') : 0;
-            if (searchWrapper.hasAttribute('data-url') && !this.hasAttribute('data-min-length')) {
-                minLength = 3;
+        const shadowRoot = this.shadowRoot;
+        if (!shadowRoot)
+            return;
+        let datalistElement = this.querySelector('datalist');
+        const inputElement = this.querySelector('input');
+        const suffixElement = shadowRoot.querySelector('.suffix');
+        const clearBtn = shadowRoot.querySelector('.clear-search');
+        let minLength = this.hasAttribute('data-min-length') ? getIntegerAttribute(this, 'data-min-length', 1) : 1;
+        suffixElement === null || suffixElement === void 0 ? void 0 : suffixElement.setAttribute('class', `suffix ${this.hasAttribute('data-icon') ? this.getAttribute('data-icon') : 'fa-regular fa-search'}`);
+        if (this.hasAttribute('data-url') && !this.hasAttribute('data-min-length')) {
+            minLength = 3;
+        }
+        if (!inputElement || !suffixElement)
+            return;
+        // #region maintain the original placeholder value in a data attribute to allow for it to be reset when the field is emptied
+        const originalPlaceholder = inputElement.getAttribute('placeholder');
+        if (originalPlaceholder !== null)
+            this.setAttribute('data-original-placeholder', originalPlaceholder);
+        // #endregion
+        // #region transform datalist into dropdown
+        // Turn off the browser's default datalist functionality to allow for a custom implementation
+        inputElement.setAttribute('autocomplete', 'off');
+        inputElement.setAttribute('aria-autocomplete', 'none');
+        if (inputElement && inputElement.hasAttribute('list')) {
+            inputElement.setAttribute('data-list', inputElement.getAttribute('list') || '');
+            inputElement.setAttribute('list', '');
+        }
+        if (!datalistElement) {
+            datalistElement = document.createElement('datalist');
+            const listID = `${inputElement === null || inputElement === void 0 ? void 0 : inputElement.getAttribute('name')}-list`;
+            datalistElement.setAttribute('id', listID);
+            inputElement === null || inputElement === void 0 ? void 0 : inputElement.setAttribute('data-list', listID);
+            this.appendChild(datalistElement);
+        }
+        datalistElement.setAttribute('slot', 'datalist');
+        datalistElement.querySelectorAll('option').forEach((option) => {
+            option.setAttribute('tabindex', '0');
+            if (option.textContent == '' && option.hasAttribute('value')) {
+                option.textContent = option.getAttribute('value');
             }
-            // Clone original input field, re-name and use for display purposes
-            const displayInputField = inputField.cloneNode();
-            displayInputField.setAttribute('name', `${inputField.getAttribute('name')}Alt`);
-            inputField.removeAttribute('data-change-events');
-            displayInputField.removeAttribute('id');
-            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);
+        });
+        datalistElement.addEventListener('click', (event) => {
+            const optionElement = getOptionFromEvent(event);
+            if (optionElement) {
+                event.stopPropagation();
+                event.preventDefault();
+                if (document.activeElement instanceof HTMLElement)
+                    document.activeElement.blur();
+                this.classList.remove('js-show-datalist');
+                datalistSelectOption(this, inputElement, optionElement);
             }
-            displayInputField.addEventListener('change', function (e) {
-                inputField.value = displayInputField.value;
-            });
-            advancedSelect(this, displayInputField, datalist, false);
-            const checkMatch = () => {
-                const match = datalist.querySelector(`option[value="${displayInputField.value}" i]`);
-                const subMatch = datalist.querySelector(`option[value*="${displayInputField.value}" i]`);
-                if (match) {
-                    inputField.value = match.getAttribute('data-actual-value');
-                    displayInputField.value = match.getAttribute('data-actual-value');
-                    displayInputField.classList.remove('is-invalid');
-                    displayInputField.closest('label').removeAttribute('data-error');
-                }
-                else if (displayInputField.value.length >= minLength && !subMatch) {
-                    displayInputField.classList.add('is-invalid');
-                    displayInputField.closest('label').setAttribute('data-error', 'No results returned');
-                    if (searchWrapper.hasAttribute('data-url'))
-                        datalist.innerHTML = '';
+        });
+        // #endregion
+        // #region control input field
+        inputElement.addEventListener('input', () => {
+            if (inputElement.value.length >= 1) {
+                this.classList.add('has-value');
+            }
+            else {
+                this.classList.remove('has-value');
+            }
+            if (inputElement.value.length >= minLength) {
+                //inputElement.removeAttribute('data-value');
+                this.classList.add('js-show-datalist');
+                if (this.hasAttribute('data-url')) {
+                    void search(this, datalistElement, inputElement.value);
                 }
                 else {
-                    displayInputField.classList.remove('is-invalid');
-                    displayInputField.closest('label').removeAttribute('data-error');
-                }
-            };
-            const search = (searchterm) => __awaiter(this, void 0, void 0, function* () {
-                if (!this.getAttribute('data-url'))
-                    return false;
-                let ajaxURL = this.getAttribute('data-url');
-                ajaxURL += `${encodeURI(searchterm)}`;
-                // Setup controller vars if not already set
-                if (!window.controller)
-                    window.controller = [];
-                // Abort if controller already present for this url
-                if (window.controller[ajaxURL])
-                    window.controller[ajaxURL].abort();
-                // Create a new controller so it can be aborted if new fetch made
-                window.controller[ajaxURL] = new AbortController();
-                const { signal } = controller[ajaxURL];
-                try {
-                    yield fetch(ajaxURL, {
-                        signal: signal,
-                        method: 'get',
-                        credentials: 'same-origin',
-                        mode: 'no-cors',
-                        headers: new Headers({
-                            'Content-Type': 'application/json',
-                            Accept: 'application/json',
-                            'X-Requested-With': 'XMLHttpRequest',
-                            'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN'),
-                        }),
-                    })
-                        .then((response) => response.json())
-                        .then((response) => {
-                        // populate datalist
-                        let listString = '';
-                        const loopValues = resolvePath(response, loopSchema, '');
-                        if (isTraversable(loopValues) && typeof loopValues.forEach == 'function') {
-                            loopValues.forEach((item) => {
-                                const actualValue = resolvePath(item, valueSchema, '');
-                                const displayValue = resolvePath(item, displaySchema, '').replace('\n', ', ');
-                                if (!datalist.querySelector(`option[data-actual-value="${actualValue}"]`))
-                                    listString += `<option value="${displayValue}" data-actual-value="${actualValue}">${displayValue}</option>`;
-                            });
-                        }
-                        else if (typeof loopValues == 'object') {
-                            for (const [key, value] of Object.entries(loopValues)) {
-                                if (isTraversable(value) && typeof value.forEach == 'function') {
-                                    value.forEach((item) => {
-                                        const actualValue = resolvePath(item, valueSchema, '');
-                                        const displayValue = resolvePath(item, displaySchema, '').replace('\n', ', ');
-                                        if (!datalist.querySelector(`option[data-actual-value="${actualValue}"]`))
-                                            listString += `<option value="${key}: ${displayValue}" data-actual-value='${actualValue}'>${key}: ${displayValue}</option>`;
-                                    });
-                                }
-                            }
-                        }
-                        datalist.innerHTML += listString;
-                        // filter the list on the client side just in case
-                        const text = searchterm.toUpperCase();
-                        for (const option of datalist.options) {
-                            if (option.value.toUpperCase().indexOf(text) > -1) {
-                                option.style.display = 'block';
-                                option.classList.remove('hide');
-                            }
-                            else {
-                                option.style.display = 'none';
-                                option.classList.add('hide');
-                            }
-                        }
-                        searchWrapper.classList.add('was-validated');
-                        checkMatch();
-                        return response;
-                    });
+                    filterDatalist(datalistElement, inputElement.value);
                 }
-                catch (error) {
-                    console.log(error);
-                }
-            });
-            datalist.addEventListener('click', function (event) {
-                if (event && event.target instanceof HTMLElement && event.target.closest('option')) {
-                    const option = event.target.closest('option');
-                    const value = (option === null || option === void 0 ? void 0 : option.hasAttribute('data-actual-value')) ? option === null || option === void 0 ? void 0 : option.getAttribute('data-actual-value') : option === null || option === void 0 ? void 0 : option.getAttribute('data-value');
-                    inputField.value = value;
-                    const changeEvent = new CustomEvent('value-change', {
-                        detail: { value: value },
-                    });
-                    searchWrapper.dispatchEvent(changeEvent);
-                }
-            });
-            this.addEventListener('close-button-pressed', function (event) {
-                if (searchWrapper.hasAttribute('data-url')) {
-                    datalist.innerHTML = '';
-                }
-                inputField === null || inputField === void 0 ? void 0 : inputField.value = '';
-                searchWrapper.classList.remove('was-validated');
-                displayInputField.classList.remove('is-invalid');
-                displayInputField.closest('label').removeAttribute('data-error');
-            });
-            // Search the endpoint when 3 characters has been added
-            if (searchWrapper.hasAttribute('data-url')) {
-                displayInputField.addEventListener('input', () => {
-                    if (displayInputField.value.length < minLength) {
-                        datalist.innerHTML = '';
-                    }
-                    if (displayInputField.value.length == minLength) {
-                        search(displayInputField.value);
-                    }
-                });
             }
             else {
-                // on change update oringinal field with the actual value and use displayed input for the nice display text
-                displayInputField.addEventListener('input', () => {
-                    checkMatch();
-                });
+                this.classList.remove('js-show-datalist');
+            }
+        });
+        inputElement.addEventListener('focus', () => {
+            if (inputElement.value == inputElement.getAttribute('data-value')) {
+                const selectedValue = inputElement.getAttribute('data-value') || '';
+                inputElement.value = '';
+                inputElement.setAttribute('placeholder', selectedValue);
+                this.classList.remove('js-show-datalist');
+            }
+            else if (inputElement.value.length >= minLength) {
+                this.classList.add('js-show-datalist');
             }
-            if (searchWrapper.hasAttribute('data-prevent-submit')) {
-                const form = searchWrapper.closest('form');
-                form.addEventListener('submit', (e) => {
-                    e.preventDefault();
-                });
+        });
+        inputElement.addEventListener('blur', () => {
+            const selectedValue = inputElement.getAttribute('data-value');
+            if (!inputElement.value && selectedValue) {
+                inputElement.value = selectedValue;
+                //inputElement.setAttribute('placeholder', inputElement.getAttribute('data-value'));
+                //this.classList.remove('js-show-datalist');
+            }
+            // Set timeout to allow click event to fire on options before hiding the list again
+            setTimeout(() => {
+                this.classList.remove('js-force-show-datalist');
+                this.classList.remove('js-show-datalist');
+            }, 200);
+            const placeholder = inputElement.getAttribute('data-placeholder');
+            if (placeholder)
+                inputElement.setAttribute('placeholder', placeholder);
+        });
+        // #endregion
+        // #region control suffix button
+        suffixElement.addEventListener('click', () => {
+            const form = this.closest('form');
+            if (form && !this.hasAttribute('data-prevent-submit')) {
+                form.requestSubmit();
             }
+            else {
+                inputElement.focus();
+                this.classList.add('js-force-show-datalist');
+            }
+        });
+        // #endregion
+        // #region keyboard navigation
+        this.addEventListener('keydown', (event) => {
+            var _a;
+            switch (event.key) {
+                case 'ArrowDown':
+                    //event.stopPropagation();
+                    //event.preventDefault();
+                    if (event && event.target instanceof HTMLElement && event.target == inputElement) {
+                        (_a = this.querySelector('datalist option:not(.js-hide)')) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                    break;
+            }
+            /*
+            if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary')) {
+              const activeItem = document.activeElement;
+              const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;
+              const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;
+      
+              switch (
+                event.keyCode // change to event.key to key to use the above variable
+              ) {
+                case 27: // Esc
+                  if (activeItem.closest('details')) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    activeItem.closest('details').removeAttribute('open');
+                    activeItem.closest('details').querySelector(':scope summary').focus();
+                  } else {
+                    event.stopPropagation();
+                    menuButton.focus();
+                  }
+      
+                  break;
+                case 32: // Space
+                case 13: // Enter
+                  break;
+                case 35: // end
+                  event.stopPropagation();
+                  event.preventDefault();
+      
+                  this.querySelector('details[open]').removeAttribute('open');
+                  Array.from(menuItems)[menuItems.length - 1].focus();
+      
+                  break;
+                case 36: // home
+                  event.stopPropagation();
+                  event.preventDefault();
+      
+                  this.querySelector('details[open]').removeAttribute('open');
+                  Array.from(menuItems)[0].focus();
+      
+                  break;
+                case 38: // up
+                  event.stopPropagation();
+                  event.preventDefault();
+      
+                  if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
+                    if (Array.from(topLevelmenuItems)[prevIndex] != undefined)
+                      Array.from(topLevelmenuItems)[prevIndex].focus();
+                    else Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();
+                  } else if (activeItem.closest('details')) {
+                    const subMenuItems = activeItem
+                      .closest('details')
+                      .querySelectorAll('a, button, :scope details > summary');
+                    subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;
+      
+                    if (Array.from(subMenuItems)[subPrevIndex] != undefined) Array.from(subMenuItems)[subPrevIndex].focus();
+                    else Array.from(subMenuItems)[subMenuItems.length - 1].focus();
+                  }
+      
+                  break;
+                case 40: // down
+                  event.stopPropagation();
+                  event.preventDefault();
+      
+                  if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
+                    if (Array.from(topLevelmenuItems)[nextIndex] != undefined)
+                      Array.from(topLevelmenuItems)[nextIndex].focus();
+                    else Array.from(topLevelmenuItems)[0].focus();
+                  } else if (activeItem.closest('details')) {
+                    const subMenuItems = activeItem
+                      .closest('details')
+                      .querySelectorAll('a, button, :scope details > summary');
+                    subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;
+      
+                    if (Array.from(subMenuItems)[subNextIndex] != undefined) Array.from(subMenuItems)[subNextIndex].focus();
+                    else Array.from(subMenuItems)[0].focus();
+                  }
+      
+                  break;
+              }
+            }
+      
+            */
+        });
+        // #endregion
+        // #region empty button
+        clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.addEventListener('click', () => {
+            this.classList.remove('js-show-datalist');
+            inputElement.value = '';
+            inputElement.removeAttribute('data-value');
+            inputElement.focus();
+            this.classList.remove('has-value');
+            inputElement.setAttribute('placeholder', this.getAttribute('data-original-placeholder') || '');
+            const inputName = inputElement.getAttribute('name');
+            const alternateInput = inputName ? this.querySelector(`[name="${inputName}Alt"]`) : null;
+            alternateInput === null || alternateInput === void 0 ? void 0 : alternateInput.remove();
+            datalistElement.querySelectorAll('option').forEach((option) => {
+                option.classList.remove('active');
+            });
         });
     }
 }