@postnord/pn-marketweb-components 2.0.3-beta3 → 2.0.4

package/umd/modules/@postnord/web-components/collection/components/input/pn-select/pn-select.js

@@ -0,0 +1,682 @@
+import { Component, h, Host, Element, Prop, Listen, State, Watch, Event, forceUpdate } from "@stencil/core";
+export class Pnselect {
+  constructor() {
+    /** should this select contain a search field? */
+    this.searchable = false;
+    /** label placed above the select */
+    this.label = null;
+    /** this is what will be shown on load if no child is preselected */
+    this.placeholder = null;
+    /** pass this if you want a checkbox on the parent, you'll have to pass the same prop to all of your children */
+    this.checkbox = false;
+    /** REQUIRED if you have a checkbox on your select */
+    this.checkboxid = '';
+    /** determines the status of the checkbox on the parent */
+    this.checked = false;
+    /** determines the status of the checkbox on the parent */
+    this.indeterminate = false;
+    /** error message (this will apply the invalid styles automatically) */
+    this.error = '';
+    /** Error state without error message (If you want to control the error messaging on your own) */
+    this.invalid = false;
+    this.value = null;
+    this.internalValue = null;
+    this.open = false;
+    this.upwards = false;
+    this.loaded = false;
+    this.handleGlobalEvents = this.globalHandler.bind(this);
+    this.hiddenOptions = [];
+    this.visibleOptions = [];
+    this.searchDebounce = null;
+  }
+  componentWillLoad() {
+    this.loaded = true;
+  }
+  componentDidLoad() {
+    this.registerEventHandlers();
+    if (this.mo)
+      this.mo.disconnect();
+    const mo = this.mo = new MutationObserver(() => {
+      forceUpdate(this.hostElement);
+      this.elementInit();
+    });
+    mo.observe(this.hostElement, { childList: true });
+    this.initialize();
+  }
+  initialize() {
+    this.elementInit();
+  }
+  // Handler for the parent checkbox
+  changeHandler(e) {
+    const target = e.composedPath()[0];
+    if (target === this.parentCheckbox) {
+      this.checked = target.checked;
+      this.indeterminate = false;
+      this.checkchange.emit(e);
+    }
+  }
+  // The event that bubbles up from the children upon making a new selection
+  selectOptionHandler(e) {
+    const target = e.composedPath()[0];
+    const currentSelection = this.hostElement.querySelector('.current-selection pn-option');
+    const clonedContent = target.innerHTML;
+    currentSelection.innerHTML = clonedContent;
+    this.options.forEach((optionEl) => {
+      if (optionEl !== target) {
+        optionEl.removeAttribute('selected');
+      }
+    });
+    this.internalValue = e.detail;
+    this.selectchange.emit(this.internalValue);
+    this.open = false;
+  }
+  /*---------------------------------------OPEN HANDLER-------------------------------------------*/
+  stateHandler() {
+    this.flip(() => {
+      this.hostElement.dataset.state = this.open ? 'open' : 'collapsed';
+      if (this.open)
+        this.checkOrientation();
+    }, this.animatedEls);
+    if (this.open) {
+      document.addEventListener('click', this.handleGlobalEvents);
+      document.addEventListener('keyup', this.handleGlobalEvents);
+      document.addEventListener('scroll', this.handleGlobalEvents);
+    }
+    if (!this.open) {
+      document.removeEventListener('click', this.handleGlobalEvents);
+      document.removeEventListener('keyup', this.handleGlobalEvents);
+      document.removeEventListener('scroll', this.handleGlobalEvents);
+      this.hostElement.focus();
+    }
+    ;
+  }
+  globalHandler(e) {
+    const target = e.composedPath()[0];
+    // global events that we want to track to close the select, like "click outside" or tab out
+    if (!this.hostElement.contains(target) &&
+      e.type !== 'scroll') {
+      this.open = false;
+    }
+    else if (e.type === 'scroll') {
+      const top = this.hostElement.getBoundingClientRect().top;
+      const bottom = window.innerHeight - this.hostElement.getBoundingClientRect().bottom;
+      if (bottom <= 0 || top <= 0) {
+        this.open = false;
+      }
+    }
+  }
+  /*---------------------------------------/OPEN HANDLER-------------------------------------------*/
+  elementInit() {
+    this.options = Array.from(this.hostElement.querySelectorAll('.select-options pn-option'));
+    this.selectEl = this.hostElement.querySelector(".pn-select");
+    this.selectContent = this.hostElement.querySelector(".select-content");
+    this.animatedEls = this.hostElement.querySelectorAll("[data-select-flip]");
+    this.optionsList = this.hostElement.querySelector('.select-options');
+    if (this.searchable) {
+      this.searchField = this.hostElement.querySelector('.select-search-input');
+    }
+    if (this.checkbox) {
+      this.parentCheckbox = this.hostElement.querySelector('.current-selection pn-checkbox input');
+      const checkboxes = Array.from(this.hostElement.querySelectorAll('.select-options pn-checkbox input'));
+      if (checkboxes.length <= 0)
+        return;
+      checkboxes.forEach((el) => {
+        el.setAttribute('tabindex', '-1');
+      });
+    }
+    this.options.forEach((option, i) => {
+      option.dataset.index = `${i}`;
+      i = this.searchable ? i + 1 : i;
+      option.style.setProperty("--i", `${i}`);
+      option.setAttribute('index', `${i}`);
+      option.setAttribute('select-has-loaded', `${this.loaded}`);
+      if (this.value)
+        option.setAttribute('parent-value', `${this.value}`);
+    });
+  }
+  setFocusToList() {
+    // If the focus lay outside of the scope of the list of options, retrieve it and reset it to the list
+    const { activeElement } = this.hostElement.getRootNode();
+    requestAnimationFrame(() => {
+      if (activeElement.nodeName !== ('PN-OPTION')) {
+        if (this.searchable) {
+          this.searchField.focus();
+          return;
+        }
+        if (this.visibleOptions.length > 0) {
+          this.visibleOptions[0].focus();
+          return;
+        }
+        this.options[0].focus();
+      }
+    });
+  }
+  focusNextOption() {
+    const { activeElement } = this.hostElement.getRootNode();
+    // Find the first visible item in the list and focus it
+    if (activeElement === this.hostElement.querySelector('.select-search-input')) {
+      const focused = this.options.find((option) => {
+        if (!option.classList.contains('hidden')) {
+          return option;
+        }
+      });
+      focused.focus();
+      return;
+    }
+    // Determine which visible item is subsequent to the active one and focus it
+    if ((activeElement.nextElementSibling &&
+      activeElement.nextElementSibling.nodeName === 'PN-OPTION')) {
+      if (activeElement.nextElementSibling.classList.contains('hidden')) {
+        const focused = this.options.find((el, i) => {
+          if (i > parseInt(activeElement.dataset.index) &&
+            !el.classList.contains('hidden')) {
+            return el;
+          }
+        });
+        if (focused)
+          focused.focus();
+        return;
+      }
+      activeElement.nextElementSibling.focus();
+      return;
+    }
+    this.setFocusToList();
+  }
+  focusPrevOption() {
+    const { activeElement } = this.hostElement.getRootNode();
+    // Find the first visible item in the list and focus it
+    if (activeElement === this.hostElement.querySelector('.select-search-input')) {
+      const focused = this.options.find((option) => {
+        if (!option.classList.contains('hidden')) {
+          return option;
+        }
+      });
+      focused.focus();
+      return;
+    }
+    // Check if list is filtered and determine if the current focus is on the element closest to the search field
+    if (this.searchable &&
+      (activeElement === this.visibleOptions[0] ||
+        activeElement.previousElementSibling.classList.contains('select-search'))) {
+      this.searchField.focus();
+      return;
+    }
+    // Determine which visible item is prior to the active one and focus it
+    if ((activeElement.previousElementSibling &&
+      activeElement.previousElementSibling.nodeName === 'PN-OPTION')) {
+      if (activeElement.previousElementSibling.classList.contains('hidden')) {
+        const focused = this.options.find((el, i) => {
+          if (i < parseInt(activeElement.dataset.index) &&
+            !el.classList.contains('hidden')) {
+            return el;
+          }
+        });
+        if (focused)
+          focused.focus();
+        return;
+      }
+      activeElement.previousElementSibling.focus();
+      return;
+    }
+    this.setFocusToList();
+  }
+  registerEventHandlers() {
+    /*----------------------------------MOUSE---------------------------------*/
+    // Make sure the user isn't clicking the searchfield or is trying to make a selection/check a checkbox/clicking the currently selected option
+    this.hostElement.addEventListener('click', (e) => {
+      const target = e.composedPath()[0];
+      if ((target.nodeName !== 'PN-OPTION') &&
+        (target.closest('.pn-option-content') === null) &&
+        target.closest('pn-checkbox') === null &&
+        target.closest('.select-search') === null ||
+        target.closest('pn-option') !== null &&
+          target.closest('pn-option').hasAttribute('selected')) {
+        this.open = !this.open;
+      }
+    });
+    /*----------------------------------/MOUSE---------------------------------*/
+    /*--------------------------------KEYBOARD-------------------------------*/
+    const codes = ['Enter', 'Space', 'ArrowUp', 'ArrowDown'];
+    this.hostElement.addEventListener('keydown', (e) => {
+      const target = e.composedPath()[0];
+      if (codes.includes(e.code)) {
+        // We want to stop the page from scrolling when the user is interacting with the select via keyboard
+        // but we don't want to hijack the behaviour of the input field
+        if (target.closest('.select-search') === null) {
+          e.preventDefault();
+        }
+        else if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
+          e.preventDefault();
+        }
+        if (!this.open) {
+          this.open = true;
+          this.setFocusToList();
+          return;
+        }
+        // Cases where we want to close the select without making a new selection
+        if (['Space', 'Enter'].includes(e.code) &&
+          (target.nodeName !== 'PN-OPTION' ||
+            target.hasAttribute('selected')) &&
+          target.closest('.select-search') === null) {
+          this.open = false;
+        }
+        if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
+          if (this.upwards) {
+            if (e.code === 'ArrowUp') {
+              this.focusNextOption();
+            }
+            ;
+            if (e.code === 'ArrowDown') {
+              this.focusPrevOption();
+            }
+          }
+          else {
+            if (e.code === 'ArrowUp') {
+              this.focusPrevOption();
+            }
+            if (e.code === 'ArrowDown') {
+              this.focusNextOption();
+            }
+            ;
+          }
+        }
+      }
+      ;
+      if ((e.code) === 'Escape') {
+        this.open = false;
+      }
+    });
+    /*--------------------------------/KEYBOARD-------------------------------*/
+  }
+  checkOrientation() {
+    this.optionsList.style.removeProperty('max-height');
+    const selectPosBottomFromTop = this.hostElement.getBoundingClientRect().bottom;
+    const selectPosBottom = window.innerHeight - selectPosBottomFromTop;
+    const selectPosTop = this.hostElement.getBoundingClientRect().top;
+    const contentSize = this.selectContent.getBoundingClientRect().height;
+    if (window.innerHeight - selectPosBottomFromTop < contentSize
+      && selectPosTop > window.innerHeight - selectPosBottomFromTop) {
+      this.upwards = true;
+      this.hostElement.classList.add("upwards");
+      if (selectPosTop < contentSize) {
+        if (selectPosTop - 50 < 250) {
+          this.optionsList.style.setProperty('max-height', `250px`);
+          return;
+        }
+        if (selectPosTop - 50 > 600) {
+          this.optionsList.style.setProperty('max-height', `600px`);
+          return;
+        }
+        this.optionsList.style.setProperty('max-height', `${selectPosTop - 50}px`);
+      }
+    }
+    else {
+      this.upwards = false;
+      this.hostElement.classList.remove("upwards");
+      if (selectPosBottom < contentSize) {
+        if (selectPosBottom - 50 < 250) {
+          this.optionsList.style.setProperty('max-height', `250px`);
+          return;
+        }
+        if ((selectPosBottom - 50) > 600) {
+          this.optionsList.style.setProperty('max-height', `600px`);
+          return;
+        }
+        this.optionsList.style.setProperty('max-height', `${selectPosBottom - 50}px`);
+      }
+    }
+  }
+  getRect(el) {
+    return el.getBoundingClientRect();
+  }
+  flip(layoutChange, firstEls, getLastEls = () => firstEls) {
+    const firstElsRects = Array.from(firstEls).map((el) => [el, this.getRect(el)]);
+    requestAnimationFrame(() => {
+      layoutChange();
+      const lastElsRects = Array.from(getLastEls()).map((el) => [el, this.getRect(el)]);
+      //@ts-ignore
+      firstElsRects.forEach(([firstEl, firstRect], i) => {
+        let [lastEl, lastRect] = lastElsRects[i];
+        const dx = lastRect.x - firstRect.x;
+        const dy = lastRect.y - firstRect.y;
+        const dw = lastRect.width / firstRect.width;
+        const dh = lastRect.height / firstRect.height;
+        lastEl.dataset.flipping = true;
+        lastEl.style.setProperty("--dx", dx);
+        lastEl.style.setProperty("--dy", dy);
+        lastEl.style.setProperty("--dw", dw);
+        lastEl.style.setProperty("--dh", dh);
+        requestAnimationFrame(() => delete lastEl.dataset.flipping);
+      });
+    });
+  }
+  // ================================== SEARCH ==================================== //
+  manageOptionVisibility(hiddenItems, arr) {
+    if (hiddenItems) {
+      this.flip(() => {
+        this.optionsList.dataset.hidden = 'true';
+      }, 
+      //@ts-ignore
+      [...this.options, ...this.animatedEls]);
+    }
+    else {
+      this.flip(() => {
+        delete this.optionsList.dataset.hidden;
+      }, 
+      //@ts-ignore
+      [...this.options, ...this.animatedEls]);
+      arr.forEach(el => {
+        el.classList.remove('hidden');
+      });
+    }
+  }
+  filterSearch({ target }) {
+    if (this.searchDebounce !== null) {
+      clearTimeout(this.searchDebounce);
+      this.searchDebounce = null;
+    }
+    this.searchDebounce = setTimeout(() => {
+      this.hiddenOptions = [];
+      this.visibleOptions = [];
+      this.options.forEach(el => {
+        if (!el.innerText.toLowerCase().includes(target.value.toLowerCase())) {
+          el.classList.add('hidden');
+          el.removeAttribute('tabindex');
+          this.hiddenOptions.push(el);
+        }
+        else {
+          el.setAttribute('tabindex', '-1');
+          this.visibleOptions.push(el);
+        }
+      });
+      if (this.hiddenOptions.length > 0) {
+        this.manageOptionVisibility(true, null);
+      }
+      else {
+        this.manageOptionVisibility(false, this.visibleOptions);
+      }
+    }, 200);
+  }
+  // ================================== /SEARCH ==================================== //
+  getClassNames() {
+    let classNames = 'pn-select ';
+    if (this.searchable)
+      classNames += 'search ';
+    if (this.label)
+      classNames += 'select-label ';
+    if (this.error || this.invalid)
+      classNames += 'select-error ';
+    if (this.error)
+      classNames += 'select-error-message ';
+    return classNames;
+  }
+  render() {
+    return (h(Host, { class: this.getClassNames(), tabindex: "0", "data-state": "collapsed" },
+      this.label && h("label", null, this.label),
+      h("span", null, this.placeholder || ""),
+      h("div", { class: "select-content", "data-select-flip": true },
+        h("div", { class: "select-bg-top", "data-select-flip": true }),
+        h("div", { class: "select-bg-bottom", "data-select-flip": true }),
+        h("div", { class: "select-bg" }),
+        h("div", { class: "current-selection" },
+          this.checkbox &&
+            h("pn-checkbox", { checkboxid: this.checkboxid, checked: this.checked, indeterminate: this.indeterminate }),
+          h("pn-option", null, this.placeholder),
+          h("svg", { class: "arrow", width: "18", height: "10", viewBox: "0 0 18 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L0.292892 1.70711C-0.0976315 1.31658 -0.0976315 0.683417 0.292892 0.292893C0.683418 -0.0976315 1.31658 -0.0976315 1.70711 0.292893L9 7.58579L16.2929 0.292893C16.6834 -0.0976315 17.3166 -0.0976315 17.7071 0.292893C18.0976 0.683417 18.0976 1.31658 17.7071 1.70711L9.70711 9.70711Z" }))),
+        h("div", { class: "select-options", "aria-hidden": !this.open },
+          h("hr", null),
+          this.searchable &&
+            h("div", { class: "select-search", style: { '--i': '0' } },
+              h("input", { class: "select-search-input", tabindex: !this.open ? '-1' : '0', onInput: (e) => this.filterSearch(e), type: "text", placeholder: "search" })),
+          h("slot", null))),
+      this.error &&
+        h("small", null,
+          h("pn-icon", { symbol: "alert-exclamation-circle", small: true, color: "warning" }),
+          this.error)));
+  }
+  static get is() { return "pn-select"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-select.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-select.css"]
+  }; }
+  static get properties() { return {
+    "searchable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "should this select contain a search field?"
+      },
+      "attribute": "searchable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "label placed above the select"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "this is what will be shown on load if no child is preselected"
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "checkbox": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "pass this if you want a checkbox on the parent, you'll have to pass the same prop to all of your children"
+      },
+      "attribute": "checkbox",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "checkboxid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "REQUIRED if you have a checkbox on your select"
+      },
+      "attribute": "checkboxid",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "determines the status of the checkbox on the parent"
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "determines the status of the checkbox on the parent"
+      },
+      "attribute": "indeterminate",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "error": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "error message (this will apply the invalid styles automatically)"
+      },
+      "attribute": "error",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Error state without error message (If you want to control the error messaging on your own)"
+      },
+      "attribute": "invalid",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get states() { return {
+    "internalValue": {},
+    "open": {},
+    "upwards": {},
+    "loaded": {}
+  }; }
+  static get events() { return [{
+      "method": "selectchange",
+      "name": "selectchange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "this will be emitted when the current selection changes"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "checkchange",
+      "name": "checkchange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "this will be emitted when the value of the parent checkbox changes"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "stateHandler"
+    }]; }
+  static get listeners() { return [{
+      "name": "change",
+      "method": "changeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "selectOption",
+      "method": "selectOptionHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}