var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { h, Component, Element, Event, Fragment, Host, Method, Prop, Watch, Listen, State, } from '@stencil/core';
import { flattenChildren } from '../../utils/array';
import { sanitizeVegaComponent } from '../../utils/component';
import { isObjectEmpty } from '../../utils/misc';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
import { VegaSidenavBackdropController } from './slimmers/controllers/vega-sidenav-backdrop-controller';
import { VegaSidenavCollapseButtonRenderer } from './slimmers/renderers/vega-sidenav-collapse-button-renderer';
import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
import { VegaSidenavOpenStatusController } from './slimmers/controllers/vega-sidenav-open-status-controller';
import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
import { VegaStateUpdate } from '../../helpers/event-manager/event-id/vega-event-id';
/**
 * @deprecated This component will be removed soon, please consider using `vega-left-nav` component instead.
 * @vegaVersion 1, v2.29.0
 */
export class VegaSidenav {
  constructor() {
    this.globalSlimmers = {};
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
    this.openStateNotifySlimmer = createSubStateNotifySlimmer(VegaSidenav, 'openState', 'watchOpenState');
    this.backdropController = new VegaSidenavBackdropController();
    this.collapseButtonRenderer = new VegaSidenavCollapseButtonRenderer();
    this.openStatusController = new VegaSidenavOpenStatusController();
    this.stateUpdateEmitter = createEventEmitSlimmer(VegaSidenav, VegaStateUpdate);
    this.openState = 'close';
    /**
     * Provides additional information or context in the form of
     *    a footnote in the side nav footer.
     *
     * @vegaVersion 1, v2.29.0
     */
    this.footnote = '';
    /**
     * Specifies the configuration for the header of the side nav,
     *    allowing customization of the logo and headline.
     *
     * @vegaVersion 1, v2.29.0
     */
    this.headerConfig = {};
    /**
     * Specifies the default open behavior for the side nav across
     *    different screen sizes and disables collapse for
     *    large screens.
     *
     * @vegaVersion 1, v2.29.0
     */
    this.openByDefault = 'close';
    /**
     * The below method is e2e-test covered in
     * @see{module:vega-sidenav-e2e-mouse-enter-and-mouse-leave-and-click}
     */
    /* istanbul ignore next */
    this.attachMouseEventToContent = () => {
      this.content.addEventListener('mouseenter', (e) => {
        e.stopPropagation();
        this.openStatusController.setSideNavOpenStatus('hoverOpen');
      });
      this.content.addEventListener('mouseleave', (e) => {
        e.stopPropagation();
        this.openStatusController.setSideNavOpenStatus('hoverClose');
      });
    };
    /**
     * The below method is e2e-test covered in
     * @see{module:vega-sidenav-e2e-with-source-with-child}
     * @see{module:vega-sidenav-e2e-with-source-without-child}
     */
    /* istanbul ignore next */
    this.renderSideBarListBySource = () => {
      var _a;
      return (h(Fragment, null, (_a = this.source) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
        if (item === null || item === void 0 ? void 0 : item.children) {
          return (h("vega-sidenav-group", { key: index, icon: item.icon || 'globe', label: item.name }, item.children.map((child, childIndex) => (h("vega-sidenav-link", { key: `${index}_${childIndex}`, url: child.url, selected: child.selected }, child.name)))));
        }
        else {
          return (h("vega-sidenav-link", { key: index, icon: item.icon || 'globe', url: item.url, selected: item.selected }, item.name));
        }
      })));
    };
  }
  /**
   * The method to used notify the sub state the parent state value changed
   */
  watchOpenState() {
    methodPlaceholder();
  }
  /**
   * clear inner content in `div.vega-nav-list` if previousSource is empty.
   * to avoid untracked sidenav items (render by slot) keeping existed while source updated.
   * The below method is e2e-test covered in
   * @see{module:vega-sidenav-e2e-with-source-with-child}
   */
  /* istanbul ignore next */
  watchSourceChange(currentSource, previousSource) {
    if (currentSource) {
      this.validSource();
    }
    if (!(previousSource === null || previousSource === void 0 ? void 0 : previousSource.length)) {
      this.host
        .querySelectorAll('vega-sidenav-link, vega-sidenav-group')
        .forEach((el) => el.remove());
    }
  }
  watchOpenByDefaultChange() {
    methodPlaceholder();
  }
  /**
   * The below method is e2e-test covered in
   * @see{module:vega-sidenav-e2e-with-source-with-duplicated-selected}
   * @see{module:vega-sidenav-e2e-with-source-without-child}
   */
  /* istanbul ignore next */
  componentWillLoad() {
    this.source && this.validSource();
  }
  /**
   * The below method is e2e-test covered in
   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop}
   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop-to-mobile}
   */
  /* istanbul ignore next */
  componentDidLoad() {
    this.attachMouseEventToContent();
  }
  /**
   * The below method is e2e-test covered in
   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
   */
  /* istanbul ignore next */
  collapseSidenavByBackDropClick(e) {
    const target = e.target;
    if (target.classList.contains(VegaSidenavBackdropController.backdropClassName)) {
      this.openStatusController.setSideNavOpenStatus('clickClose');
    }
  }
  /* The below method is e2e-test covered in
   * @see{module:vega-sidenav-toggle-and-vegaStateUpdate}
   * @see{module:vega-sidenav-phone-call-toggle-method-change-position}
   */
  /* istanbul ignore next */
  /**
   * Invoke this method to toggle the side navigation menu.
   *
   * @vegaVersion 1, v2.29.0
   */
  async toggle() {
    this.openStatusController.toggleSidenav();
  }
  /**
   * The below method is e2e-test covered in
   * @see{module:vega-sidenav-desktop-not-show-backdrop}
   * @see{module:vega-sidenav-mobile-show-backdrop}
   */
  render() {
    return sanitizeVegaComponent(h(Host, null,
      h("div", { class: "vega-sidebar", ref: (el) => this.openStatusController.setSidenavRef(el) },
        h("div", { class: "vega-sidebar-content-container", ref: (el) => (this.content = el) },
          h(Fragment, null,
            !isObjectEmpty(this.headerConfig) && this.renderSideBarHeader(),
            this.renderSideBarList(),
            this.renderSideBarFooter())),
        this.collapseButtonRenderer.render())), this.host);
  }
  /**
   * The below method is e2e-test covered in
   * @see{module:vega-sidenav-e2e-with-source-with-duplicated-selected}
   * @see{module:vega-sidenav-e2e-with-source-without-child}
   */
  /* istanbul ignore next */
  validSource() {
    const selectedItems = flattenChildren(this.source).filter((item) => item.selected);
    if (selectedItems.length > 1) {
      throw new Error('There should be only one item selected at the same time.');
    }
  }
  /**
   * The current div uses a named slot and has a sibling above it, if you skip rendering this whole element by checking a variable,
   * it will cause the slot's position to move into the sibling.
   * For specific examples, see the documentation of stencil_slot_bug.md
   * The below method is e2e-test covered in
   * @see{module:vega-sidenav-e2e-with-source-with-child}
   * @see{module:vega-sidenav-e2e-with-source-without-length}
   */
  /* istanbul ignore next */
  renderSideBarList() {
    var _a;
    return (h(Fragment, null,
      isObjectEmpty(this.headerConfig) ? h("div", { class: "header-placeholder" }) : null,
      h("slot", { name: "before-list-slot" }),
      h("div", { class: "vega-nav-list" }, ((_a = this.source) === null || _a === void 0 ? void 0 : _a.length) ? this.renderSideBarListBySource() : h("slot", null))));
  }
  renderSideBarHeader() {
    const { collapseLogo, expandLogo, headline } = this.headerConfig;
    return (h("div", { class: "vega-sidebar-header" },
      h("div", { class: "vega-sidebar-header-collapse-container" }, collapseLogo && h("img", { src: collapseLogo, alt: 'collapse logo' })),
      h("div", { class: "vega-sidebar-header-expand-container" },
        expandLogo && h("img", { src: expandLogo, alt: 'expand logo' }),
        headline && h("div", { class: "vega-sidebar-headline" }, headline))));
  }
  renderSideBarFooter() {
    return (this.footnote && (h("div", { class: "vega-nav-footer" },
      h("div", { class: "vega-nav-footnote" }, this.footnote))));
  }
  static get is() { return "vega-sidenav"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["vega-sidenav.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-sidenav.css"]
  }; }
  static get properties() { return {
    "source": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "SidebarTopLevelItem[]",
        "resolved": "SidebarTopLevelItem[]",
        "references": {
          "SidebarTopLevelItem": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1, v2.29.0"
          }],
        "text": "Defines the data that is used to generate the items\n   in the side nav list."
      }
    },
    "footnote": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1, v2.29.0"
          }],
        "text": "Provides additional information or context in the form of\n   a footnote in the side nav footer."
      },
      "attribute": "footnote",
      "reflect": false,
      "defaultValue": "''"
    },
    "headerConfig": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "SidebarHeaderConfig",
        "resolved": "{ headline?: string; expandLogo?: string; collapseLogo?: string; }",
        "references": {
          "SidebarHeaderConfig": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1, v2.29.0"
          }],
        "text": "Specifies the configuration for the header of the side nav,\n   allowing customization of the logo and headline."
      },
      "defaultValue": "{}"
    },
    "openByDefault": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<OpenByDefaultType>",
        "resolved": "\"close\" | \"disableCollapse\" | \"open\" | { S?: OpenByDefaultType; M?: OpenByDefaultType; L?: OpenByDefaultType; XL?: OpenByDefaultType; default?: OpenByDefaultType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "OpenByDefaultType": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1, v2.29.0"
          }],
        "text": "Specifies the default open behavior for the side nav across\n   different screen sizes and disables collapse for\n   large screens."
      },
      "attribute": "open-by-default",
      "reflect": false,
      "defaultValue": "'close'"
    }
  }; }
  static get states() { return {
    "openState": {}
  }; }
  static get events() { return [{
      "method": "vegaStateUpdate",
      "name": "vegaStateUpdate",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1, v2.29.0"
          }],
        "text": "An event emitter notifying the completion of a navigation menu state change (open or close)."
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }, {
      "method": "stateUpdate",
      "name": "stateUpdate",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "eventSemantics",
            "text": "namespace:native"
          }, {
            "name": "vegaVersion",
            "text": "1, v2.29.0"
          }],
        "text": "An event emitter notifying the completion of a navigation menu state change (open or close)."
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "toggle": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Invoke this method to toggle the side navigation menu.",
        "tags": [{
            "name": "vegaVersion",
            "text": "1, v2.29.0"
          }]
      }
    }
  }; }
  static get elementRef() { return "host"; }
  static get watchers() { return [{
      "propName": "openState",
      "methodName": "watchOpenState"
    }, {
      "propName": "source",
      "methodName": "watchSourceChange"
    }, {
      "propName": "openByDefault",
      "methodName": "watchOpenByDefaultChange"
    }]; }
  static get listeners() { return [{
      "name": "click",
      "method": "collapseSidenavByBackDropClick",
      "target": "window",
      "capture": true,
      "passive": false
    }]; }
}
__decorate([
  InjectVegaGlobalSlimmer()
], VegaSidenav.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSidenav.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSidenav.prototype, "openStateNotifySlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSidenav.prototype, "backdropController", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSidenav.prototype, "collapseButtonRenderer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSidenav.prototype, "openStatusController", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSidenav.prototype, "stateUpdateEmitter", void 0);
