igniteui-dockmanager 2.0.2-alpha.3 → 2.1.0-RC.0

package/components/dockmanager/panes/content-pane-component.js

@@ -9,7 +9,7 @@ import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
 import { partNameMap } from '../../../utils/utils.js';
-import { IGC_DEFAULT_PANE_SIZE, IGC_DEFAULT_UNPIN_PANE_SIZE, } from '../dockmanager.interfaces.js';
+import { IGC_DEFAULT_PANE_SIZE, IGC_DEFAULT_UNPIN_PANE_SIZE, IGC_RESIZING_MIN_SIZE, } from '../dockmanager.interfaces.js';
 import { styles } from './content-pane-component.base.css.js';
 class IgcContentPaneComponent extends EventEmitterMixin(LitElement) {
     constructor() {
@@ -22,6 +22,8 @@ class IgcContentPaneComponent extends EventEmitterMixin(LitElement) {
         this._size = IGC_DEFAULT_PANE_SIZE;
         this._unpinnedSize = IGC_DEFAULT_UNPIN_PANE_SIZE;
         this.header = '';
+        this._minResizeWidth = IGC_RESIZING_MIN_SIZE;
+        this._minResizeHeight = IGC_RESIZING_MIN_SIZE;
     }
     static register() {
         registerComponent(IgcContentPaneComponent);
@@ -75,6 +77,20 @@ class IgcContentPaneComponent extends EventEmitterMixin(LitElement) {
     get unpinnedSize() {
         return this._unpinnedSize;
     }
+    set minResizeWidth(value) {
+        this._minResizeWidth =
+            value !== undefined && value > 0 ? value : IGC_RESIZING_MIN_SIZE;
+    }
+    get minResizeWidth() {
+        return this._minResizeWidth;
+    }
+    set minResizeHeight(value) {
+        this._minResizeHeight =
+            value !== undefined && value > 0 ? value : IGC_RESIZING_MIN_SIZE;
+    }
+    get minResizeHeight() {
+        return this._minResizeHeight;
+    }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', 'group');
@@ -142,3 +158,9 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: 'unpinned-size' })
 ], IgcContentPaneComponent.prototype, "unpinnedSize", null);
+__decorate([
+    property({ type: Number, attribute: 'min-resize-width' })
+], IgcContentPaneComponent.prototype, "minResizeWidth", null);
+__decorate([
+    property({ type: Number, attribute: 'min-resize-height' })
+], IgcContentPaneComponent.prototype, "minResizeHeight", null);

package/components/dockmanager/panes/split-pane-component.d.ts

@@ -43,6 +43,24 @@ export default class IgcSplitPaneComponent extends IgcSplitPaneComponent_base {
     set parentUseFixedSize(value: boolean);
     get parentUseFixedSize(): boolean;
     size?: number;
+    private _minResizeWidth;
+    private _minResizeHeight;
+    /**
+     * The minimum width of child panes in pixels during resizing.
+     *
+     * @attr min-resize-width
+     * @default 42
+     */
+    set minResizeWidth(value: number | undefined);
+    get minResizeWidth(): number;
+    /**
+     * The minimum height of child panes in pixels during resizing.
+     *
+     * @attr min-resize-height
+     * @default 42
+     */
+    set minResizeHeight(value: number | undefined);
+    get minResizeHeight(): number;
     connectedCallback(): void;
     protected updated(): void;
     private _updateFlexStyle;

package/components/dockmanager/panes/split-pane-component.js

@@ -8,13 +8,15 @@ import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
-import { IGC_DEFAULT_PANE_SIZE } from '../dockmanager.interfaces.js';
+import { IGC_DEFAULT_PANE_SIZE, IGC_RESIZING_MIN_SIZE, } from '../dockmanager.interfaces.js';
 import { styles } from './split-pane-component.base.css.js';
 class IgcSplitPaneComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this._parentUseFixedSize = false;
         this.useFixedSize = false;
+        this._minResizeWidth = IGC_RESIZING_MIN_SIZE;
+        this._minResizeHeight = IGC_RESIZING_MIN_SIZE;
     }
     static register() {
         registerComponent(IgcSplitPaneComponent);
@@ -33,6 +35,20 @@ class IgcSplitPaneComponent extends EventEmitterMixin(LitElement) {
     get parentUseFixedSize() {
         return this._parentUseFixedSize;
     }
+    set minResizeWidth(value) {
+        this._minResizeWidth =
+            value !== undefined && value > 0 ? value : IGC_RESIZING_MIN_SIZE;
+    }
+    get minResizeWidth() {
+        return this._minResizeWidth;
+    }
+    set minResizeHeight(value) {
+        this._minResizeHeight =
+            value !== undefined && value > 0 ? value : IGC_RESIZING_MIN_SIZE;
+    }
+    get minResizeHeight() {
+        return this._minResizeHeight;
+    }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('part', 'split-pane');
@@ -42,8 +58,6 @@ class IgcSplitPaneComponent extends EventEmitterMixin(LitElement) {
             height: '100%',
             alignItems: 'stretch',
             boxSizing: 'border-box',
-            minWidth: '0',
-            minHeight: '0',
             overflow: 'auto',
         });
     }
