survey-creator-angular 1.10.6 → 1.11.2

package/esm2015/custom-questions/color.component.js

@@ -6,7 +6,7 @@ import * as i2 from "@angular/common";
 export class QuestionColorComponent extends QuestionAngular {
 }
 QuestionColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionColorComponent, selector: "svc-color", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDown($event)\">\n  <label [class]=\"model.getSwatchCss()\" [style]=\"model.getSwatchStyle()\">\n    <svg [iconName]=\"model.cssClasses.swatchIcon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <input type=\"color\" [disabled]=\"model.isInputReadOnly\" [class]=\"model.cssClasses.colorInput\"\n      [value]=\"model.renderedColorValue\" (change)=\"model.onColorInputChange($event)\" tabindex=\"-1\"/>\n  </label>\n  <input autocomplete=\"off\" [disabled]=\"model.isInputReadOnly\" [attr.id]=\"model.inputId\"\n    [placeholder]=\"model.renderedPlaceholder\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\" (change)=\"model.onChange($event)\" (keyup)=\"model.onKeyUp($event)\"\n    (blur)=\"model.onBlur($event)\" (beforeinput)=\"model.onBeforeInput($event)\" [value]=\"model.renderedValue\"\n    [class]=\"model.cssClasses.control\" />\n  <ng-container *ngIf=\"model.showDropdownAction\">\n    <sv-action-bar-item [model]=\"model.dropdownAction\"></sv-action-bar-item>\n    <sv-ng-popup [popupModel]=\"model.dropdownAction.popupModel\"></sv-ng-popup>\n  </ng-container>\n</div>", components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarItemComponent, selector: "sv-action-bar-item", inputs: ["model"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+QuestionColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionColorComponent, selector: "svc-color", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDown($event)\">\n  <label [class]=\"model.getSwatchCss()\" [style]=\"model.getSwatchStyle()\">\n    <svg [iconName]=\"model.cssClasses.swatchIcon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <input type=\"color\" [disabled]=\"model.isInputReadOnly\" [class]=\"model.cssClasses.colorInput\"\n      [value]=\"model.renderedColorValue\" (change)=\"model.onColorInputChange($event)\" tabindex=\"-1\"/>\n  </label>\n  <input autocomplete=\"off\" [disabled]=\"model.isInputReadOnly\" [attr.id]=\"model.inputId\"\n    [placeholder]=\"model.renderedPlaceholder\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\" (change)=\"model.onChange($event)\" (keyup)=\"model.onKeyUp($event)\"\n    (blur)=\"model.onBlur($event)\" (beforeinput)=\"model.onBeforeInput($event)\" [value]=\"model.renderedValue\"\n    [class]=\"model.cssClasses.control\" />\n  <ng-container *ngIf=\"model.showDropdownAction\">\n    <sv-action-bar-item [model]=\"model.dropdownAction\"></sv-action-bar-item>\n    <sv-ng-popup [popupModel]=\"model.dropdownAction.popupModel\"></sv-ng-popup>\n  </ng-container>\n</div>", components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarItemComponent, selector: "sv-action-bar-item", inputs: ["model"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionColorComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/page-add-question.component.js

@@ -17,7 +17,7 @@ export class AddQuestionButtonComponent extends ActionBarItemComponent {
     }
 }
 AddQuestionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddQuestionButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AddQuestionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionButtonComponent, selector: "svc-add-new-question-btn", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-page__add-new-question svc-btn\" [key2click]\n    (click)=\"addNewQuestion($event)\" (mouseover)=\"adorner.hoverStopper($event, $event.currentTarget)\"\n    data-bind=\"clickBubble: false\">\n    <span class=\"svc-text svc-text--normal svc-text--bold\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <button type=\"button\" [key2click] (click)=\"selectQuestionType($event)\"\n      [attr.title]=\"adorner.questionTypeSelectorModel.title\" [attr.aria-label]=\"adorner.questionTypeSelectorModel.title\"\n      class=\"svc-page__question-type-selector\">\n      <svg class=\"svc-page__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n        [size]=\"24\" sv-ng-svg-icon></svg>\n      <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n    </button>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+AddQuestionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionButtonComponent, selector: "svc-add-new-question-btn", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-page__add-new-question svc-btn\" [key2click]\n    (click)=\"addNewQuestion($event)\" (mouseover)=\"adorner.hoverStopper($event, $event.currentTarget)\"\n    data-bind=\"clickBubble: false\">\n    <span class=\"svc-text svc-text--normal svc-text--bold\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <button type=\"button\" [key2click] (click)=\"selectQuestionType($event)\"\n      [attr.title]=\"adorner.questionTypeSelectorModel.title\" [attr.aria-label]=\"adorner.questionTypeSelectorModel.title\"\n      class=\"svc-page__question-type-selector\">\n      <svg class=\"svc-page__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n        [size]=\"24\" sv-ng-svg-icon></svg>\n      <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n    </button>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddQuestionButtonComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/page-navigator/page-navigator.component.js

@@ -42,7 +42,7 @@ export class PageNavigatorComponent extends CreatorModelComponent {
     }
 }
 PageNavigatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageNavigatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PageNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: { pagesController: "pagesController", pageEditMode: "pageEditMode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-page-navigator\" #container [visible]=\"model.visible\">\n      <div class=\"svc-page-navigator__selector\"\n          (click)=\"model.togglePageSelector($event)\" [key2click] [attr.title]=\"model.pageSelectorCaption\" [class.svc-page-navigator__selector--opened]=\"model.isPopupOpened\">\n          <svg class=\"svc-page-navigator__navigator-icon\" [iconName]=\"model.icon\" [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n      <div>\n        <svc-page-navigator-item *ngFor=\"let item of model.visibleItems\" [model]=\"item\"></svc-page-navigator-item>\n      </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }, { type: i2.PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+PageNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: { pagesController: "pagesController", pageEditMode: "pageEditMode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-page-navigator\" #container [visible]=\"model.visible\">\n      <div class=\"svc-page-navigator__selector\"\n          (click)=\"model.togglePageSelector($event)\" [key2click] [attr.title]=\"model.pageSelectorCaption\" [class.svc-page-navigator__selector--opened]=\"model.isPopupOpened\">\n          <svg class=\"svc-page-navigator__navigator-icon\" [iconName]=\"model.icon\" [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n      <div>\n        <svc-page-navigator-item *ngFor=\"let item of model.visibleItems\" [model]=\"item\"></svc-page-navigator-item>\n      </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }, { type: i2.PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageNavigatorComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/panel.component.js

@@ -7,7 +7,7 @@ import * as i2 from "@angular/common";
 export class PanelDesignerComponent extends QuestionDesignerComponent {
 }
 PanelDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PanelDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n          <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n            (click)=\"addNewQuestion($event)\">\n            <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n            <span class=\"svc-text svc-text--normal svc-text--bold\">\n              {{ adorner.addNewQuestionText }}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__question-type-selector-popup\"> <sv-ng-popup\n            [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </div>\n        <div class=\"svc-panel__add-new-question-wrapper\">\n          <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\">\n            <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"24\" sv-ng-svg-icon></svg>\n            <span class=\"svc-text svc-text--normal svc-text--bold\">\n              {{ adorner.addNewQuestionText }}\n            </span>\n          </div>\n          <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n            class=\"svc-panel__question-type-selector\">\n            <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n              [size]=\"24\" sv-ng-svg-icon></svg>\n          </button>\n        </div>\n      </div>\n\n      <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+PanelDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n          <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n            (click)=\"addNewQuestion($event)\">\n            <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n            <span class=\"svc-text svc-text--normal svc-text--bold\">\n              {{ adorner.addNewQuestionText }}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__question-type-selector-popup\"> <sv-ng-popup\n            [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </div>\n        <div class=\"svc-panel__add-new-question-wrapper\">\n          <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\">\n            <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"24\" sv-ng-svg-icon></svg>\n            <span class=\"svc-text svc-text--normal svc-text--bold\">\n              {{ adorner.addNewQuestionText }}\n            </span>\n          </div>\n          <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n            class=\"svc-panel__question-type-selector\">\n            <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n              [size]=\"24\" sv-ng-svg-icon></svg>\n          </button>\n        </div>\n      </div>\n\n      <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDesignerComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/questions/logic-operator.component.js

@@ -28,7 +28,7 @@ export class LogicOperatorComponent extends QuestionAngular {
     }
 }
 LogicOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LogicOperatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-LogicOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogicOperatorComponent, selector: "svc-logic-operator", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <ng-container *ngIf=\"!model.isReadOnly\">\n      <div [class]=\"model.getControlClass()\"  (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n        [attr.id]=\"model.inputId\" \n        [attr.required]=\"model.isRequired\" \n        [attr.tabindex]= \"model.isInputReadOnly ? undefined : 0\"\n        [attr.disabled]=\"model.isInputReadOnly\"\n        [attr.role]=\"model.ariaRole\"\n        [attr.aria-required]=\"model.ariaRequired\" \n        [attr.aria-label]=\"model.ariaLabel\" \n        [attr.aria-invalid]=\"model.ariaInvalid\" \n        [attr.aria-describedby]= \"model.ariaDescribedBy\" \n      >\n        <div [class]=\"model.cssClasses.controlValue\">\n          <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n          <div>{{model.readOnlyText}}</div>\n        </div>\n        <div *ngIf=\"model.allowClear && model.cssClasses.cleanButtonIconId\" [class]=\"model.cssClasses.cleanButton\" (click)=\"clear\" [visible]=\"!model.isEmpty()\">\n          <svg [class]=\"model.cssClasses.cleanButtonSvg\" [iconName]=\"model.cssClasses.cleanButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearCaption\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </ng-container>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n      <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n      <div>{{model.readOnlyText}}</div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+LogicOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogicOperatorComponent, selector: "svc-logic-operator", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <ng-container *ngIf=\"!model.isReadOnly\">\n      <div [class]=\"model.getControlClass()\"  (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n        [attr.id]=\"model.inputId\" \n        [attr.required]=\"model.isRequired\" \n        [attr.tabindex]= \"model.isInputReadOnly ? undefined : 0\"\n        [attr.disabled]=\"model.isInputReadOnly\"\n        [attr.role]=\"model.ariaRole\"\n        [attr.aria-required]=\"model.ariaRequired\" \n        [attr.aria-label]=\"model.ariaLabel\" \n        [attr.aria-invalid]=\"model.ariaInvalid\" \n        [attr.aria-describedby]= \"model.ariaDescribedBy\" \n      >\n        <div [class]=\"model.cssClasses.controlValue\">\n          <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n          <div>{{model.readOnlyText}}</div>\n        </div>\n        <div *ngIf=\"model.allowClear && model.cssClasses.cleanButtonIconId\" [class]=\"model.cssClasses.cleanButton\" (click)=\"clear\" [visible]=\"!model.isEmpty()\">\n          <svg [class]=\"model.cssClasses.cleanButtonSvg\" [iconName]=\"model.cssClasses.cleanButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearCaption\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </ng-container>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n      <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n      <div>{{model.readOnlyText}}</div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LogicOperatorComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/tabs/theme/theme.component.js

