survey-angular-ui/esm2015/components/tagbox/tagbox.component.js

survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.

import { Component, Input } from "@angular/core";
import { DropdownMultiSelectListModel } from "survey-core";
import * as i0 from "@angular/core";
import * as i1 from "./tagbox-item.component";
import * as i2 from "../svg-icon/svg-icon.component";
import * as i3 from "../popup/popup.component";
import * as i4 from "../../survey-string.component";
import * as i5 from "@angular/common";
import * as i6 from "../../utils/dynamic.directive";
import * as i7 from "../../utils/ng-show.directive";
export class TagboxComponent {
    get dropdownModel() {
        var _a;
        return (_a = this.model) === null || _a === void 0 ? void 0 : _a.dropdownListModel;
    }
    getModel() {
        return this.model;
    }
    ngOnInit() {
        if (!this.model.dropdownListModel) {
            this.model.dropdownListModel = new DropdownMultiSelectListModel(this.model);
        }
    }
    click(event) {
        var _a;
        (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.onClick(event);
    }
    chevronPointerDown(event) {
        var _a;
        (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.chevronPointerDown(event);
    }
    clear(event) {
        var _a;
        (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.onClear(event);
    }
    keyhandler(event) {
        var _a;
        (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.keyHandler(event);
    }
    blur(event) {
        var _a;
        (_a = this.model) === null || _a === void 0 ? void 0 : _a.onBlur(event);
    }
    focus(event) {
        var _a;
        (_a = this.model) === null || _a === void 0 ? void 0 : _a.onFocus(event);
    }
}
TagboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isDisabledAttr ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-errormessage]=\"model.ariaErrormessage\" [attr.role]=\"model.ariaRole\"\n        [attr.aria-controls]=\"dropdownModel.listElementId\"\n        [attr.aria-expanded]=\"model.ariaExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"model.showClearButton\" aria-hidden=\"true\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\"\n    [attr.tabindex]=\"model.isDisabledAttr ? null : 0\"\n    [attr.disabled]=\"model.isDisabledAttr ? true : null\"\n    [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n    [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n    [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\">\n        <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\" aria-hidden=\"true\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </div>\n</div>", components: [{ type: i1.TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: i2.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i3.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }, { type: i4.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i7.VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "sv-ng-tagbox, '[sv-ng-tagbox]'",
                    templateUrl: "./tagbox.component.html"
                }]
        }], propDecorators: { model: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3RhZ2JveC90YWdib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdGFnYm94L3RhZ2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUN6RCxPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSxhQUFhLENBQUM7Ozs7Ozs7OztBQU0zRCxNQUFNLE9BQU8sZUFBZTtJQUd4QixJQUFJLGFBQWE7O1FBQ2YsT0FBTyxNQUFBLElBQUksQ0FBQyxLQUFLLDBDQUFFLGlCQUFpQixDQUFDO0lBQ3ZDLENBQUM7SUFFRCxRQUFRO1FBQ04sT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsaUJBQWlCLEVBQUU7WUFDakMsSUFBSSxDQUFDLEtBQUssQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLDRCQUE0QixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUM3RTtJQUNILENBQUM7SUFFRCxLQUFLLENBQUMsS0FBVTs7UUFDZCxNQUFBLElBQUksQ0FBQyxhQUFhLDBDQUFFLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNyQyxDQUFDO0lBQ0Qsa0JBQWtCLENBQUMsS0FBVTs7UUFDM0IsTUFBQSxJQUFJLENBQUMsYUFBYSwwQ0FBRSxrQkFBa0IsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNoRCxDQUFDO0lBQ0QsS0FBSyxDQUFDLEtBQVU7O1FBQ2QsTUFBQSxJQUFJLENBQUMsYUFBYSwwQ0FBRSxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUNELFVBQVUsQ0FBQyxLQUFVOztRQUNuQixNQUFBLElBQUksQ0FBQyxhQUFhLDBDQUFFLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBQ0QsSUFBSSxDQUFDLEtBQVU7O1FBQ2IsTUFBQSxJQUFJLENBQUMsS0FBSywwQ0FBRSxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQztJQUNELEtBQUssQ0FBQyxLQUFVOztRQUNkLE1BQUEsSUFBSSxDQUFDLEtBQUssMENBQUUsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzdCLENBQUM7OzZHQWxDUSxlQUFlO2lHQUFmLGVBQWUsa0dDUDVCLGd4RkFvQ007NEZEN0JPLGVBQWU7a0JBSjNCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGdDQUFnQztvQkFDMUMsV0FBVyxFQUFFLHlCQUF5QjtpQkFDdkM7OEJBRVksS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IERyb3Bkb3duTXVsdGlTZWxlY3RMaXN0TW9kZWwgfSBmcm9tIFwic3VydmV5LWNvcmVcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcInN2LW5nLXRhZ2JveCwgJ1tzdi1uZy10YWdib3hdJ1wiLFxuICB0ZW1wbGF0ZVVybDogXCIuL3RhZ2JveC5jb21wb25lbnQuaHRtbFwiXG59KVxuZXhwb3J0IGNsYXNzIFRhZ2JveENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gICAgQElucHV0KCkgbW9kZWw6IGFueTtcblxuICAgIGdldCBkcm9wZG93bk1vZGVsKCk6IERyb3Bkb3duTXVsdGlTZWxlY3RMaXN0TW9kZWwge1xuICAgICAgcmV0dXJuIHRoaXMubW9kZWw/LmRyb3Bkb3duTGlzdE1vZGVsO1xuICAgIH1cblxuICAgIGdldE1vZGVsKCkge1xuICAgICAgcmV0dXJuIHRoaXMubW9kZWw7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICBpZiAoIXRoaXMubW9kZWwuZHJvcGRvd25MaXN0TW9kZWwpIHtcbiAgICAgICAgdGhpcy5tb2RlbC5kcm9wZG93bkxpc3RNb2RlbCA9IG5ldyBEcm9wZG93bk11bHRpU2VsZWN0TGlzdE1vZGVsKHRoaXMubW9kZWwpO1xuICAgICAgfVxuICAgIH1cblxuICAgIGNsaWNrKGV2ZW50OiBhbnkpIHtcbiAgICAgIHRoaXMuZHJvcGRvd25Nb2RlbD8ub25DbGljayhldmVudCk7XG4gICAgfVxuICAgIGNoZXZyb25Qb2ludGVyRG93bihldmVudDogYW55KSB7XG4gICAgICB0aGlzLmRyb3Bkb3duTW9kZWw/LmNoZXZyb25Qb2ludGVyRG93bihldmVudCk7XG4gICAgfVxuICAgIGNsZWFyKGV2ZW50OiBhbnkpIHtcbiAgICAgIHRoaXMuZHJvcGRvd25Nb2RlbD8ub25DbGVhcihldmVudCk7XG4gICAgfVxuICAgIGtleWhhbmRsZXIoZXZlbnQ6IGFueSkge1xuICAgICAgdGhpcy5kcm9wZG93bk1vZGVsPy5rZXlIYW5kbGVyKGV2ZW50KTtcbiAgICB9XG4gICAgYmx1cihldmVudDogYW55KSB7XG4gICAgICB0aGlzLm1vZGVsPy5vbkJsdXIoZXZlbnQpO1xuICAgIH1cbiAgICBmb2N1cyhldmVudDogYW55KSB7XG4gICAgICB0aGlzLm1vZGVsPy5vbkZvY3VzKGV2ZW50KTtcbiAgICB9XG59IiwiPGRpdiBbY2xhc3NdPVwibW9kZWwuY3NzQ2xhc3Nlcy5zZWxlY3RXcmFwcGVyXCIgKGNsaWNrKT1cImNsaWNrKCRldmVudClcIj5cbiAgICA8ZGl2ICpuZ0lmPVwiIW1vZGVsLmlzUmVhZE9ubHlcIiBbYXR0ci50YWJpbmRleF09XCJkcm9wZG93bk1vZGVsLm5vVGFiSW5kZXggPyBudWxsIDogMFwiIFtjbGFzc109XCJtb2RlbC5nZXRDb250cm9sQ2xhc3MoKVwiXG4gICAgICAgIFthdHRyLmRpc2FibGVkXT1cIm1vZGVsLmlzRGlzYWJsZWRBdHRyID8gdHJ1ZSA6IG51bGxcIiAoYmx1cik9XCJibHVyKCRldmVudClcIlxuICAgICAgICAoa2V5ZG93bik9XCJrZXloYW5kbGVyKCRldmVudClcIiBbYXR0ci5pZF09XCJtb2RlbC5pbnB1dElkXCIgW2F0dHIuYXJpYS1yZXF1aXJlZF09XCJtb2RlbC5hcmlhUmVxdWlyZWRcIlxuICAgICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cIm1vZGVsLmFyaWFMYWJlbFwiIFthdHRyLmFyaWEtaW52YWxpZF09XCJtb2RlbC5hcmlhSW52YWxpZFwiXG4gICAgICAgIFthdHRyLmFyaWEtZXJyb3JtZXNzYWdlXT1cIm1vZGVsLmFyaWFFcnJvcm1lc3NhZ2VcIiBbYXR0ci5yb2xlXT1cIm1vZGVsLmFyaWFSb2xlXCJcbiAgICAgICAgW2F0dHIuYXJpYS1jb250cm9sc109XCJkcm9wZG93bk1vZGVsLmxpc3RFbGVtZW50SWRcIlxuICAgICAgICBbYXR0ci5hcmlhLWV4cGFuZGVkXT1cIm1vZGVsLmFyaWFFeHBhbmRlZFwiXG4gICAgICAgIFthdHRyLmFyaWEtYWN0aXZlZGVzY2VuZGFudF09XCJkcm9wZG93bk1vZGVsLmFyaWFBY3RpdmVkZXNjZW5kYW50XCI+XG4gICAgICAgIDxkaXYgW2NsYXNzXT1cIm1vZGVsLmNzc0NsYXNzZXMuY29udHJvbFZhbHVlXCI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIW1vZGVsLmlzRW1wdHkoKVwiPlxuICAgICAgICAgICAgICAgIDxzdi1uZy10YWdib3gtaXRlbSAqbmdGb3I9XCJsZXQgaXRlbSBvZiBtb2RlbC5zZWxlY3RlZENob2ljZXNcIiBbaXRlbV09XCJpdGVtXCIgW3F1ZXN0aW9uXT1cIm1vZGVsXCI+XG4gICAgICAgICAgICAgICAgPC9zdi1uZy10YWdib3gtaXRlbT5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPG5nLXRlbXBsYXRlIFtjb21wb25lbnRdPVwieyBuYW1lOiAnc3YtdGFnYm94LWZpbHRlcicsIGRhdGE6IHsgbW9kZWw6IGRyb3Bkb3duTW9kZWwsIHF1ZXN0aW9uOiBtb2RlbCB9IH1cIj48L25nLXRlbXBsYXRlPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiAqbmdJZj1cIihtb2RlbC5hbGxvd0NsZWFyICYmIG1vZGVsLmNzc0NsYXNzZXMuY2xlYW5CdXR0b25JY29uSWQpXCIgW2NsYXNzXT1cIm1vZGVsLmNzc0NsYXNzZXMuY2xlYW5CdXR0b25cIlxuICAgICAgICAgICAgKGNsaWNrKT1cImNsZWFyKCRldmVudClcIiBbdmlzaWJsZV09XCJtb2RlbC5zaG93Q2xlYXJCdXR0b25cIiBhcmlhLWhpZGRlbj1cInRydWVcIj5cbiAgICAgICAgICAgIDwhLS0ga28gY29tcG9uZW50OiB7IG5hbWU6ICdzdi1zdmctaWNvbicsIHBhcmFtczogeyBjc3M6IG1vZGVsLmNzc0NsYXNzZXMuY2xlYW5CdXR0b25TdmcsIGljb25OYW1lOiBtb2RlbC5jc3NDbGFzc2VzLmNsZWFuQnV0dG9uSWNvbklkLCBzaXplOiAnYXV0bycgfSB9IC0tPlxuICAgICAgICAgICAgPCEtLSAva28gLS0+XG4gICAgICAgICAgICA8c3ZnIFtpY29uTmFtZV09XCJtb2RlbC5jc3NDbGFzc2VzLmNsZWFuQnV0dG9uSWNvbklkXCIgW3BhcnRDc3NdPVwibW9kZWwuY3NzQ2xhc3Nlcy5jbGVhbkJ1dHRvblN2Z1wiIFt0aXRsZV09XCJtb2RlbC5jbGVhckNhcHRpb25cIlxuICAgICAgICAgICAgICAgIFtzaXplXT1cIidhdXRvJ1wiIHN2LW5nLXN2Zy1pY29uPjwvc3ZnPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8c3YtbmctcG9wdXAgKm5nSWY9XCIhbW9kZWwuaXNSZWFkT25seVwiIFtwb3B1cE1vZGVsXT1cIm1vZGVsLnBvcHVwTW9kZWxcIj48L3N2LW5nLXBvcHVwPlxuICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5pc1JlYWRPbmx5XCIgW2NsYXNzXT1cIm1vZGVsLmdldENvbnRyb2xDbGFzcygpXCIgW2F0dHIuaWRdPVwibW9kZWwuaW5wdXRJZFwiXG4gICAgW2F0dHIudGFiaW5kZXhdPVwibW9kZWwuaXNEaXNhYmxlZEF0dHIgPyBudWxsIDogMFwiXG4gICAgW2F0dHIuZGlzYWJsZWRdPVwibW9kZWwuaXNEaXNhYmxlZEF0dHIgPyB0cnVlIDogbnVsbFwiXG4gICAgW2F0dHIuYXJpYS1sYWJlbF09XCJtb2RlbC5hMTF5X2lucHV0X2FyaWFMYWJlbFwiXG4gICAgW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XT1cIm1vZGVsLmExMXlfaW5wdXRfYXJpYUxhYmVsbGVkQnlcIlxuICAgIFthdHRyLmFyaWEtZGVzY3JpYmVkYnldPVwibW9kZWwuYTExeV9pbnB1dF9hcmlhRGVzY3JpYmVkQnlcIj5cbiAgICAgICAgPHN2LW5nLXN0cmluZyAqbmdJZj1cIm1vZGVsLmxvY1JlYWRPbmx5VGV4dFwiIFttb2RlbF09XCJtb2RlbC5sb2NSZWFkT25seVRleHRcIj48L3N2LW5nLXN0cmluZz5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2ICpuZ0lmPVwibW9kZWwuY3NzQ2xhc3Nlcy5jaGV2cm9uQnV0dG9uSWNvbklkXCIgW2NsYXNzXT1cIm1vZGVsLmNzc0NsYXNzZXMuY2hldnJvbkJ1dHRvblwiIChwb2ludGVyZG93bik9XCJjaGV2cm9uUG9pbnRlckRvd24oJGV2ZW50KVwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPlxuICAgICAgICA8c3ZnIFtpY29uTmFtZV09XCJtb2RlbC5jc3NDbGFzc2VzLmNoZXZyb25CdXR0b25JY29uSWRcIiBbcGFydENzc109XCJtb2RlbC5jc3NDbGFzc2VzLmNoZXZyb25CdXR0b25TdmdcIiBbc2l6ZV09XCInYXV0bydcIiBzdi1uZy1zdmctaWNvbj48L3N2Zz5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==