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

package/dist/esm/tslib.es6-CoU9H0PW.js

@@ -0,0 +1,113 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { d as dsBrowser } from './index-DxEN1zze.js';
+
+const defaultLoggerConfig = {
+    components: [],
+    event: false,
+    lifecycle: false,
+    render: false,
+    custom: false,
+};
+const getConfig = () => {
+    let loggerConfig = defaultLoggerConfig;
+    if (dsBrowser.hasWindow &&
+        window.DesignSystem &&
+        window.DesignSystem.config &&
+        window.DesignSystem.config.logger) {
+        loggerConfig = window.DesignSystem.config.logger;
+    }
+    return loggerConfig;
+};
+const buildLogger = (tag) => {
+    const l = (type, message, ...optionalParams) => {
+        const config = getConfig();
+        if (config.components.includes(tag) && config[type]) {
+            console.log(message, ...optionalParams);
+        }
+    };
+    return {
+        custom: (message, ...optionalParams) => l('custom', ` ➡️ [${tag}] - ${message}`, ...optionalParams),
+        lifecycle: (lifecycleName, ...optionalParams) => l('lifecycle', `${lifecycleName === 'connectedCallback'
+            ? '🟢'
+            : lifecycleName === 'disconnectedCallback'
+                ? '🔴'
+                : lifecycleName === 'componentDidLoad'
+                    ? '🏁'
+                    : ' ➡️'} [${tag}] - (${lifecycleName})`, ...optionalParams),
+        event: (eventName, ...optionalParams) => l('event', `🔥 [${tag}] - (${eventName})`, ...optionalParams),
+        render: (...optionalParams) => l('render', `🖌️ [${tag}] - (render)`, ...optionalParams),
+    };
+};
+function Logger(tag = 'unknown') {
+    return function (target, _propertyKey, _descriptor) {
+        const { connectedCallback, disconnectedCallback, render, componentDidLoad, createLogger } = target;
+        const log = buildLogger(tag);
+        target.connectedCallback = function () {
+            log.lifecycle(`connectedCallback`, this);
+            const events = Object.keys(this)
+                .filter(n => n.startsWith('ds'))
+                .filter(n => typeof this[n] === 'object');
+            for (let index = 0; index < events.length; index++) {
+                const event = events[index];
+                const emitter = this[event];
+                this[event] = {
+                    emit: (...args) => {
+                        log.event(event, this, ...args);
+                        return emitter.emit.call(this, ...args);
+                    },
+                };
+            }
+            createLogger.call(this, log.custom);
+            return connectedCallback && connectedCallback.call(this);
+        };
+        target.disconnectedCallback = function () {
+            log.lifecycle(`disconnectedCallback`, this);
+            return disconnectedCallback && disconnectedCallback.call(this);
+        };
+        target.componentDidLoad = function () {
+            log.lifecycle(`componentDidLoad`, this);
+            return componentDidLoad && componentDidLoad.call(this);
+        };
+        target.render = function () {
+            log.render(this);
+            return render.call(this);
+        };
+    };
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __decorate(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;
+}
+
+function __metadata(metadataKey, metadataValue) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+export { Logger as L, __decorate as _, __metadata as a };

package/dist/esm/type-3Im_fSnq.js

@@ -0,0 +1,31 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { c as createValidatorDecorator, g as getValidationContext } from './create-validator-decorator-Da-m3zPX.js';
+
+/**
+ * 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').
+ */
+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;
+        },
+    });
+}
+
+export { Type as T };

package/dist/types/components/actions/button/button-group/button-group.d.ts

