import * as i0 from '@angular/core';
import { EventEmitter, inject, HostListener, Output, HostBinding, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, DestroyRef, computed, ContentChildren, NgModule } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { RtlService } from '@fundamental-ngx/cdk/utils';
import { Subscription } from 'rxjs';
import { FocusKeyManager } from '@angular/cdk/a11y';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

// Card resizes in step of fixed values. values are in pixel
const horizontalResizeStep = 320;
// vertical resize step
const verticalResizeStep = 16;
// gap of 1rem between the cards
const gap = 16;
// threshold offset for horizontal resizing.
const horizontalResizeOffset = 160;
// threshold offset for vertical resizing.
const verticalResizeOffset = 8;
// card is given numeric value, on which sorting of cards is done
let cardRank = 1;
let cardUniqueId = 0;
class ResizableCardItemComponent {
    /** Card properties from the config */
    set config(config) {
        this._config = config;
        this._initialSetup();
        this._cd.detectChanges();
    }
    get config() {
        return this._config;
    }
    /**
     * Serial order of card.
     * cards are sorted based on ranks before displaying layout.
     * card with lower rank will be displayed first in layout than the card with higher rank.
     */
    set rank(rankValue) {
        // determine max value between user given value and default value
        this._rank = rankValue ? rankValue : cardRank++;
        if (rankValue > cardRank) {
            cardRank = rankValue;
        }
    }
    get rank() {
        return this._rank;
    }
    /**
     * Number of column span card width takes.
     * It will be in step of 20rem.
     */
    set cardWidthColSpan(colSpan) {
        this._cardWidthColSpan = colSpan;
        this._setCardWidth();
    }
    get cardWidthColSpan() {
        return this._cardWidthColSpan;
    }
    /**
     * Number of row span, card height takes.
     * It will be in the step of 1rem.
     */
    set cardHeightRowSpan(rowSpan) {
        this._cardHeightRowSpan = rowSpan;
        this._setCardHeight();
    }
    get cardHeightRowSpan() {
        return this._cardHeightRowSpan;
    }
    /**
     * Number of row span card mini header height takes.
     * Mini Header: The smallest representation of the card is the header.
     * The card can be collapsed to only its header height.
     */
    set cardMiniHeaderRowSpan(rowSpan) {
        this._cardMiniHeaderRowSpan = rowSpan;
        this._setCardMiniHeaderHeight();
    }
    get cardMiniHeaderRowSpan() {
        return this._cardMiniHeaderRowSpan;
    }
    /**
     * Number of row span card mini content height takes.
     * Mini Content: The minimum height for the card content depends on the card type,
     * and must be as high as the smallest representation of the content.
     */
    set cardMiniContentRowSpan(rowSpan) {
        this._cardMiniContentRowSpan = rowSpan;
        this._setCardMiniContentHeight();
    }
    get cardMiniContentRowSpan() {
        return this._cardMiniContentRowSpan ?? 0;
    }
    /** @hidden */
    constructor(_cd, elementRef) {
        this._cd = _cd;
        this.elementRef = elementRef;
        /** set uinque id for the card */
        this.itemId = `fd-card-item-${cardUniqueId++}`;
        /** Card can be set to resizable=false, to restrict card resize */
        this.resizable = true;
        /** Set top position for the card*/
        this.top = 0;
        /** @hidden while resizing this value will change to a greater value */
        this.zIndex = 0;
        /** @hidden */
        this.position = 'absolute';
        /** @hidden transition animation when layout re-draws */
        this.reDrawAnimation = true;
        /** Emits when card is still resizing */
        this.resizing = new EventEmitter();
        /** Emits when card resize is completed */
        this.resized = new EventEmitter();
        /** Emits when card height is reduced to show only header */
        this.miniHeaderReached = new EventEmitter();
        /** Emits when minimum height of card content area is reached */
        this.miniContentReached = new EventEmitter();
        /** show corner resize icon on hover over card */
        this.showingResizeIcon = false;
        /** show border when card is resizing */
        this.showBorder = false;
        /** card width in px. Default value to 20rem */
        this.cardWidth = horizontalResizeStep;
        /** Outer resize indication border width for the card */
        this.resizeIndicationBorderWidth = 0;
        /**
         * Denotes if card is currently expanding or contracting horizontally.
         * +1 denotes increasing, -1 denotes decreasing and 0 denotes card-state has not changed horizontally.
         */
        this.cardState = 0;
        /** Change in rank from previous value*/
        this.prevRank = 0;
        /** @hidden Default width of card is 20rem ie. 1 column */
        this._cardWidthColSpan = 1;
        /** @hidden flag to control resize */
        this._resize = false;
        /**
         * @hidden stores original width span of card.
         * It may reduce on small screen, so have to restore using this.
         */
        this._originalCardWidthSpan = 0;
        /** @hidden */
        this._subscriptions = new Subscription();
        /** @hidden */
        this._rtlService = inject(RtlService, { optional: true });
    }
    /**
     * @hidden When mouse moves to resize the card.
     * using window:mousemove so, resize will happen smoothly
     * @param event {MouseEvent}
     */
    onMouseMove(event) {
        event.preventDefault();
        if (!this.resizable) {
            return;
        }
        // saves from un-necessary resize
        if (!this._resize) {
            return;
        }
        if (!this.showBorder) {
            this.showBorder = true;
        }
        // resizing card will go over other cards
        this.zIndex = 1;
        const { clientX, clientY } = event;
        switch (this._resizeDirection) {
            case 'both':
                this._horizontalResizing(clientX);
                this._verticalResizing(clientY);
                break;
            case 'horizontal':
                this._horizontalResizing(clientX);
                break;
            case 'vertical':
                this._verticalResizing(clientY);
                break;
            default:
                this._horizontalResizing(clientX);
                this._verticalResizing(clientY);
        }
        const cardWidthColSpan = Math.floor(this.cardWidth / horizontalResizeStep);
        const cardWidthWithColumn = cardWidthColSpan * horizontalResizeStep + cardWidthColSpan * gap;
        const horizontalResizeThresholdReached = this.cardWidth - cardWidthWithColumn > horizontalResizeOffset;
        if (clientX > this._prevX) {
            // increasing width
            this.cardState = 1;
            if (horizontalResizeThresholdReached) {
                const futureCardWidth = (cardWidthColSpan + 1) * horizontalResizeStep + cardWidthColSpan * gap;
                this.resizeIndicationBorderWidth = futureCardWidth - this.cardWidth;
            }
            else {
                this.resizeIndicationBorderWidth = 0;
            }
        }
        else if (clientX < this._prevX) {
            // decreasing width
            this.cardState = -1;
            if (horizontalResizeThresholdReached) {
                const futureCardWidth = (cardWidthColSpan + 1) * horizontalResizeStep + cardWidthColSpan * gap;
                this.resizeIndicationBorderWidth = futureCardWidth - this.cardWidth;
            }
            else {
                this.resizeIndicationBorderWidth = 0;
            }
        }
        this._prevX = clientX;
        this._prevY = clientY;
        this._cd.detectChanges();
        // Emits resizing event.
        this.resizing.emit(this.getResizedEventObject());
    }
    /**
     * when resizing of card stops
     */
    onMouseUp() {
        if (!this.resizable) {
            return;
        }
        // if card was not resizing
        if (!this._resize) {
            return;
        }
        // increase/decrease width of card in order of 20rem
        if (Math.abs(this.cardWidth - this._prevCardWidth) > 0) {
            this._horizontalStepResizing();
        }
        // increase/decrease height of card in order of 1rem
        if (Math.abs(this.cardHeight - this._prevCardHeight) > 0) {
            this._verticalStepResizing();
        }
        this._stopResizing();
        this._cd.markForCheck();
    }
    /** @hidden */
    ngOnDestroy() {
        this._subscriptions.unsubscribe();
    }
    /**
     * When resize handler is pressed and resizing may start.
     * @param event {MouseEvent}
     * @param resizeDirection which handler is pressed to resize
     */
    onMouseDown(event, resizeDirection) {
        event.preventDefault();
        if (!this.resizable) {
            return;
        }
        this.showingResizeIcon = true;
        this._resize = true;
        this._prevX = event.clientX;
        this._prevY = event.clientY;
        this._prevCardWidth = this.cardWidth;
        this._prevCardHeight = this.cardHeight;
        this._resizeDirection = resizeDirection;
    }
    /** Sets focus on the element */
    focus() {
        const header = this.elementRef.nativeElement.querySelector('.fd-card__header');
        header?.focus();
    }
    /** Shows resize icon */
    showResizeIcon() {
        if (!this.resizable) {
            return;
        }
        this.showingResizeIcon = true;
    }
    /** Hides resize icon */
    hideResizeIcon() {
        if (!this._resize) {
            this.showingResizeIcon = false;
        }
    }
    /** Returns max width for card, based on layout size passed */
    getMaxColSpan(layoutSize) {
        switch (layoutSize) {
            case 'sm':
                this._maxColumn = 1;
                break;
            case 'md':
                this._maxColumn = 2;
                break;
            case 'lg':
                this._maxColumn = 3;
                break;
            case 'xl':
                this._maxColumn = 4;
                break;
            default:
                this._maxColumn = 1;
        }
        return this._maxColumn;
    }
    /** Update card width if it exceeds column span based on layout */
    verifyUpdateCardWidth(layoutSize) {
        const widthColSpan = this._config?.cardWidthColSpan || this.cardWidthColSpan;
        // storing original width of card.
        // used to restore width on window resize from small to large
        this._originalCardWidthSpan = !this._originalCardWidthSpan ? widthColSpan : this._originalCardWidthSpan;
        this._maxColumn = this.getMaxColSpan(layoutSize);
        if (widthColSpan > this._maxColumn) {
            this.cardWidthColSpan = this._maxColumn;
            this._setCardWidth();
            // Emits resized event.
            this.resized.emit(this.getResizedEventObject());
        }
        else {
            // keep card width minimum, so it can fit in screen.
            this.cardWidthColSpan = Math.min(this._maxColumn, this._originalCardWidthSpan);
            this._setCardWidth();
            // Emits resized event.
            this.resized.emit(this.getResizedEventObject());
        }
    }
    /** Returns ResizedEvent object to emit. */
    getResizedEventObject() {
        const newCardHeightRowSpan = Math.floor(this.cardHeight / verticalResizeStep);
        const newCardWidthColSpan = Math.floor(this.cardWidth / horizontalResizeStep);
        const newCardWidth = newCardWidthColSpan * horizontalResizeStep + newCardWidthColSpan * gap;
        const horizontalResizeThresholdReached = this.cardWidth - newCardWidth > horizontalResizeOffset;
        const newCardColSpan = horizontalResizeThresholdReached ? newCardWidthColSpan + 1 : newCardWidthColSpan;
        return new ResizedEvent(this, this._prevCardWidth, this._prevCardHeight, this.cardWidth, this.cardHeight, this._cardWidthColSpan, this._cardHeightRowSpan, newCardColSpan, newCardHeightRowSpan);
    }
    /** @hidden Return previous height row span of the card */
    get previousCardHeightRowSpan() {
        return this._prevCardHeightRowSpan;
    }
    /** @hidden Set card properties using config received */
    _initialSetup() {
        this.cardWidthColSpan = this._config?.cardWidthColSpan || this.cardWidthColSpan;
        this.cardHeightRowSpan = this._config?.cardHeightRowSpan || this.cardHeightRowSpan;
        this.title = this._config?.title || this.title;
        this.rank = this._config?.rank || this.rank;
        this.cardMiniHeaderRowSpan = this._config?.cardMiniHeaderRowSpan || this.cardMiniHeaderRowSpan;
        this.cardMiniContentRowSpan = this._config?.cardMiniContentRowSpan || this.cardMiniContentRowSpan;
        this.resizable = this._config.resizable || this.resizable;
    }
    /** @hidden Returns true when resize offset is crossed */
    _horizontalResizeWithOffset() {
        // positive value indicates that width has increased
        const widthIncrement = this.cardWidth - this._prevCardWidth;
        const cardSpan = Math.floor(this.cardWidth / horizontalResizeStep);
        const cardSpanFraction = this.cardWidth % horizontalResizeStep;
        // when width increases
        if (widthIncrement > 0) {
            if (widthIncrement < horizontalResizeOffset + gap) {
                // widthIncrement is less than offset, do not increase width
                this.cardWidth = this._prevCardWidth;
            }
            else {
                // check value of cardSpanFraction, including gaps in cards
                const isCardSpanFractionCrossingOffset = cardSpanFraction - (cardSpan - 1) * gap > horizontalResizeOffset;
                this.cardWidth = isCardSpanFractionCrossingOffset
                    ? (cardSpan + 1) * horizontalResizeStep
                    : cardSpan * horizontalResizeStep;
            }
        }
        else {
            // when width decreases
            if (Math.abs(widthIncrement) < horizontalResizeOffset) {
                // widthIncrement is less than offset, do not decrease width
                this.cardWidth = this._prevCardWidth;
            }
            else {
                // check value of cardSpanFraction, including gaps in cards
                const isCardSpanFractionCrossingOffset = cardSpanFraction - cardSpan * gap > horizontalResizeOffset;
                this.cardWidth = isCardSpanFractionCrossingOffset
                    ? (cardSpan + 1) * horizontalResizeStep
                    : cardSpan * horizontalResizeStep;
            }
        }
    }
    /**
     * @hidden make horizontal resize only on step of 20rem
     */
    _horizontalStepResizing() {
        this._horizontalResizeWithOffset();
        // Add inner gap in  cardWidth if width is more than 1 column
        if (this.cardWidth > horizontalResizeStep) {
            this.cardWidth = this.cardWidth + (this.cardWidth / horizontalResizeStep - 1) * gap;
        }
        this.cardWidthColSpan = Math.floor(this.cardWidth / horizontalResizeStep);
    }
    /**
     * @hidden make vertical resize only on step of 1rem
     */
    _verticalStepResizing() {
        // positive value indicates that height has increased
        const cardHeightSpan = Math.floor(this.cardHeight / verticalResizeStep);
        const cardSpanFraction = this.cardHeight % verticalResizeStep;
        this.cardHeight =
            cardSpanFraction > verticalResizeOffset
                ? (cardHeightSpan + 1) * verticalResizeStep
                : cardHeightSpan * verticalResizeStep;
        this.cardHeightRowSpan = Math.floor(this.cardHeight / verticalResizeStep);
    }
    /**
     * @hidden Resize card horizontally by checking boundary condition
     * @param xPosition current x-position of cursor
     */
    _horizontalResizing(xPosition) {
        const difference = this._prevX - xPosition;
        this.cardWidth = this._rtlService?.rtl() ? this.cardWidth + difference : this.cardWidth - difference;
        const totalIndentation = (this._maxColumn - 1) * gap;
        const maxCardWidtWithoutIndentation = this._maxColumn * horizontalResizeStep;
        const maxCardWidth = this._rtlService?.rtl()
            ? maxCardWidtWithoutIndentation - totalIndentation
            : maxCardWidtWithoutIndentation + totalIndentation;
        if (this.cardWidth > maxCardWidth) {
            this.cardWidth = maxCardWidth;
        }
        else if (this.cardWidth < horizontalResizeStep) {
            this.cardWidth = horizontalResizeStep;
        }
    }
    /**
     * @hidden Resize card vertically.
     * takes care of mini-header height and mini-content height
     * @param yPosition current y-position of cursor
     */
    _verticalResizing(yPosition) {
        let reachingMiniHeader = false;
        if (this.cardHeight === this.cardMiniHeaderHeight) {
            // if card height is already at mini-header height
            if (this._prevY - yPosition > 0) {
                // decreasing height
                // if miniHeader height reached, stop resizing
                this.cardHeight = this.cardMiniHeaderHeight;
                this._prevCardHeightRowSpan = this._cardHeightRowSpan;
                this._cardHeightRowSpan = Math.floor(this.cardHeight / verticalResizeStep);
            }
            else {
                // increasing height
                this.cardHeight = this.cardMiniHeaderHeight + this.cardMiniContentHeight;
                this._prevCardHeightRowSpan = this._cardHeightRowSpan;
                this._cardHeightRowSpan = Math.floor(this.cardHeight / verticalResizeStep);
                this._stopResizing();
                this.miniContentReached.emit(this.getResizedEventObject());
            }
        }
        else if (this.cardHeight < this.cardMiniContentHeight + this.cardMiniHeaderHeight) {
            // if card height is between mini-header and mini-content
            if (this._prevY - yPosition < 0) {
                this.cardHeight = this.cardMiniHeaderHeight + this.cardMiniContentHeight;
                this._prevCardHeightRowSpan = this._cardHeightRowSpan;
                this._cardHeightRowSpan = Math.floor(this.cardHeight / verticalResizeStep);
                this._stopResizing();
                this.miniContentReached.emit(this.getResizedEventObject());
            }
        }
        else if (this.cardHeight === this.cardMiniContentHeight + this.cardMiniHeaderHeight &&
            this._prevY - yPosition > 0) {
            // decreasing height
            // height decreasing after reaching mini-content. this needs to differentiate
            // from height decreasing and reaching to mini-content.
            reachingMiniHeader = true;
            this.cardHeight = this.cardMiniHeaderHeight;
            this._prevCardHeightRowSpan = this._cardHeightRowSpan;
            this._cardHeightRowSpan = Math.floor(this.cardHeight / verticalResizeStep);
            // miniHeader height reached, stop resizing
            this._stopResizing();
            this.miniHeaderReached.emit(this.getResizedEventObject());
        }
        else {
            this.cardHeight = this.cardHeight - (this._prevY - yPosition);
            this._prevCardHeightRowSpan = this._cardHeightRowSpan;
            this._cardHeightRowSpan = Math.floor(this.cardHeight / verticalResizeStep);
        }
        // stop resizing on miniContent height
        if (this.cardHeight <= this.cardMiniContentHeight + this.cardMiniHeaderHeight &&
            this._prevY - yPosition > 0 &&
            !reachingMiniHeader) {
            this.cardHeight = this.cardMiniContentHeight + this.cardMiniHeaderHeight;
            this._prevCardHeightRowSpan = this._cardHeightRowSpan;
            this._cardHeightRowSpan = Math.floor(this.cardHeight / verticalResizeStep);
            this.miniContentReached.emit(this.getResizedEventObject());
            this._stopResizing();
        }
        // while corner resize, width might have increased and reached to mini-content height.
        // so, on mini-content resize will stop, but have to do step resizing for vertical and horizontal.
        if (!this._resize) {
            // increase/decrease width of card in order of 20rem
            if (Math.abs(this.cardWidth - this._prevCardWidth) > 0) {
                this._horizontalStepResizing();
            }
            // increase/decrease height of card in order of 1rem
            if (Math.abs(this.cardHeight - this._prevCardHeight) > 0) {
                this._verticalStepResizing();
            }
        }
    }
    /** @hidden reset involved variables while resizing */
    _stopResizing() {
        if (this._resize) {
            this.cardState = 0;
            this.resizeIndicationBorderWidth = 0;
            this._resize = false;
            this.zIndex = 0;
            this.showBorder = false;
            this.resized.emit(this.getResizedEventObject());
        }
    }
    /** @hidden Returns cardWidth based on card column span */
    _setCardWidth() {
        this.cardWidth = this._cardWidthColSpan * horizontalResizeStep + (this._cardWidthColSpan - 1) * gap;
        this._cd.markForCheck();
    }
    /** @hidden Returns cardHeight based on card row span */
    _setCardHeight() {
        this.cardHeight = this._cardHeightRowSpan * verticalResizeStep;
        this._cd.markForCheck();
    }
    /** @hidden Returns card mini header height */
    _setCardMiniHeaderHeight() {
        this.cardMiniHeaderHeight = this._cardMiniHeaderRowSpan * verticalResizeStep;
        this._cd.markForCheck();
    }
    /** @hidden Returns card mini content height */
    _setCardMiniContentHeight() {
        this.cardMiniContentHeight = this.cardMiniContentRowSpan * verticalResizeStep;
        this._cd.markForCheck();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResizableCardItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ResizableCardItemComponent, isStandalone: true, selector: "fd-resizable-card-item", inputs: { config: "config", itemId: "itemId", title: "title", rank: "rank", cardWidthColSpan: "cardWidthColSpan", cardHeightRowSpan: "cardHeightRowSpan", cardMiniHeaderRowSpan: "cardMiniHeaderRowSpan", cardMiniContentRowSpan: "cardMiniContentRowSpan", resizable: "resizable", left: "left", right: "right", top: "top" }, outputs: { resizing: "resizing", resized: "resized", miniHeaderReached: "miniHeaderReached", miniContentReached: "miniContentReached" }, host: { listeners: { "window:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()" }, properties: { "style.left.px": "this.left", "style.right.px": "this.right", "style.top.px": "this.top", "style.z-index": "this.zIndex", "style.position": "this.position", "class.fd-resizable-card-layout__draw-transition": "this.reDrawAnimation" } }, ngImport: i0, template: "<div\n    class=\"fd-resizable-card-layout__item\"\n    [class.fd-resizable-card-layout__indication-border]=\"showBorder\"\n    #resizeCard\n>\n    <div\n        class=\"fd-resizable-card-layout__item--border-display fd-resizable-card-layout__item--resize-transition\"\n        [style.width.px]=\"cardWidth\"\n        [style.height.px]=\"cardHeight\"\n        (mouseenter)=\"showResizeIcon()\"\n        (mouseleave)=\"hideResizeIcon()\"\n    >\n        <div class=\"fd-resizable-card-layout__card\">\n            <ng-content></ng-content>\n            @if (showingResizeIcon) {\n                <div class=\"fd-resizable-card-layout__icon-wrapper\" role=\"presentation\" aria-hidden=\"true\">\n                    <div\n                        class=\"fd-resizable-card-layout__icon\"\n                        #cornerHandle\n                        (mousedown)=\"onMouseDown($event, 'both')\"\n                    ></div>\n                </div>\n            }\n        </div>\n        @if (resizable) {\n            <ng-template [ngTemplateOutlet]=\"verticalHandleTemplate\"></ng-template>\n            <ng-template [ngTemplateOutlet]=\"horizontalHandleTemplate\"></ng-template>\n        }\n    </div>\n    <div\n        class=\"fd-resizable-card-layout__item--resize-transition\"\n        [style.width.px]=\"resizeIndicationBorderWidth\"\n        [style.height.px]=\"cardHeight\"\n    ></div>\n</div>\n<ng-template #verticalHandleTemplate>\n    <div\n        #verticalHandle\n        class=\"fd-resizable-card-layout__resize--vertical\"\n        (mousedown)=\"onMouseDown($event, 'horizontal')\"\n    ></div>\n</ng-template>\n<ng-template #horizontalHandleTemplate>\n    <div\n        #horizontalHandle\n        class=\"fd-resizable-card-layout__resize--horizontal\"\n        (mousedown)=\"onMouseDown($event, 'vertical')\"\n    ></div>\n</ng-template>\n", styles: [".fd-resizable-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;margin-top:1rem;padding-block:0;padding-inline:0;padding-inline:.5rem;position:relative}.fd-resizable-card-layout:after,.fd-resizable-card-layout:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;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-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:20rem;position:relative}.fd-resizable-card-layout__item:after,.fd-resizable-card-layout__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__card{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-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1;flex:1;height:calc(100% - .0625rem);position:relative}.fd-resizable-card-layout__card:after,.fd-resizable-card-layout__card:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__icon-wrapper{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.5rem;line-height:normal;margin-block:0;margin-inline:0;min-width:1.5rem;padding-block:0;padding-inline:0;width:1.5rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:start;-ms-flex-pack:start;bottom:-.35rem;justify-content:flex-start;position:absolute;right:0;z-index:2}.fd-resizable-card-layout__icon-wrapper:after,.fd-resizable-card-layout__icon-wrapper:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__icon-wrapper[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon-wrapper{bottom:-.125rem;left:-.25rem;right:auto}.fd-resizable-card-layout__icon{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1rem;line-height:normal;margin-block:0;margin-inline:0;min-width:1rem;padding-block:0;padding-inline:0;width:1rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--sapButton_Lite_TextColor);cursor:nwse-resize;font-family:SAP-icons;font-size:1rem;height:100%;line-height:1rem;position:absolute;width:100%;z-index:2}.fd-resizable-card-layout__icon:after,.fd-resizable-card-layout__icon:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__icon:before{content:\"\\e24f\";font-family:SAP-icons;height:100%;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none;width:100%}.fd-resizable-card-layout__icon[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon{cursor:nesw-resize;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fd-resizable-card-layout__icon--vertical,.fd-resizable-card-layout__icon--vertical[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon--vertical{cursor:ns-resize}.fd-resizable-card-layout__icon--horizontal,.fd-resizable-card-layout__icon--horizontal[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon--horizontal{cursor:ew-resize}.fd-resizable-card-layout__resize--vertical{-webkit-box-ordinal-group:3;-ms-flex-order:2;cursor:ew-resize;order:2;width:.0625rem;z-index:2}.fd-resizable-card-layout__resize--vertical::content{content:\"\";position:absolute}.fd-resizable-card-layout__resize--horizontal{bottom:0;cursor:ns-resize;height:.0625rem;position:absolute;width:calc(100% - .5rem);z-index:2}.fd-resizable-card-layout__indication-border{border:0;border:.125rem dashed var(--sapContent_DragAndDropActiveColor);-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-resizable-card-layout__indication-border:after,.fd-resizable-card-layout__indication-border:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout--sm{padding-inline:.5rem}.fd-resizable-card-layout--lg,.fd-resizable-card-layout--md{padding-inline:1rem}.fd-resizable-card-layout--xl{padding-inline:3rem}.fd-resizable-card-layout__item--resize-transition{transition-duration:.25s;animation-timing-function:ease-in-out}.fd-resizable-card-layout__draw-transition{transition-duration:.5s;animation-timing-function:ease-in}.fd-resizable-card-layout__item--border-display{display:flex}\n/*! Bundled license information:\n\nfundamental-styles/dist/resizable-card-layout.css:\n  (*!\n   * Fundamental Library Styles v0.41.7\n   * Copyright (c) 2026 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: 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: ResizableCardItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-resizable-card-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], template: "<div\n    class=\"fd-resizable-card-layout__item\"\n    [class.fd-resizable-card-layout__indication-border]=\"showBorder\"\n    #resizeCard\n>\n    <div\n        class=\"fd-resizable-card-layout__item--border-display fd-resizable-card-layout__item--resize-transition\"\n        [style.width.px]=\"cardWidth\"\n        [style.height.px]=\"cardHeight\"\n        (mouseenter)=\"showResizeIcon()\"\n        (mouseleave)=\"hideResizeIcon()\"\n    >\n        <div class=\"fd-resizable-card-layout__card\">\n            <ng-content></ng-content>\n            @if (showingResizeIcon) {\n                <div class=\"fd-resizable-card-layout__icon-wrapper\" role=\"presentation\" aria-hidden=\"true\">\n                    <div\n                        class=\"fd-resizable-card-layout__icon\"\n                        #cornerHandle\n                        (mousedown)=\"onMouseDown($event, 'both')\"\n                    ></div>\n                </div>\n            }\n        </div>\n        @if (resizable) {\n            <ng-template [ngTemplateOutlet]=\"verticalHandleTemplate\"></ng-template>\n            <ng-template [ngTemplateOutlet]=\"horizontalHandleTemplate\"></ng-template>\n        }\n    </div>\n    <div\n        class=\"fd-resizable-card-layout__item--resize-transition\"\n        [style.width.px]=\"resizeIndicationBorderWidth\"\n        [style.height.px]=\"cardHeight\"\n    ></div>\n</div>\n<ng-template #verticalHandleTemplate>\n    <div\n        #verticalHandle\n        class=\"fd-resizable-card-layout__resize--vertical\"\n        (mousedown)=\"onMouseDown($event, 'horizontal')\"\n    ></div>\n</ng-template>\n<ng-template #horizontalHandleTemplate>\n    <div\n        #horizontalHandle\n        class=\"fd-resizable-card-layout__resize--horizontal\"\n        (mousedown)=\"onMouseDown($event, 'vertical')\"\n    ></div>\n</ng-template>\n", styles: [".fd-resizable-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;margin-top:1rem;padding-block:0;padding-inline:0;padding-inline:.5rem;position:relative}.fd-resizable-card-layout:after,.fd-resizable-card-layout:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;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-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:20rem;position:relative}.fd-resizable-card-layout__item:after,.fd-resizable-card-layout__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__card{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-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1;flex:1;height:calc(100% - .0625rem);position:relative}.fd-resizable-card-layout__card:after,.fd-resizable-card-layout__card:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__icon-wrapper{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.5rem;line-height:normal;margin-block:0;margin-inline:0;min-width:1.5rem;padding-block:0;padding-inline:0;width:1.5rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:start;-ms-flex-pack:start;bottom:-.35rem;justify-content:flex-start;position:absolute;right:0;z-index:2}.fd-resizable-card-layout__icon-wrapper:after,.fd-resizable-card-layout__icon-wrapper:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__icon-wrapper[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon-wrapper{bottom:-.125rem;left:-.25rem;right:auto}.fd-resizable-card-layout__icon{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1rem;line-height:normal;margin-block:0;margin-inline:0;min-width:1rem;padding-block:0;padding-inline:0;width:1rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--sapButton_Lite_TextColor);cursor:nwse-resize;font-family:SAP-icons;font-size:1rem;height:100%;line-height:1rem;position:absolute;width:100%;z-index:2}.fd-resizable-card-layout__icon:after,.fd-resizable-card-layout__icon:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__icon:before{content:\"\\e24f\";font-family:SAP-icons;height:100%;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none;width:100%}.fd-resizable-card-layout__icon[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon{cursor:nesw-resize;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fd-resizable-card-layout__icon--vertical,.fd-resizable-card-layout__icon--vertical[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon--vertical{cursor:ns-resize}.fd-resizable-card-layout__icon--horizontal,.fd-resizable-card-layout__icon--horizontal[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon--horizontal{cursor:ew-resize}.fd-resizable-card-layout__resize--vertical{-webkit-box-ordinal-group:3;-ms-flex-order:2;cursor:ew-resize;order:2;width:.0625rem;z-index:2}.fd-resizable-card-layout__resize--vertical::content{content:\"\";position:absolute}.fd-resizable-card-layout__resize--horizontal{bottom:0;cursor:ns-resize;height:.0625rem;position:absolute;width:calc(100% - .5rem);z-index:2}.fd-resizable-card-layout__indication-border{border:0;border:.125rem dashed var(--sapContent_DragAndDropActiveColor);-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-resizable-card-layout__indication-border:after,.fd-resizable-card-layout__indication-border:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout--sm{padding-inline:.5rem}.fd-resizable-card-layout--lg,.fd-resizable-card-layout--md{padding-inline:1rem}.fd-resizable-card-layout--xl{padding-inline:3rem}.fd-resizable-card-layout__item--resize-transition{transition-duration:.25s;animation-timing-function:ease-in-out}.fd-resizable-card-layout__draw-transition{transition-duration:.5s;animation-timing-function:ease-in}.fd-resizable-card-layout__item--border-display{display:flex}\n/*! Bundled license information:\n\nfundamental-styles/dist/resizable-card-layout.css:\n  (*!\n   * Fundamental Library Styles v0.41.7\n   * Copyright (c) 2026 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"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { config: [{
                type: Input
            }], itemId: [{
                type: Input
            }], title: [{
                type: Input
            }], rank: [{
                type: Input
            }], cardWidthColSpan: [{
                type: Input
            }], cardHeightRowSpan: [{
                type: Input
            }], cardMiniHeaderRowSpan: [{
                type: Input
            }], cardMiniContentRowSpan: [{
                type: Input
            }], resizable: [{
                type: Input
            }], left: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['style.left.px']
            }], right: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['style.right.px']
            }], top: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['style.top.px']
            }], zIndex: [{
                type: HostBinding,
                args: ['style.z-index']
            }], position: [{
                type: HostBinding,
                args: ['style.position']
            }], reDrawAnimation: [{
                type: HostBinding,
                args: ['class.fd-resizable-card-layout__draw-transition']
            }], resizing: [{
                type: Output
            }], resized: [{
                type: Output
            }], miniHeaderReached: [{
                type: Output
            }], miniContentReached: [{
                type: Output
            }], onMouseMove: [{
                type: HostListener,
                args: ['window:mousemove', ['$event']]
            }], onMouseUp: [{
                type: HostListener,
                args: ['document:mouseup']
            }] } });
