import { r as registerInstance, h as h$1 } from './index-38ad4957.js';
import { n as h } from './dom-context-hooks.module-50442785.js';
import { k as kn, i as isDemo } from './index.module-b23fdad8.js';
import { c as cjs } from './cjs-bdfb4486.js';
import { g as getProps } from './utils-334c1e34.js';
import './JSS-67b5cff8.js';
import './mixins-f750863a.js';
import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-b3beac5a.js';

function useNavigationSidebarItem(props) {
  const currentPage = kn();
  return {
    states: {
      active: currentPage.pathname === props.path,
    },
    data: {
      label: props.label,
      icon: props.icon,
      path: props.path,
    },
    backgroundColor: props.backgroundColor,
    backgroundHoverColor: props.backgroundHoverColor,
    textColor: props.textColor,
    textHoverColor: props.textHoverColor,
    borderRadius: props.borderRadius,
    backgroundFocusedColor: props.backgroundFocusedColor,
    textFocusedColor: props.textFocusedColor,
    padding: props.padding,
  };
}

const NavigationSidebarItem = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * @uiName Padding
     * @uiType string
     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
     */
    this.padding = "x-small";
    h(this);
  }
  disconnectedCallback() { }
  render() {
    const props = isDemo()
      ? useSidebarItemDemo(getProps(this))
      : useNavigationSidebarItem(getProps(this));
    return h$1(NavigationSidebarItemView, Object.assign({}, props));
  }
};
function useSidebarItemDemo(props) {
  return cjs({
    states: {
      active: false,
    },
    data: {
      label: props.label || "Dashboard",
      icon: props.icon || "house",
    },
    backgroundColor: props.backgroundColor,
    backgroundHoverColor: props.backgroundHoverColor,
    textColor: props.textColor,
    textHoverColor: props.textHoverColor,
    borderRadius: props.borderRadius,
    backgroundFocusedColor: props.backgroundFocusedColor,
    textFocusedColor: props.textFocusedColor,
    padding: props.padding,
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}

export { NavigationSidebarItem as sqm_navigation_sidebar_item };
