@postnord/pn-marketweb-components 2.3.6 → 2.3.8

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

@@ -19,8 +19,8 @@ export class PnAnimatedTile {
         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 })))));
+        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 {

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

@@ -200,10 +200,10 @@ export const PnMarketwebSiteheaderUnifiedLogin: {
   new (): PnMarketwebSiteheaderUnifiedLogin;
 };
 
-interface PnMultiInput extends Components.PnMultiInput, HTMLElement {}
-export const PnMultiInput: {
-  prototype: PnMultiInput;
-  new (): PnMultiInput;
+interface PnMultiFormfield extends Components.PnMultiFormfield, HTMLElement {}
+export const PnMultiFormfield: {
+  prototype: PnMultiFormfield;
+  new (): PnMultiFormfield;
 };
 
 interface PnParcelTracker extends Components.PnParcelTracker, HTMLElement {}