@taiga-ui/kit/fesm2022/taiga-ui-kit-components-filter.mjs

Taiga UI Angular main components kit

import * as i0 from '@angular/core';
import { inject, input, output, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { TuiControl } from '@taiga-ui/cdk/classes';
import { TUI_STRINGIFY } from '@taiga-ui/cdk/constants';
import { tuiFallbackValueProvider } from '@taiga-ui/cdk/tokens';
import { tuiIsString, tuiIsNumber } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i1 from '@taiga-ui/core/directives/items-handlers';
import { TUI_ITEMS_HANDLERS, TuiWithItemsHandlers } from '@taiga-ui/core/directives/items-handlers';
import { TuiHintOverflow } from '@taiga-ui/core/portals/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';

class TuiFilter extends TuiControl {
    constructor() {
        super(...arguments);
        this.handlers = inject(TUI_ITEMS_HANDLERS);
        this.items = input([]);
        this.size = input(inject(TUI_BLOCK_OPTIONS).size || 'l');
        this.badgeHandler = input((item) => tuiIsString(item) || tuiIsNumber(item) ? null : Number(item));
        this.content = input(TUI_STRINGIFY);
        this.toggledItem = output();
    }
    onCheckbox(value, item) {
        this.toggledItem.emit(item);
        this.onChange(value
            ? [...this.value(), item]
            : this.value().filter((arrItem) => !this.handlers.identityMatcher()(arrItem, item)));
    }
    isCheckboxEnabled(item) {
        return this.value().some((arrItem) => this.handlers.identityMatcher()(arrItem, item));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiFilter, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiFilter, isStandalone: true, selector: "tui-filter", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, badgeHandler: { classPropertyName: "badgeHandler", publicName: "badgeHandler", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggledItem: "toggledItem" }, host: { properties: { "attr.data-size": "size()" } }, providers: [tuiFallbackValueProvider([])], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithItemsHandlers }], ngImport: i0, template: "@for (item of items(); track $index) {\n    <label\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        @if (badgeHandler()(item); as badgeValue) {\n            <div\n                appearance=\"neutral\"\n                tuiBadge\n                [size]=\"size()\"\n            >\n                {{ badgeValue }}\n            </div>\n        }\n        <input\n            tuiBlock\n            type=\"checkbox\"\n            [disabled]=\"handlers.disabledItemHandler()(item)\"\n            [ngModel]=\"isCheckboxEnabled(item)\"\n            [ngModelOptions]=\"{standalone: true}\"\n            (ngModelChange)=\"onCheckbox($event, item)\"\n        />\n    </label>\n}\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: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiBadge, selector: "[tuiBadge],tui-icon[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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiFilter, decorators: [{
            type: Component,
            args: [{ selector: 'tui-filter', imports: [FormsModule, PolymorpheusOutlet, TuiBadge, TuiBlock, TuiHintOverflow], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiFallbackValueProvider([])], hostDirectives: [TuiWithItemsHandlers], host: { '[attr.data-size]': 'size()' }, template: "@for (item of items(); track $index) {\n    <label\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        @if (badgeHandler()(item); as badgeValue) {\n            <div\n                appearance=\"neutral\"\n                tuiBadge\n                [size]=\"size()\"\n            >\n                {{ badgeValue }}\n            </div>\n        }\n        <input\n            tuiBlock\n            type=\"checkbox\"\n            [disabled]=\"handlers.disabledItemHandler()(item)\"\n            [ngModel]=\"isCheckboxEnabled(item)\"\n            [ngModelOptions]=\"{standalone: true}\"\n            (ngModelChange)=\"onCheckbox($event, item)\"\n        />\n    </label>\n}\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"] }]
        }] });

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

export { TuiFilter };
//# sourceMappingURL=taiga-ui-kit-components-filter.mjs.map