raise-common-lib 0.0.146 → 0.0.148

package/fesm5/raise-common-lib.js

@@ -2532,6 +2532,7 @@ var RsPageListComponent = /** @class */ (function () {
      */
     function () {
         var _this = this;
+        this.getInfo();
         this.debouncedInput = debounce((/**
          * @return {?}
          */
@@ -2539,6 +2540,15 @@ var RsPageListComponent = /** @class */ (function () {
             _this.onSeach();
         }), 300);
     };
+    /**
+     * @return {?}
+     */
+    RsPageListComponent.prototype.getInfo = /**
+     * @return {?}
+     */
+    function () {
+        this.translation = JSON.parse(localStorage.getItem("translation"));
+    };
     /**
      * @return {?}
      */
@@ -2581,7 +2591,7 @@ var RsPageListComponent = /** @class */ (function () {
     RsPageListComponent.decorators = [
         { type: Component, args: [{
                     selector: "rs-page-list",
-                    template: "<div class=\"rs-page-list-wrap\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n    <ng-content select=\"[titleSlot]\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultTitle>\r\n    <h1 class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</h1>\r\n  </ng-template>\r\n  <div class=\"rs-sub-section\">\r\n    <ng-content select=\"[subSectionSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-content-wrap\">\r\n    <div class=\"rs-content-tab\">\r\n      <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-toolbar-wrap\">\r\n      <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n        <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n        <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\r\n          <ejs-textbox\r\n            type=\"text\"\r\n            class=\"e-input\"\r\n            [(ngModel)]=\"searchValue\"\r\n            (input)=\"onInput()\"\r\n            placeholder=\"Search all fields\"\r\n            [showClearButton]=\"true\"\r\n            autocomplete=\"off\"\r\n          ></ejs-textbox>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"rs-grid-wrap\">\r\n      <ng-content select=\"[gridSlot]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"rs-page-list-wrap\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n    <ng-content select=\"[titleSlot]\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultTitle>\r\n    <h1 class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</h1>\r\n  </ng-template>\r\n  <div class=\"rs-sub-section\">\r\n    <ng-content select=\"[subSectionSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-content-wrap\">\r\n    <div class=\"rs-content-tab\">\r\n      <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-toolbar-wrap\">\r\n      <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n        <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n        <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\r\n          <ejs-textbox\r\n            type=\"text\"\r\n            class=\"e-input\"\r\n            [(ngModel)]=\"searchValue\"\r\n            (input)=\"onInput()\"\r\n            [placeholder]=\"translation.SEARCH_ALL_FIELD || '.SEARCH_ALL_FIELD'\"\r\n            [showClearButton]=\"true\"\r\n            autocomplete=\"off\"\r\n          ></ejs-textbox>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"rs-grid-wrap\">\r\n      <ng-content select=\"[gridSlot]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     styles: [".rs-page-list-wrap{height:100%;display:flex;flex-direction:column;position:relative;margin:0 auto;max-width:1885px}.rs-page-list-wrap .rs-page-title{font-family:var(--rs-font-family);font-size:var(--rs-page-title-font-size);font-weight:700;text-align:left;color:var(--rs-page-title-color);display:flex;align-items:center;padding:16px 8px 12px 20px}.rs-page-list-wrap .rs-sub-section{width:100%}.rs-page-list-wrap .rs-content-wrap{display:flex;flex-direction:column;flex:1;height:0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:24px!important;min-width:auto!important}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-page-list-wrap .rs-content-wrap .rs-left-col{flex:1;width:0;gap:4px}.rs-page-list-wrap .rs-content-wrap .rs-grid-wrap{flex:1;height:0}.rs-page-list-wrap.is-not-inner .rs-content-wrap{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px 0 rgba(0,0,0,.1)}.rs-page-list-wrap .rs-search-input{width:240px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px 0 rgba(31,123,255,.4)!important;border-color:var(--rs-input-hover-border-color)!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:26px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group input.e-input:hover{box-shadow:none!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group::before{content:\"\"!important;margin:6px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}"]
                 }] }
     ];
@@ -2625,6 +2635,8 @@ if (false) {
     /** @type {?} */
     RsPageListComponent.prototype.hasWholeToolbarSlot;
     /** @type {?} */
+    RsPageListComponent.prototype.translation;
+    /** @type {?} */
     RsPageListComponent.prototype.searchValue;
 }
 
@@ -2757,6 +2769,7 @@ var GridBoxComponent = /** @class */ (function () {
      */
     function () {
         var _this = this;
+        this.getInfo();
         this.debouncedInput = debounce((/**
          * @return {?}
          */
@@ -2764,6 +2777,15 @@ var GridBoxComponent = /** @class */ (function () {
             _this.onSeach();
         }), 300);
     };
+    /**
+     * @return {?}
+     */
+    GridBoxComponent.prototype.getInfo = /**
+     * @return {?}
+     */
+    function () {
+        this.translation = JSON.parse(localStorage.getItem("translation"));
+    };
     /**
      * @return {?}
      */
@@ -2803,7 +2825,7 @@ var GridBoxComponent = /** @class */ (function () {
     GridBoxComponent.decorators = [
         { type: Component, args: [{
                     selector: "rs-grid-box",
-                    template: "<div class=\"rs-grid-box\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <div class=\"rs-content-tab\">\r\n    <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-toolbar-wrap\">\r\n    <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n      <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n      <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\r\n        <ejs-textbox\r\n          type=\"text\"\r\n          class=\"e-input\"\r\n          [(ngModel)]=\"searchValue\"\r\n          (input)=\"onInput()\"\r\n          placeholder=\"Search all fields\"\r\n          [showClearButton]=\"true\"\r\n          autocomplete=\"off\"\r\n        ></ejs-textbox>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"rs-grid-wrap\">\r\n    <ng-content select=\"[gridSlot]\"></ng-content>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"rs-grid-box\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <div class=\"rs-content-tab\">\r\n    <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-toolbar-wrap\">\r\n    <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n      <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n      <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\r\n        <ejs-textbox\r\n          type=\"text\"\r\n          class=\"e-input\"\r\n          [(ngModel)]=\"searchValue\"\r\n          (input)=\"onInput()\"\r\n          [placeholder]=\"translation.SEARCH_ALL_FIELD|| '.SEARCH_ALL_FIELD'\"\r\n          [showClearButton]=\"true\"\r\n          autocomplete=\"off\"\r\n        ></ejs-textbox>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"rs-grid-wrap\">\r\n    <ng-content select=\"[gridSlot]\"></ng-content>\r\n  </div>\r\n</div>\r\n",
                     styles: [":host{height:100%}.rs-grid-box{display:flex;flex-direction:column;height:100%}.rs-grid-box.is-not-inner{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px 0 rgba(0,0,0,.1)}.rs-grid-box .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-grid-box .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-grid-box .rs-toolbar-wrap .rs-left-col,.rs-grid-box .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center}.rs-grid-box .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-grid-box .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:24px!important;min-width:auto!important}.rs-grid-box .rs-toolbar-wrap .rs-left-col{flex:1;width:0;gap:4px}.rs-grid-box .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-grid-box .rs-grid-wrap{flex:1;height:0}.rs-grid-box .rs-search-input{width:240px}.rs-grid-box .rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-grid-box .rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px 0 rgba(31,123,255,.4)!important;border-color:var(--rs-input-hover-border-color)!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-grid-box .rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:26px}.rs-grid-box .rs-search-input ::ng-deep .e-input-group input.e-input:hover{box-shadow:none!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group::before{content:\"\"!important;margin:6px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}"]
                 }] }
     ];
@@ -2838,6 +2860,8 @@ if (false) {
     /** @type {?} */
     GridBoxComponent.prototype.hasWholeToolbarSlot;
     /** @type {?} */
+    GridBoxComponent.prototype.translation;
+    /** @type {?} */
     GridBoxComponent.prototype.searchValue;
 }
 
@@ -22445,7 +22469,7 @@ var DrawerFormComponent = /** @class */ (function () {
     DrawerFormComponent.decorators = [
         { type: Component, args: [{
                     selector: "rs-drawer-form",
-                    template: "<div #drawerFormEl class=\"rs-drawer-form-container\">\r\n  <div class=\"section-container\">\r\n    <div #sectionEl class=\"section-item\" *ngFor=\"let section of sections\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"section-expand-checkbox\"\r\n        *ngIf=\"section.title\"\r\n      />\r\n      <div class=\"section-title\" *ngIf=\"section.title\">\r\n        <span>{{ section.title }}</span>\r\n      </div>\r\n      <div class=\"section-form\" *ngIf=\"!section.customKey\">\r\n        <div\r\n          class=\"form-item\"\r\n          *ngFor=\"let field of section.fields\"\r\n          [attr.data-required]=\"field.required ? 'yes' : 'no'\"\r\n          [attr.data-disabled]=\"field.disabled || formDisabled ? 'yes' : 'no'\"\r\n          [attr.data-error]=\"\r\n            fieldValidMap[field.formKey] === false ? 'yes' : 'no'\r\n          \"\r\n        >\r\n          <div class=\"form-label\">\r\n            <span>{{ field.label }}</span>\r\n            <ejs-tooltip\r\n              class=\"form-tooltip\"\r\n              cssClass=\"rs-drawer-tooltip\"\r\n              *ngIf=\"field.tooltip\"\r\n              position=\"RightCenter\"\r\n              [content]=\"field.tooltip\"\r\n            >\r\n              <span class=\"tooltip-icon\"></span>\r\n            </ejs-tooltip>\r\n          </div>\r\n          <div class=\"form-content\">\r\n            <!-- Radio -->\r\n            <rs-radio-group\r\n              *ngIf=\"field.fieldFormType === 'Radio'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-radio-group>\r\n            <!-- Checkbox -->\r\n            <rs-checkbox-group\r\n              *ngIf=\"field.fieldFormType === 'Checkbox'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-checkbox-group>\r\n            <!-- Switch -->\r\n            <rs-switch-input\r\n              *ngIf=\"field.fieldFormType === 'Switch'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-switch-input>\r\n            <!-- Input -->\r\n            <input\r\n              class=\"e-input\"\r\n              *ngIf=\"\r\n                field.fieldFormType === 'Text' ||\r\n                field.fieldFormType === 'Email'\r\n              \"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [required]=\"field.required\"\r\n              [attr.maxlength]=\"field.maxlength\"\r\n              [attr.minlength]=\"field.minlength\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (input)=\"onInput($event.target.value, field)\"\r\n              (change)=\"onChange($event.target.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n              autocomplete=\"off\"\r\n            />\r\n            <!-- Textarea -->\r\n            <textarea\r\n              class=\"e-input\"\r\n              *ngIf=\"field.fieldFormType === 'Textarea'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [required]=\"field.required\"\r\n              [attr.maxlength]=\"field.maxlength\"\r\n              [attr.minlength]=\"field.minlength\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (input)=\"onInput($event.target.value, field)\"\r\n              (change)=\"onChange($event.target.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n              autocomplete=\"off\"\r\n              rows=\"3\"\r\n            ></textarea>\r\n            <!-- Number Input -->\r\n            <ejs-numerictextbox\r\n              *ngIf=\"field.fieldFormType === 'Number'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [max]=\"field.max\"\r\n              [min]=\"field.min\"\r\n              [format]=\"field.format\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-numerictextbox>\r\n            <!-- Tags Input -->\r\n            <rs-tag-input\r\n              *ngIf=\"field.fieldFormType === 'Tags'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [inputMaxlength]=\"field.maxlength\"\r\n              [inputMinlength]=\"field.minlength\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></rs-tag-input>\r\n            <!-- AutoComplete -->\r\n            <ejs-autocomplete\r\n              *ngIf=\"field.fieldFormType === 'AutoComplete'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-autocomplete>\r\n            <!-- Dropdown -->\r\n            <ejs-dropdownlist\r\n              *ngIf=\"field.fieldFormType === 'Dropdown'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [allowFiltering]=\"true\"\r\n              [showClearButton]=\"true\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-dropdownlist>\r\n            <!-- MultiSelect -->\r\n            <ejs-multiselect\r\n              *ngIf=\"field.fieldFormType === 'MultiSelect'\"\r\n              mode=\"CheckBox\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [allowFiltering]=\"true\"\r\n              [showDropDownIcon]=\"true\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            >\r\n            </ejs-multiselect>\r\n            <!-- Datepicker -->\r\n            <ejs-datepicker\r\n              *ngIf=\"field.fieldFormType === 'Datepicker'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [format]=\"field.format || 'dd-MMM-yyyy'\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-datepicker>\r\n            <ng-template\r\n              #customTemplateContainer\r\n              *ngIf=\"field.fieldFormType === 'Custom'\"\r\n            ></ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"section-form\" *ngIf=\"section.customKey\">\r\n        <ng-template #customSectionContainer></ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"sections.length > 1 && showAnchor\" class=\"anchor-container\">\r\n    <div\r\n      class=\"anchor-item\"\r\n      *ngFor=\"let section of sections; let index = index\"\r\n      [style.display]=\"section.title ? 'block' : 'none'\"\r\n      [attr.data-active]=\"scrollIndex === index ? 'yes' : 'no'\"\r\n      [attr.data-content]=\"section.title\"\r\n      (click)=\"onClickAnchor(index)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div #drawerFormEl class=\"rs-drawer-form-container\">\r\n  <div class=\"section-container\">\r\n    <div #sectionEl class=\"section-item\" *ngFor=\"let section of sections\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"section-expand-checkbox\"\r\n        *ngIf=\"section.title\"\r\n      />\r\n      <div class=\"section-title\" *ngIf=\"section.title\">\r\n        <span>{{ section.title }}</span>\r\n      </div>\r\n      <div class=\"section-form\" *ngIf=\"!section.customKey\">\r\n        <div\r\n          class=\"form-item\"\r\n          *ngFor=\"let field of section.fields\"\r\n          [attr.data-required]=\"field.required ? 'yes' : 'no'\"\r\n          [attr.data-disabled]=\"field.disabled || formDisabled ? 'yes' : 'no'\"\r\n          [attr.data-error]=\"\r\n            fieldValidMap[field.formKey] === false ? 'yes' : 'no'\r\n          \"\r\n        >\r\n          <div class=\"form-label\">\r\n            <span>{{ field.label }}</span>\r\n            <ejs-tooltip\r\n              class=\"form-tooltip\"\r\n              cssClass=\"rs-drawer-tooltip\"\r\n              *ngIf=\"field.tooltip\"\r\n              position=\"RightCenter\"\r\n              [content]=\"field.tooltip\"\r\n            >\r\n              <span class=\"tooltip-icon\"></span>\r\n            </ejs-tooltip>\r\n          </div>\r\n          <div class=\"form-content\">\r\n            <!-- Radio -->\r\n            <rs-radio-group\r\n              *ngIf=\"field.fieldFormType === 'Radio'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-radio-group>\r\n            <!-- Checkbox -->\r\n            <rs-checkbox-group\r\n              *ngIf=\"field.fieldFormType === 'Checkbox'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-checkbox-group>\r\n            <!-- Switch -->\r\n            <rs-switch-input\r\n              *ngIf=\"field.fieldFormType === 'Switch'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-switch-input>\r\n            <!-- Input -->\r\n            <input\r\n              class=\"e-input\"\r\n              *ngIf=\"\r\n                field.fieldFormType === 'Text' ||\r\n                field.fieldFormType === 'Email'\r\n              \"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [required]=\"field.required\"\r\n              [attr.maxlength]=\"field.maxlength\"\r\n              [attr.minlength]=\"field.minlength\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (input)=\"onInput($event.target.value, field)\"\r\n              (change)=\"onChange($event.target.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n              autocomplete=\"off\"\r\n            />\r\n            <!-- Textarea -->\r\n            <textarea\r\n              class=\"e-input\"\r\n              *ngIf=\"field.fieldFormType === 'Textarea'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [required]=\"field.required\"\r\n              [attr.maxlength]=\"field.maxlength\"\r\n              [attr.minlength]=\"field.minlength\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (input)=\"onInput($event.target.value, field)\"\r\n              (change)=\"onChange($event.target.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n              autocomplete=\"off\"\r\n              rows=\"3\"\r\n            ></textarea>\r\n            <!-- Number Input -->\r\n            <ejs-numerictextbox\r\n              *ngIf=\"field.fieldFormType === 'Number'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [max]=\"field.max\"\r\n              [min]=\"field.min\"\r\n              [step]=\"field.step\"\r\n              [decimals]=\"field.decimals\"\r\n              [format]=\"field.format\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-numerictextbox>\r\n            <!-- Tags Input -->\r\n            <rs-tag-input\r\n              *ngIf=\"field.fieldFormType === 'Tags'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [inputMaxlength]=\"field.maxlength\"\r\n              [inputMinlength]=\"field.minlength\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></rs-tag-input>\r\n            <!-- AutoComplete -->\r\n            <ejs-autocomplete\r\n              *ngIf=\"field.fieldFormType === 'AutoComplete'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-autocomplete>\r\n            <!-- Dropdown -->\r\n            <ejs-dropdownlist\r\n              *ngIf=\"field.fieldFormType === 'Dropdown'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [allowFiltering]=\"true\"\r\n              [showClearButton]=\"true\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-dropdownlist>\r\n            <!-- MultiSelect -->\r\n            <ejs-multiselect\r\n              *ngIf=\"field.fieldFormType === 'MultiSelect'\"\r\n              mode=\"CheckBox\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [allowFiltering]=\"true\"\r\n              [showDropDownIcon]=\"true\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            >\r\n            </ejs-multiselect>\r\n            <!-- Datepicker -->\r\n            <ejs-datepicker\r\n              *ngIf=\"field.fieldFormType === 'Datepicker'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [format]=\"field.format || 'dd-MMM-yyyy'\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-datepicker>\r\n            <ng-template\r\n              #customTemplateContainer\r\n              *ngIf=\"field.fieldFormType === 'Custom'\"\r\n            ></ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"section-form\" *ngIf=\"section.customKey\">\r\n        <ng-template #customSectionContainer></ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"sections.length > 1 && showAnchor\" class=\"anchor-container\">\r\n    <div\r\n      class=\"anchor-item\"\r\n      *ngFor=\"let section of sections; let index = index\"\r\n      [style.display]=\"section.title ? 'block' : 'none'\"\r\n      [attr.data-active]=\"scrollIndex === index ? 'yes' : 'no'\"\r\n      [attr.data-content]=\"section.title\"\r\n      (click)=\"onClickAnchor(index)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\n",
                     providers: [DatePipe],
                     styles: [":host{display:block;margin-top:16px}.rs-drawer-form-container{display:flex;flex-flow:row nowrap;align-items:flex-start;gap:32px}.rs-drawer-form-container .section-container{flex:auto;display:flex;flex-flow:column nowrap;max-width:1576px}.rs-drawer-form-container .section-item{position:relative}.rs-drawer-form-container .section-item:not(:first-child){border-top:1px solid #eaedf0}.rs-drawer-form-container .section-expand-checkbox{display:block;width:100%;height:28px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;position:absolute;top:0;left:0}.rs-drawer-form-container .section-expand-checkbox:checked+.section-title::before{transform:rotate(-90deg)}.rs-drawer-form-container .section-expand-checkbox:checked+.section-title+.section-form{max-height:0;overflow:hidden}.rs-drawer-form-container .section-title{padding:6px 0;margin-bottom:12px;color:#44566c;font-family:Arial;font-size:13px;font-style:normal;font-weight:700;line-height:16px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:none}.rs-drawer-form-container .section-title::before{content:url(../../assets/img/down-arrow.svg);display:block;height:16px;width:16px;margin-right:8px}.rs-drawer-form-container .section-form{display:flex;flex-flow:row wrap;justify-content:space-between;gap:12px 56px;max-width:1576px;padding:0 24px;margin-bottom:20px}.rs-drawer-form-container .section-form .form-item{min-height:28px;min-width:400px;max-width:700px;width:calc((100% - 56px)/ 2);display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:flex-start}.rs-drawer-form-container .section-form .form-item[data-required=yes] .form-label>span:first-child::after{content:\"*\";color:var(--rs-input-require-label-color)}.rs-drawer-form-container .section-form .form-item .form-label{flex:none;width:144px;height:28px;margin-right:16px;color:#43566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px;display:flex;flex-flow:row nowrap;align-items:center}.rs-drawer-form-container .section-form .form-item .form-label .form-tooltip{margin-left:4px}.rs-drawer-form-container .section-form .form-item .form-label .form-tooltip .tooltip-icon::before{content:\" \";display:block;width:14px;height:14px;background-image:url(../../assets/img/tooltip-icon.svg);background-size:contain;cursor:pointer}.rs-drawer-form-container .section-form .form-item .form-content{flex:auto}@media (max-width:1420px){.rs-drawer-form-container .section-form .form-item{width:100%}}.rs-drawer-form-container .anchor-container{flex:none;display:flex;flex-flow:column nowrap;gap:4px;min-width:120px;height:auto;position:-webkit-sticky;position:sticky;top:56px}.rs-drawer-form-container .anchor-item{min-width:120px;padding:4px 12px;border-left:1px solid #eaedf0;cursor:pointer;color:#44566c;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:16px;position:relative}.rs-drawer-form-container .anchor-item::before{content:attr(data-content);color:#44566c;font-weight:400;position:absolute;left:12px}.rs-drawer-form-container .anchor-item::after{content:attr(data-content);visibility:hidden;color:#1364b3;font-weight:700}.rs-drawer-form-container .anchor-item[data-active=yes]{border-color:#1f7bff}.rs-drawer-form-container .anchor-item[data-active=yes]::before{visibility:hidden}.rs-drawer-form-container .anchor-item[data-active=yes]::after{visibility:visible}.rs-drawer-tooltip.e-tooltip-wrap{border:none;background-color:#44566c}.rs-drawer-tooltip.e-tooltip-wrap .e-arrow-tip{height:4px;visibility:hidden}"]
                 }] }