@cbpds/web-components/dist/esm/cbp-menu-item.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import { r as registerInstance, h, a as Host, g as getElement } from './index-6c11fa0c.js';
import { s as setCSSProps } from './utils-475ba472.js';

const cbpMenuItemCss = ":root{--cbp-menu-item-color:var(--cbp-color-text-lightest);--cbp-menu-item-color-dark:var(--cbp-color-text-darkest);--cbp-menu-item-color-bg:transparent;--cbp-menu-item-color-bg-dark:transparent;--cbp-menu-item-color-hover:var(--cbp-color-text-darkest);--cbp-menu-item-color-hover-dark:var(--cbp-color-text-lightest);--cbp-menu-item-color-bg-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-menu-item-color-bg-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-menu-item-color-focus:var(--cbp-color-text-darkest);--cbp-menu-item-color-focus-dark:var(--cbp-color-text-lightest);--cbp-menu-item-color-bg-focus:var(--cbp-color-interactive-focus-light);--cbp-menu-item-color-bg-focus-dark:var(--cbp-color-interactive-focus-dark);--cbp-menu-item-color-active:var(--cbp-color-text-darkest);--cbp-menu-item-color-active-dark:var(---cbp-color-text-lightest);--cbp-menu-item-color-bg-active:var(--cbp-color-interactive-active-light);--cbp-menu-item-color-bg-active-dark:var(--cbp-color-interactive-active-dark);--cbp-menu-item-color-outline:var(--cbp-color-black);--cbp-menu-item-color-outline-dark:var(--cbp-color-white);--cpb-menu-item-indent:0px}[data-cbp-theme=light] cbp-menu[context*=dark] cbp-menu-item,[data-cbp-theme=dark] cbp-menu:not([context=dark-inverts]):not([context=light-always]) cbp-menu-item{--cbp-menu-item-color:var(--cbp-menu-item-color-dark);--cbp-menu-item-color-bg:var(--cbp-menu-item-color-bg-dark);--cbp-menu-item-color-hover:var(--cbp-menu-item-color-hover-dark);--cbp-menu-item-color-bg-hover:var(--cbp-menu-item-color-bg-hover-dark);--cbp-menu-item-color-focus:var(--cbp-menu-item-color-focus-dark);--cbp-menu-item-color-bg-focus:var(--cbp-menu-item-color-bg-focus-dark);--cbp-menu-item-color-active:var(--cbp-menu-item-color-active-dark);--cbp-menu-item-color-bg-active:var(--cbp-menu-item-color-bg-active-dark);--cbp-menu-item-color-outline:var(--cbp-menu-item-color-outline-dark)}cbp-menu-item{--cbp-button-width:100%;--cbp-button-border-radius:0;display:flex;align-items:stretch;margin-bottom:0;width:100%;height:var(--cbp-space-9x);background:var(-cbp-menu-item-color-bg);}cbp-menu-item:first-child,cbp-menu-item:first-child a,cbp-menu-item:first-child button{border-radius:var(--cbp-border-radius-softer) var(--cbp-border-radius-softer) 0 0}cbp-menu-item:last-child,cbp-menu-item:last-child a,cbp-menu-item:last-child button{border-radius:0 0 var(--cbp-border-radius-softer) var(--cbp-border-radius-softer)}cbp-menu-item cbp-button,cbp-menu-item cbp-link{display:block;width:100%;height:100%}cbp-menu-item:not(.cbp-menu__close-btn) a:not(#fakeId),cbp-menu-item:not(.cbp-menu__close-btn) button:not(#fakeId){--cbp-button-gap:var(--cbp-space-1x);--cbp-link-gap:var(--cbp-space-1x);display:flex;align-items:center;justify-content:left;width:100%;height:100%;padding-block:0;padding-inline-start:calc(var(--cbp-space-3x) + var(--cpb-menu-item-indent));padding-inline-end:var(--cbp-space-3x);font-weight:var(--cbp-font-weight-regular);line-height:var(--cbp-space-5x);color:var(--cbp-menu-item-color);background:var(--cbp-menu-item-color-bg);border:0;outline-width:0;outline-style:solid;outline-color:var(--cbp-menu-item-color-outline);outline-offset:calc(var(--cbp-space-1x) * -1);text-decoration:none;letter-spacing:normal;text-transform:none}cbp-menu-item:not(.cbp-menu__close-btn) a:not(#fakeId):focus,cbp-menu-item:not(.cbp-menu__close-btn) button:not(#fakeId):focus{--cbp-menu-item-color:var(--cbp-menu-item-color-focus);--cbp-menu-item-color-bg:var(--cbp-menu-item-color-bg-focus);--cbp-menu-item-color-dark:var(--cbp-menu-item-color-focus-dark);--cbp-menu-item-color-bg-dark:var(--cbp-menu-item-color-bg-focus-dark);outline-width:var(--cbp-border-size-md)}cbp-menu-item:not(.cbp-menu__close-btn) a:not(#fakeId):hover,cbp-menu-item:not(.cbp-menu__close-btn) button:not(#fakeId):hover{--cbp-menu-item-color:var(--cbp-menu-item-color-hover);--cbp-menu-item-color-bg:var(--cbp-menu-item-color-bg-hover);--cbp-menu-item-color-dark:var(--cbp-menu-item-color-hover-dark);--cbp-menu-item-color-bg-dark:var(--cbp-menu-item-color-bg-hover-dark);outline:0}cbp-menu-item:not(.cbp-menu__close-btn) a:not(#fakeId):active,cbp-menu-item:not(.cbp-menu__close-btn) button:not(#fakeId):active{--cbp-menu-item-color:var(--cbp-menu-item-color-active);--cbp-menu-item-color-bg:var(--cbp-menu-item-color-bg-active);--cbp-menu-item-color-dark:var(--cbp-menu-item-color-active-dark);--cbp-menu-item-color-bg-dark:var(--cbp-menu-item-color-bg-active-dark)}cbp-menu-item[color=danger]{--cbp-menu-item-color:var(--cbp-color-danger-light);--cbp-menu-item-color-dark:var(--cbp-color-danger-base);--cbp-menu-item-color-bg-hover:var(--cbp-color-danger-light);--cbp-menu-item-color-bg-hover-dark:var(--cbp-color-danger-dark)}cbp-menu-item.cbp-menu__close-btn{width:100%;justify-content:center;font-weight:var(--cbp-font-weight-bold);background-color:var(--cbp-color-interactive-primary-base);border:0;cursor:pointer}cbp-menu-item.cbp-menu__close-btn:hover{background-color:var(--cbp-color-interactive-primary-dark)}cbp-menu-item.cbp-menu__close-btn:focus{background-color:var(--cbp-color-interactive-focus-dark)}";
const CbpMenuItemStyle0 = cbpMenuItemCss;

const CbpMenuItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.indentLevel = 0;
        this.color = undefined;
        this.host.slot = "cbp-menu-items";
    }
    componentWillLoad() {
        setCSSProps(this.host, {
            "--cpb-menu-item-indent": this.indentLevel > 0 ? `var(--cbp-space-${this.indentLevel * 2}x)` : "0px"
        });
    }
    componentDidLoad() {
        var _a, _b;
        this.menuItem = this.host.querySelector('a,button');
        (_a = this.menuItem) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'menuitem');
        (_b = this.menuItem) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '-1');
    }
    render() {
        return (h(Host, { key: 'c35b14f6f6203a5caaa41acbe9110d2347c0ca30', role: "presentation" }, h("slot", { key: '68b2cc5660e5e74be55203fce2aa653a84006303' })));
    }
    get host() { return getElement(this); }
};
CbpMenuItem.style = CbpMenuItemStyle0;

export { CbpMenuItem as cbp_menu_item };

//# sourceMappingURL=cbp-menu-item.entry.js.map