@postnord/pn-marketweb-components 2.1.8 → 2.1.9

package/components/data.js

@@ -0,0 +1,37 @@
+const weights = {
+  "letter": [
+    { name: "50g",   abbreviation: 'g', value: 50 },
+    { name: "100g",  abbreviation: 'g', value: 100 },
+    { name: "250g",  abbreviation: 'g', value: 250 },
+    { name: "500g",  abbreviation: 'g', value: 500 },
+    { name: "1kg",   abbreviation: 'kg', value: 1 },
+    { name: "2kg",   abbreviation: 'kg', value: 2 },
+  ],
+  "parcel": [
+    { name: "1kg",   abbreviation: 'kg', value: 1 },
+    { name: "2kg",   abbreviation: 'kg', value: 2 },
+    { name: "3kg",   abbreviation: 'kg', value: 3 },
+    { name: "4kg",   abbreviation: 'kg', value: 4 },
+    { name: "5kg",   abbreviation: 'kg', value: 5 },
+    { name: "6kg",   abbreviation: 'kg', value: 6 },
+    { name: "7Kg",   abbreviation: 'kg', value: 7 },
+    { name: "8kg",   abbreviation: 'kg', value: 8 },
+    { name: "9kg",   abbreviation: 'kg', value: 9 },
+    { name: "10kg",  abbreviation: 'kg', value: 10 },
+    { name: "11kg",  abbreviation: 'kg', value: 11 },
+    { name: "12kg",  abbreviation: 'kg', value: 12 },
+    { name: "13kg",  abbreviation: 'kg', value: 13 },
+    { name: "14kg",  abbreviation: 'kg', value: 14 },
+    { name: "15kg",  abbreviation: 'kg', value: 15 },
+    { name: "16kg",  abbreviation: 'kg', value: 16 },
+    { name: "17kg",  abbreviation: 'kg', value: 17 },
+    { name: "18kg",  abbreviation: 'kg', value: 18 },
+    { name: "20kg",  abbreviation: 'kg', value: 20 },    
+  ]
+};
+
+const sendDirectUrl = "https://portal.postnord.com/skickadirekt/";
+
+const stampShopUrl = "https://shop.postnord.se/ebutik/default.aspx";
+
+export { stampShopUrl as a, sendDirectUrl as s, weights as w };

package/components/index.d.ts

