@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/collection/components/steps/step/step.js

@@ -0,0 +1,431 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger, Required, Type } from "../../../utils/index";
+/**
+ * Step renders a single step button inside a ds-steps group, showing a numbered circle, label, and connector line.
+ *
+ * @slot - An `<a>` element in navigation mode.
+ */
+export class Step {
+    constructor() {
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Index of the active step. Used to determine connector fill state.
+         * Set by the parent ds-steps.
+         * @internal
+         */
+        this.activeIndex = 0;
+        /**
+         * If `true`, the step cannot be selected.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the step is completed. Shows a checkmark icon in the circle.
+         */
+        this.done = false;
+        /**
+         * If `true`, the step is hidden from the layout.
+         */
+        this.hidden = false;
+        /**
+         * 1-based position index. Set by the parent ds-steps.
+         * @internal
+         */
+        this.index = 0;
+        /**
+         * If `true`, the step has an error. Shows an exclamation mark in the circle.
+         */
+        this.invalid = false;
+        /**
+         * Visible text label displayed below the circle.
+         */
+        this.label = '';
+        /**
+         * Set by ds-steps. When true, renders in navigation mode (slotted <a>).
+         * @internal
+         */
+        this.navigation = false;
+        /**
+         * If `true`, this step is currently selected. Set by the parent ds-steps.
+         * @internal
+         */
+        this.selected = false;
+        /**
+         * Set by ds-steps. When true, renders in vertical layout.
+         * @internal
+         */
+        this.vertical = false;
+        /**
+         * PROPERTY VALIDATION
+         * ------------------------------------------------------
+         */
+        /**
+         * EVENT HANDLERS
+         * ------------------------------------------------------
+         */
+        this.handleClick = (ev) => {
+            if (this.disabled)
+                return;
+            ev.preventDefault();
+            this.dsStepSelect.emit({ name: this.name });
+        };
+        this.handleKeyDown = (ev) => {
+            if (this.disabled)
+                return;
+            if (ev.key === 'Enter' || ev.key === ' ') {
+                ev.preventDefault();
+                this.dsStepSelect.emit({ name: this.name });
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const hostClass = {
+            'is-selected': this.selected,
+            'is-done': this.done,
+            'is-invalid': this.invalid,
+            'is-disabled': this.disabled,
+            'is-hidden': this.hidden,
+            'is-navigation': this.navigation,
+            'is-vertical': this.vertical,
+            'is-filled': this.index > 0 && this.index < this.activeIndex,
+        };
+        const circleContent = this.done ? (h("ds-icon", { name: "check", color: "white", "aria-hidden": "true" })) : this.invalid ? (h("span", { class: "step-invalid", "aria-hidden": "true" }, "!")) : (h("span", { class: "step-number", "aria-hidden": "true" }, this.index));
+        if (this.navigation) {
+            return (h(Host, { role: "listitem", class: hostClass }, h("span", { class: "circle", "aria-hidden": "true" }, circleContent), h("slot", null), h("span", { class: "connector", "aria-hidden": "true" })));
+        }
+        return (h(Host, { role: "tab", class: hostClass, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : null, tabIndex: this.disabled ? -1 : this.selected ? 0 : -1, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { class: "circle" }, circleContent), this.label && h("span", { class: "step-label" }, this.label), h("span", { class: "connector", "aria-hidden": "true" })));
+    }
+    static get is() { return "ds-step"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["step.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["step.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "activeIndex": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Index of the active step. Used to determine connector fill state.\nSet by the parent ds-steps."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-index",
+                "defaultValue": "0"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the step cannot be selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "done": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the step is completed. Shows a checkmark icon in the circle."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "done",
+                "defaultValue": "false"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the step is hidden from the layout."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hidden",
+                "defaultValue": "false"
+            },
+            "index": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "1-based position index. Set by the parent ds-steps."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index",
+                "defaultValue": "0"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the step has an error. Shows an exclamation mark in the circle."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible text label displayed below the circle."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique name that links this step to a ds-step-panel[for] of the same value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "navigation": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Set by ds-steps. When true, renders in navigation mode (slotted <a>)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "navigation",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "If `true`, this step is currently selected. Set by the parent ds-steps."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Set by ds-steps. When true, renders in vertical layout."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsStepSelect",
+                "name": "dsStepSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks this step (panels mode only)."
+                },
+                "complexType": {
+                    "original": "{ name: string }",
+                    "resolved": "{ name: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('step'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Step.prototype, "createLogger", null);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Step.prototype, "activeIndex", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "done", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "hidden", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Step.prototype, "index", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "invalid", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Step.prototype, "label", void 0);
+__decorate([
+    Required(),
+    Type('string'),
+    __metadata("design:type", String)
+], Step.prototype, "name", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "navigation", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "selected", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "vertical", void 0);

package/dist/collection/components/steps/step-panel/step-panel.host.css

@@ -0,0 +1 @@
+:host{--_step-panel-padding: var(--step-panel-padding, var(--mod-step-panel-padding, var(--ds-step-panel-padding)));display:none}:host(.is-selected){display:block;padding:var(--_step-panel-padding)}

package/dist/collection/components/steps/step-panel/step-panel.js

@@ -0,0 +1,104 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger, Required, Type } from "../../../utils/index";
+/**
+ * Step Panel displays the content area associated with a ds-step, visible when its controlling step is selected.
+ *
+ * @slot - The panel content.
+ */
+export class StepPanel {
+    constructor() {
+        /**
+         * If `true`, the panel is visible. Managed by the parent ds-steps.
+         */
+        this.selected = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h(Host, { key: '9100c4970632362a24e7556dad16a9ae78c26c99', role: "tabpanel", class: { 'is-selected': this.selected }, "aria-hidden": this.selected ? null : 'true', tabIndex: this.selected ? 0 : -1 }, h("slot", { key: '0e5d9adbdb99773a528ee99c4f74830ace3bd6e4' })));
+    }
+    static get is() { return "ds-step-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["step-panel.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["step-panel.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches the `name` of the ds-step that controls this panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "for"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the panel is visible. Managed by the parent ds-steps."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('step-panel'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], StepPanel.prototype, "createLogger", null);
+__decorate([
+    Required(),
+    Type('string'),
+    __metadata("design:type", String)
+], StepPanel.prototype, "for", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], StepPanel.prototype, "selected", void 0);

package/dist/collection/components/steps/steps/steps.host.css

@@ -0,0 +1 @@
+:host{--_steps-connector-color: var(--steps-connector-color, var(--mod-steps-connector-color, var(--ds-steps-connector-color)));--_steps-connector-color-filled: var(--steps-connector-color-filled, var(--mod-steps-connector-color-filled, var(--ds-steps-connector-color-filled)));--_steps-connector-height: var(--steps-connector-height, var(--mod-steps-connector-height, var(--ds-steps-connector-height)));--_steps-circle-size: var(--steps-circle-size, var(--mod-steps-circle-size, var(--ds-steps-circle-size)));--_steps-circle-size-sm: var(--steps-circle-size-sm, var(--mod-steps-circle-size-sm, var(--ds-steps-circle-size-sm)));--_steps-circle-color-bg: var(--steps-circle-color-bg, var(--mod-steps-circle-color-bg, var(--ds-steps-circle-color-bg)));--_steps-circle-color-bg-selected: var(--steps-circle-color-bg-selected, var(--mod-steps-circle-color-bg-selected, var(--ds-steps-circle-color-bg-selected)));--_steps-circle-color-bg-done: var(--steps-circle-color-bg-done, var(--mod-steps-circle-color-bg-done, var(--ds-steps-circle-color-bg-done)));--_steps-circle-color-bg-invalid: var(--steps-circle-color-bg-invalid, var(--mod-steps-circle-color-bg-invalid, var(--ds-steps-circle-color-bg-invalid)));--_steps-circle-color-bg-disabled: var(--steps-circle-color-bg-disabled, var(--mod-steps-circle-color-bg-disabled, var(--ds-steps-circle-color-bg-disabled)));--_steps-circle-color-text: var(--steps-circle-color-text, var(--mod-steps-circle-color-text, var(--ds-steps-circle-color-text)));--_steps-circle-color-text-selected: var(--steps-circle-color-text-selected, var(--mod-steps-circle-color-text-selected, var(--ds-steps-circle-color-text-selected)));--_steps-circle-color-text-done: var(--steps-circle-color-text-done, var(--mod-steps-circle-color-text-done, var(--ds-steps-circle-color-text-done)));--_steps-circle-color-text-invalid: var(--steps-circle-color-text-invalid, var(--mod-steps-circle-color-text-invalid, var(--ds-steps-circle-color-text-invalid)));--_steps-circle-color-text-disabled: var(--steps-circle-color-text-disabled, var(--mod-steps-circle-color-text-disabled, var(--ds-steps-circle-color-text-disabled)));--_steps-step-font-family: var(--steps-step-font-family, var(--mod-steps-step-font-family, var(--ds-steps-step-font-family)));--_steps-step-font-size: var(--steps-step-font-size, var(--mod-steps-step-font-size, var(--ds-steps-step-font-size)));--_steps-step-font-size-sm: var(--steps-step-font-size-sm, var(--mod-steps-step-font-size-sm, var(--ds-steps-step-font-size-sm)));--_steps-step-font-weight: var(--steps-step-font-weight, var(--mod-steps-step-font-weight, var(--ds-steps-step-font-weight)));--_steps-step-color: var(--steps-step-color, var(--mod-steps-step-color, var(--ds-steps-step-color-base)));--_steps-step-color-selected: var(--steps-step-color-selected, var(--mod-steps-step-color-selected, var(--ds-steps-step-color-selected)));--_steps-step-color-focus: var(--steps-step-color-focus, var(--mod-steps-step-color-focus, var(--ds-steps-step-color-focus)));--_steps-panel-padding: var(--steps-panel-padding, var(--mod-steps-panel-padding, var(--ds-steps-panel-padding)));--_steps-color-purple: var(--steps-color-purple, var(--mod-steps-color-purple, var(--ds-steps-color-purple)));--_steps-color-green: var(--steps-color-green, var(--mod-steps-color-green, var(--ds-steps-color-green)));--_steps-color-red: var(--steps-color-red, var(--mod-steps-color-red, var(--ds-steps-color-red)));--_steps-color-yellow: var(--steps-color-yellow, var(--mod-steps-color-yellow, var(--ds-steps-color-yellow)));display:block}:host(.is-purple){--_steps-connector-color: var(--_steps-color-purple);--_steps-circle-color-bg: var(--_steps-color-purple);--_steps-circle-color-bg-disabled: var(--_steps-color-purple)}:host(.is-green){--_steps-connector-color: var(--_steps-color-green);--_steps-circle-color-bg: var(--_steps-color-green);--_steps-circle-color-bg-disabled: var(--_steps-color-green)}:host(.is-red){--_steps-connector-color: var(--_steps-color-red);--_steps-circle-color-bg: var(--_steps-color-red);--_steps-circle-color-bg-disabled: var(--_steps-color-red)}:host(.is-yellow){--_steps-connector-color: var(--_steps-color-yellow);--_steps-circle-color-bg: var(--_steps-color-yellow);--_steps-circle-color-bg-disabled: var(--_steps-color-yellow)}:host #steplist{display:flex;flex-direction:row;align-items:flex-start;width:100%}:host(.is-navigation) nav,:host(.is-navigation) ol{display:contents}:host ::slotted(ds-step-panel){--step-panel-padding: var(--_steps-panel-padding)}:host(.is-vertical) #steplist{flex-direction:column;align-items:stretch;position:relative}:host(.is-vertical) #steplist::before{content:"";position:absolute;left:calc(var(--_steps-circle-size)/2);transform:translateX(-50%);top:calc(var(--_steps-circle-size)/2);bottom:calc(var(--_steps-circle-size)/2);width:var(--_steps-connector-height);background-color:var(--_steps-connector-color);z-index:0}@media screen and (max-width: 768px){:host(.is-vertical) #steplist::before{left:calc(var(--_steps-circle-size-sm)/2);top:calc(var(--_steps-circle-size-sm)/2);bottom:calc(var(--_steps-circle-size-sm)/2)}}