@mintplayer/ng-bootstrap 16.5.0 → 16.6.1

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

@@ -0,0 +1,819 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, HostBinding, Input, ViewChild, Output, HostListener, Directive, forwardRef, Inject, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@mintplayer/ng-bootstrap/let';
+import { BsLetModule } from '@mintplayer/ng-bootstrap/let';
+import { BehaviorSubject, combineLatest, map, debounceTime, switchMap, take } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+class BsColorWheelComponent {
+    constructor(element) {
+        // this.resizeObserver = new ResizeObserver((entries) => {
+        //   for (const entry of entries) {
+        //     if (entry.target === this.element.nativeElement) {
+        //       console.log(entry.contentRect);
+        //       this.width$.next(entry.contentRect.width);
+        //       this.height$.next(entry.contentRect.height);
+        //       break;
+        //     }
+        //   }
+        // });
+        this.element = element;
+        this.positionRelative = true;
+        //#region Hue/Luminosity
+        this.hs$ = new BehaviorSubject({ hue: 0, saturation: 0 });
+        this.hsChange = new EventEmitter();
+        //#endregion
+        //#region Luminosity
+        this.luminosity$ = new BehaviorSubject(0);
+        //#endregion
+        // private resizeObserver: ResizeObserver;
+        this.canvasContext = null;
+        this.isPointerDown = false;
+        this.width$ = new BehaviorSubject(150);
+        this.height$ = new BehaviorSubject(150);
+        this.diameterRatio$ = new BehaviorSubject(0);
+        this.disabled$ = new BehaviorSubject(false);
+        this.viewInited$ = new BehaviorSubject(false);
+        this.squareSize$ = combineLatest([this.width$, this.height$])
+            .pipe(map(([width, height]) => {
+            if ((width === null) || (height === null)) {
+                return null;
+            }
+            const squareSize = Math.min(width, height);
+            return squareSize;
+        }));
+        this.shiftX$ = combineLatest([this.width$, this.height$])
+            .pipe(map(([width, height]) => {
+            if ((width === null) || (height === null)) {
+                return null;
+            }
+            else if (width < height) {
+                return 0;
+            }
+            else {
+                return (width - height) / 2;
+            }
+        }));
+        this.shiftY$ = combineLatest([this.width$, this.height$])
+            .pipe(map(([width, height]) => {
+            if ((width === null) || (height === null)) {
+                return null;
+            }
+            else if (width < height) {
+                return (height - width) / 2;
+            }
+            else {
+                return 0;
+            }
+        }));
+        this.innerRadius$ = combineLatest([this.squareSize$, this.diameterRatio$])
+            .pipe(map(([squareSize, diameterRatio]) => {
+            if (squareSize) {
+                return squareSize / 2 * diameterRatio;
+            }
+            else {
+                return 0;
+            }
+        }));
+        this.outerRadius$ = combineLatest([this.squareSize$, this.diameterRatio$])
+            .pipe(map(([squareSize, diameterRatio]) => {
+            if (squareSize) {
+                return squareSize / 2;
+            }
+            else {
+                return 150;
+            }
+        }));
+        combineLatest([this.innerRadius$, this.outerRadius$, this.shiftX$, this.shiftY$])
+            .pipe(debounceTime(20), takeUntilDestroyed())
+            .subscribe(([innerRadius, outerRadius, shiftX, shiftY]) => {
+            if (this.canvasContext && (innerRadius !== null) && (outerRadius !== null) && (shiftX !== null) && (shiftY !== null)) {
+                this.canvasContext.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
+                this.canvasContext.save();
+                this.canvasContext.translate(shiftX + outerRadius, shiftY + outerRadius);
+                for (let x = 0; x < 360; x++) {
+                    this.canvasContext.rotate(1 * Math.PI / 180);
+                    const gradient = this.canvasContext.createLinearGradient(innerRadius, 0, outerRadius, 0);
+                    gradient.addColorStop(0, `hsl(${x}, 0%, 50%)`);
+                    gradient.addColorStop(1, `hsl(${x}, 100%, 50%)`);
+                    this.canvasContext.fillStyle = gradient;
+                    this.canvasContext.fillRect(innerRadius, 0, outerRadius - innerRadius, outerRadius / 50);
+                }
+                this.canvasContext.restore();
+            }
+        });
+        this.markerPosition$ = combineLatest([this.hs$, this.shiftX$, this.shiftY$])
+            .pipe(switchMap(([hs, shiftX, shiftY]) => {
+            return this.color2position(hs)
+                .pipe(map((position) => ({ position, shiftX: (shiftX ?? 0), shiftY: (shiftY ?? 0) })));
+        }))
+            .pipe(map(({ position, shiftX, shiftY }) => {
+            return {
+                x: position.x + shiftX,
+                y: position.y + shiftY,
+            };
+        }));
+        this.hs$.pipe(takeUntilDestroyed())
+            .subscribe((hs) => this.hsChange.emit(hs));
+    }
+    set diameterRatio(value) {
+        this.diameterRatio$.next(value);
+    }
+    set width(value) {
+        this.width$.next(value);
+    }
+    set height(value) {
+        this.height$.next(value);
+    }
+    get hs() {
+        return this.hs$.value;
+    }
+    set hs(value) {
+        this.hs$.next(value);
+    }
+    get luminosity() {
+        return this.luminosity$.value;
+    }
+    set luminosity(value) {
+        this.luminosity$.next(value);
+    }
+    ngAfterViewInit() {
+        // this.resizeObserver.observe(this.element.nativeElement);
+        this.viewInited$.next(true);
+        this.canvasContext = this.canvas.nativeElement.getContext('2d', { willReadFrequently: true });
+    }
+    onPointerDown(ev) {
+        if (!this.disabled$.value) {
+            ev.preventDefault();
+            this.isPointerDown = true;
+            this.updateColor(ev, !('touches' in ev));
+        }
+    }
+    onPointerMove(ev) {
+        if (this.isPointerDown) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.updateColor(ev, !('touches' in ev));
+        }
+    }
+    onMouseMove(ev) {
+        this.onPointerMove(ev);
+    }
+    onPointerUp(ev) {
+        this.isPointerDown = false;
+    }
+    updateColor(ev, subtract) {
+        let co;
+        const rect = this.canvas.nativeElement.getBoundingClientRect();
+        if ('touches' in ev) {
+            co = {
+                x: ev.touches[0].clientX - rect.left,
+                y: ev.touches[0].clientY - rect.top,
+            };
+        }
+        else {
+            co = {
+                x: ev.clientX - (subtract ? rect.left : 0),
+                y: ev.clientY - (subtract ? rect.top : 0),
+            };
+        }
+        this.position2color(co.x, co.y).pipe(take(1)).subscribe((color) => {
+            if (color) {
+                this.hs$.next({ hue: color.hue, saturation: color.saturation });
+            }
+            else {
+                console.warn('Color is null');
+            }
+        });
+    }
+    isInsideCircle(x, y) {
+        return combineLatest([this.squareSize$, this.shiftX$, this.shiftY$])
+            .pipe(map(([squareSize, shiftX, shiftY]) => {
+            // Position to the square
+            const sx = x - (shiftX ?? 0);
+            const sy = y - (shiftY ?? 0);
+            // Square radius
+            const sr = (squareSize ?? 0) / 2;
+            const radius = Math.sqrt(Math.pow(sx - sr, 2) + Math.pow(sy - sr, 2));
+            const angle = (Math.atan2(sr - sy, sr - sx) + Math.PI) % 360;
+            return {
+                inside: radius <= sr,
+                angle
+            };
+        }));
+    }
+    position2color(x, y) {
+        return this.isInsideCircle(x, y).pipe(map((result) => {
+            if (!this.canvasContext) {
+                return null;
+            }
+            if (result.inside) {
+                const imageData = this.canvasContext.getImageData(x, y, 1, 1).data;
+                const hsl = this.rgb2Hsl({ r: imageData[0], g: imageData[1], b: imageData[2] });
+                return hsl;
+            }
+            return { hue: result.angle * 180 / Math.PI, saturation: 1, luminosity: 0.5 };
+        }));
+    }
+    color2position(hs) {
+        return combineLatest([this.innerRadius$, this.outerRadius$])
+            .pipe(map(([innerRadius, outerRadius]) => {
+            if (innerRadius === null) {
+                innerRadius = 0;
+            }
+            if (!outerRadius) {
+                outerRadius = 100;
+            }
+            const theta = hs.hue * Math.PI / 180;
+            const c = {
+                x: -outerRadius * Math.cos(theta),
+                y: -outerRadius * Math.sin(theta)
+            };
+            const d = hs.saturation * (outerRadius - innerRadius) + innerRadius;
+            const o = { x: outerRadius, y: outerRadius };
+            return {
+                x: o.x - d * (c.x / outerRadius),
+                y: o.y - d * (c.y / outerRadius),
+            };
+        }));
+    }
+    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 { hue: h, saturation: s, luminosity: l };
+    }
+    /**
+     * 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;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsColorWheelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: BsColorWheelComponent, selector: "bs-color-wheel", inputs: { diameterRatio: "diameterRatio", width: "width", height: "height", hs: "hs", luminosity: "luminosity" }, outputs: { hsChange: "hsChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onPointerUp($event)" }, properties: { "class.position-relative": "this.positionRelative" } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas\n    class=\"d-block\"\n    [width]=\"width$ | async\"\n    [height]=\"height$ | async\"\n    (mousedown)=\"onPointerDown($event)\"\n    (touchstart)=\"onPointerDown($event)\"\n    (touchmove)=\"onPointerMove($event)\"\n    (touchend)=\"onPointerUp($event)\"\n    #canvas></canvas>\n\n<ng-container *ngIf=\"(markerPosition$ | async) as markerPosition\">\n    <div class=\"thumb position-absolute pe-none\" [style.left.px]=\"markerPosition.x\" [style.top.px]=\"markerPosition.y\"></div>\n</ng-container>", styles: [".thumb{width:30px;height:30px;border-radius:15px;margin-top:-15px;margin-left:-15px;box-sizing:border-box;border:2px solid white;box-shadow:#0000001a 0 0 10px 5px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsColorWheelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-color-wheel', template: "<canvas\n    class=\"d-block\"\n    [width]=\"width$ | async\"\n    [height]=\"height$ | async\"\n    (mousedown)=\"onPointerDown($event)\"\n    (touchstart)=\"onPointerDown($event)\"\n    (touchmove)=\"onPointerMove($event)\"\n    (touchend)=\"onPointerUp($event)\"\n    #canvas></canvas>\n\n<ng-container *ngIf=\"(markerPosition$ | async) as markerPosition\">\n    <div class=\"thumb position-absolute pe-none\" [style.left.px]=\"markerPosition.x\" [style.top.px]=\"markerPosition.y\"></div>\n</ng-container>", 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: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { positionRelative: [{
+                type: HostBinding,
+                args: ['class.position-relative']
+            }], diameterRatio: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], canvas: [{
+                type: ViewChild,
+                args: ['canvas']
+            }], hsChange: [{
+                type: Output
+            }], hs: [{
+                type: Input
+            }], luminosity: [{
+                type: Input
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onPointerUp: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }] } });
+
+class BsSliderComponent {
+    constructor(element, zone) {
+        this.element = element;
+        this.zone = zone;
+        this.dBlock = true;
+        this.positionRelative = true;
+        //#region Value
+        this.value$ = new BehaviorSubject(0.5);
+        this.valueChange = new EventEmitter();
+        //#endregion
+        this.isPointerDown$ = new BehaviorSubject(false);
+        this.value$.pipe(takeUntilDestroyed())
+            .subscribe((value) => this.valueChange.emit(value));
+        this.thumbMarginLeft$ = this.value$.pipe(map((value) => {
+            const res = value * element.nativeElement.clientWidth - 12;
+            return res;
+        }));
+        this.cursorClass$ = this.isPointerDown$.pipe(map((isPointerDown) => {
+            return isPointerDown ? 'cursor-grabbing' : 'cursor-grab';
+        }));
+    }
+    get value() {
+        return this.value$.value;
+    }
+    set value(value) {
+        this.value$.next(value);
+    }
+    onPointerDown(ev) {
+        ev.preventDefault();
+        this.zone.run(() => this.isPointerDown$.next(true));
+        this.updateColor(ev);
+    }
+    onPointerMove(ev) {
+        if (this.isPointerDown$.value) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.updateColor(ev);
+        }
+    }
+    onPointerUp(ev) {
+        this.isPointerDown$.next(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$.next(limited);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsSliderComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: BsSliderComponent, selector: "bs-slider", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:mouseup": "onPointerUp($event)" }, properties: { "class.d-block": "this.dBlock", "class.position-relative": "this.positionRelative" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true }], ngImport: i0, template: "<div class=\"wrapper d-block position-relative\">\n    <div #track class=\"track2\"\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\">\n        <ng-content select=\"[bsTrack]\"></ng-content>\n    </div>\n    <div #thumb\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\"\n        [class]=\"cursorClass$ | async\"\n        [style.margin-left.px]=\"thumbMarginLeft$ | async\">\n        <ng-content select=\"[bsThumb]\"></ng-content>\n    </div>\n</div>", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}::ng-deep .thumb{width:24px;height:24px;top:0;border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}::ng-deep .track{height:8px;border-radius:8px}\n"], dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-slider', template: "<div class=\"wrapper d-block position-relative\">\n    <div #track class=\"track2\"\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\">\n        <ng-content select=\"[bsTrack]\"></ng-content>\n    </div>\n    <div #thumb\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\"\n        [class]=\"cursorClass$ | async\"\n        [style.margin-left.px]=\"thumbMarginLeft$ | async\">\n        <ng-content select=\"[bsThumb]\"></ng-content>\n    </div>\n</div>", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}::ng-deep .thumb{width:24px;height:24px;top:0;border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}::ng-deep .track{height:8px;border-radius:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, 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']
+            }], valueChange: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }], 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: "16.1.2", ngImport: i0, type: BsThumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: BsThumbDirective, selector: "[bsThumb]", host: { properties: { "class.thumb": "this.thumbClass", "class.position-absolute": "this.thumbClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsThumbDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[bsThumb]' }]
+        }], 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: "16.1.2", ngImport: i0, type: BsTrackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: BsTrackDirective, selector: "[bsTrack]", host: { properties: { "class.track": "this.trackClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsTrackDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[bsTrack]' }]
+        }], propDecorators: { trackClass: [{
+                type: HostBinding,
+                args: ['class.track']
+            }] } });
+
+class BsLuminosityStripComponent {
+    constructor() {
+        //#region HS
+        this.hs$ = new BehaviorSubject({ hue: 0, saturation: 0 });
+        //#endregion
+        //#region Luminosity
+        this.luminosity$ = new BehaviorSubject(0.5);
+        this.luminosityChange = new EventEmitter();
+        //#endregion
+        this.canvasContext = null;
+        this.hs$.pipe(takeUntilDestroyed()).subscribe((hs) => {
+            if (this.canvasContext) {
+                const width = this.canvas.nativeElement.width, height = this.canvas.nativeElement.height;
+                this.canvasContext.clearRect(0, 0, width, height);
+                this.canvasContext.save();
+                // HSL
+                // - H: 0 - 359
+                // - S: "0%" - "100%"
+                // - L: "0%" - "50%" - "100%"
+                const gradient = this.canvasContext.createLinearGradient(0, 0, width, 0);
+                gradient.addColorStop(0, `hsl(${hs.hue}, ${hs.saturation * 100}%, 0%)`);
+                gradient.addColorStop(0.5, `hsl(${hs.hue}, ${hs.saturation * 100}%, 50%)`);
+                gradient.addColorStop(1, `hsl(${hs.hue}, ${hs.saturation * 100}%, 100%)`);
+                this.canvasContext.fillStyle = gradient;
+                this.canvasContext.fillRect(0, 0, width, height);
+            }
+        });
+        this.resultBackground$ = combineLatest([this.hs$, this.luminosity$])
+            .pipe(map(([hs, luminosity]) => {
+            return `hsl(${hs.hue}, ${hs.saturation * 100}%, ${luminosity * 100}%)`;
+        }));
+        this.luminosity$.pipe(takeUntilDestroyed())
+            .subscribe(luminosity => this.luminosityChange.emit(luminosity));
+    }
+    get hs() {
+        return this.hs$.value;
+    }
+    set hs(value) {
+        this.hs$.next(value);
+    }
+    get luminosity() {
+        return this.luminosity$.value;
+    }
+    set luminosity(value) {
+        this.luminosity$.next(value);
+    }
+    ngAfterViewInit() {
+        this.canvasContext = this.canvas.nativeElement.getContext('2d', { willReadFrequently: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsLuminosityStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: BsLuminosityStripComponent, selector: "bs-luminosity-strip", inputs: { hs: "hs", luminosity: "luminosity" }, outputs: { luminosityChange: "luminosityChange" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<bs-slider [value]=\"(luminosity$ | async)!\" (valueChange)=\"luminosityChange.emit($event)\">\n    <canvas bsTrack class=\"position-absolute w-100\" #canvas></canvas>\n    <div bsThumb [style.background]=\"resultBackground$ | async\"></div>\n</bs-slider>", styles: [""], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["value"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsLuminosityStripComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-luminosity-strip', template: "<bs-slider [value]=\"(luminosity$ | async)!\" (valueChange)=\"luminosityChange.emit($event)\">\n    <canvas bsTrack class=\"position-absolute w-100\" #canvas></canvas>\n    <div bsThumb [style.background]=\"resultBackground$ | async\"></div>\n</bs-slider>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { hs: [{
+                type: Input
+            }], luminosityChange: [{
+                type: Output
+            }], luminosity: [{
+                type: Input
+            }], canvas: [{
+                type: ViewChild,
+                args: ['canvas']
+            }] } });
+
+class BsAlphaStripComponent {
+    constructor() {
+        //#region HS
+        this.hs$ = new BehaviorSubject({ hue: 0, saturation: 0 });
+        //#endregion
+        //#region Luminosity
+        this.luminosity$ = new BehaviorSubject(0.5);
+        //#endregion
+        //#region Alpha
+        this.alpha$ = new BehaviorSubject(1);
+        this.alphaChange = new EventEmitter();
+        //#endregion
+        this.canvasContext = null;
+        combineLatest([this.hs$, this.luminosity$]).pipe(takeUntilDestroyed()).subscribe(([hs, luminosity]) => {
+            setTimeout(() => {
+                if (this.canvasContext) {
+                    const width = this.canvas.nativeElement.width, 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);
+                }
+            });
+        });
+        this.resultBackground$ = combineLatest([this.hs$, this.luminosity$, this.alpha$])
+            .pipe(map(([hs, luminosity, alpha]) => {
+            return `hsla(${hs.hue}, ${hs.saturation * 100}%, ${luminosity * 100}%, ${alpha})`;
+        }));
+        this.alpha$.pipe(takeUntilDestroyed())
+            .subscribe((alpha) => this.alphaChange.emit(alpha));
+    }
+    get hs() {
+        return this.hs$.value;
+    }
+    set hs(value) {
+        this.hs$.next(value);
+    }
+    get luminosity() {
+        return this.luminosity$.value;
+    }
+    set luminosity(value) {
+        this.luminosity$.next(value);
+    }
+    get alpha() {
+        return this.alpha$.value;
+    }
+    set alpha(value) {
+        this.alpha$.next(value);
+    }
+    ngAfterViewInit() {
+        this.canvasContext = this.canvas.nativeElement.getContext('2d', { willReadFrequently: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsAlphaStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: BsAlphaStripComponent, selector: "bs-alpha-strip", inputs: { hs: "hs", luminosity: "luminosity", alpha: "alpha" }, outputs: { alphaChange: "alphaChange" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["track"], descendants: true }], ngImport: i0, template: "<bs-slider [value]=\"(alpha$ | async)!\" (valueChange)=\"alphaChange.emit($event)\">\n    <canvas bsTrack class=\" track position-absolute w-100\" #track></canvas>\n\n    <!-- [style.background]=\"resultBackground$ | async\" -->\n    <div bsThumb [style.background]=\"resultBackground$ | async\"></div>\n</bs-slider>", styles: [".track{background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}\n"], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["value"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsAlphaStripComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-alpha-strip', template: "<bs-slider [value]=\"(alpha$ | async)!\" (valueChange)=\"alphaChange.emit($event)\">\n    <canvas bsTrack class=\" track position-absolute w-100\" #track></canvas>\n\n    <!-- [style.background]=\"resultBackground$ | async\" -->\n    <div bsThumb [style.background]=\"resultBackground$ | async\"></div>\n</bs-slider>", styles: [".track{background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { hs: [{
+                type: Input
+            }], luminosity: [{
+                type: Input
+            }], alphaChange: [{
+                type: Output
+            }], alpha: [{
+                type: Input
+            }], canvas: [{
+                type: ViewChild,
+                args: ['track']
+            }] } });
+
+class BsColorPickerComponent {
+    constructor() {
+        this.width$ = new BehaviorSubject(150);
+        this.height$ = new BehaviorSubject(150);
+        this.disabled$ = new BehaviorSubject(false);
+        this.allowAlpha$ = new BehaviorSubject(true);
+        this.hs$ = new BehaviorSubject({ hue: 0, saturation: 0 });
+        this.luminosity$ = new BehaviorSubject(0);
+        //#region Alpha
+        this.alpha$ = new BehaviorSubject(1);
+        this.alphaChange = new EventEmitter();
+        this.alpha$.pipe(takeUntilDestroyed())
+            .subscribe((alpha) => this.alphaChange.emit(alpha));
+    }
+    set width(value) {
+        this.width$.next(value);
+    }
+    set height(value) {
+        this.height$.next(value);
+    }
+    set allowAlpha(value) {
+        this.allowAlpha$.next(value);
+    }
+    get alpha() {
+        return this.alpha$.value;
+    }
+    set alpha(value) {
+        this.alpha$.next(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: BsColorPickerComponent, selector: "bs-color-picker", inputs: { width: "width", height: "height", allowAlpha: "allowAlpha", alpha: "alpha" }, outputs: { alphaChange: "alphaChange" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["wheel"], descendants: true }], ngImport: i0, template: "<ng-container *bsLet=\"(disabled$ | async)!; let letDisabled\">\n    <ng-container *bsLet=\"(hs$ | async)!; let letHS\">\n        <ng-container *bsLet=\"(luminosity$ | async)!; let letLuminosity\">\n            <ng-container *bsLet=\"(alpha$ | async)!; let letAlpha\">\n                <bs-color-wheel [hs]=\"letHS\" (hsChange)=\"hs$.next($event)\" [luminosity]=\"letLuminosity\" #wheel></bs-color-wheel>\n                <bs-luminosity-strip [hs]=\"letHS\" [luminosity]=\"letLuminosity\" (luminosityChange)=\"luminosity$.next($event)\" class=\"d-block mt-2\" #strip></bs-luminosity-strip>\n                <bs-alpha-strip *ngIf=\"allowAlpha$ | async\" [hs]=\"letHS\" [luminosity]=\"letLuminosity\" [alpha]=\"letAlpha\" (alphaChange)=\"alpha$.next($event)\" class=\"d-block mt-2\" #alpha></bs-alpha-strip>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.BsLetDirective, selector: "[bsLet]", inputs: ["bsLet"] }, { kind: "component", type: BsColorWheelComponent, selector: "bs-color-wheel", inputs: ["diameterRatio", "width", "height", "hs", "luminosity"], outputs: ["hsChange"] }, { kind: "component", type: BsLuminosityStripComponent, selector: "bs-luminosity-strip", inputs: ["hs", "luminosity"], outputs: ["luminosityChange"] }, { kind: "component", type: BsAlphaStripComponent, selector: "bs-alpha-strip", inputs: ["hs", "luminosity", "alpha"], outputs: ["alphaChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-color-picker', template: "<ng-container *bsLet=\"(disabled$ | async)!; let letDisabled\">\n    <ng-container *bsLet=\"(hs$ | async)!; let letHS\">\n        <ng-container *bsLet=\"(luminosity$ | async)!; let letLuminosity\">\n            <ng-container *bsLet=\"(alpha$ | async)!; let letAlpha\">\n                <bs-color-wheel [hs]=\"letHS\" (hsChange)=\"hs$.next($event)\" [luminosity]=\"letLuminosity\" #wheel></bs-color-wheel>\n                <bs-luminosity-strip [hs]=\"letHS\" [luminosity]=\"letLuminosity\" (luminosityChange)=\"luminosity$.next($event)\" class=\"d-block mt-2\" #strip></bs-luminosity-strip>\n                <bs-alpha-strip *ngIf=\"allowAlpha$ | async\" [hs]=\"letHS\" [luminosity]=\"letLuminosity\" [alpha]=\"letAlpha\" (alphaChange)=\"alpha$.next($event)\" class=\"d-block mt-2\" #alpha></bs-alpha-strip>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</ng-container>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { colorWheel: [{
+                type: ViewChild,
+                args: ['wheel']
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], allowAlpha: [{
+                type: Input
+            }], alphaChange: [{
+                type: Output
+            }], alpha: [{
+                type: Input
+            }] } });
+
+class BsColorPickerValueAccessor {
+    constructor(host, destroy) {
+        this.host = host;
+        this.destroy = destroy;
+    }
+    ngAfterViewInit() {
+        combineLatest([this.host.hs$, this.host.luminosity$])
+            .pipe(takeUntilDestroyed(this.destroy))
+            .subscribe(([hs, luminosity]) => {
+            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$.next({ hue: hsl.h, saturation: hsl.s });
+                this.host.luminosity$.next(hsl.l);
+            }
+        }
+    }
+    setDisabledState(isDisabled) {
+        if (this.host && this.host.colorWheel) {
+            this.host.colorWheel.disabled$.next(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: "16.1.2", ngImport: i0, type: BsColorPickerValueAccessor, deps: [{ token: forwardRef(() => BsColorPickerComponent) }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: BsColorPickerValueAccessor, selector: "bs-color-picker", providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                // useExisting: BsColorPickerValueAccessor,
+                useExisting: forwardRef(() => BsColorPickerValueAccessor),
+                multi: true
+            }], exportAs: ["bsColorPicker"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsColorPickerValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'bs-color-picker',
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            // useExisting: BsColorPickerValueAccessor,
+                            useExisting: forwardRef(() => BsColorPickerValueAccessor),
+                            multi: true
+                        }],
+                    exportAs: 'bsColorPicker'
+                }]
+        }], ctorParameters: function () { return [{ type: BsColorPickerComponent, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => BsColorPickerComponent)]
+                }] }, { type: i0.DestroyRef }]; } });
+
+class BsColorPickerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: BsColorPickerModule, declarations: [BsColorPickerComponent,
+            BsColorPickerValueAccessor,
+            BsColorWheelComponent,
+            BsLuminosityStripComponent,
+            BsSliderComponent,
+            BsThumbDirective,
+            BsTrackDirective,
+            BsAlphaStripComponent], imports: [CommonModule,
+            FormsModule,
+            BsLetModule], exports: [BsColorPickerComponent,
+            BsColorPickerValueAccessor,
+            BsColorWheelComponent,
+            BsLuminosityStripComponent,
+            BsSliderComponent,
+            BsThumbDirective,
+            BsTrackDirective,
+            BsAlphaStripComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsColorPickerModule, imports: [CommonModule,
+            FormsModule,
+            BsLetModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: BsColorPickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsColorPickerComponent,
+                        BsColorPickerValueAccessor,
+                        BsColorWheelComponent,
+                        BsLuminosityStripComponent,
+                        BsSliderComponent,
+                        BsThumbDirective,
+                        BsTrackDirective,
+                        BsAlphaStripComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BsLetModule
+                    ],
+                    exports: [
+                        BsColorPickerComponent,
+                        BsColorPickerValueAccessor,
+                        BsColorWheelComponent,
+                        BsLuminosityStripComponent,
+                        BsSliderComponent,
+                        BsThumbDirective,
+                        BsTrackDirective,
+                        BsAlphaStripComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BsAlphaStripComponent, BsColorPickerComponent, BsColorPickerModule, BsColorPickerValueAccessor, BsColorWheelComponent, BsLuminosityStripComponent, BsSliderComponent, BsThumbDirective, BsTrackDirective };
+//# sourceMappingURL=mintplayer-ng-bootstrap-color-picker.mjs.map