@taiga-ui/kit
Version:
Taiga UI Angular main components kit
66 lines • 14.2 kB
JavaScript
import { NgForOf, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output, } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TuiControl } from '@taiga-ui/cdk/classes';
import { TUI_DEFAULT_IDENTITY_MATCHER, TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
import { tuiFallbackValueProvider } from '@taiga-ui/cdk/tokens';
import { TuiHintOverflow } from '@taiga-ui/core/directives/hint';
import { TuiBadge } from '@taiga-ui/kit/components/badge';
import { TUI_BLOCK_OPTIONS, TuiBlock } from '@taiga-ui/kit/components/block';
import { PolymorpheusOutlet, PolymorpheusTemplate } from '@taiga-ui/polymorpheus';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
class TuiFilter extends TuiControl {
constructor() {
super(...arguments);
this.identityMatcher = TUI_DEFAULT_IDENTITY_MATCHER;
this.items = [];
this.size = inject(TUI_BLOCK_OPTIONS).size;
this.disabledItemHandler = TUI_FALSE_HANDLER;
this.toggledItem = new EventEmitter();
this.content = ({ $implicit }) => String($implicit);
this.badgeHandler = (item) => Number(item);
}
onCheckbox(value, item) {
this.toggledItem.emit(item);
this.onChange(value
? [...this.value(), item]
: this.value().filter((arrItem) => !this.identityMatcher(arrItem, item)));
}
isCheckboxEnabled(item) {
return this.value().some((arrItem) => this.identityMatcher(arrItem, item));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFilter, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiFilter, isStandalone: true, selector: "tui-filter", inputs: { identityMatcher: "identityMatcher", items: "items", size: "size", disabledItemHandler: "disabledItemHandler", content: "content", badgeHandler: "badgeHandler" }, outputs: { toggledItem: "toggledItem" }, host: { properties: { "attr.data-size": "size" } }, providers: [tuiFallbackValueProvider([])], usesInheritance: true, ngImport: i0, template: "<label\n *ngFor=\"let item of items\"\n appearance=\"\"\n class=\"t-item\"\n [tuiBlock]=\"size\"\n>\n <span\n *polymorpheusOutlet=\"content as text; context: {$implicit: item}\"\n tuiHintOverflow\n class=\"t-text\"\n >\n {{ text }}\n </span>\n <tui-badge\n *ngIf=\"badgeHandler(item) as badgeValue\"\n appearance=\"neutral\"\n [size]=\"size\"\n >\n {{ badgeValue }}\n </tui-badge>\n <input\n tuiBlock\n type=\"checkbox\"\n [disabled]=\"disabledItemHandler(item)\"\n [ngModel]=\"isCheckboxEnabled(item)\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"onCheckbox($event, item)\"\n />\n</label>\n", styles: [":host{display:block;margin-bottom:calc(-1 * var(--t-gap));--t-gap: .25rem}:host[data-size=l]{--t-gap: .5rem}.t-item{max-inline-size:11rem;margin:0 var(--t-gap) var(--t-gap) 0}.t-item:last-child{margin-right:0}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge]", inputs: ["size"] }, { kind: "directive", type: TuiBlock, selector: "label[tuiBlock],input[tuiBlock]", inputs: ["tuiBlock"] }, { kind: "directive", type: TuiHintOverflow, selector: "[tuiHintOverflow]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiFilter };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFilter, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-filter', imports: [
FormsModule,
NgForOf,
NgIf,
PolymorpheusOutlet,
PolymorpheusTemplate,
TuiBadge,
TuiBlock,
TuiHintOverflow,
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiFallbackValueProvider([])], host: {
'[attr.data-size]': 'size',
}, template: "<label\n *ngFor=\"let item of items\"\n appearance=\"\"\n class=\"t-item\"\n [tuiBlock]=\"size\"\n>\n <span\n *polymorpheusOutlet=\"content as text; context: {$implicit: item}\"\n tuiHintOverflow\n class=\"t-text\"\n >\n {{ text }}\n </span>\n <tui-badge\n *ngIf=\"badgeHandler(item) as badgeValue\"\n appearance=\"neutral\"\n [size]=\"size\"\n >\n {{ badgeValue }}\n </tui-badge>\n <input\n tuiBlock\n type=\"checkbox\"\n [disabled]=\"disabledItemHandler(item)\"\n [ngModel]=\"isCheckboxEnabled(item)\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"onCheckbox($event, item)\"\n />\n</label>\n", styles: [":host{display:block;margin-bottom:calc(-1 * var(--t-gap));--t-gap: .25rem}:host[data-size=l]{--t-gap: .5rem}.t-item{max-inline-size:11rem;margin:0 var(--t-gap) var(--t-gap) 0}.t-item:last-child{margin-right:0}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
}], propDecorators: { identityMatcher: [{
type: Input
}], items: [{
type: Input
}], size: [{
type: Input
}], disabledItemHandler: [{
type: Input
}], toggledItem: [{
type: Output
}], content: [{
type: Input
}], badgeHandler: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsdGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL2ZpbHRlci9maWx0ZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvZmlsdGVyL2ZpbHRlci50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxPQUFPLEVBQUUsSUFBSSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDOUMsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxHQUNULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFDakQsT0FBTyxFQUFDLDRCQUE0QixFQUFFLGlCQUFpQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDeEYsT0FBTyxFQUFDLHdCQUF3QixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFNOUQsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLGdDQUFnQyxDQUFDO0FBRS9ELE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSxnQ0FBZ0MsQ0FBQztBQUN4RCxPQUFPLEVBQUMsaUJBQWlCLEVBQUUsUUFBUSxFQUFDLE1BQU0sZ0NBQWdDLENBQUM7QUFFM0UsT0FBTyxFQUFDLGtCQUFrQixFQUFFLG9CQUFvQixFQUFDLE1BQU0sd0JBQXdCLENBQUM7OztBQUVoRixNQXFCYSxTQUFhLFNBQVEsVUFBd0I7SUFyQjFEOztRQXVCVyxvQkFBZSxHQUEwQiw0QkFBNEIsQ0FBQztRQUd0RSxVQUFLLEdBQWlCLEVBQUUsQ0FBQztRQUd6QixTQUFJLEdBQXdCLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLElBQUksQ0FBQztRQUczRCx3QkFBbUIsR0FBeUIsaUJBQWlCLENBQUM7UUFHckQsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBSyxDQUFDO1FBRzdDLFlBQU8sR0FBd0IsQ0FBQyxFQUFDLFNBQVMsRUFBQyxFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUM7UUFHbEUsaUJBQVksR0FBMEIsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQztLQWN2RTtJQVpVLFVBQVUsQ0FBQyxLQUFjLEVBQUUsSUFBTztRQUNyQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUM1QixJQUFJLENBQUMsUUFBUSxDQUNULEtBQUs7WUFDRCxDQUFDLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxJQUFJLENBQUM7WUFDekIsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxPQUFPLEVBQUUsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FDL0UsQ0FBQztJQUNOLENBQUM7SUFFUyxpQkFBaUIsQ0FBQyxJQUFPO1FBQy9CLE9BQU8sSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUMvRSxDQUFDOytHQWpDUSxTQUFTO21HQUFULFNBQVMsa1VBTFAsQ0FBQyx3QkFBd0IsQ0FBQyxFQUFFLENBQUMsQ0FBQyxpREN6QzdDLHl1QkE2QkEsOFVEQVEsV0FBVyxnaEJBQ1gsT0FBTyxtSEFDUCxJQUFJLDZGQUNKLGtCQUFrQiw4SEFFbEIsUUFBUSxtRkFDUixRQUFRLGtHQUNSLGVBQWU7O1NBVVYsU0FBUzs0RkFBVCxTQUFTO2tCQXJCckIsU0FBUztpQ0FDTSxJQUFJLFlBQ04sWUFBWSxXQUNiO3dCQUNMLFdBQVc7d0JBQ1gsT0FBTzt3QkFDUCxJQUFJO3dCQUNKLGtCQUFrQjt3QkFDbEIsb0JBQW9CO3dCQUNwQixRQUFRO3dCQUNSLFFBQVE7d0JBQ1IsZUFBZTtxQkFDbEIsbUJBR2dCLHVCQUF1QixDQUFDLE1BQU0sYUFDcEMsQ0FBQyx3QkFBd0IsQ0FBQyxFQUFFLENBQUMsQ0FBQyxRQUNuQzt3QkFDRixrQkFBa0IsRUFBRSxNQUFNO3FCQUM3Qjs4QkFJTSxlQUFlO3NCQURyQixLQUFLO2dCQUlDLEtBQUs7c0JBRFgsS0FBSztnQkFJQyxJQUFJO3NCQURWLEtBQUs7Z0JBSUMsbUJBQW1CO3NCQUR6QixLQUFLO2dCQUlVLFdBQVc7c0JBRDFCLE1BQU07Z0JBSUEsT0FBTztzQkFEYixLQUFLO2dCQUlDLFlBQVk7c0JBRGxCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge05nRm9yT2YsIE5nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgaW5qZWN0LFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0Zvcm1zTW9kdWxlfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQge1R1aUNvbnRyb2x9IGZyb20gJ0B0YWlnYS11aS9jZGsvY2xhc3Nlcyc7XG5pbXBvcnQge1RVSV9ERUZBVUxUX0lERU5USVRZX01BVENIRVIsIFRVSV9GQUxTRV9IQU5ETEVSfSBmcm9tICdAdGFpZ2EtdWkvY2RrL2NvbnN0YW50cyc7XG5pbXBvcnQge3R1aUZhbGxiYWNrVmFsdWVQcm92aWRlcn0gZnJvbSAnQHRhaWdhLXVpL2Nkay90b2tlbnMnO1xuaW1wb3J0IHR5cGUge1xuICAgIFR1aUJvb2xlYW5IYW5kbGVyLFxuICAgIFR1aUhhbmRsZXIsXG4gICAgVHVpSWRlbnRpdHlNYXRjaGVyLFxufSBmcm9tICdAdGFpZ2EtdWkvY2RrL3R5cGVzJztcbmltcG9ydCB7VHVpSGludE92ZXJmbG93fSBmcm9tICdAdGFpZ2EtdWkvY29yZS9kaXJlY3RpdmVzL2hpbnQnO1xuaW1wb3J0IHR5cGUge1R1aVNpemVMLCBUdWlTaXplU30gZnJvbSAnQHRhaWdhLXVpL2NvcmUvdHlwZXMnO1xuaW1wb3J0IHtUdWlCYWRnZX0gZnJvbSAnQHRhaWdhLXVpL2tpdC9jb21wb25lbnRzL2JhZGdlJztcbmltcG9ydCB7VFVJX0JMT0NLX09QVElPTlMsIFR1aUJsb2NrfSBmcm9tICdAdGFpZ2EtdWkva2l0L2NvbXBvbmVudHMvYmxvY2snO1xuaW1wb3J0IHR5cGUge1BvbHltb3JwaGV1c0NvbnRlbnR9IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuaW1wb3J0IHtQb2x5bW9ycGhldXNPdXRsZXQsIFBvbHltb3JwaGV1c1RlbXBsYXRlfSBmcm9tICdAdGFpZ2EtdWkvcG9seW1vcnBoZXVzJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3R1aS1maWx0ZXInLFxuICAgIGltcG9ydHM6IFtcbiAgICAgICAgRm9ybXNNb2R1bGUsXG4gICAgICAgIE5nRm9yT2YsXG4gICAgICAgIE5nSWYsXG4gICAgICAgIFBvbHltb3JwaGV1c091dGxldCxcbiAgICAgICAgUG9seW1vcnBoZXVzVGVtcGxhdGUsXG4gICAgICAgIFR1aUJhZGdlLFxuICAgICAgICBUdWlCbG9jayxcbiAgICAgICAgVHVpSGludE92ZXJmbG93LFxuICAgIF0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL2ZpbHRlci50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9maWx0ZXIuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHByb3ZpZGVyczogW3R1aUZhbGxiYWNrVmFsdWVQcm92aWRlcihbXSldLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1thdHRyLmRhdGEtc2l6ZV0nOiAnc2l6ZScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpRmlsdGVyPFQ+IGV4dGVuZHMgVHVpQ29udHJvbDxyZWFkb25seSBUW10+IHtcbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBpZGVudGl0eU1hdGNoZXI6IFR1aUlkZW50aXR5TWF0Y2hlcjxUPiA9IFRVSV9ERUZBVUxUX0lERU5USVRZX01BVENIRVI7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBpdGVtczogcmVhZG9ubHkgVFtdID0gW107XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzaXplOiBUdWlTaXplTCB8IFR1aVNpemVTID0gaW5qZWN0KFRVSV9CTE9DS19PUFRJT05TKS5zaXplO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgZGlzYWJsZWRJdGVtSGFuZGxlcjogVHVpQm9vbGVhbkhhbmRsZXI8VD4gPSBUVUlfRkFMU0VfSEFORExFUjtcblxuICAgIEBPdXRwdXQoKVxuICAgIHB1YmxpYyByZWFkb25seSB0b2dnbGVkSXRlbSA9IG5ldyBFdmVudEVtaXR0ZXI8VD4oKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGNvbnRlbnQ6IFBvbHltb3JwaGV1c0NvbnRlbnQgPSAoeyRpbXBsaWNpdH0pID0+IFN0cmluZygkaW1wbGljaXQpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgYmFkZ2VIYW5kbGVyOiBUdWlIYW5kbGVyPFQsIG51bWJlcj4gPSAoaXRlbSkgPT4gTnVtYmVyKGl0ZW0pO1xuXG4gICAgcHVibGljIG9uQ2hlY2tib3godmFsdWU6IGJvb2xlYW4sIGl0ZW06IFQpOiB2b2lkIHtcbiAgICAgICAgdGhpcy50b2dnbGVkSXRlbS5lbWl0KGl0ZW0pO1xuICAgICAgICB0aGlzLm9uQ2hhbmdlKFxuICAgICAgICAgICAgdmFsdWVcbiAgICAgICAgICAgICAgICA/IFsuLi50aGlzLnZhbHVlKCksIGl0ZW1dXG4gICAgICAgICAgICAgICAgOiB0aGlzLnZhbHVlKCkuZmlsdGVyKChhcnJJdGVtKSA9PiAhdGhpcy5pZGVudGl0eU1hdGNoZXIoYXJySXRlbSwgaXRlbSkpLFxuICAgICAgICApO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBpc0NoZWNrYm94RW5hYmxlZChpdGVtOiBUKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLnZhbHVlKCkuc29tZSgoYXJySXRlbSkgPT4gdGhpcy5pZGVudGl0eU1hdGNoZXIoYXJySXRlbSwgaXRlbSkpO1xuICAgIH1cbn1cbiIsIjxsYWJlbFxuICAgICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zXCJcbiAgICBhcHBlYXJhbmNlPVwiXCJcbiAgICBjbGFzcz1cInQtaXRlbVwiXG4gICAgW3R1aUJsb2NrXT1cInNpemVcIlxuPlxuICAgIDxzcGFuXG4gICAgICAgICpwb2x5bW9ycGhldXNPdXRsZXQ9XCJjb250ZW50IGFzIHRleHQ7IGNvbnRleHQ6IHskaW1wbGljaXQ6IGl0ZW19XCJcbiAgICAgICAgdHVpSGludE92ZXJmbG93XG4gICAgICAgIGNsYXNzPVwidC10ZXh0XCJcbiAgICA+XG4gICAgICAgIHt7IHRleHQgfX1cbiAgICA8L3NwYW4+XG4gICAgPHR1aS1iYWRnZVxuICAgICAgICAqbmdJZj1cImJhZGdlSGFuZGxlcihpdGVtKSBhcyBiYWRnZVZhbHVlXCJcbiAgICAgICAgYXBwZWFyYW5jZT1cIm5ldXRyYWxcIlxuICAgICAgICBbc2l6ZV09XCJzaXplXCJcbiAgICA+XG4gICAgICAgIHt7IGJhZGdlVmFsdWUgfX1cbiAgICA8L3R1aS1iYWRnZT5cbiAgICA8aW5wdXRcbiAgICAgICAgdHVpQmxvY2tcbiAgICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkSXRlbUhhbmRsZXIoaXRlbSlcIlxuICAgICAgICBbbmdNb2RlbF09XCJpc0NoZWNrYm94RW5hYmxlZChpdGVtKVwiXG4gICAgICAgIFtuZ01vZGVsT3B0aW9uc109XCJ7c3RhbmRhbG9uZTogdHJ1ZX1cIlxuICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJvbkNoZWNrYm94KCRldmVudCwgaXRlbSlcIlxuICAgIC8+XG48L2xhYmVsPlxuIl19