@postnord/pn-marketweb-components 2.3.5 → 2.3.8

package/collection/collection-manifest.json

@@ -1,6 +1,7 @@
 {
   "entries": [
-    "./components/animation/pn-scroll.js",
+    "./components/animation/pn-animated-tile/pn-animated-tile.js",
+    "./components/animation/pn-scroll/pn-scroll.js",
     "./components/cards/pn-quote-card/pn-quote-card.js",
     "./components/cards/pn-quote-card/pn-line-shape/pn-line-shape.js",
     "./components/cards/pn-teaser-card/pn-teaser-card.js",
@@ -29,6 +30,7 @@
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-search.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-unified-login.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.js",
+    "./components/layout-components/pn-multi-formfield/pn-multi-formfield.js",
     "./components/minor/pn-titletag/pn-titletag.js",
     "./components/navigation/pn-language-selector/pn-language-selector-option.js",
     "./components/navigation/pn-language-selector/pn-language-selector.js",

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

@@ -0,0 +1,162 @@
+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%;
+}
+pn-animated-tile [slot=side-a] {
+  padding: 0;
+  opacity: 1;
+}
+pn-animated-tile [slot=side-b] {
+  padding: 2.4rem 2.4rem 7rem 2.4rem;
+  opacity: 0;
+  transform: translateY(50px);
+}
+pn-animated-tile .pn-animated-tile__toggle {
+  position: absolute;
+  bottom: 2.4rem;
+  right: 2.4rem;
+  padding: 0.8rem;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+}
+pn-animated-tile .pn-animated-tile__toggle:hover {
+  background-color: #e9e6e5;
+}
+pn-animated-tile .pn-animated-tile__toggle:hover pn-icon {
+  background-color: #e9e6e5;
+}
+pn-animated-tile .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 {
+  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=white] .pn-animated-tile__toggle:focus, [data-cat-theme=white] .pn-animated-tile__toggle:focus-visible {
+  outline-color: #00A0D6;
+}
+
+[data-cat-theme=coral400] .pn-animated-tile__container {
+  background-color: #F06365;
+}
+[data-cat-theme=coral400] .pn-animated-tile__toggle {
+  background-color: #FFFFFF;
+}
+[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=coral400] .pn-animated-tile__toggle:focus, [data-cat-theme=coral400] .pn-animated-tile__toggle:focus-visible {
+  outline-color: #F06365;
+}
+
+[data-cat-theme=private] .pn-animated-tile__container {
+  background-color: #00A0D6;
+}
+[data-cat-theme=private] .pn-animated-tile__toggle {
+  background-color: #FFFFFF;
+}
+[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=private] .pn-animated-tile__toggle:focus, [data-cat-theme=private] .pn-animated-tile__toggle:focus-visible {
+  outline-color: #00A0D6;
+}
+
+[data-cat-theme=business] .pn-animated-tile__container {
+  background-color: #0D234B;
+}
+[data-cat-theme=business] .pn-animated-tile__toggle {
+  background-color: #FFFFFF;
+}
+[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=business] .pn-animated-tile__toggle:focus, [data-cat-theme=business] .pn-animated-tile__toggle:focus-visible {
+  outline-color: #0D234B;
+}
+
+[data-cat-theme=hybrid] .pn-animated-tile__container {
+  background-color: #e9e6e5;
+}
+[data-cat-theme=hybrid] .pn-animated-tile__toggle {
+  background-color: #FFFFFF;
+}
+[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-theme=hybrid] .pn-animated-tile__toggle:focus, [data-cat-theme=hybrid] .pn-animated-tile__toggle:focus-visible {
+  outline-color: #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("button", { class: `pn-animated-tile__toggle cat-animate toggle ${this.animateIcon}`, onClick: this.onClickHandler },
+          h("pn-icon", { symbol: "plus" })))));
+  }
+  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/layout-components/pn-multi-formfield/multi-formfield.stories.js

