@taiga-ui/kit
Version:
Taiga UI Angular main components kit
65 lines • 14 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 } 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-block-end: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-inline-end: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]", inputs: ["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,
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-block-end: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-inline-end: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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsdGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL2ZpbHRlci9maWx0ZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvZmlsdGVyL2ZpbHRlci50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxPQUFPLEVBQUUsSUFBSSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDOUMsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxHQUNULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFDakQsT0FBTyxFQUFDLDRCQUE0QixFQUFFLGlCQUFpQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDeEYsT0FBTyxFQUFDLHdCQUF3QixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFNOUQsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLGdDQUFnQyxDQUFDO0FBRS9ELE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSxnQ0FBZ0MsQ0FBQztBQUN4RCxPQUFPLEVBQUMsaUJBQWlCLEVBQUUsUUFBUSxFQUFDLE1BQU0sZ0NBQWdDLENBQUM7QUFDM0UsT0FBTyxFQUEyQixrQkFBa0IsRUFBQyxNQUFNLHdCQUF3QixDQUFDOzs7QUFFcEYsTUFvQmEsU0FBYSxTQUFRLFVBQXdCO0lBcEIxRDs7UUFzQlcsb0JBQWUsR0FBMEIsNEJBQTRCLENBQUM7UUFHdEUsVUFBSyxHQUFpQixFQUFFLENBQUM7UUFHekIsU0FBSSxHQUF3QixNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxJQUFJLENBQUM7UUFHM0Qsd0JBQW1CLEdBQXlCLGlCQUFpQixDQUFDO1FBR3JELGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQUssQ0FBQztRQUc3QyxZQUFPLEdBQXdCLENBQUMsRUFBQyxTQUFTLEVBQUMsRUFBRSxFQUFFLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBR2xFLGlCQUFZLEdBQTBCLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7S0FjdkU7SUFaVSxVQUFVLENBQUMsS0FBYyxFQUFFLElBQU87UUFDckMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDNUIsSUFBSSxDQUFDLFFBQVEsQ0FDVCxLQUFLO1lBQ0QsQ0FBQyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLEVBQUUsSUFBSSxDQUFDO1lBQ3pCLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxDQUFDLENBQy9FLENBQUM7SUFDTixDQUFDO0lBRVMsaUJBQWlCLENBQUMsSUFBTztRQUMvQixPQUFPLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxPQUFPLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDL0UsQ0FBQzsrR0FqQ1EsU0FBUzttR0FBVCxTQUFTLGtVQUxQLENBQUMsd0JBQXdCLENBQUMsRUFBRSxDQUFDLENBQUMsaURDdkM3Qyx5dUJBNkJBLHNWRERRLFdBQVcsZ2hCQUNYLE9BQU8sbUhBQ1AsSUFBSSw2RkFDSixrQkFBa0IsOEhBQ2xCLFFBQVEsbUZBQ1IsUUFBUSxrR0FDUixlQUFlOztTQVVWLFNBQVM7NEZBQVQsU0FBUztrQkFwQnJCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLFlBQVksV0FDYjt3QkFDTCxXQUFXO3dCQUNYLE9BQU87d0JBQ1AsSUFBSTt3QkFDSixrQkFBa0I7d0JBQ2xCLFFBQVE7d0JBQ1IsUUFBUTt3QkFDUixlQUFlO3FCQUNsQixtQkFHZ0IsdUJBQXVCLENBQUMsTUFBTSxhQUNwQyxDQUFDLHdCQUF3QixDQUFDLEVBQUUsQ0FBQyxDQUFDLFFBQ25DO3dCQUNGLGtCQUFrQixFQUFFLE1BQU07cUJBQzdCOzhCQUlNLGVBQWU7c0JBRHJCLEtBQUs7Z0JBSUMsS0FBSztzQkFEWCxLQUFLO2dCQUlDLElBQUk7c0JBRFYsS0FBSztnQkFJQyxtQkFBbUI7c0JBRHpCLEtBQUs7Z0JBSVUsV0FBVztzQkFEMUIsTUFBTTtnQkFJQSxPQUFPO3NCQURiLEtBQUs7Z0JBSUMsWUFBWTtzQkFEbEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdGb3JPZiwgTmdJZn0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBpbmplY3QsXG4gICAgSW5wdXQsXG4gICAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Rm9ybXNNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7VHVpQ29udHJvbH0gZnJvbSAnQHRhaWdhLXVpL2Nkay9jbGFzc2VzJztcbmltcG9ydCB7VFVJX0RFRkFVTFRfSURFTlRJVFlfTUFUQ0hFUiwgVFVJX0ZBTFNFX0hBTkRMRVJ9IGZyb20gJ0B0YWlnYS11aS9jZGsvY29uc3RhbnRzJztcbmltcG9ydCB7dHVpRmFsbGJhY2tWYWx1ZVByb3ZpZGVyfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3Rva2Vucyc7XG5pbXBvcnQge1xuICAgIHR5cGUgVHVpQm9vbGVhbkhhbmRsZXIsXG4gICAgdHlwZSBUdWlIYW5kbGVyLFxuICAgIHR5cGUgVHVpSWRlbnRpdHlNYXRjaGVyLFxufSBmcm9tICdAdGFpZ2EtdWkvY2RrL3R5cGVzJztcbmltcG9ydCB7VHVpSGludE92ZXJmbG93fSBmcm9tICdAdGFpZ2EtdWkvY29yZS9kaXJlY3RpdmVzL2hpbnQnO1xuaW1wb3J0IHt0eXBlIFR1aVNpemVMLCB0eXBlIFR1aVNpemVTfSBmcm9tICdAdGFpZ2EtdWkvY29yZS90eXBlcyc7XG5pbXBvcnQge1R1aUJhZGdlfSBmcm9tICdAdGFpZ2EtdWkva2l0L2NvbXBvbmVudHMvYmFkZ2UnO1xuaW1wb3J0IHtUVUlfQkxPQ0tfT1BUSU9OUywgVHVpQmxvY2t9IGZyb20gJ0B0YWlnYS11aS9raXQvY29tcG9uZW50cy9ibG9jayc7XG5pbXBvcnQge3R5cGUgUG9seW1vcnBoZXVzQ29udGVudCwgUG9seW1vcnBoZXVzT3V0bGV0fSBmcm9tICdAdGFpZ2EtdWkvcG9seW1vcnBoZXVzJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3R1aS1maWx0ZXInLFxuICAgIGltcG9ydHM6IFtcbiAgICAgICAgRm9ybXNNb2R1bGUsXG4gICAgICAgIE5nRm9yT2YsXG4gICAgICAgIE5nSWYsXG4gICAgICAgIFBvbHltb3JwaGV1c091dGxldCxcbiAgICAgICAgVHVpQmFkZ2UsXG4gICAgICAgIFR1aUJsb2NrLFxuICAgICAgICBUdWlIaW50T3ZlcmZsb3csXG4gICAgXSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZmlsdGVyLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2ZpbHRlci5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJvdmlkZXJzOiBbdHVpRmFsbGJhY2tWYWx1ZVByb3ZpZGVyKFtdKV0sXG4gICAgaG9zdDoge1xuICAgICAgICAnW2F0dHIuZGF0YS1zaXplXSc6ICdzaXplJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlGaWx0ZXI8VD4gZXh0ZW5kcyBUdWlDb250cm9sPHJlYWRvbmx5IFRbXT4ge1xuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGlkZW50aXR5TWF0Y2hlcjogVHVpSWRlbnRpdHlNYXRjaGVyPFQ+ID0gVFVJX0RFRkFVTFRfSURFTlRJVFlfTUFUQ0hFUjtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGl0ZW1zOiByZWFkb25seSBUW10gPSBbXTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNpemU6IFR1aVNpemVMIHwgVHVpU2l6ZVMgPSBpbmplY3QoVFVJX0JMT0NLX09QVElPTlMpLnNpemU7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBkaXNhYmxlZEl0ZW1IYW5kbGVyOiBUdWlCb29sZWFuSGFuZGxlcjxUPiA9IFRVSV9GQUxTRV9IQU5ETEVSO1xuXG4gICAgQE91dHB1dCgpXG4gICAgcHVibGljIHJlYWRvbmx5IHRvZ2dsZWRJdGVtID0gbmV3IEV2ZW50RW1pdHRlcjxUPigpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgY29udGVudDogUG9seW1vcnBoZXVzQ29udGVudCA9ICh7JGltcGxpY2l0fSkgPT4gU3RyaW5nKCRpbXBsaWNpdCk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBiYWRnZUhhbmRsZXI6IFR1aUhhbmRsZXI8VCwgbnVtYmVyPiA9IChpdGVtKSA9PiBOdW1iZXIoaXRlbSk7XG5cbiAgICBwdWJsaWMgb25DaGVja2JveCh2YWx1ZTogYm9vbGVhbiwgaXRlbTogVCk6IHZvaWQge1xuICAgICAgICB0aGlzLnRvZ2dsZWRJdGVtLmVtaXQoaXRlbSk7XG4gICAgICAgIHRoaXMub25DaGFuZ2UoXG4gICAgICAgICAgICB2YWx1ZVxuICAgICAgICAgICAgICAgID8gWy4uLnRoaXMudmFsdWUoKSwgaXRlbV1cbiAgICAgICAgICAgICAgICA6IHRoaXMudmFsdWUoKS5maWx0ZXIoKGFyckl0ZW0pID0+ICF0aGlzLmlkZW50aXR5TWF0Y2hlcihhcnJJdGVtLCBpdGVtKSksXG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGlzQ2hlY2tib3hFbmFibGVkKGl0ZW06IFQpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMudmFsdWUoKS5zb21lKChhcnJJdGVtKSA9PiB0aGlzLmlkZW50aXR5TWF0Y2hlcihhcnJJdGVtLCBpdGVtKSk7XG4gICAgfVxufVxuIiwiPGxhYmVsXG4gICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXNcIlxuICAgIGFwcGVhcmFuY2U9XCJcIlxuICAgIGNsYXNzPVwidC1pdGVtXCJcbiAgICBbdHVpQmxvY2tdPVwic2l6ZVwiXG4+XG4gICAgPHNwYW5cbiAgICAgICAgKnBvbHltb3JwaGV1c091dGxldD1cImNvbnRlbnQgYXMgdGV4dDsgY29udGV4dDogeyRpbXBsaWNpdDogaXRlbX1cIlxuICAgICAgICB0dWlIaW50T3ZlcmZsb3dcbiAgICAgICAgY2xhc3M9XCJ0LXRleHRcIlxuICAgID5cbiAgICAgICAge3sgdGV4dCB9fVxuICAgIDwvc3Bhbj5cbiAgICA8dHVpLWJhZGdlXG4gICAgICAgICpuZ0lmPVwiYmFkZ2VIYW5kbGVyKGl0ZW0pIGFzIGJhZGdlVmFsdWVcIlxuICAgICAgICBhcHBlYXJhbmNlPVwibmV1dHJhbFwiXG4gICAgICAgIFtzaXplXT1cInNpemVcIlxuICAgID5cbiAgICAgICAge3sgYmFkZ2VWYWx1ZSB9fVxuICAgIDwvdHVpLWJhZGdlPlxuICAgIDxpbnB1dFxuICAgICAgICB0dWlCbG9ja1xuICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRJdGVtSGFuZGxlcihpdGVtKVwiXG4gICAgICAgIFtuZ01vZGVsXT1cImlzQ2hlY2tib3hFbmFibGVkKGl0ZW0pXCJcbiAgICAgICAgW25nTW9kZWxPcHRpb25zXT1cIntzdGFuZGFsb25lOiB0cnVlfVwiXG4gICAgICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uQ2hlY2tib3goJGV2ZW50LCBpdGVtKVwiXG4gICAgLz5cbjwvbGFiZWw+XG4iXX0=