@mintplayer/ng-bootstrap 21.6.0 → 21.8.0

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

@@ -1,12 +1,272 @@
 import * as i0 from '@angular/core';
-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 { inject, ElementRef, viewChild, input, model, output, signal, computed, effect, ChangeDetectionStrategy, Component, Directive, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class BsSliderComponent {
+    constructor() {
+        this.element = inject((ElementRef));
+        this.track = viewChild.required('track');
+        this.thumb = viewChild.required('thumb');
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        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;
+        }, ...(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) {
+        if (this.disabled())
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.isPointerDown.set(true);
+        this.updateColor(ev);
+    }
+    onPointerMove(ev) {
+        if (this.isPointerDown()) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.updateColor(ev);
+        }
+    }
+    onPointerUp(ev) {
+        this.isPointerDown.set(false);
+    }
+    updateColor(ev) {
+        let co;
+        const rect = this.track().nativeElement.getBoundingClientRect();
+        if ('touches' in ev) {
+            co = {
+                x: ev.touches[0].clientX - rect.left,
+            };
+        }
+        else {
+            co = {
+                x: ev.clientX - rect.left,
+            };
+        }
+        const percent = co.x / this.track().nativeElement.clientWidth;
+        const limited = Math.max(0, Math.min(1, percent));
+        this.value.set(limited);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.6", type: BsSliderComponent, isStandalone: true, selector: "bs-slider", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, 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)" }, classAttribute: "d-block position-relative" }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, isSignal: 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: "21.1.6", ngImport: i0, type: BsSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-slider', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'd-block position-relative',
+                        '(document:mousemove)': 'onPointerMove($event)',
+                        '(document:mouseup)': 'onPointerUp($event)',
+                    }, 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: { track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], thumb: [{ type: i0.ViewChild, args: ['thumb', { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+class BsThumbDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsThumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: BsThumbDirective, isStandalone: true, selector: "[bsThumb]", host: { classAttribute: "thumb position-absolute" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsThumbDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsThumb]',
+                    host: {
+                        'class': 'thumb position-absolute',
+                    },
+                }]
+        }] });
+class BsTrackDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsTrackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: BsTrackDirective, isStandalone: true, selector: "[bsTrack]", host: { classAttribute: "track" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsTrackDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsTrack]',
+                    host: {
+                        'class': 'track',
+                    },
+                }]
+        }] });
+
+class BsAlphaStripComponent {
+    constructor() {
+        this.canvas = viewChild.required('track');
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        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;
+        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;
+                    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);
+                    gradient.addColorStop(0, `hsla(${hs.hue}, ${hs.saturation * 100}%, ${luminosity * 100}%, 0)`);
+                    gradient.addColorStop(1, `hsla(${hs.hue}, ${hs.saturation * 100}%, ${luminosity * 100}%, 1)`);
+                    this.canvasContext.fillStyle = gradient;
+                    this.canvasContext.fillRect(0, 0, width, height);
+                }
+            });
+        });
+        // 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: "21.1.6", ngImport: i0, type: BsAlphaStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.6", type: BsAlphaStripComponent, isStandalone: true, selector: "bs-alpha-strip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, 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, isSignal: true }], ngImport: i0, template: "<bs-slider [disabled]=\"disabled()\" [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: ["disabled", "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: "21.1.6", ngImport: i0, type: BsAlphaStripComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-alpha-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [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: i0.ViewChild, args: ['track', { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], 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 BsColorPickerValueAccessor {
+    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);
+        });
+    }
+    hsl2rgb(h, s, l) {
+        const k = (n) => (n + h / 30) % 12;
+        const a = s * Math.min(l, 1 - l);
+        const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+        const retValue = { r: 255 * f(0), g: 255 * f(8), b: 255 * f(4) };
+        return retValue;
+    }
+    //#region ControlValueAccessor implementation
+    registerOnChange(fn) {
+        this.onValueChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        if (this.host && this.host.colorWheel()) {
+            if (value) {
+                const rgb = this.hex2rgb(value);
+                const hsl = this.rgb2Hsl(rgb);
+                this.host.hs.set({ hue: hsl.h, saturation: hsl.s });
+                this.host.luminosity.set(hsl.l);
+            }
+        }
+    }
+    setDisabledState(isDisabled) {
+        this.host.disabled.set(isDisabled);
+    }
+    //#endregion
+    //#region Color Conversion
+    rgb2hex(rgb) {
+        return '#' + (Math.round((rgb.r << 16) + (rgb.g << 8) + rgb.b)).toString(16).padStart(6, '0');
+    }
+    hex2rgb(hex) {
+        const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+        return { r, g, b };
+    }
+    /**
+     * Divide 1 to n, handling floating point errors.
+     * Ensures that the value is in between 0 and 1.
+     **/
+    bound01(n, max) {
+        n = Math.min(max, Math.max(0, n));
+        if (Math.abs(n - max) < 0.000001) {
+            return 1;
+        }
+        else {
+            return (n % max) / max;
+        }
+    }
+    rgb2Hsl(color) {
+        const r01 = this.bound01(color.r, 255);
+        const g01 = this.bound01(color.g, 255);
+        const b01 = this.bound01(color.b, 255);
+        const max = Math.max(r01, g01, b01);
+        const min = Math.min(r01, g01, b01);
+        let h, s;
+        const l = (max + min) / 2;
+        if (max === min) {
+            h = s = 0;
+        }
+        else {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r01:
+                    h = (g01 - b01) / d + (g01 < b01 ? 6 : 0);
+                    break;
+                case g01:
+                    h = (b01 - r01) / d + 2;
+                    break;
+                case b01:
+                    h = (r01 - g01) / d + 4;
+                    break;
+                default: {
+                    throw 'Invalid operation';
+                }
+            }
+            h /= 6;
+        }
+        h *= 360;
+        return { h, s, l };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsColorPickerValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: BsColorPickerValueAccessor, isStandalone: true, selector: "bs-color-picker", providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => BsColorPickerValueAccessor),
+                multi: true
+            }], exportAs: ["bsColorPicker"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsColorPickerValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'bs-color-picker',
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BsColorPickerValueAccessor),
+                            multi: true
+                        }],
+                    exportAs: 'bsColorPicker'
+                }]
+        }], ctorParameters: () => [] });
 
 class BsColorWheelComponent {
     constructor() {
         this.element = inject((ElementRef));
-        this.positionRelative = true;
+        this.canvas = viewChild.required('canvas');
         // Inputs
         this.width = model(150, ...(ngDevMode ? [{ debugName: "width" }] : []));
         this.height = model(150, ...(ngDevMode ? [{ debugName: "height" }] : []));
@@ -16,7 +276,7 @@ class BsColorWheelComponent {
         this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : []));
         this.hsChange = output();
         // Internal state
-        this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.viewInited = signal(false, ...(ngDevMode ? [{ debugName: "viewInited" }] : []));
         this.isPointerDown = false;
         this.canvasContext = null;
@@ -93,7 +353,7 @@ class BsColorWheelComponent {
             // 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.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++) {
@@ -117,7 +377,7 @@ class BsColorWheelComponent {
     ngAfterViewInit() {
         this.viewInited.set(true);
         if (typeof window !== 'undefined') {
-            this.canvasContext = this.canvas.nativeElement.getContext('2d', { willReadFrequently: true });
+            this.canvasContext = this.canvas().nativeElement.getContext('2d', { willReadFrequently: true });
         }
     }
     onPointerDown(ev) {
@@ -143,7 +403,7 @@ class BsColorWheelComponent {
     }
     updateColor(ev, subtract) {
         let co;
-        const rect = this.canvas.nativeElement.getBoundingClientRect();
+        const rect = this.canvas().nativeElement.getBoundingClientRect();
         if ('touches' in ev) {
             co = {
                 x: ev.touches[0].clientX - rect.left,
@@ -265,146 +525,22 @@ class BsColorWheelComponent {
             return (n % max) / max;
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsColorWheelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: BsColorWheelComponent, isStandalone: true, 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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)" }, classAttribute: "position-relative" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: 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: "21.0.6", ngImport: i0, type: BsColorWheelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsColorWheelComponent, decorators: [{
             type: Component,
-            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']
-            }], canvas: [{
-                type: ViewChild,
-                args: ['canvas']
-            }], 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: [{
-                type: HostListener,
-                args: ['document:mouseup', ['$event']]
-            }] } });
-
-class BsSliderComponent {
-    constructor() {
-        this.element = inject((ElementRef));
-        this.zone = inject(NgZone);
-        this.dBlock = true;
-        this.positionRelative = true;
-        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;
-        }, ...(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();
-        ev.stopPropagation();
-        this.zone.run(() => this.isPointerDown.set(true));
-        this.updateColor(ev);
-    }
-    onPointerMove(ev) {
-        if (this.isPointerDown()) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            this.updateColor(ev);
-        }
-    }
-    onPointerUp(ev) {
-        this.isPointerDown.set(false);
-    }
-    updateColor(ev) {
-        let co;
-        const rect = this.track.nativeElement.getBoundingClientRect();
-        if ('touches' in ev) {
-            co = {
-                x: ev.touches[0].clientX - rect.left,
-            };
-        }
-        else {
-            co = {
-                x: ev.clientX - rect.left,
-            };
-        }
-        const percent = co.x / this.track.nativeElement.clientWidth;
-        const limited = Math.max(0, Math.min(1, percent));
-        this.value.set(limited);
-    }
-    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: "21.0.6", ngImport: i0, type: BsSliderComponent, decorators: [{
-            type: Component,
-            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: [{
-                type: HostBinding,
-                args: ['class.position-relative']
-            }], track: [{
-                type: ViewChild,
-                args: ['track']
-            }], thumb: [{
-                type: ViewChild,
-                args: ['thumb']
-            }], 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: [{
-                type: HostListener,
-                args: ['document:mouseup', ['$event']]
-            }] } });
-class BsThumbDirective {
-    constructor() {
-        this.thumbClass = true;
-    }
-    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: "21.0.6", ngImport: i0, type: BsThumbDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bsThumb]',
-                    standalone: false,
-                }]
-        }], propDecorators: { thumbClass: [{
-                type: HostBinding,
-                args: ['class.thumb']
-            }, {
-                type: HostBinding,
-                args: ['class.position-absolute']
-            }] } });
-class BsTrackDirective {
-    constructor() {
-        this.trackClass = true;
-    }
-    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: "21.0.6", ngImport: i0, type: BsTrackDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bsTrack]',
-                    standalone: false,
-                }]
-        }], propDecorators: { trackClass: [{
-                type: HostBinding,
-                args: ['class.track']
-            }] } });
+            args: [{ selector: 'bs-color-wheel', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'position-relative',
+                        '(document:mousemove)': 'onMouseMove($event)',
+                        '(document:mouseup)': 'onPointerUp($event)',
+                    }, 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: { canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], 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"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class BsLuminosityStripComponent {
     constructor() {
+        this.canvas = viewChild.required('canvas');
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : []));
         this.luminosity = model(0.5, ...(ngDevMode ? [{ debugName: "luminosity" }] : []));
         this.luminosityChange = output();
