ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
628 lines (620 loc) • 38.5 kB
JavaScript
import * as i0 from '@angular/core';
import { TemplateRef, Component, ViewChild, Input, ViewEncapsulation, HostBinding, ContentChildren, EventEmitter, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/cdk/observers';
import { ObserversModule } from '@angular/cdk/observers';
class TabPaneComponent {
get title() {
return this._title;
}
set title(value) {
this.isTitleString = !(value instanceof TemplateRef);
this._title = value;
}
constructor() {
this.isTitleString = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TabPaneComponent, selector: "TabPane, nzm-tab-pane", inputs: { title: "title" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabPaneComponent, decorators: [{
type: Component,
args: [{ selector: 'TabPane, nzm-tab-pane', template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], ctorParameters: () => [], propDecorators: { content: [{
type: ViewChild,
args: ['content', { static: true }]
}], title: [{
type: Input
}] } });
class TabPaneBodyComponent {
get prerender() {
return this._prerender;
}
set prerender(value) {
this._prerender = value;
if (value) {
this.loaded = true;
}
}
get wrapActive() {
return this.active;
}
get wrapInactive() {
return !this.active;
}
constructor() {
this._prerender = false;
this.active = false;
this.loaded = false;
this.paneWrap = true;
}
ngOnInit() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabPaneBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TabPaneBodyComponent, selector: "[tab-pane-body]", inputs: { active: "active", loaded: "loaded", content: "content", prerender: "prerender" }, host: { properties: { "class.am-tabs-pane-wrap": "this.paneWrap", "class.am-tabs-pane-wrap-active": "this.wrapActive", "class.am-tabs-pane-wrap-inactive": "this.wrapInactive" } }, ngImport: i0, template: "<ng-container *ngIf=\"loaded || prerender\">\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabPaneBodyComponent, decorators: [{
type: Component,
args: [{ selector: '[tab-pane-body]', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"loaded || prerender\">\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n</ng-container>\n" }]
}], ctorParameters: () => [], propDecorators: { active: [{
type: Input
}], loaded: [{
type: Input
}], content: [{
type: Input
}], prerender: [{
type: Input
}], paneWrap: [{
type: HostBinding,
args: ['class.am-tabs-pane-wrap']
}], wrapActive: [{
type: HostBinding,
args: ['class.am-tabs-pane-wrap-active']
}], wrapInactive: [{
type: HostBinding,
args: ['class.am-tabs-pane-wrap-inactive']
}] } });
class DefaultTabBarComponent {
get activeTab() {
return this.selectedKey;
}
set activeTab(index) {
if (index !== this.selectedKey) {
this.selectedKey = index;
if (this.tabTitles && this.tabTitles.length > 0) {
this.setTabBarStyleCenter();
this.setInkBarStatus(this.selectedKey);
}
}
}
constructor(_renderer, _ref) {
this._renderer = _renderer;
this._ref = _ref;
this.prefixCls = 'am-tabs-default-bar';
this.inkBarStyle = {};
this.tabsBarStyle = {};
this.showPrev = false;
this.showNext = false;
this.selectedKey = 0;
this.inkBarOffSet = 0;
this.inkBarLength = 0;
this.tabBarNavSwipedPosition = 0;
this.tabBarNavSwipingPosition = 0;
this._startPosition = 0;
this.page = 5;
this.animated = true;
this.tabBarBackgroundColor = '#FFF';
this.tabTitleSize = 0;
this.tabBarPosition = 'top';
this.tabBarWrap = true;
this.getTabSize = (page, tabLength) => 100 / Math.min(page, tabLength);
}
onTouchStart(event) {
if ((this.tabTitleSize > 0 &&
this.tabTitleSize * this.tabTitles.length >
('top' === this.tabBarPosition || 'bottom' === this.tabBarPosition
? this.tabsBarSwipe.nativeElement.offsetWidth
: this.tabsBarSwipe.nativeElement.offsetHeight)) ||
(this.tabTitleSize <= 0 && this.page < this.tabTitles.length)) {
if ('top' === this.tabBarPosition || 'bottom' === this.tabBarPosition) {
this._startPosition =
event && event.changedTouches && event.changedTouches[0] && event.changedTouches[0].clientX;
}
else {
this._startPosition =
event && event.changedTouches && event.changedTouches[0] && event.changedTouches[0].clientY;
}
}
}
onTouchMove(event) {
event.preventDefault();
event.stopPropagation();
if ((this.tabTitleSize > 0 &&
this.tabTitleSize * this.tabTitles.length >
('top' === this.tabBarPosition || 'bottom' === this.tabBarPosition
? this.tabsBarSwipe.nativeElement.offsetWidth
: this.tabsBarSwipe.nativeElement.offsetHeight)) ||
(this.tabTitleSize <= 0 && this.page < this.tabTitles.length)) {
if ('top' === this.tabBarPosition || 'bottom' === this.tabBarPosition) {
this.setTabBarNavSwipingPosition(event.changedTouches[0].clientX - this._startPosition, this.tabTitles.first.nativeElement.offsetWidth, this.tabsBarSwipe.nativeElement.offsetWidth);
this.tabsBarStyle = {
transition: '0ms',
transform: 'translate3d(' + this.tabBarNavSwipingPosition + 'px, 0px, 0px)',
webkitTransform: 'translate3d(' + this.tabBarNavSwipingPosition + 'px, 0px, 0px)'
};
}
else {
this.setTabBarNavSwipingPosition(event.changedTouches[0].clientY - this._startPosition, this.tabTitles.first.nativeElement.offsetHeight, this.tabsBarSwipe.nativeElement.offsetHeight);
this.tabsBarStyle = {
transition: '0ms',
transform: 'translate3d(0, ' + this.tabBarNavSwipingPosition + 'px, 0px)',
webkitTransform: 'translate3d(0, ' + this.tabBarNavSwipingPosition + 'px, 0px)'
};
}
}
}
onTouchEnd() {
if ((this.tabTitleSize > 0 &&
this.tabTitleSize * this.tabTitles.length >
('top' === this.tabBarPosition || 'bottom' === this.tabBarPosition
? this.tabsBarSwipe.nativeElement.offsetWidth
: this.tabsBarSwipe.nativeElement.offsetHeight)) ||
(this.tabTitleSize <= 0 && this.page < this.tabTitles.length)) {
this.tabBarNavSwipedPosition = this.tabBarNavSwipingPosition;
}
}
onContentChange() {
this.setTabsStyle();
this.setInkBarStatus(this.selectedKey);
}
ngAfterContentInit() {
this.setTabsStyle();
this.setTabBarStyleCenter();
this.setInkBarStatus(this.selectedKey);
}
setTabsStyle() {
if (this.tabTitles && this.tabTitles.length > 0) {
if ('top' === this.tabBarPosition || 'bottom' === this.tabBarPosition) {
this.tabTitles.forEach((tabTitle) => {
this._renderer.setStyle(tabTitle.nativeElement, 'width', this.tabTitleSize > 0 ? this.tabTitleSize + 'px' : this.getTabSize(this.page, this.tabTitles.length) + '%');
});
}
else {
this.tabTitles.forEach((tabTitle) => {
this._renderer.setStyle(tabTitle.nativeElement, 'height', this.tabTitleSize > 0 ? this.tabTitleSize + 'px' : this.getTabSize(this.page, this.tabTitles.length) + '%');
});
}
}
}
setTabBarStyleCenter() {
if ('top' === this.tabBarPosition || 'bottom' === this.tabBarPosition) {
this.setTabBarNavSwipedPosition(this.tabTitleSize > 0
? this.tabTitleSize
: this.tabsBarSwipe.nativeElement.offsetWidth / Math.min(this.tabTitles.length, this.page), this.tabsBarSwipe.nativeElement.offsetWidth);
this.tabsBarStyle = {
transform: 'translate3d(' + this.tabBarNavSwipedPosition + 'px, 0px, 0px)',
webkitTransform: 'translate3d(' + this.tabBarNavSwipedPosition + ', 0px, 0px)'
};
}
else {
this.setTabBarNavSwipedPosition(this.tabTitleSize > 0
? this.tabTitleSize
: this.tabsBarSwipe.nativeElement.offsetHeight / Math.min(this.tabTitles.length, this.page), this.tabsBarSwipe.nativeElement.offsetHeight);
this.tabsBarStyle = {
transform: 'translate3d(0, ' + this.tabBarNavSwipedPosition + 'px, 0px)',
webkitTransform: 'translate3d(0, ' + this.tabBarNavSwipedPosition + 'px, 0px)'
};
}
}
setInkBarStatus(key) {
if (this.tabTitles && this.tabTitles.length > 0) {
if ('top' === this.tabBarPosition || 'bottom' === this.tabBarPosition) {
this.inkBarOffSet = this.tabTitles.toArray()[key].nativeElement.offsetLeft;
this.inkBarLength = this.tabTitles.toArray()[key].nativeElement.style.width;
this.inkBarStyle = {
width: this.inkBarLength,
left: this.tabTitleSize > 0
? this.selectedKey * this.tabTitleSize + 'px'
: (this.selectedKey * 100) / Math.min(this.tabTitles.length, this.page) + '%'
};
Object.assign(this.inkBarStyle, this.tabBarUnderlineStyle);
}
else {
this.inkBarOffSet = this.tabTitles.toArray()[key].nativeElement.offsetTop;
this.inkBarLength = this.tabTitles.toArray()[key].nativeElement.style.height;
this.inkBarStyle = {
height: this.inkBarLength,
top: this.tabTitleSize > 0
? this.selectedKey * this.tabTitleSize + 'px'
: (this.selectedKey * 100) / Math.min(this.tabTitles.length, this.page) + '%'
};
Object.assign(this.inkBarStyle, this.tabBarUnderlineStyle);
}
this._ref.detectChanges();
}
}
setTabBarNavSwipingPosition(swipingDistance, swipingItemLength, viewportLength) {
if (this.tabBarNavSwipedPosition + swipingDistance > 0) {
this.tabBarNavSwipingPosition = 0;
}
else if (this.tabBarNavSwipedPosition + swipingDistance <
viewportLength - swipingItemLength * this.tabTitles.length) {
this.tabBarNavSwipingPosition = viewportLength - swipingItemLength * this.tabTitles.length;
this.showNext = false;
}
else {
this.tabBarNavSwipingPosition = this.tabBarNavSwipedPosition + swipingDistance;
this.showNext = true;
}
if (this.tabBarNavSwipingPosition < 0) {
this.showPrev = true;
}
else {
this.showPrev = false;
}
}
setTabBarNavSwipedPosition(swipingItemLength, viewportLength) {
if (this.selectedKey * swipingItemLength + this.tabBarNavSwipedPosition <= 0) {
if (0 === this.selectedKey) {
this.tabBarNavSwipedPosition = 0;
}
else {
this.tabBarNavSwipedPosition = (1 - this.selectedKey) * swipingItemLength;
}
}
else if ((this.selectedKey + 1) * swipingItemLength >= viewportLength - this.tabBarNavSwipedPosition) {
if (this.tabTitles.length - 1 === this.selectedKey) {
this.tabBarNavSwipedPosition = (viewportLength / swipingItemLength - this.selectedKey - 1) * swipingItemLength;
}
else {
this.tabBarNavSwipedPosition = (viewportLength / swipingItemLength - this.selectedKey - 2) * swipingItemLength;
}
}
if (this.tabBarNavSwipedPosition < 0) {
this.showPrev = true;
}
else {
this.showPrev = false;
}
if (this.tabBarNavSwipedPosition + swipingItemLength * this.tabTitles.length - viewportLength > 0) {
this.showNext = true;
}
else {
this.showNext = false;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DefaultTabBarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DefaultTabBarComponent, selector: "DefaultTabBar, nzm-default-tab-bar", inputs: { page: "page", animated: "animated", tabBarUnderlineStyle: "tabBarUnderlineStyle", tabBarBackgroundColor: "tabBarBackgroundColor", tabTitleSize: "tabTitleSize", tabBarPosition: "tabBarPosition", activeTab: "activeTab" }, host: { properties: { "class.am-tabs-tab-bar-wrap": "this.tabBarWrap" } }, queries: [{ propertyName: "tabTitles", predicate: ["TabTitle"] }], viewQueries: [{ propertyName: "tabsBarSwipe", first: true, predicate: ["TabsBarSwipe"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"{{ prefixCls }} {{ prefixCls }}-{{ tabBarPosition }}\"\n [ngClass]=\"{ 'am-tabs-default-bar-animated': animated }\"\n [ngStyle]=\"{ backgroundColor: tabBarBackgroundColor || '#FFF' }\"\n>\n <div *ngIf=\"showPrev\" class=\"{{ prefixCls }}-prevpage\"></div>\n <div\n #TabsBarSwipe\n class=\"{{ prefixCls }}-content\"\n [ngStyle]=\"tabsBarStyle\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd()\"\n (cdkObserveContent)=\"onContentChange()\"\n >\n <ng-content></ng-content>\n <div class=\"{{ prefixCls }}-underline\" [ngStyle]=\"inkBarStyle\"></div>\n </div>\n <div *ngIf=\"showNext\" class=\"{{ prefixCls }}-nextpage\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DefaultTabBarComponent, decorators: [{
type: Component,
args: [{ selector: 'DefaultTabBar, nzm-default-tab-bar', template: "<div\n class=\"{{ prefixCls }} {{ prefixCls }}-{{ tabBarPosition }}\"\n [ngClass]=\"{ 'am-tabs-default-bar-animated': animated }\"\n [ngStyle]=\"{ backgroundColor: tabBarBackgroundColor || '#FFF' }\"\n>\n <div *ngIf=\"showPrev\" class=\"{{ prefixCls }}-prevpage\"></div>\n <div\n #TabsBarSwipe\n class=\"{{ prefixCls }}-content\"\n [ngStyle]=\"tabsBarStyle\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd()\"\n (cdkObserveContent)=\"onContentChange()\"\n >\n <ng-content></ng-content>\n <div class=\"{{ prefixCls }}-underline\" [ngStyle]=\"inkBarStyle\"></div>\n </div>\n <div *ngIf=\"showNext\" class=\"{{ prefixCls }}-nextpage\"></div>\n</div>\n" }]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { tabTitles: [{
type: ContentChildren,
args: ['TabTitle']
}], tabsBarSwipe: [{
type: ViewChild,
args: ['TabsBarSwipe', { static: true }]
}], page: [{
type: Input
}], animated: [{
type: Input
}], tabBarUnderlineStyle: [{
type: Input
}], tabBarBackgroundColor: [{
type: Input
}], tabTitleSize: [{
type: Input
}], tabBarPosition: [{
type: Input
}], activeTab: [{
type: Input
}], tabBarWrap: [{
type: HostBinding,
args: ['class.am-tabs-tab-bar-wrap']
}] } });
class TabsComponent {
get activeTab() {
return this.selectedKey;
}
set activeTab(value) {
this.keyToSelect = value;
}
get tabBarPosition() {
return this._tabBarPosition;
}
set tabBarPosition(position) {
this._tabBarPosition = position;
switch (position) {
case 'top':
this.amTabsTop = true;
this.amTabsLeft = false;
this.amTabsRight = false;
this.amTabsBottom = false;
break;
case 'left':
this.amTabsTop = false;
this.amTabsLeft = true;
this.amTabsRight = false;
this.amTabsBottom = false;
break;
case 'bottom':
this.amTabsTop = false;
this.amTabsLeft = false;
this.amTabsRight = false;
this.amTabsBottom = true;
break;
case 'right':
this.amTabsTop = false;
this.amTabsLeft = false;
this.amTabsRight = true;
this.amTabsBottom = false;
break;
default:
break;
}
}
get tabDirection() {
return this._tabDirection;
}
set tabDirection(direction) {
this._tabDirection = direction;
switch (direction) {
case 'horizontal':
this.amTabsHorizontal = true;
this.amTabsVertical = false;
break;
case 'vertical':
this.amTabsHorizontal = false;
this.amTabsVertical = true;
break;
default:
break;
}
}
constructor() {
this.prefixCls = 'am-tabs';
this.selectedKey = 0;
this.keyToSelect = 0;
this.paneMoveStyle = 'translate3d(0, 0, 0)';
this._startTime = 0;
this._startPosition = 0;
this._velocityThreshold = 0.3;
this._tabDirection = 'horizontal';
this._tabBarPosition = 'top';
this.page = 5;
this.swipeable = true;
this.useOnPan = true;
this.animated = true;
this.distanceToChangeTab = 0.3;
this.tabTitleSize = 0;
this.tabBarActiveTextColor = '';
this.tabBarInactiveTextColor = '';
this.renderTabBar = null;
this.tabBarBackgroundColor = '#FFF';
this.prerenderingSiblingsNumber = -1;
this.tabBarTextStyle = {};
/** should be removed when https://github.com/angular/angular/issues/20810 resolved **/
this.tabPanesContent = null;
this.onChange = new EventEmitter();
this.onTabClick = new EventEmitter();
this.amTabs = true;
this.amTabsTop = true;
this.amTabsLeft = false;
this.amTabsRight = false;
this.amTabsBottom = false;
this.amTabsVertical = false;
this.amTabsHorizontal = true;
}
clickTab(index) {
if (this.selectedKey !== index) {
this.keyToSelect = index;
this.onTabClick.emit({ index: this.keyToSelect });
}
}
getCurrentTabPanes() {
return this.tabPanesContent || this.tabPanes;
}
onTouchStart(event) {
this._startTime = event.timeStamp;
if (this.getCurrentTabPanes() && this.getCurrentTabPanes().length > 0) {
if ('horizontal' === this._tabDirection) {
this._startPosition =
event && event.changedTouches && event.changedTouches[0] && event.changedTouches[0].clientX;
}
else if ('vertical' === this._tabDirection) {
this._startPosition =
event && event.changedTouches && event.changedTouches[0] && event.changedTouches[0].clientY;
}
}
}
onTouchMove(event) {
if (this.getCurrentTabPanes() && this.getCurrentTabPanes().length > 0) {
if ('horizontal' === this._tabDirection) {
const distance = event.changedTouches[0].clientX - this._startPosition;
if (distance < 0 && this.activeTab === this.getCurrentTabPanes().length - 1) {
return;
}
else if (distance > 0 && this.activeTab === 0) {
return;
}
// velocity 小于阈值才认为是pan操作
if (this.getVelocity(distance, event.timeStamp - this._startTime) <= this._velocityThreshold &&
this.useOnPan &&
this.swipeable &&
this.animated) {
this.paneMoveStyle = 'translate3d(calc(-' + this.selectedKey * 100 + '% + ' + distance + 'px), 0, 0 )';
}
}
else if ('vertical' === this._tabDirection) {
const distance = event.changedTouches[0].clientY - this._startPosition;
if (distance < 0 && this.activeTab === this.getCurrentTabPanes().length - 1) {
return;
}
else if (distance > 0 && this.activeTab === 0) {
return;
}
if (this.getVelocity(distance, event.timeStamp - this._startTime) <= this._velocityThreshold &&
this.useOnPan &&
this.swipeable &&
this.animated) {
this.paneMoveStyle = 'translate3d(0, calc(-' + this.selectedKey * 100 + '% + ' + distance + 'px, 0 )';
}
}
}
}
onTouchEnd(event) {
if (this.getCurrentTabPanes() && this.getCurrentTabPanes().length > 0) {
if ('horizontal' === this._tabDirection) {
const distance = event.changedTouches[0].clientX - this._startPosition;
const distanceToChangeTabPx = this.tabContent.nativeElement.offsetWidth * this.distanceToChangeTab;
if ((this.getVelocity(distance, event.timeStamp - this._startTime) <= this._velocityThreshold &&
(this.useOnPan && this.swipeable && Math.abs(distance) > distanceToChangeTabPx)) ||
(this.getVelocity(distance, event.timeStamp - this._startTime) > this._velocityThreshold &&
(this.swipeable && Math.abs(distance) > distanceToChangeTabPx / 2))) {
if (distance < 0 && this.activeTab < this.getCurrentTabPanes().length - 1) {
this.keyToSelect++;
}
else if (distance > 0 && this.activeTab > 0) {
this.keyToSelect--;
}
}
this.paneMoveStyle = 'translate3d(-' + this.selectedKey * 100 + '%, 0, 0 )';
}
else if ('vertical' === this._tabDirection) {
const distance = event.changedTouches[0].clientY - this._startPosition;
const distanceToChangeTabPx = this.tabContent.nativeElement.offsetHeight * this.distanceToChangeTab;
if ((this.getVelocity(distance, event.timeStamp - this._startTime) <= this._velocityThreshold &&
(this.useOnPan && this.swipeable && Math.abs(distance) > distanceToChangeTabPx)) ||
(this.getVelocity(distance, event.timeStamp - this._startTime) > this._velocityThreshold &&
(this.swipeable && Math.abs(distance) > distanceToChangeTabPx / 2))) {
if (distance < 0 && this.activeTab < this.getCurrentTabPanes().length - 1) {
this.keyToSelect++;
}
else if (distance > 0 && this.activeTab > 0) {
this.keyToSelect--;
}
}
this.paneMoveStyle = 'translate3d(0, -' + this.selectedKey * 100 + '%, 0 )';
}
}
}
ngAfterContentInit() {
this.selectTabPane(this.keyToSelect);
this.selectedKey = this.keyToSelect;
}
ngDoCheck() {
if (this.keyToSelect !== this.selectedKey && this.getCurrentTabPanes() && this.getCurrentTabPanes().length > 0) {
this.selectTabPane(this.keyToSelect);
this.selectedKey = this.keyToSelect;
this.onChange.emit({ index: this.selectedKey });
}
}
selectTabPane(index) {
if (this.getCurrentTabPanes() && this.getCurrentTabPanes().length > 0) {
const actualKeyToSelect = Math.min(this.getCurrentTabPanes().length - 1, Math.max(index || 0, 0));
if ('horizontal' === this._tabDirection) {
this.paneMoveStyle = 'translate3d(-' + actualKeyToSelect * 100 + '%, 0, 0 )';
}
else if ('vertical' === this._tabDirection) {
this.paneMoveStyle = 'translate3d(0, -' + actualKeyToSelect * 100 + '%, 0 )';
}
}
}
getVelocity(deltaDistance, deltaTime) {
return Math.abs(deltaDistance / deltaTime);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TabsComponent, selector: "Tabs, nzm-tabs", inputs: { page: "page", swipeable: "swipeable", useOnPan: "useOnPan", animated: "animated", tabBarUnderlineStyle: "tabBarUnderlineStyle", distanceToChangeTab: "distanceToChangeTab", tabTitleSize: "tabTitleSize", tabBarActiveTextColor: "tabBarActiveTextColor", tabBarInactiveTextColor: "tabBarInactiveTextColor", renderTabBar: "renderTabBar", tabBarBackgroundColor: "tabBarBackgroundColor", prerenderingSiblingsNumber: "prerenderingSiblingsNumber", tabBarTextStyle: "tabBarTextStyle", tabPanesContent: "tabPanesContent", activeTab: "activeTab", tabBarPosition: "tabBarPosition", tabDirection: "tabDirection" }, outputs: { onChange: "onChange", onTabClick: "onTabClick" }, host: { properties: { "class.am-tabs": "this.amTabs", "class.am-tabs-top": "this.amTabsTop", "class.am-tabs-left": "this.amTabsLeft", "class.am-tabs-right": "this.amTabsRight", "class.am-tabs-bottom": "this.amTabsBottom", "class.am-tabs-vertical": "this.amTabsVertical", "class.am-tabs-horizontal": "this.amTabsHorizontal" } }, queries: [{ propertyName: "tabPanes", predicate: TabPaneComponent }], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["TabContent"], descendants: true, static: true }, { propertyName: "defaultTabBar", first: true, predicate: ["DefaultTabBar"], descendants: true }], ngImport: i0, template: "<ng-container>\n <ng-template\n *ngIf=\"'top' === tabBarPosition || 'left' === tabBarPosition\"\n [ngTemplateOutlet]=\"renderTabBar || renderDefaultTabBar\"\n >\n </ng-template>\n <div\n #TabContent\n class=\"{{ prefixCls }}-content-wrap\"\n [ngClass]=\"{ 'am-tabs-content-wrap-animated': animated }\"\n [ngStyle]=\"{ transform: paneMoveStyle, webkitTransform: paneMoveStyle }\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n >\n <div\n tab-pane-body\n *ngFor=\"let tabPane of getCurrentTabPanes(); let i = index\"\n [content]=\"tabPane.content\"\n [active]=\"i === selectedKey\"\n [prerender]=\"\n prerenderingSiblingsNumber < 0 ||\n (selectedKey - i <= prerenderingSiblingsNumber && selectedKey - i + prerenderingSiblingsNumber >= 0)\n \"\n ></div>\n </div>\n <ng-template\n *ngIf=\"'bottom' === tabBarPosition || 'right' === tabBarPosition\"\n [ngTemplateOutlet]=\"renderTabBar || renderDefaultTabBar\"\n ></ng-template>\n</ng-container>\n\n<ng-template #renderDefaultTabBar>\n <DefaultTabBar\n #DefaultTabBar\n [page]=\"page\"\n [animated]=\"animated\"\n [activeTab]=\"selectedKey\"\n [tabTitleSize]=\"tabTitleSize\"\n [tabBarPosition]=\"tabBarPosition\"\n [tabBarUnderlineStyle]=\"tabBarUnderlineStyle\"\n [tabBarBackgroundColor]=\"tabBarBackgroundColor\"\n >\n <div\n #TabTitle\n *ngFor=\"let tabPane of getCurrentTabPanes(); let i = index\"\n class=\"{{ prefixCls }}-default-bar-tab\"\n [ngClass]=\"{\n 'am-tabs-default-bar-tab-active': i === selectedKey,\n 'am-tabs-default-bar-tab-disabled': tabPane.disabled\n }\"\n [ngStyle]=\"tabBarTextStyle\"\n [style.color]=\"i === selectedKey ? tabBarActiveTextColor : tabBarInactiveTextColor\"\n (click)=\"clickTab(i)\"\n >\n <ng-container *ngIf=\"tabPane.isTitleString; else titleTemplate\">\n {{ tabPane.title }}\n </ng-container>\n <ng-template #titleTemplate>\n <ng-template [ngTemplateOutlet]=\"tabPane.title\"></ng-template>\n </ng-template>\n </div>\n </DefaultTabBar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TabPaneBodyComponent, selector: "[tab-pane-body]", inputs: ["active", "loaded", "content", "prerender"] }, { kind: "component", type: DefaultTabBarComponent, selector: "DefaultTabBar, nzm-default-tab-bar", inputs: ["page", "animated", "tabBarUnderlineStyle", "tabBarBackgroundColor", "tabTitleSize", "tabBarPosition", "activeTab"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabsComponent, decorators: [{
type: Component,
args: [{ selector: 'Tabs, nzm-tabs', encapsulation: ViewEncapsulation.None, template: "<ng-container>\n <ng-template\n *ngIf=\"'top' === tabBarPosition || 'left' === tabBarPosition\"\n [ngTemplateOutlet]=\"renderTabBar || renderDefaultTabBar\"\n >\n </ng-template>\n <div\n #TabContent\n class=\"{{ prefixCls }}-content-wrap\"\n [ngClass]=\"{ 'am-tabs-content-wrap-animated': animated }\"\n [ngStyle]=\"{ transform: paneMoveStyle, webkitTransform: paneMoveStyle }\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n >\n <div\n tab-pane-body\n *ngFor=\"let tabPane of getCurrentTabPanes(); let i = index\"\n [content]=\"tabPane.content\"\n [active]=\"i === selectedKey\"\n [prerender]=\"\n prerenderingSiblingsNumber < 0 ||\n (selectedKey - i <= prerenderingSiblingsNumber && selectedKey - i + prerenderingSiblingsNumber >= 0)\n \"\n ></div>\n </div>\n <ng-template\n *ngIf=\"'bottom' === tabBarPosition || 'right' === tabBarPosition\"\n [ngTemplateOutlet]=\"renderTabBar || renderDefaultTabBar\"\n ></ng-template>\n</ng-container>\n\n<ng-template #renderDefaultTabBar>\n <DefaultTabBar\n #DefaultTabBar\n [page]=\"page\"\n [animated]=\"animated\"\n [activeTab]=\"selectedKey\"\n [tabTitleSize]=\"tabTitleSize\"\n [tabBarPosition]=\"tabBarPosition\"\n [tabBarUnderlineStyle]=\"tabBarUnderlineStyle\"\n [tabBarBackgroundColor]=\"tabBarBackgroundColor\"\n >\n <div\n #TabTitle\n *ngFor=\"let tabPane of getCurrentTabPanes(); let i = index\"\n class=\"{{ prefixCls }}-default-bar-tab\"\n [ngClass]=\"{\n 'am-tabs-default-bar-tab-active': i === selectedKey,\n 'am-tabs-default-bar-tab-disabled': tabPane.disabled\n }\"\n [ngStyle]=\"tabBarTextStyle\"\n [style.color]=\"i === selectedKey ? tabBarActiveTextColor : tabBarInactiveTextColor\"\n (click)=\"clickTab(i)\"\n >\n <ng-container *ngIf=\"tabPane.isTitleString; else titleTemplate\">\n {{ tabPane.title }}\n </ng-container>\n <ng-template #titleTemplate>\n <ng-template [ngTemplateOutlet]=\"tabPane.title\"></ng-template>\n </ng-template>\n </div>\n </DefaultTabBar>\n</ng-template>\n" }]
}], ctorParameters: () => [], propDecorators: { tabPanes: [{
type: ContentChildren,
args: [TabPaneComponent, { descendants: false }]
}], tabContent: [{
type: ViewChild,
args: ['TabContent', { static: true }]
}], defaultTabBar: [{
type: ViewChild,
args: ['DefaultTabBar']
}], page: [{
type: Input
}], swipeable: [{
type: Input
}], useOnPan: [{
type: Input
}], animated: [{
type: Input
}], tabBarUnderlineStyle: [{
type: Input
}], distanceToChangeTab: [{
type: Input
}], tabTitleSize: [{
type: Input
}], tabBarActiveTextColor: [{
type: Input
}], tabBarInactiveTextColor: [{
type: Input
}], renderTabBar: [{
type: Input
}], tabBarBackgroundColor: [{
type: Input
}], prerenderingSiblingsNumber: [{
type: Input
}], tabBarTextStyle: [{
type: Input
}], tabPanesContent: [{
type: Input
}], activeTab: [{
type: Input
}], tabBarPosition: [{
type: Input
}], tabDirection: [{
type: Input
}], onChange: [{
type: Output
}], onTabClick: [{
type: Output
}], amTabs: [{
type: HostBinding,
args: ['class.am-tabs']
}], amTabsTop: [{
type: HostBinding,
args: ['class.am-tabs-top']
}], amTabsLeft: [{
type: HostBinding,
args: ['class.am-tabs-left']
}], amTabsRight: [{
type: HostBinding,
args: ['class.am-tabs-right']
}], amTabsBottom: [{
type: HostBinding,
args: ['class.am-tabs-bottom']
}], amTabsVertical: [{
type: HostBinding,
args: ['class.am-tabs-vertical']
}], amTabsHorizontal: [{
type: HostBinding,
args: ['class.am-tabs-horizontal']
}] } });
class TabsModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: TabsModule, declarations: [TabPaneComponent, TabsComponent, TabPaneBodyComponent, DefaultTabBarComponent], imports: [CommonModule, ObserversModule], exports: [TabPaneComponent, TabsComponent, TabPaneBodyComponent, DefaultTabBarComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabsModule, imports: [CommonModule, ObserversModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabsModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, ObserversModule],
declarations: [TabPaneComponent, TabsComponent, TabPaneBodyComponent, DefaultTabBarComponent],
exports: [TabPaneComponent, TabsComponent, TabPaneBodyComponent, DefaultTabBarComponent],
providers: []
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DefaultTabBarComponent, TabPaneBodyComponent, TabPaneComponent, TabsComponent, TabsModule };
//# sourceMappingURL=ng-zorro-antd-mobile-tabs.mjs.map