@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
536 lines (519 loc) • 30.3 kB
JavaScript
import * as i0 from '@angular/core';
import { signal, Injectable, inject, input, computed, Component, output, TemplateRef, ViewChild, Directive } from '@angular/core';
import { IconComponent } from '@sixbell-telco/sdk/components/icon';
import { matChevronRight } from '@sixbell-telco/sdk/components/icon/material/baseline';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import * as i1 from '@angular/cdk/menu';
import { MENU_STACK, CdkMenu, CdkMenuItem, CdkMenuTrigger, MenuStack } from '@angular/cdk/menu';
import { CommonModule } from '@angular/common';
/**
* Service to manage dropdown menu state
* Used by dropdown menu components to communicate state to chevron
*/
class DropdownMenuStateService {
_isOpen = signal(false);
/**
* Current open state of the dropdown menu
*/
isOpen = this._isOpen.asReadonly();
/**
* Set the open state
*/
setOpen(open) {
this._isOpen.set(open);
}
/**
* Toggle the open state
*/
toggle() {
this._isOpen.update((current) => !current);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuStateService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuStateService, decorators: [{
type: Injectable
}] });
/**
* DropdownMenuChevron - Chevron indicator for dropdown menu triggers (especially submenus)
* Automatically rotates based on menu state
*/
class DropdownMenuChevronComponent {
dropdownMenuService = inject(DropdownMenuStateService, { optional: true });
/**
* Custom icon to use instead of default chevron right
*/
icon = input(matChevronRight);
/**
* Additional CSS classes
*/
class = input('');
/**
* Size of the chevron using Icon component size types
*/
size = input('md');
/**
* Color of the chevron using Icon component color types
*/
color = input('inherit');
/**
* Position relative to content
*/
position = input('right');
/**
* Whether the menu is open (for rotation) - now uses service or input
*/
isOpen = input(false);
/**
* Computed open state that uses service first, then input
*/
computedIsOpen = computed(() => {
const serviceState = this.dropdownMenuService?.isOpen() ?? false;
const inputState = this.isOpen();
return serviceState || inputState;
});
/**
* Computed classes for the chevron
*/
chevronClasses = computed(() => {
const marginClasses = {
left: 'mr-2',
right: 'ml-2',
};
return cn(marginClasses[this.position()], 'transition-transform duration-200 ease-in-out', this.computedIsOpen() && 'rotate-90', this.class());
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuChevronComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: DropdownMenuChevronComponent, isStandalone: true, selector: "st-dropdown-menu-chevron", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<st-icon [icon]=\"icon()\" [size]=\"size()\" [color]=\"color()\" [class]=\"chevronClasses()\"></st-icon>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "st-icon", inputs: ["color", "size", "icon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuChevronComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-chevron', standalone: true, imports: [IconComponent], template: "<st-icon [icon]=\"icon()\" [size]=\"size()\" [color]=\"color()\" [class]=\"chevronClasses()\"></st-icon>\n" }]
}] });
/**
* DropdownMenuContent - Container for dropdown menu items
*/
class DropdownMenuContentComponent {
menuStack = inject(MENU_STACK, { optional: true });
template;
/**
* Custom CSS classes
*/
class = input('');
/**
* Size variant
*/
size = input('md');
/**
* Emitted when the menu is closed
*/
closed = output();
/**
* Handle ESC key press
*/
onEscapeKey(event) {
event.preventDefault();
event.stopPropagation();
this.closeMenu();
}
/**
* Handle menu closed event
*/
onMenuClosed() {
this.closed.emit();
// Additional cleanup can be done here if needed
}
/**
* Close this menu and all child menus
*/
closeMenu() {
this.menuStack?.closeAll();
}
/**
* Computed CSS classes for the menu
*/
menuClass = () => cn('menu', 'bg-base-200', 'rounded-box', 'shadow-main', 'border', 'border-neutral', 'min-w-full', {
'menu-xs': this.size() === 'xs',
'menu-sm': this.size() === 'sm',
'menu-md': this.size() === 'md',
'menu-lg': this.size() === 'lg',
'menu-xl': this.size() === 'xl',
}, this.class());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: DropdownMenuContentComponent, isStandalone: true, selector: "st-dropdown-menu-content", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "template", first: true, predicate: ["menuTemplate"], descendants: true, read: TemplateRef, static: true }], exportAs: ["menuContent"], ngImport: i0, template: "<ng-template #menuTemplate>\n\t<ul cdkMenu role=\"menu\" [class]=\"menuClass()\" (closed)=\"onMenuClosed()\" tabindex=\"-1\">\n\t\t<ng-content></ng-content>\n\t</ul>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuContentComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-content', standalone: true, imports: [CdkMenu], host: {
'(keydown.escape)': 'onEscapeKey($event)',
}, exportAs: 'menuContent', template: "<ng-template #menuTemplate>\n\t<ul cdkMenu role=\"menu\" [class]=\"menuClass()\" (closed)=\"onMenuClosed()\" tabindex=\"-1\">\n\t\t<ng-content></ng-content>\n\t</ul>\n</ng-template>\n" }]
}], propDecorators: { template: [{
type: ViewChild,
args: ['menuTemplate', { static: true, read: TemplateRef }]
}] } });
/**
* DropdownMenuGroup - Groups related menu items together
*/
class DropdownMenuGroupComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: DropdownMenuGroupComponent, isStandalone: true, selector: "st-dropdown-menu-group", ngImport: i0, template: "<ng-content></ng-content>\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-group', standalone: true, imports: [], template: "<ng-content></ng-content>\n" }]
}] });
/**
* DropdownMenuItem - Individual menu item
*/
class DropdownMenuItemComponent {
menuStack = inject(MENU_STACK, { optional: true });
/**
* Whether the menu item is disabled
*/
disabled = input(false);
/**
* Whether the menu item is active
*/
active = input(false);
/**
* Optional keyboard shortcut text
*/
shortcut = input();
/**
* Custom CSS classes
*/
class = input('');
/**
* Emitted when the menu item is triggered/clicked
*/
triggered = output();
/**
* Handle item click - close all menus unless disabled
*/
onItemClick() {
if (!this.disabled()) {
// Emit the triggered event first
this.triggered.emit();
// For context menus, we need to close ALL menus including nested ones
// Use requestAnimationFrame to ensure the DOM has processed the click
requestAnimationFrame(() => {
// Close all menus in the stack - this should close the entire hierarchy
if (this.menuStack) {
this.menuStack.closeAll();
}
// Additional fallback: try to close any remaining open context menus
// by dispatching escape key or clicking outside
const escapeEvent = new KeyboardEvent('keydown', {
key: 'Escape',
bubbles: true,
cancelable: true,
});
document.dispatchEvent(escapeEvent);
});
}
}
/**
* Computed CSS classes for the menu item
*/
itemClass = () => cn({
'menu-disabled': this.disabled(),
'menu-active': this.active(),
}, this.class());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: DropdownMenuItemComponent, isStandalone: true, selector: "st-dropdown-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { triggered: "triggered" }, hostDirectives: [{ directive: i1.CdkMenuItem, outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: "<li [class]=\"itemClass()\" (click)=\"onItemClick()\" (keydown.enter)=\"onItemClick()\" (keydown.space)=\"onItemClick()\" tabindex=\"0\" role=\"menuitem\">\n\t<a class=\"flex items-center justify-between\">\n\t\t<span class=\"flex-1\">\n\t\t\t<ng-content></ng-content>\n\t\t</span>\n\t\t@if (shortcut(); as shortcutText) {\n\t\t\t<span class=\"ml-auto text-xs opacity-60\">{{ shortcutText }}</span>\n\t\t}\n\t</a>\n</li>\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuItemComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-item', standalone: true, imports: [], hostDirectives: [
{
directive: CdkMenuItem,
outputs: ['cdkMenuItemTriggered: triggered'],
},
], template: "<li [class]=\"itemClass()\" (click)=\"onItemClick()\" (keydown.enter)=\"onItemClick()\" (keydown.space)=\"onItemClick()\" tabindex=\"0\" role=\"menuitem\">\n\t<a class=\"flex items-center justify-between\">\n\t\t<span class=\"flex-1\">\n\t\t\t<ng-content></ng-content>\n\t\t</span>\n\t\t@if (shortcut(); as shortcutText) {\n\t\t\t<span class=\"ml-auto text-xs opacity-60\">{{ shortcutText }}</span>\n\t\t}\n\t</a>\n</li>\n" }]
}] });
/**
* DropdownMenuLabel - Label for menu sections
*/
class DropdownMenuLabelComponent {
/**
* Custom CSS classes
*/
class = input('');
/**
* Computed CSS classes for the label
*/
labelClass = () => cn('menu-title', this.class());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: DropdownMenuLabelComponent, isStandalone: true, selector: "st-dropdown-menu-label", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<li [class]=\"labelClass()\">\n\t<ng-content></ng-content>\n</li>\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuLabelComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-label', standalone: true, template: "<li [class]=\"labelClass()\">\n\t<ng-content></ng-content>\n</li>\n" }]
}] });
/**
* DropdownMenuSeparator - Visual separator between menu sections
*/
class DropdownMenuSeparatorComponent {
/**
* Custom CSS classes
*/
class = input('');
/**
* Computed CSS classes for the separator
*/
separatorClass = () => cn('pointer-events-none w-full p-0 left-0 top-0 mx-0 my-1', this.class());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: DropdownMenuSeparatorComponent, isStandalone: true, selector: "st-dropdown-menu-separator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<li [class]=\"separatorClass()\"></li>\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuSeparatorComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-separator', standalone: true, template: "<li [class]=\"separatorClass()\"></li>\n" }]
}] });
/**
* DropdownMenuSubContent - Container for submenu items
*/
class DropdownMenuSubContentComponent {
menuStack = inject(MENU_STACK, { optional: true });
template;
/**
* Custom CSS classes
*/
class = input('');
/**
* Size variant
*/
size = input('md');
/**
* Handle ESC key press
*/
onEscapeKey(event) {
event.preventDefault();
event.stopPropagation();
this.closeMenu();
}
/**
* Close this menu and all child menus
*/
closeMenu() {
this.menuStack?.closeAll();
}
/**
* Computed CSS classes for the submenu
*/
subMenuClass = () => cn('menu', 'bg-base-200', 'rounded-box', 'shadow-main', 'border', 'border-neutral', 'min-w-full', {
'menu-xs': this.size() === 'xs',
'menu-sm': this.size() === 'sm',
'menu-md': this.size() === 'md',
'menu-lg': this.size() === 'lg',
'menu-xl': this.size() === 'xl',
}, this.class());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuSubContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: DropdownMenuSubContentComponent, isStandalone: true, selector: "st-dropdown-menu-sub-content", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "template", first: true, predicate: ["menuTemplate"], descendants: true, read: TemplateRef, static: true }], exportAs: ["menuContent"], ngImport: i0, template: "<ng-template #menuTemplate>\n\t<ul cdkMenu role=\"menu\" [class]=\"subMenuClass()\" tabindex=\"-1\">\n\t\t<ng-content></ng-content>\n\t</ul>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuSubContentComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-sub-content', standalone: true, imports: [CdkMenu], exportAs: 'menuContent', host: {
'(keydown.escape)': 'onEscapeKey($event)',
}, template: "<ng-template #menuTemplate>\n\t<ul cdkMenu role=\"menu\" [class]=\"subMenuClass()\" tabindex=\"-1\">\n\t\t<ng-content></ng-content>\n\t</ul>\n</ng-template>\n" }]
}], propDecorators: { template: [{
type: ViewChild,
args: ['menuTemplate', { static: true, read: TemplateRef }]
}] } });
/**
* DropdownMenuSubTrigger - Trigger for opening a submenu
*/
class DropdownMenuSubTriggerComponent {
dropdownMenuService = inject(DropdownMenuStateService, { optional: true });
// Icons
iconChevronRight = matChevronRight;
// Inputs
disabled = input(false);
className = input();
// State - use local signal for this specific submenu
isOpen = signal(false);
// Computed styles
triggerClass = computed(() => cn('focus:outline-none focus:bg-base-200 hover:bg-base-200 cursor-pointer', this.disabled() && 'disabled pointer-events-none opacity-50', this.className()));
chevronClass = computed(() => cn('w-4 h-4 transition-transform duration-200 ease-in-out', this.isOpen() && 'rotate-90'));
// Event handlers
onMenuOpened() {
this.isOpen.set(true);
// Also sync with the dropdown menu service if available
this.dropdownMenuService?.setOpen(true);
}
onMenuClosed() {
this.isOpen.set(false);
// Also sync with the dropdown menu service if available
this.dropdownMenuService?.setOpen(false);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuSubTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: DropdownMenuSubTriggerComponent, isStandalone: true, selector: "st-dropdown-menu-sub-trigger", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "cdkMenuOpened": "onMenuOpened()", "cdkMenuClosed": "onMenuClosed()" } }, hostDirectives: [{ directive: i1.CdkMenuItem }, { directive: i1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "menuTriggerFor"], outputs: ["cdkMenuOpened", "cdkMenuOpened", "cdkMenuClosed", "cdkMenuClosed"] }], ngImport: i0, template: "<li [class]=\"triggerClass()\" (cdkMenuOpened)=\"onMenuOpened()\" (cdkMenuClosed)=\"onMenuClosed()\">\n\t<a class=\"flex items-center justify-between\">\n\t\t<span class=\"flex-1\">\n\t\t\t<ng-content></ng-content>\n\t\t</span>\n\t\t<st-icon [icon]=\"iconChevronRight\" color=\"inherit\" [class]=\"chevronClass()\"></st-icon>\n\t</a>\n</li>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "st-icon", inputs: ["color", "size", "icon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuSubTriggerComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-sub-trigger', standalone: true, imports: [IconComponent], hostDirectives: [
{
directive: CdkMenuItem,
},
{
directive: CdkMenuTrigger,
inputs: ['cdkMenuTriggerFor: menuTriggerFor'],
outputs: ['cdkMenuOpened: cdkMenuOpened', 'cdkMenuClosed: cdkMenuClosed'],
},
], host: {
'(cdkMenuOpened)': 'onMenuOpened()',
'(cdkMenuClosed)': 'onMenuClosed()',
}, template: "<li [class]=\"triggerClass()\" (cdkMenuOpened)=\"onMenuOpened()\" (cdkMenuClosed)=\"onMenuClosed()\">\n\t<a class=\"flex items-center justify-between\">\n\t\t<span class=\"flex-1\">\n\t\t\t<ng-content></ng-content>\n\t\t</span>\n\t\t<st-icon [icon]=\"iconChevronRight\" color=\"inherit\" [class]=\"chevronClass()\"></st-icon>\n\t</a>\n</li>\n" }]
}] });
/**
* DropdownMenuSub - Container for submenu functionality
*/
class DropdownMenuSubComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuSubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: DropdownMenuSubComponent, isStandalone: true, selector: "st-dropdown-menu-sub", providers: [
{
provide: MENU_STACK,
useClass: MenuStack,
},
], ngImport: i0, template: "<ng-content></ng-content>\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuSubComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-sub', standalone: true, providers: [
{
provide: MENU_STACK,
useClass: MenuStack,
},
], template: "<ng-content></ng-content>\n" }]
}] });
/**
* DropdownMenuTrigger - Trigger element for opening dropdown menu
* The component acts as the trigger itself
*/
class DropdownMenuTriggerComponent {
dropdownMenuService = inject(DropdownMenuStateService, { optional: true });
/**
* Handle menu opened event
*/
onMenuOpened() {
this.dropdownMenuService?.setOpen(true);
}
/**
* Handle menu closed event
*/
onMenuClosed() {
this.dropdownMenuService?.setOpen(false);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: DropdownMenuTriggerComponent, isStandalone: true, selector: "st-dropdown-menu-trigger", host: { attributes: { "cdkMenuItem": "", "role": "button", "tabindex": "0" }, listeners: { "cdkMenuOpened": "onMenuOpened()", "cdkMenuClosed": "onMenuClosed()" }, styleAttribute: "display: inline-block; cursor: pointer;" }, hostDirectives: [{ directive: i1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "menuTriggerFor"], outputs: ["cdkMenuOpened", "cdkMenuOpened", "cdkMenuClosed", "cdkMenuClosed"] }, { directive: i1.CdkMenuItem }], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuTriggerComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-trigger', standalone: true, imports: [CommonModule], host: {
cdkMenuItem: '',
role: 'button',
tabindex: '0',
style: 'display: inline-block; cursor: pointer;',
'(cdkMenuOpened)': 'onMenuOpened()',
'(cdkMenuClosed)': 'onMenuClosed()',
}, hostDirectives: [
{
directive: CdkMenuTrigger,
inputs: ['cdkMenuTriggerFor: menuTriggerFor'],
outputs: ['cdkMenuOpened: cdkMenuOpened', 'cdkMenuClosed: cdkMenuClosed'],
},
{
directive: CdkMenuItem,
},
], template: "<ng-content></ng-content>\n" }]
}] });
/**
* DropdownMenu - Container component that provides the menu context
* Provides a shared MENU_STACK for all nested menus and DropdownMenuStateService for state management
*/
class DropdownMenuComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: DropdownMenuComponent, isStandalone: true, selector: "st-dropdown-menu", providers: [
{
provide: MENU_STACK,
useClass: MenuStack,
},
DropdownMenuStateService,
], ngImport: i0, template: "<ng-content></ng-content>\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu', standalone: true, providers: [
{
provide: MENU_STACK,
useClass: MenuStack,
},
DropdownMenuStateService,
], template: "<ng-content></ng-content>\n" }]
}] });
/**
* Directive to mark an element as dropdown menu content
* This allows the trigger to reference the content without ng-template
*/
class DropdownMenuContentDirective {
elementRef;
/**
* Unique identifier for this menu content
*/
contentId = input.required();
constructor(elementRef) {
this.elementRef = elementRef;
}
/**
* Get the native element for CDK menu trigger
*/
get element() {
return this.elementRef.nativeElement;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuContentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.0", type: DropdownMenuContentDirective, isStandalone: true, selector: "[stDropdownMenuContent]", inputs: { contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["dropdownMenuContent"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuContentDirective, decorators: [{
type: Directive,
args: [{
selector: '[stDropdownMenuContent]',
standalone: true,
exportAs: 'dropdownMenuContent',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }] });
/**
* Service to manage dropdown menu content references
*/
class DropdownMenuService {
contentRegistry = new Map();
/**
* Register a menu content directive
*/
registerContent(id, directive) {
this.contentRegistry.set(id, directive);
}
/**
* Unregister a menu content directive
*/
unregisterContent(id) {
this.contentRegistry.delete(id);
}
/**
* Get a registered menu content by ID
*/
getContent(id) {
return this.contentRegistry.get(id);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
// Menu components
/**
* Generated bundle index. Do not edit.
*/
export { DropdownMenuChevronComponent, DropdownMenuComponent, DropdownMenuContentComponent, DropdownMenuContentDirective, DropdownMenuGroupComponent, DropdownMenuItemComponent, DropdownMenuLabelComponent, DropdownMenuSeparatorComponent, DropdownMenuService, DropdownMenuStateService, DropdownMenuSubComponent, DropdownMenuSubContentComponent, DropdownMenuSubTriggerComponent, DropdownMenuTriggerComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-dropdown-menu.mjs.map