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

package/dist/collection/utils/property-decorators/create-validator-decorator.js

@@ -0,0 +1,187 @@
+import { isValueEmpty } from "../is-value-empty";
+import { getElement } from "@stencil/core";
+/** Tracks prototypes whose `componentDidLoad` lifecycle has already been wrapped. */
+const patchedTargets = new WeakSet();
+/** Tracks component instances that already completed the first load cycle. */
+const loadedInstances = new WeakSet();
+/** Stores validators per component prototype and property name. */
+const validatorsByTarget = new WeakMap();
+/** Stores all properties that use a validator decorator for each component prototype. */
+const decoratedPropertiesByTarget = new WeakMap();
+/** Stores per-instance property values captured by dynamically created accessors. */
+const propertyValuesByInstance = new WeakMap();
+/**
+ * Returns the value for a key in a {@link WeakMap} and lazily creates it when missing.
+ *
+ * @template K WeakMap key type.
+ * @template T WeakMap value type.
+ * @param map WeakMap used as storage.
+ * @param key Object key used to retrieve or initialize the value.
+ * @param factory Factory creating the value when no entry exists for the key.
+ * @returns Existing or newly created value associated with the key.
+ */
+function getOrCreate(map, key, factory) {
+    let value = map.get(key);
+    if (!value) {
+        value = factory();
+        map.set(key, value);
+    }
+    return value;
+}
+/**
+ * Returns the mutable validator list registered for a property on a component prototype.
+ *
+ * @param target Component prototype where decorators were applied.
+ * @param property Decorated property name.
+ * @returns Validator list for the property.
+ */
+function getValidators(target, property) {
+    const validatorsByProperty = getOrCreate(validatorsByTarget, target, () => new Map());
+    return getOrCreate(validatorsByProperty, property, () => []);
+}
+/**
+ * Returns all property names decorated with validator decorators for a prototype.
+ *
+ * @param target Component prototype where decorators were applied.
+ * @returns Set of decorated property names.
+ */
+function getDecoratedProperties(target) {
+    return getOrCreate(decoratedPropertiesByTarget, target, () => new Set());
+}
+/**
+ * Returns the map containing tracked property values for a component instance.
+ *
+ * @param instance Component instance.
+ * @returns Map keyed by property name with last assigned values.
+ */
+function getValuesByProperty(instance) {
+    return getOrCreate(propertyValuesByInstance, instance, () => new Map());
+}
+/**
+ * Defines an accessor for a decorated property that stores values per instance and
+ * triggers validation after the component first loads.
+ *
+ * Accessor creation is skipped when a getter already exists to avoid overriding
+ * component-defined accessors.
+ *
+ * @param target Component prototype receiving the accessor.
+ * @param property Decorated property name.
+ */
+function createPropertyAccessor(target, property) {
+    const descriptor = Object.getOwnPropertyDescriptor(target, property);
+    if (descriptor && descriptor.get)
+        return;
+    Object.defineProperty(target, property, {
+        get() {
+            return getValuesByProperty(this).get(property);
+        },
+        set(newValue) {
+            getValuesByProperty(this).set(property, newValue);
+            if (loadedInstances.has(this)) {
+                runValidators(this, property);
+            }
+        },
+        enumerable: true,
+        configurable: true,
+    });
+}
+/**
+ * Wraps `componentDidLoad` once per prototype to execute validators on initial render.
+ *
+ * Existing `componentDidLoad` behavior is preserved and called after validation.
+ *
+ * @param target Component prototype to patch.
+ */
+function patchComponentDidLoad(target) {
+    if (patchedTargets.has(target))
+        return;
+    patchedTargets.add(target);
+    const original = 'componentDidLoad' in target && typeof target.componentDidLoad === 'function'
+        ? target.componentDidLoad
+        : undefined;
+    Object.defineProperty(target, 'componentDidLoad', {
+        writable: true,
+        configurable: true,
+        value: function (...args) {
+            loadedInstances.add(this);
+            const decoratedProperties = getDecoratedProperties(Object.getPrototypeOf(this));
+            for (const property of decoratedProperties) {
+                runValidators(this, property);
+            }
+            if (original) {
+                return original.apply(this, args);
+            }
+        },
+    });
+}
+/**
+ * Executes all validators for a property in ascending priority order.
+ *
+ * Validation is skipped for empty values unless a validator explicitly opts in via
+ * `validateEmptyValues`. Execution stops when a blocking validator fails.
+ *
+ * @param component Component instance.
+ * @param property Property name to validate.
+ */
+function runValidators(component, property) {
+    const prototype = Object.getPrototypeOf(component);
+    const validatorsByProperty = validatorsByTarget.get(prototype);
+    if (!validatorsByProperty)
+        return;
+    const validators = validatorsByProperty.get(property);
+    if (!validators || validators.length === 0)
+        return;
+    const sortedValidators = [...validators].sort((a, b) => a.priority - b.priority);
+    const value = component[property];
+    const valueIsEmpty = isValueEmpty(value);
+    for (const validator of sortedValidators) {
+        if (valueIsEmpty && !validator.validateEmptyValues) {
+            continue;
+        }
+        const passed = validator.run(component, property);
+        if (!passed && validator.blocking)
+            break;
+    }
+}
+/**
+ * Creates a property decorator that registers a validator for a component property.
+ *
+ * The returned decorator ensures property access is intercepted, initial-load
+ * validation is enabled, and the provided validator is stored for execution.
+ *
+ * @param validator Validator definition to register.
+ * @returns Property decorator compatible with TypeScript decorator syntax.
+ */
+export function createValidatorDecorator(validator) {
+    return function (target, property) {
+        createPropertyAccessor(target, property);
+        patchComponentDidLoad(target);
+        getDecoratedProperties(target).add(property);
+        getValidators(target, property).push(validator);
+    };
+}
+/**
+ * Builds a validation context for a decorated component property.
+ *
+ * The returned context includes:
+ * - `value`: current property value.
+ * - `showError(constraint)`: helper that logs a consistent error format and includes
+ *   the host element for easier debugging in browser consoles.
+ *
+ * Message format: `[componentName] Property "property" <constraint>. Received: <value>.`
+ *
+ * @param component Component instance containing the validated property.
+ * @param property Property name being validated.
+ * @returns Validation context used by individual validator implementations.
+ */
+export function getValidationContext(component, property) {
+    const host = getElement(component);
+    const componentName = host.localName;
+    const value = component[property];
+    return {
+        value,
+        showError(constraint) {
+            console.error(`[${componentName}] Property "${String(property)}" ${constraint}. Received: ${JSON.stringify(value)}.`, host);
+        },
+    };
+}

