ng-devui
Version:
DevUI components based on Angular
39 lines • 16.4 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as i0 from "@angular/core";
export 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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9kZXZ1aS9tZW51L21lbnUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixXQUFXLEVBQ1gsS0FBSyxFQUlMLE1BQU0sRUFFTixpQkFBaUIsRUFDbEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFVdkMsTUFBTSxPQUFPLGFBQWE7SUFQMUI7UUFRMkMsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUMxQixjQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ2xELHFCQUFnQixHQUFHLElBQUksZUFBZSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUN2RCxlQUFVLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFlBQVksRUFBRSxDQUFDO1FBRS9CLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQXFCLENBQUM7S0FjMUU7SUFaQyxXQUFXLENBQUMsRUFBRSxTQUFTLEVBQWlCO1FBQ3RDLElBQUksU0FBUyxFQUFFLENBQUM7WUFDZCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUNyRCxDQUFDO0lBQ0gsQ0FBQztJQUVELFFBQVEsS0FBSyxDQUFDO0lBRWQsV0FBVztRQUNULElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDbEMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ25DLENBQUM7K0dBbkJVLGFBQWE7bUdBQWIsYUFBYSxrUUFMZCxnQkFBZ0I7OzRGQUtmLGFBQWE7a0JBUHpCLFNBQVM7K0JBQ0UsaUJBQWlCLFlBQ2pCLGdCQUFnQixtQkFDVCx1QkFBdUIsQ0FBQyxNQUFNLGlCQUVoQyxpQkFBaUIsQ0FBQyxJQUFJOzhCQUdJLFNBQVM7c0JBQWpELFdBQVc7dUJBQUMsaUJBQWlCOztzQkFBRyxLQUFLO2dCQUNMLFNBQVM7c0JBQXpDLFdBQVc7dUJBQUMsa0JBQWtCO2dCQUlaLGFBQWE7c0JBQS9CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgT3V0cHV0LFxuICBTaW1wbGVDaGFuZ2VzLFxuICBWaWV3RW5jYXBzdWxhdGlvblxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgTWVudUl0ZW1DbGlja1R5cGUgfSBmcm9tICcuL3R5cGUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkLW1lbnUsIFtkTWVudV0nLFxuICB0ZW1wbGF0ZTogJzxuZy1jb250ZW50IC8+JyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHN0eWxlVXJsczogWycuL21lbnUuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgfSlcbmV4cG9ydCBjbGFzcyBNZW51Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gIEBIb3N0QmluZGluZygnY2xhc3MuY29sbGFwc2VkJykgQElucHV0KCkgY29sbGFwc2VkID0gZmFsc2U7XG4gIEBIb3N0QmluZGluZygnY2xhc3MuZGV2dWktbWVudScpIG1lbnVDbGFzcyA9IHRydWU7XG4gIGNvbGxhcHNlZFN1YmplY3QgPSBuZXcgQmVoYXZpb3JTdWJqZWN0KHRoaXMuY29sbGFwc2VkKTtcbiAgY29sbGFwc2VkJCA9IHRoaXMuY29sbGFwc2VkU3ViamVjdC5hc09ic2VydmFibGUoKTtcblxuICBAT3V0cHV0KCkgcmVhZG9ubHkgbWVudUl0ZW1DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8TWVudUl0ZW1DbGlja1R5cGU+KCk7XG5cbiAgbmdPbkNoYW5nZXMoeyBjb2xsYXBzZWQgfTogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjb2xsYXBzZWQpIHtcbiAgICAgIHRoaXMuY29sbGFwc2VkU3ViamVjdC5uZXh0KGNvbGxhcHNlZC5jdXJyZW50VmFsdWUpO1xuICAgIH1cbiAgfVxuXG4gIG5nT25Jbml0KCkgeyB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5jb2xsYXBzZWRTdWJqZWN0Lm5leHQoZmFsc2UpO1xuICAgIHRoaXMuY29sbGFwc2VkU3ViamVjdC5jb21wbGV0ZSgpO1xuICB9XG59XG4iXX0=