@swisspost/design-system-components 10.0.0-next.38 → 10.0.0-next.40

package/dist/collection/components/post-popovercontainer/post-popovercontainer.js

@@ -1,7 +1,8 @@
-import { Host, h } from "@stencil/core";
-import { IS_BROWSER } from "../../utils/index";
+import { Host, h, } from "@stencil/core";
+import { IS_BROWSER, checkEmptyOrOneOf, checkEmptyOrType } from "../../utils/index";
 import { version } from "../../../../package";
 import { arrow, autoUpdate, computePosition, flip, inline, limitShift, offset, shift, size, } from "@floating-ui/dom";
+import { PLACEMENT_TYPES } from "../../types/index";
 // Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green
 import { apply, isSupported } from "@oddbird/popover-polyfill/dist/popover-fn.js";
 /**
@@ -16,6 +17,15 @@ export class PostPopovercontainer {
         this.manualClose = false;
         this.safeSpace = undefined;
     }
+    validatePlacement() {
+        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
+    }
+    validateEdgeGap() {
+        checkEmptyOrType(this, 'edgeGap', 'number');
+    }
+    validateSafeSpace() {
+        checkEmptyOrOneOf(this, 'safeSpace', ['triangle', 'trapezoid']);
+    }
     /**
      * Updates cursor position for safe space feature when popover is open.
      * Sets CSS custom properties for dynamic styling of safe area.
@@ -225,9 +235,9 @@ export class PostPopovercontainer {
     }
     render() {
         const animationClass = this.animation ? `animate-${this.animation}` : '';
-        return (h(Host, { key: '980c2d7531ef77f71ea51b069dc20bbf40cd0ac4', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '9fa08070a5e7f864aade0dc1afc2917e54693109', class: animationClass }, this.arrow && (h("span", { key: '4700f55c721387f2d918214309e87c9057e4831f', class: "arrow", ref: el => {
+        return (h(Host, { key: 'c5f30bf3c07bbc6af797368b4951c9a1b5d596ef', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: 'afae0976b169831fe49df860d44cd80fa0ae0b3a', class: animationClass }, this.arrow && (h("span", { key: '08e89fda623b139c1b1fba283a9d508757cd1b3d', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: 'ec5304bc77d4f3eb91c79fb2a37d096b4d43b888' }))));
+            } })), h("slot", { key: 'fa3f48c319dca350cbd456f2daf8ab5975b99d8f' }))));
     }
     static get is() { return "post-popovercontainer"; }
     static get originalStyleUrls() {
@@ -460,6 +470,18 @@ export class PostPopovercontainer {
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "placement",
+                "methodName": "validatePlacement"
+            }, {
+                "propName": "edgeGap",
+                "methodName": "validateEdgeGap"
+            }, {
+                "propName": "safeSpace",
+                "methodName": "validateSafeSpace"
+            }];
+    }
 }
 PostPopovercontainer.STATIC_SIDES = {
     top: 'bottom',

package/dist/collection/components/post-rating/post-rating.js

@@ -1,6 +1,21 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { version } from "../../../../package";
+import { checkRequiredAndType } from "../../utils/index";
 export class PostRating {
+    validateLabel() {
+        checkRequiredAndType(this, 'label', 'string');
+    }
+    validateStars() {
+        checkRequiredAndType(this, 'stars', 'number');
+    }
+    validateCurrentRating() {
+        checkRequiredAndType(this, 'currentRating', 'number');
+    }
+    componentWillLoad() {
+        this.validateLabel();
+        this.validateStars();
+        this.validateCurrentRating();
+    }
     constructor() {
         this.hasChanged = false;
         this.hoveredIndex = undefined;
@@ -64,7 +79,7 @@ export class PostRating {
         }
     }
     render() {
-        return (h(Host, { key: '4ccdf384b9a4cfc462d5d3f4a7caab659b6ba2b0', "data-version": version }, h("div", { key: '7ab53083bcdff6586b1de7f1c9e5fa546728fc6f', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: '588c5d3c4600faa939cab4b673e27d08182323da', "data-version": version }, h("div", { key: '8fced4724505cdc2f3fb3160cf276ed1280b5431', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),
@@ -199,4 +214,16 @@ export class PostRating {
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "validateLabel"
+            }, {
+                "propName": "stars",
+                "methodName": "validateStars"
+            }, {
+                "propName": "currentRating",
+                "methodName": "validateCurrentRating"
+            }];
+    }
 }

package/dist/collection/components/post-tab-header/post-tab-header.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
-import { checkNonEmpty } from "../../utils/index";
+import { checkRequiredAndType } from "../../utils/index";
 import { nanoid } from "nanoid";
 /**
  * @slot default - Slot for the content of the tab header.
@@ -11,13 +11,13 @@ export class PostTabHeader {
         this.panel = undefined;
     }
     validateFor() {
-        checkNonEmpty(this, 'panel');
+        checkRequiredAndType(this, 'panel', 'string');
     }
     componentWillLoad() {
         this.tabId = `tab-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '5046c46fa27fd6586c694420abf197b227b56520', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '78c2f660e4f2307ca95a63f4cfd90d08cc6942df' })));
+        return (h(Host, { key: '829043a1f87aef4e965e3f830cc29eca5ed13864', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: 'c1d6a7d9120b494e898a502eac31341d7fc8d87b' })));
     }
     static get is() { return "post-tab-header"; }
     static get encapsulation() { return "shadow"; }
@@ -37,16 +37,11 @@ export class PostTabHeader {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "HTMLPostTabPanelElement['name']",
+                    "original": "string",
                     "resolved": "string",
-                    "references": {
-                        "HTMLPostTabPanelElement": {
-                            "location": "global",
-                            "id": "global::HTMLPostTabPanelElement"
-                        }
-                    }
+                    "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/components/post-tab-panel/post-tab-panel.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 import { nanoid } from "nanoid";
+import { checkRequiredAndType } from "../../utils/index";
 /**
  * @slot default - Slot for placing the content of the tab panel.
  */
