@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

package/dist/cjs/breakpoints.subject-5q3_3VmC.js

@@ -0,0 +1,284 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-NTRiwz5O.js');
+var listener = require('./listener-D8KLaDvy.js');
+var device = require('./device-DzT8Jy_P.js');
+
+class WindowResizeHandler {
+    constructor(options = {}) {
+        this.previousWidth = index.dsBrowser.window.width;
+        this.previousHeight = index.dsBrowser.window.height;
+        this.previousIsLandscape = this.isLandscape;
+        this.options = {
+            onlyListenToWidthChanges: false,
+        };
+        this.options = Object.assign(Object.assign({}, this.options), options);
+    }
+    async hasResized() {
+        if (device.dsDevice.hasTouchScreen) {
+            if (!this.sameWidth || this.previousIsLandscape !== this.isLandscape) {
+                this.resetPreviousValues();
+                return true;
+            }
+        }
+        else {
+            if (this.options.onlyListenToWidthChanges) {
+                if (!this.sameWidth) {
+                    this.resetPreviousValues();
+                    return true;
+                }
+            }
+            else {
+                if (!this.sameWidth || !this.sameHeight) {
+                    this.resetPreviousValues();
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    get isLandscape() {
+        return index.dsBrowser.window.width > index.dsBrowser.window.height;
+    }
+    get sameWidth() {
+        return this.previousWidth === index.dsBrowser.window.width;
+    }
+    get sameHeight() {
+        return this.previousHeight === index.dsBrowser.window.height;
+    }
+    resetPreviousValues() {
+        this.previousWidth = index.dsBrowser.window.width;
+        this.previousHeight = index.dsBrowser.window.height;
+        this.previousIsLandscape = this.isLandscape;
+    }
+}
+
+class WindowResizeListener extends listener.ListenerAbstract {
+    constructor() {
+        super(...arguments);
+        this.resizeHandler = new WindowResizeHandler({ onlyListenToWidthChanges: true });
+        this.debouncedNotify = index.debounce(() => this.notify(), 100);
+        this.notify = async () => {
+            if (await this.resizeHandler.hasResized()) {
+                super.notify(undefined);
+            }
+        };
+    }
+    connect(el) {
+        super.connect(el);
+        if (this.el) {
+            index.addEventListener(this.el, 'resize', this.debouncedNotify, { passive: true });
+        }
+    }
+    disconnect() {
+        super.disconnect();
+        if (this.el) {
+            index.removeEventListener(this.el, 'resize', this.debouncedNotify);
+        }
+    }
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+const DsAliasBreakpointTablet = 769;
+const DsAliasBreakpointDesktop = 1024;
+const DsAliasBreakpointDesktopLg = 1280;
+const DsAliasBreakpointDesktopXl = 1440;
+const DsAliasBreakpointDesktop2Xl = 1920;
+const DsComponentLogoColorPrimary = "#000d6e";
+const DsComponentLogoColorInverted = "#ffffff";
+const DsComponentLogoSizeBaseMobile = 24;
+const DsComponentLogoSizeBaseDesktop = 32;
+const DsComponentLogoSizeSmMobile = 24;
+const DsComponentLogoSizeSmDesktop = 24;
+const DsComponentLogoSizeLgMobile = 32;
+const DsComponentLogoSizeLgDesktop = 48;
+
+const breakpointTablet = DsAliasBreakpointTablet;
+const breakpointDesktop = DsAliasBreakpointDesktop;
+const breakpointDesktopLg = DsAliasBreakpointDesktopLg;
+const breakpointDesktopXl = DsAliasBreakpointDesktopXl;
+const breakpointDesktop2Xl = DsAliasBreakpointDesktop2Xl;
+const isMobile = (win) => {
+    const width = win.innerWidth;
+    return width < breakpointTablet;
+};
+const isTablet = (win) => {
+    const width = win.innerWidth;
+    return width >= breakpointTablet && width < breakpointDesktop;
+};
+const isTouch = (win) => isMobile(win) || isTablet(win);
+const isDesktop = (win) => !isTouch(win);
+const isDesktopLg = (win) => {
+    const width = win.innerWidth;
+    return width >= breakpointDesktopLg && width < breakpointDesktopXl;
+};
+const isDesktopXl = (win) => {
+    const width = win.innerWidth;
+    return width >= breakpointDesktopXl && width < breakpointDesktop2Xl;
+};
+const isDesktop2Xl = (win) => {
+    const width = win.innerWidth;
+    return width >= breakpointDesktop2Xl;
+};
+const BREAKPOINTS_MAP = {
+    mobile: isMobile,
+    tablet: isTablet,
+    touch: isTouch,
+    desktop: isDesktop,
+    desktopLg: isDesktopLg,
+    desktopXl: isDesktopXl,
+    desktop2Xl: isDesktop2Xl,
+};
+
+class DsBreakpointsUtil {
+    constructor() {
+        this.breakpoints = [];
+        if (index.dsBrowser.hasWindow) {
+            this.win = window;
+            this.win.DesignSystem = this.win.DesignSystem || {};
+            this.detect();
+        }
+    }
+    /**
+     * Is true when mobile breakpoint is active
+     */
+    get isMobile() {
+        return this.includes('mobile');
+    }
+    /**
+     * Is true when tablet breakpoint is active
+     */
+    get isTablet() {
+        return this.includes('tablet');
+    }
+    /**
+     * Is true when mobile or tablet breakpoint is active
+     */
+    get isTouch() {
+        return this.includes('touch');
+    }
+    /**
+     * Is true when desktop, desktopLg, desktopXl or desktop2Xl breakpoint is active
+     */
+    get isDesktop() {
+        return this.includes('desktop');
+    }
+    /**
+     * Is true when desktopLg breakpoint is active
+     */
+    get isDesktopLg() {
+        return this.includes('desktopLg');
+    }
+    /**
+     * Is true when desktopXl breakpoint is active
+     */
+    get isDesktopXl() {
+        return this.includes('desktopXl');
+    }
+    /**
+     * Is true when desktop2Xl breakpoint is active
+     */
+    get isDesktop2Xl() {
+        return this.includes('desktop2Xl');
+    }
+    /**
+     * Verifies if given breakpoint is active
+     * @param breakpoint
+     * @returns boolean: True if breakpoint is active
+     */
+    includes(breakpoint) {
+        var _a;
+        this.detect();
+        return !!((_a = this.breakpoints) === null || _a === void 0 ? void 0 : _a.includes(breakpoint));
+    }
+    /**
+     * Detects breakpoints and updates state
+     * @returns breakpoints: list of breakpoints which are active
+     */
+    detect() {
+        if (this.win) {
+            this.breakpoints = Object.keys(BREAKPOINTS_MAP).filter(p => BREAKPOINTS_MAP[p](this.win));
+            this.win.DesignSystem.breakpoints = this.breakpoints;
+            this.win.DesignSystem.platforms = this.breakpoints;
+        }
+        return this.breakpoints;
+    }
+    /**
+     * Turns the breakpoints array to a object.
+     * @returns Object with all the breakpoints
+     */
+    toObject() {
+        return {
+            mobile: this.breakpoints.includes('mobile'),
+            tablet: this.breakpoints.includes('tablet'),
+            touch: this.breakpoints.includes('touch'),
+            desktop: this.breakpoints.includes('desktop'),
+            desktopLg: this.breakpoints.includes('desktopLg'),
+            desktopXl: this.breakpoints.includes('desktopXl'),
+            desktop2Xl: this.breakpoints.includes('desktop2Xl'),
+        };
+    }
+}
+const dsBreakpoints = /*@__PURE__*/ new DsBreakpointsUtil();
+
+const initialBreakpoints = {
+    mobile: false,
+    tablet: false,
+    touch: false,
+    desktop: false,
+    desktopLg: false,
+    desktopXl: false,
+    desktop2Xl: false,
+};
+
+class DsBreakpointSubject extends listener.Subject {
+    constructor() {
+        super(observer => observer.listenToBreakpoint(this.state));
+        this.state = initialBreakpoints;
+        this.listener = new WindowResizeListener();
+        this.debouncedNotify = index.debounce(() => this.notify(), 50);
+        this.listener.connect();
+        this.listener.add(() => {
+            dsBreakpoints.detect();
+            const newState = dsBreakpoints.toObject();
+            if (!this.isEqual(newState)) {
+                this.state = newState;
+                this.debouncedNotify();
+            }
+        });
+    }
+    attach(observer) {
+        super.attach(observer);
+        dsBreakpoints.detect();
+        const newState = dsBreakpoints.toObject();
+        if (!this.isEqual(newState)) {
+            this.state = newState;
+            this.debouncedNotify();
+        }
+    }
+    isEqual(newState) {
+        return JSON.stringify(this.state) === JSON.stringify(newState);
+    }
+}
+const dsBreakpointSubject = new DsBreakpointSubject();
+
+exports.DsBreakpointSubject = DsBreakpointSubject;
+exports.DsBreakpointsUtil = DsBreakpointsUtil;
+exports.DsComponentLogoColorInverted = DsComponentLogoColorInverted;
+exports.DsComponentLogoColorPrimary = DsComponentLogoColorPrimary;
+exports.DsComponentLogoSizeBaseDesktop = DsComponentLogoSizeBaseDesktop;
+exports.DsComponentLogoSizeBaseMobile = DsComponentLogoSizeBaseMobile;
+exports.DsComponentLogoSizeLgDesktop = DsComponentLogoSizeLgDesktop;
+exports.DsComponentLogoSizeLgMobile = DsComponentLogoSizeLgMobile;
+exports.DsComponentLogoSizeSmDesktop = DsComponentLogoSizeSmDesktop;
+exports.DsComponentLogoSizeSmMobile = DsComponentLogoSizeSmMobile;
+exports.WindowResizeListener = WindowResizeListener;
+exports.dsBreakpointSubject = dsBreakpointSubject;
+exports.dsBreakpoints = dsBreakpoints;
+exports.initialBreakpoints = initialBreakpoints;

package/dist/cjs/config.utils-DCs-qJCq.js

@@ -0,0 +1,148 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-NTRiwz5O.js');
+
+function ListenToConfig() {
+    return function (target, _propertyKey, _descriptor) {
+        const { connectedCallback, disconnectedCallback } = target;
+        target.connectedCallback = function () {
+            attachComponentToConfig(this);
+            return connectedCallback && connectedCallback.call(this);
+        };
+        target.disconnectedCallback = function () {
+            detachComponentFromConfig(this);
+            return disconnectedCallback && disconnectedCallback.call(this);
+        };
+    };
+}
+
+const onDsConfigChange = (callback) => {
+    attachToConfig({
+        configChanged(state) {
+            callback(state);
+        },
+    });
+};
+const useDsConfig = () => {
+    if (!index.dsBrowser.hasWindow) {
+        return undefined;
+    }
+    const win = window;
+    return win && win.DesignSystem && win.DesignSystem.config;
+};
+const attachToConfig = (observer) => {
+    const config = useDsConfig();
+    if (config) {
+        config.attach(observer);
+    }
+};
+const detachFromConfig = (observer) => {
+    const config = useDsConfig();
+    if (config) {
+        config.detach(observer);
+    }
+};
+const attachComponentToConfig = (observer) => {
+    const config = useDsConfig();
+    if (config) {
+        config.attachComponent(observer);
+    }
+};
+const detachComponentFromConfig = (observer) => {
+    const config = useDsConfig();
+    if (config) {
+        config.detachComponent(observer);
+    }
+};
+const updateDsBrand = (brand) => {
+    const config = useDsConfig();
+    if (config) {
+        config.brand = brand;
+    }
+};
+const updateDsLanguage = (language) => {
+    const config = useDsConfig();
+    if (config) {
+        config.language = language;
+    }
+};
+const updateDsFallbackLanguage = (fallbackLanguage) => {
+    const config = useDsConfig();
+    if (config) {
+        config.fallbackLanguage = fallbackLanguage;
+    }
+};
+const updateDsRegion = (region) => {
+    const config = useDsConfig();
+    if (config) {
+        config.region = region;
+    }
+};
+const updateDsAllowedLanguages = (allowedLanguages) => {
+    const config = useDsConfig();
+    if (config) {
+        config.allowedLanguages = allowedLanguages;
+    }
+};
+const updateDsIcons = (icons) => {
+    const config = useDsConfig();
+    if (config) {
+        config.icons = Object.assign(Object.assign({}, config.icons), icons);
+    }
+};
+const updateDsAnimated = (animated) => {
+    const config = useDsConfig();
+    if (config) {
+        config.animated = animated;
+    }
+};
+const updateDsLogger = (components) => {
+    const config = useDsConfig();
+    if (config) {
+        config.logger.components = components;
+        config.logger.render = true;
+        config.logger.custom = true;
+        config.logger.event = true;
+        config.logger.lifecycle = true;
+    }
+};
+const updateDsLegalLinks = (legalLinks) => {
+    const config = useDsConfig();
+    if (config) {
+        config.legalLinks = legalLinks;
+    }
+};
+const updateDsLegalText = (legalText) => {
+    const config = useDsConfig();
+    if (config) {
+        config.legalText = legalText;
+    }
+};
+const updateDsSocialLinks = (socialLinks) => {
+    const config = useDsConfig();
+    if (config) {
+        config.socialLinks = socialLinks;
+    }
+};
+
+exports.ListenToConfig = ListenToConfig;
+exports.attachComponentToConfig = attachComponentToConfig;
+exports.attachToConfig = attachToConfig;
+exports.detachComponentFromConfig = detachComponentFromConfig;
+exports.detachFromConfig = detachFromConfig;
+exports.onDsConfigChange = onDsConfigChange;
+exports.updateDsAllowedLanguages = updateDsAllowedLanguages;
+exports.updateDsAnimated = updateDsAnimated;
+exports.updateDsBrand = updateDsBrand;
+exports.updateDsFallbackLanguage = updateDsFallbackLanguage;
+exports.updateDsIcons = updateDsIcons;
+exports.updateDsLanguage = updateDsLanguage;
+exports.updateDsLegalLinks = updateDsLegalLinks;
+exports.updateDsLegalText = updateDsLegalText;
+exports.updateDsLogger = updateDsLogger;
+exports.updateDsRegion = updateDsRegion;
+exports.updateDsSocialLinks = updateDsSocialLinks;
+exports.useDsConfig = useDsConfig;

package/dist/cjs/create-validator-decorator-C4BA-l0Q.js

@@ -0,0 +1,212 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-NTRiwz5O.js');
+
+const EMPTY_VALUES = [undefined, null, '', Number.NaN];
+function isValueEmpty(value) {
+    return EMPTY_VALUES.some(v => Object.is(v, value));
+}
+
+/** 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());
+}
+/**
+ * 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.
+ */
+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.
+ */
+function getValidationContext(component, property) {
+    const host = index.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);
+        },
+    };
+}
+
+exports.createValidatorDecorator = createValidatorDecorator;
+exports.getValidationContext = getValidationContext;
+exports.isValueEmpty = isValueEmpty;