primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
952 lines (926 loc) • 79.1 kB
JavaScript
export * from 'primeng/types/sidebar';
import * as i0 from '@angular/core';
import { InjectionToken, Injectable, inject, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, signal, input, booleanAttribute, model, HostListener, NgModule } from '@angular/core';
import { uuid } from '@primeuix/utils';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind, BindModule } from 'primeng/bind';
import { style as style$1 } from '@primeuix/styles/sidebar';
import { BaseStyle } from 'primeng/base';
import { isPlatformBrowser } from '@angular/common';
import { createMotion } from '@primeuix/motion';
const SIDEBAR_INSTANCE = new InjectionToken('SIDEBAR_INSTANCE');
const SIDEBAR_LAYOUT_INSTANCE = new InjectionToken('SIDEBAR_LAYOUT_INSTANCE');
const SIDEBAR_ASIDE_INSTANCE = new InjectionToken('SIDEBAR_ASIDE_INSTANCE');
const SIDEBAR_CONTENT_INSTANCE = new InjectionToken('SIDEBAR_CONTENT_INSTANCE');
const SIDEBAR_HEADER_INSTANCE = new InjectionToken('SIDEBAR_HEADER_INSTANCE');
const SIDEBAR_PANEL_INSTANCE = new InjectionToken('SIDEBAR_PANEL_INSTANCE');
const SIDEBAR_FOOTER_INSTANCE = new InjectionToken('SIDEBAR_FOOTER_INSTANCE');
const SIDEBAR_GROUP_INSTANCE = new InjectionToken('SIDEBAR_GROUP_INSTANCE');
const SIDEBAR_MENU_INSTANCE = new InjectionToken('SIDEBAR_MENU_INSTANCE');
const SIDEBAR_MENU_ITEM_INSTANCE = new InjectionToken('SIDEBAR_MENU_ITEM_INSTANCE');
const SIDEBAR_MENU_SUB_INSTANCE = new InjectionToken('SIDEBAR_MENU_SUB_INSTANCE');
const SIDEBAR_MENU_SUB_ITEM_INSTANCE = new InjectionToken('SIDEBAR_MENU_SUB_ITEM_INSTANCE');
const style = /*css*/ `
${style$1}
/* For PrimeNG */
.p-sidebar-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 15;
background-color: rgb(0 0 0 / 0.4);
}
/* NG uses extra DOM wrappers around .p-sidebar-menu-sub for the Angular animation system */
.p-sidebar-menu-sub-content-container {
display: grid;
grid-template-rows: 1fr;
}
.p-sidebar-menu-sub-content-wrapper {
min-height: 0;
}
.p-sidebar[data-collapsible="icon"] .p-sidebar-menu-item[data-collapsible]>.p-sidebar-menu-sub-content-container {
display: none;
}
.p-sidebar-menu-sub-enter-from,
.p-sidebar-menu-sub-leave-to {
height: 0 !important;
opacity: 0;
}
.p-sidebar-menu-sub-enter-to,
.p-sidebar-menu-sub-leave-from {
height: var(--px-sidebar-menu-sub-height, auto);
opacity: 1;
}
.p-sidebar-menu-sub-enter-active,
.p-sidebar-menu-sub-leave-active {
transition: height 200ms ease-out, opacity 200ms ease-out;
overflow: hidden;
}
`;
const classes = {
root: 'p-sidebar p-component',
layout: 'p-sidebar-layout',
spacer: 'p-sidebar-spacer',
aside: 'p-sidebar-aside',
panel: 'p-sidebar-panel',
header: 'p-sidebar-header',
content: 'p-sidebar-content',
footer: 'p-sidebar-footer',
group: 'p-sidebar-group',
groupLabel: 'p-sidebar-group-label',
groupAction: 'p-sidebar-group-action',
groupContent: 'p-sidebar-group-content',
menu: 'p-sidebar-menu',
menuItem: 'p-sidebar-menu-item',
menuButton: 'p-sidebar-menu-button',
menuAction: 'p-sidebar-menu-action',
menuBadge: 'p-sidebar-menu-badge',
menuSub: 'p-sidebar-menu-sub',
menuSubItem: 'p-sidebar-menu-sub-item',
menuSubButton: 'p-sidebar-menu-sub-button',
trigger: 'p-sidebar-trigger',
rail: 'p-sidebar-rail',
main: 'p-sidebar-main',
backdrop: 'p-sidebar-backdrop'
};
class SidebarStyle extends BaseStyle {
name = 'sidebar';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarStyle, decorators: [{
type: Injectable
}] });
/**
*
* Sidebar is a panel displayed as an overlay or static side navigation with a compound API.
*
* [Live Demo](https://www.primeng.org/sidebar/)
*
* @module sidebarstyle
*
*/
var SidebarClasses;
(function (SidebarClasses) {
/**
* Class name of the root element
*/
SidebarClasses["root"] = "p-sidebar";
/**
* Class name of the layout element
*/
SidebarClasses["layout"] = "p-sidebar-layout";
/**
* Class name of the spacer element
*/
SidebarClasses["spacer"] = "p-sidebar-spacer";
/**
* Class name of the aside element
*/
SidebarClasses["aside"] = "p-sidebar-aside";
/**
* Class name of the panel element
*/
SidebarClasses["panel"] = "p-sidebar-panel";
/**
* Class name of the header element
*/
SidebarClasses["header"] = "p-sidebar-header";
/**
* Class name of the content element
*/
SidebarClasses["content"] = "p-sidebar-content";
/**
* Class name of the footer element
*/
SidebarClasses["footer"] = "p-sidebar-footer";
/**
* Class name of the group element
*/
SidebarClasses["group"] = "p-sidebar-group";
/**
* Class name of the group label element
*/
SidebarClasses["groupLabel"] = "p-sidebar-group-label";
/**
* Class name of the group action element
*/
SidebarClasses["groupAction"] = "p-sidebar-group-action";
/**
* Class name of the group content element
*/
SidebarClasses["groupContent"] = "p-sidebar-group-content";
/**
* Class name of the menu element
*/
SidebarClasses["menu"] = "p-sidebar-menu";
/**
* Class name of the menu item element
*/
SidebarClasses["menuItem"] = "p-sidebar-menu-item";
/**
* Class name of the menu button element
*/
SidebarClasses["menuButton"] = "p-sidebar-menu-button";
/**
* Class name of the menu action element
*/
SidebarClasses["menuAction"] = "p-sidebar-menu-action";
/**
* Class name of the menu badge element
*/
SidebarClasses["menuBadge"] = "p-sidebar-menu-badge";
/**
* Class name of the menu sub element
*/
SidebarClasses["menuSub"] = "p-sidebar-menu-sub";
/**
* Class name of the menu sub item element
*/
SidebarClasses["menuSubItem"] = "p-sidebar-menu-sub-item";
/**
* Class name of the menu sub button element
*/
SidebarClasses["menuSubButton"] = "p-sidebar-menu-sub-button";
/**
* Class name of the trigger element
*/
SidebarClasses["trigger"] = "p-sidebar-trigger";
/**
* Class name of the rail element
*/
SidebarClasses["rail"] = "p-sidebar-rail";
/**
* Class name of the main element
*/
SidebarClasses["main"] = "p-sidebar-main";
/**
* Class name of the backdrop element
*/
SidebarClasses["backdrop"] = "p-sidebar-backdrop";
})(SidebarClasses || (SidebarClasses = {}));
/**
* SidebarBackdrop is a helper component for Sidebar component.
* @group Components
*/
class SidebarBackdrop extends BaseComponent {
componentName = 'SidebarBackdrop';
bindDirectiveInstance = inject(Bind, { self: true });
_componentStyle = inject(SidebarStyle);
pcSidebar = inject(SIDEBAR_INSTANCE, { optional: true });
layout = inject(SIDEBAR_LAYOUT_INSTANCE, { optional: true });
visible = computed(() => {
if (this.pcSidebar)
return this.pcSidebar.open();
return !!this.layout?.isAnyOpen();
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
motion;
isInitialMount = true;
constructor() {
super();
effect(() => {
const show = this.visible();
if (!isPlatformBrowser(this.platformId))
return;
const el = this.el?.nativeElement;
if (!el)
return;
if (!this.motion) {
this.motion = createMotion(el, {
name: 'p-overlay-mask',
autoHeight: false,
autoWidth: false
});
}
if (show) {
el.style.removeProperty('display');
el.classList.add('p-overlay-mask');
this.motion.enter();
}
else if (!this.isInitialMount) {
this.motion.leave().then(() => {
if (!this.visible() && this.el?.nativeElement) {
this.el.nativeElement.style.display = 'none';
this.el.nativeElement.classList.remove('p-overlay-mask');
}
});
}
else {
el.style.display = 'none';
}
this.isInitialMount = false;
});
}
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('root'));
}
onClick(event) {
if (this.pcSidebar) {
if (this.pcSidebar.dismissable())
this.pcSidebar.collapse(event);
}
else {
this.layout?.collapseAll(event);
}
}
onDestroy() {
this.motion?.cancel();
this.motion = undefined;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SidebarBackdrop, isStandalone: true, selector: "p-sidebar-backdrop", host: { listeners: { "click": "onClick($event)" }, properties: { "class": "cx('backdrop')" } }, providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarBackdrop }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarBackdrop, decorators: [{
type: Component,
args: [{
selector: 'p-sidebar-backdrop',
standalone: true,
imports: [BindModule],
template: ``,
host: {
'[class]': "cx('backdrop')",
'(click)': 'onClick($event)'
},
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarBackdrop }]
}]
}], ctorParameters: () => [] });
/**
* SidebarContent is a helper component for Sidebar component.
* @group Components
*/
class SidebarContent extends BaseComponent {
componentName = 'SidebarContent';
bindDirectiveInstance = inject(Bind, { self: true });
_componentStyle = inject(SidebarStyle);
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('root'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SidebarContent, isStandalone: true, selector: "p-sidebar-content", host: { properties: { "class": "cx('content')" } }, providers: [SidebarStyle, { provide: SIDEBAR_CONTENT_INSTANCE, useExisting: SidebarContent }, { provide: PARENT_INSTANCE, useExisting: SidebarContent }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarContent, decorators: [{
type: Component,
args: [{
selector: 'p-sidebar-content',
standalone: true,
imports: [BindModule],
template: `<ng-content />`,
host: { '[class]': "cx('content')" },
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SidebarStyle, { provide: SIDEBAR_CONTENT_INSTANCE, useExisting: SidebarContent }, { provide: PARENT_INSTANCE, useExisting: SidebarContent }]
}]
}] });
/**
* SidebarFooter is a helper component for Sidebar component.
* @group Components
*/
class SidebarFooter extends BaseComponent {
componentName = 'SidebarFooter';
bindDirectiveInstance = inject(Bind, { self: true });
_componentStyle = inject(SidebarStyle);
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('root'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarFooter, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SidebarFooter, isStandalone: true, selector: "p-sidebar-footer", host: { properties: { "class": "cx('footer')" } }, providers: [SidebarStyle, { provide: SIDEBAR_FOOTER_INSTANCE, useExisting: SidebarFooter }, { provide: PARENT_INSTANCE, useExisting: SidebarFooter }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarFooter, decorators: [{
type: Component,
args: [{
selector: 'p-sidebar-footer',
standalone: true,
imports: [BindModule],
template: `<ng-content />`,
host: { '[class]': "cx('footer')" },
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SidebarStyle, { provide: SIDEBAR_FOOTER_INSTANCE, useExisting: SidebarFooter }, { provide: PARENT_INSTANCE, useExisting: SidebarFooter }]
}]
}] });
/**
* SidebarGroup is a helper component for Sidebar component.
* @group Components
*/
class SidebarGroup extends BaseComponent {
componentName = 'SidebarGroup';
bindDirectiveInstance = inject(Bind, { self: true });
_componentStyle = inject(SidebarStyle);
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('root'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroup, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SidebarGroup, isStandalone: true, selector: "p-sidebar-group", host: { properties: { "class": "cx('group')" } }, providers: [SidebarStyle, { provide: SIDEBAR_GROUP_INSTANCE, useExisting: SidebarGroup }, { provide: PARENT_INSTANCE, useExisting: SidebarGroup }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroup, decorators: [{
type: Component,
args: [{
selector: 'p-sidebar-group',
standalone: true,
imports: [BindModule],
template: `<ng-content />`,
host: { '[class]': "cx('group')" },
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SidebarStyle, { provide: SIDEBAR_GROUP_INSTANCE, useExisting: SidebarGroup }, { provide: PARENT_INSTANCE, useExisting: SidebarGroup }]
}]
}] });
/**
* SidebarGroupAction is a helper directive for Sidebar component.
* @group Components
*/
class SidebarGroupAction extends BaseComponent {
componentName = 'SidebarGroupAction';
bindDirectiveInstance = inject(Bind, { optional: true, self: true }) ?? undefined;
_componentStyle = inject(SidebarStyle);
onAfterViewChecked() {
this.bindDirectiveInstance?.setAttrs(this.ptm('root'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupAction, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SidebarGroupAction, isStandalone: true, selector: "[pSidebarGroupAction]", host: { properties: { "class": "cx('groupAction')" } }, providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarGroupAction }], usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupAction, decorators: [{
type: Directive,
args: [{
selector: '[pSidebarGroupAction]',
standalone: true,
host: { '[class]': "cx('groupAction')" },
providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarGroupAction }]
}]
}] });
/**
* SidebarGroupContent is a helper component for Sidebar component.
* @group Components
*/
class SidebarGroupContent extends BaseComponent {
componentName = 'SidebarGroupContent';
bindDirectiveInstance = inject(Bind, { self: true });
_componentStyle = inject(SidebarStyle);
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('root'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SidebarGroupContent, isStandalone: true, selector: "p-sidebar-group-content", host: { properties: { "class": "cx('groupContent')" } }, providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarGroupContent }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupContent, decorators: [{
type: Component,
args: [{
selector: 'p-sidebar-group-content',
standalone: true,
imports: [BindModule],
template: `<ng-content />`,
host: { '[class]': "cx('groupContent')" },
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarGroupContent }]
}]
}] });
/**
* SidebarGroupLabel is a helper component for Sidebar component.
* @group Components
*/
class SidebarGroupLabel extends BaseComponent {
componentName = 'SidebarGroupLabel';
bindDirectiveInstance = inject(Bind, { self: true });
_componentStyle = inject(SidebarStyle);
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('root'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupLabel, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SidebarGroupLabel, isStandalone: true, selector: "p-sidebar-group-label", host: { properties: { "class": "cx('groupLabel')" } }, providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarGroupLabel }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupLabel, decorators: [{
type: Component,
args: [{
selector: 'p-sidebar-group-label',
standalone: true,
imports: [BindModule],
template: `<ng-content />`,
host: { '[class]': "cx('groupLabel')" },
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarGroupLabel }]
}]
}] });
/**
* SidebarHeader is a helper component for Sidebar component.
* @group Components
*/
class SidebarHeader extends BaseComponent {
componentName = 'SidebarHeader';
bindDirectiveInstance = inject(Bind, { self: true });
_componentStyle = inject(SidebarStyle);
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('root'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SidebarHeader, isStandalone: true, selector: "p-sidebar-header", host: { properties: { "class": "cx('header')" } }, providers: [SidebarStyle, { provide: SIDEBAR_HEADER_INSTANCE, useExisting: SidebarHeader }, { provide: PARENT_INSTANCE, useExisting: SidebarHeader }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarHeader, decorators: [{
type: Component,
args: [{
selector: 'p-sidebar-header',
standalone: true,
imports: [BindModule],
template: `<ng-content />`,
host: { '[class]': "cx('header')" },
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SidebarStyle, { provide: SIDEBAR_HEADER_INSTANCE, useExisting: SidebarHeader }, { provide: PARENT_INSTANCE, useExisting: SidebarHeader }]
}]
}] });
/**
* SidebarMain is a helper component for Sidebar component.
* @group Components
*/
class SidebarMain extends BaseComponent {
componentName = 'SidebarMain';
bindDirectiveInstance = inject(Bind, { self: true });
_componentStyle = inject(SidebarStyle);
layout = inject(SIDEBAR_LAYOUT_INSTANCE, { optional: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('root'));
}
onClick(event) {
this.layout?.onMainClick(event);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMain, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SidebarMain, isStandalone: true, selector: "p-sidebar-main", host: { listeners: { "click": "onClick($event)" }, properties: { "class": "cx('main')" } }, providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarMain }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMain, decorators: [{
type: Component,
args: [{
selector: 'p-sidebar-main',
standalone: true,
imports: [BindModule],
template: `<ng-content />`,
host: {
'[class]': "cx('main')",
'(click)': 'onClick($event)'
},
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarMain }]
}]
}] });
/**
* SidebarLayout is a helper component for Sidebar component.
* @group Components
*/
class SidebarLayout extends BaseComponent {
componentName = 'SidebarLayout';
bindDirectiveInstance = inject(Bind, { self: true });
_componentStyle = inject(SidebarStyle);
sidebars = new Map();
version = signal(0, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "version" }] : /* istanbul ignore next */ []));
isAnyOpen = computed(() => {
this.version();
let open = false;
this.sidebars.forEach((s) => {
if (s.open())
open = true;
});
return open;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "isAnyOpen" }] : /* istanbul ignore next */ []));
registerSidebar(id, sidebar) {
this.sidebars.set(id, sidebar);
this.version.update((v) => v + 1);
}
unregisterSidebar(id) {
this.sidebars.delete(id);
this.version.update((v) => v + 1);
}
getSidebar(id) {
return this.sidebars.get(id);
}
toggle(target, event) {
if (target) {
this.sidebars.get(target)?.toggle(event);
return;
}
if (this.sidebars.size === 1) {
this.sidebars.values().next().value?.toggle(event);
}
}
collapseAll(event) {
this.sidebars.forEach((s) => s.collapse(event));
}
onMainClick(event) {
const target = event.target;
// Skip clicks that originate from a sidebar trigger so opening the sidebar via the trigger is not immediately undone by the same click.
if (target?.closest('[data-scope="sidebar"][data-part="trigger"]'))
return;
this.sidebars.forEach((s) => {
if (s.open() && s.overlay() && s.hideOnOutsideClick())
s.collapse(event);
});
}
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('root'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarLayout, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SidebarLayout, isStandalone: true, selector: "p-sidebar-layout", host: { properties: { "class": "cx('layout')" } }, providers: [SidebarStyle, { provide: SIDEBAR_LAYOUT_INSTANCE, useExisting: SidebarLayout }, { provide: PARENT_INSTANCE, useExisting: SidebarLayout }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarLayout, decorators: [{
type: Component,
args: [{
selector: 'p-sidebar-layout',
standalone: true,
imports: [BindModule],
template: `<ng-content />`,
host: {
'[class]': "cx('layout')"
},
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SidebarStyle, { provide: SIDEBAR_LAYOUT_INSTANCE, useExisting: SidebarLayout }, { provide: PARENT_INSTANCE, useExisting: SidebarLayout }]
}]
}] });
/**
* SidebarMenu is a helper component for Sidebar component.
* @group Components
*/
class SidebarMenu extends BaseComponent {
componentName = 'SidebarMenu';
bindDirectiveInstance = inject(Bind, { self: true });
_componentStyle = inject(SidebarStyle);
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('root'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SidebarMenu, isStandalone: true, selector: "p-sidebar-menu", host: { attributes: { "role": "list" }, properties: { "class": "cx('menu')" } }, providers: [SidebarStyle, { provide: SIDEBAR_MENU_INSTANCE, useExisting: SidebarMenu }, { provide: PARENT_INSTANCE, useExisting: SidebarMenu }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenu, decorators: [{
type: Component,
args: [{
selector: 'p-sidebar-menu',
standalone: true,
imports: [BindModule],
template: `<ng-content />`,
host: {
'[class]': "cx('menu')",
role: 'list'
},
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SidebarStyle, { provide: SIDEBAR_MENU_INSTANCE, useExisting: SidebarMenu }, { provide: PARENT_INSTANCE, useExisting: SidebarMenu }]
}]
}] });
/**
* SidebarMenuAction is a helper directive for Sidebar component.
* @group Components
*/
class SidebarMenuAction extends BaseComponent {
componentName = 'SidebarMenuAction';
bindDirectiveInstance = inject(Bind, { optional: true, self: true }) ?? undefined;
_componentStyle = inject(SidebarStyle);
/**
* Hide the action until the parent menu item is hovered / focus-within.
* @defaultValue false
* @group Props
*/
showOnHover = input(false, { ...(ngDevMode ? { debugName: "showOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
dataShowOnHover = computed(() => (this.showOnHover() ? '' : null), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dataShowOnHover" }] : /* istanbul ignore next */ []));
onAfterViewChecked() {
this.bindDirectiveInstance?.setAttrs(this.ptm('root'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuAction, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SidebarMenuAction, isStandalone: true, selector: "[pSidebarMenuAction]", inputs: { showOnHover: { classPropertyName: "showOnHover", publicName: "showOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cx('menuAction')", "attr.data-show-on-hover": "dataShowOnHover()" } }, providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarMenuAction }], usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuAction, decorators: [{
type: Directive,
args: [{
selector: '[pSidebarMenuAction]',
standalone: true,
host: {
'[class]': "cx('menuAction')",
'[attr.data-show-on-hover]': 'dataShowOnHover()'
},
providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarMenuAction }]
}]
}], propDecorators: { showOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnHover", required: false }] }] } });
/**
* SidebarMenuBadge is a helper component for Sidebar component.
* @group Components
*/
class SidebarMenuBadge extends BaseComponent {
componentName = 'SidebarMenuBadge';
bindDirectiveInstance = inject(Bind, { self: true });
_componentStyle = inject(SidebarStyle);
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('root'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuBadge, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SidebarMenuBadge, isStandalone: true, selector: "p-sidebar-menu-badge", host: { properties: { "class": "cx('menuBadge')" } }, providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarMenuBadge }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuBadge, decorators: [{
type: Component,
args: [{
selector: 'p-sidebar-menu-badge',
standalone: true,
imports: [BindModule],
template: `<ng-content />`,
host: { '[class]': "cx('menuBadge')" },
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarMenuBadge }]
}]
}] });
/**
* SidebarMenuButton is a helper directive for Sidebar component.
* @group Components
*/
class SidebarMenuButton extends BaseComponent {
componentName = 'SidebarMenuButton';
bindDirectiveInstance = inject(Bind, { optional: true, self: true }) ?? undefined;
_componentStyle = inject(SidebarStyle);
pcMenuItem = inject(SIDEBAR_MENU_ITEM_INSTANCE, { optional: true }) ?? undefined;
/**
* Whether this button represents the active menu entry.
* @defaultValue false
* @group Props
*/
isActive = input(false, { ...(ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
dataActive = computed(() => (this.isActive() ? 'true' : null), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dataActive" }] : /* istanbul ignore next */ []));
onAfterViewChecked() {
this.bindDirectiveInstance?.setAttrs(this.ptm('root'));
}
onClick(event) {
if (this.pcMenuItem?.collapsible()) {
this.pcMenuItem.toggle();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuButton, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SidebarMenuButton, isStandalone: true, selector: "[pSidebarMenuButton]", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "cx('menuButton')", "attr.data-active": "dataActive()" } }, providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarMenuButton }], usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuButton, decorators: [{
type: Directive,
args: [{
selector: '[pSidebarMenuButton]',
standalone: true,
host: {
'[class]': "cx('menuButton')",
'[attr.data-active]': 'dataActive()',
'(click)': 'onClick($event)'
},
providers: [SidebarStyle, { provide: PARENT_INSTANCE, useExisting: SidebarMenuButton }]
}]
}], propDecorators: { isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }] } });
/**
* SidebarMenuItem is a helper component for Sidebar component.
* @group Components
*/
class SidebarMenuItem extends BaseComponent {
componentName = 'SidebarMenuItem';
bindDirectiveInstance = inject(Bind, { self: true });
_componentStyle = inject(SidebarStyle);
/**
* When enabled, renders a collapsible item that toggles the nested SidebarMenuSub.
* @defaultValue false
* @group Props
*/
collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Two-way bound open state for the nested sub-menu (only when `collapsible`).
* @defaultValue false
* @group Props
*/
open = model(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
/**
* Initial open state applied once on init (like React's defaultOpen). Does not continuously bind.
* @defaultValue undefined
* @group Props
*/
defaultOpen = input(undefined, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "defaultOpen" }] : /* istanbul ignore next */ []));
/**
* Disables interaction within the item.
* @defaultValue false
* @group Props
*/
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
isOpen = computed(() => this.collapsible() && this.open(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
dataCollapsible = computed(() => (this.collapsible() ? '' : null), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dataCollapsible" }] : /* istanbul ignore next */ []));
dataOpen = computed(() => (this.collapsible() && this.open() ? '' : null), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dataOpen" }] : /* istanbul ignore next */ []));
dataDisabled = computed(() => (this.disabled() ? '' : null), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dataDisabled" }] : /* istanbul ignore next */ []));
constructor() {
super();
effect(() => {
const def = this.defaultOpen();
if (def !== undefined && !this.defaultApplied) {
this.defaultApplied = true;
this.open.set(def);
}
});
}
defaultApplied = false;
toggle() {
if (this.collapsible() && !this.disabled()) {
this.open.set(!this.open());
}
}
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('root'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: SidebarMenuItem, isStandalone: true, selector: "p-sidebar-menu-item", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "role": "listitem" }, properties: { "class": "cx('menuItem')", "attr.data-collapsible": "dataCollapsible()", "attr.data-open": "dataOpen()", "attr.data-disabled": "dataDisabled()" } }, providers: [SidebarStyle, { provide: SIDEBAR_MENU_ITEM_INSTANCE, useExisting: SidebarMenuItem }, { provide: PARENT_INSTANCE, useExisting: SidebarMenuItem }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuItem, decorators: [{
type: Component,
args: [{
selector: 'p-sidebar-menu-item',
standalone: true,
imports: [BindModule],
template: `<ng-content />`,
host: {
'[class]': "cx('menuItem')",
role: 'listitem',
'[attr.data-collapsible]': 'dataCollapsible()',
'[attr.data-open]': 'dataOpen()',
'[attr.data-disabled]': 'dataDisabled()'
},
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SidebarStyle, { provide: SIDEBAR_MENU_ITEM_INSTANCE, useExisting: SidebarMenuItem }, { provide: PARENT_INSTANCE, useExisting: SidebarMenuItem }]
}]
}], ctorParameters: () => [], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
/**
* SidebarMenuSub is a helper component for Sidebar component.
* @group Components
*/
class SidebarMenuSub extends BaseComponent {
componentName = 'SidebarMenuSub';
bindDirectiveInstance = inject(Bind, { self: true });
_componentStyle = inject(SidebarStyle);
pcMenuItem = inject(SIDEBAR_MENU_ITEM_INSTANCE, { optional: true }) ?? undefined;
motion;
isInitialMount = true;
constructor() {
super();
effect(() => {
const collapsible = this.pcMenuItem?.collapsible() ?? false;
const visible = collapsible ? this.pcMenuItem.open() : true;
if (!isPlatformBrowser(this.platformId))
return;
const el = this.el?.nativeElement;
if (!el)
return;
if (!collapsible) {
this.cancel();
el.style.removeProperty('display');
return;
}
if (!this.motion) {
this.motion = createMotion(el, {
name: 'p-sidebar-menu-sub',
cssVarPrefix: 'px-sidebar-menu-sub',
autoHeight: true,
duration: 200
});
}
if (this.isInitialMount) {
if (!visible)
el.style.display = 'none';
this.isInitialMount = false;
return;
}
if (visible) {
el.style.removeProperty('display');
this.motion.enter();
}
else {
this.motion.leave().then(() => {
const stillClosed = this.pcMenuItem?.collapsible() && !this.pcMenuItem?.open();
if (stillClosed && this.el?.nativeElement) {
this.el.nativeElement.style.display = 'none';
}
});
}
});
}
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('root'));
}
onDestroy() {
this.cancel();
}
cancel() {
this.motion?.cancel();
this.motion = undefined;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuSub, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SidebarMenuSub, isStandalone: true, selector: "p-sidebar-menu-sub", host: { attributes: { "role": "list" }, properties: { "class": "cx('menuSub')" } }, providers: [SidebarStyle, { provide: SIDEBAR_MENU_SUB_INSTANCE, useExisting: SidebarMenuSub }, { provide: PARENT_INSTANCE, useExisting: SidebarMenuSub }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuSub, decorators: [{
type: Component,
args: [{
selector: 'p-sidebar-menu-sub',
standalone: true,
imports: [BindModule],
template: `<ng-content />`,
host: {
'[class]': "cx('menuSub')",
role: 'list'
},
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [SidebarStyle, { provide: SIDEBAR_MENU_SUB_INSTANCE, useExisting: SidebarMenuSub }, { provide: PARENT_INSTANCE, useExisting: SidebarMenuSub }]
}]
}], ctorParameters: () => [] });
/**
* SidebarMenuSubButton is a helper directive for Sidebar component.
* @group Components
*/
class SidebarMenuSubButton extends BaseComponent {
componentName = 'SidebarMenuSubButton';
bindDirectiveInstance = inject(Bind, { optional: true, self: true }) ?? undefined;
_componentStyle = inject(SidebarStyle);
/**
* Whether this button represents the active sub-menu entry.
* @defaultValue false
* @group Props
*/
isActive = input(false, { ...(ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Optional size variant.
* @group Props
*/
size = input('md', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
dataActive = computed(() => (this.isActive() ? 'true' : null), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dataActive" }] : /* istanbul ignore next */ []));
dataSize = computed(() => (this.size() === 'sm' ? 'sm' : null), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dataSize" }] : /* istanbul ignore next */ []));
onAfterViewChecked() {
this.bindDirectiveInstance?.setAttrs(this.ptm('root'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuSubButton, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SidebarMenuSubButton, isStandalone: true, selector: "[pSidebarMenuSubButton]", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cx('menuSubButton')", "attr.data-active": "dataActive()", "attr.data-size": "dataSize()" } }, providers: [SidebarStyle, { provide: PAREN