@fundamental-ngx/btp 0.55.4 → 0.55.5
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.
- package/fesm2022/fundamental-ngx-btp-navigation-menu.mjs +2 -2
- package/fesm2022/fundamental-ngx-btp-navigation.mjs +27 -10
- package/fesm2022/fundamental-ngx-btp-navigation.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-btp-search-field.mjs +2 -2
- package/fesm2022/fundamental-ngx-btp-search-field.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-btp-splitter.mjs +2 -2
- package/fesm2022/fundamental-ngx-btp-tool-header.mjs +2 -2
- package/fesm2022/fundamental-ngx-btp-tool-layout.mjs +2 -2
- package/navigation/components/navigation-item/navigation-list-item.component.d.ts +7 -1
- package/navigation/components/navigation-link/navigation-link.component.d.ts +4 -1
- package/package.json +3 -3
|
@@ -48,11 +48,11 @@ class SearchFieldComponent {
|
|
|
48
48
|
this.search.emit(this._value);
|
|
49
49
|
}
|
|
50
50
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: SearchFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
51
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: SearchFieldComponent, isStandalone: true, selector: "fdb-search-field", inputs: { placeholder: "placeholder" }, outputs: { search: "search" }, providers: [CvaControl], viewQueries: [{ propertyName: "_searchInputField", first: true, predicate: ["searchInputField"], descendants: true }], hostDirectives: [{ directive: i1.CvaDirective }], ngImport: i0, template: "<div class=\"fd-search-field\">\n <fd-icon glyph=\"search\" class=\"fd-search-field__icon\" role=\"presentation\" [ariaHidden]=\"true\"></fd-icon>\n <input\n [placeholder]=\"placeholder || ('btpSearchField.searchInputPlaceholder' | fdTranslate)\"\n type=\"search\"\n [attr.aria-label]=\"'btpSearchField.searchInputAriaLabel' | fdTranslate\"\n class=\"fd-search-field__input\"\n [ngModel]=\"_value\"\n (ngModelChange)=\"updateValue($event)\"\n (keydown.enter)=\"_search()\"\n (focusin)=\"_inputFocused.set(true)\"\n (focusout)=\"_inputFocused.set(false)\"\n #searchInputField\n />\n <div role=\"presentation\" aria-hidden=\"true\" class=\"fd-search-field__underline\"></div>\n <div class=\"fd-search-field__actions\">\n <div class=\"fd-search-field__action-container\">\n <button\n fd-button\n fdbNestedButton\n glyph=\"decline\"\n [ariaLabel]=\"'btpSearchField.clearButtonLabel' | fdTranslate\"\n (click)=\"updateValue(''); searchInputField.focus()\"\n ></button>\n </div>\n <div class=\"fd-search-field__action-container\">\n <button\n fd-button\n (click)=\"_search()\"\n glyph=\"slim-arrow-right\"\n fdbNestedButton\n [class.is-focus]=\"_value && _inputFocused()\"\n [ariaLabel]=\"'btpSearchField.searchButtonLabel' | fdTranslate\"\n [attr.aria-disabled]=\"!_value\"\n [attr.tabindex]=\"!_value ? -1 : 0\"\n ></button>\n </div>\n </div>\n</div>\n", styles: [".fd-search-field{--fdSearchField_Height:2.5rem;--fdSearchField_Height_Compact:2rem;--fdSearchField_Height_Border:calc(var(--fdSearchField_Height) - .125rem);--fdSearchField_Border_Radius:var(--fdSearchField_BorderRadius);--fdSearchField_Padding:.625rem;--fdSearchField_Padding_Compact:.5rem;--fdSearchField_Box_Shadow:var(--sapField_Shadow);--fdSearchField_Background:var(--fdSearchField_Background_Normal);--fdSearchField_Color:var(--sapShell_TextColor);--fdSearchField_Icon_Size:1rem;--fdSearchField_Icon_Size_Offset:.375rem;--fdSearchField_Actions_Offset:.25rem;--fdSearchField_Actions_Offset_Compact:.1875rem;--fdSearchField_Action_Container_Size:2rem;--fdSearchField_Action_Container_Size_Compact:1.625rem;--fdSearchField_Clear_Button_Display:none;--fdSearchField_Padding_Left:calc(var(--fdSearchField_Padding) + var(--fdSearchField_Icon_Size) + var(--fdSearchField_Icon_Size_Offset));--fdSearchField_Padding_Left_Compact:calc(var(--fdSearchField_Padding_Compact) + var(--fdSearchField_Icon_Size) + var(--fdSearchField_Icon_Size_Offset));--fdSearchField_Padding_Right:calc(var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset));--fdSearchField_Padding_Right_Compact:calc(var(--fdSearchField_Action_Container_Size_Compact) + var(--fdSearchField_Actions_Offset_Compact));--fdSearchField_Padding_Right_Typed:calc(var(--fdSearchField_Padding_Right)*2);--fdSearchField_Padding_Right_Typed_Compact:calc(var(--fdSearchField_Padding_Right_Compact)*2);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-align:center;-ms-flex-align:center;align-items:center;border:.0625rem solid var(--fdSearchField_Border_Color);border-radius:var(--fdSearchField_Border_Radius);height:var(--fdSearchField_Height);max-height:var(--fdSearchField_Height);min-height:var(--fdSearchField_Height);position:relative;width:16rem}.fd-search-field:after,.fd-search-field:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__icon{color:var(--fdSearchField_Icon_Color);height:1rem;left:var(--fdSearchField_Padding);max-height:1rem;max-width:1rem;min-height:1rem;min-width:1rem;position:absolute;width:1rem;z-index:10}.fd-search-field__icon[dir=rtl],[dir=rtl] .fd-search-field__icon{left:auto;right:var(--fdSearchField_Padding)}.fd-search-field__icon [class*=sap-icon],.fd-search-field__icon[class*=sap-icon]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1rem}.fd-search-field__input{background:var(--fdSearchField_Background);border:0;border-radius:var(--fdSearchField_Border_Radius);-webkit-box-shadow:var(--fdSearchField_Box_Shadow);box-shadow:var(--fdSearchField_Box_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdSearchField_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSearchField_Height_Border);line-height:normal;margin-block:0;margin-inline:0;max-height:var(--fdSearchField_Height_Border);min-height:var(--fdSearchField_Height_Border);padding-block:0;padding-block:var(--fdSearchField_Padding);padding-inline:0;padding-inline:var(--fdSearchField_Padding_Left) var(--fdSearchField_Padding_Right);width:16rem;z-index:1}.fd-search-field__input:after,.fd-search-field__input:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__input::-webkit-input-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::-moz-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input:-ms-input-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::-ms-input-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::-webkit-search-cancel-button,.fd-search-field__input::-webkit-search-decoration,.fd-search-field__input::-webkit-search-results-button,.fd-search-field__input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.fd-search-field__input:not(:-moz-placeholder-shown){--fdSearchField_Padding_Right:calc((var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset))*2);--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input:not(:-ms-input-placeholder){--fdSearchField_Padding_Right:calc((var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset))*2);--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input:not(:placeholder-shown){--fdSearchField_Padding_Right:calc((var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset))*2);--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input:not(:-moz-placeholder-shown)[class*=-compact],[class*=-compact] .fd-search-field__input:not(:-moz-placeholder-shown):not([class*=-cozy]){--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Typed_Compact)}.fd-search-field__input:not(:-ms-input-placeholder)[class*=-compact],[class*=-compact] .fd-search-field__input:not(:-ms-input-placeholder):not([class*=-cozy]){--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Typed_Compact)}.fd-search-field__input:not(:placeholder-shown)[class*=-compact],[class*=-compact] .fd-search-field__input:not(:placeholder-shown):not([class*=-cozy]){--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Typed_Compact)}.fd-search-field__input:not(:-moz-placeholder-shown)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:-ms-input-placeholder)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:placeholder-shown)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:-moz-placeholder-shown)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:-ms-input-placeholder)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:placeholder-shown)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:-moz-placeholder-shown).is-focus,.fd-search-field__input:not(:-moz-placeholder-shown):focus{z-index:5;--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none}.fd-search-field__input:not(:-ms-input-placeholder).is-focus,.fd-search-field__input:not(:-ms-input-placeholder):focus{z-index:5;--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none}.fd-search-field__input:not(:placeholder-shown).is-focus,.fd-search-field__input:not(:placeholder-shown):focus{z-index:5;--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none}.fd-search-field__input.is-hover,.fd-search-field__input:hover{--fdSearchField_Background:var(--fdSearchField_Background_Hover);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input.is-hover+.fd-search-field__underline,.fd-search-field__input:hover+.fd-search-field__underline{display:none}.fd-search-field__input.is-focus,.fd-search-field__input:focus{z-index:5;--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Border_Color:transparent;--fdSearchField_Box_Shadow:none;outline:var(--fdSearchField_Outline);outline-offset:var(--fdSearchField_Outline_Offset)}.fd-search-field__input.is-focus+.fd-search-field__underline,.fd-search-field__input:focus+.fd-search-field__underline{display:none}.fd-search-field__underline{border:0;border-radius:var(--fdSearchField_Border_Radius);-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;height:100%;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;position:absolute;width:100%}.fd-search-field__underline:after,.fd-search-field__underline:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__underline:after{background:var(--fdSearchField_Underline_Color);bottom:0;content:\"\";height:.0625rem;position:absolute;width:100%;z-index:30}.fd-search-field__actions{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-align:center;-ms-flex-align:center;align-items:center;height:100%;position:absolute;right:var(--fdSearchField_Actions_Offset);z-index:10}.fd-search-field__actions:after,.fd-search-field__actions:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__actions[dir=rtl],[dir=rtl] .fd-search-field__actions{left:var(--fdSearchField_Actions_Offset);right:auto}.fd-search-field__actions button.is-disabled,.fd-search-field__actions button:disabled,.fd-search-field__actions button[aria-disabled=true]{opacity:1}.fd-search-field__action-container{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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:var(--fdSearchField_Action_Container_Size);max-height:var(--fdSearchField_Action_Container_Size);max-width:var(--fdSearchField_Action_Container_Size);min-height:var(--fdSearchField_Action_Container_Size);min-width:var(--fdSearchField_Action_Container_Size);width:var(--fdSearchField_Action_Container_Size)}.fd-search-field__action-container:after,.fd-search-field__action-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__action-container:first-child{display:var(--fdSearchField_Clear_Button_Display)}.fd-search-field__action-container button{--fdButton_Nested_Color:var(--sapShell_TextColor)}.fd-search-field[class*=-compact],[class*=-compact] .fd-search-field:not([class*=-cozy]){--fdSearchField_Height:var(--fdSearchField_Height_Compact);--fdSearchField_Padding:var(--fdSearchField_Padding_Compact);--fdSearchField_Actions_Offset:var(--fdSearchField_Actions_Offset_Compact);--fdSearchField_Action_Container_Size:var(--fdSearchField_Action_Container_Size_Compact);--fdSearchField_Padding_Left:var(--fdSearchField_Padding_Left_Compact);--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Compact)}\n/*! Bundled license information:\n\nfundamental-styles/dist/search-field.css:\n (*!\n * Fundamental Library Styles v0.38.0\n * Copyright (c) 2024 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: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: NestedButtonDirective, selector: "[fd-button][fdbNestedButton]", inputs: ["fdType", "square"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
51
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: SearchFieldComponent, isStandalone: true, selector: "fdb-search-field", inputs: { placeholder: "placeholder" }, outputs: { search: "search" }, providers: [CvaControl], viewQueries: [{ propertyName: "_searchInputField", first: true, predicate: ["searchInputField"], descendants: true }], hostDirectives: [{ directive: i1.CvaDirective }], ngImport: i0, template: "<div class=\"fd-search-field\">\n <fd-icon glyph=\"search\" class=\"fd-search-field__icon\" role=\"presentation\" [ariaHidden]=\"true\"></fd-icon>\n <input\n [placeholder]=\"placeholder || ('btpSearchField.searchInputPlaceholder' | fdTranslate)\"\n type=\"search\"\n [attr.aria-label]=\"'btpSearchField.searchInputAriaLabel' | fdTranslate\"\n class=\"fd-search-field__input\"\n [ngModel]=\"_value\"\n (ngModelChange)=\"updateValue($event)\"\n (keydown.enter)=\"_search()\"\n (focusin)=\"_inputFocused.set(true)\"\n (focusout)=\"_inputFocused.set(false)\"\n #searchInputField\n />\n <div role=\"presentation\" aria-hidden=\"true\" class=\"fd-search-field__underline\"></div>\n <div class=\"fd-search-field__actions\">\n <div class=\"fd-search-field__action-container\">\n <button\n fd-button\n fdbNestedButton\n glyph=\"decline\"\n [ariaLabel]=\"'btpSearchField.clearButtonLabel' | fdTranslate\"\n (click)=\"updateValue(''); searchInputField.focus()\"\n ></button>\n </div>\n <div class=\"fd-search-field__action-container\">\n <button\n fd-button\n (click)=\"_search()\"\n glyph=\"slim-arrow-right\"\n fdbNestedButton\n [class.is-focus]=\"_value && _inputFocused()\"\n [ariaLabel]=\"'btpSearchField.searchButtonLabel' | fdTranslate\"\n [attr.aria-disabled]=\"!_value\"\n [attr.tabindex]=\"!_value ? -1 : 0\"\n ></button>\n </div>\n </div>\n</div>\n", styles: [".fd-search-field{--fdSearchField_Height:2.5rem;--fdSearchField_Height_Compact:2rem;--fdSearchField_Height_Border:calc(var(--fdSearchField_Height) - .125rem);--fdSearchField_Border_Radius:var(--fdSearchField_BorderRadius);--fdSearchField_Padding:.625rem;--fdSearchField_Padding_Compact:.5rem;--fdSearchField_Box_Shadow:var(--sapField_Shadow);--fdSearchField_Background:var(--fdSearchField_Background_Normal);--fdSearchField_Color:var(--sapShell_TextColor);--fdSearchField_Icon_Size:1rem;--fdSearchField_Icon_Size_Offset:.375rem;--fdSearchField_Actions_Offset:.25rem;--fdSearchField_Actions_Offset_Compact:.1875rem;--fdSearchField_Action_Container_Size:2rem;--fdSearchField_Action_Container_Size_Compact:1.625rem;--fdSearchField_Clear_Button_Display:none;--fdSearchField_Padding_Left:calc(var(--fdSearchField_Padding) + var(--fdSearchField_Icon_Size) + var(--fdSearchField_Icon_Size_Offset));--fdSearchField_Padding_Left_Compact:calc(var(--fdSearchField_Padding_Compact) + var(--fdSearchField_Icon_Size) + var(--fdSearchField_Icon_Size_Offset));--fdSearchField_Padding_Right:calc(var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset));--fdSearchField_Padding_Right_Compact:calc(var(--fdSearchField_Action_Container_Size_Compact) + var(--fdSearchField_Actions_Offset_Compact));--fdSearchField_Padding_Right_Typed:calc(var(--fdSearchField_Padding_Right)*2);--fdSearchField_Padding_Right_Typed_Compact:calc(var(--fdSearchField_Padding_Right_Compact)*2);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-align:center;-ms-flex-align:center;align-items:center;border:.0625rem solid var(--fdSearchField_Border_Color);border-radius:var(--fdSearchField_Border_Radius);height:var(--fdSearchField_Height);max-height:var(--fdSearchField_Height);min-height:var(--fdSearchField_Height);position:relative;width:16rem}.fd-search-field:after,.fd-search-field:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__icon{color:var(--fdSearchField_Icon_Color);height:1rem;left:var(--fdSearchField_Padding);max-height:1rem;max-width:1rem;min-height:1rem;min-width:1rem;position:absolute;width:1rem;z-index:10}.fd-search-field__icon[dir=rtl],[dir=rtl] .fd-search-field__icon{left:auto;right:var(--fdSearchField_Padding)}.fd-search-field__icon [class*=sap-icon],.fd-search-field__icon[class*=sap-icon]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1rem}.fd-search-field__input{background:var(--fdSearchField_Background);border:0;border-radius:var(--fdSearchField_Border_Radius);-webkit-box-shadow:var(--fdSearchField_Box_Shadow);box-shadow:var(--fdSearchField_Box_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdSearchField_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSearchField_Height_Border);line-height:normal;margin-block:0;margin-inline:0;max-height:var(--fdSearchField_Height_Border);min-height:var(--fdSearchField_Height_Border);padding-block:0;padding-block:var(--fdSearchField_Padding);padding-inline:0;padding-inline:var(--fdSearchField_Padding_Left) var(--fdSearchField_Padding_Right);width:16rem;z-index:1}.fd-search-field__input:after,.fd-search-field__input:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__input::-webkit-input-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::-moz-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input:-ms-input-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::-ms-input-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::-webkit-search-cancel-button,.fd-search-field__input::-webkit-search-decoration,.fd-search-field__input::-webkit-search-results-button,.fd-search-field__input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.fd-search-field__input:not(:-moz-placeholder){--fdSearchField_Padding_Right:calc((var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset))*2);--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input:not(:-ms-input-placeholder){--fdSearchField_Padding_Right:calc((var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset))*2);--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input:not(:placeholder-shown){--fdSearchField_Padding_Right:calc((var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset))*2);--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input:not(:-moz-placeholder)[class*=-compact],[class*=-compact] .fd-search-field__input:not(:-moz-placeholder):not([class*=-cozy]){--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Typed_Compact)}.fd-search-field__input:not(:-ms-input-placeholder)[class*=-compact],[class*=-compact] .fd-search-field__input:not(:-ms-input-placeholder):not([class*=-cozy]){--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Typed_Compact)}.fd-search-field__input:not(:placeholder-shown)[class*=-compact],[class*=-compact] .fd-search-field__input:not(:placeholder-shown):not([class*=-cozy]){--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Typed_Compact)}.fd-search-field__input:not(:-moz-placeholder)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:-ms-input-placeholder)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:placeholder-shown)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:-moz-placeholder)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:-ms-input-placeholder)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:placeholder-shown)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:-moz-placeholder).is-focus,.fd-search-field__input:not(:-moz-placeholder):focus{z-index:5;--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none}.fd-search-field__input:not(:-ms-input-placeholder).is-focus,.fd-search-field__input:not(:-ms-input-placeholder):focus{z-index:5;--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none}.fd-search-field__input:not(:placeholder-shown).is-focus,.fd-search-field__input:not(:placeholder-shown):focus{z-index:5;--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none}.fd-search-field__input.is-hover,.fd-search-field__input:hover{--fdSearchField_Background:var(--fdSearchField_Background_Hover);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input.is-hover+.fd-search-field__underline,.fd-search-field__input:hover+.fd-search-field__underline{display:none}.fd-search-field__input.is-focus,.fd-search-field__input:focus{z-index:5;--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Border_Color:transparent;--fdSearchField_Box_Shadow:none;outline:var(--fdSearchField_Outline);outline-offset:var(--fdSearchField_Outline_Offset)}.fd-search-field__input.is-focus+.fd-search-field__underline,.fd-search-field__input:focus+.fd-search-field__underline{display:none}.fd-search-field__underline{border:0;border-radius:var(--fdSearchField_Border_Radius);-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;height:100%;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;position:absolute;width:100%}.fd-search-field__underline:after,.fd-search-field__underline:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__underline:after{background:var(--fdSearchField_Underline_Color);bottom:0;content:\"\";height:.0625rem;position:absolute;width:100%;z-index:30}.fd-search-field__actions{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-align:center;-ms-flex-align:center;align-items:center;height:100%;position:absolute;right:var(--fdSearchField_Actions_Offset);z-index:10}.fd-search-field__actions:after,.fd-search-field__actions:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__actions[dir=rtl],[dir=rtl] .fd-search-field__actions{left:var(--fdSearchField_Actions_Offset);right:auto}.fd-search-field__actions button.is-disabled,.fd-search-field__actions button:disabled,.fd-search-field__actions button[aria-disabled=true]{opacity:1}.fd-search-field__action-container{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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:var(--fdSearchField_Action_Container_Size);max-height:var(--fdSearchField_Action_Container_Size);max-width:var(--fdSearchField_Action_Container_Size);min-height:var(--fdSearchField_Action_Container_Size);min-width:var(--fdSearchField_Action_Container_Size);width:var(--fdSearchField_Action_Container_Size)}.fd-search-field__action-container:after,.fd-search-field__action-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__action-container:first-child{display:var(--fdSearchField_Clear_Button_Display)}.fd-search-field__action-container button{--fdButton_Nested_Color:var(--sapShell_TextColor)}.fd-search-field[class*=-compact],[class*=-compact] .fd-search-field:not([class*=-cozy]){--fdSearchField_Height:var(--fdSearchField_Height_Compact);--fdSearchField_Padding:var(--fdSearchField_Padding_Compact);--fdSearchField_Actions_Offset:var(--fdSearchField_Actions_Offset_Compact);--fdSearchField_Action_Container_Size:var(--fdSearchField_Action_Container_Size_Compact);--fdSearchField_Padding_Left:var(--fdSearchField_Padding_Left_Compact);--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Compact)}\n/*! Bundled license information:\n\nfundamental-styles/dist/search-field.css:\n (*!\n * Fundamental Library Styles v0.39.2\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: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: NestedButtonDirective, selector: "[fd-button][fdbNestedButton]", inputs: ["fdType", "square"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
52
52
|
}
|
|
53
53
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: SearchFieldComponent, decorators: [{
|
|
54
54
|
type: Component,
|
|
55
|
-
args: [{ selector: 'fdb-search-field', hostDirectives: [CvaDirective], providers: [CvaControl], imports: [IconComponent, FormsModule, FdTranslatePipe, ButtonComponent, NestedButtonDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"fd-search-field\">\n <fd-icon glyph=\"search\" class=\"fd-search-field__icon\" role=\"presentation\" [ariaHidden]=\"true\"></fd-icon>\n <input\n [placeholder]=\"placeholder || ('btpSearchField.searchInputPlaceholder' | fdTranslate)\"\n type=\"search\"\n [attr.aria-label]=\"'btpSearchField.searchInputAriaLabel' | fdTranslate\"\n class=\"fd-search-field__input\"\n [ngModel]=\"_value\"\n (ngModelChange)=\"updateValue($event)\"\n (keydown.enter)=\"_search()\"\n (focusin)=\"_inputFocused.set(true)\"\n (focusout)=\"_inputFocused.set(false)\"\n #searchInputField\n />\n <div role=\"presentation\" aria-hidden=\"true\" class=\"fd-search-field__underline\"></div>\n <div class=\"fd-search-field__actions\">\n <div class=\"fd-search-field__action-container\">\n <button\n fd-button\n fdbNestedButton\n glyph=\"decline\"\n [ariaLabel]=\"'btpSearchField.clearButtonLabel' | fdTranslate\"\n (click)=\"updateValue(''); searchInputField.focus()\"\n ></button>\n </div>\n <div class=\"fd-search-field__action-container\">\n <button\n fd-button\n (click)=\"_search()\"\n glyph=\"slim-arrow-right\"\n fdbNestedButton\n [class.is-focus]=\"_value && _inputFocused()\"\n [ariaLabel]=\"'btpSearchField.searchButtonLabel' | fdTranslate\"\n [attr.aria-disabled]=\"!_value\"\n [attr.tabindex]=\"!_value ? -1 : 0\"\n ></button>\n </div>\n </div>\n</div>\n", styles: [".fd-search-field{--fdSearchField_Height:2.5rem;--fdSearchField_Height_Compact:2rem;--fdSearchField_Height_Border:calc(var(--fdSearchField_Height) - .125rem);--fdSearchField_Border_Radius:var(--fdSearchField_BorderRadius);--fdSearchField_Padding:.625rem;--fdSearchField_Padding_Compact:.5rem;--fdSearchField_Box_Shadow:var(--sapField_Shadow);--fdSearchField_Background:var(--fdSearchField_Background_Normal);--fdSearchField_Color:var(--sapShell_TextColor);--fdSearchField_Icon_Size:1rem;--fdSearchField_Icon_Size_Offset:.375rem;--fdSearchField_Actions_Offset:.25rem;--fdSearchField_Actions_Offset_Compact:.1875rem;--fdSearchField_Action_Container_Size:2rem;--fdSearchField_Action_Container_Size_Compact:1.625rem;--fdSearchField_Clear_Button_Display:none;--fdSearchField_Padding_Left:calc(var(--fdSearchField_Padding) + var(--fdSearchField_Icon_Size) + var(--fdSearchField_Icon_Size_Offset));--fdSearchField_Padding_Left_Compact:calc(var(--fdSearchField_Padding_Compact) + var(--fdSearchField_Icon_Size) + var(--fdSearchField_Icon_Size_Offset));--fdSearchField_Padding_Right:calc(var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset));--fdSearchField_Padding_Right_Compact:calc(var(--fdSearchField_Action_Container_Size_Compact) + var(--fdSearchField_Actions_Offset_Compact));--fdSearchField_Padding_Right_Typed:calc(var(--fdSearchField_Padding_Right)*2);--fdSearchField_Padding_Right_Typed_Compact:calc(var(--fdSearchField_Padding_Right_Compact)*2);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-align:center;-ms-flex-align:center;align-items:center;border:.0625rem solid var(--fdSearchField_Border_Color);border-radius:var(--fdSearchField_Border_Radius);height:var(--fdSearchField_Height);max-height:var(--fdSearchField_Height);min-height:var(--fdSearchField_Height);position:relative;width:16rem}.fd-search-field:after,.fd-search-field:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__icon{color:var(--fdSearchField_Icon_Color);height:1rem;left:var(--fdSearchField_Padding);max-height:1rem;max-width:1rem;min-height:1rem;min-width:1rem;position:absolute;width:1rem;z-index:10}.fd-search-field__icon[dir=rtl],[dir=rtl] .fd-search-field__icon{left:auto;right:var(--fdSearchField_Padding)}.fd-search-field__icon [class*=sap-icon],.fd-search-field__icon[class*=sap-icon]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1rem}.fd-search-field__input{background:var(--fdSearchField_Background);border:0;border-radius:var(--fdSearchField_Border_Radius);-webkit-box-shadow:var(--fdSearchField_Box_Shadow);box-shadow:var(--fdSearchField_Box_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdSearchField_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSearchField_Height_Border);line-height:normal;margin-block:0;margin-inline:0;max-height:var(--fdSearchField_Height_Border);min-height:var(--fdSearchField_Height_Border);padding-block:0;padding-block:var(--fdSearchField_Padding);padding-inline:0;padding-inline:var(--fdSearchField_Padding_Left) var(--fdSearchField_Padding_Right);width:16rem;z-index:1}.fd-search-field__input:after,.fd-search-field__input:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__input::-webkit-input-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::-moz-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input:-ms-input-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::-ms-input-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::-webkit-search-cancel-button,.fd-search-field__input::-webkit-search-decoration,.fd-search-field__input::-webkit-search-results-button,.fd-search-field__input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.fd-search-field__input:not(:-moz-placeholder-shown){--fdSearchField_Padding_Right:calc((var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset))*2);--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input:not(:-ms-input-placeholder){--fdSearchField_Padding_Right:calc((var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset))*2);--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input:not(:placeholder-shown){--fdSearchField_Padding_Right:calc((var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset))*2);--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input:not(:-moz-placeholder-shown)[class*=-compact],[class*=-compact] .fd-search-field__input:not(:-moz-placeholder-shown):not([class*=-cozy]){--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Typed_Compact)}.fd-search-field__input:not(:-ms-input-placeholder)[class*=-compact],[class*=-compact] .fd-search-field__input:not(:-ms-input-placeholder):not([class*=-cozy]){--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Typed_Compact)}.fd-search-field__input:not(:placeholder-shown)[class*=-compact],[class*=-compact] .fd-search-field__input:not(:placeholder-shown):not([class*=-cozy]){--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Typed_Compact)}.fd-search-field__input:not(:-moz-placeholder-shown)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:-ms-input-placeholder)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:placeholder-shown)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:-moz-placeholder-shown)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:-ms-input-placeholder)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:placeholder-shown)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:-moz-placeholder-shown).is-focus,.fd-search-field__input:not(:-moz-placeholder-shown):focus{z-index:5;--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none}.fd-search-field__input:not(:-ms-input-placeholder).is-focus,.fd-search-field__input:not(:-ms-input-placeholder):focus{z-index:5;--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none}.fd-search-field__input:not(:placeholder-shown).is-focus,.fd-search-field__input:not(:placeholder-shown):focus{z-index:5;--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none}.fd-search-field__input.is-hover,.fd-search-field__input:hover{--fdSearchField_Background:var(--fdSearchField_Background_Hover);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input.is-hover+.fd-search-field__underline,.fd-search-field__input:hover+.fd-search-field__underline{display:none}.fd-search-field__input.is-focus,.fd-search-field__input:focus{z-index:5;--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Border_Color:transparent;--fdSearchField_Box_Shadow:none;outline:var(--fdSearchField_Outline);outline-offset:var(--fdSearchField_Outline_Offset)}.fd-search-field__input.is-focus+.fd-search-field__underline,.fd-search-field__input:focus+.fd-search-field__underline{display:none}.fd-search-field__underline{border:0;border-radius:var(--fdSearchField_Border_Radius);-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;height:100%;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;position:absolute;width:100%}.fd-search-field__underline:after,.fd-search-field__underline:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__underline:after{background:var(--fdSearchField_Underline_Color);bottom:0;content:\"\";height:.0625rem;position:absolute;width:100%;z-index:30}.fd-search-field__actions{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-align:center;-ms-flex-align:center;align-items:center;height:100%;position:absolute;right:var(--fdSearchField_Actions_Offset);z-index:10}.fd-search-field__actions:after,.fd-search-field__actions:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__actions[dir=rtl],[dir=rtl] .fd-search-field__actions{left:var(--fdSearchField_Actions_Offset);right:auto}.fd-search-field__actions button.is-disabled,.fd-search-field__actions button:disabled,.fd-search-field__actions button[aria-disabled=true]{opacity:1}.fd-search-field__action-container{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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:var(--fdSearchField_Action_Container_Size);max-height:var(--fdSearchField_Action_Container_Size);max-width:var(--fdSearchField_Action_Container_Size);min-height:var(--fdSearchField_Action_Container_Size);min-width:var(--fdSearchField_Action_Container_Size);width:var(--fdSearchField_Action_Container_Size)}.fd-search-field__action-container:after,.fd-search-field__action-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__action-container:first-child{display:var(--fdSearchField_Clear_Button_Display)}.fd-search-field__action-container button{--fdButton_Nested_Color:var(--sapShell_TextColor)}.fd-search-field[class*=-compact],[class*=-compact] .fd-search-field:not([class*=-cozy]){--fdSearchField_Height:var(--fdSearchField_Height_Compact);--fdSearchField_Padding:var(--fdSearchField_Padding_Compact);--fdSearchField_Actions_Offset:var(--fdSearchField_Actions_Offset_Compact);--fdSearchField_Action_Container_Size:var(--fdSearchField_Action_Container_Size_Compact);--fdSearchField_Padding_Left:var(--fdSearchField_Padding_Left_Compact);--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Compact)}\n/*! Bundled license information:\n\nfundamental-styles/dist/search-field.css:\n (*!\n * Fundamental Library Styles v0.38.0\n * Copyright (c) 2024 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"] }]
|
|
55
|
+
args: [{ selector: 'fdb-search-field', hostDirectives: [CvaDirective], providers: [CvaControl], imports: [IconComponent, FormsModule, FdTranslatePipe, ButtonComponent, NestedButtonDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"fd-search-field\">\n <fd-icon glyph=\"search\" class=\"fd-search-field__icon\" role=\"presentation\" [ariaHidden]=\"true\"></fd-icon>\n <input\n [placeholder]=\"placeholder || ('btpSearchField.searchInputPlaceholder' | fdTranslate)\"\n type=\"search\"\n [attr.aria-label]=\"'btpSearchField.searchInputAriaLabel' | fdTranslate\"\n class=\"fd-search-field__input\"\n [ngModel]=\"_value\"\n (ngModelChange)=\"updateValue($event)\"\n (keydown.enter)=\"_search()\"\n (focusin)=\"_inputFocused.set(true)\"\n (focusout)=\"_inputFocused.set(false)\"\n #searchInputField\n />\n <div role=\"presentation\" aria-hidden=\"true\" class=\"fd-search-field__underline\"></div>\n <div class=\"fd-search-field__actions\">\n <div class=\"fd-search-field__action-container\">\n <button\n fd-button\n fdbNestedButton\n glyph=\"decline\"\n [ariaLabel]=\"'btpSearchField.clearButtonLabel' | fdTranslate\"\n (click)=\"updateValue(''); searchInputField.focus()\"\n ></button>\n </div>\n <div class=\"fd-search-field__action-container\">\n <button\n fd-button\n (click)=\"_search()\"\n glyph=\"slim-arrow-right\"\n fdbNestedButton\n [class.is-focus]=\"_value && _inputFocused()\"\n [ariaLabel]=\"'btpSearchField.searchButtonLabel' | fdTranslate\"\n [attr.aria-disabled]=\"!_value\"\n [attr.tabindex]=\"!_value ? -1 : 0\"\n ></button>\n </div>\n </div>\n</div>\n", styles: [".fd-search-field{--fdSearchField_Height:2.5rem;--fdSearchField_Height_Compact:2rem;--fdSearchField_Height_Border:calc(var(--fdSearchField_Height) - .125rem);--fdSearchField_Border_Radius:var(--fdSearchField_BorderRadius);--fdSearchField_Padding:.625rem;--fdSearchField_Padding_Compact:.5rem;--fdSearchField_Box_Shadow:var(--sapField_Shadow);--fdSearchField_Background:var(--fdSearchField_Background_Normal);--fdSearchField_Color:var(--sapShell_TextColor);--fdSearchField_Icon_Size:1rem;--fdSearchField_Icon_Size_Offset:.375rem;--fdSearchField_Actions_Offset:.25rem;--fdSearchField_Actions_Offset_Compact:.1875rem;--fdSearchField_Action_Container_Size:2rem;--fdSearchField_Action_Container_Size_Compact:1.625rem;--fdSearchField_Clear_Button_Display:none;--fdSearchField_Padding_Left:calc(var(--fdSearchField_Padding) + var(--fdSearchField_Icon_Size) + var(--fdSearchField_Icon_Size_Offset));--fdSearchField_Padding_Left_Compact:calc(var(--fdSearchField_Padding_Compact) + var(--fdSearchField_Icon_Size) + var(--fdSearchField_Icon_Size_Offset));--fdSearchField_Padding_Right:calc(var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset));--fdSearchField_Padding_Right_Compact:calc(var(--fdSearchField_Action_Container_Size_Compact) + var(--fdSearchField_Actions_Offset_Compact));--fdSearchField_Padding_Right_Typed:calc(var(--fdSearchField_Padding_Right)*2);--fdSearchField_Padding_Right_Typed_Compact:calc(var(--fdSearchField_Padding_Right_Compact)*2);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-align:center;-ms-flex-align:center;align-items:center;border:.0625rem solid var(--fdSearchField_Border_Color);border-radius:var(--fdSearchField_Border_Radius);height:var(--fdSearchField_Height);max-height:var(--fdSearchField_Height);min-height:var(--fdSearchField_Height);position:relative;width:16rem}.fd-search-field:after,.fd-search-field:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__icon{color:var(--fdSearchField_Icon_Color);height:1rem;left:var(--fdSearchField_Padding);max-height:1rem;max-width:1rem;min-height:1rem;min-width:1rem;position:absolute;width:1rem;z-index:10}.fd-search-field__icon[dir=rtl],[dir=rtl] .fd-search-field__icon{left:auto;right:var(--fdSearchField_Padding)}.fd-search-field__icon [class*=sap-icon],.fd-search-field__icon[class*=sap-icon]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1rem}.fd-search-field__input{background:var(--fdSearchField_Background);border:0;border-radius:var(--fdSearchField_Border_Radius);-webkit-box-shadow:var(--fdSearchField_Box_Shadow);box-shadow:var(--fdSearchField_Box_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdSearchField_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSearchField_Height_Border);line-height:normal;margin-block:0;margin-inline:0;max-height:var(--fdSearchField_Height_Border);min-height:var(--fdSearchField_Height_Border);padding-block:0;padding-block:var(--fdSearchField_Padding);padding-inline:0;padding-inline:var(--fdSearchField_Padding_Left) var(--fdSearchField_Padding_Right);width:16rem;z-index:1}.fd-search-field__input:after,.fd-search-field__input:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__input::-webkit-input-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::-moz-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input:-ms-input-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::-ms-input-placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::placeholder{color:var(--fdSearchField_Placeholder_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-style:italic;font-weight:400;line-height:1rem}.fd-search-field__input::-webkit-search-cancel-button,.fd-search-field__input::-webkit-search-decoration,.fd-search-field__input::-webkit-search-results-button,.fd-search-field__input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.fd-search-field__input:not(:-moz-placeholder){--fdSearchField_Padding_Right:calc((var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset))*2);--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input:not(:-ms-input-placeholder){--fdSearchField_Padding_Right:calc((var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset))*2);--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input:not(:placeholder-shown){--fdSearchField_Padding_Right:calc((var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset))*2);--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input:not(:-moz-placeholder)[class*=-compact],[class*=-compact] .fd-search-field__input:not(:-moz-placeholder):not([class*=-cozy]){--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Typed_Compact)}.fd-search-field__input:not(:-ms-input-placeholder)[class*=-compact],[class*=-compact] .fd-search-field__input:not(:-ms-input-placeholder):not([class*=-cozy]){--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Typed_Compact)}.fd-search-field__input:not(:placeholder-shown)[class*=-compact],[class*=-compact] .fd-search-field__input:not(:placeholder-shown):not([class*=-cozy]){--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Typed_Compact)}.fd-search-field__input:not(:-moz-placeholder)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:-ms-input-placeholder)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:placeholder-shown)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:-moz-placeholder)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:-ms-input-placeholder)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:placeholder-shown)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:-moz-placeholder).is-focus,.fd-search-field__input:not(:-moz-placeholder):focus{z-index:5;--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none}.fd-search-field__input:not(:-ms-input-placeholder).is-focus,.fd-search-field__input:not(:-ms-input-placeholder):focus{z-index:5;--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none}.fd-search-field__input:not(:placeholder-shown).is-focus,.fd-search-field__input:not(:placeholder-shown):focus{z-index:5;--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none}.fd-search-field__input.is-hover,.fd-search-field__input:hover{--fdSearchField_Background:var(--fdSearchField_Background_Hover);--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow)}.fd-search-field__input.is-hover+.fd-search-field__underline,.fd-search-field__input:hover+.fd-search-field__underline{display:none}.fd-search-field__input.is-focus,.fd-search-field__input:focus{z-index:5;--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Border_Color:transparent;--fdSearchField_Box_Shadow:none;outline:var(--fdSearchField_Outline);outline-offset:var(--fdSearchField_Outline_Offset)}.fd-search-field__input.is-focus+.fd-search-field__underline,.fd-search-field__input:focus+.fd-search-field__underline{display:none}.fd-search-field__underline{border:0;border-radius:var(--fdSearchField_Border_Radius);-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;height:100%;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;position:absolute;width:100%}.fd-search-field__underline:after,.fd-search-field__underline:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__underline:after{background:var(--fdSearchField_Underline_Color);bottom:0;content:\"\";height:.0625rem;position:absolute;width:100%;z-index:30}.fd-search-field__actions{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-align:center;-ms-flex-align:center;align-items:center;height:100%;position:absolute;right:var(--fdSearchField_Actions_Offset);z-index:10}.fd-search-field__actions:after,.fd-search-field__actions:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__actions[dir=rtl],[dir=rtl] .fd-search-field__actions{left:var(--fdSearchField_Actions_Offset);right:auto}.fd-search-field__actions button.is-disabled,.fd-search-field__actions button:disabled,.fd-search-field__actions button[aria-disabled=true]{opacity:1}.fd-search-field__action-container{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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:var(--fdSearchField_Action_Container_Size);max-height:var(--fdSearchField_Action_Container_Size);max-width:var(--fdSearchField_Action_Container_Size);min-height:var(--fdSearchField_Action_Container_Size);min-width:var(--fdSearchField_Action_Container_Size);width:var(--fdSearchField_Action_Container_Size)}.fd-search-field__action-container:after,.fd-search-field__action-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-search-field__action-container:first-child{display:var(--fdSearchField_Clear_Button_Display)}.fd-search-field__action-container button{--fdButton_Nested_Color:var(--sapShell_TextColor)}.fd-search-field[class*=-compact],[class*=-compact] .fd-search-field:not([class*=-cozy]){--fdSearchField_Height:var(--fdSearchField_Height_Compact);--fdSearchField_Padding:var(--fdSearchField_Padding_Compact);--fdSearchField_Actions_Offset:var(--fdSearchField_Actions_Offset_Compact);--fdSearchField_Action_Container_Size:var(--fdSearchField_Action_Container_Size_Compact);--fdSearchField_Padding_Left:var(--fdSearchField_Padding_Left_Compact);--fdSearchField_Padding_Right:var(--fdSearchField_Padding_Right_Compact)}\n/*! Bundled license information:\n\nfundamental-styles/dist/search-field.css:\n (*!\n * Fundamental Library Styles v0.39.2\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"] }]
|
|
56
56
|
}], propDecorators: { placeholder: [{
|
|
57
57
|
type: Input
|
|
58
58
|
}], search: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-btp-search-field.mjs","sources":["../../../../libs/btp/search-field/src/search-field.component.ts","../../../../libs/btp/search-field/src/search-field.component.html","../../../../libs/btp/search-field/src/fundamental-ngx-btp-search-field.ts"],"sourcesContent":["import {\n AfterViewInit,\n Component,\n DestroyRef,\n ElementRef,\n EventEmitter,\n inject,\n Input,\n Output,\n signal,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { NestedButtonDirective } from '@fundamental-ngx/btp/button';\nimport { CvaControl, CvaDirective } from '@fundamental-ngx/cdk/forms';\nimport { HasElementRef } from '@fundamental-ngx/cdk/utils';\nimport { ButtonComponent } from '@fundamental-ngx/core/button';\nimport { IconComponent } from '@fundamental-ngx/core/icon';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { of, tap } from 'rxjs';\n\n@Component({\n selector: 'fdb-search-field',\n templateUrl: './search-field.component.html',\n styleUrls: ['../../../../node_modules/fundamental-styles/dist/search-field.css'],\n hostDirectives: [CvaDirective],\n providers: [CvaControl],\n imports: [IconComponent, FormsModule, FdTranslatePipe, ButtonComponent, NestedButtonDirective],\n encapsulation: ViewEncapsulation.None\n})\nexport class SearchFieldComponent implements AfterViewInit, HasElementRef {\n /** Placeholder for the input field. */\n @Input() placeholder: string;\n\n /** Event emitted when the search button is clicked. */\n // eslint-disable-next-line @angular-eslint/no-output-native\n @Output() search = new EventEmitter<string>();\n\n /** @hidden */\n @ViewChild('searchInputField')\n protected _searchInputField?: ElementRef<HTMLInputElement>;\n\n /** @hidden */\n elementRef: ElementRef<HTMLElement> = inject(ElementRef);\n\n /** Value of the input field. */\n protected _value?: string;\n\n /**\n * Whether the search field is focused\n * @hidden */\n protected _inputFocused = signal(false);\n\n /** @hidden */\n private _cvaControl: CvaControl<string> = inject(CvaControl);\n\n /** @hidden */\n private _destroyRef = inject(DestroyRef);\n\n /** @hidden */\n focus(): void {\n this._searchInputField?.nativeElement.focus();\n }\n /** @hidden */\n ngAfterViewInit(): void {\n this._cvaControl.listenToChanges();\n (this._cvaControl.cvaDirective?.ngControl?.valueChanges || of(undefined))\n .pipe(\n tap((value: string) => (this._value = value)),\n takeUntilDestroyed(this._destroyRef)\n )\n .subscribe();\n }\n\n /** @hidden */\n protected updateValue($event: string): void {\n this._value = $event;\n this._cvaControl.cvaDirective?.setValue($event);\n }\n\n /** @hidden */\n protected _search(): void {\n this.search.emit(this._value);\n }\n}\n","<div class=\"fd-search-field\">\n <fd-icon glyph=\"search\" class=\"fd-search-field__icon\" role=\"presentation\" [ariaHidden]=\"true\"></fd-icon>\n <input\n [placeholder]=\"placeholder || ('btpSearchField.searchInputPlaceholder' | fdTranslate)\"\n type=\"search\"\n [attr.aria-label]=\"'btpSearchField.searchInputAriaLabel' | fdTranslate\"\n class=\"fd-search-field__input\"\n [ngModel]=\"_value\"\n (ngModelChange)=\"updateValue($event)\"\n (keydown.enter)=\"_search()\"\n (focusin)=\"_inputFocused.set(true)\"\n (focusout)=\"_inputFocused.set(false)\"\n #searchInputField\n />\n <div role=\"presentation\" aria-hidden=\"true\" class=\"fd-search-field__underline\"></div>\n <div class=\"fd-search-field__actions\">\n <div class=\"fd-search-field__action-container\">\n <button\n fd-button\n fdbNestedButton\n glyph=\"decline\"\n [ariaLabel]=\"'btpSearchField.clearButtonLabel' | fdTranslate\"\n (click)=\"updateValue(''); searchInputField.focus()\"\n ></button>\n </div>\n <div class=\"fd-search-field__action-container\">\n <button\n fd-button\n (click)=\"_search()\"\n glyph=\"slim-arrow-right\"\n fdbNestedButton\n [class.is-focus]=\"_value && _inputFocused()\"\n [ariaLabel]=\"'btpSearchField.searchButtonLabel' | fdTranslate\"\n [attr.aria-disabled]=\"!_value\"\n [attr.tabindex]=\"!_value ? -1 : 0\"\n ></button>\n </div>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;MAgCa,oBAAoB,CAAA;AATjC,IAAA,WAAA,GAAA;;;AAec,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAU;;AAO7C,QAAA,IAAA,CAAA,UAAU,GAA4B,MAAM,CAAC,UAAU,CAAC;AAKxD;;AAEa;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC;;AAG/B,QAAA,IAAA,CAAA,WAAW,GAAuB,MAAM,CAAC,UAAU,CAAC;;AAGpD,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AA2B3C;;IAxBG,KAAK,GAAA;AACD,QAAA,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,KAAK,EAAE;;;IAGjD,eAAe,GAAA;AACX,QAAA,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE;AAClC,QAAA,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,SAAS,EAAE,YAAY,IAAI,EAAE,CAAC,SAAS,CAAC;aACnE,IAAI,CACD,GAAG,CAAC,CAAC,KAAa,MAAM,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,EAC7C,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC;AAEvC,aAAA,SAAS,EAAE;;;AAIV,IAAA,WAAW,CAAC,MAAc,EAAA;AAChC,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;QACpB,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC;;;IAIzC,OAAO,GAAA;QACb,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;8GApDxB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAJlB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,SAAA,EAAA,CAAC,UAAU,CAAC,mMC5B3B,yqDAuCA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-btp-search-field.mjs","sources":["../../../../libs/btp/search-field/src/search-field.component.ts","../../../../libs/btp/search-field/src/search-field.component.html","../../../../libs/btp/search-field/src/fundamental-ngx-btp-search-field.ts"],"sourcesContent":["import {\n AfterViewInit,\n Component,\n DestroyRef,\n ElementRef,\n EventEmitter,\n inject,\n Input,\n Output,\n signal,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { NestedButtonDirective } from '@fundamental-ngx/btp/button';\nimport { CvaControl, CvaDirective } from '@fundamental-ngx/cdk/forms';\nimport { HasElementRef } from '@fundamental-ngx/cdk/utils';\nimport { ButtonComponent } from '@fundamental-ngx/core/button';\nimport { IconComponent } from '@fundamental-ngx/core/icon';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { of, tap } from 'rxjs';\n\n@Component({\n selector: 'fdb-search-field',\n templateUrl: './search-field.component.html',\n styleUrls: ['../../../../node_modules/fundamental-styles/dist/search-field.css'],\n hostDirectives: [CvaDirective],\n providers: [CvaControl],\n imports: [IconComponent, FormsModule, FdTranslatePipe, ButtonComponent, NestedButtonDirective],\n encapsulation: ViewEncapsulation.None\n})\nexport class SearchFieldComponent implements AfterViewInit, HasElementRef {\n /** Placeholder for the input field. */\n @Input() placeholder: string;\n\n /** Event emitted when the search button is clicked. */\n // eslint-disable-next-line @angular-eslint/no-output-native\n @Output() search = new EventEmitter<string>();\n\n /** @hidden */\n @ViewChild('searchInputField')\n protected _searchInputField?: ElementRef<HTMLInputElement>;\n\n /** @hidden */\n elementRef: ElementRef<HTMLElement> = inject(ElementRef);\n\n /** Value of the input field. */\n protected _value?: string;\n\n /**\n * Whether the search field is focused\n * @hidden */\n protected _inputFocused = signal(false);\n\n /** @hidden */\n private _cvaControl: CvaControl<string> = inject(CvaControl);\n\n /** @hidden */\n private _destroyRef = inject(DestroyRef);\n\n /** @hidden */\n focus(): void {\n this._searchInputField?.nativeElement.focus();\n }\n /** @hidden */\n ngAfterViewInit(): void {\n this._cvaControl.listenToChanges();\n (this._cvaControl.cvaDirective?.ngControl?.valueChanges || of(undefined))\n .pipe(\n tap((value: string) => (this._value = value)),\n takeUntilDestroyed(this._destroyRef)\n )\n .subscribe();\n }\n\n /** @hidden */\n protected updateValue($event: string): void {\n this._value = $event;\n this._cvaControl.cvaDirective?.setValue($event);\n }\n\n /** @hidden */\n protected _search(): void {\n this.search.emit(this._value);\n }\n}\n","<div class=\"fd-search-field\">\n <fd-icon glyph=\"search\" class=\"fd-search-field__icon\" role=\"presentation\" [ariaHidden]=\"true\"></fd-icon>\n <input\n [placeholder]=\"placeholder || ('btpSearchField.searchInputPlaceholder' | fdTranslate)\"\n type=\"search\"\n [attr.aria-label]=\"'btpSearchField.searchInputAriaLabel' | fdTranslate\"\n class=\"fd-search-field__input\"\n [ngModel]=\"_value\"\n (ngModelChange)=\"updateValue($event)\"\n (keydown.enter)=\"_search()\"\n (focusin)=\"_inputFocused.set(true)\"\n (focusout)=\"_inputFocused.set(false)\"\n #searchInputField\n />\n <div role=\"presentation\" aria-hidden=\"true\" class=\"fd-search-field__underline\"></div>\n <div class=\"fd-search-field__actions\">\n <div class=\"fd-search-field__action-container\">\n <button\n fd-button\n fdbNestedButton\n glyph=\"decline\"\n [ariaLabel]=\"'btpSearchField.clearButtonLabel' | fdTranslate\"\n (click)=\"updateValue(''); searchInputField.focus()\"\n ></button>\n </div>\n <div class=\"fd-search-field__action-container\">\n <button\n fd-button\n (click)=\"_search()\"\n glyph=\"slim-arrow-right\"\n fdbNestedButton\n [class.is-focus]=\"_value && _inputFocused()\"\n [ariaLabel]=\"'btpSearchField.searchButtonLabel' | fdTranslate\"\n [attr.aria-disabled]=\"!_value\"\n [attr.tabindex]=\"!_value ? -1 : 0\"\n ></button>\n </div>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;MAgCa,oBAAoB,CAAA;AATjC,IAAA,WAAA,GAAA;;;AAec,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAU;;AAO7C,QAAA,IAAA,CAAA,UAAU,GAA4B,MAAM,CAAC,UAAU,CAAC;AAKxD;;AAEa;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC;;AAG/B,QAAA,IAAA,CAAA,WAAW,GAAuB,MAAM,CAAC,UAAU,CAAC;;AAGpD,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AA2B3C;;IAxBG,KAAK,GAAA;AACD,QAAA,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,KAAK,EAAE;;;IAGjD,eAAe,GAAA;AACX,QAAA,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE;AAClC,QAAA,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,SAAS,EAAE,YAAY,IAAI,EAAE,CAAC,SAAS,CAAC;aACnE,IAAI,CACD,GAAG,CAAC,CAAC,KAAa,MAAM,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,EAC7C,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC;AAEvC,aAAA,SAAS,EAAE;;;AAIV,IAAA,WAAW,CAAC,MAAc,EAAA;AAChC,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;QACpB,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC;;;IAIzC,OAAO,GAAA;QACb,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;8GApDxB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAJlB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,SAAA,EAAA,CAAC,UAAU,CAAC,mMC5B3B,yqDAuCA,EAAA,MAAA,EAAA,CAAA,+1XAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVc,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,YAAA,EAAA,OAAA,EAAA,WAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,WAAW,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,eAAe,EAAE,IAAA,EAAA,aAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe,yIAAE,qBAAqB,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAGpF,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAThC,SAAS;+BACI,kBAAkB,EAAA,cAAA,EAGZ,CAAC,YAAY,CAAC,aACnB,CAAC,UAAU,CAAC,EAAA,OAAA,EACd,CAAC,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,eAAe,EAAE,qBAAqB,CAAC,EAAA,aAAA,EAC/E,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,yqDAAA,EAAA,MAAA,EAAA,CAAA,+1XAAA,CAAA,EAAA;8BAI5B,WAAW,EAAA,CAAA;sBAAnB;gBAIS,MAAM,EAAA,CAAA;sBAAf;gBAIS,iBAAiB,EAAA,CAAA;sBAD1B,SAAS;uBAAC,kBAAkB;;;AEzCjC;;AAEG;;;;"}
|
|
@@ -183,11 +183,11 @@ class SplitterComponent {
|
|
|
183
183
|
paneToShow?.showOnCanvas();
|
|
184
184
|
}
|
|
185
185
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: SplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
186
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: SplitterComponent, isStandalone: true, selector: "fdb-splitter", inputs: { defaultPaneId: "defaultPaneId" }, host: { classAttribute: "fd-splitter" }, queries: [{ propertyName: "_panes", predicate: SplitterSplitPaneComponent, descendants: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["@charset \"UTF-8\";.fd-splitter{--fdSplitter_Split_Pane_BoxShadow:none;--fdSplitter_Split_Pane_Background:transparent;--fdSplitter_Pane_Container_Flex_Direction:row;--fdSplitter_Pagination_Dot_Value:\"\\e107\";--fdSplitter_Pagination_Container_Height:2rem;--fdSplitter_Resizer_Gap:2rem;--fdSplitter_Resizer_Width:auto;--fdSplitter_Resizer_Height:auto;--fdSplitter_Resizer_Cursor:auto;--fdSplitter_Resizer_Grip_Cursor:auto;--fdSplitter_Resizer_Flex_Direction:row;--fdSplitter_Resizer_Background:transparent;--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_Line_Border_Radius:.125rem;--fdSplitter_Resizer_Line_Thickness:.0625rem;--fdSplitter_Resizer_Line_Size:4rem;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.fd-splitter .fd-splitter__resizer-decoration-after,.fd-splitter .fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-ms-flex-preferred-size:var(--fdSplitter_Resizer_Line_Size);flex-basis:var(--fdSplitter_Resizer_Line_Size)}.fd-splitter,.fd-splitter__pagination,.fd-splitter__pagination-item-dot{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-splitter:after,.fd-splitter:before,.fd-splitter__pagination-item-dot:after,.fd-splitter__pagination-item-dot:before,.fd-splitter__pagination:after,.fd-splitter__pagination:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-splitter__resizer,.fd-splitter__resizer-decoration-after,.fd-splitter__resizer-decoration-before,.fd-splitter__resizer-grip,.fd-splitter__resizer-grip-icon{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-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fd-splitter__resizer-decoration-after:after,.fd-splitter__resizer-decoration-after:before,.fd-splitter__resizer-decoration-before:after,.fd-splitter__resizer-decoration-before:before,.fd-splitter__resizer-grip-icon:after,.fd-splitter__resizer-grip-icon:before,.fd-splitter__resizer-grip:after,.fd-splitter__resizer-grip:before,.fd-splitter__resizer:after,.fd-splitter__resizer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-splitter__pane,.fd-splitter__pane-container{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;max-height:100%;max-width:100%;padding-block:0;padding-inline:0}.fd-splitter__pane-container:after,.fd-splitter__pane-container:before,.fd-splitter__pane:after,.fd-splitter__pane:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-splitter__pane-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-direction:var(--fdSplitter_Pane_Container_Flex_Direction);flex-direction:var(--fdSplitter_Pane_Container_Flex_Direction)}.fd-splitter__pane-container--horizontal{--fdSplitter_Resizer_Width:auto;--fdSplitter_Resizer_Height:1rem;--fdSplitter_Resizer_Flex_Direction:row;--fdSplitter_Resizer_Cursor:row-resize;--fdSplitter_Pane_Container_Flex_Direction:column;--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapGroup_TitleBorderColor),transparent)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-ms-flex-preferred-size:var(--fdSplitter_Resizer_Line_Size);flex-basis:var(--fdSplitter_Resizer_Line_Size)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip{--fdSplitter_Resizer_Grip_Cursor:row-resize}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-before{--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:focus{z-index:5}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-after{--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-after{height:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--vertical{--fdSplitter_Resizer_Width:1rem;--fdSplitter_Resizer_Cursor:col-resize;--fdSplitter_Resizer_Flex_Direction:column;--fdSplitter_Resizer_Before_Background:linear-gradient(to top,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to bottom,var(--sapGroup_TitleBorderColor),transparent)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-decoration-before{width:var(--fdSplitter_Resizer_Line_Thickness);-ms-flex-preferred-size:var(--fdSplitter_Resizer_Line_Size);flex-basis:var(--fdSplitter_Resizer_Line_Size)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--vertical>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-before{width:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip{--fdSplitter_Resizer_Grip_Cursor:col-resize}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-before{--fdSplitter_Resizer_Before_Background:linear-gradient(to top,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:focus{z-index:5}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-after{--fdSplitter_Resizer_After_Background:linear-gradient(to bottom,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-before{width:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-after{width:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer.is-focus,.fd-splitter__pane-container--vertical>.fd-splitter__resizer:focus{z-index:5;--fdSplitter_Resizer_Before_Background:linear-gradient(to top,var(--sapContent_FocusColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to bottom,var(--sapContent_FocusColor),transparent)}.fd-splitter__split-pane{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;background:var(--fdSplitter_Split_Pane_Background);border-radius:.5rem;-webkit-box-shadow:var(--fdSplitter_Split_Pane_BoxShadow);box-shadow:var(--fdSplitter_Split_Pane_BoxShadow);flex-grow:1;overflow:auto;text-overflow:ellipsis}.fd-splitter__split-pane--translucent{--fdSplitter_Split_Pane_Background:var(--sapBackgroundColor);--fdSplitter_Split_Pane_BoxShadow:var(--sapSplitPane_Shadow1)}.fd-splitter__split-pane--solid{--fdSplitter_Split_Pane_BoxShadow:var(--sapSplitPane_Shadow1);--fdSplitter_Split_Pane_Background:var(--sapGroup_ContentBackground)}.fd-splitter__resizer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdSplitter_Resizer_Background);border:var(--fdSplitter_Resizer_Border);border-radius:.5rem;cursor:var(--fdSplitter_Resizer_Cursor);gap:var(--fdSplitter_Resizer_Gap);height:var(--fdSplitter_Resizer_Height);overflow:visible;position:relative;width:var(--fdSplitter_Resizer_Width);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:var(--fdSplitter_Resizer_Flex_Direction);flex-direction:var(--fdSplitter_Resizer_Flex_Direction)}.fd-splitter__resizer--translucent{--fdSplitter_Resizer_Background:var(--sapGroup_ContentBackground)}.fd-splitter__resizer--solid{--fdSplitter_Resizer_Background:var(--sapContent_ForegroundColor)}.fd-splitter__resizer.is-active,.fd-splitter__resizer:active{--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor);--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__resizer.is-focus,.fd-splitter__resizer:focus{z-index:5;--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapContent_FocusColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapContent_FocusColor),transparent)}.fd-splitter__resizer.is-focus.is-active,.fd-splitter__resizer.is-focus:active,.fd-splitter__resizer:focus.is-active,.fd-splitter__resizer:focus:active{--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor);--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__resizer-decoration-before{-webkit-box-ordinal-group:2;-ms-flex-order:1;background:var(--fdSplitter_Resizer_Before_Background);order:1}.fd-splitter__resizer-decoration-after,.fd-splitter__resizer-decoration-before{border-radius:var(--fdSplitter_Resizer_Line_Border_Radius);-webkit-transition:all .1s ease-in;transition:all .1s ease-in}.fd-splitter__resizer-decoration-after{-webkit-box-ordinal-group:4;-ms-flex-order:3;background:var(--fdSplitter_Resizer_After_Background);order:3}.fd-splitter .fd-splitter__resizer-grip{-webkit-box-ordinal-group:3;-ms-flex-order:2;cursor:var(--fdSplitter_Resizer_Grip_Cursor);order:2;position:absolute}.fd-splitter__pagination{-webkit-box-pack:center;-ms-flex-pack:center;height:var(--fdSplitter_Pagination_Container_Height);justify-content:center;width:100%}.fd-splitter__pagination,.fd-splitter__pagination-item-dot:before{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-splitter__pagination-item-dot:before{content:var(--fdSplitter_Pagination_Dot_Value);font-family:SAP-icons-TNT;font-size:.75rem;line-height:.75rem}.fd-splitter__pagination-item--active{--fdSplitter_Pagination_Dot_Value:\"\\e108\"}.fd-splitter[class*=-compact],.fd-splitter[class*=-condensed],[class*=-compact] .fd-splitter:not([class*=-cozy]),[class*=-condensed] .fd-splitter:not([class*=-cozy]){--fdSplitter_Resizer_Gap:1.625rem;--fdSplitter_Pagination_Container_Height:1.625rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/splitter.css:\n (*!\n * Fundamental Library Styles v0.38.0\n * Copyright (c) 2024 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 }); }
|
|
186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: SplitterComponent, isStandalone: true, selector: "fdb-splitter", inputs: { defaultPaneId: "defaultPaneId" }, host: { classAttribute: "fd-splitter" }, queries: [{ propertyName: "_panes", predicate: SplitterSplitPaneComponent, descendants: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["@charset \"UTF-8\";.fd-splitter{--fdSplitter_Split_Pane_BoxShadow:none;--fdSplitter_Split_Pane_Background:transparent;--fdSplitter_Pane_Container_Flex_Direction:row;--fdSplitter_Pagination_Dot_Value:\"\\e107\";--fdSplitter_Pagination_Container_Height:2rem;--fdSplitter_Resizer_Gap:2rem;--fdSplitter_Resizer_Width:auto;--fdSplitter_Resizer_Height:auto;--fdSplitter_Resizer_Cursor:auto;--fdSplitter_Resizer_Grip_Cursor:auto;--fdSplitter_Resizer_Flex_Direction:row;--fdSplitter_Resizer_Background:transparent;--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_Line_Border_Radius:.125rem;--fdSplitter_Resizer_Line_Thickness:.0625rem;--fdSplitter_Resizer_Line_Size:4rem;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.fd-splitter .fd-splitter__resizer-decoration-after,.fd-splitter .fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-ms-flex-preferred-size:var(--fdSplitter_Resizer_Line_Size);flex-basis:var(--fdSplitter_Resizer_Line_Size)}.fd-splitter,.fd-splitter__pagination,.fd-splitter__pagination-item-dot{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-splitter:after,.fd-splitter:before,.fd-splitter__pagination-item-dot:after,.fd-splitter__pagination-item-dot:before,.fd-splitter__pagination:after,.fd-splitter__pagination:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-splitter__resizer,.fd-splitter__resizer-decoration-after,.fd-splitter__resizer-decoration-before,.fd-splitter__resizer-grip,.fd-splitter__resizer-grip-icon{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-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fd-splitter__resizer-decoration-after:after,.fd-splitter__resizer-decoration-after:before,.fd-splitter__resizer-decoration-before:after,.fd-splitter__resizer-decoration-before:before,.fd-splitter__resizer-grip-icon:after,.fd-splitter__resizer-grip-icon:before,.fd-splitter__resizer-grip:after,.fd-splitter__resizer-grip:before,.fd-splitter__resizer:after,.fd-splitter__resizer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-splitter__pane,.fd-splitter__pane-container{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;max-height:100%;max-width:100%;padding-block:0;padding-inline:0}.fd-splitter__pane-container:after,.fd-splitter__pane-container:before,.fd-splitter__pane:after,.fd-splitter__pane:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-splitter__pane-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-direction:var(--fdSplitter_Pane_Container_Flex_Direction);flex-direction:var(--fdSplitter_Pane_Container_Flex_Direction)}.fd-splitter__pane-container--horizontal{--fdSplitter_Resizer_Width:auto;--fdSplitter_Resizer_Height:1rem;--fdSplitter_Resizer_Flex_Direction:row;--fdSplitter_Resizer_Cursor:row-resize;--fdSplitter_Pane_Container_Flex_Direction:column;--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapGroup_TitleBorderColor),transparent)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-ms-flex-preferred-size:var(--fdSplitter_Resizer_Line_Size);flex-basis:var(--fdSplitter_Resizer_Line_Size)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip{--fdSplitter_Resizer_Grip_Cursor:row-resize}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-before{--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:focus{z-index:5}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-after{--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-after{height:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--vertical{--fdSplitter_Resizer_Width:1rem;--fdSplitter_Resizer_Cursor:col-resize;--fdSplitter_Resizer_Flex_Direction:column;--fdSplitter_Resizer_Before_Background:linear-gradient(to top,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to bottom,var(--sapGroup_TitleBorderColor),transparent)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-decoration-before{width:var(--fdSplitter_Resizer_Line_Thickness);-ms-flex-preferred-size:var(--fdSplitter_Resizer_Line_Size);flex-basis:var(--fdSplitter_Resizer_Line_Size)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--vertical>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-before{width:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip{--fdSplitter_Resizer_Grip_Cursor:col-resize}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-before{--fdSplitter_Resizer_Before_Background:linear-gradient(to top,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:focus{z-index:5}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-after{--fdSplitter_Resizer_After_Background:linear-gradient(to bottom,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-before{width:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-after{width:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer.is-focus,.fd-splitter__pane-container--vertical>.fd-splitter__resizer:focus{z-index:5;--fdSplitter_Resizer_Before_Background:linear-gradient(to top,var(--sapContent_FocusColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to bottom,var(--sapContent_FocusColor),transparent)}.fd-splitter__split-pane{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;background:var(--fdSplitter_Split_Pane_Background);border-radius:.5rem;-webkit-box-shadow:var(--fdSplitter_Split_Pane_BoxShadow);box-shadow:var(--fdSplitter_Split_Pane_BoxShadow);flex-grow:1;overflow:auto;text-overflow:ellipsis}.fd-splitter__split-pane--translucent{--fdSplitter_Split_Pane_Background:var(--sapBackgroundColor);--fdSplitter_Split_Pane_BoxShadow:var(--sapSplitPane_Shadow1)}.fd-splitter__split-pane--solid{--fdSplitter_Split_Pane_BoxShadow:var(--sapSplitPane_Shadow1);--fdSplitter_Split_Pane_Background:var(--sapGroup_ContentBackground)}.fd-splitter__resizer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdSplitter_Resizer_Background);border:var(--fdSplitter_Resizer_Border);border-radius:.5rem;cursor:var(--fdSplitter_Resizer_Cursor);gap:var(--fdSplitter_Resizer_Gap);height:var(--fdSplitter_Resizer_Height);overflow:visible;position:relative;width:var(--fdSplitter_Resizer_Width);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:var(--fdSplitter_Resizer_Flex_Direction);flex-direction:var(--fdSplitter_Resizer_Flex_Direction)}.fd-splitter__resizer--translucent{--fdSplitter_Resizer_Background:var(--sapGroup_ContentBackground)}.fd-splitter__resizer--solid{--fdSplitter_Resizer_Background:var(--sapContent_ForegroundColor)}.fd-splitter__resizer.is-active,.fd-splitter__resizer:active{--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor);--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__resizer.is-focus,.fd-splitter__resizer:focus{z-index:5;--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapContent_FocusColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapContent_FocusColor),transparent)}.fd-splitter__resizer.is-focus.is-active,.fd-splitter__resizer.is-focus:active,.fd-splitter__resizer:focus.is-active,.fd-splitter__resizer:focus:active{--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor);--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__resizer-decoration-before{-webkit-box-ordinal-group:2;-ms-flex-order:1;background:var(--fdSplitter_Resizer_Before_Background);order:1}.fd-splitter__resizer-decoration-after,.fd-splitter__resizer-decoration-before{border-radius:var(--fdSplitter_Resizer_Line_Border_Radius);-webkit-transition:all .1s ease-in;transition:all .1s ease-in}.fd-splitter__resizer-decoration-after{-webkit-box-ordinal-group:4;-ms-flex-order:3;background:var(--fdSplitter_Resizer_After_Background);order:3}.fd-splitter .fd-splitter__resizer-grip{-webkit-box-ordinal-group:3;-ms-flex-order:2;cursor:var(--fdSplitter_Resizer_Grip_Cursor);order:2;position:absolute}.fd-splitter__pagination{-webkit-box-pack:center;-ms-flex-pack:center;height:var(--fdSplitter_Pagination_Container_Height);justify-content:center;width:100%}.fd-splitter__pagination,.fd-splitter__pagination-item-dot:before{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-splitter__pagination-item-dot:before{content:var(--fdSplitter_Pagination_Dot_Value);font-family:SAP-icons-TNT;font-size:.75rem;line-height:.75rem}.fd-splitter__pagination-item--active{--fdSplitter_Pagination_Dot_Value:\"\\e108\"}.fd-splitter[class*=-compact],.fd-splitter[class*=-condensed],[class*=-compact] .fd-splitter:not([class*=-cozy]),[class*=-condensed] .fd-splitter:not([class*=-cozy]){--fdSplitter_Resizer_Gap:1.625rem;--fdSplitter_Pagination_Container_Height:1.625rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/splitter.css:\n (*!\n * Fundamental Library Styles v0.39.2\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 }); }
|
|
187
187
|
}
|
|
188
188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: SplitterComponent, decorators: [{
|
|
189
189
|
type: Component,
|
|
190
|
-
args: [{ selector: 'fdb-splitter', template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fd-splitter' }, standalone: true, styles: ["@charset \"UTF-8\";.fd-splitter{--fdSplitter_Split_Pane_BoxShadow:none;--fdSplitter_Split_Pane_Background:transparent;--fdSplitter_Pane_Container_Flex_Direction:row;--fdSplitter_Pagination_Dot_Value:\"\\e107\";--fdSplitter_Pagination_Container_Height:2rem;--fdSplitter_Resizer_Gap:2rem;--fdSplitter_Resizer_Width:auto;--fdSplitter_Resizer_Height:auto;--fdSplitter_Resizer_Cursor:auto;--fdSplitter_Resizer_Grip_Cursor:auto;--fdSplitter_Resizer_Flex_Direction:row;--fdSplitter_Resizer_Background:transparent;--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_Line_Border_Radius:.125rem;--fdSplitter_Resizer_Line_Thickness:.0625rem;--fdSplitter_Resizer_Line_Size:4rem;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.fd-splitter .fd-splitter__resizer-decoration-after,.fd-splitter .fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-ms-flex-preferred-size:var(--fdSplitter_Resizer_Line_Size);flex-basis:var(--fdSplitter_Resizer_Line_Size)}.fd-splitter,.fd-splitter__pagination,.fd-splitter__pagination-item-dot{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-splitter:after,.fd-splitter:before,.fd-splitter__pagination-item-dot:after,.fd-splitter__pagination-item-dot:before,.fd-splitter__pagination:after,.fd-splitter__pagination:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-splitter__resizer,.fd-splitter__resizer-decoration-after,.fd-splitter__resizer-decoration-before,.fd-splitter__resizer-grip,.fd-splitter__resizer-grip-icon{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-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fd-splitter__resizer-decoration-after:after,.fd-splitter__resizer-decoration-after:before,.fd-splitter__resizer-decoration-before:after,.fd-splitter__resizer-decoration-before:before,.fd-splitter__resizer-grip-icon:after,.fd-splitter__resizer-grip-icon:before,.fd-splitter__resizer-grip:after,.fd-splitter__resizer-grip:before,.fd-splitter__resizer:after,.fd-splitter__resizer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-splitter__pane,.fd-splitter__pane-container{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;max-height:100%;max-width:100%;padding-block:0;padding-inline:0}.fd-splitter__pane-container:after,.fd-splitter__pane-container:before,.fd-splitter__pane:after,.fd-splitter__pane:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-splitter__pane-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-direction:var(--fdSplitter_Pane_Container_Flex_Direction);flex-direction:var(--fdSplitter_Pane_Container_Flex_Direction)}.fd-splitter__pane-container--horizontal{--fdSplitter_Resizer_Width:auto;--fdSplitter_Resizer_Height:1rem;--fdSplitter_Resizer_Flex_Direction:row;--fdSplitter_Resizer_Cursor:row-resize;--fdSplitter_Pane_Container_Flex_Direction:column;--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapGroup_TitleBorderColor),transparent)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-ms-flex-preferred-size:var(--fdSplitter_Resizer_Line_Size);flex-basis:var(--fdSplitter_Resizer_Line_Size)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip{--fdSplitter_Resizer_Grip_Cursor:row-resize}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-before{--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:focus{z-index:5}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-after{--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-after{height:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--vertical{--fdSplitter_Resizer_Width:1rem;--fdSplitter_Resizer_Cursor:col-resize;--fdSplitter_Resizer_Flex_Direction:column;--fdSplitter_Resizer_Before_Background:linear-gradient(to top,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to bottom,var(--sapGroup_TitleBorderColor),transparent)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-decoration-before{width:var(--fdSplitter_Resizer_Line_Thickness);-ms-flex-preferred-size:var(--fdSplitter_Resizer_Line_Size);flex-basis:var(--fdSplitter_Resizer_Line_Size)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--vertical>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-before{width:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip{--fdSplitter_Resizer_Grip_Cursor:col-resize}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-before{--fdSplitter_Resizer_Before_Background:linear-gradient(to top,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:focus{z-index:5}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-after{--fdSplitter_Resizer_After_Background:linear-gradient(to bottom,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-before{width:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-after{width:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer.is-focus,.fd-splitter__pane-container--vertical>.fd-splitter__resizer:focus{z-index:5;--fdSplitter_Resizer_Before_Background:linear-gradient(to top,var(--sapContent_FocusColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to bottom,var(--sapContent_FocusColor),transparent)}.fd-splitter__split-pane{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;background:var(--fdSplitter_Split_Pane_Background);border-radius:.5rem;-webkit-box-shadow:var(--fdSplitter_Split_Pane_BoxShadow);box-shadow:var(--fdSplitter_Split_Pane_BoxShadow);flex-grow:1;overflow:auto;text-overflow:ellipsis}.fd-splitter__split-pane--translucent{--fdSplitter_Split_Pane_Background:var(--sapBackgroundColor);--fdSplitter_Split_Pane_BoxShadow:var(--sapSplitPane_Shadow1)}.fd-splitter__split-pane--solid{--fdSplitter_Split_Pane_BoxShadow:var(--sapSplitPane_Shadow1);--fdSplitter_Split_Pane_Background:var(--sapGroup_ContentBackground)}.fd-splitter__resizer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdSplitter_Resizer_Background);border:var(--fdSplitter_Resizer_Border);border-radius:.5rem;cursor:var(--fdSplitter_Resizer_Cursor);gap:var(--fdSplitter_Resizer_Gap);height:var(--fdSplitter_Resizer_Height);overflow:visible;position:relative;width:var(--fdSplitter_Resizer_Width);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:var(--fdSplitter_Resizer_Flex_Direction);flex-direction:var(--fdSplitter_Resizer_Flex_Direction)}.fd-splitter__resizer--translucent{--fdSplitter_Resizer_Background:var(--sapGroup_ContentBackground)}.fd-splitter__resizer--solid{--fdSplitter_Resizer_Background:var(--sapContent_ForegroundColor)}.fd-splitter__resizer.is-active,.fd-splitter__resizer:active{--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor);--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__resizer.is-focus,.fd-splitter__resizer:focus{z-index:5;--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapContent_FocusColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapContent_FocusColor),transparent)}.fd-splitter__resizer.is-focus.is-active,.fd-splitter__resizer.is-focus:active,.fd-splitter__resizer:focus.is-active,.fd-splitter__resizer:focus:active{--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor);--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__resizer-decoration-before{-webkit-box-ordinal-group:2;-ms-flex-order:1;background:var(--fdSplitter_Resizer_Before_Background);order:1}.fd-splitter__resizer-decoration-after,.fd-splitter__resizer-decoration-before{border-radius:var(--fdSplitter_Resizer_Line_Border_Radius);-webkit-transition:all .1s ease-in;transition:all .1s ease-in}.fd-splitter__resizer-decoration-after{-webkit-box-ordinal-group:4;-ms-flex-order:3;background:var(--fdSplitter_Resizer_After_Background);order:3}.fd-splitter .fd-splitter__resizer-grip{-webkit-box-ordinal-group:3;-ms-flex-order:2;cursor:var(--fdSplitter_Resizer_Grip_Cursor);order:2;position:absolute}.fd-splitter__pagination{-webkit-box-pack:center;-ms-flex-pack:center;height:var(--fdSplitter_Pagination_Container_Height);justify-content:center;width:100%}.fd-splitter__pagination,.fd-splitter__pagination-item-dot:before{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-splitter__pagination-item-dot:before{content:var(--fdSplitter_Pagination_Dot_Value);font-family:SAP-icons-TNT;font-size:.75rem;line-height:.75rem}.fd-splitter__pagination-item--active{--fdSplitter_Pagination_Dot_Value:\"\\e108\"}.fd-splitter[class*=-compact],.fd-splitter[class*=-condensed],[class*=-compact] .fd-splitter:not([class*=-cozy]),[class*=-condensed] .fd-splitter:not([class*=-cozy]){--fdSplitter_Resizer_Gap:1.625rem;--fdSplitter_Pagination_Container_Height:1.625rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/splitter.css:\n (*!\n * Fundamental Library Styles v0.38.0\n * Copyright (c) 2024 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"] }]
|
|
190
|
+
args: [{ selector: 'fdb-splitter', template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fd-splitter' }, standalone: true, styles: ["@charset \"UTF-8\";.fd-splitter{--fdSplitter_Split_Pane_BoxShadow:none;--fdSplitter_Split_Pane_Background:transparent;--fdSplitter_Pane_Container_Flex_Direction:row;--fdSplitter_Pagination_Dot_Value:\"\\e107\";--fdSplitter_Pagination_Container_Height:2rem;--fdSplitter_Resizer_Gap:2rem;--fdSplitter_Resizer_Width:auto;--fdSplitter_Resizer_Height:auto;--fdSplitter_Resizer_Cursor:auto;--fdSplitter_Resizer_Grip_Cursor:auto;--fdSplitter_Resizer_Flex_Direction:row;--fdSplitter_Resizer_Background:transparent;--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_Line_Border_Radius:.125rem;--fdSplitter_Resizer_Line_Thickness:.0625rem;--fdSplitter_Resizer_Line_Size:4rem;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.fd-splitter .fd-splitter__resizer-decoration-after,.fd-splitter .fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-ms-flex-preferred-size:var(--fdSplitter_Resizer_Line_Size);flex-basis:var(--fdSplitter_Resizer_Line_Size)}.fd-splitter,.fd-splitter__pagination,.fd-splitter__pagination-item-dot{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-splitter:after,.fd-splitter:before,.fd-splitter__pagination-item-dot:after,.fd-splitter__pagination-item-dot:before,.fd-splitter__pagination:after,.fd-splitter__pagination:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-splitter__resizer,.fd-splitter__resizer-decoration-after,.fd-splitter__resizer-decoration-before,.fd-splitter__resizer-grip,.fd-splitter__resizer-grip-icon{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-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fd-splitter__resizer-decoration-after:after,.fd-splitter__resizer-decoration-after:before,.fd-splitter__resizer-decoration-before:after,.fd-splitter__resizer-decoration-before:before,.fd-splitter__resizer-grip-icon:after,.fd-splitter__resizer-grip-icon:before,.fd-splitter__resizer-grip:after,.fd-splitter__resizer-grip:before,.fd-splitter__resizer:after,.fd-splitter__resizer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-splitter__pane,.fd-splitter__pane-container{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;max-height:100%;max-width:100%;padding-block:0;padding-inline:0}.fd-splitter__pane-container:after,.fd-splitter__pane-container:before,.fd-splitter__pane:after,.fd-splitter__pane:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-splitter__pane-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-direction:var(--fdSplitter_Pane_Container_Flex_Direction);flex-direction:var(--fdSplitter_Pane_Container_Flex_Direction)}.fd-splitter__pane-container--horizontal{--fdSplitter_Resizer_Width:auto;--fdSplitter_Resizer_Height:1rem;--fdSplitter_Resizer_Flex_Direction:row;--fdSplitter_Resizer_Cursor:row-resize;--fdSplitter_Pane_Container_Flex_Direction:column;--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapGroup_TitleBorderColor),transparent)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-ms-flex-preferred-size:var(--fdSplitter_Resizer_Line_Size);flex-basis:var(--fdSplitter_Resizer_Line_Size)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip{--fdSplitter_Resizer_Grip_Cursor:row-resize}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-before{--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:focus{z-index:5}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-after{--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-before{height:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--horizontal>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-after{height:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--vertical{--fdSplitter_Resizer_Width:1rem;--fdSplitter_Resizer_Cursor:col-resize;--fdSplitter_Resizer_Flex_Direction:column;--fdSplitter_Resizer_Before_Background:linear-gradient(to top,var(--sapGroup_TitleBorderColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to bottom,var(--sapGroup_TitleBorderColor),transparent)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-decoration-before{width:var(--fdSplitter_Resizer_Line_Thickness);-ms-flex-preferred-size:var(--fdSplitter_Resizer_Line_Size);flex-basis:var(--fdSplitter_Resizer_Line_Size)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer.is-active .fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--vertical>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer:active .fd-splitter__resizer-decoration-before{width:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip{--fdSplitter_Resizer_Grip_Cursor:col-resize}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-before{--fdSplitter_Resizer_Before_Background:linear-gradient(to top,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:focus{z-index:5}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-focus~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:focus~.fd-splitter__resizer-decoration-after{--fdSplitter_Resizer_After_Background:linear-gradient(to bottom,var(--sapContent_FocusColor),transparent)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-before,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-before{width:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip.is-active~.fd-splitter__resizer-decoration-after,.fd-splitter__pane-container--vertical>.fd-splitter__resizer .fd-splitter__resizer-grip:active~.fd-splitter__resizer-decoration-after{width:var(--fdSplitter_Resizer_Line_Thickness);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__pane-container--vertical>.fd-splitter__resizer.is-focus,.fd-splitter__pane-container--vertical>.fd-splitter__resizer:focus{z-index:5;--fdSplitter_Resizer_Before_Background:linear-gradient(to top,var(--sapContent_FocusColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to bottom,var(--sapContent_FocusColor),transparent)}.fd-splitter__split-pane{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;background:var(--fdSplitter_Split_Pane_Background);border-radius:.5rem;-webkit-box-shadow:var(--fdSplitter_Split_Pane_BoxShadow);box-shadow:var(--fdSplitter_Split_Pane_BoxShadow);flex-grow:1;overflow:auto;text-overflow:ellipsis}.fd-splitter__split-pane--translucent{--fdSplitter_Split_Pane_Background:var(--sapBackgroundColor);--fdSplitter_Split_Pane_BoxShadow:var(--sapSplitPane_Shadow1)}.fd-splitter__split-pane--solid{--fdSplitter_Split_Pane_BoxShadow:var(--sapSplitPane_Shadow1);--fdSplitter_Split_Pane_Background:var(--sapGroup_ContentBackground)}.fd-splitter__resizer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdSplitter_Resizer_Background);border:var(--fdSplitter_Resizer_Border);border-radius:.5rem;cursor:var(--fdSplitter_Resizer_Cursor);gap:var(--fdSplitter_Resizer_Gap);height:var(--fdSplitter_Resizer_Height);overflow:visible;position:relative;width:var(--fdSplitter_Resizer_Width);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:var(--fdSplitter_Resizer_Flex_Direction);flex-direction:var(--fdSplitter_Resizer_Flex_Direction)}.fd-splitter__resizer--translucent{--fdSplitter_Resizer_Background:var(--sapGroup_ContentBackground)}.fd-splitter__resizer--solid{--fdSplitter_Resizer_Background:var(--sapContent_ForegroundColor)}.fd-splitter__resizer.is-active,.fd-splitter__resizer:active{--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor);--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__resizer.is-focus,.fd-splitter__resizer:focus{z-index:5;--fdSplitter_Resizer_Before_Background:linear-gradient(to left,var(--sapContent_FocusColor),transparent);--fdSplitter_Resizer_After_Background:linear-gradient(to right,var(--sapContent_FocusColor),transparent)}.fd-splitter__resizer.is-focus.is-active,.fd-splitter__resizer.is-focus:active,.fd-splitter__resizer:focus.is-active,.fd-splitter__resizer:focus:active{--fdSplitter_Resizer_Before_Background:var(--sapGroup_TitleBorderColor);--fdSplitter_Resizer_After_Background:var(--sapGroup_TitleBorderColor)}.fd-splitter__resizer-decoration-before{-webkit-box-ordinal-group:2;-ms-flex-order:1;background:var(--fdSplitter_Resizer_Before_Background);order:1}.fd-splitter__resizer-decoration-after,.fd-splitter__resizer-decoration-before{border-radius:var(--fdSplitter_Resizer_Line_Border_Radius);-webkit-transition:all .1s ease-in;transition:all .1s ease-in}.fd-splitter__resizer-decoration-after{-webkit-box-ordinal-group:4;-ms-flex-order:3;background:var(--fdSplitter_Resizer_After_Background);order:3}.fd-splitter .fd-splitter__resizer-grip{-webkit-box-ordinal-group:3;-ms-flex-order:2;cursor:var(--fdSplitter_Resizer_Grip_Cursor);order:2;position:absolute}.fd-splitter__pagination{-webkit-box-pack:center;-ms-flex-pack:center;height:var(--fdSplitter_Pagination_Container_Height);justify-content:center;width:100%}.fd-splitter__pagination,.fd-splitter__pagination-item-dot:before{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-splitter__pagination-item-dot:before{content:var(--fdSplitter_Pagination_Dot_Value);font-family:SAP-icons-TNT;font-size:.75rem;line-height:.75rem}.fd-splitter__pagination-item--active{--fdSplitter_Pagination_Dot_Value:\"\\e108\"}.fd-splitter[class*=-compact],.fd-splitter[class*=-condensed],[class*=-compact] .fd-splitter:not([class*=-cozy]),[class*=-condensed] .fd-splitter:not([class*=-cozy]){--fdSplitter_Resizer_Gap:1.625rem;--fdSplitter_Pagination_Container_Height:1.625rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/splitter.css:\n (*!\n * Fundamental Library Styles v0.39.2\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"] }]
|
|
191
191
|
}], propDecorators: { _panes: [{
|
|
192
192
|
type: ContentChildren,
|
|
193
193
|
args: [SplitterSplitPaneComponent, { descendants: true }]
|
|
@@ -490,7 +490,7 @@ class ToolHeaderComponent extends ToolHeaderComponentClass {
|
|
|
490
490
|
provide: ToolHeaderComponentClass,
|
|
491
491
|
useExisting: ToolHeaderComponent
|
|
492
492
|
}
|
|
493
|
-
], queries: [{ propertyName: "_toolHeaderLogoDirective", first: true, predicate: ToolHeaderLogoDirective, descendants: true }, { propertyName: "_searchField", first: true, predicate: SearchFieldComponent, descendants: true }, { propertyName: "_toolHeaderUser", first: true, predicate: ToolHeaderUserDirective, descendants: true }, { propertyName: "_toolHeaderProductSwitch", first: true, predicate: FD_PRODUCT_SWITCH_COMPONENT, descendants: true }, { propertyName: "_contentActions", predicate: ToolHeaderActionClass }], usesInheritance: true, ngImport: i0, template: "<div fdbToolHeaderGroup [class.fd-tool-header--menu]=\"showMenuButton\">\n @if (fdbToolHeaderState().backButtonVisible) {\n <div fdbToolHeaderElement>\n <button\n fd-button\n fdbToolHeaderButton\n glyph=\"slim-arrow-left\"\n (click)=\"_searchFieldExpanded$.set(false)\"\n ></button>\n </div>\n }\n @if (fdbToolHeaderState().menuButtonVisible && showMenuButton) {\n <div fdbToolHeaderElement>\n <button\n fd-button\n fdbToolHeaderButton\n [title]=\"'btpToolHeader.menuButtonAriaLabel' | fdTranslate\"\n [ariaLabel]=\"'btpToolHeader.menuButtonAriaLabel' | fdTranslate\"\n glyph=\"menu2\"\n (keydown.arrowLeft)=\"_handleMenuLeftArrowKey()\"\n (keydown.arrowRight)=\"_handleMenuRightArrowKey()\"\n (click)=\"menuClick.emit()\"\n ></button>\n </div>\n }\n @if (fdbToolHeaderState().logoVisible) {\n <div fdbToolHeaderElement>\n @if (_toolHeaderLogoDirective) {\n <ng-content select=\"[fdbToolHeaderLogo]\"></ng-content>\n } @else {\n <img\n fdbToolHeaderLogo\n (click)=\"logoClick.emit()\"\n src=\"https://unpkg.com/fundamental-styles/dist/images/sap-logo.png\"\n srcset=\"\n https://unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,\n https://unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,\n https://unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x\n \"\n alt=\"SAP logo\"\n aria-label=\"SAP logo\"\n title=\"SAP logo\"\n />\n }\n </div>\n }\n @if (fdbToolHeaderState().productNameVisible) {\n <div fdbToolHeaderElement>\n <h1 class=\"fd-tool-header__product-name\">\n {{ productName }}\n </h1>\n </div>\n }\n @if (fdbToolHeaderState().secondTitleVisible && secondTitle) {\n <div fdbToolHeaderElement>\n <div class=\"fd-tool-header__second-title\">\n {{ secondTitle }}\n </div>\n </div>\n }\n</div>\n@if (fdbToolHeaderState().searchFieldVisible) {\n <div fdbToolHeaderGroup center>\n <ng-content select=\"fdb-search-field\"></ng-content>\n </div>\n}\n<fd-overflow-layout\n fdbToolHeaderGroup\n actions\n [style.justify-content]=\"'end'\"\n (hiddenItemsChange)=\"_handleHiddenItemsChange($event)\"\n [renderShowMoreButton]=\"false\"\n>\n @if (fdbToolHeaderState().searchFieldToggleActionVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <button\n fd-button\n fdbToolHeaderActionButton\n glyph=\"search\"\n (click)=\"$event.stopPropagation(); expandSearchField()\"\n ></button>\n </div>\n </ng-template>\n }\n @if (fdbToolHeaderState().providedActionsVisible) {\n @for (action of _contentActions; track action) {\n @if (action.isSeparator ? fdbToolHeaderState().separatorsBetweenActionsVisible : true) {\n <ng-template [fdOverflowItemRef]=\"action\" let-hidden let-injector=\"injector\">\n @if (hidden === false) {\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"!!action.forceVisibility\">\n <ng-template [ngTemplateOutlet]=\"actionTemplate\"></ng-template>\n </div>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"action.templateRef\"\n [ngTemplateOutletContext]=\"{ hidden: hidden }\"\n [ngTemplateOutletInjector]=\"injector\"\n >\n </ng-template>\n }\n <ng-template #actionTemplate>\n <ng-template\n [ngTemplateOutlet]=\"action.templateRef\"\n [ngTemplateOutletContext]=\"{ hidden: hidden }\"\n [ngTemplateOutletInjector]=\"injector\"\n >\n </ng-template>\n </ng-template>\n </ng-template>\n }\n }\n }\n <!-- Custom overflow button used as overflow item START -->\n @if (_delayedHiddenActions$ | async; as hiddenActions) {\n @if (hiddenActions.length > 0) {\n <ng-template fdOverflowItemRef>\n <fdb-navigation-menu-popover fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <button\n *fdbNavigationMenuPopoverControl\n fd-button\n fdbToolHeaderActionButton\n glyph=\"overflow\"\n ></button>\n <fdb-navigation-menu\n class=\"fd-tool-header__navigation-menu\"\n fdkIndirectFocusableList\n #indirectFocusableList=\"fdkIndirectFocusableList\"\n >\n @for (item of hiddenActions; track item.globalIndex) {\n <ng-template\n [ngTemplateOutlet]=\"item.templateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: true,\n index: item.index,\n globalIndex: item.globalIndex,\n first: item.first,\n last: item.last,\n injector: _indirectFocusableItemInjector(indirectFocusableList.injector, item)\n }\"\n >\n </ng-template>\n }\n </fdb-navigation-menu>\n </fdb-navigation-menu-popover>\n </ng-template>\n }\n }\n <!-- Custom overflow button used as overflow item END -->\n @if (fdbToolHeaderState().userAvatarVisible && _toolHeaderUser) {\n @if (fdbToolHeaderState().separatorsBetweenActionsVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <div class=\"fd-tool-header__separator\"></div>\n </div>\n </ng-template>\n }\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n </div>\n </ng-template>\n }\n @if (fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch) {\n @if (fdbToolHeaderState().separatorsBetweenActionsVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <div class=\"fd-tool-header__separator\"></div>\n </div>\n </ng-template>\n }\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <ng-content select=\"fdb-tool-header-product-switch, fd-product-switch\"></ng-content>\n </div>\n </ng-template>\n }\n @if (fdbToolHeaderState().voiceInputVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <button\n fd-button\n fdbToolHeaderActionButton\n glyph=\"microphone\"\n [ariaLabel]=\"'Search with voice'\"\n (click)=\"microphoneClick.emit()\"\n ></button>\n </div>\n </ng-template>\n }\n</fd-overflow-layout>\n", styles: [".fd-tool-header{--fdToolHeader_Min_Height:var(--sapToolHeader_Min_Height_Cozy);--fdToolHeader_Padding_Left:1.5rem;--fdToolHeader_Padding_Right:1.25rem;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;background:var(--sapShellColor);border:.0625rem solid var(--fdToolHeader_Border_Color);border-radius:var(--sapToolHeader_Border_Radius);-webkit-box-shadow:var(--sapToolHeader_Shadow1);box-shadow:var(--sapToolHeader_Shadow1);-ms-flex-direction:row;flex-direction:row;gap:.75rem;height:auto;min-height:var(--fdToolHeader_Min_Height);padding-block:var(--sapToolHeader_Paddings_Y);padding-inline:var(--fdToolHeader_Padding_Left) var(--fdToolHeader_Padding_Right);width:100%}.fd-tool-header:after,.fd-tool-header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__group{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-align:center;-ms-flex-align:center;align-items:center;gap:.375rem;-webkit-box-flex:1;-ms-flex:1;flex:1}.fd-tool-header__group:after,.fd-tool-header__group:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__group--center,.fd-tool-header__group--menu{-webkit-box-flex:0;-ms-flex:0;flex:0}.fd-tool-header__group--actions{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-tool-header__group--hidden{display:none}.fd-tool-header__element{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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tool-header__element:after,.fd-tool-header__element:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__element--hidden{display:none}.fd-tool-header__logo{background-repeat:no-repeat;background-size:contain;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.625rem;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:auto}.fd-tool-header__logo:after,.fd-tool-header__logo:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__logo.is-focus,.fd-tool-header__logo:focus{border-radius:.25rem;outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);outline-offset:.125rem;z-index:5}.fd-tool-header__separator{background:transparent;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;height:.75rem;line-height:normal;margin-block:0;margin-inline:0;max-height:.75rem;max-width:.75rem;min-height:.75rem;min-width:.75rem;padding-block:0;padding-inline:0;width:.75rem}.fd-tool-header__separator:after,.fd-tool-header__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__product-name{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapToolHeader_Product_Name_Color);font-family:var(--sapFontFamily);font-family:var(--sapFontBlackFamily);font-size:var(--sapFontSize);font-size:var(--sapToolHeader_Product_Name_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:1.625rem;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;vertical-align:baseline}.fd-tool-header__product-name:after,.fd-tool-header__product-name:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__second-title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapToolHeader_Second_Title_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapToolHeader_Second_Title_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:var(--sapContent_LineHeight);margin-block:0;margin-inline:0;margin-top:var(--sapToolHeader_Second_Title_Offset);padding-block:0;padding-inline:0;vertical-align:baseline}.fd-tool-header__second-title:after,.fd-tool-header__second-title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header--menu{--fdToolHeader_Padding_Left:.75rem}.fd-tool-header[class*=-compact],[class*=-compact] .fd-tool-header:not([class*=-cozy]){--fdToolHeader_Min_Height:var(--sapToolHeader_Min_Height_Compact)}.fd-overflow-layout__items>.fd-overflow-layout__item:not(.fd-overflow-layout__item--last)>.fd-tool-header__element>*{margin-right:.375rem}.fd-tool-header__group--center+.fd-tool-header__group--actions{max-width:calc((100% - 16rem)/2)}.fd-tool-header__element.is-separator+.fd-tool-header__element.is-separator{display:none}.fd-tool-header__navigation-menu{display:flex;flex-direction:column;overflow:visible}.fd-tool-header .fd-button .fd-button__text{display:none}\n/*! Bundled license information:\n\nfundamental-styles/dist/tool-header.css:\n (*!\n * Fundamental Library Styles v0.38.0\n * Copyright (c) 2024 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: ToolHeaderGroupDirective, selector: "[fdbToolHeaderGroup]", inputs: ["center", "actions"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ToolHeaderElementDirective, selector: "[fdbToolHeaderElement]" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: ToolHeaderButtonDirective, selector: "[fd-button][fdbToolHeaderButton]", inputs: ["fdType"] }, { kind: "directive", type: ToolHeaderLogoDirective, selector: "[fdbToolHeaderLogo]" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "component", type: NavigationMenuComponent, selector: "fdb-navigation-menu, ul[fdb-navigation-menu]" }, { kind: "directive", type: IndirectFocusableListDirective, selector: "[fdkIndirectFocusableList]", exportAs: ["fdkIndirectFocusableList"] }, { kind: "component", type: NavigationMenuPopoverComponent, selector: "fdb-navigation-menu-popover" }, { kind: "directive", type: NavigationMenuPopoverControlDirective, selector: "[fdbNavigationMenuPopoverControl]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "navigationTrigger", "showMorePosition", "renderShowMoreButton", "reverseHiddenItems", "enableKeyboardNavigation", "ariaRole", "moreItemsButtonText"], outputs: ["visibleItemsCount", "hiddenItemsCount", "hiddenItemsChange"] }, { kind: "directive", type: OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["forceVisibility"], outputs: ["hiddenChange"] }, { kind: "directive", type: OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: ToolHeaderActionButtonDirective, selector: "[fd-button][fdbToolHeaderActionButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
493
|
+
], queries: [{ propertyName: "_toolHeaderLogoDirective", first: true, predicate: ToolHeaderLogoDirective, descendants: true }, { propertyName: "_searchField", first: true, predicate: SearchFieldComponent, descendants: true }, { propertyName: "_toolHeaderUser", first: true, predicate: ToolHeaderUserDirective, descendants: true }, { propertyName: "_toolHeaderProductSwitch", first: true, predicate: FD_PRODUCT_SWITCH_COMPONENT, descendants: true }, { propertyName: "_contentActions", predicate: ToolHeaderActionClass }], usesInheritance: true, ngImport: i0, template: "<div fdbToolHeaderGroup [class.fd-tool-header--menu]=\"showMenuButton\">\n @if (fdbToolHeaderState().backButtonVisible) {\n <div fdbToolHeaderElement>\n <button\n fd-button\n fdbToolHeaderButton\n glyph=\"slim-arrow-left\"\n (click)=\"_searchFieldExpanded$.set(false)\"\n ></button>\n </div>\n }\n @if (fdbToolHeaderState().menuButtonVisible && showMenuButton) {\n <div fdbToolHeaderElement>\n <button\n fd-button\n fdbToolHeaderButton\n [title]=\"'btpToolHeader.menuButtonAriaLabel' | fdTranslate\"\n [ariaLabel]=\"'btpToolHeader.menuButtonAriaLabel' | fdTranslate\"\n glyph=\"menu2\"\n (keydown.arrowLeft)=\"_handleMenuLeftArrowKey()\"\n (keydown.arrowRight)=\"_handleMenuRightArrowKey()\"\n (click)=\"menuClick.emit()\"\n ></button>\n </div>\n }\n @if (fdbToolHeaderState().logoVisible) {\n <div fdbToolHeaderElement>\n @if (_toolHeaderLogoDirective) {\n <ng-content select=\"[fdbToolHeaderLogo]\"></ng-content>\n } @else {\n <img\n fdbToolHeaderLogo\n (click)=\"logoClick.emit()\"\n src=\"https://unpkg.com/fundamental-styles/dist/images/sap-logo.png\"\n srcset=\"\n https://unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,\n https://unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,\n https://unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x\n \"\n alt=\"SAP logo\"\n aria-label=\"SAP logo\"\n title=\"SAP logo\"\n />\n }\n </div>\n }\n @if (fdbToolHeaderState().productNameVisible) {\n <div fdbToolHeaderElement>\n <h1 class=\"fd-tool-header__product-name\">\n {{ productName }}\n </h1>\n </div>\n }\n @if (fdbToolHeaderState().secondTitleVisible && secondTitle) {\n <div fdbToolHeaderElement>\n <div class=\"fd-tool-header__second-title\">\n {{ secondTitle }}\n </div>\n </div>\n }\n</div>\n@if (fdbToolHeaderState().searchFieldVisible) {\n <div fdbToolHeaderGroup center>\n <ng-content select=\"fdb-search-field\"></ng-content>\n </div>\n}\n<fd-overflow-layout\n fdbToolHeaderGroup\n actions\n [style.justify-content]=\"'end'\"\n (hiddenItemsChange)=\"_handleHiddenItemsChange($event)\"\n [renderShowMoreButton]=\"false\"\n>\n @if (fdbToolHeaderState().searchFieldToggleActionVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <button\n fd-button\n fdbToolHeaderActionButton\n glyph=\"search\"\n (click)=\"$event.stopPropagation(); expandSearchField()\"\n ></button>\n </div>\n </ng-template>\n }\n @if (fdbToolHeaderState().providedActionsVisible) {\n @for (action of _contentActions; track action) {\n @if (action.isSeparator ? fdbToolHeaderState().separatorsBetweenActionsVisible : true) {\n <ng-template [fdOverflowItemRef]=\"action\" let-hidden let-injector=\"injector\">\n @if (hidden === false) {\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"!!action.forceVisibility\">\n <ng-template [ngTemplateOutlet]=\"actionTemplate\"></ng-template>\n </div>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"action.templateRef\"\n [ngTemplateOutletContext]=\"{ hidden: hidden }\"\n [ngTemplateOutletInjector]=\"injector\"\n >\n </ng-template>\n }\n <ng-template #actionTemplate>\n <ng-template\n [ngTemplateOutlet]=\"action.templateRef\"\n [ngTemplateOutletContext]=\"{ hidden: hidden }\"\n [ngTemplateOutletInjector]=\"injector\"\n >\n </ng-template>\n </ng-template>\n </ng-template>\n }\n }\n }\n <!-- Custom overflow button used as overflow item START -->\n @if (_delayedHiddenActions$ | async; as hiddenActions) {\n @if (hiddenActions.length > 0) {\n <ng-template fdOverflowItemRef>\n <fdb-navigation-menu-popover fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <button\n *fdbNavigationMenuPopoverControl\n fd-button\n fdbToolHeaderActionButton\n glyph=\"overflow\"\n ></button>\n <fdb-navigation-menu\n class=\"fd-tool-header__navigation-menu\"\n fdkIndirectFocusableList\n #indirectFocusableList=\"fdkIndirectFocusableList\"\n >\n @for (item of hiddenActions; track item.globalIndex) {\n <ng-template\n [ngTemplateOutlet]=\"item.templateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: true,\n index: item.index,\n globalIndex: item.globalIndex,\n first: item.first,\n last: item.last,\n injector: _indirectFocusableItemInjector(indirectFocusableList.injector, item)\n }\"\n >\n </ng-template>\n }\n </fdb-navigation-menu>\n </fdb-navigation-menu-popover>\n </ng-template>\n }\n }\n <!-- Custom overflow button used as overflow item END -->\n @if (fdbToolHeaderState().userAvatarVisible && _toolHeaderUser) {\n @if (fdbToolHeaderState().separatorsBetweenActionsVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <div class=\"fd-tool-header__separator\"></div>\n </div>\n </ng-template>\n }\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n </div>\n </ng-template>\n }\n @if (fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch) {\n @if (fdbToolHeaderState().separatorsBetweenActionsVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <div class=\"fd-tool-header__separator\"></div>\n </div>\n </ng-template>\n }\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <ng-content select=\"fdb-tool-header-product-switch, fd-product-switch\"></ng-content>\n </div>\n </ng-template>\n }\n @if (fdbToolHeaderState().voiceInputVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <button\n fd-button\n fdbToolHeaderActionButton\n glyph=\"microphone\"\n [ariaLabel]=\"'Search with voice'\"\n (click)=\"microphoneClick.emit()\"\n ></button>\n </div>\n </ng-template>\n }\n</fd-overflow-layout>\n", styles: [".fd-tool-header{--fdToolHeader_Min_Height:var(--sapToolHeader_Min_Height_Cozy);--fdToolHeader_Padding_Left:1.5rem;--fdToolHeader_Padding_Right:1.25rem;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;background:var(--sapShellColor);border:.0625rem solid var(--fdToolHeader_Border_Color);border-radius:var(--sapToolHeader_Border_Radius);-webkit-box-shadow:var(--sapToolHeader_Shadow1);box-shadow:var(--sapToolHeader_Shadow1);-ms-flex-direction:row;flex-direction:row;gap:.75rem;height:auto;min-height:var(--fdToolHeader_Min_Height);padding-block:var(--sapToolHeader_Paddings_Y);padding-inline:var(--fdToolHeader_Padding_Left) var(--fdToolHeader_Padding_Right);width:100%}.fd-tool-header:after,.fd-tool-header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__group{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-align:center;-ms-flex-align:center;align-items:center;gap:.375rem;-webkit-box-flex:1;-ms-flex:1;flex:1}.fd-tool-header__group:after,.fd-tool-header__group:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__group--center,.fd-tool-header__group--menu{-webkit-box-flex:0;-ms-flex:0;flex:0}.fd-tool-header__group--actions{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-tool-header__group--hidden{display:none}.fd-tool-header__element{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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tool-header__element:after,.fd-tool-header__element:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__element--hidden{display:none}.fd-tool-header__logo{background-repeat:no-repeat;background-size:contain;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.625rem;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:auto}.fd-tool-header__logo:after,.fd-tool-header__logo:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__logo.is-focus,.fd-tool-header__logo:focus{border-radius:.25rem;outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);outline-offset:.125rem;z-index:5}.fd-tool-header__separator{background:transparent;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;height:.75rem;line-height:normal;margin-block:0;margin-inline:0;max-height:.75rem;max-width:.75rem;min-height:.75rem;min-width:.75rem;padding-block:0;padding-inline:0;width:.75rem}.fd-tool-header__separator:after,.fd-tool-header__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__product-name{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapToolHeader_Product_Name_Color);font-family:var(--sapFontFamily);font-family:var(--sapFontBlackFamily);font-size:var(--sapFontSize);font-size:var(--sapToolHeader_Product_Name_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:1.625rem;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;vertical-align:baseline}.fd-tool-header__product-name:after,.fd-tool-header__product-name:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__second-title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapToolHeader_Second_Title_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapToolHeader_Second_Title_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:var(--sapContent_LineHeight);margin-block:0;margin-inline:0;margin-top:var(--sapToolHeader_Second_Title_Offset);padding-block:0;padding-inline:0;vertical-align:baseline}.fd-tool-header__second-title:after,.fd-tool-header__second-title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header--menu{--fdToolHeader_Padding_Left:.75rem}.fd-tool-header[class*=-compact],[class*=-compact] .fd-tool-header:not([class*=-cozy]){--fdToolHeader_Min_Height:var(--sapToolHeader_Min_Height_Compact)}.fd-overflow-layout__items>.fd-overflow-layout__item:not(.fd-overflow-layout__item--last)>.fd-tool-header__element>*{margin-right:.375rem}.fd-tool-header__group--center+.fd-tool-header__group--actions{max-width:calc((100% - 16rem)/2)}.fd-tool-header__element.is-separator+.fd-tool-header__element.is-separator{display:none}.fd-tool-header__navigation-menu{display:flex;flex-direction:column;overflow:visible}.fd-tool-header .fd-button .fd-button__text{display:none}\n/*! Bundled license information:\n\nfundamental-styles/dist/tool-header.css:\n (*!\n * Fundamental Library Styles v0.39.2\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: ToolHeaderGroupDirective, selector: "[fdbToolHeaderGroup]", inputs: ["center", "actions"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ToolHeaderElementDirective, selector: "[fdbToolHeaderElement]" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: ToolHeaderButtonDirective, selector: "[fd-button][fdbToolHeaderButton]", inputs: ["fdType"] }, { kind: "directive", type: ToolHeaderLogoDirective, selector: "[fdbToolHeaderLogo]" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "component", type: NavigationMenuComponent, selector: "fdb-navigation-menu, ul[fdb-navigation-menu]" }, { kind: "directive", type: IndirectFocusableListDirective, selector: "[fdkIndirectFocusableList]", exportAs: ["fdkIndirectFocusableList"] }, { kind: "component", type: NavigationMenuPopoverComponent, selector: "fdb-navigation-menu-popover" }, { kind: "directive", type: NavigationMenuPopoverControlDirective, selector: "[fdbNavigationMenuPopoverControl]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "navigationTrigger", "showMorePosition", "renderShowMoreButton", "reverseHiddenItems", "enableKeyboardNavigation", "ariaRole", "moreItemsButtonText"], outputs: ["visibleItemsCount", "hiddenItemsCount", "hiddenItemsChange"] }, { kind: "directive", type: OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["forceVisibility"], outputs: ["hiddenChange"] }, { kind: "directive", type: OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: ToolHeaderActionButtonDirective, selector: "[fd-button][fdbToolHeaderActionButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
494
494
|
}
|
|
495
495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ToolHeaderComponent, decorators: [{
|
|
496
496
|
type: Component,
|
|
@@ -523,7 +523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
523
523
|
provide: ToolHeaderComponentClass,
|
|
524
524
|
useExisting: ToolHeaderComponent
|
|
525
525
|
}
|
|
526
|
-
], template: "<div fdbToolHeaderGroup [class.fd-tool-header--menu]=\"showMenuButton\">\n @if (fdbToolHeaderState().backButtonVisible) {\n <div fdbToolHeaderElement>\n <button\n fd-button\n fdbToolHeaderButton\n glyph=\"slim-arrow-left\"\n (click)=\"_searchFieldExpanded$.set(false)\"\n ></button>\n </div>\n }\n @if (fdbToolHeaderState().menuButtonVisible && showMenuButton) {\n <div fdbToolHeaderElement>\n <button\n fd-button\n fdbToolHeaderButton\n [title]=\"'btpToolHeader.menuButtonAriaLabel' | fdTranslate\"\n [ariaLabel]=\"'btpToolHeader.menuButtonAriaLabel' | fdTranslate\"\n glyph=\"menu2\"\n (keydown.arrowLeft)=\"_handleMenuLeftArrowKey()\"\n (keydown.arrowRight)=\"_handleMenuRightArrowKey()\"\n (click)=\"menuClick.emit()\"\n ></button>\n </div>\n }\n @if (fdbToolHeaderState().logoVisible) {\n <div fdbToolHeaderElement>\n @if (_toolHeaderLogoDirective) {\n <ng-content select=\"[fdbToolHeaderLogo]\"></ng-content>\n } @else {\n <img\n fdbToolHeaderLogo\n (click)=\"logoClick.emit()\"\n src=\"https://unpkg.com/fundamental-styles/dist/images/sap-logo.png\"\n srcset=\"\n https://unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,\n https://unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,\n https://unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x\n \"\n alt=\"SAP logo\"\n aria-label=\"SAP logo\"\n title=\"SAP logo\"\n />\n }\n </div>\n }\n @if (fdbToolHeaderState().productNameVisible) {\n <div fdbToolHeaderElement>\n <h1 class=\"fd-tool-header__product-name\">\n {{ productName }}\n </h1>\n </div>\n }\n @if (fdbToolHeaderState().secondTitleVisible && secondTitle) {\n <div fdbToolHeaderElement>\n <div class=\"fd-tool-header__second-title\">\n {{ secondTitle }}\n </div>\n </div>\n }\n</div>\n@if (fdbToolHeaderState().searchFieldVisible) {\n <div fdbToolHeaderGroup center>\n <ng-content select=\"fdb-search-field\"></ng-content>\n </div>\n}\n<fd-overflow-layout\n fdbToolHeaderGroup\n actions\n [style.justify-content]=\"'end'\"\n (hiddenItemsChange)=\"_handleHiddenItemsChange($event)\"\n [renderShowMoreButton]=\"false\"\n>\n @if (fdbToolHeaderState().searchFieldToggleActionVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <button\n fd-button\n fdbToolHeaderActionButton\n glyph=\"search\"\n (click)=\"$event.stopPropagation(); expandSearchField()\"\n ></button>\n </div>\n </ng-template>\n }\n @if (fdbToolHeaderState().providedActionsVisible) {\n @for (action of _contentActions; track action) {\n @if (action.isSeparator ? fdbToolHeaderState().separatorsBetweenActionsVisible : true) {\n <ng-template [fdOverflowItemRef]=\"action\" let-hidden let-injector=\"injector\">\n @if (hidden === false) {\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"!!action.forceVisibility\">\n <ng-template [ngTemplateOutlet]=\"actionTemplate\"></ng-template>\n </div>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"action.templateRef\"\n [ngTemplateOutletContext]=\"{ hidden: hidden }\"\n [ngTemplateOutletInjector]=\"injector\"\n >\n </ng-template>\n }\n <ng-template #actionTemplate>\n <ng-template\n [ngTemplateOutlet]=\"action.templateRef\"\n [ngTemplateOutletContext]=\"{ hidden: hidden }\"\n [ngTemplateOutletInjector]=\"injector\"\n >\n </ng-template>\n </ng-template>\n </ng-template>\n }\n }\n }\n <!-- Custom overflow button used as overflow item START -->\n @if (_delayedHiddenActions$ | async; as hiddenActions) {\n @if (hiddenActions.length > 0) {\n <ng-template fdOverflowItemRef>\n <fdb-navigation-menu-popover fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <button\n *fdbNavigationMenuPopoverControl\n fd-button\n fdbToolHeaderActionButton\n glyph=\"overflow\"\n ></button>\n <fdb-navigation-menu\n class=\"fd-tool-header__navigation-menu\"\n fdkIndirectFocusableList\n #indirectFocusableList=\"fdkIndirectFocusableList\"\n >\n @for (item of hiddenActions; track item.globalIndex) {\n <ng-template\n [ngTemplateOutlet]=\"item.templateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: true,\n index: item.index,\n globalIndex: item.globalIndex,\n first: item.first,\n last: item.last,\n injector: _indirectFocusableItemInjector(indirectFocusableList.injector, item)\n }\"\n >\n </ng-template>\n }\n </fdb-navigation-menu>\n </fdb-navigation-menu-popover>\n </ng-template>\n }\n }\n <!-- Custom overflow button used as overflow item END -->\n @if (fdbToolHeaderState().userAvatarVisible && _toolHeaderUser) {\n @if (fdbToolHeaderState().separatorsBetweenActionsVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <div class=\"fd-tool-header__separator\"></div>\n </div>\n </ng-template>\n }\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n </div>\n </ng-template>\n }\n @if (fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch) {\n @if (fdbToolHeaderState().separatorsBetweenActionsVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <div class=\"fd-tool-header__separator\"></div>\n </div>\n </ng-template>\n }\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <ng-content select=\"fdb-tool-header-product-switch, fd-product-switch\"></ng-content>\n </div>\n </ng-template>\n }\n @if (fdbToolHeaderState().voiceInputVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <button\n fd-button\n fdbToolHeaderActionButton\n glyph=\"microphone\"\n [ariaLabel]=\"'Search with voice'\"\n (click)=\"microphoneClick.emit()\"\n ></button>\n </div>\n </ng-template>\n }\n</fd-overflow-layout>\n", styles: [".fd-tool-header{--fdToolHeader_Min_Height:var(--sapToolHeader_Min_Height_Cozy);--fdToolHeader_Padding_Left:1.5rem;--fdToolHeader_Padding_Right:1.25rem;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;background:var(--sapShellColor);border:.0625rem solid var(--fdToolHeader_Border_Color);border-radius:var(--sapToolHeader_Border_Radius);-webkit-box-shadow:var(--sapToolHeader_Shadow1);box-shadow:var(--sapToolHeader_Shadow1);-ms-flex-direction:row;flex-direction:row;gap:.75rem;height:auto;min-height:var(--fdToolHeader_Min_Height);padding-block:var(--sapToolHeader_Paddings_Y);padding-inline:var(--fdToolHeader_Padding_Left) var(--fdToolHeader_Padding_Right);width:100%}.fd-tool-header:after,.fd-tool-header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__group{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-align:center;-ms-flex-align:center;align-items:center;gap:.375rem;-webkit-box-flex:1;-ms-flex:1;flex:1}.fd-tool-header__group:after,.fd-tool-header__group:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__group--center,.fd-tool-header__group--menu{-webkit-box-flex:0;-ms-flex:0;flex:0}.fd-tool-header__group--actions{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-tool-header__group--hidden{display:none}.fd-tool-header__element{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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tool-header__element:after,.fd-tool-header__element:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__element--hidden{display:none}.fd-tool-header__logo{background-repeat:no-repeat;background-size:contain;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.625rem;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:auto}.fd-tool-header__logo:after,.fd-tool-header__logo:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__logo.is-focus,.fd-tool-header__logo:focus{border-radius:.25rem;outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);outline-offset:.125rem;z-index:5}.fd-tool-header__separator{background:transparent;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;height:.75rem;line-height:normal;margin-block:0;margin-inline:0;max-height:.75rem;max-width:.75rem;min-height:.75rem;min-width:.75rem;padding-block:0;padding-inline:0;width:.75rem}.fd-tool-header__separator:after,.fd-tool-header__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__product-name{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapToolHeader_Product_Name_Color);font-family:var(--sapFontFamily);font-family:var(--sapFontBlackFamily);font-size:var(--sapFontSize);font-size:var(--sapToolHeader_Product_Name_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:1.625rem;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;vertical-align:baseline}.fd-tool-header__product-name:after,.fd-tool-header__product-name:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__second-title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapToolHeader_Second_Title_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapToolHeader_Second_Title_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:var(--sapContent_LineHeight);margin-block:0;margin-inline:0;margin-top:var(--sapToolHeader_Second_Title_Offset);padding-block:0;padding-inline:0;vertical-align:baseline}.fd-tool-header__second-title:after,.fd-tool-header__second-title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header--menu{--fdToolHeader_Padding_Left:.75rem}.fd-tool-header[class*=-compact],[class*=-compact] .fd-tool-header:not([class*=-cozy]){--fdToolHeader_Min_Height:var(--sapToolHeader_Min_Height_Compact)}.fd-overflow-layout__items>.fd-overflow-layout__item:not(.fd-overflow-layout__item--last)>.fd-tool-header__element>*{margin-right:.375rem}.fd-tool-header__group--center+.fd-tool-header__group--actions{max-width:calc((100% - 16rem)/2)}.fd-tool-header__element.is-separator+.fd-tool-header__element.is-separator{display:none}.fd-tool-header__navigation-menu{display:flex;flex-direction:column;overflow:visible}.fd-tool-header .fd-button .fd-button__text{display:none}\n/*! Bundled license information:\n\nfundamental-styles/dist/tool-header.css:\n (*!\n * Fundamental Library Styles v0.38.0\n * Copyright (c) 2024 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"] }]
|
|
526
|
+
], template: "<div fdbToolHeaderGroup [class.fd-tool-header--menu]=\"showMenuButton\">\n @if (fdbToolHeaderState().backButtonVisible) {\n <div fdbToolHeaderElement>\n <button\n fd-button\n fdbToolHeaderButton\n glyph=\"slim-arrow-left\"\n (click)=\"_searchFieldExpanded$.set(false)\"\n ></button>\n </div>\n }\n @if (fdbToolHeaderState().menuButtonVisible && showMenuButton) {\n <div fdbToolHeaderElement>\n <button\n fd-button\n fdbToolHeaderButton\n [title]=\"'btpToolHeader.menuButtonAriaLabel' | fdTranslate\"\n [ariaLabel]=\"'btpToolHeader.menuButtonAriaLabel' | fdTranslate\"\n glyph=\"menu2\"\n (keydown.arrowLeft)=\"_handleMenuLeftArrowKey()\"\n (keydown.arrowRight)=\"_handleMenuRightArrowKey()\"\n (click)=\"menuClick.emit()\"\n ></button>\n </div>\n }\n @if (fdbToolHeaderState().logoVisible) {\n <div fdbToolHeaderElement>\n @if (_toolHeaderLogoDirective) {\n <ng-content select=\"[fdbToolHeaderLogo]\"></ng-content>\n } @else {\n <img\n fdbToolHeaderLogo\n (click)=\"logoClick.emit()\"\n src=\"https://unpkg.com/fundamental-styles/dist/images/sap-logo.png\"\n srcset=\"\n https://unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,\n https://unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,\n https://unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x\n \"\n alt=\"SAP logo\"\n aria-label=\"SAP logo\"\n title=\"SAP logo\"\n />\n }\n </div>\n }\n @if (fdbToolHeaderState().productNameVisible) {\n <div fdbToolHeaderElement>\n <h1 class=\"fd-tool-header__product-name\">\n {{ productName }}\n </h1>\n </div>\n }\n @if (fdbToolHeaderState().secondTitleVisible && secondTitle) {\n <div fdbToolHeaderElement>\n <div class=\"fd-tool-header__second-title\">\n {{ secondTitle }}\n </div>\n </div>\n }\n</div>\n@if (fdbToolHeaderState().searchFieldVisible) {\n <div fdbToolHeaderGroup center>\n <ng-content select=\"fdb-search-field\"></ng-content>\n </div>\n}\n<fd-overflow-layout\n fdbToolHeaderGroup\n actions\n [style.justify-content]=\"'end'\"\n (hiddenItemsChange)=\"_handleHiddenItemsChange($event)\"\n [renderShowMoreButton]=\"false\"\n>\n @if (fdbToolHeaderState().searchFieldToggleActionVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <button\n fd-button\n fdbToolHeaderActionButton\n glyph=\"search\"\n (click)=\"$event.stopPropagation(); expandSearchField()\"\n ></button>\n </div>\n </ng-template>\n }\n @if (fdbToolHeaderState().providedActionsVisible) {\n @for (action of _contentActions; track action) {\n @if (action.isSeparator ? fdbToolHeaderState().separatorsBetweenActionsVisible : true) {\n <ng-template [fdOverflowItemRef]=\"action\" let-hidden let-injector=\"injector\">\n @if (hidden === false) {\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"!!action.forceVisibility\">\n <ng-template [ngTemplateOutlet]=\"actionTemplate\"></ng-template>\n </div>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"action.templateRef\"\n [ngTemplateOutletContext]=\"{ hidden: hidden }\"\n [ngTemplateOutletInjector]=\"injector\"\n >\n </ng-template>\n }\n <ng-template #actionTemplate>\n <ng-template\n [ngTemplateOutlet]=\"action.templateRef\"\n [ngTemplateOutletContext]=\"{ hidden: hidden }\"\n [ngTemplateOutletInjector]=\"injector\"\n >\n </ng-template>\n </ng-template>\n </ng-template>\n }\n }\n }\n <!-- Custom overflow button used as overflow item START -->\n @if (_delayedHiddenActions$ | async; as hiddenActions) {\n @if (hiddenActions.length > 0) {\n <ng-template fdOverflowItemRef>\n <fdb-navigation-menu-popover fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <button\n *fdbNavigationMenuPopoverControl\n fd-button\n fdbToolHeaderActionButton\n glyph=\"overflow\"\n ></button>\n <fdb-navigation-menu\n class=\"fd-tool-header__navigation-menu\"\n fdkIndirectFocusableList\n #indirectFocusableList=\"fdkIndirectFocusableList\"\n >\n @for (item of hiddenActions; track item.globalIndex) {\n <ng-template\n [ngTemplateOutlet]=\"item.templateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: true,\n index: item.index,\n globalIndex: item.globalIndex,\n first: item.first,\n last: item.last,\n injector: _indirectFocusableItemInjector(indirectFocusableList.injector, item)\n }\"\n >\n </ng-template>\n }\n </fdb-navigation-menu>\n </fdb-navigation-menu-popover>\n </ng-template>\n }\n }\n <!-- Custom overflow button used as overflow item END -->\n @if (fdbToolHeaderState().userAvatarVisible && _toolHeaderUser) {\n @if (fdbToolHeaderState().separatorsBetweenActionsVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <div class=\"fd-tool-header__separator\"></div>\n </div>\n </ng-template>\n }\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n </div>\n </ng-template>\n }\n @if (fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch) {\n @if (fdbToolHeaderState().separatorsBetweenActionsVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <div class=\"fd-tool-header__separator\"></div>\n </div>\n </ng-template>\n }\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <ng-content select=\"fdb-tool-header-product-switch, fd-product-switch\"></ng-content>\n </div>\n </ng-template>\n }\n @if (fdbToolHeaderState().voiceInputVisible) {\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <button\n fd-button\n fdbToolHeaderActionButton\n glyph=\"microphone\"\n [ariaLabel]=\"'Search with voice'\"\n (click)=\"microphoneClick.emit()\"\n ></button>\n </div>\n </ng-template>\n }\n</fd-overflow-layout>\n", styles: [".fd-tool-header{--fdToolHeader_Min_Height:var(--sapToolHeader_Min_Height_Cozy);--fdToolHeader_Padding_Left:1.5rem;--fdToolHeader_Padding_Right:1.25rem;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;background:var(--sapShellColor);border:.0625rem solid var(--fdToolHeader_Border_Color);border-radius:var(--sapToolHeader_Border_Radius);-webkit-box-shadow:var(--sapToolHeader_Shadow1);box-shadow:var(--sapToolHeader_Shadow1);-ms-flex-direction:row;flex-direction:row;gap:.75rem;height:auto;min-height:var(--fdToolHeader_Min_Height);padding-block:var(--sapToolHeader_Paddings_Y);padding-inline:var(--fdToolHeader_Padding_Left) var(--fdToolHeader_Padding_Right);width:100%}.fd-tool-header:after,.fd-tool-header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__group{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-align:center;-ms-flex-align:center;align-items:center;gap:.375rem;-webkit-box-flex:1;-ms-flex:1;flex:1}.fd-tool-header__group:after,.fd-tool-header__group:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__group--center,.fd-tool-header__group--menu{-webkit-box-flex:0;-ms-flex:0;flex:0}.fd-tool-header__group--actions{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-tool-header__group--hidden{display:none}.fd-tool-header__element{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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tool-header__element:after,.fd-tool-header__element:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__element--hidden{display:none}.fd-tool-header__logo{background-repeat:no-repeat;background-size:contain;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.625rem;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:auto}.fd-tool-header__logo:after,.fd-tool-header__logo:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__logo.is-focus,.fd-tool-header__logo:focus{border-radius:.25rem;outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);outline-offset:.125rem;z-index:5}.fd-tool-header__separator{background:transparent;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;height:.75rem;line-height:normal;margin-block:0;margin-inline:0;max-height:.75rem;max-width:.75rem;min-height:.75rem;min-width:.75rem;padding-block:0;padding-inline:0;width:.75rem}.fd-tool-header__separator:after,.fd-tool-header__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__product-name{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapToolHeader_Product_Name_Color);font-family:var(--sapFontFamily);font-family:var(--sapFontBlackFamily);font-size:var(--sapFontSize);font-size:var(--sapToolHeader_Product_Name_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:1.625rem;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;vertical-align:baseline}.fd-tool-header__product-name:after,.fd-tool-header__product-name:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header__second-title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapToolHeader_Second_Title_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapToolHeader_Second_Title_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:var(--sapContent_LineHeight);margin-block:0;margin-inline:0;margin-top:var(--sapToolHeader_Second_Title_Offset);padding-block:0;padding-inline:0;vertical-align:baseline}.fd-tool-header__second-title:after,.fd-tool-header__second-title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tool-header--menu{--fdToolHeader_Padding_Left:.75rem}.fd-tool-header[class*=-compact],[class*=-compact] .fd-tool-header:not([class*=-cozy]){--fdToolHeader_Min_Height:var(--sapToolHeader_Min_Height_Compact)}.fd-overflow-layout__items>.fd-overflow-layout__item:not(.fd-overflow-layout__item--last)>.fd-tool-header__element>*{margin-right:.375rem}.fd-tool-header__group--center+.fd-tool-header__group--actions{max-width:calc((100% - 16rem)/2)}.fd-tool-header__element.is-separator+.fd-tool-header__element.is-separator{display:none}.fd-tool-header__navigation-menu{display:flex;flex-direction:column;overflow:visible}.fd-tool-header .fd-button .fd-button__text{display:none}\n/*! Bundled license information:\n\nfundamental-styles/dist/tool-header.css:\n (*!\n * Fundamental Library Styles v0.39.2\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"] }]
|
|
527
527
|
}], propDecorators: { productName: [{
|
|
528
528
|
type: Input,
|
|
529
529
|
args: [{ required: true }]
|