@mintplayer/ng-bootstrap 20.6.3 → 21.1.0

package/fesm2022/mintplayer-ng-bootstrap-color-picker.mjs

@@ -1,52 +1,38 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, Input, Output, ViewChild, HostBinding, Component, Directive, forwardRef, Inject, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
+import { inject, ElementRef, model, output, signal, computed, effect, HostListener, ViewChild, HostBinding, ChangeDetectionStrategy, Component, NgZone, Directive, input, forwardRef, NgModule } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { BehaviorSubject, combineLatest, map, debounceTime, switchMap, take } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class BsColorWheelComponent {
-    constructor(element, destroy) {
-        // this.resizeObserver = new ResizeObserver((entries) => {
-        //   for (const entry of entries) {
-        //     if (entry.target === this.element.nativeElement) {
-        //       console.log(entry.contentRect);
-        //       this.width$.next(entry.contentRect.width);
-        //       this.height$.next(entry.contentRect.height);
-        //       break;
-        //     }
-        //   }
-        // });
-        this.element = element;
-        this.destroy = destroy;
+    constructor() {
+        this.element = inject((ElementRef));
         this.positionRelative = true;
-        //#region Hue/Luminosity
-        this.hs$ = new BehaviorSubject({ hue: 0, saturation: 0 });
-        this.hsChange = new EventEmitter();
-        //#endregion
-        //#region Luminosity
-        this.luminosity$ = new BehaviorSubject(0);
-        //#endregion
-        // private resizeObserver: ResizeObserver;
-        this.canvasContext = null;
+        // Inputs
+        this.width = model(150, ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = model(150, ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.diameterRatio = model(0, ...(ngDevMode ? [{ debugName: "diameterRatio" }] : []));
+        this.luminosity = model(0, ...(ngDevMode ? [{ debugName: "luminosity" }] : []));
+        // HS model with output
+        this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : []));
+        this.hsChange = output();
+        // Internal state
+        this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.viewInited = signal(false, ...(ngDevMode ? [{ debugName: "viewInited" }] : []));
         this.isPointerDown = false;
-        this.width$ = new BehaviorSubject(150);
-        this.height$ = new BehaviorSubject(150);
-        this.diameterRatio$ = new BehaviorSubject(0);
-        this.disabled$ = new BehaviorSubject(false);
-        this.viewInited$ = new BehaviorSubject(false);
-        this.squareSize$ = combineLatest([this.width$, this.height$])
-            .pipe(map(([width, height]) => {
-            if ((width === null) || (height === null)) {
+        this.canvasContext = null;
+        // Computed values
+        this.squareSize = computed(() => {
+            const width = this.width();
+            const height = this.height();
+            if (width === null || height === null) {
                 return null;
             }
-            const squareSize = Math.min(width, height);
-            return squareSize;
-        }));
-        this.shiftX$ = combineLatest([this.width$, this.height$])
-            .pipe(map(([width, height]) => {
-            if ((width === null) || (height === null)) {
+            return Math.min(width, height);
+        }, ...(ngDevMode ? [{ debugName: "squareSize" }] : []));
+        this.shiftX = computed(() => {
+            const width = this.width();
+            const height = this.height();
+            if (width === null || height === null) {
                 return null;
             }
             else if (width < height) {
@@ -55,10 +41,11 @@ class BsColorWheelComponent {
             else {
                 return (width - height) / 2;
             }
-        }));
-        this.shiftY$ = combineLatest([this.width$, this.height$])
-            .pipe(map(([width, height]) => {
-            if ((width === null) || (height === null)) {
+        }, ...(ngDevMode ? [{ debugName: "shiftX" }] : []));
+        this.shiftY = computed(() => {
+            const width = this.width();
+            const height = this.height();
+            if (width === null || height === null) {
                 return null;
             }
             else if (width < height) {
@@ -67,88 +54,76 @@ class BsColorWheelComponent {
             else {
                 return 0;
             }
-        }));
-        this.innerRadius$ = combineLatest([this.squareSize$, this.diameterRatio$])
-            .pipe(map(([squareSize, diameterRatio]) => {
+        }, ...(ngDevMode ? [{ debugName: "shiftY" }] : []));
+        this.innerRadius = computed(() => {
+            const squareSize = this.squareSize();
+            const diameterRatio = this.diameterRatio();
             if (squareSize) {
                 return squareSize / 2 * diameterRatio;
             }
             else {
                 return 0;
             }
-        }));
-        this.outerRadius$ = combineLatest([this.squareSize$, this.diameterRatio$])
-            .pipe(map(([squareSize, diameterRatio]) => {
+        }, ...(ngDevMode ? [{ debugName: "innerRadius" }] : []));
+        this.outerRadius = computed(() => {
+            const squareSize = this.squareSize();
             if (squareSize) {
                 return squareSize / 2;
             }
             else {
                 return 150;
             }
-        }));
-        combineLatest([this.innerRadius$, this.outerRadius$, this.shiftX$, this.shiftY$])
-            .pipe(debounceTime(20), takeUntilDestroyed())
-            .subscribe(([innerRadius, outerRadius, shiftX, shiftY]) => {
-            if (this.canvasContext && (innerRadius !== null) && (outerRadius !== null) && (shiftX !== null) && (shiftY !== null)) {
-                this.canvasContext.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
-                this.canvasContext.save();
-                this.canvasContext.translate(shiftX + outerRadius, shiftY + outerRadius);
-                for (let x = 0; x < 360; x++) {
-                    this.canvasContext.rotate(1 * Math.PI / 180);
-                    const gradient = this.canvasContext.createLinearGradient(innerRadius, 0, outerRadius, 0);
-                    gradient.addColorStop(0, `hsl(${x}, 0%, 50%)`);
-                    gradient.addColorStop(1, `hsl(${x}, 100%, 50%)`);
-                    this.canvasContext.fillStyle = gradient;
-                    this.canvasContext.fillRect(innerRadius, 0, outerRadius - innerRadius, outerRadius / 50);
-                }
-                this.canvasContext.restore();
-            }
-        });
-        this.markerPosition$ = combineLatest([this.hs$, this.shiftX$, this.shiftY$])
-            .pipe(switchMap(([hs, shiftX, shiftY]) => {
-            return this.color2position(hs)
-                .pipe(map((position) => ({ position, shiftX: (shiftX ?? 0), shiftY: (shiftY ?? 0) })));
-        }))
-            .pipe(map(({ position, shiftX, shiftY }) => {
+        }, ...(ngDevMode ? [{ debugName: "outerRadius" }] : []));
+        this.markerPosition = computed(() => {
+            const hs = this.hs();
+            const shiftX = this.shiftX() ?? 0;
+            const shiftY = this.shiftY() ?? 0;
+            const position = this.color2position(hs);
             return {
                 x: position.x + shiftX,
                 y: position.y + shiftY,
             };
-        }));
-        this.hs$.pipe(takeUntilDestroyed())
-            .subscribe((hs) => this.hsChange.emit(hs));
-    }
-    set diameterRatio(value) {
-        this.diameterRatio$.next(value);
-    }
-    set width(value) {
-        this.width$.next(value);
-    }
-    set height(value) {
-        this.height$.next(value);
-    }
-    get hs() {
-        return this.hs$.value;
-    }
-    set hs(value) {
-        this.hs$.next(value);
-    }
-    get luminosity() {
-        return this.luminosity$.value;
-    }
-    set luminosity(value) {
-        this.luminosity$.next(value);
+        }, ...(ngDevMode ? [{ debugName: "markerPosition" }] : []));
+        // Draw color wheel when dimensions change
+        effect(() => {
+            const innerRadius = this.innerRadius();
+            const outerRadius = this.outerRadius();
+            const shiftX = this.shiftX();
+            const shiftY = this.shiftY();
+            // Use setTimeout to debounce slightly
+            setTimeout(() => {
+                if (this.canvasContext && innerRadius !== null && outerRadius !== null && shiftX !== null && shiftY !== null) {
+                    this.canvasContext.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
+                    this.canvasContext.save();
+                    this.canvasContext.translate(shiftX + outerRadius, shiftY + outerRadius);
+                    for (let x = 0; x < 360; x++) {
+                        this.canvasContext.rotate(1 * Math.PI / 180);
+                        const gradient = this.canvasContext.createLinearGradient(innerRadius, 0, outerRadius, 0);
+                        gradient.addColorStop(0, `hsl(${x}, 0%, 50%)`);
+                        gradient.addColorStop(1, `hsl(${x}, 100%, 50%)`);
+                        this.canvasContext.fillStyle = gradient;
+                        this.canvasContext.fillRect(innerRadius, 0, outerRadius - innerRadius, outerRadius / 50);
+                    }
+                    this.canvasContext.restore();
+                }
+            }, 20);
+        });
+        // Emit HS changes
+        effect(() => {
+            const hs = this.hs();
+            this.hsChange.emit(hs);
+        });
     }
     ngAfterViewInit() {
-        // this.resizeObserver.observe(this.element.nativeElement);
-        this.viewInited$.next(true);
+        this.viewInited.set(true);
         if (typeof window !== 'undefined') {
             this.canvasContext = this.canvas.nativeElement.getContext('2d', { willReadFrequently: true });
         }
     }
     onPointerDown(ev) {
-        if (!this.disabled$.value) {
+        if (!this.disabled()) {
             ev.preventDefault();
+            ev.stopPropagation();
             this.isPointerDown = true;
             this.updateColor(ev, !('touches' in ev));
         }
@@ -181,65 +156,62 @@ class BsColorWheelComponent {
                 y: ev.clientY - (subtract ? rect.top : 0),
             };
         }
-        this.position2color(co.x, co.y).pipe(take(1), takeUntilDestroyed(this.destroy)).subscribe((color) => {
-            if (color) {
-                this.hs$.next({ hue: color.hue, saturation: color.saturation });
-            }
-            else {
-                console.warn('Color is null');
-            }
-        });
+        const color = this.position2color(co.x, co.y);
+        if (color) {
+            this.hs.set({ hue: color.hue, saturation: color.saturation });
+        }
+        else {
+            console.warn('Color is null');
+        }
     }
     isInsideCircle(x, y) {
-        return combineLatest([this.squareSize$, this.shiftX$, this.shiftY$])
-            .pipe(map(([squareSize, shiftX, shiftY]) => {
-            // Position to the square
-            const sx = x - (shiftX ?? 0);
-            const sy = y - (shiftY ?? 0);
-            // Square radius
-            const sr = (squareSize ?? 0) / 2;
-            const radius = Math.sqrt(Math.pow(sx - sr, 2) + Math.pow(sy - sr, 2));
-            const angle = (Math.atan2(sr - sy, sr - sx) + Math.PI) % 360;
-            return {
-                inside: radius <= sr,
-                angle
-            };
-        }));
+        const squareSize = this.squareSize();
+        const shiftX = this.shiftX();
+        const shiftY = this.shiftY();
+        // Position to the square
+        const sx = x - (shiftX ?? 0);
+        const sy = y - (shiftY ?? 0);
+        // Square radius
+        const sr = (squareSize ?? 0) / 2;
+        const radius = Math.sqrt(Math.pow(sx - sr, 2) + Math.pow(sy - sr, 2));
+        const angle = (Math.atan2(sr - sy, sr - sx) + Math.PI) % 360;
+        return {
+            inside: radius <= sr,
+            angle
+        };
     }
     position2color(x, y) {
-        return this.isInsideCircle(x, y).pipe(map((result) => {
-            if (!this.canvasContext) {
-                return null;
-            }
-            if (result.inside) {
-                const imageData = this.canvasContext.getImageData(x, y, 1, 1).data;
-                const hsl = this.rgb2Hsl({ r: imageData[0], g: imageData[1], b: imageData[2] });
-                return hsl;
-            }
-            return { hue: result.angle * 180 / Math.PI, saturation: 1, luminosity: 0.5 };
-        }));
+        if (!this.canvasContext) {
+            return null;
+        }
+        const result = this.isInsideCircle(x, y);
+        if (result.inside) {
+            const imageData = this.canvasContext.getImageData(x, y, 1, 1).data;
+            const hsl = this.rgb2Hsl({ r: imageData[0], g: imageData[1], b: imageData[2] });
+            return hsl;
+        }
+        return { hue: result.angle * 180 / Math.PI, saturation: 1, luminosity: 0.5 };
     }
     color2position(hs) {
-        return combineLatest([this.innerRadius$, this.outerRadius$])
-            .pipe(map(([innerRadius, outerRadius]) => {
-            if (innerRadius === null) {
-                innerRadius = 0;
-            }
-            if (!outerRadius) {
-                outerRadius = 100;
-            }
-            const theta = hs.hue * Math.PI / 180;
-            const c = {
-                x: -outerRadius * Math.cos(theta),
-                y: -outerRadius * Math.sin(theta)
-            };
-            const d = hs.saturation * (outerRadius - innerRadius) + innerRadius;
-            const o = { x: outerRadius, y: outerRadius };
-            return {
-                x: o.x - d * (c.x / outerRadius),
-                y: o.y - d * (c.y / outerRadius),
-            };
-        }));
+        let innerRadius = this.innerRadius();
+        let outerRadius = this.outerRadius();
+        if (innerRadius === null) {
+            innerRadius = 0;
+        }
+        if (!outerRadius) {
+            outerRadius = 100;
+        }
+        const theta = hs.hue * Math.PI / 180;
+        const c = {
+            x: -outerRadius * Math.cos(theta),
+            y: -outerRadius * Math.sin(theta)
+        };
+        const d = hs.saturation * (outerRadius - innerRadius) + innerRadius;
+        const o = { x: outerRadius, y: outerRadius };
+        return {
+            x: o.x - d * (c.x / outerRadius),
+            y: o.y - d * (c.y / outerRadius),
+        };
     }
     rgb2Hsl(color) {
         const r01 = this.bound01(color.r, 255);
@@ -293,31 +265,19 @@ class BsColorWheelComponent {
             return (n % max) / max;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsColorWheelComponent, deps: [{ token: i0.ElementRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: BsColorWheelComponent, isStandalone: false, selector: "bs-color-wheel", inputs: { diameterRatio: "diameterRatio", width: "width", height: "height", hs: "hs", luminosity: "luminosity" }, outputs: { hsChange: "hsChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onPointerUp($event)" }, properties: { "class.position-relative": "this.positionRelative" } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas\n    class=\"d-block\"\n    [width]=\"width$ | async\"\n    [height]=\"height$ | async\"\n    (mousedown)=\"onPointerDown($event)\"\n    (touchstart)=\"onPointerDown($event)\"\n    (touchmove)=\"onPointerMove($event)\"\n    (touchend)=\"onPointerUp($event)\"\n    #canvas></canvas>\n\n@if (markerPosition$ | async; as markerPosition) {\n    <div class=\"thumb position-absolute pe-none\" [style.left.px]=\"markerPosition.x\" [style.top.px]=\"markerPosition.y\"></div>\n}", styles: [".thumb{width:30px;height:30px;border-radius:15px;margin-top:-15px;margin-left:-15px;box-sizing:border-box;border:2px solid white;box-shadow:#0000001a 0 0 10px 5px}\n"], dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsColorWheelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsColorWheelComponent, isStandalone: false, selector: "bs-color-wheel", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, diameterRatio: { classPropertyName: "diameterRatio", publicName: "diameterRatio", isSignal: true, isRequired: false, transformFunction: null }, luminosity: { classPropertyName: "luminosity", publicName: "luminosity", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange", diameterRatio: "diameterRatioChange", luminosity: "luminosityChange", hs: "hsChange", hsChange: "hsChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onPointerUp($event)" }, properties: { "class.position-relative": "this.positionRelative" } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas\n    class=\"d-block\"\n    [width]=\"width()\"\n    [height]=\"height()\"\n    (mousedown)=\"onPointerDown($event)\"\n    (touchstart)=\"onPointerDown($event)\"\n    (touchmove)=\"onPointerMove($event)\"\n    (touchend)=\"onPointerUp($event)\"\n    #canvas></canvas>\n\n@if (markerPosition(); as markerPosition) {\n    <div class=\"thumb position-absolute pe-none\" [style.left.px]=\"markerPosition.x\" [style.top.px]=\"markerPosition.y\"></div>\n}\n", styles: [".thumb{width:30px;height:30px;border-radius:15px;margin-top:-15px;margin-left:-15px;box-sizing:border-box;border:2px solid white;box-shadow:#0000001a 0 0 10px 5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsColorWheelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsColorWheelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-color-wheel', standalone: false, template: "<canvas\n    class=\"d-block\"\n    [width]=\"width$ | async\"\n    [height]=\"height$ | async\"\n    (mousedown)=\"onPointerDown($event)\"\n    (touchstart)=\"onPointerDown($event)\"\n    (touchmove)=\"onPointerMove($event)\"\n    (touchend)=\"onPointerUp($event)\"\n    #canvas></canvas>\n\n@if (markerPosition$ | async; as markerPosition) {\n    <div class=\"thumb position-absolute pe-none\" [style.left.px]=\"markerPosition.x\" [style.top.px]=\"markerPosition.y\"></div>\n}", styles: [".thumb{width:30px;height:30px;border-radius:15px;margin-top:-15px;margin-left:-15px;box-sizing:border-box;border:2px solid white;box-shadow:#0000001a 0 0 10px 5px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.DestroyRef }], propDecorators: { positionRelative: [{
+            args: [{ selector: 'bs-color-wheel', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<canvas\n    class=\"d-block\"\n    [width]=\"width()\"\n    [height]=\"height()\"\n    (mousedown)=\"onPointerDown($event)\"\n    (touchstart)=\"onPointerDown($event)\"\n    (touchmove)=\"onPointerMove($event)\"\n    (touchend)=\"onPointerUp($event)\"\n    #canvas></canvas>\n\n@if (markerPosition(); as markerPosition) {\n    <div class=\"thumb position-absolute pe-none\" [style.left.px]=\"markerPosition.x\" [style.top.px]=\"markerPosition.y\"></div>\n}\n", styles: [".thumb{width:30px;height:30px;border-radius:15px;margin-top:-15px;margin-left:-15px;box-sizing:border-box;border:2px solid white;box-shadow:#0000001a 0 0 10px 5px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { positionRelative: [{
                 type: HostBinding,
                 args: ['class.position-relative']
-            }], diameterRatio: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
             }], canvas: [{
                 type: ViewChild,
                 args: ['canvas']
-            }], hsChange: [{
-                type: Output
-            }], hs: [{
-                type: Input
-            }], luminosity: [{
-                type: Input
-            }], onMouseMove: [{
+            }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], diameterRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameterRatio", required: false }] }, { type: i0.Output, args: ["diameterRatioChange"] }], luminosity: [{ type: i0.Input, args: [{ isSignal: true, alias: "luminosity", required: false }] }, { type: i0.Output, args: ["luminosityChange"] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], hsChange: [{ type: i0.Output, args: ["hsChange"] }], onMouseMove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
             }], onPointerUp: [{
@@ -326,46 +286,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
             }] } });
 
 class BsSliderComponent {
-    constructor(element, zone) {
-        this.element = element;
-        this.zone = zone;
+    constructor() {
+        this.element = inject((ElementRef));
+        this.zone = inject(NgZone);
         this.dBlock = true;
         this.positionRelative = true;
-        //#region Value
-        this.value$ = new BehaviorSubject(0.5);
-        this.valueChange = new EventEmitter();
-        //#endregion
-        this.isPointerDown$ = new BehaviorSubject(false);
-        this.value$.pipe(takeUntilDestroyed())
-            .subscribe((value) => this.valueChange.emit(value));
-        this.thumbMarginLeft$ = this.value$.pipe(map((value) => {
-            const res = value * element.nativeElement.clientWidth - 12;
+        this.value = model(0.5, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.valueChange = output();
+        this.isPointerDown = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDown" }] : []));
+        this.thumbMarginLeft = computed(() => {
+            const value = this.value();
+            const res = value * this.element.nativeElement.clientWidth - 12;
             return res;
-        }));
-        this.cursorClass$ = this.isPointerDown$.pipe(map((isPointerDown) => {
-            return isPointerDown ? 'cursor-grabbing' : 'cursor-grab';
-        }));
-    }
-    get value() {
-        return this.value$.value;
-    }
-    set value(value) {
-        this.value$.next(value);
+        }, ...(ngDevMode ? [{ debugName: "thumbMarginLeft" }] : []));
+        this.cursorClass = computed(() => {
+            return this.isPointerDown() ? 'cursor-grabbing' : 'cursor-grab';
+        }, ...(ngDevMode ? [{ debugName: "cursorClass" }] : []));
+        effect(() => {
+            const value = this.value();
+            this.valueChange.emit(value);
+        });
     }
     onPointerDown(ev) {
         ev.preventDefault();
-        this.zone.run(() => this.isPointerDown$.next(true));
+        ev.stopPropagation();
+        this.zone.run(() => this.isPointerDown.set(true));
         this.updateColor(ev);
     }
     onPointerMove(ev) {
-        if (this.isPointerDown$.value) {
+        if (this.isPointerDown()) {
             ev.preventDefault();
             ev.stopPropagation();
             this.updateColor(ev);
         }
     }
     onPointerUp(ev) {
-        this.isPointerDown$.next(false);
+        this.isPointerDown.set(false);
     }
     updateColor(ev) {
         let co;
@@ -382,15 +338,15 @@ class BsSliderComponent {
         }
         const percent = co.x / this.track.nativeElement.clientWidth;
         const limited = Math.max(0, Math.min(1, percent));
-        this.value$.next(limited);
+        this.value.set(limited);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsSliderComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: BsSliderComponent, isStandalone: false, selector: "bs-slider", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:mouseup": "onPointerUp($event)" }, properties: { "class.d-block": "this.dBlock", "class.position-relative": "this.positionRelative" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true }], ngImport: i0, template: "<div class=\"wrapper d-block position-relative\">\n    <div #track class=\"track2\"\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\">\n        <ng-content select=\"[bsTrack]\"></ng-content>\n    </div>\n    <div #thumb\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\"\n        [class]=\"cursorClass$ | async\"\n        [style.margin-left.px]=\"thumbMarginLeft$ | async\">\n        <ng-content select=\"[bsThumb]\"></ng-content>\n    </div>\n</div>", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}::ng-deep .thumb{width:24px;height:24px;top:0;border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}::ng-deep .track{height:8px;border-radius:8px}\n"], dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: BsSliderComponent, isStandalone: false, selector: "bs-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:mouseup": "onPointerUp($event)" }, properties: { "class.d-block": "this.dBlock", "class.position-relative": "this.positionRelative" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true }], ngImport: i0, template: "<div class=\"wrapper d-block position-relative\">\n    <div #track class=\"track2\"\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\">\n        <ng-content select=\"[bsTrack]\"></ng-content>\n    </div>\n    <div #thumb\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\"\n        [class]=\"cursorClass()\"\n        [style.margin-left.px]=\"thumbMarginLeft()\">\n        <ng-content select=\"[bsThumb]\"></ng-content>\n    </div>\n</div>\n", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}::ng-deep .thumb{width:24px;height:24px;top:0;border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}::ng-deep .track{height:8px;border-radius:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-slider', standalone: false, template: "<div class=\"wrapper d-block position-relative\">\n    <div #track class=\"track2\"\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\">\n        <ng-content select=\"[bsTrack]\"></ng-content>\n    </div>\n    <div #thumb\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\"\n        [class]=\"cursorClass$ | async\"\n        [style.margin-left.px]=\"thumbMarginLeft$ | async\">\n        <ng-content select=\"[bsThumb]\"></ng-content>\n    </div>\n</div>", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}::ng-deep .thumb{width:24px;height:24px;top:0;border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}::ng-deep .track{height:8px;border-radius:8px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dBlock: [{
+            args: [{ selector: 'bs-slider', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wrapper d-block position-relative\">\n    <div #track class=\"track2\"\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\">\n        <ng-content select=\"[bsTrack]\"></ng-content>\n    </div>\n    <div #thumb\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\"\n        [class]=\"cursorClass()\"\n        [style.margin-left.px]=\"thumbMarginLeft()\">\n        <ng-content select=\"[bsThumb]\"></ng-content>\n    </div>\n</div>\n", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}::ng-deep .thumb{width:24px;height:24px;top:0;border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}::ng-deep .track{height:8px;border-radius:8px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dBlock: [{
                 type: HostBinding,
                 args: ['class.d-block']
             }], positionRelative: [{
@@ -402,11 +358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
             }], thumb: [{
                 type: ViewChild,
                 args: ['thumb']
-            }], valueChange: [{
-                type: Output
-            }], value: [{
-                type: Input
-            }], onPointerMove: [{
+            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], onPointerMove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
             }], onPointerUp: [{
@@ -417,10 +369,10 @@ class BsThumbDirective {
     constructor() {
         this.thumbClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsThumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: BsThumbDirective, isStandalone: false, selector: "[bsThumb]", host: { properties: { "class.thumb": "this.thumbClass", "class.position-absolute": "this.thumbClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsThumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsThumbDirective, isStandalone: false, selector: "[bsThumb]", host: { properties: { "class.thumb": "this.thumbClass", "class.position-absolute": "this.thumbClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsThumbDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsThumbDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bsThumb]',
@@ -437,10 +389,10 @@ class BsTrackDirective {
     constructor() {
         this.trackClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsTrackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: BsTrackDirective, isStandalone: false, selector: "[bsTrack]", host: { properties: { "class.track": "this.trackClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsTrackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsTrackDirective, isStandalone: false, selector: "[bsTrack]", host: { properties: { "class.track": "this.trackClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsTrackDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsTrackDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bsTrack]',
@@ -453,23 +405,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
 
 class BsLuminosityStripComponent {
     constructor() {
-        //#region HS
-        this.hs$ = new BehaviorSubject({ hue: 0, saturation: 0 });
-        //#endregion
-        //#region Luminosity
-        this.luminosity$ = new BehaviorSubject(0.5);
-        this.luminosityChange = new EventEmitter();
-        //#endregion
+        this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : []));
+        this.luminosity = model(0.5, ...(ngDevMode ? [{ debugName: "luminosity" }] : []));
+        this.luminosityChange = output();
         this.canvasContext = null;
-        this.hs$.pipe(takeUntilDestroyed()).subscribe((hs) => {
+        this.resultBackground = computed(() => {
+            const hs = this.hs();
+            const luminosity = this.luminosity();
+            return `hsl(${hs.hue}, ${hs.saturation * 100}%, ${luminosity * 100}%)`;
+        }, ...(ngDevMode ? [{ debugName: "resultBackground" }] : []));
+        // Draw gradient when HS changes
+        effect(() => {
+            const hs = this.hs();
             if (this.canvasContext) {
-                const width = this.canvas.nativeElement.width, height = this.canvas.nativeElement.height;
+                const width = this.canvas.nativeElement.width;
+                const height = this.canvas.nativeElement.height;
                 this.canvasContext.clearRect(0, 0, width, height);
                 this.canvasContext.save();
-                // HSL
-                // - H: 0 - 359
-                // - S: "0%" - "100%"
-                // - L: "0%" - "50%" - "100%"
                 const gradient = this.canvasContext.createLinearGradient(0, 0, width, 0);
                 gradient.addColorStop(0, `hsl(${hs.hue}, ${hs.saturation * 100}%, 0%)`);
                 gradient.addColorStop(0.5, `hsl(${hs.hue}, ${hs.saturation * 100}%, 50%)`);
@@ -478,64 +430,49 @@ class BsLuminosityStripComponent {
                 this.canvasContext.fillRect(0, 0, width, height);
             }
         });
-        this.resultBackground$ = combineLatest([this.hs$, this.luminosity$])
-            .pipe(map(([hs, luminosity]) => {
-            return `hsl(${hs.hue}, ${hs.saturation * 100}%, ${luminosity * 100}%)`;
-        }));
-        this.luminosity$.pipe(takeUntilDestroyed())
-            .subscribe(luminosity => this.luminosityChange.emit(luminosity));
-    }
-    get hs() {
-        return this.hs$.value;
-    }
-    set hs(value) {
-        this.hs$.next(value);
-    }
-    get luminosity() {
-        return this.luminosity$.value;
-    }
-    set luminosity(value) {
-        this.luminosity$.next(value);
+        // Emit luminosity changes
+        effect(() => {
+            const luminosity = this.luminosity();
+            this.luminosityChange.emit(luminosity);
+        });
     }
     ngAfterViewInit() {
         if (typeof window !== 'undefined') {
             this.canvasContext = this.canvas.nativeElement.getContext('2d', { willReadFrequently: true });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsLuminosityStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: BsLuminosityStripComponent, isStandalone: false, selector: "bs-luminosity-strip", inputs: { hs: "hs", luminosity: "luminosity" }, outputs: { luminosityChange: "luminosityChange" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<bs-slider [value]=\"(luminosity$ | async)!\" (valueChange)=\"luminosityChange.emit($event)\">\n    <canvas bsTrack class=\"position-absolute w-100\" #canvas></canvas>\n    <div bsThumb [style.background]=\"resultBackground$ | async\"></div>\n</bs-slider>", styles: [""], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["value"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsLuminosityStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: BsLuminosityStripComponent, isStandalone: false, selector: "bs-luminosity-strip", inputs: { hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, luminosity: { classPropertyName: "luminosity", publicName: "luminosity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hs: "hsChange", luminosity: "luminosityChange", luminosityChange: "luminosityChange" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<bs-slider [value]=\"luminosity()\" (valueChange)=\"luminosityChange.emit($event)\">\n    <canvas bsTrack class=\"position-absolute w-100\" #canvas></canvas>\n    <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [""], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["value"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsLuminosityStripComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsLuminosityStripComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-luminosity-strip', standalone: false, template: "<bs-slider [value]=\"(luminosity$ | async)!\" (valueChange)=\"luminosityChange.emit($event)\">\n    <canvas bsTrack class=\"position-absolute w-100\" #canvas></canvas>\n    <div bsThumb [style.background]=\"resultBackground$ | async\"></div>\n</bs-slider>" }]
-        }], ctorParameters: () => [], propDecorators: { hs: [{
-                type: Input
-            }], luminosityChange: [{
-                type: Output
-            }], luminosity: [{
-                type: Input
-            }], canvas: [{
+            args: [{ selector: 'bs-luminosity-strip', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [value]=\"luminosity()\" (valueChange)=\"luminosityChange.emit($event)\">\n    <canvas bsTrack class=\"position-absolute w-100\" #canvas></canvas>\n    <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n" }]
+        }], ctorParameters: () => [], propDecorators: { canvas: [{
                 type: ViewChild,
                 args: ['canvas']
-            }] } });
+            }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], luminosity: [{ type: i0.Input, args: [{ isSignal: true, alias: "luminosity", required: false }] }, { type: i0.Output, args: ["luminosityChange"] }], luminosityChange: [{ type: i0.Output, args: ["luminosityChange"] }] } });
 
 class BsAlphaStripComponent {
     constructor() {
-        //#region HS
-        this.hs$ = new BehaviorSubject({ hue: 0, saturation: 0 });
-        //#endregion
-        //#region Luminosity
-        this.luminosity$ = new BehaviorSubject(0.5);
-        //#endregion
-        //#region Alpha
-        this.alpha$ = new BehaviorSubject(1);
-        this.alphaChange = new EventEmitter();
-        //#endregion
+        this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : []));
+        this.luminosity = model(0.5, ...(ngDevMode ? [{ debugName: "luminosity" }] : []));
+        this.alpha = model(1, ...(ngDevMode ? [{ debugName: "alpha" }] : []));
+        this.alphaChange = output();
         this.canvasContext = null;
-        combineLatest([this.hs$, this.luminosity$]).pipe(takeUntilDestroyed()).subscribe(([hs, luminosity]) => {
+        this.resultBackground = computed(() => {
+            const hs = this.hs();
+            const luminosity = this.luminosity();
+            const alpha = this.alpha();
+            return `hsla(${hs.hue}, ${hs.saturation * 100}%, ${luminosity * 100}%, ${alpha})`;
+        }, ...(ngDevMode ? [{ debugName: "resultBackground" }] : []));
+        // Draw gradient when HS or luminosity changes
+        effect(() => {
+            const hs = this.hs();
+            const luminosity = this.luminosity();
             setTimeout(() => {
                 if (this.canvasContext) {
-                    const width = this.canvas.nativeElement.width, height = this.canvas.nativeElement.height;
+                    const width = this.canvas.nativeElement.width;
+                    const height = this.canvas.nativeElement.height;
                     this.canvasContext.clearRect(0, 0, width, height);
                     this.canvasContext.save();
                     const gradient = this.canvasContext.createLinearGradient(0, 0, width, 0);
@@ -546,108 +483,60 @@ class BsAlphaStripComponent {
                 }
             });
         });
-        this.resultBackground$ = combineLatest([this.hs$, this.luminosity$, this.alpha$])
-            .pipe(map(([hs, luminosity, alpha]) => {
-            return `hsla(${hs.hue}, ${hs.saturation * 100}%, ${luminosity * 100}%, ${alpha})`;
-        }));
-        this.alpha$.pipe(takeUntilDestroyed())
-            .subscribe((alpha) => this.alphaChange.emit(alpha));
-    }
-    get hs() {
-        return this.hs$.value;
-    }
-    set hs(value) {
-        this.hs$.next(value);
-    }
-    get luminosity() {
-        return this.luminosity$.value;
-    }
-    set luminosity(value) {
-        this.luminosity$.next(value);
-    }
-    get alpha() {
-        return this.alpha$.value;
-    }
-    set alpha(value) {
-        this.alpha$.next(value);
+        // Emit alpha changes
+        effect(() => {
+            const alpha = this.alpha();
+            this.alphaChange.emit(alpha);
+        });
     }
     ngAfterViewInit() {
         if (typeof window !== 'undefined') {
             this.canvasContext = this.canvas.nativeElement.getContext('2d', { willReadFrequently: true });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsAlphaStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: BsAlphaStripComponent, isStandalone: false, selector: "bs-alpha-strip", inputs: { hs: "hs", luminosity: "luminosity", alpha: "alpha" }, outputs: { alphaChange: "alphaChange" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["track"], descendants: true }], ngImport: i0, template: "<bs-slider [value]=\"(alpha$ | async)!\" (valueChange)=\"alphaChange.emit($event)\">\n    <canvas bsTrack class=\" track position-absolute w-100\" #track></canvas>\n\n    <!-- [style.background]=\"resultBackground$ | async\" -->\n    <div bsThumb [style.background]=\"resultBackground$ | async\"></div>\n</bs-slider>", styles: [".track{background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}\n"], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["value"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsAlphaStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: BsAlphaStripComponent, isStandalone: false, selector: "bs-alpha-strip", inputs: { hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, luminosity: { classPropertyName: "luminosity", publicName: "luminosity", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hs: "hsChange", luminosity: "luminosityChange", alpha: "alphaChange", alphaChange: "alphaChange" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["track"], descendants: true }], ngImport: i0, template: "<bs-slider [value]=\"alpha()\" (valueChange)=\"alphaChange.emit($event)\">\n    <canvas bsTrack class=\" track position-absolute w-100\" #track></canvas>\n\n    <!-- [style.background]=\"resultBackground()\" -->\n    <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}\n"], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["value"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsAlphaStripComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsAlphaStripComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-alpha-strip', standalone: false, template: "<bs-slider [value]=\"(alpha$ | async)!\" (valueChange)=\"alphaChange.emit($event)\">\n    <canvas bsTrack class=\" track position-absolute w-100\" #track></canvas>\n\n    <!-- [style.background]=\"resultBackground$ | async\" -->\n    <div bsThumb [style.background]=\"resultBackground$ | async\"></div>\n</bs-slider>", styles: [".track{background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { hs: [{
-                type: Input
-            }], luminosity: [{
-                type: Input
-            }], alphaChange: [{
-                type: Output
-            }], alpha: [{
-                type: Input
-            }], canvas: [{
+            args: [{ selector: 'bs-alpha-strip', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [value]=\"alpha()\" (valueChange)=\"alphaChange.emit($event)\">\n    <canvas bsTrack class=\" track position-absolute w-100\" #track></canvas>\n\n    <!-- [style.background]=\"resultBackground()\" -->\n    <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { canvas: [{
                 type: ViewChild,
                 args: ['track']
-            }] } });
+            }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], luminosity: [{ type: i0.Input, args: [{ isSignal: true, alias: "luminosity", required: false }] }, { type: i0.Output, args: ["luminosityChange"] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }, { type: i0.Output, args: ["alphaChange"] }], alphaChange: [{ type: i0.Output, args: ["alphaChange"] }] } });
 
 class BsColorPickerComponent {
     constructor() {
-        this.size$ = new BehaviorSubject(150);
-        this.disabled$ = new BehaviorSubject(false);
-        this.allowAlpha$ = new BehaviorSubject(true);
-        this.hs$ = new BehaviorSubject({ hue: 0, saturation: 0 });
-        this.luminosity$ = new BehaviorSubject(0);
-        //#region Alpha
-        this.alpha$ = new BehaviorSubject(1);
-        this.alphaChange = new EventEmitter();
-        this.alpha$.pipe(takeUntilDestroyed())
-            .subscribe((alpha) => this.alphaChange.emit(alpha));
-    }
-    set size(value) {
-        this.size$.next(value);
-    }
-    set allowAlpha(value) {
-        this.allowAlpha$.next(value);
-    }
-    get alpha() {
-        return this.alpha$.value;
-    }
-    set alpha(value) {
-        this.alpha$.next(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: BsColorPickerComponent, isStandalone: false, selector: "bs-color-picker", inputs: { size: "size", allowAlpha: "allowAlpha", alpha: "alpha" }, outputs: { alphaChange: "alphaChange" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["wheel"], descendants: true }], ngImport: i0, template: "@let letDisabled = (disabled$ | async)!;\n@let letHS = (hs$ | async)!;\n@let letLuminosity = (luminosity$ | async)!;\n@let letAlpha = (alpha$ | async)!;\n\n<bs-color-wheel [hs]=\"letHS\" (hsChange)=\"hs$.next($event)\" [luminosity]=\"letLuminosity\" [width]=\"(size$ | async) ?? 150\" [height]=\"(size$ | async) ?? 150\" #wheel></bs-color-wheel>\n<bs-luminosity-strip [hs]=\"letHS\" [luminosity]=\"letLuminosity\" (luminosityChange)=\"luminosity$.next($event)\" class=\"d-block mt-2\" [style.width.px]=\"size$ | async\" #strip></bs-luminosity-strip>\n@if (allowAlpha$ | async) {\n    <bs-alpha-strip [hs]=\"letHS\" [luminosity]=\"letLuminosity\" [alpha]=\"letAlpha\" (alphaChange)=\"alpha$.next($event)\" class=\"d-block mt-2\" [style.width.px]=\"size$ | async\" #alpha></bs-alpha-strip>\n}", styles: [""], dependencies: [{ kind: "component", type: BsColorWheelComponent, selector: "bs-color-wheel", inputs: ["diameterRatio", "width", "height", "hs", "luminosity"], outputs: ["hsChange"] }, { kind: "component", type: BsLuminosityStripComponent, selector: "bs-luminosity-strip", inputs: ["hs", "luminosity"], outputs: ["luminosityChange"] }, { kind: "component", type: BsAlphaStripComponent, selector: "bs-alpha-strip", inputs: ["hs", "luminosity", "alpha"], outputs: ["alphaChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+        this.size = input(150, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.allowAlpha = input(true, ...(ngDevMode ? [{ debugName: "allowAlpha" }] : []));
+        this.hs = signal({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : []));
+        this.luminosity = signal(0, ...(ngDevMode ? [{ debugName: "luminosity" }] : []));
+        this.alpha = model(1, ...(ngDevMode ? [{ debugName: "alpha" }] : []));
+        this.alphaChange = output();
+        effect(() => {
+            const alpha = this.alpha();
+            this.alphaChange.emit(alpha);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsColorPickerComponent, isStandalone: false, selector: "bs-color-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowAlpha: { classPropertyName: "allowAlpha", publicName: "allowAlpha", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { alpha: "alphaChange", alphaChange: "alphaChange" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["wheel"], descendants: true }], ngImport: i0, template: "@let letDisabled = disabled();\n@let letHS = hs();\n@let letLuminosity = luminosity();\n@let letAlpha = alpha();\n\n<bs-color-wheel [hs]=\"letHS\" (hsChange)=\"hs.set($event)\" [luminosity]=\"letLuminosity\" [width]=\"size()\" [height]=\"size()\" #wheel></bs-color-wheel>\n<bs-luminosity-strip [hs]=\"letHS\" [luminosity]=\"letLuminosity\" (luminosityChange)=\"luminosity.set($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #strip></bs-luminosity-strip>\n@if (allowAlpha()) {\n    <bs-alpha-strip [hs]=\"letHS\" [luminosity]=\"letLuminosity\" [alpha]=\"letAlpha\" (alphaChange)=\"alpha.set($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #alphaStrip></bs-alpha-strip>\n}\n", styles: [""], dependencies: [{ kind: "component", type: BsColorWheelComponent, selector: "bs-color-wheel", inputs: ["width", "height", "diameterRatio", "luminosity", "hs"], outputs: ["widthChange", "heightChange", "diameterRatioChange", "luminosityChange", "hsChange"] }, { kind: "component", type: BsLuminosityStripComponent, selector: "bs-luminosity-strip", inputs: ["hs", "luminosity"], outputs: ["hsChange", "luminosityChange"] }, { kind: "component", type: BsAlphaStripComponent, selector: "bs-alpha-strip", inputs: ["hs", "luminosity", "alpha"], outputs: ["hsChange", "luminosityChange", "alphaChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-color-picker', standalone: false, template: "@let letDisabled = (disabled$ | async)!;\n@let letHS = (hs$ | async)!;\n@let letLuminosity = (luminosity$ | async)!;\n@let letAlpha = (alpha$ | async)!;\n\n<bs-color-wheel [hs]=\"letHS\" (hsChange)=\"hs$.next($event)\" [luminosity]=\"letLuminosity\" [width]=\"(size$ | async) ?? 150\" [height]=\"(size$ | async) ?? 150\" #wheel></bs-color-wheel>\n<bs-luminosity-strip [hs]=\"letHS\" [luminosity]=\"letLuminosity\" (luminosityChange)=\"luminosity$.next($event)\" class=\"d-block mt-2\" [style.width.px]=\"size$ | async\" #strip></bs-luminosity-strip>\n@if (allowAlpha$ | async) {\n    <bs-alpha-strip [hs]=\"letHS\" [luminosity]=\"letLuminosity\" [alpha]=\"letAlpha\" (alphaChange)=\"alpha$.next($event)\" class=\"d-block mt-2\" [style.width.px]=\"size$ | async\" #alpha></bs-alpha-strip>\n}" }]
+            args: [{ selector: 'bs-color-picker', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let letDisabled = disabled();\n@let letHS = hs();\n@let letLuminosity = luminosity();\n@let letAlpha = alpha();\n\n<bs-color-wheel [hs]=\"letHS\" (hsChange)=\"hs.set($event)\" [luminosity]=\"letLuminosity\" [width]=\"size()\" [height]=\"size()\" #wheel></bs-color-wheel>\n<bs-luminosity-strip [hs]=\"letHS\" [luminosity]=\"letLuminosity\" (luminosityChange)=\"luminosity.set($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #strip></bs-luminosity-strip>\n@if (allowAlpha()) {\n    <bs-alpha-strip [hs]=\"letHS\" [luminosity]=\"letLuminosity\" [alpha]=\"letAlpha\" (alphaChange)=\"alpha.set($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #alphaStrip></bs-alpha-strip>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { colorWheel: [{
                 type: ViewChild,
                 args: ['wheel']
-            }], size: [{
-                type: Input
-            }], allowAlpha: [{
-                type: Input
-            }], alphaChange: [{
-                type: Output
-            }], alpha: [{
-                type: Input
-            }] } });
+            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], allowAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAlpha", required: false }] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }, { type: i0.Output, args: ["alphaChange"] }], alphaChange: [{ type: i0.Output, args: ["alphaChange"] }] } });
 
 class BsColorPickerValueAccessor {
-    constructor(host, destroy) {
-        this.host = host;
-        this.destroy = destroy;
-    }
-    ngAfterViewInit() {
-        combineLatest([this.host.hs$, this.host.luminosity$])
-            .pipe(takeUntilDestroyed(this.destroy))
-            .subscribe(([hs, luminosity]) => {
+    constructor() {
+        this.host = inject(BsColorPickerComponent);
+        // Effect to emit value changes
+        effect(() => {
+            const hs = this.host.hs();
+            const luminosity = this.host.luminosity();
             const rgb = this.hsl2rgb(hs.hue, hs.saturation, luminosity);
             const hex = this.rgb2hex(rgb);
             setTimeout(() => this.onValueChange && this.onValueChange(hex), 10);
@@ -672,14 +561,14 @@ class BsColorPickerValueAccessor {
             if (value) {
                 const rgb = this.hex2rgb(value);
                 const hsl = this.rgb2Hsl(rgb);
-                this.host.hs$.next({ hue: hsl.h, saturation: hsl.s });
-                this.host.luminosity$.next(hsl.l);
+                this.host.hs.set({ hue: hsl.h, saturation: hsl.s });
+                this.host.luminosity.set(hsl.l);
             }
         }
     }
     setDisabledState(isDisabled) {
         if (this.host && this.host.colorWheel) {
-            this.host.colorWheel.disabled$.next(isDisabled);
+            this.host.colorWheel.disabled.set(isDisabled);
         }
     }
     //#endregion
@@ -737,35 +626,30 @@ class BsColorPickerValueAccessor {
         h *= 360;
         return { h, s, l };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsColorPickerValueAccessor, deps: [{ token: forwardRef(() => BsColorPickerComponent) }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: BsColorPickerValueAccessor, isStandalone: false, selector: "bs-color-picker", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsColorPickerValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsColorPickerValueAccessor, isStandalone: false, selector: "bs-color-picker", providers: [{
                 provide: NG_VALUE_ACCESSOR,
-                // useExisting: BsColorPickerValueAccessor,
                 useExisting: forwardRef(() => BsColorPickerValueAccessor),
                 multi: true
             }], exportAs: ["bsColorPicker"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsColorPickerValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsColorPickerValueAccessor, decorators: [{
             type: Directive,
             args: [{
                     selector: 'bs-color-picker',
                     standalone: false,
                     providers: [{
                             provide: NG_VALUE_ACCESSOR,
-                            // useExisting: BsColorPickerValueAccessor,
                             useExisting: forwardRef(() => BsColorPickerValueAccessor),
                             multi: true
                         }],
                     exportAs: 'bsColorPicker'
                 }]
-        }], ctorParameters: () => [{ type: BsColorPickerComponent, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => BsColorPickerComponent)]
-                }] }, { type: i0.DestroyRef }] });
+        }], ctorParameters: () => [] });
 
 class BsColorPickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: BsColorPickerModule, declarations: [BsColorPickerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: BsColorPickerModule, declarations: [BsColorPickerComponent,
             BsColorPickerValueAccessor,
             BsColorWheelComponent,
             BsLuminosityStripComponent,
@@ -781,9 +665,9 @@ class BsColorPickerModule {
             BsThumbDirective,
             BsTrackDirective,
             BsAlphaStripComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsColorPickerModule, imports: [FormsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsColorPickerModule, imports: [FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsColorPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [