@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-splitter-deprecated.mjs

@@ -0,0 +1,591 @@
+import { coerceNumberProperty, coerceCssPixelValue, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Platform } from '@angular/cdk/platform';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Renderer2, Input, Directive, ChangeDetectorRef, NgZone, output, viewChildren, viewChild, ContentChildren, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { KBQ_WINDOW } from '@koobiq/components/core';
+import { Subscription } from 'rxjs';
+import { KbqIconModule } from '@koobiq/components/icon';
+
+/**
+ * @deprecated The mouse-only, `flex-basis` based splitter. Superseded by the rewritten
+ * `@koobiq/components/splitter`, which adds panel constraints, collapsing, snapping, keyboard
+ * support and the `separator` accessibility pattern. Will be removed in 22.0.0 — an
+ * `ng update` migration rewrites `@koobiq/components/splitter` imports of this API to
+ * `@koobiq/components/splitter/deprecated` automatically.
+ */
+var Direction;
+(function (Direction) {
+    Direction["Horizontal"] = "horizontal";
+    Direction["Vertical"] = "vertical";
+})(Direction || (Direction = {}));
+/**
+ * @deprecated The mouse-only, `flex-basis` based splitter. Superseded by the rewritten
+ * `@koobiq/components/splitter`, which adds panel constraints, collapsing, snapping, keyboard
+ * support and the `separator` accessibility pattern. Will be removed in 22.0.0 — an
+ * `ng update` migration rewrites `@koobiq/components/splitter` imports of this API to
+ * `@koobiq/components/splitter/deprecated` automatically.
+ */
+class KbqGutterDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this._direction = Direction.Vertical;
+        this._order = 0;
+        this._size = 6;
+        this.dragged = false;
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get direction() {
+        return this._direction;
+    }
+    set direction(direction) {
+        this._direction = direction;
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get order() {
+        return this._order;
+    }
+    set order(order) {
+        this._order = coerceNumberProperty(order);
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get size() {
+        return this._size;
+    }
+    set size(size) {
+        this._size = coerceNumberProperty(size);
+    }
+    get isVertical() {
+        return this._direction === Direction.Vertical;
+    }
+    ngOnInit() {
+        this.setStyle("flex-basis" /* StyleProperty.FlexBasis */, coerceCssPixelValue(this.size));
+        this.setStyle(this.isVertical ? "height" /* StyleProperty.Height */ : "width" /* StyleProperty.Width */, coerceCssPixelValue(this.size));
+        this.setStyle("order" /* StyleProperty.Order */, this.order);
+        if (!this.isVertical) {
+            this.setStyle("height" /* StyleProperty.Height */, '100%');
+        }
+        // fix IE issue with gutter icon. flex-direction is required for flex alignment options
+        this.setStyle("flex-direction" /* StyleProperty.FlexDirection */, this.isVertical ? 'row' : 'column');
+    }
+    getPosition() {
+        return {
+            x: this.elementRef.nativeElement.offsetLeft,
+            y: this.elementRef.nativeElement.offsetTop
+        };
+    }
+    setStyle(property, value) {
+        this.renderer.setStyle(this.elementRef.nativeElement, property, value);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqGutterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqGutterDirective, isStandalone: true, selector: "kbq-gutter", inputs: { direction: "direction", order: "order", size: "size" }, host: { listeners: { "mousedown": "dragged = true" }, properties: { "class.kbq-gutter_vertical": "isVertical", "class.kbq-gutter_dragged": "dragged" }, classAttribute: "kbq-gutter" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqGutterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbq-gutter',
+                    host: {
+                        class: 'kbq-gutter',
+                        '[class.kbq-gutter_vertical]': 'isVertical',
+                        '[class.kbq-gutter_dragged]': 'dragged',
+                        '(mousedown)': 'dragged = true'
+                    }
+                }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }], order: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+/**
+ * @deprecated The mouse-only, `flex-basis` based splitter. Superseded by the rewritten
+ * `@koobiq/components/splitter`, which adds panel constraints, collapsing, snapping, keyboard
+ * support and the `separator` accessibility pattern. Will be removed in 22.0.0 — an
+ * `ng update` migration rewrites `@koobiq/components/splitter` imports of this API to
+ * `@koobiq/components/splitter/deprecated` automatically.
+ */
+class KbqGutterGhostDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this._x = 0;
+        this._y = 0;
+        this._direction = Direction.Vertical;
+        this._size = 6;
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get x() {
+        return this._x;
+    }
+    set x(x) {
+        this._x = x;
+        this.setStyle("left" /* StyleProperty.Left */, coerceCssPixelValue(x));
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get y() {
+        return this._y;
+    }
+    set y(y) {
+        this._y = y;
+        this.setStyle("top" /* StyleProperty.Top */, coerceCssPixelValue(y));
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get direction() {
+        return this._direction;
+    }
+    set direction(direction) {
+        this._direction = direction;
+        this.updateDimensions();
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get size() {
+        return this._size;
+    }
+    set size(size) {
+        this._size = coerceNumberProperty(size);
+        this.updateDimensions();
+    }
+    get isVertical() {
+        return this.direction === Direction.Vertical;
+    }
+    updateDimensions() {
+        this.setStyle(this.isVertical ? "width" /* StyleProperty.Width */ : "height" /* StyleProperty.Height */, '100%');
+        this.setStyle(this.isVertical ? "height" /* StyleProperty.Height */ : "width" /* StyleProperty.Width */, coerceCssPixelValue(this.size));
+    }
+    setStyle(property, value) {
+        this.renderer.setStyle(this.elementRef.nativeElement, property, value);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqGutterGhostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqGutterGhostDirective, isStandalone: true, selector: "kbq-gutter-ghost", inputs: { visible: "visible", x: "x", y: "y", direction: "direction", size: "size" }, host: { properties: { "class.kbq-gutter-ghost_vertical": "isVertical", "class.kbq-gutter-ghost_visible": "visible" }, classAttribute: "kbq-gutter-ghost" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqGutterGhostDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbq-gutter-ghost',
+                    host: {
+                        class: 'kbq-gutter-ghost',
+                        '[class.kbq-gutter-ghost_vertical]': 'isVertical',
+                        '[class.kbq-gutter-ghost_visible]': 'visible'
+                    }
+                }]
+        }], propDecorators: { visible: [{
+                type: Input
+            }], x: [{
+                type: Input
+            }], y: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+/**
+ * @deprecated The mouse-only, `flex-basis` based splitter. Superseded by the rewritten
+ * `@koobiq/components/splitter`, which adds panel constraints, collapsing, snapping, keyboard
+ * support and the `separator` accessibility pattern. Will be removed in 22.0.0 — an
+ * `ng update` migration rewrites `@koobiq/components/splitter` imports of this API to
+ * `@koobiq/components/splitter/deprecated` automatically.
+ */
+class KbqSplitterComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.ngZone = inject(NgZone);
+        this.renderer = inject(Renderer2);
+        this.gutterPositionChange = output();
+        this.areas = [];
+        this.gutters = viewChildren(KbqGutterDirective, ...(ngDevMode ? [{ debugName: "gutters" }] : /* istanbul ignore next */ []));
+        this.ghost = viewChild.required(KbqGutterGhostDirective);
+        this._isDragging = false;
+        this.areaPositionDivider = 2;
+        this.listeners = [];
+        this.areasChangeSubscription = Subscription.EMPTY;
+        this._hideGutters = false;
+        this._disabled = false;
+        this._useGhost = false;
+        this._gutterSize = 6;
+        this._resizing = false;
+        this.mapAndOrderArea = (area, index) => {
+            const order = index * this.areaPositionDivider;
+            area.setOrder(order);
+            return {
+                area,
+                index,
+                order,
+                initialSize: area.getSize()
+            };
+        };
+    }
+    get isDragging() {
+        return this._isDragging;
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get hideGutters() {
+        return this._hideGutters;
+    }
+    set hideGutters(value) {
+        this._hideGutters = coerceBooleanProperty(value);
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get direction() {
+        return this._direction;
+    }
+    set direction(direction) {
+        this._direction = direction;
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(disabled) {
+        this._disabled = coerceBooleanProperty(disabled);
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get useGhost() {
+        return this._useGhost;
+    }
+    set useGhost(useGhost) {
+        this._useGhost = coerceBooleanProperty(useGhost);
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get gutterSize() {
+        return this._gutterSize;
+    }
+    set gutterSize(gutterSize) {
+        const size = coerceNumberProperty(gutterSize);
+        this._gutterSize = size > 0 ? size : this.gutterSize;
+    }
+    get resizing() {
+        return this._resizing;
+    }
+    addArea(area) {
+        this.areas.push(this.mapAndOrderArea(area, this.areas.length));
+        this.changeDetectorRef.detectChanges();
+    }
+    ngOnInit() {
+        if (!this.direction) {
+            this.direction = Direction.Horizontal;
+        }
+        this.setStyle("flex-direction" /* StyleProperty.FlexDirection */, this.isVertical() ? 'column' : 'row');
+    }
+    ngAfterContentInit() {
+        this.areasChangeSubscription = this.areaRefs.changes.subscribe((data) => {
+            this.areas = data.map(this.mapAndOrderArea);
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.areasChangeSubscription.unsubscribe();
+    }
+    onMouseDown(event, leftAreaIndex, rightAreaIndex) {
+        if (this.disabled) {
+            return;
+        }
+        event.preventDefault();
+        const startPoint = {
+            x: event.screenX,
+            y: event.screenY
+        };
+        const leftArea = this.areas[leftAreaIndex];
+        const rightArea = this.areas[rightAreaIndex];
+        leftArea.initialSize = leftArea.area.getSize();
+        rightArea.initialSize = rightArea.area.getSize();
+        let currentGutter;
+        if (this.useGhost) {
+            const gutterOrder = leftAreaIndex * 2 + 1;
+            currentGutter = this.gutters().find((gutter) => gutter.order === gutterOrder);
+            if (currentGutter) {
+                const gutterPosition = currentGutter.getPosition();
+                const ghost = this.ghost();
+                ghost.direction = currentGutter.direction;
+                ghost.size = currentGutter.size;
+                ghost.x = gutterPosition.x;
+                ghost.y = gutterPosition.y;
+                ghost.visible = true;
+                this.setStyle("cursor" /* StyleProperty.Cursor */, currentGutter.direction === Direction.Vertical ? 'row-resize' : 'col-resize');
+            }
+        }
+        else {
+            this.areas.forEach((item) => {
+                const size = item.area.getSize();
+                item.area.disableFlex();
+                item.area.setSize(size);
+            });
+        }
+        this.listeners.push(this.renderer.listen('document', 'mouseup', () => this.onMouseUp(leftArea, rightArea, currentGutter)));
+        this.ngZone.runOutsideAngular(() => {
+            this.listeners.push(this.renderer.listen('document', 'mousemove', (e) => this.onMouseMove(e, startPoint, leftArea, rightArea, currentGutter)));
+        });
+        this._isDragging = true;
+    }
+    removeArea(area) {
+        let indexToRemove = -1;
+        this.areas.some((item, index) => {
+            if (item.area === area) {
+                indexToRemove = index;
+                return true;
+            }
+            return false;
+        });
+        if (indexToRemove === -1) {
+            return;
+        }
+        this.areas.splice(indexToRemove, 1);
+    }
+    isVertical() {
+        return this.direction === Direction.Vertical;
+    }
+    updateGutter() {
+        this.gutters().forEach((gutter) => {
+            if (gutter.dragged) {
+                gutter.dragged = false;
+                this.changeDetectorRef.detectChanges();
+            }
+        });
+    }
+    onMouseMove(event, startPoint, leftArea, rightArea, currentGutter) {
+        if (!this.isDragging || this.disabled) {
+            return;
+        }
+        const endPoint = {
+            x: event.screenX,
+            y: event.screenY
+        };
+        const offset = this.isVertical() ? startPoint.y - endPoint.y : startPoint.x - endPoint.x;
+        if (this.useGhost && currentGutter) {
+            const gutterPosition = currentGutter.getPosition();
+            const leftPos = leftArea.area.getPosition();
+            const rightPos = rightArea.area.getPosition();
+            const rightMin = rightArea.area.getMinSize() || 0;
+            const leftMin = leftArea.area.getMinSize() || 0;
+            const key = this.isVertical() ? 'y' : 'x';
+            const minPos = leftPos[key] - leftMin;
+            const maxPos = rightPos[key] + (rightArea.area.getSize() || 0) - rightMin - currentGutter.size;
+            const newPos = gutterPosition[key] - offset;
+            this.ghost()[key] = newPos < minPos ? minPos : Math.min(newPos, maxPos);
+        }
+        else {
+            this.resizeAreas(leftArea, rightArea, offset);
+        }
+    }
+    resizeAreas(leftArea, rightArea, sizeOffset) {
+        const newLeftAreaSize = leftArea.initialSize - sizeOffset;
+        const newRightAreaSize = rightArea.initialSize + sizeOffset;
+        const minLeftAreaSize = leftArea.area.getMinSize();
+        const minRightAreaSize = rightArea.area.getMinSize();
+        if (newLeftAreaSize < minLeftAreaSize || newRightAreaSize < minRightAreaSize) {
+            return;
+        }
+        else if (newLeftAreaSize <= 0) {
+            leftArea.area.setSize(0);
+            rightArea.area.setSize(rightArea.initialSize + leftArea.initialSize);
+        }
+        else if (newRightAreaSize <= 0) {
+            leftArea.area.setSize(rightArea.initialSize + leftArea.initialSize);
+            rightArea.area.setSize(0);
+        }
+        else {
+            leftArea.area.setSize(newLeftAreaSize);
+            rightArea.area.setSize(newRightAreaSize);
+        }
+    }
+    onMouseUp(leftArea, rightArea, currentGutter) {
+        while (this.listeners.length > 0) {
+            const unsubscribe = this.listeners.pop();
+            if (unsubscribe) {
+                unsubscribe();
+            }
+        }
+        if (this.useGhost && currentGutter) {
+            const gutterPosition = currentGutter.getPosition();
+            const ghost = this.ghost();
+            const offset = ghost.direction === Direction.Vertical ? gutterPosition.y - ghost.y : gutterPosition.x - ghost.x;
+            this.resizeAreas(leftArea, rightArea, offset);
+            this.ghost().visible = false;
+            this.setStyle("cursor" /* StyleProperty.Cursor */, 'unset');
+        }
+        this._isDragging = false;
+        this.updateGutter();
+        this.gutterPositionChange.emit();
+        this.changeDetectorRef.markForCheck();
+    }
+    setStyle(property, value) {
+        this.renderer.setStyle(this.elementRef.nativeElement, property, value);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSplitterComponent, isStandalone: true, selector: "kbq-splitter", inputs: { hideGutters: "hideGutters", direction: "direction", disabled: "disabled", useGhost: "useGhost", gutterSize: "gutterSize" }, outputs: { gutterPositionChange: "gutterPositionChange" }, host: { classAttribute: "kbq-splitter-component" }, queries: [{ propertyName: "areaRefs", predicate: i0.forwardRef(() => KbqSplitterAreaDirective) }], viewQueries: [{ propertyName: "gutters", predicate: KbqGutterDirective, descendants: true, isSignal: true }, { propertyName: "ghost", first: true, predicate: KbqGutterGhostDirective, descendants: true, isSignal: true }], exportAs: ["kbqSplitter"], ngImport: i0, template: "<ng-content />\n\n@for (area of areas; track area) {\n    @if (!$last) {\n        <kbq-gutter\n            [attr.disabled]=\"disabled || null\"\n            [direction]=\"direction\"\n            [order]=\"$index * 2 + 1\"\n            [size]=\"gutterSize\"\n            [style.display]=\"hideGutters ? 'none' : 'flex'\"\n            (mousedown)=\"onMouseDown($event, $index, $index + 1)\"\n        />\n    }\n}\n\n@if (useGhost) {\n    <kbq-gutter-ghost />\n}\n", styles: [".kbq-splitter-component{display:flex;position:relative;flex-wrap:nowrap;align-items:stretch;overflow:hidden}.kbq-splitter-component .kbq-splitter-area{overflow:hidden}.kbq-splitter-component .kbq-splitter-area_resizing{pointer-events:none}.kbq-gutter{display:flex;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;overflow:hidden}.kbq-gutter.kbq-gutter_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost{position:absolute;z-index:999;display:none;overflow:hidden}.kbq-gutter-ghost.kbq-gutter-ghost_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost.kbq-gutter-ghost_visible{display:block}.kbq-gutter{cursor:col-resize}.kbq-gutter:hover,.kbq-gutter.kbq-gutter_dragged{background-color:var(--kbq-states-background-transparent-hover)}.kbq-gutter.kbq-gutter_vertical{cursor:row-resize}.kbq-gutter[disabled]{background-color:var(--kbq-states-background-disabled);cursor:default}.kbq-gutter-ghost{background:var(--kbq-states-background-transparent-active)}\n"], dependencies: [{ kind: "directive", type: KbqGutterDirective, selector: "kbq-gutter", inputs: ["direction", "order", "size"] }, { kind: "directive", type: KbqGutterGhostDirective, selector: "kbq-gutter-ghost", inputs: ["visible", "x", "y", "direction", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-splitter', imports: [KbqGutterDirective, KbqGutterGhostDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kbq-splitter-component'
+                    }, exportAs: 'kbqSplitter', preserveWhitespaces: false, template: "<ng-content />\n\n@for (area of areas; track area) {\n    @if (!$last) {\n        <kbq-gutter\n            [attr.disabled]=\"disabled || null\"\n            [direction]=\"direction\"\n            [order]=\"$index * 2 + 1\"\n            [size]=\"gutterSize\"\n            [style.display]=\"hideGutters ? 'none' : 'flex'\"\n            (mousedown)=\"onMouseDown($event, $index, $index + 1)\"\n        />\n    }\n}\n\n@if (useGhost) {\n    <kbq-gutter-ghost />\n}\n", styles: [".kbq-splitter-component{display:flex;position:relative;flex-wrap:nowrap;align-items:stretch;overflow:hidden}.kbq-splitter-component .kbq-splitter-area{overflow:hidden}.kbq-splitter-component .kbq-splitter-area_resizing{pointer-events:none}.kbq-gutter{display:flex;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;overflow:hidden}.kbq-gutter.kbq-gutter_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost{position:absolute;z-index:999;display:none;overflow:hidden}.kbq-gutter-ghost.kbq-gutter-ghost_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost.kbq-gutter-ghost_visible{display:block}.kbq-gutter{cursor:col-resize}.kbq-gutter:hover,.kbq-gutter.kbq-gutter_dragged{background-color:var(--kbq-states-background-transparent-hover)}.kbq-gutter.kbq-gutter_vertical{cursor:row-resize}.kbq-gutter[disabled]{background-color:var(--kbq-states-background-disabled);cursor:default}.kbq-gutter-ghost{background:var(--kbq-states-background-transparent-active)}\n"] }]
+        }], propDecorators: { gutterPositionChange: [{ type: i0.Output, args: ["gutterPositionChange"] }], gutters: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KbqGutterDirective), { isSignal: true }] }], ghost: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqGutterGhostDirective), { isSignal: true }] }], areaRefs: [{
+                type: ContentChildren,
+                args: [forwardRef(() => KbqSplitterAreaDirective)]
+            }], hideGutters: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], useGhost: [{
+                type: Input
+            }], gutterSize: [{
+                type: Input
+            }] } });
+/**
+ * @deprecated The mouse-only, `flex-basis` based splitter. Superseded by the rewritten
+ * `@koobiq/components/splitter`, which adds panel constraints, collapsing, snapping, keyboard
+ * support and the `separator` accessibility pattern. Will be removed in 22.0.0 — an
+ * `ng update` migration rewrites `@koobiq/components/splitter` imports of this API to
+ * `@koobiq/components/splitter/deprecated` automatically.
+ */
+class KbqSplitterAreaDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.splitter = inject(KbqSplitterComponent);
+        this.sizeChange = output();
+        this.window = inject(KBQ_WINDOW);
+        this.platform = inject(Platform);
+        this.emitSizeChange = () => {
+            this.sizeChange.emit(this.getSize());
+        };
+    }
+    isResizing() {
+        return this.splitter.isDragging;
+    }
+    disableFlex() {
+        this.renderer.removeStyle(this.elementRef.nativeElement, 'flex');
+    }
+    // Before the host bindings of the element apply, so that a component on it keeps the sizes it binds to its host.
+    ngOnInit() {
+        this.removeStyle("max-width" /* StyleProperty.MaxWidth */);
+        if (this.splitter.direction === Direction.Vertical) {
+            this.setStyle("width" /* StyleProperty.Width */, '100%');
+            this.removeStyle("height" /* StyleProperty.Height */);
+        }
+        else {
+            this.setStyle("height" /* StyleProperty.Height */, '100%');
+            this.removeStyle("width" /* StyleProperty.Width */);
+        }
+    }
+    ngAfterViewInit() {
+        this.splitter.addArea(this);
+        this.splitter.gutterPositionChange.subscribe(this.emitSizeChange);
+    }
+    ngOnDestroy() {
+        this.splitter.removeArea(this);
+    }
+    setOrder(order) {
+        this.setStyle("order" /* StyleProperty.Order */, order);
+    }
+    setSize(size) {
+        if (isNaN(size)) {
+            return;
+        }
+        this.setStyle(this.getSizeProperty(), coerceCssPixelValue(coerceNumberProperty(size)));
+    }
+    getSize() {
+        if (!this.platform.isBrowser)
+            return 0;
+        return this.elementRef.nativeElement[this.getOffsetSizeProperty()];
+    }
+    getPosition() {
+        return {
+            x: this.elementRef.nativeElement.offsetLeft,
+            y: this.elementRef.nativeElement.offsetTop
+        };
+    }
+    getMinSize() {
+        const styles = this.window.getComputedStyle(this.elementRef.nativeElement);
+        return parseFloat(styles[this.getMinSizeProperty()]);
+    }
+    isVertical() {
+        return this.splitter.direction === Direction.Vertical;
+    }
+    getMinSizeProperty() {
+        return this.isVertical() ? "min-height" /* StyleProperty.MinHeight */ : "minWidth" /* StyleProperty.MinWidth */;
+    }
+    getOffsetSizeProperty() {
+        return this.isVertical() ? "offsetHeight" /* StyleProperty.OffsetHeight */ : "offsetWidth" /* StyleProperty.OffsetWidth */;
+    }
+    getSizeProperty() {
+        return this.isVertical() ? "height" /* StyleProperty.Height */ : "width" /* StyleProperty.Width */;
+    }
+    setStyle(style, value) {
+        this.renderer.setStyle(this.elementRef.nativeElement, style, value);
+    }
+    removeStyle(style) {
+        this.renderer.removeStyle(this.elementRef.nativeElement, style);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqSplitterAreaDirective, isStandalone: true, selector: "[kbq-splitter-area]", outputs: { sizeChange: "sizeChange" }, host: { properties: { "class.kbq-splitter-area_resizing": "isResizing()" }, classAttribute: "kbq-splitter-area" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterAreaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbq-splitter-area]',
+                    host: {
+                        class: 'kbq-splitter-area',
+                        '[class.kbq-splitter-area_resizing]': 'isResizing()'
+                    }
+                }]
+        }], propDecorators: { sizeChange: [{ type: i0.Output, args: ["sizeChange"] }] } });
+
+/**
+ * @deprecated The mouse-only, `flex-basis` based splitter. Superseded by the rewritten
+ * `@koobiq/components/splitter`, which adds panel constraints, collapsing, snapping, keyboard
+ * support and the `separator` accessibility pattern. Will be removed in 22.0.0 — an
+ * `ng update` migration rewrites `@koobiq/components/splitter` imports of this API to
+ * `@koobiq/components/splitter/deprecated` automatically.
+ */
+class KbqSplitterModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterModule, imports: [KbqIconModule,
+            KbqGutterDirective,
+            KbqGutterGhostDirective,
+            KbqSplitterAreaDirective,
+            KbqSplitterComponent], exports: [KbqGutterDirective,
+            KbqSplitterAreaDirective,
+            KbqSplitterComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterModule, imports: [KbqIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSplitterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        KbqIconModule,
+                        KbqGutterDirective,
+                        KbqGutterGhostDirective,
+                        KbqSplitterAreaDirective,
+                        KbqSplitterComponent
+                    ],
+                    exports: [
+                        KbqGutterDirective,
+                        KbqSplitterAreaDirective,
+                        KbqSplitterComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Direction, KbqGutterDirective, KbqGutterGhostDirective, KbqSplitterAreaDirective, KbqSplitterComponent, KbqSplitterModule };
+//# sourceMappingURL=koobiq-components-splitter-deprecated.mjs.map