@iamproperty/components 7.8.2--beta2 → 7.8.2--beta4

package/assets/ts/modules/card.module.ts

@@ -16,34 +16,42 @@ export const cardHTML = `<div class="wrapper">
   </div>
 </div>`;
 
-export const setupCard = (cardComponent: any): void => {
+const getCardPart = <T extends Element>(cardComponent: HTMLElement, selector: string): T | null =>
+  cardComponent.shadowRoot?.querySelector<T>(selector) || null;
+
+export const setupCard = (cardComponent: HTMLElement): void => {
   cardComponent.classList.add('card');
-  const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
-  const cardBody = cardComponent.shadowRoot.querySelector('.card__body');
+  const cardHead = getCardPart<HTMLDivElement>(cardComponent, '.card__head');
+  const cardBody = getCardPart<HTMLDivElement>(cardComponent, '.card__body');
+  const cardBadges = getCardPart<HTMLDivElement>(cardComponent, '.card__badges');
 
   if (cardComponent.hasAttribute('data-image')) {
-    cardHead.innerHTML += `<img src="${cardComponent.getAttribute('data-image')}" alt="" loading="lazy" part="image" />`;
+    cardHead?.insertAdjacentHTML(
+      'beforeend',
+      `<img src="${cardComponent.getAttribute('data-image') || ''}" alt="" loading="lazy" part="image" />`
+    );
   }
 
   // Inset the HTML for the data total or icon fallback
   if (cardComponent.hasAttribute('data-total')) {
 
-    if(!cardBody?.querySelector('.card__total'))
-      cardBody.insertAdjacentHTML(
+    const cardTotal = cardBody?.querySelector<HTMLDivElement>('.card__total');
+
+    if(!cardTotal)
+      cardBody?.insertAdjacentHTML(
         'beforeend',
-        `<div class="card__total">${cardComponent.getAttribute('data-total')}</div>`
+        `<div class="card__total">${cardComponent.getAttribute('data-total') || ''}</div>`
       );
     else {
-      const cardTotal = cardBody?.querySelector('.card__total');
-      if (cardTotal) cardTotal.innerHTML = cardComponent.getAttribute('data-total');
+      cardTotal.innerHTML = cardComponent.getAttribute('data-total') || '';
     }
   } else if (cardComponent.querySelector('[slot="total-icon"]')) {
-    cardBody.insertAdjacentHTML('beforeend', `<div class="card__total"><slot name="total-icon"></slot></div>`);
+    cardBody?.insertAdjacentHTML('beforeend', `<div class="card__total"><slot name="total-icon"></slot></div>`);
   }
 
   if (!cardComponent.querySelector('[slot="badges"]')) {
-    cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');
+    cardBadges?.classList.add('empty');
   } else {
-    cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');
+    cardBadges?.classList.remove('empty');
   }
 };

package/assets/ts/modules/content.test.ts

@@ -1,24 +1,96 @@
 import { describe, expect, it } from './test.ts';
 import { createElement, installTestDom } from './test-dom.ts';
 import { append } from './test-utils.ts';
-import { transformButtons } from './content.ts';
+import { createTitle, loadComponents, replaceShortcode, transformButtons, transformElement } from './content.ts';
 
-const { document } = installTestDom();
+installTestDom();
+
+type TestAttribute = {
+  name: string;
+  value: string;
+};
+
+type AttributeComponent = {
+  attributes: TestAttribute[];
+  getAttribute: (name: string) => string | null;
+  hasAttribute: (name: string) => boolean;
+};
+
+const createAttributeComponent = (attributes: TestAttribute[]): AttributeComponent => ({
+  attributes,
+  getAttribute(name: string): string | null {
+    const attribute = attributes.find((attr) => attr.name === name);
+    return attribute ? attribute.value : null;
+  },
+  hasAttribute(name: string): boolean {
+    return attributes.some((attr) => attr.name === name);
+  },
+});
 
 describe('Content module', () => {
+  it('replaces WordPress shortcode paragraphs with loading placeholders', () => {
+    const content = '<p>Intro</p><p>[search-learning-articles]</p><p>[search-contacts]</p>';
+    const transformed = replaceShortcode(content);
+
+    expect(transformed.includes('<p>Intro</p>'));
+    expect(transformed.includes('data-shortcode="search-learning-articles"'));
+    expect(transformed.includes('data-shortcode="search-contacts"'));
+    expect(!transformed.includes('<p>[search-learning-articles]</p>'));
+    expect(!transformed.includes('<p>[search-contacts]</p>'));
+  });
+
+  it('creates configured titles and skips missing titles', () => {
+    const component = createElement('iam-content', {
+      dataTitleTag: 'h2',
+      dataTitleClass: 'bg-light',
+    });
+
+    expect(createTitle(component, 'Latest news') === '<h2 class="bg-light iam-content--title">Latest news</h2>');
+    expect(createTitle(component, '') === '');
+    expect(createTitle(createElement('iam-content'), 'Latest news') === '');
+  });
+
+  it('wraps rendered content in the requested transform element', () => {
+    const component = createAttributeComponent([
+      { name: 'data-transform', value: 'article' },
+      { name: 'data-url', value: '/wp-json/wp/v2/pages/1' },
+      { name: 'class', value: 'content-panel' },
+    ]);
+
+    const transformed = transformElement(component, '<h2>Heading</h2>', '<p>Body</p>');
+
+    expect(transformed.startsWith('<article '));
+    expect(transformed.includes('data-transform="article"'));
+    expect(transformed.includes('data-url="/wp-json/wp/v2/pages/1"'));
+    expect(transformed.includes('class="content-panel"'));
+    expect(transformed.includes('<h2>Heading</h2><p>Body</p>'));
+    expect(transformed.endsWith('</article>'));
+  });
+
   it('transforms WordPress button wrappers into direct links', () => {
-    const parent = createElement('div');
     const buttons = createElement('div', { class: 'wp-block-buttons' });
-    const button = createElement('div', { class: 'btn btn-primary wp-block-button' });
-    const link = createElement('a', { href: '/test' }, 'Open');
-    append(button, link);
-    append(buttons, button);
-    append(parent, buttons);
-    append(document.body, parent);
+    const primaryButton = createElement('div', { class: 'btn btn-primary wp-block-button' });
+    const secondaryButton = createElement('div', { class: 'btn btn-secondary wp-block-button' });
+    const primaryLink = createElement('a', { href: '/primary' }, 'Primary');
+    const secondaryLink = createElement('a', { href: '/secondary' }, 'Secondary');
+    append(primaryButton, primaryLink);
+    append(secondaryButton, secondaryLink);
+    append(buttons, primaryButton, secondaryButton);
+
+    const fragment = transformButtons(buttons);
+
+    expect(fragment.children.length === 2);
+    expect(fragment.children[0] === primaryLink);
+    expect(fragment.children[1] === secondaryLink);
+    expect(primaryLink.getAttribute('class') === 'btn btn-primary wp-block-button');
+    expect(secondaryLink.getAttribute('class') === 'btn btn-secondary wp-block-button');
+  });
+
+  it('does not load component bundles when content contains no supported custom elements', () => {
+    const component = createElement('iam-content');
 
-    transformButtons();
+    loadComponents(component);
 
-    expect(link.getAttribute('class') === 'btn btn-primary wp-block-button');
-    expect(parent.children[0].localName === 'fragment');
+    expect(component.getElementsByTagName('iam-card').length === 0);
   });
 });

package/assets/ts/modules/content.ts

@@ -1,17 +1,64 @@
-export const transformButtons = (component):void => {
 
-  Array.from(document.querySelectorAll('.wp-block-buttons')).forEach((buttons) => {
 
-    const fragment = document.createDocumentFragment();
+export const loadComponents = (component):void => {
 
-    Array.from(buttons.querySelectorAll('.wp-block-button')).forEach((element) => {
+  const components = ['skeleton','bone','carousel', 'card', 'banner', 'notification'];
+  const assetLocation = document.body.hasAttribute('data-assets-location')
+          ? document.body.getAttribute('data-assets-location')
+          : '/assets';
 
-      const link = element.querySelector('a');
-      link.setAttribute('class',element.getAttribute('class'));
+  components.forEach((loadComponent) => {
 
-      fragment.appendChild(link);
-    });
+    if (component.getElementsByTagName(`iam-${loadComponent}`).length === 0) return;
 
-    buttons.parentNode.replaceChild(fragment, buttons);
+    import(/*! @vite-ignore */ `${assetLocation}/js/components/${loadComponent}/${loadComponent}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${loadComponent}`))
+          window.customElements.define(`iam-${loadComponent}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
   });
 }
+
+export const replaceShortcode = (content):string => {
+
+  return content.replaceAll(/<p>\[([^\]]+)\]<\/p>/g, "<span data-shortcode=\"$1\"><iam-skeleton><iam-bone class=\"search\"></iam-bone></iam-skeleton></span>");
+}
+
+export const createTitle = (component, title):string => {
+
+  if (component.hasAttribute('data-title-tag') && title)
+    return `<${component.getAttribute('data-title-tag')} class="${component.getAttribute('data-title-class')} iam-content--title">${title}</${component.getAttribute('data-title-tag')}>`;
+
+  return '';
+}
+
+export const transformElement = (component,renderedTitle,renderedContent): string => {
+
+  const transform = component.getAttribute('data-transform');
+
+  let elementAttributes = '';
+
+  for (const attr of component.attributes) {
+    elementAttributes += `${attr.name}="${attr.value}" `;
+  }
+
+  return `<${transform} ${elementAttributes}>${renderedTitle+renderedContent}</${transform}>`;
+}
+
+export const transformButtons = (buttons): DocumentFragment => {
+
+  const fragment = document.createDocumentFragment();
+
+  Array.from(buttons.querySelectorAll('.wp-block-button')).forEach((element) => {
+
+    const link = element.querySelector('a');
+    link.setAttribute('class',element.getAttribute('class'));
+
+    fragment.appendChild(link);
+  });
+
+  return fragment;
+}

package/assets/ts/modules/data-layer.ts

@@ -1,12 +1,8 @@
-type WindowWithDataLayer = Window & {
-  dataLayer: Record<string, any>[];
-};
-
-declare const window: WindowWithDataLayer;
+const dataLayerWindow = window as WindowWithDataLayer;
 
 function createDataLayer(): void {
-  window.dataLayer = window.dataLayer || [];
-  window.dataLayer.push({
+  dataLayerWindow.dataLayer = dataLayerWindow.dataLayer || [];
+  dataLayerWindow.dataLayer.push({
     event: 'Pageview',
     pageTitle: document.title,
   });
@@ -15,7 +11,7 @@ function createDataLayer(): void {
     const target = (event.target as HTMLElement).closest<HTMLElement>('[open] summary');
 
     if (target) {
-      window.dataLayer.push({
+      dataLayerWindow.dataLayer.push({
         event: 'closeDetails',
         detailsTitle: target.textContent || '',
       });
@@ -25,14 +21,14 @@ function createDataLayer(): void {
       const button = (event.target as HTMLElement).closest<HTMLButtonElement>('button');
 
       if (summary) {
-        window.dataLayer.push({
+        dataLayerWindow.dataLayer.push({
           event: 'openDetails',
           detailsTitle: summary.textContent || '',
         });
       }
 
       if (link) {
-        window.dataLayer.push({
+        dataLayerWindow.dataLayer.push({
           event: 'linkClicked',
           linkText: link.hasAttribute('title') ? link.getAttribute('title') || '' : link.textContent || '',
           class: link.hasAttribute('class') ? link.getAttribute('class') || '' : '',
@@ -41,7 +37,7 @@ function createDataLayer(): void {
       }
 
       if (button) {
-        window.dataLayer.push({
+        dataLayerWindow.dataLayer.push({
           event: 'buttonClicked',
           buttonText: button.textContent || '',
           class: button.hasAttribute('class') ? button.getAttribute('class') || '' : '',

package/assets/ts/modules/dropdown.ts

@@ -25,8 +25,6 @@ export const searchAjax = async (component, search, callback): any => {
   const ajaxURL = component.getAttribute('data-url');
   const firstInput = component.querySelector('input');
 
-  console.log(firstInput);
-
   const inputType = firstInput && firstInput.hasAttribute('type') ? firstInput.getAttribute('type') : 'checkbox';
   let inputName = firstInput && firstInput.hasAttribute('name') ? firstInput.getAttribute('name') : 'tags';
 

package/assets/ts/modules/nav.ts

@@ -74,8 +74,9 @@ export const populateLinks = (data):void => {
 
 export const loadNavData = async(Cookies): any => {
 
-  //const ajaxURL = 'https://dev.hub.iamproperty.group/data/ecosystem-switcher.json';
-  const ajaxURL = '/nav.json';
+  const ajaxURL = 'https://dev.hub.iamproperty.group/data/ecosystem-switcher.json';
+
+  //const ajaxURL = '/nav.json';
 
   // Setup controller vars if not already set
   if (!window.controller) window.controller = [];
@@ -145,7 +146,15 @@ export const loadUserData = async(Cookies): any => {
 
 export const setEnabledLinks = (component,data):void => {
 
-  component.querySelectorAll(`[data-product][data-feature]`).forEach((element) => {
+  const selector = `[data-product][data-feature]`;
+  const elements = component
+    ? [
+      ...component.querySelectorAll(selector),
+      ...(component.shadowRoot ? component.shadowRoot.querySelectorAll(selector) : []),
+    ]
+    : document.querySelectorAll(`iam-nav ${selector}`);
+
+  elements.forEach((element) => {
     const isEnabled = data.attributes.products[element.getAttribute('data-product')].features[element.getAttribute('data-feature')];
     element.setAttribute('data-is-enabled',isEnabled);
     if(isEnabled && element.getAttribute('data-enabled')){

package/assets/ts/modules/search.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { append } from './test-utils.ts';
+import search, { datalistSelectOption, filterDatalist } from './search.ts';
+
+installTestDom();
+
+if (typeof globalThis.CustomEvent === 'undefined') {
+  globalThis.CustomEvent = class extends Event {
+    detail;
+
+    constructor(type, options = {}) {
+      super(type, options);
+      this.detail = options.detail;
+    }
+  };
+}
+
+describe('Search module', () => {
+  it('fetches GET results, builds datalist options and filters them by the search term', async () => {
+    let requestedUrl = '';
+    let requestedOptions;
+
+    globalThis.fetch = (url, options) => {
+      requestedUrl = url;
+      requestedOptions = options;
+
+      return Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            data: [
+              { value: 'alpha-id', label: 'Alpha\nTeam' },
+              { id: 'beta-id', title: 'Beta Team' },
+            ],
+          }),
+      });
+    };
+
+    const component = createElement('iam-search', { dataUrl: '/results' });
+    const input = createElement('input', { name: 'q', value: 'alpha & beta' });
+    const datalist = createElement('datalist');
+    append(component, input, datalist);
+
+    await search(component, datalist, 'alpha');
+
+    expect(requestedUrl === '/results?q=alpha%20%26%20beta');
+    expect(requestedOptions.method === 'GET');
+    expect(datalist.options.length === 2);
+    expect(datalist.options[0].value === 'alpha-id');
+    expect(datalist.options[0].textContent === 'Alpha, Team');
+    expect(!datalist.options[0].classList.contains('js-hide'));
+    expect(datalist.options[1].classList.contains('js-hide'));
+  });
+
+  it('posts form values and renders grouped response options with custom schemas', async () => {
+    let requestedUrl = '';
+    let requestedOptions;
+
+    globalThis.fetch = (url, options) => {
+      requestedUrl = url;
+      requestedOptions = options;
+
+      return Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            results: {
+              groups: {
+                Products: [{ code: 'eco', name: 'Ecosystem' }],
+                Learning: [{ code: 'guide', name: 'Guide' }],
+              },
+            },
+          }),
+      });
+    };
+
+    const component = createElement('iam-search', {
+      dataDisplaySchema: 'name',
+      dataMethod: 'POST',
+      dataSchema: 'results.groups',
+      dataUrl: '/lookup',
+      dataValueSchema: 'code',
+    });
+    const input = createElement('input', { name: 'market', value: 'auction' });
+    const select = createElement('select', { name: 'status', value: 'active' });
+    const datalist = createElement('datalist');
+    append(component, input, select, datalist);
+
+    await search(component, datalist, 'guide');
+
+    expect(requestedUrl === '/lookup');
+    expect(requestedOptions.method === 'POST');
+    expect(requestedOptions.body === '{"market":"auction","status":"active"}');
+    expect(datalist.options.length === 2);
+    expect(datalist.options[0].value === 'eco');
+    expect(datalist.options[0].textContent === 'Products: Ecosystem');
+    expect(datalist.options[0].classList.contains('js-hide'));
+    expect(datalist.options[1].textContent === 'Learning: Guide');
+    expect(!datalist.options[1].classList.contains('js-hide'));
+  });
+
+  it('filters datalist options using visible text before value', () => {
+    const datalist = createElement('datalist');
+    const visibleMatch = createElement('option', { value: 'hidden-value' }, 'Matching label');
+    const valueMatch = createElement('option', { value: 'value match' });
+    const noMatch = createElement('option', { value: 'elsewhere' }, 'Different label');
+    append(datalist, visibleMatch, valueMatch, noMatch);
+
+    filterDatalist(datalist, 'match');
+
+    expect(!visibleMatch.classList.contains('js-hide'));
+    expect(!valueMatch.classList.contains('js-hide'));
+    expect(noMatch.classList.contains('js-hide'));
+  });
+
+  it('selects a datalist option, stores alternate values and dispatches selection details', () => {
+    const component = createElement('iam-search');
+    const input = createElement('input', { name: 'product' });
+    const datalist = createElement('datalist');
+    const inactiveOption = createElement('option', { value: 'inactive-id' }, 'Inactive');
+    const option = createElement('option', { dataUrl: '/products/alpha', value: 'alpha-id' }, 'Alpha');
+    let selectedDetail;
+
+    component.addEventListener('option-selected', (event) => {
+      selectedDetail = event.detail;
+    });
+
+    append(datalist, inactiveOption, option);
+    append(component, input, datalist);
+
+    datalistSelectOption(component, input, option);
+
+    expect(input.value === 'Alpha');
+    expect(input.getAttribute('data-value') === 'Alpha');
+    expect(input.getAttribute('placeholder') === 'Alpha');
+    expect(component.innerHTML.includes('name="productAlt" value="alpha-id"'));
+    expect(option.classList.contains('active'));
+    expect(!inactiveOption.classList.contains('active'));
+    expect(selectedDetail.title === 'Alpha');
+    expect(selectedDetail.value === 'alpha-id');
+    expect(selectedDetail.url === '/products/alpha');
+  });
+});

package/assets/ts/modules/search.ts

@@ -0,0 +1,206 @@
+import { resolvePath, isTraversable } from './helpers';
+
+type SearchComponent = HTMLElement;
+type SearchFormControl = HTMLInputElement | HTMLSelectElement;
+type SearchResultItem = Record<string, unknown> | string | number | boolean | null | undefined;
+type SearchResponse = Record<string, unknown>;
+type WindowWithControllers = Window & {
+  controller?: Record<string, AbortController>;
+};
+
+interface OptionSelectedDetail {
+  title: string;
+  value: string;
+  url: string;
+}
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === 'object' && !Array.isArray(value);
+
+const getResultValue = (item: SearchResultItem, key: string): unknown => (isRecord(item) ? item[key] : undefined);
+
+const toOptionText = (value: unknown): string => String(value ?? '').replace('\n', ', ');
+
+const appendDatalistOption = (
+  datalistElement: HTMLDataListElement,
+  item: SearchResultItem,
+  valueSchema: string,
+  displaySchema: string,
+  groupLabel = ''
+): void => {
+  const resolvedValue = resolvePath(item, valueSchema, undefined);
+  const resolvedDisplay = resolvePath(item, displaySchema, undefined);
+  const fallbackValue = isTraversable(item) ? '' : item;
+  const actualValue =
+    resolvedValue ??
+    getResultValue(item, 'value') ??
+    getResultValue(item, 'id') ??
+    resolvedDisplay ??
+    getResultValue(item, 'title') ??
+    getResultValue(item, 'label') ??
+    fallbackValue;
+  const displayValue = toOptionText(
+    resolvedDisplay ?? getResultValue(item, 'title') ?? getResultValue(item, 'label') ?? actualValue
+  );
+
+  if (!displayValue) return;
+
+  const optionElement = document.createElement('option');
+  optionElement.value = String(actualValue);
+  optionElement.textContent = `${groupLabel}${displayValue}`;
+  datalistElement.appendChild(optionElement);
+};
+
+const getFormControls = (component: SearchComponent): SearchFormControl[] =>
+  Array.from(component.querySelectorAll<SearchFormControl>('input,select'));
+
+const getSearchSchema = (component: SearchComponent, attributeName: string, fallback: string): string =>
+  component.hasAttribute(attributeName) ? component.getAttribute(attributeName) || '' : fallback;
+
+const search = async (
+  component: SearchComponent,
+  datalistElement: HTMLDataListElement,
+  searchTerm: string
+): Promise<void> => {
+  let url = component.getAttribute('data-url');
+
+  if (!url) return;
+
+  const method = component.getAttribute('data-method') || 'GET';
+  const body: Record<string, string> = {};
+  const searchWindow = window as WindowWithControllers;
+
+  // Setup controller vars if not already set
+  if (!searchWindow.controller) searchWindow.controller = {};
+
+  // Abort if controller already present for this url
+  if (searchWindow.controller[url]) searchWindow.controller[url].abort();
+
+  // Create a new controller so it can be aborted if new fetch made
+  searchWindow.controller[url] = new AbortController();
+  const { signal } = searchWindow.controller[url];
+
+  const requestOptions: RequestInit = {
+    signal,
+    method,
+    headers: new Headers({
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    }),
+  };
+
+  if (method.toUpperCase() === 'GET') {
+    getFormControls(component).forEach((input) => {
+      const name = input.getAttribute('name');
+      const value = input.value;
+
+      if (name && value) {
+        url += `${url.includes('?') ? '&' : '?'}${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+      }
+    });
+  } else {
+    getFormControls(component).forEach((input) => {
+      const name = input.getAttribute('name');
+      const value = input.value;
+
+      if (name && value) {
+        body[name] = value;
+      }
+    });
+
+    requestOptions['body'] = JSON.stringify(body);
+  }
+
+  try {
+    const response = await fetch(url, requestOptions);
+    const responseData = (await response.json()) as SearchResponse;
+    const loopSchema = getSearchSchema(component, 'data-schema', 'data');
+    const valueSchema = getSearchSchema(component, 'data-value-schema', 'value');
+    const displaySchema = getSearchSchema(component, 'data-display-schema', 'label');
+    const loopValues = resolvePath(responseData, loopSchema, []);
+
+    if (Array.isArray(loopValues)) {
+      loopValues.forEach((item: SearchResultItem) => {
+        appendDatalistOption(datalistElement, item, valueSchema, displaySchema);
+      });
+    } else if (isRecord(loopValues)) {
+      Object.entries(loopValues).forEach(([key, value]) => {
+        if (Array.isArray(value)) {
+          value.forEach((item: SearchResultItem) => {
+            appendDatalistOption(datalistElement, item, valueSchema, displaySchema, `${key}: `);
+          });
+        }
+      });
+    }
+
+    filterDatalist(datalistElement, searchTerm);
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const filterDatalist = (datalistElement: HTMLDataListElement, searchTerm: string): void => {
+  for (const optionElement of datalistElement.options) {
+    const optionText = optionElement.textContent?.trim() || optionElement.value;
+    if (optionText.toLowerCase().includes(searchTerm.toLowerCase())) {
+      optionElement.classList.remove('js-hide');
+    } else {
+      optionElement.classList.add('js-hide');
+    }
+  }
+};
+
+export const datalistSelectOption = (
+  component: SearchComponent,
+  inputElement: HTMLInputElement,
+  optionElement: HTMLOptionElement
+): void => {
+  const datalistElement = optionElement.closest<HTMLDataListElement>('datalist');
+  const optionText = optionElement.textContent?.trim() || optionElement.value;
+  const inputName = inputElement.getAttribute('name') || '';
+  const alternateInputName = `${inputName}Alt`;
+
+  inputElement.value = optionText;
+  inputElement.setAttribute('data-value', optionText);
+  //inputElement.setAttribute('data-placeholder', optionText);
+  inputElement.setAttribute('placeholder', optionText);
+
+  // Make sure the value of the option is passed when in a form
+  if (optionElement.value && optionElement.value !== optionText) {
+
+
+    const alternateInput = component.querySelector<HTMLInputElement>(`input[name="${alternateInputName}"]`);
+
+    if (!alternateInput)
+      component.insertAdjacentHTML(
+        'beforeend',
+        `<input type="hidden" name="${alternateInputName}" value="${optionElement.value}">`
+      );
+    else alternateInput.value = optionElement.value;
+  } else {
+
+    const alternateInput = component.querySelector<HTMLInputElement>(`input[name="${alternateInputName}"]`);
+
+    if (alternateInput) alternateInput.remove();
+  }
+
+  // Set the active value on the datalist option
+  if (!datalistElement) return;
+  for (const optionLoopElement of datalistElement.options) {
+    if (optionLoopElement === optionElement) optionLoopElement.classList.add('active');
+    else optionLoopElement.classList.remove('active');
+  }
+
+
+  const customEvent = new CustomEvent<OptionSelectedDetail>('option-selected', {
+    detail: {
+      title: optionText,
+      value: optionElement.value || '',
+      url: optionElement.hasAttribute('data-url') ? optionElement.getAttribute('data-url') || '' : '',
+    },
+  });
+
+  component.dispatchEvent(customEvent);
+};
+
+export default search;