@postnord/pn-marketweb-components 2.4.17 → 2.4.18

package/collection/components/input/pn-dropdown-choice-adds-row/pn-dropdown-choice-adds-row.stories.js

@@ -0,0 +1,43 @@
+import readme from './readme.md';
+
+export default {
+  title: 'input/Dropdownlist choice adds new row',
+  parameters: {
+    notes: readme,
+  },
+};
+
+const Template = ({ ...args }) => {
+  return `
+    <pn-dropdown-choice-adds-row
+      dropdown-data='${args.dropdownData}'
+      add-row-dropdown-label="${args.addRowDropdownLabel}"
+      add-row-dropdown-placeholder="${args.addRowDropdownPlaceholder}"
+      row-name-label="${args.rowNameLabel}"
+      row-has-dropdown="${args.rowHasDropdown}"
+      row-dropdown-label="${args.rowDropdownLabel}"
+      row-dropdown-placeholder="${args.rowDropdownPlaceholder}"
+      row-input-label="${args.rowInputLabel}"
+      row-delete-button-text="${args.rowDeleteButtonText}"
+      total-input-limit="${args.totalInputLimit}"
+      input-limit-warning="${args.inputLimitWarning}"
+      >
+    </pn-dropdown-choice-adds-row>`;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  dropdownData:
+    '[{"caption":"First","value":"first","values":[{"caption":"First-child 1","value":"First-child 1"},{"caption":"First-child 2","value":"First-child 2"}]},{"caption":"Second","value":"second","values":[{"caption":"Second-child 1","value":"Second-child 1"},{"caption":"Second-child 2","value":"Second-child 2"}]},{"caption":"Third","value":"Third","values":[]}]',
+  addRowDropdownName: '__addrowdropdown',
+  addRowDropdownPlaceholder: '-- Vaelg her --',
+  addRowDropdownLabel: 'Produkter til afhentning:*',
+  rowNameLabel: 'Produkt',
+  rowHasDropdown: true,
+  rowDropdownLabel: 'Transportenhed',
+  rowDropdownPlaceholder: '-- Vaelg her --',
+  rowInputLabel: 'Antal',
+  rowDeleteButtonText: 'Slet',
+  totalInputLimit: 30,
+  inputLimitWarning: 'warning',
+};

package/collection/components/input/pn-dropdown-choice-adds-row/types.js

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

package/components/index.d.ts

@@ -9,6 +9,7 @@ export { PnChoiceButton as PnChoiceButton } from '../types/components/input/pn-c
 export { PnCustomernumberSelector as PnCustomernumberSelector } from '../types/components/profile/pn-customernumber-selector/pn-customernumber-selector';
 export { PnProfileSelectorOption as PnCustomernumberSelectorOption } from '../types/components/profile/pn-customernumber-selector/pn-customernumber-selector-option';
 export { PnDateAndTime as PnDateAndTime } from '../types/components/input/pn-date-and-time/pn-date-and-time';
+export { pnDropdownChoiceAddsRow as PnDropdownChoiceAddsRow } from '../types/components/input/pn-dropdown-choice-adds-row/pn-dropdown-choice-adds-row';
 export { PnFilterCheckbox as PnFilterCheckbox } from '../types/components/input/pn-filter-checkbox/pn-filter-checkbox';
 export { PnfindPrice as PnFindPrice } from '../types/components/widgets/pn-find-price/pn-find-price';
 export { PnfindPriceResult as PnFindPriceResult } from '../types/components/widgets/pn-find-price/pn-find-price-result';

package/components/index.js

@@ -9,6 +9,7 @@ export { PnChoiceButton, defineCustomElement as defineCustomElementPnChoiceButto
 export { PnCustomernumberSelector, defineCustomElement as defineCustomElementPnCustomernumberSelector } from './pn-customernumber-selector.js';
 export { PnCustomernumberSelectorOption, defineCustomElement as defineCustomElementPnCustomernumberSelectorOption } from './pn-customernumber-selector-option.js';
 export { PnDateAndTime, defineCustomElement as defineCustomElementPnDateAndTime } from './pn-date-and-time.js';
+export { PnDropdownChoiceAddsRow, defineCustomElement as defineCustomElementPnDropdownChoiceAddsRow } from './pn-dropdown-choice-adds-row.js';
 export { PnFilterCheckbox, defineCustomElement as defineCustomElementPnFilterCheckbox } from './pn-filter-checkbox.js';
 export { PnFindPrice, defineCustomElement as defineCustomElementPnFindPrice } from './pn-find-price.js';
 export { PnFindPriceResult, defineCustomElement as defineCustomElementPnFindPriceResult } from './pn-find-price-result.js';

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/components/index4.js

@@ -0,0 +1,187 @@
+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.
+ *
+ * Better leak in Edge than to be useless.
+ */
+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));
+    }
+}, 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 {};
+    }
+    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--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+export { createStore as c };

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

@@ -1,6 +1,6 @@
 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: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 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() {

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;