@swisspost/design-system-components 10.0.0-next.71 → 10.0.0-next.72

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

@@ -1,6 +1,16 @@
-import { h, Host } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { OneOf, Required } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkEmptyOrOneOf, checkRequiredAndOneOf } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 import { BUTTON_TYPES, PLACEMENT, SIZE } from "./types";
 /**
  * @slot default - Slot for placing visually hidden label in the close button.
@@ -21,15 +31,6 @@ export class PostClosebutton {
          */
         this.size = 'default';
     }
-    validateButtonType() {
-        checkEmptyOrOneOf(this, 'buttonType', BUTTON_TYPES);
-    }
-    validatePlacement() {
-        checkRequiredAndOneOf(this, 'placement', PLACEMENT);
-    }
-    validateSize() {
-        checkRequiredAndOneOf(this, 'size', SIZE);
-    }
     componentDidLoad() {
         this.checkContent();
     }
@@ -46,15 +47,12 @@ export class PostClosebutton {
         }
     }
     checkContent() {
-        this.validateButtonType();
-        this.validatePlacement();
-        this.validateSize();
         if (!this.host.querySelector('.visually-hidden').textContent) {
             console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
         }
     }
     render() {
-        return (h(Host, { key: 'ae74db094a2b1de985564d3f7528f78a98fd7ce9', "data-version": version }, h("button", { key: '7bab137e2dab6b3b405f486c10b3bbfbecdebafa', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm" }, h("post-icon", { key: 'ed323a3c13211f234551957a498f678e18ff4f66', "aria-hidden": "true", name: "closex" }), h("span", { key: 'aad44b5c93d357fab3d7cf537f477abd7c89f9be', class: "visually-hidden" }, h("slot", { key: 'd8424ae25100fc673188e3c77f89abe95847a38a' })))));
+        return (h(Host, { key: 'a685b0c1dbf08de1253d7c232800b28aa445edeb', "data-version": version }, h("button", { key: 'e36535683023bd1cbcf560491a87ddab60f23d1c', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm" }, h("post-icon", { key: '405d5ca3761bd8ee56bdd9734a2550cbbbd81f0d', "aria-hidden": "true", name: "closex" }), h("span", { key: '2caa490891d922dc69ef4e6ebe8e5de813426d30', class: "visually-hidden" }, h("slot", { key: 'fd38d8c6da378058ea93c5c08f9f96d0b7be7813' })))));
     }
     static get is() { return "post-closebutton"; }
     static get originalStyleUrls() {
@@ -153,16 +151,15 @@ export class PostClosebutton {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "buttonType",
-                "methodName": "validateButtonType"
-            }, {
-                "propName": "placement",
-                "methodName": "validatePlacement"
-            }, {
-                "propName": "size",
-                "methodName": "validateSize"
-            }];
-    }
 }
+__decorate([
+    OneOf(BUTTON_TYPES)
+], PostClosebutton.prototype, "buttonType", void 0);
+__decorate([
+    Required(),
+    OneOf(PLACEMENT)
+], PostClosebutton.prototype, "placement", void 0);
+__decorate([
+    Required(),
+    OneOf(SIZE)
+], PostClosebutton.prototype, "size", void 0);

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

@@ -1,7 +1,17 @@
-import { h, Host, Build, } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { collapse, collapsedKeyframe, expand } from "../../animations/collapse";
+import { Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { collapsedKeyframe, collapse, expand } from "../../animations/collapse";
-import { checkEmptyOrType } from "../../utils/index";
+import { Build, h, Host, } from "@stencil/core";
 /**
  * @slot default - Slot for placing content within the collapsible element.
  */
@@ -12,14 +22,10 @@ export class PostCollapsible {
          */
         this.collapsed = false;
     }
-    collapsedChange() {
-        checkEmptyOrType(this, 'collapsed', 'boolean');
-    }
     get isExpanded() {
         return !this.collapsed;
     }
     componentDidLoad() {
-        this.collapsedChange();
         this.updateTriggers();
     }
     /**
@@ -46,14 +52,21 @@ export class PostCollapsible {
         return isExpanded;
     }
     /**
-     * Update all post-collapsible-trigger elements referring to the collapsible
+     * Update all post-collapsible-trigger elements referring to or wrapping the collapsible
      */
     updateTriggers() {
-        const triggers = document.querySelectorAll(`post-collapsible-trigger[for="${this.host.id}"]`);
+        const triggers = this.host.id
+            ? Array.from(document.querySelectorAll(`post-collapsible-trigger[for="${this.host.id}"]`))
+            : [];
+        // also update an ancestor trigger when the collapsible is nested inside one
+        const nestedTrigger = this.host.closest('post-collapsible-trigger');
+        if (nestedTrigger && !triggers.includes(nestedTrigger)) {
+            triggers.push(nestedTrigger);
+        }
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: 'd376f9ca2621660a062f3cb5ea0164df088d9e8e', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: '1debe186e172e978b8a32388a0f5b26eb2a602b3' })));
+        return (h(Host, { key: '5683b1c0346d1ed8aa6aa5ef8583654511ff0638', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: '3271677498e00e964ee17733aa2871a12e57858c' })));
     }
     static get is() { return "post-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -135,10 +148,7 @@ export class PostCollapsible {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "collapsed",
-                "methodName": "collapsedChange"
-            }];
-    }
 }