@@ -0,0 +1,100 @@
+/* PnMarketWebComponents custom elements */
+export { PnBonusProgressbar as PnBonusProgressbar } from '../types/components/input/pn-bonus-progressbar/pn-bonus-progressbar';
+export { PnBonusProgressbarLevel as PnBonusProgressbarLevel } from '../types/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level';
+export { PnBreakpoints as PnBreakpoints } from '../types/components/utilities/pn-breakpoints/pn-breakpoints';
+export { PnChart as PnChart } from '../types/components/charts/pn-chart/pn-chart';
+export { PnChartsCard as PnChartsCard } from '../types/components/charts/pn-charts-card/pn-charts-card';
+export { PnChoiceButton as PnChoiceButton } from '../types/components/input/pn-choice-button/pn-choice-button';
+export { PnCustomernumberSelector as PnCustomernumberSelector } from '../types/components/profile/pn-customernumber-selector/pn-customernumber-selector';
+export { PnProfileSelectorOption as PnCustomernumberSelectorOption } from '../types/components/profile/pn-customernumber-selector/pn-customernumber-selector-option';
+export { PnFilterCheckbox as PnFilterCheckbox } from '../types/components/input/pn-filter-checkbox/pn-filter-checkbox';
+export { PnfindPrice as PnFindPrice } from '../types/components/widgets/pn-find-price/pn-find-price';
+export { PnfindPriceResult as PnFindPriceResult } from '../types/components/widgets/pn-find-price/pn-find-price-result';
+export { PnfindServiceAndPrice as PnFindServiceAndPrice } from '../types/components/widgets/pn-find-service-and-price/pn-find-service-and-price';
+export { PnfindServiceAndPriceResult as PnFindServiceAndPriceResult } from '../types/components/widgets/pn-find-service-and-price/pn-find-service-and-price-result';
+export { PnlanguageSelector as PnLanguageSelector } from '../types/components/navigation/pn-language-selector/pn-language-selector';
+export { PnlanguageSelectorOption as PnLanguageSelectorOption } from '../types/components/navigation/pn-language-selector/pn-language-selector-option';
+export { PnLineShape as PnLineShape } from '../types/components/cards/pn-quote-card/pn-line-shape/pn-line-shape';
+export { PnMainnav as PnMainnav } from '../types/components/navigation/pn-mainnav/pn-mainnav';
+export { PnMainnavLevel as PnMainnavLevel } from '../types/components/navigation/pn-mainnav/pn-mainnav-level';
+export { PnMainnavLink as PnMainnavLink } from '../types/components/navigation/pn-mainnav/pn-mainnav-link';
+export { PnMainnavList as PnMainnavList } from '../types/components/navigation/pn-mainnav/pn-mainnav-list';
+export { PnMarketwebInput as PnMarketwebInput } from '../types/components/input/pn-marketweb-input/pn-marketweb-input';
+export { PnMarketwebSearch as PnMarketwebSearch } from '../types/components/input/pn-marketweb-search/pn-marketweb-search';
+export { PnMarketwebSiteheader as PnMarketwebSitefooter } from '../types/components/layout-components/pn-marketweb-sitefooter/pn-marketweb-sitefooter';
+export { PnMarketwebSiteheader as PnMarketwebSiteheader } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader';
+export { PnMarketwebSiteheaderLogin as PnMarketwebSiteheaderLogin } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login';
+export { PnMarketwebSiteheaderLoginButton as PnMarketwebSiteheaderLoginButton } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-button';
+export { PnMarketwebSiteheaderLoginLinklist as PnMarketwebSiteheaderLoginLinklist } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-linklist';
+export { PnMarketwebSiteheaderLoginLinks as PnMarketwebSiteheaderLoginLinks } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-links';
+export { PnMarketwebSiteheaderLoginMypageButton as PnMarketwebSiteheaderLoginMypageButton } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-mypage-button';
+export { PnMarketwebSiteheaderLoginProfileselection as PnMarketwebSiteheaderLoginProfileselection } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-profileselection';
+export { PnMarketwebSiteheaderSearch as PnMarketwebSiteheaderSearch } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-search';
+export { PnMarketwebSiteheaderUnifiedLogin as PnMarketwebSiteheaderUnifiedLogin } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-unified-login';
+export { PnSpotlight as PnParcelTracker } from '../types/components/cta/pn-parcel-tracker/pn-parcel-tracker';
+export { PnPexPricefinder as PnPexPricefinder } from '../types/components/widgets/pn-pex-pricefinder/pn-pex-pricefinder';
+export { PnProductCard as PnProductCard } from '../types/components/widgets/pn-product-card/pn-product-card';
+export { PnProductCardInfo as PnProductCardInfo } from '../types/components/widgets/pn-product-card/pn-product-card-info';
+export { PnProductCardPrice as PnProductCardPrice } from '../types/components/widgets/pn-product-card/pn-product-card-price';
+export { PnFindProductPricelist as PnProductPricelist } from '../types/components/widgets/pn-product-pricelist/pn-product-pricelist';
+export { PnFindProductPricelistResult as PnProductPricelistResult } from '../types/components/widgets/pn-product-pricelist/pn-product-pricelist-result';
+export { PnProductTile as PnProductTile } from '../types/components/widgets/pn-product-tile/pn-product-tile';
+export { PnProductTileInfo as PnProductTileInfo } from '../types/components/widgets/pn-product-tile/pn-product-tile-info';
+export { PnProductTilePrice as PnProductTilePrice } from '../types/components/widgets/pn-product-tile/pn-product-tile-price';
+export { PnProfileModal as PnProfileModal } from '../types/components/profile/pn-profile-modal/pn-profile-modal';
+export { PnProfileModalCustomernumber as PnProfileModalCustomernumber } from '../types/components/profile/pn-profile-modal/pn-profile-modal-customernumber';
+export { PnProfileModalProfile as PnProfileModalProfile } from '../types/components/profile/pn-profile-modal/pn-profile-modal-profile';
+export { PnProfileModalType as PnProfileModalType } from '../types/components/profile/pn-profile-modal/pn-profile-modal-type';
+export { PnProfileSelector as PnProfileSelector } from '../types/components/profile/pn-profile-selector/pn-profile-selector';
+export { PnProfileSelectorOption as PnProfileSelectorOption } from '../types/components/profile/pn-profile-selector/pn-profile-selector-option';
+export { PnProxioFindPrice as PnProxioFindprice } from '../types/components/widgets/pn-proxio-findprice/pn-proxio-findprice';
+export { PnProxioFindPriceResult as PnProxioFindpriceResult } from '../types/components/widgets/pn-proxio-findprice/pn-proxio-findprice-result';
+export { PnProxioPricegroup as PnProxioPricegroup } from '../types/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup';
+export { PnProxioProductcard as PnProxioProductcard } from '../types/components/widgets/pn-proxio-productcard/pn-proxio-productcard';
+export { PnProxioProductcardDescription as PnProxioProductcardDescription } from '../types/components/widgets/pn-proxio-productcard/pn-proxio-productcard-description';
+export { PnProxioProductcardInformation as PnProxioProductcardInformation } from '../types/components/widgets/pn-proxio-productcard/pn-proxio-productcard-information';
+export { PnProxioProductcardPricelink as PnProxioProductcardPricelink } from '../types/components/widgets/pn-proxio-productcard/pn-proxio-productcard-pricelink';
+export { PnQuickCta as PnQuickCta } from '../types/components/cta/pn-quick-cta/pn-quick-cta';
+export { PnQuoteCard as PnQuoteCard } from '../types/components/cards/pn-quote-card/pn-quote-card';
+export { PnSidenav as PnSidenav } from '../types/components/navigation/pn-sidenav/pn-sidenav';
+export { PnSidenavLevel as PnSidenavLevel } from '../types/components/navigation/pn-sidenav/pn-sidenav-level';
+export { PnSidenavLink as PnSidenavLink } from '../types/components/navigation/pn-sidenav/pn-sidenav-link';
+export { PnSidenavTogglebutton as PnSidenavTogglebutton } from '../types/components/navigation/pn-sidenav/pn-sidenav-togglebutton';
+export { PnSiteFooter as PnSiteFooter } from '../types/components/navigation/pn-site-footer/pn-site-footer';
+export { PnSiteFooterCol as PnSiteFooterCol } from '../types/components/navigation/pn-site-footer/pn-site-footer-col';
+export { PnSiteSelector as PnSiteSelector } from '../types/components/navigation/pn-site-selector/pn-site-selector';
+export { PnSiteSelectorItem as PnSiteSelectorItem } from '../types/components/navigation/pn-site-selector/pn-site-selector-item';
+export { PnSpotlight as PnSpotlight } from '../types/components/cta/pn-spotlight/pn-spotlight';
+export { PnStatsInfo as PnStatsInfo } from '../types/components/data-visualization/pn-stats-info/pn-stats-info';
+export { PnStatsInfoData as PnStatsInfoData } from '../types/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data';
+export { PnTeaserCard as PnTeaserCard } from '../types/components/cards/pn-teaser-card/pn-teaser-card';
+export { PnTiletag as PnTitletag } from '../types/components/minor/pn-titletag/pn-titletag';
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types';

