@gemeentenijmegen/web-components 0.0.2-alpha.41 → 0.0.2-alpha.43

package/dist/nijmegen-search.js

@@ -0,0 +1,133 @@
+(function () {
+  'use strict';
+
+  function styleInject(css, ref) {
+    if ( ref === void 0 ) ref = {};
+    var insertAt = ref.insertAt;
+
+    if (!css || typeof document === 'undefined') { return; }
+
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    style.type = 'text/css';
+
+    if (insertAt === 'top') {
+      if (head.firstChild) {
+        head.insertBefore(style, head.firstChild);
+      } else {
+        head.appendChild(style);
+      }
+    } else {
+      head.appendChild(style);
+    }
+
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+  }
+
+  var css_248z = "/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n/* TODO: Enable ordering properties when the plugin supports logical CSS properties\n * https://github.com/hudochenkov/stylelint-order/pull/162 */\n/* stylelint-disable order/properties-alphabetical-order */\n.nijmegen-search__container {\n  display: flex;\n  gap: var(--nijmegen-search-input-column-gap);\n  inline-size: var(--nijmegen-search-input-max-inline-size);\n  max-inline-size: 100%;\n  position: relative;\n}\n.nijmegen-search__container .utrecht-button {\n  max-block-size: 51px;\n  min-block-size: 51px;\n}\n.nijmegen-search__container.nijmegen-search__container--full-width {\n  inline-size: 100%;\n}\n\n.nijmegen-search__input-holder {\n  flex: 1;\n  position: relative;\n}\n\n.nijmegen-search__search-button.nijmegen-search__search-button--dark {\n  border-color: var(--nijmegen-search-input-button-border-color) !important;\n}\n@media (width < 576px) {\n  .nijmegen-search__search-button svg {\n    display: none;\n  }\n}\n\n.nijmegen-search__clear-button {\n  align-items: center;\n  aspect-ratio: 1/1;\n  background-color: transparent;\n  border: 0;\n  cursor: pointer;\n  display: flex;\n  height: 100%; /* stylelint-disable-line property-disallowed-list */\n  justify-content: center;\n  position: absolute;\n  right: 0; /* stylelint-disable-line property-disallowed-list */\n  top: 0; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-search__clear-button.nijmegen-search__clear-button--hide {\n  display: none;\n}\n.nijmegen-search__clear-button svg {\n  stroke: var(--nijmegen-interaction-color);\n}\n\n.nijmegen-search__input {\n  background-color: var(--nijmegen-search-input-background-color);\n  border-color: var(--nijmegen-search-input-border-color);\n  border-radius: var(--nijmegen-search-input-border-radius);\n  border-width: var(--nijmegen-search-input-border-width);\n  box-sizing: border-box;\n  color: var(--nijmegen-search-input-color);\n  font-family: var(--nijmegen-search-input-font-family);\n  font-size: var(--nijmegen-search-input-font-size);\n  font-weight: var(--nijmegen-search-input-font-weight);\n  line-height: var(--nijmegen-search-input-line-height);\n  min-block-size: var(--nijmegen-search-input-min-block-size);\n  padding-block-end: var(--nijmegen-search-input-padding-block-end);\n  padding-block-start: var(--nijmegen-search-input-padding-block-start);\n  padding-inline-end: var(--nijmegen-search-input-padding-inline-end);\n  padding-inline-start: var(--nijmegen-search-input-padding-inline-start);\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-search__input:hover, .nijmegen-search__input.nijmegen-search__input--hover {\n  background-color: var(--nijmegen-search-input-hover-background-color);\n  border-color: var(--nijmegen-search-input-hover-border-color);\n  color: var(--nijmegen-search-input-hover-color);\n}\n.nijmegen-search__input:focus, .nijmegen-search__input.nijmegen-search__input--focus {\n  background-color: var(--nijmegen-search-input-focus-background-color);\n  border-color: var(--nijmegen-search-input-focus-border-color);\n  color: var(--nijmegen-search-input-focus-color);\n}\n.nijmegen-search__input:focus-visible, .nijmegen-search__input.nijmegen-search__input--focus {\n  /* - The browser default focus ring should apply when these CSS custom properties are not set.\n   * - Make the `box-shadow` value available, so components that have their own `box-shadow`\n   *   can combine it with the focus ring box shadow.\n   */\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  box-shadow: var(--_utrecht-focus-ring-box-shadow);\n  outline-color: var(--utrecht-focus-outline-color, revert);\n  outline-offset: var(--utrecht-focus-outline-offset, revert);\n  outline-style: var(--utrecht-focus-outline-style, revert);\n  outline-width: var(--utrecht-focus-outline-width, revert);\n  z-index: 1;\n  background-color: var(--nijmegen-search-input-focus-background-color);\n  border-color: var(--nijmegen-search-input-focus-border-color);\n  color: var(--nijmegen-search-input-focus-color);\n}\n.nijmegen-search__input:read-only, .nijmegen-search__input.nijmegen-search__input-read-only {\n  background-color: var(--nijmegen-search-input-read-only-background-color);\n  border-color: var(--nijmegen-search-input-read-only-border-color);\n  color: var(--nijmegen-search-input-read-only-color);\n}\n.nijmegen-search__input.nijmegen-search__input--disabled {\n  background-color: var(--nijmegen-search-input-disabled-background-color);\n  border-color: var(--nijmegen-search-input-disabled-border-color);\n  color: var(--nijmegen-search-input-disabled-color);\n  cursor: var(--utrecht-action-disabled-cursor, not-allowed);\n}\n.nijmegen-search__input::placeholder {\n  color: var(--nijmegen-search-input-placeholder-color);\n}\n\n.nijmegen-search__autocomplete-results {\n  display: none;\n  margin-block-start: var(--nijmegen-search-input-autocomplete-offset, 8px);\n  position: absolute;\n  top: var(--nijmegen-search-input-min-block-size); /* stylelint-disable-line property-disallowed-list */\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-search__autocomplete-results--show-results {\n  display: block;\n}";
+  styleInject(css_248z);
+
+  var html = "<form class=\"nijmegen-search\" method=\"GET\" action=\"\" role=\"search\">\n  <slot></slot>\n</form>\n";
+
+  class NijmegenSearch extends HTMLElement {
+    constructor() {
+      super();
+      const template = document.createElement('template');
+      template.innerHTML = html;
+
+      const shadowRoot = this.attachShadow({ mode: 'open' });
+      shadowRoot.appendChild(template.content.cloneNode(true));
+
+      const stylesheet = new CSSStyleSheet();
+      stylesheet.replaceSync(css_248z);
+      shadowRoot.adoptedStyleSheets = [stylesheet];
+    }
+
+    connectedCallback() {
+      const input = this.querySelector('.nijmegen-search__input');
+      const clearButton = this.querySelector('.nijmegen-search__clear-button');
+      const resultsList = this.querySelector('.nijmegen-listbox__list');
+      const resultsContainer = this.querySelector('.nijmegen-search__autocomplete-results');
+
+      this.#initializeSearch(input, clearButton);
+      if (resultsContainer && resultsContainer.classList.contains('nijmegen-search__autocomplete-results--example')) {
+        this.#initializeAutocomplete(input, clearButton, resultsList, resultsContainer);
+      }
+    }
+
+    #initializeSearch(input, clearButton) {
+      if (input && clearButton) {
+        input.addEventListener('input', () => {
+          this.#toggleClearButton(input, clearButton);
+        });
+
+        clearButton.addEventListener('click', () => {
+          input.value = '';
+          this.#toggleClearButton(input, clearButton);
+          input.focus();
+        });
+      }
+    }
+
+    #initializeAutocomplete(input, clearButton, resultsList, resultsContainer) {
+      if (input && clearButton && resultsList && resultsContainer) {
+        input.addEventListener('input', () => {
+          if (input.value.trim().length >= 3) {
+            this.#getAutocompleteResults(input.value, (results) => {
+              this.#showResults(results, resultsList, resultsContainer);
+            });
+          } else {
+            this.#hideResults(resultsList, resultsContainer);
+          }
+        });
+
+        clearButton.addEventListener('click', () => {
+          this.#hideResults(resultsList, resultsContainer);
+        });
+      }
+    }
+
+    #toggleClearButton(input, clearButton) {
+      if (input.value.trim().length > 0) {
+        clearButton.classList.remove('nijmegen-search__clear-button--hide');
+      } else {
+        clearButton.classList.add('nijmegen-search__clear-button--hide');
+      }
+    }
+
+    #getAutocompleteResults(query, callback) {
+      const cleanQuery = this.#cleanAutoCompleteQuery(query);
+      const results = [
+        { title: 'Finibus ' + cleanQuery, url: '?q=1_' + cleanQuery },
+        { title: cleanQuery + ' elementum urna', url: '?q=2_' + cleanQuery },
+      ];
+
+      callback(results);
+    }
+
+    #showResults(results, resultsList, resultsContainer) {
+      resultsList.innerHTML = results
+        .map((result) => `<li><a href="${result.url}" class="nijmegen-listbox__item">${result.title}</a></li>`)
+        .join('');
+      resultsContainer.classList.add('nijmegen-search__autocomplete-results--show-results');
+    }
+
+    #hideResults(resultsList, resultsContainer) {
+      resultsList.innerHTML = '';
+      resultsContainer.classList.remove('nijmegen-search__autocomplete-results--show-results');
+    }
+
+    #cleanAutoCompleteQuery(query) {
+      const p = document.createElement('p');
+      p.innerText = query;
+      return p.innerHTML;
+    }
+  }
+
+  customElements.define('nijmegen-search', NijmegenSearch);
+
+})();

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2-alpha.41",
+  "version": "0.0.2-alpha.43",
   "author": "gemeente Nijmegen",
   "description": "Web components for the gemeente Nijmegen design system",
   "license": "EUPL-1.2",