@@ -9,12 +10,16 @@ export class PostTabPanel {
         this.panelId = undefined;
         this.name = undefined;
     }
+    validateName() {
+        checkRequiredAndType(this, 'name', 'string');
+    }
     componentWillLoad() {
+        this.validateName();
         // get the id set on the host element or use a random id by default
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '98427b35c6637af65930b69b75ea56facf044000', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '4fa02667e8ff088c10122e010cfd7efe8ff3af57' })));
+        return (h(Host, { key: '366d1b6074bf4212e7fc56500680ed12d8d83599', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '940f8dcf9e1302dfdd1c859e356799a2f2c7fe54' })));
     }
     static get is() { return "post-tab-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -38,7 +43,7 @@ export class PostTabPanel {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -55,4 +60,10 @@ export class PostTabPanel {
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "validateName"
+            }];
+    }
 }

package/dist/collection/components/post-tabs/post-tabs.js

@@ -141,7 +141,7 @@ export class PostTabs {
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: 'dae24eee55a75f9b825f590883a9c1e896c1e9fc', "data-version": version }, h("div", { key: '0a26de80b8267ddc30455b0b5afbf10ae521232b', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '826cb0a4355eeb5ddc07288e1e68fc72785c095f', class: "tabs", role: "tablist" }, h("slot", { key: '94ce90bc3dc8ff4b5012fcfa3c0039b188c14002', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '462f80f3368431344910cc317f1c0f42112dc99a', class: "tab-content", part: "content" }, h("slot", { key: '57a80ac790ca75f3b62382994c21a3a3c78004cc', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: '621652f2abeb8162e2d67261c57000a9d6e7b4ca', "data-version": version }, h("div", { key: '9cf2693b826588d3f099d30157886f70c34aa8b7', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '4d4a0f242a30ec484c4557880b4c184b47d74612', class: "tabs", role: "tablist" }, h("slot", { key: '44df627213090710a6171fae2b1b8698e1f68fa5', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'ec23dfe409569899a3b95cf3e2cd6fe2deae8c9b', class: "tab-content", part: "content" }, h("slot", { key: '16374ab8fae907d5d2c7229069dd7511f118c3ac', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     static get is() { return "post-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -171,7 +171,7 @@ export class PostTabs {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The name of the panel that is initially shown.\nIf not specified, it defaults to the panel associated with the first tab.\n\n**Changing this value after initialization has no effect.**"

package/dist/collection/components/post-tag/post-tag.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
+import { checkEmptyOrOneOf, checkEmptyOrType } from "../../utils/index";
 /**
  * @slot default - Content to place in the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline content</a>.</p>
  */
@@ -7,16 +8,21 @@ export class PostTag {
     constructor() {
         this.classes = undefined;
         this.variant = undefined;
-        this.size = null;
-        this.icon = null;
+        this.size = undefined;
+        this.icon = undefined;
         this.setClasses = this.setClasses.bind(this);
     }
     variantChanged() {
+        checkEmptyOrOneOf(this, 'variant', ['white', 'info', 'success', 'error', 'warning', 'yellow']);
         this.setClasses();
     }
     sizeChanged() {
+        checkEmptyOrOneOf(this, 'size', ['sm']);
         this.setClasses();
     }
+    validateName() {
+        checkEmptyOrType(this, 'icon', 'string');
+    }
     setClasses() {
         this.classes = [
             'tag',
@@ -26,11 +32,16 @@ export class PostTag {
             .filter(c => c !== null)
             .join(' ');
     }
+    componentWillLoad() {
+        this.validateName();
+        this.variantChanged();
+        this.sizeChanged();
+    }
     connectedCallback() {
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: '4ca273166b81099dd8fc0f69d3d38215e3d7ccbc', "data-version": version }, h("div", { key: 'b6c4eb6a3bf8cbaad18cf6277dab79bd6e350f0a', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '4f9e8cf6b2c723e31d60e30464c1106a9f72b5b4', class: "tag-text" }, h("slot", { key: '819a4e6ff743386f8d5d6b1d94dea9ee4a612784' })))));
+        return (h(Host, { key: '42743d0a7f87680223eef33ff9295827f3c80d4c', "data-version": version }, h("div", { key: '392ad72b23f638d7fdefe7acb20f45c9dcf2d630', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '71b7dc696dd392dc9b195b363cd79a1fc0e0a708', class: "tag-text" }, h("slot", { key: '91610aff7550df9891fb617d2d9e5bcbcffbe256' })))));
     }
     static get is() { return "post-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -55,7 +66,7 @@ export class PostTag {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines the color variant of the component."
@@ -67,25 +78,24 @@ export class PostTag {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "null | 'sm'",
+                    "original": "'sm'",
                     "resolved": "\"sm\"",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines the size of the component."
                 },
                 "attribute": "size",
-                "reflect": false,
-                "defaultValue": "null"
+                "reflect": false
             },
             "icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "null | string",
+                    "original": "string",
                     "resolved": "string",
                     "references": {}
                 },
@@ -96,8 +106,7 @@ export class PostTag {
                     "text": "Defines the icon `name` inside of the component.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>\nTo learn which icons are available, please visit our <a href=\"/?path=/docs/0dcfe3c0-bfc0-4107-b43b-7e9d825b805f--docs\">icon library</a>."
                 },
                 "attribute": "icon",
-                "reflect": false,
-                "defaultValue": "null"
+                "reflect": false
             }
         };
     }
@@ -114,6 +123,9 @@ export class PostTag {
             }, {
                 "propName": "size",
                 "methodName": "sizeChanged"
+            }, {
+                "propName": "icon",
+                "methodName": "validateName"
             }];
     }
 }

