ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
298 lines (292 loc) • 18.8 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewEncapsulation, Output, Input, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3$1 from 'ng-zorro-antd-mobile/flex';
import { FlexModule } from 'ng-zorro-antd-mobile/flex';
import * as i2$1 from 'ng-zorro-antd-mobile/list';
import { ListModule } from 'ng-zorro-antd-mobile/list';
import * as i3 from 'ng-zorro-antd-mobile/radio';
import { RadioModule } from 'ng-zorro-antd-mobile/radio';
import * as i4 from 'ng-zorro-antd-mobile/checkbox';
import { CheckboxModule } from 'ng-zorro-antd-mobile/checkbox';
import * as i5 from 'ng-zorro-antd-mobile/button';
import { ButtonModule } from 'ng-zorro-antd-mobile/button';
import { Subject } from 'rxjs';
import * as i1 from 'ng-zorro-antd-mobile/locale-provider';
import { LocaleProviderModule } from 'ng-zorro-antd-mobile/locale-provider';
import { takeUntil } from 'rxjs/operators';
import { FormsModule } from '@angular/forms';
class SubMenuComponent {
get subMenuPrefixCls() {
return this._subMenuPrefixCls;
}
set subMenuPrefixCls(v) {
this._subMenuPrefixCls = v;
}
get subMenuData() {
return this._subMenuData;
}
set subMenuData(v) {
this._subMenuData = v;
}
get multiSelect() {
return this._multiSelect;
}
set multiSelect(v) {
this._multiSelect = v;
}
constructor() {
this.prefixCls = 'am-sub-menu';
this.onSel = new EventEmitter();
}
onClick(dataItem) {
this.onSel.emit(dataItem);
}
selected(dataItem) {
return this.showSelect && (this.selItem.length > 0 && this.selItem.indexOf(dataItem.value) !== -1);
}
getClass(dataItem) {
let name = this.radioPrefixCls + '-item ';
name += this.selected(dataItem) ? this._subMenuPrefixCls + '-item-selected' : '';
name += dataItem.disabled ? this._subMenuPrefixCls + '-item-disabled' : '';
return name;
}
ngOnChanges(changes) {
this._subMenuData.map(item => {
item.checked = this.selected(item);
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SubMenuComponent, selector: "SubMenu, nzm-sub-menu", inputs: { radioPrefixCls: "radioPrefixCls", showSelect: "showSelect", selItem: "selItem", subMenuPrefixCls: "subMenuPrefixCls", subMenuData: "subMenuData", multiSelect: "multiSelect" }, outputs: { onSel: "onSel" }, usesOnChanges: true, ngImport: i0, template: "<List class=\"{{ subMenuPrefixCls }}\" style=\"padding: 0\">\n <ListItem\n *ngFor=\"let dataItem of subMenuData; let i = index\"\n key=\"i\"\n [className]=\"getClass(dataItem)\"\n [extra]=\"extra\"\n >\n {{ dataItem.label }}\n\n <ng-template #extra>\n <label\n Radio\n *ngIf=\"!multiSelect\"\n [checked]=\"dataItem.checked\"\n [disabled]=\"dataItem.disabled\"\n (onChange)=\"onClick(dataItem)\"\n >\n </label>\n <label\n Checkbox\n *ngIf=\"multiSelect\"\n [checked]=\"dataItem.checked\"\n [disabled]=\"dataItem.disabled\"\n (onChange)=\"onClick(dataItem)\"\n >\n </label>\n </ng-template>\n </ListItem>\n</List>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ListComponent, selector: "List, nzm-list", inputs: ["className", "renderHeader", "renderFooter"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "ListItem, nzm-list-item", inputs: ["extra", "className", "arrow", "multipleLine", "error", "wrap", "align", "platform", "disabled", "thumb"], outputs: ["onClick"] }, { kind: "component", type: i3.RadioComponent, selector: "[Radio], [nzm-radio]", inputs: ["name", "value", "checked", "disabled"], outputs: ["onChange"] }, { kind: "component", type: i4.CheckboxComponent, selector: "[Checkbox], [nzm-checkbox]", inputs: ["name", "value", "checked", "disabled"], outputs: ["onChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubMenuComponent, decorators: [{
type: Component,
args: [{ selector: 'SubMenu, nzm-sub-menu', encapsulation: ViewEncapsulation.None, template: "<List class=\"{{ subMenuPrefixCls }}\" style=\"padding: 0\">\n <ListItem\n *ngFor=\"let dataItem of subMenuData; let i = index\"\n key=\"i\"\n [className]=\"getClass(dataItem)\"\n [extra]=\"extra\"\n >\n {{ dataItem.label }}\n\n <ng-template #extra>\n <label\n Radio\n *ngIf=\"!multiSelect\"\n [checked]=\"dataItem.checked\"\n [disabled]=\"dataItem.disabled\"\n (onChange)=\"onClick(dataItem)\"\n >\n </label>\n <label\n Checkbox\n *ngIf=\"multiSelect\"\n [checked]=\"dataItem.checked\"\n [disabled]=\"dataItem.disabled\"\n (onChange)=\"onClick(dataItem)\"\n >\n </label>\n </ng-template>\n </ListItem>\n</List>\n" }]
}], ctorParameters: () => [], propDecorators: { onSel: [{
type: Output
}], radioPrefixCls: [{
type: Input
}], showSelect: [{
type: Input
}], selItem: [{
type: Input
}], subMenuPrefixCls: [{
type: Input
}], subMenuData: [{
type: Input
}], multiSelect: [{
type: Input
}] } });
class MenuComponent {
get data() {
return this._data;
}
set data(v) {
this._data = v;
this.initData();
}
constructor(_localeProviderService) {
this._localeProviderService = _localeProviderService;
this.prefixCls = 'am-menu';
this.subMenuPrefixCls = 'am-sub-menu';
this.radioPrefixCls = 'am-radio';
this.multiSelectMenuBtnsCls = 'am-multi-select-btns';
this.menuSelectContanerPrefixCls = 'am-menu-select-container';
this.locale = {
okText: '',
cancelText: ''
};
this._data = [];
this._unsubscribe$ = new Subject();
this.level = 2;
this.value = [];
this.height = document.documentElement.clientHeight / 2;
this.multiSelect = false;
this.onChange = new EventEmitter();
this.onOk = new EventEmitter();
this.onCancel = new EventEmitter();
}
onMenuOk() {
this.onOk.emit(this.value);
}
onMenuCancel() {
this.onCancel.emit();
}
getNewFsv() {
let firstValue = '';
if (this.value && this.value.length) {
firstValue = this.value[0];
}
else if (this._data && this._data.length && !this._data[0].isLeaf) {
firstValue = this._data[0].value;
}
return firstValue;
}
onClickFirstLevelItem(dataItem) {
this.firstLevelSelectValue = dataItem.value;
if (dataItem.isLeaf && this.onChange) {
this.onChange.emit([dataItem.value]);
}
this.initData();
}
onClickSubMenuItem(dataItem) {
this.value = this.getSelectValue(dataItem);
this.initData();
setTimeout(() => {
this.onChange.emit(this.value);
}, 300);
}
getSelectValue(dataItem) {
if (this.multiSelect) {
if (this.value && this.value.length > 0) {
if (this.level === 2 && this.value[0] !== this.firstLevelSelectValue) {
return [this.firstLevelSelectValue, [dataItem.value]];
}
else {
if (this.level == 1) {
const chosenValues = Array.from(this.value);
const existIndex = chosenValues.indexOf(dataItem.value);
if (existIndex === -1) {
chosenValues.push(dataItem.value);
}
else {
chosenValues.splice(existIndex, 1);
}
return chosenValues;
}
else {
const chosenValues = Array.from(this.value[1]);
const existIndex = chosenValues.indexOf(dataItem.value);
if (existIndex === -1) {
chosenValues.push(dataItem.value);
}
else {
chosenValues.splice(existIndex, 1);
}
return [this.firstLevelSelectValue, chosenValues];
}
}
}
else {
return this.level === 2 ? [this.firstLevelSelectValue, [dataItem.value]] : [dataItem.value];
}
}
return this.level === 2 ? [this.firstLevelSelectValue, dataItem.value] : [dataItem.value];
}
initData() {
this.subMenuData = this._data;
if (this.level === 2) {
let parent = this._data;
if (this.firstLevelSelectValue && this.firstLevelSelectValue !== '') {
parent = this._data.filter(dataItem => dataItem.value === this.firstLevelSelectValue);
}
if (parent[0] && parent[0].children && parent[0].isLeaf !== true) {
this.subMenuData = parent[0].children;
}
else {
this.subMenuData = [];
}
}
let subValue = (this.value && this.value.length > 0 && [...this.value]) || [];
if (this.level === 2 && subValue.length > 1) {
subValue.shift();
if (this.multiSelect) {
subValue = subValue[0];
}
}
this.subSelInitItem = this.subMenuData
.filter(dataItem => subValue.indexOf(dataItem.value) !== -1)
.map(item => {
return item.value;
});
const parentValue = this.value && this.value.length > 1 && this.level === 2 ? this.value[0] : null;
this.showSelect = true;
if (this.level === 2 && parentValue !== this.firstLevelSelectValue) {
this.showSelect = false;
}
}
getClass(dataItem) {
return this.dataItemSelected(dataItem) ? this.prefixCls + '-selected' : '';
}
dataItemSelected(dataItem) {
return dataItem.value === this.firstLevelSelectValue;
}
ngOnInit() {
this._localeProviderService.localeChange.pipe(takeUntil(this._unsubscribe$)).subscribe(_ => {
this.locale = this._localeProviderService.getLocaleSubObj('Menu');
});
this.firstLevelSelectValue = this.getNewFsv();
this.heightStyle = {
height: this.height + 'px'
};
this.initData();
}
ngOnDestroy() {
this._unsubscribe$.next();
this._unsubscribe$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MenuComponent, deps: [{ token: i1.LocaleProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: MenuComponent, selector: "Menu, nzm-menu", inputs: { data: "data", level: "level", value: "value", height: "height", multiSelect: "multiSelect" }, outputs: { onChange: "onChange", onOk: "onOk", onCancel: "onCancel" }, ngImport: i0, template: "<Flex class=\"{{ prefixCls }}\" [ngStyle]=\"heightStyle\" [direction]=\"'column'\" [align]=\"'stretch'\">\n <Flex class=\"{{ menuSelectContanerPrefixCls }}\" [align]=\"'start'\">\n <FlexItem *ngIf=\"level == 2\">\n <List role=\"tablist\">\n <ListItem\n role=\"tab\"\n *ngFor=\"let dataItem of data; let i = index\"\n [className]=\"getClass(dataItem)\"\n (click)=\"onClickFirstLevelItem(dataItem)\"\n >\n {{ dataItem.label }}\n </ListItem>\n </List>\n </FlexItem>\n\n <FlexItem role=\"tabpanel\" aria-hidden=\"false\" class=\"{{ menuSelectContanerPrefixCls }}-submenu\">\n <SubMenu\n [subMenuPrefixCls]=\"subMenuPrefixCls\"\n [radioPrefixCls]=\"radioPrefixCls\"\n [subMenuData]=\"subMenuData\"\n [selItem]=\"subSelInitItem\"\n [showSelect]=\"showSelect\"\n [multiSelect]=\"multiSelect\"\n (onSel)=\"onClickSubMenuItem($event)\"\n >\n </SubMenu>\n </FlexItem>\n </Flex>\n\n <div *ngIf=\"multiSelect\" class=\"{{ multiSelectMenuBtnsCls }}\">\n <a Button [className]=\"'am-multi-select-btns-btn'\" [inline]=\"true\" (onClick)=\"onMenuCancel()\">\n {{ locale.cancelText }}\n </a>\n <a Button [className]=\"'am-multi-select-btns-btn'\" [inline]=\"true\" [type]=\"'primary'\" (onClick)=\"onMenuOk()\">\n {{ locale.okText }}\n </a>\n </div>\n</Flex>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.FlexComponent, selector: "Flex, nzm-flex", inputs: ["direction", "wrap", "justify", "align", "alignContent"] }, { kind: "component", type: i3$1.FlexItemComponent, selector: "FlexItem, nzm-flex-item" }, { kind: "component", type: i2$1.ListComponent, selector: "List, nzm-list", inputs: ["className", "renderHeader", "renderFooter"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "ListItem, nzm-list-item", inputs: ["extra", "className", "arrow", "multipleLine", "error", "wrap", "align", "platform", "disabled", "thumb"], outputs: ["onClick"] }, { kind: "component", type: i5.ButtonComponent, selector: "[Button], nzm-button", inputs: ["type", "size", "disabled", "loading", "inline", "icon", "className"], outputs: ["onClick"] }, { kind: "component", type: SubMenuComponent, selector: "SubMenu, nzm-sub-menu", inputs: ["radioPrefixCls", "showSelect", "selItem", "subMenuPrefixCls", "subMenuData", "multiSelect"], outputs: ["onSel"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MenuComponent, decorators: [{
type: Component,
args: [{ selector: 'Menu, nzm-menu', encapsulation: ViewEncapsulation.None, template: "<Flex class=\"{{ prefixCls }}\" [ngStyle]=\"heightStyle\" [direction]=\"'column'\" [align]=\"'stretch'\">\n <Flex class=\"{{ menuSelectContanerPrefixCls }}\" [align]=\"'start'\">\n <FlexItem *ngIf=\"level == 2\">\n <List role=\"tablist\">\n <ListItem\n role=\"tab\"\n *ngFor=\"let dataItem of data; let i = index\"\n [className]=\"getClass(dataItem)\"\n (click)=\"onClickFirstLevelItem(dataItem)\"\n >\n {{ dataItem.label }}\n </ListItem>\n </List>\n </FlexItem>\n\n <FlexItem role=\"tabpanel\" aria-hidden=\"false\" class=\"{{ menuSelectContanerPrefixCls }}-submenu\">\n <SubMenu\n [subMenuPrefixCls]=\"subMenuPrefixCls\"\n [radioPrefixCls]=\"radioPrefixCls\"\n [subMenuData]=\"subMenuData\"\n [selItem]=\"subSelInitItem\"\n [showSelect]=\"showSelect\"\n [multiSelect]=\"multiSelect\"\n (onSel)=\"onClickSubMenuItem($event)\"\n >\n </SubMenu>\n </FlexItem>\n </Flex>\n\n <div *ngIf=\"multiSelect\" class=\"{{ multiSelectMenuBtnsCls }}\">\n <a Button [className]=\"'am-multi-select-btns-btn'\" [inline]=\"true\" (onClick)=\"onMenuCancel()\">\n {{ locale.cancelText }}\n </a>\n <a Button [className]=\"'am-multi-select-btns-btn'\" [inline]=\"true\" [type]=\"'primary'\" (onClick)=\"onMenuOk()\">\n {{ locale.okText }}\n </a>\n </div>\n</Flex>\n" }]
}], ctorParameters: () => [{ type: i1.LocaleProviderService }], propDecorators: { data: [{
type: Input
}], level: [{
type: Input
}], value: [{
type: Input
}], height: [{
type: Input
}], multiSelect: [{
type: Input
}], onChange: [{
type: Output
}], onOk: [{
type: Output
}], onCancel: [{
type: Output
}] } });
class MenuModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: MenuModule, declarations: [MenuComponent, SubMenuComponent], imports: [CommonModule,
FlexModule,
ListModule,
RadioModule,
CheckboxModule,
ButtonModule,
LocaleProviderModule,
FormsModule], exports: [MenuComponent, SubMenuComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MenuModule, imports: [CommonModule,
FlexModule,
ListModule,
RadioModule,
CheckboxModule,
ButtonModule,
LocaleProviderModule,
FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MenuModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
FlexModule,
ListModule,
RadioModule,
CheckboxModule,
ButtonModule,
LocaleProviderModule,
FormsModule
],
exports: [MenuComponent, SubMenuComponent],
declarations: [MenuComponent, SubMenuComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { MenuComponent, MenuModule, SubMenuComponent };
//# sourceMappingURL=ng-zorro-antd-mobile-menu.mjs.map