import { Host, h, } from "@stencil/core";
export class Banner {
    constructor() {
        this._buttonClickHandler = () => {
            this.bdsBannerClose.emit();
            this.visible = false;
        };
        this.visible = true;
        this.bannerAlign = 'center';
        this.buttonClose = 'false';
        this.context = 'outside';
        this.variant = 'system';
        this.dtButtonClose = null;
    }
    async toggle() {
        this.visible = !this.visible;
    }
    render() {
        return (h(Host, { key: '2dbe4b00e57a79fd139e356e3e88e2a37fff3234', class: { banner: true, 'banner--hide': !this.visible } }, h("div", { key: 'afe28be7ca45901d351b2fd46b426db4cebb2490', class: {
                banner__holder: true,
                [`banner__holder--align--${this.bannerAlign}`]: true,
                [`banner__holder--${this.variant}`]: true,
                [`banner__holder--context--${this.context}`]: true,
            } }, h("div", { key: '1507db82191ae229d3d224a366ae24c23facd8cf', class: {
                banner__content: true,
            } }, this.variant === 'warning' && (h("bds-icon", { key: 'f6020a07ba1ca4eabdc41135c6b53d1f45eff513', class: "icon_left", theme: "outline", size: "medium", name: "warning" })), this.variant === 'system' && (h("bds-icon", { key: '716dc8cb61f42b783bfe50751ea95fb693cf6257', class: "icon_left", theme: "outline", size: "medium", name: "info" })), this.variant === 'info' && (h("bds-icon", { key: '265bf326db9dc58234499db8134215453800da8b', class: "icon_left", theme: "outline", size: "medium", name: "message-ballon" })), this.variant === 'error' && (h("bds-icon", { key: '0009accdbe97d0d50012eb4f43d86b6581fdbc87', class: "icon_left", theme: "outline", size: "medium", name: "error" })), h("div", { key: 'ccfe1051cd1d4af8953aabbf8a56d30da88b713e', class: "slot" }, h("slot", { key: 'b801f418444c8ef840000434a022d203113e026b' }))), h("div", { key: '83943fba7135ee11b43c1a7016547ccb09093884', class: {
                banner__action: true,
            } }, this.buttonClose === 'true' && (h("div", { key: '1365dce940be8174589a1efc27a4d2afcb6b637e', class: "close", onClick: () => this._buttonClickHandler() }, h("bds-button-icon", { key: '2b2dc4078729795101c692b140b11f0c73a3af42', dataTest: this.dtButtonClose, icon: "close", size: "short", variant: "secondary" })))))));
    }
    static get is() { return "bds-banner"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["banner.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["banner.css"]
        };
    }
    static get properties() {
        return {
            "bannerAlign": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BannerAlign",
                    "resolved": "\"center\" | \"left\" | \"right\"",
                    "references": {
                        "BannerAlign": {
                            "location": "local",
                            "path": "/home/runner/work/blip-ds/blip-ds/src/components/banner/banner.tsx",
                            "id": "src/components/banner/banner.tsx::BannerAlign"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set the banner aligment, it can be one of: 'center', 'right' or 'left'."
                },
                "attribute": "banner-align",
                "reflect": false,
                "defaultValue": "'center'"
            },
            "buttonClose": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ButtonClose",
                    "resolved": "\"false\" | \"true\"",
                    "references": {
                        "ButtonClose": {
                            "location": "local",
                            "path": "/home/runner/work/blip-ds/blip-ds/src/components/banner/banner.tsx",
                            "id": "src/components/banner/banner.tsx::ButtonClose"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set if show up the close button."
                },
                "attribute": "button-close",
                "reflect": false,
                "defaultValue": "'false'"
            },
            "context": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Context",
                    "resolved": "\"inside\" | \"outside\"",
                    "references": {
                        "Context": {
                            "location": "local",
                            "path": "/home/runner/work/blip-ds/blip-ds/src/components/banner/banner.tsx",
                            "id": "src/components/banner/banner.tsx::Context"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set if the banner is external or internal."
                },
                "attribute": "context",
                "reflect": false,
                "defaultValue": "'outside'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BannerVariant",
                    "resolved": "\"error\" | \"info\" | \"system\" | \"warning\"",
                    "references": {
                        "BannerVariant": {
                            "location": "local",
                            "path": "/home/runner/work/blip-ds/blip-ds/src/components/banner/banner.tsx",
                            "id": "src/components/banner/banner.tsx::BannerVariant"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set the banner varient, it can be 'system' or 'warning'."
                },
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'system'"
            },
            "dtButtonClose": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Data test is the prop to specifically test the component action object.\ndtButtonClose is the data-test to button close."
                },
                "attribute": "dt-button-close",
                "reflect": false,
                "defaultValue": "null"
            }
        };
    }
    static get states() {
        return {
            "visible": {}
        };
    }
    static get events() {
        return [{
                "method": "bdsBannerClose",
                "name": "bdsBannerClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the banner is closed."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "toggle": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=banner.js.map
