@postnord/pn-marketweb-components 2.3.5 → 2.3.6

package/collection/components/animation/pn-animated-tile/pn-animated-tile.stories.js

@@ -0,0 +1,93 @@
+import readme from './readme.md';
+
+export default {
+  title: 'Animation/Flip',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+  },
+};
+
+const FlipDefault = args => {
+  return ` 
+  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
+    <div style="width:33%">
+      <pn-animated-tile data-cat-theme="private" data-cat-firstpage-only="true">
+        <div slot="side-a">
+          <div style="width:100%;height:100%; display: flex;justify-content: flex-end;align-items: center;">
+            <h2 style="color:#fff; font-size:7.2rem; text-align:right;">No <span style="display:block;color:#00A0D6; border-radius:0.4rem; background-color:#fff; padding: 0 0.8rem">side-b</span></h2>       
+          </div>
+        </div>
+        <div slot="side-b"></div>
+      </pn-animated-tile>
+    </div>
+
+    <div style="width:33%">
+      <pn-animated-tile data-cat-theme="business" data-cat-firstpage-only="false">
+      <div slot="side-a">
+        <div style="width:100%;height:100%; display: flex;justify-content: center;align-items: center;">
+          <h2 style="color:#FFF; font-size:7.2rem; text-align:right;">Track <span style="color:#F06365; border-radius:0.4rem; background-color:#005D92; padding: 0 0.8rem">shipments</span></h2>       
+        </div>
+      </div>
+      <div slot="side-b">
+      <div style="display:flex; flex-direction:column; justify-content:center;">                  
+        <h2 style="color:#FFF; padding:0 0.8rem">Heading</h2>
+        <p style="color:#FFF; padding:0 0.8rem">
+        Nam interdum urna ipsum, a volutpat tortor iaculis non. 
+        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+        Integer sed tortor a justo fermentum sodales. Cras sed posuere lorem, sit amet porttitor neque. 
+        Nunc tincidunt, tellus eget dapibus dapibus, ligula lorem imperdiet nunc, non aliquet dolor metus id justo. 
+        Vivamus tempus lacus eu mi convallis, et auctor sapien bibendum. 
+        Donec non lacus mi. Nulla feugiat, sem quis accumsan aliquet, purus purus tincidunt nisi, a iaculis dolor neque non turpis. In quis nisi turpis. 
+        Sed sit amet volutpat risus. Praesent arcu dolor, auctor a dictum in, egestas vel augue. Nunc molestie pulvinar mi a convallis. 
+        Vivamus porta non ex vitae mollis.   
+        
+        Nam interdum urna ipsum, a volutpat tortor iaculis non. 
+        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+        Integer sed tortor a justo fermentum sodales. Cras sed posuere lorem, sit amet porttitor neque. 
+        Nunc tincidunt, tellus eget dapibus dapibus, ligula lorem imperdiet nunc, non aliquet dolor metus id justo. 
+        Vivamus tempus lacus eu mi convallis, et auctor sapien bibendum. 
+        Donec non lacus mi. Nulla feugiat, sem quis accumsan aliquet, purus purus tincidunt nisi, a iaculis dolor neque non turpis. In quis nisi turpis. 
+        Sed sit amet volutpat risus. Praesent arcu dolor, auctor a dictum in, egestas vel augue. Nunc molestie pulvinar mi a convallis. 
+        Vivamus porta non ex vitae mollis. 
+
+        Nam interdum urna ipsum, a volutpat tortor iaculis non. 
+        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+        Integer sed tortor a justo fermentum sodales. Cras sed posuere lorem, sit amet porttitor neque. 
+        Nunc tincidunt, tellus eget dapibus dapibus, ligula lorem imperdiet nunc, non aliquet dolor metus id justo. 
+        Vivamus tempus lacus eu mi convallis, et auctor sapien bibendum. 
+        Donec non lacus mi. Nulla feugiat, sem quis accumsan aliquet, purus purus tincidunt nisi, a iaculis dolor neque non turpis. In quis nisi turpis. 
+        Sed sit amet volutpat risus. Praesent arcu dolor, auctor a dictum in, egestas vel augue. Nunc molestie pulvinar mi a convallis. 
+        Vivamus porta non ex vitae mollis. 
+        </p>
+      </div>
+      </div>
+    </pn-animated-tile>
+    </div>
+
+    <div style="width:33%">
+      <pn-animated-tile data-cat-theme="hybrid">
+        <div slot="side-a"></div>
+        <div slot="side-b">
+          <div style="display:flex; flex-direction:column; justify-content:center; height:100%;">                  
+            <h2 style="color:#2D2013; padding:0 0.8rem">Heading</h2>
+            <p style="color:#2D2013; padding:0 0.8rem">
+            Nam interdum urna ipsum, a volutpat tortor iaculis non. 
+            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+            Integer sed tortor a justo fermentum sodales. Cras sed posuere lorem, sit amet porttitor neque. 
+            Nunc tincidunt, tellus eget dapibus dapibus, ligula lorem imperdiet nunc, non aliquet dolor metus id justo. 
+            Vivamus tempus lacus eu mi convallis, et auctor sapien bibendum. 
+            Donec non lacus mi. Nulla feugiat, sem quis accumsan aliquet, purus purus tincidunt nisi, a iaculis dolor neque non turpis. In quis nisi turpis. 
+            Sed sit amet volutpat risus. Praesent arcu dolor, auctor a dictum in, egestas vel augue. Nunc molestie pulvinar mi a convallis. 
+            Vivamus porta non ex vitae mollis.    
+            </p>
+          </div>
+        </div>
+      </pn-animated-tile>
+    </div>
+  </div>
+ `;
+};
+
+export const Flip = FlipDefault.bind({});
+Flip.args = {};

