fix(uip-setting): pr fix

src/settings/setting/bool-setting/bool-setting.ts

@@ -1,6 +1,7 @@
 import {UIPSetting} from '../setting';
 import {attr} from '@exadel/esl/modules/esl-base-element/core';
 import {UIPStateModel} from '../../../utils/state-model/state-model';
+import ArrayUtils from "../../../utils/array-utils/array-utils";
 
 export class UIPBoolSetting extends UIPSetting {
   public static is = 'uip-bool-setting';
@@ -42,7 +43,8 @@ export class UIPBoolSetting extends UIPSetting {
     if (this.mode === 'replace') {
       checkEqual = values.map(attrValue => attrValue && this.value ? attrValue === this.value : true);
     } else {
-      checkEqual = values.map(value => value && new RegExp(/\b/.source + this.value + /\b/.source).test(value));
+      checkEqual = values.map(value => value &&
+        ArrayUtils.intersection([this.value], value.split(' ')).length !== 0);
     }
 
     if (checkEqual.every(value => value === checkEqual[0])) {
@@ -73,6 +75,7 @@ export class UIPBoolSetting extends UIPSetting {
     }
   }
 
+  // TODO: implement inconsistency state for boolean setting
   protected setInconsistency(): void {
 
   }

src/settings/setting/select-setting/select-setting.ts

@@ -51,23 +51,23 @@ export class UIPSelectSetting extends UIPSetting {
 
   updateFrom(model: UIPStateModel) {
     const settingOptions = this.values;
-    const attrTokens = model.getAttribute(this.target, this.attribute).map(value => value ? value.split(' ') : []);
+    const attrValues = model.getAttribute(this.target, this.attribute);
 
-    if (attrTokens.some(tokens => !tokens.length)) {
-      this.setInconsistency();
-      return;
-    }
-
-    if (this.mode === 'append') {
-      const valueTokens = ArrayUtils.intersection(ArrayUtils.select(attrTokens[0], settingOptions), ...attrTokens);
-      valueTokens.length ? this.setValue(valueTokens.join(' ')) : this.setInconsistency();
+    if (this.mode === "replace") {
+      if (attrValues[0] && ArrayUtils.contains(settingOptions, attrValues[0]?.split(' ')) &&
+        attrValues.every(val => val === attrValues[0])) {
+        this.setValue(attrValues[0]);
+      } else {
+        this.setInconsistency();
+      }
 
       return;
     }
 
-    ArrayUtils.contains(settingOptions, attrTokens[0]) &&
-    attrTokens.every(tokens => tokens && ArrayUtils.equals(tokens, attrTokens[0])) ?
-      this.setValue(attrTokens[0].join(' ')) : this.setInconsistency();
+    const attrTokens = attrValues.map(value => value ? value.split(' ') : []);
+
+    const valueTokens = ArrayUtils.intersection(settingOptions, ...attrTokens);
+    valueTokens.length ? this.setValue(valueTokens.join(' ')) : this.setInconsistency();
   }
 
   protected render(): void {

src/settings/setting/setting.ts

@@ -34,11 +34,11 @@ export abstract class UIPSetting extends ESLBaseElement {
   public updateFrom(model: UIPStateModel): void {
     const values = model.getAttribute(this.target, this.attribute);
 
-    if (values.every(value => value && value === values[0])) {
-      this.setValue(values[0]);
+    if (values.some(value => value === null || value !== values[0])) {
+      this.setInconsistency();
     }
     else {
-      this.setInconsistency();
+      this.setValue(values[0]);
     }
   }
 

src/settings/setting/text-setting/text-setting.ts

@@ -33,4 +33,3 @@ export class UIPTextSetting extends UIPSetting {
     return true;
   }
 }
-

src/utils/array-utils/array-utils.ts

@@ -7,11 +7,7 @@ export default class ArrayUtils {
     return subArray.every(el => array.indexOf(el) !== -1);
   }
 
-  static select<T>(array: T[], selectItems: T[]): T[] {
-    return array.filter(el => selectItems.indexOf(el) !== -1);
-  }
-
   static intersection<T>(...arrays: T[][]): T[] {
-    return arrays.reduce((inter, array) => ArrayUtils.select(array, inter), arrays[0]);
+    return arrays.reduce((inter, array) => inter.filter(el => array.indexOf(el) !== -1), arrays[0]);
   }
 }

src/utils/state-model/state-model.ts

@@ -1,38 +1,34 @@
 import {TraversingQuery} from '@exadel/esl';
 
 export class UIPStateModel {
-  public html: string;
+  protected root: Element;
 
-  protected get root(): Element {
-    return new DOMParser().parseFromString(this.html, 'text/html').body;
+  public set html(markup: string) {
+    this.root = new DOMParser().parseFromString(markup, 'text/html').body;
+  }
+
+  public get html(): string {
+    return this.root.innerHTML;
   }
 
   public getAttribute(target: string, name: string): (string | null)[] {
     return TraversingQuery.all(target, this.root).map(el => el.getAttribute(name));
   }
 
   public setAttribute(target: string, name: string, value: string | boolean): void {
-    const root = this.root;
-    const elements = TraversingQuery.all(target, root);
+    const elements = TraversingQuery.all(target, this.root);
 
     if (typeof value === 'string') {
       elements.forEach(el => el.setAttribute(name, value));
     } else {
       elements.forEach(el => value ? el.setAttribute(name, '') : el.removeAttribute(name));
     }
-
-    this.html = root.innerHTML;
   }
 
   public transformAttribute(target: string, name: string, transform: (current: string | null) => string | null) {
-    const root = this.root;
-    const values = this.getAttribute(target, name);
-
-   TraversingQuery.all(target, root).forEach((el, index) => {
-     const transformed = transform(values[index]);
-     transformed ? el.setAttribute(name, transformed) : el.removeAttribute(name);
-   });
-
-   this.html = root.innerHTML;
+    TraversingQuery.all(target, this.root).forEach(el => {
+      const transformed = transform(el.getAttribute(name));
+      transformed === null ? el.removeAttribute(name) : el.setAttribute(name, transformed);
+    });
   }
 }