+__decorate([
+    Type('boolean')
+], PostCollapsible.prototype, "collapsed", void 0);

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

@@ -8,16 +8,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from "@stencil/core";
+import { EventFrom, getRoot, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkRequiredAndType, EventFrom, getRoot } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 export class PostCollapsibleTrigger {
-    /**
-     * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
-     */
-    validateAriaAttributes() {
-        checkRequiredAndType(this, 'for', 'string');
-    }
     constructor() {
         this.observer = new MutationObserver(() => this.setTrigger());
         this.handlePostToggle = this.handlePostToggle.bind(this);
@@ -34,7 +28,10 @@ export class PostCollapsibleTrigger {
         this.setTrigger();
         if (!this.trigger)
             console.warn('The post-collapsible-trigger must contain a button.');
-        this.validateAriaAttributes();
+        if (!this.collapsible) {
+            const target = this.for ? `with id "${this.for}"` : 'nested inside <post-collapsible-trigger>';
+            console.warn(`No post-collapsible found ${target}. Either nest a post-collapsible inside the trigger or set the "for" attribute to the id of the collapsible.`);
+        }
     }
     disconnectedCallback() {
         this.observer.disconnect();
@@ -56,18 +53,21 @@ export class PostCollapsibleTrigger {
         }
     }
     updateAriaAttributes() {
-        if (!this.trigger)
+        const collapsible = this.collapsible;
+        if (!this.trigger || !collapsible)
             return;
-        // add the provided id to the aria-controls list
+        // a nested collapsible may have no id, but aria-controls needs one to reference
+        collapsible.id || (collapsible.id = `collapsible-${crypto.randomUUID()}`);
+        const collapsibleId = collapsible.id;
+        // add the controlled collapsible's id to the aria-controls list
         const ariaControls = this.trigger.getAttribute('aria-controls');
-        if (!ariaControls?.includes(this.for)) {
-            const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
-            this.trigger.setAttribute('aria-controls', newAriaControls);
+        const tokens = ariaControls ? ariaControls.split(/\s+/) : [];
+        if (!tokens.includes(collapsibleId)) {
+            tokens.push(collapsibleId);
+            this.trigger.setAttribute('aria-controls', tokens.join(' '));
         }
-        // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
-        const isCollapsed = this.collapsible?.collapsed;
-        const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
-        this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
+        // set aria-expanded to `true` if expanded, `false` if collapsed (collapsed defaults to false)
+        this.trigger.setAttribute('aria-expanded', `${!collapsible.collapsed}`);
     }
     /**
      * Toggle the post-collapsible controlled by the trigger
@@ -79,7 +79,9 @@ export class PostCollapsibleTrigger {
      * Retrieve the post-collapsible controlled by the trigger
      */
     get collapsible() {
-        const ref = this.root.getElementById(this.for);
+        // prefer a nested post-collapsible, fall back to an id reference via `for`
+        const ref = this.host.querySelector('post-collapsible') ??
+            (this.for ? this.root?.getElementById(this.for) ?? null : null);
         if (ref && ref.localName === 'post-collapsible') {
             return ref;
         }
@@ -89,7 +91,12 @@ export class PostCollapsibleTrigger {
      * Find the button and add the proper event listener and ARIA attributes to it
      */
     setTrigger() {
-        const trigger = this.host.querySelector('button');
+        // skip buttons that belong to a nested collapsible's content
+        const trigger = Array.from(this.host.querySelectorAll('button')).find(button => {
+            const collapsible = button.closest('post-collapsible');
+            const isInsidePanel = !!collapsible && this.host.contains(collapsible);
+            return !isInsidePanel;
+        });
         if (!trigger || (this.trigger && trigger.isEqualNode(this.trigger)))
             return;
         this.trigger = trigger;
@@ -97,7 +104,7 @@ export class PostCollapsibleTrigger {
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: 'f5055d5970eb900d345957f306c9a373680f257a', "data-version": version }, h("slot", { key: 'cf63bdbca00602b9c4e2a81f28723bd274561045' })));
+        return (h(Host, { key: '40cfa7d940136d4bce5de0c2b37fca91187110f8', "data-version": version }, h("slot", { key: 'b8853f5be4361e59537b00d6fd60e6e42b7ea64d' })));
     }
     static get is() { return "post-collapsible-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -111,11 +118,11 @@ export class PostCollapsibleTrigger {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Link the trigger to a post-collapsible with this id"
+                    "text": "Link the trigger to a post-collapsible by its ID.\nIf omitted, a post-collapsible nested directly inside this element is used instead."
                 },
                 "getter": false,
                 "setter": false,
@@ -146,13 +153,10 @@ export class PostCollapsibleTrigger {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "for",
-                "methodName": "validateAriaAttributes"
-            }];
-    }
 }
