@madgex/design-system 13.5.0 → 13.5.1

package/src/components/inputs/category-picker/category-picker.js

@@ -0,0 +1,302 @@
+const ITEM = '.mds-form-check';
+const CHECKBOX = '.mds-form-check__input';
+const LABEL = '.mds-form-check__label';
+const NESTED = '.mds-form-check__nested-container';
+const PILL = '.mds-category-picker__pill';
+const CLEAR = '.mds-category-picker__clear-pill';
+
+const DEFAULT_I18N = {
+  optionsSelectedSingular: '1 option selected',
+  optionsSelectedPlural: '{count} options selected',
+  optionsFoundSingular: '1 option found',
+  optionsFoundPlural: '{count} options found',
+};
+
+export class MdsCategoryPicker extends HTMLElement {
+  #controller;
+  #pillbox;
+  #pillTemplate;
+  #buttonTemplate;
+  #searchInput;
+  #inputWrapper;
+  #dropdown;
+  #liveRegion;
+  #noResults;
+  #i18n;
+  #buttonToCheckbox = new WeakMap();
+  #isOpen = false;
+
+  connectedCallback() {
+    const templates = this.querySelector('.mds-category-picker__templates');
+    this.#pillbox = this.querySelector('.mds-category-picker__pillbox');
+    this.#searchInput = this.querySelector('.mds-category-picker__search');
+    this.#inputWrapper = this.querySelector('.mds-category-picker__input-wrapper');
+    this.#dropdown = this.querySelector('.mds-category-picker__dropdown');
+    this.#liveRegion = this.querySelector('.mds-category-picker__live-region');
+    this.#noResults = this.querySelector('.mds-category-picker__no-results');
+
+    if (!templates || !this.#pillbox || !this.#searchInput || !this.#dropdown) return;
+
+    try {
+      this.#i18n = { ...DEFAULT_I18N, ...JSON.parse(this.getAttribute('i18n') || '{}') };
+    } catch {
+      this.#i18n = DEFAULT_I18N;
+    }
+
+    this.#pillTemplate = templates.querySelector(PILL);
+    this.#buttonTemplate = templates.querySelector(CLEAR);
+    if (!this.#pillTemplate || !this.#buttonTemplate) return;
+    templates.remove();
+
+    this.#controller = new AbortController();
+    const o = { signal: this.#controller.signal };
+
+    this.#pillbox.addEventListener('click', this.#onRemovePill, o);
+    this.#dropdown.addEventListener('change', this.#onCheckboxChange, o);
+    this.#searchInput.addEventListener('blur', this.#onSearchBlur, o);
+    this.#searchInput.addEventListener('input', this.#onSearchInput, o);
+    this.#searchInput.addEventListener('keydown', this.#onSearchKeydown, o);
+    this.#inputWrapper.addEventListener('click', () => this.#searchInput.focus(), o);
+    this.#searchInput.addEventListener('focus', () => this.#open(), o);
+    this.#dropdown.addEventListener(
+      'mousedown',
+      (e) => {
+        if (e.target !== this.#searchInput) e.preventDefault();
+      },
+      o,
+    );
+    this.#dropdown.addEventListener(
+      'focusout',
+      (e) => {
+        if (!e.relatedTarget || !this.contains(e.relatedTarget)) this.#close();
+      },
+      o,
+    );
+    this.#dropdown.addEventListener(
+      'keydown',
+      (e) => {
+        if (e.key === 'Escape') {
+          this.#close();
+          this.#searchInput.focus();
+        }
+      },
+      o,
+    );
+    document.addEventListener(
+      'click',
+      (e) => {
+        if (!e.composedPath().includes(this)) this.#close();
+      },
+      o,
+    );
+
+    this.#syncSelection();
+  }
+
+  disconnectedCallback() {
+    this.#controller?.abort();
+  }
+
+  // --- Open / Close ---
+
+  #open() {
+    if (this.#isOpen) return;
+    this.#isOpen = true;
+    this.classList.add('mds-category-picker--open');
+    this.#searchInput.setAttribute('aria-expanded', 'true');
+  }
+
+  #close() {
+    if (!this.#isOpen) return;
+    this.#isOpen = false;
+    this.classList.remove('mds-category-picker--open');
+    this.#searchInput.setAttribute('aria-expanded', 'false');
+    this.#searchInput.value = '';
+    this.#resetFilter();
+  }
+
+  #onSearchBlur = (e) => {
+    const related = e.relatedTarget;
+    if (related && (this.#dropdown.contains(related) || this.#inputWrapper.contains(related))) return;
+    this.#close();
+  };
+
+  // --- Selection ---
+
+  #syncSelection = () => {
+    this.#pillbox.replaceChildren();
+    this.#buttonToCheckbox = new WeakMap();
+    const cls = 'mds-form-check--has-selection';
+
+    for (const item of this.#dropdown.querySelectorAll(ITEM)) item.classList.remove(cls);
+
+    for (const cb of this.#dropdown.querySelectorAll(`${CHECKBOX}:checked`)) {
+      this.#addPill(cb);
+
+      let el = cb.closest(ITEM)?.parentElement;
+      while (el && el !== this.#dropdown) {
+        if (el.matches(ITEM)) el.classList.add(cls);
+        el = el.parentElement;
+      }
+    }
+  };
+
+  #addPill(checkbox) {
+    const path = checkbox.dataset.path;
+    if (!path) return;
+
+    const pill = this.#pillTemplate.cloneNode(true);
+    const button = this.#buttonTemplate.cloneNode(true);
+    button.setAttribute('aria-label', `${button.getAttribute('aria-label')} ${path}`);
+    const textSpan = document.createElement('span');
+    textSpan.className = 'mds-category-picker__pill-text';
+    textSpan.textContent = path;
+    pill.appendChild(textSpan);
+    pill.appendChild(button);
+    this.#pillbox.appendChild(pill);
+    this.#buttonToCheckbox.set(button, checkbox);
+  }
+
+  #onRemovePill = ({ target }) => {
+    const cb = this.#buttonToCheckbox.get(target.closest(CLEAR));
+    if (cb) {
+      cb.checked = false;
+      cb.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+  };
+
+  #onCheckboxChange = () => {
+    this.#syncSelection();
+    this.#searchInput.value = '';
+    this.#resetFilter();
+    const count = this.#dropdown.querySelectorAll(`${CHECKBOX}:checked`).length;
+    this.#announce(this.#getAnnouncementMessage('optionsSelectedSingular', 'optionsSelectedPlural', count));
+  };
+
+  // --- Search / Filter ---
+
+  #onSearchInput = () => {
+    const query = this.#searchInput.value.trim();
+
+    if (query.length >= 2) {
+      this.#filterOptions(query);
+    } else {
+      this.#resetFilter();
+    }
+  };
+
+  #filterOptions(query) {
+    const q = query.toLowerCase();
+    const items = this.#dropdown.querySelectorAll(ITEM);
+    const visibleParents = new Set();
+    const directMatchParents = new Set();
+
+    for (const item of items) {
+      const text = item.querySelector(LABEL)?.textContent.trim().toLowerCase() || '';
+      if (!text) continue;
+
+      if (item.querySelector(NESTED)) {
+        if (text.includes(q)) {
+          visibleParents.add(item);
+          directMatchParents.add(item);
+        }
+        continue;
+      }
+
+      item.hidden = !text.includes(q);
+      if (!item.hidden) {
+        let el = item.parentElement;
+        while (el && el !== this.#dropdown) {
+          if (el.matches(ITEM)) visibleParents.add(el);
+          el = el.parentElement;
+        }
+      }
+    }
+
+    for (const item of items) {
+      const nested = item.querySelector(NESTED);
+      if (!nested) continue;
+
+      if (visibleParents.has(item)) {
+        item.hidden = false;
+        item.querySelector('.mds-checkbox-accordion__button')?.setAttribute('aria-expanded', 'true');
+        if (directMatchParents.has(item)) {
+          for (const child of nested.querySelectorAll(ITEM)) child.hidden = false;
+        }
+      } else {
+        item.hidden = true;
+      }
+    }
+
+    let count = 0;
+    for (const item of items) if (!item.hidden) count++;
+
+    this.#showNoResults(count === 0);
+    this.#announce(this.#getAnnouncementMessage('optionsFoundSingular', 'optionsFoundPlural', count));
+  }
+
+  #resetFilter() {
+    for (const item of this.#dropdown.querySelectorAll(ITEM)) item.hidden = false;
+    this.#showNoResults(false);
+  }
+
+  #showNoResults(show) {
+    this.#noResults?.classList.toggle('mds-category-picker__no-results--visible', show);
+  }
+
+  // --- Keyboard ---
+
+  #onSearchKeydown = (e) => {
+    switch (e.key) {
+      case 'Escape':
+        this.#close();
+        this.#searchInput.blur();
+        break;
+      case 'ArrowDown': {
+        e.preventDefault();
+        if (!this.#isOpen) this.#open();
+        for (const item of this.#dropdown.querySelectorAll(ITEM)) {
+          if (item.hidden) continue;
+          const cb = item.querySelector(CHECKBOX);
+          if (cb) {
+            cb.focus();
+            break;
+          }
+        }
+        break;
+      }
+      case 'Backspace':
+        if (this.#searchInput.value === '') {
+          const pills = this.#pillbox.querySelectorAll(PILL);
+          const lastPill = pills[pills.length - 1];
+          if (!lastPill) break;
+          const cb = this.#buttonToCheckbox.get(lastPill.querySelector(CLEAR));
+          if (cb) {
+            cb.checked = false;
+            cb.dispatchEvent(new Event('change', { bubbles: true }));
+          }
+        }
+        break;
+      case 'Tab':
+        this.#close();
+        break;
+      default:
+        break;
+    }
+  };
+
+  // --- Announcements ---
+
+  #getAnnouncementMessage(singularKey, pluralKey, count) {
+    if (count === 1) return this.#i18n[singularKey];
+    return this.#i18n[pluralKey].replace('{count}', String(count));
+  }
+
+  #announce(message) {
+    if (!this.#liveRegion) return;
+    this.#liveRegion.textContent = '';
+    requestAnimationFrame(() => {
+      this.#liveRegion.textContent = message;
+    });
+  }
+}

