@taiga-ui/kit/fesm2015/taiga-ui-kit-components-filter.js

Taiga UI Angular main components kit

import { __decorate, __param } from 'tslib';
import { EventEmitter, Optional, Self, Inject, ChangeDetectorRef, ElementRef, Input, HostBinding, Output, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { NgControl, FormsModule } from '@angular/forms';
import { TUI_DEFAULT_STRINGIFY, AbstractTuiMultipleControl, TUI_DEFAULT_IDENTITY_MATCHER, ALWAYS_FALSE_HANDLER, isNativeFocusedIn, tuiDefaultProp, tuiPure } from '@taiga-ui/cdk';
import { CommonModule } from '@angular/common';
import { TuiBadgeModule } from '@taiga-ui/kit/components/badge';
import { TuiCheckboxBlockModule } from '@taiga-ui/kit/components/checkbox-block';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';

const TUI_DEFAULT_CONTENT_STRINGIFY = item => TUI_DEFAULT_STRINGIFY(item.$implicit);
const ɵ0 = TUI_DEFAULT_CONTENT_STRINGIFY;
// @bad TODO: Add active zone to track focus
let TuiFilterComponent = class TuiFilterComponent extends AbstractTuiMultipleControl {
    constructor(control, changeDetectorRef, elementRef) {
        super(control, changeDetectorRef);
        this.elementRef = elementRef;
        this.identityMatcher = TUI_DEFAULT_IDENTITY_MATCHER;
        this.items = [];
        this.size = 'm';
        this.content = TUI_DEFAULT_CONTENT_STRINGIFY;
        this.badgeHandler = item => Number(item);
        this.disabledItemHandler = ALWAYS_FALSE_HANDLER;
        this.toggledItem = new EventEmitter();
    }
    get focused() {
        return isNativeFocusedIn(this.elementRef.nativeElement);
    }
    getItemContentContext($implicit) {
        return {
            $implicit,
        };
    }
    onCheckbox(value, item) {
        this.toggledItem.emit(item);
        this.updateValue(value
            ? [...this.value, item]
            : this.value.filter(arrItem => !this.identityMatcher(arrItem, item)));
    }
    isCheckboxEnabled(item) {
        return this.value.some(arrItem => this.identityMatcher(arrItem, item));
    }
};
TuiFilterComponent.ctorParameters = () => [
    { type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] }
];
__decorate([
    Input(),
    tuiDefaultProp()
], TuiFilterComponent.prototype, "identityMatcher", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiFilterComponent.prototype, "items", void 0);
__decorate([
    Input(),
    HostBinding('attr.data-tui-host-size'),
    tuiDefaultProp()
], TuiFilterComponent.prototype, "size", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiFilterComponent.prototype, "content", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiFilterComponent.prototype, "badgeHandler", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiFilterComponent.prototype, "disabledItemHandler", void 0);
__decorate([
    Output()
], TuiFilterComponent.prototype, "toggledItem", void 0);
__decorate([
    tuiPure
], TuiFilterComponent.prototype, "getItemContentContext", null);
TuiFilterComponent = __decorate([
    Component({
        selector: 'tui-filter',
        template: "<ng-container *ngFor=\"let item of items\">\n    <tui-checkbox-block\n        automation-id=\"tui-filter__checkbox\"\n        class=\"item\"\n        [disabled]=\"disabledItemHandler(item)\"\n        [hideCheckbox]=\"true\"\n        [ngModel]=\"isCheckboxEnabled(item)\"\n        [size]=\"size\"\n        (ngModelChange)=\"onCheckbox($event, item)\"\n    >\n        <div automation-id=\"tui-filter__content\" class=\"content\">\n            <div\n                polymorpheus-outlet\n                [content]=\"content\"\n                [context]=\"getItemContentContext(item)\"\n            ></div>\n            <tui-badge\n                *ngIf=\"badgeHandler(item) as badgeValue\"\n                automation-id=\"tui-filter__badge\"\n                class=\"badge\"\n                status=\"light\"\n                [class.badge_disabled]=\"disabledItemHandler(item)\"\n                [size]=\"size\"\n                [value]=\"badgeValue\"\n            ></tui-badge>\n        </div>\n    </tui-checkbox-block>\n</ng-container>\n",
        changeDetection: ChangeDetectionStrategy.OnPush,
        styles: [":host{display:block;margin-bottom:-4px}.content{display:flex;align-items:center}.item{margin-right:4px;margin-bottom:4px}.item:last-child,:host[data-tui-host-size='l'] .item:last-child{margin-right:0}:host[data-tui-host-size='l'] .item{margin-right:8px;margin-bottom:8px}.badge{margin-left:4px}.badge_disabled{opacity:var(--tui-disabled-opacity)}"]
    }),
    __param(0, Optional()),
    __param(0, Self()),
    __param(0, Inject(NgControl)),
    __param(1, Inject(ChangeDetectorRef)),
    __param(2, Inject(ElementRef))
], TuiFilterComponent);

let TuiFilterModule = class TuiFilterModule {
};
TuiFilterModule = __decorate([
    NgModule({
        imports: [
            CommonModule,
            PolymorpheusModule,
            TuiCheckboxBlockModule,
            TuiBadgeModule,
            FormsModule,
        ],
        declarations: [TuiFilterComponent],
        exports: [TuiFilterComponent],
    })
], TuiFilterModule);

/**
 * Generated bundle index. Do not edit.
 */

export { TuiFilterComponent, TuiFilterModule, ɵ0 };
//# sourceMappingURL=taiga-ui-kit-components-filter.js.map