@heartlandone/vega 2.0.0-temp-test-0.3 → 2.0.0

package/dist/collection/components/vega-sidenav/vega-sidenav.js

@@ -1,580 +0,0 @@
-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 { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
-import { flattenChildren } from '../../utils/array';
-import { sanitizeVegaComponent } from '../../utils/component';
-import ResponsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsiveFormatFacade';
-import { getCurrentBreakpoint } from '../../utils/breakpoints';
-import { isObjectEmpty } from '../../utils/misc';
-import ZIndexManager from '../../helpers/zindex/zIndexManager';
-import { executeAfterTransition } from '../../utils/effect';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
-import { PageResizeObserverSlimmer } from '../../helpers/slimmers/pageResizeObserverSlimmer';
-/**
- * @deprecated This component will be removed soon, please consider using `vega-left-nav` component instead.
- */
-export class VegaSidenav {
-  constructor() {
-    this.globalSlimmers = {};
-    /**
-     * The below method is e2e-test covered in
-     * @see{module:vega-sidenav-e2e-vega-resize-with-desktop}
-     */
-    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
-      callback: /* istanbul ignore next */ () => {
-        this.responsiveBehavior = this.getSidenavResponsiveBehavior();
-        this.updateBackdropAvailability();
-        this.updateOverflowAvailability();
-        this.updateStatusOpenByDefault(true);
-        this.updateHandlerIconAvailability();
-      },
-    });
-    this.openState = 'close';
-    /**
-     * Provides additional information or context in the form of
-     *    a footnote in the side nav footer.
-     */
-    this.footnote = '';
-    /**
-     * Specifies the configuration for the header of the side nav,
-     *    allowing customization of the logo and headline.
-     */
-    this.headerConfig = {};
-    /**
-     * Specifies the default open behavior for the side nav across
-     *    different screen sizes and disables collapse for
-     *    large screens.
-     */
-    this.openByDefault = 'close';
-    /**
-     * The below method is e2e-test covered in
-     * @see{module:vega-sidenav-e2e-mouse-enter-and-mouse-leave-and-click}
-     * @see{module:vega-sidenav-desktop-click-icon-change-position}
-     */
-    /* istanbul ignore next */
-    this.handleClickSidebarIcon = async () => {
-      await this.toggle();
-    };
-    /**
-     * 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.setSideNavOpenStatus('hoverOpen');
-      });
-      this.content.addEventListener('mouseleave', (e) => {
-        e.stopPropagation();
-        this.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));
-        }
-      })));
-    };
-  }
-  /**
-   * 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.list
-        .querySelectorAll('vega-sidenav-link, vega-sidenav-group')
-        .forEach((el) => el.remove());
-    }
-  }
-  watchOpenByDefaultChange() {
-    this.updateStatusOpenByDefault();
-    this.updateHandlerIconAvailability();
-  }
-  /**
-   * 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();
-    this.responsiveBehavior = this.getSidenavResponsiveBehavior();
-    this.updateStatusOpenByDefault();
-  }
-  /**
-   * It will hide the sidenav when clicking the link in the sidenav on mobile terminal default.
-   * If link set showSideBarOnClickLink is true that will don't hide the sidenav..
-   * The below method is e2e-test covered in
-   * @see{module:vega-sidenav-e2e-vega-click-handler-mobile}
-   * @see{module:vega-sidenav-e2e-vega-click-handler-not-close-sidenav-mobile}
-   */
-  /* istanbul ignore next */
-  onVegaClickHandler(e) {
-    const sidenavLink = e.target;
-    if (!this.responsiveBehavior.showSideBarOnClickLink && !sidenavLink.showSideBarOnClickLink) {
-      this.setSideNavOpenStatus('clickClose');
-    }
-  }
-  /**
-   * 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(VegaSidenav.backDropCss)) {
-      this.setSideNavOpenStatus('clickClose');
-    }
-  }
-  /**
-   * Invoke this method to toggle the side navigation menu.
-   */
-  /* 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 */
-  async toggle() {
-    if (this.canCollapseSidenav()) {
-      switch (this.openState) {
-        case 'open':
-          this.setSideNavOpenStatus('clickClose');
-          break;
-        case 'close':
-          this.setSideNavOpenStatus('clickOpen');
-          break;
-        case 'hoverOpen':
-          this.setSideNavOpenStatus('hoverClose');
-          break;
-      }
-    }
-  }
-  /**
-   * 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, { class: this.getSidebarCss() },
-      h("div", { class: "vega-sidebar", ref: (el) => (this.sidebar = 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())),
-        h("i", { role: 'button', onClick: this.handleClickSidebarIcon, onKeyDown: createEnterKeyHandlerToTriggerClick(), class: "vega-handler-icon", tabIndex: 0, "aria-label": 'Handle Sidebar Icon' }))), this.el);
-  }
-  getSidebarCss() {
-    return {
-      'v-w-auto': ['open'].includes(this.openState),
-    };
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-sidenav-e2e-openByDefault-resize-screen-size}
-   */
-  /* istanbul ignore next */
-  updateHandlerIconAvailability() {
-    const iconElement = this.el.querySelector('.vega-sidebar > i');
-    if (!this.canCollapseSidenav()) {
-      iconElement.classList.add('disable-collapse');
-    }
-    else {
-      iconElement.classList.remove('disable-collapse');
-    }
-  }
-  getCurrentOpenByDefault(input = this.openByDefault) {
-    return ResponsiveFormatFacade.formatCustom(input);
-  }
-  isLargeScreen() {
-    const currentBreakpoint = getCurrentBreakpoint();
-    return currentBreakpoint == 'L' || currentBreakpoint == 'XL';
-  }
-  canCollapseSidenav() {
-    const openByDefault = this.getCurrentOpenByDefault();
-    return openByDefault !== 'disableCollapse' || !this.isLargeScreen();
-  }
-  /**
-   * The below method is e2e-test covered in
-   *
-   * @see{module:vega-sidenav-e2e-openByDefault-resize-screen-size}
-   */
-  /* istanbul ignore next */
-  updateStatusOpenByDefault(triggerByResize = false) {
-    const openByDefault = this.getCurrentOpenByDefault();
-    if (!triggerByResize) {
-      if (openByDefault == 'open' || !this.canCollapseSidenav()) {
-        this.setSideNavOpenStatus('clickOpen');
-      }
-      else if (openByDefault == 'close' ||
-        (openByDefault == 'disableCollapse' && this.canCollapseSidenav())) {
-        this.setSideNavOpenStatus('clickClose');
-      }
-    }
-    else if (!this.canCollapseSidenav()) {
-      this.setSideNavOpenStatus('clickOpen');
-    }
-  }
-  /**
-   * 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 below method is e2e-test covered in
-   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
-   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop-to-mobile}
-   */
-  /* istanbul ignore next */
-  updateBackdropAvailability() {
-    var _a;
-    if (this.openState === 'open' && ((_a = this.responsiveBehavior) === null || _a === void 0 ? void 0 : _a.showBackdrop)) {
-      this.findOrCreateBackDrop();
-    }
-    else {
-      const backDrop = document.querySelector('.' + VegaSidenav.backDropCss);
-      backDrop && ZIndexManager.removeZIndex(backDrop, 'base');
-      backDrop && backDrop.remove();
-    }
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-sidenav-e2e-vega-hidden-overflow-with-desktop-to-mobile}
-   */
-  /* istanbul ignore next */
-  updateOverflowAvailability() {
-    var _a;
-    const bodyElement = document.querySelector('body');
-    if (!((_a = this.responsiveBehavior) === null || _a === void 0 ? void 0 : _a.canBeScrolled) && this.openState === 'open') {
-      bodyElement.style['overflow'] = 'hidden';
-    }
-    else {
-      bodyElement.style['overflow'] = null;
-    }
-  }
-  /**
-   *
-   * The below method is e2e-test covered in
-   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
-   */
-  /* istanbul ignore next */
-  findOrCreateBackDrop() {
-    let backDrop = document.querySelector('.' + VegaSidenav.backDropCss);
-    if (!backDrop) {
-      backDrop = document.createElement('div');
-      backDrop.classList.add(VegaSidenav.backDropCss);
-      backDrop.style['height'] = document.querySelector('body').scrollHeight + 'px';
-      document.querySelector('body').append(backDrop);
-    }
-    return backDrop;
-  }
-  /**
-   * Please refer to the documentation for this part of the logic: vega-stencil/docs/sidenav-responsive-support-spec.md
-   * The below method is e2e-test covered in
-   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop}
-   */
-  /* istanbul ignore next */
-  getSidenavResponsiveBehavior() {
-    if (this.isLargeScreen()) {
-      return {
-        showSideBar: true,
-        showBackdrop: false,
-        canBeScrolled: true,
-        showSideBarOnClickLink: true,
-      };
-    }
-    else {
-      return {
-        showSideBar: false,
-        showBackdrop: true,
-        canBeScrolled: false,
-        showSideBarOnClickLink: false,
-      };
-    }
-  }
-  /**
-   * 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: "v-mt-size-24" }) : null,
-      h("slot", { name: "before-list-slot" }),
-      h("div", { class: "vega-nav-list", ref: (ref) => (this.list = ref) }, ((_a = this.source) === null || _a === void 0 ? void 0 : _a.length) ? this.renderSideBarListBySource() : h("slot", null))));
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-sidenav-e2e-mouse-enter-and-mouse-leave-and-click}
-   */
-  /* istanbul ignore next */
-  setSideNavOpenStatus(statusFlag) {
-    let updated = false;
-    switch (statusFlag) {
-      case 'clickOpen':
-        if (this.openState === 'close') {
-          this.openState = 'open';
-          this.sidebar.classList.add('open');
-          updated = true;
-        }
-        break;
-      case 'clickClose':
-        if (this.openState === 'hoverOpen' || this.openState === 'open') {
-          this.openState = 'close';
-          this.sidebar.classList.remove('open');
-          updated = true;
-        }
-        break;
-      case 'hoverOpen':
-        if (this.openState === 'close') {
-          this.openState = 'hoverOpen';
-          this.sidebar.classList.add('open');
-          updated = true;
-        }
-        break;
-      case 'hoverClose':
-        if (this.openState === 'hoverOpen') {
-          this.openState = 'close';
-          this.sidebar.classList.remove('open');
-          updated = true;
-        }
-        break;
-    }
-    if (updated) {
-      this.updateBackdropAvailability();
-      this.updateOverflowAvailability();
-      this.updateZIndex();
-      this.vegaStateUpdate.emit(this.openState);
-    }
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-sidenav-e2e-z-index}
-   * @see{module:vega-sidenav-e2e-z-index-in-mobile}
-   */
-  /* istanbul ignore next */
-  updateZIndex() {
-    const backDrop = document.querySelector('.' + VegaSidenav.backDropCss);
-    if (['hoverOpen', 'open'].includes(this.openState)) {
-      backDrop && ZIndexManager.setZIndex(backDrop, 'base');
-      ZIndexManager.setZIndex(this.sidebar, 'base');
-    }
-    else {
-      executeAfterTransition(() => {
-        backDrop && ZIndexManager.removeZIndex(backDrop, 'base');
-        ZIndexManager.removeZIndex(this.sidebar, 'base');
-      }, this.sidebar, 300);
-    }
-  }
-  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 properties() { return {
-    "source": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "SidebarTopLevelItem[]",
-        "resolved": "SidebarTopLevelItem[]",
-        "references": {
-          "SidebarTopLevelItem": {
-            "location": "import",
-            "path": "./types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "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": [],
-        "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": [],
-        "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": [],
-        "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": [],
-        "text": "An event emitter notifying the completion of a navigation menu close operation."
-      },
-      "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": []
-      }
-    }
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "source",
-      "methodName": "watchSourceChange"
-    }, {
-      "propName": "openByDefault",
-      "methodName": "watchOpenByDefaultChange"
-    }]; }
-  static get listeners() { return [{
-      "name": "vegaClick",
-      "method": "onVegaClickHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "collapseSidenavByBackDropClick",
-      "target": "window",
-      "capture": true,
-      "passive": false
-    }]; }
-}
-VegaSidenav.backDropCss = 'vega-sidenav-backdrop';
-__decorate([
-  InjectVegaGlobalSlimmer()
-], VegaSidenav.prototype, "globalSlimmers", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaSidenav.prototype, "pageResizeObserverSlimmer", void 0);