@postnord/pn-marketweb-components 2.4.16 → 2.4.18

package/components/index3.js

@@ -1,187 +1,70 @@
-import { getRenderingRef, forceUpdate } from '@stencil/core/internal/client';
-
-const appendToMap = (map, propName, value) => {
-    const items = map.get(propName);
-    if (!items) {
-        map.set(propName, [value]);
-    }
-    else if (!items.includes(value)) {
-        items.push(value);
-    }
-};
-const debounce = (fn, ms) => {
-    let timeoutId;
-    return (...args) => {
-        if (timeoutId) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-            timeoutId = 0;
-            fn(...args);
-        }, ms);
-    };
-};
-
 /**
- * Check if a possible element isConnected.
- * The property might not be there, so we check for it.
- *
- * We want it to return true if isConnected is not a property,
- * otherwise we would remove these elements and would not update.
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing. The function also has a property 'clear' 
+ * that is a function which will clear the timer to prevent previously scheduled executions. 
  *
- * Better leak in Edge than to be useless.
+ * @source underscore.js
+ * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
+ * @param {Function} function to wrap
+ * @param {Number} timeout in ms (`100`)
+ * @param {Boolean} whether to execute at the beginning (`false`)
+ * @api public
  */
-const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
-const cleanupElements = debounce((map) => {
-    for (let key of map.keys()) {
-        map.set(key, map.get(key).filter(isConnected));
+function debounce(func, wait, immediate){
+  var timeout, args, context, timestamp, result;
+  if (null == wait) wait = 100;
+
+  function later() {
+    var last = Date.now() - timestamp;
+
+    if (last < wait && last >= 0) {
+      timeout = setTimeout(later, wait - last);
+    } else {
+      timeout = null;
+      if (!immediate) {
+        result = func.apply(context, args);
+        context = args = null;
+      }
     }
-}, 2000);
-const stencilSubscription = () => {
-    if (typeof getRenderingRef !== 'function') {
-        // If we are not in a stencil project, we do nothing.
-        // This function is not really exported by @stencil/core.
-        return {};
+  }
+  var debounced = function(){
+    context = this;
+    args = arguments;
+    timestamp = Date.now();
+    var callNow = immediate && !timeout;
+    if (!timeout) timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(context, args);
+      context = args = null;
     }
-    const elmsToUpdate = new Map();
-    return {
-        dispose: () => elmsToUpdate.clear(),
-        get: (propName) => {
-            const elm = getRenderingRef();
-            if (elm) {
-                appendToMap(elmsToUpdate, propName, elm);
-            }
-        },
-        set: (propName) => {
-            const elements = elmsToUpdate.get(propName);
-            if (elements) {
-                elmsToUpdate.set(propName, elements.filter(forceUpdate));
-            }
-            cleanupElements(elmsToUpdate);
-        },
-        reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
-            cleanupElements(elmsToUpdate);
-        },
-    };
-};
 
-const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
-    const handlers = {
-        dispose: [],
-        get: [],
-        set: [],
-        reset: [],
-    };
-    const reset = () => {
-        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
-        handlers.reset.forEach((cb) => cb());
-    };
-    const dispose = () => {
-        // Call first dispose as resetting the state would
-        // cause less updates ;)
-        handlers.dispose.forEach((cb) => cb());
-        reset();
-    };
-    const get = (propName) => {
-        handlers.get.forEach((cb) => cb(propName));
-        return states.get(propName);
-    };
-    const set = (propName, value) => {
-        const oldValue = states.get(propName);
-        if (shouldUpdate(value, oldValue, propName)) {
-            states.set(propName, value);
-            handlers.set.forEach((cb) => cb(propName, value, oldValue));
-        }
-    };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(defaultState, {
-            get(_, propName) {
-                return get(propName);
-            },
-            ownKeys(_) {
-                return Array.from(states.keys());
-            },
-            getOwnPropertyDescriptor() {
-                return {
-                    enumerable: true,
-                    configurable: true,
-                };
-            },
-            has(_, propName) {
-                return states.has(propName);
-            },
-            set(_, propName, value) {
-                set(propName, value);
-                return true;
-            },
-        }));
-    const on = (eventName, callback) => {
-        handlers[eventName].push(callback);
-        return () => {
-            removeFromArray(handlers[eventName], callback);
-        };
-    };
-    const onChange = (propName, cb) => {
-        const unSet = on('set', (key, newValue) => {
-            if (key === propName) {
-                cb(newValue);
-            }
-        });
-        const unReset = on('reset', () => cb(defaultState[propName]));
-        return () => {
-            unSet();
-            unReset();
-        };
-    };
-    const use = (...subscriptions) => {
-        const unsubs = subscriptions.reduce((unsubs, subscription) => {
-            if (subscription.set) {
-                unsubs.push(on('set', subscription.set));
-            }
-            if (subscription.get) {
-                unsubs.push(on('get', subscription.get));
-            }
-            if (subscription.reset) {
-                unsubs.push(on('reset', subscription.reset));
-            }
-            if (subscription.dispose) {
-                unsubs.push(on('dispose', subscription.dispose));
-            }
-            return unsubs;
-        }, []);
-        return () => unsubs.forEach((unsub) => unsub());
-    };
-    const forceUpdate = (key) => {
-        const oldValue = states.get(key);
-        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
-    };
-    return {
-        state,
-        get,
-        set,
-        on,
-        onChange,
-        use,
-        dispose,
-        reset,
-        forceUpdate,
-    };
-};
-const removeFromArray = (array, item) => {
-    const index = array.indexOf(item);
-    if (index >= 0) {
-        array[index] = array[array.length - 1];
-        array.length--;
+    return result;
+  };
+
+  debounced.clear = function() {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
     }
-};
+  };
+  
+  debounced.flush = function() {
+    if (timeout) {
+      result = func.apply(context, args);
+      context = args = null;
+      
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+
+  return debounced;
+}
+// Adds compatibility for ES modules
+debounce.debounce = debounce;
 
-const createStore = (defaultState, shouldUpdate) => {
-    const map = createObservableMap(defaultState, shouldUpdate);
-    map.use(stencilSubscription());
-    return map;
-};
+var debounce_1 = debounce;
 
-export { createStore as c };
+export { debounce_1 as d };

package/{esm/index-7f77b0ba.js → components/index4.js}

@@ -1,4 +1,4 @@
-import { c as getRenderingRef, f as forceUpdate } from './index-c118284d.js';
+import { getRenderingRef, forceUpdate } from '@stencil/core/internal/client';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/components/pn-date-and-time.d.ts

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

package/components/pn-date-and-time.js

@@ -0,0 +1,186 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const pnDateAndTimeCss = "pn-date-and-time label{color:#5E554A;font-size:1.4rem}pn-date-and-time .time-separator{margin-top:auto;margin-bottom:auto}pn-date-and-time .date-and-time-group{margin-bottom:1rem}pn-date-and-time .date-and-time-row{display:-ms-flexbox;display:flex;gap:1rem}pn-date-and-time .helper-text{margin-top:0.2rem;color:#5E554A;display:block}pn-date-and-time .error-message{color:#a70707}";
+
+const PnDateAndTime$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.dateandtimerange = createEvent(this, "dateandtimerange", 7);
+    this.pnDatePicker = null;
+    this.pnTimeFromHourDropdown = null;
+    this.pnTimeFromMinuteDropdown = null;
+    this.pnTimeToHourDropdown = null;
+    this.pnTimeToMinuteDropdown = null;
+    this.languageCode = null;
+    this.dateAndTimeLabel = '';
+    this.dateDaysFromToday = 0;
+    this.validTimeRangeMinutes = 0;
+    this.errorMessage = '';
+    this.dateHelperText = '';
+    this.timeHelperText = '';
+    this.disableWeekends = false;
+    this.datePlacehodler = '';
+    this.language = null;
+    this.hourArr = null;
+    this.minuteArr = null;
+    this.formValue = null;
+    this.invalidTimespan = false;
+    this.selectedDate = null;
+    this.selectedFromHour = null;
+    this.selectedFromMin = null;
+    this.selectedToHour = null;
+    this.selectedToMin = null;
+    this.firstValidDateString = '';
+    this.lastValidDateString = '';
+  }
+  componentWillLoad() {
+    this.setInitialValues();
+  }
+  componentDidLoad() {
+    this.setDefaultHiddenValue();
+    this.addEventHandlers();
+  }
+  async setInitialValues() {
+    this.setLangugaeCode();
+    this.setFirstValidDate();
+    this.hourArr = this.getNumbersAsStringArr(6, 22, 1);
+    this.minuteArr = this.getNumbersAsStringArr(0, 50, 10);
+  }
+  setFirstValidDate() {
+    var _a;
+    const date = new Date();
+    date.setDate((_a = date.getDate() + this.dateDaysFromToday) !== null && _a !== void 0 ? _a : 0);
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    const endYear = year + 2;
+    this.firstValidDateString = `${year.toString()}-${month}-${day}`;
+    this.lastValidDateString = `${endYear.toString()}-${month}-${day}`;
+  }
+  setLangugaeCode() {
+    if (typeof this.languageCode === 'string' && this.languageCode.trim() === '') {
+      this.language = document.querySelector('html').lang;
+    }
+    else {
+      this.language = this.languageCode;
+    }
+  }
+  setDefaultHiddenValue() {
+    this.selectedFromHour = parseInt(this.hourArr[8]);
+    this.selectedFromMin = 0;
+    this.selectedToHour = parseInt(this.hourArr[12]);
+    this.selectedToMin = 0;
+    this.updateHiddenValue();
+  }
+  addEventHandlers() {
+    this.pnDatePicker.addEventListener('dateselection', this.handleChange.bind(this));
+    this.pnTimeFromHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));
+    this.pnTimeFromMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));
+    this.pnTimeToHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));
+    this.pnTimeToMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));
+  }
+  handleChange(e) {
+    const target = e.target;
+    if (target === this.pnDatePicker) {
+      this.selectedDate = e.detail;
+    }
+    if (target === this.pnTimeFromHourDropdown || target === this.pnTimeFromMinuteDropdown || target === this.pnTimeToHourDropdown || target === this.pnTimeToMinuteDropdown) {
+      this.handleTimeChange();
+    }
+    this.updateHiddenValue();
+  }
+  handleTimeChange() {
+    var _a, _b, _c, _d;
+    const fromHourString = (_a = this.pnTimeFromHourDropdown.querySelector('.current-selection .pn-option-content')) === null || _a === void 0 ? void 0 : _a.textContent;
+    const fromMinString = (_b = this.pnTimeFromMinuteDropdown.querySelector('.current-selection .pn-option-content')) === null || _b === void 0 ? void 0 : _b.textContent;
+    const toHourString = (_c = this.pnTimeToHourDropdown.querySelector('.current-selection .pn-option-content')) === null || _c === void 0 ? void 0 : _c.textContent;
+    const toMinString = (_d = this.pnTimeToMinuteDropdown.querySelector('.current-selection .pn-option-content')) === null || _d === void 0 ? void 0 : _d.textContent;
+    this.selectedFromHour = parseInt(fromHourString);
+    this.selectedFromMin = parseInt(fromMinString);
+    this.selectedToHour = parseInt(toHourString);
+    this.selectedToMin = parseInt(toMinString);
+  }
+  updateHiddenValue() {
+    const date = new Date();
+    const dateFrom = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedFromHour, this.selectedFromMin, 0, 0);
+    const dateTo = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedToHour, this.selectedToMin, 0, 0);
+    this.validateTimeRange(dateFrom.getTime(), dateTo.getTime());
+    if (this.invalidTimespan || !this.selectedDate) {
+      this.formValue = '';
+    }
+    else {
+      const fromMin = this.selectedFromMin.toString().padStart(2, '0');
+      const toMin = this.selectedToMin.toString().padStart(2, '0');
+      this.formValue = `${this.selectedDate}, ${this.selectedFromHour}:${fromMin}-${this.selectedToHour}:${toMin}`;
+    }
+    this.dateandtimerange.emit(this.formValue);
+  }
+  validateTimeRange(from, to) {
+    let differenceValue = (to - from) / 1000;
+    differenceValue /= 60;
+    this.invalidTimespan = differenceValue < this.validTimeRangeMinutes ? true : false;
+  }
+  getNumbersAsStringArr(start, stop, step) {
+    const arr = Array.from({ length: (stop - start) / step + 1 }, (_, index) => start + index * step);
+    const result = [];
+    arr.forEach(item => {
+      const itemAsString = item.toString().padStart(2, '0');
+      result.push(itemAsString);
+    });
+    return result;
+  }
+  removePnOptionSelected() {
+    const selectOptions = this.hostElement.querySelectorAll('pn-option');
+    selectOptions.forEach(elm => {
+      elm.removeAttribute('selected');
+    });
+  }
+  render() {
+    var _a, _b, _c, _d;
+    return (h(Host, null, h("div", { class: "date-and-time-group" }, this.dateAndTimeLabel ? (h("div", { class: "date-and-time-row" }, h("label", null, this.dateAndTimeLabel))) : null, h("div", { class: "date-and-time-row" }, h("pn-date-picker", { ref: el => (this.pnDatePicker = el), range: "false", "disable-weekends": this.disableWeekends, "min-date": this.firstValidDateString, "max-date": this.lastValidDateString, language: this.language, placeholder: this.datePlacehodler })), this.dateHelperText ? h("small", { class: "date-and-time-row helper-text" }, this.dateHelperText) : null), h("div", { class: "date-and-time-group" }, h("div", { class: "date-and-time-row" }, h("pn-select", { ref: el => (this.pnTimeFromHourDropdown = el), name: "date-and-time-from-houre", placeholder: this.hourArr[8], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_a = this.hourArr) === null || _a === void 0 ? void 0 : _a.map((hour) => (h("pn-option", null, hour)))), h("pn-select", { ref: el => (this.pnTimeFromMinuteDropdown = el), name: "date-and-time-from-minute", placeholder: this.minuteArr[0], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_b = this.minuteArr) === null || _b === void 0 ? void 0 : _b.map((minute) => (h("pn-option", null, minute)))), h("div", { class: "time-separator" }, h("span", null, "-")), h("pn-select", { ref: el => (this.pnTimeToHourDropdown = el), name: "date-and-time-to-hour", placeholder: this.hourArr[12], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_c = this.hourArr) === null || _c === void 0 ? void 0 : _c.map((hour) => (h("pn-option", null, hour)))), h("pn-select", { ref: el => (this.pnTimeToMinuteDropdown = el), name: "date-and-time-to-minute", placeholder: this.minuteArr[0], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_d = this.minuteArr) === null || _d === void 0 ? void 0 : _d.map((minute) => (h("pn-option", null, minute))))), this.timeHelperText ? h("small", { class: "date-and-time-row helper-text" }, this.timeHelperText) : null, this.invalidTimespan && this.errorMessage ? (h("small", { class: "date-and-time-row error-message" }, h("pn-icon", { symbol: "alert-info-circle", small: "false", color: "warning" }), this.errorMessage)) : null)));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnDateAndTimeCss; }
+}, [0, "pn-date-and-time", {
+    "languageCode": [1, "language-code"],
+    "dateAndTimeLabel": [1, "date-and-time-label"],
+    "dateDaysFromToday": [2, "date-days-from-today"],
+    "validTimeRangeMinutes": [2, "valid-time-range-minutes"],
+    "errorMessage": [1, "error-message"],
+    "dateHelperText": [1, "date-helper-text"],
+    "timeHelperText": [1, "time-helper-text"],
+    "disableWeekends": [4, "disable-weekends"],
+    "datePlacehodler": [1, "date-placehodler"],
+    "language": [32],
+    "hourArr": [32],
+    "minuteArr": [32],
+    "formValue": [32],
+    "invalidTimespan": [32],
+    "selectedDate": [32],
+    "selectedFromHour": [32],
+    "selectedFromMin": [32],
+    "selectedToHour": [32],
+    "selectedToMin": [32],
+    "firstValidDateString": [32],
+    "lastValidDateString": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-date-and-time"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-date-and-time":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnDateAndTime$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnDateAndTime = PnDateAndTime$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnDateAndTime, defineCustomElement };

package/components/pn-dropdown-choice-adds-row.d.ts

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