@@ -83,3 +97,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], IgcSplitPaneComponent.prototype, "size", void 0);
+__decorate([
+    property({ type: Number, attribute: 'min-resize-width' })
+], IgcSplitPaneComponent.prototype, "minResizeWidth", null);
+__decorate([
+    property({ type: Number, attribute: 'min-resize-height' })
+], IgcSplitPaneComponent.prototype, "minResizeHeight", null);

package/components/dockmanager/panes/splitter-component.d.ts

@@ -27,6 +27,7 @@ export default class IgcSplitterComponent extends IgcSplitterComponent_base {
     static styles: import("lit").CSSResult[];
     static register(): void;
     private _paneSizes;
+    private _paneMinSizes;
     private _flyoutMaxSize;
     private _dragService?;
     private resizeEndEmitted;
@@ -86,6 +87,7 @@ export default class IgcSplitterComponent extends IgcSplitterComponent_base {
     private _isArrowRight;
     private _isHorizontal;
     private _isVertical;
+    private _getMinSize;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/dockmanager/panes/splitter-component.js

@@ -10,9 +10,9 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
 import { partNameMap } from '../../../common/util.js';
-import { closestElement, getDirection } from '../../../utils/utils.js';
+import { calculatePaneMinSize, closestElement, getDirection, } from '../../../utils/utils.js';
 import { IgcDragService } from '../../drag-drop/drag.service.js';
-import { IGC_DEFAULT_RESIZE, IGC_RESIZING_MIN_SIZE, } from '../dockmanager.interfaces.js';
+import { IGC_DEFAULT_RESIZE, IGC_DEFAULT_SPLITTER_SIZE, IGC_RESIZING_MIN_SIZE, } from '../dockmanager.interfaces.js';
 import { styles } from './splitter-component.css.js';
 const SCROLL_SPEED = 15;
 class IgcSplitterComponent extends EventEmitterMixin(LitElement) {
@@ -33,6 +33,7 @@ class IgcSplitterComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super();
         this._paneSizes = null;
+        this._paneMinSizes = null;
         this._flyoutMaxSize = 0;
         this.resizeEndEmitted = false;
         this._splitPaneOrientation = 'horizontal';
@@ -180,17 +181,30 @@ class IgcSplitterComponent extends EventEmitterMixin(LitElement) {
         const children = Array.from(parent.children);
         if (this.flyoutLocation) {
             const pane = children[0];
+            const rect = pane.getBoundingClientRect();
             this._paneSizes = [
-                this._isHorizontal() ? pane.offsetWidth : pane.offsetHeight,
+                this._isHorizontal() ? Math.floor(rect.width) : Math.floor(rect.height),
             ];
+            const minSize = this._getMinSize(pane, this._isHorizontal() ? 'horizontal' : 'vertical');
+            this._paneMinSizes = [minSize];
+            const parentRect = parent.getBoundingClientRect();
+            const minMargin = 50;
             this._flyoutMaxSize = this._isHorizontal()
-                ? parent.offsetWidth - IGC_RESIZING_MIN_SIZE
-                : parent.offsetHeight - IGC_RESIZING_MIN_SIZE;
+                ? Math.floor(parentRect.width) - minMargin
+                : Math.floor(parentRect.height) - minMargin;
         }
         else {
             const index = children.indexOf(this);
             const panes = [children[index - 1], children[index + 1]];
-            this._paneSizes = panes.map((p) => this._isHorizontal() ? p?.offsetWidth : p?.offsetHeight);
+            this._paneSizes = panes.map((p) => {
+                if (!p)
+                    return 0;
+                const rect = p.getBoundingClientRect();
+                return this._isHorizontal()
+                    ? Math.floor(rect.width)
+                    : Math.floor(rect.height);
+            });
+            this._paneMinSizes = panes.map((p) => this._getMinSize(p, this._isHorizontal() ? 'horizontal' : 'vertical'));
         }
     }
     _dragEndHelper() {
@@ -198,6 +212,7 @@ class IgcSplitterComponent extends EventEmitterMixin(LitElement) {
         this.showDragGhost = false;
         this._dragOffset = 0;
         this._paneSizes = null;
+        this._paneMinSizes = null;
         this.emitEvent('igcResizeEnd', {
             detail: dragOffset,
             bubbles: true,
@@ -205,51 +220,70 @@ class IgcSplitterComponent extends EventEmitterMixin(LitElement) {
         this.resizeEndEmitted = true;
     }
     _constrainFlyoutResize() {
-        if (!this._paneSizes)
+        if (!this._paneSizes || !this._paneMinSizes)
             return;
         const paneSize = this._paneSizes[0];
-        const isStartLocation = this.flyoutLocation === 'left' || this.flyoutLocation === 'top';
+        const minSize = this._paneMinSizes[0];
+        const isRTL = this.isRTL;
+        const isHorizontal = this._isHorizontal();
+        let isStartLocation = this.flyoutLocation === 'left' || this.flyoutLocation === 'top';
+        if (isRTL && isHorizontal) {
+            if (this.flyoutLocation === 'left') {
+                isStartLocation = false;
+            }
+            else if (this.flyoutLocation === 'right') {
+                isStartLocation = true;
+            }
+        }
         const offset = isStartLocation ? this._dragOffset : -this._dragOffset;
-        if (paneSize + offset < IGC_RESIZING_MIN_SIZE) {
-            const minOffset = paneSize - IGC_RESIZING_MIN_SIZE;
-            this._dragOffset = isStartLocation ? -minOffset : minOffset;
+        const newSize = paneSize + offset;
+        if (paneSize >= minSize) {
+            if (newSize < minSize) {
+                const minOffset = minSize - paneSize;
+                this._dragOffset = isStartLocation ? minOffset : -minOffset;
+            }
+            else if (newSize > this._flyoutMaxSize) {
+                const maxOffset = this._flyoutMaxSize - paneSize;
+                this._dragOffset = isStartLocation ? maxOffset : -maxOffset;
+            }
         }
-        else if (paneSize + offset > this._flyoutMaxSize) {
+        else if (offset < 0) {
+            this._dragOffset = 0;
+        }
+        else if (newSize > this._flyoutMaxSize) {
             const maxOffset = this._flyoutMaxSize - paneSize;
             this._dragOffset = isStartLocation ? maxOffset : -maxOffset;
         }
     }
     _constrainSplitPaneResize() {
-        if (!this._paneSizes)
+        if (!this._paneSizes || !this._paneMinSizes)
             return;
         const rtl = this.isRTL;
         const isVertical = this._isVertical();
         if (this._dragOffset < 0) {
             if (!isVertical && this.parentUseFixedSize && rtl)
                 return;
-            const referencePaneSize = !rtl || isVertical ? this._paneSizes[0] : this._paneSizes[1];
-            if (referencePaneSize > IGC_RESIZING_MIN_SIZE) {
-                if (referencePaneSize + this._dragOffset < IGC_RESIZING_MIN_SIZE) {
-                    this._dragOffset = -(referencePaneSize - IGC_RESIZING_MIN_SIZE);
-                }
-            }
-            else {
-                this._dragOffset = 0;
+            const shrinkingPaneIndex = !rtl || isVertical ? 0 : 1;
+            const shrinkingPaneSize = this._paneSizes[shrinkingPaneIndex];
+            const configuredMinSize = this._paneMinSizes[shrinkingPaneIndex];
+            const minSize = Math.min(shrinkingPaneSize, configuredMinSize);
+            const newSize = shrinkingPaneSize + this._dragOffset;
+            if (newSize < minSize) {
+                this._dragOffset = -(shrinkingPaneSize - minSize);
             }
         }
-        else {
+        else if (this._dragOffset > 0) {
             if (this.parentUseFixedSize && (isVertical || (!isVertical && !rtl)))
                 return;
-            const referencePaneSize = !rtl || isVertical ? this._paneSizes[1] : this._paneSizes[0];
-            if (referencePaneSize === 0)
+            const shrinkingPaneIndex = !rtl || isVertical ? 1 : 0;
+            const shrinkingPaneSize = this._paneSizes[shrinkingPaneIndex];
+            if (shrinkingPaneSize === 0)
                 return;
-            if (referencePaneSize > IGC_RESIZING_MIN_SIZE) {
-                if (referencePaneSize - this._dragOffset < IGC_RESIZING_MIN_SIZE) {
-                    this._dragOffset = referencePaneSize - IGC_RESIZING_MIN_SIZE;
-                }
-            }
-            else {
-                this._dragOffset = 0;
+            const configuredMinSize = this._paneMinSizes[shrinkingPaneIndex];
+            const minSize = Math.min(shrinkingPaneSize, configuredMinSize);
+            const newSize = shrinkingPaneSize - this._dragOffset;
+            if (newSize < minSize) {
+                this._dragOffset = shrinkingPaneSize - minSize;
             }
         }
     }
@@ -284,6 +318,17 @@ class IgcSplitterComponent extends EventEmitterMixin(LitElement) {
     _isVertical() {
         return this.splitPaneOrientation === 'vertical';
     }
+    _getMinSize(pane, orientation) {
+        if (!pane)
+            return IGC_RESIZING_MIN_SIZE;
+        const layoutPane = pane._layoutPane;
+        if (!layoutPane) {
+            return IGC_RESIZING_MIN_SIZE;
+        }
+        const rawSplitterSize = Math.min(this.offsetWidth, this.offsetHeight);
+        const splitterSize = rawSplitterSize > 0 ? rawSplitterSize : IGC_DEFAULT_SPLITTER_SIZE;
+        return calculatePaneMinSize(layoutPane, orientation, splitterSize);
+    }
     render() {
         const splitterClasses = partNameMap({
             splitter: true,

package/components/tabs/tabs-component.d.ts

@@ -41,6 +41,8 @@ export default class IgcTabsComponent extends IgcTabsComponent_base {
     private _selectionOrder;
     private _resizeObserver;
     private _tabHeadersDiv;
+    private _minResizeWidth?;
+    private _minResizeHeight?;
     private _hasHiddenTabs;
     private _hiddenTabsMenuMeta;
     /**
@@ -100,6 +102,16 @@ export default class IgcTabsComponent extends IgcTabsComponent_base {
      */
     set parentUseFixedSize(value: boolean);
     get parentUseFixedSize(): boolean;
+    /**
+     * The minimum width of the tab group in pixels during resizing.
+     */
+    set minResizeWidth(value: number | undefined);
+    get minResizeWidth(): number | undefined;
+    /**
+     * The minimum height of the tab group in pixels during resizing.
+     */
+    set minResizeHeight(value: number | undefined);
+    get minResizeHeight(): number | undefined;
     protected selectedIndexChanged(oldValue: number, newValue: number): void;
     connectedCallback(): void;
     protected firstUpdated(): void;

package/components/tabs/tabs-component.js

@@ -97,6 +97,18 @@ class IgcTabsComponent extends EventEmitterMixin(LitElement) {
     get parentUseFixedSize() {
         return this._parentUseFixedSize;
     }
+    set minResizeWidth(value) {
+        this._minResizeWidth = value;
+    }
+    get minResizeWidth() {
+        return this._minResizeWidth;
+    }
+    set minResizeHeight(value) {
+        this._minResizeHeight = value;
+    }
+    get minResizeHeight() {
+        return this._minResizeHeight;
+    }
     selectedIndexChanged(oldValue, newValue) {
         if (oldValue !== newValue) {
             this._handleSelectedIndexChanged(newValue);
@@ -436,6 +448,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], IgcTabsComponent.prototype, "parentUseFixedSize", null);
+__decorate([
+    property({ type: Number })
+], IgcTabsComponent.prototype, "minResizeWidth", null);
+__decorate([
+    property({ type: Number })
+], IgcTabsComponent.prototype, "minResizeHeight", null);
 __decorate([
     watch('selectedIndex')
 ], IgcTabsComponent.prototype, "selectedIndexChanged", null);