ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
283 lines (276 loc) • 14.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, HostBinding, ContentChildren, forwardRef, HostListener, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { style, state, animate, transition, trigger } from '@angular/animations';
import { isTemplateRef } from 'ng-zorro-antd-mobile/core';
import { WhiteSpaceModule } from 'ng-zorro-antd-mobile/white-space';
class AccordionService {
constructor() {
this.accordion = false;
}
getComponent(component) {
this.accordion = component.accordion;
this.component = component;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccordionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccordionService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccordionService, decorators: [{
type: Injectable
}] });
class AccordionGroupComponent {
constructor(_accordionService, _cdr) {
this._accordionService = _accordionService;
this._cdr = _cdr;
this.isShowChild = true;
this.isOpened = false;
this.disabled = false;
this.onOpen = new EventEmitter();
this.onClose = new EventEmitter();
this.onChange = new EventEmitter();
this.isTemplateRef = isTemplateRef;
this.amItem = true;
this.isActive = this.isOpened;
this.addon = true;
}
checkAndToggle() {
this.toggle();
}
get slide() {
return this.isOpened ? 'down' : 'up';
}
toggle() {
if (this.disabled) {
return;
}
this.isShowChild = true;
const isOpenedBeforeWeChange = this.isOpened;
if (this._accordionService.accordion) {
this._accordionService.component.closeAll();
}
this.isOpened = !isOpenedBeforeWeChange;
if (this.isOpened) {
this.onOpen.emit();
}
else {
this.onClose.emit();
}
this.onChange.emit(this.isOpened);
}
openOnInitialization() {
setTimeout(() => {
this.isOpened = true;
this._cdr.detectChanges();
}, 0);
}
slideAnimationDoen(event) {
if (event.fromState === 'down' && event.toState === 'up') {
setTimeout(() => {
this.isShowChild = false;
}, 0);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccordionGroupComponent, deps: [{ token: AccordionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AccordionGroupComponent, selector: "AccordionPanel, nzm-accordion-panel", inputs: { key: "key", header: "header", isOpened: "isOpened", disabled: "disabled" }, outputs: { onOpen: "onOpen", onClose: "onClose", onChange: "onChange" }, host: { properties: { "class.am-accordion-item": "this.amItem", "class.am-accordion-item-active": "this.isActive", "class.addon": "this.addon" } }, ngImport: i0, template: "<div\n role=\"tab\"\n class=\"am-accordion-header\"\n data-scale=\"true\"\n [attr.aria-expanded]=\"isOpened\"\n (click)=\"checkAndToggle()\"\n>\n <i class=\"arrow\"></i>\n <ng-container *ngIf=\"!isTemplateRef(header)\">{{ header }}</ng-container>\n <ng-template *ngIf=\"isTemplateRef(header)\" [ngTemplateOutlet]=\"header\"></ng-template>\n</div>\n<div\n role=\"tabpanel\"\n class=\"am-accordion-content\"\n [ngClass]=\"{ 'am-accordion-content-active': isOpened }\"\n [@slide]=\"slide\"\n (@slide.done)=\"slideAnimationDoen($event)\"\n>\n <div *ngIf=\"isShowChild\" class=\"am-accordion-content-box\">\n <ng-content></ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
trigger('slide', [
state('up', style({ height: 0 })),
state('down', style({ height: '*' })),
transition('down => up', [animate(200, style({ height: 0 }))]),
transition('up => down', [
animate(200, style({
height: '*'
}))
])
])
], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccordionGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'AccordionPanel, nzm-accordion-panel', encapsulation: ViewEncapsulation.None, animations: [
trigger('slide', [
state('up', style({ height: 0 })),
state('down', style({ height: '*' })),
transition('down => up', [animate(200, style({ height: 0 }))]),
transition('up => down', [
animate(200, style({
height: '*'
}))
])
])
], template: "<div\n role=\"tab\"\n class=\"am-accordion-header\"\n data-scale=\"true\"\n [attr.aria-expanded]=\"isOpened\"\n (click)=\"checkAndToggle()\"\n>\n <i class=\"arrow\"></i>\n <ng-container *ngIf=\"!isTemplateRef(header)\">{{ header }}</ng-container>\n <ng-template *ngIf=\"isTemplateRef(header)\" [ngTemplateOutlet]=\"header\"></ng-template>\n</div>\n<div\n role=\"tabpanel\"\n class=\"am-accordion-content\"\n [ngClass]=\"{ 'am-accordion-content-active': isOpened }\"\n [@slide]=\"slide\"\n (@slide.done)=\"slideAnimationDoen($event)\"\n>\n <div *ngIf=\"isShowChild\" class=\"am-accordion-content-box\">\n <ng-content></ng-content>\n </div>\n</div>\n" }]
}], ctorParameters: () => [{ type: AccordionService }, { type: i0.ChangeDetectorRef }], propDecorators: { key: [{
type: Input
}], header: [{
type: Input
}], isOpened: [{
type: Input
}], disabled: [{
type: Input
}], onOpen: [{
type: Output
}], onClose: [{
type: Output
}], onChange: [{
type: Output
}], amItem: [{
type: HostBinding,
args: ['class.am-accordion-item']
}], isActive: [{
type: HostBinding,
args: ['class.am-accordion-item-active']
}], addon: [{
type: HostBinding,
args: ['class.addon']
}] } });
class AccordionComponent {
click() {
let result = [];
this.groups.toArray().forEach(group => {
if (group.isOpened) {
if (this.accordion) {
result = group.key;
}
else {
result.push(group.key);
}
}
});
this.onChange.emit(result);
}
constructor(_accordionService) {
this._accordionService = _accordionService;
this.isFirstChange = true;
this.expandAll = false;
this.openAnimation = {};
this.accordion = false;
this.onChange = new EventEmitter();
this.amAccordion = true;
this._accordionService.getComponent(this);
}
closeAll() {
this.groups.toArray().forEach(group => {
group.isOpened = false;
});
}
init() {
if (this.expandAll && this.groups && this.groups.length > 0) {
this._oldGroups = this.groups.toArray();
this._oldGroups.forEach(group => {
group.openOnInitialization();
});
this._subscription = this.groups.changes.subscribe(change => {
const newGroups = this.groups.toArray().filter(group => {
return this._oldGroups.indexOf(group) === -1;
});
newGroups.forEach(group => {
group.openOnInitialization();
});
this._oldGroups = this.groups.toArray();
});
}
let currentActiveKey = [];
if (this.activeKey && this.activeKey.length > 0) {
currentActiveKey = this.toArray(this.activeKey);
if (this.accordion) {
currentActiveKey = currentActiveKey.slice(0, 1);
}
}
else if (this.defaultActiveKey) {
currentActiveKey = [this.defaultActiveKey];
}
if (this.groups && this.groups.length > 0) {
this.groups.forEach((group, index) => {
currentActiveKey.forEach(key => {
if (index === parseInt(key, 0)) {
setTimeout(() => {
group.isOpened = true;
group.openOnInitialization();
}, 0);
}
});
});
}
}
toArray(activeKey) {
let currentActiveKey = activeKey;
if (!Array.isArray(currentActiveKey)) {
currentActiveKey = currentActiveKey !== undefined && currentActiveKey !== '' ? [currentActiveKey] : [];
}
return currentActiveKey;
}
ngOnChanges(changes) {
if (changes.accordion) {
this._accordionService.getComponent(this);
}
if (changes.expandAll || changes.accordion) {
this.init();
}
}
ngAfterContentInit() {
if (this.groups && this.groups.length > 0) {
this.init();
}
else {
this.groupsSubscription = this.groups.changes.subscribe(group => {
if (this.isFirstChange) {
this.init();
}
this.isFirstChange = false;
});
}
}
ngOnDestroy() {
if (this._subscription) {
this._subscription.unsubscribe();
}
if (this.groupsSubscription) {
this.groupsSubscription.unsubscribe();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccordionComponent, deps: [{ token: AccordionService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AccordionComponent, selector: "Accordion, nzm-accordion", inputs: { expandAll: "expandAll", activeKey: "activeKey", defaultActiveKey: "defaultActiveKey", openAnimation: "openAnimation", accordion: "accordion" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "click()" }, properties: { "class.am-accordion": "this.amAccordion" } }, providers: [AccordionService], queries: [{ propertyName: "groups", predicate: i0.forwardRef(() => AccordionGroupComponent) }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'Accordion, nzm-accordion', providers: [AccordionService], template: "<ng-content></ng-content>\n" }]
}], ctorParameters: () => [{ type: AccordionService }], propDecorators: { groups: [{
type: ContentChildren,
args: [forwardRef(() => AccordionGroupComponent)]
}], expandAll: [{
type: Input
}], activeKey: [{
type: Input
}], defaultActiveKey: [{
type: Input
}], openAnimation: [{
type: Input
}], accordion: [{
type: Input
}], onChange: [{
type: Output
}], amAccordion: [{
type: HostBinding,
args: ['class.am-accordion']
}], click: [{
type: HostListener,
args: ['click']
}] } });
class AccordionModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: AccordionModule, declarations: [AccordionComponent, AccordionGroupComponent], imports: [CommonModule, WhiteSpaceModule], exports: [AccordionComponent, AccordionGroupComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccordionModule, imports: [CommonModule, WhiteSpaceModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccordionModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, WhiteSpaceModule],
declarations: [AccordionComponent, AccordionGroupComponent],
exports: [AccordionComponent, AccordionGroupComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AccordionComponent, AccordionGroupComponent, AccordionModule, AccordionService };
//# sourceMappingURL=ng-zorro-antd-mobile-accordion.mjs.map