@fundamental-ngx/btp 0.46.2-rc.2 → 0.46.2-rc.21
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-content-start.component.mjs +1 -2
- package/esm2022/navigation/navigation-link.component.mjs +2 -2
- package/esm2022/navigation/navigation-list/navigation-list-item.component.mjs +1 -1
- package/esm2022/navigation/navigation.component.mjs +2 -2
- package/esm2022/navigation-menu/lib/navigation-menu-item.component.mjs +2 -2
- 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 +2 -2
- package/esm2022/tool-layout/tool-layout.component.mjs +2 -2
- package/fesm2022/fundamental-ngx-btp-navigation-menu.mjs +3 -3
- package/fesm2022/fundamental-ngx-btp-navigation-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-btp-navigation.mjs +4 -5
- 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-layout.mjs +2 -2
- package/fesm2022/fundamental-ngx-btp-tool-layout.mjs.map +1 -1
- package/fundamental-ngx-btp-v0.46.2-rc.21.tgz +0 -0
- package/package.json +3 -3
- package/fundamental-ngx-btp-v0.46.2-rc.2.tgz +0 -0
|
@@ -47,11 +47,11 @@ class SearchFieldComponent {
|
|
|
47
47
|
this.search.emit(this._value);
|
|
48
48
|
}
|
|
49
49
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SearchFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
50
|
-
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 class=\"fd-button--nested\"\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 class=\"fd-button--nested\"\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.30.2\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", "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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
50
|
+
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 class=\"fd-button--nested\"\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 class=\"fd-button--nested\"\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.31.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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
51
51
|
}
|
|
52
52
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SearchFieldComponent, decorators: [{
|
|
53
53
|
type: Component,
|
|
54
|
-
args: [{ selector: 'fdb-search-field', standalone: true, hostDirectives: [CvaDirective], providers: [CvaControl], imports: [IconComponent, NgIf, FormsModule, FdTranslatePipe, ButtonComponent], 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 class=\"fd-button--nested\"\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 class=\"fd-button--nested\"\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.30.2\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"] }]
|
|
54
|
+
args: [{ selector: 'fdb-search-field', standalone: true, hostDirectives: [CvaDirective], providers: [CvaControl], imports: [IconComponent, NgIf, FormsModule, FdTranslatePipe, ButtonComponent], 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 class=\"fd-button--nested\"\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 class=\"fd-button--nested\"\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.31.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"] }]
|
|
55
55
|
}], propDecorators: { placeholder: [{
|
|
56
56
|
type: Input
|
|
57
57
|
}], 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 { 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],\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 class=\"fd-button--nested\"\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 class=\"fd-button--nested\"\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":";;;;;;;;;;;;;MAiCa,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,EC7B3B,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,mBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,YAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,isDAuCA,EDTc,MAAA,EAAA,CAAA,0sRAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,aAAa,EAAQ,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,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,oDAAE,eAAe,EAAA,QAAA,EAAA,iCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FAGnE,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAVhC,SAAS;+BACI,kBAAkB,EAAA,UAAA,EAGhB,IAAI,EAAA,cAAA,EACA,CAAC,YAAY,CAAC,EACnB,SAAA,EAAA,CAAC,UAAU,CAAC,EACd,OAAA,EAAA,CAAC,aAAa,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,eAAe,CAAC,EAAA,aAAA,EAC9D,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,isDAAA,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;;;AEzCjC;;AAEG;;;;"}
|
|
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 { 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],\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 class=\"fd-button--nested\"\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 class=\"fd-button--nested\"\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":"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"}
|
|
@@ -533,7 +533,7 @@ class ToolHeaderComponent extends ToolHeaderComponentClass {
|
|
|
533
533
|
provide: ToolHeaderComponentClass,
|
|
534
534
|
useExisting: ToolHeaderComponent
|
|
535
535
|
}
|
|
536
|
-
], queries: [{ propertyName: "_toolHeaderActionsDirective", first: true, predicate: ToolHeaderActionsDirective, descendants: true }, { 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$1, descendants: true }], 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<div fdbToolHeaderGroup actions>\n <fd-overflow-layout fdbToolHeaderElement [style.justify-content]=\"'end'\">\n <ng-container *ngIf=\"fdbToolHeaderState().searchFieldToggleActionVisible\">\n <div fdbToolHeaderElement *fdOverflowItemRef=\"let hidden\" [forceVisibility]=\"true\" fdOverflowLayoutItem>\n <button\n fd-button\n fdbToolHeaderButton\n glyph=\"search\"\n (click)=\"$event.stopPropagation(); expandSearchField()\"\n ></button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"fdbToolHeaderState().providedActionsVisible\">\n <ng-container *ngFor=\"let action of _toolHeaderActionsDirective?._actions()\">\n <div\n fdbToolHeaderElement\n *fdOverflowItemRef=\"let hidden\"\n [forceVisibility]=\"!!action.forceVisibility\"\n fdOverflowLayoutItem\n >\n <ng-template\n [ngIf]=\"!!action.templateRef\"\n [ngIfThen]=\"$any(action.templateRef)\"\n [ngIfElse]=\"defaultActionButtonTemplate\"\n ></ng-template>\n <ng-template #defaultActionButtonTemplate>\n <button\n fd-button\n fdbToolHeaderButton\n [glyph]=\"action.glyph\"\n (click)=\"action.clickCallback()\"\n [ariaLabel]=\"action.label\"\n >\n <span class=\"fd-button__badge\" *ngIf=\"action.hasBadge\"></span>\n </button>\n </ng-template>\n <div\n class=\"fd-tool-header__separator\"\n *ngIf=\"action.hasSeparator && fdbToolHeaderState().separatorsBetweenActionsVisible\"\n ></div>\n </div>\n </ng-container>\n </ng-container>\n\n <fdb-navigation-menu-popover *fdOverflowExpand=\"let overflowItems\" fdbToolHeaderElement>\n <button *fdbNavigationMenuPopoverControl fd-button fdbToolHeaderButton glyph=\"overflow\"></button>\n <ul *fdPopoverBody fdkFocusableList [wrap]=\"true\" fdb-navigation-menu>\n <ng-container *ngFor=\"let item of overflowItems\">\n <ng-container *ngIf=\"_toolHeaderActionsDirective?._actions() as actions\">\n <li\n *ngIf=\"\n fdbToolHeaderState().searchFieldToggleActionVisible\n ? actions[item.globalIndex - 1]\n : actions[item.globalIndex] as action\n \"\n fdb-navigation-menu-item\n fdkFocusableItem\n [glyph]=\"action.glyph\"\n (click)=\"action.clickCallback()\"\n [label]=\"action.label\"\n ></li>\n </ng-container>\n </ng-container>\n </ul>\n </fdb-navigation-menu-popover>\n </fd-overflow-layout>\n <ng-container *ngIf=\"fdbToolHeaderState().userAvatarVisible && _toolHeaderUser\">\n <div fdbToolHeaderElement>\n <div class=\"fd-tool-header__separator\"></div>\n <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n </div>\n </ng-container>\n <ng-container *ngIf=\"fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch\">\n <div fdbToolHeaderElement>\n <div class=\"fd-tool-header__separator\"></div>\n <ng-content select=\"fdb-tool-header-product-switch, fd-product-switch\"></ng-content>\n </div>\n </ng-container>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().voiceInputVisible\">\n <button\n fd-button\n fdbToolHeaderButton\n glyph=\"microphone\"\n [ariaLabel]=\"'Search with voice'\"\n (click)=\"microphoneClick.emit()\"\n ></button>\n </div>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.30.2\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-popover__body.fdb-tool-header-actions-overflow-popover-body{--fdPopover_Offset: .3875rem;width:auto;height:auto;padding:.5rem;background:var(--sapGroup_ContentBackground);border:none;border-radius:.5rem;box-shadow:var(--sapMenu_Shadow1)}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu{--fdMenu_Item_Spacing_Left: 0}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link{--fdMenu_Link_Height: 2rem;border-radius:.375rem}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link:focus:after{display:none}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:.375rem;inset:.125rem;content:\"\";pointer-events:none;position:absolute}\n"], dependencies: [{ kind: "directive", type: ToolHeaderGroupDirective, selector: "[fdbToolHeaderGroup]", inputs: ["center", "actions"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "navigationTrigger", "showMorePosition", "reverseHiddenItems", "enableKeyboardNavigation", "moreItemsButtonText"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["forceVisibility"], outputs: ["hiddenChange"] }, { kind: "directive", type: OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { kind: "directive", type: OverflowExpandDirective, selector: "[fdOverflowExpand]", inputs: ["fdOverflowExpandItems"] }, { kind: "directive", type: PopoverBodyDirective, selector: "[fdPopoverBody]" }, { 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: ["hasBadge"] }, { 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: "component", type: NavigationMenuItemComponent, selector: "fdb-navigation-menu-item, li[fdb-navigation-menu-item]", inputs: ["glyph", "label"] }, { kind: "directive", type: FocusableListDirective, selector: "[fdkFocusableList]", inputs: ["focusable", "navigationDirection", "contentDirection", "wrap", "listFocusedEventAnnouncer"], outputs: ["itemFocused"], exportAs: ["fdkFocusableList"] }, { kind: "directive", type: FocusableItemDirective, selector: "[fdkFocusableItem]", inputs: ["fdkFocusableItem", "cellFocusedEventAnnouncer"], outputs: ["cellFocused"] }, { kind: "component", type: NavigationMenuPopoverComponent, selector: "fdb-navigation-menu-popover" }, { kind: "directive", type: NavigationMenuPopoverControlDirective, selector: "[fdbNavigationMenuPopoverControl]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
536
|
+
], queries: [{ propertyName: "_toolHeaderActionsDirective", first: true, predicate: ToolHeaderActionsDirective, descendants: true }, { 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$1, descendants: true }], 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<div fdbToolHeaderGroup actions>\n <fd-overflow-layout fdbToolHeaderElement [style.justify-content]=\"'end'\">\n <ng-container *ngIf=\"fdbToolHeaderState().searchFieldToggleActionVisible\">\n <div fdbToolHeaderElement *fdOverflowItemRef=\"let hidden\" [forceVisibility]=\"true\" fdOverflowLayoutItem>\n <button\n fd-button\n fdbToolHeaderButton\n glyph=\"search\"\n (click)=\"$event.stopPropagation(); expandSearchField()\"\n ></button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"fdbToolHeaderState().providedActionsVisible\">\n <ng-container *ngFor=\"let action of _toolHeaderActionsDirective?._actions()\">\n <div\n fdbToolHeaderElement\n *fdOverflowItemRef=\"let hidden\"\n [forceVisibility]=\"!!action.forceVisibility\"\n fdOverflowLayoutItem\n >\n <ng-template\n [ngIf]=\"!!action.templateRef\"\n [ngIfThen]=\"$any(action.templateRef)\"\n [ngIfElse]=\"defaultActionButtonTemplate\"\n ></ng-template>\n <ng-template #defaultActionButtonTemplate>\n <button\n fd-button\n fdbToolHeaderButton\n [glyph]=\"action.glyph\"\n (click)=\"action.clickCallback()\"\n [ariaLabel]=\"action.label\"\n >\n <span class=\"fd-button__badge\" *ngIf=\"action.hasBadge\"></span>\n </button>\n </ng-template>\n <div\n class=\"fd-tool-header__separator\"\n *ngIf=\"action.hasSeparator && fdbToolHeaderState().separatorsBetweenActionsVisible\"\n ></div>\n </div>\n </ng-container>\n </ng-container>\n\n <fdb-navigation-menu-popover *fdOverflowExpand=\"let overflowItems\" fdbToolHeaderElement>\n <button *fdbNavigationMenuPopoverControl fd-button fdbToolHeaderButton glyph=\"overflow\"></button>\n <ul *fdPopoverBody fdkFocusableList [wrap]=\"true\" fdb-navigation-menu>\n <ng-container *ngFor=\"let item of overflowItems\">\n <ng-container *ngIf=\"_toolHeaderActionsDirective?._actions() as actions\">\n <li\n *ngIf=\"\n fdbToolHeaderState().searchFieldToggleActionVisible\n ? actions[item.globalIndex - 1]\n : actions[item.globalIndex] as action\n \"\n fdb-navigation-menu-item\n fdkFocusableItem\n [glyph]=\"action.glyph\"\n (click)=\"action.clickCallback()\"\n [label]=\"action.label\"\n ></li>\n </ng-container>\n </ng-container>\n </ul>\n </fdb-navigation-menu-popover>\n </fd-overflow-layout>\n <ng-container *ngIf=\"fdbToolHeaderState().userAvatarVisible && _toolHeaderUser\">\n <div fdbToolHeaderElement>\n <div class=\"fd-tool-header__separator\"></div>\n <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n </div>\n </ng-container>\n <ng-container *ngIf=\"fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch\">\n <div fdbToolHeaderElement>\n <div class=\"fd-tool-header__separator\"></div>\n <ng-content select=\"fdb-tool-header-product-switch, fd-product-switch\"></ng-content>\n </div>\n </ng-container>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().voiceInputVisible\">\n <button\n fd-button\n fdbToolHeaderButton\n glyph=\"microphone\"\n [ariaLabel]=\"'Search with voice'\"\n (click)=\"microphoneClick.emit()\"\n ></button>\n </div>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.31.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-popover__body.fdb-tool-header-actions-overflow-popover-body{--fdPopover_Offset: .3875rem;width:auto;height:auto;padding:.5rem;background:var(--sapGroup_ContentBackground);border:none;border-radius:.5rem;box-shadow:var(--sapMenu_Shadow1)}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu{--fdMenu_Item_Spacing_Left: 0}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link{--fdMenu_Link_Height: 2rem;border-radius:.375rem}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link:focus:after{display:none}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:.375rem;inset:.125rem;content:\"\";pointer-events:none;position:absolute}\n"], dependencies: [{ kind: "directive", type: ToolHeaderGroupDirective, selector: "[fdbToolHeaderGroup]", inputs: ["center", "actions"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "navigationTrigger", "showMorePosition", "reverseHiddenItems", "enableKeyboardNavigation", "moreItemsButtonText"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["forceVisibility"], outputs: ["hiddenChange"] }, { kind: "directive", type: OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { kind: "directive", type: OverflowExpandDirective, selector: "[fdOverflowExpand]", inputs: ["fdOverflowExpandItems"] }, { kind: "directive", type: PopoverBodyDirective, selector: "[fdPopoverBody]" }, { 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: ["hasBadge"] }, { 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: "component", type: NavigationMenuItemComponent, selector: "fdb-navigation-menu-item, li[fdb-navigation-menu-item]", inputs: ["glyph", "label"] }, { kind: "directive", type: FocusableListDirective, selector: "[fdkFocusableList]", inputs: ["focusable", "navigationDirection", "contentDirection", "wrap", "listFocusedEventAnnouncer"], outputs: ["itemFocused"], exportAs: ["fdkFocusableList"] }, { kind: "directive", type: FocusableItemDirective, selector: "[fdkFocusableItem]", inputs: ["fdkFocusableItem", "cellFocusedEventAnnouncer"], outputs: ["cellFocused"] }, { kind: "component", type: NavigationMenuPopoverComponent, selector: "fdb-navigation-menu-popover" }, { kind: "directive", type: NavigationMenuPopoverControlDirective, selector: "[fdbNavigationMenuPopoverControl]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
537
537
|
}
|
|
538
538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderComponent, decorators: [{
|
|
539
539
|
type: Component,
|
|
@@ -555,7 +555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
|
|
|
555
555
|
provide: ToolHeaderComponentClass,
|
|
556
556
|
useExisting: ToolHeaderComponent
|
|
557
557
|
}
|
|
558
|
-
], 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<div fdbToolHeaderGroup actions>\n <fd-overflow-layout fdbToolHeaderElement [style.justify-content]=\"'end'\">\n <ng-container *ngIf=\"fdbToolHeaderState().searchFieldToggleActionVisible\">\n <div fdbToolHeaderElement *fdOverflowItemRef=\"let hidden\" [forceVisibility]=\"true\" fdOverflowLayoutItem>\n <button\n fd-button\n fdbToolHeaderButton\n glyph=\"search\"\n (click)=\"$event.stopPropagation(); expandSearchField()\"\n ></button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"fdbToolHeaderState().providedActionsVisible\">\n <ng-container *ngFor=\"let action of _toolHeaderActionsDirective?._actions()\">\n <div\n fdbToolHeaderElement\n *fdOverflowItemRef=\"let hidden\"\n [forceVisibility]=\"!!action.forceVisibility\"\n fdOverflowLayoutItem\n >\n <ng-template\n [ngIf]=\"!!action.templateRef\"\n [ngIfThen]=\"$any(action.templateRef)\"\n [ngIfElse]=\"defaultActionButtonTemplate\"\n ></ng-template>\n <ng-template #defaultActionButtonTemplate>\n <button\n fd-button\n fdbToolHeaderButton\n [glyph]=\"action.glyph\"\n (click)=\"action.clickCallback()\"\n [ariaLabel]=\"action.label\"\n >\n <span class=\"fd-button__badge\" *ngIf=\"action.hasBadge\"></span>\n </button>\n </ng-template>\n <div\n class=\"fd-tool-header__separator\"\n *ngIf=\"action.hasSeparator && fdbToolHeaderState().separatorsBetweenActionsVisible\"\n ></div>\n </div>\n </ng-container>\n </ng-container>\n\n <fdb-navigation-menu-popover *fdOverflowExpand=\"let overflowItems\" fdbToolHeaderElement>\n <button *fdbNavigationMenuPopoverControl fd-button fdbToolHeaderButton glyph=\"overflow\"></button>\n <ul *fdPopoverBody fdkFocusableList [wrap]=\"true\" fdb-navigation-menu>\n <ng-container *ngFor=\"let item of overflowItems\">\n <ng-container *ngIf=\"_toolHeaderActionsDirective?._actions() as actions\">\n <li\n *ngIf=\"\n fdbToolHeaderState().searchFieldToggleActionVisible\n ? actions[item.globalIndex - 1]\n : actions[item.globalIndex] as action\n \"\n fdb-navigation-menu-item\n fdkFocusableItem\n [glyph]=\"action.glyph\"\n (click)=\"action.clickCallback()\"\n [label]=\"action.label\"\n ></li>\n </ng-container>\n </ng-container>\n </ul>\n </fdb-navigation-menu-popover>\n </fd-overflow-layout>\n <ng-container *ngIf=\"fdbToolHeaderState().userAvatarVisible && _toolHeaderUser\">\n <div fdbToolHeaderElement>\n <div class=\"fd-tool-header__separator\"></div>\n <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n </div>\n </ng-container>\n <ng-container *ngIf=\"fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch\">\n <div fdbToolHeaderElement>\n <div class=\"fd-tool-header__separator\"></div>\n <ng-content select=\"fdb-tool-header-product-switch, fd-product-switch\"></ng-content>\n </div>\n </ng-container>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().voiceInputVisible\">\n <button\n fd-button\n fdbToolHeaderButton\n glyph=\"microphone\"\n [ariaLabel]=\"'Search with voice'\"\n (click)=\"microphoneClick.emit()\"\n ></button>\n </div>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.30.2\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-popover__body.fdb-tool-header-actions-overflow-popover-body{--fdPopover_Offset: .3875rem;width:auto;height:auto;padding:.5rem;background:var(--sapGroup_ContentBackground);border:none;border-radius:.5rem;box-shadow:var(--sapMenu_Shadow1)}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu{--fdMenu_Item_Spacing_Left: 0}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link{--fdMenu_Link_Height: 2rem;border-radius:.375rem}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link:focus:after{display:none}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:.375rem;inset:.125rem;content:\"\";pointer-events:none;position:absolute}\n"] }]
|
|
558
|
+
], 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<div fdbToolHeaderGroup actions>\n <fd-overflow-layout fdbToolHeaderElement [style.justify-content]=\"'end'\">\n <ng-container *ngIf=\"fdbToolHeaderState().searchFieldToggleActionVisible\">\n <div fdbToolHeaderElement *fdOverflowItemRef=\"let hidden\" [forceVisibility]=\"true\" fdOverflowLayoutItem>\n <button\n fd-button\n fdbToolHeaderButton\n glyph=\"search\"\n (click)=\"$event.stopPropagation(); expandSearchField()\"\n ></button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"fdbToolHeaderState().providedActionsVisible\">\n <ng-container *ngFor=\"let action of _toolHeaderActionsDirective?._actions()\">\n <div\n fdbToolHeaderElement\n *fdOverflowItemRef=\"let hidden\"\n [forceVisibility]=\"!!action.forceVisibility\"\n fdOverflowLayoutItem\n >\n <ng-template\n [ngIf]=\"!!action.templateRef\"\n [ngIfThen]=\"$any(action.templateRef)\"\n [ngIfElse]=\"defaultActionButtonTemplate\"\n ></ng-template>\n <ng-template #defaultActionButtonTemplate>\n <button\n fd-button\n fdbToolHeaderButton\n [glyph]=\"action.glyph\"\n (click)=\"action.clickCallback()\"\n [ariaLabel]=\"action.label\"\n >\n <span class=\"fd-button__badge\" *ngIf=\"action.hasBadge\"></span>\n </button>\n </ng-template>\n <div\n class=\"fd-tool-header__separator\"\n *ngIf=\"action.hasSeparator && fdbToolHeaderState().separatorsBetweenActionsVisible\"\n ></div>\n </div>\n </ng-container>\n </ng-container>\n\n <fdb-navigation-menu-popover *fdOverflowExpand=\"let overflowItems\" fdbToolHeaderElement>\n <button *fdbNavigationMenuPopoverControl fd-button fdbToolHeaderButton glyph=\"overflow\"></button>\n <ul *fdPopoverBody fdkFocusableList [wrap]=\"true\" fdb-navigation-menu>\n <ng-container *ngFor=\"let item of overflowItems\">\n <ng-container *ngIf=\"_toolHeaderActionsDirective?._actions() as actions\">\n <li\n *ngIf=\"\n fdbToolHeaderState().searchFieldToggleActionVisible\n ? actions[item.globalIndex - 1]\n : actions[item.globalIndex] as action\n \"\n fdb-navigation-menu-item\n fdkFocusableItem\n [glyph]=\"action.glyph\"\n (click)=\"action.clickCallback()\"\n [label]=\"action.label\"\n ></li>\n </ng-container>\n </ng-container>\n </ul>\n </fdb-navigation-menu-popover>\n </fd-overflow-layout>\n <ng-container *ngIf=\"fdbToolHeaderState().userAvatarVisible && _toolHeaderUser\">\n <div fdbToolHeaderElement>\n <div class=\"fd-tool-header__separator\"></div>\n <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n </div>\n </ng-container>\n <ng-container *ngIf=\"fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch\">\n <div fdbToolHeaderElement>\n <div class=\"fd-tool-header__separator\"></div>\n <ng-content select=\"fdb-tool-header-product-switch, fd-product-switch\"></ng-content>\n </div>\n </ng-container>\n <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().voiceInputVisible\">\n <button\n fd-button\n fdbToolHeaderButton\n glyph=\"microphone\"\n [ariaLabel]=\"'Search with voice'\"\n (click)=\"microphoneClick.emit()\"\n ></button>\n </div>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.31.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-popover__body.fdb-tool-header-actions-overflow-popover-body{--fdPopover_Offset: .3875rem;width:auto;height:auto;padding:.5rem;background:var(--sapGroup_ContentBackground);border:none;border-radius:.5rem;box-shadow:var(--sapMenu_Shadow1)}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu{--fdMenu_Item_Spacing_Left: 0}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link{--fdMenu_Link_Height: 2rem;border-radius:.375rem}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link:focus:after{display:none}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:.375rem;inset:.125rem;content:\"\";pointer-events:none;position:absolute}\n"] }]
|
|
559
559
|
}], propDecorators: { productName: [{
|
|
560
560
|
type: Input,
|
|
561
561
|
args: [{ required: true }]
|
|
@@ -136,7 +136,7 @@ class ToolLayoutComponent {
|
|
|
136
136
|
this.buildComponentCssClass();
|
|
137
137
|
}
|
|
138
138
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
139
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ToolLayoutComponent, isStandalone: true, selector: "[fdbToolLayout]", inputs: { class: "class", mode: "mode" }, usesOnChanges: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.
|
|
139
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ToolLayoutComponent, isStandalone: true, selector: "[fdbToolLayout]", inputs: { class: "class", mode: "mode" }, usesOnChanges: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.31.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-layout{--fdToolLayout_Gap:.5rem;--fdToolLayout_Padding:.5rem .5rem 0 .5rem;--fdToolLayout_Content_Container_Border_Radius:.5rem .5rem 0 0;--fdToolLayout_Content_Container_Background:var(--sapBackgroundColor);--fdToolLayout_Content_Container_BoxShadow:var(--sapToolLayoutContent_Shadow1);-webkit-box-sizing:border-box;background:var(--fdToolLayout_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:var(--fdToolLayout_Gap);height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding:var(--fdToolLayout_Padding);width:100%}.fd-tool-layout:after,.fd-tool-layout:before{box-sizing:inherit;font-size:inherit}.fd-tool-layout__container{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tool-layout__container:after,.fd-tool-layout__container:before{box-sizing:inherit;font-size:inherit}.fd-tool-layout__container:not(:first-child){gap:var(--fdToolLayout_Gap)}.fd-tool-layout__header-container{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:100%}.fd-tool-layout__header-container:after,.fd-tool-layout__header-container:before{box-sizing:inherit;font-size:inherit}.fd-tool-layout__navigation-container{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tool-layout__navigation-container:after,.fd-tool-layout__navigation-container:before{box-sizing:inherit;font-size:inherit}.fd-tool-layout__navigation-container--horizontal{flex:1;min-width:100%}.fd-tool-layout__navigation-container--horizontal+.fd-tool-layout__content-container{min-width:100%}.fd-tool-layout__content-container{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;-webkit-box-shadow:var(--fdToolLayout_Content_Container_BoxShadow);background:var(--fdToolLayout_Content_Container_Background);border:0;border-radius:var(--fdToolLayout_Content_Container_Border_Radius);box-shadow:var(--fdToolLayout_Content_Container_BoxShadow);box-sizing:border-box;color:var(--sapTextColor);flex:1;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;width:100%}.fd-tool-layout__content-container:after,.fd-tool-layout__content-container:before{box-sizing:inherit;font-size:inherit}.fd-tool-layout__content-container--transparent{--fdToolLayout_Content_Container_Background:transparent;--fdToolLayout_Content_Container_BoxShadow:none}.fd-tool-layout__content-container--list{--fdToolLayout_Content_Container_Background:var(--sapGroup_ContentBackground)}.fd-tool-layout--horizontal-navigation{--fdToolLayout_Gap:0}.fd-tool-layout--horizontal-navigation .fd-tool-layout__container:not(:first-child){--fdToolLayout_Gap:.5rem}.fd-tool-layout--horizontal-navigation.fd-tool-layout--phone .fd-tool-layout__container:not(:first-child){--fdToolLayout_Gap:.25rem}.fd-tool-layout--tablet{--fdToolLayout_Padding:.5rem;--fdToolLayout_Content_Container_Border_Radius:.5rem}.fd-tool-layout--phone{--fdToolLayout_Gap:.25rem;--fdToolLayout_Padding:.25rem;--fdToolLayout_Content_Container_Border_Radius:.25rem}.fd-tool-layout--sticky{inset:0;position:absolute}.fd-tool-layout--sticky .fd-tool-layout__container{position:relative}.fd-tool-layout--sticky .fd-tool-layout__container:not(:first-child){flex:1;overflow:hidden}.fd-tool-layout--sticky .fd-tool-layout__content-container,.fd-tool-layout--sticky .fd-tool-layout__navigation-container{height:100%;overflow:scroll}.fd-tool-layout__header-container{width:100%}.fd-tool-layout__content-container{overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
140
140
|
}
|
|
141
141
|
__decorate([
|
|
142
142
|
applyCssClass,
|
|
@@ -146,7 +146,7 @@ __decorate([
|
|
|
146
146
|
], ToolLayoutComponent.prototype, "buildComponentCssClass", null);
|
|
147
147
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolLayoutComponent, decorators: [{
|
|
148
148
|
type: Component,
|
|
149
|
-
args: [{ selector: '[fdbToolLayout]', template: ` <ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: ["/*!\n * Fundamental Library Styles v0.
|
|
149
|
+
args: [{ selector: '[fdbToolLayout]', template: ` <ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: ["/*!\n * Fundamental Library Styles v0.31.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-layout{--fdToolLayout_Gap:.5rem;--fdToolLayout_Padding:.5rem .5rem 0 .5rem;--fdToolLayout_Content_Container_Border_Radius:.5rem .5rem 0 0;--fdToolLayout_Content_Container_Background:var(--sapBackgroundColor);--fdToolLayout_Content_Container_BoxShadow:var(--sapToolLayoutContent_Shadow1);-webkit-box-sizing:border-box;background:var(--fdToolLayout_Background);border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:var(--fdToolLayout_Gap);height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding:var(--fdToolLayout_Padding);width:100%}.fd-tool-layout:after,.fd-tool-layout:before{box-sizing:inherit;font-size:inherit}.fd-tool-layout__container{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tool-layout__container:after,.fd-tool-layout__container:before{box-sizing:inherit;font-size:inherit}.fd-tool-layout__container:not(:first-child){gap:var(--fdToolLayout_Gap)}.fd-tool-layout__header-container{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:100%}.fd-tool-layout__header-container:after,.fd-tool-layout__header-container:before{box-sizing:inherit;font-size:inherit}.fd-tool-layout__navigation-container{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tool-layout__navigation-container:after,.fd-tool-layout__navigation-container:before{box-sizing:inherit;font-size:inherit}.fd-tool-layout__navigation-container--horizontal{flex:1;min-width:100%}.fd-tool-layout__navigation-container--horizontal+.fd-tool-layout__content-container{min-width:100%}.fd-tool-layout__content-container{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;-webkit-box-shadow:var(--fdToolLayout_Content_Container_BoxShadow);background:var(--fdToolLayout_Content_Container_Background);border:0;border-radius:var(--fdToolLayout_Content_Container_Border_Radius);box-shadow:var(--fdToolLayout_Content_Container_BoxShadow);box-sizing:border-box;color:var(--sapTextColor);flex:1;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;width:100%}.fd-tool-layout__content-container:after,.fd-tool-layout__content-container:before{box-sizing:inherit;font-size:inherit}.fd-tool-layout__content-container--transparent{--fdToolLayout_Content_Container_Background:transparent;--fdToolLayout_Content_Container_BoxShadow:none}.fd-tool-layout__content-container--list{--fdToolLayout_Content_Container_Background:var(--sapGroup_ContentBackground)}.fd-tool-layout--horizontal-navigation{--fdToolLayout_Gap:0}.fd-tool-layout--horizontal-navigation .fd-tool-layout__container:not(:first-child){--fdToolLayout_Gap:.5rem}.fd-tool-layout--horizontal-navigation.fd-tool-layout--phone .fd-tool-layout__container:not(:first-child){--fdToolLayout_Gap:.25rem}.fd-tool-layout--tablet{--fdToolLayout_Padding:.5rem;--fdToolLayout_Content_Container_Border_Radius:.5rem}.fd-tool-layout--phone{--fdToolLayout_Gap:.25rem;--fdToolLayout_Padding:.25rem;--fdToolLayout_Content_Container_Border_Radius:.25rem}.fd-tool-layout--sticky{inset:0;position:absolute}.fd-tool-layout--sticky .fd-tool-layout__container{position:relative}.fd-tool-layout--sticky .fd-tool-layout__container:not(:first-child){flex:1;overflow:hidden}.fd-tool-layout--sticky .fd-tool-layout__content-container,.fd-tool-layout--sticky .fd-tool-layout__navigation-container{height:100%;overflow:scroll}.fd-tool-layout__header-container{width:100%}.fd-tool-layout__content-container{overflow:hidden}\n"] }]
|
|
150
150
|
}], propDecorators: { class: [{
|
|
151
151
|
type: Input
|
|
152
152
|
}], mode: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-btp-tool-layout.mjs","sources":["../../../../libs/btp/tool-layout/src/directives/tool-layout-container.directive.ts","../../../../libs/btp/tool-layout/src/directives/tool-layout-content-container.directive.ts","../../../../libs/btp/tool-layout/src/directives/tool-layout-header-container.directive.ts","../../../../libs/btp/tool-layout/src/directives/tool-layout-navigation-container.directive.ts","../../../../libs/btp/tool-layout/src/tool-layout.component.ts","../../../../libs/btp/tool-layout/src/tool-layout.module.ts","../../../../libs/btp/tool-layout/src/fundamental-ngx-btp-tool-layout.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n selector: '[fdbToolLayoutContainer]',\n standalone: true,\n host: {\n class: 'fd-tool-layout__container'\n }\n})\nexport class ToolLayoutContainerDirective {}\n","import { Directive, ElementRef, inject, Input, OnChanges, OnInit } from '@angular/core';\nimport { applyCssClass, CssClassBuilder, HasElementRef } from '@fundamental-ngx/cdk/utils';\n\nexport type ToolLayoutContentContainerBackground = '' | 'transparent' | 'list';\n\n@Directive({\n selector: '[fdbToolLayoutContentContainer]',\n standalone: true\n})\nexport class ToolLayoutContentContainerDirective implements OnChanges, OnInit, CssClassBuilder, HasElementRef {\n /** user's custom classes */\n @Input()\n class: string;\n\n /**\n * the background of the Content Container\n * Available options: '' | 'transparent' | 'list'\n * Default background has the color var(--sapBackgroundColor)\n * List background will apply var(--sapGroup_ContentBackground) background to the content area\n */\n @Input()\n background: ToolLayoutContentContainerBackground;\n\n /** @hidden */\n readonly elementRef: ElementRef<HTMLElement> = inject(ElementRef);\n\n /** @hidden\n * CssClassBuilder interface implementation\n * function must return single string\n * function is responsible for order which css classes are applied\n */\n @applyCssClass\n buildComponentCssClass(): string[] {\n return [\n 'fd-tool-layout__content-container',\n this.background ? `fd-tool-layout__content-container--${this.background}` : '',\n this.class\n ];\n }\n\n /** @hidden */\n ngOnInit(): void {\n this.buildComponentCssClass();\n }\n\n /** @hidden */\n ngOnChanges(): void {\n this.buildComponentCssClass();\n }\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: '[fdbToolLayoutHeaderContainer]',\n standalone: true,\n host: {\n class: 'fd-tool-layout__header-container'\n }\n})\nexport class ToolLayoutHeaderContainerDirective {}\n","import { Directive, HostBinding, Input } from '@angular/core';\n\n@Directive({\n selector: '[fdbToolLayoutNavigationContainer]',\n standalone: true,\n host: {\n class: 'fd-tool-layout__navigation-container'\n }\n})\nexport class ToolLayoutNavigationContainerDirective {\n /**\n * whether the navigation is a popup\n */\n @HostBinding('class.fd-tool-layout__navigation-container--popup')\n @Input()\n popup = false;\n\n /**\n * whether the navigation is horizontal\n */\n @HostBinding('class.fd-tool-layout__navigation-container--horizontal')\n @Input()\n horizontal = false;\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n inject,\n Input,\n OnChanges,\n OnInit,\n ViewEncapsulation\n} from '@angular/core';\nimport { FdbViewMode } from '@fundamental-ngx/btp/shared';\nimport { applyCssClass, CssClassBuilder, HasElementRef, Nullable } from '@fundamental-ngx/cdk/utils';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: '[fdbToolLayout]', // Using camel case, because it should become directive sometime in the future\n template: ` <ng-content></ng-content>`,\n styleUrls: ['./tool-layout.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true\n})\nexport class ToolLayoutComponent implements OnChanges, OnInit, CssClassBuilder, HasElementRef {\n /** user's custom classes */\n @Input()\n class: string;\n\n /** Whether the Tool Layout is in Desktop, Tablet or Mobile/Phone mode\n * Types available: '' | 'tablet' | 'phone'\n * The default (not specified) mode is desktop.\n */\n @Input()\n mode: Nullable<FdbViewMode>;\n\n /** @hidden */\n readonly elementRef: ElementRef<HTMLElement> = inject(ElementRef);\n\n /** @hidden\n * CssClassBuilder interface implementation\n * function must return single string\n * function is responsible for order which css classes are applied\n */\n @applyCssClass\n buildComponentCssClass(): string[] {\n return ['fd-tool-layout', this.mode ? `fd-tool-layout--${this.mode}` : '', this.class];\n }\n\n /** @hidden */\n ngOnInit(): void {\n this.buildComponentCssClass();\n }\n\n /** @hidden */\n ngOnChanges(): void {\n this.buildComponentCssClass();\n }\n}\n","import { NgModule } from '@angular/core';\nimport { ToolLayoutContainerDirective } from './directives/tool-layout-container.directive';\nimport { ToolLayoutContentContainerDirective } from './directives/tool-layout-content-container.directive';\nimport { ToolLayoutHeaderContainerDirective } from './directives/tool-layout-header-container.directive';\nimport { ToolLayoutNavigationContainerDirective } from './directives/tool-layout-navigation-container.directive';\nimport { ToolLayoutComponent } from './tool-layout.component';\n\n@NgModule({\n imports: [\n ToolLayoutComponent,\n ToolLayoutContainerDirective,\n ToolLayoutContentContainerDirective,\n ToolLayoutHeaderContainerDirective,\n ToolLayoutNavigationContainerDirective\n ],\n exports: [\n ToolLayoutComponent,\n ToolLayoutContainerDirective,\n ToolLayoutContentContainerDirective,\n ToolLayoutHeaderContainerDirective,\n ToolLayoutNavigationContainerDirective\n ]\n})\nexport class ToolLayoutModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-btp-tool-layout.mjs","sources":["../../../../libs/btp/tool-layout/src/directives/tool-layout-container.directive.ts","../../../../libs/btp/tool-layout/src/directives/tool-layout-content-container.directive.ts","../../../../libs/btp/tool-layout/src/directives/tool-layout-header-container.directive.ts","../../../../libs/btp/tool-layout/src/directives/tool-layout-navigation-container.directive.ts","../../../../libs/btp/tool-layout/src/tool-layout.component.ts","../../../../libs/btp/tool-layout/src/tool-layout.module.ts","../../../../libs/btp/tool-layout/src/fundamental-ngx-btp-tool-layout.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n selector: '[fdbToolLayoutContainer]',\n standalone: true,\n host: {\n class: 'fd-tool-layout__container'\n }\n})\nexport class ToolLayoutContainerDirective {}\n","import { Directive, ElementRef, inject, Input, OnChanges, OnInit } from '@angular/core';\nimport { applyCssClass, CssClassBuilder, HasElementRef } from '@fundamental-ngx/cdk/utils';\n\nexport type ToolLayoutContentContainerBackground = '' | 'transparent' | 'list';\n\n@Directive({\n selector: '[fdbToolLayoutContentContainer]',\n standalone: true\n})\nexport class ToolLayoutContentContainerDirective implements OnChanges, OnInit, CssClassBuilder, HasElementRef {\n /** user's custom classes */\n @Input()\n class: string;\n\n /**\n * the background of the Content Container\n * Available options: '' | 'transparent' | 'list'\n * Default background has the color var(--sapBackgroundColor)\n * List background will apply var(--sapGroup_ContentBackground) background to the content area\n */\n @Input()\n background: ToolLayoutContentContainerBackground;\n\n /** @hidden */\n readonly elementRef: ElementRef<HTMLElement> = inject(ElementRef);\n\n /** @hidden\n * CssClassBuilder interface implementation\n * function must return single string\n * function is responsible for order which css classes are applied\n */\n @applyCssClass\n buildComponentCssClass(): string[] {\n return [\n 'fd-tool-layout__content-container',\n this.background ? `fd-tool-layout__content-container--${this.background}` : '',\n this.class\n ];\n }\n\n /** @hidden */\n ngOnInit(): void {\n this.buildComponentCssClass();\n }\n\n /** @hidden */\n ngOnChanges(): void {\n this.buildComponentCssClass();\n }\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: '[fdbToolLayoutHeaderContainer]',\n standalone: true,\n host: {\n class: 'fd-tool-layout__header-container'\n }\n})\nexport class ToolLayoutHeaderContainerDirective {}\n","import { Directive, HostBinding, Input } from '@angular/core';\n\n@Directive({\n selector: '[fdbToolLayoutNavigationContainer]',\n standalone: true,\n host: {\n class: 'fd-tool-layout__navigation-container'\n }\n})\nexport class ToolLayoutNavigationContainerDirective {\n /**\n * whether the navigation is a popup\n */\n @HostBinding('class.fd-tool-layout__navigation-container--popup')\n @Input()\n popup = false;\n\n /**\n * whether the navigation is horizontal\n */\n @HostBinding('class.fd-tool-layout__navigation-container--horizontal')\n @Input()\n horizontal = false;\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n inject,\n Input,\n OnChanges,\n OnInit,\n ViewEncapsulation\n} from '@angular/core';\nimport { FdbViewMode } from '@fundamental-ngx/btp/shared';\nimport { applyCssClass, CssClassBuilder, HasElementRef, Nullable } from '@fundamental-ngx/cdk/utils';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: '[fdbToolLayout]', // Using camel case, because it should become directive sometime in the future\n template: ` <ng-content></ng-content>`,\n styleUrls: ['./tool-layout.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true\n})\nexport class ToolLayoutComponent implements OnChanges, OnInit, CssClassBuilder, HasElementRef {\n /** user's custom classes */\n @Input()\n class: string;\n\n /** Whether the Tool Layout is in Desktop, Tablet or Mobile/Phone mode\n * Types available: '' | 'tablet' | 'phone'\n * The default (not specified) mode is desktop.\n */\n @Input()\n mode: Nullable<FdbViewMode>;\n\n /** @hidden */\n readonly elementRef: ElementRef<HTMLElement> = inject(ElementRef);\n\n /** @hidden\n * CssClassBuilder interface implementation\n * function must return single string\n * function is responsible for order which css classes are applied\n */\n @applyCssClass\n buildComponentCssClass(): string[] {\n return ['fd-tool-layout', this.mode ? `fd-tool-layout--${this.mode}` : '', this.class];\n }\n\n /** @hidden */\n ngOnInit(): void {\n this.buildComponentCssClass();\n }\n\n /** @hidden */\n ngOnChanges(): void {\n this.buildComponentCssClass();\n }\n}\n","import { NgModule } from '@angular/core';\nimport { ToolLayoutContainerDirective } from './directives/tool-layout-container.directive';\nimport { ToolLayoutContentContainerDirective } from './directives/tool-layout-content-container.directive';\nimport { ToolLayoutHeaderContainerDirective } from './directives/tool-layout-header-container.directive';\nimport { ToolLayoutNavigationContainerDirective } from './directives/tool-layout-navigation-container.directive';\nimport { ToolLayoutComponent } from './tool-layout.component';\n\n@NgModule({\n imports: [\n ToolLayoutComponent,\n ToolLayoutContainerDirective,\n ToolLayoutContentContainerDirective,\n ToolLayoutHeaderContainerDirective,\n ToolLayoutNavigationContainerDirective\n ],\n exports: [\n ToolLayoutComponent,\n ToolLayoutContainerDirective,\n ToolLayoutContentContainerDirective,\n ToolLayoutHeaderContainerDirective,\n ToolLayoutNavigationContainerDirective\n ]\n})\nexport class ToolLayoutModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fundamental-ngx/btp",
|
|
3
|
-
"version": "0.46.2-rc.
|
|
3
|
+
"version": "0.46.2-rc.21",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^16.2.0",
|
|
6
6
|
"@angular/core": "^16.2.0",
|
|
7
|
-
"@fundamental-ngx/cdk": "0.46.2-rc.
|
|
8
|
-
"@fundamental-ngx/core": "0.46.2-rc.
|
|
7
|
+
"@fundamental-ngx/cdk": "0.46.2-rc.21",
|
|
8
|
+
"@fundamental-ngx/core": "0.46.2-rc.21"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"tslib": "^2.3.0"
|
|
Binary file
|