package/src/components/inputs/category-picker/category-picker.njk

@@ -0,0 +1,81 @@
+{% from "./inputs/checkbox-list/_macro.njk" import MdsCheckboxList %}
+{% from "./inputs/label/_macro.njk" import MdsInputLabel %}
+{% from "./inputs/_message/_macro.njk" import MdsInputMessages %}
+{% from "./icons/_macro.njk" import MdsIcon %}
+
+{%- set pickerId = checkboxList.id | default('category-picker') -%}
+{%- set dropdownId = pickerId ~ '-dropdown' -%}
+{%- set searchId = pickerId ~ '-search' -%}
+
+{% if checkboxList.helpText %}
+  {% set helpTextId = [pickerId, '-help-text'] | join %}
+{% endif %}
+{% if checkboxList.validationError %}
+  {% set validationErrorId = [pickerId, '-validation-error'] | join %}
+{% endif %}
+{% if helpTextId or validationErrorId or checkboxList.describedBy %}
+  {% set ariaDescribedBy = [validationErrorId, helpTextId, checkboxList.describedBy] | join(' ') | trim %}
+{% endif %}
+
+{{ sectionTitle | safe }}
+<div class="mds-border mds-padding-b3 mds-margin-bottom-b12">
+  <div class="mds-form-element{% if checkboxList.state %} mds-form-element--{{ checkboxList.state }}{% endif %}">
+    {{ MdsInputLabel({
+      labelText: checkboxList.labelText,
+      hideLabel: checkboxList.hideLabel,
+      inputId: searchId,
+      optional: checkboxList.optional,
+      i18n: checkboxList.i18n
+    }) }}
+    {{ MdsInputMessages({
+      id: pickerId,
+      helpTextId: helpTextId,
+      helpText: checkboxList.helpText,
+      validationErrorId: validationErrorId,
+      validationError: checkboxList.validationError
+    }) }}
+
+    <mds-category-picker i18n="{{ (i18n or {}) | dump }}">
+      <span class="mds-category-picker__templates">{# Removed with JS on load #}
+        <ul><li class="mds-category-picker__pill mds-border"></li></ul>
+        <button class="mds-category-picker__clear-pill" type="button" aria-label="{{ removeButtonAria | default('remove category') }}">{{- MdsIcon({ iconName: 'close' }) -}}</button>
+      </span>
+
+      <div class="mds-category-picker__input-wrapper">
+        <span class="mds-visually-hidden">{{ (i18n or {}).selectedTermsLabel | default('Selected terms:') }}</span>
+        <ul class="mds-category-picker__pillbox" role="list">{# Pills added with JS #}</ul>
+        <input
+          class="mds-category-picker__search"
+          id="{{ searchId }}"
+          type="text"
+          role="combobox"
+          autocomplete="off"
+          aria-expanded="false"
+          aria-controls="{{ dropdownId }}"
+          aria-autocomplete="list"
+          aria-haspopup="dialog"
+          placeholder="{{ searchPlaceholder | default('Search or select…') }}"
+          {% if ariaDescribedBy %}aria-describedby="{{ ariaDescribedBy }}"{% endif %}
+        />
+      </div>
+
+      <div id="{{ dropdownId }}" class="mds-category-picker__dropdown" role="dialog" aria-label="{{ checkboxList.labelText | default('Options') }}">
+        {{ MdsCheckboxList({
+          labelText: checkboxList.labelText,
+          hideLabel: true,
+          id: checkboxList.id,
+          name: checkboxList.name,
+          options: checkboxList.options,
+          selectedOptions: checkboxList.selectedOptions,
+          disabled: checkboxList.disabled,
+          containerClasses: checkboxList.containerClasses,
+          i18n: checkboxList.i18n,
+          describedBy: checkboxList.describedBy
+        }) }}
+        <div class="mds-category-picker__no-results">{{ (i18n or {}).noResults | default('No matching options') }}</div>
+      </div>
+
+      <div class="mds-category-picker__live-region mds-visually-hidden" aria-live="polite" aria-atomic="true"></div>
+    </mds-category-picker>
+  </div>
+</div>

package/src/components/inputs/category-picker/category-picker.scss

@@ -0,0 +1,148 @@
+mds-category-picker {
+  display: block;
+  position: relative;
+
+  // Author styles on .mds-form-check override the UA [hidden] rule.
+  // Force display:none so filtering works inside the checkbox-list.
+  [hidden] {
+    display: none !important;
+  }
+
+  .mds-category-picker__templates {
+    display: none;
+  }
+
+  // --- Input wrapper (looks like a text input) ---
+  .mds-category-picker__input-wrapper {
+    @extend .mds-form-control;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $constant-size-baseline;
+    padding: $constant-size-baseline ($constant-size-baseline * 2);
+    cursor: text;
+    min-height: $constant-size-baseline * 12; // match standard input height
+  }
+
+  // Pillbox becomes transparent to flex layout — pills are direct flex items
+  .mds-category-picker__pillbox {
+    display: contents;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  // --- Search input inside wrapper ---
+  .mds-category-picker__search {
+    flex: 1;
+    min-width: 80px;
+    border: 0;
+    outline: 0;
+    padding: $constant-size-baseline ($constant-size-baseline * 2);
+    font-size: inherit;
+    line-height: inherit;
+    background: transparent;
+    appearance: none;
+  }
+
+  // --- Pill tags inside input ---
+  .mds-category-picker__pill {
+    font-size: var(--mds-font-type-s-1-size);
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    border-radius: $border-radius;
+    padding: $constant-size-baseline ($constant-size-baseline * 2);
+    max-width: 100%;
+    min-width: 0;
+    background-color: $constant-color-neutral-lightest;
+  }
+
+  .mds-category-picker__pill-text {
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .mds-category-picker__clear-pill {
+    background: none;
+    border: none;
+    padding: 0 0 0 ($constant-size-baseline);
+    margin: 0;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    .mds-icon {
+      top: 0;
+    }
+
+    &:focus {
+      @include inputFocusStyle();
+      border-radius: $border-radius;
+    }
+  }
+
+  // --- Dropdown panel ---
+  .mds-category-picker__dropdown {
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    max-height: 300px;
+    overflow-y: auto;
+    border: $input-border;
+    border-top: none;
+    border-radius: 0 0 $border-radius $border-radius;
+    background-color: #fff;
+    @include z-index();
+  }
+
+  &.mds-category-picker--open .mds-category-picker__dropdown {
+    display: block;
+  }
+
+  // Remove fixed height constraint from checkbox container when inside dropdown
+  .mds-category-picker__dropdown .mds-form-check-container--border {
+    border: 0;
+    border-radius: 0;
+    max-height: none;
+    min-height: 0;
+    overflow: visible;
+  }
+
+  // Bold selected items and parent labels with checked children
+  .mds-form-check--has-selection > .mds-form-check__label,
+  .mds-form-check__input:checked + .mds-form-check__label {
+    font-weight: bold;
+  }
+
+  // --- No results message ---
+  .mds-category-picker__no-results {
+    display: none;
+    padding: ($constant-size-baseline * 3);
+    text-align: center;
+    color: $constant-color-neutral-base;
+
+    &--visible {
+      display: block;
+      @extend .mds-font-s-1;
+    }
+  }
+
+  // --- No-JS fallback: show checkbox list normally ---
+  html:not(.js) & .mds-category-picker__input-wrapper {
+    display: none;
+  }
+
+  html:not(.js) & .mds-category-picker__dropdown {
+    display: block;
+    position: static;
+    border: 0;
+    max-height: none;
+  }
+}

package/src/components/inputs/checkbox-list/README.md

@@ -12,6 +12,7 @@
 - `describedBy`: adding aria-describeby to the fieldset (if multiple checkboxes) or the input field if only one checkbox - **optional**
 - `options`: This is an array of objects containing the parameters for each option: `labelText`, `value`, `id`, `classes`
 - `selectedOptions`: Preselected checkboxes - Array or comma-separated string **optional**
+- `containerClasses`: Extra classes to add to the scrollable checkbox container (e.g. `mds-form-check-container--border--tall` for a taller list) **optional**
 - `i18n`: Text to translate/customise (object) **optional**
 
 ```

package/src/components/inputs/checkbox-list/_template.njk

@@ -130,7 +130,8 @@
       validationErrorId: validationErrorId,
       validationError: params.validationError
     }) }}
-    <div class="mds-form-check-container{% if hasBorder %} mds-form-check-container--border{% endif %}">
+
+    <div class="mds-form-check-container{% if hasBorder %} mds-form-check-container--border{% endif %}{% if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
       {{ createCheckboxes({
         options: params.options,
         selectedOptions: params.selectedOptions,

package/src/js/index.js

@@ -14,6 +14,7 @@ import { MdsTimeoutDialog } from '../components/timeout-dialog/timeout-dialog';
 import { MdsCardLink } from '../components/card/card-link';
 import { MdsConditionalSection } from '../components/conditional-section/conditional-section';
 import { MdsImageCropper } from '../components/image-cropper/image-cropper';
+import { MdsCategoryPicker } from '../components/inputs/category-picker/category-picker';
 
 if (!window.customElements.get('mds-dropdown-nav')) {
   window.customElements.define('mds-dropdown-nav', MdsDropdownNav);
@@ -30,6 +31,10 @@ if (!window.customElements.get('mds-conditional-section')) {
 if (!window.customElements.get('mds-image-cropper')) {
   window.customElements.define('mds-image-cropper', MdsImageCropper);
 }
+if (!window.customElements.get('mds-category-picker')) {
+  window.customElements.define('mds-category-picker', MdsCategoryPicker);
+}
+
 const initAll = () => {
   tabs.init();
   accordion.init();

package/src/scss/components/__index.scss

@@ -9,6 +9,7 @@
 @import '../../components/popover/popover';
 @import '../../components/notification/notification';
 @import '../../components/inputs/form-elements';
+@import '../../components/inputs/category-picker/category-picker';
 @import '../../components/inputs/combobox/combobox';
 @import '../../components/inputs/file-upload/file-upload';
 @import '../../components/inputs/textarea/textarea';