package/dist/collection/components/post-togglebutton/post-togglebutton.js

@@ -1,6 +1,5 @@
 import { Host, h } from "@stencil/core";
 import { version } from "../../../../package";
-import { checkType } from "../../utils/index";
 /**
  * @slot default - Slot for the content of the button.
  */
@@ -18,17 +17,13 @@ export class PostTogglebutton {
         };
         this.toggled = false;
     }
-    validateToggled() {
-        checkType(this, 'toggled', 'boolean');
-    }
     componentWillLoad() {
-        this.validateToggled();
         // add event listener to not override listener that might be set on the host
         this.host.addEventListener('click', () => this.handleClick());
         this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
     }
     render() {
-        return (h(Host, { key: '3a1429a9b67b8cfafae184fe0d060ee3a04974e0', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '9ab1537574423740fc335fde732c699698acac25' })));
+        return (h(Host, { key: '1025fb988460e85c92e49241889363e1bcc840eb', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '20d3eb9415685fb9a00a5613474c432f6638692e' })));
     }
     static get is() { return "post-togglebutton"; }
     static get encapsulation() { return "shadow"; }
@@ -65,10 +60,4 @@ export class PostTogglebutton {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "toggled",
-                "methodName": "validateToggled"
-            }];
-    }
 }

package/dist/collection/components/post-tooltip/post-tooltip.css

@@ -1 +1 @@
-:host{display:none}:host([open]){display:block}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer>div{padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:200px;min-height:32px}
+:host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer>div{padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:280px;min-height:32px;word-wrap:break-word;white-space:normal}

package/dist/collection/components/post-tooltip/post-tooltip.js