package/components/index.js

@@ -0,0 +1,71 @@
+export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { PnBonusProgressbar, defineCustomElement as defineCustomElementPnBonusProgressbar } from './pn-bonus-progressbar.js';
+export { PnBonusProgressbarLevel, defineCustomElement as defineCustomElementPnBonusProgressbarLevel } from './pn-bonus-progressbar-level.js';
+export { PnBreakpoints, defineCustomElement as defineCustomElementPnBreakpoints } from './pn-breakpoints.js';
+export { PnChart, defineCustomElement as defineCustomElementPnChart } from './pn-chart.js';
+export { PnChartsCard, defineCustomElement as defineCustomElementPnChartsCard } from './pn-charts-card.js';
+export { PnChoiceButton, defineCustomElement as defineCustomElementPnChoiceButton } from './pn-choice-button.js';
+export { PnCustomernumberSelector, defineCustomElement as defineCustomElementPnCustomernumberSelector } from './pn-customernumber-selector.js';
+export { PnCustomernumberSelectorOption, defineCustomElement as defineCustomElementPnCustomernumberSelectorOption } from './pn-customernumber-selector-option.js';
+export { PnFilterCheckbox, defineCustomElement as defineCustomElementPnFilterCheckbox } from './pn-filter-checkbox.js';
+export { PnFindPrice, defineCustomElement as defineCustomElementPnFindPrice } from './pn-find-price.js';
+export { PnFindPriceResult, defineCustomElement as defineCustomElementPnFindPriceResult } from './pn-find-price-result.js';
+export { PnFindServiceAndPrice, defineCustomElement as defineCustomElementPnFindServiceAndPrice } from './pn-find-service-and-price.js';
+export { PnFindServiceAndPriceResult, defineCustomElement as defineCustomElementPnFindServiceAndPriceResult } from './pn-find-service-and-price-result.js';
+export { PnLanguageSelector, defineCustomElement as defineCustomElementPnLanguageSelector } from './pn-language-selector.js';
+export { PnLanguageSelectorOption, defineCustomElement as defineCustomElementPnLanguageSelectorOption } from './pn-language-selector-option.js';
+export { PnLineShape, defineCustomElement as defineCustomElementPnLineShape } from './pn-line-shape.js';
+export { PnMainnav, defineCustomElement as defineCustomElementPnMainnav } from './pn-mainnav.js';
+export { PnMainnavLevel, defineCustomElement as defineCustomElementPnMainnavLevel } from './pn-mainnav-level.js';
+export { PnMainnavLink, defineCustomElement as defineCustomElementPnMainnavLink } from './pn-mainnav-link.js';
+export { PnMainnavList, defineCustomElement as defineCustomElementPnMainnavList } from './pn-mainnav-list.js';
+export { PnMarketwebInput, defineCustomElement as defineCustomElementPnMarketwebInput } from './pn-marketweb-input.js';
+export { PnMarketwebSearch, defineCustomElement as defineCustomElementPnMarketwebSearch } from './pn-marketweb-search.js';
+export { PnMarketwebSitefooter, defineCustomElement as defineCustomElementPnMarketwebSitefooter } from './pn-marketweb-sitefooter.js';
+export { PnMarketwebSiteheader, defineCustomElement as defineCustomElementPnMarketwebSiteheader } from './pn-marketweb-siteheader.js';
+export { PnMarketwebSiteheaderLogin, defineCustomElement as defineCustomElementPnMarketwebSiteheaderLogin } from './pn-marketweb-siteheader-login.js';
+export { PnMarketwebSiteheaderLoginButton, defineCustomElement as defineCustomElementPnMarketwebSiteheaderLoginButton } from './pn-marketweb-siteheader-login-button.js';
+export { PnMarketwebSiteheaderLoginLinklist, defineCustomElement as defineCustomElementPnMarketwebSiteheaderLoginLinklist } from './pn-marketweb-siteheader-login-linklist.js';
+export { PnMarketwebSiteheaderLoginLinks, defineCustomElement as defineCustomElementPnMarketwebSiteheaderLoginLinks } from './pn-marketweb-siteheader-login-links.js';
+export { PnMarketwebSiteheaderLoginMypageButton, defineCustomElement as defineCustomElementPnMarketwebSiteheaderLoginMypageButton } from './pn-marketweb-siteheader-login-mypage-button.js';
+export { PnMarketwebSiteheaderLoginProfileselection, defineCustomElement as defineCustomElementPnMarketwebSiteheaderLoginProfileselection } from './pn-marketweb-siteheader-login-profileselection.js';
+export { PnMarketwebSiteheaderSearch, defineCustomElement as defineCustomElementPnMarketwebSiteheaderSearch } from './pn-marketweb-siteheader-search.js';
+export { PnMarketwebSiteheaderUnifiedLogin, defineCustomElement as defineCustomElementPnMarketwebSiteheaderUnifiedLogin } from './pn-marketweb-siteheader-unified-login.js';
+export { PnParcelTracker, defineCustomElement as defineCustomElementPnParcelTracker } from './pn-parcel-tracker.js';
+export { PnPexPricefinder, defineCustomElement as defineCustomElementPnPexPricefinder } from './pn-pex-pricefinder.js';
+export { PnProductCard, defineCustomElement as defineCustomElementPnProductCard } from './pn-product-card.js';
+export { PnProductCardInfo, defineCustomElement as defineCustomElementPnProductCardInfo } from './pn-product-card-info.js';
+export { PnProductCardPrice, defineCustomElement as defineCustomElementPnProductCardPrice } from './pn-product-card-price.js';
+export { PnProductPricelist, defineCustomElement as defineCustomElementPnProductPricelist } from './pn-product-pricelist.js';
+export { PnProductPricelistResult, defineCustomElement as defineCustomElementPnProductPricelistResult } from './pn-product-pricelist-result.js';
+export { PnProductTile, defineCustomElement as defineCustomElementPnProductTile } from './pn-product-tile.js';
+export { PnProductTileInfo, defineCustomElement as defineCustomElementPnProductTileInfo } from './pn-product-tile-info.js';
+export { PnProductTilePrice, defineCustomElement as defineCustomElementPnProductTilePrice } from './pn-product-tile-price.js';
+export { PnProfileModal, defineCustomElement as defineCustomElementPnProfileModal } from './pn-profile-modal.js';
+export { PnProfileModalCustomernumber, defineCustomElement as defineCustomElementPnProfileModalCustomernumber } from './pn-profile-modal-customernumber.js';
+export { PnProfileModalProfile, defineCustomElement as defineCustomElementPnProfileModalProfile } from './pn-profile-modal-profile.js';
+export { PnProfileModalType, defineCustomElement as defineCustomElementPnProfileModalType } from './pn-profile-modal-type.js';
+export { PnProfileSelector, defineCustomElement as defineCustomElementPnProfileSelector } from './pn-profile-selector.js';
+export { PnProfileSelectorOption, defineCustomElement as defineCustomElementPnProfileSelectorOption } from './pn-profile-selector-option.js';
+export { PnProxioFindprice, defineCustomElement as defineCustomElementPnProxioFindprice } from './pn-proxio-findprice.js';
+export { PnProxioFindpriceResult, defineCustomElement as defineCustomElementPnProxioFindpriceResult } from './pn-proxio-findprice-result.js';
+export { PnProxioPricegroup, defineCustomElement as defineCustomElementPnProxioPricegroup } from './pn-proxio-pricegroup.js';
+export { PnProxioProductcard, defineCustomElement as defineCustomElementPnProxioProductcard } from './pn-proxio-productcard.js';
+export { PnProxioProductcardDescription, defineCustomElement as defineCustomElementPnProxioProductcardDescription } from './pn-proxio-productcard-description.js';
+export { PnProxioProductcardInformation, defineCustomElement as defineCustomElementPnProxioProductcardInformation } from './pn-proxio-productcard-information.js';
+export { PnProxioProductcardPricelink, defineCustomElement as defineCustomElementPnProxioProductcardPricelink } from './pn-proxio-productcard-pricelink.js';
+export { PnQuickCta, defineCustomElement as defineCustomElementPnQuickCta } from './pn-quick-cta.js';
+export { PnQuoteCard, defineCustomElement as defineCustomElementPnQuoteCard } from './pn-quote-card.js';
+export { PnSidenav, defineCustomElement as defineCustomElementPnSidenav } from './pn-sidenav.js';
+export { PnSidenavLevel, defineCustomElement as defineCustomElementPnSidenavLevel } from './pn-sidenav-level.js';
+export { PnSidenavLink, defineCustomElement as defineCustomElementPnSidenavLink } from './pn-sidenav-link.js';
+export { PnSidenavTogglebutton, defineCustomElement as defineCustomElementPnSidenavTogglebutton } from './pn-sidenav-togglebutton.js';
+export { PnSiteFooter, defineCustomElement as defineCustomElementPnSiteFooter } from './pn-site-footer.js';
+export { PnSiteFooterCol, defineCustomElement as defineCustomElementPnSiteFooterCol } from './pn-site-footer-col.js';
+export { PnSiteSelector, defineCustomElement as defineCustomElementPnSiteSelector } from './pn-site-selector.js';
+export { PnSiteSelectorItem, defineCustomElement as defineCustomElementPnSiteSelectorItem } from './pn-site-selector-item.js';
+export { PnSpotlight, defineCustomElement as defineCustomElementPnSpotlight } from './pn-spotlight.js';
+export { PnStatsInfo, defineCustomElement as defineCustomElementPnStatsInfo } from './pn-stats-info.js';
+export { PnStatsInfoData, defineCustomElement as defineCustomElementPnStatsInfoData } from './pn-stats-info-data.js';
+export { PnTeaserCard, defineCustomElement as defineCustomElementPnTeaserCard } from './pn-teaser-card.js';
+export { PnTitletag, defineCustomElement as defineCustomElementPnTitletag } from './pn-titletag.js';

