survey-creator-angular/esm2015/panel.component.js

A white-label drag-and-drop form builder for Angular that lets you design complex, interactive forms and surveys without writing code. It generates JSON schemas used by the SurveyJS Form Library to render dynamic forms in your Angular app.

import { Component } from "@angular/core";
import { AngularComponentFactory } from "survey-angular-ui";
import { QuestionDesignerComponent } from "./question.component";
import * as i0 from "@angular/core";
import * as i1 from "survey-angular-ui";
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()\" (dblclick)=\"adorner.dblclick($event)\"\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    <div *ngIf=\"adorner.showHiddenTitle\" [class]=\"adorner.cssCollapsedHiddenHeader\">\n      <sv-ng-element-title *ngIf=\"!!model.hasTitle\" [element]=\"model\" [renderActions]=\"false\"></sv-ng-element-title>\n      <div *ngIf=\"!model.hasTitle\" [class]=\"adorner.cssCollapsedHiddenTitle\">\n          <span class=\"svc-fake-title\">{{model.name}}</span>\n      </div>\n    </div>\n    <div [class]=\"adorner.css()\" [key2click]=\"{ disableTabStop: true }\"\n      (click)=\"adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null\">\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--left\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--right\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--top\"></div>\n      <div class=\"svc-question__drop-indicator svc-question__drop-indicator--bottom\"></div>\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]=\"'auto'\"\n          sv-ng-svg-icon></svg>\n        <div class=\"svc-question__top-actions\">\n          <sv-action-bar [model]=\"adorner.topActionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </div>\n      <ng-container *ngIf=\"adorner.needToRenderContent\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\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')\" [size]=\"'auto'\"\n                sv-ng-svg-icon></svg>\n              <span class=\"svc-add-new-item-button__text\">\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\n          <div class=\"svc-panel__add-new-question-wrapper\">\n            <ng-template\n              [component]=\"{ name: 'svc-add-new-question-btn', data: { model: { data: adorner }, buttonClass: 'svc-action-button', renderPopup: false } }\">\n            </ng-template>\n          </div>\n        </div>\n\n        <div *ngIf=\"adorner.element.isInteractiveDesignElement\" class=\"svc-question__content-actions\"\n          (focusin)=\"adorner.select(adorner, $event)\">\n          <sv-action-bar [model]=\"adorner.actionContainer\" [handleClick]=\"false\"></sv-action-bar>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element", "renderActions"] }, { type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i1.ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: i1.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], 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: [{
                    selector: "svc-panel",
                    templateUrl: "./panel.component.html",
                    styles: [":host { display: none; }"]
                }]
        }] });