+__decorate([
+    Type('string')
+], PostCollapsibleTrigger.prototype, "for", void 0);
 __decorate([
     EventFrom('post-collapsible')
 ], PostCollapsibleTrigger.prototype, "handlePostToggle", null);

package/dist/collection/components/post-date-picker/post-date-picker.js

@@ -1,10 +1,20 @@
-import { Build, h, Host, } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { BUDDHIST_CALENDAR_LOCALES, BUDDHIST_CALENDAR_YEAR_OFFSET, DateValue, FALLBACK_LANGUAGE_CODE, getLocaleTextDirection, IsoDate, isValidLocale, Required, Type, UNICODE_BIDI, } from "../../utils/index";
 import { version } from "../../../../package";
+import { Build, h, Host, } from "@stencil/core";
 import AirDatepicker from "air-datepicker";
-import { airDatepickerLocales } from "./air-locales";
 import IMask from "imask";
-import { checkEmptyOrDate, checkRequiredAndType, checkIsoDate, getLocaleTextDirection, isValidLocale, BUDDHIST_CALENDAR_YEAR_OFFSET, BUDDHIST_CALENDAR_LOCALES, UNICODE_BIDI, FALLBACK_LANGUAGE_CODE, } from "../../utils/index";
-import { TEXT_DIRECTION_MARKERS_REGEX, DATE_FORMAT_RANGE_SEPARATOR, DATE_FORMAT_MAP, DATE_FORMAT_KEYS, DATE_FORMAT_KEYS_REGEX, DATE_FORMAT_SEPARATOR_REGEX, DATE_FORMAT_STRING_OPTIONS, } from "./constants";
+import { airDatepickerLocales } from "./air-locales";
+import { DATE_FORMAT_KEYS, DATE_FORMAT_KEYS_REGEX, DATE_FORMAT_MAP, DATE_FORMAT_RANGE_SEPARATOR, DATE_FORMAT_SEPARATOR_REGEX, DATE_FORMAT_STRING_OPTIONS, TEXT_DIRECTION_MARKERS_REGEX, } from "./constants";
 export class PostDatePicker {
     constructor() {
         /**
@@ -204,53 +214,11 @@ export class PostDatePicker {
         this.handleSelectedDates();
         this.updateMask();
     }
-    validateSelectedStartDate() {
-        checkEmptyOrDate(this, 'selectedStartDate');
-        checkIsoDate(this, 'selectedStartDate');
-    }
-    validateSelectedEndDate() {
-        checkEmptyOrDate(this, 'selectedEndDate');
-        checkIsoDate(this, 'selectedEndDate');
-    }
-    validateMin() {
-        checkEmptyOrDate(this, 'min');
-        checkIsoDate(this, 'min');
-    }
-    validateMax() {
-        checkEmptyOrDate(this, 'max');
-        checkIsoDate(this, 'max');
-    }
     validateInline() {
         if (!this.inline && !this.dpInput) {
             console.error('A non-inline date picker should contain one input');
         }
     }
-    validateTextNextMonth() {
-        checkRequiredAndType(this, 'textNextMonth', 'string');
-    }
-    validateTextNextYear() {
-        checkRequiredAndType(this, 'textNextYear', 'string');
-    }
-    validateTextNextDecade() {
-        checkRequiredAndType(this, 'textNextDecade', 'string');
-    }
-    validateTextPreviousMonth() {
-        checkRequiredAndType(this, 'textPreviousMonth', 'string');
-    }
-    validateTextPreviousYear() {
-        checkRequiredAndType(this, 'textPreviousYear', 'string');
-    }
-    validateTextPreviousDecade() {
-        checkRequiredAndType(this, 'textPreviousDecade', 'string');
-    }
-    validateTextSwitchYear() {
-        checkRequiredAndType(this, 'textSwitchYear', 'string');
-    }
-    validateTextToggleCalendar() {
-        if (!this.inline) {
-            checkRequiredAndType(this, 'textToggleCalendar', 'string');
-        }
-    }
     /**
      * Displays the popover calendar, focusing the first calendar item.
      */
@@ -879,18 +847,6 @@ export class PostDatePicker {
         this.setupNavObserver();
         this.setupInputObserver();
         this.validateLocale();
-        this.validateSelectedStartDate();
-        this.validateSelectedEndDate();
-        this.validateMin();
-        this.validateMax();
-        this.validateTextToggleCalendar();
-        this.validateTextNextDecade();
-        this.validateTextNextMonth();
-        this.validateTextNextYear();
-        this.validateTextPreviousDecade();
-        this.validateTextPreviousMonth();
-        this.validateTextPreviousYear();
-        this.validateTextSwitchYear();
         this.validateInline();
         if (this.inline) {
             requestAnimationFrame(() => this.enhanceAccessibility(false));
@@ -919,11 +875,11 @@ export class PostDatePicker {
         }
     }
     render() {
-        return (h(Host, { key: 'e4a78b93b34dff8baa56948a73c6af43b8b147ed', "data-version": version }, this.inline && h("div", { key: 'f27624436ce0cba86d926a19684a267ea8298aa8', class: "datepicker-container", dir: this.textDirection }), !this.inline && (h("div", { key: '4d041358386fad8298bf4b93e38b03208fd397b8', dir: this.textDirection }, h("div", { key: '26bf5cd5b1cd493349c4a2b7dfa96569ee50dded', class: {
+        return (h(Host, { key: 'c4cc0eb142d566fa9ba70272cd9ff21c433c4137', "data-version": version }, this.inline && h("div", { key: '8611e4dcfc77187799261e6187304ac1cf46b7c2', class: "datepicker-container", dir: this.textDirection }), !this.inline && (h("div", { key: '5581acfe5acf7ae1d1e445c53870b235f4b18646', dir: this.textDirection }, h("div", { key: 'e24d9772613c92916b6d38e79352fef2c81d9511', class: {
                 'calendar-input': !this.range,
                 'calendar-input-range': this.range,
                 'disabled': this.inputDisabled,
-            } }, h("slot", { key: '8bbeeeff9a795faef7e462853ffb2bad536ce0f4' }), h("button", { key: 'c932e310ffca111cf205fe592c30ef0c6c01e148', onClick: () => this.show(), "aria-haspopup": "true", "aria-label": this.textToggleCalendar, disabled: this.inputDisabled, ref: e => (this.dpTrigger = e) }, h("post-icon", { key: 'd644dbd219bd8f0db832d9a0866853a38be162eb', name: "calendar" }))), h("post-popovercontainer", { key: '5e2a8a4a19667b80a16a80a17a0dbc1f56505439', placement: "bottom-end", offset: PostDatePicker.FLYOUT_OFFSET, ref: e => (this.popoverRef = e) }, h("div", { key: '5668018266c3a2103706f525a78ea4ac4319f954', class: "datepicker-container" }))))));
+            } }, h("slot", { key: 'c844d9615f779430969e5d794a903aa30f06f24c' }), h("button", { key: 'cae3200ceb21aa35b3dd443c19875af4cbdc82a4', onClick: () => this.show(), "aria-haspopup": "true", "aria-label": this.textToggleCalendar, disabled: this.inputDisabled, ref: e => (this.dpTrigger = e) }, h("post-icon", { key: 'c6c51b1021aee6726bb01c24ec0fd532e4a41e49', name: "calendar" }))), h("post-popovercontainer", { key: '1c4bccada0ae38c80fa20ae7602510bd0c841757', placement: "bottom-end", offset: PostDatePicker.FLYOUT_OFFSET, ref: e => (this.popoverRef = e) }, h("div", { key: '8dcf519dbf39b8312275ade1b267dc9660c0ffb4', class: "datepicker-container" }))))));
     }
     static get is() { return "post-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -1326,46 +1282,58 @@ export class PostDatePicker {
             }, {
                 "propName": "range",
                 "methodName": "updateRange"
-            }, {
-                "propName": "selectedStartDate",
-                "methodName": "validateSelectedStartDate"
-            }, {
-                "propName": "selectedEndDate",
-                "methodName": "validateSelectedEndDate"
-            }, {
-                "propName": "min",
-                "methodName": "validateMin"
-            }, {
-                "propName": "max",
-                "methodName": "validateMax"
             }, {
                 "propName": "inline",
                 "methodName": "validateInline"
-            }, {
-                "propName": "textNextMonth",
-                "methodName": "validateTextNextMonth"
-            }, {
-                "propName": "textNextYear",
-                "methodName": "validateTextNextYear"
-            }, {
-                "propName": "textNextDecade",
-                "methodName": "validateTextNextDecade"
-            }, {
-                "propName": "textPreviousMonth",
-                "methodName": "validateTextPreviousMonth"
-            }, {
-                "propName": "textPreviousYear",
-                "methodName": "validateTextPreviousYear"
-            }, {
-                "propName": "textPreviousDecade",
-                "methodName": "validateTextPreviousDecade"
-            }, {
-                "propName": "textSwitchYear",
-                "methodName": "validateTextSwitchYear"
-            }, {
-                "propName": "textToggleCalendar",
-                "methodName": "validateTextToggleCalendar"
             }];
     }
 }
 PostDatePicker.FLYOUT_OFFSET = 4;
