@datarailsshared/datarailsshared 1.4.137 → 1.4.138

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -5040,6 +5040,7 @@
     var DrSelectAddItemComponent = /** @class */ (function () {
         function DrSelectAddItemComponent(drSelect) {
             this.drSelect = drSelect;
+            this.currentValues = [];
             this.dynamicAddLabel = 'Add new';
             this.values = [];
             this.dynamicValueAdded = new i0.EventEmitter();
@@ -5066,15 +5067,22 @@
             this.isDynamicAdding = false;
             this.dynamicValue = '';
         };
+        DrSelectAddItemComponent.prototype.isDynamicValueValid = function () {
+            var _a;
+            var trimmedValue = (_a = this.dynamicValue) === null || _a === void 0 ? void 0 : _a.trim();
+            if (!trimmedValue)
+                return false;
+            return !this.currentValues.includes(trimmedValue);
+        };
         DrSelectAddItemComponent.prototype.onDynamicAdd = function (value, keydownEvent) {
-            var trimmedValue = value === null || value === void 0 ? void 0 : value.trim();
-            if (this.currentValues.includes(trimmedValue))
+            this.isDirty = true;
+            if (!this.isDynamicValueValid())
                 return;
             if (keydownEvent && keydownEvent.key !== 'Enter')
                 return;
             this.onDynamicAddingClose();
             this.drSelect.close();
-            this.dynamicValueAdded.emit(trimmedValue);
+            this.dynamicValueAdded.emit(value === null || value === void 0 ? void 0 : value.trim());
         };
         DrSelectAddItemComponent.prototype.calculateCurrentValues = function () {
             var _this = this;
@@ -5090,7 +5098,8 @@
     DrSelectAddItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-select-add-item',
-                    template: "<div class=\"dr-select__dynamic-add dynamic-add\">\n    <div class=\"dynamic-add__add-item\" (click)=\"onDynamicAdding()\">\n        <i class=\"dr-icon-add\"></i>\n        <p class=\"dynamic-add__add-item__text\">{{ dynamicAddLabel }}</p>\n    </div>\n    <div *ngIf=\"isDynamicAdding\" class=\"dynamic-add__field\">\n        <dr-input #dynamicInputRef\n                  class=\"dynamic-add__field__input\"\n                  [class.dynamic-add__field__input--error]=\"currentValues.includes(dynamicValue)\"\n                  [(ngModel)]=\"dynamicValue\"\n                  (keydown)=\"onDynamicAdd(dynamicValue, $event)\"\n                  placeholder=\"Type...\"></dr-input>\n        <div class=\"dynamic-add__field__buttons\">\n            <dr-button *ngIf=\"dynamicValue && !currentValues.includes(dynamicValue)\"\n                       theme=\"icon\"\n                       icon=\"dr-icon-approve\"\n                       iconSize=\"18px\"\n                       (click)=\"onDynamicAdd(dynamicValue)\"></dr-button>\n            <dr-button theme=\"icon\"\n                       icon=\"dr-icon-exit\"\n                       iconSize=\"18px\"\n                       (click)=\"onDynamicAddingClose()\"></dr-button>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div class=\"dr-select__dynamic-add dynamic-add\">\n    <div class=\"dynamic-add__add-item\" (click)=\"onDynamicAdding()\">\n        <i class=\"dr-icon-add\"></i>\n        <p class=\"dynamic-add__add-item__text\">{{ dynamicAddLabel }}</p>\n    </div>\n    <div *ngIf=\"isDynamicAdding\" class=\"dynamic-add__field\">\n        <dr-input #dynamicInputRef\n                  class=\"dynamic-add__field__input\"\n                  [class.dynamic-add__field__input--error]=\"!isDynamicValueValid() && isDirty\"\n                  [(ngModel)]=\"dynamicValue\"\n                  (keydown)=\"onDynamicAdd(dynamicValue, $event)\"\n                  placeholder=\"Type...\"></dr-input>\n        <div class=\"dynamic-add__field__buttons\">\n            <dr-button *ngIf=\"dynamicValue && isDynamicValueValid()\"\n                       theme=\"icon\"\n                       icon=\"dr-icon-approve\"\n                       iconSize=\"18px\"\n                       (click)=\"onDynamicAdd(dynamicValue)\"></dr-button>\n            <dr-button theme=\"icon\"\n                       icon=\"dr-icon-exit\"\n                       iconSize=\"18px\"\n                       (click)=\"onDynamicAddingClose()\"></dr-button>\n        </div>\n    </div>\n</div>\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".dynamic-add__add-item{cursor:pointer;display:flex;align-items:center;border-bottom:1px solid #dfe0e3;padding:6px}.dynamic-add__add-item:hover{background:#f9f7ff}.dynamic-add__add-item__text{font-size:14px;line-height:22px;margin:0}.dynamic-add__field{position:relative}.dynamic-add__field__buttons{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center}::ng-deep .ng-dropdown-panel .ng-dropdown-header:has(.dynamic-add){padding:0;border:none}::ng-deep .dynamic-add__field__input{padding-left:12px!important;height:36px!important;border:none!important;background:#f9f7ff!important;border-radius:0!important}::ng-deep .dynamic-add__field__input>input{background:#f9f7ff}::ng-deep .dynamic-add__field__input>input::placeholder{line-height:22px;font-size:14px;font-weight:400;color:#9ea1aa}::ng-deep .dynamic-add__field__input--error{background:#ffdfe4!important}::ng-deep .dynamic-add__field__input--error>input{background:#ffdfe4}\n"]
                 },] }
     ];