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

package/dist/collection/components/overlays/alert/snackbar/snackbar.js

@@ -0,0 +1,636 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { ListenToBreakpoints, dsBreakpoints, stopEventBubbling, sanitizeSvg, raf, Logger, hasValue, OneOf, Type, } from "../../../../utils/index";
+import { SNACKBAR_COLORS, } from "./snackbar.interfaces";
+import { BUTTON_TARGETS } from "../../../actions/button/button.interfaces";
+/**
+ * Snackbar displays brief feedback messages at the bottom of the screen with optional action buttons and dismissal control.
+ *
+ * @slot - The snackbar message content.
+ * @slot action - The action button (if used).
+ * @part icon - The icon element.
+ * @part content - The content wrapper containing the heading and message.
+ * @part heading - The snackbar heading.
+ * @part message - The snackbar message element.
+ * @part action - The action button group.
+ * @part button - The action button element.
+ * @part close - The close button element.
+ */
+export class Snackbar {
+    constructor() {
+        this.isMobile = dsBreakpoints.isMobile;
+        this.mobileOpenState = false;
+        this.didLoad = false;
+        /**
+         * If `true` the notification can be closed by the user.
+         */
+        this.closable = false;
+        /**
+         * Defines the heading of the notification.
+         */
+        this.heading = '';
+        /**
+         * Defines the message of the notification as html content
+         */
+        this.message = '';
+        /**
+         * Defines the icon of the notification.
+         */
+        this.icon = '';
+        /**
+         * Defines the svg content of the icon
+         */
+        this.svg = '';
+        /**
+         * Defines the icon of the notification, if not provided it will be derived from the color property
+         */
+        this.action = '';
+        /**
+         * Defines the icon of the action button.
+         */
+        this.actionIcon = '';
+        /**
+         * Specifies where to open the linked document.
+         */
+        this.actionTarget = '_blank';
+        /**
+         * Specifies the URL of the page the link goes to
+         */
+        this.actionHref = '';
+        /**
+         * @internal
+         * The id of the toast, used for internal handling, if not provided a random id will be generated
+         */
+        this.alertId = crypto.randomUUID();
+        /**
+         * @internal
+         * If `true` the notification is visible.
+         */
+        this.visible = true;
+        /**
+         * @internal Handler for on close event
+         */
+        this.closeHandler = () => void 0;
+        /**
+         * @internal Handler for on action event
+         */
+        this.actionHandler = () => void 0;
+        /**
+         * PRIVATE METHODS
+         * ─────────────────────────────────────────────────────
+         */
+        this.generateSvgContent = () => {
+            if (hasValue(this.svg) && this.svg.length > 0) {
+                return sanitizeSvg(this.svg);
+            }
+            return undefined;
+        };
+        this.generateIconName = () => {
+            if (hasValue(this.icon) && this.icon.length > 0) {
+                return this.icon;
+            }
+            else {
+                switch (this.color) {
+                    case 'info':
+                        return 'information';
+                    case 'success':
+                        return 'check';
+                    case 'warning':
+                        return 'alert';
+                    case 'danger':
+                        return 'alert';
+                    default:
+                        return 'bell';
+                }
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    componentDidLoad() {
+        raf(() => {
+            this.didLoad = true;
+            this.dsDidLoad.emit();
+        });
+    }
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToBreakpoint(breakpoints) {
+        this.isMobile = breakpoints.mobile;
+    }
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Closes this notification
+     */
+    async close() {
+        this.dsCloseClick.emit();
+        this.closeHandler(this.alertId);
+    }
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render() {
+        const iconName = this.generateIconName();
+        const svgContent = this.generateSvgContent();
+        return (h(Host, { key: '31121766522b903d6163723a9e95584c5ee11099', role: "status", "aria-live": "polite", "aria-atomic": "true", class: {
+                [`is-ready`]: this.didLoad,
+                [`is-visible`]: this.visible,
+                [`is-closable`]: this.closable,
+                [`is-mobile-open`]: this.isMobile && this.mobileOpenState,
+                [`is-mobile-closed`]: this.isMobile && !this.mobileOpenState,
+                [`is-${this.color}`]: hasValue(this.color),
+            } }, this.isMobile && !this.mobileOpenState && (h("ds-button", { key: 'c72adcdba7ed9e364dbbd874923a75b9ff7c59fb', id: "mobile-button", color: this.color, square: true, icon: iconName, onClick: () => (this.mobileOpenState = true) })), iconName && !svgContent && (h("ds-icon", { key: '1003da7330255c64b75aa9fbfb8402947a6924a2', part: "icon", id: "icon", name: iconName, color: this.color, size: 'md' })), svgContent && h("ds-brand-icon", { key: '95ddd092b49bf987f14d2d0e609789b241dec58a', id: "icon", part: "icon", svg: svgContent, size: 'sm' }), h("span", { key: '5294bd0f2f54dafbafe0e05d34db40c70141d4a1', part: "content", id: "content" }, this.heading && h("h2", { key: '5691d275814584cabe5a05837b0ccd8c34c2330b', part: "heading" }, this.heading), h("span", { key: 'b25aefffe6c14b6ce0177c7ba278a3e853884cf2', part: "message" }, this.message, h("slot", { key: '9904bbcc527b37eee0b53bfbb852f3f7b8f4f410' }))), h("ds-button-group", { key: '579ec634a52323612d13ba84f0cb6ceb1f11a06a', part: "action", id: "action" }, h("slot", { key: '8292813faef33e93891427297b0b9ed8f09deda3', name: "action" }), this.action && (h("ds-button", { key: 'a522044535ca0d98c2b8e3737b646dfaf18a9399', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
+                stopEventBubbling(ev);
+                this.dsActionClick.emit(ev);
+                this.actionHandler(this.alertId);
+            } }, this.action)), this.closable && (h("ds-close", { key: 'd482bcf5106d9a9016effdb607a629334688e08f', button: true, "button-color": "secondary", part: "close", onClick: ev => {
+                stopEventBubbling(ev);
+                this.close();
+            } })))));
+    }
+    static get is() { return "ds-snackbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["snackbar.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["snackbar.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SnackbarColor",
+                    "resolved": "\"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
+                    "references": {
+                        "SnackbarColor": {
+                            "location": "import",
+                            "path": "./snackbar.interfaces",
+                            "id": "src/components/overlays/alert/snackbar/snackbar.interfaces.ts::SnackbarColor",
+                            "referenceLocation": "SnackbarColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color of the element\nColor type primary is deprecated, please use info instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the notification can be closed by the user."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the heading of the notification."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the message of the notification as html content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the icon of the notification."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "svg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the svg content of the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "svg",
+                "defaultValue": "''"
+            },
+            "action": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the icon of the notification, if not provided it will be derived from the color property"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action",
+                "defaultValue": "''"
+            },
+            "actionIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the icon of the action button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-icon",
+                "defaultValue": "''"
+            },
+            "actionTarget": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonTarget",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {
+                        "ButtonTarget": {
+                            "location": "import",
+                            "path": "../../../actions/button/button.interfaces",
+                            "id": "src/components/actions/button/button.interfaces.ts::ButtonTarget",
+                            "referenceLocation": "ButtonTarget"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies where to open the linked document."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-target",
+                "defaultValue": "'_blank'"
+            },
+            "actionHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the URL of the page the link goes to"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-href",
+                "defaultValue": "''"
+            },
+            "alertId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "The id of the toast, used for internal handling, if not provided a random id will be generated"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alert-id",
+                "defaultValue": "crypto.randomUUID() as string"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "If `true` the notification is visible."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "visible",
+                "defaultValue": "true"
+            },
+            "closeHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(id: string) => void",
+                    "resolved": "(id: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Handler for on close event"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "() => void 0"
+            },
+            "actionHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(id: string) => void",
+                    "resolved": "(id: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Handler for on action event"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "() => void 0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {},
+            "mobileOpenState": {},
+            "didLoad": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsCloseClick",
+                "name": "dsCloseClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the close button got clicked."
+                },
+                "complexType": {
+                    "original": "SnackbarCloseClickDetail",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "SnackbarCloseClickDetail": {
+                            "location": "import",
+                            "path": "./snackbar.interfaces",
+                            "id": "src/components/overlays/alert/snackbar/snackbar.interfaces.ts::SnackbarCloseClickDetail",
+                            "referenceLocation": "SnackbarCloseClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsActionClick",
+                "name": "dsActionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the action button got clicked."
+                },
+                "complexType": {
+                    "original": "SnackbarActionClickDetail",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "SnackbarActionClickDetail": {
+                            "location": "import",
+                            "path": "./snackbar.interfaces",
+                            "id": "src/components/overlays/alert/snackbar/snackbar.interfaces.ts::SnackbarActionClickDetail",
+                            "referenceLocation": "SnackbarActionClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsDidLoad",
+                "name": "dsDidLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Emitted when the component has loaded."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes this notification",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('snackbar'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Snackbar.prototype, "createLogger", null);
+__decorate([
+    OneOf(SNACKBAR_COLORS),
+    __metadata("design:type", String)
+], Snackbar.prototype, "color", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Snackbar.prototype, "closable", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Snackbar.prototype, "heading", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Snackbar.prototype, "message", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Snackbar.prototype, "icon", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Snackbar.prototype, "svg", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Snackbar.prototype, "action", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Snackbar.prototype, "actionIcon", void 0);
+__decorate([
+    OneOf(BUTTON_TARGETS),
+    __metadata("design:type", String)
+], Snackbar.prototype, "actionTarget", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Snackbar.prototype, "actionHref", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Snackbar.prototype, "alertId", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Snackbar.prototype, "visible", void 0);
+__decorate([
+    ListenToBreakpoints(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Snackbar.prototype, "listenToBreakpoint", null);