@swisspost/design-system-components 10.0.0-next.37 → 10.0.0-next.39

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: '91f3a00b43c003fdeae8c56df2aff30218d44974', "data-version": version }, h("div", { key: '02b0c4a6cce70faf47f0cbed806c0cec02eae56b', 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,7 +11,7 @@ export class PostTabHeader {
         this.panel = undefined;
     }
     validateFor() {
-        checkNonEmpty(this, 'panel');
+        checkRequiredAndType(this, 'panel', 'string');
     }
     componentWillLoad() {
         this.tabId = `tab-${this.host.id || nanoid(6)}`;
@@ -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: 'aef9d8692392f57745c0d0a0af13fedb6f67f231', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '1e51f8680f4e7bdcb37994db3e70e828dde61dc0' })));
     }
     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: 'b38b216caa48cb36b73f36669a650bc88b56c860', "data-version": version }, h("div", { key: '751f88c9f0241e42b6c8d996b3645c26113f0ce2', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'd194ce33913a2ed6abbdd939ad5dcdc74e6f6798', class: "tabs", role: "tablist" }, h("slot", { key: '46fb9cf2d52fadf9418dff7050b78274457c3b0a', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'db2bfba595dab2730b9189a935dcd99504d7bad6', class: "tab-content", part: "content" }, h("slot", { key: '35795441e71901727fad9d759da483f55a865e97', 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: 'ecc396b297434d07c2fbca896ad7dbb817c5e52c', "data-version": version }, h("div", { key: 'cf43facc3b6d7caa329fb2b62a67931e53aaeb98', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '60232a82d9c231da41d22dd5e50744378dab54aa', class: "tag-text" }, h("slot", { key: '6b95fe941aac88e3ce6103187d5d831d53f8c315' })))));
     }
     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: 'd79b9952861afa27d8d1c5afb492e585bdc8a722', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'aad4cc86756d0688d10f1b28dc14d6b464ab8830' })));
     }
     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: 'e6bb167dd89c7549f4bed625dbeb652eac871ce5', "data-version": version, role: "tooltip" }, h("post-popovercontainer", { key: 'f5dc041dc440f7dc5410e9ee020f51a974ff3e83', 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: 'e1ee7b0cfb57dc927a96574b10af50c3bd12328c' }))));
     }
     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: '2dc6f70e4dc7706a69efcede935e85faede3b73c', "data-version": version }, h("slot", { key: 'b6301a66707d85a06b053a0a70a2a0cbc62877b3', 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);
+        }
+    };
+}