npm - @fundamental-ngx/platform - Versions diffs - 0.48.0-rc.21 → 0.48.0-rc.23 - Mend

@fundamental-ngx/platform 0.48.0-rc.21 → 0.48.0-rc.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (147) hide show

package/fesm2022/fundamental-ngx-platform-split-menu-button.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, ElementRef, Component, ChangeDetectionStrategy, Optional, Input, Output, ViewChild, NgModule } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { EventEmitter, computed, ElementRef, Component, ChangeDetectionStrategy, Optional, Input, Output, ViewChild, NgModule } from '@angular/core';
 import * as i1 from '@fundamental-ngx/cdk/utils';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
 import { FD_DEFAULT_ICON_FONT_FAMILY } from '@fundamental-ngx/core/icon';
@@ -34,11 +33,11 @@ class SplitMenuButtonComponent extends BaseComponent {
         this.iconFont = FD_DEFAULT_ICON_FONT_FAMILY;
         /** Event sent when split-menu-button primary button is clicked */
         this.primaryButtonClick = new EventEmitter();
-        /** Defined max width of Split menu button */
-        this.splitButtonMaxWidth = '12rem';
         /** handles rtl service
          * @hidden */
-        this._rtlChangeSubscription = Subscription.EMPTY;
+        this.dir$ = computed(() => (this._rtlService?.rtlSignal() ? 'rtl' : 'ltr'));
+        /** Defined max width of Split menu button */
+        this.splitButtonMaxWidth = '12rem';
     }
     /** Tabindex for button. */
     get tabindex() {
@@ -49,12 +48,6 @@ class SplitMenuButtonComponent extends BaseComponent {
         this.secondaryId = 'secondary-' + this.id;
         // if no title provided.
         this.title = this.title || this.buttonLabel;
-        if (this._rtlService) {
-            this._rtlChangeSubscription = this._rtlService.rtl.subscribe((isRtl) => {
-                this.dir = isRtl ? 'rtl' : 'ltr';
-                this._cd.detectChanges();
-            });
-        }
     }
     /** @hidden */
     ngAfterViewInit() {
@@ -62,10 +55,6 @@ class SplitMenuButtonComponent extends BaseComponent {
             this._setPrimaryButtonWidth();
         }
     }
-    /** @hidden */
-    ngOnDestroy() {
-        this._rtlChangeSubscription.unsubscribe();
-    }
     /**
      *  Handles split-menu-button button click
      */
@@ -80,11 +69,11 @@ class SplitMenuButtonComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SplitMenuButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: SplitMenuButtonComponent, isStandalone: true, selector: "fdp-split-menu-button", inputs: { fixedWidth: "fixedWidth", title: "title", menuTitle: "menuTitle", buttonLabel: "buttonLabel", menu: "menu", icon: "icon", iconFont: "iconFont", type: "type" }, outputs: { primaryButtonClick: "primaryButtonClick" }, viewQueries: [{ propertyName: "primaryBtn", first: true, predicate: ["primaryBtn"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"fd-button-split\"\n    [class]=\"typeClass\"\n    role=\"group\"\n    aria-label=\"split-button\"\n    [attr.dir]=\"dir\"\n    [style.max-width]=\"splitButtonMaxWidth\"\n>\n    <button\n        fd-button\n        #primaryBtn\n        [label]=\"buttonLabel\"\n        [style.width]=\"primaryButtonWidth\"\n        [style.overflow]=\"'hidden'\"\n        [attr.id]=\"id\"\n        [attr.name]=\"name\"\n        [attr.title]=\"title\"\n        [attr.aria-label]=\"buttonLabel\"\n        [disabled]=\"disabled\"\n        [fdType]=\"type\"\n        [glyph]=\"icon\"\n        [glyphFont]=\"iconFont\"\n        [attr.tabindex]=\"tabindex\"\n        (click)=\"primaryButtonClicked($event)\"\n    ></button>\n    <button\n        fd-button\n        [attr.id]=\"secondaryId\"\n        [attr.name]=\"name\"\n        [attr.title]=\"menuTitle\"\n        [attr.aria-label]=\"menuTitle\"\n        glyph=\"slim-arrow-down\"\n        [disabled]=\"disabled\"\n        [fdType]=\"type\"\n        [attr.tabindex]=\"tabindex\"\n        [attr.aria-haspopup]=\"true\"\n        [fdpMenuTriggerFor]=\"menu\"\n    ></button>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-button-split{--fdButtonSplit_Separator_Offset:2.125rem;-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;vertical-align:middle}.fd-button-split:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Default_Shadow_Color)}.fd-button-split:after,.fd-button-split:before{box-sizing:inherit;font-size:inherit}.fd-button-split:before{-webkit-box-shadow:inset 0 0 0 var(--sapButton_BorderWidth) var(--fdButtonPrioritizedBorderColor, var(--sapButton_BorderColor));background:var(--sapButton_Background);border-radius:var(--sapButton_BorderCornerRadius);box-shadow:inset 0 0 0 var(--sapButton_BorderWidth) var(--fdButtonPrioritizedBorderColor, var(--sapButton_BorderColor));content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split:after{-webkit-transform:translateY(-50%);background:var(--sapButton_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split.is-hover:after,.fd-button-split:hover:after{display:none}.fd-button-split[dir=rtl]:after,[dir=rtl] .fd-button-split:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split>button{--fdButtonPrioritizedBorderColor:var(--fdButton_Split_Border_Color);--fdButtonPrioritizedBackgroundColor:var(--fdButton_Split_Background_Color);margin:0}.fd-button-split>button:first-of-type{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:start;-ms-flex-pack:start;align-items:center;border-radius:var(--fdButton_Border_Radius_Left);display:flex;justify-content:flex-start;margin-right:var(--fdButton_Menu_Offset)}.fd-button-split>button:first-of-type[dir=rtl],[dir=rtl] .fd-button-split>button:first-of-type{margin-left:var(--fdButton_Menu_Offset);margin-right:0}.fd-button-split>button:first-of-type.is-focus,.fd-button-split>button:first-of-type:focus{z-index:5}.fd-button-split>button:first-of-type.is-focus:after,.fd-button-split>button:first-of-type:focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Left)}.fd-button-split>button:first-of-type[dir=rtl],[dir=rtl] .fd-button-split>button:first-of-type{border-radius:var(--fdButton_Border_Radius_Left_RTL)}.fd-button-split>button:first-of-type[dir=rtl].is-focus,.fd-button-split>button:first-of-type[dir=rtl]:focus,[dir=rtl] .fd-button-split>button:first-of-type.is-focus,[dir=rtl] .fd-button-split>button:first-of-type:focus{z-index:5}.fd-button-split>button:first-of-type[dir=rtl].is-focus:after,.fd-button-split>button:first-of-type[dir=rtl]:focus:after,[dir=rtl] .fd-button-split>button:first-of-type.is-focus:after,[dir=rtl] .fd-button-split>button:first-of-type:focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Left_RTL)}.fd-button-split>button:nth-of-type(2){border-radius:var(--fdButton_Border_Radius_Right)}.fd-button-split>button:nth-of-type(2).is-focus,.fd-button-split>button:nth-of-type(2):focus{z-index:5}.fd-button-split>button:nth-of-type(2).is-focus:after,.fd-button-split>button:nth-of-type(2):focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Right)}.fd-button-split>button:nth-of-type(2)[dir=rtl],[dir=rtl] .fd-button-split>button:nth-of-type(2){border-radius:var(--fdButton_Border_Radius_Right_RTL)}.fd-button-split>button:nth-of-type(2)[dir=rtl].is-focus,.fd-button-split>button:nth-of-type(2)[dir=rtl]:focus,[dir=rtl] .fd-button-split>button:nth-of-type(2).is-focus,[dir=rtl] .fd-button-split>button:nth-of-type(2):focus{z-index:5}.fd-button-split>button:nth-of-type(2)[dir=rtl].is-focus:after,.fd-button-split>button:nth-of-type(2)[dir=rtl]:focus:after,[dir=rtl] .fd-button-split>button:nth-of-type(2).is-focus:after,[dir=rtl] .fd-button-split>button:nth-of-type(2):focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Right_RTL)}.fd-button-split>button.is-hover,.fd-button-split>button:hover{box-shadow:none;z-index:1}.fd-button-split--emphasized{position:relative}.fd-button-split--emphasized:before{background:var(--sapButton_Emphasized_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--emphasized:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Emphasized_TextColor);content:\"\";display:var(--fdButton_Menu_Emphasized_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--emphasized.is-hover:after,.fd-button-split--emphasized:hover:after{display:var(--fdButton_Menu_Emphasized_Hover_Separator_Display)}.fd-button-split--emphasized[dir=rtl]:after,[dir=rtl] .fd-button-split--emphasized:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--emphasized:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Emphasized_Shadow_Color)}.fd-button-split--transparent{position:relative}.fd-button-split--transparent:before{background:var(--sapButton_Lite_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--transparent:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Lite_TextColor);content:\"\";display:var(--fdButton_Menu_Transparent_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--transparent[dir=rtl]:after,[dir=rtl] .fd-button-split--transparent:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--transparent:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Transparent_Border_Color)}.fd-button-split--ghost{position:relative}.fd-button-split--ghost:before{background:var(--fdButton_Ghost_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--ghost:after{-webkit-transform:translateY(-50%);background:var(--sapButton_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--ghost[dir=rtl]:after,[dir=rtl] .fd-button-split--ghost:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--ghost:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Transparent_Border_Color)}.fd-button-split--positive{position:relative}.fd-button-split--positive:before{background:var(--sapButton_Accept_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--positive:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Accept_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--positive[dir=rtl]:after,[dir=rtl] .fd-button-split--positive:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--positive:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Positive_Shadow_Color)}.fd-button-split--negative{position:relative}.fd-button-split--negative:before{background:var(--sapButton_Reject_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--negative:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Reject_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--negative[dir=rtl]:after,[dir=rtl] .fd-button-split--negative:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--negative:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Negative_Shadow_Color)}.fd-button-split--attention{position:relative}.fd-button-split--attention:before{background:var(--sapButton_Attention_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--attention:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Attention_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--attention[dir=rtl]:after,[dir=rtl] .fd-button-split--attention:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--attention:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Attention_Shadow_Color)}.fd-button-split .fd-button-split__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:inherit;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:var(--fdButtonSplit_Text_Max_Width, 8.5rem);overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-button-split .fd-button-split__text:after,.fd-button-split .fd-button-split__text:before{box-sizing:inherit;font-size:inherit}.fd-button-split--emphasized>button:first-of-type{margin-right:var(--fdButton_Menu_Emphasized_Margin)}.fd-button-split--emphasized>button:first-of-type[dir=rtl],[dir=rtl] .fd-button-split--emphasized>button:first-of-type{margin-left:var(--fdButton_Menu_Emphasized_Margin);margin-right:0}.fd-button-split--emphasized .fd-button-split__text{font-weight:var(--sapButton_Emphasized_FontWeight)}.fd-button-split[class*=-compact],.fd-button-split[class*=-condensed],[class*=-compact] .fd-button-split:not([class*=-cozy]),[class*=-condensed] .fd-button-split:not([class*=-cozy]){--fdButtonSplit_Text_Max_Width:9rem;--fdButtonSplit_Separator_Offset:1.875rem}:host{display:inline-block}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[fdpMenuTriggerFor]", inputs: ["fdpMenuTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: SplitMenuButtonComponent, isStandalone: true, selector: "fdp-split-menu-button", inputs: { fixedWidth: "fixedWidth", title: "title", menuTitle: "menuTitle", buttonLabel: "buttonLabel", menu: "menu", icon: "icon", iconFont: "iconFont", type: "type" }, outputs: { primaryButtonClick: "primaryButtonClick" }, viewQueries: [{ propertyName: "primaryBtn", first: true, predicate: ["primaryBtn"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"fd-button-split\"\n    [class]=\"typeClass\"\n    role=\"group\"\n    aria-label=\"split-button\"\n    [attr.dir]=\"dir$()\"\n    [style.max-width]=\"splitButtonMaxWidth\"\n>\n    <button\n        fd-button\n        #primaryBtn\n        [label]=\"buttonLabel\"\n        [style.width]=\"primaryButtonWidth\"\n        [style.overflow]=\"'hidden'\"\n        [attr.id]=\"id\"\n        [attr.name]=\"name\"\n        [attr.title]=\"title\"\n        [attr.aria-label]=\"buttonLabel\"\n        [disabled]=\"disabled\"\n        [fdType]=\"type\"\n        [glyph]=\"icon\"\n        [glyphFont]=\"iconFont\"\n        [attr.tabindex]=\"tabindex\"\n        (click)=\"primaryButtonClicked($event)\"\n    ></button>\n    <button\n        fd-button\n        [attr.id]=\"secondaryId\"\n        [attr.name]=\"name\"\n        [attr.title]=\"menuTitle\"\n        [attr.aria-label]=\"menuTitle\"\n        glyph=\"slim-arrow-down\"\n        [disabled]=\"disabled\"\n        [fdType]=\"type\"\n        [attr.tabindex]=\"tabindex\"\n        [attr.aria-haspopup]=\"true\"\n        [fdpMenuTriggerFor]=\"menu\"\n    ></button>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-button-split{--fdButtonSplit_Separator_Offset:2.125rem;-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;vertical-align:middle}.fd-button-split:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Default_Shadow_Color)}.fd-button-split:after,.fd-button-split:before{box-sizing:inherit;font-size:inherit}.fd-button-split:before{-webkit-box-shadow:inset 0 0 0 var(--sapButton_BorderWidth) var(--fdButtonPrioritizedBorderColor, var(--sapButton_BorderColor));background:var(--sapButton_Background);border-radius:var(--sapButton_BorderCornerRadius);box-shadow:inset 0 0 0 var(--sapButton_BorderWidth) var(--fdButtonPrioritizedBorderColor, var(--sapButton_BorderColor));content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split:after{-webkit-transform:translateY(-50%);background:var(--sapButton_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split.is-hover:after,.fd-button-split:hover:after{display:none}.fd-button-split[dir=rtl]:after,[dir=rtl] .fd-button-split:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split>button{--fdButtonPrioritizedBorderColor:var(--fdButton_Split_Border_Color);--fdButtonPrioritizedBackgroundColor:var(--fdButton_Split_Background_Color);margin:0}.fd-button-split>button:first-of-type{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:start;-ms-flex-pack:start;align-items:center;border-radius:var(--fdButton_Border_Radius_Left);display:flex;justify-content:flex-start;margin-right:var(--fdButton_Menu_Offset)}.fd-button-split>button:first-of-type[dir=rtl],[dir=rtl] .fd-button-split>button:first-of-type{margin-left:var(--fdButton_Menu_Offset);margin-right:0}.fd-button-split>button:first-of-type.is-focus,.fd-button-split>button:first-of-type:focus{z-index:5}.fd-button-split>button:first-of-type.is-focus:after,.fd-button-split>button:first-of-type:focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Left)}.fd-button-split>button:first-of-type[dir=rtl],[dir=rtl] .fd-button-split>button:first-of-type{border-radius:var(--fdButton_Border_Radius_Left_RTL)}.fd-button-split>button:first-of-type[dir=rtl].is-focus,.fd-button-split>button:first-of-type[dir=rtl]:focus,[dir=rtl] .fd-button-split>button:first-of-type.is-focus,[dir=rtl] .fd-button-split>button:first-of-type:focus{z-index:5}.fd-button-split>button:first-of-type[dir=rtl].is-focus:after,.fd-button-split>button:first-of-type[dir=rtl]:focus:after,[dir=rtl] .fd-button-split>button:first-of-type.is-focus:after,[dir=rtl] .fd-button-split>button:first-of-type:focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Left_RTL)}.fd-button-split>button:nth-of-type(2){border-radius:var(--fdButton_Border_Radius_Right)}.fd-button-split>button:nth-of-type(2).is-focus,.fd-button-split>button:nth-of-type(2):focus{z-index:5}.fd-button-split>button:nth-of-type(2).is-focus:after,.fd-button-split>button:nth-of-type(2):focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Right)}.fd-button-split>button:nth-of-type(2)[dir=rtl],[dir=rtl] .fd-button-split>button:nth-of-type(2){border-radius:var(--fdButton_Border_Radius_Right_RTL)}.fd-button-split>button:nth-of-type(2)[dir=rtl].is-focus,.fd-button-split>button:nth-of-type(2)[dir=rtl]:focus,[dir=rtl] .fd-button-split>button:nth-of-type(2).is-focus,[dir=rtl] .fd-button-split>button:nth-of-type(2):focus{z-index:5}.fd-button-split>button:nth-of-type(2)[dir=rtl].is-focus:after,.fd-button-split>button:nth-of-type(2)[dir=rtl]:focus:after,[dir=rtl] .fd-button-split>button:nth-of-type(2).is-focus:after,[dir=rtl] .fd-button-split>button:nth-of-type(2):focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Right_RTL)}.fd-button-split>button.is-hover,.fd-button-split>button:hover{box-shadow:none;z-index:1}.fd-button-split--emphasized{position:relative}.fd-button-split--emphasized:before{background:var(--sapButton_Emphasized_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--emphasized:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Emphasized_TextColor);content:\"\";display:var(--fdButton_Menu_Emphasized_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--emphasized.is-hover:after,.fd-button-split--emphasized:hover:after{display:var(--fdButton_Menu_Emphasized_Hover_Separator_Display)}.fd-button-split--emphasized[dir=rtl]:after,[dir=rtl] .fd-button-split--emphasized:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--emphasized:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Emphasized_Shadow_Color)}.fd-button-split--transparent{position:relative}.fd-button-split--transparent:before{background:var(--sapButton_Lite_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--transparent:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Lite_TextColor);content:\"\";display:var(--fdButton_Menu_Transparent_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--transparent[dir=rtl]:after,[dir=rtl] .fd-button-split--transparent:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--transparent:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Transparent_Border_Color)}.fd-button-split--ghost{position:relative}.fd-button-split--ghost:before{background:var(--fdButton_Ghost_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--ghost:after{-webkit-transform:translateY(-50%);background:var(--sapButton_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--ghost[dir=rtl]:after,[dir=rtl] .fd-button-split--ghost:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--ghost:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Transparent_Border_Color)}.fd-button-split--positive{position:relative}.fd-button-split--positive:before{background:var(--sapButton_Accept_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--positive:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Accept_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--positive[dir=rtl]:after,[dir=rtl] .fd-button-split--positive:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--positive:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Positive_Shadow_Color)}.fd-button-split--negative{position:relative}.fd-button-split--negative:before{background:var(--sapButton_Reject_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--negative:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Reject_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--negative[dir=rtl]:after,[dir=rtl] .fd-button-split--negative:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--negative:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Negative_Shadow_Color)}.fd-button-split--attention{position:relative}.fd-button-split--attention:before{background:var(--sapButton_Attention_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--attention:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Attention_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--attention[dir=rtl]:after,[dir=rtl] .fd-button-split--attention:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--attention:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Attention_Shadow_Color)}.fd-button-split .fd-button-split__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:inherit;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:var(--fdButtonSplit_Text_Max_Width, 8.5rem);overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-button-split .fd-button-split__text:after,.fd-button-split .fd-button-split__text:before{box-sizing:inherit;font-size:inherit}.fd-button-split--emphasized>button:first-of-type{margin-right:var(--fdButton_Menu_Emphasized_Margin)}.fd-button-split--emphasized>button:first-of-type[dir=rtl],[dir=rtl] .fd-button-split--emphasized>button:first-of-type{margin-left:var(--fdButton_Menu_Emphasized_Margin);margin-right:0}.fd-button-split--emphasized .fd-button-split__text{font-weight:var(--sapButton_Emphasized_FontWeight)}.fd-button-split[class*=-compact],.fd-button-split[class*=-condensed],[class*=-compact] .fd-button-split:not([class*=-cozy]),[class*=-condensed] .fd-button-split:not([class*=-cozy]){--fdButtonSplit_Text_Max_Width:9rem;--fdButtonSplit_Separator_Offset:1.875rem}:host{display:inline-block}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[fdpMenuTriggerFor]", inputs: ["fdpMenuTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SplitMenuButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-split-menu-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ButtonComponent, MenuTriggerDirective], template: "<div\n    class=\"fd-button-split\"\n    [class]=\"typeClass\"\n    role=\"group\"\n    aria-label=\"split-button\"\n    [attr.dir]=\"dir\"\n    [style.max-width]=\"splitButtonMaxWidth\"\n>\n    <button\n        fd-button\n        #primaryBtn\n        [label]=\"buttonLabel\"\n        [style.width]=\"primaryButtonWidth\"\n        [style.overflow]=\"'hidden'\"\n        [attr.id]=\"id\"\n        [attr.name]=\"name\"\n        [attr.title]=\"title\"\n        [attr.aria-label]=\"buttonLabel\"\n        [disabled]=\"disabled\"\n        [fdType]=\"type\"\n        [glyph]=\"icon\"\n        [glyphFont]=\"iconFont\"\n        [attr.tabindex]=\"tabindex\"\n        (click)=\"primaryButtonClicked($event)\"\n    ></button>\n    <button\n        fd-button\n        [attr.id]=\"secondaryId\"\n        [attr.name]=\"name\"\n        [attr.title]=\"menuTitle\"\n        [attr.aria-label]=\"menuTitle\"\n        glyph=\"slim-arrow-down\"\n        [disabled]=\"disabled\"\n        [fdType]=\"type\"\n        [attr.tabindex]=\"tabindex\"\n        [attr.aria-haspopup]=\"true\"\n        [fdpMenuTriggerFor]=\"menu\"\n    ></button>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-button-split{--fdButtonSplit_Separator_Offset:2.125rem;-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;vertical-align:middle}.fd-button-split:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Default_Shadow_Color)}.fd-button-split:after,.fd-button-split:before{box-sizing:inherit;font-size:inherit}.fd-button-split:before{-webkit-box-shadow:inset 0 0 0 var(--sapButton_BorderWidth) var(--fdButtonPrioritizedBorderColor, var(--sapButton_BorderColor));background:var(--sapButton_Background);border-radius:var(--sapButton_BorderCornerRadius);box-shadow:inset 0 0 0 var(--sapButton_BorderWidth) var(--fdButtonPrioritizedBorderColor, var(--sapButton_BorderColor));content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split:after{-webkit-transform:translateY(-50%);background:var(--sapButton_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split.is-hover:after,.fd-button-split:hover:after{display:none}.fd-button-split[dir=rtl]:after,[dir=rtl] .fd-button-split:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split>button{--fdButtonPrioritizedBorderColor:var(--fdButton_Split_Border_Color);--fdButtonPrioritizedBackgroundColor:var(--fdButton_Split_Background_Color);margin:0}.fd-button-split>button:first-of-type{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:start;-ms-flex-pack:start;align-items:center;border-radius:var(--fdButton_Border_Radius_Left);display:flex;justify-content:flex-start;margin-right:var(--fdButton_Menu_Offset)}.fd-button-split>button:first-of-type[dir=rtl],[dir=rtl] .fd-button-split>button:first-of-type{margin-left:var(--fdButton_Menu_Offset);margin-right:0}.fd-button-split>button:first-of-type.is-focus,.fd-button-split>button:first-of-type:focus{z-index:5}.fd-button-split>button:first-of-type.is-focus:after,.fd-button-split>button:first-of-type:focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Left)}.fd-button-split>button:first-of-type[dir=rtl],[dir=rtl] .fd-button-split>button:first-of-type{border-radius:var(--fdButton_Border_Radius_Left_RTL)}.fd-button-split>button:first-of-type[dir=rtl].is-focus,.fd-button-split>button:first-of-type[dir=rtl]:focus,[dir=rtl] .fd-button-split>button:first-of-type.is-focus,[dir=rtl] .fd-button-split>button:first-of-type:focus{z-index:5}.fd-button-split>button:first-of-type[dir=rtl].is-focus:after,.fd-button-split>button:first-of-type[dir=rtl]:focus:after,[dir=rtl] .fd-button-split>button:first-of-type.is-focus:after,[dir=rtl] .fd-button-split>button:first-of-type:focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Left_RTL)}.fd-button-split>button:nth-of-type(2){border-radius:var(--fdButton_Border_Radius_Right)}.fd-button-split>button:nth-of-type(2).is-focus,.fd-button-split>button:nth-of-type(2):focus{z-index:5}.fd-button-split>button:nth-of-type(2).is-focus:after,.fd-button-split>button:nth-of-type(2):focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Right)}.fd-button-split>button:nth-of-type(2)[dir=rtl],[dir=rtl] .fd-button-split>button:nth-of-type(2){border-radius:var(--fdButton_Border_Radius_Right_RTL)}.fd-button-split>button:nth-of-type(2)[dir=rtl].is-focus,.fd-button-split>button:nth-of-type(2)[dir=rtl]:focus,[dir=rtl] .fd-button-split>button:nth-of-type(2).is-focus,[dir=rtl] .fd-button-split>button:nth-of-type(2):focus{z-index:5}.fd-button-split>button:nth-of-type(2)[dir=rtl].is-focus:after,.fd-button-split>button:nth-of-type(2)[dir=rtl]:focus:after,[dir=rtl] .fd-button-split>button:nth-of-type(2).is-focus:after,[dir=rtl] .fd-button-split>button:nth-of-type(2):focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Right_RTL)}.fd-button-split>button.is-hover,.fd-button-split>button:hover{box-shadow:none;z-index:1}.fd-button-split--emphasized{position:relative}.fd-button-split--emphasized:before{background:var(--sapButton_Emphasized_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--emphasized:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Emphasized_TextColor);content:\"\";display:var(--fdButton_Menu_Emphasized_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--emphasized.is-hover:after,.fd-button-split--emphasized:hover:after{display:var(--fdButton_Menu_Emphasized_Hover_Separator_Display)}.fd-button-split--emphasized[dir=rtl]:after,[dir=rtl] .fd-button-split--emphasized:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--emphasized:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Emphasized_Shadow_Color)}.fd-button-split--transparent{position:relative}.fd-button-split--transparent:before{background:var(--sapButton_Lite_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--transparent:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Lite_TextColor);content:\"\";display:var(--fdButton_Menu_Transparent_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--transparent[dir=rtl]:after,[dir=rtl] .fd-button-split--transparent:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--transparent:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Transparent_Border_Color)}.fd-button-split--ghost{position:relative}.fd-button-split--ghost:before{background:var(--fdButton_Ghost_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--ghost:after{-webkit-transform:translateY(-50%);background:var(--sapButton_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--ghost[dir=rtl]:after,[dir=rtl] .fd-button-split--ghost:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--ghost:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Transparent_Border_Color)}.fd-button-split--positive{position:relative}.fd-button-split--positive:before{background:var(--sapButton_Accept_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--positive:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Accept_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--positive[dir=rtl]:after,[dir=rtl] .fd-button-split--positive:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--positive:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Positive_Shadow_Color)}.fd-button-split--negative{position:relative}.fd-button-split--negative:before{background:var(--sapButton_Reject_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--negative:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Reject_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--negative[dir=rtl]:after,[dir=rtl] .fd-button-split--negative:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--negative:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Negative_Shadow_Color)}.fd-button-split--attention{position:relative}.fd-button-split--attention:before{background:var(--sapButton_Attention_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--attention:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Attention_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--attention[dir=rtl]:after,[dir=rtl] .fd-button-split--attention:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--attention:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Attention_Shadow_Color)}.fd-button-split .fd-button-split__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:inherit;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:var(--fdButtonSplit_Text_Max_Width, 8.5rem);overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-button-split .fd-button-split__text:after,.fd-button-split .fd-button-split__text:before{box-sizing:inherit;font-size:inherit}.fd-button-split--emphasized>button:first-of-type{margin-right:var(--fdButton_Menu_Emphasized_Margin)}.fd-button-split--emphasized>button:first-of-type[dir=rtl],[dir=rtl] .fd-button-split--emphasized>button:first-of-type{margin-left:var(--fdButton_Menu_Emphasized_Margin);margin-right:0}.fd-button-split--emphasized .fd-button-split__text{font-weight:var(--sapButton_Emphasized_FontWeight)}.fd-button-split[class*=-compact],.fd-button-split[class*=-condensed],[class*=-compact] .fd-button-split:not([class*=-cozy]),[class*=-condensed] .fd-button-split:not([class*=-cozy]){--fdButtonSplit_Text_Max_Width:9rem;--fdButtonSplit_Separator_Offset:1.875rem}:host{display:inline-block}\n"] }]
+            args: [{ selector: 'fdp-split-menu-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ButtonComponent, MenuTriggerDirective], template: "<div\n    class=\"fd-button-split\"\n    [class]=\"typeClass\"\n    role=\"group\"\n    aria-label=\"split-button\"\n    [attr.dir]=\"dir$()\"\n    [style.max-width]=\"splitButtonMaxWidth\"\n>\n    <button\n        fd-button\n        #primaryBtn\n        [label]=\"buttonLabel\"\n        [style.width]=\"primaryButtonWidth\"\n        [style.overflow]=\"'hidden'\"\n        [attr.id]=\"id\"\n        [attr.name]=\"name\"\n        [attr.title]=\"title\"\n        [attr.aria-label]=\"buttonLabel\"\n        [disabled]=\"disabled\"\n        [fdType]=\"type\"\n        [glyph]=\"icon\"\n        [glyphFont]=\"iconFont\"\n        [attr.tabindex]=\"tabindex\"\n        (click)=\"primaryButtonClicked($event)\"\n    ></button>\n    <button\n        fd-button\n        [attr.id]=\"secondaryId\"\n        [attr.name]=\"name\"\n        [attr.title]=\"menuTitle\"\n        [attr.aria-label]=\"menuTitle\"\n        glyph=\"slim-arrow-down\"\n        [disabled]=\"disabled\"\n        [fdType]=\"type\"\n        [attr.tabindex]=\"tabindex\"\n        [attr.aria-haspopup]=\"true\"\n        [fdpMenuTriggerFor]=\"menu\"\n    ></button>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-button-split{--fdButtonSplit_Separator_Offset:2.125rem;-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative;vertical-align:middle}.fd-button-split:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Default_Shadow_Color)}.fd-button-split:after,.fd-button-split:before{box-sizing:inherit;font-size:inherit}.fd-button-split:before{-webkit-box-shadow:inset 0 0 0 var(--sapButton_BorderWidth) var(--fdButtonPrioritizedBorderColor, var(--sapButton_BorderColor));background:var(--sapButton_Background);border-radius:var(--sapButton_BorderCornerRadius);box-shadow:inset 0 0 0 var(--sapButton_BorderWidth) var(--fdButtonPrioritizedBorderColor, var(--sapButton_BorderColor));content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split:after{-webkit-transform:translateY(-50%);background:var(--sapButton_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split.is-hover:after,.fd-button-split:hover:after{display:none}.fd-button-split[dir=rtl]:after,[dir=rtl] .fd-button-split:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split>button{--fdButtonPrioritizedBorderColor:var(--fdButton_Split_Border_Color);--fdButtonPrioritizedBackgroundColor:var(--fdButton_Split_Background_Color);margin:0}.fd-button-split>button:first-of-type{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:start;-ms-flex-pack:start;align-items:center;border-radius:var(--fdButton_Border_Radius_Left);display:flex;justify-content:flex-start;margin-right:var(--fdButton_Menu_Offset)}.fd-button-split>button:first-of-type[dir=rtl],[dir=rtl] .fd-button-split>button:first-of-type{margin-left:var(--fdButton_Menu_Offset);margin-right:0}.fd-button-split>button:first-of-type.is-focus,.fd-button-split>button:first-of-type:focus{z-index:5}.fd-button-split>button:first-of-type.is-focus:after,.fd-button-split>button:first-of-type:focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Left)}.fd-button-split>button:first-of-type[dir=rtl],[dir=rtl] .fd-button-split>button:first-of-type{border-radius:var(--fdButton_Border_Radius_Left_RTL)}.fd-button-split>button:first-of-type[dir=rtl].is-focus,.fd-button-split>button:first-of-type[dir=rtl]:focus,[dir=rtl] .fd-button-split>button:first-of-type.is-focus,[dir=rtl] .fd-button-split>button:first-of-type:focus{z-index:5}.fd-button-split>button:first-of-type[dir=rtl].is-focus:after,.fd-button-split>button:first-of-type[dir=rtl]:focus:after,[dir=rtl] .fd-button-split>button:first-of-type.is-focus:after,[dir=rtl] .fd-button-split>button:first-of-type:focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Left_RTL)}.fd-button-split>button:nth-of-type(2){border-radius:var(--fdButton_Border_Radius_Right)}.fd-button-split>button:nth-of-type(2).is-focus,.fd-button-split>button:nth-of-type(2):focus{z-index:5}.fd-button-split>button:nth-of-type(2).is-focus:after,.fd-button-split>button:nth-of-type(2):focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Right)}.fd-button-split>button:nth-of-type(2)[dir=rtl],[dir=rtl] .fd-button-split>button:nth-of-type(2){border-radius:var(--fdButton_Border_Radius_Right_RTL)}.fd-button-split>button:nth-of-type(2)[dir=rtl].is-focus,.fd-button-split>button:nth-of-type(2)[dir=rtl]:focus,[dir=rtl] .fd-button-split>button:nth-of-type(2).is-focus,[dir=rtl] .fd-button-split>button:nth-of-type(2):focus{z-index:5}.fd-button-split>button:nth-of-type(2)[dir=rtl].is-focus:after,.fd-button-split>button:nth-of-type(2)[dir=rtl]:focus:after,[dir=rtl] .fd-button-split>button:nth-of-type(2).is-focus:after,[dir=rtl] .fd-button-split>button:nth-of-type(2):focus:after{border-radius:var(--fdButton_Border_Radius_Outline_Right_RTL)}.fd-button-split>button.is-hover,.fd-button-split>button:hover{box-shadow:none;z-index:1}.fd-button-split--emphasized{position:relative}.fd-button-split--emphasized:before{background:var(--sapButton_Emphasized_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--emphasized:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Emphasized_TextColor);content:\"\";display:var(--fdButton_Menu_Emphasized_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--emphasized.is-hover:after,.fd-button-split--emphasized:hover:after{display:var(--fdButton_Menu_Emphasized_Hover_Separator_Display)}.fd-button-split--emphasized[dir=rtl]:after,[dir=rtl] .fd-button-split--emphasized:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--emphasized:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Emphasized_Shadow_Color)}.fd-button-split--transparent{position:relative}.fd-button-split--transparent:before{background:var(--sapButton_Lite_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--transparent:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Lite_TextColor);content:\"\";display:var(--fdButton_Menu_Transparent_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--transparent[dir=rtl]:after,[dir=rtl] .fd-button-split--transparent:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--transparent:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Transparent_Border_Color)}.fd-button-split--ghost{position:relative}.fd-button-split--ghost:before{background:var(--fdButton_Ghost_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--ghost:after{-webkit-transform:translateY(-50%);background:var(--sapButton_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--ghost[dir=rtl]:after,[dir=rtl] .fd-button-split--ghost:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--ghost:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Transparent_Border_Color)}.fd-button-split--positive{position:relative}.fd-button-split--positive:before{background:var(--sapButton_Accept_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--positive:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Accept_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--positive[dir=rtl]:after,[dir=rtl] .fd-button-split--positive:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--positive:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Positive_Shadow_Color)}.fd-button-split--negative{position:relative}.fd-button-split--negative:before{background:var(--sapButton_Reject_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--negative:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Reject_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--negative[dir=rtl]:after,[dir=rtl] .fd-button-split--negative:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--negative:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Negative_Shadow_Color)}.fd-button-split--attention{position:relative}.fd-button-split--attention:before{background:var(--sapButton_Attention_Background);border-radius:var(--sapButton_BorderCornerRadius);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.fd-button-split--attention:after{-webkit-transform:translateY(-50%);background:var(--sapButton_Attention_TextColor);content:\"\";display:var(--fdButton_Menu_Separator_Display);height:var(--fdButton_Menu_Transparent_Separator_Height);margin:0 .125rem;position:absolute;right:var(--fdButtonSplit_Separator_Offset);top:50%;transform:translateY(-50%);width:var(--sapButton_BorderWidth);z-index:10}.fd-button-split--attention[dir=rtl]:after,[dir=rtl] .fd-button-split--attention:after{left:var(--fdButtonSplit_Separator_Offset);right:auto}.fd-button-split--attention:before{--fdButtonPrioritizedBorderColor:var(--fdButton_Menu_Attention_Shadow_Color)}.fd-button-split .fd-button-split__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:inherit;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:var(--fdButtonSplit_Text_Max_Width, 8.5rem);overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-button-split .fd-button-split__text:after,.fd-button-split .fd-button-split__text:before{box-sizing:inherit;font-size:inherit}.fd-button-split--emphasized>button:first-of-type{margin-right:var(--fdButton_Menu_Emphasized_Margin)}.fd-button-split--emphasized>button:first-of-type[dir=rtl],[dir=rtl] .fd-button-split--emphasized>button:first-of-type{margin-left:var(--fdButton_Menu_Emphasized_Margin);margin-right:0}.fd-button-split--emphasized .fd-button-split__text{font-weight:var(--sapButton_Emphasized_FontWeight)}.fd-button-split[class*=-compact],.fd-button-split[class*=-condensed],[class*=-compact] .fd-button-split:not([class*=-cozy]),[class*=-condensed] .fd-button-split:not([class*=-cozy]){--fdButtonSplit_Text_Max_Width:9rem;--fdButtonSplit_Separator_Offset:1.875rem}:host{display:inline-block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.RtlService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { fixedWidth: [{

package/fesm2022/fundamental-ngx-platform-split-menu-button.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fundamental-ngx-platform-split-menu-button.mjs","sources":["../../../../libs/platform/split-menu-button/split-menu-button.component.ts","../../../../libs/platform/split-menu-button/split-menu-button.component.html","../../../../libs/platform/split-menu-button/split-menu-button.module.ts","../../../../libs/platform/split-menu-button/fundamental-ngx-platform-split-menu-button.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n Output,\n ViewChild\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\n\nimport { RtlService } from '@fundamental-ngx/cdk/utils';\nimport { ButtonComponent, ButtonType } from '@fundamental-ngx/core/button';\nimport { FD_DEFAULT_ICON_FONT_FAMILY, IconFont } from '@fundamental-ngx/core/icon';\nimport { MenuComponent, MenuTriggerDirective } from '@fundamental-ngx/platform/menu';\nimport { BaseComponent } from '@fundamental-ngx/platform/shared';\n\n/*\n <fdp-split-menu-button [menu]=\"menu\" [buttonLabel]=\"Default button\" (primaryButtonClick)=\"onPrimaryButtonClick1()\">\n * </fdp-split-menu-button>\n \n <fdp-menu #menu xPosition=\"after\|before\">\n * <fdp-menu-item (itemSelect)=\"onItemSelect1('Option 1')\">Option 1</fdp-menu-item>\n * <fdp-menu-item (itemSelect)=\"onItemSelect1('Option 2')\">Option 2</fdp-menu-item>\n * <fdp-menu-item (itemSelect)=\"onItemSelect1('Option 3')\">Option 3</fdp-menu-item>\n * </fdp-menu>\n /\n@Component({\n selector: 'fdp-split-menu-button',\n templateUrl: './split-menu-button.component.html',\n styleUrl: 'split-menu-button.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [ButtonComponent, MenuTriggerDirective]\n})\nexport class SplitMenuButtonComponent extends BaseComponent implements OnInit, AfterViewInit, OnDestroy {\n /* Whether or not the element should keep a fixed width. The width could change if the text changes length. /\n @Input()\n fixedWidth = true;\n\n /* text for tooltip /\n @Input()\n title: string;\n\n /* text for tooltip /\n @Input()\n menuTitle: string;\n\n /* Label for the first Button /\n @Input()\n buttonLabel: string;\n\n /* reference to menu which will be controlled by split button /\n @Input()\n menu: MenuComponent;\n\n /* The icon to include in the menu-button /\n @Input()\n icon: string;\n\n /* Glyph font family /\n @Input()\n iconFont: IconFont = FD_DEFAULT_ICON_FONT_FAMILY;\n\n /* The type of the button.\n * 'Emphasized', 'Ghost', 'standard', 'positive', 'negative', 'transparent'\n * Leave empty for default.'/\n @Input()\n type: ButtonType;\n\n /* Event sent when split-menu-button primary button is clicked /\n @Output()\n primaryButtonClick: EventEmitter<any> = new EventEmitter();\n\n /* @hidden /\n @ViewChild('primaryBtn', { read: ElementRef })\n primaryBtn: ElementRef;\n\n /* used as id for Menu Button\n * @hidden\n /\n public secondaryId: string;\n\n /* handles rtl service\n * @hidden /\n public dir: string;\n\n /* @hidden /\n primaryButtonWidth: string;\n /* Defined max width of Split menu button /\n splitButtonMaxWidth = '12rem';\n /* handles rtl service\n * @hidden /\n private _rtlChangeSubscription = Subscription.EMPTY;\n\n /* @hidden /\n get typeClass(): string {\n return this.type ? `fd-button-split--${this.type}` : '';\n }\n\n /* @hidden /\n constructor(\n protected _cd: ChangeDetectorRef,\n @Optional() private _rtlService: RtlService\n ) {\n super(_cd);\n }\n\n /* Tabindex for button. /\n get tabindex(): number {\n return this.disabled ? -1 : 0;\n }\n\n /* @hidden /\n ngOnInit(): void {\n this.secondaryId = 'secondary-' + this.id;\n // if no title provided.\n this.title = this.title \|\| this.buttonLabel;\n if (this._rtlService) {\n this._rtlChangeSubscription = this._rtlService.rtl.subscribe((isRtl: boolean) => {\n this.dir = isRtl ? 'rtl' : 'ltr';\n this._cd.detectChanges();\n });\n }\n }\n\n /* @hidden /\n ngAfterViewInit(): void {\n if (this.fixedWidth) {\n this._setPrimaryButtonWidth();\n }\n }\n\n /* @hidden /\n ngOnDestroy(): void {\n this._rtlChangeSubscription.unsubscribe();\n }\n\n /\n Handles split-menu-button button click\n /\n public primaryButtonClicked(event: any): void {\n event.stopPropagation();\n this.primaryButtonClick.emit();\n }\n\n /* @hidden /\n private _setPrimaryButtonWidth(): void {\n if (this.primaryBtn && this.primaryBtn.nativeElement) {\n this.primaryButtonWidth = this.primaryBtn.nativeElement.getBoundingClientRect().width + 'px';\n }\n }\n}\n","<div\n class=\"fd-button-split\"\n [class]=\"typeClass\"\n role=\"group\"\n aria-label=\"split-button\"\n [attr.dir]=\"dir\"\n [style.max-width]=\"splitButtonMaxWidth\"\n>\n <button\n fd-button\n #primaryBtn\n [label]=\"buttonLabel\"\n [style.width]=\"primaryButtonWidth\"\n [style.overflow]=\"'hidden'\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [attr.title]=\"title\"\n [attr.aria-label]=\"buttonLabel\"\n [disabled]=\"disabled\"\n [fdType]=\"type\"\n [glyph]=\"icon\"\n [glyphFont]=\"iconFont\"\n [attr.tabindex]=\"tabindex\"\n (click)=\"primaryButtonClicked($event)\"\n ></button>\n <button\n fd-button\n [attr.id]=\"secondaryId\"\n [attr.name]=\"name\"\n [attr.title]=\"menuTitle\"\n [attr.aria-label]=\"menuTitle\"\n glyph=\"slim-arrow-down\"\n [disabled]=\"disabled\"\n [fdType]=\"type\"\n [attr.tabindex]=\"tabindex\"\n [attr.aria-haspopup]=\"true\"\n [fdpMenuTriggerFor]=\"menu\"\n ></button>\n</div>\n","import { NgModule } from '@angular/core';\n\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\nimport { SplitMenuButtonComponent } from './split-menu-button.component';\n\n@NgModule({\n imports: [SplitMenuButtonComponent, ContentDensityModule],\n exports: [SplitMenuButtonComponent, ContentDensityModule]\n})\nexport class PlatformSplitMenuButtonModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"fundamental-ngx-platform-split-menu-button.mjs","sources":["../../../../libs/platform/split-menu-button/split-menu-button.component.ts","../../../../libs/platform/split-menu-button/split-menu-button.component.html","../../../../libs/platform/split-menu-button/split-menu-button.module.ts","../../../../libs/platform/split-menu-button/fundamental-ngx-platform-split-menu-button.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnInit,\n Optional,\n Output,\n ViewChild,\n computed\n} from '@angular/core';\n\nimport { RtlService } from '@fundamental-ngx/cdk/utils';\nimport { ButtonComponent, ButtonType } from '@fundamental-ngx/core/button';\nimport { FD_DEFAULT_ICON_FONT_FAMILY, IconFont } from '@fundamental-ngx/core/icon';\nimport { MenuComponent, MenuTriggerDirective } from '@fundamental-ngx/platform/menu';\nimport { BaseComponent } from '@fundamental-ngx/platform/shared';\n\n/*\n <fdp-split-menu-button [menu]=\"menu\" [buttonLabel]=\"Default button\" (primaryButtonClick)=\"onPrimaryButtonClick1()\">\n * </fdp-split-menu-button>\n \n <fdp-menu #menu xPosition=\"after\|before\">\n * <fdp-menu-item (itemSelect)=\"onItemSelect1('Option 1')\">Option 1</fdp-menu-item>\n * <fdp-menu-item (itemSelect)=\"onItemSelect1('Option 2')\">Option 2</fdp-menu-item>\n * <fdp-menu-item (itemSelect)=\"onItemSelect1('Option 3')\">Option 3</fdp-menu-item>\n * </fdp-menu>\n /\n@Component({\n selector: 'fdp-split-menu-button',\n templateUrl: './split-menu-button.component.html',\n styleUrl: 'split-menu-button.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [ButtonComponent, MenuTriggerDirective]\n})\nexport class SplitMenuButtonComponent extends BaseComponent implements OnInit, AfterViewInit {\n /* Whether or not the element should keep a fixed width. The width could change if the text changes length. /\n @Input()\n fixedWidth = true;\n\n /* text for tooltip /\n @Input()\n title: string;\n\n /* text for tooltip /\n @Input()\n menuTitle: string;\n\n /* Label for the first Button /\n @Input()\n buttonLabel: string;\n\n /* reference to menu which will be controlled by split button /\n @Input()\n menu: MenuComponent;\n\n /* The icon to include in the menu-button /\n @Input()\n icon: string;\n\n /* Glyph font family /\n @Input()\n iconFont: IconFont = FD_DEFAULT_ICON_FONT_FAMILY;\n\n /* The type of the button.\n * 'Emphasized', 'Ghost', 'standard', 'positive', 'negative', 'transparent'\n * Leave empty for default.'/\n @Input()\n type: ButtonType;\n\n /* Event sent when split-menu-button primary button is clicked /\n @Output()\n primaryButtonClick: EventEmitter<any> = new EventEmitter();\n\n /* @hidden /\n @ViewChild('primaryBtn', { read: ElementRef })\n primaryBtn: ElementRef;\n\n /* used as id for Menu Button\n * @hidden\n /\n public secondaryId: string;\n\n /* handles rtl service\n * @hidden /\n readonly dir$ = computed<'ltr' \| 'rtl'>(() => (this._rtlService?.rtlSignal() ? 'rtl' : 'ltr'));\n\n /* @hidden /\n primaryButtonWidth: string;\n /* Defined max width of Split menu button /\n splitButtonMaxWidth = '12rem';\n /* @hidden /\n get typeClass(): string {\n return this.type ? `fd-button-split--${this.type}` : '';\n }\n\n /* @hidden /\n constructor(\n protected _cd: ChangeDetectorRef,\n @Optional() private _rtlService: RtlService\n ) {\n super(_cd);\n }\n\n /* Tabindex for button. /\n get tabindex(): number {\n return this.disabled ? -1 : 0;\n }\n\n /* @hidden /\n ngOnInit(): void {\n this.secondaryId = 'secondary-' + this.id;\n // if no title provided.\n this.title = this.title \|\| this.buttonLabel;\n }\n\n /* @hidden /\n ngAfterViewInit(): void {\n if (this.fixedWidth) {\n this._setPrimaryButtonWidth();\n }\n }\n\n /\n Handles split-menu-button button click\n /\n public primaryButtonClicked(event: any): void {\n event.stopPropagation();\n this.primaryButtonClick.emit();\n }\n\n /* @hidden /\n private _setPrimaryButtonWidth(): void {\n if (this.primaryBtn && this.primaryBtn.nativeElement) {\n this.primaryButtonWidth = this.primaryBtn.nativeElement.getBoundingClientRect().width + 'px';\n }\n }\n}\n","<div\n class=\"fd-button-split\"\n [class]=\"typeClass\"\n role=\"group\"\n aria-label=\"split-button\"\n [attr.dir]=\"dir$()\"\n [style.max-width]=\"splitButtonMaxWidth\"\n>\n <button\n fd-button\n #primaryBtn\n [label]=\"buttonLabel\"\n [style.width]=\"primaryButtonWidth\"\n [style.overflow]=\"'hidden'\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [attr.title]=\"title\"\n [attr.aria-label]=\"buttonLabel\"\n [disabled]=\"disabled\"\n [fdType]=\"type\"\n [glyph]=\"icon\"\n [glyphFont]=\"iconFont\"\n [attr.tabindex]=\"tabindex\"\n (click)=\"primaryButtonClicked($event)\"\n ></button>\n <button\n fd-button\n [attr.id]=\"secondaryId\"\n [attr.name]=\"name\"\n [attr.title]=\"menuTitle\"\n [attr.aria-label]=\"menuTitle\"\n glyph=\"slim-arrow-down\"\n [disabled]=\"disabled\"\n [fdType]=\"type\"\n [attr.tabindex]=\"tabindex\"\n [attr.aria-haspopup]=\"true\"\n [fdpMenuTriggerFor]=\"menu\"\n ></button>\n</div>\n","import { NgModule } from '@angular/core';\n\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\nimport { SplitMenuButtonComponent } from './split-menu-button.component';\n\n@NgModule({\n imports: [SplitMenuButtonComponent, ContentDensityModule],\n exports: [SplitMenuButtonComponent, ContentDensityModule]\n})\nexport class PlatformSplitMenuButtonModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/fundamental-ngx-platform-table-helpers.mjs CHANGED Viewed

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, InjectionToken, Injectable, Inject, Directive, Optional, Input, inject, HostListener, Output, NgZone, ChangeDetectorRef, forwardRef, HostBinding, DestroyRef, ElementRef, Pipe, NgModule } from '@angular/core';
+import { EventEmitter, InjectionToken, signal, computed, Injectable, DestroyRef, inject, Inject, Directive, Optional, Input, HostListener, Output, NgZone, ChangeDetectorRef, forwardRef, HostBinding, ElementRef, Pipe, NgModule } from '@angular/core';
 import equal from 'fast-deep-equal';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@fundamental-ngx/cdk/utils';
 import { resizeObservable, RtlService, FDK_FOCUSABLE_ITEM_DIRECTIVE, FocusableItemDirective, KeyUtil, isString, dfs } from '@fundamental-ngx/cdk/utils';
+import { skip, debounceTime, filter, map, distinctUntilChanged, takeUntil, take, startWith, share, tap } from 'rxjs/operators';
 import { BehaviorSubject, Subject, Subscription, fromEvent, isObservable, Observable, filter as filter$1 } from 'rxjs';
-import { skip, debounceTime, takeUntil, filter, map, distinctUntilChanged, take, startWith, share, tap } from 'rxjs/operators';
 import { ContentDensityMode } from '@fundamental-ngx/core/content-density';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TableCellDirective } from '@fundamental-ngx/core/table';
 import { SPACE, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import * as i1 from '@angular/forms';
@@ -72,19 +72,19 @@ class TableService {
         /** Table state stream. */
         this.tableState$ = new BehaviorSubject(DEFAULT_TABLE_STATE);
         /** @hidden */
-        this._semanticHighlighting$ = new BehaviorSubject('');
+        this._semanticHighlighting$ = signal('');
         /** @hidden */
-        this._isFilteringFromHeaderDisabled$ = new BehaviorSubject(false);
+        this._isFilteringFromHeaderDisabled$ = signal(false);
         /** @hidden */
-        this._isShownNavigationColumn$ = new BehaviorSubject(false);
+        this._isShownNavigationColumn$ = signal(false);
         /** @hidden */
-        this._semanticHighlightingColumnWidth$ = new BehaviorSubject(0);
+        this._semanticHighlightingColumnWidth$ = signal(0);
         /** Visible columns stream. */
-        this.visibleColumns$ = new BehaviorSubject([]);
+        this.visibleColumns$ = signal([]);
         /** Visible columns length. */
-        this.visibleColumnsLength = 0;
+        this.visibleColumnsLength = computed(() => this.visibleColumns$().length);
         /** Popping columns stream. */
-        this.poppingColumns$ = new BehaviorSubject([]);
+        this.poppingColumns$ = signal([]);
         /** Popping columns length. */
         this._poppingColumnsLength = 0;
         /** Table columns stream. */
@@ -116,16 +116,18 @@ class TableService {
         /** Listen for immediate changes in table subcomponents (mostly table column) */
         this.detectChanges$ = new Subject();
         /** Sort rules stream. */
-        this.sortRules$ = new BehaviorSubject(new Map());
+        this.sortRules$ = signal(new Map());
         /**
          * Filter Rules Map stream. Where key is column key, and value is the associated filter rules.
          * Many filters can be applied to one column.
          */
-        this.filterRules$ = new BehaviorSubject(new Map());
+        this.filterRules$ = signal(new Map());
         /**
          * Group Rules Map stream. Where key is column key and value is associated group rule
          */
-        this.groupRules$ = new BehaviorSubject(new Map());
+        this.groupRulesSubject = new BehaviorSubject(new Map());
+        /** Group Rules Map signal. */
+        this.groupRules$ = toSignal(this.groupRulesSubject);
     }
     /** Get current state/settings of the Table. */
     getTableState() {
@@ -339,15 +341,14 @@ class TableService {
      * @param columns Visible columns to share.
      */
     setVisibleColumns(columns) {
-        this.visibleColumns$.next(columns);
-        this.visibleColumnsLength = columns.length;
+        this.visibleColumns$.set(columns);
     }
     /**
      * Shares popping columns array across listeners.
      * @param columns Popping columns to share.
      */
     setPoppingColumns(columns) {
-        this.poppingColumns$.next(columns);
+        this.poppingColumns$.set(columns);
         this._poppingColumnsLength = columns.length;
     }
     /**
@@ -356,21 +357,21 @@ class TableService {
      */
     buildGroupRulesMap(state = this.getTableState()) {
         const groupMap = new Map(state.groupBy.map((rule) => [rule.field, rule]));
-        this.groupRules$.next(groupMap);
+        this.groupRulesSubject.next(groupMap);
     }
     /**
      * Constructs sorting rules based on the table state.
      * @param state Table state
      */
     buildSortRulesMap(state = this.getTableState()) {
-        this.sortRules$.next(new Map(state.sortBy.filter((rule) => rule.field).map((rule) => [rule.field, rule])));
+        this.sortRules$.set(new Map(state.sortBy.filter((rule) => rule.field).map((rule) => [rule.field, rule])));
     }
     /**
      * Constructs filter rules based on the table state.
      * @param state Table state.
      */
     buildFilterRulesMap(state = this.getTableState()) {
-        this.filterRules$.next(state.filterBy.reduce((hash, rule) => {
+        this.filterRules$.set(state.filterBy.reduce((hash, rule) => {
             const key = rule.field;
             if (!hash.has(key)) {
                 hash.set(key, []);
@@ -407,7 +408,7 @@ class TableResponsiveService {
         /** @hidden */
         this._responsiveBreakpoints = new Map();
         /** @hidden */
-        this._onDestroy$ = new Subject();
+        this._destroyRef = inject(DestroyRef);
     }
     /**
      * Registers responsive column with it's breakpoint configuration.
@@ -418,11 +419,6 @@ class TableResponsiveService {
         this._responsiveBreakpoints.set(column, this._normalizeBreakpoints(breakpoints));
         this._listenToTableResize();
     }
-    /** @hidden */
-    ngOnDestroy() {
-        this._onDestroy$.next();
-        this._onDestroy$.complete();
-    }
     /**
      * @hidden
      * Transforms plain breakpoints into a list with minimal/maximal element width with it's visibility state.
@@ -448,7 +444,7 @@ class TableResponsiveService {
     _listenToTableResize() {
         this._resizeSubscription?.unsubscribe();
         this._resizeSubscription = resizeObservable(this._elmRef.nativeElement)
-            .pipe(debounceTime(20), takeUntil(this._onDestroy$))
+            .pipe(debounceTime(20), takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             this._processResponsiveColumns();
         });
@@ -628,10 +624,6 @@ class TableColumnResizeService {
         return this._fixedColumnsWidthMap.size === this._visibleColumnNames.length;
     }
     /** @hidden */
-    get _rtl() {
-        return this._rtlService?.rtl.getValue();
-    }
-    /** @hidden */
     constructor(_tableScrollDispatcherService, _rtlService) {
         this._tableScrollDispatcherService = _tableScrollDispatcherService;
         this._rtlService = _rtlService;
@@ -662,26 +654,26 @@ class TableColumnResizeService {
         /** @hidden */
         this._markForCheck = new Subject();
         /** @hidden */
-        this._destroyed = new Subject();
+        this._destroyed = inject(DestroyRef);
         /** @hidden */
         this._resizerMoveSubscription = new Subscription();
         /** Resize progress stream. */
         this.resizeInProgress$ = new BehaviorSubject(this._resizeInProgress);
         /** Whether cell mock should be visible. */
-        this.cellMockVisible$ = new BehaviorSubject(false);
+        this.cellMockVisible$ = signal(false);
         /** Resizer position stream. */
         this.resizerPosition$ = new BehaviorSubject(0);
+        /** @hidden */
+        this._rtl$ = computed(() => !!this._rtlService?.rtlSignal());
         this._tableScrollDispatcherService
             ?.horizontallyScrolled()
-            .pipe(takeUntil(this._destroyed))
+            .pipe(takeUntilDestroyed(this._destroyed))
             .subscribe((scrollable) => (this._scrollLeft = scrollable.getScrollLeft()));
     }
     /** @hidden */
     ngOnDestroy() {
         this._resizeInProgress = false;
         this.resizeInProgress$.next(false);
-        this._destroyed.next();
-        this._destroyed.complete();
         this._resizerMoveSubscription.unsubscribe();
     }
     /** @hidden */
@@ -776,7 +768,7 @@ class TableColumnResizeService {
         this._resizerPosition = null;
         this.resizerPosition$.next(this.resizerPosition);
         if (resizerPosition != null) {
-            const scrollLeftOffset = this._scrollLeft * (this._rtl ? 1 : -1);
+            const scrollLeftOffset = this._scrollLeft * (this._rtl$() ? 1 : -1);
             this._resizerPosition = resizerPosition - TABLE_RESIZER_BORDER_WIDTH + scrollLeftOffset;
             this.resizerPosition$.next(this.resizerPosition);
         }
@@ -808,7 +800,7 @@ class TableColumnResizeService {
         this.resizerPosition$.next(this.resizerPosition);
         if (this._startX != null) {
             const clientStartX = this._clientStartX ?? 0;
-            const diffX = this._rtl ? clientStartX - event.clientX : event.clientX - clientStartX;
+            const diffX = this._rtl$() ? clientStartX - event.clientX : event.clientX - clientStartX;
             this._processResize(diffX);
         }
         this._startX = null;
@@ -854,8 +846,8 @@ class TableColumnResizeService {
         const updatedWidth = columnWidth + diffX;
         this._fixedColumnsWidthMap.set(this._resizedColumn, updatedWidth + 'px');
         this.updateFrozenColumnsWidthAfterResize(this._resizedColumn, diffX);
-        const computed = window.getComputedStyle(resizedElement);
-        const padding = parseInt(computed.paddingLeft, 10) + parseInt(computed.paddingRight, 10);
+        const computedStyles = window.getComputedStyle(resizedElement);
+        const padding = parseInt(computedStyles.paddingLeft, 10) + parseInt(computedStyles.paddingRight, 10);
         this._updateHeaderOverflowState(updatedWidth - padding);
         this._markForCheck.next();
     }
@@ -865,7 +857,7 @@ class TableColumnResizeService {
             .pipe(debounceTime(10))
             .subscribe((event) => {
             const clientStartX = this._clientStartX ?? 0;
-            const diffX = this._rtl ? clientStartX - event.clientX : event.clientX - clientStartX;
+            const diffX = this._rtl$() ? clientStartX - event.clientX : event.clientX - clientStartX;
             this._resizerPosition = (this._startX ?? 0) + diffX;
             this.resizerPosition$.next(this.resizerPosition);
             this._markForCheck.next();
@@ -909,15 +901,13 @@ class PlatformTableCellResizableDirective extends TableCellDirective {
         this._resizableSide = value;
     }
     /** @hidden */
-    get _isRtl() {
-        return this._rtlService?.rtl.getValue() ?? false;
-    }
-    /** @hidden */
     constructor() {
         super();
         /** @hidden */
         this._resizableSide = 'both';
         /** @hidden */
+        this._rtl$ = computed(() => !!this._rtlService?.rtlSignal());
+        /** @hidden */
         this._tableColumnResizeService = inject(TableColumnResizeService);
         /** @hidden */
         this._rtlService = inject(RtlService, {
@@ -956,20 +946,20 @@ class PlatformTableCellResizableDirective extends TableCellDirective {
         const elPosition = el.getBoundingClientRect();
         let resizerPosition;
         let resizedColumn;
-        const pointerOnLeft = this._isRtl
+        const pointerOnLeft = this._rtl$()
             ? elPosition.right - event.clientX < TABLE_CELL_RESIZABLE_THRESHOLD_PX
             : event.clientX - elPosition.left < TABLE_CELL_RESIZABLE_THRESHOLD_PX;
         if (pointerOnLeft && this._resizableSide !== 'end') {
-            resizerPosition = this._isRtl
+            resizerPosition = this._rtl$()
                 ? el.parentElement.offsetWidth - (el.offsetLeft + el.offsetWidth)
                 : el.offsetLeft;
             resizedColumn = this._tableColumnResizeService.getPreviousColumnName(this.columnName);
         }
-        const pointerOnRight = this._isRtl
+        const pointerOnRight = this._rtl$()
             ? event.clientX - elPosition.left < TABLE_CELL_RESIZABLE_THRESHOLD_PX
             : elPosition.right - event.clientX < TABLE_CELL_RESIZABLE_THRESHOLD_PX;
         if (pointerOnRight && this._resizableSide !== 'start') {
-            resizerPosition = this._isRtl
+            resizerPosition = this._rtl$()
                 ? el.parentElement.offsetWidth - el.offsetLeft
                 : el.offsetLeft + el.offsetWidth;
             resizedColumn = this.columnName;
@@ -1941,7 +1931,7 @@ class TableDataSourceDirective extends DataSourceDirective {
         /** Event emitted when data loading is finished. */
         this.onDataReceived = new EventEmitter();
         /** Total items count stream. */
-        this.totalItems$ = new BehaviorSubject(0);
+        this.totalItems$ = signal(0);
         /** Items stream. */
         this.items$ = new BehaviorSubject([]);
         /** Child items stream. */
@@ -1975,10 +1965,10 @@ class TableDataSourceDirective extends DataSourceDirective {
     }
     /** @hidden */
     set totalItems(value) {
-        this.totalItems$.next(value);
+        this.totalItems$.set(value);
     }
     get totalItems() {
-        return this.totalItems$.value;
+        return this.totalItems$();
     }
     /** @hidden */
     initializeDataSource() {
@@ -2040,7 +2030,7 @@ class TableDataSourceDirective extends DataSourceDirective {
             throw new Error(`[TableDataSource] source did not match an Array, Observable, nor DataSource`);
         }
         this._tableDsSubscription.add(this.dataChanged$.subscribe((items) => {
-            this.totalItems$.next(dataSourceStream.dataProvider.totalItems);
+            this.totalItems$.set(dataSourceStream.dataProvider.totalItems);
             this.items$.next(items);
         }));
         this._tableDsSubscription.add(dataSourceStream.onDataRequested().subscribe(() => {