package/dist/collection/utils/property-decorators/date.js

@@ -0,0 +1,21 @@
+import { createValidatorDecorator, getValidationContext } from "./create-validator-decorator";
+/**
+ * Property decorator that validates the property value is a valid date string.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ */
+export function DateValue() {
+    return createValidatorDecorator({
+        priority: 1,
+        blocking: false,
+        run(component, property) {
+            const { value, showError } = getValidationContext(component, property);
+            const isValid = typeof value === 'string' && !Number.isNaN(new Date(value).getTime());
+            if (!isValid) {
+                showError('must be a valid date string');
+                return false;
+            }
+            return true;
+        },
+    });
+}

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

@@ -0,0 +1,9 @@
+export { ArrayOf } from './array-of';
+export { createValidatorDecorator, getValidationContext } from './create-validator-decorator';
+export { DateValue } from './date';
+export { IsoDate } from './iso-date';
+export { OneOf } from './one-of';
+export { Pattern } from './pattern';
+export { Required } from './required';
+export { Type } from './type';
+export { Url } from './url';

package/dist/collection/utils/property-decorators/iso-date.js

@@ -0,0 +1,21 @@
+import { isIsoDate } from "../is-iso-date";
+import { createValidatorDecorator, getValidationContext } from "./create-validator-decorator";
+/**
+ * Property decorator that validates the property value is a date in ISO 8601 format (YYYY-MM-DD).
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ */
+export function IsoDate() {
+    return createValidatorDecorator({
+        priority: 1,
+        blocking: false,
+        run(component, property) {
+            const { value, showError } = getValidationContext(component, property);
+            if (!isIsoDate(String(value))) {
+                showError('must be in ISO format (YYYY-MM-DD)');
+                return false;
+            }
+            return true;
+        },
+    });
+}

package/dist/collection/utils/property-decorators/one-of.js

@@ -0,0 +1,22 @@
+import { createValidatorDecorator, getValidationContext } from "./create-validator-decorator";
+/**
+ * Property decorator that validates the property value is one of the allowed values.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @param possibleValues - The array of allowed values for the property.
+ */
+export function OneOf(possibleValues) {
+    return createValidatorDecorator({
+        priority: 1,
+        blocking: false,
+        run(component, property) {
+            const { value, showError } = getValidationContext(component, property);
+            if (!possibleValues.includes(value)) {
+                showError(`must be one of [${possibleValues.join(', ')}]`);
+                return false;
+            }
+            return true;
+        },
+    });
+}

package/dist/collection/utils/property-decorators/pattern.js

@@ -0,0 +1,22 @@
+import { createValidatorDecorator, getValidationContext } from "./create-validator-decorator";
+/**
+ * Property decorator that validates the property value matches a regular expression.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @param pattern - The regex pattern the property value must match.
+ */
+export function Pattern(pattern) {
+    return createValidatorDecorator({
+        priority: 1,
+        blocking: false,
+        run(component, property) {
+            const { value, showError } = getValidationContext(component, property);
+            if (typeof value !== 'string' || !pattern.test(value)) {
+                showError(`must match ${pattern}`);
+                return false;
+            }
+            return true;
+        },
+    });
+}

package/dist/collection/utils/property-decorators/required.js