@@ -0,0 +1,41 @@
+import { LogInstance } from "../../../../utils/index";
+import { HTMLStencilElement } from '../../../../stencil-public-runtime';
+import { ButtonGroupAlignment, ButtonGroupDirection } from '../button.interfaces';
+import { DsComponentInterface } from "../../../../global/index";
+/**
+ * Button group groups multiple buttons together with layout control for alignment and direction.
+ *
+ * @slot - One or more `ds-button` or `<button>` elements to group together.
+ * @part group - The container element that wraps the grouped buttons.
+ */
+export declare class ButtonGroup implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    /**
+     * PUBLIC PROPERTY API
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Horizontal alignment of the grouped buttons.
+     */
+    readonly align?: ButtonGroupAlignment;
+    /**
+     * `auto` will position the button items vertical and full width.
+     * `row` will force that the buttons are also horizontal on mobile.
+     */
+    readonly direction: ButtonGroupDirection;
+    /**
+     * If `true` the flex direction is used in reverse on mobile.
+     */
+    readonly reverse: boolean;
+    /**
+     * If `true` the buttons will expand to fill the available space on mobile.
+     */
+    readonly wide: boolean;
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render(): any;
+}

package/dist/types/components/actions/button/button.d.ts

@@ -0,0 +1,192 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { DsComponentInterface } from "../../../global/index";
+import { type LogInstance } from "../../../utils/index";
+import { type ButtonBrandSize, type ButtonColor, type ButtonElementType, type ButtonSize, type ButtonTarget, ButtonBlurDetail, ButtonClickDetail, ButtonDidRenderDetail, ButtonFocusDetail, ButtonNavigateDetail } from './button.interfaces';
+/**
+ * Button provides a clickable element for triggering actions, submitting forms, or navigating — supporting text, icons, or both.
+ *
+ * @slot - Button label text and/or icon children. Rendered inside a `<span part="label">` wrapper.
+ * @part native - The native `<button>` or `<a>` element.
+ * @part spinner - The loading spinner shown when `loading` is true.
+ * @part icon - The leading icon wrapper (or the brand icon wrapper when `brandIcon` is set).
+ * @part label - The text label wrapper (`<span>`).
+ * @part icon-right - The trailing icon wrapper.
+ */
+export declare class Button implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    private inheritAttributes;
+    internals: ElementInternals;
+    el: HTMLStencilElement;
+    /**
+     * PUBLIC PROPERTY API
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * The color to use from your application's color palette.
+     */
+    readonly color: ButtonColor;
+    /**
+     * The type of button.
+     */
+    readonly elementType: ButtonElementType;
+    /**
+     * If `true`, the user cannot interact with the button.
+     */
+    readonly disabled: boolean;
+    /**
+     * Size of the button
+     */
+    readonly size?: ButtonSize;
+    /**
+     * Specifies the URL of the page the link goes to
+     */
+    readonly href: string;
+    /**
+     * Specifies where to display the linked URL.
+     * Only applies when an `href` is provided.
+     */
+    readonly target: ButtonTarget;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+     */
+    readonly rel: string;
+    /**
+     * This attribute instructs browsers to download a URL instead of navigating to
+     * it, so the user will be prompted to save it as a local file. If the attribute
+     * has a value, it is used as the pre-filled file name in the Save prompt
+     * (the user can still change the file name if they want).
+     */
+    readonly download: string;
+    /**
+     * If `true` adds a box shadow to improve readability on image background
+     * */
+    readonly shadow: boolean;
+    /**
+     * If `true` the width of the buttons is limited
+     */
+    readonly square: boolean;
+    /**
+     * If `true` the button has a full width
+     */
+    readonly wide: boolean;
+    /**
+     * If `true` the button has no padding and a reduced height
+     */
+    readonly flat: boolean;
+    /**
+     * If `true` the button is outlined
+     */
+    readonly outlined: boolean;
+    /**
+     * If `true` the button is inverted
+     */
+    readonly inverted: boolean;
+    /**
+     * If `true` the label is hidden and a loading spinner is shown instead.
+     */
+    readonly loading: boolean;
+    /**
+     * Name of the left button icon
+     */
+    readonly icon: string;
+    /**
+     * If `true` the icon turns
+     */
+    readonly iconTurn: boolean;
+    /**
+     * Name of the right button icon
+     */
+    readonly iconRight: string;
+    /**
+     * A brand icon shown above the label instead of the regular leading/trailing icons.
+     * Accepts either a URL to an SVG file or raw `<svg>` markup.
+     * When set, `icon` and `iconRight` are ignored.
+     */
+    readonly brandIcon: string;
+    /**
+     * Size of the brand icon.
+     */
+    readonly brandSize: ButtonBrandSize;
+    /**
+     * The label of the button will not break
+     */
+    readonly noWrap: boolean;
+    /**
+     * The name of the button, which is submitted with the form data.
+     */
+    readonly name: string;
+    /**
+     * The value of the button, which is submitted with the form data.
+     */
+    readonly value: string;
+    /**
+     * A11y attributes for the native button element.
+     */
+    readonly a11yControls: string;
+    /**
+     * A11y attributes for the native button element.
+     */
+    readonly a11yTitle: string;
+    /**
+     * A11y attributes for the native button element.
+     */
+    readonly a11yLabel: string;
+    /**
+     * A11y attributes for the native button element.
+     */
+    a11yHaspopup: string;
+    /**
+     * Emitted when the link element has clicked.
+     */
+    dsClick: EventEmitter<ButtonClickDetail>;
+    /**
+     * Emitted when the link element has clicked.
+     */
+    dsNavigate: EventEmitter<ButtonNavigateDetail>;
+    /**
+     * Emitted when the button has focus.
+     */
+    dsFocus: EventEmitter<ButtonFocusDetail>;
+    /**
+     * Emitted when the button loses focus.
+     */
+    dsBlur: EventEmitter<ButtonBlurDetail>;
+    /**
+     * Emitted when the button has been  rendered.
+     */
+    dsDidRender: EventEmitter<ButtonDidRenderDetail>;
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToClick(ev: UIEvent): void;
+    /**
+     * EVENT HANDLERS
+     * ─────────────────────────────────────────────────────
+     */
+    private get isIconInverted();
+    private get hasBrandIcon();
+    private get isBrandIconSvg();
+    private get brandIconColor();
+    private get leftIconAttrs();
+    private get leftRightAttrs();
+    private get loadingAttrs();
+    private handleHostClick;
+    private handleFocus;
+    private handleBlur;
+    private handleClick;
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render(): any;
+}

