@postnord/pn-marketweb-components 2.4.24 → 2.4.25

package/collection/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown.stories.js

@@ -0,0 +1,62 @@
+import readme from './readme.md';
+
+export default {
+  title: 'input/Multi Row Connected Dropdown',
+  parameters: {
+    notes: readme,
+  },
+};
+
+const Template = ({ ...args }) => {
+  return `
+      <pn-multi-row-connected-dropdown
+        dropdown-data='${args.dropdownData}'
+        label='${args.buttonsLabel}'
+        dropdown-placeholder='${args.dropdownPlaceholder}'
+        first-dropdown-label='${args.firstDropdownLabel}'
+        second-dropdown-label='${args.secondDropdownLabel}'
+        input-fild-label='${args.inputFildLabel}'
+        input-fild-placeholder='${args.inputFildPlaceholder}'
+        allow-multiple-rows='${args.allowMultipleRows}'
+        allow-multiple-dates='${args.allowMultipleDates}'
+        date-button-text='${args.dateButtonText}'
+        date-placeholder='${args.datePlaceHolder}'
+        date-days-from-today='${args.dateDaysFromToday}'
+        language-code='${args.languageCode}'
+        add-row-text='${args.addRowText}'
+        generate-dates-button-text='${args.generateDatesButtonText}'
+        multi-date-helper-text='${args.multiDateHelperText}'
+        save-date-button-text='${args.saveDateButtonText}'
+        no-dates-text='${args.noDatesText}'
+        start-date-label='${args.startDateLabel}'
+        end-date-label='${args.endDateLabel}'
+        years-to-add-to-end-date='${args.yearsToAddToEndDate}'
+        >
+      </pn-multi-row-connected-dropdown>`;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  dropdownData:
+    '[{"caption":"First","value":"First","values":[{"caption":"First-1","value":"First-1","values":[{"caption":"First-1-1","value":"First-1-1"}]},{"caption":"First-2","value":"First-2","values":[{"caption":"First-2-1","value":"First-2-1"}]}]},{"caption":"Second","value":"Second","values":[{"caption":"Second-1","value":"Second-1","values":[{"caption":"Second-1-1","value":"Second-1-1"}]},{"caption":"Second-2","value":"Second-2","values":[{"caption":"Second-2-1","value":"Second-2-1"}]}]}]',
+  buttonsLabel: 'ButtonOptions',
+  dropdownPlaceholder: 'Chose',
+  firstDropdownLabel: 'dropDown1',
+  secondDropdownLabel: 'dropDown2',
+  inputFildLabel: 'Amount',
+  inputFildPlaceholder: '0',
+  allowMultipleRows: false,
+  allowMultipleDates: false,
+  dateButtonText: 'Delivery dates',
+  datePlaceHolder: 'YYYY-MM-DD',
+  dateDaysFromToday: '1',
+  languageCode: 'en',
+  addRowText: 'Add field',
+  generateDatesButtonText: 'Generate dates',
+  saveDateButtonText: 'Save dates',
+  multiDateHelperText: 'Some helpful text',
+  noDatesText: 'No dates',
+  startDateLabel: 'Start date',
+  endDateLabel: 'End date',
+  yearsToAddToEndDate: 2,
+};

package/collection/components/input/pn-multi-row-connected-dropdown/types.js

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

package/components/index.d.ts

