import * as i0 from '@angular/core';
import { ChangeDetectionStrategy, Component, Input, Directive, EventEmitter, computed, inject, DestroyRef, ChangeDetectorRef, HostListener, ViewChild, ViewChildren, ContentChildren, Output, ViewEncapsulation, NgModule } from '@angular/core';
import { FocusKeyManager } from '@angular/cdk/a11y';
import * as i1 from '@angular/cdk/drag-drop';
import { CdkDropListGroup, DragDropModule, CdkDrag, CdkDropList, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
import { Subscription } from 'rxjs';
import { debounceTime, filter, skip } from 'rxjs/operators';
import { coerceNumberProperty } from '@angular/cdk/coercion';
import { NgTemplateOutlet } from '@angular/common';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { getDocumentFontSize, RtlService, resizeObservable, DndKeyboardGroupDirective, DndKeyboardItemDirective } from '@fundamental-ngx/cdk/utils';

class FixedCardLayoutItemComponent {
    /** @hidden */
    constructor(_elementRef) {
        this._elementRef = _elementRef;
    }
    /** Set focus on the element. */
    focus() {
        const header = this._elementRef.nativeElement.querySelector('.fd-card__header');
        if (header) {
            header.focus();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FixedCardLayoutItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: FixedCardLayoutItemComponent, isStandalone: true, selector: "fd-fixed-card-layout-item", host: { properties: { "style.display": "\"block\"" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FixedCardLayoutItemComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'fd-fixed-card-layout-item',
                    template: `<ng-content></ng-content>`,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    host: {
                        '[style.display]': '"block"'
                    },
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }] });

const REM_IN_PX = getDocumentFontSize();
const CARD_MINIMUM_WIDTH = REM_IN_PX * 20; // 20rem
const CARD_GAP_WIDTH = REM_IN_PX; // 1rem
const DRAG_START_DELAY = 200; // in ms
const MAX_COLUMNS = 10;
let cardRank = 1;
class CardDefinitionDirective {
    /**
     * Behaves like rank of card.
     * Useful in creating layout again after drag and drop.
     */
    set fdCardDef(value) {
        if (!value) {
            return;
        }
        this._fdCardDef = coerceNumberProperty(value);
    }
    get fdCardDef() {
        return this._fdCardDef;
    }
    /** @hidden */
    constructor(template) {
        this.template = template;
        /** @hidden */
        this._fdCardDef = cardRank++;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardDefinitionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: CardDefinitionDirective, isStandalone: true, selector: "[fdCardDef]", inputs: { fdCardDef: "fdCardDef" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardDefinitionDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdCardDef]',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { fdCardDef: [{
                type: Input
            }] } });