package/dist/types/components/actions/button/button.interfaces.d.ts

@@ -0,0 +1,35 @@
+import { type IconSize } from '../../media/brand-icon/brand-icon.interfaces';
+export declare const BUTTON_GROUP_ALIGNMENTS: readonly ["right", "center", "left"];
+export declare const BUTTON_GROUP_DIRECTIONS: readonly ["auto", "row", "column"];
+export declare const BUTTON_COLORS: readonly ["primary", "secondary", "tertiary", "ghost", "brand-purple", "brand-red", "brand-yellow", "brand-green", "info", "success", "warning", "danger", "link"];
+export declare const BUTTON_ELEMENT_TYPES: readonly ["button", "reset", "submit"];
+export declare const BUTTON_SIZES: readonly ["sm", "lg"];
+export declare const BUTTON_TARGETS: readonly ["_blank", "_parent", "_self", "_top"];
+export declare const BUTTON_BRAND_SIZES: readonly ["sm", "lg"];
+export type ButtonGroupAlignment = (typeof BUTTON_GROUP_ALIGNMENTS)[number] | undefined;
+export type ButtonGroupDirection = (typeof BUTTON_GROUP_DIRECTIONS)[number];
+export type ButtonColor = (typeof BUTTON_COLORS)[number];
+export type ButtonElementType = (typeof BUTTON_ELEMENT_TYPES)[number];
+export type ButtonSize = (typeof BUTTON_SIZES)[number] | undefined;
+export type ButtonTarget = (typeof BUTTON_TARGETS)[number];
+export type ButtonBrandSize = IconSize;
+export type ButtonAria = {
+    controls?: string;
+    title?: string;
+    label?: string;
+    haspopup?: string;
+};
+export interface ButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsButtonElement;
+}
+export type ButtonBlurDetail = void;
+export type ButtonBlur = ButtonCustomEvent<ButtonBlurDetail>;
+export type ButtonFocusDetail = void;
+export type ButtonFocus = ButtonCustomEvent<ButtonFocusDetail>;
+export type ButtonClickDetail = MouseEvent;
+export type ButtonClick = ButtonCustomEvent<ButtonClickDetail>;
+export type ButtonNavigateDetail = MouseEvent;
+export type ButtonNavigate = ButtonCustomEvent<ButtonNavigateDetail>;
+export type ButtonDidRenderDetail = void;
+export type ButtonDidRender = ButtonCustomEvent<ButtonDidRenderDetail>;

