import { h } from "@stencil/core";
import { guid } from "../../utils";
import { HideModal } from "./util";
export class DgaModal {
    constructor() {
        this.closeButton = true;
        this.featuredIconStyle = 'light';
        this.featuredIconType = 'InformationCircle';
        this.secondBtnPosition = 'left';
        this.position = 'center';
        this.open = false;
        this.staticModal = false;
        this.buttonsList = [];
    }
    handleClickOutside(event) {
        event.stopPropagation();
        event.preventDefault();
        if (this.staticModal)
            return;
        HideModal(this.name);
    }
    render() {
        return (h("dialog", Object.assign({ key: '6cf69f6974245880533d6710103b41cdec586fc6', onClick: e => this.handleClickOutside(e), ref: el => (this.dialogRef = el),
            //   id={name ? name : guid()}
            // style={{ display: this.show ? 'flex' : 'none' }}
            class: `dga-flex-align-${this.position}` }, (this.open && { open: this.open }), { hidden: !this.open }), h("div", { key: '701682c3305d099036b48a9402298109969c7776', class: "modal", ref: el => (this.containergRef = el), onClick: e => e.stopPropagation() }, h("div", { key: '4f4aab2c0463464a1256d7338c8b243308a85cce', class: "modal__header" }, h("div", { key: '7f3812b0b8b2468c14c4131ef461322724a77066', class: "modal__icon", style: this.alignmentCenter ? { justifyContent: 'center', width: '100%', display: 'flex' } : {} }, h("dga-featured-icon", { key: '3abd7c66c5cac8789132f75ad23e2b9c4f65af52', icon: {
                name: this.featuredIconType,
                variant: 'stroke',
                type: 'standard',
            }, size: this.featuredIconSize, color: this.featuredIconColor, variant: this.featuredIconStyle })), this.closeButton && (h("div", { key: '866a5d2ab75113fc3c94e1013a524a38032c1772', class: "modal__close" }, h("dga-button", { key: '55393a93532a0b5abc96fe0c0a525014f557d773', size: 'md', iconOnly: true, iconType: 'Cancel01Icon', iconProps: {
                variant: 'stroke',
                color: "#161616",
                type: 'rounded'
            }, onClick: this.onClose, variant: 'subtle' })))), this.modalTitle && (h("h4", { key: '665187e72fe29423d2bbc8a2fbc564a482b77395', class: "modal__heading", style: this.alignmentCenter ? { textAlign: 'center', width: '100%' } : {} }, this.modalTitle)), h("slot", { key: '80f79872499d3af90b4e2714465894ba39db06f3' }), h("div", { key: '81aa7671412a0c2f2e3e74a82b29bdcc301684ff', class: "modal__actions", style: Object.assign(Object.assign({ display: 'flex', width: '100%', justifyContent: this.alignmentCenter ? 'center' : this.buttonsList.length > 2 ? 'flex-start' : 'space-between' }, (!this.alignmentCenter &&
                this.buttonsList.length == 2 && {
                justifyContent: this.secondBtnPosition == 'left' ? 'flex-start' : 'space-between',
            })), { flexDirection: this.actionStack ? 'column' : 'row' }) }, this.buttonsList.length > 0 &&
            this.buttonsList.slice(0, this.buttonsList.length > 3 ? 3 : this.buttonsList.length).map((button, index) => {
                return (h("button", Object.assign({ style: Object.assign(Object.assign({}, (this.actionFillContainer && { width: '100%' })), (index == 2 &&
                        !this.alignmentCenter && {
                        marginLeft: 'auto',
                    })), key: button.id ? button.id : guid(), id: button.id ? button.id : guid(), onClick: e => button.onClick(e), class: `modal__actions-btn dga-btn  dga-btn--md ${index == 0 ? 'dga-btn--primary-neutral' : this.actionStack && index == 2 ? 'dga-btn--subtle' : 'dga-btn--secondary-outline'} ${button.extraClass} ` }, (button.title && { title: button.title })), button.label));
            })))));
    }
    static get is() { return "dga-modal"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-modal.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-modal.css"]
        };
    }
    static get properties() {
        return {
            "modalTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "title",
                "reflect": false
            },
            "closeButton": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "close-button",
                "reflect": false,
                "defaultValue": "true"
            },
            "onClose": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(event: any) => void",
                    "resolved": "(event: any) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "featuredIconColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'brand' | 'gray' | 'error' | 'warning' | 'success' | 'info'",
                    "resolved": "\"brand\" | \"error\" | \"gray\" | \"info\" | \"success\" | \"warning\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "featured-icon-color",
                "reflect": false
            },
            "featuredIconStyle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"light\" | \"outlined\" | \"dark\"",
                    "resolved": "\"dark\" | \"light\" | \"outlined\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "featured-icon-style",
                "reflect": false,
                "defaultValue": "'light'"
            },
            "featuredIconType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'InformationCircle' | 'AlertCircle'",
                    "resolved": "\"AlertCircle\" | \"InformationCircle\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "featured-icon-type",
                "reflect": false,
                "defaultValue": "'InformationCircle'"
            },
            "featuredIconCircle": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "featured-icon-circle",
                "reflect": false
            },
            "featuredIconSize": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'xl' | 'lg' | 'md' | 'sm'",
                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "featured-icon-size",
                "reflect": false
            },
            "alignmentCenter": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "alignment-center",
                "reflect": false
            },
            "actionFillContainer": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "action-fill-container",
                "reflect": false
            },
            "actionStack": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "action-stack",
                "reflect": false
            },
            "secondBtnPosition": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'left' | 'right'",
                    "resolved": "\"left\" | \"right\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "second-btn-position",
                "reflect": false,
                "defaultValue": "'left'"
            },
            "position": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'start' | 'end' | 'center'",
                    "resolved": "\"center\" | \"end\" | \"start\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "position",
                "reflect": false,
                "defaultValue": "'center'"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": false
            },
            "open": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "open",
                "reflect": true,
                "defaultValue": "false"
            },
            "staticModal": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "static-modal",
                "reflect": false,
                "defaultValue": "false"
            },
            "buttonsList": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Array<{\n    id?: string;\n    label: string;\n    onClick: (event?: any) => void;\n    extraClass?: string;\n    title?: string;\n  }>",
                    "resolved": "{ id?: string; label: string; onClick: (event?: any) => void; extraClass?: string; title?: string; }[]",
                    "references": {
                        "Array": {
                            "location": "global",
                            "id": "global::Array"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            }
        };
    }
}
//# sourceMappingURL=dga-modal.js.map
