npm - @postnord/pn-marketweb-components - Versions diffs - 3.0.2 → 3.0.4 - Mend

@postnord/pn-marketweb-components 3.0.2 → 3.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (756) hide show

package/components/pn-proxio-pricegroup.js CHANGED Viewed

@@ -16,7 +16,6 @@ const PnProxioPricegroup$1 = /*@__PURE__*/ proxyCustomElement(class PnProxioPric
     constructor() {
         super();
         this.__registerHost();
-        this.fetchHelper = new FetchHelper('proxiopricegroup');
         this.endpoint = null;
         this.language = 'sv';
         this.market = 'se';
@@ -26,6 +25,7 @@ const PnProxioPricegroup$1 = /*@__PURE__*/ proxyCustomElement(class PnProxioPric
         this.data = null;
         this.i18n = translations['sv'];
     }
+    fetchHelper = new FetchHelper('proxiopricegroup');
     componentWillLoad() {
         this.setInitialValues().then(() => {
             this.init();
@@ -34,7 +34,7 @@ const PnProxioPricegroup$1 = /*@__PURE__*/ proxyCustomElement(class PnProxioPric
     async setInitialValues(href = window.location.href) {
         const marketWebContextService = new MarketWebContextService(href);
         const environment = await marketWebContextService.getEnvironmentName();
-        if (!this.endpoint && (environment === null || environment === void 0 ? void 0 : environment.indexOf('local')) === -1) {
+        if (!this.endpoint && environment?.indexOf('local') === -1) {
             const market = await marketWebContextService.getMarket();
             this.endpoint = await marketWebContextService.getEndpoint(environment, market);
         }
@@ -56,7 +56,7 @@ const PnProxioPricegroup$1 = /*@__PURE__*/ proxyCustomElement(class PnProxioPric
         const data = (await this.fetchHelper.fetchJson(fetchUrl, {
             mode: 'cors',
         }, this.cache, this.onFetchData.bind(this)));
-        if (data === null || data === void 0 ? void 0 : data.proxioProduct) {
+        if (data?.proxioProduct) {
             this.data = data;
         }
     }
@@ -64,9 +64,8 @@ const PnProxioPricegroup$1 = /*@__PURE__*/ proxyCustomElement(class PnProxioPric
         this.data = data;
     }
     setActiveWeightIndex(weightIndex) {
-        var _a, _b, _c;
         let minIndex = 0;
-        let maxIndex = (_c = ((_b = (_a = this.data.proxioProduct) === null || _a === void 0 ? void 0 : _a.weightAndPriceList) === null || _b === void 0 ? void 0 : _b.length) - 1) !== null && _c !== void 0 ? _c : minIndex;
+        let maxIndex = this.data.proxioProduct?.weightAndPriceList?.length - 1 ?? minIndex;
         weightIndex = weightIndex > maxIndex ? maxIndex : weightIndex;
         weightIndex = weightIndex < minIndex ? minIndex : weightIndex;
         this.activeWeightIndex = weightIndex;
@@ -77,14 +76,12 @@ const PnProxioPricegroup$1 = /*@__PURE__*/ proxyCustomElement(class PnProxioPric
         }
     }
     getPriceString(product) {
-        var _a;
-        let price = product.weightAndPriceList ? (_a = product === null || product === void 0 ? void 0 : product.weightAndPriceList[this.activeWeightIndex]) === null || _a === void 0 ? void 0 : _a.item2 : '';
+        let price = product.weightAndPriceList ? product?.weightAndPriceList[this.activeWeightIndex]?.item2 : '';
         return price ? this.i18n.from + price : '';
     }
     getProductLink(product, productWeightGroupList) {
-        var _a;
-        let productId = (_a = productWeightGroupList[this.activeWeightIndex]) === null || _a === void 0 ? void 0 : _a.item2;
-        let productLink = product.productLink ? product === null || product === void 0 ? void 0 : product.productLink : '';
+        let productId = productWeightGroupList[this.activeWeightIndex]?.item2;
+        let productLink = product.productLink ? product?.productLink : '';
         return productLink ? productLink + (productId ? '?productId=' + productId : '') : '';
     }
     isActive(index) {
@@ -132,8 +129,7 @@ const PnProxioPricegroup$1 = /*@__PURE__*/ proxyCustomElement(class PnProxioPric
         }
     }
     render() {
-        var _a, _b, _c;
-        return (h(Host, { key: '382bffa036a8d0d4dd545e661ce81a014c3d427d' }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.proxioProduct) ? (h("div", { class: "proxio-pricegroup-container" }, h("div", { class: "weightcontainer" }, this.data.proxioProduct.weightAndPriceList ? (h("div", { class: "weightvaluecontainer" }, h("pn-button", { disabled: this.activeWeightIndex === 0 ? 'disabled' : null, icon: arrow_left, appearance: "light", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex - 1) }), h("div", { class: "weightradios ", "data-carousel-container-position": this.getContainerPosition() }, h("div", { class: "weightline" }), this.data.proxioProduct.weightAndPriceList.map((weightItem, index) => this.getCarouselPosition(index) !== null ? (h("div", { class: "weightdata", "data-carousel-position": this.getCarouselPosition(index), onClick: () => this.setActiveWeightIndex(index) }, h("input", { type: "radio", id: 'weightradio' + index, name: "weightradio", value: index, checked: this.isActive(index) }), h("label", { htmlFor: 'weightradio' + index }, weightItem.item1))) : null)), h("pn-button", { disabled: this.activeWeightIndex === ((_c = (_b = this.data.proxioProduct) === null || _b === void 0 ? void 0 : _b.weightAndPriceList) === null || _c === void 0 ? void 0 : _c.length) - 1 ? 'disabled' : null, icon: arrow_right, appearance: "light", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex + 1) }))) : null), h("pn-proxio-productcard", null, h("pn-illustration", { slot: "illustrationmobile", illustration: this.data.proxioProduct.productIcon }), h("h2", { slot: "title" }, this.data.proxioProduct.productTitle), h("pn-proxio-productcard-description", { slot: "description", heading: this.data.proxioProduct.productPreamble, highlight: this.data.proxioProduct.deliveryDateInformation, list: this.data.proxioProduct.productDescriptionBulletListItems }), h("div", { slot: "information" }, h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensions, information: this.data.proxioProduct.productPackageDimensionsList }), h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensionsRoll, information: this.data.proxioProduct.productRollDimensionsList })), h("div", { slot: "bottomtags" }, this.data.proxioProduct.usp1 ? h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp1) : null, this.data.proxioProduct.usp2 ? h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp2) : null, this.data.proxioProduct.usp3 ? h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp3) : null), h("pn-illustration", { slot: "illustration", illustration: this.data.proxioProduct.productIcon }), h("div", { slot: "pricelink" }, h("pn-proxio-productcard-pricelink", { price: this.getPriceString(this.data.proxioProduct), link: this.getProductLink(this.data.proxioProduct, this.data.proxioProduct.productWeightGroupList), linktext: this.data.proxioProduct.productLinkText }), this.data.relatedProxioProducts
+        return (h(Host, { key: '382bffa036a8d0d4dd545e661ce81a014c3d427d' }, this.data?.proxioProduct ? (h("div", { class: "proxio-pricegroup-container" }, h("div", { class: "weightcontainer" }, this.data.proxioProduct.weightAndPriceList ? (h("div", { class: "weightvaluecontainer" }, h("pn-button", { disabled: this.activeWeightIndex === 0 ? 'disabled' : null, icon: arrow_left, appearance: "light", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex - 1) }), h("div", { class: "weightradios ", "data-carousel-container-position": this.getContainerPosition() }, h("div", { class: "weightline" }), this.data.proxioProduct.weightAndPriceList.map((weightItem, index) => this.getCarouselPosition(index) !== null ? (h("div", { class: "weightdata", "data-carousel-position": this.getCarouselPosition(index), onClick: () => this.setActiveWeightIndex(index) }, h("input", { type: "radio", id: 'weightradio' + index, name: "weightradio", value: index, checked: this.isActive(index) }), h("label", { htmlFor: 'weightradio' + index }, weightItem.item1))) : null)), h("pn-button", { disabled: this.activeWeightIndex === this.data.proxioProduct?.weightAndPriceList?.length - 1 ? 'disabled' : null, icon: arrow_right, appearance: "light", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex + 1) }))) : null), h("pn-proxio-productcard", null, h("pn-illustration", { slot: "illustrationmobile", illustration: this.data.proxioProduct.productIcon }), h("h2", { slot: "title" }, this.data.proxioProduct.productTitle), h("pn-proxio-productcard-description", { slot: "description", heading: this.data.proxioProduct.productPreamble, highlight: this.data.proxioProduct.deliveryDateInformation, list: this.data.proxioProduct.productDescriptionBulletListItems }), h("div", { slot: "information" }, h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensions, information: this.data.proxioProduct.productPackageDimensionsList }), h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensionsRoll, information: this.data.proxioProduct.productRollDimensionsList })), h("div", { slot: "bottomtags" }, this.data.proxioProduct.usp1 ? h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp1) : null, this.data.proxioProduct.usp2 ? h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp2) : null, this.data.proxioProduct.usp3 ? h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp3) : null), h("pn-illustration", { slot: "illustration", illustration: this.data.proxioProduct.productIcon }), h("div", { slot: "pricelink" }, h("pn-proxio-productcard-pricelink", { price: this.getPriceString(this.data.proxioProduct), link: this.getProductLink(this.data.proxioProduct, this.data.proxioProduct.productWeightGroupList), linktext: this.data.proxioProduct.productLinkText }), this.data.relatedProxioProducts
             ? this.data.relatedProxioProducts.map(product => (h("pn-proxio-productcard-pricelink", { price: this.getPriceString(product), link: product.productLink, linktext: product.productLinkText })))
             : null)))) : null));
     }

