@datarailsshared/datarailsshared 1.4.121 → 1.4.122

package/esm2015/lib/dr-inputs/dr-select-add-item/dr-select-add-item.component.js

@@ -0,0 +1,65 @@
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { DrSelectComponent } from '../dr-select/dr-select.component';
+import { reduce as _reduce } from 'lodash';
+export class DrSelectAddItemComponent {
+    constructor(drSelect) {
+        this.drSelect = drSelect;
+        this.dynamicAddLabel = 'Add new';
+        this.values = [];
+        this.dynamicValueAdded = new EventEmitter();
+    }
+    set inputRef(input) {
+        if (!input)
+            return;
+        input.focus();
+    }
+    ngOnChanges(changes) {
+        this.calculateCurrentValues();
+    }
+    ngOnInit() {
+        this.calculateCurrentValues();
+    }
+    onDynamicAdding() {
+        this.isDynamicAdding = true;
+    }
+    onDynamicAddingClose() {
+        this.isDynamicAdding = false;
+        this.dynamicValue = '';
+    }
+    onDynamicAdd(value, keydownEvent) {
+        const trimmedValue = value === null || value === void 0 ? void 0 : value.trim();
+        if (this.currentValues.includes(trimmedValue))
+            return;
+        if (keydownEvent && keydownEvent.key !== 'Enter')
+            return;
+        this.onDynamicAddingClose();
+        this.drSelect.close();
+        this.dynamicValueAdded.emit(trimmedValue);
+    }
+    calculateCurrentValues() {
+        this.currentValues = this.bindValue
+            ? _reduce(this.values, (acc, curr) => {
+                acc.push(curr[this.bindValue]);
+                return acc;
+            }, [])
+            : this.values;
+    }
+}
+DrSelectAddItemComponent.decorators = [
+    { type: 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",
+                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"]
+            },] }
+];
+DrSelectAddItemComponent.ctorParameters = () => [
+    { type: DrSelectComponent }
+];
+DrSelectAddItemComponent.propDecorators = {
+    dynamicAddLabel: [{ type: Input }],
+    bindValue: [{ type: Input }],
+    values: [{ type: Input }],
+    dynamicValueAdded: [{ type: Output }],
+    inputRef: [{ type: ViewChild, args: ['dynamicInputRef',] }]
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHItc2VsZWN0LWFkZC1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RhdGFyYWlsc3NoYXJlZC9zcmMvbGliL2RyLWlucHV0cy9kci1zZWxlY3QtYWRkLWl0ZW0vZHItc2VsZWN0LWFkZC1pdGVtLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQXFCLE1BQU0sRUFBaUIsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BILE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxNQUFNLElBQUksT0FBTyxFQUFFLE1BQU0sUUFBUSxDQUFDO0FBUTNDLE1BQU0sT0FBTyx3QkFBd0I7SUFlakMsWUFBb0IsUUFBMkI7UUFBM0IsYUFBUSxHQUFSLFFBQVEsQ0FBbUI7UUFWL0Isb0JBQWUsR0FBVyxTQUFTLENBQUM7UUFFbkMsV0FBTSxHQUFVLEVBQUUsQ0FBQztRQUNsQixzQkFBaUIsR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQVFqRixDQUFDO0lBTkQsSUFBa0MsUUFBUSxDQUFDLEtBQXVCO1FBQzlELElBQUksQ0FBQyxLQUFLO1lBQUUsT0FBTztRQUNuQixLQUFLLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDbEIsQ0FBQztJQUtNLFdBQVcsQ0FBQyxPQUFzQjtRQUNyQyxJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQztJQUNsQyxDQUFDO0lBRU0sUUFBUTtRQUNYLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDO0lBQ2xDLENBQUM7SUFFTSxlQUFlO1FBQ2xCLElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDO0lBQ2hDLENBQUM7SUFFTSxvQkFBb0I7UUFDdkIsSUFBSSxDQUFDLGVBQWUsR0FBRyxLQUFLLENBQUM7UUFDN0IsSUFBSSxDQUFDLFlBQVksR0FBRyxFQUFFLENBQUM7SUFDM0IsQ0FBQztJQUVNLFlBQVksQ0FBQyxLQUFhLEVBQUUsWUFBNEI7UUFDM0QsTUFBTSxZQUFZLEdBQUcsS0FBSyxhQUFMLEtBQUssdUJBQUwsS0FBSyxDQUFFLElBQUksRUFBRSxDQUFDO1FBQ25DLElBQUksSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDO1lBQUUsT0FBTztRQUN0RCxJQUFJLFlBQVksSUFBSSxZQUFZLENBQUMsR0FBRyxLQUFLLE9BQU87WUFBRSxPQUFPO1FBRXpELElBQUksQ0FBQyxvQkFBb0IsRUFBRSxDQUFDO1FBQzVCLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDdEIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRU8sc0JBQXNCO1FBQzFCLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLFNBQVM7WUFDL0IsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsR0FBRyxFQUFFLElBQUksRUFBRSxFQUFFO2dCQUNqQyxHQUFHLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQztnQkFDL0IsT0FBTyxHQUFHLENBQUM7WUFDZixDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ04sQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDdEIsQ0FBQzs7O1lBekRKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsb0JBQW9CO2dCQUM5QiwydkNBQWtEOzthQUVyRDs7O1lBUlEsaUJBQWlCOzs7OEJBY3JCLEtBQUs7d0JBQ0wsS0FBSztxQkFDTCxLQUFLO2dDQUNMLE1BQU07dUJBRU4sU0FBUyxTQUFDLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcywgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEclNlbGVjdENvbXBvbmVudCB9IGZyb20gJy4uL2RyLXNlbGVjdC9kci1zZWxlY3QuY29tcG9uZW50JztcbmltcG9ydCB7IHJlZHVjZSBhcyBfcmVkdWNlIH0gZnJvbSAnbG9kYXNoJztcbmltcG9ydCB7IERySW5wdXRDb21wb25lbnQgfSBmcm9tICcuLi9kci1pbnB1dC9kci1pbnB1dC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2RyLXNlbGVjdC1hZGQtaXRlbScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RyLXNlbGVjdC1hZGQtaXRlbS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vZHItc2VsZWN0LWFkZC1pdGVtLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRHJTZWxlY3RBZGRJdGVtQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuICAgIHB1YmxpYyBpc0R5bmFtaWNBZGRpbmc6IGJvb2xlYW47XG4gICAgcHVibGljIGR5bmFtaWNWYWx1ZTogc3RyaW5nO1xuICAgIHB1YmxpYyBjdXJyZW50VmFsdWVzOiBhbnlbXTtcblxuICAgIEBJbnB1dCgpIHB1YmxpYyBkeW5hbWljQWRkTGFiZWw6IHN0cmluZyA9ICdBZGQgbmV3JztcbiAgICBASW5wdXQoKSBwdWJsaWMgYmluZFZhbHVlOiBzdHJpbmc7XG4gICAgQElucHV0KCkgcHJpdmF0ZSB2YWx1ZXM6IGFueVtdID0gW107XG4gICAgQE91dHB1dCgpIHByaXZhdGUgZHluYW1pY1ZhbHVlQWRkZWQ6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgICBAVmlld0NoaWxkKCdkeW5hbWljSW5wdXRSZWYnKSBzZXQgaW5wdXRSZWYoaW5wdXQ6IERySW5wdXRDb21wb25lbnQpIHtcbiAgICAgICAgaWYgKCFpbnB1dCkgcmV0dXJuO1xuICAgICAgICBpbnB1dC5mb2N1cygpO1xuICAgIH1cblxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgZHJTZWxlY3Q6IERyU2VsZWN0Q29tcG9uZW50KSB7XG4gICAgfVxuXG4gICAgcHVibGljIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICAgICAgdGhpcy5jYWxjdWxhdGVDdXJyZW50VmFsdWVzKCk7XG4gICAgfVxuXG4gICAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmNhbGN1bGF0ZUN1cnJlbnRWYWx1ZXMoKTtcbiAgICB9XG5cbiAgICBwdWJsaWMgb25EeW5hbWljQWRkaW5nKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmlzRHluYW1pY0FkZGluZyA9IHRydWU7XG4gICAgfVxuXG4gICAgcHVibGljIG9uRHluYW1pY0FkZGluZ0Nsb3NlKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmlzRHluYW1pY0FkZGluZyA9IGZhbHNlO1xuICAgICAgICB0aGlzLmR5bmFtaWNWYWx1ZSA9ICcnO1xuICAgIH1cblxuICAgIHB1YmxpYyBvbkR5bmFtaWNBZGQodmFsdWU6IHN0cmluZywga2V5ZG93bkV2ZW50PzogS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuICAgICAgICBjb25zdCB0cmltbWVkVmFsdWUgPSB2YWx1ZT8udHJpbSgpO1xuICAgICAgICBpZiAodGhpcy5jdXJyZW50VmFsdWVzLmluY2x1ZGVzKHRyaW1tZWRWYWx1ZSkpIHJldHVybjtcbiAgICAgICAgaWYgKGtleWRvd25FdmVudCAmJiBrZXlkb3duRXZlbnQua2V5ICE9PSAnRW50ZXInKSByZXR1cm47XG5cbiAgICAgICAgdGhpcy5vbkR5bmFtaWNBZGRpbmdDbG9zZSgpO1xuICAgICAgICB0aGlzLmRyU2VsZWN0LmNsb3NlKCk7XG4gICAgICAgIHRoaXMuZHluYW1pY1ZhbHVlQWRkZWQuZW1pdCh0cmltbWVkVmFsdWUpO1xuICAgIH1cblxuICAgIHByaXZhdGUgY2FsY3VsYXRlQ3VycmVudFZhbHVlcygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5jdXJyZW50VmFsdWVzID0gdGhpcy5iaW5kVmFsdWVcbiAgICAgICAgICAgID8gX3JlZHVjZSh0aGlzLnZhbHVlcywgKGFjYywgY3VycikgPT4ge1xuICAgICAgICAgICAgICAgIGFjYy5wdXNoKGN1cnJbdGhpcy5iaW5kVmFsdWVdKTtcbiAgICAgICAgICAgICAgICByZXR1cm4gYWNjO1xuICAgICAgICAgICAgfSwgW10pXG4gICAgICAgICAgICA6IHRoaXMudmFsdWVzO1xuICAgIH1cbn1cbiJdfQ==