@@ -26,12 +26,12 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@gemeentenijmegen/components-css": "0.0.1-alpha.64",
+    "@gemeentenijmegen/components-css": "0.0.1-alpha.66",
     "postcss-discard-duplicates": "7.0.1",
     "rollup": "4.12.1",
     "rollup-plugin-html": "0.2.1",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-postcss": "4.0.2"
   },
-  "gitHead": "0d406face5f1bc24f8445987f01a0079a726dce0"
+  "gitHead": "d9987e4bca2e19462770aebd18aa36b6a23f1004"
 }

package/src/search/search.js

@@ -0,0 +1,99 @@
+import style from '@gemeentenijmegen/components-css/search/index.scss';
+import html from './template.html';
+
+class NijmegenSearch extends HTMLElement {
+  constructor() {
+    super();
+    const template = document.createElement('template');
+    template.innerHTML = html;
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    const stylesheet = new CSSStyleSheet();
+    stylesheet.replaceSync(style);
+    shadowRoot.adoptedStyleSheets = [stylesheet];
+  }
+
+  connectedCallback() {
+    const input = this.querySelector('.nijmegen-search__input');
+    const clearButton = this.querySelector('.nijmegen-search__clear-button');
+    const resultsList = this.querySelector('.nijmegen-listbox__list');
+    const resultsContainer = this.querySelector('.nijmegen-search__autocomplete-results');
+
+    this.#initializeSearch(input, clearButton);
+    if (resultsContainer && resultsContainer.classList.contains('nijmegen-search__autocomplete-results--example')) {
+      this.#initializeAutocomplete(input, clearButton, resultsList, resultsContainer);
+    }
+  }
+
+  #initializeSearch(input, clearButton) {
+    if (input && clearButton) {
+      input.addEventListener('input', () => {
+        this.#toggleClearButton(input, clearButton);
+      });
+
+      clearButton.addEventListener('click', () => {
+        input.value = '';
+        this.#toggleClearButton(input, clearButton);
+        input.focus();
+      });
+    }
+  }
+
+  #initializeAutocomplete(input, clearButton, resultsList, resultsContainer) {
+    if (input && clearButton && resultsList && resultsContainer) {
+      input.addEventListener('input', () => {
+        if (input.value.trim().length >= 3) {
+          this.#getAutocompleteResults(input.value, (results) => {
+            this.#showResults(results, resultsList, resultsContainer);
+          });
+        } else {
+          this.#hideResults(resultsList, resultsContainer);
+        }
+      });
+
+      clearButton.addEventListener('click', () => {
+        this.#hideResults(resultsList, resultsContainer);
+      });
+    }
+  }
+
+  #toggleClearButton(input, clearButton) {
+    if (input.value.trim().length > 0) {
+      clearButton.classList.remove('nijmegen-search__clear-button--hide');
+    } else {
+      clearButton.classList.add('nijmegen-search__clear-button--hide');
+    }
+  }
+
+  #getAutocompleteResults(query, callback) {
+    const cleanQuery = this.#cleanAutoCompleteQuery(query);
+    const results = [
+      { title: 'Finibus ' + cleanQuery, url: '?q=1_' + cleanQuery },
+      { title: cleanQuery + ' elementum urna', url: '?q=2_' + cleanQuery },
+    ];
+
+    callback(results);
+  }
+
+  #showResults(results, resultsList, resultsContainer) {
+    resultsList.innerHTML = results
+      .map((result) => `<li><a href="${result.url}" class="nijmegen-listbox__item">${result.title}</a></li>`)
+      .join('');
+    resultsContainer.classList.add('nijmegen-search__autocomplete-results--show-results');
+  }
+
+  #hideResults(resultsList, resultsContainer) {
+    resultsList.innerHTML = '';
+    resultsContainer.classList.remove('nijmegen-search__autocomplete-results--show-results');
+  }
+
+  #cleanAutoCompleteQuery(query) {
+    const p = document.createElement('p');
+    p.innerText = query;
+    return p.innerHTML;
+  }
+}
+
+customElements.define('nijmegen-search', NijmegenSearch);

package/src/search/template.html

@@ -0,0 +1,3 @@
+<form class="nijmegen-search" method="GET" action="" role="search">
+  <slot></slot>
+</form>