feat(uip-bool-setting): implement uip-setting interface

src/playground.ts

@@ -5,7 +5,7 @@ import {UIPSettings} from './settings/settings';
 import {UIPTextSetting} from './settings/setting/text-setting/text-setting';
 import {UIPListSetting} from './settings/setting/list-setting/list-setting';
 import {UIPClassSetting} from './settings/setting/class-setting/class-setting';
-import {UIPCheckSetting} from './settings/setting/check-setting/check-setting';
+import {UIPBoolSetting} from './settings/setting/bool-setting/bool-setting';
 import {UIPSnippets} from './snippets/snippets';
 
 export {
@@ -16,7 +16,7 @@ export {
 	UIPTextSetting,
 	UIPListSetting,
 	UIPClassSetting,
-	UIPCheckSetting,
+	UIPBoolSetting,
 	UIPSnippets
 };
 
@@ -28,6 +28,6 @@ export function init() {
 	UIPTextSetting.register();
 	UIPListSetting.register();
 	UIPClassSetting.register();
-	UIPCheckSetting.register();
+	UIPBoolSetting.register();
 	customElements.whenDefined(UIPRoot.is).then(() => UIPSnippets.register());
 }

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

@@ -0,0 +1,41 @@
+import {UIPSetting} from '../setting';
+import {attr} from "@exadel/esl/modules/esl-base-element/core";
+
+export class UIPBoolSetting extends UIPSetting {
+  public static is = 'uip-bool-setting';
+  protected $field: HTMLInputElement;
+
+  @attr({defaultValue: null}) value: string;
+  @attr({defaultValue: 'replace'}) mode: 'replace' | 'append';
+
+  protected render() {
+    this.$field = document.createElement('input');
+    this.$field.type = 'checkbox';
+    this.$field.name = this.label || '';
+  }
+
+  protected getDisplayedValue(): string | boolean {
+    return this.value ? this.value : this.$field.checked;
+  }
+
+  protected setValue(value: string | null): void {
+    if (this.value) {
+      if (this.mode === 'append') {
+        this.$field.checked = (value || '').search(new RegExp(/\b/.source + this.value + /\b/.source)) !== -1;
+      } else {
+        this.$field.checked = value === this.value;
+      }
+    } else {
+      this.$field.checked = value !== null;
+    }
+  }
+
+  protected setInconsistency(): void {
+
+  }
+
+  protected isValid(): boolean {
+    return true;
+  }
+}
+

src/settings/setting/setting.ts

@@ -34,7 +34,7 @@ export abstract class UIPSetting extends ESLBaseElement {
   }
 
   protected abstract getDisplayedValue(): string | boolean;
-  protected abstract isValid(): void;
+  protected abstract isValid(): boolean;
   protected abstract setInconsistency(): void;
   protected abstract setValue(value: string | null): void;
   protected abstract render(): void;

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

@@ -4,27 +4,27 @@ export class UIPTextSetting extends UIPSetting {
   public static is = 'uip-text-setting';
   protected $field: HTMLInputElement;
 
-  protected render(): void {
+  protected render() {
     this.$field = document.createElement('input');
-    this.$field.type = 'string';
+    this.$field.type = 'text';
     this.$field.name = this.label || '';
   }
 
   protected getDisplayedValue(): string {
     return this.$field.value;
   }
 
-  protected setValue(value: string) {
+  protected setValue(value: string): void {
     this.$field.value = value;
     this.$field.placeholder = '';
   }
 
-  protected setInconsistency() {
+  protected setInconsistency(): void {
     this.$field.value = '';
     this.$field.placeholder = 'Inconsistent value';
   }
 
-  protected isValid() {
+  protected isValid(): boolean {
     return true;
   }
 }

src/settings/settings.ts

@@ -1,4 +1,4 @@
-import {UIPCheckSetting} from './setting/check-setting/check-setting';
+import {UIPBoolSetting} from './setting/bool-setting/bool-setting';
 import {UIPListSetting} from './setting/list-setting/list-setting';
 import {UIPTextSetting} from './setting/text-setting/text-setting';
 import {UIPClassSetting} from './setting/class-setting/class-setting';
@@ -64,7 +64,7 @@ export class UIPSettings extends ESLBaseElement {
 
   private get attrSettingsTags(): any[] {
     return [
-      ...this.getElementsByTagName(UIPCheckSetting.is),
+      ...this.getElementsByTagName(UIPBoolSetting.is),
       ...this.getElementsByTagName(UIPListSetting.is),
       ...this.getElementsByTagName(UIPTextSetting.is),
     ];