/** Object to emit on resize complete */
class ResizedEvent {
    /**
     * Object to emit on resize complete
     * @param card
     * @param prevCardWidth Previous card width
     * @param prevCardHeight Previous card height
     * @param cardWidth Current card width
     * @param cardHeight Current card height
     * @param cardWidthColSpan Current card width column span
     * @param cardHeightRowSpan Current card height row span
     * @param newCardWidthColSpan New card width column span
     * @param newCardHeightRowSpan New card height row span
     */
    constructor(card, prevCardWidth, prevCardHeight, cardWidth, cardHeight, cardWidthColSpan, cardHeightRowSpan, newCardWidthColSpan, newCardHeightRowSpan) {
        this.card = card;
        this.prevCardWidth = prevCardWidth;
        this.prevCardHeight = prevCardHeight;
        this.cardWidth = cardWidth;
        this.cardHeight = cardHeight;
        this.cardWidthColSpan = cardWidthColSpan;
        this.cardHeightRowSpan = cardHeightRowSpan;
        this.newCardWidthColSpan = newCardWidthColSpan;
        this.newCardHeightRowSpan = newCardHeightRowSpan;
    }
}

class ResizableCardLayoutComponent {
    /** @hidden */
    constructor(_cd, elementRef) {
        this._cd = _cd;
        this.elementRef = elementRef;
        /** Emits when card resize is reached to one new step in horizontal or vertical direction */
        this.stepChange = new EventEmitter();
        /** Emits when card is still resizing */
        this.resizing = new EventEmitter();
        /** Emits when card resize is completed */
        this.resized = new EventEmitter();
        /** Emits when card height is reduced to show only header */
        this.miniHeaderReached = new EventEmitter();
        /** Emits when minimum height of card content area is reached */
        this.miniContentReached = new EventEmitter();
        /** Emits when layout changes */
        this.layoutChange = new EventEmitter();
        /** @hidden */
        this._destroyRef = inject(DestroyRef);
        /** @hidden */
        this._layoutShifted = false;
        /** @hidden */
        this._directionPosition = computed(() => (this._rtlService?.rtl() ? 'right' : 'left'), ...(ngDevMode ? [{ debugName: "_directionPosition" }] : []));
        /** @hidden */
        this._rtlService = inject(RtlService, { optional: true });
    }
    /** @hidden handles keyboard accessibility */
    _handleKeydown(event) {
        event.stopImmediatePropagation();
        if (!this._keyboardEventsManager.activeItemIndex) {
            this._keyboardEventsManager.setFirstItemActive();
        }
        if (this._keyboardEventsManager) {
            this._keyboardEventsManager.onKeydown(event);
        }
    }
    /** @hidden */
    onResize() {
        this._createLayout();
    }
    /** @hidden */
    ngOnInit() {
        this._columnsHeight = new Array(this._columns);
        this._columnsHeight.fill(0);
        // initialise value 0
        // detect initial window size and set layout
        this._createLayout();
    }
    /** @hidden */
    ngAfterContentInit() {
        this._initialSetup();
        // listen for query-list change
        this.resizeCardItems?.forEach((card) => {
            card?.verifyUpdateCardWidth(this.layoutSize);
        });
        this.resizeCardItems.changes.subscribe(() => {
            this.arrangeCards(this.resizeCardItems?.toArray());
        });
        this.arrangeCards(this.resizeCardItems?.toArray());
        this._cd.markForCheck();
    }
    /** @hidden */
    ngAfterViewInit() {
        this._accessibilitySetup();
    }
    /** @hidden */
    ngOnDestroy() {
        this._keyboardEventsManager?.destroy();
    }
    /** Layout size. Available options are 'sm', 'md', 'lg' and 'xl' */
    set layoutSize(layoutSize) {
        this._layout = layoutSize;
    }
    get layoutSize() {
        return this._layout;
    }
    /**
     * Arranges cards in layout based on rank, width and height of card
     * @param cards Array of ResizableCardItemComponent
     */
    arrangeCards(cards) {
        this._columnsHeight = new Array(this._columns);
        this._columnsHeight.fill(0);
        // sort based on the card rank
        this._sortedCards = cards?.sort(this._sortCards);
        this._sortedCards?.forEach((card, index) => {
            this._setCardPositionValues(card, index);
            this._updateColumnsHeight(card);
        });
        this.layoutHeight = Math.max.apply(null, this._columnsHeight) + verticalResizeStep;
        this._emitLayoutChange();
        this._cd.markForCheck();
    }
    /**
     * Handles shifting of cards with animation, while card is still resizing.
     * @param event {ResizedEvent}
     */
    cardResizing(event) {
        this.resizing.emit(event);
        this._handleHorizontalResize(event);
        this._handleVerticalResize(event);
    }
    /**
     * Handles arrangement of cards in layout
     * @param event {ResizedEvent}
     */
    cardResizeComplete(event) {
        this._layoutShifted = false;
        this.arrangeCards(this.resizeCardItems.toArray());
        this.resized.emit(event);
    }
    /** @hidden */
    updateLayout() {
        this.resizeCardItems?.forEach((card) => {
            card?.verifyUpdateCardWidth(this.layoutSize);
        });
        this.arrangeCards(this.resizeCardItems?.toArray());
    }
    /**
     * method to get screen width
     * @returns Window width in px
     */
    getWidthAvailable() {
        return window.innerWidth;
    }
    /** @hidden Subscribe to events from items */
    _initialSetup() {
        // listen for resizing event of card item
        this.resizeCardItems?.forEach((resizeCardItem, index) => {
            if (this.layoutConfig && this.layoutConfig.length >= index + 1) {
                resizeCardItem.config = this.layoutConfig[index];
            }
            resizeCardItem.resizing
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe((event) => this.cardResizing(event));
            // listen for resize complete event of card item
            resizeCardItem.resized
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe((event) => this.cardResizeComplete(event));
            // listen for mini-header height event of card item
            resizeCardItem.miniHeaderReached
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe((event) => {
                this.miniHeaderReached.emit(event);
                this.stepChange.emit(event);
            });
            // listen for mini-content height event of card item
            resizeCardItem.miniContentReached
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe((event) => {
                this.miniContentReached.emit(event);
                this.stepChange.emit(event);
            });
        });
    }
    /** @hidden */
    _accessibilitySetup() {
        this._keyboardEventsManager?.destroy();
        this._keyboardEventsManager = new FocusKeyManager(this.resizeCardItems).withWrap();
    }
    /** @hidden create layout based on layout size */
    _createLayout() {
        const screenWidth = this.getWidthAvailable();
        const prevLayoutSize = this.layoutSize;
        if (screenWidth > 0 && screenWidth <= 656 && prevLayoutSize !== 'sm') {
            this.layoutSize = 'sm';
            this._setLayoutColumns(this.layoutSize);
            this.updateLayout();
        }
        else if (screenWidth > 656 && screenWidth <= 975 && prevLayoutSize !== 'md') {
            this.layoutSize = 'md';
            this._setLayoutColumns(this.layoutSize);
            this.updateLayout();
        }
        else if (screenWidth > 975 && screenWidth <= 1359 && prevLayoutSize !== 'lg') {
            this.layoutSize = 'lg';
            this._setLayoutColumns(this.layoutSize);
            this.updateLayout();
        }
        else if (screenWidth > 1359 && prevLayoutSize !== 'xl') {
            this.layoutSize = 'xl';
            this._setLayoutColumns(this.layoutSize);
            this.updateLayout();
        }
    }
    /** @hidden Emit layoutChange event with updated card dimensions */
    _emitLayoutChange() {
        const latestCardConfig = [];
        this.resizeCardItems?.forEach((card) => {
            const cardConfig = {};
            cardConfig.cardWidthColSpan = card.cardWidthColSpan;
            cardConfig.cardHeightRowSpan = card.cardHeightRowSpan;
            cardConfig.rank = card.rank;
            cardConfig.title = card.title;
            cardConfig.cardMiniContentRowSpan = card.cardMiniContentRowSpan;
            cardConfig.cardMiniHeaderRowSpan = card.cardMiniHeaderRowSpan;
            cardConfig.resizable = card.resizable;
            latestCardConfig.push(cardConfig);
        });
        this.layoutChange.emit(latestCardConfig);
    }
    /**
     * @hidden Sets number of column in layout, based on LayoutSize passed
     * @param layoutSize {'sm' | 'md' | 'lg' | 'xl'}
     */
    _setLayoutColumns(layoutSize) {
        let layoutWidthDefault;
        switch (layoutSize) {
            case 'sm':
                this._columns = 1;
                this._paddingLeft = 8;
                layoutWidthDefault = this._columns * horizontalResizeStep + 2 * this._paddingLeft;
                this.layoutWidth = layoutWidthDefault;
                break;
            case 'md':
                this._columns = 2;
                this._paddingLeft = 16;
                layoutWidthDefault = this._columns * horizontalResizeStep + 2 * this._paddingLeft;
                this.layoutWidth = layoutWidthDefault + gap;
                break;
            case 'lg':
                this._columns = 3;
                this._paddingLeft = 16;
                layoutWidthDefault = this._columns * horizontalResizeStep + 2 * this._paddingLeft;
                this.layoutWidth = layoutWidthDefault + 2 * gap;
                break;
            case 'xl':
                this._columns = 4;
                this._paddingLeft = 48;
                layoutWidthDefault = this._columns * horizontalResizeStep + 2 * this._paddingLeft;
                this.layoutWidth = layoutWidthDefault + 3 * gap;
                break;
            default:
                this._columns = 4;
                this._paddingLeft = 48;
                layoutWidthDefault = this._columns * horizontalResizeStep + 2 * this._paddingLeft;
                this.layoutWidth = layoutWidthDefault + 3 * gap;
        }
    }
    /**
     * @hidden Method to handle card vertical resize and trigger the layout change
     * @param event {ResizedEvent}
     */
    _handleVerticalResize(event) {
        if (event.card.cardHeightRowSpan !== event.card.previousCardHeightRowSpan) {
            this.arrangeCards(this._sortedCards);
            this._cd.markForCheck();
            this.stepChange.emit(event.card.getResizedEventObject());
        }
    }
    /**
     * @hidden Method to handle card horizontal resize and trigger the layout change
     * @param event {ResizedEvent}
     */
    _handleHorizontalResize(event) {
        // when increasing width hit the offset, show extended border and start pushing down border cards
        // when width is decreasing , show extended border till it reaches to offset.
        const cardWidthChange = event.cardWidth - event.prevCardWidth;
        const currentResizingItemIndex = this._sortedCards?.findIndex((x) => x.rank === event.card.rank);
        if (event.cardWidth > event.prevCardWidth) {
            // when increasing size
            // card width increasing currently
            if (event.card.cardState === 1 && cardWidthChange > horizontalResizeOffset + gap && !this._layoutShifted) {
                // index of this card, then get next card. exchange ranks
                this._sortedCards.forEach((card, index) => {
                    if (index > currentResizingItemIndex) {
                        // if there are some cards on same height. make the current card rank higher than these.
                        // otherwise next index where it will fit. until any card has less column span than total columns
                        // if only in next top, one card is taking full columns
                        if (card.startingColumnPosition + card.cardWidthColSpan === this._columns &&
                            card.cardWidthColSpan !== this._columns) {
                            // get cards with top > current top , but minimum of it
                            // exchange rank with these card
                            this._moveCardDown(index);
                        }
                    }
                });
                this._layoutShifted = true;
                this.arrangeCards(this._sortedCards);
                this.stepChange.emit(event.card.getResizedEventObject());
            }
            else if (event.card.cardState === -1 &&
                cardWidthChange < horizontalResizeOffset + gap &&
                this._layoutShifted) {
                // card width decreasing currently
                // move up the cards, if it was shifted while increasing the width
                this._sortedCards.forEach((card) => {
                    card.rank = card.prevRank ? card.prevRank : card.rank;
                    card.prevRank = 0;
                });
                this._layoutShifted = false;
                this.arrangeCards(this._sortedCards);
                this.stepChange.emit(event.card.getResizedEventObject());
            }
        }
        else if (event.cardWidth < event.prevCardWidth) {
            // when decreasing size
            if (event.card.cardState === -1 && -cardWidthChange > horizontalResizeOffset && !this._layoutShifted) {
                // card width decreasing currently
                this._layoutShifted = true;
                this.arrangeCards(this._sortedCards);
                this.stepChange.emit(event.card.getResizedEventObject());
            }
            else if (event.card.cardState === 1 && -cardWidthChange < horizontalResizeOffset && this._layoutShifted) {
                // card width increasing currently
                this._layoutShifted = false;
                this.arrangeCards(this._sortedCards);
                this.stepChange.emit(event.card.getResizedEventObject());
            }
        }
    }
    /**
     * @hidden Method to move card down, when another card width is increasing
     * Method to loop till this._columns -1 positions and exchange the rank
     * @param currentCardIndex Index of current card
     */
    _moveCardDown(currentCardIndex) {
        // taking width of adjacent card col-span into account
        // eg: 4 columns - 2 col(adjacent card) = 2 positions can exchange ranks
        const currentCard = this._sortedCards[currentCardIndex];
        let card;
        // unoccupiedPositions positions left after currentCard occupies in next row.
        let unoccupiedPositions = this._columns - currentCard.cardWidthColSpan;
        currentCard.prevRank = currentCard.rank;
        let index = 1;
        while (unoccupiedPositions > 0) {
            // compare from next card
            card = this._sortedCards[index + currentCardIndex];
            if (card && unoccupiedPositions >= card.cardWidthColSpan) {
                card.prevRank = card.rank;
                card.rank -= 1;
                currentCard.rank = card.prevRank;
                unoccupiedPositions -= card.cardWidthColSpan;
            }
            else {
                unoccupiedPositions = 0;
            }
            index += 1;
        }
    }
    /**
     * @hidden updates array with new column heights
     * @param card {ResizableCardItemComponent}
     */
    _updateColumnsHeight(card) {
        const directionPosition = this._directionPosition();
        const columnsStart = card[directionPosition] != null ? Math.floor(card[directionPosition] / horizontalResizeStep) : 0;
        // Get width of current card resizing and assign width here for that card
        const cardBaseColSpan = Math.floor(card.cardWidth / horizontalResizeStep);
        // till which columns card spans
        const columnsSpan = card.cardWidth - cardBaseColSpan * horizontalResizeStep - cardBaseColSpan * gap > horizontalResizeOffset
            ? cardBaseColSpan + 1
            : cardBaseColSpan;
        const columnHeight = card.cardHeight + card.top;
        for (let i = 0; i < columnsSpan; i++) {
            this._columnsHeight[i + columnsStart] = columnHeight;
        }
        if (columnsStart === columnsSpan) {
            this._columnsHeight[columnsStart] = columnHeight;
        }
    }
    /**
     * @hidden Try to set card at available heights
     * @param card ResizableCardItemComponent
     * @param index value of card in array of ResizableCardItemComponent
     */
    _setCardPositionValues(card, index) {
        const directionPosition = this._directionPosition();
        if (index === 0) {
            card[directionPosition] = Number(this._paddingLeft);
            card.top = 0;
            card.startingColumnPosition = 0;
            return;
        }
        const uniqueHeights = this._getSortedUniqueHeights();
        let cardPositioned = false;
        for (let i = 0; i < uniqueHeights.length && !cardPositioned; i++) {
            cardPositioned = this._isPositionSetSuccess(uniqueHeights[i], card);
        }
    }
    /**
     * @hidden try to set card at given height.
     * @param height height at which card is getting positioned.
     * @param card ResizableCardItemComponent
     * @returns It returns true when card position id found otherwise it returns false.
     */
    _isPositionSetSuccess(height, card) {
        const directionPosition = this._directionPosition();
        const columnPositions = [];
        let index = 0;
        for (const columnHeight of this._columnsHeight) {
            index++;
            if (columnHeight === height) {
                columnPositions.push(index);
            }
        }
        // check for each card position, starting from leftmost
        let isFitting = false;
        // try to fit as left (or right if Rtl) as possible from the column position
        const startingColumnPosition = this._fitCardColumnPosition(card, columnPositions, height);
        if (startingColumnPosition !== -1) {
            isFitting = true;
            card[directionPosition] =
                startingColumnPosition * horizontalResizeStep +
                    this._paddingLeft +
                    (startingColumnPosition > 0 ? gap * startingColumnPosition : 0);
            card.top = height + (height > 0 ? verticalResizeStep : 0);
            card.startingColumnPosition = startingColumnPosition;
        }
        return isFitting;
    }
    /**
     * @hidden Try to start card position from left most fit position.
     * @param card ResizableCardItemComponent
     * @param columnPositions {Array<number>} Array of available positions for cards.
     * @param height {number} height at which fixing the card
     * @returns {number} returns starting column position where card will fit.
     */
    _fitCardColumnPosition(card, columnPositions, height) {
        // check for each card position, starting from leftmost
        let isFitting = false;
        let startingColumnPosition = -1;
        // start from previous indexes
        const cardBaseColSpan = Math.floor(card.cardWidth / horizontalResizeStep);
        const cardColSpan = card.cardWidth - cardBaseColSpan * horizontalResizeStep - cardBaseColSpan * gap > horizontalResizeOffset
            ? cardBaseColSpan + 1
            : cardBaseColSpan;
        // try to set towards left from available card position
        // eg. [1, 2, 3, 4] columnsPositions
        for (const columnPosition of columnPositions) {
            if (isFitting) {
                break;
            }
            // startingPosition values will be 1, 2, 3, 4
            // try to fit as left as possible
            let startingPosition = columnPosition - (cardColSpan - 1);
            startingPosition = startingPosition > 0 ? startingPosition : 1;
            for (let index = startingPosition; index <= columnPosition && !isFitting; index++) {
                for (let span = 0; span < cardColSpan; span++) {
                    if (this._columnsHeight[index + span - 1] <= height && cardColSpan + index - 1 <= this._columns) {
                        isFitting = true;
                        startingColumnPosition = index - 1;
                    }
                    else {
                        isFitting = false;
                        startingColumnPosition = -1;
                        break;
                    }
                }
            }
        }
        return startingColumnPosition;
    }
    /** @hidden returns sorted unique height of columns */
    _getSortedUniqueHeights() {
        const tempArray = this._columnsHeight.slice();
        const sortedColumnsHeightArray = tempArray.sort(comparer);
        const uniqueHeights = [];
        for (const sortedHeight of sortedColumnsHeightArray) {
            if (uniqueHeights.indexOf(sortedHeight) === -1) {
                uniqueHeights.push(sortedHeight);
            }
        }
        function comparer(first, second) {
            return first - second;
        }
        return uniqueHeights;
    }
    /**
     * @hidden Comparator to sort card based on rank.
     * @param firstCard ResizableCardItemComponent
     * @param secondCard ResizableCardItemComponent
     * @returns : returns difference between first card rank and other card rank.
     */
    _sortCards(firstCard, secondCard) {
        return firstCard.rank - secondCard.rank;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResizableCardLayoutComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ResizableCardLayoutComponent, isStandalone: true, selector: "fd-resizable-card-layout", inputs: { layoutConfig: "layoutConfig" }, outputs: { stepChange: "stepChange", resizing: "resizing", resized: "resized", miniHeaderReached: "miniHeaderReached", miniContentReached: "miniContentReached", layoutChange: "layoutChange" }, host: { listeners: { "keydown": "_handleKeydown($event)", "window:resize": "onResize()" } }, queries: [{ propertyName: "resizeCardItems", predicate: ResizableCardItemComponent }], ngImport: i0, template: "<div\n    #layout\n    class=\"fd-resizable-card-layout\"\n    [class]=\"'fd-resizable-card-layout--' + layoutSize\"\n    [style.width.px]=\"layoutWidth\"\n    [style.height.px]=\"layoutHeight\"\n>\n    <ng-content></ng-content>\n</div>\n", styles: [".fd-resizable-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;margin-top:1rem;padding-block:0;padding-inline:0;padding-inline:.5rem;position:relative}.fd-resizable-card-layout:after,.fd-resizable-card-layout:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;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-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:20rem;position:relative}.fd-resizable-card-layout__item:after,.fd-resizable-card-layout__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__card{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-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1;flex:1;height:calc(100% - .0625rem);position:relative}.fd-resizable-card-layout__card:after,.fd-resizable-card-layout__card:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__icon-wrapper{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.5rem;line-height:normal;margin-block:0;margin-inline:0;min-width:1.5rem;padding-block:0;padding-inline:0;width:1.5rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:start;-ms-flex-pack:start;bottom:-.35rem;justify-content:flex-start;position:absolute;right:0;z-index:2}.fd-resizable-card-layout__icon-wrapper:after,.fd-resizable-card-layout__icon-wrapper:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__icon-wrapper[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon-wrapper{bottom:-.125rem;left:-.25rem;right:auto}.fd-resizable-card-layout__icon{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1rem;line-height:normal;margin-block:0;margin-inline:0;min-width:1rem;padding-block:0;padding-inline:0;width:1rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--sapButton_Lite_TextColor);cursor:nwse-resize;font-family:SAP-icons;font-size:1rem;height:100%;line-height:1rem;position:absolute;width:100%;z-index:2}.fd-resizable-card-layout__icon:after,.fd-resizable-card-layout__icon:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__icon:before{content:\"\\e24f\";font-family:SAP-icons;height:100%;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none;width:100%}.fd-resizable-card-layout__icon[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon{cursor:nesw-resize;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fd-resizable-card-layout__icon--vertical,.fd-resizable-card-layout__icon--vertical[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon--vertical{cursor:ns-resize}.fd-resizable-card-layout__icon--horizontal,.fd-resizable-card-layout__icon--horizontal[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon--horizontal{cursor:ew-resize}.fd-resizable-card-layout__resize--vertical{-webkit-box-ordinal-group:3;-ms-flex-order:2;cursor:ew-resize;order:2;width:.0625rem;z-index:2}.fd-resizable-card-layout__resize--vertical::content{content:\"\";position:absolute}.fd-resizable-card-layout__resize--horizontal{bottom:0;cursor:ns-resize;height:.0625rem;position:absolute;width:calc(100% - .5rem);z-index:2}.fd-resizable-card-layout__indication-border{border:0;border:.125rem dashed var(--sapContent_DragAndDropActiveColor);-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-resizable-card-layout__indication-border:after,.fd-resizable-card-layout__indication-border:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout--sm{padding-inline:.5rem}.fd-resizable-card-layout--lg,.fd-resizable-card-layout--md{padding-inline:1rem}.fd-resizable-card-layout--xl{padding-inline:3rem}fd-resizable-card-item .fd-resizable-card-layout__icon-wrapper{right:0}[dir=rtl] fd-resizable-card-item .fd-resizable-card-layout__icon-wrapper,fd-resizable-card-item .fd-resizable-card-layout__icon-wrapper[dir=rtl]{right:auto;left:-.375rem;bottom:0}fd-resizable-card-item .fd-resizable-card-layout__icon-wrapper .fd-resizable-card-layout__icon{width:100%;height:100%}fd-resizable-card-item .fd-resizable-card-layout__icon-wrapper .fd-resizable-card-layout__icon:before{width:100%;height:100%}\n/*! Bundled license information:\n\nfundamental-styles/dist/resizable-card-layout.css:\n  (*!\n   * Fundamental Library Styles v0.41.7\n   * Copyright (c) 2026 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResizableCardLayoutComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-resizable-card-layout', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, template: "<div\n    #layout\n    class=\"fd-resizable-card-layout\"\n    [class]=\"'fd-resizable-card-layout--' + layoutSize\"\n    [style.width.px]=\"layoutWidth\"\n    [style.height.px]=\"layoutHeight\"\n>\n    <ng-content></ng-content>\n</div>\n", styles: [".fd-resizable-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;margin-top:1rem;padding-block:0;padding-inline:0;padding-inline:.5rem;position:relative}.fd-resizable-card-layout:after,.fd-resizable-card-layout:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;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-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:20rem;position:relative}.fd-resizable-card-layout__item:after,.fd-resizable-card-layout__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__card{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-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1;flex:1;height:calc(100% - .0625rem);position:relative}.fd-resizable-card-layout__card:after,.fd-resizable-card-layout__card:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__icon-wrapper{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.5rem;line-height:normal;margin-block:0;margin-inline:0;min-width:1.5rem;padding-block:0;padding-inline:0;width:1.5rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:start;-ms-flex-pack:start;bottom:-.35rem;justify-content:flex-start;position:absolute;right:0;z-index:2}.fd-resizable-card-layout__icon-wrapper:after,.fd-resizable-card-layout__icon-wrapper:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__icon-wrapper[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon-wrapper{bottom:-.125rem;left:-.25rem;right:auto}.fd-resizable-card-layout__icon{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1rem;line-height:normal;margin-block:0;margin-inline:0;min-width:1rem;padding-block:0;padding-inline:0;width:1rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--sapButton_Lite_TextColor);cursor:nwse-resize;font-family:SAP-icons;font-size:1rem;height:100%;line-height:1rem;position:absolute;width:100%;z-index:2}.fd-resizable-card-layout__icon:after,.fd-resizable-card-layout__icon:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout__icon:before{content:\"\\e24f\";font-family:SAP-icons;height:100%;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none;width:100%}.fd-resizable-card-layout__icon[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon{cursor:nesw-resize;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fd-resizable-card-layout__icon--vertical,.fd-resizable-card-layout__icon--vertical[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon--vertical{cursor:ns-resize}.fd-resizable-card-layout__icon--horizontal,.fd-resizable-card-layout__icon--horizontal[dir=rtl],[dir=rtl] .fd-resizable-card-layout__icon--horizontal{cursor:ew-resize}.fd-resizable-card-layout__resize--vertical{-webkit-box-ordinal-group:3;-ms-flex-order:2;cursor:ew-resize;order:2;width:.0625rem;z-index:2}.fd-resizable-card-layout__resize--vertical::content{content:\"\";position:absolute}.fd-resizable-card-layout__resize--horizontal{bottom:0;cursor:ns-resize;height:.0625rem;position:absolute;width:calc(100% - .5rem);z-index:2}.fd-resizable-card-layout__indication-border{border:0;border:.125rem dashed var(--sapContent_DragAndDropActiveColor);-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-resizable-card-layout__indication-border:after,.fd-resizable-card-layout__indication-border:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-resizable-card-layout--sm{padding-inline:.5rem}.fd-resizable-card-layout--lg,.fd-resizable-card-layout--md{padding-inline:1rem}.fd-resizable-card-layout--xl{padding-inline:3rem}fd-resizable-card-item .fd-resizable-card-layout__icon-wrapper{right:0}[dir=rtl] fd-resizable-card-item .fd-resizable-card-layout__icon-wrapper,fd-resizable-card-item .fd-resizable-card-layout__icon-wrapper[dir=rtl]{right:auto;left:-.375rem;bottom:0}fd-resizable-card-item .fd-resizable-card-layout__icon-wrapper .fd-resizable-card-layout__icon{width:100%;height:100%}fd-resizable-card-item .fd-resizable-card-layout__icon-wrapper .fd-resizable-card-layout__icon:before{width:100%;height:100%}\n/*! Bundled license information:\n\nfundamental-styles/dist/resizable-card-layout.css:\n  (*!\n   * Fundamental Library Styles v0.41.7\n   * Copyright (c) 2026 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"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { layoutConfig: [{
                type: Input
            }], stepChange: [{
                type: Output
            }], resizing: [{
                type: Output
            }], resized: [{
                type: Output
            }], miniHeaderReached: [{
                type: Output
            }], miniContentReached: [{
                type: Output
            }], layoutChange: [{
                type: Output
            }], resizeCardItems: [{
                type: ContentChildren,
                args: [ResizableCardItemComponent]
            }], _handleKeydown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }], onResize: [{
                type: HostListener,
                args: ['window:resize']
            }] } });

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

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

export { ResizableCardItemComponent, ResizableCardLayoutComponent, ResizableCardLayoutModule, ResizedEvent, gap, horizontalResizeOffset, horizontalResizeStep, verticalResizeOffset, verticalResizeStep };
//# sourceMappingURL=fundamental-ngx-core-resizable-card-layout.mjs.map
