@inspark/inspark-components 14.0.59 → 14.0.60

package/full/fesm2020/inspark-inspark-components.mjs

@@ -2105,38 +2105,48 @@ class SelectButtonComponent {
         this.error = '';
         this.iconPos = 'left';
         this.options = [];
+        this.disabled = false;
         this.required = false;
         this.multiple = false;
         this.focus = new EventEmitter();
         this.blur = new EventEmitter();
         this.click = new EventEmitter();
         this.change = new EventEmitter();
+        // хранит выбранные ЗНАЧЕНИЯ, а не объекты
         this.selected = [];
-        this.propagateChange = (_) => {
-        };
-    }
-    ngOnInit() {
+        // то, что отдаем наружу в форму
+        this.value = null;
+        this.propagateChange = () => { };
+        this.propagateTouched = () => { };
     }
-    ngOnChanges() {
-        if (this.initial) {
-            this.selected = this.initial;
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        // применяем initial только когда он реально поменялся
+        if (changes['initial'] && this.initial) {
+            this.selected = [...this.initial];
+            this.value = this.multiple ? [...this.initial] : this.initial[0] ?? null;
+            this.cdRef.detectChanges();
         }
-        else {
-            this.selected = [];
+        // если меняется список опций, надо попытаться восстановить выделение
+        if (changes['options'] && this.options && this.options.length > 0) {
+            this.syncSelectedWithOptions();
         }
     }
     clickButton(option) {
-        if (option.readonly) {
-            return false;
+        if (option.readonly || this.disabled) {
+            return;
         }
+        this.click.emit(option);
         if (this.multiple) {
-            if (this.selected.indexOf(option.value) !== -1) {
-                this.selected = this.selected.filter(item => item !== option.value);
+            if (this.selected.includes(option.value)) {
+                // убираем
+                this.selected = this.selected.filter(v => v !== option.value);
             }
             else {
-                this.selected.push(option.value);
+                // добавляем
+                this.selected = [...this.selected, option.value];
             }
-            this.value = this.options.filter(item => this.selected.indexOf(item.value) !== -1).map(val => val.value);
+            this.value = [...this.selected];
         }
         else {
             this.selected = [option.value];
@@ -2145,46 +2155,79 @@ class SelectButtonComponent {
         this.cdRef.detectChanges();
         this.onChange();
     }
-    /**
-     * Write form value to the DOM element (model => view)
-     */
+    // ControlValueAccessor: model -> view
     writeValue(value) {
         this.value = value;
-        if (value !== null && value !== undefined) {
-            if (Array.isArray(value)) {
-                this.selected = value.map(val => val);
-            }
-            else {
-                this.selected = [value];
-            }
+        if (value === null || value === undefined) {
+            this.selected = [];
         }
+        else if (Array.isArray(value)) {
+            // multiple
+            this.selected = [...value];
+        }
+        else {
+            // single
+            this.selected = [value];
+        }
+        // когда значение пришло извне, надо убедиться что такие опции есть
+        this.syncSelectedWithOptions();
         this.cdRef.detectChanges();
     }
-    /**
-     * Write form disabled state to the DOM element (model => view)
-     */
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    /**
-     * Update form when DOM element value changes (view => model)
-     */
+    // ControlValueAccessor
     registerOnChange(fn) {
-        // Store the provided function as an internal method.
         this.propagateChange = fn;
     }
-    /**
-     * Update form when DOM element is blurred (view => model)
-     */
+    // ControlValueAccessor
     registerOnTouched(fn) {
-        // Store the provided function as an internal method.
-        this.onTouched = fn;
+        this.propagateTouched = fn;
+    }
+    // ControlValueAccessor: disabled
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdRef.detectChanges();
     }
+    // пробросить наружу
     onChange() {
         this.propagateChange(this.value);
         this.change.emit(this.value);
     }
-    onTouched() {
+    onBlur() {
+        this.propagateTouched();
+        this.blur.emit();
+    }
+    onFocus() {
+        this.focus.emit();
+    }
+    // синхронизируем текущее выбранное со свежими options
+    syncSelectedWithOptions() {
+        if (!this.options || this.options.length === 0) {
+            return;
+        }
+        if (this.multiple) {
+            // оставляем только те выбранные, которые реально есть в новых options
+            const optionValues = this.options.map(o => o.value);
+            this.selected = this.selected.filter(v => optionValues.includes(v));
+            this.value = [...this.selected];
+        }
+        else {
+            if (this.selected.length > 0) {
+                const current = this.selected[0];
+                const found = this.options.find(o => o.value === current);
+                if (!found) {
+                    // выбранного больше нет в списке
+                    this.selected = [];
+                    this.value = null;
+                }
+                else {
+                    this.selected = [found.value];
+                    this.value = found.value;
+                }
+            }
+        }
+    }
+    // для *ngFor trackBy
+    trackByValue(index, item) {
+        return item.value;
     }
 }
 SelectButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -2193,8 +2236,8 @@ SelectButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => SelectButtonComponent),
             multi: true,
-        }
-    ], usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"label\" class=\"c-label__content\">\n        {{label}}\n  <span *ngIf=\"required\" class=\"c-label__req\">*</span>\n        <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{error}}</span>\n    </span>\n<div class=\"container\">\n  <in-button class=\"button-none\"></in-button>\n  <in-button (click)=\"clickButton(option)\"\n             *ngFor=\"let option of options\"\n             [color]=\"selected.indexOf(option.value) === -1 ? 'normal': 'primary' \"\n             [icon]=\"option.icon\"\n             [label]=\"option.label | translate\"\n             [testId]=\"'filter-buttons-' + option.value\"\n             [title]=\"option.title ? (option.title | translate) : ''\"\n             [name] = option.label\n             [disabled]=\"option.readonly || disabled\"\n  >\n  </in-button>\n</div>\n", styles: [".container{white-space:nowrap}in-button ::ng-deep button{outline:none}in-button:first-child ::ng-deep button{border-bottom-right-radius:0;border-top-right-radius:0;border-right:1px solid #000}in-button:not(:first-child):not(:last-child) ::ng-deep button{border-radius:0;border-right:1px solid #000}in-button:last-child ::ng-deep button{border-bottom-left-radius:0;border-top-left-radius:0}.button-none{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "in-button", inputs: ["size", "color", "type", "name", "testId", "label", "icon", "className", "notify", "svg", "width", "link", "isLoading", "shadow", "isIconOnly", "linkType", "linkTarget", "pressed", "disabled", "iconPos", "selectedItem", "menuPlacement", "menuItems"], outputs: ["focus", "blur", "click"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+        },
+    ], usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"label\" class=\"c-label__content\">\n  {{ label }}\n  <span *ngIf=\"required\" class=\"c-label__req\">*</span>\n  <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{ error }}</span>\n</span>\n\n<div class=\"container\">\n  <!-- \u0444\u0438\u043A\u0442\u0438\u0432\u043D\u0430\u044F \u043A\u043D\u043E\u043F\u043A\u0430 \u0435\u0441\u043B\u0438 \u043D\u0443\u0436\u043D\u0430 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 -->\n  <in-button class=\"button-none\"></in-button>\n\n  <in-button\n    *ngFor=\"let option of options; trackBy: trackByValue\"\n    (click)=\"clickButton(option)\"\n    [color]=\"selected.includes(option.value) ? 'primary' : 'normal'\"\n    [icon]=\"option.icon\"\n    [label]=\"option.label | translate\"\n    [testId]=\"'filter-buttons-' + option.value\"\n    [title]=\"option.title ? (option.title | translate) : ''\"\n    [name]=\"option.label\"\n    [disabled]=\"option.readonly || disabled\"\n  >\n  </in-button>\n</div>\n", styles: [".container{white-space:nowrap}in-button ::ng-deep button{outline:none}in-button:first-child ::ng-deep button{border-bottom-right-radius:0;border-top-right-radius:0;border-right:1px solid #000}in-button:not(:first-child):not(:last-child) ::ng-deep button{border-radius:0;border-right:1px solid #000}in-button:last-child ::ng-deep button{border-bottom-left-radius:0;border-top-left-radius:0}.button-none{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "in-button", inputs: ["size", "color", "type", "name", "testId", "label", "icon", "className", "notify", "svg", "width", "link", "isLoading", "shadow", "isIconOnly", "linkType", "linkTarget", "pressed", "disabled", "iconPos", "selectedItem", "menuPlacement", "menuItems"], outputs: ["focus", "blur", "click"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'in-select-button', providers: [
@@ -2202,8 +2245,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectButtonComponent),
                             multi: true,
-                        }
-                    ], template: "<span *ngIf=\"label\" class=\"c-label__content\">\n        {{label}}\n  <span *ngIf=\"required\" class=\"c-label__req\">*</span>\n        <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{error}}</span>\n    </span>\n<div class=\"container\">\n  <in-button class=\"button-none\"></in-button>\n  <in-button (click)=\"clickButton(option)\"\n             *ngFor=\"let option of options\"\n             [color]=\"selected.indexOf(option.value) === -1 ? 'normal': 'primary' \"\n             [icon]=\"option.icon\"\n             [label]=\"option.label | translate\"\n             [testId]=\"'filter-buttons-' + option.value\"\n             [title]=\"option.title ? (option.title | translate) : ''\"\n             [name] = option.label\n             [disabled]=\"option.readonly || disabled\"\n  >\n  </in-button>\n</div>\n", styles: [".container{white-space:nowrap}in-button ::ng-deep button{outline:none}in-button:first-child ::ng-deep button{border-bottom-right-radius:0;border-top-right-radius:0;border-right:1px solid #000}in-button:not(:first-child):not(:last-child) ::ng-deep button{border-radius:0;border-right:1px solid #000}in-button:last-child ::ng-deep button{border-bottom-left-radius:0;border-top-left-radius:0}.button-none{display:none}\n"] }]
+                        },
+                    ], template: "<span *ngIf=\"label\" class=\"c-label__content\">\n  {{ label }}\n  <span *ngIf=\"required\" class=\"c-label__req\">*</span>\n  <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{ error }}</span>\n</span>\n\n<div class=\"container\">\n  <!-- \u0444\u0438\u043A\u0442\u0438\u0432\u043D\u0430\u044F \u043A\u043D\u043E\u043F\u043A\u0430 \u0435\u0441\u043B\u0438 \u043D\u0443\u0436\u043D\u0430 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 -->\n  <in-button class=\"button-none\"></in-button>\n\n  <in-button\n    *ngFor=\"let option of options; trackBy: trackByValue\"\n    (click)=\"clickButton(option)\"\n    [color]=\"selected.includes(option.value) ? 'primary' : 'normal'\"\n    [icon]=\"option.icon\"\n    [label]=\"option.label | translate\"\n    [testId]=\"'filter-buttons-' + option.value\"\n    [title]=\"option.title ? (option.title | translate) : ''\"\n    [name]=\"option.label\"\n    [disabled]=\"option.readonly || disabled\"\n  >\n  </in-button>\n</div>\n", styles: [".container{white-space:nowrap}in-button ::ng-deep button{outline:none}in-button:first-child ::ng-deep button{border-bottom-right-radius:0;border-top-right-radius:0;border-right:1px solid #000}in-button:not(:first-child):not(:last-child) ::ng-deep button{border-radius:0;border-right:1px solid #000}in-button:last-child ::ng-deep button{border-bottom-left-radius:0;border-top-left-radius:0}.button-none{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { name: [{
                 type: Input
             }], testId: [{