import { h, Host, } from "@stencil/core";
const DEFAULT_MOBILE_BREAKPOINT = 700;
/**
 * @exampleComponent limel-example-dock-basic
 * @exampleComponent limel-example-dock-custom-component
 * @exampleComponent limel-example-dock-notification
 * @exampleComponent limel-example-dock-mobile
 * @exampleComponent limel-example-dock-expanded
 * @exampleComponent limel-example-dock-colors-css
 */
export class Dock {
    constructor() {
        /**
         * Items that are placed in the dock.
         */
        this.dockItems = [];
        /**
         * Items that are placed at the bottom of the dock. (Or at the end in mobile
         * layout.)
         */
        this.dockFooterItems = [];
        /**
         * Defines the width of the component, when it loads.
         * - `true`: shows both icons and labels of the Dock items.
         * - `false`: only shows icons of the doc items, and displays
         * their labels as tooltip.
         *
         * Note: when `useMobileLayout` is `true`, labels will always
         * be shown as tooltips. Read more below…
         */
        this.expanded = false;
        /**
         * Set to `false` if you do not want to allow end-users
         * to exapnd or shrink the Dock. This will hide the
         * expand/shrink button, and the only things that defines
         * the layout will be the `expanded` property, and
         * the `mobileBreakPoint`.
         */
        this.allowResize = true;
        /**
         * Defines the breakpoint in pixles, at which the component will be rendered
         * in a hoizontal layout. Default breakpoint is `700` pixels, which means
         * when the screen size is smaller than `700px`, the component will automatically
         * switch to a horizontal layout.
         */
        this.mobileBreakPoint = DEFAULT_MOBILE_BREAKPOINT;
        /**
         * Is used to render the component horizontally, and place
         * the Dock items in a row.
         */
        this.useMobileLayout = false;
        this.renderSeparator = () => {
            return this.useMobileLayout ? null : h("span", { class: "footer-separator" });
        };
        this.renderDockItem = (item) => {
            return (h("limel-dock-button", { class: {
                    'dock-item': true,
                    selected: item.selected,
                }, item: item, expanded: this.expanded && !this.useMobileLayout, useMobileLayout: this.useMobileLayout }));
        };
        this.handleResize = () => {
            if (window.innerWidth <= this.mobileBreakPoint) {
                this.useMobileLayout = true;
            }
            else {
                this.useMobileLayout = false;
            }
        };
        this.toggleDockWidth = () => {
            this.expanded = !this.expanded;
            this.dockExpanded.emit(this.expanded);
        };
    }
    componentDidLoad() {
        this.resizeObserver = new ResizeObserver(this.handleResize);
        this.resizeObserver.observe(document.body);
    }
    disconnectedCallback() {
        this.resizeObserver.disconnect();
    }
    render() {
        return (h(Host, { key: '3a859df9c1fb4b56bb1ba18b846a2da353075b0f', class: {
                dock: true,
                expanded: this.expanded,
                'has-mobile-layout': this.useMobileLayout,
            } }, h("nav", { key: '75303da2b5c8f86a4a6e1be7e76811e3dce8a303', "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
    }
    renderExpandShrinkToggle() {
        if (this.useMobileLayout || !this.allowResize) {
            return;
        }
        return (h("button", { class: {
                'expand-shrink': true,
                expanded: this.expanded,
            }, onClick: this.toggleDockWidth }, h("limel-icon", { name: "angle_right" })));
    }
    static get is() { return "limel-dock"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dock.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dock.css"]
        };
    }
    static get properties() {
        return {
            "dockItems": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "DockItem[]",
                    "resolved": "DockItem[]",
                    "references": {
                        "DockItem": {
                            "location": "import",
                            "path": "./dock.types",
                            "id": "src/components/dock/dock.types.ts::DockItem",
                            "referenceLocation": "DockItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Items that are placed in the dock."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "dockFooterItems": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "DockItem[]",
                    "resolved": "DockItem[]",
                    "references": {
                        "DockItem": {
                            "location": "import",
                            "path": "./dock.types",
                            "id": "src/components/dock/dock.types.ts::DockItem",
                            "referenceLocation": "DockItem"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Items that are placed at the bottom of the dock. (Or at the end in mobile\nlayout.)"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "accessibleLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A label used to describe the purpose of the navigation element to users\nof assistive technologies, like screen readers. Especially useful when\nthere are multiple navigation elements in the user interface.\nExample value: \"Primary navigation\""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "accessible-label"
            },
            "expanded": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the width of the component, when it loads.\n- `true`: shows both icons and labels of the Dock items.\n- `false`: only shows icons of the doc items, and displays\ntheir labels as tooltip.\n\nNote: when `useMobileLayout` is `true`, labels will always\nbe shown as tooltips. Read more below\u2026"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "expanded",
                "defaultValue": "false"
            },
            "allowResize": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set to `false` if you do not want to allow end-users\nto exapnd or shrink the Dock. This will hide the\nexpand/shrink button, and the only things that defines\nthe layout will be the `expanded` property, and\nthe `mobileBreakPoint`."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "allow-resize",
                "defaultValue": "true"
            },
            "mobileBreakPoint": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the breakpoint in pixles, at which the component will be rendered\nin a hoizontal layout. Default breakpoint is `700` pixels, which means\nwhen the screen size is smaller than `700px`, the component will automatically\nswitch to a horizontal layout."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "mobile-break-point",
                "defaultValue": "DEFAULT_MOBILE_BREAKPOINT"
            }
        };
    }
    static get states() {
        return {
            "useMobileLayout": {}
        };
    }
    static get events() {
        return [{
                "method": "itemSelected",
                "name": "itemSelected",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when a dock item has been selected from the dock."
                },
                "complexType": {
                    "original": "DockItem",
                    "resolved": "DockItem",
                    "references": {
                        "DockItem": {
                            "location": "import",
                            "path": "./dock.types",
                            "id": "src/components/dock/dock.types.ts::DockItem",
                            "referenceLocation": "DockItem"
                        }
                    }
                }
            }, {
                "method": "menuOpen",
                "name": "menuOpen",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when a dock menu is opened."
                },
                "complexType": {
                    "original": "DockItem",
                    "resolved": "DockItem",
                    "references": {
                        "DockItem": {
                            "location": "import",
                            "path": "./dock.types",
                            "id": "src/components/dock/dock.types.ts::DockItem",
                            "referenceLocation": "DockItem"
                        }
                    }
                }
            }, {
                "method": "close",
                "name": "close",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when the popover is closed."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "dockExpanded",
                "name": "dockExpanded",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when a Dock is expanded or collapsed."
                },
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                }
            }];
    }
}
