feat(cdk): new util tuiCoerceBooleanProperty

projects/cdk/coercion/coerce-boolean-property.ts

@@ -0,0 +1,9 @@
+/**
+ * Coerces a data-bound value (typically a string) to a boolean.
+ * @example {@link https://material.angular.io/cdk/coercion/api#functions}
+ */
+export function tuiCoerceBooleanProperty(
+    value: string | number | boolean | null | undefined | object,
+): boolean {
+    return value != null && `${value}` !== 'false';
+}

projects/cdk/coercion/index.ts

@@ -0,0 +1 @@
+export * from './coerce-boolean-property';

projects/cdk/coercion/package.json

@@ -0,0 +1,7 @@
+{
+    "ngPackage": {
+        "lib": {
+            "entryFile": "index.ts"
+        }
+    }
+}

projects/cdk/coercion/test/coerce-boolean-property.spec.ts

@@ -0,0 +1,47 @@
+import {tuiCoerceBooleanProperty} from '../coerce-boolean-property';
+
+describe('tuiCoerceBooleanProperty', () => {
+    it('should coerce undefined to false', () => {
+        expect(tuiCoerceBooleanProperty(undefined)).toBe(false);
+    });
+
+    it('should coerce null to false', () => {
+        expect(tuiCoerceBooleanProperty(null)).toBe(false);
+    });
+
+    it('should coerce the empty string to true', () => {
+        expect(tuiCoerceBooleanProperty('')).toBe(true);
+    });
+
+    it('should coerce zero to true', () => {
+        expect(tuiCoerceBooleanProperty(0)).toBe(true);
+    });
+
+    it('should coerce the string "false" to false', () => {
+        expect(tuiCoerceBooleanProperty('false')).toBe(false);
+    });
+
+    it('should coerce the boolean false to false', () => {
+        expect(tuiCoerceBooleanProperty(false)).toBe(false);
+    });
+
+    it('should coerce the boolean true to true', () => {
+        expect(tuiCoerceBooleanProperty(true)).toBe(true);
+    });
+
+    it('should coerce the string "true" to true', () => {
+        expect(tuiCoerceBooleanProperty('true')).toBe(true);
+    });
+
+    it('should coerce an arbitrary string to true', () => {
+        expect(tuiCoerceBooleanProperty('pink')).toBe(true);
+    });
+
+    it('should coerce an object to true', () => {
+        expect(tuiCoerceBooleanProperty({})).toBe(true);
+    });
+
+    it('should coerce an array to true', () => {
+        expect(tuiCoerceBooleanProperty([])).toBe(true);
+    });
+});

projects/cdk/index.ts

@@ -1,5 +1,6 @@
 export * from '@taiga-ui/cdk/abstract';
 export * from '@taiga-ui/cdk/classes';
+export * from '@taiga-ui/cdk/coercion';
 export * from '@taiga-ui/cdk/components';
 export * from '@taiga-ui/cdk/constants';
 export * from '@taiga-ui/cdk/date-time';

projects/kit/components/slider/slider-readonly.directive.ts

@@ -8,7 +8,12 @@ import {
     Self,
 } from '@angular/core';
 import {NgControl} from '@angular/forms';
-import {tuiDefaultProp, TuiDestroyService, watch} from '@taiga-ui/cdk';
+import {
+    tuiCoerceBooleanProperty,
+    tuiDefaultProp,
+    TuiDestroyService,
+    watch,
+} from '@taiga-ui/cdk';
 import {Observable} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
@@ -29,10 +34,6 @@ export class TuiSliderReadonlyDirective {
     @tuiDefaultProp()
     readonly: '' | boolean = true;
 
-    get computedReadonly(): boolean {
-        return this.readonly === '' || this.readonly;
-    }
-
     constructor(
         @Optional()
         @Self()
@@ -51,7 +52,7 @@ export class TuiSliderReadonlyDirective {
 
     @HostListener('input')
     onInput() {
-        if (this.computedReadonly) {
+        if (tuiCoerceBooleanProperty(this.readonly)) {
             this.slider.value = this.lastValue;
         }
     }