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

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

@@ -0,0 +1,479 @@
+import { HTMLElement, createEvent, forceUpdate, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './pn-checkbox2.js';
+import { d as defineCustomElement$3 } from './pn-icon2.js';
+import { d as defineCustomElement$2 } from './pn-option2.js';
+
+const pnSelectCss = "pn-select{cursor:pointer;outline:none;position:relative;display:-ms-flexbox;display:flex;padding:0.6em 1em;z-index:0;-webkit-transition:z-index 0s 0.5s;transition:z-index 0s 0.5s;}pn-select.select-label{padding-top:1.9em}pn-select.select-label .select-content{margin-top:1.9em}pn-select.select-label>label{position:absolute;top:1.25em;left:0;-webkit-transform:translateY(-100%);transform:translateY(-100%);font-size:0.875em;color:#5E554A}pn-select.select-error{color:#A70707}pn-select.select-error.select-error-message{padding-bottom:1.9em}pn-select.select-error.select-error-message .select-content{margin-bottom:1.9em}pn-select.select-error>label{color:#A70707}pn-select.select-error .current-selection>pn-option{color:#A70707}pn-select.select-error .current-selection>svg.arrow{fill:#A70707}pn-select.select-error>small{color:#A70707;font-size:0.75em;font-size:max(.6em, 1.2rem);position:absolute;bottom:1.25em;left:0;-webkit-transform:translateY(100%);transform:translateY(100%)}pn-select.select-error>small>pn-icon{margin-right:0.25em}pn-select.select-error .select-bg-top,pn-select.select-error .select-bg-bottom,pn-select.select-error .select-bg{border-color:#A70707}pn-select>span{min-height:1.5em;display:block;width:100%;white-space:nowrap;opacity:0;padding-right:2em}pn-select:hover .select-bg,pn-select:hover .select-bg-top,pn-select:hover .select-bg-bottom{border-color:#00A0D6}pn-select:focus .select-bg-top,pn-select:focus-within .select-bg-top,pn-select:not(.search):active .select-bg-top{border-color:#005D92;-webkit-box-shadow:-0.1rem -0.1rem 0 0 #005D92, 0.1rem -0.1rem 0 0 #005D92;box-shadow:-0.1rem -0.1rem 0 0 #005D92, 0.1rem -0.1rem 0 0 #005D92}pn-select:focus .select-bg,pn-select:focus-within .select-bg,pn-select:not(.search):active .select-bg{border-color:#005D92;-webkit-box-shadow:-0.1rem 0 0 0 #005D92, -0.1rem 0 0 0 #005D92, 0.1rem 0 0 0 #005D92, 0.1rem 0 0 0 #005D92;box-shadow:-0.1rem 0 0 0 #005D92, -0.1rem 0 0 0 #005D92, 0.1rem 0 0 0 #005D92, 0.1rem 0 0 0 #005D92}pn-select:focus .select-bg-bottom,pn-select:focus-within .select-bg-bottom,pn-select:not(.search):active .select-bg-bottom{border-color:#005D92;-webkit-box-shadow:0.1rem 0.1rem 0 0 #005D92, -0.1rem 0.1rem 0 0 #005D92;box-shadow:0.1rem 0.1rem 0 0 #005D92, -0.1rem 0.1rem 0 0 #005D92}.current-selection{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 1em;position:relative;z-index:2;min-height:1.5em}.current-selection pn-checkbox{margin-right:0.5em}.current-selection pn-option{pointer-events:none;color:#005D92;font-weight:500;overflow:hidden;white-space:nowrap;-ms-flex:1 1;flex:1 1}.current-selection pn-option .pn-option-content{width:100%;overflow-x:hidden;text-overflow:ellipsis}.current-selection>svg.arrow{-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s;fill:#005D92;-ms-flex-negative:0;flex-shrink:0;margin-left:0.5em}.select-content{position:absolute;z-index:3;top:0;left:0;margin:0.6em 0;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transition:border 0.1s, -webkit-transform 0.2s 0.2s cubic-bezier(0.7, 0, 0.3, 1), -webkit-box-shadow 0.1s;transition:border 0.1s, -webkit-transform 0.2s 0.2s cubic-bezier(0.7, 0, 0.3, 1), -webkit-box-shadow 0.1s;transition:transform 0.2s 0.2s cubic-bezier(0.7, 0, 0.3, 1), border 0.1s, box-shadow 0.1s;transition:transform 0.2s 0.2s cubic-bezier(0.7, 0, 0.3, 1), border 0.1s, box-shadow 0.1s, -webkit-transform 0.2s 0.2s cubic-bezier(0.7, 0, 0.3, 1), -webkit-box-shadow 0.1s}.select-content[data-flipping]{-webkit-transition:none;transition:none}div.select-options{position:absolute;left:0;right:0;top:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;pointer-events:none;padding:0.1em;z-index:3;overflow-y:auto;visibility:hidden;-webkit-transition:visibility 0s 0.2s;transition:visibility 0s 0.2s}div.select-options>*{width:100%}div.select-options>hr{border:0.1rem solid #005D92;border-bottom:0;margin:0.6em 0 0;opacity:0;-webkit-transition:opacity 0.4s;transition:opacity 0.4s}div.select-options input[type=text]{border:0.1rem solid #5E554A;width:100%;padding:0.5em;border-radius:0.8rem;outline:none;-webkit-transition:border 0.1s, -webkit-box-shadow 0.1s ease-in-out;transition:border 0.1s, -webkit-box-shadow 0.1s ease-in-out;transition:box-shadow 0.1s ease-in-out, border 0.1s;transition:box-shadow 0.1s ease-in-out, border 0.1s, -webkit-box-shadow 0.1s ease-in-out}div.select-options input[type=text]:hover{border:0.1rem solid #00A0D6}div.select-options input[type=text]:focus{-webkit-box-shadow:0 0 0 0.1rem #005D92;box-shadow:0 0 0 0.1rem #005D92;border:0.1rem solid #005D92}div.select-options .select-search,div.select-options pn-option{-webkit-transition:opacity 0.4s, -webkit-transform 0.4s cubic-bezier(0.7, 0, 0.1, 1) 0.2s;transition:opacity 0.4s, -webkit-transform 0.4s cubic-bezier(0.7, 0, 0.1, 1) 0.2s;transition:transform 0.4s cubic-bezier(0.7, 0, 0.1, 1) 0.2s, opacity 0.4s;transition:transform 0.4s cubic-bezier(0.7, 0, 0.1, 1) 0.2s, opacity 0.4s, -webkit-transform 0.4s cubic-bezier(0.7, 0, 0.1, 1) 0.2s;opacity:0;padding:1em}div.select-options .select-search[data-flipping],div.select-options pn-option[data-flipping]{-webkit-transition:opacity 0.4s, -webkit-transform 0s;transition:opacity 0.4s, -webkit-transform 0s;transition:transform 0s, opacity 0.4s;transition:transform 0s, opacity 0.4s, -webkit-transform 0s;-webkit-transform:translate(calc(-1px * var(--dx)), calc(-1px * var(--dy)));transform:translate(calc(-1px * var(--dx)), calc(-1px * var(--dy)))}div.select-options .select-search{z-index:2}div.select-options .select-search+pn-option{margin-top:0.1em}div.select-options pn-option{z-index:1}div.select-options pn-option+pn-option{margin-top:0.1em}div.select-options[data-hidden=true] pn-option.hidden{position:absolute;top:1.1em;opacity:0;width:100%;z-index:0;pointer-events:none;background:transparent}.select-bg{border-right:0.1rem solid black;border-left:0.1rem solid black;position:absolute;left:0;right:0;top:0;bottom:0;background-color:#fff;-webkit-transition:inherit;transition:inherit;-webkit-transform-origin:top left;transform-origin:top left;pointer-events:none}[data-flipping]>.select-bg{-webkit-transform:scaleY(calc(1 / var(--dh)));transform:scaleY(calc(1 / var(--dh)))}.select-bg-top,.select-bg-bottom{position:absolute;left:0;right:0;height:1.3em;border:0.1rem solid black;background-color:white}.select-bg-top{border-radius:0.8rem 0.8rem 0 0;top:-0.6em;border-bottom:none;-webkit-transition:inherit;transition:inherit}[data-flipping]>.select-bg-top{-webkit-transform:translateY(calc(-1px * var(--dy)));transform:translateY(calc(-1px * var(--dy)))}.select-bg-bottom{border-radius:0 0 0.8rem 0.8rem;border-top:none;-webkit-transition:inherit;transition:inherit;bottom:-0.6em;z-index:2}[data-flipping]>.select-bg-bottom{-webkit-transform:translateY(calc(-1px * var(--dy)));transform:translateY(calc(-1px * var(--dy)))}.pn-select.upwards .select-content{top:unset;bottom:0;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.pn-select.upwards .select-content div.select-options{bottom:100%;top:unset;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.pn-select.upwards .select-content div.select-options>hr{margin:0 0 0.6em}.pn-select.upwards .select-content div.select-options[data-hidden=true] pn-option.hidden{top:unset;bottom:1.3em}.pn-select.upwards .select-content .select-bg{-webkit-transform-origin:bottom left;transform-origin:bottom left}.pn-select.upwards .select-content .select-bg-bottom{-webkit-transition:none;transition:none}.pn-select.upwards pn-option+pn-option{margin-top:0;margin-bottom:0.1em}.pn-select[data-state=open]{z-index:5;-webkit-transition-delay:0s;transition-delay:0s}.pn-select[data-state=open] div.select-options{position:relative;pointer-events:unset;-webkit-transition:none;transition:none;visibility:visible}.pn-select[data-state=open] div.select-options[data-hidden=true] pn-option{-webkit-transition:opacity 0.2s, background 0.2s, -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.1, 1), -webkit-box-shadow 0.1s;transition:opacity 0.2s, background 0.2s, -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.1, 1), -webkit-box-shadow 0.1s;transition:opacity 0.2s, transform 0.2s cubic-bezier(0.7, 0, 0.1, 1), background 0.2s, box-shadow 0.1s;transition:opacity 0.2s, transform 0.2s cubic-bezier(0.7, 0, 0.1, 1), background 0.2s, box-shadow 0.1s, -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.1, 1), -webkit-box-shadow 0.1s}.pn-select[data-state=open] div.select-options[data-hidden=true] pn-option+.select-search{margin-top:0}.pn-select[data-state=open] div.select-options[data-hidden=true] pn-option[data-flipping]{-webkit-transition:opacity 3s, -webkit-transform 0s;transition:opacity 3s, -webkit-transform 0s;transition:transform 0s, opacity 3s;transition:transform 0s, opacity 3s, -webkit-transform 0s}.pn-select[data-state=open] pn-option,.pn-select[data-state=open] .select-search,.pn-select[data-state=open] hr{opacity:1;-webkit-transition:opacity 0.4s calc(0.2s + (var(--i) * 0.03s)), background 0.2s, -webkit-transform 0.4s cubic-bezier(0.7, 0, 0.1, 1) 0.2s, -webkit-box-shadow 0.2s;transition:opacity 0.4s calc(0.2s + (var(--i) * 0.03s)), background 0.2s, -webkit-transform 0.4s cubic-bezier(0.7, 0, 0.1, 1) 0.2s, -webkit-box-shadow 0.2s;transition:opacity 0.4s calc(0.2s + (var(--i) * 0.03s)), transform 0.4s cubic-bezier(0.7, 0, 0.1, 1) 0.2s, background 0.2s, box-shadow 0.2s;transition:opacity 0.4s calc(0.2s + (var(--i) * 0.03s)), transform 0.4s cubic-bezier(0.7, 0, 0.1, 1) 0.2s, background 0.2s, box-shadow 0.2s, -webkit-transform 0.4s cubic-bezier(0.7, 0, 0.1, 1) 0.2s, -webkit-box-shadow 0.2s}.pn-select[data-state=open] .select-content{-webkit-transition-delay:0s;transition-delay:0s}.pn-select[data-state=open] .current-selection svg.arrow{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transition-delay:0s;transition-delay:0s}";
+
+let Pnselect = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.selectchange = createEvent(this, "selectchange", 7);
+    this.checkchange = createEvent(this, "checkchange", 7);
+    /** 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)));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "open": ["stateHandler"]
+  }; }
+  static get style() { return pnSelectCss; }
+};
+Pnselect = /*@__PURE__*/ proxyCustomElement(Pnselect, [4, "pn-select", {
+    "searchable": [4],
+    "label": [1],
+    "placeholder": [1],
+    "checkbox": [4],
+    "checkboxid": [1],
+    "checked": [1028],
+    "indeterminate": [1028],
+    "error": [1],
+    "invalid": [4],
+    "value": [1],
+    "internalValue": [32],
+    "open": [32],
+    "upwards": [32],
+    "loaded": [32]
+  }, [[0, "change", "changeHandler"], [0, "selectOption", "selectOptionHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-select", "pn-checkbox", "pn-icon", "pn-option"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Pnselect);
+      }
+      break;
+    case "pn-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "pn-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pn-option":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PnSelect = Pnselect;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnSelect, defineCustomElement };

package/umd/modules/@postnord/web-components/components/pn-spinner.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnSpinner extends Components.PnSpinner, HTMLElement {}
+export const PnSpinner: {
+  prototype: PnSpinner;
+  new (): PnSpinner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/umd/modules/@postnord/web-components/components/pn-spinner.js

@@ -0,0 +1,6 @@
+import { P as PnSpinner$1, d as defineCustomElement$1 } from './pn-spinner2.js';
+
+const PnSpinner = PnSpinner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnSpinner, defineCustomElement };

package/umd/modules/@postnord/web-components/components/pn-spinner2.js

@@ -0,0 +1,38 @@
+import { HTMLElement, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const pnSpinnerCss = "pn-spinner{height:1.5em;width:1.5em;height:var(--size);width:var(--size);display:block}pn-spinner svg{-webkit-animation:rotate 1s infinite;animation:rotate 1s infinite;display:block}pn-spinner svg .circle{stroke:#005D92;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-310deg);transform:rotate(-310deg);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:64;-webkit-animation:loading 2s infinite;animation:loading 2s infinite}pn-spinner svg .dot{fill:#005D92}pn-spinner.light .circle{stroke:#fff}pn-spinner.light .dot{fill:#fff}pn-spinner svg,pn-spinner svg .circle{-webkit-animation-timing-function:cubic-bezier(0.5, 0, 0.5, 1);animation-timing-function:cubic-bezier(0.5, 0, 0.5, 1)}@-webkit-keyframes loading{0%{stroke-dashoffset:55}50%{stroke-dashoffset:12}100%{stroke-dashoffset:55}}@keyframes loading{0%{stroke-dashoffset:55}50%{stroke-dashoffset:12}100%{stroke-dashoffset:55}}@-webkit-keyframes rotate{from{-webkit-transform:rotate(-180deg) scaleX(-1);transform:rotate(-180deg) scaleX(-1)}to{-webkit-transform:rotate(180deg) scaleX(-1);transform:rotate(180deg) scaleX(-1)}}@keyframes rotate{from{-webkit-transform:rotate(-180deg) scaleX(-1);transform:rotate(-180deg) scaleX(-1)}to{-webkit-transform:rotate(180deg) scaleX(-1);transform:rotate(180deg) scaleX(-1)}}";
+
+let PnSpinner = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Light version of the spinner */
+    this.light = false;
+    /** Size in em */
+    this.size = '1.5';
+  }
+  render() {
+    return (h(Host, { class: (this.light) ? 'light' : '', style: { '--size': this.size + 'em' } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("circle", { class: "circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), h("circle", { class: "dot", cx: "21.3", cy: "16", r: "1.48" }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnSpinnerCss; }
+};
+PnSpinner = /*@__PURE__*/ proxyCustomElement(PnSpinner, [0, "pn-spinner", {
+    "light": [4],
+    "size": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnSpinner);
+      }
+      break;
+  } });
+}
+
+export { PnSpinner as P, defineCustomElement as d };

package/umd/modules/@postnord/web-components/components/pn-tab.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnTab extends Components.PnTab, HTMLElement {}
+export const PnTab: {
+  prototype: PnTab;
+  new (): PnTab;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/umd/modules/@postnord/web-components/components/pn-tab.js

@@ -0,0 +1,53 @@
+import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+
+const pnTabCss = "pn-tab{margin-right:2.5em;-ms-flex-negative:0;flex-shrink:0;scroll-snap-align:center}pn-tab:last-of-type{padding-right:1.5em;margin-right:0}pn-tab:first-child{padding-left:1.5em}button.pn-tab{padding:0 0.5em 0.5em;border:none;font:inherit;background-color:transparent;cursor:pointer;font-size:0.9em;color:#000;font-weight:300;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:color 0.3s ease-in-out;transition:color 0.3s ease-in-out}button.pn-tab svg{margin-right:0.4em;width:1.7em;height:1.7em}button.pn-tab svg path,button.pn-tab svg polygon{-webkit-transition:fill 0.3s ease-in-out;transition:fill 0.3s ease-in-out;fill:#000}button.pn-tab.active{color:#005D92}button.pn-tab.active svg path,button.pn-tab.active svg polygon{fill:#005D92}";
+
+let PnTab$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.setactivetab = createEvent(this, "setactivetab", 7);
+  }
+  setActiveTabHandler() {
+    this.setactivetab.emit({ val: this.value, el: this.hostElement });
+  }
+  componentDidUpdate() {
+    if (this.activeTab === this.value) {
+      this.setActiveTabHandler();
+    }
+  }
+  getClassNames() {
+    let className = "pn-tab";
+    if (this.activeTab === this.value)
+      className += " active";
+    return className;
+  }
+  render() {
+    return (h("button", { class: this.getClassNames(), onClick: () => this.setActiveTabHandler() }, h("slot", null), this.label));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnTabCss; }
+};
+PnTab$1 = /*@__PURE__*/ proxyCustomElement(PnTab$1, [4, "pn-tab", {
+    "activeTab": [1, "active-tab"],
+    "label": [1],
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnTab$1);
+      }
+      break;
+  } });
+}
+
+const PnTab = PnTab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnTab, defineCustomElement };

package/umd/modules/@postnord/web-components/components/pn-table.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnTable extends Components.PnTable, HTMLElement {}
+export const PnTable: {
+  prototype: PnTable;
+  new (): PnTable;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;