@@ -0,0 +1,55 @@
+import readme from "./readme.md";
+
+export default {
+  title: "Input/Multi-FormField",
+  parameters: {
+    notes: readme,
+  },
+  argTypes: {
+    formFieldClassName: "",
+    formFieldOuterParentClassName: "",
+  },
+};
+
+const Template = ({ ...args }) => {
+  return `
+    <pn-multi-formfield
+    formfieldclassname=${args.formFieldClassName}
+    formfieldouterparentclassname=${args.formFieldOuterParentClassName}
+    >
+      <div class="formelement">
+        <div>
+          <label class="Form__Element__Caption" for="e4752967-52ef-4315-88e7-acefd54667bd">Text</label>
+          <input
+            type="text"
+            name="__field_91506"
+            id="e4752967-52ef-4315-88e7-acefd54667bd"
+            class="FormTextbox__Input form-control"
+          />
+        </div>
+      </div>
+      <div class="formelement">
+        <div>
+          <label class="form-group-text form-label" for="0e58dbc8-ef3b-4647-85e6-1d24483e8fe9">Selection</label>
+          <select
+            class="form-control native-select"
+            name="__field_90429"
+            id="0e58dbc8-ef3b-4647-85e6-1d24483e8fe9"
+            data-f-datainput=""
+          >
+            <option disabled="disabled" selected='"selected"' value="">-- Choose an option --</option>
+            <option value="All" data-f-datainput="">All</option>
+            <option value="Legoland" data-f-datainput="">Legoland</option>
+          </select>
+        </div>
+      </div>
+      <textarea type="text" class="hiddenValue" cols="70" rows="10"></textarea>
+    </pn-multi-formfield>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  formFieldClassName: "form-control",
+  formFieldOuterParentClassName: "formelement",
+};

package/collection/components/layout-components/pn-multi-formfield/pn-multi-formfield.css

@@ -0,0 +1,4 @@
+.pn-multi-formfield {
+  display: flex;
+  flex-direction: row;
+}

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

@@ -0,0 +1,267 @@
+import { Component, Element, Host, h, State, Prop, Event } from "@stencil/core";
+import { debounce } from "debounce";
+import { v4 as uuidv4 } from "uuid";
+export class PnMultiFormField {
+  constructor() {
+    this.containerElm = null;
+    this.slotElm = null;
+    this.formFields = null;
+    this.formFieldTypes = ["input", "textarea", "select"];
+    this.additionalRowStartIndex = 2;
+    this.formRow = [];
+    this.formValues = [];
+    this.elementToCopy = null;
+    this.fieldsPerRowCount = 0;
+    this.newRowStartIndex = 2;
+    this.originalLabelNames = [];
+    this.value = [];
+    this.formFieldClassName = "form-control";
+    this.formFieldOuterParentClassName = "formelement";
+    this.formFieldEvent = (e) => {
+      if (e.target.matches(`.${this.formFieldClassName}`)) {
+        ["change", "keyup"].forEach((eventName) => {
+          const debouncedAddValue = debounce(this.updateValues.bind(this, e.target), 1000);
+          e.target.addEventListener(eventName, debouncedAddValue);
+        });
+      }
+    };
+  }
+  generateUniqueId() {
+    return uuidv4();
+  }
+  componentDidLoad() {
+    this.init();
+  }
+  async init() {
+    this.addEventHandlers();
+    this.setDefaultValues();
+  }
+  addEventHandlers() {
+    this.hostElement.addEventListener("click", this.formFieldEvent);
+  }
+  setDefaultValues() {
+    var _a;
+    const labelElms = (_a = this.containerElm) === null || _a === void 0 ? void 0 : _a.querySelectorAll("label");
+    if (labelElms) {
+      this.fieldsPerRowCount = labelElms.length;
+      this.originalLabelNames = [...labelElms].map((label) => label.innerHTML);
+      const emptyValues = this.originalLabelNames.map((label) => {
+        const obj = { Name: label, Value: "" };
+        return obj;
+      });
+      this.formValues = [...emptyValues];
+      this.setHiddenValue();
+    }
+  }
+  setHiddenValue() {
+    var _a;
+    const hiddenField = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.querySelector(".hiddenValue");
+    if (hiddenField) {
+      hiddenField.value = JSON.stringify(this.formValues);
+    }
+  }
+  updateValues(field, e) {
+    var _a;
+    e.preventDefault();
+    const slotElm = field.closest(".pn-multi-formfield-slot");
+    const isSlotParent = !!slotElm;
+    let containerElm = isSlotParent ? slotElm : field.closest(".generated-parent");
+    if (containerElm) {
+      const formFields = (_a = [...containerElm === null || containerElm === void 0 ? void 0 : containerElm.querySelectorAll(`.${this.formFieldClassName}`)]) === null || _a === void 0 ? void 0 : _a.filter((x) => this.formFieldTypes.includes(x.nodeName.toLowerCase()));
+      formFields === null || formFields === void 0 ? void 0 : formFields.map((elm) => {
+        const fieldElm = elm;
+        const closestLabelElm = fieldElm.closest("div").querySelector("label");
+        const label = (closestLabelElm === null || closestLabelElm === void 0 ? void 0 : closestLabelElm.dataset.label) || (closestLabelElm === null || closestLabelElm === void 0 ? void 0 : closestLabelElm.innerHTML);
+        const newItem = { Name: label, Value: fieldElm.value };
+        this.setFormValues(newItem);
+      });
+    }
+    this.setHiddenValue();
+  }
+  setFormValues(obj) {
+    const item = this.formValues.find((item) => item.Name === obj.Name);
+    if (item === undefined) {
+      this.formValues.push(obj);
+    }
+    if (item !== undefined) {
+      item.Value = obj.Value;
+    }
+    this.formValues = [...this.formValues];
+    this.value = this.formValues;
+    this.changed.emit(this.formValues);
+  }
+  addRow(e) {
+    if (e.type === "click") {
+      this.addFormElements();
+    }
+  }
+  addFormElements() {
+    if (!this.elementToCopy) {
+      const elm = this.hostElement.querySelector(".pn-multi-formfield");
+      const clone = elm.cloneNode(true);
+      this.elementToCopy = clone;
+    }
+    const setFormElements = [
+      ...this.elementToCopy.querySelectorAll(`.${this.formFieldOuterParentClassName}`),
+    ].map((elm) => {
+      const labelElm = elm.querySelector("label");
+      const fieldElm = elm.querySelector(`.${this.formFieldClassName}`);
+      const newId = this.generateUniqueId();
+      labelElm.dataset.label = `${labelElm.innerText} ${this.newRowStartIndex}`;
+      labelElm.setAttribute("for", newId);
+      fieldElm.setAttribute("id", newId);
+      fieldElm.setAttribute("name", `__${newId}`);
+      return elm;
+    });
+    this.newRowStartIndex++;
+    const parentId = this.generateUniqueId();
+    const parentElm = document.createElement("div");
+    parentElm.setAttribute("id", parentId);
+    parentElm.setAttribute("class", "generated-parent");
+    setFormElements.map((clone) => {
+      parentElm.innerHTML += clone.innerHTML;
+    });
+    parentElm.appendChild(this.createDeleteButton());
+    this.containerElm.appendChild(parentElm);
+  }
+  createDeleteButton() {
+    const buttonElm = document.createElement("pn-button");
+    buttonElm.onclick = (e) => this.deleteRow(e);
+    buttonElm.setAttribute("icon-only", "true");
+    buttonElm.setAttribute("icon", "minus");
+    buttonElm.setAttribute("appearance", "warning");
+    buttonElm.appendChild(document.createTextNode(`X`));
+    return buttonElm;
+  }
+  deleteRow(e) {
+    e.preventDefault();
+    const targetElm = e.currentTarget;
+    const parentElm = targetElm.parentElement;
+    const allFieldElms = parentElm.querySelectorAll(`.${this.formFieldClassName}`);
+    allFieldElms.forEach((elm) => {
+      elm.remove();
+    });
+    parentElm.remove();
+    this.newRowStartIndex--;
+    this.formValues = [...this.formValues.slice(0, this.fieldsPerRowCount)];
+    const allGeneratedElms = [...this.containerElm.querySelectorAll(".generated-parent")];
+    allGeneratedElms.map((elm, index) => {
+      const allLabelElms = [...elm.querySelectorAll("label")];
+      allLabelElms.map((labelElm) => {
+        const labelParts = this.getLabelParts(labelElm.dataset.label);
+        labelElm.dataset.label = this.getLabelName(labelParts[0], index);
+        const associatedField = labelElm.parentElement.querySelector(`.${this.formFieldClassName}`);
+        const updateItem = { Name: labelElm.dataset.label, Value: associatedField.value };
+        this.setFormValues(updateItem);
+      });
+    });
+    this.setHiddenValue();
+  }
+  getLabelParts(label) {
+    const part1 = label.substring(0, label.lastIndexOf(" "));
+    const part2 = label.substring(label.lastIndexOf(" ") + 1);
+    const parts = [part1, part2];
+    return parts;
+  }
+  getLabelName(name, index) {
+    return `${name} ${index + this.additionalRowStartIndex}`;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { ref: (el) => (this.containerElm = el), class: "pn-multi-formfield" },
+        h("div", { ref: (el) => (this.slotElm = el), class: "pn-multi-formfield-slot" },
+          h("slot", null))),
+      h("pn-button", { "icon-only": "true", "aria-label": "Add", icon: "plus", onClick: (e) => this.addRow(e) }, "+")));
+  }
+  static get is() { return "pn-multi-formfield"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-multi-formfield.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-multi-formfield.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "FormValue[]",
+        "resolved": "FormValue[]",
+        "references": {
+          "FormValue": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    },
+    "formFieldClassName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "form-field-class-name",
+      "reflect": false,
+      "defaultValue": "\"form-control\""
+    },
+    "formFieldOuterParentClassName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "form-field-outer-parent-class-name",
+      "reflect": false,
+      "defaultValue": "\"formelement\""
+    }
+  }; }
+  static get states() { return {
+    "formRow": {},
+    "formValues": {},
+    "elementToCopy": {},
+    "fieldsPerRowCount": {},
+    "newRowStartIndex": {},
+    "originalLabelNames": {}
+  }; }
+  static get events() { return [{
+      "method": "changed",
+      "name": "changed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/layout-components/pn-multi-formfield/types.js

@@ -0,0 +1 @@
+export {};

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 PnMultiFormfield extends Components.PnMultiFormfield, HTMLElement {}
+export const PnMultiFormfield: {
+  prototype: PnMultiFormfield;
+  new (): PnMultiFormfield;
+};
+
 interface PnParcelTracker extends Components.PnParcelTracker, HTMLElement {}
 export const PnParcelTracker: {
   prototype: PnParcelTracker;