@@ -418,8 +554,8 @@ class BsLuminosityStripComponent {
         effect(() => {
             const hs = this.hs();
             if (this.canvasContext) {
-                const width = this.canvas.nativeElement.width;
-                const 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);
@@ -438,75 +574,20 @@ class BsLuminosityStripComponent {
     }
     ngAfterViewInit() {
         if (typeof window !== 'undefined') {
-            this.canvasContext = this.canvas.nativeElement.getContext('2d', { willReadFrequently: true });
+            this.canvasContext = this.canvas().nativeElement.getContext('2d', { willReadFrequently: true });
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsLuminosityStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.6", type: BsLuminosityStripComponent, isStandalone: true, selector: "bs-luminosity-strip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, 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, isSignal: true }], ngImport: i0, template: "<bs-slider [disabled]=\"disabled()\" [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: ["disabled", "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: "21.0.6", ngImport: i0, type: BsLuminosityStripComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsLuminosityStripComponent, decorators: [{
             type: Component,
-            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() {
-        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;
-        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;
-                    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);
-                    gradient.addColorStop(0, `hsla(${hs.hue}, ${hs.saturation * 100}%, ${luminosity * 100}%, 0)`);
-                    gradient.addColorStop(1, `hsla(${hs.hue}, ${hs.saturation * 100}%, ${luminosity * 100}%, 1)`);
-                    this.canvasContext.fillStyle = gradient;
-                    this.canvasContext.fillRect(0, 0, width, height);
-                }
-            });
-        });
-        // 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: "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: "21.0.6", ngImport: i0, type: BsAlphaStripComponent, decorators: [{
-            type: Component,
-            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"] }] } });
+            args: [{ selector: 'bs-luminosity-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [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: i0.ViewChild, args: ['canvas', { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], 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 BsColorPickerComponent {
     constructor() {
+        this.colorWheel = viewChild.required('wheel');
         this.size = input(150, ...(ngDevMode ? [{ debugName: "size" }] : []));
         this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.allowAlpha = input(true, ...(ngDevMode ? [{ debugName: "allowAlpha" }] : []));
@@ -519,187 +600,17 @@ class BsColorPickerComponent {
             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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: BsColorPickerComponent, isStandalone: true, 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, isSignal: true }], hostDirectives: [{ directive: BsColorPickerValueAccessor }], ngImport: i0, template: "@let letDisabled = disabled();\n@let letHS = hs();\n@let letLuminosity = luminosity();\n@let letAlpha = alpha();\n\n<bs-color-wheel [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"hs.set($event)\" [luminosity]=\"letLuminosity\" [width]=\"size()\" [height]=\"size()\" #wheel></bs-color-wheel>\n<bs-luminosity-strip [disabled]=\"letDisabled\" [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 [disabled]=\"letDisabled\" [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", "disabled"], outputs: ["widthChange", "heightChange", "diameterRatioChange", "luminosityChange", "hsChange"] }, { kind: "component", type: BsLuminosityStripComponent, selector: "bs-luminosity-strip", inputs: ["disabled", "hs", "luminosity"], outputs: ["hsChange", "luminosityChange"] }, { kind: "component", type: BsAlphaStripComponent, selector: "bs-alpha-strip", inputs: ["disabled", "hs", "luminosity", "alpha"], outputs: ["hsChange", "luminosityChange", "alphaChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsColorPickerComponent, decorators: [{
             type: Component,
-            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: 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() {
-        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);
-        });
-    }
-    hsl2rgb(h, s, l) {
-        const k = (n) => (n + h / 30) % 12;
-        const a = s * Math.min(l, 1 - l);
-        const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
-        const retValue = { r: 255 * f(0), g: 255 * f(8), b: 255 * f(4) };
-        return retValue;
-    }
-    //#region ControlValueAccessor implementation
-    registerOnChange(fn) {
-        this.onValueChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    writeValue(value) {
-        if (this.host && this.host.colorWheel) {
-            if (value) {
-                const rgb = this.hex2rgb(value);
-                const hsl = this.rgb2Hsl(rgb);
-                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.set(isDisabled);
-        }
-    }
-    //#endregion
-    //#region Color Conversion
-    rgb2hex(rgb) {
-        return '#' + (Math.round((rgb.r << 16) + (rgb.g << 8) + rgb.b)).toString(16).padStart(6, '0');
-    }
-    hex2rgb(hex) {
-        const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
-        return { r, g, b };
-    }
-    /**
-     * Divide 1 to n, handling floating point errors.
-     * Ensures that the value is in between 0 and 1.
-     **/
-    bound01(n, max) {
-        n = Math.min(max, Math.max(0, n));
-        if (Math.abs(n - max) < 0.000001) {
-            return 1;
-        }
-        else {
-            return (n % max) / max;
-        }
-    }
-    rgb2Hsl(color) {
-        const r01 = this.bound01(color.r, 255);
-        const g01 = this.bound01(color.g, 255);
-        const b01 = this.bound01(color.b, 255);
-        const max = Math.max(r01, g01, b01);
-        const min = Math.min(r01, g01, b01);
-        let h, s;
-        const l = (max + min) / 2;
-        if (max === min) {
-            h = s = 0;
-        }
-        else {
-            const d = max - min;
-            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-            switch (max) {
-                case r01:
-                    h = (g01 - b01) / d + (g01 < b01 ? 6 : 0);
-                    break;
-                case g01:
-                    h = (b01 - r01) / d + 2;
-                    break;
-                case b01:
-                    h = (r01 - g01) / d + 4;
-                    break;
-                default: {
-                    throw 'Invalid operation';
-                }
-            }
-            h /= 6;
-        }
-        h *= 360;
-        return { h, s, l };
-    }
-    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: forwardRef(() => BsColorPickerValueAccessor),
-                multi: true
-            }], exportAs: ["bsColorPicker"], ngImport: i0 }); }
-}
-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: forwardRef(() => BsColorPickerValueAccessor),
-                            multi: true
-                        }],
-                    exportAs: 'bsColorPicker'
-                }]
-        }], ctorParameters: () => [] });
-
-class BsColorPickerModule {
-    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,
-            BsSliderComponent,
-            BsThumbDirective,
-            BsTrackDirective,
-            BsAlphaStripComponent], imports: [AsyncPipe,
-            FormsModule], exports: [BsColorPickerComponent,
-            BsColorPickerValueAccessor,
-            BsColorWheelComponent,
-            BsLuminosityStripComponent,
-            BsSliderComponent,
-            BsThumbDirective,
-            BsTrackDirective,
-            BsAlphaStripComponent] }); }
-    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: "21.0.6", ngImport: i0, type: BsColorPickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        BsColorPickerComponent,
-                        BsColorPickerValueAccessor,
-                        BsColorWheelComponent,
-                        BsLuminosityStripComponent,
-                        BsSliderComponent,
-                        BsThumbDirective,
-                        BsTrackDirective,
-                        BsAlphaStripComponent
-                    ],
-                    imports: [
-                        AsyncPipe,
-                        FormsModule,
-                    ],
-                    exports: [
-                        BsColorPickerComponent,
-                        BsColorPickerValueAccessor,
-                        BsColorWheelComponent,
-                        BsLuminosityStripComponent,
-                        BsSliderComponent,
-                        BsThumbDirective,
-                        BsTrackDirective,
-                        BsAlphaStripComponent
-                    ]
-                }]
-        }] });
+            args: [{ selector: 'bs-color-picker', imports: [BsColorWheelComponent, BsLuminosityStripComponent, BsAlphaStripComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [BsColorPickerValueAccessor], template: "@let letDisabled = disabled();\n@let letHS = hs();\n@let letLuminosity = luminosity();\n@let letAlpha = alpha();\n\n<bs-color-wheel [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"hs.set($event)\" [luminosity]=\"letLuminosity\" [width]=\"size()\" [height]=\"size()\" #wheel></bs-color-wheel>\n<bs-luminosity-strip [disabled]=\"letDisabled\" [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 [disabled]=\"letDisabled\" [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: i0.ViewChild, args: ['wheel', { isSignal: true }] }], 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"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BsAlphaStripComponent, BsColorPickerComponent, BsColorPickerModule, BsColorPickerValueAccessor, BsColorWheelComponent, BsLuminosityStripComponent, BsSliderComponent, BsThumbDirective, BsTrackDirective };
+export { BsAlphaStripComponent, BsColorPickerComponent, BsColorPickerValueAccessor, BsColorWheelComponent, BsLuminosityStripComponent, BsSliderComponent, BsThumbDirective, BsTrackDirective };
 //# sourceMappingURL=mintplayer-ng-bootstrap-color-picker.mjs.map