package/components/pn-proxio-pricegroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-proxio-pricegroup.js","mappings":"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","names":["PnProxioPricegroup"],"sources":["src/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.scss?tag=pn-proxio-pricegroup","src/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n@import './pn-proxio-pricegroup-common.scss';\n\npn-proxio-pricegroup {\n div.proxio-pricegroup-container {\n max-width: 99.4rem;\n }\n\n div.weightcontainer {\n margin: 2.8rem 0;\n }\n\n div.weightvaluecontainer {\n display: flex;\n flex-direction: row;\n align-content: center;\n justify-content: space-between;\n align-items: flex-start;\n\n pn-button {\n transform: translateY(-0.4rem);\n\n button::before {\n display: none;\n }\n }\n }\n\n div.weightradios {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n color: $blue700;\n width: 80%;\n margin: 0 3.6rem;\n position: relative;\n width: 0%;\n\n &[data-carousel-container-position='end50'] {\n width: 45%;\n margin-left: auto;\n margin-right: 3.6rem;\n\n @media screen and (max-width: $productcard-media-tablet) {\n width: 40%;\n }\n }\n\n &[data-carousel-container-position='end75'] {\n width: 65%;\n margin-left: auto;\n margin-right: 3.6rem;\n\n @media screen and (max-width: $productcard-media-tablet) {\n margin-right: auto;\n }\n }\n\n &[data-carousel-container-position='start50'] {\n width: 45%;\n margin-right: auto;\n margin-left: 3.6rem;\n\n @media screen and (max-width: $productcard-media-tablet) {\n width: 40%;\n }\n }\n\n &[data-carousel-container-position='start75'] {\n width: 65%;\n margin-right: auto;\n margin-left: 3.6rem;\n\n @media screen and (max-width: $productcard-media-tablet) {\n margin-left: auto;\n }\n }\n\n &[data-carousel-container-position='default'] {\n flex: 0 0 auto;\n width: 80%;\n\n @media screen and (max-width: $productcard-media-tablet) {\n width: 65%;\n }\n }\n }\n\n div.weightdata {\n display: flex;\n flex-direction: column;\n align-items: center;\n align-content: center;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: 1.2rem;\n min-width: 4rem;\n cursor: pointer;\n\n label {\n font-size: 1.4rem;\n cursor: pointer;\n }\n\n &[data-carousel-position='0'] {\n font-size: 2rem;\n font-weight: 700;\n }\n\n &[data-carousel-position='2'],\n &[data-carousel-position='-2'] {\n @media screen and (max-width: $productcard-media-tablet) {\n display: none;\n }\n }\n\n &[data-carousel-position='outside'] {\n display: none;\n }\n\n input[type='radio'] {\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 1.2rem;\n height: 1.2rem;\n background-color: $blue700;\n border-radius: 50%;\n margin: 0;\n cursor: pointer;\n }\n\n input[type='radio']:checked {\n z-index: 1;\n transform: translateY(-0.1rem);\n height: 1.4rem;\n width: 1.4rem;\n box-shadow:\n 0 0 0 0.3rem $white,\n 0 0 0 0.4rem $blue700;\n }\n }\n\n div.weightline {\n width: 100%;\n background-color: $gray50;\n z-index: -1;\n height: 0.8rem;\n -webkit-transform: translateX(2.1rem) translateY(1.32rem);\n transform: translateX(2.1rem) translateY(1rem);\n border-radius: 2rem;\n margin-right: 3.5rem;\n }\n\n pn-button {\n &[disabled='disabled'] {\n opacity: 0.2;\n\n button {\n cursor: default;\n\n &.pn-button-light .pn-button-bg:after {\n background-color: $white;\n }\n\n &[data-tooltip-open]:before {\n display: none;\n }\n }\n }\n\n button div.button-tooltip {\n display: none;\n }\n\n button:focus .pn-button-bg {\n box-shadow: none;\n }\n }\n}\n","import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { FetchHelper } from '../../../globals/FetchHelper';\nimport { MarketWebContextService } from '../../../globals/MarketWebContextService';\nimport { translations } from './translations';\nimport { ProductGenericItem, ProxioPriceGroupi18n, ProxioPriceListGroupResponse, ProxioProduct, ProductWeightGroupListItem } from './types';\nimport { arrow_left, arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-proxio-pricegroup',\n styleUrl: 'pn-proxio-pricegroup.scss',\n})\nexport class PnProxioPricegroup {\n /** Specifies which endpoint domain we should load from */\n @Prop({ mutable: true }) endpoint: string = null;\n //@Prop() culture: string = \"sv-SE\";\n @Prop() language: string = 'sv';\n @Prop() market: string = 'se';\n @Prop() tariffid: string = '';\n @Prop() cache: boolean = true;\n\n @State() activeWeightIndex: number = 0;\n @State() data: ProxioPriceListGroupResponse = null;\n @State() i18n: ProxioPriceGroupi18n = translations['sv'];\n\n fetchHelper = new FetchHelper('proxiopricegroup');\n\n componentWillLoad() {\n this.setInitialValues().then(() => {\n this.init();\n });\n }\n\n async setInitialValues(href = window.location.href) {\n const marketWebContextService = new MarketWebContextService(href);\n const environment = await marketWebContextService.getEnvironmentName();\n\n if (!this.endpoint && environment?.indexOf('local') === -1) {\n const market = await marketWebContextService.getMarket();\n this.endpoint = await marketWebContextService.getEndpoint(environment, market);\n }\n\n if (!this.endpoint) {\n this.endpoint = '';\n }\n }\n\n init() {\n this.setLanguage();\n this.fetchData();\n }\n\n async fetchData() {\n if (!this.market \|\| !this.language \|\| !this.tariffid) {\n return;\n }\n const endpoint = this.endpoint.lastIndexOf('/') === this.endpoint.length - 1 ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;\n const fetchUrl = `${endpoint}/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;\n //const fetchUrl = `https://localhost:51547/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;\n const data = (await this.fetchHelper.fetchJson(\n fetchUrl,\n {\n mode: 'cors',\n },\n this.cache,\n this.onFetchData.bind(this),\n )) as any;\n\n if (data?.proxioProduct) {\n this.data = data;\n }\n }\n\n onFetchData(data) {\n this.data = data;\n }\n\n @Listen('activeWeightIndex')\n setActiveWeightIndex(weightIndex: number) {\n let minIndex = 0;\n let maxIndex = this.data.proxioProduct?.weightAndPriceList?.length - 1 ?? minIndex;\n weightIndex = weightIndex > maxIndex ? maxIndex : weightIndex;\n weightIndex = weightIndex < minIndex ? minIndex : weightIndex;\n this.activeWeightIndex = weightIndex;\n }\n\n @Listen('language')\n setLanguage() {\n if (translations[this.language]) {\n this.i18n = translations[this.language] as ProxioPriceGroupi18n;\n }\n }\n\n getPriceString(product: ProxioProduct) {\n let price = product.weightAndPriceList ? product?.weightAndPriceList[this.activeWeightIndex]?.item2 : '';\n return price ? this.i18n.from + price : '';\n }\n\n getProductLink(product: ProxioProduct, productWeightGroupList: ProductWeightGroupListItem[]) {\n let productId = productWeightGroupList[this.activeWeightIndex]?.item2;\n let productLink = product.productLink ? product?.productLink : '';\n return productLink ? productLink + (productId ? '?productId=' + productId : '') : '';\n }\n\n isActive(index: number) {\n return index === this.activeWeightIndex;\n }\n\n getCarouselPosition(index: number) {\n switch (index) {\n case this.activeWeightIndex - 2: {\n return -2;\n }\n case this.activeWeightIndex - 1: {\n return -1;\n }\n case this.activeWeightIndex: {\n return 0;\n }\n case this.activeWeightIndex + 1: {\n return 1;\n }\n case this.activeWeightIndex + 2: {\n return 2;\n }\n default:\n return 'outside';\n }\n }\n\n getContainerPosition() {\n let maxIndex = this.data.proxioProduct.weightAndPriceList.length - 1;\n switch (this.activeWeightIndex) {\n case 0: {\n return 'end50';\n }\n case 1: {\n return 'end75';\n }\n case maxIndex - 1: {\n return 'start75';\n }\n case maxIndex: {\n return 'start50';\n }\n default: {\n return 'default';\n }\n }\n }\n\n render() {\n return (\n <Host>\n {this.data?.proxioProduct ? (\n <div class=\"proxio-pricegroup-container\">\n <div class=\"weightcontainer\">\n {this.data.proxioProduct.weightAndPriceList ? (\n <div class=\"weightvaluecontainer\">\n <pn-button\n disabled={this.activeWeightIndex === 0 ? 'disabled' : null}\n icon={arrow_left}\n appearance=\"light\"\n small=\"true\"\n onClick={() => this.setActiveWeightIndex(this.activeWeightIndex - 1)}\n ></pn-button>\n <div class=\"weightradios \" data-carousel-container-position={this.getContainerPosition()}>\n <div class=\"weightline\"></div>\n {this.data.proxioProduct.weightAndPriceList.map((weightItem, index) =>\n this.getCarouselPosition(index) !== null ? (\n <div class=\"weightdata\" data-carousel-position={this.getCarouselPosition(index)} onClick={() => this.setActiveWeightIndex(index)}>\n <input type=\"radio\" id={'weightradio' + index} name=\"weightradio\" value={index} checked={this.isActive(index)} />\n <label htmlFor={'weightradio' + index}>{weightItem.item1}</label>\n </div>\n ) : null,\n )}\n </div>\n <pn-button\n disabled={this.activeWeightIndex === this.data.proxioProduct?.weightAndPriceList?.length - 1 ? 'disabled' : null}\n icon={arrow_right}\n appearance=\"light\"\n small=\"true\"\n onClick={() => this.setActiveWeightIndex(this.activeWeightIndex + 1)}\n ></pn-button>\n </div>\n ) : null}\n </div>\n <pn-proxio-productcard>\n <pn-illustration slot=\"illustrationmobile\" illustration={this.data.proxioProduct.productIcon}></pn-illustration>\n <h2 slot=\"title\">{this.data.proxioProduct.productTitle}</h2>\n <pn-proxio-productcard-description\n slot=\"description\"\n heading={this.data.proxioProduct.productPreamble}\n highlight={this.data.proxioProduct.deliveryDateInformation}\n list={this.data.proxioProduct.productDescriptionBulletListItems}\n ></pn-proxio-productcard-description>\n <div slot=\"information\">\n <pn-proxio-productcard-information\n label={this.i18n.labelMaxDimensions}\n information={this.data.proxioProduct.productPackageDimensionsList as ProductGenericItem[]}\n ></pn-proxio-productcard-information>\n <pn-proxio-productcard-information\n label={this.i18n.labelMaxDimensionsRoll}\n information={this.data.proxioProduct.productRollDimensionsList as ProductGenericItem[]}\n ></pn-proxio-productcard-information>\n </div>\n <div slot=\"bottomtags\">\n {this.data.proxioProduct.usp1 ? <pn-titletag color=\"gray50\">{this.data.proxioProduct.usp1}</pn-titletag> : null}\n {this.data.proxioProduct.usp2 ? <pn-titletag color=\"gray50\">{this.data.proxioProduct.usp2}</pn-titletag> : null}\n {this.data.proxioProduct.usp3 ? <pn-titletag color=\"gray50\">{this.data.proxioProduct.usp3}</pn-titletag> : null}\n </div>\n <pn-illustration slot=\"illustration\" illustration={this.data.proxioProduct.productIcon}></pn-illustration>\n <div slot=\"pricelink\">\n <pn-proxio-productcard-pricelink\n price={this.getPriceString(this.data.proxioProduct)}\n link={this.getProductLink(this.data.proxioProduct, this.data.proxioProduct.productWeightGroupList)}\n linktext={this.data.proxioProduct.productLinkText}\n ></pn-proxio-productcard-pricelink>\n {this.data.relatedProxioProducts\n ? this.data.relatedProxioProducts.map(product => (\n <pn-proxio-productcard-pricelink\n price={this.getPriceString(product)}\n link={product.productLink}\n linktext={product.productLinkText}\n ></pn-proxio-productcard-pricelink>\n ))\n : null}\n </div>\n </pn-proxio-productcard>\n </div>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-proxio-pricegroup.js","mappings":"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","names":["PnProxioPricegroup"],"sources":["src/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.scss?tag=pn-proxio-pricegroup","src/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n@import './pn-proxio-pricegroup-common.scss';\n\npn-proxio-pricegroup {\n div.proxio-pricegroup-container {\n max-width: 99.4rem;\n }\n\n div.weightcontainer {\n margin: 2.8rem 0;\n }\n\n div.weightvaluecontainer {\n display: flex;\n flex-direction: row;\n align-content: center;\n justify-content: space-between;\n align-items: flex-start;\n\n pn-button {\n transform: translateY(-0.4rem);\n\n button::before {\n display: none;\n }\n }\n }\n\n div.weightradios {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n color: $blue700;\n width: 80%;\n margin: 0 3.6rem;\n position: relative;\n width: 0%;\n\n &[data-carousel-container-position='end50'] {\n width: 45%;\n margin-left: auto;\n margin-right: 3.6rem;\n\n @media screen and (max-width: $productcard-media-tablet) {\n width: 40%;\n }\n }\n\n &[data-carousel-container-position='end75'] {\n width: 65%;\n margin-left: auto;\n margin-right: 3.6rem;\n\n @media screen and (max-width: $productcard-media-tablet) {\n margin-right: auto;\n }\n }\n\n &[data-carousel-container-position='start50'] {\n width: 45%;\n margin-right: auto;\n margin-left: 3.6rem;\n\n @media screen and (max-width: $productcard-media-tablet) {\n width: 40%;\n }\n }\n\n &[data-carousel-container-position='start75'] {\n width: 65%;\n margin-right: auto;\n margin-left: 3.6rem;\n\n @media screen and (max-width: $productcard-media-tablet) {\n margin-left: auto;\n }\n }\n\n &[data-carousel-container-position='default'] {\n flex: 0 0 auto;\n width: 80%;\n\n @media screen and (max-width: $productcard-media-tablet) {\n width: 65%;\n }\n }\n }\n\n div.weightdata {\n display: flex;\n flex-direction: column;\n align-items: center;\n align-content: center;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: 1.2rem;\n min-width: 4rem;\n cursor: pointer;\n\n label {\n font-size: 1.4rem;\n cursor: pointer;\n }\n\n &[data-carousel-position='0'] {\n font-size: 2rem;\n font-weight: 700;\n }\n\n &[data-carousel-position='2'],\n &[data-carousel-position='-2'] {\n @media screen and (max-width: $productcard-media-tablet) {\n display: none;\n }\n }\n\n &[data-carousel-position='outside'] {\n display: none;\n }\n\n input[type='radio'] {\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 1.2rem;\n height: 1.2rem;\n background-color: $blue700;\n border-radius: 50%;\n margin: 0;\n cursor: pointer;\n }\n\n input[type='radio']:checked {\n z-index: 1;\n transform: translateY(-0.1rem);\n height: 1.4rem;\n width: 1.4rem;\n box-shadow:\n 0 0 0 0.3rem $white,\n 0 0 0 0.4rem $blue700;\n }\n }\n\n div.weightline {\n width: 100%;\n background-color: $gray50;\n z-index: -1;\n height: 0.8rem;\n -webkit-transform: translateX(2.1rem) translateY(1.32rem);\n transform: translateX(2.1rem) translateY(1rem);\n border-radius: 2rem;\n margin-right: 3.5rem;\n }\n\n pn-button {\n &[disabled='disabled'] {\n opacity: 0.2;\n\n button {\n cursor: default;\n\n &.pn-button-light .pn-button-bg:after {\n background-color: $white;\n }\n\n &[data-tooltip-open]:before {\n display: none;\n }\n }\n }\n\n button div.button-tooltip {\n display: none;\n }\n\n button:focus .pn-button-bg {\n box-shadow: none;\n }\n }\n}\n","import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { FetchHelper } from '../../../globals/FetchHelper';\nimport { MarketWebContextService } from '../../../globals/MarketWebContextService';\nimport { translations } from './translations';\nimport { ProductGenericItem, ProxioPriceGroupi18n, ProxioPriceListGroupResponse, ProxioProduct, ProductWeightGroupListItem } from './types';\nimport { arrow_left, arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-proxio-pricegroup',\n styleUrl: 'pn-proxio-pricegroup.scss',\n})\nexport class PnProxioPricegroup {\n /** Specifies which endpoint domain we should load from */\n @Prop({ mutable: true }) endpoint: string = null;\n //@Prop() culture: string = \"sv-SE\";\n @Prop() language: string = 'sv';\n @Prop() market: string = 'se';\n @Prop() tariffid: string = '';\n @Prop() cache: boolean = true;\n\n @State() activeWeightIndex: number = 0;\n @State() data: ProxioPriceListGroupResponse = null;\n @State() i18n: ProxioPriceGroupi18n = translations['sv'];\n\n fetchHelper = new FetchHelper('proxiopricegroup');\n\n componentWillLoad() {\n this.setInitialValues().then(() => {\n this.init();\n });\n }\n\n async setInitialValues(href = window.location.href) {\n const marketWebContextService = new MarketWebContextService(href);\n const environment = await marketWebContextService.getEnvironmentName();\n\n if (!this.endpoint && environment?.indexOf('local') === -1) {\n const market = await marketWebContextService.getMarket();\n this.endpoint = await marketWebContextService.getEndpoint(environment, market);\n }\n\n if (!this.endpoint) {\n this.endpoint = '';\n }\n }\n\n init() {\n this.setLanguage();\n this.fetchData();\n }\n\n async fetchData() {\n if (!this.market \|\| !this.language \|\| !this.tariffid) {\n return;\n }\n const endpoint = this.endpoint.lastIndexOf('/') === this.endpoint.length - 1 ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;\n const fetchUrl = `${endpoint}/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;\n //const fetchUrl = `https://localhost:51547/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;\n const data = (await this.fetchHelper.fetchJson(\n fetchUrl,\n {\n mode: 'cors',\n },\n this.cache,\n this.onFetchData.bind(this),\n )) as any;\n\n if (data?.proxioProduct) {\n this.data = data;\n }\n }\n\n onFetchData(data) {\n this.data = data;\n }\n\n @Listen('activeWeightIndex')\n setActiveWeightIndex(weightIndex: number) {\n let minIndex = 0;\n let maxIndex = this.data.proxioProduct?.weightAndPriceList?.length - 1 ?? minIndex;\n weightIndex = weightIndex > maxIndex ? maxIndex : weightIndex;\n weightIndex = weightIndex < minIndex ? minIndex : weightIndex;\n this.activeWeightIndex = weightIndex;\n }\n\n @Listen('language')\n setLanguage() {\n if (translations[this.language]) {\n this.i18n = translations[this.language] as ProxioPriceGroupi18n;\n }\n }\n\n getPriceString(product: ProxioProduct) {\n let price = product.weightAndPriceList ? product?.weightAndPriceList[this.activeWeightIndex]?.item2 : '';\n return price ? this.i18n.from + price : '';\n }\n\n getProductLink(product: ProxioProduct, productWeightGroupList: ProductWeightGroupListItem[]) {\n let productId = productWeightGroupList[this.activeWeightIndex]?.item2;\n let productLink = product.productLink ? product?.productLink : '';\n return productLink ? productLink + (productId ? '?productId=' + productId : '') : '';\n }\n\n isActive(index: number) {\n return index === this.activeWeightIndex;\n }\n\n getCarouselPosition(index: number) {\n switch (index) {\n case this.activeWeightIndex - 2: {\n return -2;\n }\n case this.activeWeightIndex - 1: {\n return -1;\n }\n case this.activeWeightIndex: {\n return 0;\n }\n case this.activeWeightIndex + 1: {\n return 1;\n }\n case this.activeWeightIndex + 2: {\n return 2;\n }\n default:\n return 'outside';\n }\n }\n\n getContainerPosition() {\n let maxIndex = this.data.proxioProduct.weightAndPriceList.length - 1;\n switch (this.activeWeightIndex) {\n case 0: {\n return 'end50';\n }\n case 1: {\n return 'end75';\n }\n case maxIndex - 1: {\n return 'start75';\n }\n case maxIndex: {\n return 'start50';\n }\n default: {\n return 'default';\n }\n }\n }\n\n render() {\n return (\n <Host>\n {this.data?.proxioProduct ? (\n <div class=\"proxio-pricegroup-container\">\n <div class=\"weightcontainer\">\n {this.data.proxioProduct.weightAndPriceList ? (\n <div class=\"weightvaluecontainer\">\n <pn-button\n disabled={this.activeWeightIndex === 0 ? 'disabled' : null}\n icon={arrow_left}\n appearance=\"light\"\n small=\"true\"\n onClick={() => this.setActiveWeightIndex(this.activeWeightIndex - 1)}\n ></pn-button>\n <div class=\"weightradios \" data-carousel-container-position={this.getContainerPosition()}>\n <div class=\"weightline\"></div>\n {this.data.proxioProduct.weightAndPriceList.map((weightItem, index) =>\n this.getCarouselPosition(index) !== null ? (\n <div class=\"weightdata\" data-carousel-position={this.getCarouselPosition(index)} onClick={() => this.setActiveWeightIndex(index)}>\n <input type=\"radio\" id={'weightradio' + index} name=\"weightradio\" value={index} checked={this.isActive(index)} />\n <label htmlFor={'weightradio' + index}>{weightItem.item1}</label>\n </div>\n ) : null,\n )}\n </div>\n <pn-button\n disabled={this.activeWeightIndex === this.data.proxioProduct?.weightAndPriceList?.length - 1 ? 'disabled' : null}\n icon={arrow_right}\n appearance=\"light\"\n small=\"true\"\n onClick={() => this.setActiveWeightIndex(this.activeWeightIndex + 1)}\n ></pn-button>\n </div>\n ) : null}\n </div>\n <pn-proxio-productcard>\n <pn-illustration slot=\"illustrationmobile\" illustration={this.data.proxioProduct.productIcon}></pn-illustration>\n <h2 slot=\"title\">{this.data.proxioProduct.productTitle}</h2>\n <pn-proxio-productcard-description\n slot=\"description\"\n heading={this.data.proxioProduct.productPreamble}\n highlight={this.data.proxioProduct.deliveryDateInformation}\n list={this.data.proxioProduct.productDescriptionBulletListItems}\n ></pn-proxio-productcard-description>\n <div slot=\"information\">\n <pn-proxio-productcard-information\n label={this.i18n.labelMaxDimensions}\n information={this.data.proxioProduct.productPackageDimensionsList as ProductGenericItem[]}\n ></pn-proxio-productcard-information>\n <pn-proxio-productcard-information\n label={this.i18n.labelMaxDimensionsRoll}\n information={this.data.proxioProduct.productRollDimensionsList as ProductGenericItem[]}\n ></pn-proxio-productcard-information>\n </div>\n <div slot=\"bottomtags\">\n {this.data.proxioProduct.usp1 ? <pn-titletag color=\"gray50\">{this.data.proxioProduct.usp1}</pn-titletag> : null}\n {this.data.proxioProduct.usp2 ? <pn-titletag color=\"gray50\">{this.data.proxioProduct.usp2}</pn-titletag> : null}\n {this.data.proxioProduct.usp3 ? <pn-titletag color=\"gray50\">{this.data.proxioProduct.usp3}</pn-titletag> : null}\n </div>\n <pn-illustration slot=\"illustration\" illustration={this.data.proxioProduct.productIcon}></pn-illustration>\n <div slot=\"pricelink\">\n <pn-proxio-productcard-pricelink\n price={this.getPriceString(this.data.proxioProduct)}\n link={this.getProductLink(this.data.proxioProduct, this.data.proxioProduct.productWeightGroupList)}\n linktext={this.data.proxioProduct.productLinkText}\n ></pn-proxio-productcard-pricelink>\n {this.data.relatedProxioProducts\n ? this.data.relatedProxioProducts.map(product => (\n <pn-proxio-productcard-pricelink\n price={this.getPriceString(product)}\n link={product.productLink}\n linktext={product.productLinkText}\n ></pn-proxio-productcard-pricelink>\n ))\n : null}\n </div>\n </pn-proxio-productcard>\n </div>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-quick-cta.js CHANGED Viewed

@@ -10,10 +10,10 @@ const PnQuickCta$1 = /*@__PURE__*/ proxyCustomElement(class PnQuickCta extends H
         this.heading = null;
         this.preamble = null;
     }
+    get hostElement() { return this; }
     render() {
         return (h(Host, { key: 'ab5954c7894705ca1d6faeb541b63ef9a28ce39e' }, h("div", { key: '2fe82eb368e7c6f13a1e541e54f4f2679b99ed20', class: "quick-cta__content" }, h("h2", { key: '7433fb89198761e4342ec57b1136e82cef01c241', class: "quick-cta__content__heading" }, this.heading), h("p", { key: 'c23df3ff66c20f39c9e11ad825fadb90a6cf296a', class: "quick-cta__content__preamble" }, this.preamble), h("slot", { key: '8754357951cb3b1fb61b1f619e925a1b3de17879', name: "quick-cta-cta" }))));
     }
-    get hostElement() { return this; }
     static get style() { return PnQuickCtaStyle0; }
 }, [4, "pn-quick-cta", {
         "heading": [1],

package/components/pn-quick-cta.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-quick-cta.js","mappings":";;AAAA,MAAM,aAAa,GAAG,w2CAAw2C,CAAC;AAC/3C,yBAAe,aAAa;;MCKfA,YAAU;;;;uBAEK,IAAI;wBACH,IAAI;;IAE/B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,2DAAI,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,OAAO,CAAM,EAC3D,0DAAG,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC3D,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACD,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["PnQuickCta"],"sources":["src/components/cta/pn-quick-cta/pn-quick-cta.scss?tag=pn-quick-cta","src/components/cta/pn-quick-cta/pn-quick-cta.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-quick-cta {\n width: 100%;\n\n .quick-cta__content {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n gap: 2.4rem;\n\n width: 100%;\n\n .quick-cta__content__heading {\n padding: 0;\n margin: 0;\n\n font-size: 2.4rem;\n font-weight: 500;\n color: $blue900;\n\n @media screen and (max-width: 768px) {\n display: none;\n }\n\n @media screen and (min-width: 1640px) {\n font-size: 2.8rem;\n font-weight: 700;\n }\n }\n\n .quick-cta__content__preamble {\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 140%;\n\n padding: 0;\n margin: 0;\n color: $gray900;\n }\n\n [slot='quick-cta-cta'] {\n a {\n white-space: nowrap;\n &:hover {\n text-decoration: none;\n }\n }\n }\n }\n}\n\n//colors\npn-spotlight[data-cta-color='business'] {\n .quick-cta__content__heading {\n color: $coral400;\n }\n .quick-cta__content__preamble {\n color: $blue25;\n }\n}\n\npn-spotlight[data-cta-color='private'] {\n .quick-cta__content__heading,\n .quick-cta__content__preamble {\n color: $white;\n }\n}\n\npn-spotlight[data-cta-color='hybrid'] {\n .quick-cta__content__heading {\n color: $blue700;\n }\n .quick-cta__content__preamble {\n color: $gray900;\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-quick-cta',\n styleUrl: 'pn-quick-cta.scss',\n})\nexport class PnQuickCta {\n @Element() hostElement: HTMLElement;\n @Prop() heading: string = null;\n @Prop() preamble: string = null;\n\n render() {\n return (\n <Host>\n <div class=\"quick-cta__content\">\n <h2 class=\"quick-cta__content__heading\">{this.heading}</h2>\n <p class=\"quick-cta__content__preamble\">{this.preamble}</p>\n <slot name=\"quick-cta-cta\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-quick-cta.js","mappings":";;AAAA,MAAM,aAAa,GAAG,w2CAAw2C,CAAC;AAC/3C,yBAAe,aAAa;;MCKfA,YAAU;;;;uBAEK,IAAI;wBACH,IAAI;;;IAE/B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,2DAAI,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,OAAO,CAAM,EAC3D,0DAAG,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC3D,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnQuickCta"],"sources":["src/components/cta/pn-quick-cta/pn-quick-cta.scss?tag=pn-quick-cta","src/components/cta/pn-quick-cta/pn-quick-cta.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-quick-cta {\n width: 100%;\n\n .quick-cta__content {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n gap: 2.4rem;\n\n width: 100%;\n\n .quick-cta__content__heading {\n padding: 0;\n margin: 0;\n\n font-size: 2.4rem;\n font-weight: 500;\n color: $blue900;\n\n @media screen and (max-width: 768px) {\n display: none;\n }\n\n @media screen and (min-width: 1640px) {\n font-size: 2.8rem;\n font-weight: 700;\n }\n }\n\n .quick-cta__content__preamble {\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 140%;\n\n padding: 0;\n margin: 0;\n color: $gray900;\n }\n\n [slot='quick-cta-cta'] {\n a {\n white-space: nowrap;\n &:hover {\n text-decoration: none;\n }\n }\n }\n }\n}\n\n//colors\npn-spotlight[data-cta-color='business'] {\n .quick-cta__content__heading {\n color: $coral400;\n }\n .quick-cta__content__preamble {\n color: $blue25;\n }\n}\n\npn-spotlight[data-cta-color='private'] {\n .quick-cta__content__heading,\n .quick-cta__content__preamble {\n color: $white;\n }\n}\n\npn-spotlight[data-cta-color='hybrid'] {\n .quick-cta__content__heading {\n color: $blue700;\n }\n .quick-cta__content__preamble {\n color: $gray900;\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-quick-cta',\n styleUrl: 'pn-quick-cta.scss',\n})\nexport class PnQuickCta {\n @Element() hostElement: HTMLElement;\n @Prop() heading: string = null;\n @Prop() preamble: string = null;\n\n render() {\n return (\n <Host>\n <div class=\"quick-cta__content\">\n <h2 class=\"quick-cta__content__heading\">{this.heading}</h2>\n <p class=\"quick-cta__content__preamble\">{this.preamble}</p>\n <slot name=\"quick-cta-cta\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-quote-card.js CHANGED Viewed

@@ -11,10 +11,10 @@ const PnQuoteCard$1 = /*@__PURE__*/ proxyCustomElement(class PnQuoteCard extends
         this.name = null;
         this.occupation = null;
     }
+    get hostElement() { return this; }
     render() {
         return (h(Host, { key: 'adf7a00980ef81bddf83262dcc24540f962abf27' }, h("div", { key: '4b8ec2139d33c1d432c269ba04c8e13732b46dcd', class: "pn-quote-card__section" }, h("div", { key: '67713c139963d7e2477fcf0b6d078d336a768940', class: "pn-quote-card__container" }, h("slot", { key: 'b68d98f863024314c4d14e6697ce2e2396041cc8', name: "vertical-line" }, " "), h("div", { key: 'f712e28f92b230e64fe5ffc5abf001443a9d16ec', class: "pn-quote-card__quote__container" }, h("blockquote", { key: 'cd1eb6e0c9d973aa816b2c8644be9c05558e7c17', class: "pn-quote-card__quote" }, h("svg", { key: '947cdf4204f8e2aea7ba33cb7b2a4c1f3b919415', width: "25", height: "18", viewBox: "0 0 25 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ec7acd41030a16824b604eda941c3cde35e69647', d: "M10.483 0V7.391C10.483 13.095 6.752 16.961 1.5 18L0.505 15.849C2.937 14.932 4.5 12.211 4.5 10H0.5V0H10.483ZM24.5 0V7.391C24.5 13.095 20.752 16.962 15.5 18L14.504 15.849C16.937 14.932 18.5 12.211 18.5 10H14.517V0H24.5Z", fill: "white" })), this.quote), h("slot", { key: 'ee71250def5a98c730ae00a60761868e4cf2b2f0', name: "horizontal-line" }), h("div", { key: '41f86563902c051b7c2ec0d915244b6f6c7b8533', class: "pn-quote-card__reference__container" }, h("slot", { key: 'e1dce0ca310574a9da9ba5c15ba823f1e70c61fa', name: "illustration" }), h("div", { key: 'a06f795ff2d1d7165b8b0f654c5ee9bd8fb4eca9', class: "pn-quote-card__reference" }, h("span", { key: '3507763b1414b00076fdaa9cfb6b5c7ec1e36cb5', class: "pn-quote-card__reference__name" }, this.name), h("span", { key: 'ce5f2580a1cb9c00e99536228c0c2cc784ef9fe2', class: "pn-quote-card__reference__occupation" }, this.occupation)))), h("div", { key: 'c3c7b60385beb22bfdb9ce05b77f44199d5b8fbb', class: "pn-quote-card__large-photo" }, h("slot", { key: 'eb72a8ce622a9166271549bb0090c68e9847ae17', name: "illustration-big" }))))));
     }
-    get hostElement() { return this; }
     static get style() { return PnQuoteCardStyle0; }
 }, [4, "pn-quote-card", {
         "quote": [1],

package/components/pn-quote-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-quote-card.js","mappings":";;AAAA,MAAM,cAAc,GAAG,u6RAAu6R,CAAC;AAC/7R,0BAAe,cAAc;;MCKhBA,aAAW;;;;qBAGE,IAAI;oBACL,IAAI;0BACE,IAAI;;IACjC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,0BAA0B,IACnC,6DAAM,IAAI,EAAC,eAAe,QAAS,EACnC,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,mEAAY,KAAK,EAAC,sBAAsB,IACtC,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,6DACE,CAAC,EAAC,2NAA2N,EAC7N,IAAI,EAAC,OAAO,GACZ,CACE,EAEL,IAAI,CAAC,KAAK,CACA,EAEb,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,EACpC,4DAAK,KAAK,EAAC,qCAAqC,IAC9C,6DAAM,IAAI,EAAC,cAAc,GAAG,EAC5B,4DAAK,KAAK,EAAC,0BAA0B,IACnC,6DAAM,KAAK,EAAC,gCAAgC,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC/D,6DAAM,KAAK,EAAC,sCAAsC,IAAE,IAAI,CAAC,UAAU,CAAQ,CACvE,CACF,CACF,EACN,4DAAK,KAAK,EAAC,4BAA4B,IACrC,6DAAM,IAAI,EAAC,kBAAkB,GAAG,CAC5B,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnQuoteCard"],"sources":["src/components/cards/pn-quote-card/pn-quote-card.scss?tag=pn-quote-card","src/components/cards/pn-quote-card/pn-quote-card.tsx"],"sourcesContent":["@import '../../../globals/main';\n\npn-quote-card {\n .pn-quote-card__section {\n }\n\n .pn-quote-card__container {\n margin: 0 auto;\n display: flex;\n flex-direction: row;\n\n min-height: 262px;\n padding: 0 2.4rem;\n }\n\n .pn-quote-card__quote__container {\n padding: 0 3.2rem;\n }\n\n .pn-quote-card__quote {\n position: relative;\n font-weight: 400;\n font-size: 2rem;\n line-height: 140%;\n margin: 0;\n\n svg {\n position: absolute;\n left: -3.2rem;\n top: 0.2rem;\n }\n }\n\n .pn-quote-card__reference__container {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n gap: 1.6rem;\n\n align-items: center;\n }\n\n .pn-quote-card__reference {\n }\n\n .pn-quote-card__reference__name {\n display: block;\n font-weight: 400;\n font-size: 2.4rem;\n line-height: 2.9rem;\n }\n\n .pn-quote-card__reference__occupation {\n display: block;\n font-weight: 400;\n font-size: 1.4rem;\n line-height: 1.7rem;\n }\n\n [slot='illustration'] {\n padding: 0;\n }\n\n [slot='illustration-big'] {\n padding: 0.8rem 0;\n }\n\n [slot='illustration'],\n [slot='illustration-big'] {\n aspect-ratio: 1/1;\n\n picture {\n aspect-ratio: 1 / 1;\n img {\n clip-path: circle(50%);\n max-width: unset;\n }\n }\n }\n}\n\n//line orientation\n\npn-quote-card {\n [slot='horizontal-line'],\n [slot='vertical-line'] {\n display: flex;\n }\n}\n\n//Colors\npn-quote-card[data-line-color='white'] {\n .pn-quote-card__section {\n background-color: $blue700;\n color: $white;\n }\n\n .pn-line-shape__line,\n .pn-line-shape__dot {\n border-color: $white;\n background-color: $white;\n }\n\n .pn-quote-card__quote {\n svg > path {\n fill: $white;\n }\n }\n}\n\npn-quote-card[data-line-color='blue'] {\n .pn-quote-card__section {\n background-color: $white;\n }\n\n .pn-line-shape__line,\n .pn-line-shape__dot {\n border-color: $blue400;\n background-color: $blue400;\n }\n\n .pn-quote-card__quote {\n svg > path {\n fill: $blue400;\n }\n }\n}\n\npn-quote-card[data-line-color='blue900'] {\n .pn-quote-card__section {\n background-color: $white;\n }\n\n .pn-line-shape__line,\n .pn-line-shape__dot {\n border-color: $blue900;\n background-color: $blue900;\n }\n\n .pn-quote-card__quote {\n svg > path {\n fill: $blue900;\n }\n }\n}\n\n//layouts\n\npn-quote-card[data-card-style='standalone'] {\n &[data-line-color='white'] {\n .pn-quote-card__section {\n border-radius: 2.4rem;\n }\n\n .pn-quote-card__container {\n padding: 2.4rem;\n }\n }\n .pn-quote-card__section {\n max-width: 100%;\n margin: 0 auto;\n\n @media screen and (min-width: 992px) {\n max-width: 70%;\n }\n @media screen and (min-width: 1200px) {\n max-width: 60%;\n }\n }\n\n .pn-quote-card__container {\n min-height: unset;\n padding: 0;\n\n @media screen and (min-width: 768px) {\n padding: 0 2.4rem;\n }\n }\n\n .pn-quote-card__quote__container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 3.2rem;\n padding: 2.4rem 1.6rem 1.6rem 1.6rem;\n\n @media screen and (min-width: 768px) {\n padding: 2.4rem 3.2rem 1.6rem 3.2rem;\n }\n }\n\n .pn-quote-card__quote {\n font-size: 1.6rem;\n\n @media screen and (min-width: 992px) {\n font-size: 2rem;\n }\n\n svg {\n display: block;\n margin-bottom: 0.8rem;\n position: relative;\n top: 0;\n left: 0;\n }\n }\n\n .pn-quote-card__reference__container {\n [slot='illustration'] {\n picture {\n img {\n height: 6rem;\n width: 6rem;\n }\n }\n }\n @media screen and (min-width: 992px) {\n [slot='illustration'] {\n picture {\n img {\n height: 9rem;\n width: 9rem;\n }\n }\n }\n }\n }\n\n .pn-quote-card__reference__name {\n font-size: 1.6rem;\n @media screen and (min-width: 992px) {\n font-size: 2.4rem;\n }\n }\n\n .pn-quote-card__reference__occupation {\n font-size: 1.2rem;\n @media screen and (min-width: 992px) {\n font-size: 1.4rem;\n }\n }\n\n .pn-quote-card__large-photo {\n display: none;\n }\n}\n\npn-quote-card[data-card-style='combo'] {\n .pn-quote-card__section {\n width: 100%;\n margin: 0 auto;\n padding-top: 4rem;\n padding-bottom: 4rem;\n @media screen and (min-width: 992px) {\n padding-bottom: 0;\n }\n\n @media screen and (min-width: 1200px) {\n padding-top: 10rem;\n }\n }\n\n .pn-quote-card__container {\n min-height: 10rem;\n padding-bottom: 0;\n\n @media screen and (min-width: 768px) {\n max-width: 90%;\n width: 100%;\n }\n\n @media screen and (min-width: 992px) {\n max-width: 768px;\n width: 100%;\n }\n @media screen and (min-width: 1200px) {\n max-width: 1140px;\n width: 100%;\n padding: 0 5.6rem;\n }\n @media screen and (min-width: 1640px) {\n max-width: 1440px;\n width: 100%;\n padding: 0 12rem;\n }\n }\n\n .pn-quote-card__quote__container {\n padding-bottom: 0;\n padding-left: 0;\n padding-right: 0;\n\n @media screen and (min-width: 768px) {\n padding-left: 2.4rem;\n padding-right: 2.4rem;\n }\n }\n\n .pn-quote-card__quote {\n font-size: 2rem;\n padding-left: 2.4rem;\n svg {\n left: -0.8rem;\n top: 0.2rem;\n }\n\n @media screen and (min-width: 768px) {\n padding-left: 4rem;\n svg {\n left: 0;\n }\n }\n\n @media screen and (min-width: 992px) {\n font-size: 2.4rem;\n svg {\n left: 0;\n top: 0.4rem;\n scale: 1.3;\n }\n }\n\n @media screen and (min-width: 1200px) {\n padding-left: 0;\n font-size: 3.2rem;\n svg {\n left: -4.8rem;\n top: 1rem;\n scale: 1.4;\n }\n }\n\n @media screen and (min-width: 1640px) {\n font-size: 3.8rem;\n svg {\n left: -6.4rem;\n top: 1.6rem;\n scale: 1.8;\n }\n }\n }\n\n .pn-quote-card__reference__container {\n flex-direction: row-reverse;\n }\n\n [slot='illustration'] {\n picture > img {\n max-width: 6rem;\n max-height: 6rem;\n }\n\n @media screen and (min-width: 768px) {\n picture > img {\n max-width: 10rem;\n max-height: 10rem;\n }\n }\n\n @media screen and (min-width: 1140px) {\n display: none;\n }\n }\n\n .pn-quote-card__reference {\n text-align: right;\n }\n\n .pn-quote-card__reference__name {\n display: block;\n font-size: 1.4rem;\n @media screen and (min-width: 768px) {\n font-size: 1.6rem;\n }\n\n @media screen and (min-width: 992px) {\n font-size: 2rem;\n }\n\n @media screen and (min-width: 1640px) {\n font-size: 3.2rem;\n margin-bottom: 1rem;\n }\n }\n\n .pn-quote-card__reference__occupation {\n display: block;\n\n font-size: 1.2rem;\n @media screen and (min-width: 992px) {\n font-size: 1.4rem;\n }\n\n @media screen and (min-width: 1640px) {\n font-size: 1.6rem;\n }\n }\n\n .pn-quote-card__large-photo {\n display: none;\n\n @media screen and (min-width: 1140px) {\n display: block;\n\n & > [slot='illustration-big'] {\n width: 18rem;\n height: 18rem;\n & picture > img {\n width: 18rem;\n height: 18rem;\n }\n }\n }\n\n @media screen and (min-width: 1640px) {\n display: block;\n width: 24rem;\n height: 24rem;\n & > [slot='illustration-big'] {\n position: relative;\n z-index: 1;\n width: 24rem;\n height: 24rem;\n\n & > picture > img {\n width: 24rem;\n height: 24rem;\n }\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-quote-card',\n styleUrl: 'pn-quote-card.scss',\n})\nexport class PnQuoteCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() quote: string = null;\n @Prop() name: string = null;\n @Prop() occupation: string = null;\n render() {\n return (\n <Host>\n <div class=\"pn-quote-card__section\">\n <div class=\"pn-quote-card__container\">\n <slot name=\"vertical-line\"> </slot>\n <div class=\"pn-quote-card__quote__container\">\n <blockquote class=\"pn-quote-card__quote\">\n <svg width=\"25\" height=\"18\" viewBox=\"0 0 25 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.483 0V7.391C10.483 13.095 6.752 16.961 1.5 18L0.505 15.849C2.937 14.932 4.5 12.211 4.5 10H0.5V0H10.483ZM24.5 0V7.391C24.5 13.095 20.752 16.962 15.5 18L14.504 15.849C16.937 14.932 18.5 12.211 18.5 10H14.517V0H24.5Z\"\n fill=\"white\"\n />\n </svg>\n\n {this.quote}\n </blockquote>\n\n <slot name=\"horizontal-line\"></slot>\n <div class=\"pn-quote-card__reference__container\">\n <slot name=\"illustration\" />\n <div class=\"pn-quote-card__reference\">\n <span class=\"pn-quote-card__reference__name\">{this.name}</span>\n <span class=\"pn-quote-card__reference__occupation\">{this.occupation}</span>\n </div>\n </div>\n </div>\n <div class=\"pn-quote-card__large-photo\">\n <slot name=\"illustration-big\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-quote-card.js","mappings":";;AAAA,MAAM,cAAc,GAAG,u6RAAu6R,CAAC;AAC/7R,0BAAe,cAAc;;MCKhBA,aAAW;;;;qBAGE,IAAI;oBACL,IAAI;0BACE,IAAI;;;IACjC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,0BAA0B,IACnC,6DAAM,IAAI,EAAC,eAAe,QAAS,EACnC,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,mEAAY,KAAK,EAAC,sBAAsB,IACtC,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,6DACE,CAAC,EAAC,2NAA2N,EAC7N,IAAI,EAAC,OAAO,GACZ,CACE,EAEL,IAAI,CAAC,KAAK,CACA,EAEb,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,EACpC,4DAAK,KAAK,EAAC,qCAAqC,IAC9C,6DAAM,IAAI,EAAC,cAAc,GAAG,EAC5B,4DAAK,KAAK,EAAC,0BAA0B,IACnC,6DAAM,KAAK,EAAC,gCAAgC,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC/D,6DAAM,KAAK,EAAC,sCAAsC,IAAE,IAAI,CAAC,UAAU,CAAQ,CACvE,CACF,CACF,EACN,4DAAK,KAAK,EAAC,4BAA4B,IACrC,6DAAM,IAAI,EAAC,kBAAkB,GAAG,CAC5B,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnQuoteCard"],"sources":["src/components/cards/pn-quote-card/pn-quote-card.scss?tag=pn-quote-card","src/components/cards/pn-quote-card/pn-quote-card.tsx"],"sourcesContent":["@import '../../../globals/main';\n\npn-quote-card {\n .pn-quote-card__section {\n }\n\n .pn-quote-card__container {\n margin: 0 auto;\n display: flex;\n flex-direction: row;\n\n min-height: 262px;\n padding: 0 2.4rem;\n }\n\n .pn-quote-card__quote__container {\n padding: 0 3.2rem;\n }\n\n .pn-quote-card__quote {\n position: relative;\n font-weight: 400;\n font-size: 2rem;\n line-height: 140%;\n margin: 0;\n\n svg {\n position: absolute;\n left: -3.2rem;\n top: 0.2rem;\n }\n }\n\n .pn-quote-card__reference__container {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n gap: 1.6rem;\n\n align-items: center;\n }\n\n .pn-quote-card__reference {\n }\n\n .pn-quote-card__reference__name {\n display: block;\n font-weight: 400;\n font-size: 2.4rem;\n line-height: 2.9rem;\n }\n\n .pn-quote-card__reference__occupation {\n display: block;\n font-weight: 400;\n font-size: 1.4rem;\n line-height: 1.7rem;\n }\n\n [slot='illustration'] {\n padding: 0;\n }\n\n [slot='illustration-big'] {\n padding: 0.8rem 0;\n }\n\n [slot='illustration'],\n [slot='illustration-big'] {\n aspect-ratio: 1/1;\n\n picture {\n aspect-ratio: 1 / 1;\n img {\n clip-path: circle(50%);\n max-width: unset;\n }\n }\n }\n}\n\n//line orientation\n\npn-quote-card {\n [slot='horizontal-line'],\n [slot='vertical-line'] {\n display: flex;\n }\n}\n\n//Colors\npn-quote-card[data-line-color='white'] {\n .pn-quote-card__section {\n background-color: $blue700;\n color: $white;\n }\n\n .pn-line-shape__line,\n .pn-line-shape__dot {\n border-color: $white;\n background-color: $white;\n }\n\n .pn-quote-card__quote {\n svg > path {\n fill: $white;\n }\n }\n}\n\npn-quote-card[data-line-color='blue'] {\n .pn-quote-card__section {\n background-color: $white;\n }\n\n .pn-line-shape__line,\n .pn-line-shape__dot {\n border-color: $blue400;\n background-color: $blue400;\n }\n\n .pn-quote-card__quote {\n svg > path {\n fill: $blue400;\n }\n }\n}\n\npn-quote-card[data-line-color='blue900'] {\n .pn-quote-card__section {\n background-color: $white;\n }\n\n .pn-line-shape__line,\n .pn-line-shape__dot {\n border-color: $blue900;\n background-color: $blue900;\n }\n\n .pn-quote-card__quote {\n svg > path {\n fill: $blue900;\n }\n }\n}\n\n//layouts\n\npn-quote-card[data-card-style='standalone'] {\n &[data-line-color='white'] {\n .pn-quote-card__section {\n border-radius: 2.4rem;\n }\n\n .pn-quote-card__container {\n padding: 2.4rem;\n }\n }\n .pn-quote-card__section {\n max-width: 100%;\n margin: 0 auto;\n\n @media screen and (min-width: 992px) {\n max-width: 70%;\n }\n @media screen and (min-width: 1200px) {\n max-width: 60%;\n }\n }\n\n .pn-quote-card__container {\n min-height: unset;\n padding: 0;\n\n @media screen and (min-width: 768px) {\n padding: 0 2.4rem;\n }\n }\n\n .pn-quote-card__quote__container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 3.2rem;\n padding: 2.4rem 1.6rem 1.6rem 1.6rem;\n\n @media screen and (min-width: 768px) {\n padding: 2.4rem 3.2rem 1.6rem 3.2rem;\n }\n }\n\n .pn-quote-card__quote {\n font-size: 1.6rem;\n\n @media screen and (min-width: 992px) {\n font-size: 2rem;\n }\n\n svg {\n display: block;\n margin-bottom: 0.8rem;\n position: relative;\n top: 0;\n left: 0;\n }\n }\n\n .pn-quote-card__reference__container {\n [slot='illustration'] {\n picture {\n img {\n height: 6rem;\n width: 6rem;\n }\n }\n }\n @media screen and (min-width: 992px) {\n [slot='illustration'] {\n picture {\n img {\n height: 9rem;\n width: 9rem;\n }\n }\n }\n }\n }\n\n .pn-quote-card__reference__name {\n font-size: 1.6rem;\n @media screen and (min-width: 992px) {\n font-size: 2.4rem;\n }\n }\n\n .pn-quote-card__reference__occupation {\n font-size: 1.2rem;\n @media screen and (min-width: 992px) {\n font-size: 1.4rem;\n }\n }\n\n .pn-quote-card__large-photo {\n display: none;\n }\n}\n\npn-quote-card[data-card-style='combo'] {\n .pn-quote-card__section {\n width: 100%;\n margin: 0 auto;\n padding-top: 4rem;\n padding-bottom: 4rem;\n @media screen and (min-width: 992px) {\n padding-bottom: 0;\n }\n\n @media screen and (min-width: 1200px) {\n padding-top: 10rem;\n }\n }\n\n .pn-quote-card__container {\n min-height: 10rem;\n padding-bottom: 0;\n\n @media screen and (min-width: 768px) {\n max-width: 90%;\n width: 100%;\n }\n\n @media screen and (min-width: 992px) {\n max-width: 768px;\n width: 100%;\n }\n @media screen and (min-width: 1200px) {\n max-width: 1140px;\n width: 100%;\n padding: 0 5.6rem;\n }\n @media screen and (min-width: 1640px) {\n max-width: 1440px;\n width: 100%;\n padding: 0 12rem;\n }\n }\n\n .pn-quote-card__quote__container {\n padding-bottom: 0;\n padding-left: 0;\n padding-right: 0;\n\n @media screen and (min-width: 768px) {\n padding-left: 2.4rem;\n padding-right: 2.4rem;\n }\n }\n\n .pn-quote-card__quote {\n font-size: 2rem;\n padding-left: 2.4rem;\n svg {\n left: -0.8rem;\n top: 0.2rem;\n }\n\n @media screen and (min-width: 768px) {\n padding-left: 4rem;\n svg {\n left: 0;\n }\n }\n\n @media screen and (min-width: 992px) {\n font-size: 2.4rem;\n svg {\n left: 0;\n top: 0.4rem;\n scale: 1.3;\n }\n }\n\n @media screen and (min-width: 1200px) {\n padding-left: 0;\n font-size: 3.2rem;\n svg {\n left: -4.8rem;\n top: 1rem;\n scale: 1.4;\n }\n }\n\n @media screen and (min-width: 1640px) {\n font-size: 3.8rem;\n svg {\n left: -6.4rem;\n top: 1.6rem;\n scale: 1.8;\n }\n }\n }\n\n .pn-quote-card__reference__container {\n flex-direction: row-reverse;\n }\n\n [slot='illustration'] {\n picture > img {\n max-width: 6rem;\n max-height: 6rem;\n }\n\n @media screen and (min-width: 768px) {\n picture > img {\n max-width: 10rem;\n max-height: 10rem;\n }\n }\n\n @media screen and (min-width: 1140px) {\n display: none;\n }\n }\n\n .pn-quote-card__reference {\n text-align: right;\n }\n\n .pn-quote-card__reference__name {\n display: block;\n font-size: 1.4rem;\n @media screen and (min-width: 768px) {\n font-size: 1.6rem;\n }\n\n @media screen and (min-width: 992px) {\n font-size: 2rem;\n }\n\n @media screen and (min-width: 1640px) {\n font-size: 3.2rem;\n margin-bottom: 1rem;\n }\n }\n\n .pn-quote-card__reference__occupation {\n display: block;\n\n font-size: 1.2rem;\n @media screen and (min-width: 992px) {\n font-size: 1.4rem;\n }\n\n @media screen and (min-width: 1640px) {\n font-size: 1.6rem;\n }\n }\n\n .pn-quote-card__large-photo {\n display: none;\n\n @media screen and (min-width: 1140px) {\n display: block;\n\n & > [slot='illustration-big'] {\n width: 18rem;\n height: 18rem;\n & picture > img {\n width: 18rem;\n height: 18rem;\n }\n }\n }\n\n @media screen and (min-width: 1640px) {\n display: block;\n width: 24rem;\n height: 24rem;\n & > [slot='illustration-big'] {\n position: relative;\n z-index: 1;\n width: 24rem;\n height: 24rem;\n\n & > picture > img {\n width: 24rem;\n height: 24rem;\n }\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-quote-card',\n styleUrl: 'pn-quote-card.scss',\n})\nexport class PnQuoteCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() quote: string = null;\n @Prop() name: string = null;\n @Prop() occupation: string = null;\n render() {\n return (\n <Host>\n <div class=\"pn-quote-card__section\">\n <div class=\"pn-quote-card__container\">\n <slot name=\"vertical-line\"> </slot>\n <div class=\"pn-quote-card__quote__container\">\n <blockquote class=\"pn-quote-card__quote\">\n <svg width=\"25\" height=\"18\" viewBox=\"0 0 25 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.483 0V7.391C10.483 13.095 6.752 16.961 1.5 18L0.505 15.849C2.937 14.932 4.5 12.211 4.5 10H0.5V0H10.483ZM24.5 0V7.391C24.5 13.095 20.752 16.962 15.5 18L14.504 15.849C16.937 14.932 18.5 12.211 18.5 10H14.517V0H24.5Z\"\n fill=\"white\"\n />\n </svg>\n\n {this.quote}\n </blockquote>\n\n <slot name=\"horizontal-line\"></slot>\n <div class=\"pn-quote-card__reference__container\">\n <slot name=\"illustration\" />\n <div class=\"pn-quote-card__reference\">\n <span class=\"pn-quote-card__reference__name\">{this.name}</span>\n <span class=\"pn-quote-card__reference__occupation\">{this.occupation}</span>\n </div>\n </div>\n </div>\n <div class=\"pn-quote-card__large-photo\">\n <slot name=\"illustration-big\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-scroll2.js CHANGED Viewed

@@ -22,6 +22,7 @@ const PnScroll = /*@__PURE__*/ proxyCustomElement(class PnScroll extends HTMLEle
         this.notIntersectFunc = undefined;
         this.compId = null;
     }
+    get hostElement() { return this; }
     generateUniqueId() {
         return v4();
     }
@@ -29,20 +30,20 @@ const PnScroll = /*@__PURE__*/ proxyCustomElement(class PnScroll extends HTMLEle
         entries.forEach(entry => {
             if (!shouldLoop) {
                 if (!entry.isIntersecting) {
-                    onNotIntersecting === null || onNotIntersecting === void 0 ? void 0 : onNotIntersecting(entry, observer);
+                    onNotIntersecting?.(entry, observer);
                     return;
                 }
                 entry.target.classList.add('in-view');
-                onIntersecting === null || onIntersecting === void 0 ? void 0 : onIntersecting(entry, observer);
+                onIntersecting?.(entry, observer);
                 observer.unobserve(entry.target);
             }
             else {
                 entry.target.classList.toggle('in-view', entry.isIntersecting);
                 if (entry.isIntersecting) {
-                    onIntersecting === null || onIntersecting === void 0 ? void 0 : onIntersecting(entry, observer);
+                    onIntersecting?.(entry, observer);
                 }
                 else {
-                    onNotIntersecting === null || onNotIntersecting === void 0 ? void 0 : onNotIntersecting(entry, observer);
+                    onNotIntersecting?.(entry, observer);
                 }
             }
         });
@@ -59,7 +60,6 @@ const PnScroll = /*@__PURE__*/ proxyCustomElement(class PnScroll extends HTMLEle
     render() {
         return (h(Host, { key: '443d7a3794f4b2292d39837ca89726bcdd2a5cee' }, h("div", { key: '341524e340709a5db403e024b448fd08087fa9c5', class: `scroll-wrapper ${this.behaviourClasses}`, id: `${SCROLL_ID}${this.compId}`, style: { '--transition-duration': `${this.transitionDurationSeconds}s` } }, h("slot", { key: '625bd566d903c15298969428a50030ee47c5568b', name: "scroll-affected" }))));
     }
-    get hostElement() { return this; }
     static get style() { return PnScrollStyle0; }
 }, [4, "pn-scroll", {
         "observerOptions": [16],

package/components/pn-scroll2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-scroll2.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,mTAAmT,CAAC;AACxU,uBAAe,WAAW;;ACG1B,MAAM,sBAAsB,GAA6B;IACvD,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,oBAAoB;CACjC,CAAC;AAEF,MAAM,SAAS,GAAG,uBAAuB,CAAC;MAM7B,QAAQ;;;;+BAEiC,sBAAsB;gCACvC,eAAe;yCACN,GAAG;0BAChB,KAAK;;;sBAIV,IAAI;;IAE9B,gBAAgB;QACd,OAAOA,EAAM,EAAE,CAAC;KACjB;IAED,kBAAkB,CAAC,OAAoC,EAAE,QAA+B,EAAE,cAAyB,EAAE,iBAA4B,EAAE,UAAoB;QACrK,OAAO,CAAC,OAAO,CAAC,KAAK;YACnB,IAAI,CAAC,UAAU,EAAE;gBACf,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;oBACzB,iBAAiB,~~aAAjB~~,~~iBAAiB,uBAAjB,iBAAiB,CAAG,~~KAAK,EAAE,QAAQ,CAAC,CAAC;oBACrC,OAAO;iBACR;gBACD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;gBACtC,cAAc,~~aAAd~~,~~cAAc,uBAAd,cAAc,CAAG,~~KAAK,EAAE,QAAQ,CAAC,CAAC;gBAClC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aAClC;iBAAM;gBACL,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;gBAC/D,IAAI,KAAK,CAAC,cAAc,EAAE;oBACxB,cAAc,~~aAAd~~,~~cAAc,uBAAd,cAAc,CAAG,~~KAAK,EAAE,QAAQ,CAAC,CAAC;iBACnC;qBAAM;oBACL,iBAAiB,~~aAAjB~~,~~iBAAiB,uBAAjB,iBAAiB,CAAG,~~KAAK,EAAE,QAAQ,CAAC,CAAC;iBACtC;aACF;SACF,CAAC,CAAC;KACJ;;IAGD,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACvC;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,EAC7H,IAAI,CAAC,eAAe,CACrB,CAAC;QACF,MAAM,eAAe,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9E,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;KACnC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAE,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,uBAAuB,EAAE,GAAG,IAAI,CAAC,yBAAyB,GAAG,EAAE,IAC/J,6DAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["uuidv4"],"sources":["src/components/animation/pn-scroll/pn-scroll.scss?tag=pn-scroll","src/components/animation/pn-scroll/pn-scroll.tsx"],"sourcesContent":["pn-scroll {\n .scroll-wrapper {\n transition: all var(--transition-duration) ease-in-out 250ms;\n\n &.fade {\n opacity: 0;\n\n &.in-view {\n opacity: 1;\n }\n }\n\n &.slide-up {\n transform: translateY(50px);\n &.in-view {\n transform: translateY(0);\n }\n }\n\n &.slide-in {\n &.in-view {\n }\n }\n\n &.slide-out {\n &.in-view {\n }\n }\n }\n}\n","import { v4 as uuidv4 } from 'uuid';\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nconst defaultObserverOptions: IntersectionObserverInit = {\n root: null,\n threshold: 0,\n rootMargin: '0px 0px -150px 0px',\n};\n\nconst SCROLL_ID = `pn-scroll-wrapper-id-`;\n\n@Component({\n tag: 'pn-scroll',\n styleUrl: 'pn-scroll.scss',\n})\nexport class PnScroll {\n @Element() hostElement: HTMLElement;\n @Prop() observerOptions: IntersectionObserverInit = defaultObserverOptions;\n @Prop() behaviourClasses: string = 'fade slide-up';\n @Prop() transitionDurationSeconds: number = 0.5;\n @Prop() shouldLoop?: boolean = false;\n @Prop() intersectFunc?: Function;\n @Prop() notIntersectFunc?: Function;\n\n @State() compId: string = null;\n\n generateUniqueId() {\n return uuidv4();\n }\n\n handleIntersection(entries: IntersectionObserverEntry[], observer?: IntersectionObserver, onIntersecting?: Function, onNotIntersecting?: Function, shouldLoop?: boolean) {\n entries.forEach(entry => {\n if (!shouldLoop) {\n if (!entry.isIntersecting) {\n onNotIntersecting?.(entry, observer);\n return;\n }\n entry.target.classList.add('in-view');\n onIntersecting?.(entry, observer);\n observer.unobserve(entry.target);\n } else {\n entry.target.classList.toggle('in-view', entry.isIntersecting);\n if (entry.isIntersecting) {\n onIntersecting?.(entry, observer);\n } else {\n onNotIntersecting?.(entry, observer);\n }\n }\n });\n }\n\n //on load, generate unique id for this wrapper\n componentWillLoad() {\n this.compId = this.generateUniqueId();\n }\n\n componentDidLoad() {\n const observer = new IntersectionObserver(\n (entries, observer) => this.handleIntersection(entries, observer, this.intersectFunc, this.notIntersectFunc, this.shouldLoop),\n this.observerOptions,\n );\n const objectToObserve = document.getElementById(`${SCROLL_ID}${this.compId}`);\n observer.observe(objectToObserve);\n }\n\n render() {\n return (\n <Host>\n <div class={`scroll-wrapper ${this.behaviourClasses}`} id={`${SCROLL_ID}${this.compId}`} style={{ '--transition-duration': `${this.transitionDurationSeconds}s` }}>\n <slot name=\"scroll-affected\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-scroll2.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,mTAAmT,CAAC;AACxU,uBAAe,WAAW;;ACG1B,MAAM,sBAAsB,GAA6B;IACvD,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,oBAAoB;CACjC,CAAC;AAEF,MAAM,SAAS,GAAG,uBAAuB,CAAC;MAM7B,QAAQ;;;;+BAEiC,sBAAsB;gCACvC,eAAe;yCACN,GAAG;0BAChB,KAAK;;;sBAIV,IAAI;;;IAE9B,gBAAgB;QACd,OAAOA,EAAM,EAAE,CAAC;KACjB;IAED,kBAAkB,CAAC,OAAoC,EAAE,QAA+B,EAAE,cAAyB,EAAE,iBAA4B,EAAE,UAAoB;QACrK,OAAO,CAAC,OAAO,CAAC,KAAK;YACnB,IAAI,CAAC,UAAU,EAAE;gBACf,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;oBACzB,iBAAiB,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC;oBACrC,OAAO;iBACR;gBACD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;gBACtC,cAAc,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC;gBAClC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aAClC;iBAAM;gBACL,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;gBAC/D,IAAI,KAAK,CAAC,cAAc,EAAE;oBACxB,cAAc,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC;iBACnC;qBAAM;oBACL,iBAAiB,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC;iBACtC;aACF;SACF,CAAC,CAAC;KACJ;;IAGD,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACvC;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,EAC7H,IAAI,CAAC,eAAe,CACrB,CAAC;QACF,MAAM,eAAe,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9E,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;KACnC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAE,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,uBAAuB,EAAE,GAAG,IAAI,CAAC,yBAAyB,GAAG,EAAE,IAC/J,6DAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["uuidv4"],"sources":["src/components/animation/pn-scroll/pn-scroll.scss?tag=pn-scroll","src/components/animation/pn-scroll/pn-scroll.tsx"],"sourcesContent":["pn-scroll {\n .scroll-wrapper {\n transition: all var(--transition-duration) ease-in-out 250ms;\n\n &.fade {\n opacity: 0;\n\n &.in-view {\n opacity: 1;\n }\n }\n\n &.slide-up {\n transform: translateY(50px);\n &.in-view {\n transform: translateY(0);\n }\n }\n\n &.slide-in {\n &.in-view {\n }\n }\n\n &.slide-out {\n &.in-view {\n }\n }\n }\n}\n","import { v4 as uuidv4 } from 'uuid';\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nconst defaultObserverOptions: IntersectionObserverInit = {\n root: null,\n threshold: 0,\n rootMargin: '0px 0px -150px 0px',\n};\n\nconst SCROLL_ID = `pn-scroll-wrapper-id-`;\n\n@Component({\n tag: 'pn-scroll',\n styleUrl: 'pn-scroll.scss',\n})\nexport class PnScroll {\n @Element() hostElement: HTMLElement;\n @Prop() observerOptions: IntersectionObserverInit = defaultObserverOptions;\n @Prop() behaviourClasses: string = 'fade slide-up';\n @Prop() transitionDurationSeconds: number = 0.5;\n @Prop() shouldLoop?: boolean = false;\n @Prop() intersectFunc?: Function;\n @Prop() notIntersectFunc?: Function;\n\n @State() compId: string = null;\n\n generateUniqueId() {\n return uuidv4();\n }\n\n handleIntersection(entries: IntersectionObserverEntry[], observer?: IntersectionObserver, onIntersecting?: Function, onNotIntersecting?: Function, shouldLoop?: boolean) {\n entries.forEach(entry => {\n if (!shouldLoop) {\n if (!entry.isIntersecting) {\n onNotIntersecting?.(entry, observer);\n return;\n }\n entry.target.classList.add('in-view');\n onIntersecting?.(entry, observer);\n observer.unobserve(entry.target);\n } else {\n entry.target.classList.toggle('in-view', entry.isIntersecting);\n if (entry.isIntersecting) {\n onIntersecting?.(entry, observer);\n } else {\n onNotIntersecting?.(entry, observer);\n }\n }\n });\n }\n\n //on load, generate unique id for this wrapper\n componentWillLoad() {\n this.compId = this.generateUniqueId();\n }\n\n componentDidLoad() {\n const observer = new IntersectionObserver(\n (entries, observer) => this.handleIntersection(entries, observer, this.intersectFunc, this.notIntersectFunc, this.shouldLoop),\n this.observerOptions,\n );\n const objectToObserve = document.getElementById(`${SCROLL_ID}${this.compId}`);\n observer.observe(objectToObserve);\n }\n\n render() {\n return (\n <Host>\n <div class={`scroll-wrapper ${this.behaviourClasses}`} id={`${SCROLL_ID}${this.compId}`} style={{ '--transition-duration': `${this.transitionDurationSeconds}s` }}>\n <slot name=\"scroll-affected\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-share-item2.js CHANGED Viewed

@@ -10,10 +10,10 @@ const PnShareItem = /*@__PURE__*/ proxyCustomElement(class PnShareItem extends H
         this.link = null;
         this.text = null;
     }
+    get hostElement() { return this; }
     render() {
         return (h(Host, { key: '91e29d95c93de36f6874abf2122f38d931d539f1' }, h("div", { key: 'ee1a46c97cdda226d697983e9a05c03d205c0997', class: "pn-share-item__container" }, h("a", { key: 'dd417980b984ec45a783f73fd0f3353010e9efe4', href: `${this.link}` }, h("slot", { key: 'c84b5b9f86a2a707eaa65f80dd5f02ca65c3b512', name: "icon" }), " ", this.text))));
     }
-    get hostElement() { return this; }
     static get style() { return PnShareItemStyle0; }
 }, [4, "pn-share-item", {
         "link": [1],

package/components/pn-share-item2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-share-item2.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kzBAAkzB,CAAC;AAC10B,0BAAe,cAAc;;MCKhB,WAAW;;;;oBAEC,IAAI;oBACJ,IAAI;;IAE3B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,0BAA0B,IACnC,0DAAG,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,IACrB,6DAAM,IAAI,EAAC,MAAM,GAAG,OAAE,IAAI,CAAC,IAAI,CAC7B,CACA,CACD,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/cta/pn-share/pn-share-item.scss?tag=pn-share-item","src/components/cta/pn-share/pn-share-item.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-share-item {\n .pn-share-item__container {\n padding: 0.3rem 0.6rem;\n border: 1px solid $gray200;\n border-radius: 0.8rem;\n\n background-color: $white;\n transition: background-color ease-in-out 0.3s;\n width: fit-content;\n }\n\n a {\n text-decoration: none;\n color: $blue700;\n transition: color 0.3s;\n display: flex;\n align-items: center;\n gap: 0.8rem;\n font-size: 1.6rem;\n font-weight: 400;\n }\n\n [slot='icon'] {\n svg {\n height: 1.6rem;\n width: 1.6rem;\n path {\n fill: $blue700;\n transition: fill 0.3s;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n\n .pn-share-item__container {\n background-color: $blue900;\n }\n\n a {\n color: $white;\n text-decoration: none;\n }\n\n [slot='icon'] {\n svg {\n fill: $blue900;\n path {\n fill: $white;\n }\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-share-item',\n styleUrl: 'pn-share-item.scss',\n})\nexport class PnShareItem {\n @Element() hostElement: HTMLElement;\n @Prop() link: string = null;\n @Prop() text: string = null;\n\n render() {\n return (\n <Host>\n <div class=\"pn-share-item__container\">\n <a href={`${this.link}`}>\n <slot name=\"icon\" /> {this.text}\n </a>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-share-item2.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kzBAAkzB,CAAC;AAC10B,0BAAe,cAAc;;MCKhB,WAAW;;;;oBAEC,IAAI;oBACJ,IAAI;;;IAE3B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,0BAA0B,IACnC,0DAAG,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,IACrB,6DAAM,IAAI,EAAC,MAAM,GAAG,OAAE,IAAI,CAAC,IAAI,CAC7B,CACA,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/cta/pn-share/pn-share-item.scss?tag=pn-share-item","src/components/cta/pn-share/pn-share-item.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-share-item {\n .pn-share-item__container {\n padding: 0.3rem 0.6rem;\n border: 1px solid $gray200;\n border-radius: 0.8rem;\n\n background-color: $white;\n transition: background-color ease-in-out 0.3s;\n width: fit-content;\n }\n\n a {\n text-decoration: none;\n color: $blue700;\n transition: color 0.3s;\n display: flex;\n align-items: center;\n gap: 0.8rem;\n font-size: 1.6rem;\n font-weight: 400;\n }\n\n [slot='icon'] {\n svg {\n height: 1.6rem;\n width: 1.6rem;\n path {\n fill: $blue700;\n transition: fill 0.3s;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n\n .pn-share-item__container {\n background-color: $blue900;\n }\n\n a {\n color: $white;\n text-decoration: none;\n }\n\n [slot='icon'] {\n svg {\n fill: $blue900;\n path {\n fill: $white;\n }\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-share-item',\n styleUrl: 'pn-share-item.scss',\n})\nexport class PnShareItem {\n @Element() hostElement: HTMLElement;\n @Prop() link: string = null;\n @Prop() text: string = null;\n\n render() {\n return (\n <Host>\n <div class=\"pn-share-item__container\">\n <a href={`${this.link}`}>\n <slot name=\"icon\" /> {this.text}\n </a>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-share.js CHANGED Viewed

@@ -44,6 +44,7 @@ const PnShare$1 = /*@__PURE__*/ proxyCustomElement(class PnShare extends HTMLEle
         this.language = 'sv';
         this.i18n = undefined;
     }
+    get hostElement() { return this; }
     componentWillLoad() {
         this.setTranslations();
     }
@@ -63,7 +64,6 @@ const PnShare$1 = /*@__PURE__*/ proxyCustomElement(class PnShare extends HTMLEle
             return (h("pn-share-item", { link: `${platform.url}${this.link}`, text: platform.text }, h("pn-icon", { slot: "icon", icon: platform.platform })));
         })))));
     }
-    get hostElement() { return this; }
     static get watchers() { return {
         "language": ["onLanguageChange"]
     }; }

package/components/pn-share.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-share.js","mappings":";;;AAAO,MAAM,YAAY,GAAG;IAC1B,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,SAAS;KACtB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,OAAO;KACpB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;CACF;;ACzBD,MAAM,UAAU,GAAG,6bAA6b,CAAC;AACjd,sBAAe,UAAU;;ACGzB,MAAM,UAAU,GAAG;IACjB,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,sDAAsD,EAAE,IAAI,EAAE,UAAU,EAAE;IACvG,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,uCAAuC,EAAE,IAAI,EAAE,SAAS,EAAE;IACtF,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,+CAA+C,EAAE,IAAI,EAAE,UAAU,EAAE;CACjG,CAAC;MAMWA,SAAO;;;;oBAEK,IAAI;wBACgC,IAAI~~;;;~~IAG/D,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,eAAe;QACb,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;QACD,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAChD,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACzC;KACF;IAGD,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,2DAAI,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,CAAC,UAAU,MAAO,EAC1D,4DAAK,KAAK,EAAC,iBAAiB,IACzB,UAAU,CAAC,GAAG,CAAC,QAAQ;YACtB,QACE,qBAAe,IAAI,EAAE,GAAG,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,IACrE,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,QAAQ,CAAC,QAAQ,GAAY,CAC1C,EAChB;SACH,CAAC,CACE,CACF,CACD,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["PnShare"],"sources":["src/components/cta/pn-share/translations.ts","src/components/cta/pn-share/pn-share.scss?tag=pn-share","src/components/cta/pn-share/pn-share.tsx"],"sourcesContent":["export const translations = {\n sv: {\n sharelabel: 'Dela med',\n },\n en: {\n sharelabel: 'Share to',\n },\n da: {\n sharelabel: 'Del med',\n },\n no: {\n sharelabel: 'Dele med',\n },\n fi: {\n sharelabel: 'Jakaa',\n },\n zh: {\n sharelabel: 'Share to',\n },\n it: {\n sharelabel: 'Share to',\n },\n nl: {\n sharelabel: 'Share to',\n },\n};\n","@import '../../../globals/main.scss';\npn-share {\n .pn-share__container {\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n }\n\n .pn-share__heading {\n font-size: 1.6rem;\n font-weight: 500;\n &:after {\n content: '';\n display: block;\n height: 0.2rem;\n background-color: $gray50;\n margin-top: 0.4rem;\n margin-bottom: 0.8rem;\n }\n }\n\n .pn-share__items {\n display: flex;\n flex-direction: row;\n gap: 0.8rem;\n align-items: center;\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translations } from './translations';\n\nconst SHARE_URLS = [\n { platform: 'linkedin', url: 'https://www.linkedin.com/sharing/share-offsite/?url=', text: 'LinkedIn' },\n { platform: 'twitter', url: 'https://twitter.com/intent/tweet?url=', text: 'Twitter' },\n { platform: 'facebook', url: 'https://www.facebook.com/sharer/sharer.php?u=', text: 'Facebook' },\n];\n\n@Component({\n tag: 'pn-share',\n styleUrl: 'pn-share.scss',\n})\nexport class PnShare {\n @Element() hostElement: HTMLElement;\n @Prop() link: string = null;\n @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n @State() i18n: any;\n\n componentWillLoad() {\n this.setTranslations();\n }\n\n setTranslations() {\n if (this.language === 'nb') {\n this.language = 'no';\n }\n if (this.language && translations[this.language]) {\n this.i18n = translations[this.language];\n }\n }\n\n @Watch('language')\n onLanguageChange() {\n this.setTranslations();\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-share__container\">\n <h3 class=\"pn-share__heading\">{this.i18n.sharelabel}:</h3>\n <div class=\"pn-share__items\">\n {SHARE_URLS.map(platform => {\n return (\n <pn-share-item link={`${platform.url}${this.link}`} text={platform.text}>\n <pn-icon slot=\"icon\" icon={platform.platform}></pn-icon>\n </pn-share-item>\n );\n })}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-share.js","mappings":";;;AAAO,MAAM,YAAY,GAAG;IAC1B,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,SAAS;KACtB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,OAAO;KACpB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;CACF;;ACzBD,MAAM,UAAU,GAAG,6bAA6b,CAAC;AACjd,sBAAe,UAAU;;ACGzB,MAAM,UAAU,GAAG;IACjB,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,sDAAsD,EAAE,IAAI,EAAE,UAAU,EAAE;IACvG,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,uCAAuC,EAAE,IAAI,EAAE,SAAS,EAAE;IACtF,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,+CAA+C,EAAE,IAAI,EAAE,UAAU,EAAE;CACjG,CAAC;MAMWA,SAAO;;;;oBAEK,IAAI;wBACgC,IAAI;;;;IAG/D,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,eAAe;QACb,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;QACD,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAChD,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACzC;KACF;IAGD,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,2DAAI,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,CAAC,UAAU,MAAO,EAC1D,4DAAK,KAAK,EAAC,iBAAiB,IACzB,UAAU,CAAC,GAAG,CAAC,QAAQ;YACtB,QACE,qBAAe,IAAI,EAAE,GAAG,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,IACrE,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,QAAQ,CAAC,QAAQ,GAAY,CAC1C,EAChB;SACH,CAAC,CACE,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnShare"],"sources":["src/components/cta/pn-share/translations.ts","src/components/cta/pn-share/pn-share.scss?tag=pn-share","src/components/cta/pn-share/pn-share.tsx"],"sourcesContent":["export const translations = {\n sv: {\n sharelabel: 'Dela med',\n },\n en: {\n sharelabel: 'Share to',\n },\n da: {\n sharelabel: 'Del med',\n },\n no: {\n sharelabel: 'Dele med',\n },\n fi: {\n sharelabel: 'Jakaa',\n },\n zh: {\n sharelabel: 'Share to',\n },\n it: {\n sharelabel: 'Share to',\n },\n nl: {\n sharelabel: 'Share to',\n },\n};\n","@import '../../../globals/main.scss';\npn-share {\n .pn-share__container {\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n }\n\n .pn-share__heading {\n font-size: 1.6rem;\n font-weight: 500;\n &:after {\n content: '';\n display: block;\n height: 0.2rem;\n background-color: $gray50;\n margin-top: 0.4rem;\n margin-bottom: 0.8rem;\n }\n }\n\n .pn-share__items {\n display: flex;\n flex-direction: row;\n gap: 0.8rem;\n align-items: center;\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translations } from './translations';\n\nconst SHARE_URLS = [\n { platform: 'linkedin', url: 'https://www.linkedin.com/sharing/share-offsite/?url=', text: 'LinkedIn' },\n { platform: 'twitter', url: 'https://twitter.com/intent/tweet?url=', text: 'Twitter' },\n { platform: 'facebook', url: 'https://www.facebook.com/sharer/sharer.php?u=', text: 'Facebook' },\n];\n\n@Component({\n tag: 'pn-share',\n styleUrl: 'pn-share.scss',\n})\nexport class PnShare {\n @Element() hostElement: HTMLElement;\n @Prop() link: string = null;\n @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n @State() i18n: any;\n\n componentWillLoad() {\n this.setTranslations();\n }\n\n setTranslations() {\n if (this.language === 'nb') {\n this.language = 'no';\n }\n if (this.language && translations[this.language]) {\n this.i18n = translations[this.language];\n }\n }\n\n @Watch('language')\n onLanguageChange() {\n this.setTranslations();\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-share__container\">\n <h3 class=\"pn-share__heading\">{this.i18n.sharelabel}:</h3>\n <div class=\"pn-share__items\">\n {SHARE_URLS.map(platform => {\n return (\n <pn-share-item link={`${platform.url}${this.link}`} text={platform.text}>\n <pn-icon slot=\"icon\" icon={platform.platform}></pn-icon>\n </pn-share-item>\n );\n })}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-sidenav-level.js CHANGED Viewed

@@ -16,6 +16,7 @@ const PnSidenavLevel$1 = /*@__PURE__*/ proxyCustomElement(class PnSidenavLevel e
         this.parentLinkId = '';
         this.alignment = 'right';
     }
+    get hostElement() { return this; }
     async componentWillLoad() {
         const parent = this.hostElement.parentElement;
         if (parent.tagName.toLowerCase() !== 'nav') {
@@ -41,15 +42,13 @@ const PnSidenavLevel$1 = /*@__PURE__*/ proxyCustomElement(class PnSidenavLevel e
         this.isOpen = state.openLevel === this.levelId;
     }
     render() {
-        var _a;
         const attributes = {
             'aria-hidden': this.level > 1 ? !this.isOpen + '' : null,
             'data-level': this.level + '',
-            'id': (_a = this.levelId) !== null && _a !== void 0 ? _a : '',
+            'id': this.levelId ?? '',
         };
-        return (h(Host, Object.assign({ key: '560c5756c5decd508f3dd0f0cafb608df89490cf' }, attributes, { "data-asdfasdf": this.isOpen }), h("slot", { key: 'd8afcc50d5f96bbd6323bb05dd33b1116d7f1941' })));
+        return (h(Host, { key: '560c5756c5decd508f3dd0f0cafb608df89490cf', ...attributes, "data-asdfasdf": this.isOpen }, h("slot", { key: 'd8afcc50d5f96bbd6323bb05dd33b1116d7f1941' })));
     }
-    get hostElement() { return this; }
     static get watchers() { return {
         "isOpen": ["onOpen"]
     }; }

package/components/pn-sidenav-level.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-sidenav-level.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,wTAAwT,CAAC;AACnV,6BAAe,iBAAiB;;MCOnBA,gBAAc;;;;qBAEA,CAAC;uBACC,EAAE;sBACF,KAAK;0BACF,EAAE;0BACF,EAAE;4BACA,EAAE;yBACL,OAAO;;IAEpC,MAAM,iBAAiB;QACrB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;QAC9C,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE;YAC1C,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;SAChB;QACD,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,iBAAiB,EAAE;YACtD,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;YACnD,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;YACnD,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;YACvD,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC1E,IAAI,CAAC,OAAO,GAAG,cAAc,IAAI,CAAC,KAAK,IAAI,cAAc,EAAE,CAAC;YAE5D,IAAI,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,MAAM,EAAE;gBAClD,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;gBAC/B,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;SACF;QACD,QAAQ,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B,CAAC,CAAC;KACJ;IAGD,MAAM,MAAK;IACX,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,OAAO,CAAC;KAChD;IAED,MAAM;;QACJ,MAAM,UAAU,GAAG;YACjB,aAAa,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI;YACxD,YAAY,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE;YAC7B,IAAI,EAAE,~~MAAA,~~IAAI,CAAC,OAAO,~~mCAAI~~,EAAE;SACzB,CAAC;QACF,QACE,EAAC,IAAI,~~qEAAK~~,UAAU,~~qBAAiB~~,IAAI,CAAC,MAAM,~~KAC9C~~,8DAAQ,CACH,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["PnSidenavLevel"],"sources":["src/components/navigation/pn-sidenav/pn-sidenav-level.scss?tag=pn-sidenav-level","src/components/navigation/pn-sidenav/pn-sidenav-level.tsx"],"sourcesContent":["@import './pn-sidenav-common.scss';\n@import '../../../globals/main.scss';\n\npn-sidenav-level {\n display: block;\n flex-basis: 100%;\n &[data-level='2'] {\n padding-left: 2.5em;\n overflow: hidden;\n transition: max-height ease 0.2s;\n max-height: 40em;\n &[aria-hidden='true'] {\n max-height: 0;\n }\n }\n}\n","import { Component, State, h, Host, Element, Watch } from '@stencil/core';\nimport { state, onChange } from './pn-sidenav-store';\n\n@Component({\n tag: 'pn-sidenav-level',\n styleUrl: 'pn-sidenav-level.scss',\n shadow: false,\n})\nexport class PnSidenavLevel {\n @Element() hostElement: HTMLElement;\n @State() level: number = 1;\n @State() levelId: string = '';\n @State() isOpen: boolean = false;\n @State() parentName: string = '';\n @State() parentHref: string = '';\n @State() parentLinkId: string = '';\n @State() alignment: string = 'right';\n\n async componentWillLoad() {\n const parent = this.hostElement.parentElement;\n if (parent.tagName.toLowerCase() !== 'nav') {\n this.level = 2;\n }\n if (parent.tagName.toLowerCase() === 'pn-sidenav-link') {\n this.parentName = parent.getAttribute('name') + '';\n this.parentHref = parent.getAttribute('href') + '';\n this.parentLinkId = parent.getAttribute('linkid') + '';\n const parentLinkName = this.parentName.toLowerCase().replace(/\\W/gi, '_');\n this.levelId = `sidenav-lvl${this.level}-${parentLinkName}`;\n\n if (parent.getAttribute('current') + '' === 'true') {\n state.openLevel = this.levelId;\n this.onChangeOpenLevel();\n }\n }\n onChange('openLevel', () => {\n this.onChangeOpenLevel();\n });\n }\n\n @Watch('isOpen')\n onOpen() {}\n onChangeOpenLevel() {\n this.isOpen = state.openLevel === this.levelId;\n }\n\n render() {\n const attributes = {\n 'aria-hidden': this.level > 1 ? !this.isOpen + '' : null,\n 'data-level': this.level + '',\n 'id': this.levelId ?? '',\n };\n return (\n <Host {...attributes} data-asdfasdf={this.isOpen}>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-sidenav-level.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,wTAAwT,CAAC;AACnV,6BAAe,iBAAiB;;MCOnBA,gBAAc;;;;qBAEA,CAAC;uBACC,EAAE;sBACF,KAAK;0BACF,EAAE;0BACF,EAAE;4BACA,EAAE;yBACL,OAAO;;;IAEpC,MAAM,iBAAiB;QACrB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;QAC9C,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE;YAC1C,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;SAChB;QACD,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,iBAAiB,EAAE;YACtD,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;YACnD,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;YACnD,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;YACvD,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC1E,IAAI,CAAC,OAAO,GAAG,cAAc,IAAI,CAAC,KAAK,IAAI,cAAc,EAAE,CAAC;YAE5D,IAAI,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,MAAM,EAAE;gBAClD,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;gBAC/B,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;SACF;QACD,QAAQ,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B,CAAC,CAAC;KACJ;IAGD,MAAM,MAAK;IACX,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,OAAO,CAAC;KAChD;IAED,MAAM;QACJ,MAAM,UAAU,GAAG;YACjB,aAAa,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI;YACxD,YAAY,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE;YAC7B,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,EAAE;SACzB,CAAC;QACF,QACE,EAAC,IAAI,wDAAK,UAAU,mBAAiB,IAAI,CAAC,MAAM,IAC9C,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnSidenavLevel"],"sources":["src/components/navigation/pn-sidenav/pn-sidenav-level.scss?tag=pn-sidenav-level","src/components/navigation/pn-sidenav/pn-sidenav-level.tsx"],"sourcesContent":["@import './pn-sidenav-common.scss';\n@import '../../../globals/main.scss';\n\npn-sidenav-level {\n display: block;\n flex-basis: 100%;\n &[data-level='2'] {\n padding-left: 2.5em;\n overflow: hidden;\n transition: max-height ease 0.2s;\n max-height: 40em;\n &[aria-hidden='true'] {\n max-height: 0;\n }\n }\n}\n","import { Component, State, h, Host, Element, Watch } from '@stencil/core';\nimport { state, onChange } from './pn-sidenav-store';\n\n@Component({\n tag: 'pn-sidenav-level',\n styleUrl: 'pn-sidenav-level.scss',\n shadow: false,\n})\nexport class PnSidenavLevel {\n @Element() hostElement: HTMLElement;\n @State() level: number = 1;\n @State() levelId: string = '';\n @State() isOpen: boolean = false;\n @State() parentName: string = '';\n @State() parentHref: string = '';\n @State() parentLinkId: string = '';\n @State() alignment: string = 'right';\n\n async componentWillLoad() {\n const parent = this.hostElement.parentElement;\n if (parent.tagName.toLowerCase() !== 'nav') {\n this.level = 2;\n }\n if (parent.tagName.toLowerCase() === 'pn-sidenav-link') {\n this.parentName = parent.getAttribute('name') + '';\n this.parentHref = parent.getAttribute('href') + '';\n this.parentLinkId = parent.getAttribute('linkid') + '';\n const parentLinkName = this.parentName.toLowerCase().replace(/\\W/gi, '_');\n this.levelId = `sidenav-lvl${this.level}-${parentLinkName}`;\n\n if (parent.getAttribute('current') + '' === 'true') {\n state.openLevel = this.levelId;\n this.onChangeOpenLevel();\n }\n }\n onChange('openLevel', () => {\n this.onChangeOpenLevel();\n });\n }\n\n @Watch('isOpen')\n onOpen() {}\n onChangeOpenLevel() {\n this.isOpen = state.openLevel === this.levelId;\n }\n\n render() {\n const attributes = {\n 'aria-hidden': this.level > 1 ? !this.isOpen + '' : null,\n 'data-level': this.level + '',\n 'id': this.levelId ?? '',\n };\n return (\n <Host {...attributes} data-asdfasdf={this.isOpen}>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-sidenav-link.js CHANGED Viewed

@@ -22,6 +22,7 @@ const PnSidenavLink$1 = /*@__PURE__*/ proxyCustomElement(class PnSidenavLink ext
         this.open = false;
         this.hasChildren = false;
     }
+    get hostElement() { return this; }
     componentWillLoad() {
         this.hasChildren = this.hostElement.querySelectorAll('pn-sidenav-level').length > 0;
         const safeLevelName = this.name.toLowerCase().replace(/\W/gi, '_');
@@ -54,9 +55,8 @@ const PnSidenavLink$1 = /*@__PURE__*/ proxyCustomElement(class PnSidenavLink ext
             'aria-expanded': (state.openLevel + '' === this.levelId + '') + '',
             'onClick': this.onExpandClick.bind(this),
         };
-        return (h(Host, { key: 'b38ecd5a94031ff495a8caca5e9399ad8e4ff6b1', role: "listitem", name: this.name, href: this.href, linkid: this.linkid, current: this.current + '' }, h(TagName, Object.assign({ key: '0eaf2ff18447ae926f19802965a5a5edc094bf8e' }, linkAttributes, (TagName === 'button' && Object.assign({}, buttonAttributes))), this.icon ? h("pn-icon", { icon: this.icon, color: "blue700" }) : null, h("span", { key: 'feb94f640777bc62a9f8691f7745295a4a7c1bd5' }, this.name), this.hasChildren && TagName === 'button' ? (h("div", { class: "pn-sidenav-link-expand" }, this.open ? (h("pn-icon", { class: "first-level_icon", icon: angle_small_up, color: "blue700" })) : (h("pn-icon", { class: "first-level_icon", icon: angle_small_down, color: "blue700" })))) : null), this.hasChildren && TagName === 'a' ? (h("button", Object.assign({}, buttonAttributes, { class: "pn-sidenav-link-expand" }), this.open ? h("pn-icon", { class: "first-level_icon", icon: angle_small_up, color: "blue700" }) : h("pn-icon", { class: "first-level_icon", icon: angle_small_down, color: "blue700" }))) : null, h("slot", { key: '550139f5d692f94f3bdd850115fb3e6765d90095' })));
+        return (h(Host, { key: 'b38ecd5a94031ff495a8caca5e9399ad8e4ff6b1', role: "listitem", name: this.name, href: this.href, linkid: this.linkid, current: this.current + '' }, h(TagName, { key: '0eaf2ff18447ae926f19802965a5a5edc094bf8e', ...linkAttributes, ...(TagName === 'button' && { ...buttonAttributes }) }, this.icon ? h("pn-icon", { icon: this.icon, color: "blue700" }) : null, h("span", { key: 'feb94f640777bc62a9f8691f7745295a4a7c1bd5' }, this.name), this.hasChildren && TagName === 'button' ? (h("div", { class: "pn-sidenav-link-expand" }, this.open ? (h("pn-icon", { class: "first-level_icon", icon: angle_small_up, color: "blue700" })) : (h("pn-icon", { class: "first-level_icon", icon: angle_small_down, color: "blue700" })))) : null), this.hasChildren && TagName === 'a' ? (h("button", { ...buttonAttributes, class: "pn-sidenav-link-expand" }, this.open ? h("pn-icon", { class: "first-level_icon", icon: angle_small_up, color: "blue700" }) : h("pn-icon", { class: "first-level_icon", icon: angle_small_down, color: "blue700" }))) : null, h("slot", { key: '550139f5d692f94f3bdd850115fb3e6765d90095' })));
     }
-    get hostElement() { return this; }
     static get style() { return PnSidenavLinkStyle0; }
 }, [4, "pn-sidenav-link", {
         "name": [1],

package/components/pn-sidenav-link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-sidenav-link.js","mappings":";;;;AAAA,MAAM,IAAI,GAAG,2QAA2Q,CAAC;AAClR,MAAM,cAAc,GAAG,IAAI;;ACDlC,MAAM,gBAAgB,GAAG,4gDAA4gD,CAAC;AACtiD,4BAAe,gBAAgB;;MCQlBA,eAAa;;;;oBAID,EAAE;oBAEF,EAAE;sBAEA,IAAI;sBAEJ,IAAI;oBAEN,EAAE;uBAEE,KAAK;uBAGL,EAAE;oBAEJ,KAAK;2BACE,KAAK;;IAErC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACpF,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACnE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,EAAE;YACjC,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,aAAa,EAAE,CAAC;SACnD;QACD,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE;YAC7B,IAAI,CAAC,MAAM,GAAG,gBAAgB,aAAa,EAAE,CAAC;SAC/C;KACF;;IAED,aAAa;QACX,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;KAClF;IAED,UAAU;QACR,OAAO,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;KACnC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAClC,MAAM,cAAc,GAAG;YACrB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,KAAK,EAAE,iBAAiB;SACzB,CAAC;QAEF,IAAI,gBAAgB,GAAG;YACrB,eAAe,EAAE,IAAI,CAAC,OAAO;YAC7B,cAAc,EAAE,EAAE;YAClB,YAAY,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,GAAG,GAAG,IAAI,CAAC,IAAI;YAChF,eAAe,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE;YAClE,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;SACzC,CAAC;QAEF,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAG,EAAE,IACrG,EAAC,OAAO,~~qEAAK~~,cAAc,~~GAAO~~,OAAO,KAAK,QAAQ,~~sBAAS~~,gBAAgB,~~CAAE~~,~~IAC9E~~,IAAI,CAAC,IAAI,GAAG,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,SAAS,GAAW,GAAG,IAAI,EAExE,+DAAO,IAAI,CAAC,IAAI,CAAQ,EAEvB,IAAI,CAAC,WAAW,IAAI,OAAO,KAAK,QAAQ,IACvC,WAAK,KAAK,EAAC,wBAAwB,IAChC,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAC,SAAS,GAAG,KAE1E,eAAS,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAC,SAAS,GAAG,CAC7E,CACG,IACJ,IAAI,CACA,EACT,IAAI,CAAC,WAAW,IAAI,OAAO,KAAK,GAAG,IAClC,~~8BAAY~~,gBAAgB,~~IAAE~~,KAAK,EAAC,wBAAwB,~~KACzD~~,IAAI,CAAC,IAAI,GAAG,eAAS,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAC,SAAS,GAAG,GAAG,eAAS,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAC,SAAS,GAAG,CAC/J,IACP,IAAI,EACR,8DAAa,CACR,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["PnSidenavLink"],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_small_up.js","src/components/navigation/pn-sidenav/pn-sidenav-link.scss?tag=pn-sidenav-link","src/components/navigation/pn-sidenav/pn-sidenav-link.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M11.293 8.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1-1.414 1.414L12 10.414l-5.293 5.293a1 1 0 0 1-1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_small_up = icon;\nexport const angleSmallUp = icon;\n","@import './pn-sidenav-common.scss';\n@import '../../../globals/main.scss';\n\npn-sidenav-link {\n display: flex;\n flex-wrap: wrap;\n}\n\n.pn-sidenav-link {\n font-weight: normal;\n position: relative;\n border: 0 none;\n display: flex;\n align-items: center;\n background-color: transparent;\n color: $blue700;\n font-size: 1em;\n padding: 1.1rem 1.5rem 1.1rem;\n overflow: hidden;\n text-decoration: none;\n cursor: pointer;\n flex-grow: 1;\n\n &::before {\n content: '';\n display: block;\n width: 0.4rem;\n border-top-right-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n transform: translateX(-0.4rem);\n background: $blue700;\n transition: transform linear 0.35s;\n }\n &:hover,\n &:focus,\n [current='true'] > & {\n background-color: $blue50;\n color: $blue700;\n outline: 0;\n box-shadow: none;\n &::before {\n transform: none;\n }\n }\n &:active {\n background-color: $gray50;\n color: $blue400;\n box-shadow: none;\n }\n\n > pn-icon {\n padding-right: 1em;\n }\n}\n\n.pn-sidenav-link-expand {\n margin-left: auto;\n border: 0;\n font-size: 1em;\n background: transparent;\n outline: 0;\n padding: 0 1em 0 0.5em;\n cursor: pointer;\n\n &:hover,\n &:focus,\n [current='true'] > & {\n background-color: $blue50;\n color: $blue700;\n outline: 0;\n box-shadow: none;\n &::before {\n transform: none;\n }\n }\n\n button > & {\n padding-right: 0;\n }\n pn-icon {\n width: 14px;\n }\n}\n","import { Component, Prop, h, State, Host, Element } from '@stencil/core';\nimport state from './pn-sidenav-store';\nimport { angle_small_down, angle_small_up } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-sidenav-link',\n styleUrl: 'pn-sidenav-link.scss',\n shadow: false,\n})\nexport class PnSidenavLink {\n @Element() hostElement: HTMLElement;\n\n /** Name /\n @Prop() name: string = '';\n /* Href /\n @Prop() href: string = '';\n /* Target /\n @Prop() target: string = null;\n /* Link id /\n @Prop() linkid: string = null;\n /* Icon /\n @Prop() icon: string = '';\n /* Currently selected /\n @Prop() current: boolean = false;\n\n /* Level ID that we control toggle on /\n @State() levelId: string = '';\n /* Menu item is open */\n @State() open: boolean = false;\n @State() hasChildren: boolean = false;\n\n componentWillLoad() {\n this.hasChildren = this.hostElement.querySelectorAll('pn-sidenav-level').length > 0;\n const safeLevelName = this.name.toLowerCase().replace(/\\W/gi, '_');\n if (this.hasChildren && this.name) {\n this.levelId = `sidenav-lvl${2}-${safeLevelName}`;\n }\n if (!this.linkid && this.name) {\n this.linkid = `sidenav-link-${safeLevelName}`;\n }\n }\n // onClick={this.setOpenMenuLevel.bind(this)}\n onExpandClick() {\n state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;\n }\n\n getTagName() {\n return this.href ? 'a' : 'button';\n }\n\n render() {\n const TagName = this.getTagName();\n const linkAttributes = {\n href: this.href,\n target: this.target,\n id: this.linkid,\n class: 'pn-sidenav-link',\n };\n\n let buttonAttributes = {\n 'aria-controls': this.levelId,\n 'aria-pressed': '',\n 'aria-label': (this.open ? state.i18n.close : state.i18n.open) + ' ' + this.name,\n 'aria-expanded': (state.openLevel + '' === this.levelId + '') + '',\n 'onClick': this.onExpandClick.bind(this),\n };\n\n return (\n <Host role=\"listitem\" name={this.name} href={this.href} linkid={this.linkid} current={this.current + ''}>\n <TagName {...linkAttributes} {...(TagName === 'button' && { ...buttonAttributes })}>\n {this.icon ? <pn-icon icon={this.icon} color=\"blue700\"></pn-icon> : null}\n\n <span>{this.name}</span>\n\n {this.hasChildren && TagName === 'button' ? (\n <div class=\"pn-sidenav-link-expand\">\n {this.open ? (\n <pn-icon class=\"first-level_icon\" icon={angle_small_up} color=\"blue700\" />\n ) : (\n <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />\n )}\n </div>\n ) : null}\n </TagName>\n {this.hasChildren && TagName === 'a' ? (\n <button {...buttonAttributes} class=\"pn-sidenav-link-expand\">\n {this.open ? <pn-icon class=\"first-level_icon\" icon={angle_small_up} color=\"blue700\" /> : <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />}\n </button>\n ) : null}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-sidenav-link.js","mappings":"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","names":["PnSidenavLink"],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_small_up.js","src/components/navigation/pn-sidenav/pn-sidenav-link.scss?tag=pn-sidenav-link","src/components/navigation/pn-sidenav/pn-sidenav-link.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M11.293 8.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1-1.414 1.414L12 10.414l-5.293 5.293a1 1 0 0 1-1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_small_up = icon;\nexport const angleSmallUp = icon;\n","@import './pn-sidenav-common.scss';\n@import '../../../globals/main.scss';\n\npn-sidenav-link {\n display: flex;\n flex-wrap: wrap;\n}\n\n.pn-sidenav-link {\n font-weight: normal;\n position: relative;\n border: 0 none;\n display: flex;\n align-items: center;\n background-color: transparent;\n color: $blue700;\n font-size: 1em;\n padding: 1.1rem 1.5rem 1.1rem;\n overflow: hidden;\n text-decoration: none;\n cursor: pointer;\n flex-grow: 1;\n\n &::before {\n content: '';\n display: block;\n width: 0.4rem;\n border-top-right-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n transform: translateX(-0.4rem);\n background: $blue700;\n transition: transform linear 0.35s;\n }\n &:hover,\n &:focus,\n [current='true'] > & {\n background-color: $blue50;\n color: $blue700;\n outline: 0;\n box-shadow: none;\n &::before {\n transform: none;\n }\n }\n &:active {\n background-color: $gray50;\n color: $blue400;\n box-shadow: none;\n }\n\n > pn-icon {\n padding-right: 1em;\n }\n}\n\n.pn-sidenav-link-expand {\n margin-left: auto;\n border: 0;\n font-size: 1em;\n background: transparent;\n outline: 0;\n padding: 0 1em 0 0.5em;\n cursor: pointer;\n\n &:hover,\n &:focus,\n [current='true'] > & {\n background-color: $blue50;\n color: $blue700;\n outline: 0;\n box-shadow: none;\n &::before {\n transform: none;\n }\n }\n\n button > & {\n padding-right: 0;\n }\n pn-icon {\n width: 14px;\n }\n}\n","import { Component, Prop, h, State, Host, Element } from '@stencil/core';\nimport state from './pn-sidenav-store';\nimport { angle_small_down, angle_small_up } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-sidenav-link',\n styleUrl: 'pn-sidenav-link.scss',\n shadow: false,\n})\nexport class PnSidenavLink {\n @Element() hostElement: HTMLElement;\n\n /** Name /\n @Prop() name: string = '';\n /* Href /\n @Prop() href: string = '';\n /* Target /\n @Prop() target: string = null;\n /* Link id /\n @Prop() linkid: string = null;\n /* Icon /\n @Prop() icon: string = '';\n /* Currently selected /\n @Prop() current: boolean = false;\n\n /* Level ID that we control toggle on /\n @State() levelId: string = '';\n /* Menu item is open */\n @State() open: boolean = false;\n @State() hasChildren: boolean = false;\n\n componentWillLoad() {\n this.hasChildren = this.hostElement.querySelectorAll('pn-sidenav-level').length > 0;\n const safeLevelName = this.name.toLowerCase().replace(/\\W/gi, '_');\n if (this.hasChildren && this.name) {\n this.levelId = `sidenav-lvl${2}-${safeLevelName}`;\n }\n if (!this.linkid && this.name) {\n this.linkid = `sidenav-link-${safeLevelName}`;\n }\n }\n // onClick={this.setOpenMenuLevel.bind(this)}\n onExpandClick() {\n state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;\n }\n\n getTagName() {\n return this.href ? 'a' : 'button';\n }\n\n render() {\n const TagName = this.getTagName();\n const linkAttributes = {\n href: this.href,\n target: this.target,\n id: this.linkid,\n class: 'pn-sidenav-link',\n };\n\n let buttonAttributes = {\n 'aria-controls': this.levelId,\n 'aria-pressed': '',\n 'aria-label': (this.open ? state.i18n.close : state.i18n.open) + ' ' + this.name,\n 'aria-expanded': (state.openLevel + '' === this.levelId + '') + '',\n 'onClick': this.onExpandClick.bind(this),\n };\n\n return (\n <Host role=\"listitem\" name={this.name} href={this.href} linkid={this.linkid} current={this.current + ''}>\n <TagName {...linkAttributes} {...(TagName === 'button' && { ...buttonAttributes })}>\n {this.icon ? <pn-icon icon={this.icon} color=\"blue700\"></pn-icon> : null}\n\n <span>{this.name}</span>\n\n {this.hasChildren && TagName === 'button' ? (\n <div class=\"pn-sidenav-link-expand\">\n {this.open ? (\n <pn-icon class=\"first-level_icon\" icon={angle_small_up} color=\"blue700\" />\n ) : (\n <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />\n )}\n </div>\n ) : null}\n </TagName>\n {this.hasChildren && TagName === 'a' ? (\n <button {...buttonAttributes} class=\"pn-sidenav-link-expand\">\n {this.open ? <pn-icon class=\"first-level_icon\" icon={angle_small_up} color=\"blue700\" /> : <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />}\n </button>\n ) : null}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-sidenav-togglebutton.js CHANGED Viewed

@@ -13,6 +13,7 @@ const PnSidenavTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PnSidenav
         this.label = '';
         this.i18n = { open: '', close: '', navLabel: '' };
     }
+    get hostElement() { return this; }
     onClick() {
         state.openMenu = !state.openMenu;
         const body = document.querySelector('body');
@@ -21,7 +22,6 @@ const PnSidenavTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PnSidenav
     render() {
         return (h(Host, { key: '2d1b3984218cb7b654d552ebecf569904b227ec6' }, h("pn-button", { key: '3b3875c13ec1de9a7f07acdc22060e2230fad0de', appearance: "light", icon: state.openMenu ? close_small : bars, "left-icon": true, small: true, onclick: this.onClick.bind(this), label: this.label }, h("slot", { key: '06a56aa25f5021b271ed8091020fe6cb8b33e905' }))));
     }
-    get hostElement() { return this; }
     static get style() { return PnSidenavTogglebuttonStyle0; }
 }, [4, "pn-sidenav-togglebutton", {
         "label": [1],

package/components/pn-sidenav-togglebutton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-sidenav-togglebutton.js","mappings":";;;;;AAAA,MAAM,wBAAwB,GAAG,qPAAqP,CAAC;AACvR,oCAAe,wBAAwB;;MCU1BA,uBAAqB;;;;qBAGR,EAAE;oBAEI,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;;IAEnE,OAAO;QACL,KAAK,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;QACjC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,YAAY,CAAC,8BAA8B,EAAE,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC,CAAC;KACxE;IACD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,kEAAW,UAAU,EAAC,OAAO,EAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,GAAG,WAAW,GAAG,IAAI,eAAa,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACxJ,8DAAQ,CACE,CACP,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["PnSidenavTogglebutton"],"sources":["src/components/navigation/pn-sidenav/pn-sidenav-togglebutton.scss?tag=pn-sidenav-togglebutton","src/components/navigation/pn-sidenav/pn-sidenav-togglebutton.tsx"],"sourcesContent":["@import './pn-sidenav-common.scss';\n@import '../../../globals/main.scss';\n\npn-sidenav-togglebutton {\n display: block;\n width: 100%;\n padding: 0.8rem 1.6rem;\n background: $blue25;\n @media screen and (min-width: $sidenav-media-abovemobilemode) {\n display: none;\n }\n}\n","import { Component, Prop, h, Host, Listen, Element, State } from '@stencil/core';\nimport { translations } from './translations';\nimport { SideMenui18n } from './types';\nimport state from './pn-sidenav-store';\nimport { close_small, bars } from \"pn-design-assets/pn-assets/icons\";\n\n@Component({\n tag: 'pn-sidenav-togglebutton',\n styleUrl: 'pn-sidenav-togglebutton.scss',\n shadow: false,\n})\nexport class PnSidenavTogglebutton {\n @Element() hostElement: HTMLElement;\n /** Specifies which language we want to show navigation in (sv,da,fi,no,en) */\n @Prop() label: string = '';\n\n @State() i18n: SideMenui18n = { open: '', close: '', navLabel: '' };\n\n onClick() {\n state.openMenu = !state.openMenu;\n const body = document.querySelector('body');\n body.setAttribute('data-siteheader-sidemenuopen', state.openMenu + '');\n }\n render() {\n return (\n <Host>\n <pn-button appearance=\"light\" icon={state.openMenu ? close_small : bars} left-icon={true} small={true} onclick={this.onClick.bind(this)} label={this.label}>\n <slot />\n </pn-button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-sidenav-togglebutton.js","mappings":";;;;;AAAA,MAAM,wBAAwB,GAAG,qPAAqP,CAAC;AACvR,oCAAe,wBAAwB;;MCU1BA,uBAAqB;;;;qBAGR,EAAE;oBAEI,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;;;IAEnE,OAAO;QACL,KAAK,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;QACjC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,YAAY,CAAC,8BAA8B,EAAE,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC,CAAC;KACxE;IACD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,kEAAW,UAAU,EAAC,OAAO,EAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,GAAG,WAAW,GAAG,IAAI,eAAa,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACxJ,8DAAQ,CACE,CACP,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnSidenavTogglebutton"],"sources":["src/components/navigation/pn-sidenav/pn-sidenav-togglebutton.scss?tag=pn-sidenav-togglebutton","src/components/navigation/pn-sidenav/pn-sidenav-togglebutton.tsx"],"sourcesContent":["@import './pn-sidenav-common.scss';\n@import '../../../globals/main.scss';\n\npn-sidenav-togglebutton {\n display: block;\n width: 100%;\n padding: 0.8rem 1.6rem;\n background: $blue25;\n @media screen and (min-width: $sidenav-media-abovemobilemode) {\n display: none;\n }\n}\n","import { Component, Prop, h, Host, Listen, Element, State } from '@stencil/core';\nimport { translations } from './translations';\nimport { SideMenui18n } from './types';\nimport state from './pn-sidenav-store';\nimport { close_small, bars } from \"pn-design-assets/pn-assets/icons\";\n\n@Component({\n tag: 'pn-sidenav-togglebutton',\n styleUrl: 'pn-sidenav-togglebutton.scss',\n shadow: false,\n})\nexport class PnSidenavTogglebutton {\n @Element() hostElement: HTMLElement;\n /** Specifies which language we want to show navigation in (sv,da,fi,no,en) */\n @Prop() label: string = '';\n\n @State() i18n: SideMenui18n = { open: '', close: '', navLabel: '' };\n\n onClick() {\n state.openMenu = !state.openMenu;\n const body = document.querySelector('body');\n body.setAttribute('data-siteheader-sidemenuopen', state.openMenu + '');\n }\n render() {\n return (\n <Host>\n <pn-button appearance=\"light\" icon={state.openMenu ? close_small : bars} left-icon={true} small={true} onclick={this.onClick.bind(this)} label={this.label}>\n <slot />\n </pn-button>\n </Host>\n );\n }\n}\n"],"version":3}