ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
162 lines (156 loc) • 13.4 kB
JavaScript
import * as i0 from '@angular/core';
import { TemplateRef, Component, ViewChild, Input, EventEmitter, ContentChildren, Output, HostBinding, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2$1 from 'ng-zorro-antd-mobile/tabs';
import { TabPaneComponent, TabsModule } from 'ng-zorro-antd-mobile/tabs';
import * as i2 from 'ng-zorro-antd-mobile/badge';
import { BadgeModule } from 'ng-zorro-antd-mobile/badge';
class TabBarItemComponent extends TabPaneComponent {
constructor() {
super();
this.prefixCls = 'am-tab-bar-tab';
this.selected = false;
this.tintColor = '#108ee9';
this.unselectedTintColor = '#888';
this.key = '';
this.dot = false;
this.badge = null;
this.icon = null;
this.selectedIcon = null;
}
isTemplateRef(value) {
return value instanceof TemplateRef;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabBarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TabBarItemComponent, selector: "TabBarItem, nzm-tab-bar-item", inputs: { key: "key", dot: "dot", badge: "badge", icon: "icon", selectedIcon: "selectedIcon" }, viewQueries: [{ propertyName: "tabBarTab", first: true, predicate: ["tabBarTab"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #tabBarTab>\n <div class=\"{{ prefixCls }}-icon\" [style.color]=\"selected ? tintColor : unselectedTintColor\">\n <Badge *ngIf=\"badge\" className=\"{{ prefixCls }}-badge tab-badge\" [text]=\"badge\">\n <ng-container *ngIf=\"isTemplateRef(selected ? selectedIcon : icon); then domTemplate; else imgTemplate\">\n </ng-container>\n </Badge>\n <Badge className=\"{{ prefixCls }}-badge tab-badge\" [dot]=\"dot\" *ngIf=\"dot\">\n <ng-container *ngIf=\"isTemplateRef(selected ? selectedIcon : icon); then domTemplate; else imgTemplate\">\n </ng-container>\n </Badge>\n <ng-container *ngIf=\"!badge && !dot\">\n <ng-container *ngIf=\"isTemplateRef(selected ? selectedIcon : icon); then domTemplate; else imgTemplate\">\n </ng-container>\n </ng-container>\n </div>\n <p class=\"{{ prefixCls }}-title\" [style.color]=\"selected ? tintColor : unselectedTintColor\">\n {{ title }}\n </p>\n</ng-template>\n\n<ng-template #domTemplate>\n <ng-template [ngTemplateOutlet]=\"selected ? selectedIcon : icon\"></ng-template>\n</ng-template>\n\n<ng-template #imgTemplate>\n <img src=\"{{ selected ? selectedIcon : icon }}\" alt=\"{{ title }}\" />\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.BadgeComponent, selector: "Badge, nzm-badge", inputs: ["size", "text", "corner", "dot", "overflowCount", "hot", "setStyle", "className"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabBarItemComponent, decorators: [{
type: Component,
args: [{ selector: 'TabBarItem, nzm-tab-bar-item', template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #tabBarTab>\n <div class=\"{{ prefixCls }}-icon\" [style.color]=\"selected ? tintColor : unselectedTintColor\">\n <Badge *ngIf=\"badge\" className=\"{{ prefixCls }}-badge tab-badge\" [text]=\"badge\">\n <ng-container *ngIf=\"isTemplateRef(selected ? selectedIcon : icon); then domTemplate; else imgTemplate\">\n </ng-container>\n </Badge>\n <Badge className=\"{{ prefixCls }}-badge tab-badge\" [dot]=\"dot\" *ngIf=\"dot\">\n <ng-container *ngIf=\"isTemplateRef(selected ? selectedIcon : icon); then domTemplate; else imgTemplate\">\n </ng-container>\n </Badge>\n <ng-container *ngIf=\"!badge && !dot\">\n <ng-container *ngIf=\"isTemplateRef(selected ? selectedIcon : icon); then domTemplate; else imgTemplate\">\n </ng-container>\n </ng-container>\n </div>\n <p class=\"{{ prefixCls }}-title\" [style.color]=\"selected ? tintColor : unselectedTintColor\">\n {{ title }}\n </p>\n</ng-template>\n\n<ng-template #domTemplate>\n <ng-template [ngTemplateOutlet]=\"selected ? selectedIcon : icon\"></ng-template>\n</ng-template>\n\n<ng-template #imgTemplate>\n <img src=\"{{ selected ? selectedIcon : icon }}\" alt=\"{{ title }}\" />\n</ng-template>\n" }]
}], ctorParameters: () => [], propDecorators: { tabBarTab: [{
type: ViewChild,
args: ['tabBarTab', { static: true }]
}], key: [{
type: Input
}], dot: [{
type: Input
}], badge: [{
type: Input
}], icon: [{
type: Input
}], selectedIcon: [{
type: Input
}] } });
class TabBarComponent {
get activeTab() {
return this._activeTab;
}
set activeTab(tab) {
this._activeTab = tab;
if (this.tabBarItems && this.tabBarItems.length > 0) {
this.selectTabBarItem(tab);
}
}
get tintColor() {
return this._tintColor;
}
set tintColor(color) {
this._tintColor = color;
if (this.tabBarItems && this.tabBarItems.length > 0) {
this.tabBarItems.forEach((tabBarItem) => {
tabBarItem.tintColor = this._tintColor;
});
}
}
get unselectedTintColor() {
return this._unselectedTintColor;
}
set unselectedTintColor(color) {
this._unselectedTintColor = color;
if (this.tabBarItems && this.tabBarItems.length > 0) {
this.tabBarItems.forEach((tabBarItem) => {
tabBarItem.unselectedTintColor = this._unselectedTintColor;
});
}
}
constructor() {
this.prefixCls = 'am-tab-bar';
this._activeTab = 0;
this._tintColor = '#108ee9';
this._unselectedTintColor = '#888';
this.hidden = false;
this.prerenderingSiblingsNumber = -1;
this.barTintColor = 'white';
this.tabBarPosition = 'bottom';
this.onPress = new EventEmitter();
this.tabBar = true;
}
selectTabBarItem(index) {
if (this.tabBarItems && this.tabBarItems.length > 0) {
this.tabBarItems.forEach((tabBarItem) => {
tabBarItem.selected = false;
});
this.tabBarItems.toArray()[index].selected = true;
}
}
tabBarTabOnPress(pressParam) {
this.onPress.emit(pressParam);
}
ngAfterContentInit() {
if (this.tabBarItems && this.tabBarItems.length > 0) {
this.tabBarItems.forEach((tabBarItem) => {
tabBarItem.tintColor = this._tintColor;
tabBarItem.unselectedTintColor = this._unselectedTintColor;
});
}
this.selectTabBarItem(this.activeTab);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TabBarComponent, selector: "TabBar, nzm-tab-bar", inputs: { hidden: "hidden", prerenderingSiblingsNumber: "prerenderingSiblingsNumber", activeTab: "activeTab", barTintColor: "barTintColor", tabBarPosition: "tabBarPosition", tintColor: "tintColor", unselectedTintColor: "unselectedTintColor" }, outputs: { onPress: "onPress" }, host: { properties: { "class.am-tab-bar": "this.tabBar" } }, queries: [{ propertyName: "tabBarItems", predicate: TabBarItemComponent, descendants: true }], ngImport: i0, template: "<Tabs\n [animated]=\"false\"\n [useOnPan]=\"false\"\n [swipeable]=\"false\"\n [activeTab]=\"activeTab\"\n [renderTabBar]=\"TabBarBar\"\n [tabDirection]=\"'horizontal'\"\n [tabPanesContent]=\"tabBarItems\"\n [tabBarPosition]=\"tabBarPosition\"\n [prerenderingSiblingsNumber]=\"prerenderingSiblingsNumber\"\n></Tabs>\n\n<ng-template #TabBarBar>\n <div class=\"am-tabs-tab-bar-wrap\">\n <div\n class=\"{{ prefixCls }}-bar\"\n [ngClass]=\"{\n 'am-tab-bar-bar-hidden-top': 'top' === tabBarPosition && hidden,\n 'am-tab-bar-bar-hidden-bottom': 'bottom' === tabBarPosition && hidden\n }\"\n [style.background-color]=\"barTintColor\"\n >\n <div\n class=\"am-tab-bar-tab\"\n *ngFor=\"let tabBarItem of tabBarItems; let i = index\"\n (click)=\"tabBarTabOnPress({ index: i, key: tabBarItem.key, title: tabBarItem.title })\"\n >\n <ng-container [ngTemplateOutlet]=\"tabBarItem.tabBarTab\"></ng-container>\n </div>\n </div>\n </div>\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.TabsComponent, selector: "Tabs, nzm-tabs", inputs: ["page", "swipeable", "useOnPan", "animated", "tabBarUnderlineStyle", "distanceToChangeTab", "tabTitleSize", "tabBarActiveTextColor", "tabBarInactiveTextColor", "renderTabBar", "tabBarBackgroundColor", "prerenderingSiblingsNumber", "tabBarTextStyle", "tabPanesContent", "activeTab", "tabBarPosition", "tabDirection"], outputs: ["onChange", "onTabClick"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabBarComponent, decorators: [{
type: Component,
args: [{ selector: 'TabBar, nzm-tab-bar', template: "<Tabs\n [animated]=\"false\"\n [useOnPan]=\"false\"\n [swipeable]=\"false\"\n [activeTab]=\"activeTab\"\n [renderTabBar]=\"TabBarBar\"\n [tabDirection]=\"'horizontal'\"\n [tabPanesContent]=\"tabBarItems\"\n [tabBarPosition]=\"tabBarPosition\"\n [prerenderingSiblingsNumber]=\"prerenderingSiblingsNumber\"\n></Tabs>\n\n<ng-template #TabBarBar>\n <div class=\"am-tabs-tab-bar-wrap\">\n <div\n class=\"{{ prefixCls }}-bar\"\n [ngClass]=\"{\n 'am-tab-bar-bar-hidden-top': 'top' === tabBarPosition && hidden,\n 'am-tab-bar-bar-hidden-bottom': 'bottom' === tabBarPosition && hidden\n }\"\n [style.background-color]=\"barTintColor\"\n >\n <div\n class=\"am-tab-bar-tab\"\n *ngFor=\"let tabBarItem of tabBarItems; let i = index\"\n (click)=\"tabBarTabOnPress({ index: i, key: tabBarItem.key, title: tabBarItem.title })\"\n >\n <ng-container [ngTemplateOutlet]=\"tabBarItem.tabBarTab\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n" }]
}], ctorParameters: () => [], propDecorators: { tabBarItems: [{
type: ContentChildren,
args: [TabBarItemComponent, { descendants: true }]
}], hidden: [{
type: Input
}], prerenderingSiblingsNumber: [{
type: Input
}], activeTab: [{
type: Input
}], barTintColor: [{
type: Input
}], tabBarPosition: [{
type: Input
}], tintColor: [{
type: Input
}], unselectedTintColor: [{
type: Input
}], onPress: [{
type: Output
}], tabBar: [{
type: HostBinding,
args: ['class.am-tab-bar']
}] } });
class TabBarModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: TabBarModule, declarations: [TabBarComponent, TabBarItemComponent], imports: [CommonModule, TabsModule, BadgeModule], exports: [TabBarComponent, TabBarItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabBarModule, imports: [CommonModule, TabsModule, BadgeModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TabBarModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, TabsModule, BadgeModule],
exports: [TabBarComponent, TabBarItemComponent],
declarations: [TabBarComponent, TabBarItemComponent],
providers: []
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TabBarComponent, TabBarItemComponent, TabBarModule };
//# sourceMappingURL=ng-zorro-antd-mobile-tab-bar.mjs.map