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

package/dist/collection/components/accordion/accordion.js

@@ -1,704 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { __decorate, __metadata } from "tslib";
-import { h, Host } from "@stencil/core";
-import { ariaBooleanToString, Logger, hasValue, OneOf, Type } from "../../utils/index";
-import { ListenToConfig } from "../../global/index";
-import { ACCORDION_SUMMARY_LEVELS, ACCORDION_MARKERS, ACCORDION_MARKER_POSITIONS, ACCORDION_BUTTON_COLORS, ACCORDION_BUTTON_SIZES, } from "./accordion.interfaces";
-/**
- * Accordion displays collapsible content sections with open/close toggle buttons and optional animations.
- * Perfect for organizing large amounts of content into logical, expandable groups.
- *
- * @slot content - The content slot defines the collapsible content of the accordion, which is hidden by default and becomes visible when the accordion is opened.
- * @slot summary - The summary slot defines the summary of the accordion, which is always visible and serves as the toggle button to open or close the accordion.
- * @part accordion - The accordion container element.
- * @part header - The header element that contains the summary and marker.
- * @part summary - The summary element that serves as the toggle button.
- * @part marker - The marker element that indicates the open/close state of the accordion.
- * @part content - The content element that contains the collapsible content of the accordion.
- */
-export class Accordion {
-    constructor() {
-        this.accordionId = `ds-accordion-${accordionIds++}`;
-        this.animated = true;
-        this.isAnimating = false;
-        /**
-         * PUBLIC PROPERTY API
-         * ─────────────────────────────────────────────────────
-         */
-        /**
-         * If `true` the accordion is open.
-         */
-        this.open = false;
-        /**
-         * The name of the group the accordion belongs to. Accordions with the same group name will automatically
-         * close when another accordion in the same group is opened.
-         */
-        this.group = '';
-        /**
-         * The heading level of the summary
-         */
-        this.summaryLevel = 'h3';
-        /**
-         * If `true` the summary is styled as a title.
-         */
-        this.summaryTitle = false;
-        /**
-         * Displays the summary as a button and hides the default marker.
-         */
-        this.button = false;
-        /**
-         * If `true` the button is expanded to full width. Only applies if `button` is `true`.
-         */
-        this.buttonWide = false;
-        /**
-         * The color of the button. Only applies if `button` is `true`.
-         */
-        this.buttonColor = 'primary';
-        /**
-         * Label of the open trigger button
-         */
-        this.buttonLabelOpen = '';
-        /**
-         * BalIcon of the open trigger button
-         */
-        this.buttonIconOpen = '';
-        /**
-         * Label of the close trigger button
-         */
-        this.buttonLabelClose = '';
-        /**
-         * BalIcon of the close trigger button
-         */
-        this.buttonIconClose = '';
-        this.handleContentTransitionEnd = (_event) => {
-            if (this.animated) {
-                this.isAnimating = false;
-            }
-        };
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    /**
-     * PUBLIC LISTENERS
-     * ─────────────────────────────────────────────────────
-     */
-    listenToDsOpened(event) {
-        const { id, group } = event.detail;
-        // ignore self
-        if (id === this.accordionId)
-            return;
-        // only react if same group (or no group = global)
-        if ((this.group && group !== this.group) || !hasValue(this.group))
-            return;
-        this.open = false;
-    }
-    /**
-     * PUBLIC METHODS
-     * ─────────────────────────────────────────────────────
-     */
-    /**
-     * @internal define config for the component
-     */
-    async configChanged(state) {
-        this.animated = state.animated;
-    }
-    /**
-     * PRIVATE METHODS
-     * ─────────────────────────────────────────────────────
-     */
-    handleToggle(event, open) {
-        // check if target is link or button and ignore toggle if so,
-        // to allow nested interactive elements in the summary
-        const target = event.target;
-        const interactiveElement = target.closest('a, button, input, ds-toggle, ds-checkbox');
-        if (interactiveElement && interactiveElement !== event.currentTarget) {
-            return;
-        }
-        if (this.animated) {
-            this.isAnimating = true;
-        }
-        else {
-            this.isAnimating = false;
-        }
-        this.open = open;
-        this.dsToggle.emit({ id: this.accordionId, group: this.group, open });
-        if (open) {
-            this.dsOpened.emit({ id: this.accordionId, group: this.group, open });
-        }
-        else {
-            this.dsClosed.emit({ id: this.accordionId, group: this.group, open });
-        }
-    }
-    /**
-     * RENDER
-     * ─────────────────────────────────────────────────────
-     */
-    render() {
-        const MarkerIcon = (h("ds-icon", { key: '0fe58bcaeae5e7193a7b7143321d64a64a495ef0', id: "marker", part: "marker", class: {
-                'has-marker-plus': this.marker === 'plus' || (this.marker === 'plus-minus' && !this.open),
-                'has-marker-minus': this.marker === 'plus-minus' && this.open,
-            }, name: this.marker === 'plus' ? 'plus' : this.marker !== 'plus-minus' ? 'caret-down' : this.open ? 'minus' : 'plus' }));
-        return (h(Host, { key: '38ce5a111cda933f025a78d5c097ccb83e65e7b9', class: {
-                'is-button': !!this.buttonIconOpen || !!this.buttonIconClose,
-                'is-title': this.summaryTitle === true || hasValue(this.summaryVisualLevel),
-                [`is-${this.summaryVisualLevel}`]: !!this.summaryVisualLevel,
-                'is-animated': !!this.animated,
-                'is-animating': !!this.animated && this.isAnimating,
-            } }, h(this.summaryLevel, { key: 'aef41dfad57b8960da26f5884a6e500eb784e435', id: "header", part: "header" }, h("button", { key: '572791597da8b9244e3f93e56bcedfdd69cf5cda', type: "button", "aria-expanded": ariaBooleanToString(this.open), "aria-controls": "content", id: "summary", part: "summary", onClick: ev => this.handleToggle(ev, !this.open), class: {
-                'ds-button': this.button,
-                'is-wide': this.buttonWide,
-                [`is-${this.buttonColor}`]: !!this.buttonColor,
-                [`is-${this.buttonSize}`]: !!this.buttonSize,
-                'has-marker-left': this.markerPosition === 'left',
-            } }, this.buttonIconOpen || this.buttonIconClose ? (h("ds-icon", { id: "marker", part: "marker", name: this.open ? this.buttonIconOpen : this.buttonIconClose })) : (this.button && MarkerIcon), h("span", { key: 'f2571ca20da56deaf2d4c03122aad1707bfce177', id: "label", class: { 'is-button': this.button } }, h("slot", { key: '6d3894f9bcdc47106ca56de585f2844217804b2c', name: "summary" }, this.open ? this.buttonLabelOpen : this.buttonLabelClose)), !this.button && this.marker !== 'none' && !this.buttonIconOpen && MarkerIcon)), h("div", { key: 'b78f2a316386397c3630536e3c10508ca65f09aa', id: "content", role: "region", "aria-labelledby": "summary", part: "content", hidden: !this.open, onTransitionEnd: this.handleContentTransitionEnd }, h("div", { key: '9db82b7cb7bd8f104510f67692e4dd198c6aaecf', id: "inner" }, h("slot", { key: '3579fd00500198ec15f3ef8f74cf8e64c8da100d', name: "content" }), h("slot", { key: '2e69895b9a10aaa2b41d5ffd032204561bb23287' })))));
-    }
-    static get is() { return "ds-accordion"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["accordion.host.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["accordion.host.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "open": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the accordion is open."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "open",
-                "defaultValue": "false"
-            },
-            "group": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the group the accordion belongs to. Accordions with the same group name will automatically\nclose when another accordion in the same group is opened."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "group",
-                "defaultValue": "''"
-            },
-            "summaryLevel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "AccordionSummaryLevel",
-                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\"",
-                    "references": {
-                        "AccordionSummaryLevel": {
-                            "location": "import",
-                            "path": "./accordion.interfaces",
-                            "id": "src/components/accordion/accordion.interfaces.ts::AccordionSummaryLevel",
-                            "referenceLocation": "AccordionSummaryLevel"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The heading level of the summary"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "summary-level",
-                "defaultValue": "'h3'"
-            },
-            "summaryVisualLevel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "AccordionSummaryLevel",
-                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | undefined",
-                    "references": {
-                        "AccordionSummaryLevel": {
-                            "location": "import",
-                            "path": "./accordion.interfaces",
-                            "id": "src/components/accordion/accordion.interfaces.ts::AccordionSummaryLevel",
-                            "referenceLocation": "AccordionSummaryLevel"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The visual heading level of the summary."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "summary-visual-level"
-            },
-            "summaryTitle": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the summary is styled as a title."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "summary-title",
-                "defaultValue": "false"
-            },
-            "marker": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "AccordionMarker",
-                    "resolved": "\"none\" | \"plus\" | \"plus-minus\" | undefined",
-                    "references": {
-                        "AccordionMarker": {
-                            "location": "import",
-                            "path": "./accordion.interfaces",
-                            "id": "src/components/accordion/accordion.interfaces.ts::AccordionMarker",
-                            "referenceLocation": "AccordionMarker"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The marker variant. Only applies if `button` is `false`.\nIf `''` the default marker is used, if `plus` a plus icon is used and if `plus-minus`\na plus icon for closed and a minus icon for open state is used."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "marker"
-            },
-            "markerPosition": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "AccordionMarkerPosition",
-                    "resolved": "\"left\" | \"right\" | undefined",
-                    "references": {
-                        "AccordionMarkerPosition": {
-                            "location": "import",
-                            "path": "./accordion.interfaces",
-                            "id": "src/components/accordion/accordion.interfaces.ts::AccordionMarkerPosition",
-                            "referenceLocation": "AccordionMarkerPosition"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The position of the marker. Only applies if `button` is `false`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "marker-position"
-            },
-            "button": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Displays the summary as a button and hides the default marker."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button",
-                "defaultValue": "false"
-            },
-            "buttonWide": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the button is expanded to full width. Only applies if `button` is `true`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-wide",
-                "defaultValue": "false"
-            },
-            "buttonColor": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "AccordionButtonColor",
-                    "resolved": "\"danger\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
-                    "references": {
-                        "AccordionButtonColor": {
-                            "location": "import",
-                            "path": "./accordion.interfaces",
-                            "id": "src/components/accordion/accordion.interfaces.ts::AccordionButtonColor",
-                            "referenceLocation": "AccordionButtonColor"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The color of the button. Only applies if `button` is `true`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-color",
-                "defaultValue": "'primary'"
-            },
-            "buttonSize": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "AccordionButtonSize",
-                    "resolved": "\"lg\" | \"sm\" | \"xl\" | undefined",
-                    "references": {
-                        "AccordionButtonSize": {
-                            "location": "import",
-                            "path": "./accordion.interfaces",
-                            "id": "src/components/accordion/accordion.interfaces.ts::AccordionButtonSize",
-                            "referenceLocation": "AccordionButtonSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The size of the button. Only applies if `button` is `true`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-size"
-            },
-            "buttonLabelOpen": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label of the open trigger button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-label-open",
-                "defaultValue": "''"
-            },
-            "buttonIconOpen": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "BalIcon of the open trigger button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-icon-open",
-                "defaultValue": "''"
-            },
-            "buttonLabelClose": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label of the close trigger button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-label-close",
-                "defaultValue": "''"
-            },
-            "buttonIconClose": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "BalIcon of the close trigger button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-icon-close",
-                "defaultValue": "''"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "animated": {},
-            "isAnimating": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dsToggle",
-                "name": "dsToggle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input value has changed."
-                },
-                "complexType": {
-                    "original": "AccordionToggleDetail",
-                    "resolved": "{ group?: string | undefined; id: string; open: boolean; }",
-                    "references": {
-                        "AccordionToggleDetail": {
-                            "location": "import",
-                            "path": "./accordion.interfaces",
-                            "id": "src/components/accordion/accordion.interfaces.ts::AccordionToggleDetail",
-                            "referenceLocation": "AccordionToggleDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsOpened",
-                "name": "dsOpened",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the accordion is opened."
-                },
-                "complexType": {
-                    "original": "AccordionToggleDetail",
-                    "resolved": "{ group?: string | undefined; id: string; open: boolean; }",
-                    "references": {
-                        "AccordionToggleDetail": {
-                            "location": "import",
-                            "path": "./accordion.interfaces",
-                            "id": "src/components/accordion/accordion.interfaces.ts::AccordionToggleDetail",
-                            "referenceLocation": "AccordionToggleDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsClosed",
-                "name": "dsClosed",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the accordion is closed."
-                },
-                "complexType": {
-                    "original": "AccordionToggleDetail",
-                    "resolved": "{ group?: string | undefined; id: string; open: boolean; }",
-                    "references": {
-                        "AccordionToggleDetail": {
-                            "location": "import",
-                            "path": "./accordion.interfaces",
-                            "id": "src/components/accordion/accordion.interfaces.ts::AccordionToggleDetail",
-                            "referenceLocation": "AccordionToggleDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "configChanged": {
-                "complexType": {
-                    "signature": "(state: DsConfigState) => Promise<void>",
-                    "parameters": [{
-                            "name": "state",
-                            "type": "DsConfigState",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "DsConfigState": {
-                            "location": "import",
-                            "path": "@global",
-                            "id": "src/global/index.ts::DsConfigState",
-                            "referenceLocation": "DsConfigState"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "define config for the component"
-                        }]
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "dsOpened",
-                "method": "listenToDsOpened",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }];
-    }
-}
-__decorate([
-    Logger('accordion'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], Accordion.prototype, "createLogger", null);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Accordion.prototype, "open", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Accordion.prototype, "group", void 0);
-__decorate([
-    OneOf(ACCORDION_SUMMARY_LEVELS),
-    __metadata("design:type", String)
-], Accordion.prototype, "summaryLevel", void 0);
-__decorate([
-    OneOf(ACCORDION_SUMMARY_LEVELS),
-    __metadata("design:type", String)
-], Accordion.prototype, "summaryVisualLevel", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Accordion.prototype, "summaryTitle", void 0);
-__decorate([
-    OneOf(ACCORDION_MARKERS),
-    __metadata("design:type", String)
-], Accordion.prototype, "marker", void 0);
-__decorate([
-    OneOf(ACCORDION_MARKER_POSITIONS),
-    __metadata("design:type", String)
-], Accordion.prototype, "markerPosition", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Accordion.prototype, "button", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Accordion.prototype, "buttonWide", void 0);
-__decorate([
-    OneOf(ACCORDION_BUTTON_COLORS),
-    __metadata("design:type", String)
-], Accordion.prototype, "buttonColor", void 0);
-__decorate([
-    OneOf(ACCORDION_BUTTON_SIZES),
-    __metadata("design:type", String)
-], Accordion.prototype, "buttonSize", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Accordion.prototype, "buttonLabelOpen", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Accordion.prototype, "buttonIconOpen", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Accordion.prototype, "buttonLabelClose", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Accordion.prototype, "buttonIconClose", void 0);
-__decorate([
-    ListenToConfig(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], Accordion.prototype, "configChanged", null);
-let accordionIds = 1;