@postnord/pn-marketweb-components 3.0.3 → 3.1.0

package/cjs/pn-address-autofill.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-bca6f414.js');
-const FetchHelper = require('./FetchHelper-8d537d38.js');
+const FetchHelper = require('./FetchHelper-dcfe4038.js');
 const index$1 = require('./index-9805e001.js');
 
 const pnAddressAutofillCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-address-autofill pn-marketweb-input{width:50%}pn-address-autofill .input-container-row{display:flex;gap:1rem;margin-bottom:1rem}pn-address-autofill .label-container{color:#5e554a;font-size:0.875em;display:flex;justify-content:space-between;align-items:flex-end}pn-address-autofill .autocomplete-items{position:absolute;border-radius:0.8rem;border:0.1rem solid #5e554a;width:100%;max-height:30rem;overflow-y:auto}pn-address-autofill .autocomplete-items:hover,pn-address-autofill .autocomplete-items :focus{border:0.1rem solid #00a0d6}pn-address-autofill .autocomplete-items div{padding:1.6rem;cursor:pointer;background-color:#fff;border:0.1rem solid transparent}pn-address-autofill .autocomplete-items div:first-child{border-radius:0.8rem 0.8rem 0 0}pn-address-autofill .autocomplete-items div:last-child{border-radius:0 0 0.8rem 0.8rem}pn-address-autofill .autocomplete-items div:hover{background-color:#e0f8ff}pn-address-autofill .autocomplete-items .autocomplete-active{background-color:#e0f8ff}";
@@ -13,47 +13,6 @@ const PnAddressAutofill = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.addresscomplete = index.createEvent(this, "addresscomplete", 7);
-        this.pnInputPostalCode = null;
-        this.pnInputCity = null;
-        this.pnInputStreetAddress = null;
-        this.pnInputStreetNumber = null;
-        this.postalCodeInputField = null;
-        this.streetAddressInputField = null;
-        this.streetNumberInputField = null;
-        this.pnInputHiddenValue = null;
-        this.endpointPath = '/api/location/get-by-location';
-        this._postalCodeProps = null;
-        this._cityProps = null;
-        this._streetAddressProps = null;
-        this._streetNumberProps = null;
-        this.fetchHelper = new FetchHelper.FetchHelper('PostalCodeCityAutofill');
-        this.filterStreetNames = (data) => {
-            const addresses = [];
-            this.streetAdressArr = null;
-            data.addresses.forEach(item => {
-                if (item.postalCode.postalCity === this.city && !addresses.includes(item.street)) {
-                    addresses.push(item.street);
-                }
-            });
-            this.streetAdressArr = addresses;
-        };
-        this.filterStreetNumbers = (data) => {
-            const streetNumbersResult = [];
-            data.addresses.forEach(item => {
-                if (item.postalCode.postalCode === this.postalCode) {
-                    const { numberFrom, numberTo } = item;
-                    const from = parseInt(numberFrom);
-                    const to = parseInt(numberTo);
-                    for (let i = from; i <= to; i++) {
-                        const nrString = i.toString();
-                        if (!streetNumbersResult.includes(nrString)) {
-                            streetNumbersResult.push(i.toString());
-                        }
-                    }
-                }
-            });
-            this.streetNumberArr = streetNumbersResult;
-        };
         this.market = null;
         this.environment = null;
         this.endpoint = null;
@@ -71,6 +30,22 @@ const PnAddressAutofill = class {
         this.streetNumber = null;
         this.fullAddress = null;
     }
+    get hostElement() { return index.getElement(this); }
+    pnInputPostalCode = null;
+    pnInputCity = null;
+    pnInputStreetAddress = null;
+    pnInputStreetNumber = null;
+    postalCodeInputField = null;
+    streetAddressInputField = null;
+    streetNumberInputField = null;
+    pnInputHiddenValue = null;
+    endpointPath = '/api/location/get-by-location';
+    _postalCodeProps = null;
+    _cityProps = null;
+    _streetAddressProps = null;
+    _streetNumberProps = null;
+    addresscomplete;
+    fetchHelper = new FetchHelper.FetchHelper('PostalCodeCityAutofill');
     componentWillLoad() {
         this.setInitialValues();
         this._postalCodeProps = this.setProps(this.postalCodeProps);
@@ -93,12 +68,11 @@ const PnAddressAutofill = class {
         this.addEventHandlers();
     }
     async setInitialValues(href = window.location.href) {
-        var _a;
         const marketWebContextService = new FetchHelper.MarketWebContextService(href);
         if (!this.environment) {
             this.environment = await marketWebContextService.getEnvironmentName();
         }
-        if (!this.endpoint && ((_a = this.environment) === null || _a === void 0 ? void 0 : _a.indexOf('local')) === -1) {
+        if (!this.endpoint && this.environment?.indexOf('local') === -1) {
             this.endpoint = await marketWebContextService.getEndpoint(this.environment, this.market);
         }
         if (!this.endpoint) {
@@ -134,7 +108,6 @@ const PnAddressAutofill = class {
         this.addresscomplete.emit(this.fullAddress);
     }
     async fetchData(field, e) {
-        var _a;
         if (e) {
             e.preventDefault();
             if (e.key === 'Tab') {
@@ -175,7 +148,7 @@ const PnAddressAutofill = class {
             }, this.cache));
             if (data) {
                 if (isPostalCodeSearch) {
-                    this.city = data.postalCodes ? (_a = data.postalCodes[0]) === null || _a === void 0 ? void 0 : _a.postalCity : null;
+                    this.city = data.postalCodes ? data.postalCodes[0]?.postalCity : null;
                 }
                 if (isStreetAddressSearch && data.addresses) {
                     this.postalCode = this.postalCodeInputField.value;
@@ -187,6 +160,33 @@ const PnAddressAutofill = class {
             }
         }
     }
+    filterStreetNames = (data) => {
+        const addresses = [];
+        this.streetAdressArr = null;
+        data.addresses.forEach(item => {
+            if (item.postalCode.postalCity === this.city && !addresses.includes(item.street)) {
+                addresses.push(item.street);
+            }
+        });
+        this.streetAdressArr = addresses;
+    };
+    filterStreetNumbers = (data) => {
+        const streetNumbersResult = [];
+        data.addresses.forEach(item => {
+            if (item.postalCode.postalCode === this.postalCode) {
+                const { numberFrom, numberTo } = item;
+                const from = parseInt(numberFrom);
+                const to = parseInt(numberTo);
+                for (let i = from; i <= to; i++) {
+                    const nrString = i.toString();
+                    if (!streetNumbersResult.includes(nrString)) {
+                        streetNumbersResult.push(i.toString());
+                    }
+                }
+            }
+        });
+        this.streetNumberArr = streetNumbersResult;
+    };
     async handleStreetAddressDropdown(e) {
         const target = e.target;
         if (target === this.streetAddressInputField && target.value.length) {
@@ -313,10 +313,8 @@ const PnAddressAutofill = class {
         }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        return (index.h(index.Host, { key: '31d54cc786afb2a8b9ea3f0122fc146e837e8e97', class: "pn-address-autofill" }, ((_a = this._postalCodeProps) === null || _a === void 0 ? void 0 : _a.postalCodeCityLabel) ? (index.h("div", { class: "label-container" }, index.h("label", null, `${this._postalCodeProps.postalCodeCityLabel}`))) : null, index.h("div", { key: 'b4ec3793c6895ba3b52795e80891b842973d6545', class: "input-container-row" }, index.h("pn-marketweb-input", { key: 'e1c3e2f0623a2c012c11db7d197f041dbffebcd6', type: "text", name: (_b = this._postalCodeProps) === null || _b === void 0 ? void 0 : _b.postalCodeInputName, required: (_c = this._postalCodeProps) === null || _c === void 0 ? void 0 : _c.postalCodeInputRequired, placeholder: (_d = this._postalCodeProps) === null || _d === void 0 ? void 0 : _d.postalCodeInputPlaceholder, ref: el => (this.pnInputPostalCode = el), autocomplete: "off", helpertext: (_e = this._postalCodeProps) === null || _e === void 0 ? void 0 : _e.postalCodeInputHelpertext }), index.h("pn-marketweb-input", { key: '3c88411b408874109fc7014b2306549d6f75cfcd', type: "text", name: (_f = this._cityProps) === null || _f === void 0 ? void 0 : _f.cityInputName, disabled: true, value: this.city, placeholder: (_g = this._cityProps) === null || _g === void 0 ? void 0 : _g.cityInputPlaceholder, autocomplete: "off", helpertext: (_h = this._cityProps) === null || _h === void 0 ? void 0 : _h.cityInputHelpertext })), ((_j = this._streetAddressProps) === null || _j === void 0 ? void 0 : _j.streetAddressNumberLabel) ? (index.h("div", { class: "label-container" }, index.h("label", null, `${this._streetAddressProps.streetAddressNumberLabel}`))) : null, index.h("div", { key: '1f3f232bebd83bff4d31b3b79a86d03117e2136d', class: "input-container-row" }, index.h("pn-marketweb-input", { key: '3fae08f0de34286a23b145ffdf02d63ba63981ab', type: "text", name: (_k = this._streetAddressProps) === null || _k === void 0 ? void 0 : _k.streetAddressInputName, required: (_l = this._streetAddressProps) === null || _l === void 0 ? void 0 : _l.streetAddressInputRequired, value: this.streetAddress, placeholder: (_m = this._streetAddressProps) === null || _m === void 0 ? void 0 : _m.streetAddressInputPlaceholder, ref: el => (this.pnInputStreetAddress = el), autocomplete: "off", helpertext: (_o = this._streetAddressProps) === null || _o === void 0 ? void 0 : _o.streetAddressInputHelpertext }), index.h("pn-marketweb-input", { key: '9293d6d05fea0fb4df8bfb9a45d608efa6feb202', type: "text", name: (_p = this._streetNumberProps) === null || _p === void 0 ? void 0 : _p.streetNumberInputName, required: (_q = this._streetNumberProps) === null || _q === void 0 ? void 0 : _q.streetNumberInputRequired, value: this.streetNumber, placeholder: (_r = this._streetNumberProps) === null || _r === void 0 ? void 0 : _r.streetNumberInputPlaceholder, ref: el => (this.pnInputStreetNumber = el), autocomplete: "off", helpertext: (_s = this._streetNumberProps) === null || _s === void 0 ? void 0 : _s.streetNumberInputHelpertext }))));
+        return (index.h(index.Host, { key: '31d54cc786afb2a8b9ea3f0122fc146e837e8e97', class: "pn-address-autofill" }, this._postalCodeProps?.postalCodeCityLabel ? (index.h("div", { class: "label-container" }, index.h("label", null, `${this._postalCodeProps.postalCodeCityLabel}`))) : null, index.h("div", { key: 'b4ec3793c6895ba3b52795e80891b842973d6545', class: "input-container-row" }, index.h("pn-marketweb-input", { key: 'e1c3e2f0623a2c012c11db7d197f041dbffebcd6', type: "text", name: this._postalCodeProps?.postalCodeInputName, required: this._postalCodeProps?.postalCodeInputRequired, placeholder: this._postalCodeProps?.postalCodeInputPlaceholder, ref: el => (this.pnInputPostalCode = el), autocomplete: "off", helpertext: this._postalCodeProps?.postalCodeInputHelpertext }), index.h("pn-marketweb-input", { key: '3c88411b408874109fc7014b2306549d6f75cfcd', type: "text", name: this._cityProps?.cityInputName, disabled: true, value: this.city, placeholder: this._cityProps?.cityInputPlaceholder, autocomplete: "off", helpertext: this._cityProps?.cityInputHelpertext })), this._streetAddressProps?.streetAddressNumberLabel ? (index.h("div", { class: "label-container" }, index.h("label", null, `${this._streetAddressProps.streetAddressNumberLabel}`))) : null, index.h("div", { key: '1f3f232bebd83bff4d31b3b79a86d03117e2136d', class: "input-container-row" }, index.h("pn-marketweb-input", { key: '3fae08f0de34286a23b145ffdf02d63ba63981ab', type: "text", name: this._streetAddressProps?.streetAddressInputName, required: this._streetAddressProps?.streetAddressInputRequired, value: this.streetAddress, placeholder: this._streetAddressProps?.streetAddressInputPlaceholder, ref: el => (this.pnInputStreetAddress = el), autocomplete: "off", helpertext: this._streetAddressProps?.streetAddressInputHelpertext }), index.h("pn-marketweb-input", { key: '9293d6d05fea0fb4df8bfb9a45d608efa6feb202', type: "text", name: this._streetNumberProps?.streetNumberInputName, required: this._streetNumberProps?.streetNumberInputRequired, value: this.streetNumber, placeholder: this._streetNumberProps?.streetNumberInputPlaceholder, ref: el => (this.pnInputStreetNumber = el), autocomplete: "off", helpertext: this._streetNumberProps?.streetNumberInputHelpertext }))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 PnAddressAutofill.style = PnAddressAutofillStyle0;
 

package/cjs/pn-address-autofill.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-address-autofill.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,oBAAoB,GAAG,yjCAAyjC,CAAC;AACvlC,gCAAe,oBAAoB;;MCStB,iBAAiB;;;;QAE5B,sBAAiB,GAAgB,IAAI,CAAC;QACtC,gBAAW,GAAgB,IAAI,CAAC;QAChC,yBAAoB,GAAgB,IAAI,CAAC;QACzC,wBAAmB,GAAgB,IAAI,CAAC;QACxC,yBAAoB,GAAqB,IAAI,CAAC;QAC9C,4BAAuB,GAAqB,IAAI,CAAC;QACjD,2BAAsB,GAAqB,IAAI,CAAC;QAChD,uBAAkB,GAAgB,IAAI,CAAC;QACvC,iBAAY,GAAG,+BAA+B,CAAC;QACvC,qBAAgB,GAAoB,IAAI,CAAC;QACzC,eAAU,GAAc,IAAI,CAAC;QAC7B,wBAAmB,GAAuB,IAAI,CAAC;QAC/C,uBAAkB,GAAsB,IAAI,CAAC;QAwBrD,gBAAW,GAAG,IAAIA,uBAAW,CAAC,wBAAwB,CAAC,CAAC;QAyIxD,sBAAiB,GAAG,CAAC,IAAU;YAC7B,MAAM,SAAS,GAAa,EAAE,CAAC;YAC/B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI;gBACzB,IAAI,IAAI,CAAC,UAAU,CAAC,UAAU,KAAK,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;oBAChF,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;iBAC7B;aACF,CAAC,CAAC;YACH,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;SAClC,CAAC;QAEF,wBAAmB,GAAG,CAAC,IAAU;YAC/B,MAAM,mBAAmB,GAAa,EAAE,CAAC;YACzC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI;gBACzB,IAAI,IAAI,CAAC,UAAU,CAAC,UAAU,KAAK,IAAI,CAAC,UAAU,EAAE;oBAClD,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;oBACtC,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;oBAClC,MAAM,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;oBAE9B,KAAK,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE;wBAC/B,MAAM,QAAQ,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC;wBAC9B,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;4BAC3C,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;yBACxC;qBACF;iBACF;aACF,CAAC,CAAC;YACH,IAAI,CAAC,eAAe,GAAG,mBAAmB,CAAC;SAC5C,CAAC;sBA1LuD,IAAI;2BAEC,IAAI;wBACvC,IAAI;qBACN,IAAI;2BACC,IAAI;+BACkB,IAAI;yBAChB,IAAI;kCACc,IAAI;iCACN,IAAI;+BAEvB,IAAI;+BACJ,IAAI;oBACjB,IAAI;0BACE,IAAI;6BACD,IAAI;4BACL,IAAI;2BACL,IAAI;;IAMnC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC5D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAChD,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAClE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACjE;IAED,QAAQ,CAAC,KAAK;QACZ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SAC1B;aAAM;YACL,OAAO,KAAK,CAAC;SACd;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC1E,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAChF,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9E,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,MAAM,gBAAgB,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI;;QAChD,MAAM,uBAAuB,GAAG,IAAIC,mCAAuB,CAAC,IAAI,CAAC,CAAC;QAClE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,MAAM,uBAAuB,CAAC,kBAAkB,EAAE,CAAC;SACvE;QAED,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,OAAO,CAAC,MAAK,CAAC,CAAC,EAAE;YAC/D,IAAI,CAAC,QAAQ,GAAG,MAAM,uBAAuB,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1F;QAED,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;KACF;IAED,gBAAgB;QACd,MAAM,gBAAgB,GAAGC,gBAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAAC,EAAE,IAAI,CAAC,CAAC;QAC9F,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;QACtE,IAAI,CAAC,uBAAuB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACpG,IAAI,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAClG,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,iBAAiB;QACf,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAC7D,SAAS,CAAC,OAAO,CAAC,OAAO;YACvB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,SAAS;gBACnC,MAAM,cAAc,GAAGA,gBAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;gBACzE,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;aACrD,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAED,iBAAiB,CAAC,CAAC;QACjB,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,sBAAsB,EAAE;YAC5C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC;SACvD;QAED,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,YAAY,EAAE;YAC3E,IAAI,CAAC,WAAW,GAAG,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;SAClG;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;SACvB;QAED,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7C;IAED,MAAM,SAAS,CAAC,KAAK,EAAE,CAAgB;;QACrC,IAAI,CAAC,EAAE;YACL,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;gBACnB,IAAI,IAAI,CAAC,IAAI,EAAE;oBACb,OAAO;iBACR;aACF;SACF;QAED,IAAI,KAAK,GAAG,EAAE,CAAC;QACf,MAAM,kBAAkB,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,oBAAoB,CAAC;QACvE,MAAM,qBAAqB,GAAG,KAAK,KAAK,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACtG,MAAM,oBAAoB,GAAG,KAAK,KAAK,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;QAEvJ,IAAI,kBAAkB,EAAE;YACtB,KAAK,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,IAAI,CAAC,uBAAuB,CAAC,KAAK,GAAG,EAAE,CAAC;YACxC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,IAAI,CAAC,sBAAsB,CAAC,KAAK,GAAG,EAAE,CAAC;YACvC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;QACD,IAAI,qBAAqB,EAAE;YACzB,KAAK,GAAG,GAAG,IAAI,CAAC,uBAAuB,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YAC9D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,IAAI,CAAC,sBAAsB,CAAC,KAAK,GAAG,EAAE,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;QACD,IAAI,oBAAoB,EAAE;YACxB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,KAAK,GAAG,GAAG,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;SAC/C;QAED,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACpB,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;YACxJ,MAAM,QAAQ,GAAG,GAAG,YAAY,GAAG,IAAI,CAAC,YAAY,gBAAgB,IAAI,CAAC,WAAW,UAAU,KAAK,EAAE,CAAC;YACtG,MAAM,IAAI,IAAI,MAAM,IAAI,CAAC,WAAW,CAAC,SAAS,CAC5C,QAAQ,EACR;gBACE,IAAI,EAAE,MAAM;aACb,EACD,IAAI,CAAC,KAAK,CACX,CAAS,CAAC;YAEX,IAAI,IAAI,EAAE;gBACR,IAAI,kBAAkB,EAAE;oBACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,0CAAE,UAAU,GAAG,IAAI,CAAC;iBACvE;gBAED,IAAI,qBAAqB,IAAI,IAAI,CAAC,SAAS,EAAE;oBAC3C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;oBAClD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;iBAC9B;gBAED,IAAI,oBAAoB,IAAI,IAAI,CAAC,SAAS,EAAE;oBAC1C,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;iBAChC;aACF;SACF;KACF;IAgCD,MAAM,2BAA2B,CAAC,CAAC;QACjC,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;QAExB,IAAI,MAAM,KAAK,IAAI,CAAC,uBAAuB,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE;YAClE,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;gBACzD,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC;aAC1D;SACF;QAED,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE;YACzC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;SAC7B;QAED,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;YACvD,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;SAC5C;KACF;IAED,MAAM,0BAA0B,CAAC,CAAC;QAChC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;QAExB,IAAI,MAAM,KAAK,IAAI,CAAC,sBAAsB,EAAE;YAC1C,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;gBACzD,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC;aACzD;YACD,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;aAC5C;SACF;KACF;IAED,YAAY,CAAC,CAAC,EAAE,GAAa;QAC3B,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC;QAC5B,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE;YAClB,OAAO;SACR;QAED,IAAI,YAAY,GAAG,CAAC,CAAC;QAErB,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE;YACnC,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC;YAC7B,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAE/B,IAAI,CAAC,GAAG,EAAE;gBACR,OAAO;aACR;YAED,YAAY,GAAG,CAAC,CAAC,CAAC;YAClB,IAAI,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACzC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,mBAAmB,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;YAC/D,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC;YACjD,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAC3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACnC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,IAAI,GAAG,CAAC,WAAW,EAAE,EAAE;oBACtE,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBAC3C,MAAM,CAAC,SAAS,GAAG,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC;oBAC9E,MAAM,CAAC,SAAS,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;oBACjD,MAAM,CAAC,SAAS,IAAI,8BAA8B,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;oBACnE,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,UAAU;wBACzC,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;wBAC9D,IAAI,WAAW,GAAG,UAAU,CAAC,MAAqB,CAAC;wBACnD,IAAI,WAAW,CAAC,QAAQ,KAAK,QAAQ,EAAE;4BACrC,WAAW,GAAG,WAAW,CAAC,aAAa,CAAC;yBACzC;wBACD,YAAY,CAAC,KAAK,GAAG,WAAW,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;wBAExE,IAAI,UAAU,KAAK,IAAI,CAAC,sBAAsB,EAAE;4BAC9C,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,KAAK,CAAC;yBACxC;wBACD,IAAI,UAAU,KAAK,IAAI,CAAC,uBAAuB,EAAE;4BAC/C,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,KAAK,CAAC;yBACzC;wBAED,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;wBACtC,UAAU,CAAC,KAAK,EAAE,CAAC;qBACpB,CAAC,CAAC;oBAEH,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;iBAC1B;aACF;SACF,CAAC,CAAC;QAEH,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY;YACjD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;YACnF,IAAI,OAAO,CAAC;YACZ,IAAI,WAAW,EAAE;gBACf,OAAO,GAAG,WAAW,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;aACnD;iBAAM;gBACL,OAAO,GAAG,WAAW,CAAC;aACvB;;YAGD,IAAI,YAAY,CAAC,OAAO,IAAI,EAAE,EAAE;gBAC9B,YAAY,EAAE,CAAC;gBACf,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;aACvC;;YAGD,IAAI,YAAY,CAAC,OAAO,IAAI,EAAE,EAAE;gBAC9B,YAAY,EAAE,CAAC;gBACf,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;aACvC;;YAGD,IAAI,YAAY,CAAC,OAAO,IAAI,EAAE,EAAE;gBAC9B,YAAY,CAAC,cAAc,EAAE,CAAC;gBAC9B,IAAI,YAAY,GAAG,CAAC,CAAC,EAAE;oBACrB,IAAI,OAAO,EAAE;wBACX,OAAO,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAC;qBAC/B;iBACF;aACF;SACF,CAAC,CAAC;KACJ;;IAGD,aAAa,CAAC,KAAK;QACjB,MAAM,KAAK,GAAG,QAAQ,CAAC,sBAAsB,CAAC,oBAAoB,CAAC,CAAC;QACpE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrC,IAAI,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE;gBACrB,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;aAC3C;SACF;KACF;;IAGD,SAAS,CAAC,KAAK,EAAE,YAAY;QAC3B,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACzB,IAAI,YAAY,IAAI,KAAK,CAAC,MAAM;YAAE,YAAY,GAAG,CAAC,CAAC;QACnD,IAAI,YAAY,GAAG,CAAC;YAAE,YAAY,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACtD,KAAK,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;KAC1D;;IAGD,YAAY,CAAC,KAAK;QAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;SAClD;KACF;IAED,MAAM;;QACJ,QACEC,QAACC,UAAI,qDAAC,KAAK,EAAC,qBAAqB,IAC9B,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,mBAAmB,KACzCD,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,uBAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,CAAS,CAC3D,IACJ,IAAI,EACRA,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,iFACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,MAAA,IAAI,CAAC,gBAAgB,0CAAE,mBAAmB,EAChD,QAAQ,EAAE,MAAA,IAAI,CAAC,gBAAgB,0CAAE,uBAAuB,EACxD,WAAW,EAAE,MAAA,IAAI,CAAC,gBAAgB,0CAAE,0BAA0B,EAC9D,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,iBAAiB,GAAG,EAAiB,CAAC,EACvD,YAAY,EAAC,KAAK,EAClB,UAAU,EAAE,MAAA,IAAI,CAAC,gBAAgB,0CAAE,yBAAyB,GACxC,EAEtBA,iFACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,EACpC,QAAQ,QACR,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,WAAW,EAAE,MAAA,IAAI,CAAC,UAAU,0CAAE,oBAAoB,EAClD,YAAY,EAAC,KAAK,EAClB,UAAU,EAAE,MAAA,IAAI,CAAC,UAAU,0CAAE,mBAAmB,GAC5B,CAClB,EAEL,CAAA,MAAA,IAAI,CAAC,mBAAmB,0CAAE,wBAAwB,KACjDA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,uBAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,wBAAwB,EAAE,CAAS,CACnE,IACJ,IAAI,EACRA,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,iFACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,sBAAsB,EACtD,QAAQ,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,0BAA0B,EAC9D,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,WAAW,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,6BAA6B,EACpE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,oBAAoB,GAAG,EAAiB,CAAC,EAC1D,YAAY,EAAC,KAAK,EAClB,UAAU,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,4BAA4B,GAC9C,EAEtBA,iFACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,MAAA,IAAI,CAAC,kBAAkB,0CAAE,qBAAqB,EACpD,QAAQ,EAAE,MAAA,IAAI,CAAC,kBAAkB,0CAAE,yBAAyB,EAC5D,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,WAAW,EAAE,MAAA,IAAI,CAAC,kBAAkB,0CAAE,4BAA4B,EAClE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,mBAAmB,GAAG,EAAiB,CAAC,EACzD,YAAY,EAAC,KAAK,EAClB,UAAU,EAAE,MAAA,IAAI,CAAC,kBAAkB,0CAAE,2BAA2B,GAC5C,CAClB,CACD,EACP;KACH;;;;;;;","names":["FetchHelper","MarketWebContextService","debounce","h","Host"],"sources":["src/components/input/pn-address-autofill/pn-address-autofill.scss?tag=pn-address-autofill","src/components/input/pn-address-autofill/pn-address-autofill.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-address-autofill {\n  pn-marketweb-input {\n    width: 50%;\n  }\n\n  .input-container-row {\n    display: flex;\n    //flex-grow: 1;\n    gap: 1rem;\n    margin-bottom: 1rem;\n  }\n\n  .label-container {\n    color: $gray700;\n    font-size: 0.875em;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n  }\n\n  .autocomplete-items {\n    position: absolute;\n    border-radius: 0.8rem;\n    border: 0.1rem solid $gray700;\n    width: 100%;\n    max-height: 30rem;\n    overflow-y: auto;\n\n    &:hover,\n    :focus {\n      border: 0.1rem solid $blue400;\n    }\n\n    div {\n      padding: 1.6rem;\n      cursor: pointer;\n      background-color: #fff;\n      border: 0.1rem solid transparent;\n\n      &:first-child {\n        border-radius: 0.8rem 0.8rem 0 0;\n      }\n\n      &:last-child {\n        border-radius: 0 0 0.8rem 0.8rem;\n      }\n\n      &:hover {\n        background-color: #e0f8ff;\n      }\n    }\n\n    .autocomplete-active {\n      background-color: #e0f8ff;\n    }\n  }\n}\n","import { Component, Prop, h, Element, State, Host, EventEmitter, Event } from '@stencil/core';\nimport { MarketWebContextService } from '../../../globals/MarketWebContextService';\nimport { FetchHelper } from '../../../globals/FetchHelper';\nimport { Root, PostalCodeProps, CityProps, StreetAddressProps, StreetNumberProps } from './types';\nimport debounce from 'debounce';\n\n@Component({\n  tag: 'pn-address-autofill',\n  styleUrl: 'pn-address-autofill.scss',\n})\nexport class PnAddressAutofill {\n  @Element() hostElement: Element;\n  pnInputPostalCode: HTMLElement = null;\n  pnInputCity: HTMLElement = null;\n  pnInputStreetAddress: HTMLElement = null;\n  pnInputStreetNumber: HTMLElement = null;\n  postalCodeInputField: HTMLInputElement = null;\n  streetAddressInputField: HTMLInputElement = null;\n  streetNumberInputField: HTMLInputElement = null;\n  pnInputHiddenValue: HTMLElement = null;\n  endpointPath = '/api/location/get-by-location';\n  private _postalCodeProps: PostalCodeProps = null;\n  private _cityProps: CityProps = null;\n  private _streetAddressProps: StreetAddressProps = null;\n  private _streetNumberProps: StreetNumberProps = null;\n\n  /** Specifies which market we want to show (se,dk,fi,no,com) */\n  @Prop({ mutable: true, reflect: true }) market: string = null; //se\n  /** Specifies which environment we're fetching data from. (production, preproduction, integration, localhost) */\n  @Prop({ mutable: true, reflect: true }) environment: string = null; //sv\n  @Prop() endpoint: string = null;\n  @Prop() cache: boolean = true;\n  @Prop() countryCode: string = null;\n  @Prop() postalCodeProps: string | PostalCodeProps = null;\n  @Prop() cityProps: string | CityProps = null;\n  @Prop() streetAddressProps: string | StreetAddressProps = null;\n  @Prop() streetNumberProps: string | StreetNumberProps = null;\n\n  @State() streetAdressArr: string[] = null;\n  @State() streetNumberArr: string[] = null;\n  @State() city: string = null;\n  @State() postalCode: string = null;\n  @State() streetAddress: string = null;\n  @State() streetNumber: string = null;\n  @State() fullAddress: string = null;\n\n  @Event() addresscomplete: EventEmitter<string>;\n\n  fetchHelper = new FetchHelper('PostalCodeCityAutofill');\n\n  componentWillLoad() {\n    this.setInitialValues();\n    this._postalCodeProps = this.setProps(this.postalCodeProps);\n    this._cityProps = this.setProps(this.cityProps);\n    this._streetAddressProps = this.setProps(this.streetAddressProps);\n    this._streetNumberProps = this.setProps(this.streetNumberProps);\n  }\n\n  setProps(props) {\n    if (typeof props === 'string') {\n      return JSON.parse(props);\n    } else {\n      return props;\n    }\n  }\n\n  componentDidLoad() {\n    this.postalCodeInputField = this.pnInputPostalCode.querySelector('input');\n    this.streetAddressInputField = this.pnInputStreetAddress.querySelector('input');\n    this.streetNumberInputField = this.pnInputStreetNumber.querySelector('input');\n    this.addEventHandlers();\n  }\n\n  async setInitialValues(href = window.location.href) {\n    const marketWebContextService = new MarketWebContextService(href);\n    if (!this.environment) {\n      this.environment = await marketWebContextService.getEnvironmentName();\n    }\n\n    if (!this.endpoint && this.environment?.indexOf('local') === -1) {\n      this.endpoint = await marketWebContextService.getEndpoint(this.environment, this.market);\n    }\n\n    if (!this.endpoint) {\n      this.endpoint = '';\n    }\n  }\n\n  addEventHandlers() {\n    const postalCodeSearch = debounce(this.fetchData.bind(this, this.postalCodeInputField), 1000);\n    this.postalCodeInputField.addEventListener('keyup', postalCodeSearch);\n    this.streetAddressInputField.addEventListener('keyup', this.handleStreetAddressDropdown.bind(this));\n    this.streetNumberInputField.addEventListener('focus', this.handleStreetNumberDropdown.bind(this));\n    this.addFormFieldEvent();\n  }\n\n  addFormFieldEvent() {\n    const allInputs = this.hostElement.querySelectorAll('input');\n    allInputs.forEach(element => {\n      ['keyup', 'change'].forEach(eventName => {\n        const debounceUpdate = debounce(this.updateHiddenValue.bind(this), 1000);\n        element.addEventListener(eventName, debounceUpdate);\n      });\n    });\n  }\n\n  updateHiddenValue(e) {\n    if (e.target === this.streetNumberInputField) {\n      this.streetNumber = this.streetNumberInputField.value;\n    }\n\n    if (this.postalCode && this.city && this.streetAddress && this.streetNumber) {\n      this.fullAddress = `${this.streetAddress} ${this.streetNumber}, ${this.city} ${this.postalCode}`;\n    } else {\n      this.fullAddress = '';\n    }\n\n    this.addresscomplete.emit(this.fullAddress);\n  }\n\n  async fetchData(field, e: KeyboardEvent) {\n    if (e) {\n      e.preventDefault();\n\n      if (e.key === 'Tab') {\n        if (this.city) {\n          return;\n        }\n      }\n    }\n\n    let query = '';\n    const isPostalCodeSearch = e && e.target === this.postalCodeInputField;\n    const isStreetAddressSearch = field === this.streetAddressInputField && this.city && this.city.length;\n    const isStreetNumberSearch = field === this.streetNumberInputField && this.city && this.city.length && this.streetAddress && this.streetAddress.length;\n\n    if (isPostalCodeSearch) {\n      query = this.postalCodeInputField.value;\n      this.streetAdressArr = null;\n      this.streetAddressInputField.value = '';\n      this.streetNumberArr = null;\n      this.streetNumberInputField.value = '';\n      this.city = null;\n      this.streetAddress = null;\n      this.streetNumber = null;\n    }\n    if (isStreetAddressSearch) {\n      query = `${this.streetAddressInputField.value}, ${this.city}`;\n      this.streetNumberArr = null;\n      this.streetNumberInputField.value = '';\n      this.streetNumber = null;\n    }\n    if (isStreetNumberSearch) {\n      this.streetAdressArr = null;\n      query = `${this.streetAddress}, ${this.city}`;\n    }\n\n    if (query.length > 0) {\n      const endpointBase = this.endpoint.lastIndexOf('/') === this.endpoint.length - 1 ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;\n      const fetchUrl = `${endpointBase}${this.endpointPath}?countryCode=${this.countryCode}&query=${query}`;\n      const data = (await this.fetchHelper.fetchJson(\n        fetchUrl,\n        {\n          mode: 'cors',\n        },\n        this.cache,\n      )) as Root;\n\n      if (data) {\n        if (isPostalCodeSearch) {\n          this.city = data.postalCodes ? data.postalCodes[0]?.postalCity : null;\n        }\n\n        if (isStreetAddressSearch && data.addresses) {\n          this.postalCode = this.postalCodeInputField.value;\n          this.filterStreetNames(data);\n        }\n\n        if (isStreetNumberSearch && data.addresses) {\n          this.filterStreetNumbers(data);\n        }\n      }\n    }\n  }\n\n  filterStreetNames = (data: Root) => {\n    const addresses: string[] = [];\n    this.streetAdressArr = null;\n    data.addresses.forEach(item => {\n      if (item.postalCode.postalCity === this.city && !addresses.includes(item.street)) {\n        addresses.push(item.street);\n      }\n    });\n    this.streetAdressArr = addresses;\n  };\n\n  filterStreetNumbers = (data: Root) => {\n    const streetNumbersResult: string[] = [];\n    data.addresses.forEach(item => {\n      if (item.postalCode.postalCode === this.postalCode) {\n        const { numberFrom, numberTo } = item;\n        const from = parseInt(numberFrom);\n        const to = parseInt(numberTo);\n\n        for (let i = from; i <= to; i++) {\n          const nrString = i.toString();\n          if (!streetNumbersResult.includes(nrString)) {\n            streetNumbersResult.push(i.toString());\n          }\n        }\n      }\n    });\n    this.streetNumberArr = streetNumbersResult;\n  };\n\n  async handleStreetAddressDropdown(e) {\n    const target = e.target;\n\n    if (target === this.streetAddressInputField && target.value.length) {\n      if (!this.streetAdressArr || !this.streetAdressArr.length) {\n        await this.fetchData(this.streetAddressInputField, null);\n      }\n    }\n\n    if (!target.value || !target.value.length) {\n      this.streetAdressArr = null;\n    }\n\n    if (this.streetAdressArr && this.streetAdressArr.length) {\n      this.autoComplete(e, this.streetAdressArr);\n    }\n  }\n\n  async handleStreetNumberDropdown(e) {\n    e.preventDefault();\n    const target = e.target;\n\n    if (target === this.streetNumberInputField) {\n      if (!this.streetNumberArr || !this.streetNumberArr.length) {\n        await this.fetchData(this.streetNumberInputField, null);\n      }\n      if (this.streetNumberArr) {\n        this.autoComplete(e, this.streetNumberArr);\n      }\n    }\n  }\n\n  autoComplete(e, arr: string[]) {\n    const inputField = e.target;\n    if (arr.length < 1) {\n      return;\n    }\n\n    let currentFocus = 0;\n\n    inputField.addEventListener('input', () => {\n      const val = inputField.value;\n      this.closeAllLists(inputField);\n\n      if (!val) {\n        return;\n      }\n\n      currentFocus = -1;\n      let list = document.createElement('div');\n      list.setAttribute('id', 'autocomplete-list' + inputField.name);\n      list.setAttribute('class', 'autocomplete-items');\n      inputField.parentElement.appendChild(list);\n      for (let i = 0; i < arr.length; i++) {\n        if (arr[i].substring(0, val.length).toUpperCase() == val.toUpperCase()) {\n          let option = document.createElement('div');\n          option.innerHTML = '<strong>' + arr[i].substring(0, val.length) + '</strong>';\n          option.innerHTML += arr[i].substring(val.length);\n          option.innerHTML += \"<input type='hidden' value='\" + arr[i] + \"'>\";\n          option.addEventListener('click', clickEvent => {\n            const inputParrent = inputField.closest('pn-marketweb-input');\n            let eventTarget = clickEvent.target as HTMLElement;\n            if (eventTarget.nodeName === 'STRONG') {\n              eventTarget = eventTarget.parentElement;\n            }\n            inputParrent.value = eventTarget.getElementsByTagName('input')[0].value;\n\n            if (inputField === this.streetNumberInputField) {\n              this.streetNumber = inputParrent.value;\n            }\n            if (inputField === this.streetAddressInputField) {\n              this.streetAddress = inputParrent.value;\n            }\n\n            this.closeAllLists(clickEvent.target);\n            inputField.focus();\n          });\n\n          list.appendChild(option);\n        }\n      }\n    });\n\n    inputField.addEventListener('keydown', keydownEvent => {\n      const listElement = document.getElementById('autocomplete-list' + inputField.name);\n      let element;\n      if (listElement) {\n        element = listElement.getElementsByTagName('div');\n      } else {\n        element = listElement;\n      }\n\n      //If arrow DOWN key is pressed\n      if (keydownEvent.keyCode == 40) {\n        currentFocus++;\n        this.addActive(element, currentFocus);\n      }\n\n      //If the arrow UP key is pressed\n      if (keydownEvent.keyCode == 38) {\n        currentFocus--;\n        this.addActive(element, currentFocus);\n      }\n\n      //If the ENTER key is pressed\n      if (keydownEvent.keyCode == 13) {\n        keydownEvent.preventDefault();\n        if (currentFocus > -1) {\n          if (element) {\n            element[currentFocus].click();\n          }\n        }\n      }\n    });\n  }\n\n  //close all autocomplete lists in the document, except the one passed as an argument:\n  closeAllLists(elmnt) {\n    const lists = document.getElementsByClassName('autocomplete-items');\n    for (let i = 0; i < lists.length; i++) {\n      if (elmnt != lists[i]) {\n        lists[i].parentNode.removeChild(lists[i]);\n      }\n    }\n  }\n\n  //a function to classify an item as \"active\":\n  addActive(elmnt, currentFocus) {\n    if (!elmnt) return;\n    this.removeActive(elmnt);\n    if (currentFocus >= elmnt.length) currentFocus = 0;\n    if (currentFocus < 0) currentFocus = elmnt.length - 1;\n    elmnt[currentFocus].classList.add('autocomplete-active');\n  }\n\n  //a function to remove the \"active\" class from all autocomplete items:\n  removeActive(elmnt) {\n    for (let i = 0; i < elmnt.length; i++) {\n      elmnt[i].classList.remove('autocomplete-active');\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"pn-address-autofill\">\n        {this._postalCodeProps?.postalCodeCityLabel ? (\n          <div class=\"label-container\">\n            <label>{`${this._postalCodeProps.postalCodeCityLabel}`}</label>\n          </div>\n        ) : null}\n        <div class=\"input-container-row\">\n          <pn-marketweb-input\n            type=\"text\"\n            name={this._postalCodeProps?.postalCodeInputName}\n            required={this._postalCodeProps?.postalCodeInputRequired}\n            placeholder={this._postalCodeProps?.postalCodeInputPlaceholder}\n            ref={el => (this.pnInputPostalCode = el as HTMLElement)}\n            autocomplete=\"off\"\n            helpertext={this._postalCodeProps?.postalCodeInputHelpertext}\n          ></pn-marketweb-input>\n\n          <pn-marketweb-input\n            type=\"text\"\n            name={this._cityProps?.cityInputName}\n            disabled\n            value={this.city}\n            placeholder={this._cityProps?.cityInputPlaceholder}\n            autocomplete=\"off\"\n            helpertext={this._cityProps?.cityInputHelpertext}\n          ></pn-marketweb-input>\n        </div>\n\n        {this._streetAddressProps?.streetAddressNumberLabel ? (\n          <div class=\"label-container\">\n            <label>{`${this._streetAddressProps.streetAddressNumberLabel}`}</label>\n          </div>\n        ) : null}\n        <div class=\"input-container-row\">\n          <pn-marketweb-input\n            type=\"text\"\n            name={this._streetAddressProps?.streetAddressInputName}\n            required={this._streetAddressProps?.streetAddressInputRequired}\n            value={this.streetAddress}\n            placeholder={this._streetAddressProps?.streetAddressInputPlaceholder}\n            ref={el => (this.pnInputStreetAddress = el as HTMLElement)}\n            autocomplete=\"off\"\n            helpertext={this._streetAddressProps?.streetAddressInputHelpertext}\n          ></pn-marketweb-input>\n\n          <pn-marketweb-input\n            type=\"text\"\n            name={this._streetNumberProps?.streetNumberInputName}\n            required={this._streetNumberProps?.streetNumberInputRequired}\n            value={this.streetNumber}\n            placeholder={this._streetNumberProps?.streetNumberInputPlaceholder}\n            ref={el => (this.pnInputStreetNumber = el as HTMLElement)}\n            autocomplete=\"off\"\n            helpertext={this._streetNumberProps?.streetNumberInputHelpertext}\n          ></pn-marketweb-input>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-address-autofill.entry.cjs.js","mappings":"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","names":["FetchHelper","MarketWebContextService","debounce","h","Host"],"sources":["src/components/input/pn-address-autofill/pn-address-autofill.scss?tag=pn-address-autofill","src/components/input/pn-address-autofill/pn-address-autofill.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-address-autofill {\n  pn-marketweb-input {\n    width: 50%;\n  }\n\n  .input-container-row {\n    display: flex;\n    //flex-grow: 1;\n    gap: 1rem;\n    margin-bottom: 1rem;\n  }\n\n  .label-container {\n    color: $gray700;\n    font-size: 0.875em;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n  }\n\n  .autocomplete-items {\n    position: absolute;\n    border-radius: 0.8rem;\n    border: 0.1rem solid $gray700;\n    width: 100%;\n    max-height: 30rem;\n    overflow-y: auto;\n\n    &:hover,\n    :focus {\n      border: 0.1rem solid $blue400;\n    }\n\n    div {\n      padding: 1.6rem;\n      cursor: pointer;\n      background-color: #fff;\n      border: 0.1rem solid transparent;\n\n      &:first-child {\n        border-radius: 0.8rem 0.8rem 0 0;\n      }\n\n      &:last-child {\n        border-radius: 0 0 0.8rem 0.8rem;\n      }\n\n      &:hover {\n        background-color: #e0f8ff;\n      }\n    }\n\n    .autocomplete-active {\n      background-color: #e0f8ff;\n    }\n  }\n}\n","import { Component, Prop, h, Element, State, Host, EventEmitter, Event } from '@stencil/core';\nimport { MarketWebContextService } from '../../../globals/MarketWebContextService';\nimport { FetchHelper } from '../../../globals/FetchHelper';\nimport { Root, PostalCodeProps, CityProps, StreetAddressProps, StreetNumberProps } from './types';\nimport debounce from 'debounce';\n\n@Component({\n  tag: 'pn-address-autofill',\n  styleUrl: 'pn-address-autofill.scss',\n})\nexport class PnAddressAutofill {\n  @Element() hostElement: Element;\n  pnInputPostalCode: HTMLElement = null;\n  pnInputCity: HTMLElement = null;\n  pnInputStreetAddress: HTMLElement = null;\n  pnInputStreetNumber: HTMLElement = null;\n  postalCodeInputField: HTMLInputElement = null;\n  streetAddressInputField: HTMLInputElement = null;\n  streetNumberInputField: HTMLInputElement = null;\n  pnInputHiddenValue: HTMLElement = null;\n  endpointPath = '/api/location/get-by-location';\n  private _postalCodeProps: PostalCodeProps = null;\n  private _cityProps: CityProps = null;\n  private _streetAddressProps: StreetAddressProps = null;\n  private _streetNumberProps: StreetNumberProps = null;\n\n  /** Specifies which market we want to show (se,dk,fi,no,com) */\n  @Prop({ mutable: true, reflect: true }) market: string = null; //se\n  /** Specifies which environment we're fetching data from. (production, preproduction, integration, localhost) */\n  @Prop({ mutable: true, reflect: true }) environment: string = null; //sv\n  @Prop() endpoint: string = null;\n  @Prop() cache: boolean = true;\n  @Prop() countryCode: string = null;\n  @Prop() postalCodeProps: string | PostalCodeProps = null;\n  @Prop() cityProps: string | CityProps = null;\n  @Prop() streetAddressProps: string | StreetAddressProps = null;\n  @Prop() streetNumberProps: string | StreetNumberProps = null;\n\n  @State() streetAdressArr: string[] = null;\n  @State() streetNumberArr: string[] = null;\n  @State() city: string = null;\n  @State() postalCode: string = null;\n  @State() streetAddress: string = null;\n  @State() streetNumber: string = null;\n  @State() fullAddress: string = null;\n\n  @Event() addresscomplete: EventEmitter<string>;\n\n  fetchHelper = new FetchHelper('PostalCodeCityAutofill');\n\n  componentWillLoad() {\n    this.setInitialValues();\n    this._postalCodeProps = this.setProps(this.postalCodeProps);\n    this._cityProps = this.setProps(this.cityProps);\n    this._streetAddressProps = this.setProps(this.streetAddressProps);\n    this._streetNumberProps = this.setProps(this.streetNumberProps);\n  }\n\n  setProps(props) {\n    if (typeof props === 'string') {\n      return JSON.parse(props);\n    } else {\n      return props;\n    }\n  }\n\n  componentDidLoad() {\n    this.postalCodeInputField = this.pnInputPostalCode.querySelector('input');\n    this.streetAddressInputField = this.pnInputStreetAddress.querySelector('input');\n    this.streetNumberInputField = this.pnInputStreetNumber.querySelector('input');\n    this.addEventHandlers();\n  }\n\n  async setInitialValues(href = window.location.href) {\n    const marketWebContextService = new MarketWebContextService(href);\n    if (!this.environment) {\n      this.environment = await marketWebContextService.getEnvironmentName();\n    }\n\n    if (!this.endpoint && this.environment?.indexOf('local') === -1) {\n      this.endpoint = await marketWebContextService.getEndpoint(this.environment, this.market);\n    }\n\n    if (!this.endpoint) {\n      this.endpoint = '';\n    }\n  }\n\n  addEventHandlers() {\n    const postalCodeSearch = debounce(this.fetchData.bind(this, this.postalCodeInputField), 1000);\n    this.postalCodeInputField.addEventListener('keyup', postalCodeSearch);\n    this.streetAddressInputField.addEventListener('keyup', this.handleStreetAddressDropdown.bind(this));\n    this.streetNumberInputField.addEventListener('focus', this.handleStreetNumberDropdown.bind(this));\n    this.addFormFieldEvent();\n  }\n\n  addFormFieldEvent() {\n    const allInputs = this.hostElement.querySelectorAll('input');\n    allInputs.forEach(element => {\n      ['keyup', 'change'].forEach(eventName => {\n        const debounceUpdate = debounce(this.updateHiddenValue.bind(this), 1000);\n        element.addEventListener(eventName, debounceUpdate);\n      });\n    });\n  }\n\n  updateHiddenValue(e) {\n    if (e.target === this.streetNumberInputField) {\n      this.streetNumber = this.streetNumberInputField.value;\n    }\n\n    if (this.postalCode && this.city && this.streetAddress && this.streetNumber) {\n      this.fullAddress = `${this.streetAddress} ${this.streetNumber}, ${this.city} ${this.postalCode}`;\n    } else {\n      this.fullAddress = '';\n    }\n\n    this.addresscomplete.emit(this.fullAddress);\n  }\n\n  async fetchData(field, e: KeyboardEvent) {\n    if (e) {\n      e.preventDefault();\n\n      if (e.key === 'Tab') {\n        if (this.city) {\n          return;\n        }\n      }\n    }\n\n    let query = '';\n    const isPostalCodeSearch = e && e.target === this.postalCodeInputField;\n    const isStreetAddressSearch = field === this.streetAddressInputField && this.city && this.city.length;\n    const isStreetNumberSearch = field === this.streetNumberInputField && this.city && this.city.length && this.streetAddress && this.streetAddress.length;\n\n    if (isPostalCodeSearch) {\n      query = this.postalCodeInputField.value;\n      this.streetAdressArr = null;\n      this.streetAddressInputField.value = '';\n      this.streetNumberArr = null;\n      this.streetNumberInputField.value = '';\n      this.city = null;\n      this.streetAddress = null;\n      this.streetNumber = null;\n    }\n    if (isStreetAddressSearch) {\n      query = `${this.streetAddressInputField.value}, ${this.city}`;\n      this.streetNumberArr = null;\n      this.streetNumberInputField.value = '';\n      this.streetNumber = null;\n    }\n    if (isStreetNumberSearch) {\n      this.streetAdressArr = null;\n      query = `${this.streetAddress}, ${this.city}`;\n    }\n\n    if (query.length > 0) {\n      const endpointBase = this.endpoint.lastIndexOf('/') === this.endpoint.length - 1 ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;\n      const fetchUrl = `${endpointBase}${this.endpointPath}?countryCode=${this.countryCode}&query=${query}`;\n      const data = (await this.fetchHelper.fetchJson(\n        fetchUrl,\n        {\n          mode: 'cors',\n        },\n        this.cache,\n      )) as Root;\n\n      if (data) {\n        if (isPostalCodeSearch) {\n          this.city = data.postalCodes ? data.postalCodes[0]?.postalCity : null;\n        }\n\n        if (isStreetAddressSearch && data.addresses) {\n          this.postalCode = this.postalCodeInputField.value;\n          this.filterStreetNames(data);\n        }\n\n        if (isStreetNumberSearch && data.addresses) {\n          this.filterStreetNumbers(data);\n        }\n      }\n    }\n  }\n\n  filterStreetNames = (data: Root) => {\n    const addresses: string[] = [];\n    this.streetAdressArr = null;\n    data.addresses.forEach(item => {\n      if (item.postalCode.postalCity === this.city && !addresses.includes(item.street)) {\n        addresses.push(item.street);\n      }\n    });\n    this.streetAdressArr = addresses;\n  };\n\n  filterStreetNumbers = (data: Root) => {\n    const streetNumbersResult: string[] = [];\n    data.addresses.forEach(item => {\n      if (item.postalCode.postalCode === this.postalCode) {\n        const { numberFrom, numberTo } = item;\n        const from = parseInt(numberFrom);\n        const to = parseInt(numberTo);\n\n        for (let i = from; i <= to; i++) {\n          const nrString = i.toString();\n          if (!streetNumbersResult.includes(nrString)) {\n            streetNumbersResult.push(i.toString());\n          }\n        }\n      }\n    });\n    this.streetNumberArr = streetNumbersResult;\n  };\n\n  async handleStreetAddressDropdown(e) {\n    const target = e.target;\n\n    if (target === this.streetAddressInputField && target.value.length) {\n      if (!this.streetAdressArr || !this.streetAdressArr.length) {\n        await this.fetchData(this.streetAddressInputField, null);\n      }\n    }\n\n    if (!target.value || !target.value.length) {\n      this.streetAdressArr = null;\n    }\n\n    if (this.streetAdressArr && this.streetAdressArr.length) {\n      this.autoComplete(e, this.streetAdressArr);\n    }\n  }\n\n  async handleStreetNumberDropdown(e) {\n    e.preventDefault();\n    const target = e.target;\n\n    if (target === this.streetNumberInputField) {\n      if (!this.streetNumberArr || !this.streetNumberArr.length) {\n        await this.fetchData(this.streetNumberInputField, null);\n      }\n      if (this.streetNumberArr) {\n        this.autoComplete(e, this.streetNumberArr);\n      }\n    }\n  }\n\n  autoComplete(e, arr: string[]) {\n    const inputField = e.target;\n    if (arr.length < 1) {\n      return;\n    }\n\n    let currentFocus = 0;\n\n    inputField.addEventListener('input', () => {\n      const val = inputField.value;\n      this.closeAllLists(inputField);\n\n      if (!val) {\n        return;\n      }\n\n      currentFocus = -1;\n      let list = document.createElement('div');\n      list.setAttribute('id', 'autocomplete-list' + inputField.name);\n      list.setAttribute('class', 'autocomplete-items');\n      inputField.parentElement.appendChild(list);\n      for (let i = 0; i < arr.length; i++) {\n        if (arr[i].substring(0, val.length).toUpperCase() == val.toUpperCase()) {\n          let option = document.createElement('div');\n          option.innerHTML = '<strong>' + arr[i].substring(0, val.length) + '</strong>';\n          option.innerHTML += arr[i].substring(val.length);\n          option.innerHTML += \"<input type='hidden' value='\" + arr[i] + \"'>\";\n          option.addEventListener('click', clickEvent => {\n            const inputParrent = inputField.closest('pn-marketweb-input');\n            let eventTarget = clickEvent.target as HTMLElement;\n            if (eventTarget.nodeName === 'STRONG') {\n              eventTarget = eventTarget.parentElement;\n            }\n            inputParrent.value = eventTarget.getElementsByTagName('input')[0].value;\n\n            if (inputField === this.streetNumberInputField) {\n              this.streetNumber = inputParrent.value;\n            }\n            if (inputField === this.streetAddressInputField) {\n              this.streetAddress = inputParrent.value;\n            }\n\n            this.closeAllLists(clickEvent.target);\n            inputField.focus();\n          });\n\n          list.appendChild(option);\n        }\n      }\n    });\n\n    inputField.addEventListener('keydown', keydownEvent => {\n      const listElement = document.getElementById('autocomplete-list' + inputField.name);\n      let element;\n      if (listElement) {\n        element = listElement.getElementsByTagName('div');\n      } else {\n        element = listElement;\n      }\n\n      //If arrow DOWN key is pressed\n      if (keydownEvent.keyCode == 40) {\n        currentFocus++;\n        this.addActive(element, currentFocus);\n      }\n\n      //If the arrow UP key is pressed\n      if (keydownEvent.keyCode == 38) {\n        currentFocus--;\n        this.addActive(element, currentFocus);\n      }\n\n      //If the ENTER key is pressed\n      if (keydownEvent.keyCode == 13) {\n        keydownEvent.preventDefault();\n        if (currentFocus > -1) {\n          if (element) {\n            element[currentFocus].click();\n          }\n        }\n      }\n    });\n  }\n\n  //close all autocomplete lists in the document, except the one passed as an argument:\n  closeAllLists(elmnt) {\n    const lists = document.getElementsByClassName('autocomplete-items');\n    for (let i = 0; i < lists.length; i++) {\n      if (elmnt != lists[i]) {\n        lists[i].parentNode.removeChild(lists[i]);\n      }\n    }\n  }\n\n  //a function to classify an item as \"active\":\n  addActive(elmnt, currentFocus) {\n    if (!elmnt) return;\n    this.removeActive(elmnt);\n    if (currentFocus >= elmnt.length) currentFocus = 0;\n    if (currentFocus < 0) currentFocus = elmnt.length - 1;\n    elmnt[currentFocus].classList.add('autocomplete-active');\n  }\n\n  //a function to remove the \"active\" class from all autocomplete items:\n  removeActive(elmnt) {\n    for (let i = 0; i < elmnt.length; i++) {\n      elmnt[i].classList.remove('autocomplete-active');\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"pn-address-autofill\">\n        {this._postalCodeProps?.postalCodeCityLabel ? (\n          <div class=\"label-container\">\n            <label>{`${this._postalCodeProps.postalCodeCityLabel}`}</label>\n          </div>\n        ) : null}\n        <div class=\"input-container-row\">\n          <pn-marketweb-input\n            type=\"text\"\n            name={this._postalCodeProps?.postalCodeInputName}\n            required={this._postalCodeProps?.postalCodeInputRequired}\n            placeholder={this._postalCodeProps?.postalCodeInputPlaceholder}\n            ref={el => (this.pnInputPostalCode = el as HTMLElement)}\n            autocomplete=\"off\"\n            helpertext={this._postalCodeProps?.postalCodeInputHelpertext}\n          ></pn-marketweb-input>\n\n          <pn-marketweb-input\n            type=\"text\"\n            name={this._cityProps?.cityInputName}\n            disabled\n            value={this.city}\n            placeholder={this._cityProps?.cityInputPlaceholder}\n            autocomplete=\"off\"\n            helpertext={this._cityProps?.cityInputHelpertext}\n          ></pn-marketweb-input>\n        </div>\n\n        {this._streetAddressProps?.streetAddressNumberLabel ? (\n          <div class=\"label-container\">\n            <label>{`${this._streetAddressProps.streetAddressNumberLabel}`}</label>\n          </div>\n        ) : null}\n        <div class=\"input-container-row\">\n          <pn-marketweb-input\n            type=\"text\"\n            name={this._streetAddressProps?.streetAddressInputName}\n            required={this._streetAddressProps?.streetAddressInputRequired}\n            value={this.streetAddress}\n            placeholder={this._streetAddressProps?.streetAddressInputPlaceholder}\n            ref={el => (this.pnInputStreetAddress = el as HTMLElement)}\n            autocomplete=\"off\"\n            helpertext={this._streetAddressProps?.streetAddressInputHelpertext}\n          ></pn-marketweb-input>\n\n          <pn-marketweb-input\n            type=\"text\"\n            name={this._streetNumberProps?.streetNumberInputName}\n            required={this._streetNumberProps?.streetNumberInputRequired}\n            value={this.streetNumber}\n            placeholder={this._streetNumberProps?.streetNumberInputPlaceholder}\n            ref={el => (this.pnInputStreetNumber = el as HTMLElement)}\n            autocomplete=\"off\"\n            helpertext={this._streetNumberProps?.streetNumberInputHelpertext}\n          ></pn-marketweb-input>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-animated-tile.cjs.entry.js

@@ -12,13 +12,14 @@ const PnAnimatedTileStyle0 = pnAnimatedTileCss;
 const PnAnimatedTile = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.onClickHandler = () => {
-            this.toggled = !this.toggled;
-        };
         this.toggled = false;
         this.transitionClassName = '';
         this.animateIcon = '';
     }
+    get hostElement() { return index.getElement(this); }
+    onClickHandler = () => {
+        this.toggled = !this.toggled;
+    };
     onToggledHandler() {
         this.transitionClassName = index$1.classNames({ 'fade': this.toggled, 'fade--reversed': !this.toggled });
         this.animateIcon = index$1.classNames({ 'animate': this.toggled, '': !this.toggled });
@@ -26,7 +27,6 @@ const PnAnimatedTile = class {
     render() {
         return (index.h(index.Host, { key: 'ec2fa6234e759656fe4d0d40099248ba9feea212' }, index.h("div", { key: '6457a5c6f9776c7846ea89f6fad9236f21ebd2ec', class: "pn-animated-tile__container" }, index.h("div", { key: '5d4d15ad4016ab78e43ba598d464309d825a171d', class: `pn-animated-tile__content cat-animate ${this.transitionClassName}` }, index.h("slot", { key: '8669f993453f1999ada8eaa342cb6daaca5827e0', name: "side-a" }), index.h("slot", { key: '96e3b5ea3e2ae3f67f329a8ab7fc06b0961e8689', name: "side-b" })), index.h("button", { key: '7a45847b51d43175e422b55705f6e9130394e03a', type: "button", "aria-label": "Read more", class: `pn-animated-tile__toggle cat-animate toggle ${this.animateIcon}`, onClick: this.onClickHandler }, index.h("pn-icon", { key: '79c94d44537ca72618b1460becb62bfe39b0021d', icon: plus.plus })))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "toggled": ["onToggledHandler"]
     }; }

package/cjs/pn-animated-tile.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-animated-tile.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,iBAAiB,GAAG,qsIAAqsI,CAAC;AAChuI,6BAAe,iBAAiB;;MCQnB,cAAc;;;QAOzB,mBAAc,GAAG;YACf,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B,CAAC;uBAN0B,KAAK;mCACM,EAAE;2BACV,EAAE;;IAOjC,gBAAgB;QACd,IAAI,CAAC,mBAAmB,GAAGA,kBAAU,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QACjG,IAAI,CAAC,WAAW,GAAGA,kBAAU,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KAC/E;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,6BAA6B,IACtCA,kEAAK,KAAK,EAAE,yCAAyC,IAAI,CAAC,mBAAmB,EAAE,IAC7EA,mEAAM,IAAI,EAAC,QAAQ,GAAG,EACtBA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACNA,qEAAQ,IAAI,EAAC,QAAQ,gBAAY,WAAW,EAAC,KAAK,EAAE,+CAA+C,IAAI,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,cAAc,IACjJA,sEAAS,IAAI,EAAEE,SAAI,GAAY,CACxB,CACL,CACD,EACP;KACH;;;;;;;;;;","names":["classNames","h","Host","plus"],"sources":["src/components/animation/pn-animated-tile/pn-animated-tile.scss?tag=pn-animated-tile","src/components/animation/pn-animated-tile/pn-animated-tile.tsx"],"sourcesContent":["@import '../../../globals/main';\n\n$gray100: #e9e6e5;\n\npn-animated-tile {\n  .pn-animated-tile__container {\n    position: relative;\n    border-radius: 2.4rem;\n    height: 56rem;\n\n    cursor: default;\n  }\n\n  .pn-animated-tile__content {\n    position: relative;\n    display: flex;\n\n    height: 100%;\n    width: 100%;\n    background-color: transparent;\n  }\n\n  [slot='side-a'],\n  [slot='side-b'] {\n    position: absolute;\n    align-self: stretch;\n\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  //initial slots' state\n  [slot='side-a'] {\n    padding: 0;\n    opacity: 1;\n  }\n\n  [slot='side-b'] {\n    z-index: -1;\n    padding: 2.4rem 2.4rem 7rem 2.4rem;\n    opacity: 0;\n    transform: translateY(50px);\n  }\n\n  .pn-animated-tile__toggle {\n    z-index: 2;\n    position: absolute;\n    bottom: 2.4rem;\n    right: 2.4rem;\n    padding: 0.8rem;\n    border-radius: 50%;\n    border: none;\n    cursor: pointer;\n\n    background-color: $white;\n    transition: background-color 0.45s ease-in-out;\n    pn-icon {\n      background-color: $white;\n      transition:\n        background-color 0.45s ease-in-out,\n        transform 0.45s ease-in-out 0.5s;\n    }\n\n    &:hover {\n      background-color: $gray100;\n      pn-icon {\n        background-color: $gray100;\n      }\n    }\n  }\n\n  .button-tooltip {\n    display: none;\n  }\n}\n\n//animations\n.cat-animate {\n  [slot='side-a'],\n  [slot='side-b'] {\n    transition:\n      opacity 0.45s ease-in-out,\n      transform 0.45s ease-in-out 0.5s;\n  }\n\n  &.fade {\n    //from a to b\n    [slot='side-a'] {\n      opacity: 0;\n      z-index: -1;\n    }\n\n    [slot='side-b'] {\n      z-index: 1;\n      opacity: 1;\n      transform: translateY(0);\n      transition-delay: 0.5s;\n    }\n\n    //from b to a\n    &--reversed {\n      [slot='side-a'] {\n        opacity: 1;\n\n        transition-delay: 0.5s;\n      }\n\n      [slot='side-b'] {\n        opacity: 0;\n        transform: translateY(50px);\n      }\n    }\n  }\n\n  &.toggle {\n    &.animate {\n      pn-icon {\n        transform: rotate(45deg);\n      }\n    }\n  }\n}\n\n//themes\n[data-cat-theme='white'] {\n  .pn-animated-tile__container {\n    background-color: $white;\n  }\n\n  .pn-animated-tile__toggle {\n    background-color: $blue400;\n    pn-icon {\n      background-color: $blue400;\n      svg > path {\n        fill: $white;\n      }\n    }\n\n    &:hover {\n      background-color: $blue700;\n      pn-icon {\n        background-color: $blue700;\n      }\n    }\n\n    &:focus,\n    &:focus-visible {\n      outline-color: $blue700;\n    }\n  }\n}\n\n[data-cat-theme='coral400'] {\n  .pn-animated-tile__container {\n    background-color: $coral400;\n  }\n\n  .pn-animated-tile__toggle {\n    background-color: $white;\n    pn-icon {\n      background-color: $white;\n      svg > path {\n        fill: $coral400;\n      }\n    }\n\n    &:focus,\n    &:focus-visible {\n      outline-color: $coral400;\n    }\n  }\n}\n\n[data-cat-theme='private'] {\n  .pn-animated-tile__container {\n    background-color: $blue400;\n  }\n\n  .pn-animated-tile__toggle {\n    background-color: $white;\n    pn-icon {\n      background-color: $white;\n      svg > path {\n        fill: $blue400;\n      }\n    }\n\n    &:focus,\n    &:focus-visible {\n      outline-color: $blue400;\n    }\n  }\n}\n\n[data-cat-theme='business'] {\n  .pn-animated-tile__container {\n    background-color: $blue900;\n  }\n\n  .pn-animated-tile__toggle {\n    background-color: $white;\n    pn-icon {\n      background-color: $white;\n      svg > path {\n        fill: $blue900;\n      }\n    }\n\n    &:focus,\n    &:focus-visible {\n      outline-color: $blue900;\n    }\n  }\n}\n\n[data-cat-theme='hybrid'] {\n  .pn-animated-tile__container {\n    background-color: $gray100;\n  }\n\n  .pn-animated-tile__toggle {\n    background-color: $white;\n    pn-icon {\n      background-color: $white;\n      svg > path {\n        fill: $blue700;\n      }\n    }\n\n    &:focus,\n    &:focus-visible {\n      outline-color: $blue700;\n    }\n  }\n}\n\n[data-cat-firstpage-only='true'] {\n  [slot='side-b'],\n  .pn-animated-tile__toggle {\n    display: none;\n  }\n}\n","import classNames from 'classnames';\n\nimport { Component, Element, h, Host, State, Watch } from '@stencil/core';\nimport { plus } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-animated-tile',\n  styleUrl: 'pn-animated-tile.scss',\n})\nexport class PnAnimatedTile {\n  @Element() hostElement: HTMLElement;\n\n  @State() toggled: boolean = false;\n  @State() transitionClassName: string = '';\n  @State() animateIcon: string = '';\n\n  onClickHandler = () => {\n    this.toggled = !this.toggled;\n  };\n\n  @Watch('toggled')\n  onToggledHandler() {\n    this.transitionClassName = classNames({ 'fade': this.toggled, 'fade--reversed': !this.toggled });\n    this.animateIcon = classNames({ 'animate': this.toggled, '': !this.toggled });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-animated-tile__container\">\n          <div class={`pn-animated-tile__content cat-animate ${this.transitionClassName}`}>\n            <slot name=\"side-a\" />\n            <slot name=\"side-b\" />\n          </div>\n          <button type=\"button\" aria-label=\"Read more\" class={`pn-animated-tile__toggle cat-animate toggle ${this.animateIcon}`} onClick={this.onClickHandler}>\n            <pn-icon icon={plus}></pn-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-animated-tile.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,iBAAiB,GAAG,qsIAAqsI,CAAC;AAChuI,6BAAe,iBAAiB;;MCQnB,cAAc;;;uBAGG,KAAK;mCACM,EAAE;2BACV,EAAE;;;IAEjC,cAAc,GAAG;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;KAC9B,CAAC;IAGF,gBAAgB;QACd,IAAI,CAAC,mBAAmB,GAAGA,kBAAU,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QACjG,IAAI,CAAC,WAAW,GAAGA,kBAAU,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KAC/E;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,6BAA6B,IACtCA,kEAAK,KAAK,EAAE,yCAAyC,IAAI,CAAC,mBAAmB,EAAE,IAC7EA,mEAAM,IAAI,EAAC,QAAQ,GAAG,EACtBA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACNA,qEAAQ,IAAI,EAAC,QAAQ,gBAAY,WAAW,EAAC,KAAK,EAAE,+CAA+C,IAAI,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,cAAc,IACjJA,sEAAS,IAAI,EAAEE,SAAI,GAAY,CACxB,CACL,CACD,EACP;KACH;;;;;;;;;","names":["classNames","h","Host","plus"],"sources":["src/components/animation/pn-animated-tile/pn-animated-tile.scss?tag=pn-animated-tile","src/components/animation/pn-animated-tile/pn-animated-tile.tsx"],"sourcesContent":["@import '../../../globals/main';\n\n$gray100: #e9e6e5;\n\npn-animated-tile {\n  .pn-animated-tile__container {\n    position: relative;\n    border-radius: 2.4rem;\n    height: 56rem;\n\n    cursor: default;\n  }\n\n  .pn-animated-tile__content {\n    position: relative;\n    display: flex;\n\n    height: 100%;\n    width: 100%;\n    background-color: transparent;\n  }\n\n  [slot='side-a'],\n  [slot='side-b'] {\n    position: absolute;\n    align-self: stretch;\n\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  //initial slots' state\n  [slot='side-a'] {\n    padding: 0;\n    opacity: 1;\n  }\n\n  [slot='side-b'] {\n    z-index: -1;\n    padding: 2.4rem 2.4rem 7rem 2.4rem;\n    opacity: 0;\n    transform: translateY(50px);\n  }\n\n  .pn-animated-tile__toggle {\n    z-index: 2;\n    position: absolute;\n    bottom: 2.4rem;\n    right: 2.4rem;\n    padding: 0.8rem;\n    border-radius: 50%;\n    border: none;\n    cursor: pointer;\n\n    background-color: $white;\n    transition: background-color 0.45s ease-in-out;\n    pn-icon {\n      background-color: $white;\n      transition:\n        background-color 0.45s ease-in-out,\n        transform 0.45s ease-in-out 0.5s;\n    }\n\n    &:hover {\n      background-color: $gray100;\n      pn-icon {\n        background-color: $gray100;\n      }\n    }\n  }\n\n  .button-tooltip {\n    display: none;\n  }\n}\n\n//animations\n.cat-animate {\n  [slot='side-a'],\n  [slot='side-b'] {\n    transition:\n      opacity 0.45s ease-in-out,\n      transform 0.45s ease-in-out 0.5s;\n  }\n\n  &.fade {\n    //from a to b\n    [slot='side-a'] {\n      opacity: 0;\n      z-index: -1;\n    }\n\n    [slot='side-b'] {\n      z-index: 1;\n      opacity: 1;\n      transform: translateY(0);\n      transition-delay: 0.5s;\n    }\n\n    //from b to a\n    &--reversed {\n      [slot='side-a'] {\n        opacity: 1;\n\n        transition-delay: 0.5s;\n      }\n\n      [slot='side-b'] {\n        opacity: 0;\n        transform: translateY(50px);\n      }\n    }\n  }\n\n  &.toggle {\n    &.animate {\n      pn-icon {\n        transform: rotate(45deg);\n      }\n    }\n  }\n}\n\n//themes\n[data-cat-theme='white'] {\n  .pn-animated-tile__container {\n    background-color: $white;\n  }\n\n  .pn-animated-tile__toggle {\n    background-color: $blue400;\n    pn-icon {\n      background-color: $blue400;\n      svg > path {\n        fill: $white;\n      }\n    }\n\n    &:hover {\n      background-color: $blue700;\n      pn-icon {\n        background-color: $blue700;\n      }\n    }\n\n    &:focus,\n    &:focus-visible {\n      outline-color: $blue700;\n    }\n  }\n}\n\n[data-cat-theme='coral400'] {\n  .pn-animated-tile__container {\n    background-color: $coral400;\n  }\n\n  .pn-animated-tile__toggle {\n    background-color: $white;\n    pn-icon {\n      background-color: $white;\n      svg > path {\n        fill: $coral400;\n      }\n    }\n\n    &:focus,\n    &:focus-visible {\n      outline-color: $coral400;\n    }\n  }\n}\n\n[data-cat-theme='private'] {\n  .pn-animated-tile__container {\n    background-color: $blue400;\n  }\n\n  .pn-animated-tile__toggle {\n    background-color: $white;\n    pn-icon {\n      background-color: $white;\n      svg > path {\n        fill: $blue400;\n      }\n    }\n\n    &:focus,\n    &:focus-visible {\n      outline-color: $blue400;\n    }\n  }\n}\n\n[data-cat-theme='business'] {\n  .pn-animated-tile__container {\n    background-color: $blue900;\n  }\n\n  .pn-animated-tile__toggle {\n    background-color: $white;\n    pn-icon {\n      background-color: $white;\n      svg > path {\n        fill: $blue900;\n      }\n    }\n\n    &:focus,\n    &:focus-visible {\n      outline-color: $blue900;\n    }\n  }\n}\n\n[data-cat-theme='hybrid'] {\n  .pn-animated-tile__container {\n    background-color: $gray100;\n  }\n\n  .pn-animated-tile__toggle {\n    background-color: $white;\n    pn-icon {\n      background-color: $white;\n      svg > path {\n        fill: $blue700;\n      }\n    }\n\n    &:focus,\n    &:focus-visible {\n      outline-color: $blue700;\n    }\n  }\n}\n\n[data-cat-firstpage-only='true'] {\n  [slot='side-b'],\n  .pn-animated-tile__toggle {\n    display: none;\n  }\n}\n","import classNames from 'classnames';\n\nimport { Component, Element, h, Host, State, Watch } from '@stencil/core';\nimport { plus } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-animated-tile',\n  styleUrl: 'pn-animated-tile.scss',\n})\nexport class PnAnimatedTile {\n  @Element() hostElement: HTMLElement;\n\n  @State() toggled: boolean = false;\n  @State() transitionClassName: string = '';\n  @State() animateIcon: string = '';\n\n  onClickHandler = () => {\n    this.toggled = !this.toggled;\n  };\n\n  @Watch('toggled')\n  onToggledHandler() {\n    this.transitionClassName = classNames({ 'fade': this.toggled, 'fade--reversed': !this.toggled });\n    this.animateIcon = classNames({ 'animate': this.toggled, '': !this.toggled });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-animated-tile__container\">\n          <div class={`pn-animated-tile__content cat-animate ${this.transitionClassName}`}>\n            <slot name=\"side-a\" />\n            <slot name=\"side-b\" />\n          </div>\n          <button type=\"button\" aria-label=\"Read more\" class={`pn-animated-tile__toggle cat-animate toggle ${this.animateIcon}`} onClick={this.onClickHandler}>\n            <pn-icon icon={plus}></pn-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-app-banner.cjs.entry.js

@@ -11,20 +11,6 @@ const PnAppBannerStyle0 = pnAppBannerCss;
 const PnAppBanner = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.CLOSED_STORAGE_KEY = 'SmartAppBannerClosed';
-        this.CLOSED_COOKIE_EXPIRY_DAYS = 7;
-        this.handleOnClose = () => {
-            this.isClosed = true;
-            // Handle storage based on availability
-            if (this.isLocalStorageAvailable) {
-                localStorage.setItem(this.CLOSED_STORAGE_KEY, 'true');
-            }
-            else {
-                const expirationDate = new Date();
-                expirationDate.setDate(expirationDate.getDate() + this.CLOSED_COOKIE_EXPIRY_DAYS);
-                document.cookie = `${this.CLOSED_STORAGE_KEY}=true; expires=${expirationDate.toUTCString()}`;
-            }
-        };
         this.appName = undefined;
         this.appDescription = undefined;
         this.ctaText = undefined;
@@ -34,6 +20,9 @@ const PnAppBanner = class {
         this.storeLink = undefined;
         this.isLocalStorageAvailable = true;
     }
+    get hostElement() { return index.getElement(this); }
+    CLOSED_STORAGE_KEY = 'SmartAppBannerClosed';
+    CLOSED_COOKIE_EXPIRY_DAYS = 7;
     checkLocalStorage() {
         try {
             const testKey = '__test__';
@@ -57,6 +46,18 @@ const PnAppBanner = class {
             this.isClosed = true; // -> data-is-closed = true
         }
     }
+    handleOnClose = () => {
+        this.isClosed = true;
+        // Handle storage based on availability
+        if (this.isLocalStorageAvailable) {
+            localStorage.setItem(this.CLOSED_STORAGE_KEY, 'true');
+        }
+        else {
+            const expirationDate = new Date();
+            expirationDate.setDate(expirationDate.getDate() + this.CLOSED_COOKIE_EXPIRY_DAYS);
+            document.cookie = `${this.CLOSED_STORAGE_KEY}=true; expires=${expirationDate.toUTCString()}`;
+        }
+    };
     componentWillLoad() {
         this.checkLocalStorage();
         // Handle storage based on availability
@@ -80,7 +81,6 @@ const PnAppBanner = class {
     render() {
         return (index.h(index.Host, { key: 'f70e119be99b5b2beb4522726e95762b7f15126e', "data-is-closed": this.isClosed ? 'true' : 'false' }, index.h("div", { key: '29166c5e77c9a294784d0665067b3f06967290ac', class: "pn-app-banner__wrapper pn-app-banner__sticky" }, index.h("div", { key: '06ad90e4b6017c591c5d8a647338292957af00db', class: "icon-close", onClick: this.handleOnClose }, index.h("pn-icon", { key: '795dcea4d365c627c60182a8005a44574dfe0a19', icon: close_small.close_small, small: "false", color: "black" })), index.h("div", { key: '2cb19ab54b6f94e4c0a1c5126e39e4adc9576cdd', class: "pn-app-banner__icon" }, index.h("svg", { key: '75ee77eb5595956432dbfd09baa9a581239b65b6', width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '1b86f45c28d6b77cce87ccd88328dd0b8ce92c28', "clip-path": "url(#clip0_17800_45416)" }, index.h("path", { key: '876241e885a0cd7eb09f887e2da3a7602a53bbbb', d: "M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z", fill: "#F18D8D" }), index.h("mask", { key: '833bca6577287b47493f75ccdeb0699665a2865f', id: "mask0_17800_45416", style: { 'mask-type': 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "32", height: "32" }, index.h("path", { key: 'd3abeae46914029aafb7562b4398c4ba31c7310f', d: "M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z", fill: "#0D234B" })), index.h("g", { key: '5e516a7a66050bfe270f17ee26f11a4665173ae4', mask: "url(#mask0_17800_45416)" }, index.h("path", { key: '1f3364dca5709e5d02668034430693ecd41e8bc2', d: "M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z", fill: "#0D234B" }), index.h("path", { key: 'ce9bd5ecc95d0da87315a5d652e53117fa573c4f', d: "M50.8125 14.1562H18.8125V46.1562H50.8125V14.1562Z", fill: "url(#paint0_linear_17800_45416)" }), index.h("path", { key: 'b5cb378a2d45eaea81908b040a4a681fed76177d', d: "M2.09375 31.375C2.09375 15.2379 15.1754 2.15625 31.3125 2.15625H31.9844V31.9844H2.09998C2.09583 31.7819 2.09375 31.5788 2.09375 31.375Z", fill: "#00A0D6" }), index.h("g", { key: '149e91254874ed58964a1aef7c64272be46b53a6', filter: "url(#filter0_d_17800_45416)" }, index.h("path", { key: '721fe08a0cbfe048bbebd5aa8b0e3921b86f32e7', d: "M7.40625 11.8062C7.40625 10.2661 7.40625 9.49603 7.70597 8.90778C7.96963 8.39034 8.39034 7.96963 8.90778 7.70597C9.49603 7.40625 10.2661 7.40625 11.8062 7.40625H20.1938C21.7339 7.40625 22.504 7.40625 23.0922 7.70597C23.6097 7.96963 24.0304 8.39034 24.294 8.90778C24.5938 9.49603 24.5938 10.2661 24.5938 11.8062V20.1938C24.5938 21.7339 24.5938 22.504 24.294 23.0922C24.0304 23.6097 23.6097 24.0304 23.0922 24.294C22.504 24.5938 21.7339 24.5938 20.1938 24.5938H11.8062C10.2661 24.5938 9.49603 24.5938 8.90778 24.294C8.39034 24.0304 7.96963 23.6097 7.70597 23.0922C7.40625 22.504 7.40625 21.7339 7.40625 20.1938V11.8062Z", fill: "#F1F7FA" }), index.h("path", { key: '03116eb8484ffb6a987a1e8c2d1f3f93f9372d1b', opacity: "0.6", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.5938 10.0625C10.3176 10.0625 10.0938 10.2863 10.0938 10.5625C10.0938 10.8387 10.3176 11.0625 10.5938 11.0625H12.875C13.1512 11.0625 13.375 10.8387 13.375 10.5625C13.375 10.2863 13.1512 10.0625 12.875 10.0625H10.5938ZM10.5938 12.3125C10.3176 12.3125 10.0938 12.5363 10.0938 12.8125C10.0938 13.0887 10.3176 13.3125 10.5938 13.3125H15.3125C15.5887 13.3125 15.8125 13.0887 15.8125 12.8125C15.8125 12.5363 15.5887 12.3125 15.3125 12.3125H10.5938ZM10.0938 14.75C10.0938 14.4738 10.3176 14.25 10.5938 14.25H13.5625C13.8387 14.25 14.0625 14.4738 14.0625 14.75C14.0625 15.0262 13.8387 15.25 13.5625 15.25H10.5938C10.3176 15.25 10.0938 15.0262 10.0938 14.75ZM15.1875 14.25C14.9113 14.25 14.6875 14.4738 14.6875 14.75C14.6875 15.0262 14.9113 15.25 15.1875 15.25C15.4637 15.25 15.6875 15.0262 15.6875 14.75C15.6875 14.4738 15.4637 14.25 15.1875 14.25Z", fill: "#A5C0CA" }), index.h("path", { key: '1450f8093f0c616e6d2fe1c6e0030e496432ed20', d: "M17.9375 10.5938C17.9375 10.3176 18.1613 10.0938 18.4375 10.0938H21.75C22.0262 10.0938 22.25 10.3176 22.25 10.5938C22.25 10.8699 22.0262 11.0938 21.75 11.0938H18.4375C18.1613 11.0938 17.9375 10.8699 17.9375 10.5938Z", fill: "#00A0D6" }), index.h("path", { key: '007fc92f411b387950d233cbda28003cde1b354b', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.0938 19.3125C10.0938 18.8983 10.4295 18.5625 10.8438 18.5625C11.258 18.5625 11.5938 18.8983 11.5938 19.3125V21.25C11.5938 21.6642 11.258 22 10.8438 22C10.4295 22 10.0938 21.6642 10.0938 21.25V19.3125ZM19.3438 19.3125C19.3438 18.8983 19.6795 18.5625 20.0938 18.5625C20.508 18.5625 20.8438 18.8983 20.8438 19.3125V21.25C20.8438 21.6642 20.508 22 20.0938 22C19.6795 22 19.3438 21.6642 19.3438 21.25V19.3125ZM14.5938 18.5625C14.1795 18.5625 13.8438 18.8983 13.8438 19.3125V21.25C13.8438 21.6642 14.1795 22 14.5938 22C15.008 22 15.3438 21.6642 15.3438 21.25V19.3125C15.3438 18.8983 15.008 18.5625 14.5938 18.5625ZM12.5938 18.9375C12.5938 18.7304 12.7617 18.5625 12.9688 18.5625C13.1758 18.5625 13.3438 18.7304 13.3438 18.9375V21.625C13.3438 21.8321 13.1758 22 12.9688 22C12.7617 22 12.5938 21.8321 12.5938 21.625V18.9375ZM21.5938 18.5625C21.3867 18.5625 21.2188 18.7304 21.2188 18.9375V21.625C21.2188 21.8321 21.3867 22 21.5938 22C21.8008 22 21.9688 21.8321 21.9688 21.625V18.9375C21.9688 18.7304 21.8008 18.5625 21.5938 18.5625ZM17.5938 18.9375C17.5938 18.7304 17.7617 18.5625 17.9688 18.5625C18.1758 18.5625 18.3438 18.7304 18.3438 18.9375V21.625C18.3438 21.8321 18.1758 22 17.9688 22C17.7617 22 17.5938 21.8321 17.5938 21.625V18.9375ZM16.5938 18.5625C16.3176 18.5625 16.0938 18.7863 16.0938 19.0625V21.5C16.0938 21.7762 16.3176 22 16.5938 22C16.8699 22 17.0938 21.7762 17.0938 21.5V19.0625C17.0938 18.7863 16.8699 18.5625 16.5938 18.5625Z", fill: "#0D234B" })))), index.h("defs", { key: '7324852e9e095e5532b21371b9e929675b092a1c' }, index.h("filter", { key: '85ec9ee4983cb7b92fe4fb3a7e702e4438f915d2', id: "filter0_d_17800_45416", x: "-52.5938", y: "-48.5938", width: "137.188", height: "137.188", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, index.h("feFlood", { key: '8a9b91e11aedbf4fad6248ade8df932fb3de8bb9', "flood-opacity": "0", result: "BackgroundImageFix" }), index.h("feColorMatrix", { key: '89db649b0540a2f7a800e1db669ea84abf8b0338', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), index.h("feOffset", { key: '97a487093a53366fdf826891643a0ced40b38a65', dy: "4" }), index.h("feGaussianBlur", { key: 'e896889c847350b33e367583c385f7a75cf2286e', stdDeviation: "30" }), index.h("feColorMatrix", { key: '9a08bb541831685d4a7545a1b4fb32fd83198542', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" }), index.h("feBlend", { key: '8e70d4b91eb9cb77f6c8c04fd4ed338c8fba0d8c', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_17800_45416" }), index.h("feBlend", { key: '7ad369b79b01cb686129cafec1d3c194f50b86b1', mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_17800_45416", result: "shape" })), index.h("linearGradient", { key: '9fdf52f4b2d279d1d3d3706a3c70215174a09e49', id: "paint0_linear_17800_45416", x1: "29.2305", y1: "44.3441", x2: "51.5694", y2: "15.1782", gradientUnits: "userSpaceOnUse" }, index.h("stop", { key: 'fb5da57f4e192ce589fd9ab58e2599d9200c1580', offset: "0.0800778", "stop-color": "#0D244C" }), index.h("stop", { key: '35efe899489de4df4c2ba0b451ecbcf4d8583590', offset: "1", "stop-color": "#0D234B" })), index.h("clipPath", { key: 'e62363029a58d91aa6bbcf79a66436311242ff0a', id: "clip0_17800_45416" }, index.h("rect", { key: '2c71d0bc14df4d14b4b19923f93706fa48e2d22d', width: "32", height: "32", fill: "white" }))))), index.h("div", { key: 'c2fb9baa295a7d82f94b3a1f83d0e76fd8eee64c', class: "pn-app-banner__text" }, index.h("span", { key: '84064a2876befa0d572399f2990fb278d7404b3b' }, this.appName), index.h("br", { key: 'ef3a6494ece6351ad5dfc51e70c5201d25f5f190' }), this.appDescription), index.h("div", { key: '39c93e3e3b455fecffb78e4427a1c3063a5f1ac3', class: "pn-app-banner__cta" }, index.h("pn-button", { key: 'd7c902a8e3ad8b5ae86aafb2a03611dbce6e3a8f', small: true, href: this.storeLink }, this.ctaText)))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 PnAppBanner.style = PnAppBannerStyle0;
 

package/cjs/pn-app-banner.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-app-banner.entry.cjs.js","mappings":"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","names":["h","Host","close_small"],"sources":["src/components/minor/pn-app-banner/pn-app-banner.scss?tag=pn-app-banner","src/components/minor/pn-app-banner/pn-app-banner.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-app-banner {\n  .pn-app-banner__wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 1rem;\n\n    background-color: $gray50;\n    padding: 1rem;\n    margin: 0 auto;\n  }\n\n  .pn-app-banner__sticky {\n    position: relative;\n\n    top: 0;\n    width: 100%;\n\n    z-index: 999;\n  }\n\n  .icon-close {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n\n  .pn-app-banner__icon {\n    height: 3.2rem;\n  }\n\n  .pn-app-banner__text {\n    font-size: 1.2rem;\n    line-height: 1;\n\n    span {\n      font-weight: 600;\n    }\n  }\n\n  .pn-app-banner__cta {\n    margin-left: auto;\n  }\n\n  &[data-is-closed='true'] {\n    display: none;\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { close_small } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-app-banner',\n  styleUrl: 'pn-app-banner.scss',\n})\nexport class PnAppBanner {\n  @Element() hostElement: HTMLElement;\n  @Prop() appName: string;\n  @Prop() appDescription: string;\n  @Prop() ctaText: string;\n  @Prop() appleStoreLink: string;\n  @Prop() googleStoreLink: string;\n\n  @State() isClosed: boolean = false;\n  @State() storeLink: string;\n  @State() isLocalStorageAvailable = true;\n\n  CLOSED_STORAGE_KEY = 'SmartAppBannerClosed';\n  CLOSED_COOKIE_EXPIRY_DAYS = 7;\n\n  checkLocalStorage() {\n    try {\n      const testKey = '__test__';\n      localStorage.setItem(testKey, testKey);\n      localStorage.removeItem(testKey);\n    } catch (e) {\n      this.isLocalStorageAvailable = false;\n    }\n  }\n\n  detectDeviceAndSetStoreLink() {\n    const userAgent = navigator.userAgent;\n\n    if (userAgent.match(/Android/i)) {\n      this.storeLink = this.googleStoreLink;\n    } else if (userAgent.match(/iPhone|iPad|iPod/i)) {\n      this.storeLink = this.appleStoreLink;\n    } else {\n      this.storeLink = null;\n      this.isClosed = true; // -> data-is-closed = true\n    }\n  }\n\n  handleOnClose = () => {\n    this.isClosed = true;\n\n    // Handle storage based on availability\n    if (this.isLocalStorageAvailable) {\n      localStorage.setItem(this.CLOSED_STORAGE_KEY, 'true');\n    } else {\n      const expirationDate = new Date();\n      expirationDate.setDate(expirationDate.getDate() + this.CLOSED_COOKIE_EXPIRY_DAYS);\n      document.cookie = `${this.CLOSED_STORAGE_KEY}=true; expires=${expirationDate.toUTCString()}`;\n    }\n  };\n\n  componentWillLoad() {\n    this.checkLocalStorage();\n    // Handle storage based on availability\n    if (this.isLocalStorageAvailable) {\n      this.isClosed = localStorage.getItem(this.CLOSED_STORAGE_KEY) === 'true';\n    } else {\n      const cookies = document.cookie.split(';');\n      for (const cookie of cookies) {\n        const [name, value] = cookie.trim().split('=');\n        if (name === this.CLOSED_STORAGE_KEY && value === 'true') {\n          this.isClosed = true;\n          break;\n        }\n      }\n    }\n\n    if (!this.isClosed) {\n      this.detectDeviceAndSetStoreLink();\n    }\n  }\n\n  render() {\n    return (\n      <Host data-is-closed={this.isClosed ? 'true' : 'false'}>\n        <div class=\"pn-app-banner__wrapper pn-app-banner__sticky\">\n          <div class=\"icon-close\" onClick={this.handleOnClose}>\n            <pn-icon icon={close_small} small=\"false\" color=\"black\" />\n          </div>\n          <div class=\"pn-app-banner__icon\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_17800_45416)\">\n                <path\n                  d=\"M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z\"\n                  fill=\"#F18D8D\"\n                />\n                <mask id=\"mask0_17800_45416\" style={{ 'mask-type': 'alpha' }} maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"32\" height=\"32\">\n                  <path\n                    d=\"M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z\"\n                    fill=\"#0D234B\"\n                  />\n                </mask>\n                <g mask=\"url(#mask0_17800_45416)\">\n                  <path\n                    d=\"M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z\"\n                    fill=\"#0D234B\"\n                  />\n                  <path d=\"M50.8125 14.1562H18.8125V46.1562H50.8125V14.1562Z\" fill=\"url(#paint0_linear_17800_45416)\" />\n                  <path\n                    d=\"M2.09375 31.375C2.09375 15.2379 15.1754 2.15625 31.3125 2.15625H31.9844V31.9844H2.09998C2.09583 31.7819 2.09375 31.5788 2.09375 31.375Z\"\n                    fill=\"#00A0D6\"\n                  />\n                  <g filter=\"url(#filter0_d_17800_45416)\">\n                    <path\n                      d=\"M7.40625 11.8062C7.40625 10.2661 7.40625 9.49603 7.70597 8.90778C7.96963 8.39034 8.39034 7.96963 8.90778 7.70597C9.49603 7.40625 10.2661 7.40625 11.8062 7.40625H20.1938C21.7339 7.40625 22.504 7.40625 23.0922 7.70597C23.6097 7.96963 24.0304 8.39034 24.294 8.90778C24.5938 9.49603 24.5938 10.2661 24.5938 11.8062V20.1938C24.5938 21.7339 24.5938 22.504 24.294 23.0922C24.0304 23.6097 23.6097 24.0304 23.0922 24.294C22.504 24.5938 21.7339 24.5938 20.1938 24.5938H11.8062C10.2661 24.5938 9.49603 24.5938 8.90778 24.294C8.39034 24.0304 7.96963 23.6097 7.70597 23.0922C7.40625 22.504 7.40625 21.7339 7.40625 20.1938V11.8062Z\"\n                      fill=\"#F1F7FA\"\n                    />\n                    <path\n                      opacity=\"0.6\"\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M10.5938 10.0625C10.3176 10.0625 10.0938 10.2863 10.0938 10.5625C10.0938 10.8387 10.3176 11.0625 10.5938 11.0625H12.875C13.1512 11.0625 13.375 10.8387 13.375 10.5625C13.375 10.2863 13.1512 10.0625 12.875 10.0625H10.5938ZM10.5938 12.3125C10.3176 12.3125 10.0938 12.5363 10.0938 12.8125C10.0938 13.0887 10.3176 13.3125 10.5938 13.3125H15.3125C15.5887 13.3125 15.8125 13.0887 15.8125 12.8125C15.8125 12.5363 15.5887 12.3125 15.3125 12.3125H10.5938ZM10.0938 14.75C10.0938 14.4738 10.3176 14.25 10.5938 14.25H13.5625C13.8387 14.25 14.0625 14.4738 14.0625 14.75C14.0625 15.0262 13.8387 15.25 13.5625 15.25H10.5938C10.3176 15.25 10.0938 15.0262 10.0938 14.75ZM15.1875 14.25C14.9113 14.25 14.6875 14.4738 14.6875 14.75C14.6875 15.0262 14.9113 15.25 15.1875 15.25C15.4637 15.25 15.6875 15.0262 15.6875 14.75C15.6875 14.4738 15.4637 14.25 15.1875 14.25Z\"\n                      fill=\"#A5C0CA\"\n                    />\n                    <path\n                      d=\"M17.9375 10.5938C17.9375 10.3176 18.1613 10.0938 18.4375 10.0938H21.75C22.0262 10.0938 22.25 10.3176 22.25 10.5938C22.25 10.8699 22.0262 11.0938 21.75 11.0938H18.4375C18.1613 11.0938 17.9375 10.8699 17.9375 10.5938Z\"\n                      fill=\"#00A0D6\"\n                    />\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M10.0938 19.3125C10.0938 18.8983 10.4295 18.5625 10.8438 18.5625C11.258 18.5625 11.5938 18.8983 11.5938 19.3125V21.25C11.5938 21.6642 11.258 22 10.8438 22C10.4295 22 10.0938 21.6642 10.0938 21.25V19.3125ZM19.3438 19.3125C19.3438 18.8983 19.6795 18.5625 20.0938 18.5625C20.508 18.5625 20.8438 18.8983 20.8438 19.3125V21.25C20.8438 21.6642 20.508 22 20.0938 22C19.6795 22 19.3438 21.6642 19.3438 21.25V19.3125ZM14.5938 18.5625C14.1795 18.5625 13.8438 18.8983 13.8438 19.3125V21.25C13.8438 21.6642 14.1795 22 14.5938 22C15.008 22 15.3438 21.6642 15.3438 21.25V19.3125C15.3438 18.8983 15.008 18.5625 14.5938 18.5625ZM12.5938 18.9375C12.5938 18.7304 12.7617 18.5625 12.9688 18.5625C13.1758 18.5625 13.3438 18.7304 13.3438 18.9375V21.625C13.3438 21.8321 13.1758 22 12.9688 22C12.7617 22 12.5938 21.8321 12.5938 21.625V18.9375ZM21.5938 18.5625C21.3867 18.5625 21.2188 18.7304 21.2188 18.9375V21.625C21.2188 21.8321 21.3867 22 21.5938 22C21.8008 22 21.9688 21.8321 21.9688 21.625V18.9375C21.9688 18.7304 21.8008 18.5625 21.5938 18.5625ZM17.5938 18.9375C17.5938 18.7304 17.7617 18.5625 17.9688 18.5625C18.1758 18.5625 18.3438 18.7304 18.3438 18.9375V21.625C18.3438 21.8321 18.1758 22 17.9688 22C17.7617 22 17.5938 21.8321 17.5938 21.625V18.9375ZM16.5938 18.5625C16.3176 18.5625 16.0938 18.7863 16.0938 19.0625V21.5C16.0938 21.7762 16.3176 22 16.5938 22C16.8699 22 17.0938 21.7762 17.0938 21.5V19.0625C17.0938 18.7863 16.8699 18.5625 16.5938 18.5625Z\"\n                      fill=\"#0D234B\"\n                    />\n                  </g>\n                </g>\n              </g>\n              <defs>\n                <filter id=\"filter0_d_17800_45416\" x=\"-52.5938\" y=\"-48.5938\" width=\"137.188\" height=\"137.188\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n                  <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n                  <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n                  <feOffset dy=\"4\" />\n                  <feGaussianBlur stdDeviation=\"30\" />\n                  <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0\" />\n                  <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_17800_45416\" />\n                  <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_17800_45416\" result=\"shape\" />\n                </filter>\n                <linearGradient id=\"paint0_linear_17800_45416\" x1=\"29.2305\" y1=\"44.3441\" x2=\"51.5694\" y2=\"15.1782\" gradientUnits=\"userSpaceOnUse\">\n                  <stop offset=\"0.0800778\" stop-color=\"#0D244C\" />\n                  <stop offset=\"1\" stop-color=\"#0D234B\" />\n                </linearGradient>\n                <clipPath id=\"clip0_17800_45416\">\n                  <rect width=\"32\" height=\"32\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n          </div>\n          <div class=\"pn-app-banner__text\">\n            <span>{this.appName}</span>\n            <br />\n            {this.appDescription}\n          </div>\n          <div class=\"pn-app-banner__cta\">\n            <pn-button small={true} href={this.storeLink}>\n              {this.ctaText}\n            </pn-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-app-banner.entry.cjs.js","mappings":"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","names":["h","Host","close_small"],"sources":["src/components/minor/pn-app-banner/pn-app-banner.scss?tag=pn-app-banner","src/components/minor/pn-app-banner/pn-app-banner.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-app-banner {\n  .pn-app-banner__wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 1rem;\n\n    background-color: $gray50;\n    padding: 1rem;\n    margin: 0 auto;\n  }\n\n  .pn-app-banner__sticky {\n    position: relative;\n\n    top: 0;\n    width: 100%;\n\n    z-index: 999;\n  }\n\n  .icon-close {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n\n  .pn-app-banner__icon {\n    height: 3.2rem;\n  }\n\n  .pn-app-banner__text {\n    font-size: 1.2rem;\n    line-height: 1;\n\n    span {\n      font-weight: 600;\n    }\n  }\n\n  .pn-app-banner__cta {\n    margin-left: auto;\n  }\n\n  &[data-is-closed='true'] {\n    display: none;\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { close_small } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-app-banner',\n  styleUrl: 'pn-app-banner.scss',\n})\nexport class PnAppBanner {\n  @Element() hostElement: HTMLElement;\n  @Prop() appName: string;\n  @Prop() appDescription: string;\n  @Prop() ctaText: string;\n  @Prop() appleStoreLink: string;\n  @Prop() googleStoreLink: string;\n\n  @State() isClosed: boolean = false;\n  @State() storeLink: string;\n  @State() isLocalStorageAvailable = true;\n\n  CLOSED_STORAGE_KEY = 'SmartAppBannerClosed';\n  CLOSED_COOKIE_EXPIRY_DAYS = 7;\n\n  checkLocalStorage() {\n    try {\n      const testKey = '__test__';\n      localStorage.setItem(testKey, testKey);\n      localStorage.removeItem(testKey);\n    } catch (e) {\n      this.isLocalStorageAvailable = false;\n    }\n  }\n\n  detectDeviceAndSetStoreLink() {\n    const userAgent = navigator.userAgent;\n\n    if (userAgent.match(/Android/i)) {\n      this.storeLink = this.googleStoreLink;\n    } else if (userAgent.match(/iPhone|iPad|iPod/i)) {\n      this.storeLink = this.appleStoreLink;\n    } else {\n      this.storeLink = null;\n      this.isClosed = true; // -> data-is-closed = true\n    }\n  }\n\n  handleOnClose = () => {\n    this.isClosed = true;\n\n    // Handle storage based on availability\n    if (this.isLocalStorageAvailable) {\n      localStorage.setItem(this.CLOSED_STORAGE_KEY, 'true');\n    } else {\n      const expirationDate = new Date();\n      expirationDate.setDate(expirationDate.getDate() + this.CLOSED_COOKIE_EXPIRY_DAYS);\n      document.cookie = `${this.CLOSED_STORAGE_KEY}=true; expires=${expirationDate.toUTCString()}`;\n    }\n  };\n\n  componentWillLoad() {\n    this.checkLocalStorage();\n    // Handle storage based on availability\n    if (this.isLocalStorageAvailable) {\n      this.isClosed = localStorage.getItem(this.CLOSED_STORAGE_KEY) === 'true';\n    } else {\n      const cookies = document.cookie.split(';');\n      for (const cookie of cookies) {\n        const [name, value] = cookie.trim().split('=');\n        if (name === this.CLOSED_STORAGE_KEY && value === 'true') {\n          this.isClosed = true;\n          break;\n        }\n      }\n    }\n\n    if (!this.isClosed) {\n      this.detectDeviceAndSetStoreLink();\n    }\n  }\n\n  render() {\n    return (\n      <Host data-is-closed={this.isClosed ? 'true' : 'false'}>\n        <div class=\"pn-app-banner__wrapper pn-app-banner__sticky\">\n          <div class=\"icon-close\" onClick={this.handleOnClose}>\n            <pn-icon icon={close_small} small=\"false\" color=\"black\" />\n          </div>\n          <div class=\"pn-app-banner__icon\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_17800_45416)\">\n                <path\n                  d=\"M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z\"\n                  fill=\"#F18D8D\"\n                />\n                <mask id=\"mask0_17800_45416\" style={{ 'mask-type': 'alpha' }} maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"32\" height=\"32\">\n                  <path\n                    d=\"M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z\"\n                    fill=\"#0D234B\"\n                  />\n                </mask>\n                <g mask=\"url(#mask0_17800_45416)\">\n                  <path\n                    d=\"M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z\"\n                    fill=\"#0D234B\"\n                  />\n                  <path d=\"M50.8125 14.1562H18.8125V46.1562H50.8125V14.1562Z\" fill=\"url(#paint0_linear_17800_45416)\" />\n                  <path\n                    d=\"M2.09375 31.375C2.09375 15.2379 15.1754 2.15625 31.3125 2.15625H31.9844V31.9844H2.09998C2.09583 31.7819 2.09375 31.5788 2.09375 31.375Z\"\n                    fill=\"#00A0D6\"\n                  />\n                  <g filter=\"url(#filter0_d_17800_45416)\">\n                    <path\n                      d=\"M7.40625 11.8062C7.40625 10.2661 7.40625 9.49603 7.70597 8.90778C7.96963 8.39034 8.39034 7.96963 8.90778 7.70597C9.49603 7.40625 10.2661 7.40625 11.8062 7.40625H20.1938C21.7339 7.40625 22.504 7.40625 23.0922 7.70597C23.6097 7.96963 24.0304 8.39034 24.294 8.90778C24.5938 9.49603 24.5938 10.2661 24.5938 11.8062V20.1938C24.5938 21.7339 24.5938 22.504 24.294 23.0922C24.0304 23.6097 23.6097 24.0304 23.0922 24.294C22.504 24.5938 21.7339 24.5938 20.1938 24.5938H11.8062C10.2661 24.5938 9.49603 24.5938 8.90778 24.294C8.39034 24.0304 7.96963 23.6097 7.70597 23.0922C7.40625 22.504 7.40625 21.7339 7.40625 20.1938V11.8062Z\"\n                      fill=\"#F1F7FA\"\n                    />\n                    <path\n                      opacity=\"0.6\"\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M10.5938 10.0625C10.3176 10.0625 10.0938 10.2863 10.0938 10.5625C10.0938 10.8387 10.3176 11.0625 10.5938 11.0625H12.875C13.1512 11.0625 13.375 10.8387 13.375 10.5625C13.375 10.2863 13.1512 10.0625 12.875 10.0625H10.5938ZM10.5938 12.3125C10.3176 12.3125 10.0938 12.5363 10.0938 12.8125C10.0938 13.0887 10.3176 13.3125 10.5938 13.3125H15.3125C15.5887 13.3125 15.8125 13.0887 15.8125 12.8125C15.8125 12.5363 15.5887 12.3125 15.3125 12.3125H10.5938ZM10.0938 14.75C10.0938 14.4738 10.3176 14.25 10.5938 14.25H13.5625C13.8387 14.25 14.0625 14.4738 14.0625 14.75C14.0625 15.0262 13.8387 15.25 13.5625 15.25H10.5938C10.3176 15.25 10.0938 15.0262 10.0938 14.75ZM15.1875 14.25C14.9113 14.25 14.6875 14.4738 14.6875 14.75C14.6875 15.0262 14.9113 15.25 15.1875 15.25C15.4637 15.25 15.6875 15.0262 15.6875 14.75C15.6875 14.4738 15.4637 14.25 15.1875 14.25Z\"\n                      fill=\"#A5C0CA\"\n                    />\n                    <path\n                      d=\"M17.9375 10.5938C17.9375 10.3176 18.1613 10.0938 18.4375 10.0938H21.75C22.0262 10.0938 22.25 10.3176 22.25 10.5938C22.25 10.8699 22.0262 11.0938 21.75 11.0938H18.4375C18.1613 11.0938 17.9375 10.8699 17.9375 10.5938Z\"\n                      fill=\"#00A0D6\"\n                    />\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M10.0938 19.3125C10.0938 18.8983 10.4295 18.5625 10.8438 18.5625C11.258 18.5625 11.5938 18.8983 11.5938 19.3125V21.25C11.5938 21.6642 11.258 22 10.8438 22C10.4295 22 10.0938 21.6642 10.0938 21.25V19.3125ZM19.3438 19.3125C19.3438 18.8983 19.6795 18.5625 20.0938 18.5625C20.508 18.5625 20.8438 18.8983 20.8438 19.3125V21.25C20.8438 21.6642 20.508 22 20.0938 22C19.6795 22 19.3438 21.6642 19.3438 21.25V19.3125ZM14.5938 18.5625C14.1795 18.5625 13.8438 18.8983 13.8438 19.3125V21.25C13.8438 21.6642 14.1795 22 14.5938 22C15.008 22 15.3438 21.6642 15.3438 21.25V19.3125C15.3438 18.8983 15.008 18.5625 14.5938 18.5625ZM12.5938 18.9375C12.5938 18.7304 12.7617 18.5625 12.9688 18.5625C13.1758 18.5625 13.3438 18.7304 13.3438 18.9375V21.625C13.3438 21.8321 13.1758 22 12.9688 22C12.7617 22 12.5938 21.8321 12.5938 21.625V18.9375ZM21.5938 18.5625C21.3867 18.5625 21.2188 18.7304 21.2188 18.9375V21.625C21.2188 21.8321 21.3867 22 21.5938 22C21.8008 22 21.9688 21.8321 21.9688 21.625V18.9375C21.9688 18.7304 21.8008 18.5625 21.5938 18.5625ZM17.5938 18.9375C17.5938 18.7304 17.7617 18.5625 17.9688 18.5625C18.1758 18.5625 18.3438 18.7304 18.3438 18.9375V21.625C18.3438 21.8321 18.1758 22 17.9688 22C17.7617 22 17.5938 21.8321 17.5938 21.625V18.9375ZM16.5938 18.5625C16.3176 18.5625 16.0938 18.7863 16.0938 19.0625V21.5C16.0938 21.7762 16.3176 22 16.5938 22C16.8699 22 17.0938 21.7762 17.0938 21.5V19.0625C17.0938 18.7863 16.8699 18.5625 16.5938 18.5625Z\"\n                      fill=\"#0D234B\"\n                    />\n                  </g>\n                </g>\n              </g>\n              <defs>\n                <filter id=\"filter0_d_17800_45416\" x=\"-52.5938\" y=\"-48.5938\" width=\"137.188\" height=\"137.188\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n                  <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n                  <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n                  <feOffset dy=\"4\" />\n                  <feGaussianBlur stdDeviation=\"30\" />\n                  <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0\" />\n                  <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_17800_45416\" />\n                  <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_17800_45416\" result=\"shape\" />\n                </filter>\n                <linearGradient id=\"paint0_linear_17800_45416\" x1=\"29.2305\" y1=\"44.3441\" x2=\"51.5694\" y2=\"15.1782\" gradientUnits=\"userSpaceOnUse\">\n                  <stop offset=\"0.0800778\" stop-color=\"#0D244C\" />\n                  <stop offset=\"1\" stop-color=\"#0D234B\" />\n                </linearGradient>\n                <clipPath id=\"clip0_17800_45416\">\n                  <rect width=\"32\" height=\"32\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n          </div>\n          <div class=\"pn-app-banner__text\">\n            <span>{this.appName}</span>\n            <br />\n            {this.appDescription}\n          </div>\n          <div class=\"pn-app-banner__cta\">\n            <pn-button small={true} href={this.storeLink}>\n              {this.ctaText}\n            </pn-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-bonus-progressbar-level.cjs.entry.js

@@ -19,6 +19,7 @@ const PnBonusProgressbarLevel = class {
         this.min = 0;
         this.currency = '';
     }
+    get hostElement() { return index.getElement(this); }
     componentWillLoad() {
         this.max = parseInt(this.hostElement.parentElement.parentElement.getAttribute('max'), 10);
         this.min = parseInt(this.hostElement.parentElement.parentElement.getAttribute('min'), 10);
@@ -36,7 +37,6 @@ const PnBonusProgressbarLevel = class {
     render() {
         return (index.h(index.Host, { key: '17dea66cc0b3d8ba52533a05d1879ad441dadc39', style: { left: `${this.visualpercentage}%` } }, index.h("div", { key: '8037ab85d591c3fef10b6c54767be99e3acdc512', class: "progressbar-level-percentage" }, this.bonuspercentage), index.h("div", { key: 'fe23e4451775abe17c0c0b3dab1ba4ed66225b53', class: "progressbar-level-value" }, this.formatValue())));
     }
-    get hostElement() { return index.getElement(this); }
 };
 PnBonusProgressbarLevel.style = PnBonusProgressbarLevelStyle0;
 

package/cjs/pn-bonus-progressbar-level.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-bonus-progressbar-level.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,w6BAAw6B,CAAC;AAC58B,sCAAe,0BAA0B;;MCK5B,uBAAuB;;;uBAGU,KAAK;qBACO,CAAC;+BACS,EAAE;gCACD,CAAC;0BAEtC,CAAC;mBAER,CAAC;mBACD,CAAC;wBACI,EAAE;;IAE9B,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QACtF,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;QAEhD,IAAI,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE;;YAE7B,OAAO;SACR;QACD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;KACxG;IACD,WAAW;QACT,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,qBAAqB,EAAE,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;KAC/F;IACD,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,gBAAgB,GAAG,EAAE,IAChDD,kEAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,eAAe,CAAO,EACtEA,kEAAK,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,WAAW,EAAE,CAAO,CAC1D,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.scss?tag=pn-bonus-progressbar-level","src/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-bonus-progressbar-level {\n  position: absolute;\n  width: 0.1rem;\n  left: 50%;\n  &::after {\n    content: '';\n    width: 0.1rem;\n    position: absolute;\n    left: 0;\n    border-left: 1px dashed #9b1c2e;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 3rem;\n  }\n  &:not([current]):nth-child(odd) {\n    &::after {\n      height: 7rem;\n      margin-top: 0.6rem;\n    }\n  }\n}\n\n.progressbar-level-percentage {\n  font-size: 0.75em;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: -3.2rem;\n  [current] > & {\n    display: none;\n  }\n  pn-bonus-progressbar-level:not([current]):nth-child(odd) & {\n    top: -4.8rem;\n  }\n}\n\n.progressbar-level-value {\n  font-size: 0.75em;\n  white-space: nowrap;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 2.3rem;\n  [current] > & {\n    top: -3.2rem;\n  }\n  pn-bonus-progressbar-level:not([current]):nth-child(odd) & {\n    top: 4.2rem;\n  }\n}\n","import { Component, Prop, h, Host, State, Element, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pn-bonus-progressbar-level',\n  styleUrl: 'pn-bonus-progressbar-level.scss',\n})\nexport class PnBonusProgressbarLevel {\n  @Element() hostElement: HTMLElement;\n\n  @Prop({ reflect: true }) current: boolean = false;\n  @Prop({ reflect: true, mutable: true }) value: number = 0;\n  @Prop({ reflect: true, mutable: true }) bonuspercentage: string = '';\n  @Prop({ reflect: true, mutable: true }) visualpercentage: number = 0;\n\n  @State() percentage: number = 0;\n\n  @State() max: number = 0;\n  @State() min: number = 0;\n  @State() currency: string = '';\n\n  componentWillLoad() {\n    this.max = parseInt(this.hostElement.parentElement.parentElement.getAttribute('max'), 10);\n    this.min = parseInt(this.hostElement.parentElement.parentElement.getAttribute('min'), 10);\n    this.currency = this.hostElement.parentElement.parentElement.getAttribute('currency');\n    this.percentage = (this.value / this.max) * 100;\n\n    if (this.visualpercentage > 0) {\n      // Visual percentage has been overriden\n      return;\n    }\n    this.visualpercentage = this.value === 0 ? 0 : ((this.value - this.min) / (this.max - this.min)) * 100;\n  }\n  formatValue() {\n    return `${this.value.toLocaleString('sv-SE', { maximumFractionDigits: 0 })} ${this.currency}`;\n  }\n  render() {\n    return (\n      <Host style={{ left: `${this.visualpercentage}%` }}>\n        <div class=\"progressbar-level-percentage\">{this.bonuspercentage}</div>\n        <div class=\"progressbar-level-value\">{this.formatValue()}</div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-bonus-progressbar-level.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,w6BAAw6B,CAAC;AAC58B,sCAAe,0BAA0B;;MCK5B,uBAAuB;;;uBAGU,KAAK;qBACO,CAAC;+BACS,EAAE;gCACD,CAAC;0BAEtC,CAAC;mBAER,CAAC;mBACD,CAAC;wBACI,EAAE;;;IAE9B,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QACtF,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;QAEhD,IAAI,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE;;YAE7B,OAAO;SACR;QACD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;KACxG;IACD,WAAW;QACT,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,qBAAqB,EAAE,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;KAC/F;IACD,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,gBAAgB,GAAG,EAAE,IAChDD,kEAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,eAAe,CAAO,EACtEA,kEAAK,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,WAAW,EAAE,CAAO,CAC1D,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.scss?tag=pn-bonus-progressbar-level","src/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-bonus-progressbar-level {\n  position: absolute;\n  width: 0.1rem;\n  left: 50%;\n  &::after {\n    content: '';\n    width: 0.1rem;\n    position: absolute;\n    left: 0;\n    border-left: 1px dashed #9b1c2e;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 3rem;\n  }\n  &:not([current]):nth-child(odd) {\n    &::after {\n      height: 7rem;\n      margin-top: 0.6rem;\n    }\n  }\n}\n\n.progressbar-level-percentage {\n  font-size: 0.75em;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: -3.2rem;\n  [current] > & {\n    display: none;\n  }\n  pn-bonus-progressbar-level:not([current]):nth-child(odd) & {\n    top: -4.8rem;\n  }\n}\n\n.progressbar-level-value {\n  font-size: 0.75em;\n  white-space: nowrap;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 2.3rem;\n  [current] > & {\n    top: -3.2rem;\n  }\n  pn-bonus-progressbar-level:not([current]):nth-child(odd) & {\n    top: 4.2rem;\n  }\n}\n","import { Component, Prop, h, Host, State, Element, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pn-bonus-progressbar-level',\n  styleUrl: 'pn-bonus-progressbar-level.scss',\n})\nexport class PnBonusProgressbarLevel {\n  @Element() hostElement: HTMLElement;\n\n  @Prop({ reflect: true }) current: boolean = false;\n  @Prop({ reflect: true, mutable: true }) value: number = 0;\n  @Prop({ reflect: true, mutable: true }) bonuspercentage: string = '';\n  @Prop({ reflect: true, mutable: true }) visualpercentage: number = 0;\n\n  @State() percentage: number = 0;\n\n  @State() max: number = 0;\n  @State() min: number = 0;\n  @State() currency: string = '';\n\n  componentWillLoad() {\n    this.max = parseInt(this.hostElement.parentElement.parentElement.getAttribute('max'), 10);\n    this.min = parseInt(this.hostElement.parentElement.parentElement.getAttribute('min'), 10);\n    this.currency = this.hostElement.parentElement.parentElement.getAttribute('currency');\n    this.percentage = (this.value / this.max) * 100;\n\n    if (this.visualpercentage > 0) {\n      // Visual percentage has been overriden\n      return;\n    }\n    this.visualpercentage = this.value === 0 ? 0 : ((this.value - this.min) / (this.max - this.min)) * 100;\n  }\n  formatValue() {\n    return `${this.value.toLocaleString('sv-SE', { maximumFractionDigits: 0 })} ${this.currency}`;\n  }\n  render() {\n    return (\n      <Host style={{ left: `${this.visualpercentage}%` }}>\n        <div class=\"progressbar-level-percentage\">{this.bonuspercentage}</div>\n        <div class=\"progressbar-level-value\">{this.formatValue()}</div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-bonus-progressbar.cjs.entry.js

@@ -24,6 +24,7 @@ const PnBonusProgressbar = class {
         this.levelValues = [];
         this.currentLevelAdjustedValue = 0;
     }
+    get hostElement() { return index.getElement(this); }
     componentWillLoad() {
         this.setInitialValues();
         this.setValuePercentage();
@@ -88,7 +89,6 @@ const PnBonusProgressbar = class {
     render() {
         return (index.h(index.Host, { key: '89103fc6287e71d9ac12c7bcbb284959c0ea64bd' }, index.h("div", { key: '9a0b60180dc43681d5f5e1b7376435afb583765e', class: "bonusprogressbar-top" }, this.icon ? (index.h("div", { class: "bonusprogressbar-top-icon" }, index.h("pn-icon", { icon: this.icon, small: "false", color: this.iconColor() }))) : ({}), index.h("div", { key: '97f7f703387b719ab11ca555e5f46de0a38b0dcf', class: "bonusprogressbar-top-heading" }, index.h("h4", { key: '8127659ee7221eec13123fd0e07c1871a132fdf9', class: "bonusprogressbar-top-headline" }, this.heading, " ", index.h("strong", { key: '5883c56d6aa717e654634e4232e768e76b5f8236', class: "bonusprogressbar-top-percentage" }, this.bonuspercentage)), this.sumtext ? index.h("div", { class: "bonusprogressbar-sumtext" }, this.sumtext) : null)), index.h("div", { key: '9ca7943f007cfb8bf63c1c64032140ae158bed85', class: "bonusprogressbar-wrapper" }, index.h("progress", { key: 'db618cbeb83e9e6459c2db90da1806952b2b98b3', class: "bonusprogressbar-progress", value: this.progresspercentage, max: "100" }), index.h("slot", { key: '6954cfff8a350a37528f0529d1158b79b9abe499' }))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "currentLevelAdjustedValue": ["setValuePercentage"],
         "value": ["setValuePercentage"],