@fundamental-ngx/core 0.59.1-rc.9 → 0.59.1

package/fesm2022/fundamental-ngx-core-resizable-card-layout.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, Output, HostBinding, Input, Optional, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, DestroyRef, computed, ContentChildren, NgModule } 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 * as i1 from '@fundamental-ngx/cdk/utils';
+import { RtlService } from '@fundamental-ngx/cdk/utils';
 import { Subscription } from 'rxjs';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -91,10 +91,9 @@ class ResizableCardItemComponent {
         return this._cardMiniContentRowSpan ?? 0;
     }
     /** @hidden */
-    constructor(_cd, elementRef, _rtlService) {
+    constructor(_cd, elementRef) {
         this._cd = _cd;
         this.elementRef = elementRef;
-        this._rtlService = _rtlService;
         /** set uinque id for the card */
         this.itemId = `fd-card-item-${cardUniqueId++}`;
         /** Card can be set to resizable=false, to restrict card resize */
@@ -141,6 +140,8 @@ class ResizableCardItemComponent {
         this._originalCardWidthSpan = 0;
         /** @hidden */
         this._subscriptions = new Subscription();
+        /** @hidden */
+        this._rtlService = inject(RtlService, { optional: true });
     }
     /**
      * @hidden When mouse moves to resize the card.
@@ -399,10 +400,10 @@ class ResizableCardItemComponent {
      */
     _horizontalResizing(xPosition) {
         const difference = this._prevX - xPosition;
-        this.cardWidth = this._rtlService?.rtlSignal() ? this.cardWidth + difference : this.cardWidth - difference;
+        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?.rtlSignal()
+        const maxCardWidth = this._rtlService?.rtl()
             ? maxCardWidtWithoutIndentation - totalIndentation
             : maxCardWidtWithoutIndentation + totalIndentation;
         if (this.cardWidth > maxCardWidth) {
@@ -519,15 +520,13 @@ class ResizableCardItemComponent {
         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 }, { token: i1.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    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.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: 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.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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.RtlService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { config: [{
                 type: Input
             }], itemId: [{
                 type: Input
@@ -613,10 +612,9 @@ class ResizedEvent {
 
 class ResizableCardLayoutComponent {
     /** @hidden */
-    constructor(_cd, elementRef, _rtlService) {
+    constructor(_cd, elementRef) {
         this._cd = _cd;
         this.elementRef = elementRef;
-        this._rtlService = _rtlService;
         /** 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 */
@@ -634,7 +632,9 @@ class ResizableCardLayoutComponent {
         /** @hidden */
         this._layoutShifted = false;
         /** @hidden */
-        this._directionPosition$ = computed(() => (this._rtlService?.rtlSignal() ? 'right' : 'left'), ...(ngDevMode ? [{ debugName: "_directionPosition$" }] : []));
+        this._directionPosition = computed(() => (this._rtlService?.rtl() ? 'right' : 'left'), ...(ngDevMode ? [{ debugName: "_directionPosition" }] : []));
+        /** @hidden */
+        this._rtlService = inject(RtlService, { optional: true });
     }
     /** @hidden handles keyboard accessibility */
     _handleKeydown(event) {
@@ -955,7 +955,7 @@ class ResizableCardLayoutComponent {
      * @param card {ResizableCardItemComponent}
      */
     _updateColumnsHeight(card) {
-        const directionPosition = this._directionPosition$();
+        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);
@@ -977,7 +977,7 @@ class ResizableCardLayoutComponent {
      * @param index value of card in array of ResizableCardItemComponent
      */
     _setCardPositionValues(card, index) {
-        const directionPosition = this._directionPosition$();
+        const directionPosition = this._directionPosition();
         if (index === 0) {
             card[directionPosition] = Number(this._paddingLeft);
             card.top = 0;
@@ -997,7 +997,7 @@ class ResizableCardLayoutComponent {
      * @returns It returns true when card position id found otherwise it returns false.
      */
     _isPositionSetSuccess(height, card) {
-        const directionPosition = this._directionPosition$();
+        const directionPosition = this._directionPosition();
         const columnPositions = [];
         let index = 0;
         for (const columnHeight of this._columnsHeight) {
@@ -1087,15 +1087,13 @@ class ResizableCardLayoutComponent {
     _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 }, { token: i1.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    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.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"], 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.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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.RtlService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { layoutConfig: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { layoutConfig: [{
                 type: Input
             }], stepChange: [{
                 type: Output