class FixedCardLayoutComponent {
    constructor() {
        /** Drag start delay in milliseconds, default to 200ms for safe scrolling on mobile with touchscreen */
        this.dragStartDelay = DRAG_START_DELAY;
        /** Limit the number of columns. Default is 10. */
        this.maxColumns = MAX_COLUMNS;
        /** Event to emit, when layout changes */
        this.layoutChange = new EventEmitter();
        /** Event to emit on Card dragged and dropped */
        this.cardDraggedDropped = new EventEmitter();
        /** @hidden*/
        this._containerHeight = 0;
        /** @hidden handles rtl service */
        this.dir = computed(() => (this._rtlService?.rtl() ? 'rtl' : 'ltr'), ...(ngDevMode ? [{ debugName: "dir" }] : []));
        /** @hidden first number is the CardDefinition rank, i.e. id */
        this._groupIndexes = new Map();
        /** @hidden first number is the CardDefinition rank, i.e. id */
        this._itemIndexes = new Map();
        /** @hidden first number is the CardDefinition rank, i.e. id */
        this._singleItemColumns = new Set();
        /** @hidden */
        this._columnsWidth = new Map();
        /** @hidden */
        this._listenResize = true;
        /** @hidden */
        this._cardMinimumWidth = CARD_MINIMUM_WIDTH;
        /** @hidden */
        this._cardsSizeChangeSubscription = new Subscription();
        /** @hidden  */
        this._destroyRef = inject(DestroyRef);
        /** @hidden */
        this._changeDetector = inject(ChangeDetectorRef);
        /** @hidden */
        this._rtlService = inject(RtlService, { optional: true });
        /** @hidden */
        this._sortPredicateFn = (index) => index === 0;
        /** @hidden For the keyboard drag&drop directive */
        this._customMoveFn = (group, indexFrom, indexTo) => {
            const movedCard = group[indexFrom];
            const replacedCard = group[indexTo];
            const indexFromArray = this._cardsArray.findIndex((card) => card.fdCardDef === movedCard.fdCardDef);
            const indexToArray = this._cardsArray.findIndex((card) => card.fdCardDef === replacedCard.fdCardDef);
            this._processDragDrop(indexFromArray, indexToArray, movedCard, replacedCard);
        };
        /** @hidden For the keyboard drag&drop directive */
        this._customTransferFn = (prevGroup, nextGroup, indexFrom, indexTo) => {
            const movedCard = prevGroup[indexFrom];
            const replacedCard = nextGroup[indexTo];
            const indexFromArray = this._cardsArray.findIndex((card) => card.fdCardDef === movedCard.fdCardDef);
            const indexToArray = this._cardsArray.findIndex((card) => card.fdCardDef === replacedCard.fdCardDef);
            this._processDragDrop(indexFromArray, indexToArray, movedCard, replacedCard);
        };
    }
    /** Card's minimum width in pixels. */
    set cardMinimumWidth(value) {
        const coercedValue = coerceNumberProperty(value);
        if (coercedValue < CARD_MINIMUM_WIDTH) {
            return;
        }
        this._cardMinimumWidth = coercedValue;
    }
    get cardMinimumWidth() {
        return this._cardMinimumWidth;
    }
    /** @hidden Return available width for fixed card layout */
    get _availableWidth() {
        return this._layout.nativeElement.getBoundingClientRect().width;
    }
    /** @hidden */
    handleKeydown(event) {
        event.stopImmediatePropagation();
        if (this._keyboardEventsManager) {
            this._keyboardEventsManager.onKeydown(event);
        }
    }
    /** @hidden */
    ngAfterViewInit() {
        this._processCards();
        this._listenOnResize();
        this._listenOnCardsChange();
        this._accessibilitySetup();
    }
    /** @hidden */
    ngOnChanges(changes) {
        // Skip all changes unless we don't have initial layout created
        if (!this._cardsArray) {
            return;
        }
        if ('maxColumns' in changes || 'cardMinimumWidth' in changes) {
            this.updateLayout();
        }
        else if ('columnsWidthConfig' in changes) {
            this._setCardColumnsWidth();
        }
    }
    /** @hidden */
    ngOnDestroy() {
        this._cardsSizeChangeSubscription.unsubscribe();
        this._keyboardEventsManager?.destroy();
    }
    /** Distribute cards on window resize */
    updateLayout() {
        this._listenResize = false;
        if (this._cards.length) {
            const possibleNumberOfColumns = getNumberOfColumns(this._availableWidth, this.cardMinimumWidth);
            this._numberOfColumns = Math.min(possibleNumberOfColumns, this._cards.length, this.maxColumns || MAX_COLUMNS, MAX_COLUMNS);
        }
        else {
            this._numberOfColumns = 1;
        }
        this.layoutChange.emit({
            numberOfColumns: this._numberOfColumns,
            screenSize: this._availableWidth
        });
        this._setCardColumns();
        this._setCardColumnsWidth();
        this._setContainerHeight();
        this._listenResize = true;
    }
    /** @hidden */
    _onDragStarted(event) {
        this._listenResize = false;
        this._hiddenCard = event.source.data;
    }
    /** @hidden */
    _onDropListEntered(event) {
        const containerItemCardDef = event.container.getSortedItems()[0].data.fdCardDef;
        const dragItemCardDef = event.item.data.fdCardDef;
        this._placeholderMargin = containerItemCardDef !== dragItemCardDef;
        const columnIndexToAddSpace = this._cardColumns.findIndex((column) => column.find((card) => event.container.getSortedItems()[0].data === card));
        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._setContainerHeight(columnIndexToAddSpace, spaceToAdd);
    }
    /** @hidden */
    _onDragDropped(event) {
        this._hiddenCard = null;
        if (event.container.data === event.previousContainer.data) {
            return;
        }
        this._placeholderMargin = false;
        const movedCard = event.previousContainer.getSortedItems()[0].data;
        const replacedCard = event.container.getSortedItems()[0].data;
        const movedCardColumn = this._cardColumns.find((column) => column.find((card) => card.fdCardDef === movedCard.fdCardDef));
        const replacedCardColumn = this._cardColumns.find((column) => column.find((card) => card.fdCardDef === replacedCard.fdCardDef));
        // If we dragged the card from the same column as the column we're dropping into
        // There may be a situation where the order shouldn't change but since there are a different drop lists it will change
        // We should prevent this
        if (movedCardColumn === replacedCardColumn && movedCardColumn?.length === 2) {
            if (movedCard.fdCardDef < replacedCard.fdCardDef && event.previousContainer.data < event.container.data) {
                return;
            }
            if (movedCard.fdCardDef > replacedCard.fdCardDef && event.previousContainer.data > event.container.data) {
                return;
            }
        }
        this._processDragDrop(event.previousContainer.data, event.container.data, movedCard, replacedCard);
    }
    /** @hidden Arranges cards on drop of dragged card */
    _processDragDrop(prevIndex, newIndex, prevCard, newCard) {
        // moveItemInArray from CDK won't work as it changes order of other cards
        const replacedCard = this._cardsArray[newIndex];
        this._cardsArray[newIndex] = this._cardsArray[prevIndex];
        this._cardsArray[prevIndex] = replacedCard;
        adjustCardRank(prevCard, newCard);
        this.cardDraggedDropped.emit({
            previousIndex: prevIndex,
            currentIndex: newIndex,
            layoutColumns: this._numberOfColumns,
            items: this._cards.toArray()
        });
        this.updateLayout();
    }
    /** @hidden */
    _accessibilitySetup() {
        this._keyboardEventsManager?.destroy();
        this._keyboardEventsManager = new FocusKeyManager(this._cardContainers).withWrap();
    }
    /** @hidden Listen window resize and distribute cards on column change */
    _listenOnResize() {
        resizeObservable(this._layout.nativeElement)
            .pipe(debounceTime(20), filter((entries) => this._listenResize && !!(entries[0].contentRect.height || entries[0].contentRect.width)), takeUntilDestroyed(this._destroyRef))
            .subscribe(() => this.updateLayout());
    }
    /** @hidden Listen card change and distribute cards on column change */
    _listenOnCardsChange() {
        this._cards.changes.subscribe(() => {
            this._processCards();
            this.updateLayout();
        });
    }
    /** @hidden */
    _processCards() {
        this._cardsArray = this._cards
            .toArray()
            .sort((firstCard, secondCard) => firstCard.fdCardDef - secondCard.fdCardDef);
    }
    /** @hidden Distribute cards among columns to arrange them in "Z" flow */
    _setCardColumns() {
        this._groupIndexes = new Map();
        this._itemIndexes = new Map();
        this._singleItemColumns = new Set();
        const columns = new Array(this._numberOfColumns).fill(0).map(() => new Array(0));
        this._cardsArray.forEach((card, i) => {
            const currColumnIndex = i % this._numberOfColumns;
            const itemIndex = columns[currColumnIndex].length;
            columns[currColumnIndex].push(card);
            this._groupIndexes.set(card.fdCardDef, currColumnIndex);
            this._itemIndexes.set(card.fdCardDef, itemIndex);
        });
        this._cardColumns = columns;
        this._cardColumns.forEach((column) => {
            if (column.length === 1) {
                this._singleItemColumns.add(column[0].fdCardDef);
            }
        });
        this._listenOnCardsHeightChange();
    }
    /** @hidden */
    _setCardColumnsWidth() {
        this._columnsWidth = new Map();
        const configPresent = this.columnsWidthConfig &&
            typeof this.columnsWidthConfig === 'object' &&
            Object.keys(this.columnsWidthConfig).length;
        if (!configPresent || this._numberOfColumns === 1) {
            return;
        }
        const fixedWidthModifiers = fixWidthModifiers(this.columnsWidthConfig, this._numberOfColumns);
        const totalWidthModifiers = fixedWidthModifiers.reduce((sum, width) => (sum += width), 0);
        const freeSpace = this._availableWidth - this.cardMinimumWidth * this._numberOfColumns;
        this._cardColumns.forEach((column, index) => {
            const columnWidth = Math.round(this.cardMinimumWidth + (freeSpace / totalWidthModifiers) * fixedWidthModifiers[index]);
            column.forEach((card) => this._columnsWidth.set(card.fdCardDef, columnWidth));
        });
    }
    /**
     * @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
     */
    _setContainerHeight(columnIndexToAddSpace = -1, spaceToAdd = 0) {
        this._changeDetector.detectChanges();
        const cardColumns = this._cardColumns.map((column) => column
            .map((card) => this._dragList.find((drag) => drag.data === card))
            .filter((cdkDrag) => !cdkDrag?._dragRef.isDragging() && !!cdkDrag?.element?.nativeElement)
            .map((cdkDrag) => cdkDrag?.element));
        const columnsHeights = cardColumns
            .map((column) => column.map((cardElRef) => cardElRef?.nativeElement.getBoundingClientRect().height || 0))
            .map((column, columnIndex) => column.reduce((cardsHeight, height) => (cardsHeight += height + REM_IN_PX), 0) +
            (columnIndex === columnIndexToAddSpace ? spaceToAdd : 0));
        const prevContainerHeight = this._containerHeight;
        // +4px because it's the top & bottom borders of card placeholder
        this._containerHeight = Math.ceil(Math.max(...columnsHeights) + 4);
        if (this._containerHeight !== prevContainerHeight) {
            this._changeDetector.detectChanges();
        }
    }
    /** @hidden */
    _listenOnCardsHeightChange() {
        this._cardsSizeChangeSubscription.unsubscribe();
        this._cardsSizeChangeSubscription = new Subscription();
        this._changeDetector.detectChanges();
        this._cardColumns.forEach((column) => column
            .map((card) => this._dragList.find((wrapper) => wrapper.data === card)?.element)
            .filter((v) => !!v)
            .forEach((card) => {
            this._cardsSizeChangeSubscription.add(resizeObservable(card.nativeElement)
                .pipe(skip(1), debounceTime(20), filter(() => this._listenResize && !!this._layout.nativeElement.clientHeight))
                .subscribe(() => this._setContainerHeight()));
        }));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FixedCardLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: FixedCardLayoutComponent, isStandalone: true, selector: "fd-fixed-card-layout", inputs: { disableDragDrop: "disableDragDrop", dragStartDelay: "dragStartDelay", cardMinimumWidth: "cardMinimumWidth", columnsWidthConfig: "columnsWidthConfig", maxColumns: "maxColumns" }, outputs: { layoutChange: "layoutChange", cardDraggedDropped: "cardDraggedDropped" }, host: { listeners: { "keydown": "handleKeydown($event)" }, classAttribute: "fd-fixed-card-layout" }, queries: [{ propertyName: "_cards", predicate: CardDefinitionDirective }], viewQueries: [{ propertyName: "_layout", first: true, predicate: ["layout"], descendants: true }, { propertyName: "_cardContainers", predicate: FixedCardLayoutItemComponent, descendants: true }, { propertyName: "_dragList", predicate: CdkDrag, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<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    @for (card of _cardsArray; track card; let cardIndex = $index) {\n        <div\n            cdkDropList\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            [style.display]=\"_hiddenCard === card ? 'none' : 'block'\"\n            [cdkDropListData]=\"cardIndex\"\n            [cdkDropListSortPredicate]=\"_sortPredicateFn\"\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                (cdkDragStarted)=\"_onDragStarted($event)\"\n                (cdkDragDropped)=\"_onDragDropped($event)\"\n            >\n                <fd-fixed-card-layout-item>\n                    <ng-template [ngTemplateOutlet]=\"card?.template || null\"> </ng-template>\n                </fd-fixed-card-layout-item>\n                <div\n                    *cdkDragPlaceholder\n                    class=\"fd-fixed-card-layout__card-placeholder\"\n                    [style.margin-bottom.rem]=\"+_placeholderMargin\"\n                >\n                    <ng-template [ngTemplateOutlet]=\"card?.template || null\"></ng-template>\n                </div>\n            </div>\n        </div>\n    }\n    @for (column of _cardColumns; track column; let last = $last; let index = $index) {\n        @if (!last) {\n            <div class=\"fd-fixed-card-layout__clearfix\" [style.order]=\"index + 1\"></div>\n        }\n    }\n</div>\n", styles: [".fd-fixed-card-layout{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-fixed-card-layout:after,.fd-fixed-card-layout:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__card-layout{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-margin-start:-1rem;display:-webkit-box;display:-ms-flexbox;display:flex;margin-inline-start:-1rem;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column wrap;flex-flow:column wrap;margin-top:-1rem}.fd-fixed-card-layout__card-layout:after,.fd-fixed-card-layout__card-layout:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-2 .fd-fixed-card-layout__card{width:50%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-2 .fd-fixed-card-layout__card:nth-of-type(2n){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-2 .fd-fixed-card-layout__card:nth-of-type(odd){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-3 .fd-fixed-card-layout__card{width:33.3333333333%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-3 .fd-fixed-card-layout__card:nth-of-type(3n){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-3 .fd-fixed-card-layout__card:nth-of-type(3n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-3 .fd-fixed-card-layout__card:nth-of-type(3n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card{width:25%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card:nth-of-type(4n){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card:nth-of-type(4n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card:nth-of-type(4n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card:nth-of-type(4n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card{width:20%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n){-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n+4){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card{width:16.6666666667%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n){-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n+4){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n+5){-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card{width:14.2857142857%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n){-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n+4){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n+5){-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n+6){-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card{width:12.5%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n){-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+4){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+5){-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+6){-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+7){-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card{width:11.1111111111%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n){-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+4){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+5){-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+6){-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+7){-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+8){-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card{width:10%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n){-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+4){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+5){-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+6){-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+7){-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+8){-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+9){-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.fd-fixed-card-layout__card,.fd-fixed-card-layout__card-placeholder{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;min-height:.0625rem;min-width:20rem;padding-block:0;padding-inline:0}.fd-fixed-card-layout__card-placeholder:after,.fd-fixed-card-layout__card-placeholder:before,.fd-fixed-card-layout__card:after,.fd-fixed-card-layout__card:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__card{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-padding-before:1rem;padding-block-start:1rem;-webkit-padding-start:1rem;padding-inline-start:1rem}.fd-fixed-card-layout__card--single{-ms-flex-preferred-size:100%;flex-basis:100%}.fd-fixed-card-layout__card:empty{-webkit-padding-before:0;padding-block-start:0}.fd-fixed-card-layout__card-placeholder{border:.125rem dashed var(--sapContent_DragAndDropActiveColor);cursor:-webkit-grabbing;cursor:grabbing;opacity:.3}.fd-fixed-card-layout__card-preview{border:0;border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-shadow:var(--sapContent_Shadow2);box-shadow:var(--sapContent_Shadow2);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-fixed-card-layout__card-preview:after,.fd-fixed-card-layout__card-preview:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__clearfix{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:0;-ms-flex-preferred-size:100%;flex-basis:100%}.fd-fixed-card-layout__clearfix:after,.fd-fixed-card-layout__clearfix:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__card{width:100%}.fd-fixed-card-layout__card-layout{align-items:flex-start}.fd-fixed-card-layout__card-placeholder{width:100%;min-width:100%;max-width:100%}\n/*! Bundled license information:\n\nfundamental-styles/dist/fixed-card-layout.css:\n  (*!\n   * Fundamental Library Styles v0.40.1\n   * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: DndKeyboardGroupDirective, selector: "[fdkDndKeyboardGroup], [fdDndKeyboardGroup]", inputs: ["groups", "disableKeyboardDragDrop", "orientation", "customMoveFn", "customTransferFn"] }, { kind: "directive", type: DndKeyboardItemDirective, selector: "[fdkDndKeyboardItem], [fdDndKeyboardItem]", inputs: ["itemIndex", "groupIndex"] }, { kind: "component", type: FixedCardLayoutItemComponent, selector: "fd-fixed-card-layout-item" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FixedCardLayoutComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-fixed-card-layout', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        class: 'fd-fixed-card-layout'
                    }, standalone: true, imports: [
                        CdkDropListGroup,
                        DragDropModule,
                        DndKeyboardGroupDirective,
                        DndKeyboardItemDirective,
                        CdkDropList,
                        CdkDrag,
                        FixedCardLayoutItemComponent,
                        NgTemplateOutlet,
                        CdkDragPlaceholder
                    ], template: "<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    @for (card of _cardsArray; track card; let cardIndex = $index) {\n        <div\n            cdkDropList\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            [style.display]=\"_hiddenCard === card ? 'none' : 'block'\"\n            [cdkDropListData]=\"cardIndex\"\n            [cdkDropListSortPredicate]=\"_sortPredicateFn\"\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                (cdkDragStarted)=\"_onDragStarted($event)\"\n                (cdkDragDropped)=\"_onDragDropped($event)\"\n            >\n                <fd-fixed-card-layout-item>\n                    <ng-template [ngTemplateOutlet]=\"card?.template || null\"> </ng-template>\n                </fd-fixed-card-layout-item>\n                <div\n                    *cdkDragPlaceholder\n                    class=\"fd-fixed-card-layout__card-placeholder\"\n                    [style.margin-bottom.rem]=\"+_placeholderMargin\"\n                >\n                    <ng-template [ngTemplateOutlet]=\"card?.template || null\"></ng-template>\n                </div>\n            </div>\n        </div>\n    }\n    @for (column of _cardColumns; track column; let last = $last; let index = $index) {\n        @if (!last) {\n            <div class=\"fd-fixed-card-layout__clearfix\" [style.order]=\"index + 1\"></div>\n        }\n    }\n</div>\n", styles: [".fd-fixed-card-layout{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-fixed-card-layout:after,.fd-fixed-card-layout:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__card-layout{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-margin-start:-1rem;display:-webkit-box;display:-ms-flexbox;display:flex;margin-inline-start:-1rem;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column wrap;flex-flow:column wrap;margin-top:-1rem}.fd-fixed-card-layout__card-layout:after,.fd-fixed-card-layout__card-layout:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-2 .fd-fixed-card-layout__card{width:50%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-2 .fd-fixed-card-layout__card:nth-of-type(2n){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-2 .fd-fixed-card-layout__card:nth-of-type(odd){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-3 .fd-fixed-card-layout__card{width:33.3333333333%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-3 .fd-fixed-card-layout__card:nth-of-type(3n){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-3 .fd-fixed-card-layout__card:nth-of-type(3n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-3 .fd-fixed-card-layout__card:nth-of-type(3n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card{width:25%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card:nth-of-type(4n){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card:nth-of-type(4n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card:nth-of-type(4n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card:nth-of-type(4n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card{width:20%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n){-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n+4){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card{width:16.6666666667%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n){-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n+4){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n+5){-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card{width:14.2857142857%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n){-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n+4){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n+5){-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n+6){-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card{width:12.5%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n){-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+4){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+5){-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+6){-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n+7){-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card{width:11.1111111111%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n){-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+4){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+5){-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+6){-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+7){-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n+8){-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card{width:10%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n){-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+1){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+2){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+4){-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+5){-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+6){-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+7){-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+8){-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n+9){-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.fd-fixed-card-layout__card,.fd-fixed-card-layout__card-placeholder{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;min-height:.0625rem;min-width:20rem;padding-block:0;padding-inline:0}.fd-fixed-card-layout__card-placeholder:after,.fd-fixed-card-layout__card-placeholder:before,.fd-fixed-card-layout__card:after,.fd-fixed-card-layout__card:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__card{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-padding-before:1rem;padding-block-start:1rem;-webkit-padding-start:1rem;padding-inline-start:1rem}.fd-fixed-card-layout__card--single{-ms-flex-preferred-size:100%;flex-basis:100%}.fd-fixed-card-layout__card:empty{-webkit-padding-before:0;padding-block-start:0}.fd-fixed-card-layout__card-placeholder{border:.125rem dashed var(--sapContent_DragAndDropActiveColor);cursor:-webkit-grabbing;cursor:grabbing;opacity:.3}.fd-fixed-card-layout__card-preview{border:0;border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-shadow:var(--sapContent_Shadow2);box-shadow:var(--sapContent_Shadow2);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-fixed-card-layout__card-preview:after,.fd-fixed-card-layout__card-preview:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__clearfix{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:0;-ms-flex-preferred-size:100%;flex-basis:100%}.fd-fixed-card-layout__clearfix:after,.fd-fixed-card-layout__clearfix:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__card{width:100%}.fd-fixed-card-layout__card-layout{align-items:flex-start}.fd-fixed-card-layout__card-placeholder{width:100%;min-width:100%;max-width:100%}\n/*! Bundled license information:\n\nfundamental-styles/dist/fixed-card-layout.css:\n  (*!\n   * Fundamental Library Styles v0.40.1\n   * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"] }]
        }], propDecorators: { disableDragDrop: [{
                type: Input
            }], dragStartDelay: [{
                type: Input
            }], cardMinimumWidth: [{
                type: Input
            }], columnsWidthConfig: [{
                type: Input
            }], maxColumns: [{
                type: Input
            }], layoutChange: [{
                type: Output
            }], cardDraggedDropped: [{
                type: Output
            }], _cards: [{
                type: ContentChildren,
                args: [CardDefinitionDirective]
            }], _cardContainers: [{
                type: ViewChildren,
                args: [FixedCardLayoutItemComponent]
            }], _dragList: [{
                type: ViewChildren,
                args: [CdkDrag]
            }], _layout: [{
                type: ViewChild,
                args: ['layout']
            }], handleKeydown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });
