@postnord/pn-marketweb-components 2.3.4 → 2.3.6

package/collection/components/animation/pn-animated-tile/pn-animated-tile.css

@@ -0,0 +1,128 @@
+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: flex;
+  height: 100%;
+  width: 100%;
+  background-color: transparent;
+}
+pn-animated-tile [slot=side-a],
+pn-animated-tile [slot=side-b] {
+  position: absolute;
+  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;
+  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] {
+  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.2s;
+}
+.cat-animate.fade [slot=side-a] {
+  opacity: 0;
+}
+.cat-animate.fade [slot=side-b] {
+  opacity: 1;
+  transform: translateY(0);
+  transition-delay: 0.5s;
+}
+.cat-animate.fade--reversed [slot=side-a] {
+  opacity: 1;
+  transition-delay: 0.5s;
+}
+.cat-animate.fade--reversed [slot=side-b] {
+  opacity: 0;
+  transform: translateY(50px);
+}
+.cat-animate.toggle pn-icon {
+  transition: transform 0.45s ease-in-out;
+  transition-delay: 0.5s;
+}
+.cat-animate.toggle.animate pn-icon {
+  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;
+}

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

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import { Component, Element, h, Host, State, Watch } from '@stencil/core';
+export class PnAnimatedTile {
+  constructor() {
+    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 })))));
+  }
+  static get is() { return "pn-animated-tile"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-animated-tile.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-animated-tile.css"]
+  }; }
+  static get states() { return {
+    "toggled": {},
+    "transitionClassName": {},
+    "animateIcon": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "toggled",
+      "methodName": "onToggledHandler"
+    }]; }
+}

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/cta/pn-quick-cta/pn-quick-cta.css

@@ -40,4 +40,23 @@ pn-quick-cta .quick-cta__content [slot=quick-cta-cta] a {
 }
 pn-quick-cta .quick-cta__content [slot=quick-cta-cta] a:hover {
   text-decoration: none;
+}
+
+pn-spotlight[data-cta-color=business] .quick-cta__content__heading {
+  color: #F06365;
+}
+pn-spotlight[data-cta-color=business] .quick-cta__content__preamble {
+  color: #EFFBFF;
+}
+
+pn-spotlight[data-cta-color=private] .quick-cta__content__heading,
+pn-spotlight[data-cta-color=private] .quick-cta__content__preamble {
+  color: #FFFFFF;
+}
+
+pn-spotlight[data-cta-color=hybrid] .quick-cta__content__heading {
+  color: #005D92;
+}
+pn-spotlight[data-cta-color=hybrid] .quick-cta__content__preamble {
+  color: #2D2013;
 }

package/collection/components/cta/pn-quick-cta/pn-quick-cta.stories.js

@@ -46,7 +46,61 @@ const TemplatePrimary = ({ ...args }) => {
          </pn-quick-cta>
         </div>                
     </pn-spotlight>
-  </div>  `;
+  </div>
+  
+  <br />
+
+  <div id="container" style="margin: 0 auto;">
+    <pn-spotlight data-cta-color="business">                   
+        <h2 slot="mobile-heading">${args.heading}</h2>
+        <div slot="content">
+         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">         
+            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>         
+         </pn-quick-cta>
+        </div>                
+    </pn-spotlight>
+  </div>
+
+  <br />
+
+  <div id="container" style="margin: 0 auto;">
+    <pn-spotlight data-cta-color="private">                   
+        <h2 slot="mobile-heading">${args.heading}</h2>
+        <div slot="content">
+         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">         
+            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>         
+         </pn-quick-cta>
+        </div>                
+    </pn-spotlight>
+  </div>
+
+  <br />
+
+  <div id="container" style="margin: 0 auto;">
+    <pn-spotlight data-cta-color="hybrid">                   
+        <h2 slot="mobile-heading">${args.heading}</h2>
+        <div slot="content">
+         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">         
+            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>         
+         </pn-quick-cta>
+        </div>                
+    </pn-spotlight>
+  </div>
+
+   <br />
+
+  <div id="container" style="margin: 0 auto;">
+    <pn-spotlight data-cta-color="hybrid" is-dynamic=true>                   
+        <h2 slot="mobile-heading">Less text</h2>
+        <div slot="content">
+         <pn-quick-cta heading="Less text" preamble="preamble">         
+            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>         
+         </pn-quick-cta>
+        </div>                
+    </pn-spotlight>
+  </div>
+  
+  `;
 };
 
 export const Primary = TemplatePrimary.bind({});

package/collection/components/cta/pn-spotlight/pn-spotlight.css

@@ -82,6 +82,17 @@ pn-spotlight [slot=content] {
   }
 }
 
+@media screen and (min-width: 992px) {
+  .pn-spotlight__container__wrapper.cta--dynamic {
+    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;
 }
@@ -101,4 +112,19 @@ pn-spotlight[data-cta-color=blue] [slot=content] {
 }
 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;
 }

package/collection/components/cta/pn-spotlight/pn-spotlight.js