AngularComponentFactory.Instance.registerComponent("svc-panel", PanelDesignerComponent);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3BhbmVsLmNvbXBvbmVudC50cyIsIi4uLy4uL3NyYy9wYW5lbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQXFCLFNBQVMsRUFBMkIsTUFBTSxlQUFlLENBQUM7QUFDdEYsT0FBTyxFQUFFLHVCQUF1QixFQUE2QyxNQUFNLG1CQUFtQixDQUFDO0FBSXZHLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDOzs7O0FBT2pFLE1BQU0sT0FBTyxzQkFBdUIsU0FBUSx5QkFBeUI7O29IQUF4RCxzQkFBc0I7d0dBQXRCLHNCQUFzQix3RUNabkMseTNIQWdFYzs0RkRwREQsc0JBQXNCO2tCQUxsQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxXQUFXO29CQUNyQixXQUFXLEVBQUUsd0JBQXdCO29CQUNyQyxNQUFNLEVBQUUsQ0FBQywwQkFBMEIsQ0FBQztpQkFDckM7O0FBSUQsdUJBQXVCLENBQUMsUUFBUSxDQUFDLGlCQUFpQixDQUFDLFdBQVcsRUFBRSxzQkFBc0IsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0b3JSZWYsIENvbXBvbmVudCwgSW5wdXQsIFZpZXdDb250YWluZXJSZWYgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQW5ndWxhckNvbXBvbmVudEZhY3RvcnksIEJhc2VBbmd1bGFyLCBFbWJlZGRlZFZpZXdDb250ZW50Q29tcG9uZW50IH0gZnJvbSBcInN1cnZleS1hbmd1bGFyLXVpXCI7XG5pbXBvcnQgeyBQYWdlTW9kZWwsIFF1ZXN0aW9uLCBTdXJ2ZXlNb2RlbCB9IGZyb20gXCJzdXJ2ZXktY29yZVwiO1xuaW1wb3J0IHsgU3VydmV5Q3JlYXRvck1vZGVsLCBRdWVzdGlvbkFkb3JuZXJWaWV3TW9kZWwgfSBmcm9tIFwic3VydmV5LWNyZWF0b3ItY29yZVwiO1xuaW1wb3J0IHsgQ3JlYXRvck1vZGVsQ29tcG9uZW50IH0gZnJvbSBcIi4vY3JlYXRvci1tb2RlbC5jb21wb25lbnRcIjtcbmltcG9ydCB7IFF1ZXN0aW9uRGVzaWduZXJDb21wb25lbnQgfSBmcm9tIFwiLi9xdWVzdGlvbi5jb21wb25lbnRcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcInN2Yy1wYW5lbFwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL3BhbmVsLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlczogW1wiOmhvc3QgeyBkaXNwbGF5OiBub25lOyB9XCJdXG59KVxuZXhwb3J0IGNsYXNzIFBhbmVsRGVzaWduZXJDb21wb25lbnQgZXh0ZW5kcyBRdWVzdGlvbkRlc2lnbmVyQ29tcG9uZW50IHtcbn1cblxuQW5ndWxhckNvbXBvbmVudEZhY3RvcnkuSW5zdGFuY2UucmVnaXN0ZXJDb21wb25lbnQoXCJzdmMtcGFuZWxcIiwgUGFuZWxEZXNpZ25lckNvbXBvbmVudCk7XG4iLCI8bmctdGVtcGxhdGUgI3RlbXBsYXRlPlxuICA8ZGl2ICpuZ0lmPVwiYWRvcm5lclwiIGNsYXNzPVwic3ZjLXF1ZXN0aW9uX19hZG9ybmVyXCIgW2NsYXNzXT1cImFkb3JuZXIucm9vdENzcygpXCIgKGRibGNsaWNrKT1cImFkb3JuZXIuZGJsY2xpY2soJGV2ZW50KVwiXG4gICAgKG1vdXNlb3Zlcik9XCJhZG9ybmVyLmhvdmVyKCRldmVudCwgJGV2ZW50LmN1cnJlbnRUYXJnZXQpXCIgKG1vdXNlbGVhdmUpPVwiYWRvcm5lci5ob3ZlcigkZXZlbnQsICRldmVudC5jdXJyZW50VGFyZ2V0KVwiXG4gICAgW2F0dHIuZGF0YS1zdi1kcm9wLXRhcmdldC1zdXJ2ZXktZWxlbWVudF09XCJhZG9ybmVyLmVsZW1lbnQubmFtZSB8fCBudWxsXCIgI2NvbnRhaW5lcj5cbiAgICA8ZGl2ICpuZ0lmPVwiYWRvcm5lci5zaG93SGlkZGVuVGl0bGVcIiBbY2xhc3NdPVwiYWRvcm5lci5jc3NDb2xsYXBzZWRIaWRkZW5IZWFkZXJcIj5cbiAgICAgIDxzdi1uZy1lbGVtZW50LXRpdGxlICpuZ0lmPVwiISFtb2RlbC5oYXNUaXRsZVwiIFtlbGVtZW50XT1cIm1vZGVsXCIgW3JlbmRlckFjdGlvbnNdPVwiZmFsc2VcIj48L3N2LW5nLWVsZW1lbnQtdGl0bGU+XG4gICAgICA8ZGl2ICpuZ0lmPVwiIW1vZGVsLmhhc1RpdGxlXCIgW2NsYXNzXT1cImFkb3JuZXIuY3NzQ29sbGFwc2VkSGlkZGVuVGl0bGVcIj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cInN2Yy1mYWtlLXRpdGxlXCI+e3ttb2RlbC5uYW1lfX08L3NwYW4+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IFtjbGFzc109XCJhZG9ybmVyLmNzcygpXCIgW2tleTJjbGlja109XCJ7IGRpc2FibGVUYWJTdG9wOiB0cnVlIH1cIlxuICAgICAgKGNsaWNrKT1cImFkb3JuZXIuZWxlbWVudC5pc0ludGVyYWN0aXZlRGVzaWduRWxlbWVudCA/IGFkb3JuZXIuc2VsZWN0KGFkb3JuZXIsICRldmVudCkgOiBudWxsXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwic3ZjLXF1ZXN0aW9uX19kcm9wLWluZGljYXRvciBzdmMtcXVlc3Rpb25fX2Ryb3AtaW5kaWNhdG9yLS1sZWZ0XCI+PC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwic3ZjLXF1ZXN0aW9uX19kcm9wLWluZGljYXRvciBzdmMtcXVlc3Rpb25fX2Ryb3AtaW5kaWNhdG9yLS1yaWdodFwiPjwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInN2Yy1xdWVzdGlvbl9fZHJvcC1pbmRpY2F0b3Igc3ZjLXF1ZXN0aW9uX19kcm9wLWluZGljYXRvci0tdG9wXCI+PC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwic3ZjLXF1ZXN0aW9uX19kcm9wLWluZGljYXRvciBzdmMtcXVlc3Rpb25fX2Ryb3AtaW5kaWNhdG9yLS1ib3R0b21cIj48L2Rpdj5cbiAgICAgIDxkaXYgKm5nSWY9XCJhZG9ybmVyLmFsbG93RHJhZ2dpbmcgJiYgYWRvcm5lci5lbGVtZW50LmlzSW50ZXJhY3RpdmVEZXNpZ25FbGVtZW50XCIgY2xhc3M9XCJzdmMtcXVlc3Rpb25fX2RyYWctYXJlYVwiXG4gICAgICAgIChwb2ludGVyZG93bik9XCJhZG9ybmVyLm9uUG9pbnRlckRvd24oJGV2ZW50KVwiPlxuICAgICAgICA8c3ZnIGNsYXNzPVwic3ZjLXF1ZXN0aW9uX19kcmFnLWVsZW1lbnRcIiBbaWNvbk5hbWVdPVwiJ2ljb24tZHJhZy1hcmVhLWluZGljYXRvcl8yNHgxNidcIiBbc2l6ZV09XCInYXV0bydcIlxuICAgICAgICAgIHN2LW5nLXN2Zy1pY29uPjwvc3ZnPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic3ZjLXF1ZXN0aW9uX190b3AtYWN0aW9uc1wiPlxuICAgICAgICAgIDxzdi1hY3Rpb24tYmFyIFttb2RlbF09XCJhZG9ybmVyLnRvcEFjdGlvbkNvbnRhaW5lclwiIFtoYW5kbGVDbGlja109XCJmYWxzZVwiPjwvc3YtYWN0aW9uLWJhcj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJhZG9ybmVyLm5lZWRUb1JlbmRlckNvbnRlbnRcIj5cbiAgICAgICAgPG5nLXRlbXBsYXRlIFtjb21wb25lbnRdPVwieyBuYW1lOiBjb21wb25lbnROYW1lLCBkYXRhOiBjb21wb25lbnREYXRhIH1cIj48L25nLXRlbXBsYXRlPlxuICAgICAgICA8ZGl2ICpuZ0lmPVwiYWRvcm5lci5pc0VtcHR5RWxlbWVudFwiIGNsYXNzPVwic3ZjLXBhbmVsX19wbGFjZWhvbGRlcl9mcmFtZS13cmFwcGVyXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cInN2Yy1wYW5lbF9fcGxhY2Vob2xkZXJfZnJhbWVcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzdmMtcGFuZWxfX3BsYWNlaG9sZGVyXCI+e3sgYWRvcm5lci5wbGFjZWhvbGRlclRleHQgfX08L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJhZG9ybmVyLnNob3dBZGRRdWVzdGlvbkJ1dHRvblwiIGNsYXNzPVwic3ZjLXBhbmVsX19hZGQtbmV3LXF1ZXN0aW9uIHN2Yy1hY3Rpb24tYnV0dG9uXCIgW2tleTJjbGlja11cbiAgICAgICAgICAgICAgKGNsaWNrKT1cImFkZE5ld1F1ZXN0aW9uKCRldmVudClcIj5cbiAgICAgICAgICAgICAgPHN2ZyBjbGFzcz1cInN2Yy1wYW5lbF9fYWRkLW5ldy1xdWVzdGlvbi1pY29uXCIgW2ljb25OYW1lXT1cIignaWNvbi1hZGRfMjR4MjQnKVwiIFtzaXplXT1cIidhdXRvJ1wiXG4gICAgICAgICAgICAgICAgc3Ytbmctc3ZnLWljb24+PC9zdmc+XG4gICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwic3ZjLWFkZC1uZXctaXRlbS1idXR0b25fX3RleHRcIj5cbiAgICAgICAgICAgICAgICB7eyBhZG9ybmVyLmFkZE5ld1F1ZXN0aW9uVGV4dCB9fVxuICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPG5nLXRlbXBsYXRlICpuZ0lmPVwiYWRvcm5lckNvbXBvbmVudCAmJiBhZG9ybmVyLmVsZW1lbnQuaXNJbnRlcmFjdGl2ZURlc2lnbkVsZW1lbnRcIlxuICAgICAgICAgIFtjb21wb25lbnRdPVwieyBuYW1lOiBhZG9ybmVyQ29tcG9uZW50LCBkYXRhOiB7IGFkb3JuZXI6IGFkb3JuZXIsIHF1ZXN0aW9uOiBtb2RlbCB9IH1cIj5cbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cblxuICAgICAgICA8ZGl2ICpuZ0lmPVwiIWFkb3JuZXIuaXNFbXB0eUVsZW1lbnQgJiYgYWRvcm5lci5zaG93QWRkUXVlc3Rpb25CdXR0b25cIlxuICAgICAgICAgIGNsYXNzPVwic3ZjLXBhbmVsX19hZGQtbmV3LXF1ZXN0aW9uLWNvbnRhaW5lclwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJzdmMtcGFuZWxfX3F1ZXN0aW9uLXR5cGUtc2VsZWN0b3ItcG9wdXBcIj4gPHN2LW5nLXBvcHVwXG4gICAgICAgICAgICAgIFtwb3B1cE1vZGVsXT1cImFkb3JuZXIucXVlc3Rpb25UeXBlU2VsZWN0b3JNb2RlbC5wb3B1cE1vZGVsXCI+PC9zdi1uZy1wb3B1cD5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJzdmMtcGFuZWxfX2FkZC1uZXctcXVlc3Rpb24td3JhcHBlclwiPlxuICAgICAgICAgICAgPG5nLXRlbXBsYXRlXG4gICAgICAgICAgICAgIFtjb21wb25lbnRdPVwieyBuYW1lOiAnc3ZjLWFkZC1uZXctcXVlc3Rpb24tYnRuJywgZGF0YTogeyBtb2RlbDogeyBkYXRhOiBhZG9ybmVyIH0sIGJ1dHRvbkNsYXNzOiAnc3ZjLWFjdGlvbi1idXR0b24nLCByZW5kZXJQb3B1cDogZmFsc2UgfSB9XCI+XG4gICAgICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2ICpuZ0lmPVwiYWRvcm5lci5lbGVtZW50LmlzSW50ZXJhY3RpdmVEZXNpZ25FbGVtZW50XCIgY2xhc3M9XCJzdmMtcXVlc3Rpb25fX2NvbnRlbnQtYWN0aW9uc1wiXG4gICAgICAgICAgKGZvY3VzaW4pPVwiYWRvcm5lci5zZWxlY3QoYWRvcm5lciwgJGV2ZW50KVwiPlxuICAgICAgICAgIDxzdi1hY3Rpb24tYmFyIFttb2RlbF09XCJhZG9ybmVyLmFjdGlvbkNvbnRhaW5lclwiIFtoYW5kbGVDbGlja109XCJmYWxzZVwiPjwvc3YtYWN0aW9uLWJhcj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPiJdfQ==