@codeperate/cdp-ui-library/dist/collection/components/cdp/cdp-menu-list/cdp-menu-list.js

Codeperate UI Library

var __rest = (this && this.__rest) || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
    t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function")
    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
        t[p[i]] = s[p[i]];
    }
  return t;
};
import { Component, Element, h, Host, Prop, State } from '@stencil/core';
import { deepAssign } from '../../../utils/deep-assign';
import { pathToRegexp } from 'path-to-regexp';
export class CdpMenuList {
  constructor() {
    this.defaultConfig = {
      menuItems: [],
      anchorPropsFn: null,
      classList: {
        host: 'grid grid-cols-1 gap-y-2 auto-rows-min',
        menuItem: 'py-2 px-4 hover:bg-light-blue-600 hover:text-white rounded-md grid grid-cols-[max-content,1fr,max-content] items-center gap-4 cursor-pointer',
        menuItemActive: 'py-2 px-4 bg-light-blue-600 text-white rounded-md grid grid-cols-[max-content,1fr,max-content] items-center gap-4 cursor-pointer',
        subMenuItem: 'py-1 px-4 hover:bg-light-blue-600 hover:text-white rounded-md grid grid-cols-[max-content,1fr,max-content] items-center gap-4',
        subMenuItemActive: 'py-1 px-4 bg-light-blue-600 text-white rounded-md grid grid-cols-[max-content,1fr,max-content] items-center gap-4',
        subMenuWrapper: 'grid grid-cols-1 gap-y-1 mt-2 pl-4',
      },
    };
  }
  componentWillLoad() {
    this._config = deepAssign(this.config, this.defaultConfig);
  }
  isActive(href, activePath) {
    const regex = pathToRegexp(href);
    if (activePath.match(regex))
      return true;
    return false;
  }
  render() {
    const { classList, anchorPropsFn, menuItems } = this._config;
    const activePath = this.props.activePath;
    return (h(Host, { class: classList.host }, menuItems.map((_a) => {
      var { name, isActive, icon, indicator } = _a, props = __rest(_a, ["name", "isActive", "icon", "indicator"]);
      let href = props['href'];
      let expand = props['expand'];
      let active = isActive ? isActive(activePath) : this.isActive(href, activePath);
      if (props['nested'])
        return (h("cdp-accordion", { props: { display: expand ? expand : active }, config: { toggle: !href } },
          h("a", Object.assign({ slot: "accordion", class: active ? classList.menuItemActive : classList.menuItem }, (href ? anchorPropsFn(href) : {})),
            icon ? icon(active) : '',
            name,
            indicator ? indicator(active) : ''),
          h("div", { class: classList.subMenuWrapper }, props['nested'].map(({ name, href, indicator, icon, isActive }) => {
            let active = isActive ? isActive(activePath) : this.isActive(href, activePath);
            return (h("a", Object.assign({}, anchorPropsFn(href), { class: active ? classList.subMenuItemActive : classList.subMenuItem }),
              icon ? icon(active) : '',
              name,
              indicator ? indicator(active) : ''));
          }))));
      return (h("a", Object.assign({}, anchorPropsFn(href), { class: active ? classList.menuItemActive : classList.menuItem }),
        icon ? icon(active) : '',
        name,
        indicator ? indicator(active) : ''));
    })));
  }
  static get is() { return "cdp-menu-list"; }
  static get properties() { return {
    "props": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "CdpMenuListProps",
        "resolved": "CdpMenuListProps",
        "references": {
          "CdpMenuListProps": {
            "location": "import",
            "path": "./cdp-menu-list.interface"
          }
        }
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "config": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "CdpMenuListConfig",
        "resolved": "CdpMenuListConfig",
        "references": {
          "CdpMenuListConfig": {
            "location": "import",
            "path": "./cdp-menu-list.interface"
          }
        }
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "_config": {}
  }; }
  static get elementRef() { return "rootEl"; }
}