npm - @mintplayer/ng-bootstrap - Versions diffs - 21.0.0 → 21.1.0 - Mend

@mintplayer/ng-bootstrap 21.0.0 → 21.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (155) hide show

package/fesm2022/mintplayer-ng-bootstrap-signature-pad.mjs CHANGED Viewed

@@ -1,29 +1,15 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, HostBinding, ViewChild, Input, Output, Component } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { model, input, HostListener, HostBinding, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
 class BsSignaturePadComponent {
     constructor() {
-        //#region Signature
-        this.signature$ = new BehaviorSubject({ strokes: [] });
-        this.signatureChange = new EventEmitter();
-        //#endregion
-        this.width = 500;
-        this.height = 300;
+        this.signature = model({ strokes: [] }, ...(ngDevMode ? [{ debugName: "signature" }] : []));
+        this.width = input(500, ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = input(300, ...(ngDevMode ? [{ debugName: "height" }] : []));
         this.classes = true;
         this.isDrawing = false;
         this.context = null;
         this.minHeight = 5;
-        this.signature$.pipe(takeUntilDestroyed()).subscribe((signature) => {
-            this.signatureChange.emit(signature);
-        });
-    }
-    get signature() {
-        return this.signature$.value;
-    }
-    set signature(value) {
-        this.signature$.next(value);
     }
     ngAfterViewInit() {
         if (typeof window !== 'undefined') {
@@ -33,16 +19,18 @@ class BsSignaturePadComponent {
     onTouchMove(ev) {
         if (this.isDrawing) {
             ev.preventDefault();
+            ev.stopPropagation();
         }
     }
     onPointerStart(ev) {
         ev.preventDefault();
         this.isDrawing = true;
         if (this.context) {
-            this.signature.strokes.push({
+            const sig = this.signature();
+            sig.strokes.push({
                 points: [{ x: ev.offsetX, y: ev.offsetY }]
             });
-            this.signatureChange.emit(this.signature);
+            this.signature.set({ ...sig });
             this.context.fillStyle = 'black';
             this.context.beginPath();
             this.context.moveTo(ev.offsetX, ev.offsetY);
@@ -51,14 +39,9 @@ class BsSignaturePadComponent {
     onPointerMove(ev) {
         if (this.isDrawing && this.context) {
             ev.preventDefault();
-            // this.context.moveTo(this.points.at(-1)!.x, this.points.at(-1)!.y);
-            // // ctx.arc(x, y, width, 0, 2 * Math.PI, false);
-            // // this.context.arc(ev.offsetX, ev.offsetY, 2, 0, 2 * Math.PI, false);
-            // // this.context.arcTo(ev.offsetX, ev.offsetY,)
-            // this.context.closePath();
-            // this.context.fill();
-            this.signature.strokes.at(-1)?.points.push({ x: ev.offsetX, y: ev.offsetY });
-            this.signatureChange.emit(this.signature);
+            const sig = this.signature();
+            sig.strokes.at(-1)?.points.push({ x: ev.offsetX, y: ev.offsetY });
+            this.signature.set({ ...sig });
             this.context.lineTo(ev.offsetX, ev.offsetY);
             this.context.stroke();
         }
@@ -67,24 +50,15 @@ class BsSignaturePadComponent {
         if (this.isDrawing && this.context) {
             ev.preventDefault();
             this.isDrawing = false;
-            this.signatureChange.emit(this.signature);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSignaturePadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BsSignaturePadComponent, isStandalone: true, selector: "bs-signature-pad", inputs: { signature: "signature", width: "width", height: "height" }, outputs: { signatureChange: "signatureChange" }, host: { listeners: { "touchmove": "onTouchMove($event)", "pointerdown": "onPointerStart($event)", "pointermove": "onPointerMove($event)", "window:pointerup": "onPointerEnd($event)" }, properties: { "class.border": "this.classes", "class.d-inline-block": "this.classes", "style.min-height.rem": "this.minHeight" } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas [width]=\"width\" [height]=\"height\" class=\"d-block\" #canvas></canvas>", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: BsSignaturePadComponent, isStandalone: true, selector: "bs-signature-pad", inputs: { signature: { classPropertyName: "signature", publicName: "signature", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signature: "signatureChange" }, host: { listeners: { "touchmove": "onTouchMove($event)", "pointerdown": "onPointerStart($event)", "pointermove": "onPointerMove($event)", "window:pointerup": "onPointerEnd($event)" }, properties: { "class.border": "this.classes", "class.d-inline-block": "this.classes", "style.min-height.rem": "this.minHeight" } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas [width]=\"width()\" [height]=\"height()\" class=\"d-block\" #canvas></canvas>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSignaturePadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-signature-pad', standalone: true, template: "<canvas [width]=\"width\" [height]=\"height\" class=\"d-block\" #canvas></canvas>" }]
-        }], ctorParameters: () => [], propDecorators: { signatureChange: [{
-                type: Output
-            }], signature: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], classes: [{
+            args: [{ selector: 'bs-signature-pad', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<canvas [width]=\"width()\" [height]=\"height()\" class=\"d-block\" #canvas></canvas>" }]
+        }], propDecorators: { signature: [{ type: i0.Input, args: [{ isSignal: true, alias: "signature", required: false }] }, { type: i0.Output, args: ["signatureChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], classes: [{
                 type: HostBinding,
                 args: ['class.border']
             }, {

package/fesm2022/mintplayer-ng-bootstrap-signature-pad.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mintplayer-ng-bootstrap-signature-pad.mjs","sources":["../../../../libs/mintplayer-ng-bootstrap/signature-pad/src/component/signature-pad.component.ts","../../../../libs/mintplayer-ng-bootstrap/signature-pad/src/component/signature-pad.component.html","../../../../libs/mintplayer-ng-bootstrap/signature-pad/mintplayer-ng-bootstrap-signature-pad.ts"],"sourcesContent":["import { AfterViewInit, Component, ElementRef, ~~EventEmitter,~~ HostBinding, HostListener, ~~Input~~, ~~Output~~, ViewChild } from '@angular/core';\nimport { Signature } from '../interfaces/signature';\~~nimport { BehaviorSubject } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\~~n\n@Component({\n selector: 'bs-signature-pad',\n templateUrl: './signature-pad.component.html',\n styleUrls: ['./signature-pad.component.scss'],\n standalone: true,\n})\nexport class BsSignaturePadComponent implements AfterViewInit {\n ~~constructor() {~~\n ~~this.signature$.pipe(takeUntilDestroyed()).subscribe((signature) => {\n this.signatureChange.emit(signature);\n });\n~~ ~~}\n\n //#region Signature\n~~ signature$ = ~~new BehaviorSubject~~<Signature>({ strokes: [] });\n ~~@Output()~~ ~~signatureChange~~ = ~~new EventEmitter<Signature>~~();\n ~~public~~ ~~get signature() {\n return this.signature$.value;\n }\n @Input() public set signature(value: Signature) {\n this.signature$.next(value);\n }\n //#endregion\n\n @Input() width~~ = ~~500;\n @Input~~() ~~height = 300~~;\n\n @HostBinding('class.border')\n @HostBinding('class.d-inline-block')\n classes = true;\n\n isDrawing = false;\n @ViewChild('canvas') canvas!: ElementRef<HTMLCanvasElement>;\n context: CanvasRenderingContext2D \| null = null;\n\n ngAfterViewInit() {\n if (typeof window !== 'undefined') {\n this.context = this.canvas.nativeElement.getContext('2d', { willReadFrequently: true });\n }\n }\n\n @HostBinding('style.min-height.rem') minHeight = 5;\n @HostListener('touchmove', ['$event']) onTouchMove(ev: TouchEvent) {\n if (this.isDrawing) {\n ev.preventDefault();\n }\n }\n @HostListener('pointerdown', ['$event']) onPointerStart(ev: PointerEvent) {\n ev.preventDefault();\n this.isDrawing = true;\n if (this.context) {\n this.signature.strokes.push({\n points: [{ x: ev.offsetX, y: ev.offsetY }]\n });\n this.~~signatureChange~~.~~emit~~(~~this.signature~~);\n\n this.context.fillStyle = 'black';\n this.context.beginPath();\n this.context.moveTo(ev.offsetX, ev.offsetY);\n }\n }\n @HostListener('pointermove', ['$event']) onPointerMove(ev: PointerEvent) {\n if (this.isDrawing && this.context) {\n ev.preventDefault();\n \n // ~~this.context.moveTo(this.points.at(-1)!.x,~~ ~~this.points.at(-1)!.y);\n //~~ ~~// ctx.arc(x, y, width, 0, 2 * Math.PI, false);\n // //~~ this.~~context.arc~~(~~ev.offsetX, ev.offsetY, 2, 0, 2 * Math.PI, false~~);\n ~~// // this~~.~~context.arcTo(ev.offsetX, ev.offsetY,)\n // this.context.closePath();\n // this.context.fill();\n\n this.signature.~~strokes.at(-1)?.points.push({ x: ev.offsetX, y: ev.offsetY });\n this.~~signatureChange~~.~~emit~~(~~this.signature~~);\n\n this.context.lineTo(ev.offsetX, ev.offsetY);\n this.context.stroke();\n }\n }\n @HostListener('window:pointerup', ['$event']) onPointerEnd(ev: PointerEvent) {\n if (this.isDrawing && this.context) {\n ev.preventDefault();\n this.isDrawing = false;\n ~~this.signatureChange.emit(this.signature);\n~~ }\n }\n}\n","<canvas [width]=\"width\" [height]=\"height\" class=\"d-block\" #canvas></canvas>","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"~~;;;;;MAWa~~,uBAAuB,CAAA;~~AAClC~~,IAAA,WAAA,GAAA~~;;QAOA~~,IAAA,CAAA,~~UAAU~~,GAAG,~~IAAI~~,~~eAAe,~~CAAY,EAAE,OAAO,EAAE,EAAE,EAAE,~~CAAC;AAClD~~,~~QAAA,~~IAAA,CAAA,~~eAAe~~,~~GAAG~~,~~IAAI~~,~~YAAY~~,~~EAAa;;QAShD~~,IAAA,CAAA,KAAK,GAAG,GAAG;~~QACX~~,IAAA,CAAA,MAAM,GAAG,GAAG;~~QAIrB~~,IAAA,CAAA,OAAO,GAAG,IAAI;QAEd,IAAA,CAAA,SAAS,GAAG,KAAK;QAEjB,IAAA,CAAA,OAAO,GAAoC,IAAI;QAQV,IAAA,CAAA,SAAS,GAAG,CAAC;~~AAjChD~~,~~QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,KAAI;AACjE,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC;AACtC,QAAA,CAAC,CAAC;IACJ;AAKA,~~IAAA~~,IAAW,SAAS,GAAA~~;~~AAClB~~,~~QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK;IAC9B;IACA,IAAoB,SAAS,CAAC,KAAgB,EAAA;AAC5C,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;IAC7B;IAcA,~~eAAe,GAAA;AACb,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AACjC,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;QACzF;IACF;AAGuC,IAAA,WAAW,CAAC,EAAc,EAAA;AAC/D,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,EAAE,CAAC,cAAc,EAAE;~~QACrB~~;IACF;AACyC,IAAA,cAAc,CAAC,EAAgB,EAAA;QACtE,EAAE,CAAC,cAAc,EAAE;AACnB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;~~AAC1B~~,gBAAA,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE;AAC1C,aAAA,CAAC;YACF,IAAI,CAAC,~~eAAe~~,CAAC,~~IAAI~~,CAAC,~~IAAI~~,~~CAAC~~,~~SAAS~~,CAAC;~~AAEzC~~,YAAA,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,OAAO;AAChC,YAAA,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;AACxB,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC;QAC7C;IACF;AACyC,IAAA,aAAa,CAAC,EAAgB,EAAA;QACrE,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAClC,EAAE,CAAC,cAAc,EAAE~~;;;;;;;AASnB~~,YAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC;~~YAC5E~~,IAAI,CAAC,~~eAAe~~,CAAC,~~IAAI~~,CAAC,~~IAAI~~,~~CAAC~~,~~SAAS~~,CAAC;~~AAEzC~~,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC;AAC3C,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;QACvB;IACF;AAC8C,IAAA,YAAY,CAAC,EAAgB,EAAA;QACzE,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAClC,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;~~YACtB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC~~;~~QAC3C;~~IACF;~~8GA/EW~~,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,~~imBCXpC~~,~~mFAA2E~~,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;~~2FDW9D~~,uBAAuB,EAAA,UAAA,EAAA,CAAA;~~kBANnC~~,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,~~cAGhB~~,IAAI,EAAA,QAAA,EAAA,~~mFAAA~~,EAAA;;~~sBAWf;;sBAIA;;sBAKA;;sBACA;;sBAEA~~,WAAW;uBAAC,cAAc;;sBAC1B,WAAW;uBAAC,sBAAsB;;sBAIlC,SAAS;uBAAC,QAAQ;;sBASlB,WAAW;uBAAC,sBAAsB;;sBAClC,YAAY;uBAAC,WAAW,EAAE,CAAC,QAAQ,CAAC;;~~sBAKpC~~,YAAY;uBAAC,aAAa,EAAE,CAAC,QAAQ,CAAC;;~~sBActC~~,YAAY;uBAAC,aAAa,EAAE,CAAC,QAAQ,CAAC;;~~sBAkBtC~~,YAAY;uBAAC,kBAAkB,EAAE,CAAC,QAAQ,CAAC;;;~~AEpF9C~~;;AAEG;;;;"}
1	+ {"version":3,"file":"mintplayer-ng-bootstrap-signature-pad.mjs","sources":["../../../../libs/mintplayer-ng-bootstrap/signature-pad/src/component/signature-pad.component.ts","../../../../libs/mintplayer-ng-bootstrap/signature-pad/src/component/signature-pad.component.html","../../../../libs/mintplayer-ng-bootstrap/signature-pad/mintplayer-ng-bootstrap-signature-pad.ts"],"sourcesContent":["import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, HostBinding, HostListener, input, model, ViewChild } from '@angular/core';\nimport { Signature } from '../interfaces/signature';\n\n@Component({\n selector: 'bs-signature-pad',\n templateUrl: './signature-pad.component.html',\n styleUrls: ['./signature-pad.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BsSignaturePadComponent implements AfterViewInit {\n\n signature = model<Signature>({ strokes: [] });\n width = input(500);\n height = input(300);\n\n @HostBinding('class.border')\n @HostBinding('class.d-inline-block')\n classes = true;\n\n isDrawing = false;\n @ViewChild('canvas') canvas!: ElementRef<HTMLCanvasElement>;\n context: CanvasRenderingContext2D \| null = null;\n\n ngAfterViewInit() {\n if (typeof window !== 'undefined') {\n this.context = this.canvas.nativeElement.getContext('2d', { willReadFrequently: true });\n }\n }\n\n @HostBinding('style.min-height.rem') minHeight = 5;\n @HostListener('touchmove', ['$event']) onTouchMove(ev: TouchEvent) {\n if (this.isDrawing) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n @HostListener('pointerdown', ['$event']) onPointerStart(ev: PointerEvent) {\n ev.preventDefault();\n this.isDrawing = true;\n if (this.context) {\n const sig = this.signature();\n sig.strokes.push({\n points: [{ x: ev.offsetX, y: ev.offsetY }]\n });\n this.signature.set({ ...sig });\n\n this.context.fillStyle = 'black';\n this.context.beginPath();\n this.context.moveTo(ev.offsetX, ev.offsetY);\n }\n }\n @HostListener('pointermove', ['$event']) onPointerMove(ev: PointerEvent) {\n if (this.isDrawing && this.context) {\n ev.preventDefault();\n\n const sig = this.signature();\n sig.strokes.at(-1)?.points.push({ x: ev.offsetX, y: ev.offsetY });\n this.signature.set({ ...sig });\n\n this.context.lineTo(ev.offsetX, ev.offsetY);\n this.context.stroke();\n }\n }\n @HostListener('window:pointerup', ['$event']) onPointerEnd(ev: PointerEvent) {\n if (this.isDrawing && this.context) {\n ev.preventDefault();\n this.isDrawing = false;\n }\n }\n}\n","<canvas [width]=\"width()\" [height]=\"height()\" class=\"d-block\" #canvas></canvas>","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;MAUa,uBAAuB,CAAA;AAPpC,IAAA,WAAA,GAAA;QASE,IAAA,CAAA,SAAS,GAAG,KAAK,CAAY,EAAE,OAAO,EAAE,EAAE,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAC7C,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,GAAG,iDAAC;AAClB,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,GAAG,kDAAC;QAInB,IAAA,CAAA,OAAO,GAAG,IAAI;QAEd,IAAA,CAAA,SAAS,GAAG,KAAK;QAEjB,IAAA,CAAA,OAAO,GAAoC,IAAI;QAQV,IAAA,CAAA,SAAS,GAAG,CAAC;AAwCnD,IAAA;IA9CC,eAAe,GAAA;AACb,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AACjC,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;QACzF;IACF;AAGuC,IAAA,WAAW,CAAC,EAAc,EAAA;AAC/D,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,EAAE,CAAC,cAAc,EAAE;YACnB,EAAE,CAAC,eAAe,EAAE;QACtB;IACF;AACyC,IAAA,cAAc,CAAC,EAAgB,EAAA;QACtE,EAAE,CAAC,cAAc,EAAE;AACnB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,EAAE;AAC5B,YAAA,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC;AACf,gBAAA,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE;AAC1C,aAAA,CAAC;YACF,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC;AAE9B,YAAA,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,OAAO;AAChC,YAAA,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;AACxB,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC;QAC7C;IACF;AACyC,IAAA,aAAa,CAAC,EAAgB,EAAA;QACrE,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAClC,EAAE,CAAC,cAAc,EAAE;AAEnB,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,EAAE;YAC5B,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC;YACjE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC;AAE9B,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC;AAC3C,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;QACvB;IACF;AAC8C,IAAA,YAAY,CAAC,EAAgB,EAAA;QACzE,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAClC,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;QACxB;IACF;8GA3DW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,w5BCVpC,uFAA+E,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDUlE,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,UAAA,EAGhB,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,uFAAA,EAAA;;sBAQ9C,WAAW;uBAAC,cAAc;;sBAC1B,WAAW;uBAAC,sBAAsB;;sBAIlC,SAAS;uBAAC,QAAQ;;sBASlB,WAAW;uBAAC,sBAAsB;;sBAClC,YAAY;uBAAC,WAAW,EAAE,CAAC,QAAQ,CAAC;;sBAMpC,YAAY;uBAAC,aAAa,EAAE,CAAC,QAAQ,CAAC;;sBAetC,YAAY;uBAAC,aAAa,EAAE,CAAC,QAAQ,CAAC;;sBAYtC,YAAY;uBAAC,kBAAkB,EAAE,CAAC,QAAQ,CAAC;;;AEhE9C;;AAEG;;;;"}

package/fesm2022/mintplayer-ng-bootstrap-spinner.mjs CHANGED Viewed

@@ -1,46 +1,22 @@
-import { AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Color } from '@mintplayer/ng-bootstrap';
-import { BehaviorSubject, map } from 'rxjs';
 class BsSpinnerComponent {
     constructor() {
         this.colors = Color;
-        //#region Type
-        this.type$ = new BehaviorSubject('border');
-        //#endregion
-        //#region Color
-        this.color$ = new BehaviorSubject(Color.dark);
-        this.spinnerClass$ = this.type$
-            .pipe(map((type) => `spinner-${type}`));
-        this.colorClass$ = this.color$
-            .pipe(map((type) => `text-${this.colors[type]}`));
-    }
-    ngOnInit() { }
-    get type() {
-        return this.type$.value;
-    }
-    set type(value) {
-        this.type$.next(value);
-    }
-    get color() {
-        return this.color$.value;
-    }
-    set color(value) {
-        this.color$.next(value);
+        this.type = input('border', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.color = input(Color.dark, ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.spinnerClass = computed(() => `spinner-${this.type()}`, ...(ngDevMode ? [{ debugName: "spinnerClass" }] : []));
+        this.colorClass = computed(() => `text-${this.colors[this.color()]}`, ...(ngDevMode ? [{ debugName: "colorClass" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BsSpinnerComponent, isStandalone: true, selector: "bs-spinner", inputs: { type: "type", color: "color" }, ngImport: i0, template: "<div [class]=\"[spinnerClass$ | async, colorClass$ | async]\" role=\"status\">\n    <span class=\"visually-hidden\">Loading...</span>\n</div>", styles: [":host ::ng-deep .spinner-grow,:host ::ng-deep .spinner-border{display:inline-block;flex-shrink:0;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}@keyframes spinner-border{to{transform:rotate(360deg)}}:host ::ng-deep .spinner-border{--bs-spinner-width: 2rem;--bs-spinner-height: 2rem;--bs-spinner-vertical-align: -.125em;--bs-spinner-border-width: .25em;--bs-spinner-animation-speed: .75s;--bs-spinner-animation-name: spinner-border;border:var(--bs-spinner-border-width) solid currentcolor;border-right-color:transparent}:host ::ng-deep .spinner-border-sm{--bs-spinner-width: 1rem;--bs-spinner-height: 1rem;--bs-spinner-border-width: .2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}:host ::ng-deep .spinner-grow{--bs-spinner-width: 2rem;--bs-spinner-height: 2rem;--bs-spinner-vertical-align: -.125em;--bs-spinner-animation-speed: .75s;--bs-spinner-animation-name: spinner-grow;background-color:currentcolor;opacity:0}:host ::ng-deep .spinner-grow-sm{--bs-spinner-width: 1rem;--bs-spinner-height: 1rem}@media(prefers-reduced-motion:reduce){:host ::ng-deep .spinner-border,:host ::ng-deep .spinner-grow{--bs-spinner-animation-speed: 1.5s}}:host ::ng-deep .spinner-border{animation:.75s linear infinite spinner-border}:host ::ng-deep .spinner-grow{animation:.75s linear infinite spinner-grow}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: BsSpinnerComponent, isStandalone: true, selector: "bs-spinner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"[spinnerClass(), colorClass()]\" role=\"status\">\n    <span class=\"visually-hidden\">Loading...</span>\n</div>\n", styles: [":host ::ng-deep .spinner-grow,:host ::ng-deep .spinner-border{display:inline-block;flex-shrink:0;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}@keyframes spinner-border{to{transform:rotate(360deg)}}:host ::ng-deep .spinner-border{--bs-spinner-width: 2rem;--bs-spinner-height: 2rem;--bs-spinner-vertical-align: -.125em;--bs-spinner-border-width: .25em;--bs-spinner-animation-speed: .75s;--bs-spinner-animation-name: spinner-border;border:var(--bs-spinner-border-width) solid currentcolor;border-right-color:transparent}:host ::ng-deep .spinner-border-sm{--bs-spinner-width: 1rem;--bs-spinner-height: 1rem;--bs-spinner-border-width: .2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}:host ::ng-deep .spinner-grow{--bs-spinner-width: 2rem;--bs-spinner-height: 2rem;--bs-spinner-vertical-align: -.125em;--bs-spinner-animation-speed: .75s;--bs-spinner-animation-name: spinner-grow;background-color:currentcolor;opacity:0}:host ::ng-deep .spinner-grow-sm{--bs-spinner-width: 1rem;--bs-spinner-height: 1rem}@media(prefers-reduced-motion:reduce){:host ::ng-deep .spinner-border,:host ::ng-deep .spinner-grow{--bs-spinner-animation-speed: 1.5s}}:host ::ng-deep .spinner-border{animation:.75s linear infinite spinner-border}:host ::ng-deep .spinner-grow{animation:.75s linear infinite spinner-grow}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-spinner', standalone: true, imports: [AsyncPipe], template: "<div [class]=\"[spinnerClass$ | async, colorClass$ | async]\" role=\"status\">\n    <span class=\"visually-hidden\">Loading...</span>\n</div>", styles: [":host ::ng-deep .spinner-grow,:host ::ng-deep .spinner-border{display:inline-block;flex-shrink:0;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}@keyframes spinner-border{to{transform:rotate(360deg)}}:host ::ng-deep .spinner-border{--bs-spinner-width: 2rem;--bs-spinner-height: 2rem;--bs-spinner-vertical-align: -.125em;--bs-spinner-border-width: .25em;--bs-spinner-animation-speed: .75s;--bs-spinner-animation-name: spinner-border;border:var(--bs-spinner-border-width) solid currentcolor;border-right-color:transparent}:host ::ng-deep .spinner-border-sm{--bs-spinner-width: 1rem;--bs-spinner-height: 1rem;--bs-spinner-border-width: .2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}:host ::ng-deep .spinner-grow{--bs-spinner-width: 2rem;--bs-spinner-height: 2rem;--bs-spinner-vertical-align: -.125em;--bs-spinner-animation-speed: .75s;--bs-spinner-animation-name: spinner-grow;background-color:currentcolor;opacity:0}:host ::ng-deep .spinner-grow-sm{--bs-spinner-width: 1rem;--bs-spinner-height: 1rem}@media(prefers-reduced-motion:reduce){:host ::ng-deep .spinner-border,:host ::ng-deep .spinner-grow{--bs-spinner-animation-speed: 1.5s}}:host ::ng-deep .spinner-border{animation:.75s linear infinite spinner-border}:host ::ng-deep .spinner-grow{animation:.75s linear infinite spinner-grow}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { type: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'bs-spinner', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"[spinnerClass(), colorClass()]\" role=\"status\">\n    <span class=\"visually-hidden\">Loading...</span>\n</div>\n", styles: [":host ::ng-deep .spinner-grow,:host ::ng-deep .spinner-border{display:inline-block;flex-shrink:0;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}@keyframes spinner-border{to{transform:rotate(360deg)}}:host ::ng-deep .spinner-border{--bs-spinner-width: 2rem;--bs-spinner-height: 2rem;--bs-spinner-vertical-align: -.125em;--bs-spinner-border-width: .25em;--bs-spinner-animation-speed: .75s;--bs-spinner-animation-name: spinner-border;border:var(--bs-spinner-border-width) solid currentcolor;border-right-color:transparent}:host ::ng-deep .spinner-border-sm{--bs-spinner-width: 1rem;--bs-spinner-height: 1rem;--bs-spinner-border-width: .2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}:host ::ng-deep .spinner-grow{--bs-spinner-width: 2rem;--bs-spinner-height: 2rem;--bs-spinner-vertical-align: -.125em;--bs-spinner-animation-speed: .75s;--bs-spinner-animation-name: spinner-grow;background-color:currentcolor;opacity:0}:host ::ng-deep .spinner-grow-sm{--bs-spinner-width: 1rem;--bs-spinner-height: 1rem}@media(prefers-reduced-motion:reduce){:host ::ng-deep .spinner-border,:host ::ng-deep .spinner-grow{--bs-spinner-animation-speed: 1.5s}}:host ::ng-deep .spinner-border{animation:.75s linear infinite spinner-border}:host ::ng-deep .spinner-grow{animation:.75s linear infinite spinner-grow}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/mintplayer-ng-bootstrap-spinner.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mintplayer-ng-bootstrap-spinner.mjs","sources":["../../../../libs/mintplayer-ng-bootstrap/spinner/src/spinner.component.ts","../../../../libs/mintplayer-ng-bootstrap/spinner/src/spinner.component.html","../../../../libs/mintplayer-ng-bootstrap/spinner/mintplayer-ng-bootstrap-spinner.ts"],"sourcesContent":["import { ~~AsyncPipe~~ ~~} from '@angular/common';\nimport {~~ Component, ~~Input~~, ~~OnInit~~ } from '@angular/core';\nimport { Color } from '@mintplayer/ng-bootstrap';\~~nimport { BehaviorSubject, map, Observable } from 'rxjs';\~~n\n@Component({\n selector: 'bs-spinner',\n templateUrl: './spinner.component.html',\n styleUrls: ['./spinner.component.scss'],\n standalone: true,\n ~~imports~~: ~~[AsyncPipe]~~,\n})\nexport class BsSpinnerComponent ~~implements OnInit~~ {\n ~~constructor() {\n this.spinnerClass$ = this.type$\n .pipe(map((type) => `spinner-${type}`));\n this.colorClass$ = this.color$\n .pipe(map((type) => `text-${this.~~colors~~[type]}`));\n }\n\n spinnerClass$:~~ ~~Observable<string>;\n colorClass$: Observable<string>;\n colors~~ = Color;\n\n ~~ngOnInit(): void {}\n\n //#region Type\n~~ type$ = ~~new BehaviorSubject~~<'border' \| 'grow'>('border');\n ~~public~~ ~~get~~ ~~type~~() ~~{\n return this.type$.value~~;\n }\n ~~@Input()~~ ~~public~~ ~~set type~~(~~value:~~ ~~'border'~~ ~~\| 'grow')~~ {\n this.type~~$.next~~(~~value~~)~~;\n~~ }~~\n //#endregion\n //#region Color\n color$ = new BehaviorSubject<Color>(Color.dark~~);\n ~~public~~ ~~get~~ ~~color~~(~~) {\n return this.color$.value;\n }\n @Input~~() ~~public~~ ~~set color(value: Color)~~ {\n this.color~~$.next~~(~~value~~);\n }\n ~~//#endregion\n}\n~~","<div [class]=\"[spinnerClass~~$ \| async~~, colorClass~~$ \| async~~]\" role=\"status\">\n <span class=\"visually-hidden\">Loading...</span>\n</div>","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"~~;;;;;;MAYa~~,kBAAkB,CAAA;~~AAC7B~~,IAAA,WAAA,GAAA;~~QASA~~,IAAA,CAAA,MAAM,GAAG,KAAK~~;;AAKd~~,QAAA,IAAA,CAAA,~~KAAK~~,GAAG,~~IAAI~~,~~eAAe,~~CAAoB,QAAQ,~~CAAC;;;QASxD~~,IAAA,CAAA,~~MAAM~~,GAAG,~~IAAI~~,~~eAAe,~~CAAQ,KAAK,CAAC,IAAI,~~CAAC~~;~~AAtB7C~~,QAAA,~~IAAI~~,~~CAAC~~,~~aAAa~~,GAAG,~~IAAI~~,CAAC~~;AACvB~~,~~aAAA~~,~~IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,~~CAAA,QAAA,EAAW,IAAI,~~CAAA,CAAE,~~CAAC,~~CAAC;AACzC,QAAA,~~IAAI,~~CAAC~~,~~WAAW~~,~~GAAG~~,~~IAAI,CAAC~~;~~AACrB~~,~~aAAA~~,~~IAAI~~,~~CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,~~CAAA,~~KAAA~~,~~EAAQ~~,~~IAAI~~,CAAC,MAAM,~~CAAC~~,IAAI,CAAC,~~CAAA~~,~~CAAE,~~CAAC,~~CAAC;IACrD;AAMA,IAAA,QAAQ,KAAU;AAIlB,IAAA,IAAW,~~IAAI,~~GAAA;AACb,QAAA,OAAO,IAAI,~~CAAC,KAAK,~~CAAC~~,~~KAAK;IACzB;IACA,IAAoB,IAAI,~~CAAC,~~KAAwB~~,~~EAAA;AAC/C~~,~~QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC~~;~~IACxB;AAIA~~,IAAA~~,IAAW,KAAK,GAAA~~;~~AACd~~,~~QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK;IAC1B;IACA,IAAoB,KAAK,CAAC,KAAY,EAAA;AACpC,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;IACzB;8GA9BW,~~kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;~~kGAAlB~~,~~kBAAkB~~,~~EAAA~~,~~YAAA~~,~~EAAA~~,IAAA,~~EAAA~~,~~QAAA,~~EAAA,~~YAAA~~,~~EAAA~~,~~MAAA~~,EAAA,~~EAAA~~,~~IAAA,~~EAAA,~~MAAA~~,EAAA,~~KAAA,EAAA,~~OAAA,EAAA,~~EAAA,~~QAAA,EAAA,~~EAAA~~,EAAA,~~QAAA,ECZ~~/B~~,+IAEM~~,EAAA,MAAA,EAAA,CAAA,09CAAA,CAAA,EAAA,~~YAAA~~,EAAA,CAAA,~~EAAA~~,~~IAAA~~,~~EAAA,~~MAAA,EAAA,~~IAAA,EDQM,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,~~CAAA,~~EAAA,~~CAAA~~,CAAA~~;;~~2FAER~~,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,UAAA,EAGV,IAAI,EAAA,~~OAAA~~,~~EACP~~,CAAC,~~SAAS~~,~~CAAC,~~EAAA,QAAA,EAAA~~,+IAAA~~,EAAA,MAAA,EAAA,CAAA,09CAAA,CAAA,EAAA~~;;sBAqBnB;;sBASA~~;;;~~AExCH~~;;AAEG;;;;"}
1	+ {"version":3,"file":"mintplayer-ng-bootstrap-spinner.mjs","sources":["../../../../libs/mintplayer-ng-bootstrap/spinner/src/spinner.component.ts","../../../../libs/mintplayer-ng-bootstrap/spinner/src/spinner.component.html","../../../../libs/mintplayer-ng-bootstrap/spinner/mintplayer-ng-bootstrap-spinner.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { Color } from '@mintplayer/ng-bootstrap';\n\n@Component({\n selector: 'bs-spinner',\n templateUrl: './spinner.component.html',\n styleUrls: ['./spinner.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BsSpinnerComponent {\n colors = Color;\n\n type = input<'border' \| 'grow'>('border');\n color = input<Color>(Color.dark);\n\n spinnerClass = computed(() => `spinner-${this.type()}`);\n colorClass = computed(() => `text-${this.colors[this.color()]}`);\n}\n","<div [class]=\"[spinnerClass(), colorClass()]\" role=\"status\">\n <span class=\"visually-hidden\">Loading...</span>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;MAUa,kBAAkB,CAAA;AAP/B,IAAA,WAAA,GAAA;QAQE,IAAA,CAAA,MAAM,GAAG,KAAK;AAEd,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAoB,QAAQ,gDAAC;AACzC,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAQ,KAAK,CAAC,IAAI,iDAAC;AAEhC,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAA,QAAA,EAAW,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,wDAAC;AACvD,QAAA,IAAA,CAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,QAAQ,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA,CAAE,sDAAC;AACjE,IAAA;8GARY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,+TCV/B,mIAGA,EAAA,MAAA,EAAA,CAAA,09CAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDOa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,UAAA,EAGV,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,mIAAA,EAAA,MAAA,EAAA,CAAA,09CAAA,CAAA,EAAA;;;AERjD;;AAEG;;;;"}

package/fesm2022/mintplayer-ng-bootstrap-splitter.mjs CHANGED Viewed

@@ -1,13 +1,10 @@
 import * as i0 from '@angular/core';
-import { Component, Pipe, HostListener, HostBinding, ViewChildren, ContentChildren, Input, NgModule } from '@angular/core';
-import * as i3 from '@angular/common';
+import { inject, ElementRef, ChangeDetectionStrategy, Component, Pipe, input, signal, computed, HostListener, HostBinding, ViewChildren, ContentChildren, NgModule } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
 import * as i1 from '@angular/cdk/portal';
 import { DomPortal, PortalModule } from '@angular/cdk/portal';
 import * as i2 from '@mintplayer/ng-bootstrap/user-agent';
 import { BsUserAgentDirective } from '@mintplayer/ng-bootstrap/user-agent';
-import { BehaviorSubject, map, combineLatest, take } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 var EDragOperation;
 (function (EDragOperation) {
@@ -16,19 +13,19 @@ var EDragOperation;
 })(EDragOperation || (EDragOperation = {}));
 class BsSplitPanelComponent {
-    constructor(element) {
-        this.element = element;
+    constructor() {
+        this.element = inject(ElementRef);
     }
     ngAfterViewInit() {
         setTimeout(() => this.portal = new DomPortal(this.element.nativeElement), 10);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSplitPanelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BsSplitPanelComponent, isStandalone: false, selector: "bs-split-panel", ngImport: i0, template: "<div class=\"w-100 h-100\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block;height:100%}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSplitPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BsSplitPanelComponent, isStandalone: false, selector: "bs-split-panel", ngImport: i0, template: "<div class=\"w-100 h-100\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSplitPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-split-panel', standalone: false, template: "<div class=\"w-100 h-100\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block;height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+            args: [{ selector: 'bs-split-panel', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-100 h-100\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block;height:100%}\n"] }]
+        }] });
 class BsElementAtPipe {
     transform(value, index) {
@@ -51,31 +48,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         }] });
 class BsSplitterComponent {
-    constructor(destroy) {
-        this.destroy = destroy;
-        //#region Orientation
-        this.orientation$ = new BehaviorSubject('horizontal');
-        //#endregion
-        this.previewSizes$ = new BehaviorSubject(null);
-        this.panels$ = new BehaviorSubject([]);
+    constructor() {
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        this.previewSizes = signal(null, ...(ngDevMode ? [{ debugName: "previewSizes" }] : []));
+        this.panels = signal([], ...(ngDevMode ? [{ debugName: "panels" }] : []));
+        this.isResizing = signal(false, ...(ngDevMode ? [{ debugName: "isResizing" }] : []));
+        this.touchedDivider = signal(null, ...(ngDevMode ? [{ debugName: "touchedDivider" }] : []));
         this.classes = true;
-        this.isResizing$ = new BehaviorSubject(false);
-        this.touchedDivider$ = new BehaviorSubject(null);
-        this.operation = null;
-        this.directionClass$ = this.orientation$.pipe(map((orientation) => {
-            switch (orientation) {
+        this.directionClass = computed(() => {
+            switch (this.orientation()) {
                 case 'horizontal': return 'flex-row';
                 case 'vertical': return 'flex-column';
             }
-        }));
-        this.splitterClass$ = this.orientation$.pipe(map((orientation) => {
-            switch (orientation) {
+        }, ...(ngDevMode ? [{ debugName: "directionClass" }] : []));
+        this.splitterClass = computed(() => {
+            switch (this.orientation()) {
                 case 'horizontal': return 'split-hor';
                 case 'vertical': return 'split-ver';
             }
-        }));
-        this.widthStyles$ = combineLatest([this.orientation$, this.previewSizes$, this.panels$])
-            .pipe(map(([orientation, previewSizes, panels]) => {
+        }, ...(ngDevMode ? [{ debugName: "splitterClass" }] : []));
+        this.widthStyles = computed(() => {
+            const orientation = this.orientation();
+            const previewSizes = this.previewSizes();
+            const panels = this.panels();
             switch (orientation) {
                 case 'horizontal':
                     if (previewSizes) {
@@ -89,14 +84,16 @@ class BsSplitterComponent {
                         });
                     }
                     else {
-                        return Array(panels.length).map((v, i) => '100%');
+                        return Array(panels.length).fill('100%');
                     }
                 case 'vertical':
                     return null;
             }
-        }));
-        this.heightStyles$ = combineLatest([this.orientation$, this.previewSizes$, this.panels$])
-            .pipe(map(([orientation, previewSizes, panels]) => {
+        }, ...(ngDevMode ? [{ debugName: "widthStyles" }] : []));
+        this.heightStyles = computed(() => {
+            const orientation = this.orientation();
+            const previewSizes = this.previewSizes();
+            const panels = this.panels();
             switch (orientation) {
                 case 'horizontal':
                     return null;
@@ -112,26 +109,21 @@ class BsSplitterComponent {
                         });
                     }
                     else {
-                        return Array(panels.length).map((v, i) => '100%');
+                        return Array(panels.length).fill('100%');
                     }
             }
-        }));
-    }
-    get orientation() {
-        return this.orientation$.value;
-    }
-    set orientation(value) {
-        this.orientation$.next(value);
+        }, ...(ngDevMode ? [{ debugName: "heightStyles" }] : []));
+        this.operation = null;
     }
-    set panels(value) {
-        this.panels$.next(value.toArray());
+    set panelsList(value) {
+        this.panels.set(value.toArray());
     }
     computeSizes() {
         if (typeof window !== 'undefined') {
             const sizes = this.splitPanels
                 .map((sp) => {
                 const styles = window.getComputedStyle(sp.nativeElement);
-                switch (this.orientation) {
+                switch (this.orientation()) {
                     case 'horizontal': return styles.width;
                     case 'vertical': return styles.height;
                 }
@@ -151,13 +143,14 @@ class BsSplitterComponent {
     startResizeTouch(ev, indexBefore, indexAfter, divider) {
         if (ev.cancelable) {
             ev.preventDefault();
-            this.touchedDivider$.next(divider);
+            ev.stopPropagation();
+            this.touchedDivider.set(divider);
             this.startResize(indexBefore, indexAfter, { x: ev.touches[0].clientX, y: ev.touches[0].clientY });
         }
     }
     startResize(indexBefore, indexAfter, pt) {
         const sizes = this.computeSizes();
-        this.previewSizes$.next(sizes);
+        this.previewSizes.set(sizes);
         this.operation = {
             operation: EDragOperation.resizeSplitter,
             startPosition: pt,
@@ -165,12 +158,16 @@ class BsSplitterComponent {
             indexBefore,
             indexAfter,
         };
-        this.isResizing$.next(true);
+        this.isResizing.set(true);
     }
     onMouseMove(ev) {
         this.onResizeMove({ x: ev.clientX, y: ev.clientY });
     }
     onTouchMove(ev) {
+        if (this.operation) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
         this.onResizeMove({ x: ev.touches[0].clientX, y: ev.touches[0].clientY });
     }
     onResizeMove(pt) {
@@ -178,28 +175,23 @@ class BsSplitterComponent {
             switch (this.operation.operation) {
                 case EDragOperation.resizeSplitter:
                     {
-                        combineLatest([this.orientation$])
-                            .pipe(take(1), takeUntilDestroyed(this.destroy))
-                            .subscribe(([orientation]) => {
-                            if (this.operation) {
-                                switch (orientation) {
-                                    case 'horizontal':
-                                        const deltaX = pt.x - this.operation.startPosition.x;
-                                        const sx = Array.from(this.operation.sizes);
-                                        sx[this.operation.indexBefore] = this.operation.sizes[this.operation.indexBefore] + deltaX;
-                                        sx[this.operation.indexAfter] = this.operation.sizes[this.operation.indexAfter] - deltaX;
-                                        this.previewSizes$.next(sx);
-                                        break;
-                                    case 'vertical':
-                                        const deltaY = pt.y - this.operation.startPosition.y;
-                                        const sy = Array.from(this.operation.sizes);
-                                        sy[this.operation.indexBefore] = this.operation.sizes[this.operation.indexBefore] + deltaY;
-                                        sy[this.operation.indexAfter] = this.operation.sizes[this.operation.indexAfter] - deltaY;
-                                        this.previewSizes$.next(sy);
-                                        break;
-                                }
-                            }
-                        });
+                        const orientation = this.orientation();
+                        switch (orientation) {
+                            case 'horizontal':
+                                const deltaX = pt.x - this.operation.startPosition.x;
+                                const sx = Array.from(this.operation.sizes);
+                                sx[this.operation.indexBefore] = this.operation.sizes[this.operation.indexBefore] + deltaX;
+                                sx[this.operation.indexAfter] = this.operation.sizes[this.operation.indexAfter] - deltaX;
+                                this.previewSizes.set(sx);
+                                break;
+                            case 'vertical':
+                                const deltaY = pt.y - this.operation.startPosition.y;
+                                const sy = Array.from(this.operation.sizes);
+                                sy[this.operation.indexBefore] = this.operation.sizes[this.operation.indexBefore] + deltaY;
+                                sy[this.operation.indexAfter] = this.operation.sizes[this.operation.indexAfter] - deltaY;
+                                this.previewSizes.set(sy);
+                                break;
+                        }
                     }
                     break;
             }
@@ -209,22 +201,24 @@ class BsSplitterComponent {
         this.onResizeUp();
     }
     onTouchEnd(ev) {
-        this.touchedDivider$.next(null);
+        if (this.operation) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+        this.touchedDivider.set(null);
         this.onResizeUp();
     }
     onResizeUp() {
-        this.isResizing$.next(false);
+        this.isResizing.set(false);
         this.operation = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSplitterComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsSplitterComponent, isStandalone: false, selector: "bs-splitter", inputs: { orientation: "orientation" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)" }, properties: { "class.w-100": "this.classes", "class.h-100": "this.classes", "class.d-flex": "this.classes" } }, queries: [{ propertyName: "panels", predicate: BsSplitPanelComponent }], viewQueries: [{ propertyName: "splitPanels", predicate: ["splitPanel"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex w-100 root\" [class]=\"[directionClass$ | async, splitterClass$ | async]\" bsUserAgent>\n    <ng-content></ng-content>\n    @for (panel of (panels$ | async); let index = $index; let last = $last; track panel) {\n        @let widthStyles = widthStyles$ | async;\n        @let heightStyles = heightStyles$ | async;\n        \n        <!--  [style.width.%]=\"100\" [style.height.%]=\"100\" -->\n        <div class=\"split-panel overflow-hidden\" [class.flex-none]=\"isResizing$ | async\" #splitPanel [style.width]=\"widthStyles | bsElementAt:index\" [style.height]=\"heightStyles | bsElementAt:index\">\n            <ng-template [cdkPortalOutlet]=\"panel.portal\"></ng-template>\n        </div>\n        @if (!last) {\n            <div class=\"divider\" bsUserAgent [class.hover]=\"(touchedDivider$ | async) === divider\" #divider (mousedown)=\"startResizeMouse($event, index, index + 1)\" (touchstart)=\"startResizeTouch($event, index, index + 1, divider)\" (touchmove)=\"onTouchMove($event)\" (touchend)=\"onTouchEnd($event)\"></div>\n        }\n    }\n</div>", styles: [".root{--thumb-margin: 3px}.root.os-android{--thumb-margin: 20px}.split-panel{flex-grow:1}.divider{flex-shrink:0;transition:background-color .15s ease-in-out;z-index:3}.divider:before{background-position:center center;background-repeat:no-repeat}.divider:not(.os-android):hover:before{background-color:#1389fd;border-radius:4px}.divider.os-android.hover:before{background-color:#1389fd;border-radius:4px}.divider:before{content:\"\";display:block;background-color:#eee}.split-hor>.divider{width:calc(8px + 2 * var(--thumb-margin));height:100%;cursor:col-resize;border-left:var(--thumb-margin) solid transparent;border-right:var(--thumb-margin) solid transparent}.split-hor>.divider:before{height:100%;width:8px;margin:0 auto;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==)}.split-hor>.split-panel:not(:first-child){margin-left:calc(-1 * var(--thumb-margin))}.split-hor>.split-panel:not(:last-child){margin-right:calc(-1 * var(--thumb-margin))}.split-ver>.divider{width:100%;height:calc(8px + 2 * var(--thumb-margin));cursor:row-resize;border-top:var(--thumb-margin) solid transparent;border-bottom:var(--thumb-margin) solid transparent}.split-ver>.divider:before{height:8px;margin:auto 0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC)}.split-ver>.split-panel:not(:first-child){margin-top:calc(-1 * var(--thumb-margin))}.split-ver>.split-panel:not(:last-child){margin-bottom:calc(-1 * var(--thumb-margin))}.flex-none{flex:none}\n"], dependencies: [{ kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i2.BsUserAgentDirective, selector: "[bsUserAgent]", outputs: ["detected"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: BsElementAtPipe, name: "bsElementAt" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsSplitterComponent, isStandalone: false, selector: "bs-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)" }, properties: { "class.w-100": "this.classes", "class.h-100": "this.classes", "class.d-flex": "this.classes" } }, queries: [{ propertyName: "panelsList", predicate: BsSplitPanelComponent }], viewQueries: [{ propertyName: "splitPanels", predicate: ["splitPanel"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex w-100 root\" [class]=\"[directionClass(), splitterClass()]\" bsUserAgent>\n    <ng-content></ng-content>\n    @for (panel of panels(); let index = $index; let last = $last; track panel) {\n        @let widthStylesValue = widthStyles();\n        @let heightStylesValue = heightStyles();\n\n        <div class=\"split-panel overflow-hidden\" [class.flex-none]=\"isResizing()\" #splitPanel [style.width]=\"widthStylesValue | bsElementAt:index\" [style.height]=\"heightStylesValue | bsElementAt:index\">\n            <ng-template [cdkPortalOutlet]=\"panel.portal\"></ng-template>\n        </div>\n        @if (!last) {\n            <div class=\"divider\" bsUserAgent [class.hover]=\"touchedDivider() === divider\" #divider (mousedown)=\"startResizeMouse($event, index, index + 1)\" (touchstart)=\"startResizeTouch($event, index, index + 1, divider)\" (touchmove)=\"onTouchMove($event)\" (touchend)=\"onTouchEnd($event)\"></div>\n        }\n    }\n</div>\n", styles: [".root{--thumb-margin: 3px}.root.os-android{--thumb-margin: 20px}.split-panel{flex-grow:1}.divider{flex-shrink:0;transition:background-color .15s ease-in-out;z-index:3}.divider:before{background-position:center center;background-repeat:no-repeat}.divider:not(.os-android):hover:before{background-color:#1389fd;border-radius:4px}.divider.os-android.hover:before{background-color:#1389fd;border-radius:4px}.divider:before{content:\"\";display:block;background-color:#eee}.split-hor>.divider{width:calc(8px + 2 * var(--thumb-margin));height:100%;cursor:col-resize;border-left:var(--thumb-margin) solid transparent;border-right:var(--thumb-margin) solid transparent}.split-hor>.divider:before{height:100%;width:8px;margin:0 auto;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==)}.split-hor>.split-panel:not(:first-child){margin-left:calc(-1 * var(--thumb-margin))}.split-hor>.split-panel:not(:last-child){margin-right:calc(-1 * var(--thumb-margin))}.split-ver>.divider{width:100%;height:calc(8px + 2 * var(--thumb-margin));cursor:row-resize;border-top:var(--thumb-margin) solid transparent;border-bottom:var(--thumb-margin) solid transparent}.split-ver>.divider:before{height:8px;margin:auto 0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC)}.split-ver>.split-panel:not(:first-child){margin-top:calc(-1 * var(--thumb-margin))}.split-ver>.split-panel:not(:last-child){margin-bottom:calc(-1 * var(--thumb-margin))}.flex-none{flex:none}\n"], dependencies: [{ kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i2.BsUserAgentDirective, selector: "[bsUserAgent]", outputs: ["detected"] }, { kind: "pipe", type: BsElementAtPipe, name: "bsElementAt" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSplitterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-splitter', standalone: false, template: "<div class=\"d-flex w-100 root\" [class]=\"[directionClass$ | async, splitterClass$ | async]\" bsUserAgent>\n    <ng-content></ng-content>\n    @for (panel of (panels$ | async); let index = $index; let last = $last; track panel) {\n        @let widthStyles = widthStyles$ | async;\n        @let heightStyles = heightStyles$ | async;\n        \n        <!--  [style.width.%]=\"100\" [style.height.%]=\"100\" -->\n        <div class=\"split-panel overflow-hidden\" [class.flex-none]=\"isResizing$ | async\" #splitPanel [style.width]=\"widthStyles | bsElementAt:index\" [style.height]=\"heightStyles | bsElementAt:index\">\n            <ng-template [cdkPortalOutlet]=\"panel.portal\"></ng-template>\n        </div>\n        @if (!last) {\n            <div class=\"divider\" bsUserAgent [class.hover]=\"(touchedDivider$ | async) === divider\" #divider (mousedown)=\"startResizeMouse($event, index, index + 1)\" (touchstart)=\"startResizeTouch($event, index, index + 1, divider)\" (touchmove)=\"onTouchMove($event)\" (touchend)=\"onTouchEnd($event)\"></div>\n        }\n    }\n</div>", styles: [".root{--thumb-margin: 3px}.root.os-android{--thumb-margin: 20px}.split-panel{flex-grow:1}.divider{flex-shrink:0;transition:background-color .15s ease-in-out;z-index:3}.divider:before{background-position:center center;background-repeat:no-repeat}.divider:not(.os-android):hover:before{background-color:#1389fd;border-radius:4px}.divider.os-android.hover:before{background-color:#1389fd;border-radius:4px}.divider:before{content:\"\";display:block;background-color:#eee}.split-hor>.divider{width:calc(8px + 2 * var(--thumb-margin));height:100%;cursor:col-resize;border-left:var(--thumb-margin) solid transparent;border-right:var(--thumb-margin) solid transparent}.split-hor>.divider:before{height:100%;width:8px;margin:0 auto;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==)}.split-hor>.split-panel:not(:first-child){margin-left:calc(-1 * var(--thumb-margin))}.split-hor>.split-panel:not(:last-child){margin-right:calc(-1 * var(--thumb-margin))}.split-ver>.divider{width:100%;height:calc(8px + 2 * var(--thumb-margin));cursor:row-resize;border-top:var(--thumb-margin) solid transparent;border-bottom:var(--thumb-margin) solid transparent}.split-ver>.divider:before{height:8px;margin:auto 0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC)}.split-ver>.split-panel:not(:first-child){margin-top:calc(-1 * var(--thumb-margin))}.split-ver>.split-panel:not(:last-child){margin-bottom:calc(-1 * var(--thumb-margin))}.flex-none{flex:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { orientation: [{
-                type: Input
-            }], panels: [{
+            args: [{ selector: 'bs-splitter', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex w-100 root\" [class]=\"[directionClass(), splitterClass()]\" bsUserAgent>\n    <ng-content></ng-content>\n    @for (panel of panels(); let index = $index; let last = $last; track panel) {\n        @let widthStylesValue = widthStyles();\n        @let heightStylesValue = heightStyles();\n\n        <div class=\"split-panel overflow-hidden\" [class.flex-none]=\"isResizing()\" #splitPanel [style.width]=\"widthStylesValue | bsElementAt:index\" [style.height]=\"heightStylesValue | bsElementAt:index\">\n            <ng-template [cdkPortalOutlet]=\"panel.portal\"></ng-template>\n        </div>\n        @if (!last) {\n            <div class=\"divider\" bsUserAgent [class.hover]=\"touchedDivider() === divider\" #divider (mousedown)=\"startResizeMouse($event, index, index + 1)\" (touchstart)=\"startResizeTouch($event, index, index + 1, divider)\" (touchmove)=\"onTouchMove($event)\" (touchend)=\"onTouchEnd($event)\"></div>\n        }\n    }\n</div>\n", styles: [".root{--thumb-margin: 3px}.root.os-android{--thumb-margin: 20px}.split-panel{flex-grow:1}.divider{flex-shrink:0;transition:background-color .15s ease-in-out;z-index:3}.divider:before{background-position:center center;background-repeat:no-repeat}.divider:not(.os-android):hover:before{background-color:#1389fd;border-radius:4px}.divider.os-android.hover:before{background-color:#1389fd;border-radius:4px}.divider:before{content:\"\";display:block;background-color:#eee}.split-hor>.divider{width:calc(8px + 2 * var(--thumb-margin));height:100%;cursor:col-resize;border-left:var(--thumb-margin) solid transparent;border-right:var(--thumb-margin) solid transparent}.split-hor>.divider:before{height:100%;width:8px;margin:0 auto;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==)}.split-hor>.split-panel:not(:first-child){margin-left:calc(-1 * var(--thumb-margin))}.split-hor>.split-panel:not(:last-child){margin-right:calc(-1 * var(--thumb-margin))}.split-ver>.divider{width:100%;height:calc(8px + 2 * var(--thumb-margin));cursor:row-resize;border-top:var(--thumb-margin) solid transparent;border-bottom:var(--thumb-margin) solid transparent}.split-ver>.divider:before{height:8px;margin:auto 0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC)}.split-ver>.split-panel:not(:first-child){margin-top:calc(-1 * var(--thumb-margin))}.split-ver>.split-panel:not(:last-child){margin-bottom:calc(-1 * var(--thumb-margin))}.flex-none{flex:none}\n"] }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], panelsList: [{
                 type: ContentChildren,
                 args: [BsSplitPanelComponent]
             }], splitPanels: [{