ng-devui
Version:
DevUI components based on Angular
346 lines (338 loc) • 31.8 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, Output, inject, ChangeDetectorRef, Injectable, Directive, HostListener, TemplateRef, ContentChildren, NgModule } from '@angular/core';
import * as i3 from '@angular/cdk/overlay';
import { OverlayModule } from '@angular/cdk/overlay';
import { BehaviorSubject, Subject, combineLatest, distinctUntilChanged, filter, auditTime } from 'rxjs';
import * as i2 from 'ng-devui/icon';
import { IconModule } from 'ng-devui/icon';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i4 from 'ng-devui/utils';
import { collapseMotion, scaleInOut, StrTplOutletModule } from 'ng-devui/utils';
import { map } from 'rxjs/operators';
class MenuComponent {
constructor() {
this.collapsed = false;
this.menuClass = true;
this.collapsedSubject = new BehaviorSubject(this.collapsed);
this.collapsed$ = this.collapsedSubject.asObservable();
this.menuItemClick = new EventEmitter();
}
ngOnChanges({ collapsed }) {
if (collapsed) {
this.collapsedSubject.next(collapsed.currentValue);
}
}
ngOnInit() { }
ngOnDestroy() {
this.collapsedSubject.next(false);
this.collapsedSubject.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuComponent, selector: "d-menu, [dMenu]", inputs: { collapsed: "collapsed" }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class.collapsed": "this.collapsed", "class.devui-menu": "this.menuClass" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:root{--devui-menu-width: 100%;--devui-menu-item-height: 36px;--devui-menu-item-gap: 4px;--devui-menu-item-static-padding: 12px;--devui-menu-padding-size: 16px;--devui-menu-icon-gap: 10px}.devui-menu-item:not(.no-style){display:flex;align-items:center;column-gap:var(--devui-menu-icon-gap);height:var(--devui-menu-item-height);padding-inline:var(--devui-menu-padding-size) var(--devui-menu-item-static-padding);color:var(--devui-text-weak, #333333);cursor:pointer;margin-block:var(--devui-menu-item-gap);border-radius:var(--devui-border-radius, 2px);transition:background-color var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),color var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu-item:not(.no-style):not(.disabled,.active):hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-list-item-hover-text, #000000)}.devui-menu-item:not(.no-style):not(.disabled):active{background-color:var(--devui-list-item-selected-bg, #cedefd)}.devui-menu-item:not(.no-style) .devui-menu-item-icon .devui-icon-container{color:inherit}.devui-menu-item:not(.no-style)>a{display:block;width:100%;color:var(--devui-text-weak, #333333);text-decoration:none}.devui-menu-item:not(.no-style)>a:hover{color:inherit}.devui-menu-item:not(.no-style).active{color:var(--devui-brand-active, #0950de);background-color:var(--devui-list-item-active-bg, #cedefd);font-weight:700}.devui-menu-item:not(.no-style).active:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-menu-item:not(.no-style).disabled{color:var(--devui-disabled-text, #c2c2c2);cursor:not-allowed;-webkit-user-select:none;user-select:none}.devui-menu{width:var(--devui-menu-width);padding:16px 12px;transition:width var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-item{justify-content:space-between;margin-block:0}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-item .devui-sub-menu-item-title{display:flex;align-items:center;column-gap:var(--devui-menu-icon-gap);width:100%}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-item .devui-sub-menu-item-arrow{width:16px;transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-item.active{background-color:initial}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-item.active:hover:not(.disabled){color:var(--devui-brand-active-focus, #00196b);background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-children{overflow-y:hidden}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-children .devui-menu-item{padding-inline-start:calc(var(--devui-menu-padding-size) + (var(--devui-menu-icon-gap) + var(--devui-menu-padding-size)) * var(--level, 1))}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-children::-webkit-scrollbar{height:0}.devui-menu .devui-sub-menu.open>.devui-sub-menu-item .devui-sub-menu-item-arrow{transform:rotate(-180deg);transform-origin:center}.devui-menu.collapsed{--devui-menu-width: 60px}.devui-menu.collapsed .devui-menu-item:not(.no-style){justify-content:center}.devui-menu.collapsed .devui-menu-item:not(.no-style) .devui-menu-item-icon{transform:scale(1.1)}.devui-menu.collapsed .devui-menu-item:not(.no-style) .devui-menu-item-icon+.devui-menu-item-name,.devui-menu.collapsed .devui-menu-item:not(.no-style) .devui-sub-menu-item-arrow{display:none}.devui-menu.collapsed .devui-sub-menu:not(.no-style) .devui-sub-menu-item .devui-sub-menu-item-title{justify-content:inherit}.devui-menu.collapsed .devui-sub-menu:not(.no-style) .devui-sub-menu-children{display:none}.devui-menu-popover-panel .devui-menu-popover:not(.no-style){--devui-menu-item-gap: 0;background-color:var(--devui-base-bg, #ffffff);box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-shadow, rgba(0, 0, 0, .16));transform-origin:left top}.devui-menu-popover-panel .devui-menu-popover:not(.no-style) .devui-sub-menu-item .devui-sub-menu-item-arrow{transform:rotate(-90deg)}.devui-menu-popover-panel .devui-menu-popover:not(.no-style) .devui-sub-menu-item.active{background-color:initial}.devui-menu-popover-panel .devui-menu-popover:not(.no-style) .devui-sub-menu-item.active:hover:not(.disabled){color:var(--devui-brand-active-focus, #00196b)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, decorators: [{
type: Component,
args: [{ selector: 'd-menu, [dMenu]', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:root{--devui-menu-width: 100%;--devui-menu-item-height: 36px;--devui-menu-item-gap: 4px;--devui-menu-item-static-padding: 12px;--devui-menu-padding-size: 16px;--devui-menu-icon-gap: 10px}.devui-menu-item:not(.no-style){display:flex;align-items:center;column-gap:var(--devui-menu-icon-gap);height:var(--devui-menu-item-height);padding-inline:var(--devui-menu-padding-size) var(--devui-menu-item-static-padding);color:var(--devui-text-weak, #333333);cursor:pointer;margin-block:var(--devui-menu-item-gap);border-radius:var(--devui-border-radius, 2px);transition:background-color var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),color var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu-item:not(.no-style):not(.disabled,.active):hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-list-item-hover-text, #000000)}.devui-menu-item:not(.no-style):not(.disabled):active{background-color:var(--devui-list-item-selected-bg, #cedefd)}.devui-menu-item:not(.no-style) .devui-menu-item-icon .devui-icon-container{color:inherit}.devui-menu-item:not(.no-style)>a{display:block;width:100%;color:var(--devui-text-weak, #333333);text-decoration:none}.devui-menu-item:not(.no-style)>a:hover{color:inherit}.devui-menu-item:not(.no-style).active{color:var(--devui-brand-active, #0950de);background-color:var(--devui-list-item-active-bg, #cedefd);font-weight:700}.devui-menu-item:not(.no-style).active:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-menu-item:not(.no-style).disabled{color:var(--devui-disabled-text, #c2c2c2);cursor:not-allowed;-webkit-user-select:none;user-select:none}.devui-menu{width:var(--devui-menu-width);padding:16px 12px;transition:width var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-item{justify-content:space-between;margin-block:0}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-item .devui-sub-menu-item-title{display:flex;align-items:center;column-gap:var(--devui-menu-icon-gap);width:100%}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-item .devui-sub-menu-item-arrow{width:16px;transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-item.active{background-color:initial}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-item.active:hover:not(.disabled){color:var(--devui-brand-active-focus, #00196b);background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-children{overflow-y:hidden}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-children .devui-menu-item{padding-inline-start:calc(var(--devui-menu-padding-size) + (var(--devui-menu-icon-gap) + var(--devui-menu-padding-size)) * var(--level, 1))}.devui-menu .devui-sub-menu:not(.no-style) .devui-sub-menu-children::-webkit-scrollbar{height:0}.devui-menu .devui-sub-menu.open>.devui-sub-menu-item .devui-sub-menu-item-arrow{transform:rotate(-180deg);transform-origin:center}.devui-menu.collapsed{--devui-menu-width: 60px}.devui-menu.collapsed .devui-menu-item:not(.no-style){justify-content:center}.devui-menu.collapsed .devui-menu-item:not(.no-style) .devui-menu-item-icon{transform:scale(1.1)}.devui-menu.collapsed .devui-menu-item:not(.no-style) .devui-menu-item-icon+.devui-menu-item-name,.devui-menu.collapsed .devui-menu-item:not(.no-style) .devui-sub-menu-item-arrow{display:none}.devui-menu.collapsed .devui-sub-menu:not(.no-style) .devui-sub-menu-item .devui-sub-menu-item-title{justify-content:inherit}.devui-menu.collapsed .devui-sub-menu:not(.no-style) .devui-sub-menu-children{display:none}.devui-menu-popover-panel .devui-menu-popover:not(.no-style){--devui-menu-item-gap: 0;background-color:var(--devui-base-bg, #ffffff);box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-shadow, rgba(0, 0, 0, .16));transform-origin:left top}.devui-menu-popover-panel .devui-menu-popover:not(.no-style) .devui-sub-menu-item .devui-sub-menu-item-arrow{transform:rotate(-90deg)}.devui-menu-popover-panel .devui-menu-popover:not(.no-style) .devui-sub-menu-item.active{background-color:initial}.devui-menu-popover-panel .devui-menu-popover:not(.no-style) .devui-sub-menu-item.active:hover:not(.disabled){color:var(--devui-brand-active-focus, #00196b)}\n"] }]
}], propDecorators: { collapsed: [{
type: HostBinding,
args: ['class.collapsed']
}, {
type: Input
}], menuClass: [{
type: HostBinding,
args: ['class.devui-menu']
}], menuItemClick: [{
type: Output
}] } });
class SubMenuService {
constructor() {
this.parentSubMenuService = inject(SubMenuService, {
skipSelf: true,
optional: true
});
this.menuItems = [];
this.childState$ = new Subject();
this.parentPopoverOpen$ = new BehaviorSubject(false);
this.childActive$ = new Subject();
this.parentSubMenuActive$ = new BehaviorSubject(false);
this.cdr = inject(ChangeDetectorRef);
this.level = 1;
if (this.parentSubMenuService) {
this.level = this.parentSubMenuService.level + 1;
}
}
setChildActive() {
const active = this.menuItems.some(item => item.active);
this.childActive$.next(active);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubMenuService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubMenuService, decorators: [{
type: Injectable
}], ctorParameters: () => [] });
class MenuItemDirective {
constructor() {
this.subMenuHost = false;
this.noStyle = false;
this.disabled = false;
this.active = false;
this.menuItemClass = true;
this.itemClick = new EventEmitter();
this.titleHover = new EventEmitter();
this.cdr = inject(ChangeDetectorRef);
this.menuComponent = inject(MenuComponent, {
skipSelf: true
});
this.submenuService = inject(SubMenuService, {
skipSelf: true,
optional: true
});
}
hostMouseEnter(event) {
this.hostHover('enter');
}
hostMouseLeave(event) {
this.hostHover('leave');
}
hostClick(event) {
if (!this.disabled) {
this.itemClick.emit(event);
if (!this.subMenuHost) {
this.menuComponent.menuItemClick.emit({
item: this,
event
});
if (this.submenuService) {
this.submenuService.childState$.next('leave');
}
}
}
}
hostHover(type) {
if (!this.disabled && this.submenuService) {
this.titleHover.emit(type);
}
}
ngOnChanges({ active }) {
if (active && this.submenuService) {
if (active.firstChange) {
setTimeout(() => {
this.submenuService.setChildActive();
this.cdr.markForCheck();
}, 0);
}
else {
this.submenuService.setChildActive();
}
}
}
ngOnInit() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MenuItemDirective, selector: "[dMenuItem]", inputs: { subMenuHost: "subMenuHost", noStyle: "noStyle", disabled: "disabled", active: "active" }, outputs: { itemClick: "itemClick", titleHover: "titleHover" }, host: { listeners: { "mouseenter": "hostMouseEnter($event)", "mouseleave": "hostMouseLeave($event)", "click": "hostClick($event)" }, properties: { "class.no-style": "this.noStyle", "class.disabled": "this.disabled", "class.active": "this.active", "class.devui-menu-item": "this.menuItemClass" } }, exportAs: ["dMenuItem"], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuItemDirective, decorators: [{
type: Directive,
args: [{
selector: '[dMenuItem]',
exportAs: 'dMenuItem',
}]
}], propDecorators: { subMenuHost: [{
type: Input
}], noStyle: [{
type: HostBinding,
args: ['class.no-style']
}, {
type: Input
}], disabled: [{
type: HostBinding,
args: ['class.disabled']
}, {
type: Input
}], active: [{
type: HostBinding,
args: ['class.active']
}, {
type: Input
}], menuItemClass: [{
type: HostBinding,
args: ['class.devui-menu-item']
}], itemClick: [{
type: Output
}], titleHover: [{
type: Output
}], hostMouseEnter: [{
type: HostListener,
args: ['mouseenter', ['$event']]
}], hostMouseLeave: [{
type: HostListener,
args: ['mouseleave', ['$event']]
}], hostClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class SubMenuComponent {
set open(value) {
this._open = value;
}
get open() {
return this._open;
}
get titleContext() {
return {
$implicit: this.title instanceof TemplateRef ? '' : this.title,
open: this.open,
disabled: this.disabled,
icon: this.icon,
};
}
constructor() {
this.subMenuClass = true;
this.noStyle = false;
this._open = false;
this.disabled = false;
this.title = '';
this.icon = '';
this.openChange = new EventEmitter();
this.submenuService = inject(SubMenuService, { self: true });
this.parentMenu = inject(MenuComponent, { skipSelf: true });
this.cdr = inject(ChangeDetectorRef);
this.afterInitAnimate = true;
this.positions = [
{
originX: 'end',
originY: 'top',
overlayX: 'start',
overlayY: 'top',
offsetX: 4
}
];
this.childActive = false;
this.collapsed = false;
this.popoverOpen = false;
// 如果不在constructor里，takeUntilDestroyed就得传入 destroyRef = inject(DestroyRef);
this.parentMenu.collapsed$.pipe(takeUntilDestroyed()).subscribe(res => {
this.collapsed = res;
this.togglePopOpen(false);
this.cdr.markForCheck();
});
const currentActive$ = this.submenuService.childActive$;
combineLatest([this.submenuService.parentSubMenuActive$, currentActive$])
.pipe(map((([parentActive, currentActive]) => parentActive || currentActive)), distinctUntilChanged(), takeUntilDestroyed()).subscribe(res => {
this.toggleActive(res);
this.submenuService.parentSubMenuService?.parentSubMenuActive$?.next(res);
this.cdr.markForCheck();
});
const currentPopoverOpen$ = this.submenuService.childState$.pipe(map((value => value === 'enter')));
combineLatest([this.submenuService.parentPopoverOpen$, currentPopoverOpen$])
.pipe(filter(() => this.collapsed && !this.disabled), map((([parentPopoverOpen, currentPopoverOpen]) => {
return parentPopoverOpen || currentPopoverOpen;
})), auditTime(150), distinctUntilChanged(), takeUntilDestroyed()).subscribe(open => {
this.togglePopOpen(open);
this.submenuService.parentSubMenuService?.parentPopoverOpen$.next(open);
this.cdr.markForCheck();
});
}
ngOnInit() { }
ngAfterContentInit() {
if (this.menuItemDirectives?.length) {
this.submenuService.menuItems.push(...this.menuItemDirectives.toArray());
if (this.submenuService.parentSubMenuService) {
this.submenuService.parentSubMenuService.menuItems.push(...this.menuItemDirectives.toArray());
}
}
}
titleClick() {
if (this.disabled || this.collapsed) {
return;
}
this.toggleOpen(!this.open);
}
titleHover(type) {
this.submenuService.childState$.next(type);
}
toggleOpen(open) {
if (open !== this.open) {
this.open = open;
this.openChange.emit(open);
}
}
togglePopOpen(open) {
if (open !== this.popoverOpen) {
this.popoverOpen = open;
}
}
get expandState() {
return this.open ? 'expanded' : 'collapsed';
}
stateCls(base) {
return `${base} ${this.childActive ? 'active' : ''} ${this.disabled ? 'disabled' : ''} ${this.noStyle ? 'no-style' : ''}`;
}
toggleActive(active) {
if (active !== this.childActive) {
this.childActive = active;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SubMenuComponent, selector: "d-sub-menu, [dSubMenu]", inputs: { noStyle: "noStyle", open: "open", disabled: "disabled", title: "title", icon: "icon" }, outputs: { openChange: "openChange" }, host: { properties: { "class.devui-sub-menu": "this.subMenuClass", "class.no-style": "this.noStyle", "class.open": "this._open" } }, providers: [SubMenuService], queries: [{ propertyName: "menuItemDirectives", predicate: MenuItemDirective }], ngImport: i0, template: "<div\n [class]=\"stateCls('devui-sub-menu-item')\"\n dMenuItem\n [subMenuHost]=\"true\"\n (itemClick)=\"titleClick()\"\n (titleHover)=\"titleHover($event)\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n>\n <div class=\"devui-sub-menu-item-title\" role=\"menu\" *dStrTplOutlet=\"title; context: titleContext\">\n <ng-content select=\"[title]\" *ngIf=\"!title\" />\n <d-icon class=\"devui-menu-item-icon\" *ngIf=\"icon\" [disabled]=\"disabled\" [icon]=\"icon\" />\n <span class=\"devui-menu-item-name over-flow-ellipsis\" [title]=\"title\">{{ title }}</span>\n </div>\n <d-icon class=\"devui-sub-menu-item-arrow\" [disabled]=\"disabled\" icon=\"icon-select-arrow\" />\n</div>\n\n<ng-container *ngIf=\"collapsed; else defaultChildrenTpl\">\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPush\n cdkConnectedOverlayPanelClass=\"devui-menu-popover-panel\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"popoverOpen\"\n [cdkConnectedOverlayPositions]=\"positions\"\n cdkConnectedOverlayTransformOriginOn=\".devui-sub-menu\"\n >\n <div [class]=\"stateCls('devui-menu-popover')\" @scaleInOut (mouseenter)=\"titleHover('enter')\" (mouseleave)=\"titleHover('leave')\">\n <ng-template [ngTemplateOutlet]=\"contentTpl\" />\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #defaultChildrenTpl>\n <div class=\"devui-sub-menu-children\" [style.--level]=\"submenuService.level\" [@collapseMotion]=\"expandState\">\n <ng-template [ngTemplateOutlet]=\"contentTpl\" />\n </div>\n</ng-template>\n\n<ng-template #contentTpl>\n <ng-content />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "d-icon", inputs: ["icon", "operable", "disabled", "rotate", "color"] }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i4.StrTplOutletDirective, selector: "[dStrTplOutlet]", inputs: ["dStrTplOutlet", "dStrTplOutletContext"] }, { kind: "directive", type: MenuItemDirective, selector: "[dMenuItem]", inputs: ["subMenuHost", "noStyle", "disabled", "active"], outputs: ["itemClick", "titleHover"], exportAs: ["dMenuItem"] }], animations: [collapseMotion, scaleInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubMenuComponent, decorators: [{
type: Component,
args: [{ selector: 'd-sub-menu, [dSubMenu]', changeDetection: ChangeDetectionStrategy.OnPush, animations: [collapseMotion, scaleInOut], providers: [SubMenuService], template: "<div\n [class]=\"stateCls('devui-sub-menu-item')\"\n dMenuItem\n [subMenuHost]=\"true\"\n (itemClick)=\"titleClick()\"\n (titleHover)=\"titleHover($event)\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n>\n <div class=\"devui-sub-menu-item-title\" role=\"menu\" *dStrTplOutlet=\"title; context: titleContext\">\n <ng-content select=\"[title]\" *ngIf=\"!title\" />\n <d-icon class=\"devui-menu-item-icon\" *ngIf=\"icon\" [disabled]=\"disabled\" [icon]=\"icon\" />\n <span class=\"devui-menu-item-name over-flow-ellipsis\" [title]=\"title\">{{ title }}</span>\n </div>\n <d-icon class=\"devui-sub-menu-item-arrow\" [disabled]=\"disabled\" icon=\"icon-select-arrow\" />\n</div>\n\n<ng-container *ngIf=\"collapsed; else defaultChildrenTpl\">\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPush\n cdkConnectedOverlayPanelClass=\"devui-menu-popover-panel\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"popoverOpen\"\n [cdkConnectedOverlayPositions]=\"positions\"\n cdkConnectedOverlayTransformOriginOn=\".devui-sub-menu\"\n >\n <div [class]=\"stateCls('devui-menu-popover')\" @scaleInOut (mouseenter)=\"titleHover('enter')\" (mouseleave)=\"titleHover('leave')\">\n <ng-template [ngTemplateOutlet]=\"contentTpl\" />\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #defaultChildrenTpl>\n <div class=\"devui-sub-menu-children\" [style.--level]=\"submenuService.level\" [@collapseMotion]=\"expandState\">\n <ng-template [ngTemplateOutlet]=\"contentTpl\" />\n </div>\n</ng-template>\n\n<ng-template #contentTpl>\n <ng-content />\n</ng-template>\n" }]
}], ctorParameters: () => [], propDecorators: { menuItemDirectives: [{
type: ContentChildren,
args: [MenuItemDirective]
}], subMenuClass: [{
type: HostBinding,
args: ['class.devui-sub-menu']
}], noStyle: [{
type: HostBinding,
args: ['class.no-style']
}, {
type: Input
}], _open: [{
type: HostBinding,
args: ['class.open']
}], open: [{
type: Input
}], disabled: [{
type: Input
}], title: [{
type: Input
}], icon: [{
type: Input
}], openChange: [{
type: Output
}] } });
class MenuModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MenuModule, declarations: [MenuComponent,
MenuItemDirective,
SubMenuComponent], imports: [CommonModule, IconModule, OverlayModule, StrTplOutletModule], exports: [MenuComponent,
MenuItemDirective,
SubMenuComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuModule, imports: [CommonModule, IconModule, OverlayModule, StrTplOutletModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, IconModule, OverlayModule, StrTplOutletModule,],
exports: [
MenuComponent,
MenuItemDirective,
SubMenuComponent,
],
declarations: [
MenuComponent,
MenuItemDirective,
SubMenuComponent,
],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { MenuComponent, MenuItemDirective, MenuModule, SubMenuComponent };
//# sourceMappingURL=ng-devui-menu.mjs.map