@mintplayer/ng-bootstrap 21.7.0 → 21.9.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, viewChild, model, output, signal, computed, effect, ChangeDetectionStrategy, Component, Directive, input, forwardRef } from '@angular/core';
+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 {
@@ -7,6 +7,7 @@ class BsSliderComponent {
         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" }] : []));
@@ -24,6 +25,8 @@ class BsSliderComponent {
         });
     }
     onPointerDown(ev) {
+        if (this.disabled())
+            return;
         ev.preventDefault();
         ev.stopPropagation();
         this.isPointerDown.set(true);
@@ -57,7 +60,7 @@ class BsSliderComponent {
         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: { 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 }); }
+    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,
@@ -66,7 +69,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                         '(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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+        }], 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 }); }
@@ -97,6 +100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
 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" }] : []));
@@ -138,12 +142,126 @@ class BsAlphaStripComponent {
         }
     }
     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: { 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 [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 }); }
+    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 [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 }] }], 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-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() {
@@ -158,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;
@@ -408,7 +526,7 @@ class BsColorWheelComponent {
         }
     }
     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 } }, 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 }); }
+    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.1.6", ngImport: i0, type: BsColorWheelComponent, decorators: [{
             type: Component,
@@ -417,11 +535,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                         '(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"] }] } });
+        }], 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();
@@ -459,12 +578,12 @@ class BsLuminosityStripComponent {
         }
     }
     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: { 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 [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.ɵ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.1.6", ngImport: i0, type: BsLuminosityStripComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-luminosity-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], 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: i0.ViewChild, args: ['canvas', { isSignal: true }] }], 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"] }] } });
+            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() {
@@ -482,129 +601,13 @@ class BsColorPickerComponent {
         });
     }
     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 }], 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.ɵ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.1.6", ngImport: i0, type: BsColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-color-picker', imports: [BsColorWheelComponent, BsLuminosityStripComponent, BsAlphaStripComponent], 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" }]
+            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"] }] } });
 
-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.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: () => [] });
-
 /**
  * Generated bundle index. Do not edit.
  */