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

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

@@ -0,0 +1,211 @@
+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();
+/** Stores dependency relationships per prototype: dependencyProp -> Set<dependentProp>. */
+const dependenciesByTarget = 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());
+}
+/**
+ * Registers that `dependentProp` should be re-validated when `dependencyProp` changes.
+ * Ensures the dependency property has an accessor so its setter can trigger dependents.
+ */
+export function registerDependency(target, dependencyProp, dependentProp) {
+    // Ensure dependency has an accessor so its setter can run dependent validators
+    createPropertyAccessor(target, dependencyProp);
+    const depsByProp = getOrCreate(dependenciesByTarget, target, () => new Map());
+    const dependents = getOrCreate(depsByProp, dependencyProp, () => new Set());
+    dependents.add(dependentProp);
+}
+/**
+ * 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);
+                // Run validators for any properties that depend on this property.
+                const proto = Object.getPrototypeOf(this);
+                const depsByProp = dependenciesByTarget.get(proto);
+                if (depsByProp) {
+                    const dependents = depsByProp.get(property);
+                    if (dependents) {
+                        for (const dependent of dependents) {
+                            runValidators(this, dependent);
+                        }
+                    }
+                }
+            }
+        },
+        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 { GreaterThan, LessThan } from './bound';
+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,40 @@
+import { isValueEmpty } from "../is-value-empty";
+import { createValidatorDecorator, getValidationContext, registerDependency, } 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.
+ *
+ * @param options - Optional configuration.
+ * @param options.when - The property name to watch. Validation only runs when this property's value matches the `truthy` option.
+ * @param options.truthy - The value that the `when` property must match for validation to run. Defaults to `true`.
+ */
+export function Required(options) {
+    const validator = createValidatorDecorator({
+        priority: 0,
+        blocking: true,
+        validateEmptyValues: true,
+        run(component, property) {
+            if (options && typeof options.when === 'string') {
+                const truthy = options.truthy ?? true;
+                if (component[options.when] !== truthy) {
+                    return true;
+                }
+            }
+            const { value, showError } = getValidationContext(component, property);
+            if (isValueEmpty(value)) {
+                showError('is required');
+                return false;
+            }
+            return true;
+        },
+    });
+    return function (target, property) {
+        validator(target, property);
+        if (options?.when) {
+            registerDependency(target, options.when, property);
+        }
+    };
+}

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/component-names.json

@@ -33,6 +33,7 @@
     "post-popover",
     "post-popover-trigger",
     "post-popovercontainer",
+    "post-progressbar",
     "post-rating",
     "post-stepper",
     "post-stepper-item",

package/dist/components/breakpoints.js

@@ -0,0 +1 @@
+import{getElement as t}from"@stencil/core/internal/client";const e=[void 0,null,"",Number.NaN];function n(t){return e.some((e=>Object.is(e,t)))}const i=new WeakSet,o=new WeakSet,s=new WeakMap,c=new WeakMap,r=new WeakMap,u=new WeakMap;function a(t,e,n){let i=t.get(e);return i||(i=n(),t.set(e,i)),i}function f(t){return a(c,t,(()=>new Set))}function h(t){return a(r,t,(()=>new Map))}function d(t,e,n){v(t,e);const i=a(u,t,(()=>new Map));a(i,e,(()=>new Set)).add(n)}function v(t,e){const n=Object.getOwnPropertyDescriptor(t,e);n&&n.get||Object.defineProperty(t,e,{get(){return h(this).get(e)},set(t){if(h(this).set(e,t),o.has(this)){l(this,e);const t=Object.getPrototypeOf(this),n=u.get(t);if(n){const t=n.get(e);if(t)for(const e of t)l(this,e)}}},enumerable:!0,configurable:!0})}function l(t,e){const i=Object.getPrototypeOf(t),o=s.get(i);if(!o)return;const c=o.get(e);if(!c||0===c.length)return;const r=[...c].sort(((t,e)=>t.priority-e.priority)),u=n(t[e]);for(const n of r)if((!u||n.validateEmptyValues)&&!n.run(t,e)&&n.blocking)break}function b(t){return function(e,n){v(e,n),function(t){if(i.has(t))return;i.add(t);const e="componentDidLoad"in t&&"function"==typeof t.componentDidLoad?t.componentDidLoad:void 0;Object.defineProperty(t,"componentDidLoad",{writable:!0,configurable:!0,value:function(...t){o.add(this);const n=f(Object.getPrototypeOf(this));for(const t of n)l(this,t);if(e)return e.apply(this,t)}})}(e),f(e).add(n),function(t,e){const n=a(s,t,(()=>new Map));return a(n,e,(()=>[]))}(e,n).push(t)}}function m(e,n){const i=t(e),o=i.localName,s=e[n];return{value:s,showError(t){console.error(`[${o}] Property "${String(n)}" ${t}. Received: ${JSON.stringify(s)}.`,i)}}}function p(t,e,n){var i,o=n||{},s=o.noTrailing,c=void 0!==s&&s,r=o.noLeading,u=void 0!==r&&r,a=o.debounceMode,f=void 0===a?void 0:a,h=!1,d=0;function v(){i&&clearTimeout(i)}function l(){for(var n=arguments.length,o=new Array(n),s=0;s<n;s++)o[s]=arguments[s];var r=this,a=Date.now()-d;function l(){d=Date.now(),e.apply(r,o)}function b(){i=void 0}h||(u||!f||i||l(),v(),void 0===f&&a>t?u?(d=Date.now(),c||(i=setTimeout(f?b:l,t))):l():!0!==c&&(i=setTimeout(f?b:l,void 0===f?t-a:t)))}return l.cancel=function(t){var e=(t||{}).upcomingOnly,n=void 0!==e&&e;v(),h=!n},l}function w(t,e){var n={}.atBegin;return p(t,e,{debounceMode:!1!==(void 0!==n&&n)})}const k=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=p(50,((t={emitEvents:!0})=>{const e=this.currentBreakpoint,n=this.breakpoints.find((t=>t.minWidth<=innerWidth));n&&(this.currentBreakpoint=n,t.emitEvents&&Object.keys(this.currentBreakpoint).filter((t=>!e||this.currentBreakpoint[t]!==e[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{k as b,b as c,w as d,m as g,n as i,d as r,p as 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}