@taiga-ui/addon-mobile 2.83.0 → 2.84.0

package/fesm2015/taiga-ui-addon-mobile-components-tab-bar.js

@@ -0,0 +1,126 @@
+import { __decorate, __param } from 'tslib';
+import { Inject, Input, Component, ChangeDetectionStrategy, EventEmitter, ContentChildren, forwardRef, ElementRef, Output, HostListener, HostBinding, Self, ChangeDetectorRef, Directive, NgModule } from '@angular/core';
+import { EMPTY_QUERY, tuiIsElement, tuiWatch, TuiDestroyService } from '@taiga-ui/cdk';
+import { TUI_ANIMATION_OPTIONS, tuiScaleIn, TuiRouterLinkActiveService, TuiSvgModule } from '@taiga-ui/core';
+import { CommonModule } from '@angular/common';
+import { Observable } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+
+let TuiTabBarItemComponent = class TuiTabBarItemComponent {
+    constructor(animationOptions) {
+        this.animationOptions = animationOptions;
+        this.icon = '';
+        this.badge = null;
+        this.animation = Object.assign({ value: '' }, this.animationOptions);
+    }
+    format(value) {
+        return value > 999 ? '999+' : String(value);
+    }
+};
+TuiTabBarItemComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [TUI_ANIMATION_OPTIONS,] }] }
+];
+__decorate([
+    Input()
+], TuiTabBarItemComponent.prototype, "icon", void 0);
+__decorate([
+    Input()
+], TuiTabBarItemComponent.prototype, "badge", void 0);
+TuiTabBarItemComponent = __decorate([
+    Component({
+        selector: 'button[tuiTabBarItem], a[tuiTabBarItem]',
+        template: "<tui-svg\n    class=\"t-icon\"\n    [src]=\"icon\"\n></tui-svg>\n<span class=\"t-wrapper\">\n    <span\n        *ngIf=\"badge as value\"\n        class=\"t-badge\"\n        [@tuiScaleIn]=\"animation\"\n    >\n        {{ format(value) }}\n    </span>\n</span>\n<span class=\"t-text\">\n    <ng-content></ng-content>\n</span>\n",
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        animations: [tuiScaleIn],
+        styles: [":host{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;line-height:inherit;transition-property:color;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;position:relative;display:flex;flex:1 0;font:inherit;flex-direction:column;align-items:center;overflow:hidden;text-decoration:none}:host:nth-child(1){color:var(--tui-tab-1,inherit)}:host:nth-child(2){color:var(--tui-tab-2,inherit)}:host:nth-child(3){color:var(--tui-tab-3,inherit)}:host:nth-child(4){color:var(--tui-tab-4,inherit)}:host:nth-child(5){color:var(--tui-tab-5,inherit)}:host:nth-child(6){color:var(--tui-tab-6,inherit)}:host:nth-child(7){color:var(--tui-tab-7,inherit)}:host:nth-child(8){color:var(--tui-tab-8,inherit)}:host:nth-child(9){color:var(--tui-tab-9,inherit)}:host:nth-child(10){color:var(--tui-tab-10,inherit)}.t-icon{width:1.75rem;height:1.75rem;margin:.375rem 0 .125rem;pointer-events:none}.t-wrapper{position:absolute;top:.125rem;left:1rem;display:flex;width:100%;justify-content:center;pointer-events:none}.t-badge{display:flex;height:1.125rem;min-width:1.125rem;align-items:center;padding:0 .25rem;border-radius:1rem;font-size:.8125rem;box-sizing:border-box;color:var(--tui-base-01);background:var(--tui-error-fill)}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}"]
+    }),
+    __param(0, Inject(TUI_ANIMATION_OPTIONS))
+], TuiTabBarItemComponent);
+
+let TuiTabBarComponent = class TuiTabBarComponent {
+    constructor() {
+        this.tabs = EMPTY_QUERY;
+        this.activeItemIndex = NaN;
+        this.activeItemIndexChange = new EventEmitter();
+    }
+    setActive(tab) {
+        if (tuiIsElement(tab)) {
+            this.updateIndex(this.tabs.toArray().findIndex(({ nativeElement }) => nativeElement === tab));
+        }
+    }
+    get style() {
+        return `--tui-tab-${this.activeItemIndex + 1}: var(--tui-active-color)`;
+    }
+    updateIndex(index) {
+        this.activeItemIndex = index;
+        this.activeItemIndexChange.emit(index);
+    }
+};
+__decorate([
+    ContentChildren(forwardRef(() => TuiTabBarItemComponent), { read: ElementRef })
+], TuiTabBarComponent.prototype, "tabs", void 0);
+__decorate([
+    Input()
+], TuiTabBarComponent.prototype, "activeItemIndex", void 0);
+__decorate([
+    Output()
+], TuiTabBarComponent.prototype, "activeItemIndexChange", void 0);
+__decorate([
+    HostListener('click', ['$event.target'])
+], TuiTabBarComponent.prototype, "setActive", null);
+__decorate([
+    HostBinding('style')
+], TuiTabBarComponent.prototype, "style", null);
+TuiTabBarComponent = __decorate([
+    Component({
+        selector: 'nav[tuiTabBar]',
+        template: '<ng-content></ng-content>',
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        styles: [":host{--tui-active-color:var(--tui-primary);position:relative;display:flex;align-items:flex-start;font:.625rem/.75rem -apple-system,BlinkMacSystemFont,system-ui,Roboto,'Segoe UI',sans-serif;height:var(--tui-height-l);color:var(--tui-text-03);-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}:host:before{position:absolute;top:0;left:0;width:100%;height:100%;content:'';background:var(--tui-elevation-01);box-shadow:inset 0 1px var(--tui-base-04);opacity:.9}"]
+    })
+], TuiTabBarComponent);
+
+let TuiTabBarItemDirective = class TuiTabBarItemDirective {
+    constructor(destroy$, active$, tabs, { nativeElement }, changeDetectorRef) {
+        active$
+            .pipe(filter(Boolean), tuiWatch(changeDetectorRef), takeUntil(destroy$))
+            .subscribe(() => {
+            tabs.setActive(nativeElement);
+        });
+    }
+};
+TuiTabBarItemDirective.ctorParameters = () => [
+    { type: Observable, decorators: [{ type: Self }, { type: Inject, args: [TuiDestroyService,] }] },
+    { type: Observable, decorators: [{ type: Inject, args: [TuiRouterLinkActiveService,] }] },
+    { type: TuiTabBarComponent, decorators: [{ type: Inject, args: [TuiTabBarComponent,] }] },
+    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
+    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] }
+];
+TuiTabBarItemDirective = __decorate([
+    Directive({
+        selector: '[tuiTabBarItem][routerLinkActive]',
+        providers: [TuiRouterLinkActiveService, TuiDestroyService],
+    }),
+    __param(0, Self()), __param(0, Inject(TuiDestroyService)),
+    __param(1, Inject(TuiRouterLinkActiveService)),
+    __param(2, Inject(TuiTabBarComponent)),
+    __param(3, Inject(ElementRef)),
+    __param(4, Inject(ChangeDetectorRef))
+], TuiTabBarItemDirective);
+
+let TuiTabBarModule = class TuiTabBarModule {
+};
+TuiTabBarModule = __decorate([
+    NgModule({
+        imports: [CommonModule, TuiSvgModule],
+        declarations: [TuiTabBarComponent, TuiTabBarItemComponent, TuiTabBarItemDirective],
+        exports: [TuiTabBarComponent, TuiTabBarItemComponent, TuiTabBarItemDirective],
+    })
+], TuiTabBarModule);
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TuiTabBarComponent, TuiTabBarItemComponent, TuiTabBarItemDirective, TuiTabBarModule };
+//# sourceMappingURL=taiga-ui-addon-mobile-components-tab-bar.js.map