@@ -37,6 +37,8 @@ export { PnMarketwebSiteheaderLoginProfileselection as PnMarketwebSiteheaderLogi
 export { PnMarketwebSiteheaderSearch as PnMarketwebSiteheaderSearch } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-search';
 export { PnMarketwebSiteheaderUnifiedLogin as PnMarketwebSiteheaderUnifiedLogin } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-unified-login';
 export { PnMultiFormField as PnMultiFormfield } from '../types/components/input/pn-multi-formfield/pn-multi-formfield';
+export { PnMultiRowConnectedDropdown as PnMultiRowConnectedDropdown } from '../types/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown';
+export { PnMultiRowConnectedDropdownRow as PnMultiRowConnectedDropdownRow } from '../types/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown-row';
 export { PnSpotlight as PnParcelTracker } from '../types/components/cta/pn-parcel-tracker/pn-parcel-tracker';
 export { PnPexPricefinder as PnPexPricefinder } from '../types/components/widgets/pn-pex-pricefinder/pn-pex-pricefinder';
 export { PnPlayOnScroll as PnPlayOnScroll } from '../types/components/animation/pn-play-on-scroll/pn-play-on-scroll';

package/components/index.js

@@ -37,6 +37,8 @@ export { PnMarketwebSiteheaderLoginProfileselection, defineCustomElement as defi
 export { PnMarketwebSiteheaderSearch, defineCustomElement as defineCustomElementPnMarketwebSiteheaderSearch } from './pn-marketweb-siteheader-search.js';
 export { PnMarketwebSiteheaderUnifiedLogin, defineCustomElement as defineCustomElementPnMarketwebSiteheaderUnifiedLogin } from './pn-marketweb-siteheader-unified-login.js';
 export { PnMultiFormfield, defineCustomElement as defineCustomElementPnMultiFormfield } from './pn-multi-formfield.js';
+export { PnMultiRowConnectedDropdown, defineCustomElement as defineCustomElementPnMultiRowConnectedDropdown } from './pn-multi-row-connected-dropdown.js';
+export { PnMultiRowConnectedDropdownRow, defineCustomElement as defineCustomElementPnMultiRowConnectedDropdownRow } from './pn-multi-row-connected-dropdown-row.js';
 export { PnParcelTracker, defineCustomElement as defineCustomElementPnParcelTracker } from './pn-parcel-tracker.js';
 export { PnPexPricefinder, defineCustomElement as defineCustomElementPnPexPricefinder } from './pn-pex-pricefinder.js';
 export { PnPlayOnScroll, defineCustomElement as defineCustomElementPnPlayOnScroll } from './pn-play-on-scroll.js';

package/components/pn-filter-checkbox.js

@@ -1,91 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const pnFilterCheckboxCss = ":host{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host input{opacity:0;position:absolute}:host input[type=checkbox]+label.pn-checkbox{width:1.5em;min-width:1.5em;height:1.5em;min-height:1.5em;background:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;border:0.1rem solid #969087;cursor:pointer;border-radius:0.4rem;cursor:pointer;-webkit-transition-duration:220ms;transition-duration:220ms;-webkit-transition-timing-function:cubic-bezier(0.79, 0.14, 0.15, 0.86);transition-timing-function:cubic-bezier(0.79, 0.14, 0.15, 0.86);-webkit-transition-property:border, background, -webkit-box-shadow;transition-property:border, background, -webkit-box-shadow;transition-property:border, background, box-shadow;transition-property:border, background, box-shadow, -webkit-box-shadow}:host input[type=checkbox]+label.pn-checkbox svg{width:80%;fill:none}:host input[type=checkbox]+label.pn-checkbox svg polyline{stroke:#FFF;-webkit-transform-origin:0 0;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;-webkit-transition-delay:none;transition-delay:none;-webkit-transition:stroke-dashoffset 180ms cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:stroke-dashoffset 180ms cubic-bezier(0.79, 0.14, 0.15, 0.86)}:host input[type=checkbox]:hover+label.pn-checkbox{border:0.1rem solid #005D92;background:#E0F8FF}:host input[type=checkbox]:checked+label.pn-checkbox,:host input[type=checkbox]:indeterminate+label.pn-checkbox{background:#005D92;border:0.1rem solid #005D92}:host input[type=checkbox]:checked+label.pn-checkbox svg polyline,:host input[type=checkbox]:indeterminate+label.pn-checkbox svg polyline{-webkit-transition-delay:220ms;transition-delay:220ms}:host input[type=checkbox]:checked+label.pn-checkbox svg polyline.checkmark-path{stroke-dashoffset:0}:host input[type=checkbox]:indeterminate+label.pn-checkbox svg polyline.indeterminate-path{stroke-dashoffset:0}:host input[type=checkbox]:focus+label.pn-checkbox,:host input[type=checkbox]:active+label.pn-checkbox{-webkit-box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92;box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92}:host input[type=checkbox]:disabled+label.pn-checkbox{background-color:#D3CECB;border:0.1rem solid #969087;cursor:not-allowed}:host input[type=checkbox]:disabled+label.pn-checkbox svg polyline{stroke:#969087}:host input[type=checkbox]:disabled:checked+label.pn-checkbox{border:0.1rem solid transparent}:host input[type=checkbox]:disabled:active+label.pn-checkbox{-webkit-box-shadow:none;box-shadow:none}";
-
-const PnFilterCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.value = undefined;
-    this.name = undefined;
-    this.checkboxid = undefined;
-    this.disabled = false;
-    this.checked = false;
-    this.indeterminate = false;
-  }
-  handlechange() {
-    this.indeterminate = false;
-  }
-  componentDidLoad() {
-    this.checkAndSetIndeterminateState();
-    this.bindEvents();
-  }
-  componentDidUpdate() {
-    this.checkAndSetIndeterminateState();
-  }
-  bindEvents() {
-    const labels = document.querySelectorAll('label[for="' + this.checkboxid + '"]');
-    labels.forEach((label) => {
-      label.addEventListener('click', () => {
-        this.hostElement.shadowRoot.querySelector('label').click();
-      });
-    });
-    const checkboxInput = this.hostElement.shadowRoot.querySelector('input');
-    checkboxInput.addEventListener('change', this.onCheckboxChange.bind(this, checkboxInput));
-  }
-  onCheckboxChange(checkboxInput) {
-    let outsideInput = this.hostElement.querySelector("input.hidden-" + this.checkboxid);
-    if (outsideInput) {
-      outsideInput.value = (checkboxInput.checked) ? this.value : "";
-      outsideInput.dispatchEvent(new CustomEvent("change", { detail: outsideInput }));
-    }
-  }
-  checkAndSetIndeterminateState() {
-    let checkbox = this.hostElement.querySelector(`#${this.checkboxid}`);
-    if (checkbox) {
-      checkbox.indeterminate = this.indeterminate;
-    }
-  }
-  renderInputOutsideShadowRoot() {
-    var _a;
-    let input = this.hostElement.querySelector("input.hidden-" + this.checkboxid);
-    if (!input) {
-      input = this.hostElement.ownerDocument.createElement("input");
-      input.type = "hidden";
-      input.classList.add("hidden-" + this.checkboxid);
-      this.hostElement.appendChild(input);
-    }
-    input.name = (_a = this.name) !== null && _a !== void 0 ? _a : this.checkboxid;
-  }
-  render() {
-    this.renderInputOutsideShadowRoot();
-    return (h(Host, { checked: this.checked, id: this.checkboxid }, h("input", { type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked }), h("label", { htmlFor: this.checkboxid, class: "pn-checkbox" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { class: "indeterminate-path", points: "4,12 20,12", "stroke-width": "3" })))));
-  }
-  get hostElement() { return this; }
-  static get style() { return pnFilterCheckboxCss; }
-}, [1, "pn-filter-checkbox", {
-    "value": [520],
-    "name": [1],
-    "checkboxid": [1],
-    "disabled": [4],
-    "checked": [4],
-    "indeterminate": [1028]
-  }, [[0, "change", "handlechange"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["pn-filter-checkbox"];
-  components.forEach(tagName => { switch (tagName) {
-    case "pn-filter-checkbox":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PnFilterCheckbox$1);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { P as PnFilterCheckbox$1, d as defineCustomElement$1 } from './pn-filter-checkbox2.js';
 
 const PnFilterCheckbox = PnFilterCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/components/pn-filter-checkbox2.js

@@ -0,0 +1,90 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnFilterCheckboxCss = ":host{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host input{opacity:0;position:absolute}:host input[type=checkbox]+label.pn-checkbox{width:1.5em;min-width:1.5em;height:1.5em;min-height:1.5em;background:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;border:0.1rem solid #969087;cursor:pointer;border-radius:0.4rem;cursor:pointer;-webkit-transition-duration:220ms;transition-duration:220ms;-webkit-transition-timing-function:cubic-bezier(0.79, 0.14, 0.15, 0.86);transition-timing-function:cubic-bezier(0.79, 0.14, 0.15, 0.86);-webkit-transition-property:border, background, -webkit-box-shadow;transition-property:border, background, -webkit-box-shadow;transition-property:border, background, box-shadow;transition-property:border, background, box-shadow, -webkit-box-shadow}:host input[type=checkbox]+label.pn-checkbox svg{width:80%;fill:none}:host input[type=checkbox]+label.pn-checkbox svg polyline{stroke:#FFF;-webkit-transform-origin:0 0;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;-webkit-transition-delay:none;transition-delay:none;-webkit-transition:stroke-dashoffset 180ms cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:stroke-dashoffset 180ms cubic-bezier(0.79, 0.14, 0.15, 0.86)}:host input[type=checkbox]:hover+label.pn-checkbox{border:0.1rem solid #005D92;background:#E0F8FF}:host input[type=checkbox]:checked+label.pn-checkbox,:host input[type=checkbox]:indeterminate+label.pn-checkbox{background:#005D92;border:0.1rem solid #005D92}:host input[type=checkbox]:checked+label.pn-checkbox svg polyline,:host input[type=checkbox]:indeterminate+label.pn-checkbox svg polyline{-webkit-transition-delay:220ms;transition-delay:220ms}:host input[type=checkbox]:checked+label.pn-checkbox svg polyline.checkmark-path{stroke-dashoffset:0}:host input[type=checkbox]:indeterminate+label.pn-checkbox svg polyline.indeterminate-path{stroke-dashoffset:0}:host input[type=checkbox]:focus+label.pn-checkbox,:host input[type=checkbox]:active+label.pn-checkbox{-webkit-box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92;box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92}:host input[type=checkbox]:disabled+label.pn-checkbox{background-color:#D3CECB;border:0.1rem solid #969087;cursor:not-allowed}:host input[type=checkbox]:disabled+label.pn-checkbox svg polyline{stroke:#969087}:host input[type=checkbox]:disabled:checked+label.pn-checkbox{border:0.1rem solid transparent}:host input[type=checkbox]:disabled:active+label.pn-checkbox{-webkit-box-shadow:none;box-shadow:none}";
+
+const PnFilterCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.value = undefined;
+    this.name = undefined;
+    this.checkboxid = undefined;
+    this.disabled = false;
+    this.checked = false;
+    this.indeterminate = false;
+  }
+  handlechange() {
+    this.indeterminate = false;
+  }
+  componentDidLoad() {
+    this.checkAndSetIndeterminateState();
+    this.bindEvents();
+  }
+  componentDidUpdate() {
+    this.checkAndSetIndeterminateState();
+  }
+  bindEvents() {
+    const labels = document.querySelectorAll('label[for="' + this.checkboxid + '"]');
+    labels.forEach((label) => {
+      label.addEventListener('click', () => {
+        this.hostElement.shadowRoot.querySelector('label').click();
+      });
+    });
+    const checkboxInput = this.hostElement.shadowRoot.querySelector('input');
+    checkboxInput.addEventListener('change', this.onCheckboxChange.bind(this, checkboxInput));
+  }
+  onCheckboxChange(checkboxInput) {
+    let outsideInput = this.hostElement.querySelector("input.hidden-" + this.checkboxid);
+    if (outsideInput) {
+      outsideInput.value = (checkboxInput.checked) ? this.value : "";
+      outsideInput.dispatchEvent(new CustomEvent("change", { detail: outsideInput }));
+    }
+  }
+  checkAndSetIndeterminateState() {
+    let checkbox = this.hostElement.querySelector(`#${this.checkboxid}`);
+    if (checkbox) {
+      checkbox.indeterminate = this.indeterminate;
+    }
+  }
+  renderInputOutsideShadowRoot() {
+    var _a;
+    let input = this.hostElement.querySelector("input.hidden-" + this.checkboxid);
+    if (!input) {
+      input = this.hostElement.ownerDocument.createElement("input");
+      input.type = "hidden";
+      input.classList.add("hidden-" + this.checkboxid);
+      this.hostElement.appendChild(input);
+    }
+    input.name = (_a = this.name) !== null && _a !== void 0 ? _a : this.checkboxid;
+  }
+  render() {
+    this.renderInputOutsideShadowRoot();
+    return (h(Host, { checked: this.checked, id: this.checkboxid }, h("input", { type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked }), h("label", { htmlFor: this.checkboxid, class: "pn-checkbox" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { class: "indeterminate-path", points: "4,12 20,12", "stroke-width": "3" })))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnFilterCheckboxCss; }
+}, [1, "pn-filter-checkbox", {
+    "value": [520],
+    "name": [1],
+    "checkboxid": [1],
+    "disabled": [4],
+    "checked": [4],
+    "indeterminate": [1028]
+  }, [[0, "change", "handlechange"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-filter-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-filter-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnFilterCheckbox);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnFilterCheckbox as P, defineCustomElement as d };

package/components/pn-multi-row-connected-dropdown-row.d.ts

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

package/components/pn-multi-row-connected-dropdown-row.js

@@ -0,0 +1,6 @@
+import { P as PnMultiRowConnectedDropdownRow$1, d as defineCustomElement$1 } from './pn-multi-row-connected-dropdown-row2.js';
+
+const PnMultiRowConnectedDropdownRow = PnMultiRowConnectedDropdownRow$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnMultiRowConnectedDropdownRow, defineCustomElement };