@@ -1,14 +1,20 @@
-import { Component, Element, h, Host, Prop, } from '@stencil/core';
+import classNames from 'classnames';
+import { Component, Element, h, Host, Prop, State } from '@stencil/core';
 export class PnSpotlight {
   constructor() {
     this.heading = null;
     this.preamble = null;
+    this.isDynamic = false;
+    this.addDynamic = '';
+  }
+  componentDidLoad() {
+    this.addDynamic = classNames({ 'cta--dynamic': this.isDynamic });
   }
   render() {
     return (h(Host, null,
       h("div", { class: "pn-spotlight__container" },
         h("slot", { name: "mobile-heading" }),
-        h("div", { class: "pn-spotlight__container__wrapper" },
+        h("div", { class: `pn-spotlight__container__wrapper ${this.addDynamic}` },
           h("div", { class: "pn-spotlight__container__wrapper__content" },
             h("div", { class: "pn-spotlight__container__wrapper__content__ball" }),
             h("slot", { name: "content" }))))));
@@ -56,7 +62,28 @@ export class PnSpotlight {
       "attribute": "preamble",
       "reflect": false,
       "defaultValue": "null"
+    },
+    "isDynamic": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-dynamic",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "addDynamic": {}
+  }; }
   static get elementRef() { return "hostElement"; }
 }

package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.css

@@ -41,6 +41,7 @@ pn-stats-info-data .pn-stats-info-data__container__content__unit {
   font-weight: 700;
   font-size: 3rem;
   line-height: 110%;
+  margin-left: 0.8rem;
 }
 @media screen and (min-width: 1200px) {
   pn-stats-info-data .pn-stats-info-data__container__content__unit {

package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.js

@@ -34,7 +34,7 @@ export class PnStatsInfoData {
       h("div", { class: "pn-stats-info-data__container" },
         h("div", { class: "pn-stats-info-data__container__content" },
           h("div", { class: "pn-stats-info-data__container__content__data", id: `pn-stats-info-data-${this.compId}-${this.index}` }),
-          h("div", { class: "pn-stats-info-data__container__content__unit" }, this.unit)),
+          this.unit && h("div", { class: "pn-stats-info-data__container__content__unit" }, this.unit)),
         h("div", { class: "pn-stats-info-data__container__content__preamble" }, this.preamble))));
   }
   componentDidRender() {

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.css

@@ -423,4 +423,50 @@ pn-stats-info[data-stats-background-color=green25] .pn-stats-info-data__containe
 }
 pn-stats-info[data-stats-background-color=green25] .pn-stats-info-data__container__content__preamble {
   color: #0D234B;
+}
+
+pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__content,
+pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__map {
+  background-color: #e9e6e5;
+}
+pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container {
+  background-color: transparent;
+}
+pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container [slot=illustration] {
+  background-color: #e9e6e5;
+}
+@media screen and (min-width: 992px) {
+  pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container {
+    background-color: #e9e6e5;
+  }
+}
+pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__content__heading,
+pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-data__container__content {
+  color: #005D92;
+}
+pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-data__container__content__preamble {
+  color: #0D234B;
+}
+
+pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__content,
+pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__map {
+  background-color: #00A0D6;
+}
+pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container {
+  background-color: transparent;
+}
+pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container [slot=illustration] {
+  background-color: #00A0D6;
+}
+@media screen and (min-width: 992px) {
+  pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container {
+    background-color: #00A0D6;
+  }
+}
+pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__content__heading,
+pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-data__container__content {
+  color: #FFFFFF;
+}
+pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-data__container__content__preamble {
+  color: #0D234B;
 }

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.stories.js

@@ -56,7 +56,7 @@ const StandAloneCenterImageTemplate = ({ ...args }) => {
    <pn-breakpoints></pn-breakpoints>
   
     <div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">    
-        <pn-stats-info heading="${args.heading}" background-url="" data-stats-image="image" data-stats-background-color="bluedarkest"> 
+        <pn-stats-info heading="${args.heading}" background-url="" data-stats-image="image" data-stats-background-color="gray100"> 
         <div slot="illustration">              
            <picture>
             <img src="https://com-integration.postnord.com/contentassets/8008a14914564b5c999d2cea4e151bdd/man-driving.jpg?width=690&height=388&mode=crop&quality=80&anchor=topcenter" /> 
@@ -68,7 +68,7 @@ const StandAloneCenterImageTemplate = ({ ...args }) => {
     <br/>
 
     <div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">    
-        <pn-stats-info heading="${args.heading}" background-url="" data-stats-image="image" data-stats-background-color="greendarkest"> 
+        <pn-stats-info heading="${args.heading}" background-url="" data-stats-image="image" data-stats-background-color="blue400"> 
         <div slot="illustration">              
            <picture>
             <img src="https://com-integration.postnord.com/contentassets/f302a64bf3b5496aaf6f49d8d47e834e/bcdda39b3033ad8b_org.jpg?width=540&height=304&mode=crop&quality=80&anchor=topcenter" /> 

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;