@@ -23,4 +23,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 AngularComponentFactory.Instance.registerComponent("svc-tab-theme", ThemeTabComponent);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3RhYnMvdGhlbWUvdGhlbWUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL3RhYnMvdGhlbWUvdGhlbWUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFdBQVcsRUFBRSxNQUFNLG1CQUFtQixDQUFDOzs7Ozs7QUFPekUsTUFBTSxPQUFPLGlCQUFrQixTQUFRLFdBQTZCO0lBRXhELFFBQVE7UUFDaEIsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7OytHQUpVLGlCQUFpQjttR0FBakIsaUJBQWlCLHdHQ1Q5QiwycEJBYWM7NEZESkQsaUJBQWlCO2tCQUw3QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxlQUFlO29CQUN6QixXQUFXLEVBQUUsd0JBQXdCO29CQUNyQyxNQUFNLEVBQUUsQ0FBQywwQkFBMEIsQ0FBQztpQkFDckM7OEJBRVUsS0FBSztzQkFBYixLQUFLOztBQUtSLHVCQUF1QixDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsQ0FBQyxlQUFlLEVBQUUsaUJBQWlCLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFRoZW1lRWRpdG9yTW9kZWwgfSBmcm9tIFwic3VydmV5LWNyZWF0b3ItY29yZVwiO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBBbmd1bGFyQ29tcG9uZW50RmFjdG9yeSwgQmFzZUFuZ3VsYXIgfSBmcm9tIFwic3VydmV5LWFuZ3VsYXItdWlcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcInN2Yy10YWItdGhlbWVcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi90aGVtZS5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZXM6IFtcIjpob3N0IHsgZGlzcGxheTogbm9uZTsgfVwiXVxufSlcbmV4cG9ydCBjbGFzcyBUaGVtZVRhYkNvbXBvbmVudCBleHRlbmRzIEJhc2VBbmd1bGFyPFRoZW1lRWRpdG9yTW9kZWw+IHtcbiAgQElucHV0KCkgbW9kZWwhOiBUaGVtZUVkaXRvck1vZGVsO1xuICBwcm90ZWN0ZWQgZ2V0TW9kZWwoKTogVGhlbWVFZGl0b3JNb2RlbCB7XG4gICAgcmV0dXJuIHRoaXMubW9kZWw7XG4gIH1cbn1cbkFuZ3VsYXJDb21wb25lbnRGYWN0b3J5Lkluc3RhbmNlLnJlZ2lzdGVyQ29tcG9uZW50KFwic3ZjLXRhYi10aGVtZVwiLCBUaGVtZVRhYkNvbXBvbmVudCk7XG4iLCI8bmctdGVtcGxhdGUgI3RlbXBsYXRlPlxuICA8ZGl2IGNsYXNzPVwic3ZjLWNyZWF0b3ItdGFiX19jb250ZW50IHN2Yy10ZXN0LXRhYl9fY29udGVudFwiXG4gICAgW2NsYXNzLnN2Yy1jcmVhdG9yLXRhYl9fY29udGVudC0td2l0aC10b29sYmFyXT1cIm1vZGVsLmlzUGFnZVRvb2xiYXJWaXNpYmxlXCI+XG4gICAgPGRpdiBjbGFzcz1cInN2Yy1wbHVnaW4tdGFiX19jb250ZW50XCI+XG4gICAgICA8c3VydmV5LXNpbXVsYXRvciBbbW9kZWxdPVwibW9kZWwuc2ltdWxhdG9yXCI+PC9zdXJ2ZXktc2ltdWxhdG9yPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIm1vZGVsLnNob3dSZXN1bHRzXCI+XG4gICAgICAgIDxzdXJ2ZXktcmVzdWx0cyBbc3VydmV5XT1cIm1vZGVsLnN1cnZleVwiPjwvc3VydmV5LXJlc3VsdHM+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2ICpuZ0lmPVwibW9kZWwuaXNQYWdlVG9vbGJhclZpc2libGVcIiBjbGFzcz1cInN2Yy1wbHVnaW4tdGFiX19jb250ZW50LWFjdGlvbnMgc3ZjLXRlc3QtdGFiX19jb250ZW50LWFjdGlvbnNcIj5cbiAgICAgIDxzdi1hY3Rpb24tYmFyIFttb2RlbF09XCJtb2RlbC5wYWdlc1wiPjwvc3YtYWN0aW9uLWJhcj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3RhYnMvdGhlbWUvdGhlbWUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL3RhYnMvdGhlbWUvdGhlbWUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFdBQVcsRUFBRSxNQUFNLG1CQUFtQixDQUFDOzs7Ozs7QUFPekUsTUFBTSxPQUFPLGlCQUFrQixTQUFRLFdBQThCO0lBRXpELFFBQVE7UUFDaEIsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7OytHQUpVLGlCQUFpQjttR0FBakIsaUJBQWlCLHdHQ1Q5QiwycEJBYWM7NEZESkQsaUJBQWlCO2tCQUw3QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxlQUFlO29CQUN6QixXQUFXLEVBQUUsd0JBQXdCO29CQUNyQyxNQUFNLEVBQUUsQ0FBQywwQkFBMEIsQ0FBQztpQkFDckM7OEJBRVUsS0FBSztzQkFBYixLQUFLOztBQUtSLHVCQUF1QixDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsQ0FBQyxlQUFlLEVBQUUsaUJBQWlCLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFRoZW1lVGFiVmlld01vZGVsIH0gZnJvbSBcInN1cnZleS1jcmVhdG9yLWNvcmVcIjtcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQW5ndWxhckNvbXBvbmVudEZhY3RvcnksIEJhc2VBbmd1bGFyIH0gZnJvbSBcInN1cnZleS1hbmd1bGFyLXVpXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJzdmMtdGFiLXRoZW1lXCIsXG4gIHRlbXBsYXRlVXJsOiBcIi4vdGhlbWUuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVzOiBbXCI6aG9zdCB7IGRpc3BsYXk6IG5vbmU7IH1cIl1cbn0pXG5leHBvcnQgY2xhc3MgVGhlbWVUYWJDb21wb25lbnQgZXh0ZW5kcyBCYXNlQW5ndWxhcjxUaGVtZVRhYlZpZXdNb2RlbD4ge1xuICBASW5wdXQoKSBtb2RlbCE6IFRoZW1lVGFiVmlld01vZGVsO1xuICBwcm90ZWN0ZWQgZ2V0TW9kZWwoKTogVGhlbWVUYWJWaWV3TW9kZWwge1xuICAgIHJldHVybiB0aGlzLm1vZGVsO1xuICB9XG59XG5Bbmd1bGFyQ29tcG9uZW50RmFjdG9yeS5JbnN0YW5jZS5yZWdpc3RlckNvbXBvbmVudChcInN2Yy10YWItdGhlbWVcIiwgVGhlbWVUYWJDb21wb25lbnQpO1xuIiwiPG5nLXRlbXBsYXRlICN0ZW1wbGF0ZT5cbiAgPGRpdiBjbGFzcz1cInN2Yy1jcmVhdG9yLXRhYl9fY29udGVudCBzdmMtdGVzdC10YWJfX2NvbnRlbnRcIlxuICAgIFtjbGFzcy5zdmMtY3JlYXRvci10YWJfX2NvbnRlbnQtLXdpdGgtdG9vbGJhcl09XCJtb2RlbC5pc1BhZ2VUb29sYmFyVmlzaWJsZVwiPlxuICAgIDxkaXYgY2xhc3M9XCJzdmMtcGx1Z2luLXRhYl9fY29udGVudFwiPlxuICAgICAgPHN1cnZleS1zaW11bGF0b3IgW21vZGVsXT1cIm1vZGVsLnNpbXVsYXRvclwiPjwvc3VydmV5LXNpbXVsYXRvcj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJtb2RlbC5zaG93UmVzdWx0c1wiPlxuICAgICAgICA8c3VydmV5LXJlc3VsdHMgW3N1cnZleV09XCJtb2RlbC5zdXJ2ZXlcIj48L3N1cnZleS1yZXN1bHRzPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG4gICAgPGRpdiAqbmdJZj1cIm1vZGVsLmlzUGFnZVRvb2xiYXJWaXNpYmxlXCIgY2xhc3M9XCJzdmMtcGx1Z2luLXRhYl9fY29udGVudC1hY3Rpb25zIHN2Yy10ZXN0LXRhYl9fY29udGVudC1hY3Rpb25zXCI+XG4gICAgICA8c3YtYWN0aW9uLWJhciBbbW9kZWxdPVwibW9kZWwucGFnZXNcIj48L3N2LWFjdGlvbi1iYXI+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT4iXX0=