@@ -0,0 +1,24 @@
+import { isValueEmpty } from "../is-value-empty";
+import { createValidatorDecorator, getValidationContext } from "./create-validator-decorator";
+/**
+ * Property decorator that validates the property is not empty.
+ * If the property is empty (undefined, null, '', NaN), an error is logged.
+ * This validator is blocking: if it fails, subsequent validators will not run.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ */
+export function Required() {
+    return createValidatorDecorator({
+        priority: 0,
+        blocking: true,
+        validateEmptyValues: true,
+        run(component, property) {
+            const { value, showError } = getValidationContext(component, property);
+            if (isValueEmpty(value)) {
+                showError('is required');
+                return false;
+            }
+            return true;
+        },
+    });
+}

package/dist/collection/utils/property-decorators/type.js

@@ -0,0 +1,25 @@
+import { createValidatorDecorator, getValidationContext } from "./create-validator-decorator";
+/**
+ * Property decorator that validates the property value is of the specified type.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @param type - The expected type ('boolean', 'number', 'string', 'array', 'object', 'function').
+ */
+export function Type(type) {
+    return createValidatorDecorator({
+        priority: 1,
+        blocking: false,
+        run(component, property) {
+            const { value, showError } = getValidationContext(component, property);
+            const typeIsArray = type === 'array';
+            const valueIsArray = Array.isArray(value);
+            const isValid = typeIsArray || valueIsArray ? valueIsArray === typeIsArray : typeof value === type;
+            if (!isValid) {
+                showError(`must be of type "${type}"`);
+                return false;
+            }
+            return true;
+        },
+    });
+}

package/dist/collection/utils/property-decorators/url.js

@@ -0,0 +1,29 @@
+import { createValidatorDecorator, getValidationContext } from "./create-validator-decorator";
+/**
+ * Property decorator that validates the property value is a valid URL.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ */
+export function Url() {
+    return createValidatorDecorator({
+        priority: 1,
+        blocking: false,
+        run(component, property) {
+            const { value, showError } = getValidationContext(component, property);
+            let isValid = typeof value === 'string' || value instanceof URL;
+            if (isValid) {
+                try {
+                    new URL(value, 'https://www.post.ch');
+                }
+                catch {
+                    isValid = false;
+                }
+            }
+            if (!isValid) {
+                showError('must be a valid URL');
+                return false;
+            }
+            return true;
+        },
+    });
+}

package/dist/components/breakpoints.js

@@ -0,0 +1 @@
+function t(t,i,e){var s,n=e||{},o=n.noTrailing,d=void 0!==o&&o,h=n.noLeading,v=void 0!==h&&h,c=n.debounceMode,r=void 0===c?void 0:c,a=!1,u=0;function m(){s&&clearTimeout(s)}function l(){for(var e=arguments.length,n=new Array(e),o=0;o<e;o++)n[o]=arguments[o];var h=this,c=Date.now()-u;function l(){u=Date.now(),i.apply(h,n)}function b(){s=void 0}a||(v||!r||s||l(),m(),void 0===r&&c>t?v?(u=Date.now(),d||(s=setTimeout(r?b:l,t))):l():!0!==d&&(s=setTimeout(r?b:l,void 0===r?t-c:t)))}return l.cancel=function(t){var i=(t||{}).upcomingOnly,e=void 0!==i&&i;m(),a=!e},l}function i(i,e){var s={}.atBegin;return t(i,e,{debounceMode:!1!==(void 0!==s&&s)})}const e=new class{constructor(){this.breakpoints=[{key:"xl",device:"desktop",minWidth:1280},{key:"lg",device:"desktop",minWidth:1024},{key:"md",device:"tablet",minWidth:780},{key:"sm",device:"tablet",minWidth:600},{key:"xs",device:"mobile",minWidth:0}],this.resizeObserver=globalThis.ResizeObserver?new ResizeObserver((()=>this.updateCurrentBreakpoint())):null,this.updateCurrentBreakpoint=t(50,((t={emitEvents:!0})=>{const i=this.currentBreakpoint,e=this.breakpoints.find((t=>t.minWidth<=innerWidth));e&&(this.currentBreakpoint=e,t.emitEvents&&Object.keys(this.currentBreakpoint).filter((t=>!i||this.currentBreakpoint[t]!==i[t])).forEach((t=>this.dispatchEvent(t))))})),this.resizeObserver&&(this.updateCurrentBreakpoint({emitEvents:!1}),this.resizeObserver.observe(document.body))}dispatchEvent(t){globalThis.dispatchEvent(new CustomEvent(`postBreakpoint:${t}`,{detail:this.currentBreakpoint[t]}))}get(t){return this.updateCurrentBreakpoint({emitEvents:!1}),this.currentBreakpoint[t]}};export{e as b,i as d,t}

package/dist/components/component-on-ready.js

@@ -0,0 +1 @@
+function e(e){return"function"==typeof e.componentOnReady?e.componentOnReady():new Promise((t=>{return n=()=>{t(e)},"function"==typeof requestAnimationFrame?requestAnimationFrame(n):setTimeout(n);var n}))}export{e as c}