+__decorate([
+    DateValue(),
+    IsoDate()
+], PostDatePicker.prototype, "selectedStartDate", void 0);
+__decorate([
+    DateValue(),
+    IsoDate()
+], PostDatePicker.prototype, "selectedEndDate", void 0);
+__decorate([
+    DateValue(),
+    IsoDate()
+], PostDatePicker.prototype, "min", void 0);
+__decorate([
+    DateValue(),
+    IsoDate()
+], PostDatePicker.prototype, "max", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostDatePicker.prototype, "textNextMonth", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostDatePicker.prototype, "textNextYear", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostDatePicker.prototype, "textNextDecade", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostDatePicker.prototype, "textPreviousMonth", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostDatePicker.prototype, "textPreviousYear", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostDatePicker.prototype, "textPreviousDecade", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostDatePicker.prototype, "textSwitchYear", void 0);
+__decorate([
+    Required({ when: 'inline', truthy: false }),
+    Type('string')
+], PostDatePicker.prototype, "textToggleCalendar", void 0);

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

@@ -1,6 +1,16 @@
-import { h, Host } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { breakpoint, Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkRequiredAndType, breakpoint } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 const GRID_SLOTS = ['grid-1', 'grid-2', 'grid-3', 'grid-4'];
 /**
  * @slot prefooter - Slot for the pre-footer.
@@ -13,9 +23,6 @@ const GRID_SLOTS = ['grid-1', 'grid-2', 'grid-3', 'grid-4'];
  * @slot copyright - Slot for the copyright text.
  */
 export class PostFooter {
-    validateTextFooter() {
-        checkRequiredAndType(this, 'textFooter', 'string');
-    }
     constructor() {
         this.device = breakpoint.get('device');
         this.gridSlotDisplayed = {};
@@ -28,7 +35,6 @@ export class PostFooter {
         globalThis.addEventListener('postBreakpoint:device', this.breakpointChange);
     }
     componentWillLoad() {
-        this.validateTextFooter();
         // initialize grid visibility by checking the content of each slot
         GRID_SLOTS.forEach(slotName => {
             const assignedElements = this.host.querySelectorAll(`[slot="${slotName}"]`);
@@ -57,7 +63,7 @@ export class PostFooter {
         return GRID_SLOTS.map(slotName => (h("div", { class: { 'd-none': !this.gridSlotDisplayed[slotName] } }, h("h3", null, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
     }
     render() {
-        return (h(Host, { key: '2d88cc275f39961bc7907f4a71c7d64f44aa73cd', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: 'f3936911ac36fc0032e491b83caf1c645373d5a6' }, h("h2", { key: '9b66e2a8a143f65bd495be83c0f1ad7c7b2933eb', class: "visually-hidden" }, this.textFooter), h("div", { key: '7e186ea5cca898ae4ad3ed9c75c4c1b714f88cdd', class: "prefooter" }, h("div", { key: '1dd515039ba4705d7015464583548dc0c8c57e75', class: "footer-container" }, h("slot", { key: 'd954af720846be6b4fe39c0af6ae86a03d0cdddf', name: "prefooter" }))), h("div", { key: '672066a636d7f836220ff601b7c67df87f4b6703', class: "footer-main" }, h("div", { key: 'fd00f3258cbcbcc0f0f25d994046ae1af597e6c2', class: "footer-container" }, h("div", { key: '6bc09f41d11e390999918f5974b75e9a697d6e10', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: '5132d4a7c816c51fbe7a834598e09e0900b6591d', class: "footer-column" }, h("div", { key: '2f9d1294d13c9f6529e968a5948f118153094e24', class: "footer-socialmedia" }, h("slot", { key: '863226c65164586e1361613f33809394d402317b', name: "socialmedia" })), h("div", { key: 'b517d12fe0790fcbd8bb53adb58e967618b549c2', class: "footer-app" }, h("slot", { key: '4c3528f97dddfec292719df5e652b5ad08001d36', name: "app" }))), h("div", { key: 'cca5baef5e98eea815eff20f6397320da65f752b', class: "footer-businesssectors" }, h("slot", { key: 'b175689718b5c37d07e59e5eb2da2bee8689638a', name: "businesssectors" })), h("div", { key: '216886a10e3ad023fee0cd644827d1841df86ccc', class: "footer-meta" }, h("slot", { key: '7b6fbdf6127efac59711776d029f4213ed6b22e4', name: "meta" })), h("div", { key: '2964d34052f8ade89c5e444696f90147ec95f1bf', class: "footer-copyright" }, h("slot", { key: '36a5e8a3045442f14c9b8292c914455489a2e556', name: "copyright" })))))));
+        return (h(Host, { key: '374c30bdf52f1c826e4016fb60ebe46b212321f3', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: 'ad4b7ef1d1c8455fba5377c51b82aa98fabe567c' }, h("h2", { key: '2a55bd8dd9764b19ce565e0e718e8caa648dd4e8', class: "visually-hidden" }, this.textFooter), h("div", { key: 'bd3fad280de6e35a43dccf5afb90d079b5697039', class: "prefooter" }, h("div", { key: '8ae04af140bdef46f1989dbd4e18047b20eb8607', class: "footer-container" }, h("slot", { key: 'b2e5e4e3bcfbe4d9eb6323a62fd7d8db312ff49e', name: "prefooter" }))), h("div", { key: 'a73f4cbadf30e9e8bd88a657b88e9aeeecd8ac1c', class: "footer-main" }, h("div", { key: 'b4fa33216ea90b1c7ce8ad4426ffc04a5b142260', class: "footer-container" }, h("div", { key: '68978cc363340f86973f53df82e4adf70e1d18fb', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: 'd867ecbc7431b9f6e76022693bfd77be6f2015cc', class: "footer-column" }, h("div", { key: 'e5a345d9cb0d85d8a4f4ce46bde363177f26be5f', class: "footer-socialmedia" }, h("slot", { key: 'df306b3404d7cf25a4e93f24a787796c9b6582d0', name: "socialmedia" })), h("div", { key: 'b62be898061d5880b0329251af9001d32a1565d0', class: "footer-app" }, h("slot", { key: '71d2ac3bcb5fa4056e00bb3ec949c163016d116c', name: "app" }))), h("div", { key: 'd1237aa43568afe2d66de7e2871557c8bef692ab', class: "footer-businesssectors" }, h("slot", { key: '3470e3f8d1eaadf7eb230e7c788b5524672937b2', name: "businesssectors" })), h("div", { key: '0fc6b0bd67ac6982ed98f800d37590fe38725ff5', class: "footer-meta" }, h("slot", { key: 'd4ec82246b09ec299836ec13137448e0399dc8cd', name: "meta" })), h("div", { key: 'ffe9ad1ea0ff761513a721c1915bc6bdb602832c', class: "footer-copyright" }, h("slot", { key: 'bc43ce34d09a3a257ca614fe2b1383ee732d3f68', name: "copyright" })))))));
     }
     static get is() { return "post-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -101,10 +107,8 @@ export class PostFooter {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "textFooter",
-                "methodName": "validateTextFooter"
-            }];
-    }
 }
+__decorate([
+    Required(),
+    Type('string')
+], PostFooter.prototype, "textFooter", void 0);

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

@@ -8,14 +8,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host, Build, } from "@stencil/core";
-import { throttle } from "throttle-debounce";
-import { version } from "../../../../package";
-import { breakpoint } from "../../utils/breakpoints";
 import { fade } from "../../animations/index";
-import { getDeepFocusableChildren } from "../../utils/get-focusable-children";
+import { Required, Type } from "../../utils/index";
+import { breakpoint } from "../../utils/breakpoints";
 import { EventFrom } from "../../utils/event-from";
-import { checkRequiredAndType } from "../../utils/index";
+import { getDeepFocusableChildren } from "../../utils/get-focusable-children";
+import { version } from "../../../../package";
+import { Build, h, Host, } from "@stencil/core";
+import { throttle } from "throttle-debounce";
 /**
  * @slot post-logo - Should be used together with the `<post-logo>` component.
  * @slot global-nav-primary - Holds search button in the global header.
@@ -45,12 +45,6 @@ export class PostHeader {
         }
         return document.body;
     }
-    validateFullWidth() {
-        checkRequiredAndType(this, 'fullWidth', 'boolean');
-    }
-    validateTextMenu() {
-        checkRequiredAndType(this, 'textMenu', 'string');
-    }
     lockBody(newValue, _oldValue, propName) {
         const scrollParent = this.scrollParent;
         const burgerMenuExtended = propName === 'burgerMenuExtended' ? newValue : this.burgerMenuExtended;
@@ -121,8 +115,6 @@ export class PostHeader {
         this.switchLanguageSwitchMode();
     }
     componentDidRender() {
-        this.validateTextMenu();
-        this.validateFullWidth();
         this.getFocusableElements();
         this.handleLocalHeaderResize();
         // When a megadropdown is open on desktop and the user resizes to mobile, we set
@@ -317,10 +309,10 @@ export class PostHeader {
     render() {
         const onDesktop = Build.isServer || this.device === 'desktop';
         const onTabletAndMobile = Build.isServer || this.device !== 'desktop';
-        return (h(Host, { key: '26f833461817802c6a93c96556cfd412404c2965', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: '041a309f341a5551cdfc93b0703c4f3cfb2a1d0f' }, h("div", { key: '3613dd51fee795b523d6b66cd338334d84f6fbe3', class: "global-header" }, h("div", { key: '46e6f03899e58e2ba3b5fffdd37e6eaa6c424825', class: "section" }, h("div", { key: '7932a4d20e75ae8bb354466b5014394b9f2c1928', class: "logo" }, h("slot", { key: '4a59e8dda5e0db20a73876821f3fcf43bc05f1b9', name: "post-logo" })), h("div", { key: 'c20a7bfb08942c582b8fcb6bf3b13fb47c428701', class: "sliding-controls" }, onDesktop && (h("div", { key: 'ab5e3cb7e9e8a9ad8bbb22f5760d05380f764f47', class: "audience" }, h("slot", { key: '5e62ea13379b916cda2cfde6de82788c21e775c4', name: "audience" }))), h("slot", { key: '8afc82e08d6ed8986df032c3161d888dd73390db', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
-            h("slot", { key: '3ac3963bd777555760ad60952b75dd9591f9f348', name: "global-nav-secondary" }),
-            h("slot", { key: '292eabda025f3bc8c86399cdbe79386588ba9e3a', name: "language-menu" }),
-        ], h("slot", { key: '9a0722343ad37c736bb04c1c4c59cfaf7a070c65', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (h("post-togglebutton", { key: '77c4d0e34a6af4bdfc4257d6d42bc73034ab056a', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: '13967b75cc44f30ee44224fc0e2bc6760521777c' }, this.textMenu), h("post-icon", { key: '619fae5c77a41f79ff71ae1e25861a82bf01f2d6', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: 'b0ae837080e4f738b0cbe14f8829151d1381e62c', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: '0da0040c459944ac5b97db6fe0f3d9dc64272a3e', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, h("div", { key: '3ec396c9fd8fc6b97d7a41256008a3d20180ff72', class: "section" }, h("slot", { key: '6f66cee38f62becb866927609927bb6152e52fe8', name: "title" }), this.hasTitle && h("slot", { key: '17b3a68697791f1c83e978b25ee3bbb60c2c48d3', name: "local-nav" }), onDesktop && h("slot", { key: '63434d8c9b29c113498a475fa9a92b565a4738d1', name: "main-nav" }), onDesktop && !this.hasTitle && h("slot", { key: '164a3b8d9dd7af6d12fbf37190bc318bea2eb527', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
+        return (h(Host, { key: '78b30321492682f5ac4779eaf79fa21de3d5b1f2', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: 'd34c893f18005a1a5c3e406f1eab0d821e1d5994' }, h("div", { key: '1598f8bd0ecb90662e78280d6b9a2cffaa155994', class: "global-header" }, h("div", { key: 'cca31ad38ecf9d8c42c73d346bd9f909b06b6a9c', class: "section" }, h("div", { key: 'ab28bdc152813adb481b807220a12fc549954654', class: "logo" }, h("slot", { key: '5080891fd1cec13ed4153afce6573373c9ddb559', name: "post-logo" })), h("div", { key: '4dc43239677de2779a54947b013d2379f27d4c2e', class: "sliding-controls" }, onDesktop && (h("div", { key: 'cb3fbb2a94f8d22772d8b60af7712ac5a8199ed2', class: "audience" }, h("slot", { key: '95e06819c41abef543ec2797511f22cb1b135743', name: "audience" }))), h("slot", { key: '5db1090c38c60374f57a8a1289d058d4364efc77', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
+            h("slot", { key: 'db309e50b363ee2d7a13d119dca44c6ce50e3962', name: "global-nav-secondary" }),
+            h("slot", { key: 'ec86d4748ef0bd8c46935b0262ec7752d3842f38', name: "language-menu" }),
+        ], h("slot", { key: 'c082e4a6c9a8dbb2090228c819577468f0f60edd', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (h("post-togglebutton", { key: '2773e3cad4f2a8be60d25b82cae87fb5d813cafc', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: 'bd1c2e048436e58f14a9d4fb205afb245f5d1af1' }, this.textMenu), h("post-icon", { key: '1885cff12454528cb981c0a2544531f89bc93b89', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: '6ea75eecf1c124b83bb011f667eae4c6cc7df470', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: '487dc3cc667a52f272cdcdcd546eb0b686fc6611', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, h("div", { key: '1d4e73e20ee1cba7a26374166435a123c7b3b7de', class: "section" }, h("slot", { key: '8131591c29285ed586c86bb6ce89738df8e51d0b', name: "title" }), this.hasTitle && h("slot", { key: '0430da5a731063cd393a395fdd0c9ec11fed69f3', name: "local-nav" }), onDesktop && h("slot", { key: '07410195623dacda6e8fcadf69de55bb4fdf6067', name: "main-nav" }), onDesktop && !this.hasTitle && h("slot", { key: 'cf7b4cd88faa07d29670a7cb6e389e182581182a', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }
@@ -415,12 +407,6 @@ export class PostHeader {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "fullWidth",
-                "methodName": "validateFullWidth"
-            }, {
-                "propName": "textMenu",
-                "methodName": "validateTextMenu"
-            }, {
                 "propName": "device",
                 "methodName": "lockBody"
             }, {
@@ -444,6 +430,14 @@ export class PostHeader {
             }];
     }
 }
+__decorate([
+    Required(),
+    Type('boolean')
+], PostHeader.prototype, "fullWidth", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostHeader.prototype, "textMenu", void 0);
 __decorate([
     EventFrom('post-megadropdown')
 ], PostHeader.prototype, "megadropdownStateHandler", null);