/** @hidden */
function fixWidthModifiers(config, numberOfColumns) {
    const modifiers = new Array(numberOfColumns).fill(0);
    return modifiers.map((_, index) => {
        const columnWidthModifier = config[index + 1];
        if (!columnWidthModifier || columnWidthModifier < 0) {
            return 0;
        }
        return columnWidthModifier;
    });
}
/** @hidden Returns number of columns that can fit in current available width for fd-card-layout */
function getNumberOfColumns(containerWidth, cardWidth) {
    containerWidth = containerWidth || 1;
    cardWidth = cardWidth || 1;
    const numberOfCardsWithNoGap = Math.max(Math.floor(containerWidth / cardWidth), 1); // Example: 960 / 320 = 3
    const requiredWidthWithGap = numberOfCardsWithNoGap * cardWidth + (numberOfCardsWithNoGap - 1) * CARD_GAP_WIDTH;
    const columnCount = requiredWidthWithGap > containerWidth ? numberOfCardsWithNoGap - 1 : numberOfCardsWithNoGap;
    return Math.max(columnCount, 1);
}
/** @hidden Method to update rank after cards are dragged */
function adjustCardRank(draggedCard, replacedCard) {
    const draggedCardRank = draggedCard.fdCardDef;
    draggedCard.fdCardDef = replacedCard.fdCardDef;
    replacedCard.fdCardDef = draggedCardRank;
}

const components = [FixedCardLayoutComponent, CardDefinitionDirective, FixedCardLayoutItemComponent];
/**
 * @deprecated
 * Use direct imports of components and directives.
 */
class FixedCardLayoutModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FixedCardLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: FixedCardLayoutModule, imports: [FixedCardLayoutComponent, CardDefinitionDirective, FixedCardLayoutItemComponent], exports: [FixedCardLayoutComponent, CardDefinitionDirective, FixedCardLayoutItemComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FixedCardLayoutModule, imports: [FixedCardLayoutComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FixedCardLayoutModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...components],
                    exports: [...components]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { CardDefinitionDirective, FixedCardLayoutComponent, FixedCardLayoutItemComponent, FixedCardLayoutModule };
//# sourceMappingURL=fundamental-ngx-core-fixed-card-layout.mjs.map
