import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { forwardRef } from 'react';
import Box from '../Box';
import Chip from '../Chip';
import ListItemButton from '../ListItemButton';
import ListItemIcon from '../ListItemIcon';
import ListItemText from '../ListItemText';
import Tooltip from '../Tooltip';

/**
 * The Navbar Item component is used to represent an item in the Navbar.
 *
 * Demos:
 *
 * - [Navbar Item (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-navbar-item)
 *
 * API:
 *
 * - inherits [ListItemButton API](https://mui.com/material-ui/api/list-item-button/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the [ListItemButton](https://mui.com/material-ui/api/list-item-button/) component are also available.
 * - ✅ `component` prop is supported.
 * - ✅ The `ref` is forwarded to the root element.
 *
 * @template C - The type of the component.
 * @param props - The props for the NavbarItem component.
 * @param ref - The ref to be forwarded to the Box component.
 * @returns The rendered NavbarItem component.
 */
const NavbarItem = forwardRef((_a, ref) => {
    var { className, fill, icon, id, label, onClick, selected, tag, tagClassName, open = true } = _a, rest = __rest(_a, ["className", "fill", "icon", "id", "label", "onClick", "selected", "tag", "tagClassName", "open"]);
    return (_jsx(Box, Object.assign({ ref: ref, className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-navbar-item', 'OxygenNavbarItem-root', {
            [`OxygenNavbarItem-${fill}`]: fill,
            [`${fill}`]: fill,
            'OxygenNavbarItem-fill': fill,
            'OxygenNavbarItem-open': open,
            fill,
            open,
        }, className) }, { children: _jsx(Tooltip, Object.assign({ ref: ref, title: !open && label, placement: "right" }, { children: _jsxs(ListItemButton, Object.assign({ selected: selected, className: clsx({ 'OxygenNavbarItem-selected': selected, selected }), onClick: onClick }, rest, { children: [_jsx(ListItemIcon, { children: icon }), _jsx(ListItemText, { primary: label }), open && tag ? (_jsx(Chip, { label: tag, className: clsx(`oxygen-chip-${tag.toLowerCase()}`, `OxygenNavbarItem-chip-${tag.toLowerCase()}`, tagClassName), classes: { label: 'OxygenNavbarItem-chipLabel oxygen-navbar-item-chip-label' } })) : null] })) }), id) })));
});
export default NavbarItem;
function addCSS(css){var head = document.getElementsByTagName('head')[0];var s = document.createElement('style');s.setAttribute('type', 'text/css');s.appendChild(document.createTextNode(css));head.appendChild(s);}
addCSS("/**\n * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.oxygen-navbar-item {\n  margin-top: 5px;\n  margin-bottom: 5px;\n}\n.oxygen-navbar-item .oxygen-list-item-button {\n  justify-content: center;\n  padding: 6px 13px;\n  border-radius: var(--oxygen-shape-borderRadius);\n}\n.oxygen-navbar-item .oxygen-list-item-button .oxygen-list-item-icon {\n  min-width: 0;\n  margin-right: auto;\n}\n.oxygen-navbar-item .oxygen-list-item-button .oxygen-list-item-text {\n  opacity: 0;\n}\n.oxygen-navbar-item .oxygen-list-item-button.selected {\n  background: var(--oxygen-palette-action-selected);\n}\n.oxygen-navbar-item .oxygen-list-item-button.selected::before {\n  content: \"\";\n  height: 80%;\n  width: 5px;\n  background-color: var(--oxygen-palette-primary-main);\n  position: absolute;\n  left: -8px;\n  border-radius: var(--oxygen-shape-borderRadius);\n}\n.oxygen-navbar-item .oxygen-list-item-button.selected:hover {\n  background: var(--oxygen-palette-action-selected);\n}\n.oxygen-navbar-item .oxygen-chip {\n  font-size: 10px;\n}\n.oxygen-navbar-item .oxygen-chip .oxygen-navbar-item-chip-label {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n.oxygen-navbar-item.open.oxygen-navbar-item .oxygen-list-item-button {\n  justify-content: initial;\n}\n.oxygen-navbar-item.open.oxygen-navbar-item .oxygen-list-item-button .oxygen-list-item-icon {\n  margin-inline-end: 10px;\n}\n.oxygen-navbar-item.open.oxygen-navbar-item .oxygen-list-item-button .oxygen-list-item-text {\n  opacity: 1;\n}\n.oxygen-navbar-item.fill.gradient .oxygen-list-item-button {\n  color: var(--oxygen-palette-common-white);\n}\n.oxygen-navbar-item.fill.gradient .oxygen-list-item-button::before {\n  background-color: var(--oxygen-palette-common-white);\n}\n.oxygen-navbar-item.fill.gradient .oxygen-list-item-button svg {\n  fill: var(--oxygen-palette-common-white);\n}\n.oxygen-navbar-item.fill.gradient .oxygen-list-item-button.selected {\n  background: var(--oxygen-palette-common-white);\n  color: var(--oxygen-palette-primary-main);\n}\n.oxygen-navbar-item.fill.gradient .oxygen-list-item-button.selected svg {\n  fill: var(--oxygen-palette-primary-main);\n}");