package/fesm2015/survey-creator-angular.js

@@ -403,7 +403,7 @@ class PageNavigatorComponent extends CreatorModelComponent {
     }
 }
 PageNavigatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageNavigatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PageNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: { pagesController: "pagesController", pageEditMode: "pageEditMode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-page-navigator\" #container [visible]=\"model.visible\">\n      <div class=\"svc-page-navigator__selector\"\n          (click)=\"model.togglePageSelector($event)\" [key2click] [attr.title]=\"model.pageSelectorCaption\" [class.svc-page-navigator__selector--opened]=\"model.isPopupOpened\">\n          <svg class=\"svc-page-navigator__navigator-icon\" [iconName]=\"model.icon\" [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n      <div>\n        <svc-page-navigator-item *ngFor=\"let item of model.visibleItems\" [model]=\"item\"></svc-page-navigator-item>\n      </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }, { type: PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+PageNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageNavigatorComponent, selector: "svc-page-navigator", inputs: { pagesController: "pagesController", pageEditMode: "pageEditMode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div class=\"svc-page-navigator\" #container [visible]=\"model.visible\">\n      <div class=\"svc-page-navigator__selector\"\n          (click)=\"model.togglePageSelector($event)\" [key2click] [attr.title]=\"model.pageSelectorCaption\" [class.svc-page-navigator__selector--opened]=\"model.isPopupOpened\">\n          <svg class=\"svc-page-navigator__navigator-icon\" [iconName]=\"model.icon\" [size]=\"24\" sv-ng-svg-icon></svg>\n          <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n      </div>\n      <div>\n        <svc-page-navigator-item *ngFor=\"let item of model.visibleItems\" [model]=\"item\"></svc-page-navigator-item>\n      </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }, { type: PageNavigatorItemComponent, selector: "svc-page-navigator-item", inputs: ["model"] }], directives: [{ type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageNavigatorComponent, decorators: [{
             type: Component,
             args: [{
@@ -931,7 +931,7 @@ class AddQuestionButtonComponent extends ActionBarItemComponent {
     }
 }
 AddQuestionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddQuestionButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AddQuestionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionButtonComponent, selector: "svc-add-new-question-btn", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-page__add-new-question svc-btn\" [key2click]\n    (click)=\"addNewQuestion($event)\" (mouseover)=\"adorner.hoverStopper($event, $event.currentTarget)\"\n    data-bind=\"clickBubble: false\">\n    <span class=\"svc-text svc-text--normal svc-text--bold\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <button type=\"button\" [key2click] (click)=\"selectQuestionType($event)\"\n      [attr.title]=\"adorner.questionTypeSelectorModel.title\" [attr.aria-label]=\"adorner.questionTypeSelectorModel.title\"\n      class=\"svc-page__question-type-selector\">\n      <svg class=\"svc-page__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n        [size]=\"24\" sv-ng-svg-icon></svg>\n      <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n    </button>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+AddQuestionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddQuestionButtonComponent, selector: "svc-add-new-question-btn", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-page__add-new-question svc-btn\" [key2click]\n    (click)=\"addNewQuestion($event)\" (mouseover)=\"adorner.hoverStopper($event, $event.currentTarget)\"\n    data-bind=\"clickBubble: false\">\n    <span class=\"svc-text svc-text--normal svc-text--bold\">\n      {{ adorner.addNewQuestionText }}\n    </span>\n    <button type=\"button\" [key2click] (click)=\"selectQuestionType($event)\"\n      [attr.title]=\"adorner.questionTypeSelectorModel.title\" [attr.aria-label]=\"adorner.questionTypeSelectorModel.title\"\n      class=\"svc-page__question-type-selector\">\n      <svg class=\"svc-page__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n        [size]=\"24\" sv-ng-svg-icon></svg>\n      <sv-ng-popup [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n    </button>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddQuestionButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -1234,7 +1234,7 @@ AngularComponentFactory.Instance.registerComponent("svc-image-question-adorner",
 class PanelDesignerComponent extends QuestionDesignerComponent {
 }
 PanelDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PanelDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n          <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n            (click)=\"addNewQuestion($event)\">\n            <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n            <span class=\"svc-text svc-text--normal svc-text--bold\">\n              {{ adorner.addNewQuestionText }}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__question-type-selector-popup\"> <sv-ng-popup\n            [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </div>\n        <div class=\"svc-panel__add-new-question-wrapper\">\n          <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\">\n            <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"24\" sv-ng-svg-icon></svg>\n            <span class=\"svc-text svc-text--normal svc-text--bold\">\n              {{ adorner.addNewQuestionText }}\n            </span>\n          </div>\n          <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n            class=\"svc-panel__question-type-selector\">\n            <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n              [size]=\"24\" sv-ng-svg-icon></svg>\n          </button>\n        </div>\n      </div>\n\n      <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+PanelDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDesignerComponent, selector: "svc-panel", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"adorner\" class=\"svc-question__adorner\" [class]=\"adorner.rootCss()\"\n    (mouseover)=\"adorner.hover($event, $event.currentTarget)\" (mouseleave)=\"adorner.hover($event, $event.currentTarget)\"\n    [attr.data-sv-drop-target-survey-element]=\"adorner.element.name || null\" #container>\n\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n      <div *ngIf=\"adorner.allowDragging && adorner.element.isInteractiveDesignElement\" class=\"svc-question__drag-area\"\n        (pointerdown)=\"adorner.onPointerDown($event)\">\n        <svg class=\"svc-question__drag-element\" [iconName]=\"'icon-drag-area-indicator_24x16'\" [size]=\"24\"\n          sv-ng-svg-icon></svg>\n      </div>\n\n      <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n\n      <div *ngIf=\"adorner.isEmptyElement\" class=\"svc-panel__placeholder_frame-wrapper\">\n        <div class=\"svc-panel__placeholder_frame\">\n          <div class=\"svc-panel__placeholder\">{{ adorner.placeholderText }}</div>\n          <div *ngIf=\"adorner.showAddQuestionButton\" class=\"svc-panel__add-new-question svc-action-button\" [key2click]\n            (click)=\"addNewQuestion($event)\">\n            <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\"\n            [size]=\"24\" sv-ng-svg-icon></svg>\n            <span class=\"svc-text svc-text--normal svc-text--bold\">\n              {{ adorner.addNewQuestionText }}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <ng-template *ngIf=\"adornerComponent && adorner.element.isInteractiveDesignElement\"\n        [component]=\"{ name: adornerComponent, data: { adorner: adorner, question: model } }\">\n      </ng-template>\n\n      <div *ngIf=\"!adorner.isEmptyElement && adorner.showAddQuestionButton\"\n        class=\"svc-panel__add-new-question-container\">\n        <div class=\"svc-panel__question-type-selector-popup\"> <sv-ng-popup\n            [popupModel]=\"adorner.questionTypeSelectorModel.popupModel\"></sv-ng-popup>\n        </div>\n        <div class=\"svc-panel__add-new-question-wrapper\">\n          <div class=\"svc-panel__add-new-question svc-action-button\" [key2click] (click)=\"addNewQuestion($event)\">\n            <svg class=\"svc-panel__add-new-question-icon\" [iconName]=\"('icon-add_24x24')\" [size]=\"24\" sv-ng-svg-icon></svg>\n            <span class=\"svc-text svc-text--normal svc-text--bold\">\n              {{ adorner.addNewQuestionText }}\n            </span>\n          </div>\n          <button type=\"button\" [attr.title]=\"adorner.addNewQuestionText\" [key2click] (click)=\"selectQuestionType($event)\"\n            class=\"svc-panel__question-type-selector\">\n            <svg class=\"svc-panel__question-type-selector-icon\" [iconName]=\"adorner.questionTypeSelectorModel.iconName\"\n              [size]=\"24\" sv-ng-svg-icon></svg>\n          </button>\n        </div>\n      </div>\n\n      <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\" (focusin)=\"adorner.select(adorner, $event)\">\n        <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i1.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1416,7 +1416,7 @@ class LogicOperatorComponent extends QuestionAngular {
     }
 }
 LogicOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LogicOperatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-LogicOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogicOperatorComponent, selector: "svc-logic-operator", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <ng-container *ngIf=\"!model.isReadOnly\">\n      <div [class]=\"model.getControlClass()\"  (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n        [attr.id]=\"model.inputId\" \n        [attr.required]=\"model.isRequired\" \n        [attr.tabindex]= \"model.isInputReadOnly ? undefined : 0\"\n        [attr.disabled]=\"model.isInputReadOnly\"\n        [attr.role]=\"model.ariaRole\"\n        [attr.aria-required]=\"model.ariaRequired\" \n        [attr.aria-label]=\"model.ariaLabel\" \n        [attr.aria-invalid]=\"model.ariaInvalid\" \n        [attr.aria-describedby]= \"model.ariaDescribedBy\" \n      >\n        <div [class]=\"model.cssClasses.controlValue\">\n          <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n          <div>{{model.readOnlyText}}</div>\n        </div>\n        <div *ngIf=\"model.allowClear && model.cssClasses.cleanButtonIconId\" [class]=\"model.cssClasses.cleanButton\" (click)=\"clear\" [visible]=\"!model.isEmpty()\">\n          <svg [class]=\"model.cssClasses.cleanButtonSvg\" [iconName]=\"model.cssClasses.cleanButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearCaption\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </ng-container>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n      <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n      <div>{{model.readOnlyText}}</div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+LogicOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogicOperatorComponent, selector: "svc-logic-operator", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.selectWrapper\">\n    <ng-container *ngIf=\"!model.isReadOnly\">\n      <div [class]=\"model.getControlClass()\"  (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n        [attr.id]=\"model.inputId\" \n        [attr.required]=\"model.isRequired\" \n        [attr.tabindex]= \"model.isInputReadOnly ? undefined : 0\"\n        [attr.disabled]=\"model.isInputReadOnly\"\n        [attr.role]=\"model.ariaRole\"\n        [attr.aria-required]=\"model.ariaRequired\" \n        [attr.aria-label]=\"model.ariaLabel\" \n        [attr.aria-invalid]=\"model.ariaInvalid\" \n        [attr.aria-describedby]= \"model.ariaDescribedBy\" \n      >\n        <div [class]=\"model.cssClasses.controlValue\">\n          <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n          <div>{{model.readOnlyText}}</div>\n        </div>\n        <div *ngIf=\"model.allowClear && model.cssClasses.cleanButtonIconId\" [class]=\"model.cssClasses.cleanButton\" (click)=\"clear\" [visible]=\"!model.isEmpty()\">\n          <svg [class]=\"model.cssClasses.cleanButtonSvg\" [iconName]=\"model.cssClasses.cleanButtonIconId\" [size]=\"'auto'\" [title]=\"model.clearCaption\" [size]=\"24\" sv-ng-svg-icon></svg>\n        </div>\n      </div>\n        <sv-ng-popup [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    </ng-container>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n      <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n      <div>{{model.readOnlyText}}</div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host { display: none; }"], components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LogicOperatorComponent, decorators: [{
             type: Component,
             args: [{
@@ -1783,7 +1783,7 @@ AngularComponentFactory.Instance.registerComponent("color-item", ColorItemCompon
 class QuestionColorComponent extends QuestionAngular {
 }
 QuestionColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionColorComponent, selector: "svc-color", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDown($event)\">\n  <label [class]=\"model.getSwatchCss()\" [style]=\"model.getSwatchStyle()\">\n    <svg [iconName]=\"model.cssClasses.swatchIcon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <input type=\"color\" [disabled]=\"model.isInputReadOnly\" [class]=\"model.cssClasses.colorInput\"\n      [value]=\"model.renderedColorValue\" (change)=\"model.onColorInputChange($event)\" tabindex=\"-1\"/>\n  </label>\n  <input autocomplete=\"off\" [disabled]=\"model.isInputReadOnly\" [attr.id]=\"model.inputId\"\n    [placeholder]=\"model.renderedPlaceholder\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\" (change)=\"model.onChange($event)\" (keyup)=\"model.onKeyUp($event)\"\n    (blur)=\"model.onBlur($event)\" (beforeinput)=\"model.onBeforeInput($event)\" [value]=\"model.renderedValue\"\n    [class]=\"model.cssClasses.control\" />\n  <ng-container *ngIf=\"model.showDropdownAction\">\n    <sv-action-bar-item [model]=\"model.dropdownAction\"></sv-action-bar-item>\n    <sv-ng-popup [popupModel]=\"model.dropdownAction.popupModel\"></sv-ng-popup>\n  </ng-container>\n</div>", components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarItemComponent, selector: "sv-action-bar-item", inputs: ["model"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+QuestionColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionColorComponent, selector: "svc-color", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDown($event)\">\n  <label [class]=\"model.getSwatchCss()\" [style]=\"model.getSwatchStyle()\">\n    <svg [iconName]=\"model.cssClasses.swatchIcon\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    <input type=\"color\" [disabled]=\"model.isInputReadOnly\" [class]=\"model.cssClasses.colorInput\"\n      [value]=\"model.renderedColorValue\" (change)=\"model.onColorInputChange($event)\" tabindex=\"-1\"/>\n  </label>\n  <input autocomplete=\"off\" [disabled]=\"model.isInputReadOnly\" [attr.id]=\"model.inputId\"\n    [placeholder]=\"model.renderedPlaceholder\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\" (change)=\"model.onChange($event)\" (keyup)=\"model.onKeyUp($event)\"\n    (blur)=\"model.onBlur($event)\" (beforeinput)=\"model.onBeforeInput($event)\" [value]=\"model.renderedValue\"\n    [class]=\"model.cssClasses.control\" />\n  <ng-container *ngIf=\"model.showDropdownAction\">\n    <sv-action-bar-item [model]=\"model.dropdownAction\"></sv-action-bar-item>\n    <sv-ng-popup [popupModel]=\"model.dropdownAction.popupModel\"></sv-ng-popup>\n  </ng-container>\n</div>", components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarItemComponent, selector: "sv-action-bar-item", inputs: ["model"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget", "getArea"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionColorComponent, decorators: [{
             type: Component,
             args: [{