package/dist/types/components/actions/close/close.d.ts

@@ -0,0 +1,59 @@
+import { type LogInstance } from "../../../utils/index";
+import { DsComponentInterface, DsConfigObserver, DsConfigState, DsLanguage, DsRegion } from "../../../global/index";
+import { ButtonColor } from '../button/button.interfaces';
+import { CloseButtonSize, CloseSize } from './close.interfaces';
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+/**
+ * Close renders a button element for closing or dismissing UI components with customizable size and color.
+ *
+ * @part close - The close button element.
+ */
+export declare class Close implements DsComponentInterface, DsConfigObserver {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    language: DsLanguage;
+    region: DsRegion;
+    /**
+     * PUBLIC PROPERTY API
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Define the size of badge. Small is recommended for tabs.
+     */
+    readonly size?: CloseSize;
+    /**
+     * If `true` it supports dark backgrounds.
+     */
+    readonly inverted: boolean;
+    /**
+     * If `true` the close component will be disabled and not interactive.
+     */
+    readonly disabled: boolean;
+    /**
+     * If `true` the close component will be rendered as a button element.
+     * This is useful when you want to use the close component outside of a notification or alert, for example as a standalone button.
+     */
+    readonly button: boolean;
+    /**
+     * Defines the color of the button variant. Only applicable if `button` is `true`.
+     */
+    readonly buttonColor?: ButtonColor;
+    /**
+     * Define the size of the button variant. Only applicable if `button` is `true`.
+     */
+    readonly buttonSize?: CloseButtonSize;
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * @internal define config for the component
+     */
+    configChanged(state: DsConfigState): Promise<void>;
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render(): any;
+}

package/dist/types/components/actions/close/close.i18n.d.ts

@@ -0,0 +1,6 @@
+import { I18n } from '../../../interfaces';
+interface I18nDsClose {
+    close: string;
+}
+export declare const i18nDsClose: I18n<I18nDsClose>;
+export {};