package/components/index2.js

@@ -0,0 +1,187 @@
+import { getRenderingRef, forceUpdate } from '@stencil/core/internal/client';
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(defaultState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        const unReset = on('reset', () => cb(defaultState[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+export { createStore as c };

package/components/pn-bonus-progressbar-level.d.ts

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

package/components/pn-bonus-progressbar-level.js

@@ -0,0 +1,65 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnBonusProgressbarLevelCss = "pn-bonus-progressbar-level{position:absolute;width:0.1rem;left:50%}pn-bonus-progressbar-level::after{content:\"\";width:0.1rem;position:absolute;left:0;border-left:1px dashed #9B1C2E;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:3rem}pn-bonus-progressbar-level:not([current]):nth-child(odd)::after{height:7rem;margin-top:0.6rem}.progressbar-level-percentage{font-size:0.75em;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);top:-3.2rem}[current]>.progressbar-level-percentage{display:none}pn-bonus-progressbar-level:not([current]):nth-child(odd) .progressbar-level-percentage{top:-4.8rem}.progressbar-level-value{font-size:0.75em;white-space:nowrap;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);top:2.3rem}[current]>.progressbar-level-value{top:-3.2rem}pn-bonus-progressbar-level:not([current]):nth-child(odd) .progressbar-level-value{top:4.2rem}";
+
+const PnBonusProgressbarLevel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.current = false;
+    this.value = 0;
+    this.bonuspercentage = "";
+    this.visualpercentage = 0;
+    this.percentage = 0;
+    this.max = 0;
+    this.min = 0;
+    this.currency = "";
+  }
+  componentWillLoad() {
+    this.max = parseInt(this.hostElement.parentElement.parentElement.getAttribute("max"), 10);
+    this.min = parseInt(this.hostElement.parentElement.parentElement.getAttribute("min"), 10);
+    this.currency = this.hostElement.parentElement.parentElement.getAttribute("currency");
+    this.percentage = (this.value / this.max) * 100;
+    if (this.visualpercentage > 0) {
+      // Visual percentage has been overriden
+      return;
+    }
+    this.visualpercentage = (this.value === 0) ? 0 : (((this.value - this.min) / (this.max - this.min)) * 100);
+  }
+  formatValue() {
+    return `${this.value.toLocaleString('sv-SE', { maximumFractionDigits: 0 })} ${this.currency}`;
+  }
+  render() {
+    return (h(Host, { style: { 'left': `${this.visualpercentage}%` } }, h("div", { class: "progressbar-level-percentage" }, this.bonuspercentage), h("div", { class: "progressbar-level-value" }, this.formatValue())));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnBonusProgressbarLevelCss; }
+}, [0, "pn-bonus-progressbar-level", {
+    "current": [516],
+    "value": [1538],
+    "bonuspercentage": [1537],
+    "visualpercentage": [1538],
+    "percentage": [32],
+    "max": [32],
+    "min": [32],
+    "currency": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-bonus-progressbar-level"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-bonus-progressbar-level":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnBonusProgressbarLevel$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnBonusProgressbarLevel = PnBonusProgressbarLevel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnBonusProgressbarLevel, defineCustomElement };

package/components/pn-bonus-progressbar.d.ts

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

package/components/pn-bonus-progressbar.js

@@ -0,0 +1,128 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnBonusProgressbarCss = "pn-bonus-progressbar{width:100%}.bonusprogressbar-top{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:1.6rem}.bonusprogressbar-top-icon{border-radius:100%;height:5rem;width:5rem;padding:1rem;display:-ms-inline-flexbox;display:inline-flex;margin-right:1em;margin-left:0.5em;background-color:#E0F8FF}[theme=red] .bonusprogressbar-top-icon{background-color:#FBC2C1}.bonusprogressbar-top-icon pn-icon svg{width:100%;height:100%}.bonusprogressbar-sumtext{margin-top:0.4rem;font-size:1.3rem;color:#5E554A}.bonusprogressbar-top-percentage{margin-left:0.8rem;padding:0}.bonusprogressbar-wrapper{position:relative;display:-ms-flexbox;display:flex;min-height:5em;-ms-flex-align:center;align-items:center}.bonusprogressbar-currentlevel{position:absolute}.bonusprogressbar-progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.7rem;border:0.1rem solid #00A0D6;border-radius:1.7rem;padding:0;margin:0;overflow:hidden}[theme=red] .bonusprogressbar-progress[value]{border-color:#F06365}.bonusprogressbar-progress[value]::-webkit-progress-bar{border:0;border-radius:1.7rem;margin:0;padding:0;background:#E0F8FF}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-bar{background:#FDEFEE}.bonusprogressbar-progress[value]::-webkit-progress-value{margin:0;padding:0;border-radius:1.7rem;background:#00A0D6}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-value{background:#F06365}";
+
+const PnBonusProgressbar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.icon = null;
+    this.heading = "";
+    this.sumtext = null;
+    this.theme = "blue";
+    this.bonuspercentage = "0%";
+    this.currency = "kr";
+    this.value = 0;
+    this.min = 0;
+    this.max = 0;
+    this.valuepercentage = 0;
+    this.progresspercentage = 0;
+    this.levelValues = [];
+    this.currentLevelAdjustedValue = 0;
+  }
+  componentWillLoad() {
+    this.setInitialValues();
+    this.setValuePercentage();
+  }
+  setInitialValues() {
+    const levelElements = Array.from(this.hostElement.querySelectorAll('pn-bonus-progressbar-level:not([current])'));
+    this.currentLevelAdjustedValue = this.value;
+    this.levelValues = levelElements.map((elm) => {
+      return parseInt(elm.getAttribute("value"), 10);
+    });
+    if (!this.max) {
+      if (this.levelValues && this.levelValues.length > 0) {
+        const newMax = this.levelValues.slice(-1)[0];
+        let modifier = 1.05;
+        if (this.value > newMax) {
+          modifier = 1.2;
+        }
+        this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to
+      }
+    }
+    // if (!this.min) {
+    //   const suggestedMin = Math.floor(this.value * 0.9);
+    //   if (suggestedMin > 0) {
+    //     this.min = suggestedMin;
+    //   }
+    // }
+    if (this.value > this.max) {
+      this.currentLevelAdjustedValue = 100;
+    }
+  }
+  setValuePercentage() {
+    this.valuepercentage = (this.value / (this.max)) * 100;
+    this.progresspercentage = ((this.value - this.min) / (this.max - this.min)) * 100;
+    if (this.progresspercentage < 0) {
+      if (this.levelValues && this.levelValues.length && this.levelValues[0] < this.value) {
+        this.min = Math.floor(this.levelValues[0] * .95);
+      }
+      else {
+        this.min = Math.floor(this.value * .95);
+      }
+    }
+    if (this.progresspercentage > 100) {
+      this.progresspercentage = 100;
+      const newMax = this.levelValues.slice(-1)[0];
+      let modifier = 1.05;
+      if (this.value > newMax) {
+        modifier = 1.2;
+      }
+      this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to
+      // this.max = Math.floor(newMax * 1.20);
+    }
+  }
+  iconColor() {
+    switch (this.theme) {
+      case 'red':
+        return 'coral700';
+      case 'blue':
+      default:
+        return 'blue700';
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "bonusprogressbar-top" }, this.icon ? (h("div", { class: "bonusprogressbar-top-icon" }, h("pn-icon", { symbol: this.icon, small: "false", color: this.iconColor() }))) : {}, h("div", { class: "bonusprogressbar-top-heading" }, h("h4", { class: "bonusprogressbar-top-headline" }, this.heading, " ", h("strong", { class: "bonusprogressbar-top-percentage" }, this.bonuspercentage)), this.sumtext ? (h("div", { class: "bonusprogressbar-sumtext" }, this.sumtext)) : null)), h("div", { class: "bonusprogressbar-wrapper" }, h("progress", { class: "bonusprogressbar-progress", value: this.progresspercentage, max: "100" }), h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "currentLevelAdjustedValue": ["setValuePercentage"],
+    "value": ["setValuePercentage"],
+    "min": ["setValuePercentage"],
+    "max": ["setValuePercentage"]
+  }; }
+  static get style() { return pnBonusProgressbarCss; }
+}, [4, "pn-bonus-progressbar", {
+    "icon": [1],
+    "heading": [1],
+    "sumtext": [513],
+    "theme": [513],
+    "bonuspercentage": [1],
+    "currency": [513],
+    "value": [1538],
+    "min": [1538],
+    "max": [1538],
+    "valuepercentage": [32],
+    "progresspercentage": [32],
+    "levelValues": [32],
+    "currentLevelAdjustedValue": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-bonus-progressbar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-bonus-progressbar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnBonusProgressbar$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnBonusProgressbar = PnBonusProgressbar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnBonusProgressbar, defineCustomElement };

package/components/pn-breakpoints.d.ts

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