@fundamental-ngx/btp 0.47.2-rc.0 → 0.47.2
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/esm2022/navigation/navigation.component.mjs +3 -3
- package/esm2022/navigation-menu/lib/navigation-menu.component.mjs +2 -2
- package/esm2022/search-field/search-field.component.mjs +3 -3
- package/esm2022/tool-header/components/tool-header/tool-header.component.mjs +3 -3
- package/esm2022/tool-layout/tool-layout.component.mjs +2 -2
- package/fesm2022/fundamental-ngx-btp-navigation-menu.mjs +2 -2
- package/fesm2022/fundamental-ngx-btp-navigation-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-btp-navigation.mjs +2 -2
- 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-tool-header.mjs +2 -2
- package/fesm2022/fundamental-ngx-btp-tool-header.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-btp-tool-layout.mjs +2 -2
- package/fesm2022/fundamental-ngx-btp-tool-layout.mjs.map +1 -1
- package/fundamental-ngx-btp-v0.47.2.tgz +0 -0
- package/package.json +3 -3
- package/fundamental-ngx-btp-v0.47.2-rc.0.tgz +0 -0
|
@@ -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: "16.2.7", ngImport: i0, type: SearchFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
51
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-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);-webkit-box-sizing:border-box;align-items:center;border:0;border:.0625rem solid var(--fdSearchField_Border_Color);border-radius:var(--fdSearchField_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSearchField_Height);line-height:var(--sapContent_LineHeight);margin:0;max-height:var(--fdSearchField_Height);min-height:var(--fdSearchField_Height);padding:0;position:relative;width:16rem}.fd-search-field:after,.fd-search-field:before{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]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:flex;font-size:1rem;justify-content:center}.fd-search-field__input{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--fdSearchField_Box_Shadow);background:var(--fdSearchField_Background);border:0;border-radius:var(--fdSearchField_Border_Radius);box-shadow:var(--fdSearchField_Box_Shadow);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:var(--sapContent_LineHeight);margin:0;max-height:var(--fdSearchField_Height_Border);min-height:var(--fdSearchField_Height_Border);padding:0;padding:var(--fdSearchField_Padding) var(--fdSearchField_Padding_Right) var(--fdSearchField_Padding) var(--fdSearchField_Padding_Left);width:16rem;z-index:1}.fd-search-field__input:after,.fd-search-field__input:before{box-sizing:inherit;font-size:inherit}.fd-search-field__input[dir=rtl],[dir=rtl] .fd-search-field__input{padding-left:var(--fdSearchField_Padding_Right);padding-right:var(--fdSearchField_Padding_Left)}.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}.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(: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(:placeholder-shown)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:placeholder-shown)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:placeholder-shown).is-focus,.fd-search-field__input:not(:placeholder-shown):focus{--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none;z-index:5}.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{--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Border_Color:transparent;--fdSearchField_Box_Shadow:none;outline:var(--fdSearchField_Outline);outline-offset:var(--fdSearchField_Outline_Offset);z-index:5}.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{-webkit-box-sizing:border-box;border:0;border-radius:var(--fdSearchField_Border_Radius);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:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;position:absolute;width:100%}.fd-search-field__underline:after,.fd-search-field__underline:before{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{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;right:var(--fdSearchField_Actions_Offset);z-index:10}.fd-search-field__actions:after,.fd-search-field__actions:before{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{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSearchField_Action_Container_Size);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;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);padding:0;width:var(--fdSearchField_Action_Container_Size)}.fd-search-field__action-container:after,.fd-search-field__action-container:before{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"], 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]", 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: "16.2.7", 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: ["/*!\n * Fundamental Library Styles v0.32.0\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-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);-webkit-box-sizing:border-box;align-items:center;border:0;border:.0625rem solid var(--fdSearchField_Border_Color);border-radius:var(--fdSearchField_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSearchField_Height);line-height:var(--sapContent_LineHeight);margin:0;max-height:var(--fdSearchField_Height);min-height:var(--fdSearchField_Height);padding:0;position:relative;width:16rem}.fd-search-field:after,.fd-search-field:before{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]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:flex;font-size:1rem;justify-content:center}.fd-search-field__input{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--fdSearchField_Box_Shadow);background:var(--fdSearchField_Background);border:0;border-radius:var(--fdSearchField_Border_Radius);box-shadow:var(--fdSearchField_Box_Shadow);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:var(--sapContent_LineHeight);margin:0;max-height:var(--fdSearchField_Height_Border);min-height:var(--fdSearchField_Height_Border);padding:0;padding:var(--fdSearchField_Padding) var(--fdSearchField_Padding_Right) var(--fdSearchField_Padding) var(--fdSearchField_Padding_Left);width:16rem;z-index:1}.fd-search-field__input:after,.fd-search-field__input:before{box-sizing:inherit;font-size:inherit}.fd-search-field__input[dir=rtl],[dir=rtl] .fd-search-field__input{padding-left:var(--fdSearchField_Padding_Right);padding-right:var(--fdSearchField_Padding_Left)}.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}.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(: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(:placeholder-shown)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:placeholder-shown)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:placeholder-shown).is-focus,.fd-search-field__input:not(:placeholder-shown):focus{--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none;z-index:5}.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{--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Border_Color:transparent;--fdSearchField_Box_Shadow:none;outline:var(--fdSearchField_Outline);outline-offset:var(--fdSearchField_Outline_Offset);z-index:5}.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{-webkit-box-sizing:border-box;border:0;border-radius:var(--fdSearchField_Border_Radius);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:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;position:absolute;width:100%}.fd-search-field__underline:after,.fd-search-field__underline:before{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{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;right:var(--fdSearchField_Actions_Offset);z-index:10}.fd-search-field__actions:after,.fd-search-field__actions:before{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{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSearchField_Action_Container_Size);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;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);padding:0;width:var(--fdSearchField_Action_Container_Size)}.fd-search-field__action-container:after,.fd-search-field__action-container:before{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"], 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]", 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: "16.2.7", ngImport: i0, type: SearchFieldComponent, decorators: [{
|
|
54
54
|
type: Component,
|
|
55
|
-
args: [{ selector: 'fdb-search-field', standalone: true, hostDirectives: [CvaDirective], providers: [CvaControl], imports: [IconComponent, NgIf, 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: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-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);-webkit-box-sizing:border-box;align-items:center;border:0;border:.0625rem solid var(--fdSearchField_Border_Color);border-radius:var(--fdSearchField_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSearchField_Height);line-height:var(--sapContent_LineHeight);margin:0;max-height:var(--fdSearchField_Height);min-height:var(--fdSearchField_Height);padding:0;position:relative;width:16rem}.fd-search-field:after,.fd-search-field:before{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]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:flex;font-size:1rem;justify-content:center}.fd-search-field__input{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--fdSearchField_Box_Shadow);background:var(--fdSearchField_Background);border:0;border-radius:var(--fdSearchField_Border_Radius);box-shadow:var(--fdSearchField_Box_Shadow);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:var(--sapContent_LineHeight);margin:0;max-height:var(--fdSearchField_Height_Border);min-height:var(--fdSearchField_Height_Border);padding:0;padding:var(--fdSearchField_Padding) var(--fdSearchField_Padding_Right) var(--fdSearchField_Padding) var(--fdSearchField_Padding_Left);width:16rem;z-index:1}.fd-search-field__input:after,.fd-search-field__input:before{box-sizing:inherit;font-size:inherit}.fd-search-field__input[dir=rtl],[dir=rtl] .fd-search-field__input{padding-left:var(--fdSearchField_Padding_Right);padding-right:var(--fdSearchField_Padding_Left)}.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}.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(: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(:placeholder-shown)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:placeholder-shown)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:placeholder-shown).is-focus,.fd-search-field__input:not(:placeholder-shown):focus{--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none;z-index:5}.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{--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Border_Color:transparent;--fdSearchField_Box_Shadow:none;outline:var(--fdSearchField_Outline);outline-offset:var(--fdSearchField_Outline_Offset);z-index:5}.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{-webkit-box-sizing:border-box;border:0;border-radius:var(--fdSearchField_Border_Radius);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:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;position:absolute;width:100%}.fd-search-field__underline:after,.fd-search-field__underline:before{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{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;right:var(--fdSearchField_Actions_Offset);z-index:10}.fd-search-field__actions:after,.fd-search-field__actions:before{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{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSearchField_Action_Container_Size);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;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);padding:0;width:var(--fdSearchField_Action_Container_Size)}.fd-search-field__action-container:after,.fd-search-field__action-container:before{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"] }]
|
|
55
|
+
args: [{ selector: 'fdb-search-field', standalone: true, hostDirectives: [CvaDirective], providers: [CvaControl], imports: [IconComponent, NgIf, 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: ["/*!\n * Fundamental Library Styles v0.32.0\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-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);-webkit-box-sizing:border-box;align-items:center;border:0;border:.0625rem solid var(--fdSearchField_Border_Color);border-radius:var(--fdSearchField_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSearchField_Height);line-height:var(--sapContent_LineHeight);margin:0;max-height:var(--fdSearchField_Height);min-height:var(--fdSearchField_Height);padding:0;position:relative;width:16rem}.fd-search-field:after,.fd-search-field:before{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]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:flex;font-size:1rem;justify-content:center}.fd-search-field__input{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--fdSearchField_Box_Shadow);background:var(--fdSearchField_Background);border:0;border-radius:var(--fdSearchField_Border_Radius);box-shadow:var(--fdSearchField_Box_Shadow);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:var(--sapContent_LineHeight);margin:0;max-height:var(--fdSearchField_Height_Border);min-height:var(--fdSearchField_Height_Border);padding:0;padding:var(--fdSearchField_Padding) var(--fdSearchField_Padding_Right) var(--fdSearchField_Padding) var(--fdSearchField_Padding_Left);width:16rem;z-index:1}.fd-search-field__input:after,.fd-search-field__input:before{box-sizing:inherit;font-size:inherit}.fd-search-field__input[dir=rtl],[dir=rtl] .fd-search-field__input{padding-left:var(--fdSearchField_Padding_Right);padding-right:var(--fdSearchField_Padding_Left)}.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}.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(: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(:placeholder-shown)+.fd-search-field__underline{display:none}.fd-search-field__input:not(:placeholder-shown)~.fd-search-field__actions{--fdSearchField_Clear_Button_Display:inline-flex}.fd-search-field__input:not(:placeholder-shown).is-focus,.fd-search-field__input:not(:placeholder-shown):focus{--fdSearchField_Box_Shadow:var(--sapSearchHover_Shadow);outline:none;z-index:5}.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{--fdSearchField_Background:var(--fdSearchField_Background_Focus);--fdSearchField_Border_Color:transparent;--fdSearchField_Box_Shadow:none;outline:var(--fdSearchField_Outline);outline-offset:var(--fdSearchField_Outline_Offset);z-index:5}.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{-webkit-box-sizing:border-box;border:0;border-radius:var(--fdSearchField_Border_Radius);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:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;position:absolute;width:100%}.fd-search-field__underline:after,.fd-search-field__underline:before{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{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:absolute;right:var(--fdSearchField_Actions_Offset);z-index:10}.fd-search-field__actions:after,.fd-search-field__actions:before{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{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdSearchField_Action_Container_Size);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;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);padding:0;width:var(--fdSearchField_Action_Container_Size)}.fd-search-field__action-container:after,.fd-search-field__action-container:before{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"] }]
|
|
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 { NgIf } from '@angular/common';\nimport {\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 standalone: true,\n hostDirectives: [CvaDirective],\n providers: [CvaControl],\n imports: [IconComponent, NgIf, 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 @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":";;;;;;;;;;;;;;MAkCa,oBAAoB,CAAA;AAVjC,IAAA,WAAA,GAAA;;AAec,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAU,CAAC;;AAO9C,QAAA,IAAA,CAAA,UAAU,GAA4B,MAAM,CAAC,UAAU,CAAC,CAAC;AAKzD;;AAEa;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;;AAGhC,QAAA,IAAA,CAAA,WAAW,GAAuB,MAAM,CAAC,UAAU,CAAC,CAAC;;AAGrD,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AA2B5C,KAAA;;IAxBG,KAAK,GAAA;AACD,QAAA,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,KAAK,EAAE,CAAC;KACjD;;IAED,eAAe,GAAA;AACX,QAAA,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,CAAC;AACnC,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,CACvC;AACA,aAAA,SAAS,EAAE,CAAC;KACpB;;AAGS,IAAA,WAAW,CAAC,MAAc,EAAA;AAChC,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;KACnD;;IAGS,OAAO,GAAA;QACb,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACjC;8GApDQ,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;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,mMC9B3B,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 { NgIf } from '@angular/common';\nimport {\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 standalone: true,\n hostDirectives: [CvaDirective],\n providers: [CvaControl],\n imports: [IconComponent, NgIf, 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 @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":";;;;;;;;;;;;;;MAkCa,oBAAoB,CAAA;AAVjC,IAAA,WAAA,GAAA;;AAec,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAU,CAAC;;AAO9C,QAAA,IAAA,CAAA,UAAU,GAA4B,MAAM,CAAC,UAAU,CAAC,CAAC;AAKzD;;AAEa;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;;AAGhC,QAAA,IAAA,CAAA,WAAW,GAAuB,MAAM,CAAC,UAAU,CAAC,CAAC;;AAGrD,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AA2B5C,KAAA;;IAxBG,KAAK,GAAA;AACD,QAAA,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,KAAK,EAAE,CAAC;KACjD;;IAED,eAAe,GAAA;AACX,QAAA,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,CAAC;AACnC,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,CACvC;AACA,aAAA,SAAS,EAAE,CAAC;KACpB;;AAGS,IAAA,WAAW,CAAC,MAAc,EAAA;AAChC,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;KACnD;;IAGS,OAAO,GAAA;QACb,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACjC;8GApDQ,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;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,mMC9B3B,yqDAuCA,EAAA,MAAA,EAAA,CAAA,0sRAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDRc,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,EAAQ,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,wHAAE,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,EAAA;;2FAG1F,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAVhC,SAAS;+BACI,kBAAkB,EAAA,UAAA,EAGhB,IAAI,EAAA,cAAA,EACA,CAAC,YAAY,CAAC,EAAA,SAAA,EACnB,CAAC,UAAU,CAAC,EAAA,OAAA,EACd,CAAC,aAAa,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,eAAe,EAAE,qBAAqB,CAAC,EAAA,aAAA,EACrF,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,yqDAAA,EAAA,MAAA,EAAA,CAAA,0sRAAA,CAAA,EAAA,CAAA;8BAI5B,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBAGI,MAAM,EAAA,CAAA;sBAAf,MAAM;gBAIG,iBAAiB,EAAA,CAAA;sBAD1B,SAAS;uBAAC,kBAAkB,CAAA;;;AE1CjC;;AAEG;;;;"}
|
|
@@ -486,7 +486,7 @@ class ToolHeaderComponent extends ToolHeaderComponentClass {
|
|
|
486
486
|
provide: ToolHeaderComponentClass,
|
|
487
487
|
useExisting: ToolHeaderComponent
|
|
488
488
|
}
|
|
489
|
-
], 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 <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().backButtonVisible\">\n <button fd-button fdbToolHeaderButton glyph=\"slim-arrow-left\" (click)=\"searchFieldExpanded.set(false)\"></button>\n </div>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().menuButtonVisible && showMenuButton\">\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 <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().logoVisible\">\n <ng-container *ngIf=\"_toolHeaderLogoDirective; else defaultLogo\">\n <ng-content select=\"[fdbToolHeaderLogo]\"></ng-content>\n </ng-container>\n <ng-template #defaultLogo>\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 </ng-template>\n </div>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().productNameVisible\">\n <h1 class=\"fd-tool-header__product-name\">\n {{ productName }}\n </h1>\n </div>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().secondTitleVisible && secondTitle\">\n <div class=\"fd-tool-header__second-title\">\n {{ secondTitle }}\n </div>\n </div>\n</div>\n\n<div fdbToolHeaderGroup center *ngIf=\"fdbToolHeaderState().searchFieldVisible\">\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 <ng-container *ngIf=\"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 </ng-container>\n <ng-container *ngIf=\"fdbToolHeaderState().providedActionsVisible\">\n <ng-container *ngFor=\"let action of _contentActions\">\n <ng-container *ngIf=\"action.isSeparator ? fdbToolHeaderState().separatorsBetweenActionsVisible : true\">\n <ng-template [fdOverflowItemRef]=\"action\" let-hidden let-injector=\"injector\">\n <ng-container *ngIf=\"hidden === false; else actionTemplate\">\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"!!action.forceVisibility\">\n <ng-template [ngTemplateOutlet]=\"actionTemplate\"></ng-template>\n </div>\n </ng-container>\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 </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- Custom overflow button used as overflow item START -->\n <ng-container *ngIf=\"_delayedHiddenActions$ | async as hiddenActions\">\n <ng-container *ngIf=\"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 <ng-container *ngFor=\"let item of hiddenActions; trackBy: _trackHiddenAction\">\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 </ng-container>\n </fdb-navigation-menu>\n </fdb-navigation-menu-popover>\n </ng-template>\n </ng-container>\n </ng-container>\n <!-- Custom overflow button used as overflow item END -->\n\n <ng-container *ngIf=\"fdbToolHeaderState().userAvatarVisible && _toolHeaderUser\">\n <ng-container *ngIf=\"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 </ng-container>\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch\">\n <ng-container *ngIf=\"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 </ng-container>\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 </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\n</fd-overflow-layout>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tool-header{--fdToolHeader_Min_Height:var(--sapToolHeader_Min_Height_Cozy);--fdToolHeader_Padding_Left:1.5rem;--fdToolHeader_Padding_Right:1.25rem;-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapToolHeader_Shadow1);background:var(--sapShellColor);border:0;border:.0625rem solid var(--fdToolHeader_Border_Color);border-radius:var(--sapToolHeader_Border_Radius);box-shadow:var(--sapToolHeader_Shadow1);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.75rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdToolHeader_Min_Height);padding:0;padding:var(--sapToolHeader_Paddings_Y) var(--fdToolHeader_Padding_Right) var(--sapToolHeader_Paddings_Y) var(--fdToolHeader_Padding_Left);width:100%}.fd-tool-header:after,.fd-tool-header:before{box-sizing:inherit;font-size:inherit}.fd-tool-header[dir=rtl],[dir=rtl] .fd-tool-header{padding-left:var(--fdToolHeader_Padding_Right);padding-right:var(--fdToolHeader_Padding_Left)}.fd-tool-header__group{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-flex:1;-ms-flex:1;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.375rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tool-header__group:after,.fd-tool-header__group:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__group--center,.fd-tool-header__group--menu{flex:0}.fd-tool-header__group--actions{justify-content:flex-end}.fd-tool-header__group--hidden{display:none}.fd-tool-header__element{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tool-header__element:after,.fd-tool-header__element:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__element--hidden{display:none}.fd-tool-header__logo{-webkit-box-sizing:border-box;background-repeat:no-repeat;background-size:contain;border:0;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:var(--sapContent_LineHeight);margin:0;padding:0;width:auto}.fd-tool-header__logo:after,.fd-tool-header__logo:before{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{-webkit-box-sizing:border-box;background:transparent;border:0;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:var(--sapContent_LineHeight);margin:0;max-height:.75rem;max-width:.75rem;min-height:.75rem;min-width:.75rem;padding:0;width:.75rem}.fd-tool-header__separator:after,.fd-tool-header__separator:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__product-name{-webkit-box-sizing:border-box;border:0;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:var(--sapContent_LineHeight);line-height:1.625rem;margin:0;padding:0;vertical-align:baseline}.fd-tool-header__product-name:after,.fd-tool-header__product-name:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__second-title{-webkit-box-sizing:border-box;border:0;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:var(--sapContent_LineHeight);margin:0;margin-top:var(--sapToolHeader_Second_Title_Offset);padding:0;vertical-align:baseline}.fd-tool-header__second-title:after,.fd-tool-header__second-title:before{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"], dependencies: [{ kind: "directive", type: ToolHeaderGroupDirective, selector: "[fdbToolHeaderGroup]", inputs: ["center", "actions"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolHeaderElementDirective, selector: "[fdbToolHeaderElement]" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[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", "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 }); }
|
|
489
|
+
], 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 <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().backButtonVisible\">\n <button fd-button fdbToolHeaderButton glyph=\"slim-arrow-left\" (click)=\"searchFieldExpanded.set(false)\"></button>\n </div>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().menuButtonVisible && showMenuButton\">\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 <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().logoVisible\">\n <ng-container *ngIf=\"_toolHeaderLogoDirective; else defaultLogo\">\n <ng-content select=\"[fdbToolHeaderLogo]\"></ng-content>\n </ng-container>\n <ng-template #defaultLogo>\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 </ng-template>\n </div>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().productNameVisible\">\n <h1 class=\"fd-tool-header__product-name\">\n {{ productName }}\n </h1>\n </div>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().secondTitleVisible && secondTitle\">\n <div class=\"fd-tool-header__second-title\">\n {{ secondTitle }}\n </div>\n </div>\n</div>\n\n<div fdbToolHeaderGroup center *ngIf=\"fdbToolHeaderState().searchFieldVisible\">\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 <ng-container *ngIf=\"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 </ng-container>\n <ng-container *ngIf=\"fdbToolHeaderState().providedActionsVisible\">\n <ng-container *ngFor=\"let action of _contentActions\">\n <ng-container *ngIf=\"action.isSeparator ? fdbToolHeaderState().separatorsBetweenActionsVisible : true\">\n <ng-template [fdOverflowItemRef]=\"action\" let-hidden let-injector=\"injector\">\n <ng-container *ngIf=\"hidden === false; else actionTemplate\">\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"!!action.forceVisibility\">\n <ng-template [ngTemplateOutlet]=\"actionTemplate\"></ng-template>\n </div>\n </ng-container>\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 </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- Custom overflow button used as overflow item START -->\n <ng-container *ngIf=\"_delayedHiddenActions$ | async as hiddenActions\">\n <ng-container *ngIf=\"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 <ng-container *ngFor=\"let item of hiddenActions; trackBy: _trackHiddenAction\">\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 </ng-container>\n </fdb-navigation-menu>\n </fdb-navigation-menu-popover>\n </ng-template>\n </ng-container>\n </ng-container>\n <!-- Custom overflow button used as overflow item END -->\n\n <ng-container *ngIf=\"fdbToolHeaderState().userAvatarVisible && _toolHeaderUser\">\n <ng-container *ngIf=\"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 </ng-container>\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch\">\n <ng-container *ngIf=\"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 </ng-container>\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 </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\n</fd-overflow-layout>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tool-header{--fdToolHeader_Min_Height:var(--sapToolHeader_Min_Height_Cozy);--fdToolHeader_Padding_Left:1.5rem;--fdToolHeader_Padding_Right:1.25rem;-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapToolHeader_Shadow1);background:var(--sapShellColor);border:0;border:.0625rem solid var(--fdToolHeader_Border_Color);border-radius:var(--sapToolHeader_Border_Radius);box-shadow:var(--sapToolHeader_Shadow1);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.75rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdToolHeader_Min_Height);padding:0;padding:var(--sapToolHeader_Paddings_Y) var(--fdToolHeader_Padding_Right) var(--sapToolHeader_Paddings_Y) var(--fdToolHeader_Padding_Left);width:100%}.fd-tool-header:after,.fd-tool-header:before{box-sizing:inherit;font-size:inherit}.fd-tool-header[dir=rtl],[dir=rtl] .fd-tool-header{padding-left:var(--fdToolHeader_Padding_Right);padding-right:var(--fdToolHeader_Padding_Left)}.fd-tool-header__group{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-flex:1;-ms-flex:1;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.375rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tool-header__group:after,.fd-tool-header__group:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__group--center,.fd-tool-header__group--menu{flex:0}.fd-tool-header__group--actions{justify-content:flex-end}.fd-tool-header__group--hidden{display:none}.fd-tool-header__element{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tool-header__element:after,.fd-tool-header__element:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__element--hidden{display:none}.fd-tool-header__logo{-webkit-box-sizing:border-box;background-repeat:no-repeat;background-size:contain;border:0;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:var(--sapContent_LineHeight);margin:0;padding:0;width:auto}.fd-tool-header__logo:after,.fd-tool-header__logo:before{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{-webkit-box-sizing:border-box;background:transparent;border:0;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:var(--sapContent_LineHeight);margin:0;max-height:.75rem;max-width:.75rem;min-height:.75rem;min-width:.75rem;padding:0;width:.75rem}.fd-tool-header__separator:after,.fd-tool-header__separator:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__product-name{-webkit-box-sizing:border-box;border:0;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:var(--sapContent_LineHeight);line-height:1.625rem;margin:0;padding:0;vertical-align:baseline}.fd-tool-header__product-name:after,.fd-tool-header__product-name:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__second-title{-webkit-box-sizing:border-box;border:0;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:var(--sapContent_LineHeight);margin:0;margin-top:var(--sapToolHeader_Second_Title_Offset);padding:0;vertical-align:baseline}.fd-tool-header__second-title:after,.fd-tool-header__second-title:before{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"], dependencies: [{ kind: "directive", type: ToolHeaderGroupDirective, selector: "[fdbToolHeaderGroup]", inputs: ["center", "actions"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolHeaderElementDirective, selector: "[fdbToolHeaderElement]" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[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", "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 }); }
|
|
490
490
|
}
|
|
491
491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderComponent, decorators: [{
|
|
492
492
|
type: Component,
|
|
@@ -533,7 +533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
|
|
|
533
533
|
provide: ToolHeaderComponentClass,
|
|
534
534
|
useExisting: ToolHeaderComponent
|
|
535
535
|
}
|
|
536
|
-
], template: "<div fdbToolHeaderGroup [class.fd-tool-header--menu]=\"showMenuButton\">\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().backButtonVisible\">\n <button fd-button fdbToolHeaderButton glyph=\"slim-arrow-left\" (click)=\"searchFieldExpanded.set(false)\"></button>\n </div>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().menuButtonVisible && showMenuButton\">\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 <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().logoVisible\">\n <ng-container *ngIf=\"_toolHeaderLogoDirective; else defaultLogo\">\n <ng-content select=\"[fdbToolHeaderLogo]\"></ng-content>\n </ng-container>\n <ng-template #defaultLogo>\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 </ng-template>\n </div>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().productNameVisible\">\n <h1 class=\"fd-tool-header__product-name\">\n {{ productName }}\n </h1>\n </div>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().secondTitleVisible && secondTitle\">\n <div class=\"fd-tool-header__second-title\">\n {{ secondTitle }}\n </div>\n </div>\n</div>\n\n<div fdbToolHeaderGroup center *ngIf=\"fdbToolHeaderState().searchFieldVisible\">\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 <ng-container *ngIf=\"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 </ng-container>\n <ng-container *ngIf=\"fdbToolHeaderState().providedActionsVisible\">\n <ng-container *ngFor=\"let action of _contentActions\">\n <ng-container *ngIf=\"action.isSeparator ? fdbToolHeaderState().separatorsBetweenActionsVisible : true\">\n <ng-template [fdOverflowItemRef]=\"action\" let-hidden let-injector=\"injector\">\n <ng-container *ngIf=\"hidden === false; else actionTemplate\">\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"!!action.forceVisibility\">\n <ng-template [ngTemplateOutlet]=\"actionTemplate\"></ng-template>\n </div>\n </ng-container>\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 </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- Custom overflow button used as overflow item START -->\n <ng-container *ngIf=\"_delayedHiddenActions$ | async as hiddenActions\">\n <ng-container *ngIf=\"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 <ng-container *ngFor=\"let item of hiddenActions; trackBy: _trackHiddenAction\">\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 </ng-container>\n </fdb-navigation-menu>\n </fdb-navigation-menu-popover>\n </ng-template>\n </ng-container>\n </ng-container>\n <!-- Custom overflow button used as overflow item END -->\n\n <ng-container *ngIf=\"fdbToolHeaderState().userAvatarVisible && _toolHeaderUser\">\n <ng-container *ngIf=\"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 </ng-container>\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch\">\n <ng-container *ngIf=\"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 </ng-container>\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 </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\n</fd-overflow-layout>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0-rc.7\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tool-header{--fdToolHeader_Min_Height:var(--sapToolHeader_Min_Height_Cozy);--fdToolHeader_Padding_Left:1.5rem;--fdToolHeader_Padding_Right:1.25rem;-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapToolHeader_Shadow1);background:var(--sapShellColor);border:0;border:.0625rem solid var(--fdToolHeader_Border_Color);border-radius:var(--sapToolHeader_Border_Radius);box-shadow:var(--sapToolHeader_Shadow1);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.75rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdToolHeader_Min_Height);padding:0;padding:var(--sapToolHeader_Paddings_Y) var(--fdToolHeader_Padding_Right) var(--sapToolHeader_Paddings_Y) var(--fdToolHeader_Padding_Left);width:100%}.fd-tool-header:after,.fd-tool-header:before{box-sizing:inherit;font-size:inherit}.fd-tool-header[dir=rtl],[dir=rtl] .fd-tool-header{padding-left:var(--fdToolHeader_Padding_Right);padding-right:var(--fdToolHeader_Padding_Left)}.fd-tool-header__group{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-flex:1;-ms-flex:1;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.375rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tool-header__group:after,.fd-tool-header__group:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__group--center,.fd-tool-header__group--menu{flex:0}.fd-tool-header__group--actions{justify-content:flex-end}.fd-tool-header__group--hidden{display:none}.fd-tool-header__element{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tool-header__element:after,.fd-tool-header__element:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__element--hidden{display:none}.fd-tool-header__logo{-webkit-box-sizing:border-box;background-repeat:no-repeat;background-size:contain;border:0;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:var(--sapContent_LineHeight);margin:0;padding:0;width:auto}.fd-tool-header__logo:after,.fd-tool-header__logo:before{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{-webkit-box-sizing:border-box;background:transparent;border:0;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:var(--sapContent_LineHeight);margin:0;max-height:.75rem;max-width:.75rem;min-height:.75rem;min-width:.75rem;padding:0;width:.75rem}.fd-tool-header__separator:after,.fd-tool-header__separator:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__product-name{-webkit-box-sizing:border-box;border:0;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:var(--sapContent_LineHeight);line-height:1.625rem;margin:0;padding:0;vertical-align:baseline}.fd-tool-header__product-name:after,.fd-tool-header__product-name:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__second-title{-webkit-box-sizing:border-box;border:0;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:var(--sapContent_LineHeight);margin:0;margin-top:var(--sapToolHeader_Second_Title_Offset);padding:0;vertical-align:baseline}.fd-tool-header__second-title:after,.fd-tool-header__second-title:before{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"] }]
|
|
536
|
+
], template: "<div fdbToolHeaderGroup [class.fd-tool-header--menu]=\"showMenuButton\">\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().backButtonVisible\">\n <button fd-button fdbToolHeaderButton glyph=\"slim-arrow-left\" (click)=\"searchFieldExpanded.set(false)\"></button>\n </div>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().menuButtonVisible && showMenuButton\">\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 <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().logoVisible\">\n <ng-container *ngIf=\"_toolHeaderLogoDirective; else defaultLogo\">\n <ng-content select=\"[fdbToolHeaderLogo]\"></ng-content>\n </ng-container>\n <ng-template #defaultLogo>\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 </ng-template>\n </div>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().productNameVisible\">\n <h1 class=\"fd-tool-header__product-name\">\n {{ productName }}\n </h1>\n </div>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().secondTitleVisible && secondTitle\">\n <div class=\"fd-tool-header__second-title\">\n {{ secondTitle }}\n </div>\n </div>\n</div>\n\n<div fdbToolHeaderGroup center *ngIf=\"fdbToolHeaderState().searchFieldVisible\">\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 <ng-container *ngIf=\"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 </ng-container>\n <ng-container *ngIf=\"fdbToolHeaderState().providedActionsVisible\">\n <ng-container *ngFor=\"let action of _contentActions\">\n <ng-container *ngIf=\"action.isSeparator ? fdbToolHeaderState().separatorsBetweenActionsVisible : true\">\n <ng-template [fdOverflowItemRef]=\"action\" let-hidden let-injector=\"injector\">\n <ng-container *ngIf=\"hidden === false; else actionTemplate\">\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"!!action.forceVisibility\">\n <ng-template [ngTemplateOutlet]=\"actionTemplate\"></ng-template>\n </div>\n </ng-container>\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 </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- Custom overflow button used as overflow item START -->\n <ng-container *ngIf=\"_delayedHiddenActions$ | async as hiddenActions\">\n <ng-container *ngIf=\"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 <ng-container *ngFor=\"let item of hiddenActions; trackBy: _trackHiddenAction\">\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 </ng-container>\n </fdb-navigation-menu>\n </fdb-navigation-menu-popover>\n </ng-template>\n </ng-container>\n </ng-container>\n <!-- Custom overflow button used as overflow item END -->\n\n <ng-container *ngIf=\"fdbToolHeaderState().userAvatarVisible && _toolHeaderUser\">\n <ng-container *ngIf=\"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 </ng-container>\n <ng-template fdOverflowItemRef>\n <div fdbToolHeaderElement fdOverflowLayoutItem [forceVisibility]=\"true\">\n <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch\">\n <ng-container *ngIf=\"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 </ng-container>\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 </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\n</fd-overflow-layout>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tool-header{--fdToolHeader_Min_Height:var(--sapToolHeader_Min_Height_Cozy);--fdToolHeader_Padding_Left:1.5rem;--fdToolHeader_Padding_Right:1.25rem;-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapToolHeader_Shadow1);background:var(--sapShellColor);border:0;border:.0625rem solid var(--fdToolHeader_Border_Color);border-radius:var(--sapToolHeader_Border_Radius);box-shadow:var(--sapToolHeader_Shadow1);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.75rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--fdToolHeader_Min_Height);padding:0;padding:var(--sapToolHeader_Paddings_Y) var(--fdToolHeader_Padding_Right) var(--sapToolHeader_Paddings_Y) var(--fdToolHeader_Padding_Left);width:100%}.fd-tool-header:after,.fd-tool-header:before{box-sizing:inherit;font-size:inherit}.fd-tool-header[dir=rtl],[dir=rtl] .fd-tool-header{padding-left:var(--fdToolHeader_Padding_Right);padding-right:var(--fdToolHeader_Padding_Left)}.fd-tool-header__group{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-flex:1;-ms-flex:1;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.375rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tool-header__group:after,.fd-tool-header__group:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__group--center,.fd-tool-header__group--menu{flex:0}.fd-tool-header__group--actions{justify-content:flex-end}.fd-tool-header__group--hidden{display:none}.fd-tool-header__element{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tool-header__element:after,.fd-tool-header__element:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__element--hidden{display:none}.fd-tool-header__logo{-webkit-box-sizing:border-box;background-repeat:no-repeat;background-size:contain;border:0;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:var(--sapContent_LineHeight);margin:0;padding:0;width:auto}.fd-tool-header__logo:after,.fd-tool-header__logo:before{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{-webkit-box-sizing:border-box;background:transparent;border:0;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:var(--sapContent_LineHeight);margin:0;max-height:.75rem;max-width:.75rem;min-height:.75rem;min-width:.75rem;padding:0;width:.75rem}.fd-tool-header__separator:after,.fd-tool-header__separator:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__product-name{-webkit-box-sizing:border-box;border:0;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:var(--sapContent_LineHeight);line-height:1.625rem;margin:0;padding:0;vertical-align:baseline}.fd-tool-header__product-name:after,.fd-tool-header__product-name:before{box-sizing:inherit;font-size:inherit}.fd-tool-header__second-title{-webkit-box-sizing:border-box;border:0;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:var(--sapContent_LineHeight);margin:0;margin-top:var(--sapToolHeader_Second_Title_Offset);padding:0;vertical-align:baseline}.fd-tool-header__second-title:after,.fd-tool-header__second-title:before{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"] }]
|
|
537
537
|
}], propDecorators: { productName: [{
|
|
538
538
|
type: Input,
|
|
539
539
|
args: [{ required: true }]
|