package/collection/components/animation/{pn-scroll.stories.js → pn-scroll/pn-scroll.stories.js}

@@ -1,7 +1,7 @@
 import readme from './readme.md';
 
 export default {
-  title: 'Scroller/Fade',
+  title: 'Animation/Scroll',
   parameters: {
     notes: readme,
     layout: 'fullscreen',

package/collection/components/layout-components/pn-multi-input/multi-input.stories.js

@@ -0,0 +1,22 @@
+import readme from "./readme.md";
+
+export default {
+  title: "Input/Multi-input",
+  parameters: {
+    notes: readme
+  },
+  argTypes: {
+    testprop: ""
+  }
+};
+
+const Template = ({ ...args }) => {
+  return `
+    <pn-multi-input testprop="${args.testprop}"></pn-multi-input>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  testprop : "Test prop content"
+};

package/collection/components/layout-components/pn-multi-input/pn-multi-input.js

@@ -0,0 +1,31 @@
+import { Component, Element, Host, h } from "@stencil/core";
+export class PnmultiInput {
+  constructor() {
+    this.inputElm = null;
+  }
+  async componentDidLoad() {
+    this.init();
+  }
+  init() {
+    this.inputElm = this.hostElement.querySelector(".pn-multi-input");
+  }
+  addRow(e) {
+    if (e.type === 'click') {
+      console.log(this.inputElm);
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "pn-multi-input" },
+        h("slot", null)),
+      h("button", { onClick: (e) => this.addRow(e) }, "+")));
+  }
+  static get is() { return "pn-multi-input"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-multi-input.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-multi-input.css"]
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/custom-elements/index.d.ts

@@ -2,6 +2,12 @@
 
 import type { Components, JSX } from "../types/components";
 
+interface PnAnimatedTile extends Components.PnAnimatedTile, HTMLElement {}
+export const PnAnimatedTile: {
+  prototype: PnAnimatedTile;
+  new (): PnAnimatedTile;
+};
+
 interface PnBonusProgressbar extends Components.PnBonusProgressbar, HTMLElement {}
 export const PnBonusProgressbar: {
   prototype: PnBonusProgressbar;
@@ -194,6 +200,12 @@ export const PnMarketwebSiteheaderUnifiedLogin: {
   new (): PnMarketwebSiteheaderUnifiedLogin;
 };
 
+interface PnMultiInput extends Components.PnMultiInput, HTMLElement {}
+export const PnMultiInput: {
+  prototype: PnMultiInput;
+  new (): PnMultiInput;
+};
+
 interface PnParcelTracker extends Components.PnParcelTracker, HTMLElement {}
 export const PnParcelTracker: {
   prototype: PnParcelTracker;

package/custom-elements/index.js

@@ -1,6 +1,120 @@
 import { HTMLElement, h, Host, getRenderingRef, forceUpdate, createEvent, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function getAugmentedNamespace(n) {
+	if (n.__esModule) return n;
+	var a = Object.defineProperty({}, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+var classnames = createCommonjsModule(function (module) {
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					classes.push(arg.toString());
+					continue;
+				}
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
+					}
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+});
+
+const pnAnimatedTileCss = "pn-animated-tile .pn-animated-tile__container{position:relative;border-radius:2.4rem;height:56rem;cursor:default}pn-animated-tile .pn-animated-tile__content{position:relative;display:-ms-flexbox;display:flex;height:100%;width:100%;background-color:transparent}pn-animated-tile [slot=side-a],pn-animated-tile [slot=side-b]{position:absolute;-ms-flex-item-align:stretch;align-self:stretch;top:0;left:0;width:100%;height:100%;padding:2.4rem}pn-animated-tile [slot=side-a]{opacity:1}pn-animated-tile [slot=side-b]{opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}pn-animated-tile .pn-animated-tile__toggle{position:absolute;bottom:0;right:0;padding:2.4rem}pn-animated-tile .pn-animated-tile__toggle pn-icon{cursor:pointer;border-radius:50%;padding:0.8rem;margin:0.8rem 0 0 0}pn-animated-tile pn-icon .button-tooltip{display:none}.cat-animate [slot=side-a],.cat-animate [slot=side-b]{-webkit-transition:opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out 0.2s;transition:opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out 0.2s;transition:opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.2s;transition:opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.2s, -webkit-transform 0.5s ease-in-out 0.2s}.cat-animate.fade [slot=side-a]{opacity:0}.cat-animate.fade [slot=side-b]{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition-delay:0.5s;transition-delay:0.5s}.cat-animate.fade--reversed [slot=side-a]{opacity:1;-webkit-transition-delay:0.5s;transition-delay:0.5s}.cat-animate.fade--reversed [slot=side-b]{opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}.cat-animate.toggle pn-icon{-webkit-transition:-webkit-transform 0.45s ease-in-out;transition:-webkit-transform 0.45s ease-in-out;transition:transform 0.45s ease-in-out;transition:transform 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out;-webkit-transition-delay:0.5s;transition-delay:0.5s}.cat-animate.toggle.animate pn-icon{-webkit-transform:rotate(45deg);transform:rotate(45deg)}[data-cat-theme=white] .pn-animated-tile__container{background-color:#FFFFFF}[data-cat-theme=white] .pn-animated-tile__toggle>pn-icon{background-color:#FFFFFF}[data-cat-theme=white] .pn-animated-tile__toggle>pn-icon svg>path{fill:#00A0D6}[data-cat-theme=coral400] .pn-animated-tile__container{background-color:#F06365}[data-cat-theme=coral400] .pn-animated-tile__toggle>pn-icon{background-color:#FFFFFF}[data-cat-theme=coral400] .pn-animated-tile__toggle>pn-icon svg>path{fill:#F06365}[data-cat-theme=private] .pn-animated-tile__container{background-color:#00A0D6}[data-cat-theme=private] .pn-animated-tile__toggle>pn-icon{background-color:#FFFFFF}[data-cat-theme=private] .pn-animated-tile__toggle>pn-icon svg>path{fill:#00A0D6}[data-cat-theme=business] .pn-animated-tile__container{background-color:#0D234B}[data-cat-theme=business] .pn-animated-tile__toggle>pn-icon{background-color:#FFFFFF}[data-cat-theme=business] .pn-animated-tile__toggle>pn-icon svg>path{fill:#0D234B}[data-cat-theme=hybrid] .pn-animated-tile__container{background-color:#e9e6e5}[data-cat-theme=hybrid] .pn-animated-tile__toggle>pn-icon{background-color:#FFFFFF}[data-cat-theme=hybrid] .pn-animated-tile__toggle>pn-icon svg>path{fill:#005D92}[data-cat-firstpage-only=true] [slot=side-b],[data-cat-firstpage-only=true] .pn-animated-tile__toggle{display:none}";
+
+let PnAnimatedTile$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.toggled = false;
+    this.transitionClassName = '';
+    this.animateIcon = '';
+    this.onClickHandler = () => {
+      this.toggled = !this.toggled;
+    };
+  }
+  onToggledHandler() {
+    this.transitionClassName = classnames({ 'fade': this.toggled, 'fade--reversed': !this.toggled });
+    this.animateIcon = classnames({ 'animate': this.toggled, '': !this.toggled });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "pn-animated-tile__container" }, h("div", { class: `pn-animated-tile__content cat-animate ${this.transitionClassName}` }, h("slot", { name: "side-a" }), h("slot", { name: "side-b" })), h("div", { class: `pn-animated-tile__toggle cat-animate toggle ${this.animateIcon}` }, h("pn-icon", { symbol: "plus", onClick: this.onClickHandler })))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "toggled": ["onToggledHandler"]
+  }; }
+  static get style() { return pnAnimatedTileCss; }
+};
+
 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}";
 
 let PnBonusProgressbar$1 = class extends HTMLElement {
@@ -153,37 +267,6 @@ let PnBreakpoints$1 = class extends HTMLElement {
   static get style() { return pnBreakpointsCss; }
 };
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function createCommonjsModule(fn, basedir, module) {
-	return module = {
-		path: basedir,
-		exports: {},
-		require: function (path, base) {
-			return commonjsRequire();
-		}
-	}, fn(module, module.exports), module.exports;
-}
-
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
-function commonjsRequire () {
-	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-}
-
 //! moment.js
 //! version : 2.29.4
 //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
@@ -5861,8 +5944,8 @@ hooks.HTML5_FMT = {
 };
 
 const moment = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': hooks
+	__proto__: null,
+	'default': hooks
 });
 
 const require$$0 = /*@__PURE__*/getAugmentedNamespace(moment);
@@ -27880,6 +27963,32 @@ let PnMarketwebSiteheaderUnifiedLogin$1 = class extends HTMLElement {
   static get style() { return pnMarketwebSiteheaderUnifiedLoginCss; }
 };
 
+const pnMultiInputCss = "";
+
+let PnmultiInput = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.inputElm = null;
+  }
+  async componentDidLoad() {
+    this.init();
+  }
+  init() {
+    this.inputElm = this.hostElement.querySelector(".pn-multi-input");
+  }
+  addRow(e) {
+    if (e.type === 'click') {
+      console.log(this.inputElm);
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "pn-multi-input" }, h("slot", null)), h("button", { onClick: (e) => this.addRow(e) }, "+")));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnMultiInputCss; }
+};
+
 const pnParcelTrackerCss = "pn-spotlight .pn-spotlight__container:has(pn-parcel-tracker) [slot=mobile-heading]{color:#005D92}.pn-spotlight__container__wrapper__content [slot=content]:has(pn-parcel-tracker){padding-left:2rem}pn-parcel-tracker{width:100%}pn-parcel-tracker .pn-parcel-tracker__container form{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;gap:1.6rem}pn-parcel-tracker .pn-parcel-tracker__container form .pn-parcel-tracker__container__heading{color:#005D92;font-weight:500;margin-bottom:0}@media screen and (max-width: 768px){pn-parcel-tracker .pn-parcel-tracker__container form .pn-parcel-tracker__container__heading{display:none}}@media screen and (min-width: 1640px){pn-parcel-tracker .pn-parcel-tracker__container form .pn-parcel-tracker__container__heading{font-size:2.4rem;font-weight:700}}pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{-ms-flex-positive:1;flex-grow:1;max-width:80%}@media screen and (min-width: 768px){pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{max-width:50%}}@media screen and (min-width: 992px){pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{max-width:45%}}@media screen and (min-width: 1640px){pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{max-width:35%}}pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input input{border-radius:6.4rem}";
 
 let PnSpotlight$2 = class extends HTMLElement {
@@ -29873,62 +29982,6 @@ let PnSiteSelectorItem$1 = class extends HTMLElement {
   static get style() { return pnSiteSelectorItemCss; }
 };
 
-var classnames = createCommonjsModule(function (module) {
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-/* global define */
-
-(function () {
-
-	var hasOwn = {}.hasOwnProperty;
-
-	function classNames() {
-		var classes = [];
-
-		for (var i = 0; i < arguments.length; i++) {
-			var arg = arguments[i];
-			if (!arg) continue;
-
-			var argType = typeof arg;
-
-			if (argType === 'string' || argType === 'number') {
-				classes.push(arg);
-			} else if (Array.isArray(arg)) {
-				if (arg.length) {
-					var inner = classNames.apply(null, arg);
-					if (inner) {
-						classes.push(inner);
-					}
-				}
-			} else if (argType === 'object') {
-				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-					classes.push(arg.toString());
-					continue;
-				}
-
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes.push(key);
-					}
-				}
-			}
-		}
-
-		return classes.join(' ');
-	}
-
-	if (module.exports) {
-		classNames.default = classNames;
-		module.exports = classNames;
-	} else {
-		window.classNames = classNames;
-	}
-}());
-});
-
 const pnSpotlightCss = "pn-spotlight .pn-spotlight__container{overflow:hidden}@media screen and (max-width: 991px){pn-spotlight .pn-spotlight__container{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%)}}pn-spotlight [slot=mobile-heading]{text-align:center;padding-bottom:1.6rem;font-weight:500;color:#0D234B}@media screen and (min-width: 769px){pn-spotlight [slot=mobile-heading]{display:none}}pn-spotlight .pn-spotlight__container__wrapper{position:relative;max-width:100%}@media screen and (min-width: 992px){pn-spotlight .pn-spotlight__container__wrapper{max-width:90%;margin:0 auto}}@media screen and (min-width: 1640px){pn-spotlight .pn-spotlight__container__wrapper{max-width:80%}}pn-spotlight .pn-spotlight__container__wrapper__content{position:relative;margin:0 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;left:-57.5px;width:calc(100% + 57.5px)}@media screen and (min-width: 768px){pn-spotlight .pn-spotlight__container__wrapper__content{left:-50px;width:calc(100% + 50px)}}@media screen and (min-width: 992px){pn-spotlight .pn-spotlight__container__wrapper__content{left:0;width:100%}}pn-spotlight .pn-spotlight__container__wrapper__content__ball{border-radius:50%;min-height:75px;aspect-ratio:1/1;margin-right:1.5rem}@media screen and (min-width: 768px){pn-spotlight .pn-spotlight__container__wrapper__content__ball{min-height:85px;margin-right:2.5rem}}pn-spotlight [slot=content]{display:-ms-flexbox;display:flex;border-top-left-radius:10rem;border-bottom-left-radius:10rem;-ms-flex-align:center;align-items:center;-ms-flex-pack:right;justify-content:right;padding:0 1.5rem;padding-left:50px;width:100%}@media screen and (min-width: 992px){pn-spotlight [slot=content]{padding:0 2rem;border-radius:10rem}}@media screen and (min-width: 992px){.pn-spotlight__container__wrapper.cta--dynamic{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}@media screen and (min-width: 992px){.pn-spotlight__container__wrapper.cta--dynamic [slot=content]{padding-left:4rem}}pn-spotlight[data-cta-color=green] [slot=content]{background-color:#DCF6E7}pn-spotlight[data-cta-color=green] .pn-spotlight__container__wrapper__content__ball{background-color:#DCF6E7}pn-spotlight[data-cta-color=coral] [slot=content]{background-color:#FDEFEE}pn-spotlight[data-cta-color=coral] .pn-spotlight__container__wrapper__content__ball{background-color:#FDEFEE}pn-spotlight[data-cta-color=blue] [slot=content]{background-color:#EFFBFF}pn-spotlight[data-cta-color=blue] .pn-spotlight__container__wrapper__content__ball{background-color:#EFFBFF}pn-spotlight[data-cta-color=business] [slot=content],pn-spotlight[data-cta-color=business] .pn-spotlight__container__wrapper__content__ball{background-color:#0D234B}pn-spotlight[data-cta-color=private] [slot=content],pn-spotlight[data-cta-color=private] .pn-spotlight__container__wrapper__content__ball{background-color:#00A0D6}pn-spotlight[data-cta-color=hybrid] [slot=content],pn-spotlight[data-cta-color=hybrid] .pn-spotlight__container__wrapper__content__ball{background-color:#e9e6e5}";
 
 let PnSpotlight$1 = class extends HTMLElement {
@@ -30091,6 +30144,7 @@ let PnTiletag = class extends HTMLElement {
   static get style() { return pnTitletagCss; }
 };
 
+const PnAnimatedTile = /*@__PURE__*/proxyCustomElement(PnAnimatedTile$1, [4,"pn-animated-tile",{"toggled":[32],"transitionClassName":[32],"animateIcon":[32]}]);
 const PnBonusProgressbar = /*@__PURE__*/proxyCustomElement(PnBonusProgressbar$1, [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]}]);
 const PnBonusProgressbarLevel = /*@__PURE__*/proxyCustomElement(PnBonusProgressbarLevel$1, [0,"pn-bonus-progressbar-level",{"current":[516],"value":[1538],"bonuspercentage":[1537],"visualpercentage":[1538],"percentage":[32],"max":[32],"min":[32],"currency":[32]}]);
 const PnBreakpoints = /*@__PURE__*/proxyCustomElement(PnBreakpoints$1, [0,"pn-breakpoints",{"breakPointClass":[1,"break-point-class"],"currentWidth":[32]},[[9,"resize","handleViewportSizeChange"]]]);
@@ -30123,6 +30177,7 @@ const PnMarketwebSiteheaderLoginMypageButton = /*@__PURE__*/proxyCustomElement(P
 const PnMarketwebSiteheaderLoginProfileselection = /*@__PURE__*/proxyCustomElement(PnMarketwebSiteheaderLoginProfileselection$1, [0,"pn-marketweb-siteheader-login-profileselection",{"loginDialog":[1040],"endpoint":[1],"loggedin":[4],"idNamespace":[1,"id-namespace"],"heading":[1],"i18n":[16],"currentProfile":[1040],"profileoptions":[1040],"user":[32],"logoutLink":[32],"userName":[32],"userEmail":[32]}]);
 const PnMarketwebSiteheaderSearch = /*@__PURE__*/proxyCustomElement(PnMarketwebSiteheaderSearch$1, [0,"pn-marketweb-siteheader-search",{"i18n":[8,"i-1-8n"],"showOnlyLink":[1028,"show-only-link"],"hideSearch":[1028,"hide-search"],"language":[1537],"siteid":[1],"search":[1040],"primary":[4],"icononly":[4],"autoCompleteOptions":[32]}]);
 const PnMarketwebSiteheaderUnifiedLogin = /*@__PURE__*/proxyCustomElement(PnMarketwebSiteheaderUnifiedLogin$1, [0,"pn-marketweb-siteheader-unified-login",{"loggedIn":[4,"logged-in"],"myPageLabel":[1,"my-page-label"],"myPageUrl":[1,"my-page-url"],"logInLabel":[1,"log-in-label"]}]);
+const PnMultiInput = /*@__PURE__*/proxyCustomElement(PnmultiInput, [4,"pn-multi-input"]);
 const PnParcelTracker = /*@__PURE__*/proxyCustomElement(PnSpotlight$2, [0,"pn-parcel-tracker",{"formActionUrl":[1,"form-action-url"],"heading":[1],"buttonLabel":[1,"button-label"],"locale":[1],"placeholder":[1],"inputName":[1,"input-name"],"currentWidth":[32]},[[9,"resize","handleViewportSizeChange"]]]);
 const PnPexPricefinder = /*@__PURE__*/proxyCustomElement(PnPexPricefinder$1, [0,"pn-pex-pricefinder",{"language":[1],"currency":[1],"apiUrl":[1,"api-url"],"i18n":[32],"fromzip":[32],"tozip":[32],"weight":[32],"when":[32],"response":[32]},[[0,"language","setLanguage"]]]);
 const PnProductCard = /*@__PURE__*/proxyCustomElement(PnProductCard$1, [4,"pn-product-card"]);
@@ -30167,7 +30222,8 @@ const PnTitletag = /*@__PURE__*/proxyCustomElement(PnTiletag, [4,"pn-titletag",{
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [
-      PnBonusProgressbar,
+      PnAnimatedTile,
+  PnBonusProgressbar,
   PnBonusProgressbarLevel,
   PnBreakpoints,
   PnChart,
@@ -30199,6 +30255,7 @@ const defineCustomElements = (opts) => {
   PnMarketwebSiteheaderLoginProfileselection,
   PnMarketwebSiteheaderSearch,
   PnMarketwebSiteheaderUnifiedLogin,
+  PnMultiInput,
   PnParcelTracker,
   PnPexPricefinder,
   PnProductCard,
@@ -30248,4 +30305,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { PnBonusProgressbar, PnBonusProgressbarLevel, PnBreakpoints, PnChart, PnChartsCard, PnChoiceButton, PnCustomernumberSelector, PnCustomernumberSelectorOption, PnFilterCheckbox, PnFindPrice, PnFindPriceResult, PnFindServiceAndPrice, PnFindServiceAndPriceResult, PnLanguageSelector, PnLanguageSelectorOption, PnLineShape, PnMainnav, PnMainnavLevel, PnMainnavLink, PnMainnavList, PnMarketwebInput, PnMarketwebSearch, PnMarketwebSitefooter, PnMarketwebSiteheader, PnMarketwebSiteheaderLogin, PnMarketwebSiteheaderLoginButton, PnMarketwebSiteheaderLoginLinklist, PnMarketwebSiteheaderLoginLinks, PnMarketwebSiteheaderLoginMypageButton, PnMarketwebSiteheaderLoginProfileselection, PnMarketwebSiteheaderSearch, PnMarketwebSiteheaderUnifiedLogin, PnParcelTracker, PnPexPricefinder, PnProductCard, PnProductCardInfo, PnProductCardPrice, PnProductPricelist, PnProductPricelistResult, PnProductTile, PnProductTileInfo, PnProductTilePrice, PnProfileModal, PnProfileModalCustomernumber, PnProfileModalProfile, PnProfileModalType, PnProfileSelector, PnProfileSelectorOption, PnProxioFindprice, PnProxioFindpriceResult, PnProxioPricegroup, PnProxioProductcard, PnProxioProductcardDescription, PnProxioProductcardInformation, PnProxioProductcardPricelink, PnQuickCta, PnQuoteCard, PnScroll, PnShare, PnShareItem, PnSidenav, PnSidenavLevel, PnSidenavLink, PnSidenavTogglebutton, PnSiteFooter, PnSiteFooterCol, PnSiteSelector, PnSiteSelectorItem, PnSpotlight, PnStatsInfo, PnStatsInfoData, PnTeaserCard, PnTitletag, defineCustomElements };
+export { PnAnimatedTile, PnBonusProgressbar, PnBonusProgressbarLevel, PnBreakpoints, PnChart, PnChartsCard, PnChoiceButton, PnCustomernumberSelector, PnCustomernumberSelectorOption, PnFilterCheckbox, PnFindPrice, PnFindPriceResult, PnFindServiceAndPrice, PnFindServiceAndPriceResult, PnLanguageSelector, PnLanguageSelectorOption, PnLineShape, PnMainnav, PnMainnavLevel, PnMainnavLink, PnMainnavList, PnMarketwebInput, PnMarketwebSearch, PnMarketwebSitefooter, PnMarketwebSiteheader, PnMarketwebSiteheaderLogin, PnMarketwebSiteheaderLoginButton, PnMarketwebSiteheaderLoginLinklist, PnMarketwebSiteheaderLoginLinks, PnMarketwebSiteheaderLoginMypageButton, PnMarketwebSiteheaderLoginProfileselection, PnMarketwebSiteheaderSearch, PnMarketwebSiteheaderUnifiedLogin, PnMultiInput, PnParcelTracker, PnPexPricefinder, PnProductCard, PnProductCardInfo, PnProductCardPrice, PnProductPricelist, PnProductPricelistResult, PnProductTile, PnProductTileInfo, PnProductTilePrice, PnProfileModal, PnProfileModalCustomernumber, PnProfileModalProfile, PnProfileModalType, PnProfileSelector, PnProfileSelectorOption, PnProxioFindprice, PnProxioFindpriceResult, PnProxioPricegroup, PnProxioProductcard, PnProxioProductcardDescription, PnProxioProductcardInformation, PnProxioProductcardPricelink, PnQuickCta, PnQuoteCard, PnScroll, PnShare, PnShareItem, PnSidenav, PnSidenavLevel, PnSidenavLink, PnSidenavTogglebutton, PnSiteFooter, PnSiteFooterCol, PnSiteSelector, PnSiteSelectorItem, PnSpotlight, PnStatsInfo, PnStatsInfoData, PnTeaserCard, PnTitletag, defineCustomElements };

package/esm/index-45541632.js

@@ -0,0 +1,59 @@
+import { c as createCommonjsModule } from './_commonjsHelpers-27f122dd.js';
+
+var classnames = createCommonjsModule(function (module) {
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					classes.push(arg.toString());
+					continue;
+				}
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
+					}
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+});
+
+export { classnames as c };