@@ -1,18 +1,19 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
-import { checkType } from "../../utils/index";
+import { checkEmptyOrOneOf } from "../../utils/index";
+import { PLACEMENT_TYPES } from "../../types/index";
 export class PostTooltip {
     constructor() {
         this.placement = 'top';
         this.arrow = false;
-        this.animation = null;
+        this.animation = undefined;
         this.open = false;
     }
-    validateOpen() {
-        checkType(this, 'open', 'boolean', 'The "open" property of the post-tooltip must be a boolean.');
+    validatePlacement() {
+        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
     }
-    connectedCallback() {
-        this.validateOpen();
+    componentWillLoad() {
+        this.validatePlacement();
     }
     componentDidLoad() {
         if (!this.host.id) {
@@ -53,7 +54,7 @@ export class PostTooltip {
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: 'd6a76533f22e354ff89f15c1e9a10e20fe471579', "data-version": version, role: "tooltip" }, h("post-popovercontainer", { key: '60076aaa184ae98e9e813400cc2d03f5add274df', safeSpace: 'trapezoid', class: popoverClass, arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '1d5ea42696cc60a8a84ff0ecc29e82152d028ba4' }))));
+        return (h(Host, { key: '1e1d3f4e204b42c8202af63bd7dec12de3c8e16a', "data-version": version, role: "tooltip" }, h("post-popovercontainer", { key: 'e410952b4e75915e51d57eec2dbecce2b5d55733', safeSpace: "trapezoid", class: popoverClass, arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '494e3136dbe96cf611a41753711efb03cab30a12' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -115,7 +116,7 @@ export class PostTooltip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'pop-in' | null",
+                    "original": "'pop-in'",
                     "resolved": "\"pop-in\"",
                     "references": {}
                 },
@@ -126,8 +127,7 @@ export class PostTooltip {
                     "text": "Choose a tooltip animation"
                 },
                 "attribute": "animation",
-                "reflect": false,
-                "defaultValue": "null"
+                "reflect": false
             },
             "open": {
                 "type": "boolean",
@@ -236,8 +236,8 @@ export class PostTooltip {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "open",
-                "methodName": "validateOpen"
+                "propName": "placement",
+                "methodName": "validatePlacement"
             }];
     }
 }

package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { checkType, IS_BROWSER } from "../../utils/index";
+import { checkEmptyOrType, IS_BROWSER } from "../../utils/index";
 import { version } from "../../../../package";
 import isFocusable from "ally.js/is/focusable";
 const TRIGGER_EVENTS = ['pointerenter', 'pointerleave', 'focusin', 'focusout', 'long-press'];
@@ -27,15 +27,13 @@ export class PostTooltipTrigger {
         this.boundTooltipHandler = this.handleTooltipEvent.bind(this);
     }
     validateControlFor() {
-        checkType(this, 'for', 'string');
+        checkEmptyOrType(this, 'for', 'string');
     }
     get tooltip() {
         if (!IS_BROWSER)
             return null;
         const ref = document.getElementById(this.for);
-        return ref?.localName === 'post-tooltip'
-            ? ref
-            : null;
+        return ref?.localName === 'post-tooltip' ? ref : null;
     }
     componentDidLoad() {
         this.setupTrigger();
@@ -143,7 +141,7 @@ export class PostTooltipTrigger {
     handleLeave(event) {
         const newTarget = event.relatedTarget;
         if ((this.tooltip && newTarget && this.tooltip.contains(newTarget)) ||
-            (newTarget === this.trigger)) {
+            newTarget === this.trigger) {
             return;
         }
         this.interestLostHandler();
@@ -167,7 +165,7 @@ export class PostTooltipTrigger {
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: '4e4b53e85570d6dbba4ee7833a1d3de00e53dbc6', "data-version": version }, h("slot", { key: 'f8f5ea2e2ce848d654e233617455bbbbdc6ba5b1', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: '26ac11df6c2961e3dd51722f6981185db17c6efb', "data-version": version }, h("slot", { key: 'd08036f40d0a6708b8614232134b0d5b4eba4b78', onSlotchange: () => this.handleSlotChange() })));
     }
     static get is() { return "post-tooltip-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/types/index.js

@@ -1 +1,3 @@
 export * from './heading-levels';
+export * from './placement';
+export * from './property-types';

package/dist/collection/types/placement.js

@@ -0,0 +1,14 @@
+export const PLACEMENT_TYPES = [
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'top-start',
+    'top-end',
+    'right-start',
+    'right-end',
+    'bottom-start',
+    'bottom-end',
+    'left-start',
+    'left-end',
+];

package/dist/collection/types/property-types.js

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

package/dist/collection/utils/is-value-empty.js

@@ -0,0 +1,4 @@
+import { EMPTY_VALUES } from "./property-checkers/constants";
+export function isValueEmpty(value) {
+    return EMPTY_VALUES.some(v => v === value);
+}

package/dist/collection/utils/property-checkers/check-one-of.js

@@ -1,9 +1,8 @@
-export function checkOneOf(component, prop, possibleValues, customMessage) {
+export function checkOneOf(component, prop, possibleValues) {
     const componentName = component.host.localName;
     const value = component[prop];
-    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
-    const message = customMessage || defaultMessage;
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
     if (!possibleValues.includes(value)) {
-        throw new Error(message);
+        console.error(message);
     }
 }

package/dist/collection/utils/property-checkers/check-pattern.js

@@ -1,9 +1,8 @@
-export function checkPattern(component, prop, pattern, customMessage) {
+export function checkPattern(component, prop, pattern) {
     const componentName = component.host.localName;
     const value = component[prop];
-    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be follow the format \`${pattern}\`.`;
-    const message = customMessage || defaultMessage;
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must follow the format \`${pattern}\`.`;
     if (typeof value !== 'string' || !pattern.test(value)) {
-        throw new Error(message);
+        console.error(message);
     }
 }

package/dist/collection/utils/property-checkers/check-type.js

@@ -1,17 +1,15 @@
-export function checkType(component, prop, type, customMessage) {
+export function checkType(component, prop, type) {
     const componentName = component.host.localName;
     const value = component[prop];
     const typeIsArray = type === 'array';
     const valueIsArray = Array.isArray(value);
-    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`
-    ${type}\`.`;
-    const message = customMessage || defaultMessage;
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`${type}\`.`;
     if (typeIsArray || valueIsArray) {
         if (valueIsArray !== typeIsArray) {
-            throw new Error(message);
+            console.error(message);
         }
     }
     else if (typeof value !== type) {
-        throw new Error(message);
+        console.error(message);
     }
 }

package/dist/collection/utils/property-checkers/check-url.js

@@ -1,15 +1,15 @@
-export function checkUrl(component, prop, customMessage) {
+export function checkUrl(component, prop) {
     const componentName = component.host.localName;
     const value = component[prop];
-    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component is invalid.`;
-    const message = customMessage || defaultMessage;
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is invalid.`;
     if (typeof value !== 'string' && !(value instanceof URL)) {
-        throw new Error(message);
+        console.error(message);
+        return;
     }
     try {
         new URL(value, 'https://www.post.ch');
     }
     catch {
-        throw new Error(message);
+        console.error(message);
     }
 }

package/dist/collection/utils/property-checkers/constants.js

@@ -1 +1 @@
-export const EMPTY_VALUES = [undefined, null, ''];
+export const EMPTY_VALUES = [undefined, null, '', NaN];

package/dist/collection/utils/property-checkers/empty-or.js

@@ -1,11 +1,9 @@
-import { EMPTY_VALUES } from "./constants";
+import { isValueEmpty } from "../is-value-empty";
 export function emptyOr(check) {
-    return (...args) => {
-        const component = args[0];
-        const prop = args[1];
+    return (component, prop, ...extraArgs) => {
         const value = component[prop];
-        if (!EMPTY_VALUES.some(v => v === value)) {
-            check(...args);
+        if (!isValueEmpty(value)) {
+            check(component, prop, ...extraArgs);
         }
     };
 }

package/dist/collection/utils/property-checkers/index.js

@@ -1,14 +1,14 @@
-import { emptyOr } from "./empty-or";
+import { requiredAnd } from "./required-and";
 import { checkOneOf } from "./check-one-of";
 import { checkPattern } from "./check-pattern";
 import { checkType } from "./check-type";
 import { checkUrl } from "./check-url";
+import { emptyOr } from "./empty-or";
 export const checkEmptyOrOneOf = emptyOr(checkOneOf);
 export const checkEmptyOrPattern = emptyOr(checkPattern);
 export const checkEmptyOrType = emptyOr(checkType);
 export const checkEmptyOrUrl = emptyOr(checkUrl);
-export * from './check-non-empty';
-export * from './check-one-of';
-export * from './check-pattern';
-export * from './check-type';
-export * from './check-url';
+export const checkRequiredAndOneOf = requiredAnd(checkOneOf);
+export const checkRequiredAndPattern = requiredAnd(checkPattern);
+export const checkRequiredAndType = requiredAnd(checkType);
+export const checkRequiredAndUrl = requiredAnd(checkUrl);

package/dist/collection/utils/property-checkers/required-and.js

@@ -0,0 +1,14 @@
+import { isValueEmpty } from "../is-value-empty";
+export function requiredAnd(check) {
+    return (component, prop, ...extraArgs) => {
+        const componentName = component.host.localName;
+        const value = component[prop];
+        const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is not defined.`;
+        if (isValueEmpty(value)) {
+            throw new Error(message);
+        }
+        else {
+            check(component, prop, ...extraArgs);
+        }
+    };
+}