package/fesm2015/taiga-ui-addon-mobile-components-tab-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"taiga-ui-addon-mobile-components-tab-bar.js","sources":["ng://@taiga-ui/addon-mobile/components/tab-bar/tab-bar-item.component.ts","ng://@taiga-ui/addon-mobile/components/tab-bar/tab-bar.component.ts","ng://@taiga-ui/addon-mobile/components/tab-bar/tab-bar-item.directive.ts","ng://@taiga-ui/addon-mobile/components/tab-bar/tab-bar.module.ts","ng://@taiga-ui/addon-mobile/components/tab-bar/taiga-ui-addon-mobile-components-tab-bar.ts"],"sourcesContent":["import {AnimationOptions} from '@angular/animations';\nimport {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';\nimport {TUI_ANIMATION_OPTIONS, tuiScaleIn} from '@taiga-ui/core';\n\n@Component({\n    selector: 'button[tuiTabBarItem], a[tuiTabBarItem]',\n    templateUrl: './tab-bar-item.template.html',\n    styleUrls: ['./tab-bar-item.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    animations: [tuiScaleIn],\n})\nexport class TuiTabBarItemComponent {\n    @Input()\n    icon = '';\n\n    @Input()\n    badge?: number | null = null;\n\n    readonly animation = {value: '', ...this.animationOptions} as const;\n\n    constructor(\n        @Inject(TUI_ANIMATION_OPTIONS)\n        private readonly animationOptions: AnimationOptions,\n    ) {}\n\n    format(value: number): string {\n        return value > 999 ? '999+' : String(value);\n    }\n}\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    HostBinding,\n    HostListener,\n    Input,\n    Output,\n    QueryList,\n} from '@angular/core';\nimport {EMPTY_QUERY, tuiIsElement} from '@taiga-ui/cdk';\n\nimport {TuiTabBarItemComponent} from './tab-bar-item.component';\n\n@Component({\n    selector: 'nav[tuiTabBar]',\n    template: '<ng-content></ng-content>',\n    styleUrls: ['./tab-bar.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiTabBarComponent {\n    @ContentChildren(forwardRef(() => TuiTabBarItemComponent), {read: ElementRef})\n    private readonly tabs: QueryList<ElementRef<HTMLElement>> = EMPTY_QUERY;\n\n    @Input()\n    activeItemIndex = NaN;\n\n    @Output()\n    readonly activeItemIndexChange = new EventEmitter<number>();\n\n    @HostListener('click', ['$event.target'])\n    setActive(tab: EventTarget): void {\n        if (tuiIsElement(tab)) {\n            this.updateIndex(\n                this.tabs.toArray().findIndex(({nativeElement}) => nativeElement === tab),\n            );\n        }\n    }\n\n    @HostBinding('style')\n    get style(): string {\n        return `--tui-tab-${this.activeItemIndex + 1}: var(--tui-active-color)`;\n    }\n\n    private updateIndex(index: number): void {\n        this.activeItemIndex = index;\n        this.activeItemIndexChange.emit(index);\n    }\n}\n","import {ChangeDetectorRef, Directive, ElementRef, Inject, Self} from '@angular/core';\nimport {TuiDestroyService, tuiWatch} from '@taiga-ui/cdk';\nimport {TuiRouterLinkActiveService} from '@taiga-ui/core';\nimport {Observable} from 'rxjs';\nimport {filter, takeUntil} from 'rxjs/operators';\n\nimport {TuiTabBarComponent} from './tab-bar.component';\n\n@Directive({\n    selector: '[tuiTabBarItem][routerLinkActive]',\n    providers: [TuiRouterLinkActiveService, TuiDestroyService],\n})\nexport class TuiTabBarItemDirective {\n    constructor(\n        @Self() @Inject(TuiDestroyService) destroy$: Observable<unknown>,\n        @Inject(TuiRouterLinkActiveService) active$: Observable<boolean>,\n        @Inject(TuiTabBarComponent) tabs: TuiTabBarComponent,\n        @Inject(ElementRef) {nativeElement}: ElementRef<HTMLElement>,\n        @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,\n    ) {\n        active$\n            .pipe(filter(Boolean), tuiWatch(changeDetectorRef), takeUntil(destroy$))\n            .subscribe(() => {\n                tabs.setActive(nativeElement);\n            });\n    }\n}\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {TuiSvgModule} from '@taiga-ui/core';\n\nimport {TuiTabBarComponent} from './tab-bar.component';\nimport {TuiTabBarItemComponent} from './tab-bar-item.component';\nimport {TuiTabBarItemDirective} from './tab-bar-item.directive';\n\n@NgModule({\n    imports: [CommonModule, TuiSvgModule],\n    declarations: [TuiTabBarComponent, TuiTabBarItemComponent, TuiTabBarItemDirective],\n    exports: [TuiTabBarComponent, TuiTabBarItemComponent, TuiTabBarItemDirective],\n})\nexport class TuiTabBarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2015/taiga-ui-addon-mobile-components.js

@@ -3,6 +3,7 @@ export * from '@taiga-ui/addon-mobile/components/mobile-calendar-dialog';
 export * from '@taiga-ui/addon-mobile/components/mobile-dialog';
 export * from '@taiga-ui/addon-mobile/components/pull-to-refresh';
 export * from '@taiga-ui/addon-mobile/components/sheet';
+export * from '@taiga-ui/addon-mobile/components/tab-bar';
 export * from '@taiga-ui/addon-mobile/components/theme-android';
 export * from '@taiga-ui/addon-mobile/components/theme-ios';
 

package/fesm2015/taiga-ui-addon-mobile-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-addon-mobile-components.js","sources":["ng://@taiga-ui/addon-mobile/components/taiga-ui-addon-mobile-components.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAAA;;"}
+{"version":3,"file":"taiga-ui-addon-mobile-components.js","sources":["ng://@taiga-ui/addon-mobile/components/taiga-ui-addon-mobile-components.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAAA;;"}

package/fesm5/taiga-ui-addon-mobile-components-tab-bar.js

@@ -0,0 +1,140 @@
+import { __assign, __decorate, __param } from 'tslib';
+import { Inject, Input, Component, ChangeDetectionStrategy, EventEmitter, ContentChildren, forwardRef, ElementRef, Output, HostListener, HostBinding, Self, ChangeDetectorRef, Directive, NgModule } from '@angular/core';
+import { EMPTY_QUERY, tuiIsElement, tuiWatch, TuiDestroyService } from '@taiga-ui/cdk';
+import { TUI_ANIMATION_OPTIONS, tuiScaleIn, TuiRouterLinkActiveService, TuiSvgModule } from '@taiga-ui/core';
+import { CommonModule } from '@angular/common';
+import { Observable } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+
+var TuiTabBarItemComponent = /** @class */ (function () {
+    function TuiTabBarItemComponent(animationOptions) {
+        this.animationOptions = animationOptions;
+        this.icon = '';
+        this.badge = null;
+        this.animation = __assign({ value: '' }, this.animationOptions);
+    }
+    TuiTabBarItemComponent.prototype.format = function (value) {
+        return value > 999 ? '999+' : String(value);
+    };
+    TuiTabBarItemComponent.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: Inject, args: [TUI_ANIMATION_OPTIONS,] }] }
+    ]; };
+    __decorate([
+        Input()
+    ], TuiTabBarItemComponent.prototype, "icon", void 0);
+    __decorate([
+        Input()
+    ], TuiTabBarItemComponent.prototype, "badge", void 0);
+    TuiTabBarItemComponent = __decorate([
+        Component({
+            selector: 'button[tuiTabBarItem], a[tuiTabBarItem]',
+            template: "<tui-svg\n    class=\"t-icon\"\n    [src]=\"icon\"\n></tui-svg>\n<span class=\"t-wrapper\">\n    <span\n        *ngIf=\"badge as value\"\n        class=\"t-badge\"\n        [@tuiScaleIn]=\"animation\"\n    >\n        {{ format(value) }}\n    </span>\n</span>\n<span class=\"t-text\">\n    <ng-content></ng-content>\n</span>\n",
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            animations: [tuiScaleIn],
+            styles: [":host{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;line-height:inherit;transition-property:color;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;position:relative;display:flex;flex:1 0;font:inherit;flex-direction:column;align-items:center;overflow:hidden;text-decoration:none}:host:nth-child(1){color:var(--tui-tab-1,inherit)}:host:nth-child(2){color:var(--tui-tab-2,inherit)}:host:nth-child(3){color:var(--tui-tab-3,inherit)}:host:nth-child(4){color:var(--tui-tab-4,inherit)}:host:nth-child(5){color:var(--tui-tab-5,inherit)}:host:nth-child(6){color:var(--tui-tab-6,inherit)}:host:nth-child(7){color:var(--tui-tab-7,inherit)}:host:nth-child(8){color:var(--tui-tab-8,inherit)}:host:nth-child(9){color:var(--tui-tab-9,inherit)}:host:nth-child(10){color:var(--tui-tab-10,inherit)}.t-icon{width:1.75rem;height:1.75rem;margin:.375rem 0 .125rem;pointer-events:none}.t-wrapper{position:absolute;top:.125rem;left:1rem;display:flex;width:100%;justify-content:center;pointer-events:none}.t-badge{display:flex;height:1.125rem;min-width:1.125rem;align-items:center;padding:0 .25rem;border-radius:1rem;font-size:.8125rem;box-sizing:border-box;color:var(--tui-base-01);background:var(--tui-error-fill)}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}"]
+        }),
+        __param(0, Inject(TUI_ANIMATION_OPTIONS))
+    ], TuiTabBarItemComponent);
+    return TuiTabBarItemComponent;
+}());
+
+var TuiTabBarComponent = /** @class */ (function () {
+    function TuiTabBarComponent() {
+        this.tabs = EMPTY_QUERY;
+        this.activeItemIndex = NaN;
+        this.activeItemIndexChange = new EventEmitter();
+    }
+    TuiTabBarComponent.prototype.setActive = function (tab) {
+        if (tuiIsElement(tab)) {
+            this.updateIndex(this.tabs.toArray().findIndex(function (_a) {
+                var nativeElement = _a.nativeElement;
+                return nativeElement === tab;
+            }));
+        }
+    };
+    Object.defineProperty(TuiTabBarComponent.prototype, "style", {
+        get: function () {
+            return "--tui-tab-" + (this.activeItemIndex + 1) + ": var(--tui-active-color)";
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TuiTabBarComponent.prototype.updateIndex = function (index) {
+        this.activeItemIndex = index;
+        this.activeItemIndexChange.emit(index);
+    };
+    __decorate([
+        ContentChildren(forwardRef(function () { return TuiTabBarItemComponent; }), { read: ElementRef })
+    ], TuiTabBarComponent.prototype, "tabs", void 0);
+    __decorate([
+        Input()
+    ], TuiTabBarComponent.prototype, "activeItemIndex", void 0);
+    __decorate([
+        Output()
+    ], TuiTabBarComponent.prototype, "activeItemIndexChange", void 0);
+    __decorate([
+        HostListener('click', ['$event.target'])
+    ], TuiTabBarComponent.prototype, "setActive", null);
+    __decorate([
+        HostBinding('style')
+    ], TuiTabBarComponent.prototype, "style", null);
+    TuiTabBarComponent = __decorate([
+        Component({
+            selector: 'nav[tuiTabBar]',
+            template: '<ng-content></ng-content>',
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            styles: [":host{--tui-active-color:var(--tui-primary);position:relative;display:flex;align-items:flex-start;font:.625rem/.75rem -apple-system,BlinkMacSystemFont,system-ui,Roboto,'Segoe UI',sans-serif;height:var(--tui-height-l);color:var(--tui-text-03);-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}:host:before{position:absolute;top:0;left:0;width:100%;height:100%;content:'';background:var(--tui-elevation-01);box-shadow:inset 0 1px var(--tui-base-04);opacity:.9}"]
+        })
+    ], TuiTabBarComponent);
+    return TuiTabBarComponent;
+}());
+
+var TuiTabBarItemDirective = /** @class */ (function () {
+    function TuiTabBarItemDirective(destroy$, active$, tabs, _a, changeDetectorRef) {
+        var nativeElement = _a.nativeElement;
+        active$
+            .pipe(filter(Boolean), tuiWatch(changeDetectorRef), takeUntil(destroy$))
+            .subscribe(function () {
+            tabs.setActive(nativeElement);
+        });
+    }
+    TuiTabBarItemDirective.ctorParameters = function () { return [
+        { type: Observable, decorators: [{ type: Self }, { type: Inject, args: [TuiDestroyService,] }] },
+        { type: Observable, decorators: [{ type: Inject, args: [TuiRouterLinkActiveService,] }] },
+        { type: TuiTabBarComponent, decorators: [{ type: Inject, args: [TuiTabBarComponent,] }] },
+        { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
+        { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] }
+    ]; };
+    TuiTabBarItemDirective = __decorate([
+        Directive({
+            selector: '[tuiTabBarItem][routerLinkActive]',
+            providers: [TuiRouterLinkActiveService, TuiDestroyService],
+        }),
+        __param(0, Self()), __param(0, Inject(TuiDestroyService)),
+        __param(1, Inject(TuiRouterLinkActiveService)),
+        __param(2, Inject(TuiTabBarComponent)),
+        __param(3, Inject(ElementRef)),
+        __param(4, Inject(ChangeDetectorRef))
+    ], TuiTabBarItemDirective);
+    return TuiTabBarItemDirective;
+}());
+
+var TuiTabBarModule = /** @class */ (function () {
+    function TuiTabBarModule() {
+    }
+    TuiTabBarModule = __decorate([
+        NgModule({
+            imports: [CommonModule, TuiSvgModule],
+            declarations: [TuiTabBarComponent, TuiTabBarItemComponent, TuiTabBarItemDirective],
+            exports: [TuiTabBarComponent, TuiTabBarItemComponent, TuiTabBarItemDirective],
+        })
+    ], TuiTabBarModule);
+    return TuiTabBarModule;
+}());
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TuiTabBarComponent, TuiTabBarItemComponent, TuiTabBarItemDirective, TuiTabBarModule };
+//# sourceMappingURL=taiga-ui-addon-mobile-components-tab-bar.js.map

package/fesm5/taiga-ui-addon-mobile-components-tab-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"taiga-ui-addon-mobile-components-tab-bar.js","sources":["ng://@taiga-ui/addon-mobile/components/tab-bar/tab-bar-item.component.ts","ng://@taiga-ui/addon-mobile/components/tab-bar/tab-bar.component.ts","ng://@taiga-ui/addon-mobile/components/tab-bar/tab-bar-item.directive.ts","ng://@taiga-ui/addon-mobile/components/tab-bar/tab-bar.module.ts","ng://@taiga-ui/addon-mobile/components/tab-bar/taiga-ui-addon-mobile-components-tab-bar.ts"],"sourcesContent":["import {AnimationOptions} from '@angular/animations';\nimport {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';\nimport {TUI_ANIMATION_OPTIONS, tuiScaleIn} from '@taiga-ui/core';\n\n@Component({\n    selector: 'button[tuiTabBarItem], a[tuiTabBarItem]',\n    templateUrl: './tab-bar-item.template.html',\n    styleUrls: ['./tab-bar-item.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    animations: [tuiScaleIn],\n})\nexport class TuiTabBarItemComponent {\n    @Input()\n    icon = '';\n\n    @Input()\n    badge?: number | null = null;\n\n    readonly animation = {value: '', ...this.animationOptions} as const;\n\n    constructor(\n        @Inject(TUI_ANIMATION_OPTIONS)\n        private readonly animationOptions: AnimationOptions,\n    ) {}\n\n    format(value: number): string {\n        return value > 999 ? '999+' : String(value);\n    }\n}\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    HostBinding,\n    HostListener,\n    Input,\n    Output,\n    QueryList,\n} from '@angular/core';\nimport {EMPTY_QUERY, tuiIsElement} from '@taiga-ui/cdk';\n\nimport {TuiTabBarItemComponent} from './tab-bar-item.component';\n\n@Component({\n    selector: 'nav[tuiTabBar]',\n    template: '<ng-content></ng-content>',\n    styleUrls: ['./tab-bar.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiTabBarComponent {\n    @ContentChildren(forwardRef(() => TuiTabBarItemComponent), {read: ElementRef})\n    private readonly tabs: QueryList<ElementRef<HTMLElement>> = EMPTY_QUERY;\n\n    @Input()\n    activeItemIndex = NaN;\n\n    @Output()\n    readonly activeItemIndexChange = new EventEmitter<number>();\n\n    @HostListener('click', ['$event.target'])\n    setActive(tab: EventTarget): void {\n        if (tuiIsElement(tab)) {\n            this.updateIndex(\n                this.tabs.toArray().findIndex(({nativeElement}) => nativeElement === tab),\n            );\n        }\n    }\n\n    @HostBinding('style')\n    get style(): string {\n        return `--tui-tab-${this.activeItemIndex + 1}: var(--tui-active-color)`;\n    }\n\n    private updateIndex(index: number): void {\n        this.activeItemIndex = index;\n        this.activeItemIndexChange.emit(index);\n    }\n}\n","import {ChangeDetectorRef, Directive, ElementRef, Inject, Self} from '@angular/core';\nimport {TuiDestroyService, tuiWatch} from '@taiga-ui/cdk';\nimport {TuiRouterLinkActiveService} from '@taiga-ui/core';\nimport {Observable} from 'rxjs';\nimport {filter, takeUntil} from 'rxjs/operators';\n\nimport {TuiTabBarComponent} from './tab-bar.component';\n\n@Directive({\n    selector: '[tuiTabBarItem][routerLinkActive]',\n    providers: [TuiRouterLinkActiveService, TuiDestroyService],\n})\nexport class TuiTabBarItemDirective {\n    constructor(\n        @Self() @Inject(TuiDestroyService) destroy$: Observable<unknown>,\n        @Inject(TuiRouterLinkActiveService) active$: Observable<boolean>,\n        @Inject(TuiTabBarComponent) tabs: TuiTabBarComponent,\n        @Inject(ElementRef) {nativeElement}: ElementRef<HTMLElement>,\n        @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,\n    ) {\n        active$\n            .pipe(filter(Boolean), tuiWatch(changeDetectorRef), takeUntil(destroy$))\n            .subscribe(() => {\n                tabs.setActive(nativeElement);\n            });\n    }\n}\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {TuiSvgModule} from '@taiga-ui/core';\n\nimport {TuiTabBarComponent} from './tab-bar.component';\nimport {TuiTabBarItemComponent} from './tab-bar-item.component';\nimport {TuiTabBarItemDirective} from './tab-bar-item.directive';\n\n@NgModule({\n    imports: [CommonModule, TuiSvgModule],\n    declarations: [TuiTabBarComponent, TuiTabBarItemComponent, TuiTabBarItemDirective],\n    exports: [TuiTabBarComponent, TuiTabBarItemComponent, TuiTabBarItemDirective],\n})\nexport class TuiTabBarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;IAoBI,gCAEqB,gBAAkC;QAAlC,qBAAgB,GAAhB,gBAAgB,CAAkB;QATvD,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAmB,IAAI,CAAC;QAEpB,cAAS,GAAG,WAAC,KAAK,EAAE,EAAE,IAAK,IAAI,CAAC,gBAAgB,CAAU,CAAC;KAKhE;IAEJ,uCAAM,GAAN,UAAO,KAAa;QAChB,OAAO,KAAK,GAAG,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;KAC/C;;gDANI,MAAM,SAAC,qBAAqB;;IARjC;QADC,KAAK,EAAE;wDACE;IAGV;QADC,KAAK,EAAE;yDACqB;IALpB,sBAAsB;QAPlC,SAAS,CAAC;YACP,QAAQ,EAAE,yCAAyC;YACnD,iVAA2C;YAE3C,eAAe,EAAE,uBAAuB,CAAC,MAAM;YAC/C,UAAU,EAAE,CAAC,UAAU,CAAC;;SAC3B,CAAC;QAWO,WAAA,MAAM,CAAC,qBAAqB,CAAC,CAAA;OAVzB,sBAAsB,CAiBlC;IAAD,6BAAC;CAjBD;;;ICYA;QAEqB,SAAI,GAAuC,WAAW,CAAC;QAGxE,oBAAe,GAAG,GAAG,CAAC;QAGb,0BAAqB,GAAG,IAAI,YAAY,EAAU,CAAC;KAoB/D;IAjBG,sCAAS,GAAT,UAAU,GAAgB;QACtB,IAAI,YAAY,CAAC,GAAG,CAAC,EAAE;YACnB,IAAI,CAAC,WAAW,CACZ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,SAAS,CAAC,UAAC,EAAe;oBAAd,gCAAa;gBAAM,OAAA,aAAa,KAAK,GAAG;aAAA,CAAC,CAC5E,CAAC;SACL;KACJ;IAGD,sBAAI,qCAAK;aAAT;YACI,OAAO,gBAAa,IAAI,CAAC,eAAe,GAAG,CAAC,+BAA2B,CAAC;SAC3E;;;OAAA;IAEO,wCAAW,GAAnB,UAAoB,KAAa;QAC7B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC1C;IAzBD;QADC,eAAe,CAAC,UAAU,CAAC,cAAM,OAAA,sBAAsB,GAAA,CAAC,EAAE,EAAC,IAAI,EAAE,UAAU,EAAC,CAAC;oDACN;IAGxE;QADC,KAAK,EAAE;+DACc;IAGtB;QADC,MAAM,EAAE;qEACmD;IAG5D;QADC,YAAY,CAAC,OAAO,EAAE,CAAC,eAAe,CAAC,CAAC;uDAOxC;IAGD;QADC,WAAW,CAAC,OAAO,CAAC;mDAGpB;IAtBQ,kBAAkB;QAN9B,SAAS,CAAC;YACP,QAAQ,EAAE,gBAAgB;YAC1B,QAAQ,EAAE,2BAA2B;YAErC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;SAClD,CAAC;OACW,kBAAkB,CA4B9B;IAAD,yBAAC;CA5BD;;;ICVI,gCACuC,QAA6B,EAC5B,OAA4B,EACpC,IAAwB,EAChC,EAAwC,EACjC,iBAAoC;YAD1C,gCAAa;QAGlC,OAAO;aACF,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;aACvE,SAAS,CAAC;YACP,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;SACjC,CAAC,CAAC;KACV;;gBAXgD,UAAU,uBAAtD,IAAI,YAAI,MAAM,SAAC,iBAAiB;gBACY,UAAU,uBAAtD,MAAM,SAAC,0BAA0B;gBACA,kBAAkB,uBAAnD,MAAM,SAAC,kBAAkB;gBACW,UAAU,uBAA9C,MAAM,SAAC,UAAU;gBAC4B,iBAAiB,uBAA9D,MAAM,SAAC,iBAAiB;;IANpB,sBAAsB;QAJlC,SAAS,CAAC;YACP,QAAQ,EAAE,mCAAmC;YAC7C,SAAS,EAAE,CAAC,0BAA0B,EAAE,iBAAiB,CAAC;SAC7D,CAAC;QAGO,WAAA,IAAI,EAAE,CAAA,EAAE,WAAA,MAAM,CAAC,iBAAiB,CAAC,CAAA;QACjC,WAAA,MAAM,CAAC,0BAA0B,CAAC,CAAA;QAClC,WAAA,MAAM,CAAC,kBAAkB,CAAC,CAAA;QAC1B,WAAA,MAAM,CAAC,UAAU,CAAC,CAAA;QAClB,WAAA,MAAM,CAAC,iBAAiB,CAAC,CAAA;OANrB,sBAAsB,CAclC;IAAD,6BAAC;CAdD;;;ICCA;KAA+B;IAAlB,eAAe;QAL3B,QAAQ,CAAC;YACN,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;YACrC,YAAY,EAAE,CAAC,kBAAkB,EAAE,sBAAsB,EAAE,sBAAsB,CAAC;YAClF,OAAO,EAAE,CAAC,kBAAkB,EAAE,sBAAsB,EAAE,sBAAsB,CAAC;SAChF,CAAC;OACW,eAAe,CAAG;IAAD,sBAAC;CAA/B;;ACbA;;;;;;"}

package/fesm5/taiga-ui-addon-mobile-components.js

@@ -3,6 +3,7 @@ export * from '@taiga-ui/addon-mobile/components/mobile-calendar-dialog';
 export * from '@taiga-ui/addon-mobile/components/mobile-dialog';
 export * from '@taiga-ui/addon-mobile/components/pull-to-refresh';
 export * from '@taiga-ui/addon-mobile/components/sheet';
+export * from '@taiga-ui/addon-mobile/components/tab-bar';
 export * from '@taiga-ui/addon-mobile/components/theme-android';
 export * from '@taiga-ui/addon-mobile/components/theme-ios';
 

package/fesm5/taiga-ui-addon-mobile-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-addon-mobile-components.js","sources":["ng://@taiga-ui/addon-mobile/components/taiga-ui-addon-mobile-components.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAAA;;"}
+{"version":3,"file":"taiga-ui-addon-mobile-components.js","sources":["ng://@taiga-ui/addon-mobile/components/taiga-ui-addon-mobile-components.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAAA;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/addon-mobile",
-  "version": "2.83.0",
+  "version": "2.84.0",
   "description": "Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.",
   "keywords": [
     "angular",
@@ -15,9 +15,9 @@
     "@angular/common": ">=9.0.0",
     "@angular/core": ">=9.0.0",
     "@ng-web-apis/common": ">=1.12.1 < 2",
-    "@taiga-ui/cdk": ">=2.83.0",
-    "@taiga-ui/core": ">=2.83.0",
-    "@taiga-ui/kit": ">=2.83.0",
+    "@taiga-ui/cdk": ">=2.84.0",
+    "@taiga-ui/core": ">=2.84.0",
+    "@taiga-ui/kit": ">=2.84.0",
     "@tinkoff/ng-polymorpheus": ">=3.1.12 < 4",
     "rxjs": ">=6.0.0"
   },