import { Component, Input, ViewEncapsulation } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../services/tags/tags.services";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "ngx-chips";
export class TagsComponent {
    constructor(tagsServices) {
        this.tagsServices = tagsServices;
        this.validators = [this.minLength, this.maxLength20];
        this.errorMessages = {
            'minLength': 'Minimum of 2 characters',
            'maxLength20': 'Maximum of 20 characters'
        };
        this.requestAutocompleteItems = (text) => {
            return this.tagsServices.getAllTags(this.userId);
        };
    }
    onUpdateTags(value) {
        this.tagsServices.updateTagItems(value, this.annoId);
    }
    minLength(control) {
        if (control.value.length < 2) {
            return {
                'minLength': true
            };
        }
        return null;
    }
    maxLength20(control) {
        if (control.value.length >= 20) {
            return {
                'maxLength20': true
            };
        }
        return null;
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagsComponent, deps: [{ token: i1.TagsServices }], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TagsComponent, selector: "mv-tags", inputs: { tagItems: "tagItems", userId: "userId", editable: "editable", annoId: "annoId" }, ngImport: i0, template: "<div class=\"tags\">\n  <tag-input\n    *ngIf=\"editable\" class=\"tags__edit\"\n    [maxItems]=\"10\"\n    [ngModel]=\"tagItems\"\n    (ngModelChange)=\"tagItems = $event; onUpdateTags($event)\"\n    [ngModelOptions]=\"{standalone:true}\"\n    [placeholder]=\"'Add tag'\"\n    [displayBy]=\"'label'\"\n    [identifyBy]=\"'name'\"\n    [onTextChangeDebounce]=\"250\"\n    [secondaryPlaceholder]=\"'Search or add tags'\"\n    [validators]=\"validators\"\n    [errorMessages]=\"errorMessages\"\n    [onlyFromAutocomplete]=\"false\">\n    <tag-input-dropdown\n      [autocompleteObservable]=\"requestAutocompleteItems\"\n      [displayBy]=\"'label'\"\n      [identifyBy]=\"'name'\"\n      [zIndex]=\"10000\"\n      [minimumTextLength]=\"2\">\n      <ng-template let-item=\"item\" let-index=\"index\">\n        {{ item.label }}\n      </ng-template>\n    </tag-input-dropdown>\n  </tag-input>\n\n  <div class=\"tags__renderer\" *ngIf=\"!editable && (tagItems && tagItems.length)\">\n    <span *ngFor=\"let tag of tagItems\" class=\"tags__item hmcts-badge\">\n      {{tag.label}}\n    </span>\n  </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.TagInputComponent, selector: "tag-input", inputs: ["separatorKeys", "separatorKeyCodes", "placeholder", "secondaryPlaceholder", "maxItems", "validators", "asyncValidators", "onlyFromAutocomplete", "errorMessages", "theme", "onTextChangeDebounce", "inputId", "inputClass", "clearOnBlur", "hideForm", "addOnBlur", "addOnPaste", "pasteSplitPattern", "blinkIfDupe", "removable", "editable", "allowDupes", "modelAsStrings", "trimTags", "inputText", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration"], outputs: ["onAdd", "onRemove", "onSelect", "onFocus", "onBlur", "onTextChange", "onPaste", "onValidationError", "onTagEdited", "inputTextChange"] }, { kind: "component", type: i4.TagInputDropdown, selector: "tag-input-dropdown", inputs: ["offset", "focusFirstElement", "showDropdownIfEmpty", "autocompleteObservable", "minimumTextLength", "limitItemsTo", "displayBy", "identifyBy", "matchingFn", "appendToBody", "keepOpen", "dynamicUpdate", "zIndex", "autocompleteItems"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mv-tags', encapsulation: ViewEncapsulation.None, template: "<div class=\"tags\">\n  <tag-input\n    *ngIf=\"editable\" class=\"tags__edit\"\n    [maxItems]=\"10\"\n    [ngModel]=\"tagItems\"\n    (ngModelChange)=\"tagItems = $event; onUpdateTags($event)\"\n    [ngModelOptions]=\"{standalone:true}\"\n    [placeholder]=\"'Add tag'\"\n    [displayBy]=\"'label'\"\n    [identifyBy]=\"'name'\"\n    [onTextChangeDebounce]=\"250\"\n    [secondaryPlaceholder]=\"'Search or add tags'\"\n    [validators]=\"validators\"\n    [errorMessages]=\"errorMessages\"\n    [onlyFromAutocomplete]=\"false\">\n    <tag-input-dropdown\n      [autocompleteObservable]=\"requestAutocompleteItems\"\n      [displayBy]=\"'label'\"\n      [identifyBy]=\"'name'\"\n      [zIndex]=\"10000\"\n      [minimumTextLength]=\"2\">\n      <ng-template let-item=\"item\" let-index=\"index\">\n        {{ item.label }}\n      </ng-template>\n    </tag-input-dropdown>\n  </tag-input>\n\n  <div class=\"tags__renderer\" *ngIf=\"!editable && (tagItems && tagItems.length)\">\n    <span *ngFor=\"let tag of tagItems\" class=\"tags__item hmcts-badge\">\n      {{tag.label}}\n    </span>\n  </div>\n</div>\n\n" }]
        }], ctorParameters: () => [{ type: i1.TagsServices }], propDecorators: { tagItems: [{
                type: Input
            }], userId: [{
                type: Input
            }], editable: [{
                type: Input
            }], annoId: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 