ng-zorro-antd-mobile/esm2022/tab-bar/tab-bar-item.component.mjs

An enterprise-class mobile UI components based on Ant Design and Angular

import { Component, Input, ViewChild, TemplateRef } from '@angular/core';
import { TabPaneComponent } from 'ng-zorro-antd-mobile/tabs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "ng-zorro-antd-mobile/badge";
export 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
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWJhci1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvdGFiLWJhci90YWItYmFyLWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vY29tcG9uZW50cy90YWItYmFyL3RhYi1iYXItaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDJCQUEyQixDQUFDOzs7O0FBTTdELE1BQU0sT0FBTyxtQkFBb0IsU0FBUSxnQkFBZ0I7SUFvQnZEO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFwQlYsY0FBUyxHQUFXLGdCQUFnQixDQUFDO1FBQ3JDLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFDMUIsY0FBUyxHQUFXLFNBQVMsQ0FBQztRQUM5Qix3QkFBbUIsR0FBVyxNQUFNLENBQUM7UUFNckMsUUFBRyxHQUFXLEVBQUUsQ0FBQztRQUVqQixRQUFHLEdBQVksS0FBSyxDQUFDO1FBRXJCLFVBQUssR0FBb0IsSUFBSSxDQUFDO1FBRTlCLFNBQUksR0FBK0IsSUFBSSxDQUFDO1FBRXhDLGlCQUFZLEdBQStCLElBQUksQ0FBQztJQUloRCxDQUFDO0lBRUQsYUFBYSxDQUFDLEtBQUs7UUFDakIsT0FBTyxLQUFLLFlBQVksV0FBVyxDQUFDO0lBQ3RDLENBQUM7OEdBMUJVLG1CQUFtQjtrR0FBbkIsbUJBQW1CLGlUQ1BoQyx3d0NBK0JBOzsyRkR4QmEsbUJBQW1CO2tCQUovQixTQUFTOytCQUNFLDhCQUE4Qjt3REFVeEMsU0FBUztzQkFEUixTQUFTO3VCQUFDLFdBQVcsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBSXhDLEdBQUc7c0JBREYsS0FBSztnQkFHTixHQUFHO3NCQURGLEtBQUs7Z0JBR04sS0FBSztzQkFESixLQUFLO2dCQUdOLElBQUk7c0JBREgsS0FBSztnQkFHTixZQUFZO3NCQURYLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBWaWV3Q2hpbGQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUYWJQYW5lQ29tcG9uZW50IH0gZnJvbSAnbmctem9ycm8tYW50ZC1tb2JpbGUvdGFicyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ1RhYkJhckl0ZW0sIG56bS10YWItYmFyLWl0ZW0nLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFiLWJhci1pdGVtLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBUYWJCYXJJdGVtQ29tcG9uZW50IGV4dGVuZHMgVGFiUGFuZUNvbXBvbmVudCB7XG4gIHByZWZpeENsczogc3RyaW5nID0gJ2FtLXRhYi1iYXItdGFiJztcbiAgc2VsZWN0ZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgdGludENvbG9yOiBzdHJpbmcgPSAnIzEwOGVlOSc7XG4gIHVuc2VsZWN0ZWRUaW50Q29sb3I6IHN0cmluZyA9ICcjODg4JztcblxuICBAVmlld0NoaWxkKCd0YWJCYXJUYWInLCB7IHN0YXRpYzogdHJ1ZSB9KVxuICB0YWJCYXJUYWI6IFRlbXBsYXRlUmVmPHZvaWQ+O1xuXG4gIEBJbnB1dCgpXG4gIGtleTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpXG4gIGRvdDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKVxuICBiYWRnZTogbnVtYmVyIHwgc3RyaW5nID0gbnVsbDtcbiAgQElucHV0KClcbiAgaWNvbjogc3RyaW5nIHwgVGVtcGxhdGVSZWY8dm9pZD4gPSBudWxsO1xuICBASW5wdXQoKVxuICBzZWxlY3RlZEljb246IHN0cmluZyB8IFRlbXBsYXRlUmVmPHZvaWQ+ID0gbnVsbDtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgaXNUZW1wbGF0ZVJlZih2YWx1ZSkge1xuICAgIHJldHVybiB2YWx1ZSBpbnN0YW5jZW9mIFRlbXBsYXRlUmVmO1xuICB9XG59XG4iLCI8bmctdGVtcGxhdGUgI2NvbnRlbnQ+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjdGFiQmFyVGFiPlxuICA8ZGl2IGNsYXNzPVwie3sgcHJlZml4Q2xzIH19LWljb25cIiBbc3R5bGUuY29sb3JdPVwic2VsZWN0ZWQgPyB0aW50Q29sb3IgOiB1bnNlbGVjdGVkVGludENvbG9yXCI+XG4gICAgPEJhZGdlICpuZ0lmPVwiYmFkZ2VcIiBjbGFzc05hbWU9XCJ7eyBwcmVmaXhDbHMgfX0tYmFkZ2UgdGFiLWJhZGdlXCIgW3RleHRdPVwiYmFkZ2VcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJpc1RlbXBsYXRlUmVmKHNlbGVjdGVkID8gc2VsZWN0ZWRJY29uIDogaWNvbik7IHRoZW4gZG9tVGVtcGxhdGU7IGVsc2UgaW1nVGVtcGxhdGVcIj5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvQmFkZ2U+XG4gICAgPEJhZGdlIGNsYXNzTmFtZT1cInt7IHByZWZpeENscyB9fS1iYWRnZSB0YWItYmFkZ2VcIiBbZG90XT1cImRvdFwiICpuZ0lmPVwiZG90XCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiaXNUZW1wbGF0ZVJlZihzZWxlY3RlZCA/IHNlbGVjdGVkSWNvbiA6IGljb24pOyB0aGVuIGRvbVRlbXBsYXRlOyBlbHNlIGltZ1RlbXBsYXRlXCI+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L0JhZGdlPlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhYmFkZ2UgJiYgIWRvdFwiPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImlzVGVtcGxhdGVSZWYoc2VsZWN0ZWQgPyBzZWxlY3RlZEljb24gOiBpY29uKTsgdGhlbiBkb21UZW1wbGF0ZTsgZWxzZSBpbWdUZW1wbGF0ZVwiPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuICA8cCBjbGFzcz1cInt7IHByZWZpeENscyB9fS10aXRsZVwiIFtzdHlsZS5jb2xvcl09XCJzZWxlY3RlZCA/IHRpbnRDb2xvciA6IHVuc2VsZWN0ZWRUaW50Q29sb3JcIj5cbiAgICB7eyB0aXRsZSB9fVxuICA8L3A+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2RvbVRlbXBsYXRlPlxuICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwic2VsZWN0ZWQgPyBzZWxlY3RlZEljb24gOiBpY29uXCI+PC9uZy10ZW1wbGF0ZT5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjaW1nVGVtcGxhdGU+XG4gIDxpbWcgc3JjPVwie3sgc2VsZWN0ZWQgPyBzZWxlY3RlZEljb24gOiBpY29uIH19XCIgYWx0PVwie3sgdGl0bGUgfX1cIiAvPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==