@fundamental-ngx/core 0.35.2-rc.30 → 0.35.2-rc.31

package/fesm2015/fundamental-ngx-core-fixed-card-layout.mjs

@@ -8,7 +8,7 @@ import * as i1 from '@fundamental-ngx/core/utils';
 import { getDocumentFontSize, resizeObservable, DragAndDropModule } from '@fundamental-ngx/core/utils';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { Subscription, Subject } from 'rxjs';
-import { takeUntil, debounceTime, delay, distinct } from 'rxjs/operators';
+import { takeUntil, debounceTime, filter, distinct } from 'rxjs/operators';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 
 class FixedCardLayoutItemComponent {
@@ -96,6 +96,8 @@ class FixedCardLayoutComponent {
         /** @hidden */
         this._columnsWidth = new Map();
         /** @hidden */
+        this._skipListenResize = false;
+        /** @hidden */
         this._cardMinimumWidth = CARD_MINIMUM_WIDTH;
         /** @hidden */
         this._cardsSizeChangeSubscription = new Subscription();
@@ -140,7 +142,6 @@ class FixedCardLayoutComponent {
     /** @hidden */
     ngAfterViewInit() {
         this._processCards();
-        this.updateLayout();
         this._listenOnResize();
         this._listenOnCardsChange();
         this._accessibilitySetup();
@@ -155,7 +156,7 @@ class FixedCardLayoutComponent {
             this.updateLayout();
         }
         else if ('columnsWidthConfig' in changes) {
-            this._setColumnsWidth();
+            this._setCardColumnsWidth();
         }
     }
     /** @hidden */
@@ -173,7 +174,7 @@ class FixedCardLayoutComponent {
     }
     /** Distribute cards on window resize */
     updateLayout() {
-        if (!this._cards.length || !this._availableWidth) {
+        if (!this._cards.length) {
             return;
         }
         const possibleNumberOfColumns = getNumberOfColumns(this._availableWidth, this.cardMinimumWidth);
@@ -182,12 +183,9 @@ class FixedCardLayoutComponent {
             numberOfColumns: this._numberOfColumns,
             screenSize: this._availableWidth
         });
-        if (this._previousNumberOfColumns !== this._numberOfColumns) {
-            this._previousNumberOfColumns = this._numberOfColumns;
-            this._updateColumns();
-            return;
-        }
-        this._setColumnsWidth();
+        this._setCardColumns();
+        this._setCardColumnsWidth();
+        this._setContainerHeight();
     }
     /** @hidden */
     _onDropListEntered(event) {
@@ -198,7 +196,7 @@ class FixedCardLayoutComponent {
         const spaceToAdd = event.item.element.nativeElement.getBoundingClientRect().height +
             (event.container.getSortedItems().length ? REM_IN_PX : 0);
         // When we move the card into a certain column we should increase the height of that column by the card height
-        this._calculateContainerHeight(columnIndexToAddSpace, spaceToAdd);
+        this._setContainerHeight(columnIndexToAddSpace, spaceToAdd);
     }
     /** @hidden */
     _onDragDropped(event) {
@@ -236,7 +234,7 @@ class FixedCardLayoutComponent {
             layoutColumns: this._numberOfColumns,
             items: this._cards.toArray()
         });
-        this._updateColumns();
+        this.updateLayout();
     }
     /** @hidden */
     _accessibilitySetup() {
@@ -253,27 +251,19 @@ class FixedCardLayoutComponent {
     /** @hidden Listen window resize and distribute cards on column change */
     _listenOnResize() {
         resizeObservable(this._layout.nativeElement)
-            .pipe(debounceTime(60), takeUntil(this._onDestroy$))
+            .pipe(debounceTime(60), filter(() => this._skipListenResize), takeUntil(this._onDestroy$))
             .subscribe(() => this.updateLayout());
     }
     /** @hidden Listen card change and distribute cards on column change */
     _listenOnCardsChange() {
-        this._cards.changes.pipe(delay(0)).subscribe(() => {
-            this._processCards();
-            this._updateColumns();
-        });
-    }
-    /** @hidden Renders layout on column changes */
-    _updateColumns() {
-        this._setCardColumns();
-        this._setColumnsWidth(false);
-        this._calculateContainerHeight();
+        this._cards.changes.subscribe(() => this._processCards());
     }
     /** @hidden */
     _processCards() {
         this._cardsArray = this._cards
             .toArray()
             .sort((firstCard, secondCard) => firstCard.fdCardDef - secondCard.fdCardDef);
+        this.updateLayout();
     }
     /** @hidden Distribute cards among columns to arrange them in "Z" flow */
     _setCardColumns() {
@@ -290,14 +280,14 @@ class FixedCardLayoutComponent {
         });
         this._cardColumns = columns;
         this._cardColumns.forEach((column) => {
-            if (column.length > 0 && column.length < 2) {
+            if (column.length === 1) {
                 this._singleItemColumns.add(column[0].fdCardDef);
             }
         });
-        this._listenToCardsSizeChange();
+        this._listenOnCardsSizeChange();
     }
     /** @hidden */
-    _setColumnsWidth(detectChanges = true) {
+    _setCardColumnsWidth() {
         this._columnsWidth = new Map();
         const configPresent = this.columnsWidthConfig &&
             typeof this.columnsWidthConfig === 'object' &&
@@ -312,16 +302,14 @@ class FixedCardLayoutComponent {
             const columnWidth = Math.round(this.cardMinimumWidth + (freeSpace / totalWidthModifiers) * fixedWidthModifiers[index]);
             column.forEach((card) => this._columnsWidth.set(card.fdCardDef, columnWidth));
         });
-        if (detectChanges) {
-            this._changeDetector.detectChanges();
-        }
     }
     /**
      * @hidden
      * Calculate container height accordingly to the the card columns height
      * Parameters used to increase the height of the column where drag'n'drop placeholder currently is
      */
-    _calculateContainerHeight(columnIndexToAddSpace = -1, spaceToAdd = 0) {
+    _setContainerHeight(columnIndexToAddSpace = -1, spaceToAdd = 0) {
+        this._skipListenResize = true;
         this._changeDetector.detectChanges();
         const cardColumns = this._cardColumns.map((column) => column
             .map((card) => { var _a; return (_a = this._dragList.find((drag) => !drag._dragRef.isDragging() && drag.data === card)) === null || _a === void 0 ? void 0 : _a.element; })
@@ -333,9 +321,10 @@ class FixedCardLayoutComponent {
         // +4px because it's the top & bottom borders of card placeholder
         this._containerHeight = Math.max(...columnsHeights) + 4;
         this._changeDetector.detectChanges();
+        this._skipListenResize = false;
     }
     /** @hidden */
-    _listenToCardsSizeChange() {
+    _listenOnCardsSizeChange() {
         this._cardsSizeChangeSubscription.unsubscribe();
         this._cardsSizeChangeSubscription = new Subscription();
         this._changeDetector.detectChanges();
@@ -345,7 +334,7 @@ class FixedCardLayoutComponent {
             .forEach((card) => {
             this._cardsSizeChangeSubscription.add(resizeObservable(card.nativeElement)
                 .pipe(distinct((resizeEntry) => resizeEntry[0].contentRect.height))
-                .subscribe(() => this._calculateContainerHeight()));
+                .subscribe(() => this._setContainerHeight()));
         }));
     }
 }

package/fesm2015/fundamental-ngx-core-fixed-card-layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-fixed-card-layout.mjs","sources":["../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout-item/fixed-card-layout-item.component.ts","../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.ts","../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.html","../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout.module.ts","../../../../libs/core/src/lib/fixed-card-layout/fundamental-ngx-core-fixed-card-layout.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core';\nimport { FocusableOption } from '@angular/cdk/a11y';\n\n@Component({\n    selector: 'fd-fixed-card-layout-item',\n    template: `<ng-content></ng-content>`,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: block'\n    }\n})\nexport class FixedCardLayoutItemComponent implements FocusableOption {\n    constructor(private _elementRef: ElementRef) {}\n\n    /** Set focus on the element. */\n    focus(): void {\n        const header = this._elementRef.nativeElement.querySelector('.fd-card__header');\n        if (header) {\n            header.focus();\n        }\n    }\n}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    Directive,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    QueryList,\n    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewChildren,\n    ViewEncapsulation\n} from '@angular/core';\nimport { FocusKeyManager } from '@angular/cdk/a11y';\nimport { CdkDrag, CdkDragDrop, CdkDragEnter } from '@angular/cdk/drag-drop';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime, delay, distinct, takeUntil } from 'rxjs/operators';\n\nimport { resizeObservable, RtlService, getDocumentFontSize } from '@fundamental-ngx/core/utils';\nimport { FixedCardLayoutItemComponent } from './fixed-card-layout-item/fixed-card-layout-item.component';\nimport { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';\n\nconst REM_IN_PX = getDocumentFontSize();\nconst CARD_MINIMUM_WIDTH = REM_IN_PX * 20; // 20rem\nconst CARD_GAP_WIDTH = REM_IN_PX; // 1rem\nconst DRAG_START_DELAY = 200; // in ms\nconst MAX_COLUMNS = 10;\n\nlet cardRank = 1;\n\n@Directive({ selector: '[fdCardDef]' })\nexport class CardDefinitionDirective {\n    /**\n     * Behaves like rank of card.\n     * Useful in creating layout again after drag and drop.\n     */\n    @Input()\n    set fdCardDef(value: NumberInput) {\n        if (!value) {\n            return;\n        }\n\n        this._fdCardDef = coerceNumberProperty(value);\n    }\n    get fdCardDef(): number {\n        return this._fdCardDef;\n    }\n\n    /** @hidden */\n    private _fdCardDef: number = cardRank++;\n\n    /** @hidden */\n    constructor(public template: TemplateRef<any>) {}\n}\n\nexport interface Layout {\n    numberOfColumns?: number;\n    screenSize: number;\n}\n\nexport interface CardDropped {\n    previousIndex: number;\n    currentIndex: number;\n    layoutColumns: number;\n    items: CardDefinitionDirective[];\n}\n\ntype Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n\nexport type ColumnsWidthConfig = { [C in Columns]?: number };\n\ntype CardColumn = CardDefinitionDirective[];\n\n@Component({\n    selector: 'fd-fixed-card-layout',\n    templateUrl: './fixed-card-layout.component.html',\n    styleUrls: ['./fixed-card-layout.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'fd-fixed-card-layout'\n    }\n})\nexport class FixedCardLayoutComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {\n    /** Drag drop behavior can be disabled */\n    @Input()\n    disableDragDrop: boolean;\n\n    /** Drag start delay in milliseconds, default to 200ms for safe scrolling on mobile with touchscreen */\n    @Input()\n    dragStartDelay = DRAG_START_DELAY;\n\n    /** Card's minimum width in pixels. */\n    @Input()\n    set cardMinimumWidth(value: NumberInput) {\n        const coercedValue = coerceNumberProperty(value);\n\n        if (coercedValue < CARD_MINIMUM_WIDTH) {\n            return;\n        }\n\n        this._cardMinimumWidth = coercedValue;\n    }\n    get cardMinimumWidth(): number {\n        return this._cardMinimumWidth;\n    }\n\n    /** Config with the width ratios that should take every column. Flex-grow principe. Missed values set to 0. s*/\n    @Input()\n    columnsWidthConfig: ColumnsWidthConfig;\n\n    /** Limit the number of columns. Default is 10. */\n    @Input()\n    maxColumns = MAX_COLUMNS;\n\n    /** Event to emit, when layout changes */\n    @Output()\n    layoutChange: EventEmitter<Layout> = new EventEmitter<Layout>();\n\n    /** Event to emit on Card dragged and dropped */\n    @Output()\n    cardDraggedDropped: EventEmitter<CardDropped> = new EventEmitter<CardDropped>();\n\n    /** @hidden */\n    @ContentChildren(CardDefinitionDirective)\n    _cards: QueryList<CardDefinitionDirective>;\n\n    /** @hidden */\n    @ViewChildren(FixedCardLayoutItemComponent)\n    _cardContainers: QueryList<FixedCardLayoutItemComponent>;\n\n    /** @hidden */\n    @ViewChildren(CdkDrag)\n    _dragList: QueryList<CdkDrag>;\n\n    /** @hidden */\n    @ViewChild('layout')\n    _layout: ElementRef;\n\n    /** @hidden */\n    _cardsArray: CardDefinitionDirective[];\n\n    /** @hidden Number of Columns in layout */\n    _numberOfColumns: number;\n\n    /** @hidden */\n    _cardColumns: CardColumn[];\n\n    /** @hidden*/\n    _containerHeight: number;\n\n    /** @hidden handles rtl service */\n    _dir = 'ltr';\n\n    /** @hidden first number is the CardDefinition rank, i.e. id */\n    _groupIndexes = new Map<number, number>();\n\n    /** @hidden first number is the CardDefinition rank, i.e. id */\n    _itemIndexes = new Map<number, number>();\n\n    /** @hidden first number is the CardDefinition rank, i.e. id */\n    _singleItemColumns = new Set<number>();\n\n    /** @hidden */\n    _columnsWidth = new Map<number, number>();\n\n    /** @hidden Return available width for fixed card layout */\n    get _availableWidth(): number {\n        return this._layout.nativeElement.getBoundingClientRect().width;\n    }\n\n    /** @hidden */\n    _placeholderMargin: boolean;\n\n    /** @hidden */\n    private _previousNumberOfColumns: number;\n\n    /** @hidden FocusKeyManager instance */\n    private _keyboardEventsManager: FocusKeyManager<FixedCardLayoutItemComponent>;\n\n    /** @hidden */\n    private _cardMinimumWidth = CARD_MINIMUM_WIDTH;\n\n    /** @hidden */\n    private _cardsSizeChangeSubscription = new Subscription();\n\n    /** @hidden An RxJS Subject that will kill the data stream upon component’s destruction (for unsubscribing)  */\n    private readonly _onDestroy$: Subject<void> = new Subject<void>();\n\n    /** @hidden */\n    constructor(\n        private readonly _changeDetector: ChangeDetectorRef,\n        @Optional() private readonly _rtlService: RtlService\n    ) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this._subscribeToRtl();\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._processCards();\n        this.updateLayout();\n\n        this._listenOnResize();\n        this._listenOnCardsChange();\n        this._accessibilitySetup();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        // Skip all changes unless we don't have initial layout created\n        if (!this._cardsArray) {\n            return;\n        }\n\n        if ('maxColumns' in changes || 'cardMinimumWidth' in changes) {\n            this.updateLayout();\n        } else if ('columnsWidthConfig' in changes) {\n            this._setColumnsWidth();\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._cardsSizeChangeSubscription.unsubscribe();\n\n        this._onDestroy$.next();\n        this._onDestroy$.complete();\n    }\n\n    /** @hidden */\n    @HostListener('keydown', ['$event'])\n    handleKeydown(event: KeyboardEvent): void {\n        event.stopImmediatePropagation();\n\n        if (this._keyboardEventsManager) {\n            this._keyboardEventsManager.onKeydown(event);\n        }\n    }\n\n    /** Distribute cards on window resize */\n    updateLayout(): void {\n        if (!this._cards.length || !this._availableWidth) {\n            return;\n        }\n\n        const possibleNumberOfColumns = getNumberOfColumns(this._availableWidth, this.cardMinimumWidth);\n\n        this._numberOfColumns = Math.min(\n            possibleNumberOfColumns,\n            this._cards.length,\n            this.maxColumns || MAX_COLUMNS,\n            MAX_COLUMNS\n        );\n\n        this.layoutChange.emit({\n            numberOfColumns: this._numberOfColumns,\n            screenSize: this._availableWidth\n        });\n\n        if (this._previousNumberOfColumns !== this._numberOfColumns) {\n            this._previousNumberOfColumns = this._numberOfColumns;\n            this._updateColumns();\n            return;\n        }\n\n        this._setColumnsWidth();\n    }\n\n    /** @hidden */\n    _onDropListEntered(event: CdkDragEnter): void {\n        const containerItemCardDef = (event.container.getSortedItems()[0].data as CardDefinitionDirective).fdCardDef;\n        const dragItemCardDef = (event.item.data as CardDefinitionDirective).fdCardDef;\n\n        this._placeholderMargin = containerItemCardDef !== dragItemCardDef;\n\n        const columnIndexToAddSpace = this._cardColumns.findIndex((column) =>\n            column.find((card) => event.container.getSortedItems()[0].data === card)\n        );\n        const spaceToAdd =\n            event.item.element.nativeElement.getBoundingClientRect().height +\n            (event.container.getSortedItems().length ? REM_IN_PX : 0);\n\n        // When we move the card into a certain column we should increase the height of that column by the card height\n        this._calculateContainerHeight(columnIndexToAddSpace, spaceToAdd);\n    }\n\n    /** @hidden */\n    _onDragDropped(event: CdkDragDrop<number, number>): void {\n        if (event.container.data === event.previousContainer.data) {\n            return;\n        }\n\n        this._placeholderMargin = false;\n\n        const movedCard = event.previousContainer.getSortedItems()[0].data;\n        const replacedCard = event.container.getSortedItems()[0].data;\n\n        const movedCardColumn = this._cardColumns.find((column) =>\n            column.find((card) => card.fdCardDef === movedCard.fdCardDef)\n        );\n        const replacedCardColumn = this._cardColumns.find((column) =>\n            column.find((card) => card.fdCardDef === replacedCard.fdCardDef)\n        );\n\n        // If we dragged the card from the same column as the column we're dropping into\n        // There may be a situation where the order shouldn't change but since there are a different drop lists it will change\n        // We should prevent this\n        if (movedCardColumn === replacedCardColumn && movedCardColumn?.length === 2) {\n            if (movedCard.fdCardDef < replacedCard.fdCardDef && event.previousContainer.data < event.container.data) {\n                return;\n            }\n\n            if (movedCard.fdCardDef > replacedCard.fdCardDef && event.previousContainer.data > event.container.data) {\n                return;\n            }\n        }\n\n        this._processDragDrop(event.previousContainer.data, event.container.data, movedCard, replacedCard);\n    }\n\n    /** @hidden For the keyboard drag&drop directive */\n    _customMoveFn = (group: CardColumn, indexFrom: number, indexTo: number): void => {\n        const movedCard = group[indexFrom];\n        const replacedCard = group[indexTo];\n\n        const indexFromArray = this._cardsArray.findIndex((card) => card.fdCardDef === movedCard.fdCardDef);\n        const indexToArray = this._cardsArray.findIndex((card) => card.fdCardDef === replacedCard.fdCardDef);\n\n        this._processDragDrop(indexFromArray, indexToArray, movedCard, replacedCard);\n    };\n\n    /** @hidden For the keyboard drag&drop directive */\n    _customTransferFn = (prevGroup: CardColumn, nextGroup: CardColumn, indexFrom: number, indexTo: number): void => {\n        const movedCard = prevGroup[indexFrom];\n        const replacedCard = nextGroup[indexTo];\n\n        const indexFromArray = this._cardsArray.findIndex((card) => card.fdCardDef === movedCard.fdCardDef);\n        const indexToArray = this._cardsArray.findIndex((card) => card.fdCardDef === replacedCard.fdCardDef);\n\n        this._processDragDrop(indexFromArray, indexToArray, movedCard, replacedCard);\n    };\n\n    /** @hidden Arranges cards on drop of dragged card */\n    private _processDragDrop(\n        prevIndex: number,\n        newIndex: number,\n        prevCard: CardDefinitionDirective,\n        newCard: CardDefinitionDirective\n    ): void {\n        // moveItemInArray from CDK won't work as it changes order of other cards\n        const replacedCard = this._cardsArray[newIndex];\n        this._cardsArray[newIndex] = this._cardsArray[prevIndex];\n        this._cardsArray[prevIndex] = replacedCard;\n\n        adjustCardRank(prevCard, newCard);\n\n        this.cardDraggedDropped.emit({\n            previousIndex: prevIndex,\n            currentIndex: newIndex,\n            layoutColumns: this._numberOfColumns,\n            items: this._cards.toArray()\n        });\n\n        this._updateColumns();\n    }\n\n    /** @hidden */\n    private _accessibilitySetup(): void {\n        this._keyboardEventsManager = new FocusKeyManager(this._cardContainers).withWrap();\n    }\n\n    /** @hidden Rtl change subscription */\n    private _subscribeToRtl(): void {\n        this._rtlService?.rtl.pipe(takeUntil(this._onDestroy$)).subscribe((isRtl) => {\n            this._dir = isRtl ? 'rtl' : 'ltr';\n            this._changeDetector.detectChanges();\n        });\n    }\n\n    /** @hidden Listen window resize and distribute cards on column change */\n    private _listenOnResize(): void {\n        resizeObservable(this._layout.nativeElement)\n            .pipe(debounceTime(60), takeUntil(this._onDestroy$))\n            .subscribe(() => this.updateLayout());\n    }\n\n    /** @hidden Listen card change and distribute cards on column change */\n    private _listenOnCardsChange(): void {\n        this._cards.changes.pipe(delay(0)).subscribe(() => {\n            this._processCards();\n            this._updateColumns();\n        });\n    }\n\n    /** @hidden Renders layout on column changes */\n    private _updateColumns(): void {\n        this._setCardColumns();\n        this._setColumnsWidth(false);\n        this._calculateContainerHeight();\n    }\n\n    /** @hidden */\n    private _processCards(): void {\n        this._cardsArray = this._cards\n            .toArray()\n            .sort((firstCard, secondCard) => firstCard.fdCardDef - secondCard.fdCardDef);\n    }\n\n    /** @hidden Distribute cards among columns to arrange them in \"Z\" flow */\n    private _setCardColumns(): void {\n        this._groupIndexes = new Map<number, number>();\n        this._itemIndexes = new Map<number, number>();\n        this._singleItemColumns = new Set<number>();\n\n        const columns: CardColumn[] = new Array(this._numberOfColumns).fill(0).map(() => new Array(0));\n\n        this._cardsArray.forEach((card, i) => {\n            const currColumnIndex = i % this._numberOfColumns;\n            const itemIndex = columns[currColumnIndex].length;\n\n            columns[currColumnIndex].push(card);\n\n            this._groupIndexes.set(card.fdCardDef, currColumnIndex);\n            this._itemIndexes.set(card.fdCardDef, itemIndex);\n        });\n\n        this._cardColumns = columns;\n\n        this._cardColumns.forEach((column) => {\n            if (column.length > 0 && column.length < 2) {\n                this._singleItemColumns.add(column[0].fdCardDef);\n            }\n        });\n\n        this._listenToCardsSizeChange();\n    }\n\n    /** @hidden */\n    private _setColumnsWidth(detectChanges = true): void {\n        this._columnsWidth = new Map();\n\n        const configPresent =\n            this.columnsWidthConfig &&\n            typeof this.columnsWidthConfig === 'object' &&\n            Object.keys(this.columnsWidthConfig).length;\n\n        if (!configPresent || this._numberOfColumns === 1) {\n            return;\n        }\n\n        const fixedWidthModifiers = fixWidthModifiers(this.columnsWidthConfig, this._numberOfColumns);\n        const totalWidthModifiers = fixedWidthModifiers.reduce((sum, width) => (sum += width), 0);\n        const freeSpace = this._availableWidth - this.cardMinimumWidth * this._numberOfColumns;\n\n        this._cardColumns.forEach((column, index) => {\n            const columnWidth = Math.round(\n                this.cardMinimumWidth + (freeSpace / totalWidthModifiers) * fixedWidthModifiers[index]\n            );\n\n            column.forEach((card) => this._columnsWidth.set(card.fdCardDef, columnWidth));\n        });\n\n        if (detectChanges) {\n            this._changeDetector.detectChanges();\n        }\n    }\n\n    /**\n     * @hidden\n     * Calculate container height accordingly to the the card columns height\n     * Parameters used to increase the height of the column where drag'n'drop placeholder currently is\n     */\n    private _calculateContainerHeight(columnIndexToAddSpace = -1, spaceToAdd = 0): void {\n        this._changeDetector.detectChanges();\n\n        const cardColumns = this._cardColumns.map((column) =>\n            column\n                .map(\n                    (card) => this._dragList.find((drag) => !drag._dragRef.isDragging() && drag.data === card)?.element\n                )\n                .filter((card): card is ElementRef<HTMLElement> => !!card)\n        );\n\n        const columnsHeights = cardColumns\n            .map((column) => column.map((card) => card.nativeElement.getBoundingClientRect().height))\n            .map(\n                (column, columnIndex) =>\n                    column.reduce((cardsHeight, height) => (cardsHeight += height + REM_IN_PX), 0) +\n                    (columnIndex === columnIndexToAddSpace ? spaceToAdd : 0)\n            );\n\n        // +4px because it's the top & bottom borders of card placeholder\n        this._containerHeight = Math.max(...columnsHeights) + 4;\n\n        this._changeDetector.detectChanges();\n    }\n\n    /** @hidden */\n    private _listenToCardsSizeChange(): void {\n        this._cardsSizeChangeSubscription.unsubscribe();\n        this._cardsSizeChangeSubscription = new Subscription();\n\n        this._changeDetector.detectChanges();\n\n        this._cardColumns.forEach((column) =>\n            column\n                .map((card) => this._dragList.find((wrapper) => wrapper.data === card)?.element)\n                .filter((v): v is ElementRef<HTMLElement> => !!v)\n                .forEach((card) => {\n                    this._cardsSizeChangeSubscription.add(\n                        resizeObservable(card.nativeElement)\n                            .pipe(distinct((resizeEntry) => resizeEntry[0].contentRect.height))\n                            .subscribe(() => this._calculateContainerHeight())\n                    );\n                })\n        );\n    }\n}\n\n/** @hidden */\nfunction fixWidthModifiers(config: ColumnsWidthConfig, numberOfColumns: number): number[] {\n    const modifiers = new Array(numberOfColumns).fill(0);\n\n    return modifiers.map((_, index) => {\n        const columnWidthModifier = config[index + 1];\n\n        if (!columnWidthModifier || columnWidthModifier < 0) {\n            return 0;\n        }\n\n        return columnWidthModifier;\n    });\n}\n\n/** @hidden Returns number of columns that can fit in current available width for fd-card-layout */\nfunction getNumberOfColumns(containerWidth: number, cardWidth: number): number {\n    containerWidth = containerWidth || 1;\n    cardWidth = cardWidth || 1;\n\n    const numberOfCardsWithNoGap = Math.max(Math.floor(containerWidth / cardWidth), 1); // Example: 960 / 320 = 3\n    const requiredWidthWithGap = numberOfCardsWithNoGap * cardWidth + (numberOfCardsWithNoGap - 1) * CARD_GAP_WIDTH;\n    const columnCount = requiredWidthWithGap > containerWidth ? numberOfCardsWithNoGap - 1 : numberOfCardsWithNoGap;\n\n    return Math.max(columnCount, 1);\n}\n\n/** @hidden Method to update rank after cards are dragged */\nfunction adjustCardRank(draggedCard: CardDefinitionDirective, replacedCard: CardDefinitionDirective): void {\n    const draggedCardRank = draggedCard.fdCardDef;\n    draggedCard.fdCardDef = replacedCard.fdCardDef;\n    replacedCard.fdCardDef = draggedCardRank;\n}\n","<div\n    #layout\n    cdkDropListGroup\n    fdDndKeyboardGroup\n    class=\"fd-fixed-card-layout__card-layout fd-fixed-card-layout__card-layout--columns-{{ this._numberOfColumns }}\"\n    [style.height]=\"_containerHeight + 'px'\"\n    [groups]=\"_cardColumns\"\n    orientation=\"horizontal\"\n    [customMoveFn]=\"_customMoveFn\"\n    [customTransferFn]=\"_customTransferFn\"\n    [disableKeyboardDragDrop]=\"disableDragDrop\"\n    [cdkDropListGroupDisabled]=\"disableDragDrop\"\n    [attr.dir]=\"_dir\"\n>\n    <div\n        *ngFor=\"let card of _cardsArray; let cardIndex = index\"\n        cdkDropList\n        cdkDropListSortingDisabled\n        class=\"fd-fixed-card-layout__card\"\n        [class.fd-fixed-card-layout__card--single]=\"_singleItemColumns.has(card.fdCardDef)\"\n        [style.min-width.px]=\"_columnsWidth.get(card.fdCardDef)\"\n        [style.max-width.px]=\"_columnsWidth.get(card.fdCardDef)\"\n        [cdkDropListData]=\"cardIndex\"\n        (cdkDropListEntered)=\"_onDropListEntered($event)\"\n    >\n        <div\n            cdkDrag\n            fdDndKeyboardItem\n            tabindex=\"0\"\n            cdkDragPreviewClass=\"fd-fixed-card-layout__card-preview\"\n            [cdkDragData]=\"card\"\n            [cdkDragStartDelay]=\"dragStartDelay\"\n            [itemIndex]=\"_itemIndexes.get(card.fdCardDef)!\"\n            [groupIndex]=\"_groupIndexes.get(card.fdCardDef)!\"\n            (cdkDragDropped)=\"_onDragDropped($event)\"\n        >\n            <fd-fixed-card-layout-item>\n                <ng-container *ngTemplateOutlet=\"card?.template || null\"> </ng-container>\n            </fd-fixed-card-layout-item>\n\n            <div\n                *cdkDragPlaceholder\n                class=\"fd-fixed-card-layout__card-placeholder\"\n                [style.margin-bottom.rem]=\"+_placeholderMargin\"\n            >\n                <ng-container *ngTemplateOutlet=\"card?.template || null\"></ng-container>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngFor=\"let column of _cardColumns; let last = last; let index = index\">\n        <div *ngIf=\"!last\" class=\"fd-fixed-card-layout__clearfix\" [style.order]=\"index + 1\"></div>\n    </ng-container>\n</div>\n","import { DragDropModule } from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FixedCardLayoutItemComponent } from './fixed-card-layout-item/fixed-card-layout-item.component';\nimport { DragAndDropModule } from '@fundamental-ngx/core/utils';\nimport { CardDefinitionDirective, FixedCardLayoutComponent } from './fixed-card-layout.component';\n\n@NgModule({\n    declarations: [FixedCardLayoutComponent, CardDefinitionDirective, FixedCardLayoutItemComponent],\n    imports: [CommonModule, DragDropModule, DragAndDropModule],\n    exports: [FixedCardLayoutComponent, CardDefinitionDirective, FixedCardLayoutItemComponent]\n})\nexport class FixedCardLayoutModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-fixed-card-layout.mjs","sources":["../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout-item/fixed-card-layout-item.component.ts","../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.ts","../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.html","../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout.module.ts","../../../../libs/core/src/lib/fixed-card-layout/fundamental-ngx-core-fixed-card-layout.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core';\nimport { FocusableOption } from '@angular/cdk/a11y';\n\n@Component({\n    selector: 'fd-fixed-card-layout-item',\n    template: `<ng-content></ng-content>`,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: block'\n    }\n})\nexport class FixedCardLayoutItemComponent implements FocusableOption {\n    constructor(private _elementRef: ElementRef) {}\n\n    /** Set focus on the element. */\n    focus(): void {\n        const header = this._elementRef.nativeElement.querySelector('.fd-card__header');\n        if (header) {\n            header.focus();\n        }\n    }\n}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    Directive,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    QueryList,\n    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewChildren,\n    ViewEncapsulation\n} from '@angular/core';\nimport { FocusKeyManager } from '@angular/cdk/a11y';\nimport { CdkDrag, CdkDragDrop, CdkDragEnter } from '@angular/cdk/drag-drop';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime, distinct, filter, takeUntil } from 'rxjs/operators';\n\nimport { resizeObservable, RtlService, getDocumentFontSize } from '@fundamental-ngx/core/utils';\nimport { FixedCardLayoutItemComponent } from './fixed-card-layout-item/fixed-card-layout-item.component';\nimport { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';\n\nconst REM_IN_PX = getDocumentFontSize();\nconst CARD_MINIMUM_WIDTH = REM_IN_PX * 20; // 20rem\nconst CARD_GAP_WIDTH = REM_IN_PX; // 1rem\nconst DRAG_START_DELAY = 200; // in ms\nconst MAX_COLUMNS = 10;\n\nlet cardRank = 1;\n\n@Directive({ selector: '[fdCardDef]' })\nexport class CardDefinitionDirective {\n    /**\n     * Behaves like rank of card.\n     * Useful in creating layout again after drag and drop.\n     */\n    @Input()\n    set fdCardDef(value: NumberInput) {\n        if (!value) {\n            return;\n        }\n\n        this._fdCardDef = coerceNumberProperty(value);\n    }\n    get fdCardDef(): number {\n        return this._fdCardDef;\n    }\n\n    /** @hidden */\n    private _fdCardDef: number = cardRank++;\n\n    /** @hidden */\n    constructor(public template: TemplateRef<any>) {}\n}\n\nexport interface Layout {\n    numberOfColumns?: number;\n    screenSize: number;\n}\n\nexport interface CardDropped {\n    previousIndex: number;\n    currentIndex: number;\n    layoutColumns: number;\n    items: CardDefinitionDirective[];\n}\n\ntype Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n\nexport type ColumnsWidthConfig = { [C in Columns]?: number };\n\ntype CardColumn = CardDefinitionDirective[];\n\n@Component({\n    selector: 'fd-fixed-card-layout',\n    templateUrl: './fixed-card-layout.component.html',\n    styleUrls: ['./fixed-card-layout.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'fd-fixed-card-layout'\n    }\n})\nexport class FixedCardLayoutComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {\n    /** Drag drop behavior can be disabled */\n    @Input()\n    disableDragDrop: boolean;\n\n    /** Drag start delay in milliseconds, default to 200ms for safe scrolling on mobile with touchscreen */\n    @Input()\n    dragStartDelay = DRAG_START_DELAY;\n\n    /** Card's minimum width in pixels. */\n    @Input()\n    set cardMinimumWidth(value: NumberInput) {\n        const coercedValue = coerceNumberProperty(value);\n\n        if (coercedValue < CARD_MINIMUM_WIDTH) {\n            return;\n        }\n\n        this._cardMinimumWidth = coercedValue;\n    }\n    get cardMinimumWidth(): number {\n        return this._cardMinimumWidth;\n    }\n\n    /** Config with the width ratios that should take every column. Flex-grow principe. Missed values set to 0. s*/\n    @Input()\n    columnsWidthConfig: ColumnsWidthConfig;\n\n    /** Limit the number of columns. Default is 10. */\n    @Input()\n    maxColumns = MAX_COLUMNS;\n\n    /** Event to emit, when layout changes */\n    @Output()\n    layoutChange: EventEmitter<Layout> = new EventEmitter<Layout>();\n\n    /** Event to emit on Card dragged and dropped */\n    @Output()\n    cardDraggedDropped: EventEmitter<CardDropped> = new EventEmitter<CardDropped>();\n\n    /** @hidden */\n    @ContentChildren(CardDefinitionDirective)\n    _cards: QueryList<CardDefinitionDirective>;\n\n    /** @hidden */\n    @ViewChildren(FixedCardLayoutItemComponent)\n    _cardContainers: QueryList<FixedCardLayoutItemComponent>;\n\n    /** @hidden */\n    @ViewChildren(CdkDrag)\n    _dragList: QueryList<CdkDrag>;\n\n    /** @hidden */\n    @ViewChild('layout')\n    _layout: ElementRef;\n\n    /** @hidden */\n    _cardsArray: CardDefinitionDirective[];\n\n    /** @hidden Number of Columns in layout */\n    _numberOfColumns: number;\n\n    /** @hidden */\n    _cardColumns: CardColumn[];\n\n    /** @hidden*/\n    _containerHeight: number;\n\n    /** @hidden handles rtl service */\n    _dir = 'ltr';\n\n    /** @hidden first number is the CardDefinition rank, i.e. id */\n    _groupIndexes = new Map<number, number>();\n\n    /** @hidden first number is the CardDefinition rank, i.e. id */\n    _itemIndexes = new Map<number, number>();\n\n    /** @hidden first number is the CardDefinition rank, i.e. id */\n    _singleItemColumns = new Set<number>();\n\n    /** @hidden */\n    _columnsWidth = new Map<number, number>();\n\n    /** @hidden Return available width for fixed card layout */\n    get _availableWidth(): number {\n        return this._layout.nativeElement.getBoundingClientRect().width;\n    }\n\n    /** @hidden */\n    _placeholderMargin: boolean;\n\n    /** @hidden */\n    _skipListenResize = false;\n\n    /** @hidden FocusKeyManager instance */\n    private _keyboardEventsManager: FocusKeyManager<FixedCardLayoutItemComponent>;\n\n    /** @hidden */\n    private _cardMinimumWidth = CARD_MINIMUM_WIDTH;\n\n    /** @hidden */\n    private _cardsSizeChangeSubscription = new Subscription();\n\n    /** @hidden An RxJS Subject that will kill the data stream upon component’s destruction (for unsubscribing)  */\n    private readonly _onDestroy$: Subject<void> = new Subject<void>();\n\n    /** @hidden */\n    constructor(\n        private readonly _changeDetector: ChangeDetectorRef,\n        @Optional() private readonly _rtlService: RtlService\n    ) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this._subscribeToRtl();\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._processCards();\n\n        this._listenOnResize();\n        this._listenOnCardsChange();\n        this._accessibilitySetup();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        // Skip all changes unless we don't have initial layout created\n        if (!this._cardsArray) {\n            return;\n        }\n\n        if ('maxColumns' in changes || 'cardMinimumWidth' in changes) {\n            this.updateLayout();\n        } else if ('columnsWidthConfig' in changes) {\n            this._setCardColumnsWidth();\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._cardsSizeChangeSubscription.unsubscribe();\n\n        this._onDestroy$.next();\n        this._onDestroy$.complete();\n    }\n\n    /** @hidden */\n    @HostListener('keydown', ['$event'])\n    handleKeydown(event: KeyboardEvent): void {\n        event.stopImmediatePropagation();\n\n        if (this._keyboardEventsManager) {\n            this._keyboardEventsManager.onKeydown(event);\n        }\n    }\n\n    /** Distribute cards on window resize */\n    updateLayout(): void {\n        if (!this._cards.length) {\n            return;\n        }\n\n        const possibleNumberOfColumns = getNumberOfColumns(this._availableWidth, this.cardMinimumWidth);\n\n        this._numberOfColumns = Math.min(\n            possibleNumberOfColumns,\n            this._cards.length,\n            this.maxColumns || MAX_COLUMNS,\n            MAX_COLUMNS\n        );\n\n        this.layoutChange.emit({\n            numberOfColumns: this._numberOfColumns,\n            screenSize: this._availableWidth\n        });\n\n        this._setCardColumns();\n        this._setCardColumnsWidth();\n        this._setContainerHeight();\n    }\n\n    /** @hidden */\n    _onDropListEntered(event: CdkDragEnter): void {\n        const containerItemCardDef = (event.container.getSortedItems()[0].data as CardDefinitionDirective).fdCardDef;\n        const dragItemCardDef = (event.item.data as CardDefinitionDirective).fdCardDef;\n\n        this._placeholderMargin = containerItemCardDef !== dragItemCardDef;\n\n        const columnIndexToAddSpace = this._cardColumns.findIndex((column) =>\n            column.find((card) => event.container.getSortedItems()[0].data === card)\n        );\n        const spaceToAdd =\n            event.item.element.nativeElement.getBoundingClientRect().height +\n            (event.container.getSortedItems().length ? REM_IN_PX : 0);\n\n        // When we move the card into a certain column we should increase the height of that column by the card height\n        this._setContainerHeight(columnIndexToAddSpace, spaceToAdd);\n    }\n\n    /** @hidden */\n    _onDragDropped(event: CdkDragDrop<number, number>): void {\n        if (event.container.data === event.previousContainer.data) {\n            return;\n        }\n\n        this._placeholderMargin = false;\n\n        const movedCard = event.previousContainer.getSortedItems()[0].data;\n        const replacedCard = event.container.getSortedItems()[0].data;\n\n        const movedCardColumn = this._cardColumns.find((column) =>\n            column.find((card) => card.fdCardDef === movedCard.fdCardDef)\n        );\n        const replacedCardColumn = this._cardColumns.find((column) =>\n            column.find((card) => card.fdCardDef === replacedCard.fdCardDef)\n        );\n\n        // If we dragged the card from the same column as the column we're dropping into\n        // There may be a situation where the order shouldn't change but since there are a different drop lists it will change\n        // We should prevent this\n        if (movedCardColumn === replacedCardColumn && movedCardColumn?.length === 2) {\n            if (movedCard.fdCardDef < replacedCard.fdCardDef && event.previousContainer.data < event.container.data) {\n                return;\n            }\n\n            if (movedCard.fdCardDef > replacedCard.fdCardDef && event.previousContainer.data > event.container.data) {\n                return;\n            }\n        }\n\n        this._processDragDrop(event.previousContainer.data, event.container.data, movedCard, replacedCard);\n    }\n\n    /** @hidden For the keyboard drag&drop directive */\n    _customMoveFn = (group: CardColumn, indexFrom: number, indexTo: number): void => {\n        const movedCard = group[indexFrom];\n        const replacedCard = group[indexTo];\n\n        const indexFromArray = this._cardsArray.findIndex((card) => card.fdCardDef === movedCard.fdCardDef);\n        const indexToArray = this._cardsArray.findIndex((card) => card.fdCardDef === replacedCard.fdCardDef);\n\n        this._processDragDrop(indexFromArray, indexToArray, movedCard, replacedCard);\n    };\n\n    /** @hidden For the keyboard drag&drop directive */\n    _customTransferFn = (prevGroup: CardColumn, nextGroup: CardColumn, indexFrom: number, indexTo: number): void => {\n        const movedCard = prevGroup[indexFrom];\n        const replacedCard = nextGroup[indexTo];\n\n        const indexFromArray = this._cardsArray.findIndex((card) => card.fdCardDef === movedCard.fdCardDef);\n        const indexToArray = this._cardsArray.findIndex((card) => card.fdCardDef === replacedCard.fdCardDef);\n\n        this._processDragDrop(indexFromArray, indexToArray, movedCard, replacedCard);\n    };\n\n    /** @hidden Arranges cards on drop of dragged card */\n    private _processDragDrop(\n        prevIndex: number,\n        newIndex: number,\n        prevCard: CardDefinitionDirective,\n        newCard: CardDefinitionDirective\n    ): void {\n        // moveItemInArray from CDK won't work as it changes order of other cards\n        const replacedCard = this._cardsArray[newIndex];\n        this._cardsArray[newIndex] = this._cardsArray[prevIndex];\n        this._cardsArray[prevIndex] = replacedCard;\n\n        adjustCardRank(prevCard, newCard);\n\n        this.cardDraggedDropped.emit({\n            previousIndex: prevIndex,\n            currentIndex: newIndex,\n            layoutColumns: this._numberOfColumns,\n            items: this._cards.toArray()\n        });\n\n        this.updateLayout();\n    }\n\n    /** @hidden */\n    private _accessibilitySetup(): void {\n        this._keyboardEventsManager = new FocusKeyManager(this._cardContainers).withWrap();\n    }\n\n    /** @hidden Rtl change subscription */\n    private _subscribeToRtl(): void {\n        this._rtlService?.rtl.pipe(takeUntil(this._onDestroy$)).subscribe((isRtl) => {\n            this._dir = isRtl ? 'rtl' : 'ltr';\n            this._changeDetector.detectChanges();\n        });\n    }\n\n    /** @hidden Listen window resize and distribute cards on column change */\n    private _listenOnResize(): void {\n        resizeObservable(this._layout.nativeElement)\n            .pipe(\n                debounceTime(60),\n                filter(() => this._skipListenResize),\n                takeUntil(this._onDestroy$)\n            )\n            .subscribe(() => this.updateLayout());\n    }\n\n    /** @hidden Listen card change and distribute cards on column change */\n    private _listenOnCardsChange(): void {\n        this._cards.changes.subscribe(() => this._processCards());\n    }\n\n    /** @hidden */\n    private _processCards(): void {\n        this._cardsArray = this._cards\n            .toArray()\n            .sort((firstCard, secondCard) => firstCard.fdCardDef - secondCard.fdCardDef);\n\n        this.updateLayout();\n    }\n\n    /** @hidden Distribute cards among columns to arrange them in \"Z\" flow */\n    private _setCardColumns(): void {\n        this._groupIndexes = new Map<number, number>();\n        this._itemIndexes = new Map<number, number>();\n        this._singleItemColumns = new Set<number>();\n\n        const columns: CardColumn[] = new Array(this._numberOfColumns).fill(0).map(() => new Array(0));\n\n        this._cardsArray.forEach((card, i) => {\n            const currColumnIndex = i % this._numberOfColumns;\n            const itemIndex = columns[currColumnIndex].length;\n\n            columns[currColumnIndex].push(card);\n\n            this._groupIndexes.set(card.fdCardDef, currColumnIndex);\n            this._itemIndexes.set(card.fdCardDef, itemIndex);\n        });\n\n        this._cardColumns = columns;\n\n        this._cardColumns.forEach((column) => {\n            if (column.length === 1) {\n                this._singleItemColumns.add(column[0].fdCardDef);\n            }\n        });\n\n        this._listenOnCardsSizeChange();\n    }\n\n    /** @hidden */\n    private _setCardColumnsWidth(): void {\n        this._columnsWidth = new Map();\n\n        const configPresent =\n            this.columnsWidthConfig &&\n            typeof this.columnsWidthConfig === 'object' &&\n            Object.keys(this.columnsWidthConfig).length;\n\n        if (!configPresent || this._numberOfColumns === 1) {\n            return;\n        }\n\n        const fixedWidthModifiers = fixWidthModifiers(this.columnsWidthConfig, this._numberOfColumns);\n        const totalWidthModifiers = fixedWidthModifiers.reduce((sum, width) => (sum += width), 0);\n        const freeSpace = this._availableWidth - this.cardMinimumWidth * this._numberOfColumns;\n\n        this._cardColumns.forEach((column, index) => {\n            const columnWidth = Math.round(\n                this.cardMinimumWidth + (freeSpace / totalWidthModifiers) * fixedWidthModifiers[index]\n            );\n\n            column.forEach((card) => this._columnsWidth.set(card.fdCardDef, columnWidth));\n        });\n    }\n\n    /**\n     * @hidden\n     * Calculate container height accordingly to the the card columns height\n     * Parameters used to increase the height of the column where drag'n'drop placeholder currently is\n     */\n    private _setContainerHeight(columnIndexToAddSpace = -1, spaceToAdd = 0): void {\n        this._skipListenResize = true;\n\n        this._changeDetector.detectChanges();\n\n        const cardColumns = this._cardColumns.map((column) =>\n            column\n                .map(\n                    (card) => this._dragList.find((drag) => !drag._dragRef.isDragging() && drag.data === card)?.element\n                )\n                .filter((card): card is ElementRef<HTMLElement> => !!card)\n        );\n\n        const columnsHeights = cardColumns\n            .map((column) => column.map((card) => card.nativeElement.getBoundingClientRect().height))\n            .map(\n                (column, columnIndex) =>\n                    column.reduce((cardsHeight, height) => (cardsHeight += height + REM_IN_PX), 0) +\n                    (columnIndex === columnIndexToAddSpace ? spaceToAdd : 0)\n            );\n\n        // +4px because it's the top & bottom borders of card placeholder\n        this._containerHeight = Math.max(...columnsHeights) + 4;\n\n        this._changeDetector.detectChanges();\n\n        this._skipListenResize = false;\n    }\n\n    /** @hidden */\n    private _listenOnCardsSizeChange(): void {\n        this._cardsSizeChangeSubscription.unsubscribe();\n        this._cardsSizeChangeSubscription = new Subscription();\n\n        this._changeDetector.detectChanges();\n\n        this._cardColumns.forEach((column) =>\n            column\n                .map((card) => this._dragList.find((wrapper) => wrapper.data === card)?.element)\n                .filter((v): v is ElementRef<HTMLElement> => !!v)\n                .forEach((card) => {\n                    this._cardsSizeChangeSubscription.add(\n                        resizeObservable(card.nativeElement)\n                            .pipe(distinct((resizeEntry) => resizeEntry[0].contentRect.height))\n                            .subscribe(() => this._setContainerHeight())\n                    );\n                })\n        );\n    }\n}\n\n/** @hidden */\nfunction fixWidthModifiers(config: ColumnsWidthConfig, numberOfColumns: number): number[] {\n    const modifiers = new Array(numberOfColumns).fill(0);\n\n    return modifiers.map((_, index) => {\n        const columnWidthModifier = config[index + 1];\n\n        if (!columnWidthModifier || columnWidthModifier < 0) {\n            return 0;\n        }\n\n        return columnWidthModifier;\n    });\n}\n\n/** @hidden Returns number of columns that can fit in current available width for fd-card-layout */\nfunction getNumberOfColumns(containerWidth: number, cardWidth: number): number {\n    containerWidth = containerWidth || 1;\n    cardWidth = cardWidth || 1;\n\n    const numberOfCardsWithNoGap = Math.max(Math.floor(containerWidth / cardWidth), 1); // Example: 960 / 320 = 3\n    const requiredWidthWithGap = numberOfCardsWithNoGap * cardWidth + (numberOfCardsWithNoGap - 1) * CARD_GAP_WIDTH;\n    const columnCount = requiredWidthWithGap > containerWidth ? numberOfCardsWithNoGap - 1 : numberOfCardsWithNoGap;\n\n    return Math.max(columnCount, 1);\n}\n\n/** @hidden Method to update rank after cards are dragged */\nfunction adjustCardRank(draggedCard: CardDefinitionDirective, replacedCard: CardDefinitionDirective): void {\n    const draggedCardRank = draggedCard.fdCardDef;\n    draggedCard.fdCardDef = replacedCard.fdCardDef;\n    replacedCard.fdCardDef = draggedCardRank;\n}\n","<div\n    #layout\n    cdkDropListGroup\n    fdDndKeyboardGroup\n    class=\"fd-fixed-card-layout__card-layout fd-fixed-card-layout__card-layout--columns-{{ this._numberOfColumns }}\"\n    [style.height]=\"_containerHeight + 'px'\"\n    [groups]=\"_cardColumns\"\n    orientation=\"horizontal\"\n    [customMoveFn]=\"_customMoveFn\"\n    [customTransferFn]=\"_customTransferFn\"\n    [disableKeyboardDragDrop]=\"disableDragDrop\"\n    [cdkDropListGroupDisabled]=\"disableDragDrop\"\n    [attr.dir]=\"_dir\"\n>\n    <div\n        *ngFor=\"let card of _cardsArray; let cardIndex = index\"\n        cdkDropList\n        cdkDropListSortingDisabled\n        class=\"fd-fixed-card-layout__card\"\n        [class.fd-fixed-card-layout__card--single]=\"_singleItemColumns.has(card.fdCardDef)\"\n        [style.min-width.px]=\"_columnsWidth.get(card.fdCardDef)\"\n        [style.max-width.px]=\"_columnsWidth.get(card.fdCardDef)\"\n        [cdkDropListData]=\"cardIndex\"\n        (cdkDropListEntered)=\"_onDropListEntered($event)\"\n    >\n        <div\n            cdkDrag\n            fdDndKeyboardItem\n            tabindex=\"0\"\n            cdkDragPreviewClass=\"fd-fixed-card-layout__card-preview\"\n            [cdkDragData]=\"card\"\n            [cdkDragStartDelay]=\"dragStartDelay\"\n            [itemIndex]=\"_itemIndexes.get(card.fdCardDef)!\"\n            [groupIndex]=\"_groupIndexes.get(card.fdCardDef)!\"\n            (cdkDragDropped)=\"_onDragDropped($event)\"\n        >\n            <fd-fixed-card-layout-item>\n                <ng-container *ngTemplateOutlet=\"card?.template || null\"> </ng-container>\n            </fd-fixed-card-layout-item>\n\n            <div\n                *cdkDragPlaceholder\n                class=\"fd-fixed-card-layout__card-placeholder\"\n                [style.margin-bottom.rem]=\"+_placeholderMargin\"\n            >\n                <ng-container *ngTemplateOutlet=\"card?.template || null\"></ng-container>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngFor=\"let column of _cardColumns; let last = last; let index = index\">\n        <div *ngIf=\"!last\" class=\"fd-fixed-card-layout__clearfix\" [style.order]=\"index + 1\"></div>\n    </ng-container>\n</div>\n","import { DragDropModule } from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FixedCardLayoutItemComponent } from './fixed-card-layout-item/fixed-card-layout-item.component';\nimport { DragAndDropModule } from '@fundamental-ngx/core/utils';\nimport { CardDefinitionDirective, FixedCardLayoutComponent } from './fixed-card-layout.component';\n\n@NgModule({\n    declarations: [FixedCardLayoutComponent, CardDefinitionDirective, FixedCardLayoutItemComponent],\n    imports: [CommonModule, DragDropModule, DragAndDropModule],\n    exports: [FixedCardLayoutComponent, CardDefinitionDirective, FixedCardLayoutItemComponent]\n})\nexport class FixedCardLayoutModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/fundamental-ngx-core-fixed-card-layout.mjs

@@ -8,7 +8,7 @@ import * as i1 from '@fundamental-ngx/core/utils';
 import { getDocumentFontSize, resizeObservable, DragAndDropModule } from '@fundamental-ngx/core/utils';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { Subscription, Subject } from 'rxjs';
-import { takeUntil, debounceTime, delay, distinct } from 'rxjs/operators';
+import { takeUntil, debounceTime, filter, distinct } from 'rxjs/operators';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 
 class FixedCardLayoutItemComponent {
@@ -96,6 +96,8 @@ class FixedCardLayoutComponent {
         /** @hidden */
         this._columnsWidth = new Map();
         /** @hidden */
+        this._skipListenResize = false;
+        /** @hidden */
         this._cardMinimumWidth = CARD_MINIMUM_WIDTH;
         /** @hidden */
         this._cardsSizeChangeSubscription = new Subscription();
@@ -140,7 +142,6 @@ class FixedCardLayoutComponent {
     /** @hidden */
     ngAfterViewInit() {
         this._processCards();
-        this.updateLayout();
         this._listenOnResize();
         this._listenOnCardsChange();
         this._accessibilitySetup();
@@ -155,7 +156,7 @@ class FixedCardLayoutComponent {
             this.updateLayout();
         }
         else if ('columnsWidthConfig' in changes) {
-            this._setColumnsWidth();
+            this._setCardColumnsWidth();
         }
     }
     /** @hidden */
@@ -173,7 +174,7 @@ class FixedCardLayoutComponent {
     }
     /** Distribute cards on window resize */
     updateLayout() {
-        if (!this._cards.length || !this._availableWidth) {
+        if (!this._cards.length) {
             return;
         }
         const possibleNumberOfColumns = getNumberOfColumns(this._availableWidth, this.cardMinimumWidth);
@@ -182,12 +183,9 @@ class FixedCardLayoutComponent {
             numberOfColumns: this._numberOfColumns,
             screenSize: this._availableWidth
         });
-        if (this._previousNumberOfColumns !== this._numberOfColumns) {
-            this._previousNumberOfColumns = this._numberOfColumns;
-            this._updateColumns();
-            return;
-        }
-        this._setColumnsWidth();
+        this._setCardColumns();
+        this._setCardColumnsWidth();
+        this._setContainerHeight();
     }
     /** @hidden */
     _onDropListEntered(event) {
@@ -198,7 +196,7 @@ class FixedCardLayoutComponent {
         const spaceToAdd = event.item.element.nativeElement.getBoundingClientRect().height +
             (event.container.getSortedItems().length ? REM_IN_PX : 0);
         // When we move the card into a certain column we should increase the height of that column by the card height
-        this._calculateContainerHeight(columnIndexToAddSpace, spaceToAdd);
+        this._setContainerHeight(columnIndexToAddSpace, spaceToAdd);
     }
     /** @hidden */
     _onDragDropped(event) {
@@ -236,7 +234,7 @@ class FixedCardLayoutComponent {
             layoutColumns: this._numberOfColumns,
             items: this._cards.toArray()
         });
-        this._updateColumns();
+        this.updateLayout();
     }
     /** @hidden */
     _accessibilitySetup() {
@@ -252,27 +250,19 @@ class FixedCardLayoutComponent {
     /** @hidden Listen window resize and distribute cards on column change */
     _listenOnResize() {
         resizeObservable(this._layout.nativeElement)
-            .pipe(debounceTime(60), takeUntil(this._onDestroy$))
+            .pipe(debounceTime(60), filter(() => this._skipListenResize), takeUntil(this._onDestroy$))
             .subscribe(() => this.updateLayout());
     }
     /** @hidden Listen card change and distribute cards on column change */
     _listenOnCardsChange() {
-        this._cards.changes.pipe(delay(0)).subscribe(() => {
-            this._processCards();
-            this._updateColumns();
-        });
-    }
-    /** @hidden Renders layout on column changes */
-    _updateColumns() {
-        this._setCardColumns();
-        this._setColumnsWidth(false);
-        this._calculateContainerHeight();
+        this._cards.changes.subscribe(() => this._processCards());
     }
     /** @hidden */
     _processCards() {
         this._cardsArray = this._cards
             .toArray()
             .sort((firstCard, secondCard) => firstCard.fdCardDef - secondCard.fdCardDef);
+        this.updateLayout();
     }
     /** @hidden Distribute cards among columns to arrange them in "Z" flow */
     _setCardColumns() {
@@ -289,14 +279,14 @@ class FixedCardLayoutComponent {
         });
         this._cardColumns = columns;
         this._cardColumns.forEach((column) => {
-            if (column.length > 0 && column.length < 2) {
+            if (column.length === 1) {
                 this._singleItemColumns.add(column[0].fdCardDef);
             }
         });
-        this._listenToCardsSizeChange();
+        this._listenOnCardsSizeChange();
     }
     /** @hidden */
-    _setColumnsWidth(detectChanges = true) {
+    _setCardColumnsWidth() {
         this._columnsWidth = new Map();
         const configPresent = this.columnsWidthConfig &&
             typeof this.columnsWidthConfig === 'object' &&
@@ -311,16 +301,14 @@ class FixedCardLayoutComponent {
             const columnWidth = Math.round(this.cardMinimumWidth + (freeSpace / totalWidthModifiers) * fixedWidthModifiers[index]);
             column.forEach((card) => this._columnsWidth.set(card.fdCardDef, columnWidth));
         });
-        if (detectChanges) {
-            this._changeDetector.detectChanges();
-        }
     }
     /**
      * @hidden
      * Calculate container height accordingly to the the card columns height
      * Parameters used to increase the height of the column where drag'n'drop placeholder currently is
      */
-    _calculateContainerHeight(columnIndexToAddSpace = -1, spaceToAdd = 0) {
+    _setContainerHeight(columnIndexToAddSpace = -1, spaceToAdd = 0) {
+        this._skipListenResize = true;
         this._changeDetector.detectChanges();
         const cardColumns = this._cardColumns.map((column) => column
             .map((card) => this._dragList.find((drag) => !drag._dragRef.isDragging() && drag.data === card)?.element)
@@ -332,9 +320,10 @@ class FixedCardLayoutComponent {
         // +4px because it's the top & bottom borders of card placeholder
         this._containerHeight = Math.max(...columnsHeights) + 4;
         this._changeDetector.detectChanges();
+        this._skipListenResize = false;
     }
     /** @hidden */
-    _listenToCardsSizeChange() {
+    _listenOnCardsSizeChange() {
         this._cardsSizeChangeSubscription.unsubscribe();
         this._cardsSizeChangeSubscription = new Subscription();
         this._changeDetector.detectChanges();
@@ -344,7 +333,7 @@ class FixedCardLayoutComponent {
             .forEach((card) => {
             this._cardsSizeChangeSubscription.add(resizeObservable(card.nativeElement)
                 .pipe(distinct((resizeEntry) => resizeEntry[0].contentRect.height))
-                .subscribe(() => this._calculateContainerHeight()));
+                .subscribe(() => this._setContainerHeight()));
         }));
     }
 }