import { h, Host } from "@stencil/core";
export class SpwSidebar {
    constructor() {
        /** Si true, la sidebar est dépliée par défaut */
        this.defaultExpanded = false;
        this.hasTopbar = false;
        this.BODY_CLASS = 'spw-sidebar-expanded';
        this.toggleSidebar = () => {
            this.expanded = !this.expanded;
            document.body.classList.toggle(this.BODY_CLASS, this.expanded);
        };
        this.checkTopbarClass = () => {
            this.hasTopbar = document.body.classList.contains('has-topbar');
        };
        this.checkExpandedState = () => {
            const bodyHasExpandedClass = document.body.classList.contains(this.BODY_CLASS);
            if (this.expanded !== bodyHasExpandedClass) {
                this.expanded = bodyHasExpandedClass;
            }
        };
    }
    componentWillLoad() {
        this.expanded = this.defaultExpanded;
        if (this.expanded) {
            document.body.classList.add(this.BODY_CLASS);
        }
        this.checkTopbarClass();
        this.observeBodyClassChanges();
    }
    disconnectedCallback() {
        var _a;
        document.body.classList.remove(this.BODY_CLASS);
        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    /** Ouvre la sidebar */
    async open() {
        if (!this.expanded) {
            this.expanded = true;
            document.body.classList.add(this.BODY_CLASS);
        }
    }
    /** Ferme la sidebar */
    async close() {
        if (this.expanded) {
            this.expanded = false;
            document.body.classList.remove(this.BODY_CLASS);
        }
    }
    /** Ouvre ou ferme la sidebar */
    async toggle() {
        this.expanded = !this.expanded;
        document.body.classList.toggle(this.BODY_CLASS, this.expanded);
    }
    observeBodyClassChanges() {
        this.observer = new MutationObserver(() => {
            this.checkTopbarClass();
            this.checkExpandedState();
        });
        this.observer.observe(document.body, {
            attributes: true,
            attributeFilter: ['class'],
        });
    }
    get hostClass() {
        return {
            '--expanded': this.expanded,
            '--collapsed': !this.expanded,
        };
    }
    get elementClass() {
        return {
            'spw-sidebar': true,
            'spw-sidebar--expanded': this.expanded,
            'spw-sidebar--collapsed': !this.expanded,
            'spw-sidebar--with-topbar': this.hasTopbar,
        };
    }
    render() {
        return (h(Host, { key: '85674117e60989814f7d7a37f3dd3b904379d110', class: this.hostClass }, h("div", { key: 'a7dc79b161de709d47cda189859f6fbddf816035', class: this.elementClass }, h("span", { key: 'ee66487ae37380cc48444f049bd9aaef8c597928', class: "spw-sidebar__toggle", onClick: this.toggleSidebar, "aria-expanded": this.expanded.toString() }, h("spw-icon", { key: '479cf95d769990758fd766ebed32554863cf7508', icon: "fa-chevron-right" })), h("div", { key: '3d96559cf723cd903a77fb943ba58cca0036b96a', class: "spw-sidebar__content" }, h("slot", { key: '62d878e457b129647df984e5b960b9fd61a9b0fa', name: "navigation-top" }), h("slot", { key: 'fca6deed9ea823420628c03078e53b7cdd502e49', name: "navigation-bottom" })), h("div", { key: '67d0697a069f050892328f652b4e6930deb7a3fa', class: "spw-sidebar__resize-border", onClick: this.toggleSidebar }))));
    }
    static get is() { return "spw-sidebar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-sidebar.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-sidebar.css"]
        };
    }
    static get properties() {
        return {
            "defaultExpanded": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Si true, la sidebar est d\u00E9pli\u00E9e par d\u00E9faut"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "default-expanded",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "expanded": {},
            "hasTopbar": {}
        };
    }
    static get methods() {
        return {
            "open": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Ouvre la sidebar",
                    "tags": []
                }
            },
            "close": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Ferme la sidebar",
                    "tags": []
                }
            },
            "toggle": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Ouvre ou ferme la sidebar",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
}