package/dist/types/components/forms/checkbox/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,173 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { DsComponentInterface } from "../../../../global/index";
+import { FieldInterface } from '../../input/field.util';
+import { DsConfigState, DsLanguage, DsRegion } from "../../../../global/index";
+import { LogInstance } from "../../../../utils/index";
+import { InputColor } from '../../input/input.interfaces';
+import { CheckboxLabelPosition, CheckboxTileColor, CheckboxGroupColumns, CheckboxGroupBlurDetail, CheckboxGroupFocusDetail, CheckboxGroupChangeDetail } from '../checkbox.interfaces';
+import { HTMLStencilElement } from '../../../../stencil-public-runtime';
+/**
+ * Checkbox Group groups multiple checkboxes so multiple options can be selected within a form field.
+ *
+ * @slot - The checkbox items to display inside the group.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
+ */
+export declare class CheckboxGroup implements DsComponentInterface, FieldInterface {
+    inputId: string;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    internals: ElementInternals;
+    language: DsLanguage;
+    region: DsRegion;
+    private internalValue;
+    hasInvalidTextSlotContent: boolean;
+    private disconnectInvalidTextSlotWatcher?;
+    /**
+     * PUBLIC PROPERTY API
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * If `true`, disables the automatic `invalid`/`invalidText` behavior that the `@baloise/ds-angular` integration
+     * applies when the bound `NgControl` is touched and invalid. Only affects the Angular integration; it is a no-op
+     * in other framework integrations.
+     */
+    readonly autoInvalidOff: boolean;
+    /**
+     * Defines the color of the input. The default value is `primary`.
+     */
+    readonly color: InputColor;
+    /**
+     * Defines the column size like the grid.
+     */
+    readonly cols: CheckboxGroupColumns;
+    /**
+     * Defines the column size for mobile and bigger like the grid.
+     */
+    readonly colsMobile: CheckboxGroupColumns;
+    /**
+     * Defines the column size for tablet and bigger like the grid.
+     */
+    readonly colsTablet: CheckboxGroupColumns;
+    /**
+     * If `true` it acts as the main form control
+     */
+    readonly control: boolean;
+    /**
+     * The description of the input, which is displayed below the input field.
+     */
+    readonly description: string;
+    /**
+     * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+     */
+    readonly disabled: boolean;
+    /**
+     * If `true` the component gets a invalid style.
+     */
+    readonly invalid: boolean;
+    /**
+     * The text to display when the input is in an invalid state.
+     */
+    readonly invalidText: string;
+    /**
+     * The label of the input, which is displayed above the input field.
+     */
+    readonly label: string;
+    /**
+     * Defines the position of the label, either before or after the checkbox input. Default is after.
+     */
+    readonly labelPosition: CheckboxLabelPosition;
+    /**
+     * Shows a loading indicator at the end of the input and replaces the end slot content.
+     */
+    readonly loading: boolean;
+    /**
+     * The name of the checkboxes in the group. Child checkboxes will inherit the name.
+     */
+    readonly name: string;
+    /**
+     * If `true` the element can not mutated, meaning the user can not edit the control.
+     */
+    readonly readonly: boolean;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    readonly required: boolean;
+    /**
+     * Defines the layout of the input
+     */
+    readonly tile: boolean;
+    /**
+     * If `true` and `tile` is set, the checkbox box is visually hidden on every checkbox in the group.
+     */
+    readonly hideTrigger: boolean;
+    /**
+     * Defines the color of the tile checkbox.
+     */
+    readonly tileColor?: CheckboxTileColor;
+    /**
+     * The value of the control.
+     */
+    readonly value: any[];
+    valueChanged(): void;
+    /**
+     * Displays the checkboxes vertically
+     */
+    readonly vertical: boolean;
+    /**
+     * Emitted when a keyboard input occurred.
+     */
+    dsBlur: EventEmitter<CheckboxGroupBlurDetail>;
+    /**
+     * Emitted when the input value has changed.
+     */
+    dsChange: EventEmitter<CheckboxGroupChangeDetail>;
+    /**
+     * Emitted when the input has focus.
+     */
+    dsFocus: EventEmitter<CheckboxGroupFocusDetail>;
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentWillUpdate(): void;
+    componentDidLoad(): void;
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToDsBlur(ev: CustomEvent<FocusEvent>): void;
+    listenToDsChange(ev: UIEvent): void;
+    listenToDsFocus(ev: CustomEvent<FocusEvent>): void;
+    listenToReset(ev: UIEvent): void;
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * @internal define config for the component
+     */
+    configChanged(state: DsConfigState): Promise<void>;
+    /**
+     * EVENT HANDLERS
+     * ─────────────────────────────────────────────────────
+     */
+    private handleValueChange;
+    private handleSlotChange;
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    private formatValueToArray;
+    private getCheckboxes;
+    private passDownAttributes;
+    private updateValues;
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render(): any;
+}