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

package/assets/js/modules/form.js

@@ -0,0 +1,129 @@
+const getConditions = (conditions) => JSON.parse(conditions || '[]');
+const getFormControl = (form, id) => form.querySelector(`#${id}`);
+export const isFormValid = (form) => {
+    if (form.querySelector(':invalid'))
+        return false;
+    if (form.querySelector('.pwd-checker[data-strength="1"]') || form.querySelector('.pwd-checker[data-strength="2"]'))
+        return false;
+    if (form.querySelector('iam-multiselect[data-is-required][data-error]'))
+        return false;
+    return true;
+};
+export const checkConditions = (conditions, form) => {
+    let meetsCondition = true;
+    getConditions(conditions).forEach((condition) => {
+        const input = getFormControl(form, condition.if);
+        if ((input === null || input === void 0 ? void 0 : input.value) != condition.equals)
+            meetsCondition = false;
+    });
+    return meetsCondition;
+};
+export const showIf = (form) => {
+    form.querySelectorAll('[data-show-if]').forEach((element) => {
+        if (!checkConditions(element.getAttribute('data-show-if'), form))
+            element.classList.add('d-none');
+        else
+            element.classList.remove('d-none');
+    });
+};
+export const hideIf = (form) => {
+    form.querySelectorAll('[data-hide-if]').forEach((element) => {
+        if (checkConditions(element.getAttribute('data-hide-if'), form))
+            element.classList.add('d-none');
+        else
+            element.classList.remove('d-none');
+    });
+};
+export const disabledIf = (form) => {
+    form.querySelectorAll('[data-disabled-if]').forEach((element) => {
+        if (checkConditions(element.getAttribute('data-disabled-if'), form))
+            element.setAttribute('disabled', 'disabled');
+        else
+            element.removeAttribute('disabled');
+    });
+};
+export const enabledIf = (form) => {
+    form.querySelectorAll('[data-enabled-if]').forEach((element) => {
+        if (!checkConditions(element.getAttribute('data-enabled-if'), form))
+            element.setAttribute('disabled', 'disabled');
+        else
+            element.removeAttribute('disabled');
+    });
+};
+export const requiredIf = (form) => {
+    form.querySelectorAll('[data-required-if]').forEach((element) => {
+        if (checkConditions(element.getAttribute('data-required-if'), form))
+            element.setAttribute('required', 'required');
+        else
+            element.removeAttribute('required');
+    });
+};
+export const readonlyIf = (form) => {
+    form.querySelectorAll('[data-readonly-if]').forEach((element) => {
+        if (checkConditions(element.getAttribute('data-readonly-if'), form))
+            element.setAttribute('readonly', 'readonly');
+        else
+            element.removeAttribute('readonly');
+    });
+};
+export const writeIf = (form) => {
+    form.querySelectorAll('[data-write-if]').forEach((element) => {
+        if (!checkConditions(element.getAttribute('data-write-if'), form))
+            element.setAttribute('readonly', 'readonly');
+        else
+            element.removeAttribute('readonly');
+    });
+};
+export const emptyIf = (form) => {
+    form.querySelectorAll('[data-empty-if]').forEach((element) => {
+        if (checkConditions(element.getAttribute('data-empty-if'), form))
+            element.value = "";
+    });
+};
+export const getCheckboxLimit = (element) => {
+    const limit = parseInt(element.getAttribute('data-checkbox-limit') || '10', 10);
+    return !isNaN(limit) && limit > 0 ? limit : 10;
+};
+export const limitCheckboxes = (event, root) => {
+    console.log(event);
+    const target = (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLInputElement ? event.target : null;
+    const changedCheckbox = (target === null || target === void 0 ? void 0 : target.matches('input[type="checkbox"]')) ? target : null;
+    const checkboxLimitGroup = changedCheckbox === null || changedCheckbox === void 0 ? void 0 : changedCheckbox.closest('[data-checkbox-limit]');
+    const checkboxLimitGroups = checkboxLimitGroup
+        ? [checkboxLimitGroup]
+        : [
+            ...(root.hasAttribute('data-checkbox-limit') ? [root] : []),
+            ...Array.from(root.querySelectorAll('[data-checkbox-limit]')),
+        ];
+    checkboxLimitGroups.forEach((group) => {
+        const limit = getCheckboxLimit(group);
+        const checked = Array.from(group.querySelectorAll('input[type="checkbox"]:checked'));
+        const notChecked = Array.from(group.querySelectorAll('input[type="checkbox"]:not(:checked)'));
+        notChecked.forEach((checkbox) => {
+            checkbox.setAttribute('disabled', 'disabled');
+        });
+        if (checked.length < limit) {
+            notChecked.forEach((checkbox) => {
+                checkbox.removeAttribute('disabled');
+            });
+            return;
+        }
+        if (checked.length == limit) {
+            // Data layer Web component created
+            const eventDetails = { element: group.hasAttribute('id') ? `#${group.getAttribute('id')}` : '', limit: limit };
+            const changeEvent = new CustomEvent('checkbox-limit-reached', { detail: eventDetails });
+            root.dispatchEvent(changeEvent);
+            const formWindow = window;
+            formWindow.dataLayer = formWindow.dataLayer || [];
+            formWindow.dataLayer.push(Object.assign({ 'event': 'checkbox-limit-reached' }, eventDetails));
+            return;
+        }
+        if ((changedCheckbox === null || changedCheckbox === void 0 ? void 0 : changedCheckbox.checked) && group.contains(changedCheckbox)) {
+            changedCheckbox.checked = false;
+            return;
+        }
+        checked.slice(limit).forEach((checkbox) => {
+            checkbox.checked = false;
+        });
+    });
+};

package/assets/js/modules/form.test.js

@@ -0,0 +1,132 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { append } from './test-utils.ts';
+import { checkConditions, disabledIf, emptyIf, enabledIf, getCheckboxLimit, hideIf, isFormValid, limitCheckboxes, readonlyIf, requiredIf, showIf, writeIf, } from './form.ts';
+const { window } = installTestDom();
+if (typeof globalThis.CustomEvent === 'undefined') {
+    globalThis.CustomEvent = class extends Event {
+        constructor(type, options = {}) {
+            super(type, options);
+            this.detail = options.detail;
+        }
+    };
+}
+const condition = (id, equals) => JSON.stringify([{ if: id, equals }]);
+const createChangeEvent = (target) => {
+    const event = new Event('change', { bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'target', { value: target });
+    return event;
+};
+describe('Form module', () => {
+    it('checks form validity against invalid fields, weak passwords and required multiselects', () => {
+        const form = createElement('form');
+        const originalQuerySelector = form.querySelector.bind(form);
+        form.querySelector = (selector) => (selector === ':invalid' ? createElement('input') : originalQuerySelector(selector));
+        expect(!isFormValid(form));
+        form.querySelector = originalQuerySelector;
+        append(form, createElement('div', { class: 'pwd-checker', dataStrength: '1' }));
+        expect(!isFormValid(form));
+        form.children = [];
+        append(form, createElement('iam-multiselect', { dataError: 'true', dataIsRequired: 'true' }));
+        expect(!isFormValid(form));
+        form.children = [];
+        expect(isFormValid(form));
+    });
+    it('evaluates JSON conditions against form control values', () => {
+        const form = createElement('form');
+        append(form, createElement('input', { id: 'status', value: 'active' }));
+        expect(checkConditions(condition('status', 'active'), form));
+        expect(!checkConditions(condition('status', 'archived'), form));
+    });
+    it('applies visibility conditional helpers', () => {
+        const form = createElement('form');
+        const status = createElement('input', { id: 'status', value: 'active' });
+        const shown = createElement('div', { dataShowIf: condition('status', 'active') });
+        const hidden = createElement('div', { dataHideIf: condition('status', 'active') });
+        append(form, status, shown, hidden);
+        showIf(form);
+        hideIf(form);
+        expect(!shown.classList.contains('d-none'));
+        expect(hidden.classList.contains('d-none'));
+        status.value = 'archived';
+        showIf(form);
+        hideIf(form);
+        expect(shown.classList.contains('d-none'));
+        expect(!hidden.classList.contains('d-none'));
+    });
+    it('applies enabled, disabled, required and readonly conditional helpers', () => {
+        const form = createElement('form');
+        const status = createElement('input', { id: 'status', value: 'active' });
+        const disabled = createElement('input', { dataDisabledIf: condition('status', 'active') });
+        const enabled = createElement('input', { dataEnabledIf: condition('status', 'active') });
+        const required = createElement('input', { dataRequiredIf: condition('status', 'active') });
+        const readonly = createElement('input', { dataReadonlyIf: condition('status', 'active') });
+        const writable = createElement('input', { dataWriteIf: condition('status', 'active') });
+        append(form, status, disabled, enabled, required, readonly, writable);
+        disabledIf(form);
+        enabledIf(form);
+        requiredIf(form);
+        readonlyIf(form);
+        writeIf(form);
+        expect(disabled.hasAttribute('disabled'));
+        expect(!enabled.hasAttribute('disabled'));
+        expect(required.hasAttribute('required'));
+        expect(readonly.hasAttribute('readonly'));
+        expect(!writable.hasAttribute('readonly'));
+        status.value = 'archived';
+        disabledIf(form);
+        enabledIf(form);
+        requiredIf(form);
+        readonlyIf(form);
+        writeIf(form);
+        expect(!disabled.hasAttribute('disabled'));
+        expect(enabled.hasAttribute('disabled'));
+        expect(!required.hasAttribute('required'));
+        expect(!readonly.hasAttribute('readonly'));
+        expect(writable.hasAttribute('readonly'));
+    });
+    it('empties form controls when conditions match', () => {
+        const form = createElement('form');
+        const status = createElement('input', { id: 'status', value: 'clear' });
+        const target = createElement('input', { dataEmptyIf: condition('status', 'clear'), value: 'remove me' });
+        append(form, status, target);
+        emptyIf(form);
+        expect(target.value === '');
+    });
+    it('resolves checkbox limits with a valid positive fallback', () => {
+        expect(getCheckboxLimit(createElement('div', { dataCheckboxLimit: '2' })) === 2);
+        expect(getCheckboxLimit(createElement('div', { dataCheckboxLimit: '0' })) === 10);
+        expect(getCheckboxLimit(createElement('div', { dataCheckboxLimit: 'nope' })) === 10);
+    });
+    it('disables unchecked checkboxes and emits analytics when a limit is reached', () => {
+        window.dataLayer = [];
+        const form = createElement('form');
+        const group = createElement('fieldset', { dataCheckboxLimit: '2', id: 'topics' });
+        const first = createElement('input', { checked: true, type: 'checkbox' });
+        const second = createElement('input', { checked: true, type: 'checkbox' });
+        const third = createElement('input', { type: 'checkbox' });
+        let eventDetail;
+        form.addEventListener('checkbox-limit-reached', (event) => {
+            eventDetail = event.detail;
+        });
+        append(group, first, second, third);
+        append(form, group);
+        limitCheckboxes(createChangeEvent(second), form);
+        expect(third.hasAttribute('disabled'));
+        expect(eventDetail.element === '#topics');
+        expect(eventDetail.limit === 2);
+        expect(window.dataLayer[0].event === 'checkbox-limit-reached');
+        expect(window.dataLayer[0].element === '#topics');
+    });
+    it('prevents checking beyond the configured checkbox limit', () => {
+        const form = createElement('form');
+        const group = createElement('fieldset', { dataCheckboxLimit: '1' });
+        const first = createElement('input', { checked: true, type: 'checkbox' });
+        const second = createElement('input', { checked: true, type: 'checkbox' });
+        append(group, first, second);
+        append(form, group);
+        limitCheckboxes(createChangeEvent(second), form);
+        expect(first.checked);
+        expect(!second.checked);
+    });
+});

package/assets/js/modules/nav.js

@@ -56,8 +56,8 @@ export const populateLinks = (data) => {
     return html;
 };
 export const loadNavData = (Cookies) => __awaiter(void 0, void 0, void 0, function* () {
-    //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 = [];
@@ -119,7 +119,14 @@ export const loadUserData = (Cookies) => __awaiter(void 0, void 0, void 0, funct
     }
 });
 export const setEnabledLinks = (component, data) => {
-    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/js/modules/search.js

@@ -0,0 +1,153 @@
+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 { resolvePath, isTraversable } from './helpers';
+const isRecord = (value) => value !== null && typeof value === 'object' && !Array.isArray(value);
+const getResultValue = (item, key) => (isRecord(item) ? item[key] : undefined);
+const toOptionText = (value) => String(value !== null && value !== void 0 ? value : '').replace('\n', ', ');
+const appendDatalistOption = (datalistElement, item, valueSchema, displaySchema, groupLabel = '') => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const resolvedValue = resolvePath(item, valueSchema, undefined);
+    const resolvedDisplay = resolvePath(item, displaySchema, undefined);
+    const fallbackValue = isTraversable(item) ? '' : item;
+    const actualValue = (_e = (_d = (_c = (_b = (_a = resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : getResultValue(item, 'value')) !== null && _a !== void 0 ? _a : getResultValue(item, 'id')) !== null && _b !== void 0 ? _b : resolvedDisplay) !== null && _c !== void 0 ? _c : getResultValue(item, 'title')) !== null && _d !== void 0 ? _d : getResultValue(item, 'label')) !== null && _e !== void 0 ? _e : fallbackValue;
+    const displayValue = toOptionText((_g = (_f = resolvedDisplay !== null && resolvedDisplay !== void 0 ? resolvedDisplay : getResultValue(item, 'title')) !== null && _f !== void 0 ? _f : getResultValue(item, 'label')) !== null && _g !== void 0 ? _g : actualValue);
+    if (!displayValue)
+        return;
+    const optionElement = document.createElement('option');
+    optionElement.value = String(actualValue);
+    optionElement.textContent = `${groupLabel}${displayValue}`;
+    datalistElement.appendChild(optionElement);
+};
+const getFormControls = (component) => Array.from(component.querySelectorAll('input,select'));
+const getSearchSchema = (component, attributeName, fallback) => component.hasAttribute(attributeName) ? component.getAttribute(attributeName) || '' : fallback;
+const search = (component, datalistElement, searchTerm) => __awaiter(void 0, void 0, void 0, function* () {
+    let url = component.getAttribute('data-url');
+    if (!url)
+        return;
+    const method = component.getAttribute('data-method') || 'GET';
+    const body = {};
+    const searchWindow = window;
+    // 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 = {
+        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 = yield fetch(url, requestOptions);
+        const responseData = (yield response.json());
+        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) => {
+                appendDatalistOption(datalistElement, item, valueSchema, displaySchema);
+            });
+        }
+        else if (isRecord(loopValues)) {
+            Object.entries(loopValues).forEach(([key, value]) => {
+                if (Array.isArray(value)) {
+                    value.forEach((item) => {
+                        appendDatalistOption(datalistElement, item, valueSchema, displaySchema, `${key}: `);
+                    });
+                }
+            });
+        }
+        filterDatalist(datalistElement, searchTerm);
+    }
+    catch (error) {
+        console.log(error);
+    }
+});
+export const filterDatalist = (datalistElement, searchTerm) => {
+    var _a;
+    for (const optionElement of datalistElement.options) {
+        const optionText = ((_a = optionElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || optionElement.value;
+        if (optionText.toLowerCase().includes(searchTerm.toLowerCase())) {
+            optionElement.classList.remove('js-hide');
+        }
+        else {
+            optionElement.classList.add('js-hide');
+        }
+    }
+};
+export const datalistSelectOption = (component, inputElement, optionElement) => {
+    var _a;
+    const datalistElement = optionElement.closest('datalist');
+    const optionText = ((_a = optionElement.textContent) === null || _a === void 0 ? void 0 : _a.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(`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(`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('option-selected', {
+        detail: {
+            title: optionText,
+            value: optionElement.value || '',
+            url: optionElement.hasAttribute('data-url') ? optionElement.getAttribute('data-url') || '' : '',
+        },
+    });
+    component.dispatchEvent(customEvent);
+};
+export default search;

package/assets/js/modules/search.test.js

@@ -0,0 +1,125 @@
+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 { 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 {
+        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', () => __awaiter(void 0, void 0, void 0, function* () {
+        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);
+        yield 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', () => __awaiter(void 0, void 0, void 0, function* () {
+        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);
+        yield 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/js/modules/tabs.test.js

@@ -1,23 +1,75 @@
 import { describe, expect, it } from './test.ts';
 import { createElement, installTestDom } from './test-dom.ts';
 import { append } from './test-utils.ts';
-import { openFirstTab, toggleTab } from './tabs.ts';
-installTestDom();
+import { createTabsLinks, openFirstTab, setTabsEventHandlers, toggleTab } from './tabs.ts';
+const { window } = installTestDom();
+const createDetail = (id, title, isOpen = false) => {
+    const detail = createElement('details', { id });
+    const summary = createElement('summary', {}, title);
+    if (isOpen)
+        detail.setAttribute('open', 'true');
+    append(detail, summary, createElement('p', {}, `${title} content`));
+    return detail;
+};
 describe('Tabs module', () => {
-    it('toggles tabs and opens the first tab by default', () => {
+    it('creates tab buttons and dropdown options from direct details', () => {
+        const tabs = createElement('iam-tabs', { class: 'tabs--toggle-tags' });
+        const first = createDetail('first', 'First tab', true);
+        const second = createDetail('second', 'Second tab');
+        append(tabs, first, second);
+        createTabsLinks(tabs);
+        const buttons = tabs.querySelectorAll('.tabs__links > button');
+        const options = tabs.querySelectorAll('.tabs__dropdown > option');
+        expect(buttons.length === 2);
+        expect(buttons[0].textContent === 'First tab');
+        expect(buttons[0].getAttribute('aria-pressed') === 'true');
+        expect(buttons[0].classList.contains('tag'));
+        expect(buttons[0].getAttribute('data-id') === 'first');
+        expect(first.getAttribute('tabindex') === '-1');
+        expect(first.querySelector('summary').classList.contains('visually-hidden'));
+        expect(options[0].value === 'first-tab');
+    });
+    it('toggles matching detail panels and records tab open events', () => {
+        window.dataLayer = [];
+        const tabs = createElement('iam-tabs');
+        const first = createDetail('first', 'First tab', true);
+        const second = createDetail('second', 'Second tab');
+        const linksWrapper = createElement('div');
+        const links = createElement('div', { class: 'tabs__links' });
+        const dropdownWrapper = createElement('div');
+        const dropdown = createElement('select', { class: 'tabs__dropdown' });
+        append(links, createElement('button', { ariaPressed: 'true', dataIndex: '0' }, 'First tab'));
+        append(links, createElement('button', { dataIndex: '1' }, 'Second tab'));
+        append(linksWrapper, links);
+        append(dropdownWrapper, dropdown);
+        append(tabs, linksWrapper, dropdownWrapper, first, second);
+        setTabsEventHandlers(tabs);
+        const buttons = tabs.querySelectorAll('.tabs__links > button');
+        buttons[1].click();
+        expect(!first.hasAttribute('open'));
+        expect(second.getAttribute('open') === 'true');
+        expect(buttons[1].getAttribute('aria-pressed') === 'true');
+        expect(window.dataLayer[0].event === 'openTab');
+        expect(window.dataLayer[0].tabTitle === 'Second tab');
+    });
+    it('opens the tab matching the current location hash', () => {
         const tabs = createElement('iam-tabs');
-        const first = createElement('details');
-        const second = createElement('details');
-        const buttonOne = createElement('button', { dataIndex: '0' });
-        const buttonTwo = createElement('button', { dataIndex: '1' });
         tabs.shadowRoot = createElement('shadow-root');
         const links = createElement('div', { class: 'tabs__links' });
-        append(links, buttonOne, buttonTwo);
+        append(links, createElement('button', { dataId: 'first' }), createElement('button', { dataId: 'second' }));
         append(tabs.shadowRoot, links);
-        append(tabs, first, second);
-        toggleTab([first, second], buttonTwo);
+        append(tabs, createDetail('first', 'First tab'), createDetail('second', 'Second tab'));
+        window.location.hash = '#second';
         openFirstTab(tabs);
-        expect(!first.hasAttribute('open'));
-        expect(second.hasAttribute('open'));
+        expect(tabs.querySelector('details[id="second"]').getAttribute('open') === 'true');
+        expect(tabs.shadowRoot.querySelector('[data-id="second"]').getAttribute('aria-pressed') === 'true');
+        window.location.hash = '';
+    });
+    it('toggles detail panels directly from a selected tab button', () => {
+        const details = [createDetail('first', 'First tab'), createDetail('second', 'Second tab')];
+        const button = createElement('button', { dataIndex: '1' });
+        toggleTab(details, button);
+        expect(!details[0].hasAttribute('open'));
+        expect(details[1].getAttribute('open') === 'true');
     });
 });