@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
530 lines (518 loc) • 32.6 kB
JavaScript
import * as i1 from '@angular/cdk/menu';
import { MENU_STACK, CdkMenu, PARENT_OR_NEW_MENU_STACK_PROVIDER, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItem, CdkMenuTrigger, CdkMenuBar } from '@angular/cdk/menu';
import * as i0 from '@angular/core';
import { inject, signal, input, output, computed, TemplateRef, ViewChild, Component, ElementRef } from '@angular/core';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { IconComponent } from '@sixbell-telco/sdk/components/icon';
import { CommonModule } from '@angular/common';
/**
* DropdownMenuBarContent - Container for menu bar dropdown content
*/
class DropdownMenuBarContentComponent {
menuStack = inject(MENU_STACK, { optional: true });
template;
// State management
isOpen = signal(false);
isAnimatingOpen = signal(false);
/**
* Custom CSS classes
*/
class = input('');
/**
* Size variant
*/
size = input('md');
/** Whether to apply shadow */
shadow = input(true);
/**
* Emitted when the menu is opened
*/
opened = output();
/**
* Emitted when the menu is closed
*/
closed = output();
/**
* Computed data state for ARIA and animations
*/
dataState = computed(() => {
if (!this.isOpen())
return 'closed';
if (this.isAnimatingOpen())
return 'opening';
return 'open';
});
/**
* Handle ESC key press
*/
onEscapeKey(event) {
event.preventDefault();
event.stopPropagation();
this.closeMenu();
}
/**
* Handle menu opened event
*/
onMenuOpened() {
this.isOpen.set(true);
this.isAnimatingOpen.set(true);
this.opened.emit();
}
/**
* Handle menu closed event
*/
onMenuClosed() {
this.isOpen.set(false);
this.isAnimatingOpen.set(false);
this.closed.emit();
}
/**
* Handle animation end
*/
onAnimationEnd(event) {
if (event.animationName.includes('fade-in')) {
this.isAnimatingOpen.set(false);
}
}
/**
* Close this menu and all child menus
*/
closeMenu() {
// Menu closing is handled automatically by CDK
}
/**
* Computed CSS classes for the menu
*/
menuClass = () => cn('menu', 'bg-base-200', 'rounded-box', 'border', 'border-neutral', 'min-w-48', {
'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',
'shadow-main': this.shadow(),
}, this.class());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuBarContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: DropdownMenuBarContentComponent, isStandalone: true, selector: "st-dropdown-menu-bar-content", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "keydown.escape": "onEscapeKey($event)" } }, providers: [PARENT_OR_NEW_MENU_STACK_PROVIDER], viewQueries: [{ propertyName: "template", first: true, predicate: ["menuTemplate"], descendants: true, read: TemplateRef, static: true }], exportAs: ["menuBarContent"], ngImport: i0, template: "<ng-template #menuTemplate>\n\t<ul\n\t\tcdkMenu\n\t\trole=\"menu\"\n\t\t[class]=\"menuClass()\"\n\t\t[attr.data-state]=\"dataState()\"\n\t\t(closed)=\"onMenuClosed()\"\n\t\t(animationend)=\"onAnimationEnd($event)\"\n\t\ttabindex=\"-1\"\n\t>\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: DropdownMenuBarContentComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-bar-content', standalone: true, imports: [CdkMenu], providers: [PARENT_OR_NEW_MENU_STACK_PROVIDER], host: {
'(keydown.escape)': 'onEscapeKey($event)',
}, exportAs: 'menuBarContent', template: "<ng-template #menuTemplate>\n\t<ul\n\t\tcdkMenu\n\t\trole=\"menu\"\n\t\t[class]=\"menuClass()\"\n\t\t[attr.data-state]=\"dataState()\"\n\t\t(closed)=\"onMenuClosed()\"\n\t\t(animationend)=\"onAnimationEnd($event)\"\n\t\ttabindex=\"-1\"\n\t>\n\t\t<ng-content></ng-content>\n\t</ul>\n</ng-template>\n" }]
}], propDecorators: { template: [{
type: ViewChild,
args: ['menuTemplate', { static: true, read: TemplateRef }]
}] } });
/**
* DropdownMenuBarItemCheckbox - Checkbox menu item for menu bar
*/
class DropdownMenuBarItemCheckboxComponent {
// State
isChecked = signal(false);
/**
* Whether the checkbox is checked
*/
checked = input(false);
/**
* Watch for changes to checked input
*/
constructor() {
// Update internal state when input changes
this.isChecked.set(this.checked());
}
/**
* Whether the menu item is disabled
*/
disabled = input(false);
/**
* Custom indicator character or text
*/
indicator = input('✓');
/**
* Whether to show the indicator
*/
showIndicator = input(true);
/**
* Custom CSS classes
*/
class = input('');
/**
* Emitted when the checkbox state changes
*/
checkedChanged = output();
/**
* Emitted when the menu item is triggered/clicked
*/
triggered = output();
/**
* Computed data state for ARIA
*/
dataState = computed(() => {
return this.checked() ? 'checked' : 'unchecked';
});
/**
* Handle item click - toggle checkbox state
*/
onItemClick() {
if (!this.disabled()) {
const newChecked = !this.checked();
this.isChecked.set(newChecked);
this.checkedChanged.emit(newChecked);
this.triggered.emit();
}
}
/**
* Computed CSS classes for the menu item
*/
itemClass = () => cn('group', 'transition-colors', 'duration-200', {
'menu-disabled pointer-events-none opacity-50': this.disabled(),
'menu-active': this.checked(),
}, this.class());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuBarItemCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: DropdownMenuBarItemCheckboxComponent, isStandalone: true, selector: "st-dropdown-menu-bar-item-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, showIndicator: { classPropertyName: "showIndicator", publicName: "showIndicator", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChanged: "checkedChanged", triggered: "triggered" }, hostDirectives: [{ directive: i1.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "checked"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: "<li\n\t[class]=\"itemClass()\"\n\t[attr.data-state]=\"dataState()\"\n\t(click)=\"onItemClick()\"\n\t(keydown.enter)=\"onItemClick()\"\n\t(keydown.space)=\"onItemClick()\"\n\ttabindex=\"0\"\n\trole=\"menuitemcheckbox\"\n\t[attr.aria-checked]=\"checked()\"\n>\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 (showIndicator()) {\n\t\t\t<span\n\t\t\t\tclass=\"ml-auto text-xs transition-opacity duration-300 ease-in-out group-aria-[checked=false]:opacity-0 group-aria-[checked=true]:opacity-100\"\n\t\t\t>\n\t\t\t\t{{ indicator() }}\n\t\t\t</span>\n\t\t}\n\t</a>\n</li>\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuBarItemCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-bar-item-checkbox', standalone: true, imports: [], hostDirectives: [
{
directive: CdkMenuItemCheckbox,
inputs: ['cdkMenuItemChecked: checked'],
outputs: ['cdkMenuItemTriggered: triggered'],
},
], template: "<li\n\t[class]=\"itemClass()\"\n\t[attr.data-state]=\"dataState()\"\n\t(click)=\"onItemClick()\"\n\t(keydown.enter)=\"onItemClick()\"\n\t(keydown.space)=\"onItemClick()\"\n\ttabindex=\"0\"\n\trole=\"menuitemcheckbox\"\n\t[attr.aria-checked]=\"checked()\"\n>\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 (showIndicator()) {\n\t\t\t<span\n\t\t\t\tclass=\"ml-auto text-xs transition-opacity duration-300 ease-in-out group-aria-[checked=false]:opacity-0 group-aria-[checked=true]:opacity-100\"\n\t\t\t>\n\t\t\t\t{{ indicator() }}\n\t\t\t</span>\n\t\t}\n\t</a>\n</li>\n" }]
}], ctorParameters: () => [] });
/**
* DropdownMenuBarItemRadio - Radio menu item for menu bar
*/
class DropdownMenuBarItemRadioComponent {
// State
isChecked = signal(false);
/**
* Whether the radio is checked
*/
checked = input(false);
/**
* The value of this radio item
*/
value = input.required();
/**
* Whether the menu item is disabled
*/
disabled = input(false);
/**
* Custom indicator character or text
*/
indicator = input('●');
/**
* Whether to show the indicator
*/
showIndicator = input(true);
/**
* Custom CSS classes
*/
class = input('');
/**
* Emitted when the radio state changes
*/
checkedChanged = output();
/**
* Emitted when the menu item is triggered/clicked
*/
triggered = output();
/**
* Watch for changes to checked input
*/
constructor() {
// Update internal state when input changes
this.isChecked.set(this.checked());
}
/**
* Computed data state for ARIA
*/
dataState = computed(() => {
return this.checked() ? 'checked' : 'unchecked';
});
/**
* Handle item click - select this radio option
*/
onItemClick() {
if (!this.disabled() && !this.checked()) {
this.isChecked.set(true);
this.checkedChanged.emit(this.value());
this.triggered.emit();
}
}
/**
* Computed CSS classes for the menu item
*/
itemClass = () => cn('group', 'transition-colors', 'duration-200', {
'menu-disabled pointer-events-none opacity-50': this.disabled(),
'menu-active': this.checked(),
}, this.class());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuBarItemRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: DropdownMenuBarItemRadioComponent, isStandalone: true, selector: "st-dropdown-menu-bar-item-radio", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, showIndicator: { classPropertyName: "showIndicator", publicName: "showIndicator", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChanged: "checkedChanged", triggered: "triggered" }, hostDirectives: [{ directive: i1.CdkMenuItemRadio, inputs: ["cdkMenuItemChecked", "checked"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: "<li\n\t[class]=\"itemClass()\"\n\t[attr.data-state]=\"dataState()\"\n\t(click)=\"onItemClick()\"\n\t(keydown.enter)=\"onItemClick()\"\n\t(keydown.space)=\"onItemClick()\"\n\ttabindex=\"0\"\n\trole=\"menuitemradio\"\n\t[attr.aria-checked]=\"checked()\"\n>\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 (showIndicator()) {\n\t\t\t<span\n\t\t\t\tclass=\"ml-auto text-xs transition-opacity duration-300 ease-in-out group-aria-[checked=false]:opacity-0 group-aria-[checked=true]:opacity-100\"\n\t\t\t\t[class.rotate-90]=\"checked()\"\n\t\t\t>\n\t\t\t\t{{ indicator() }}\n\t\t\t</span>\n\t\t}\n\t</a>\n</li>\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuBarItemRadioComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-bar-item-radio', standalone: true, imports: [], hostDirectives: [
{
directive: CdkMenuItemRadio,
inputs: ['cdkMenuItemChecked: checked'],
outputs: ['cdkMenuItemTriggered: triggered'],
},
], template: "<li\n\t[class]=\"itemClass()\"\n\t[attr.data-state]=\"dataState()\"\n\t(click)=\"onItemClick()\"\n\t(keydown.enter)=\"onItemClick()\"\n\t(keydown.space)=\"onItemClick()\"\n\ttabindex=\"0\"\n\trole=\"menuitemradio\"\n\t[attr.aria-checked]=\"checked()\"\n>\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 (showIndicator()) {\n\t\t\t<span\n\t\t\t\tclass=\"ml-auto text-xs transition-opacity duration-300 ease-in-out group-aria-[checked=false]:opacity-0 group-aria-[checked=true]:opacity-100\"\n\t\t\t\t[class.rotate-90]=\"checked()\"\n\t\t\t>\n\t\t\t\t{{ indicator() }}\n\t\t\t</span>\n\t\t}\n\t</a>\n</li>\n" }]
}], ctorParameters: () => [] });
/**
* DropdownMenuBarItem - Regular menu item for menu bar
*/
class DropdownMenuBarItemComponent {
/**
* 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
*/
onItemClick() {
if (!this.disabled()) {
this.triggered.emit();
}
}
/**
* Computed CSS classes for the menu item
*/
itemClass = () => cn('transition-colors', 'duration-200', {
'menu-disabled pointer-events-none opacity-50': this.disabled(),
'menu-active': this.active(),
}, this.class());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuBarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: DropdownMenuBarItemComponent, isStandalone: true, selector: "st-dropdown-menu-bar-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: DropdownMenuBarItemComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-bar-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" }]
}] });
/**
* DropdownMenuBarLabel - Label for menu bar sections
*/
class DropdownMenuBarLabelComponent {
/**
* 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: DropdownMenuBarLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: DropdownMenuBarLabelComponent, isStandalone: true, selector: "st-dropdown-menu-bar-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: DropdownMenuBarLabelComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-bar-label', standalone: true, template: "<li [class]=\"labelClass()\">\n\t<ng-content></ng-content>\n</li>\n" }]
}] });
/**
* DropdownMenuBarSeparator - Visual separator between menu bar sections
*/
class DropdownMenuBarSeparatorComponent {
/**
* 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: DropdownMenuBarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: DropdownMenuBarSeparatorComponent, isStandalone: true, selector: "st-dropdown-menu-bar-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: DropdownMenuBarSeparatorComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-bar-separator', standalone: true, template: "<li [class]=\"separatorClass()\"></li>\n" }]
}] });
/**
* DropdownMenuBarSubTrigger - Trigger for opening a submenu in menu bar
*/
class DropdownMenuBarSubTriggerComponent {
elementRef = inject(ElementRef, { optional: true });
// State
isOpen = signal(false);
hoverTimeout = null;
// Inputs
disabled = input(false);
className = input();
chevronIcon = input(''); // Will be passed from parent
/**
* Menu template reference for the clean API (menuTriggerFor)
*/
menuTriggerFor = input(null);
/**
* Computed data state for ARIA
*/
dataState = computed(() => {
return this.isOpen() ? 'open' : 'closed';
});
// Computed styles
triggerClass = computed(() => cn('group', 'focus:outline-none focus:bg-base-200 hover:bg-base-200 cursor-pointer', 'transition-colors duration-200', this.disabled() && 'disabled pointer-events-none opacity-50', this.className()));
chevronClass = computed(() => cn('ml-2 transition-transform duration-200 ease-in-out', this.isOpen() ? 'rotate-90' : 'rotate-0'));
// Event handlers
onMenuOpened() {
this.isOpen.set(true);
}
onMenuClosed() {
this.isOpen.set(false);
}
onMouseEnter() {
// CDK MenuTrigger should handle hover behavior automatically when used in a MenuBar
// We don't need custom logic here - just let CDK handle it
}
onMouseLeave() {
// Clear timeout if menu hasn't opened yet
if (this.hoverTimeout) {
clearTimeout(this.hoverTimeout);
this.hoverTimeout = null;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuBarSubTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: DropdownMenuBarSubTriggerComponent, isStandalone: true, selector: "st-dropdown-menu-bar-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 }, chevronIcon: { classPropertyName: "chevronIcon", publicName: "chevronIcon", isSignal: true, isRequired: false, transformFunction: null }, menuTriggerFor: { classPropertyName: "menuTriggerFor", publicName: "menuTriggerFor", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<li\n\tcdkMenuItem\n\tcdkMenuTrigger\n\t[cdkMenuTriggerFor]=\"menuTriggerFor()\"\n\t[class]=\"triggerClass()\"\n\t[attr.data-state]=\"dataState()\"\n\t(cdkMenuOpened)=\"onMenuOpened()\"\n\t(cdkMenuClosed)=\"onMenuClosed()\"\n\t(mouseenter)=\"onMouseEnter()\"\n\t(mouseleave)=\"onMouseLeave()\"\n>\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]=\"chevronIcon()\" [class]=\"chevronClass()\"></st-icon>\n\t</a>\n</li>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "st-icon", inputs: ["color", "size", "icon"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuBarSubTriggerComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-bar-sub-trigger', standalone: true, imports: [IconComponent, CdkMenuItem, CdkMenuTrigger], host: {
class: 'contents',
}, template: "<li\n\tcdkMenuItem\n\tcdkMenuTrigger\n\t[cdkMenuTriggerFor]=\"menuTriggerFor()\"\n\t[class]=\"triggerClass()\"\n\t[attr.data-state]=\"dataState()\"\n\t(cdkMenuOpened)=\"onMenuOpened()\"\n\t(cdkMenuClosed)=\"onMenuClosed()\"\n\t(mouseenter)=\"onMouseEnter()\"\n\t(mouseleave)=\"onMouseLeave()\"\n>\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]=\"chevronIcon()\" [class]=\"chevronClass()\"></st-icon>\n\t</a>\n</li>\n" }]
}] });
/**
* DropdownMenuBarTrigger - Trigger element for menu bar items
*/
class DropdownMenuBarTriggerComponent {
elementRef = inject(ElementRef);
// State management
isOpen = signal(false);
hoverTimeout = null;
/**
* Whether the trigger is disabled
*/
disabled = input(false);
/**
* Menu template reference for the clean API (menuTriggerFor)
*/
menuTriggerFor = input(null);
/**
* Custom CSS classes
*/
class = input('');
/**
* Emitted when menu is opened
*/
opened = output();
/**
* Emitted when menu is closed
*/
closed = output();
/**
* Computed data state for ARIA attributes
*/
dataState = computed(() => {
return this.isOpen() ? 'open' : 'closed';
});
/**
* Handle menu opened
*/
onMenuOpened() {
this.isOpen.set(true);
this.opened.emit();
}
/**
* Handle menu closed
*/
onMenuClosed() {
this.isOpen.set(false);
this.closed.emit();
}
onMouseEnter() {
// CDK MenuTrigger should handle hover behavior automatically when used in a MenuBar
// We don't need custom logic here - just let CDK handle it
}
onMouseLeave() {
// Clear timeout if menu hasn't opened yet
if (this.hoverTimeout) {
clearTimeout(this.hoverTimeout);
this.hoverTimeout = null;
}
}
/**
* Computed CSS classes for the trigger
*/
triggerClass = () => cn('group', 'transition-colors', 'duration-200', {
'disabled pointer-events-none opacity-50': this.disabled(),
}, this.class());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuBarTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: DropdownMenuBarTriggerComponent, isStandalone: true, selector: "st-dropdown-menu-bar-trigger", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, menuTriggerFor: { classPropertyName: "menuTriggerFor", publicName: "menuTriggerFor", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<li\n\tcdkMenuItem\n\tcdkMenuTrigger\n\t[cdkMenuTriggerFor]=\"menuTriggerFor()\"\n\t[class]=\"triggerClass()\"\n\t[attr.data-state]=\"dataState()\"\n\t(cdkMenuOpened)=\"onMenuOpened()\"\n\t(cdkMenuClosed)=\"onMenuClosed()\"\n\t(mouseenter)=\"onMouseEnter()\"\n\t(mouseleave)=\"onMouseLeave()\"\n>\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</a>\n</li>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuBarTriggerComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-bar-trigger', standalone: true, imports: [CommonModule, CdkMenuItem, CdkMenuTrigger], host: {
class: 'contents',
}, template: "<li\n\tcdkMenuItem\n\tcdkMenuTrigger\n\t[cdkMenuTriggerFor]=\"menuTriggerFor()\"\n\t[class]=\"triggerClass()\"\n\t[attr.data-state]=\"dataState()\"\n\t(cdkMenuOpened)=\"onMenuOpened()\"\n\t(cdkMenuClosed)=\"onMenuClosed()\"\n\t(mouseenter)=\"onMouseEnter()\"\n\t(mouseleave)=\"onMouseLeave()\"\n>\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</a>\n</li>\n" }]
}] });
/**
* DropdownMenuBar - Container for horizontal menu bar (like Google Docs)
*/
class DropdownMenuBarComponent {
/**
* Custom CSS classes
*/
class = input('');
/**
* Size variant
*/
size = input('md');
/** Whether to apply shadow */
shadow = input(true);
/**
* Computed CSS classes for the menu bar
*/
menuBarClass = () => cn('menu', 'menu-horizontal', 'bg-base-200', 'rounded-box', 'border', 'border-neutral', 'p-1', {
'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',
'shadow-main': this.shadow(),
}, this.class());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: DropdownMenuBarComponent, isStandalone: true, selector: "st-dropdown-menu-bar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, exportAs: ["menuBar"], ngImport: i0, template: "<ul [class]=\"menuBarClass()\" cdkMenuBar>\n\t<ng-content></ng-content>\n</ul>\n", dependencies: [{ kind: "directive", type: CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DropdownMenuBarComponent, decorators: [{
type: Component,
args: [{ selector: 'st-dropdown-menu-bar', standalone: true, imports: [CdkMenuBar], host: {
class: 'contents',
}, exportAs: 'menuBar', template: "<ul [class]=\"menuBarClass()\" cdkMenuBar>\n\t<ng-content></ng-content>\n</ul>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DropdownMenuBarComponent, DropdownMenuBarContentComponent, DropdownMenuBarItemCheckboxComponent, DropdownMenuBarItemComponent, DropdownMenuBarItemRadioComponent, DropdownMenuBarLabelComponent, DropdownMenuBarSeparatorComponent, DropdownMenuBarSubTriggerComponent, DropdownMenuBarTriggerComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-dropdown-menu-bar.mjs.map