@postnord/pn-marketweb-components 1.0.49-beta3 → 2.0.0

package/cjs/pn-marketweb-search.cjs.entry.js

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3e27c79.js');
+
+const pnMarketwebSearchCss = ":host{display:-ms-inline-flexbox;display:inline-flex}:host>pn-button{margin-left:0.35em}:host>pn-button button .pn-button-bg{-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, left 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, left 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s}:host>pn-button[data-loading=true] .pn-button-bg{left:0;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, -webkit-box-shadow 0.1s}:host>pn-button[data-loading=true] pn-spinner{left:0.75em}:host input{padding:0.75em;min-height:3em;font-size:1em;height:100%;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:3em;border:0.1rem solid #5E554A;-webkit-transition:border 0.15s, -webkit-box-shadow 0.15s;transition:border 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, border 0.15s;transition:box-shadow 0.15s, border 0.15s, -webkit-box-shadow 0.15s;color:#000000;width:100%}:host input::-webkit-search-cancel-button{display:none}:host input::-webkit-input-placeholder{color:#969087;font-weight:normal}:host input::-moz-placeholder{color:#969087;font-weight:normal}:host input:-ms-input-placeholder{color:#969087;font-weight:normal}:host input::-ms-input-placeholder{color:#969087;font-weight:normal}:host input::placeholder{color:#969087;font-weight:normal}:host input:focus{border:0.1rem solid #005D92;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}:host input:hover{border:0.1rem solid #00A0D6}:host input:disabled{background:#F3F2F2;border:none}:host>.input-container{width:100%;position:relative}:host>.input-container .button-container{position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host>.input-container button{position:absolute;left:50%;top:50%;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%);background:none;border:none;color:#005D92;padding:0.3rem;margin:0;font-size:0.875em;border-radius:50%;outline:none;-webkit-transition:border 0.1s, background 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:border 0.1s, background 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;border:0.1rem solid transparent;-webkit-tap-highlight-color:transparent}:host>.input-container button.clear,:host>.input-container button.search{cursor:pointer}:host>.input-container button:focus{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}:host>.input-container button:hover,:host>.input-container button:focus{background:#E0F8FF}:host>.input-container button:active{background:#005D92}:host>.input-container button:active pn-icon svg,:host>.input-container button:active pn-icon svg path{fill:white}:host.searching button.search{-webkit-transform:translate(150%, -50%);transform:translate(150%, -50%)}:host.searching button.clear{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host.button-none input,:host.button-icon-inline input{padding-right:3.3em}:host.button-none pn-spinner,:host.button-icon-inline pn-spinner{position:absolute;left:50%;top:50%;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%);-webkit-transition:-webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:-webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s}:host.button-none button.search,:host.button-icon-inline button.search{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host.button-none.loading button,:host.button-icon-inline.loading button{-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}:host.button-none.loading pn-spinner,:host.button-icon-inline.loading pn-spinner{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host.button-none.searching button.search{-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}:host.button-icon>pn-button[data-loading=true] .pn-button-bg{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}";
+
+let PnMarketwebSearch = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.search = index.createEvent(this, "search", 7);
+    this.update = index.createEvent(this, "update", 7);
+    this.disabled = false;
+    this.placeholder = null;
+    this.inputid = null;
+    this.name = null;
+    this.autocomplete = null;
+    this.list = null;
+    this.value = null;
+    /** Label for the button */
+    this.label = null;
+    /** Loading animation */
+    this.loading = false;
+    /** Button type, options are 'none' for no button, 'icon' for a labelless button with just a search icon and 'icon-inline' for a search button inside of the search field (this last option disables the clear field button) */
+    this.button = '';
+    /** Light instead of dark search button */
+    this.light = false;
+    this.suggestionObserver = null;
+    this.hasClonedInput = false;
+    this.listSuggestion = [];
+  }
+  inputHandler() {
+    this.update.emit(this.value);
+  }
+  emitSearch(e) {
+    if (e.type === 'click' ||
+      (e.type === 'keydown' && e.key === 'Enter')) {
+      // We prevent the native search event since it's not supported in IE and FF, then we emit our own instead
+      e.preventDefault();
+      this.search.emit(this.value);
+    }
+  }
+  setVal(e) {
+    this.value = e.target.value;
+  }
+  clearInput() {
+    this.value = '';
+    this.update.emit(this.value);
+    this.hostElement.querySelector('input').focus();
+  }
+  getClassNames() {
+    let classNames = '';
+    const buttonTypes = ['none', 'icon', 'icon-inline'];
+    if (this.value)
+      classNames += 'searching ';
+    if (this.loading)
+      classNames += 'loading ';
+    if (buttonTypes.includes(this.button))
+      classNames += `button-${this.button} `;
+    return classNames;
+  }
+  componentWillRender() {
+    this.cloneListContent();
+    this.autocompleteEventBinding();
+  }
+  onSuggestionUpdate() {
+    this.cloneListContent();
+  }
+  autocompleteEventBinding() {
+    if (this.suggestionObserver !== null || !this.list || (!this.hostElement) || !document.getElementById(this.list)) {
+      return;
+    }
+    const targetNode = document.getElementById(this.list);
+    this.suggestionObserver = new MutationObserver(this.onSuggestionUpdate.bind(this));
+    this.suggestionObserver.observe(targetNode, { attributes: true, childList: true, subtree: true });
+  }
+  cloneListContent() {
+    if (!this.list || (!this.hostElement) || !document.getElementById(this.list)) {
+      return;
+    }
+    const options = [...document.getElementById(this.list).querySelectorAll('option')];
+    this.listSuggestion = options.map((item) => {
+      if (item.hasAttribute('value')) {
+        return item.getAttribute('value');
+      }
+      return item.innerText;
+    });
+  }
+  render() {
+    return (index.h(index.Host, { class: this.getClassNames() }, index.h("div", { class: "input-container" }, index.h("input", { type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, list: this.list, onKeyDown: (e) => this.emitSearch(e), onInput: (e) => this.setVal(e) }), index.h("div", { class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') &&
+      index.h("button", { class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: (e) => this.emitSearch(e), "aria-label": "search", title: "search" }, index.h("pn-icon", { symbol: "search", color: "blue700" })), (this.button !== 'icon-inline') &&
+      index.h("button", { class: "clear", "aria-label": "clear", title: "clear search field", tabindex: this.value && (!this.loading || this.button !== 'none') ? '0' : '-1', onClick: () => this.clearInput() }, index.h("pn-icon", { symbol: "close-small", color: "blue700" })), this.button === 'none' || this.button === 'icon-inline' && index.h("pn-spinner", null))), (this.button !== 'none' && this.button !== 'icon-inline') &&
+      index.h("pn-button", { onClick: (e) => this.emitSearch(e), loading: this.loading, icon: "search", appearance: this.light ? 'light' : 'dark', "icon-only": this.button === 'icon' }, this.label), (this.list) &&
+      index.h("datalist", { id: this.list }, this.listSuggestion.map((item) => {
+        return (index.h("option", null, item));
+      }))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+PnMarketwebSearch.style = pnMarketwebSearchCss;
+
+exports.pn_marketweb_search = PnMarketwebSearch;

package/cjs/pn-marketweb-sitefooter.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a6b1eef.js');
+const index = require('./index-e3e27c79.js');
 const FetchHelper = require('./FetchHelper-33d3c535.js');
 
 const translations = {

package/cjs/pn-marketweb-siteheader.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a6b1eef.js');
+const index = require('./index-e3e27c79.js');
 const FetchHelper = require('./FetchHelper-33d3c535.js');
 const MarketWebLoginManager = require('./MarketWebLoginManager-3c2f4423.js');
 
@@ -82,6 +82,8 @@ let PnMarketwebSiteheader = class {
     this.hideSearch = false;
     /** Hides the login if set to true*/
     this.hideLogin = false;
+    /** Autocomplete endpoint */
+    this.AutocompleteEndpoint = "";
     /** Forward session to backend */
     this.sessionForward = false;
     /** If the component should use cached requests */
@@ -94,7 +96,7 @@ let PnMarketwebSiteheader = class {
     // Menu state
     this.menuItems = [];
     // Search
-    this.search = {};
+    this.search = { AutocompleteEndpoint: this.AutocompleteEndpoint };
     // Site selector
     this.siteSelector = null;
     // Language Selector
@@ -208,7 +210,7 @@ let PnMarketwebSiteheader = class {
       });
     }
     // Set search
-    this.search = data.search;
+    this.search = Object.assign(Object.assign({}, data.search), { AutocompleteEndpoint: this.AutocompleteEndpoint });
     // Set site selector
     this.siteSelector = data.siteSelectorViewModel;
     // Set language selector
@@ -312,7 +314,7 @@ let PnMarketwebSiteheader = class {
     })), index.h("div", { slot: "footer", class: "siteheader-menu-footer" }, (this.gotData && this.loginDialog && !this.hideLogin) && (index.h("pn-marketweb-siteheader-login", { emitEvents: false, loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n })), (this.gotData && this.languageOptions && this.languageOptions.length) && !this.hideLanguageSelector &&
       index.h("pn-language-selector", { value: this.language }, this.languageOptions.map(language => index.h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))), !this.hideSiteSelector &&
       index.h("pn-site-selector", { language: this.language }, (this.gotData && ((_e = this.siteSelector) === null || _e === void 0 ? void 0 : _e.currentSiteTitle)) &&
-        index.h("pn-site-selector-item", { heading: this.siteSelector.currentSiteTitle, description: this.siteSelector.currentSiteDescription }), (this.gotData && ((_f = this.siteSelector) === null || _f === void 0 ? void 0 : _f.siteSelections)) && this.siteSelector.siteSelections.map((site) => index.h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.pageLink, newwindow: site.openInNewWindow })))), index.h("div", { slot: "top", class: "siteheader-menu-top" }, index.h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, i18n: this.i18n })))))), index.h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n })))));
+        index.h("pn-site-selector-item", { heading: this.siteSelector.currentSiteTitle, description: this.siteSelector.currentSiteDescription }), (this.gotData && ((_f = this.siteSelector) === null || _f === void 0 ? void 0 : _f.siteSelections)) && this.siteSelector.siteSelections.map((site) => index.h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.pageLink, newwindow: site.openInNewWindow })))), index.h("div", { slot: "top", class: "siteheader-menu-top" }, index.h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, i18n: this.i18n })))))), index.h("pn-marketweb-siteheader-search", { primary: true, search: this.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n })))));
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {

package/cjs/pn-pex-pricefinder.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a6b1eef.js');
+const index = require('./index-e3e27c79.js');
 
 const translations = {
   'sv': {

package/cjs/pn-product-card_3.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a6b1eef.js');
+const index = require('./index-e3e27c79.js');
 
 const pnProductCardCss = "pn-product-card{margin-bottom:1em;border:0.1rem solid #D3CECB;outline:none;background:#FFFFFF;-webkit-box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);display:-ms-flexbox;display:flex;padding:1.5em;word-break:break-word;text-decoration:none;border-radius:0.8rem}pn-product-card [slot=title]{display:-ms-flexbox;display:flex;width:100%;margin-bottom:0.5em}pn-product-card [slot=title]>[slot=Biligast]{color:#005E41;background:#DCF6E7;border-radius:0.37em;width:6.3em;height:2em;margin-left:1.5em;font-weight:normal;font-size:0.75em;text-align:center;vertical-align:bottom;padding-top:0.25em}pn-product-card [slot=title]>[slot=Biligast] pn-icon{vertical-align:middle;margin-left:0.6em}pn-product-card [slot=title]>[slot=Snabbast]{background:#E0F8FF;color:#005D92;border-radius:0.37em;width:7em;height:2em;margin-left:1.5em;font-weight:normal;font-size:0.75em;text-align:center;vertical-align:bottom;padding-top:0.25em}pn-product-card [slot=title]>[slot=Snabbast] pn-icon{vertical-align:middle;margin-left:0.6em}pn-product-card [slot=note]{margin-top:1em;margin-bottom:1em}pn-product-card [slot=additionalUSP]{display:-ms-flexbox;display:flex}pn-product-card [slot=additionalUSP] :first-child{margin-left:0em}pn-product-card [slot=additionalUSP] span{margin-left:1em;background:#D3CECB;color:#2D2013;border-radius:0.25em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:0.3em;margin-top:0.5em;font-size:0.75em}pn-product-card>pn-illustration{min-width:8rem;width:8rem;height:8rem;margin-right:3rem;-ms-flex-item-align:center;align-self:center}pn-product-card .cardcontent{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}pn-product-card [slot=cardprice]{display:block;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}pn-product-card .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:100%}pn-product-card .info{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;-ms-flex-flow:wrap;flex-flow:wrap;padding:0 1em 0 0}pn-product-card .info>*{min-width:6em;margin:0.5em 2em 0.5em 0}";
 
@@ -23,10 +23,10 @@ let PnProductCardInfo = class {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (this.label) ? (index.h(index.Host, null, index.h("div", { class: "cardinfocontent" }, (this.text) ? (index.h("pre", { slot: "formatPre" }, this.text)) : null))) : (index.h(index.Host, null, index.h("div", { class: "cardinfocontent" }, index.h("div", null, index.h("h4", null, "Paket:"), this.paket.split("/").map((item) => ((item.split(":").length > 0) ?
+    return (this.label) ? (index.h(index.Host, null, index.h("div", { class: "cardinfocontent" }, (this.text) ? (index.h("pre", { slot: "formatPre" }, this.text)) : null))) : (index.h(index.Host, null, index.h("div", { class: "cardinfocontent" }, index.h("div", null, index.h("strong", null, "Paket:"), this.paket.split("/").map((item) => ((item.split(":").length > 0) ?
       index.h("p", null, index.h("strong", null, item.split(":")[0] + ": "), " ", item.split(":")[1]) :
       index.h("p", null, item)))), index.h("div", { id: "sp" }), (this.rulle) ?
-      (index.h("div", null, index.h("h4", null, "Rulle:"), this.rulle.split("/").map((item) => ((item.split(":").length > 0) ?
+      (index.h("div", null, index.h("strong", null, "Rulle:"), this.rulle.split("/").map((item) => ((item.split(":").length > 0) ?
         index.h("p", null, index.h("strong", null, item.split(":")[0] + ": "), " ", item.split(":")[1]) :
         index.h("p", null, item))))) : null)));
   }

package/cjs/pn-product-pricelist-result.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a6b1eef.js');
-const pnProductPricelistStore = require('./pn-product-pricelist-store-d101b50e.js');
-require('./index-9027dc96.js');
+const index = require('./index-e3e27c79.js');
+const pnProductPricelistStore = require('./pn-product-pricelist-store-86310b5a.js');
+require('./index-28bbc937.js');
 
 const pnProductPricelistResultCss = "";
 

package/cjs/{pn-product-pricelist-store-d101b50e.js → pn-product-pricelist-store-86310b5a.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-9027dc96.js');
+const index = require('./index-28bbc937.js');
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = index.createStore({

package/cjs/pn-product-pricelist.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a6b1eef.js');
+const index = require('./index-e3e27c79.js');
 const convert = require('./convert-362ef5e6.js');
-const pnProductPricelistStore = require('./pn-product-pricelist-store-d101b50e.js');
-require('./index-9027dc96.js');
+const pnProductPricelistStore = require('./pn-product-pricelist-store-86310b5a.js');
+require('./index-28bbc937.js');
 
 const translations = {
   'sv': {

package/cjs/pn-product-tile_3.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a6b1eef.js');
+const index = require('./index-e3e27c79.js');
 
 const pnProductTileCss = "pn-product-tile{margin-bottom:1em;border:0.1rem solid #D3CECB;outline:none;background:white;-webkit-box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);display:-ms-flexbox;display:flex;padding:1.5em;word-break:break-word;text-decoration:none;border-radius:0.8rem}pn-product-tile [slot=content] h3{display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:0.5em}pn-product-tile>pn-illustration{min-width:8rem;width:8rem;height:8rem;margin-right:3rem;-ms-flex-item-align:center;align-self:center}pn-product-tile .tilecontent{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}pn-product-tile .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:100%}pn-product-tile .info{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;max-width:66.6666666667%;-ms-flex-flow:wrap;flex-flow:wrap}pn-product-tile .info>*{min-width:6em;margin:0.2em 1em 0.2em 0}";
 

package/cjs/pn-profile-selector-option.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a6b1eef.js');
+const index = require('./index-e3e27c79.js');
 
 const pnProfileSelectorOptionCss = "pn-profile-selector-option{display:-ms-flexbox;display:flex;width:100%;border-bottom:1px solid #D3CECB;padding:1.2rem 0}pn-profile-selector-option:first-of-type{margin-top:2.4rem}pn-profile-selector-option:last-of-type{border-bottom:0;padding-bottom:0}pn-profile-selector-option:last-of-type .profileselectoroption{padding-bottom:0}.profileselectoroption{display:-ms-flexbox;display:flex;width:100%;padding:1.2rem 0;text-decoration:none}.profileselectoroption pn-icon{-ms-flex-item-align:center;align-self:center;position:relative;-webkit-transform:translateX(-1rem);transform:translateX(-1rem);-webkit-transition:-webkit-transform 0.25s linear;transition:-webkit-transform 0.25s linear;transition:transform 0.25s linear;transition:transform 0.25s linear, -webkit-transform 0.25s linear}.profileselectoroption:hover .profileselectoroption-name,.profileselectoroption:focus .profileselectoroption-name,.profileselectoroption:active .profileselectoroption-name{text-decoration:underline}.profileselectoroption:hover pn-icon,.profileselectoroption:focus pn-icon,.profileselectoroption:active pn-icon{-webkit-transform:none;transform:none;-webkit-transition-timing-function:ease;transition-timing-function:ease}.profileselectoroption-text{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.profileselectoroption-name{font-size:1em;color:#005D92;font-weight:700}.profileselectoroption-identifier{color:#5E554A;font-size:0.75em}";
 

package/cjs/pn-profile-selector.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a6b1eef.js');
+const index = require('./index-e3e27c79.js');
 
 const translations = {
   'sv': {

package/cjs/pn-sidenav-level.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a6b1eef.js');
-const pnSidenavStore = require('./pn-sidenav-store-eed02285.js');
-require('./index-9027dc96.js');
+const index = require('./index-e3e27c79.js');
+const pnSidenavStore = require('./pn-sidenav-store-d9bd9e00.js');
+require('./index-28bbc937.js');
 
 const pnSidenavLevelCss = "pn-sidenav-level{display:block;-ms-flex-preferred-size:100%;flex-basis:100%}pn-sidenav-level[data-level=\"2\"]{padding-left:2.5em;overflow:hidden;-webkit-transition:max-height ease 0.2s;transition:max-height ease 0.2s;max-height:40em}pn-sidenav-level[data-level=\"2\"][aria-hidden=true]{max-height:0}";
 

package/cjs/pn-sidenav-link.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a6b1eef.js');
-const pnSidenavStore = require('./pn-sidenav-store-eed02285.js');
-require('./index-9027dc96.js');
+const index = require('./index-e3e27c79.js');
+const pnSidenavStore = require('./pn-sidenav-store-d9bd9e00.js');
+require('./index-28bbc937.js');
 
 const pnSidenavLinkCss = "pn-sidenav-link{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.pn-sidenav-link{font-weight:normal;position:relative;border:0 none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:transparent;color:#005D92;font-size:1em;padding:1.1rem 1.5rem 1.1rem;overflow:hidden;text-decoration:none;cursor:pointer;-ms-flex-positive:1;flex-grow:1}.pn-sidenav-link::before{content:\"\";display:block;width:0.4rem;border-top-right-radius:0.3rem;border-bottom-right-radius:0.3rem;height:100%;position:absolute;left:0;top:0;bottom:0;-webkit-transform:translateX(-0.4rem);transform:translateX(-0.4rem);background:#005D92;-webkit-transition:-webkit-transform linear 0.35s;transition:-webkit-transform linear 0.35s;transition:transform linear 0.35s;transition:transform linear 0.35s, -webkit-transform linear 0.35s}.pn-sidenav-link:hover,.pn-sidenav-link:focus,[current=true]>.pn-sidenav-link{background-color:#E0F8FF;color:#005D92;outline:0;-webkit-box-shadow:none;box-shadow:none}.pn-sidenav-link:hover::before,.pn-sidenav-link:focus::before,[current=true]>.pn-sidenav-link::before{-webkit-transform:none;transform:none}.pn-sidenav-link:active{background-color:#F3F2F2;color:#00A0D6;-webkit-box-shadow:none;box-shadow:none}.pn-sidenav-link>pn-icon{padding-right:1em}.pn-sidenav-link-expand{margin-left:auto;border:0;font-size:1em;background:transparent;outline:0;padding:0 1em 0 0.5em;cursor:pointer}.pn-sidenav-link-expand:hover,.pn-sidenav-link-expand:focus,[current=true]>.pn-sidenav-link-expand{background-color:#E0F8FF;color:#005D92;outline:0;-webkit-box-shadow:none;box-shadow:none}.pn-sidenav-link-expand:hover::before,.pn-sidenav-link-expand:focus::before,[current=true]>.pn-sidenav-link-expand::before{-webkit-transform:none;transform:none}button>.pn-sidenav-link-expand{padding-right:0}.pn-sidenav-link-expand pn-icon{width:14px}";
 

package/cjs/{pn-sidenav-store-eed02285.js → pn-sidenav-store-d9bd9e00.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-9027dc96.js');
+const index = require('./index-28bbc937.js');
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = index.createStore({

package/cjs/pn-sidenav.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a6b1eef.js');
-const pnSidenavStore = require('./pn-sidenav-store-eed02285.js');
-require('./index-9027dc96.js');
+const index = require('./index-e3e27c79.js');
+const pnSidenavStore = require('./pn-sidenav-store-d9bd9e00.js');
+require('./index-28bbc937.js');
 
 const translations = {
   'sv': {

package/cjs/pn-site-footer_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a6b1eef.js');
+const index = require('./index-e3e27c79.js');
 
 const pnSiteFooterCss = "pn-site-footer{display:block;line-height:1.5}pn-site-footer a{color:#005D92}pn-site-footer a:hover{color:#0D234B;text-decoration:underline}pn-site-footer h3{font-size:2.4rem;margin-bottom:0.5rem;line-height:1.2}pn-site-footer p{font-size:1.6rem}pn-site-footer ul.social-media{display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row}pn-site-footer ul.social-media li{margin-right:1.6rem}pn-site-footer>svg{display:block}pn-site-footer>div{background:#F3F2F2}.pn-sitefooter-top{display:-ms-flexbox;display:flex}.pn-sitefooter-cols{-ms-flex-item-align:center;align-self:center;-ms-flex-pack:center;justify-content:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;margin:0 auto;max-width:90em}.pn-sitefooter-bottom [slot=bottom]{max-width:90em;margin:0 auto;padding:1.6rem 0;display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;border-top:1px solid #D3CECB;border-bottom:1px solid #D3CECB}.pn-sitefooter-bottom [slot=bottom] span,.pn-sitefooter-bottom [slot=bottom] a{line-height:2;margin:0 1.6rem;text-decoration:none}.pn-sitefooter-bottom [slot=bottom] li{line-height:2em;margin:0 1.6rem}.pn-sitefooter-logo{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;padding:3rem}.pn-sitefooter-logo svg{display:block;width:13.3rem;height:2.6rem}";
 

package/collection/collection-manifest.json

@@ -4,7 +4,7 @@
     "./components/input/pn-bonus-progressbar/pn-bonus-progressbar.js",
     "./components/input/pn-choice-button/pn-choice-button.js",
     "./components/input/pn-filter-checkbox/pn-filter-checkbox.js",
-    "./components/input/pn-filter-search/pn-filter-search.js",
+    "./components/input/pn-marketweb-search/pn-marketweb-search.js",
     "./components/layout-components/pn-marketweb-sitefooter/pn-marketweb-sitefooter.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-search.js",

package/collection/components/input/{pn-filter-search/search-field.stories.js → pn-marketweb-search/marketweb-search-field.stories.js}

@@ -1,7 +1,7 @@
 import readme from "./readme.md";
 
 export default {
-  title: "input/Filter search field",
+  title: "input/Market web search field",
   parameters: {
     notes: readme,
     layout: 'centered'
@@ -10,7 +10,7 @@ export default {
 
 const Template = ({ ...args }) => {
   return `
-    <pn-filter-search
+    <pn-marketweb-search
       label="${args.label}"
       name="${args.name}"
       inputid="${args.inputid}"
@@ -20,7 +20,19 @@ const Template = ({ ...args }) => {
       disabled=${args.disabled}
       loading=${args.loading}
       light="${args.light}"
-      ></pn-filter-search>
+      list="listexample"
+      ></pn-marketweb-search>
+      <datalist id="listexample">
+      <option>Autocomplete example</option>
+      <option>More autocomplete examples</option>
+      </datalist>
+      <script>
+      // window.setTimeout(function() {
+      //   const newOpt = document.createElement("option");
+      //   newOpt.innerHTML = "new item";
+      //   document.getElementById("listexample").appendChild(newOpt);
+      // }, 500);
+      </script>
   `;
 };
 export const Primary = Template.bind({});

package/collection/components/input/{pn-filter-search/pn-filter-search.css → pn-marketweb-search/pn-marketweb-search.css}

@@ -75,19 +75,21 @@
   border: none;
   color: #005D92;
   padding: 0.3rem;
+  margin: 0;
+  font-size: 0.875em;
   border-radius: 50%;
   outline: none;
   transition: border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s;
   border: 0.1rem solid transparent;
+  -webkit-tap-highlight-color: transparent;
 }
 :host > .input-container button.clear, :host > .input-container button.search {
   cursor: pointer;
 }
 :host > .input-container button:focus {
   box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
-  background: #8EDDF9;
 }
-:host > .input-container button:hover {
+:host > .input-container button:hover, :host > .input-container button:focus {
   background: #E0F8FF;
 }
 :host > .input-container button:active {

package/collection/components/input/{pn-filter-search/pn-filter-search.js → pn-marketweb-search/pn-marketweb-search.js}

@@ -1,11 +1,12 @@
-import { Component, Prop, h, Host, Event, Element, Listen } from "@stencil/core";
-export class PnFilterSearch {
+import { Component, Prop, h, Host, Event, Element, Listen, State } from "@stencil/core";
+export class PnMarketwebSearch {
   constructor() {
     this.disabled = false;
     this.placeholder = null;
     this.inputid = null;
     this.name = null;
     this.autocomplete = null;
+    this.list = null;
     this.value = null;
     /** Label for the button */
     this.label = null;
@@ -15,6 +16,9 @@ export class PnFilterSearch {
     this.button = '';
     /** Light instead of dark search button */
     this.light = false;
+    this.suggestionObserver = null;
+    this.hasClonedInput = false;
+    this.listSuggestion = [];
   }
   inputHandler() {
     this.update.emit(this.value);
@@ -46,10 +50,37 @@ export class PnFilterSearch {
       classNames += `button-${this.button} `;
     return classNames;
   }
+  componentWillRender() {
+    this.cloneListContent();
+    this.autocompleteEventBinding();
+  }
+  onSuggestionUpdate() {
+    this.cloneListContent();
+  }
+  autocompleteEventBinding() {
+    if (this.suggestionObserver !== null || !this.list || (!this.hostElement) || !document.getElementById(this.list)) {
+      return;
+    }
+    const targetNode = document.getElementById(this.list);
+    this.suggestionObserver = new MutationObserver(this.onSuggestionUpdate.bind(this));
+    this.suggestionObserver.observe(targetNode, { attributes: true, childList: true, subtree: true });
+  }
+  cloneListContent() {
+    if (!this.list || (!this.hostElement) || !document.getElementById(this.list)) {
+      return;
+    }
+    const options = [...document.getElementById(this.list).querySelectorAll('option')];
+    this.listSuggestion = options.map((item) => {
+      if (item.hasAttribute('value')) {
+        return item.getAttribute('value');
+      }
+      return item.innerText;
+    });
+  }
   render() {
     return (h(Host, { class: this.getClassNames() },
       h("div", { class: "input-container" },
-        h("input", { type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, onKeyDown: (e) => this.emitSearch(e), onInput: (e) => this.setVal(e) }),
+        h("input", { type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, list: this.list, onKeyDown: (e) => this.emitSearch(e), onInput: (e) => this.setVal(e) }),
         h("div", { class: "button-container" },
           (this.button === 'none' || this.button === 'icon-inline') &&
             h("button", { class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: (e) => this.emitSearch(e), "aria-label": "search", title: "search" },
@@ -59,15 +90,19 @@ export class PnFilterSearch {
               h("pn-icon", { symbol: "close-small", color: "blue700" })),
           this.button === 'none' || this.button === 'icon-inline' && h("pn-spinner", null))),
       (this.button !== 'none' && this.button !== 'icon-inline') &&
-        h("pn-button", { onClick: (e) => this.emitSearch(e), loading: this.loading, icon: "search", appearance: this.light ? 'light' : 'dark', "icon-only": this.button === 'icon' }, this.label)));
+        h("pn-button", { onClick: (e) => this.emitSearch(e), loading: this.loading, icon: "search", appearance: this.light ? 'light' : 'dark', "icon-only": this.button === 'icon' }, this.label),
+      (this.list) &&
+        h("datalist", { id: this.list }, this.listSuggestion.map((item) => {
+          return (h("option", null, item));
+        }))));
   }
-  static get is() { return "pn-filter-search"; }
+  static get is() { return "pn-marketweb-search"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["pn-filter-search.scss"]
+    "$": ["pn-marketweb-search.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["pn-filter-search.css"]
+    "$": ["pn-marketweb-search.css"]
   }; }
   static get properties() { return {
     "disabled": {
@@ -160,6 +195,24 @@ export class PnFilterSearch {
       "reflect": false,
       "defaultValue": "null"
     },
+    "list": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "list",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "value": {
       "type": "string",
       "mutable": false,
@@ -251,6 +304,11 @@ export class PnFilterSearch {
       "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "suggestionObserver": {},
+    "hasClonedInput": {},
+    "listSuggestion": {}
+  }; }
   static get events() { return [{
       "method": "search",
       "name": "search",

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-search-store.js

@@ -0,0 +1,9 @@
+import { createStore } from "@stencil/store";
+// Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
+const { state, onChange } = createStore({
+  searchValue: '',
+  autocompleteSuggestions: {},
+  requestAbortController: new AbortController()
+});
+export { state, onChange };
+export default state;