@fundamental-ngx/platform 0.43.0-rc.9 → 0.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/esm2020/dynamic-page/dynamic-page.component.mjs +1 -1
  2. package/esm2020/form/combobox/combobox/combobox.component.mjs +1 -1
  3. package/esm2020/form/form-generator/controls/dynamic-form-generator-multi-input/dynamic-form-generator-multi-input.component.mjs +2 -2
  4. package/esm2020/form/multi-combobox/multi-combobox/multi-combobox.component.mjs +1 -1
  5. package/esm2020/form/multi-input/multi-input.component.mjs +7 -4
  6. package/esm2020/form/step-input/number/number-step-input.component.mjs +1 -1
  7. package/esm2020/settings-generator/settings-generator-content/settings-generator-content.component.mjs +1 -1
  8. package/esm2020/smart-filter-bar/components/smart-filter-bar-condition-field/smart-filter-bar-condition-field.component.mjs +4 -3
  9. package/esm2020/smart-filter-bar/components/smart-filter-bar-settings-dialog/smart-filter-bar-settings-dialog.component.mjs +1 -1
  10. package/esm2020/smart-filter-bar/smart-filter-bar.component.mjs +3 -3
  11. package/esm2020/table/components/table-cell-header-popover/table-cell-header-popover.component.mjs +3 -3
  12. package/esm2020/table/components/table-header-row/table-header-row.component.mjs +8 -4
  13. package/esm2020/table/components/table-p13-dialog/sorting/sorting.component.mjs +3 -3
  14. package/esm2020/table/components/table-row/table-row.component.mjs +4 -3
  15. package/esm2020/table/table.component.mjs +29 -11
  16. package/esm2020/table-helpers/constants/index.mjs +3 -2
  17. package/esm2020/table-helpers/directives/table-scrollable.directive.mjs +9 -1
  18. package/esm2020/table-helpers/directives/table-virtual-scroll.directive.mjs +6 -2
  19. package/esm2020/table-helpers/interfaces/table-state.interface.mjs +1 -1
  20. package/esm2020/table-helpers/services/table-scroll-dispatcher.service.mjs +1 -1
  21. package/esm2020/table-helpers/services/table.service.mjs +3 -2
  22. package/esm2020/upload-collection/upload-collection/upload-collection.component.mjs +1 -1
  23. package/esm2020/value-help-dialog/components/define-tab/define-tab.component.mjs +1 -1
  24. package/esm2020/variant-management/components/manage-variants-dialog/manage-variants-dialog.component.mjs +1 -1
  25. package/fesm2015/fundamental-ngx-platform-dynamic-page.mjs +1 -1
  26. package/fesm2015/fundamental-ngx-platform-dynamic-page.mjs.map +1 -1
  27. package/fesm2015/fundamental-ngx-platform-form.mjs +9 -7
  28. package/fesm2015/fundamental-ngx-platform-form.mjs.map +1 -1
  29. package/fesm2015/fundamental-ngx-platform-settings-generator.mjs +1 -1
  30. package/fesm2015/fundamental-ngx-platform-settings-generator.mjs.map +1 -1
  31. package/fesm2015/fundamental-ngx-platform-smart-filter-bar.mjs +5 -5
  32. package/fesm2015/fundamental-ngx-platform-smart-filter-bar.mjs.map +1 -1
  33. package/fesm2015/fundamental-ngx-platform-table-helpers.mjs +14 -3
  34. package/fesm2015/fundamental-ngx-platform-table-helpers.mjs.map +1 -1
  35. package/fesm2015/fundamental-ngx-platform-table.mjs +41 -19
  36. package/fesm2015/fundamental-ngx-platform-table.mjs.map +1 -1
  37. package/fesm2015/fundamental-ngx-platform-upload-collection.mjs +1 -1
  38. package/fesm2015/fundamental-ngx-platform-upload-collection.mjs.map +1 -1
  39. package/fesm2015/fundamental-ngx-platform-value-help-dialog.mjs +1 -1
  40. package/fesm2015/fundamental-ngx-platform-value-help-dialog.mjs.map +1 -1
  41. package/fesm2015/fundamental-ngx-platform-variant-management.mjs +1 -1
  42. package/fesm2015/fundamental-ngx-platform-variant-management.mjs.map +1 -1
  43. package/fesm2020/fundamental-ngx-platform-dynamic-page.mjs +1 -1
  44. package/fesm2020/fundamental-ngx-platform-dynamic-page.mjs.map +1 -1
  45. package/fesm2020/fundamental-ngx-platform-form.mjs +10 -7
  46. package/fesm2020/fundamental-ngx-platform-form.mjs.map +1 -1
  47. package/fesm2020/fundamental-ngx-platform-settings-generator.mjs +1 -1
  48. package/fesm2020/fundamental-ngx-platform-settings-generator.mjs.map +1 -1
  49. package/fesm2020/fundamental-ngx-platform-smart-filter-bar.mjs +5 -5
  50. package/fesm2020/fundamental-ngx-platform-smart-filter-bar.mjs.map +1 -1
  51. package/fesm2020/fundamental-ngx-platform-table-helpers.mjs +17 -3
  52. package/fesm2020/fundamental-ngx-platform-table-helpers.mjs.map +1 -1
  53. package/fesm2020/fundamental-ngx-platform-table.mjs +41 -19
  54. package/fesm2020/fundamental-ngx-platform-table.mjs.map +1 -1
  55. package/fesm2020/fundamental-ngx-platform-upload-collection.mjs +1 -1
  56. package/fesm2020/fundamental-ngx-platform-upload-collection.mjs.map +1 -1
  57. package/fesm2020/fundamental-ngx-platform-value-help-dialog.mjs +1 -1
  58. package/fesm2020/fundamental-ngx-platform-value-help-dialog.mjs.map +1 -1
  59. package/fesm2020/fundamental-ngx-platform-variant-management.mjs +1 -1
  60. package/fesm2020/fundamental-ngx-platform-variant-management.mjs.map +1 -1
  61. package/form/multi-input/multi-input.component.d.ts +3 -1
  62. package/fundamental-ngx-platform-v0.43.0.tgz +0 -0
  63. package/package.json +4 -4
  64. package/schematics/ng-add/index.js +1 -1
  65. package/table/components/table-header-row/table-header-row.component.d.ts +3 -1
  66. package/table/table.component.d.ts +7 -1
  67. package/table-helpers/directives/table-scrollable.directive.d.ts +2 -0
  68. package/table-helpers/interfaces/table-state.interface.d.ts +1 -0
  69. package/table-helpers/services/table-scroll-dispatcher.service.d.ts +2 -0
  70. package/fundamental-ngx-platform-v0.43.0-rc.9.tgz +0 -0
package/esm2020/dynamic-page/dynamic-page.component.mjs CHANGED
@@ -152,7 +152,7 @@ export class DynamicPageComponent extends BaseComponent {
152
152
  }
153
153
  }
154
154
  DynamicPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
155
- DynamicPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DynamicPageComponent, selector: "fdp-dynamic-page", inputs: { role: "role", ariaLabel: "ariaLabel", stackContent: "stackContent", background: "background", size: "size", offset: "offset", autoResponsive: "autoResponsive", expandContent: "expandContent" }, outputs: { tabChange: "tabChange" }, host: { properties: { "attr.role": "this.role" } }, providers: [DynamicPageService], queries: [{ propertyName: "titleComponent", first: true, predicate: DynamicPageTitleComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: DynamicPageHeaderComponent, descendants: true }, { propertyName: "footerComponent", first: true, predicate: DynamicPageFooterComponent, descendants: true }, { propertyName: "contentComponent", first: true, predicate: DynamicPageContentComponent, descendants: true }, { propertyName: "contentComponents", predicate: DynamicPageContentComponent, descendants: true }], viewQueries: [{ propertyName: "_tabListComponent", first: true, predicate: TabListComponent, descendants: true }, { propertyName: "dynamicPageTabs", predicate: TabPanelComponent, descendants: true }, { propertyName: "_contentHostComponents", predicate: DynamicPageContentHostComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dynamic-page\n [autoResponsive]=\"autoResponsive\"\n [background]=\"background\"\n [size]=\"size\"\n [expandContent]=\"expandContent\"\n [offset]=\"offset\"\n [ariaLabel]=\"ariaLabel\"\n>\n <fd-dynamic-page-header\n *ngIf=\"titleComponent\"\n [title]=\"titleComponent.title\"\n [titleWrap]=\"titleComponent.titleWrap\"\n [subtitle]=\"titleComponent.subtitle\"\n [subtitleWrap]=\"titleComponent.subtitleWrap\"\n >\n <fd-breadcrumb>\n <ng-container [ngTemplateOutlet]=\"titleComponent.breadcrumbTemplate\"></ng-container>\n </fd-breadcrumb>\n\n <ng-container *ngIf=\"titleComponent._subtitleDirective\">\n <ng-container\n *fdDynamicPageHeaderSubtitle=\"let hidden\"\n [ngTemplateOutlet]=\"titleComponent._subtitleDirective.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: hidden }\"\n >\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"titleComponent._titleDirective\">\n <ng-container\n *fdDynamicPageHeaderTitle=\"let hidden\"\n [ngTemplateOutlet]=\"titleComponent._titleDirective.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: hidden }\"\n >\n </ng-container>\n </ng-container>\n\n <fd-dynamic-page-title-content *ngIf=\"titleComponent.keyInfoComponent\">\n <ng-container [ngTemplateOutlet]=\"titleComponent.keyInfoComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-title-content>\n\n <fd-facet type=\"image\" *ngIf=\"titleComponent.imageComponent\">\n <ng-container [ngTemplateOutlet]=\"titleComponent.imageComponent.contentTemplateRef\"></ng-container>\n </fd-facet>\n\n <fd-dynamic-page-global-actions *ngIf=\"titleComponent.globalActionsComponent\">\n <ng-container [ngTemplateOutlet]=\"titleComponent.globalActionsComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-global-actions>\n\n <fd-dynamic-page-layout-actions *ngIf=\"titleComponent.layoutActionsComponent\">\n <ng-container [ngTemplateOutlet]=\"titleComponent.layoutActionsComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-layout-actions>\n </fd-dynamic-page-header>\n\n <fd-dynamic-page-subheader\n *ngIf=\"headerComponent\"\n [collapsed]=\"headerComponent.collapsed\"\n [collapsible]=\"headerComponent.collapsible\"\n [pinnable]=\"headerComponent.pinnable\"\n [expandLabel]=\"headerComponent.expandLabel\"\n [collapseLabel]=\"headerComponent.collapseLabel\"\n [role]=\"headerComponent.role\"\n [id]=\"headerComponent.id\"\n [headerAriaLabel]=\"headerComponent.headerAriaLabel\"\n [pinAriaLabel]=\"headerComponent.pinAriaLabel\"\n [unpinAriaLabel]=\"headerComponent.unpinAriaLabel\"\n (collapsedChange)=\"headerComponent._onCollapseChange($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"headerComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-subheader>\n\n <fd-tab-list\n *ngIf=\"_isTabbed\"\n [stackContent]=\"stackContent\"\n maxContentHeight=\"auto\"\n (selectedTabChange)=\"_onSelectedTabChange($event)\"\n >\n <ng-container *ngFor=\"let tab of _tabs\">\n <fd-tab [title]=\"tab.tabLabel\" [id]=\"tab.id\">\n <fd-dynamic-page-content cdkScrollable>\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-content>\n </fd-tab>\n </ng-container>\n </fd-tab-list>\n\n <fd-dynamic-page-content *ngIf=\"!_isTabbed && contentComponent\" cdkScrollable>\n <ng-container [ngTemplateOutlet]=\"contentComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-content>\n\n <fd-dynamic-page-footer *ngIf=\"footerComponent\">\n <ng-container [ngTemplateOutlet]=\"footerComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-footer>\n</fd-dynamic-page>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\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-dynamic-page{-webkit-box-sizing:border-box;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;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page:after,.fd-dynamic-page:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__header-fixed{left:0;position:fixed;right:0;top:0;z-index:3}.fd-dynamic-page__header{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;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;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__header:after,.fd-dynamic-page__header:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-area{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;word-wrap:break-word;background-color:var(--sapObjectHeader_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;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:3rem;padding:0;z-index:1}.fd-dynamic-page__title-area:after,.fd-dynamic-page__title-area:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-area.is-focus,.fd-dynamic-page__title-area:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.25rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:1}.fd-dynamic-page__title-area.is-hover,.fd-dynamic-page__title-area:hover{background:var(--sapObjectHeader_Hover_Background);border-bottom:var(--fdDynamicPage_Hover_Border_Bottom);cursor:pointer}.fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page__title-area--collapsed .fd-dynamic-page__title{font-size:var(--fdDynamicPage_Title_Collapsed_Font_Size)}.fd-dynamic-page__title-area[aria-hidden=true]{display:none}.fd-dynamic-page__main-container{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;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;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__main-container:after,.fd-dynamic-page__main-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-container{-webkit-box-sizing:border-box;align-items:center;border:0;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;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__title-container:after,.fd-dynamic-page__title-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb{-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:.5rem 0 .25rem}.fd-dynamic-page__breadcrumb:after,.fd-dynamic-page__breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb-title-container{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:0;padding:0}.fd-dynamic-page__breadcrumb-title-container:after,.fd-dynamic-page__breadcrumb-title-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb-container{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;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:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__breadcrumb-container:after,.fd-dynamic-page__breadcrumb-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdDynamicPage_Title_Color);font-family:var(--sapFontFamily);font-family:var(--fdDynamicPage_Title_Font_Family);font-size:var(--sapFontSize);font-size:var(--fdDynamicPage_Title_Font_Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__title:after,.fd-dynamic-page__title:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title .fd-link{color:var(--sapGroup_TitleTextColor);font-size:var(--sapFontHeader3Size);max-width:100%;overflow:hidden;padding:0;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}.fd-dynamic-page__title--wrap{white-space:normal}.fd-dynamic-page__subtitle{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdDynamicPage_Subtitle_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__subtitle:after,.fd-dynamic-page__subtitle:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__subtitle--wrap{white-space:normal}.fd-dynamic-page__title-content{-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;overflow:hidden;padding:0 0 0 1rem;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.fd-dynamic-page__title-content:after,.fd-dynamic-page__title-content:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-content[dir=rtl],[dir=rtl] .fd-dynamic-page__title-content{padding:0 1rem 0 0}.fd-dynamic-page__title-subtitle-container{-webkit-box-sizing:border-box;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;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__title-subtitle-container:after,.fd-dynamic-page__title-subtitle-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__toolbar-container{-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;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-dynamic-page__toolbar-container:after,.fd-dynamic-page__toolbar-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__toolbar-container[dir=rtl],[dir=rtl] .fd-dynamic-page__toolbar-container{margin-left:0;margin-right:auto}.fd-dynamic-page .fd-dynamic-page__toolbar{background:transparent;margin:0;padding:0 0 0 1rem}.fd-dynamic-page .fd-dynamic-page__toolbar[dir=rtl],[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar{padding-left:0;padding-right:1rem}.fd-dynamic-page .fd-dynamic-page__toolbar--actions,.fd-dynamic-page .fd-dynamic-page__toolbar--actions[dir=rtl],.fd-dynamic-page .fd-dynamic-page__toolbar--content,.fd-dynamic-page .fd-dynamic-page__toolbar--content[dir=rtl],[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar--actions,[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar--content{padding:0}.fd-dynamic-page__summarized-title-area{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;word-wrap:break-word;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background:var(--sapObjectHeader_Background);border:0;box-shadow:var(--sapContent_HeaderShadow);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:2rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;z-index:1}.fd-dynamic-page__summarized-title-area:after,.fd-dynamic-page__summarized-title-area:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__summarized-title-area.is-focus,.fd-dynamic-page__summarized-title-area:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.25rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-dynamic-page__summarized-title-area--no-shadow{box-shadow:none}.fd-dynamic-page__summarized-title-area[aria-hidden=true]{display:none}.fd-dynamic-page__summarized-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__summarized-title:after,.fd-dynamic-page__summarized-title:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-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}.fd-dynamic-page__collapsible-header-container:after,.fd-dynamic-page__collapsible-header-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header{-webkit-box-sizing:border-box;background-color:var(--sapObjectHeader_Background);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:1rem 0}.fd-dynamic-page__collapsible-header:after,.fd-dynamic-page__collapsible-header:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header[aria-hidden=true]{display:none}.fd-dynamic-page .fd-dynamic-page__tabs{margin:0;padding:0}.fd-dynamic-page .fd-dynamic-page__tabs--overflow{overflow:hidden}.fd-dynamic-page .fd-dynamic-page__tabs--add-shadow,.fd-dynamic-page__collapsible-header-visibility-container{box-shadow:var(--sapContent_HeaderShadow)}.fd-dynamic-page__collapsible-header-visibility-container{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:var(--sapObjectHeader_Background);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;min-height:.0625rem;padding:0;z-index:2}.fd-dynamic-page__collapsible-header-visibility-container:after,.fd-dynamic-page__collapsible-header-visibility-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-visibility-container--left-gradient{background-image:var(--fdDynamicPage_Button_Left_Gradient);height:.0625rem;width:4rem}.fd-dynamic-page__collapsible-header-visibility-container--left-gradient[dir=rtl],[dir=rtl] .fd-dynamic-page__collapsible-header-visibility-container--left-gradient{background-image:var(--fdDynamicPage_Button_Right_Gradient)}.fd-dynamic-page__collapsible-header-visibility-container--right-gradient{background-image:var(--fdDynamicPage_Button_Right_Gradient);height:.0625rem;width:4rem}.fd-dynamic-page__collapsible-header-visibility-container--right-gradient[dir=rtl],[dir=rtl] .fd-dynamic-page__collapsible-header-visibility-container--right-gradient{background-image:var(--fdDynamicPage_Button_Left_Gradient)}.fd-dynamic-page__collapsible-header-visibility-container--button-group{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:var(--fdDynamicPage_Button_Group_Background);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:.0625rem;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:4.25rem;z-index:1}.fd-dynamic-page__collapsible-header-visibility-container--button-group:after,.fd-dynamic-page__collapsible-header-visibility-container--button-group:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-visibility-container[aria-hidden=true]{display:none}.fd-dynamic-page__collapsible-header-visibility-container--no-shadow{box-shadow:none}.fd-dynamic-page__collapse-button,.fd-dynamic-page__expand-button,.fd-dynamic-page__pin-button{--fdButtonBackgroundColor:var(--fdDynamicPage_Button_Pin_Background);height:1.5rem;margin:0 .25rem;min-width:1.5rem;padding:0;width:1.5rem}.fd-dynamic-page__collapse-button:before,.fd-dynamic-page__expand-button:before,.fd-dynamic-page__pin-button:before{bottom:-.25rem;height:2rem;top:-.25rem;width:100%}.fd-dynamic-page__collapse-button[aria-hidden=true],.fd-dynamic-page__expand-button[aria-hidden=true],.fd-dynamic-page__pin-button[aria-hidden=true]{display:none}.fd-dynamic-page__content{-webkit-box-sizing:border-box;background-color:var(--sapBackgroundColor);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;overflow-y:auto;padding:0}.fd-dynamic-page__content:after,.fd-dynamic-page__content:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__footer{bottom:0;left:0;margin:0 .5rem .5rem;position:fixed;right:0}.fd-dynamic-page--sm .fd-dynamic-page__title-area{padding:.5rem 1rem}.fd-dynamic-page--sm .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--sm .fd-dynamic-page__collapsible-header,.fd-dynamic-page--sm .fd-dynamic-page__content{padding:1rem}.fd-dynamic-page--sm .fd-dynamic-page__tabs{padding:0 1rem}.fd-dynamic-page--sm .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--sm .fd-dynamic-page__breadcrumb{padding:0}.fd-dynamic-page--sm .fd-dynamic-page__title-container{align-items:center}.fd-dynamic-page--sm .fd-dynamic-page__toolbar{margin-left:auto;padding-left:1rem}.fd-dynamic-page--sm .fd-dynamic-page__toolbar[dir=rtl],[dir=rtl] .fd-dynamic-page--sm .fd-dynamic-page__toolbar{margin-left:0;margin-right:auto;padding-left:0;padding-right:1rem}.fd-dynamic-page--sm .fd-dynamic-page__toolbar--content{margin-left:0}.fd-dynamic-page--sm .fd-dynamic-page__toolbar--content[dir=rtl],[dir=rtl] .fd-dynamic-page--sm .fd-dynamic-page__toolbar--content{margin-right:0}.fd-dynamic-page--lg .fd-dynamic-page__title-area,.fd-dynamic-page--md .fd-dynamic-page__title-area{padding:.5rem 2rem}.fd-dynamic-page--lg .fd-dynamic-page__title-area--collapsed,.fd-dynamic-page--md .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--lg .fd-dynamic-page__collapsible-header,.fd-dynamic-page--lg .fd-dynamic-page__content,.fd-dynamic-page--md .fd-dynamic-page__collapsible-header,.fd-dynamic-page--md .fd-dynamic-page__content{padding:1rem 2rem}.fd-dynamic-page--lg .fd-dynamic-page__tabs,.fd-dynamic-page--md .fd-dynamic-page__tabs{padding:0 2rem}.fd-dynamic-page--lg .fd-dynamic-page__summarized-title-area,.fd-dynamic-page--md .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--xl .fd-dynamic-page__title-area{padding:.5rem 3rem}.fd-dynamic-page--xl .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--xl .fd-dynamic-page__collapsible-header,.fd-dynamic-page--xl .fd-dynamic-page__content{padding:1rem 3rem}.fd-dynamic-page--xl .fd-dynamic-page__tabs{padding:0 3rem}.fd-dynamic-page--xl .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--md .fd-dynamic-page__toolbar{padding:0}.fd-dynamic-page--list-bg .fd-dynamic-page__content{background-color:var(--fdDynamicPage_Content_List_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__content{background-color:var(--fdDynamicPage_Content_Transparent_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__title-area{background:var(--fdDynamicPage_Title_Header_Transparent_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__collapsible-header{background-color:var(--fdDynamicPage_Title_Header_Transparent_Background)}.fd-dynamic-page{display:flex;flex-direction:column;height:100%;width:100%}.fd-dynamic-page .fd-dynamic-page__header{z-index:2}.fd-dynamic-page .fd-dynamic-page__content,.fd-dynamic-page .fd-dynamic-page__tabs--overflow{display:block;flex:1}.fd-dynamic-page .fd-dynamic-page__tabs--overflow{display:flex}.fd-dynamic-page .fd-dynamic-page__tabs--overflow .fd-tabs-custom{height:100%;display:flex;flex-direction:column}.fd-dynamic-page .fd-dynamic-page__tabs--overflow .fd-tabs__content{flex:1;display:flex}.fd-dynamic-page .fd-dynamic-page__tabs--overflow .fd-tabs__panel.is-expanded{display:flex}.fd-dynamic-page .footer-spacer{height:3rem}.fd-dynamic-page .content-sticker{position:static}.fd-dynamic-page .fd-dynamic-page__header--not-collapsible .fd-dynamic-page__title-area.is-hover,.fd-dynamic-page .fd-dynamic-page__header--not-collapsible .fd-dynamic-page__title-area:hover{background-color:var(--sapObjectHeader_Background, #fff);cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i2.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i3.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i3.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap"] }, { kind: "component", type: i3.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i3.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i3.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "role", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i3.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i3.DynamicPageTitleContentComponent, selector: "fd-dynamic-page-title-content" }, { kind: "directive", type: i3.DynamicPageHeaderSubtitleDirective, selector: "[fdDynamicPageHeaderSubtitle]" }, { kind: "directive", type: i3.DynamicPageHeaderTitleDirective, selector: "[fdDynamicPageHeaderTitle]" }, { kind: "component", type: i4.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["containerElement", "reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "directive", type: i5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i6.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "id", "alignEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
155
+ DynamicPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DynamicPageComponent, selector: "fdp-dynamic-page", inputs: { role: "role", ariaLabel: "ariaLabel", stackContent: "stackContent", background: "background", size: "size", offset: "offset", autoResponsive: "autoResponsive", expandContent: "expandContent" }, outputs: { tabChange: "tabChange" }, host: { properties: { "attr.role": "this.role" } }, providers: [DynamicPageService], queries: [{ propertyName: "titleComponent", first: true, predicate: DynamicPageTitleComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: DynamicPageHeaderComponent, descendants: true }, { propertyName: "footerComponent", first: true, predicate: DynamicPageFooterComponent, descendants: true }, { propertyName: "contentComponent", first: true, predicate: DynamicPageContentComponent, descendants: true }, { propertyName: "contentComponents", predicate: DynamicPageContentComponent, descendants: true }], viewQueries: [{ propertyName: "_tabListComponent", first: true, predicate: TabListComponent, descendants: true }, { propertyName: "dynamicPageTabs", predicate: TabPanelComponent, descendants: true }, { propertyName: "_contentHostComponents", predicate: DynamicPageContentHostComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dynamic-page\n [autoResponsive]=\"autoResponsive\"\n [background]=\"background\"\n [size]=\"size\"\n [expandContent]=\"expandContent\"\n [offset]=\"offset\"\n [ariaLabel]=\"ariaLabel\"\n>\n <fd-dynamic-page-header\n *ngIf=\"titleComponent\"\n [title]=\"titleComponent.title\"\n [titleWrap]=\"titleComponent.titleWrap\"\n [subtitle]=\"titleComponent.subtitle\"\n [subtitleWrap]=\"titleComponent.subtitleWrap\"\n >\n <fd-breadcrumb>\n <ng-container [ngTemplateOutlet]=\"titleComponent.breadcrumbTemplate\"></ng-container>\n </fd-breadcrumb>\n\n <ng-container *ngIf=\"titleComponent._subtitleDirective\">\n <ng-container\n *fdDynamicPageHeaderSubtitle=\"let hidden\"\n [ngTemplateOutlet]=\"titleComponent._subtitleDirective.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: hidden }\"\n >\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"titleComponent._titleDirective\">\n <ng-container\n *fdDynamicPageHeaderTitle=\"let hidden\"\n [ngTemplateOutlet]=\"titleComponent._titleDirective.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: hidden }\"\n >\n </ng-container>\n </ng-container>\n\n <fd-dynamic-page-title-content *ngIf=\"titleComponent.keyInfoComponent\">\n <ng-container [ngTemplateOutlet]=\"titleComponent.keyInfoComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-title-content>\n\n <fd-facet type=\"image\" *ngIf=\"titleComponent.imageComponent\">\n <ng-container [ngTemplateOutlet]=\"titleComponent.imageComponent.contentTemplateRef\"></ng-container>\n </fd-facet>\n\n <fd-dynamic-page-global-actions *ngIf=\"titleComponent.globalActionsComponent\">\n <ng-container [ngTemplateOutlet]=\"titleComponent.globalActionsComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-global-actions>\n\n <fd-dynamic-page-layout-actions *ngIf=\"titleComponent.layoutActionsComponent\">\n <ng-container [ngTemplateOutlet]=\"titleComponent.layoutActionsComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-layout-actions>\n </fd-dynamic-page-header>\n\n <fd-dynamic-page-subheader\n *ngIf=\"headerComponent\"\n [collapsed]=\"headerComponent.collapsed\"\n [collapsible]=\"headerComponent.collapsible\"\n [pinnable]=\"headerComponent.pinnable\"\n [expandLabel]=\"headerComponent.expandLabel\"\n [collapseLabel]=\"headerComponent.collapseLabel\"\n [role]=\"headerComponent.role\"\n [id]=\"headerComponent.id\"\n [headerAriaLabel]=\"headerComponent.headerAriaLabel\"\n [pinAriaLabel]=\"headerComponent.pinAriaLabel\"\n [unpinAriaLabel]=\"headerComponent.unpinAriaLabel\"\n (collapsedChange)=\"headerComponent._onCollapseChange($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"headerComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-subheader>\n\n <fd-tab-list\n *ngIf=\"_isTabbed\"\n [stackContent]=\"stackContent\"\n maxContentHeight=\"auto\"\n (selectedTabChange)=\"_onSelectedTabChange($event)\"\n >\n <ng-container *ngFor=\"let tab of _tabs\">\n <fd-tab [title]=\"tab.tabLabel\" [id]=\"tab.id\">\n <fd-dynamic-page-content cdkScrollable>\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-content>\n </fd-tab>\n </ng-container>\n </fd-tab-list>\n\n <fd-dynamic-page-content *ngIf=\"!_isTabbed && contentComponent\" cdkScrollable>\n <ng-container [ngTemplateOutlet]=\"contentComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-content>\n\n <fd-dynamic-page-footer *ngIf=\"footerComponent\">\n <ng-container [ngTemplateOutlet]=\"footerComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-footer>\n</fd-dynamic-page>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\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-dynamic-page{-webkit-box-sizing:border-box;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;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page:after,.fd-dynamic-page:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__header-fixed{left:0;position:fixed;right:0;top:0;z-index:3}.fd-dynamic-page__header{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;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;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__header:after,.fd-dynamic-page__header:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-area{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;word-wrap:break-word;background-color:var(--sapObjectHeader_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;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:3rem;padding:0;z-index:1}.fd-dynamic-page__title-area:after,.fd-dynamic-page__title-area:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-area.is-focus,.fd-dynamic-page__title-area:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.25rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:1}.fd-dynamic-page__title-area.is-hover,.fd-dynamic-page__title-area:hover{background:var(--sapObjectHeader_Hover_Background);border-bottom:var(--fdDynamicPage_Hover_Border_Bottom);cursor:pointer}.fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page__title-area--collapsed .fd-dynamic-page__title{font-size:var(--fdDynamicPage_Title_Collapsed_Font_Size)}.fd-dynamic-page__title-area[aria-hidden=true]{display:none}.fd-dynamic-page__main-container{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;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;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__main-container:after,.fd-dynamic-page__main-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-container{-webkit-box-sizing:border-box;align-items:center;border:0;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;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__title-container:after,.fd-dynamic-page__title-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb{-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:.5rem 0 .25rem}.fd-dynamic-page__breadcrumb:after,.fd-dynamic-page__breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb-title-container{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:0;padding:0}.fd-dynamic-page__breadcrumb-title-container:after,.fd-dynamic-page__breadcrumb-title-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb-container{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;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:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__breadcrumb-container:after,.fd-dynamic-page__breadcrumb-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdDynamicPage_Title_Color);font-family:var(--sapFontFamily);font-family:var(--fdDynamicPage_Title_Font_Family);font-size:var(--sapFontSize);font-size:var(--fdDynamicPage_Title_Font_Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__title:after,.fd-dynamic-page__title:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title .fd-link{color:var(--sapGroup_TitleTextColor);font-size:var(--sapFontHeader3Size);max-width:100%;overflow:hidden;padding:0;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}.fd-dynamic-page__title--wrap{white-space:normal}.fd-dynamic-page__subtitle{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdDynamicPage_Subtitle_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__subtitle:after,.fd-dynamic-page__subtitle:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__subtitle--wrap{white-space:normal}.fd-dynamic-page__title-content{-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;overflow:hidden;padding:0 0 0 1rem;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.fd-dynamic-page__title-content:after,.fd-dynamic-page__title-content:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-content[dir=rtl],[dir=rtl] .fd-dynamic-page__title-content{padding:0 1rem 0 0}.fd-dynamic-page__title-subtitle-container{-webkit-box-sizing:border-box;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;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__title-subtitle-container:after,.fd-dynamic-page__title-subtitle-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__toolbar-container{-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;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-dynamic-page__toolbar-container:after,.fd-dynamic-page__toolbar-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__toolbar-container[dir=rtl],[dir=rtl] .fd-dynamic-page__toolbar-container{margin-left:0;margin-right:auto}.fd-dynamic-page .fd-dynamic-page__toolbar{background:transparent;margin:0;padding:0 0 0 1rem}.fd-dynamic-page .fd-dynamic-page__toolbar[dir=rtl],[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar{padding-left:0;padding-right:1rem}.fd-dynamic-page .fd-dynamic-page__toolbar--actions,.fd-dynamic-page .fd-dynamic-page__toolbar--actions[dir=rtl],.fd-dynamic-page .fd-dynamic-page__toolbar--content,.fd-dynamic-page .fd-dynamic-page__toolbar--content[dir=rtl],[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar--actions,[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar--content{padding:0}.fd-dynamic-page__summarized-title-area{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;word-wrap:break-word;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background:var(--sapObjectHeader_Background);border:0;box-shadow:var(--sapContent_HeaderShadow);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:2rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;z-index:1}.fd-dynamic-page__summarized-title-area:after,.fd-dynamic-page__summarized-title-area:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__summarized-title-area.is-focus,.fd-dynamic-page__summarized-title-area:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.25rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-dynamic-page__summarized-title-area--no-shadow{box-shadow:none}.fd-dynamic-page__summarized-title-area[aria-hidden=true]{display:none}.fd-dynamic-page__summarized-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__summarized-title:after,.fd-dynamic-page__summarized-title:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-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}.fd-dynamic-page__collapsible-header-container:after,.fd-dynamic-page__collapsible-header-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header{-webkit-box-sizing:border-box;background-color:var(--sapObjectHeader_Background);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:1rem 0}.fd-dynamic-page__collapsible-header:after,.fd-dynamic-page__collapsible-header:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header[aria-hidden=true]{display:none}.fd-dynamic-page .fd-dynamic-page__tabs{margin:0;padding:0}.fd-dynamic-page .fd-dynamic-page__tabs--overflow{overflow:hidden}.fd-dynamic-page .fd-dynamic-page__tabs--add-shadow,.fd-dynamic-page__collapsible-header-visibility-container{box-shadow:var(--sapContent_HeaderShadow)}.fd-dynamic-page__collapsible-header-visibility-container{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:var(--sapObjectHeader_Background);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;min-height:.0625rem;padding:0;z-index:2}.fd-dynamic-page__collapsible-header-visibility-container:after,.fd-dynamic-page__collapsible-header-visibility-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-visibility-container--left-gradient{background-image:var(--fdDynamicPage_Button_Left_Gradient);height:.0625rem;width:4rem}.fd-dynamic-page__collapsible-header-visibility-container--left-gradient[dir=rtl],[dir=rtl] .fd-dynamic-page__collapsible-header-visibility-container--left-gradient{background-image:var(--fdDynamicPage_Button_Right_Gradient)}.fd-dynamic-page__collapsible-header-visibility-container--right-gradient{background-image:var(--fdDynamicPage_Button_Right_Gradient);height:.0625rem;width:4rem}.fd-dynamic-page__collapsible-header-visibility-container--right-gradient[dir=rtl],[dir=rtl] .fd-dynamic-page__collapsible-header-visibility-container--right-gradient{background-image:var(--fdDynamicPage_Button_Left_Gradient)}.fd-dynamic-page__collapsible-header-visibility-container--button-group{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:var(--fdDynamicPage_Button_Group_Background);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:.0625rem;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:4.25rem;z-index:1}.fd-dynamic-page__collapsible-header-visibility-container--button-group:after,.fd-dynamic-page__collapsible-header-visibility-container--button-group:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-visibility-container[aria-hidden=true]{display:none}.fd-dynamic-page__collapsible-header-visibility-container--no-shadow{box-shadow:none}.fd-dynamic-page__collapse-button,.fd-dynamic-page__expand-button,.fd-dynamic-page__pin-button{--fdButtonBackgroundColor:var(--fdDynamicPage_Button_Pin_Background);height:1.5rem;margin:0 .25rem;min-width:1.5rem;padding:0;width:1.5rem}.fd-dynamic-page__collapse-button:before,.fd-dynamic-page__expand-button:before,.fd-dynamic-page__pin-button:before{bottom:-.25rem;height:2rem;top:-.25rem;width:100%}.fd-dynamic-page__collapse-button[aria-hidden=true],.fd-dynamic-page__expand-button[aria-hidden=true],.fd-dynamic-page__pin-button[aria-hidden=true]{display:none}.fd-dynamic-page__content{-webkit-box-sizing:border-box;background-color:var(--sapBackgroundColor);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;overflow-y:auto;padding:0}.fd-dynamic-page__content:after,.fd-dynamic-page__content:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__footer{bottom:0;left:0;margin:0 .5rem .5rem;position:fixed;right:0}.fd-dynamic-page--sm .fd-dynamic-page__title-area{padding:.5rem 1rem}.fd-dynamic-page--sm .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--sm .fd-dynamic-page__collapsible-header,.fd-dynamic-page--sm .fd-dynamic-page__content{padding:1rem}.fd-dynamic-page--sm .fd-dynamic-page__tabs{padding:0 1rem}.fd-dynamic-page--sm .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--sm .fd-dynamic-page__breadcrumb{padding:0}.fd-dynamic-page--sm .fd-dynamic-page__title-container{align-items:center}.fd-dynamic-page--sm .fd-dynamic-page__toolbar{margin-left:auto;padding-left:1rem}.fd-dynamic-page--sm .fd-dynamic-page__toolbar[dir=rtl],[dir=rtl] .fd-dynamic-page--sm .fd-dynamic-page__toolbar{margin-left:0;margin-right:auto;padding-left:0;padding-right:1rem}.fd-dynamic-page--sm .fd-dynamic-page__toolbar--content{margin-left:0}.fd-dynamic-page--sm .fd-dynamic-page__toolbar--content[dir=rtl],[dir=rtl] .fd-dynamic-page--sm .fd-dynamic-page__toolbar--content{margin-right:0}.fd-dynamic-page--lg .fd-dynamic-page__title-area,.fd-dynamic-page--md .fd-dynamic-page__title-area{padding:.5rem 2rem}.fd-dynamic-page--lg .fd-dynamic-page__title-area--collapsed,.fd-dynamic-page--md .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--lg .fd-dynamic-page__collapsible-header,.fd-dynamic-page--lg .fd-dynamic-page__content,.fd-dynamic-page--md .fd-dynamic-page__collapsible-header,.fd-dynamic-page--md .fd-dynamic-page__content{padding:1rem 2rem}.fd-dynamic-page--lg .fd-dynamic-page__tabs,.fd-dynamic-page--md .fd-dynamic-page__tabs{padding:0 2rem}.fd-dynamic-page--lg .fd-dynamic-page__summarized-title-area,.fd-dynamic-page--md .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--xl .fd-dynamic-page__title-area{padding:.5rem 3rem}.fd-dynamic-page--xl .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--xl .fd-dynamic-page__collapsible-header,.fd-dynamic-page--xl .fd-dynamic-page__content{padding:1rem 3rem}.fd-dynamic-page--xl .fd-dynamic-page__tabs{padding:0 3rem}.fd-dynamic-page--xl .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--md .fd-dynamic-page__toolbar{padding:0}.fd-dynamic-page--list-bg .fd-dynamic-page__content{background-color:var(--fdDynamicPage_Content_List_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__content{background-color:var(--fdDynamicPage_Content_Transparent_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__title-area{background:var(--fdDynamicPage_Title_Header_Transparent_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__collapsible-header{background-color:var(--fdDynamicPage_Title_Header_Transparent_Background)}.fd-dynamic-page{display:flex;flex-direction:column;height:100%;width:100%}.fd-dynamic-page .fd-dynamic-page__header{z-index:2}.fd-dynamic-page .fd-dynamic-page__content,.fd-dynamic-page .fd-dynamic-page__tabs--overflow{display:block;flex:1}.fd-dynamic-page .fd-dynamic-page__tabs--overflow{display:flex}.fd-dynamic-page .fd-dynamic-page__tabs--overflow .fd-tabs-custom{height:100%;display:flex;flex-direction:column}.fd-dynamic-page .fd-dynamic-page__tabs--overflow .fd-tabs__content{flex:1;display:flex}.fd-dynamic-page .fd-dynamic-page__tabs--overflow .fd-tabs__panel.is-expanded{display:flex}.fd-dynamic-page .footer-spacer{height:3rem}.fd-dynamic-page .content-sticker{position:static}.fd-dynamic-page .fd-dynamic-page__header--not-collapsible .fd-dynamic-page__title-area.is-hover,.fd-dynamic-page .fd-dynamic-page__header--not-collapsible .fd-dynamic-page__title-area:hover{background-color:var(--sapObjectHeader_Background, #fff);cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i2.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i3.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i3.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap"] }, { kind: "component", type: i3.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i3.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i3.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "role", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i3.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i3.DynamicPageTitleContentComponent, selector: "fd-dynamic-page-title-content" }, { kind: "directive", type: i3.DynamicPageHeaderSubtitleDirective, selector: "[fdDynamicPageHeaderSubtitle]" }, { kind: "directive", type: i3.DynamicPageHeaderTitleDirective, selector: "[fdDynamicPageHeaderTitle]" }, { kind: "component", type: i4.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["containerElement", "reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "directive", type: i5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i6.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "id", "alignEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
156
156
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicPageComponent, decorators: [{
157
157
  type: Component,
158
158
  args: [{ selector: 'fdp-dynamic-page', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [DynamicPageService], template: "<fd-dynamic-page\n [autoResponsive]=\"autoResponsive\"\n [background]=\"background\"\n [size]=\"size\"\n [expandContent]=\"expandContent\"\n [offset]=\"offset\"\n [ariaLabel]=\"ariaLabel\"\n>\n <fd-dynamic-page-header\n *ngIf=\"titleComponent\"\n [title]=\"titleComponent.title\"\n [titleWrap]=\"titleComponent.titleWrap\"\n [subtitle]=\"titleComponent.subtitle\"\n [subtitleWrap]=\"titleComponent.subtitleWrap\"\n >\n <fd-breadcrumb>\n <ng-container [ngTemplateOutlet]=\"titleComponent.breadcrumbTemplate\"></ng-container>\n </fd-breadcrumb>\n\n <ng-container *ngIf=\"titleComponent._subtitleDirective\">\n <ng-container\n *fdDynamicPageHeaderSubtitle=\"let hidden\"\n [ngTemplateOutlet]=\"titleComponent._subtitleDirective.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: hidden }\"\n >\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"titleComponent._titleDirective\">\n <ng-container\n *fdDynamicPageHeaderTitle=\"let hidden\"\n [ngTemplateOutlet]=\"titleComponent._titleDirective.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: hidden }\"\n >\n </ng-container>\n </ng-container>\n\n <fd-dynamic-page-title-content *ngIf=\"titleComponent.keyInfoComponent\">\n <ng-container [ngTemplateOutlet]=\"titleComponent.keyInfoComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-title-content>\n\n <fd-facet type=\"image\" *ngIf=\"titleComponent.imageComponent\">\n <ng-container [ngTemplateOutlet]=\"titleComponent.imageComponent.contentTemplateRef\"></ng-container>\n </fd-facet>\n\n <fd-dynamic-page-global-actions *ngIf=\"titleComponent.globalActionsComponent\">\n <ng-container [ngTemplateOutlet]=\"titleComponent.globalActionsComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-global-actions>\n\n <fd-dynamic-page-layout-actions *ngIf=\"titleComponent.layoutActionsComponent\">\n <ng-container [ngTemplateOutlet]=\"titleComponent.layoutActionsComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-layout-actions>\n </fd-dynamic-page-header>\n\n <fd-dynamic-page-subheader\n *ngIf=\"headerComponent\"\n [collapsed]=\"headerComponent.collapsed\"\n [collapsible]=\"headerComponent.collapsible\"\n [pinnable]=\"headerComponent.pinnable\"\n [expandLabel]=\"headerComponent.expandLabel\"\n [collapseLabel]=\"headerComponent.collapseLabel\"\n [role]=\"headerComponent.role\"\n [id]=\"headerComponent.id\"\n [headerAriaLabel]=\"headerComponent.headerAriaLabel\"\n [pinAriaLabel]=\"headerComponent.pinAriaLabel\"\n [unpinAriaLabel]=\"headerComponent.unpinAriaLabel\"\n (collapsedChange)=\"headerComponent._onCollapseChange($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"headerComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-subheader>\n\n <fd-tab-list\n *ngIf=\"_isTabbed\"\n [stackContent]=\"stackContent\"\n maxContentHeight=\"auto\"\n (selectedTabChange)=\"_onSelectedTabChange($event)\"\n >\n <ng-container *ngFor=\"let tab of _tabs\">\n <fd-tab [title]=\"tab.tabLabel\" [id]=\"tab.id\">\n <fd-dynamic-page-content cdkScrollable>\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-content>\n </fd-tab>\n </ng-container>\n </fd-tab-list>\n\n <fd-dynamic-page-content *ngIf=\"!_isTabbed && contentComponent\" cdkScrollable>\n <ng-container [ngTemplateOutlet]=\"contentComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-content>\n\n <fd-dynamic-page-footer *ngIf=\"footerComponent\">\n <ng-container [ngTemplateOutlet]=\"footerComponent.contentTemplateRef\"></ng-container>\n </fd-dynamic-page-footer>\n</fd-dynamic-page>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\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-dynamic-page{-webkit-box-sizing:border-box;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;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page:after,.fd-dynamic-page:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__header-fixed{left:0;position:fixed;right:0;top:0;z-index:3}.fd-dynamic-page__header{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;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;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__header:after,.fd-dynamic-page__header:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-area{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;word-wrap:break-word;background-color:var(--sapObjectHeader_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;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:3rem;padding:0;z-index:1}.fd-dynamic-page__title-area:after,.fd-dynamic-page__title-area:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-area.is-focus,.fd-dynamic-page__title-area:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.25rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:1}.fd-dynamic-page__title-area.is-hover,.fd-dynamic-page__title-area:hover{background:var(--sapObjectHeader_Hover_Background);border-bottom:var(--fdDynamicPage_Hover_Border_Bottom);cursor:pointer}.fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page__title-area--collapsed .fd-dynamic-page__title{font-size:var(--fdDynamicPage_Title_Collapsed_Font_Size)}.fd-dynamic-page__title-area[aria-hidden=true]{display:none}.fd-dynamic-page__main-container{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;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;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__main-container:after,.fd-dynamic-page__main-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-container{-webkit-box-sizing:border-box;align-items:center;border:0;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;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__title-container:after,.fd-dynamic-page__title-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb{-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:.5rem 0 .25rem}.fd-dynamic-page__breadcrumb:after,.fd-dynamic-page__breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb-title-container{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:0;padding:0}.fd-dynamic-page__breadcrumb-title-container:after,.fd-dynamic-page__breadcrumb-title-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__breadcrumb-container{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;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:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dynamic-page__breadcrumb-container:after,.fd-dynamic-page__breadcrumb-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdDynamicPage_Title_Color);font-family:var(--sapFontFamily);font-family:var(--fdDynamicPage_Title_Font_Family);font-size:var(--sapFontSize);font-size:var(--fdDynamicPage_Title_Font_Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__title:after,.fd-dynamic-page__title:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title .fd-link{color:var(--sapGroup_TitleTextColor);font-size:var(--sapFontHeader3Size);max-width:100%;overflow:hidden;padding:0;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}.fd-dynamic-page__title--wrap{white-space:normal}.fd-dynamic-page__subtitle{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdDynamicPage_Subtitle_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__subtitle:after,.fd-dynamic-page__subtitle:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__subtitle--wrap{white-space:normal}.fd-dynamic-page__title-content{-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;overflow:hidden;padding:0 0 0 1rem;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.fd-dynamic-page__title-content:after,.fd-dynamic-page__title-content:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__title-content[dir=rtl],[dir=rtl] .fd-dynamic-page__title-content{padding:0 1rem 0 0}.fd-dynamic-page__title-subtitle-container{-webkit-box-sizing:border-box;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;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__title-subtitle-container:after,.fd-dynamic-page__title-subtitle-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__toolbar-container{-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;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-dynamic-page__toolbar-container:after,.fd-dynamic-page__toolbar-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__toolbar-container[dir=rtl],[dir=rtl] .fd-dynamic-page__toolbar-container{margin-left:0;margin-right:auto}.fd-dynamic-page .fd-dynamic-page__toolbar{background:transparent;margin:0;padding:0 0 0 1rem}.fd-dynamic-page .fd-dynamic-page__toolbar[dir=rtl],[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar{padding-left:0;padding-right:1rem}.fd-dynamic-page .fd-dynamic-page__toolbar--actions,.fd-dynamic-page .fd-dynamic-page__toolbar--actions[dir=rtl],.fd-dynamic-page .fd-dynamic-page__toolbar--content,.fd-dynamic-page .fd-dynamic-page__toolbar--content[dir=rtl],[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar--actions,[dir=rtl] .fd-dynamic-page .fd-dynamic-page__toolbar--content{padding:0}.fd-dynamic-page__summarized-title-area{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;word-wrap:break-word;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background:var(--sapObjectHeader_Background);border:0;box-shadow:var(--sapContent_HeaderShadow);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:2rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;z-index:1}.fd-dynamic-page__summarized-title-area:after,.fd-dynamic-page__summarized-title-area:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__summarized-title-area.is-focus,.fd-dynamic-page__summarized-title-area:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.25rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-dynamic-page__summarized-title-area--no-shadow{box-shadow:none}.fd-dynamic-page__summarized-title-area[aria-hidden=true]{display:none}.fd-dynamic-page__summarized-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-dynamic-page__summarized-title:after,.fd-dynamic-page__summarized-title:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-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}.fd-dynamic-page__collapsible-header-container:after,.fd-dynamic-page__collapsible-header-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header{-webkit-box-sizing:border-box;background-color:var(--sapObjectHeader_Background);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:1rem 0}.fd-dynamic-page__collapsible-header:after,.fd-dynamic-page__collapsible-header:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header[aria-hidden=true]{display:none}.fd-dynamic-page .fd-dynamic-page__tabs{margin:0;padding:0}.fd-dynamic-page .fd-dynamic-page__tabs--overflow{overflow:hidden}.fd-dynamic-page .fd-dynamic-page__tabs--add-shadow,.fd-dynamic-page__collapsible-header-visibility-container{box-shadow:var(--sapContent_HeaderShadow)}.fd-dynamic-page__collapsible-header-visibility-container{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:var(--sapObjectHeader_Background);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;min-height:.0625rem;padding:0;z-index:2}.fd-dynamic-page__collapsible-header-visibility-container:after,.fd-dynamic-page__collapsible-header-visibility-container:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-visibility-container--left-gradient{background-image:var(--fdDynamicPage_Button_Left_Gradient);height:.0625rem;width:4rem}.fd-dynamic-page__collapsible-header-visibility-container--left-gradient[dir=rtl],[dir=rtl] .fd-dynamic-page__collapsible-header-visibility-container--left-gradient{background-image:var(--fdDynamicPage_Button_Right_Gradient)}.fd-dynamic-page__collapsible-header-visibility-container--right-gradient{background-image:var(--fdDynamicPage_Button_Right_Gradient);height:.0625rem;width:4rem}.fd-dynamic-page__collapsible-header-visibility-container--right-gradient[dir=rtl],[dir=rtl] .fd-dynamic-page__collapsible-header-visibility-container--right-gradient{background-image:var(--fdDynamicPage_Button_Left_Gradient)}.fd-dynamic-page__collapsible-header-visibility-container--button-group{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:var(--fdDynamicPage_Button_Group_Background);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:.0625rem;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:4.25rem;z-index:1}.fd-dynamic-page__collapsible-header-visibility-container--button-group:after,.fd-dynamic-page__collapsible-header-visibility-container--button-group:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__collapsible-header-visibility-container[aria-hidden=true]{display:none}.fd-dynamic-page__collapsible-header-visibility-container--no-shadow{box-shadow:none}.fd-dynamic-page__collapse-button,.fd-dynamic-page__expand-button,.fd-dynamic-page__pin-button{--fdButtonBackgroundColor:var(--fdDynamicPage_Button_Pin_Background);height:1.5rem;margin:0 .25rem;min-width:1.5rem;padding:0;width:1.5rem}.fd-dynamic-page__collapse-button:before,.fd-dynamic-page__expand-button:before,.fd-dynamic-page__pin-button:before{bottom:-.25rem;height:2rem;top:-.25rem;width:100%}.fd-dynamic-page__collapse-button[aria-hidden=true],.fd-dynamic-page__expand-button[aria-hidden=true],.fd-dynamic-page__pin-button[aria-hidden=true]{display:none}.fd-dynamic-page__content{-webkit-box-sizing:border-box;background-color:var(--sapBackgroundColor);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;overflow-y:auto;padding:0}.fd-dynamic-page__content:after,.fd-dynamic-page__content:before{box-sizing:inherit;font-size:inherit}.fd-dynamic-page__footer{bottom:0;left:0;margin:0 .5rem .5rem;position:fixed;right:0}.fd-dynamic-page--sm .fd-dynamic-page__title-area{padding:.5rem 1rem}.fd-dynamic-page--sm .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--sm .fd-dynamic-page__collapsible-header,.fd-dynamic-page--sm .fd-dynamic-page__content{padding:1rem}.fd-dynamic-page--sm .fd-dynamic-page__tabs{padding:0 1rem}.fd-dynamic-page--sm .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--sm .fd-dynamic-page__breadcrumb{padding:0}.fd-dynamic-page--sm .fd-dynamic-page__title-container{align-items:center}.fd-dynamic-page--sm .fd-dynamic-page__toolbar{margin-left:auto;padding-left:1rem}.fd-dynamic-page--sm .fd-dynamic-page__toolbar[dir=rtl],[dir=rtl] .fd-dynamic-page--sm .fd-dynamic-page__toolbar{margin-left:0;margin-right:auto;padding-left:0;padding-right:1rem}.fd-dynamic-page--sm .fd-dynamic-page__toolbar--content{margin-left:0}.fd-dynamic-page--sm .fd-dynamic-page__toolbar--content[dir=rtl],[dir=rtl] .fd-dynamic-page--sm .fd-dynamic-page__toolbar--content{margin-right:0}.fd-dynamic-page--lg .fd-dynamic-page__title-area,.fd-dynamic-page--md .fd-dynamic-page__title-area{padding:.5rem 2rem}.fd-dynamic-page--lg .fd-dynamic-page__title-area--collapsed,.fd-dynamic-page--md .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--lg .fd-dynamic-page__collapsible-header,.fd-dynamic-page--lg .fd-dynamic-page__content,.fd-dynamic-page--md .fd-dynamic-page__collapsible-header,.fd-dynamic-page--md .fd-dynamic-page__content{padding:1rem 2rem}.fd-dynamic-page--lg .fd-dynamic-page__tabs,.fd-dynamic-page--md .fd-dynamic-page__tabs{padding:0 2rem}.fd-dynamic-page--lg .fd-dynamic-page__summarized-title-area,.fd-dynamic-page--md .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--xl .fd-dynamic-page__title-area{padding:.5rem 3rem}.fd-dynamic-page--xl .fd-dynamic-page__title-area--collapsed{padding-bottom:1rem}.fd-dynamic-page--xl .fd-dynamic-page__collapsible-header,.fd-dynamic-page--xl .fd-dynamic-page__content{padding:1rem 3rem}.fd-dynamic-page--xl .fd-dynamic-page__tabs{padding:0 3rem}.fd-dynamic-page--xl .fd-dynamic-page__summarized-title-area{padding:1rem}.fd-dynamic-page--md .fd-dynamic-page__toolbar{padding:0}.fd-dynamic-page--list-bg .fd-dynamic-page__content{background-color:var(--fdDynamicPage_Content_List_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__content{background-color:var(--fdDynamicPage_Content_Transparent_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__title-area{background:var(--fdDynamicPage_Title_Header_Transparent_Background)}.fd-dynamic-page--transparent-bg .fd-dynamic-page__collapsible-header{background-color:var(--fdDynamicPage_Title_Header_Transparent_Background)}.fd-dynamic-page{display:flex;flex-direction:column;height:100%;width:100%}.fd-dynamic-page .fd-dynamic-page__header{z-index:2}.fd-dynamic-page .fd-dynamic-page__content,.fd-dynamic-page .fd-dynamic-page__tabs--overflow{display:block;flex:1}.fd-dynamic-page .fd-dynamic-page__tabs--overflow{display:flex}.fd-dynamic-page .fd-dynamic-page__tabs--overflow .fd-tabs-custom{height:100%;display:flex;flex-direction:column}.fd-dynamic-page .fd-dynamic-page__tabs--overflow .fd-tabs__content{flex:1;display:flex}.fd-dynamic-page .fd-dynamic-page__tabs--overflow .fd-tabs__panel.is-expanded{display:flex}.fd-dynamic-page .footer-spacer{height:3rem}.fd-dynamic-page .content-sticker{position:static}.fd-dynamic-page .fd-dynamic-page__header--not-collapsible .fd-dynamic-page__title-area.is-hover,.fd-dynamic-page .fd-dynamic-page__header--not-collapsible .fd-dynamic-page__title-area:hover{background-color:var(--sapObjectHeader_Background, #fff);cursor:default}\n"] }]
package/esm2020/form/combobox/combobox/combobox.component.mjs CHANGED
@@ -181,7 +181,7 @@ ComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
181
181
  ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ComboboxComponent, selector: "fdp-combobox", outputs: { selectionChange: "selectionChange" }, providers: [
182
182
  { provide: FD_FORM_FIELD_CONTROL, useExisting: ComboboxComponent, multi: true },
183
183
  contentDensityObserverProviders()
184
- ], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n <fd-popover\n [isOpen]=\"isOpen && _suggestions.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readonly\"\n [maxWidth]=\"autoResize ? null : minWidth\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n additionalBodyClass=\"fdp-combobox__popover\"\n >\n <fd-popover-control>\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n [button]=\"!readonly\"\n [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n [state]=\"mobile && isOpen ? null : state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [isControl]=\"true\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled\"\n [glyphAriaLabel]=\"ariaLabel\"\n (click)=\"openInMobileMode()\"\n >\n <input\n #searchInputElement\n fdp-auto-complete\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n (onComplete)=\"_onCompleteTerm($event)\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n [attr.aria-required]=\"required\"\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"id\"\n [name]=\"name\"\n (keydown)=\"onInputKeydownHandler($event)\"\n [disabled]=\"disabled\"\n [ngModel]=\"inputText\"\n (ngModelChange)=\"searchTermChanged($event)\"\n [placeholder]=\"placeholder\"\n (focus)=\"onTouched()\"\n (blur)=\"_onBlur($event)\"\n [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n [readonly]=\"readonly\"\n [attr.aria-readonly]=\"readonly\"\n />\n </fd-input-group>\n <div class=\"fdp-combobox__count-list-results\" role=\"status\" *ngIf=\"isOpen\">\n <ng-container *ngIf=\"_flatSuggestions?.length || '0' as count\">\n {{\n (count === 1\n ? 'platformCombobox.countListResultsSingular'\n : 'platformCombobox.countListResultsPlural'\n ) | fdTranslate : { count: count }\n }}\n </ng-container>\n </div>\n <fd-form-message\n *ngIf=\"mobile || isOpen ? null : !!stateMessage\"\n [type]=\"state\"\n [innerHtml]=\"stateMessage\"\n ></fd-form-message>\n </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #listTemplate>\n <ul\n fd-list\n [hasMessage]=\"!!stateMessage\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [dropdownMode]=\"true\"\n class=\"fdp-combobox__list {{ !!stateMessage && 'fdp-combobox__list--message' }}\"\n [id]=\"id + '-result'\"\n role=\"listbox\"\n [byline]=\"byline\"\n [attr.aria-labelledby]=\"id + '-search'\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n >\n <li\n *ngIf=\"stateMessage\"\n [attr.aria-label]=\"stateMessage\"\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [innerHtml]=\"stateMessage\"\n ></li>\n\n <ng-content></ng-content>\n <ng-container *ngIf=\"isGroup\">\n <ng-container *ngFor=\"let group of _suggestions\">\n <ng-container *ngIf=\"!groupItemTemplate\">\n <li fd-list-group-header role=\"option\">\n <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"groupItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-container>\n </ng-container>\n\n <li\n *ngFor=\"let optionItem of group.children; let i = index\"\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isGroup\">\n <li\n *ngFor=\"let optionItem of _suggestions; let i = index\"\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n <ng-container\n *ngIf=\"isSelectedOptionItem(optionItem) && !!selectedItemTemplate\"\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n\n <ng-container *ngIf=\"!(isSelectedOptionItem(optionItem) && selectedItemTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-container>\n\n <ng-container\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n <ng-container *ngIf=\"!optionItemTemplate\">\n <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight : inputText\"></span>\n </ng-container>\n\n <ng-container *ngIf=\"optionItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n <ng-container *ngIf=\"showSecondaryText\">\n <ng-container *ngIf=\"!secondaryItemTemplate\">\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n ></span>\n </ng-container>\n\n <ng-container *ngIf=\"secondaryItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i7.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "component", type: i8.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i8.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i8.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i9.AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: i10.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i10.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i3.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
184
+ ], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n <fd-popover\n [isOpen]=\"isOpen && _suggestions.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readonly\"\n [maxWidth]=\"autoResize ? null : minWidth\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n additionalBodyClass=\"fdp-combobox__popover\"\n >\n <fd-popover-control>\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n [button]=\"!readonly\"\n [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n [state]=\"mobile && isOpen ? null : state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [isControl]=\"true\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled\"\n [glyphAriaLabel]=\"ariaLabel\"\n (click)=\"openInMobileMode()\"\n >\n <input\n #searchInputElement\n fdp-auto-complete\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n (onComplete)=\"_onCompleteTerm($event)\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n [attr.aria-required]=\"required\"\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"id\"\n [name]=\"name\"\n (keydown)=\"onInputKeydownHandler($event)\"\n [disabled]=\"disabled\"\n [ngModel]=\"inputText\"\n (ngModelChange)=\"searchTermChanged($event)\"\n [placeholder]=\"placeholder\"\n (focus)=\"onTouched()\"\n (blur)=\"_onBlur($event)\"\n [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n [readonly]=\"readonly\"\n [attr.aria-readonly]=\"readonly\"\n />\n </fd-input-group>\n <div class=\"fdp-combobox__count-list-results\" role=\"status\" *ngIf=\"isOpen\">\n <ng-container *ngIf=\"_flatSuggestions?.length || '0' as count\">\n {{\n (count === 1\n ? 'platformCombobox.countListResultsSingular'\n : 'platformCombobox.countListResultsPlural'\n ) | fdTranslate : { count: count }\n }}\n </ng-container>\n </div>\n <fd-form-message\n *ngIf=\"mobile || isOpen ? null : !!stateMessage\"\n [type]=\"state\"\n [innerHtml]=\"stateMessage\"\n ></fd-form-message>\n </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #listTemplate>\n <ul\n fd-list\n [hasMessage]=\"!!stateMessage\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [dropdownMode]=\"true\"\n class=\"fdp-combobox__list {{ !!stateMessage && 'fdp-combobox__list--message' }}\"\n [id]=\"id + '-result'\"\n role=\"listbox\"\n [byline]=\"byline\"\n [attr.aria-labelledby]=\"id + '-search'\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n >\n <li\n *ngIf=\"stateMessage\"\n [attr.aria-label]=\"stateMessage\"\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [innerHtml]=\"stateMessage\"\n ></li>\n\n <ng-content></ng-content>\n <ng-container *ngIf=\"isGroup\">\n <ng-container *ngFor=\"let group of _suggestions\">\n <ng-container *ngIf=\"!groupItemTemplate\">\n <li fd-list-group-header role=\"option\">\n <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"groupItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-container>\n </ng-container>\n\n <li\n *ngFor=\"let optionItem of group.children; let i = index\"\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isGroup\">\n <li\n *ngFor=\"let optionItem of _suggestions; let i = index\"\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n <ng-container\n *ngIf=\"isSelectedOptionItem(optionItem) && !!selectedItemTemplate\"\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n\n <ng-container *ngIf=\"!(isSelectedOptionItem(optionItem) && selectedItemTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-container>\n\n <ng-container\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n <ng-container *ngIf=\"!optionItemTemplate\">\n <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight : inputText\"></span>\n </ng-container>\n\n <ng-container *ngIf=\"optionItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n <ng-container *ngIf=\"showSecondaryText\">\n <ng-container *ngIf=\"!secondaryItemTemplate\">\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n ></span>\n </ng-container>\n\n <ng-container *ngIf=\"secondaryItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i7.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "component", type: i8.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i8.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i8.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i9.AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: i10.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i10.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i3.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
185
185
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ComboboxComponent, decorators: [{
186
186
  type: Component,
187
187
  args: [{ selector: 'fdp-combobox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
package/esm2020/form/form-generator/controls/dynamic-form-generator-multi-input/dynamic-form-generator-multi-input.component.mjs CHANGED
@@ -11,9 +11,9 @@ export class DynamicFormGeneratorMultiInputComponent extends BaseDynamicFormGene
11
11
  }
12
12
  }
13
13
  DynamicFormGeneratorMultiInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicFormGeneratorMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
14
- DynamicFormGeneratorMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DynamicFormGeneratorMultiInputComponent, selector: "fdp-dynamic-form-generator-multi-input", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n <ng-container [formGroupName]=\"formGroupName\">\n <fdp-multi-input\n [id]=\"id\"\n [formControlName]=\"name\"\n [placeholder]=\"placeholder\"\n type=\"text\"\n [name]=\"name\"\n [dataSource]=\"choices\"\n displayKey=\"label\"\n lookupKey=\"label\"\n [autofocus]=\"true\"\n >\n </fdp-multi-input>\n </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i2.PlatformMultiInputComponent, selector: "fdp-multi-input", inputs: ["tokenHiddenId", "type", "autofocus", "selected", "selectionMode", "hasByLine", "disabled", "fillControlMode", "triggers", "closeOnOutsideClick", "addOnButtonClickFn", "displayFn"], outputs: ["selectionChange"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], encapsulation: i0.ViewEncapsulation.None });
14
+ DynamicFormGeneratorMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DynamicFormGeneratorMultiInputComponent, selector: "fdp-dynamic-form-generator-multi-input", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n <ng-container [formGroupName]=\"formGroupName\">\n <fdp-multi-input\n [id]=\"id\"\n [formControlName]=\"name\"\n [placeholder]=\"placeholder\"\n type=\"text\"\n [name]=\"name\"\n [dataSource]=\"choices\"\n displayKey=\"label\"\n lookupKey=\"label\"\n [autofocus]=\"true\"\n >\n </fdp-multi-input>\n </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i2.PlatformMultiInputComponent, selector: "fdp-multi-input", inputs: ["tokenHiddenId", "type", "autofocus", "glyphAriaLabel", "selected", "selectionMode", "hasByLine", "disabled", "fillControlMode", "triggers", "closeOnOutsideClick", "addOnButtonClickFn", "displayFn"], outputs: ["selectionChange"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], encapsulation: i0.ViewEncapsulation.None });
15
15
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicFormGeneratorMultiInputComponent, decorators: [{
16
16
  type: Component,
17
17
  args: [{ selector: 'fdp-dynamic-form-generator-multi-input', encapsulation: ViewEncapsulation.None, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], template: "<ng-container [formGroup]=\"form\">\n <ng-container [formGroupName]=\"formGroupName\">\n <fdp-multi-input\n [id]=\"id\"\n [formControlName]=\"name\"\n [placeholder]=\"placeholder\"\n type=\"text\"\n [name]=\"name\"\n [dataSource]=\"choices\"\n displayKey=\"label\"\n lookupKey=\"label\"\n [autofocus]=\"true\"\n >\n </fdp-multi-input>\n </ng-container>\n</ng-container>\n" }]
18
18
  }], ctorParameters: function () { return []; } });
19
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLWdlbmVyYXRvci1tdWx0aS1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3BsYXRmb3JtL3NyYy9saWIvZm9ybS9mb3JtLWdlbmVyYXRvci9jb250cm9scy9keW5hbWljLWZvcm0tZ2VuZXJhdG9yLW11bHRpLWlucHV0L2R5bmFtaWMtZm9ybS1nZW5lcmF0b3ItbXVsdGktaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9wbGF0Zm9ybS9zcmMvbGliL2Zvcm0vZm9ybS1nZW5lcmF0b3IvY29udHJvbHMvZHluYW1pYy1mb3JtLWdlbmVyYXRvci1tdWx0aS1pbnB1dC9keW5hbWljLWZvcm0tZ2VuZXJhdG9yLW11bHRpLWlucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFN0QsT0FBTyxFQUFFLCtCQUErQixFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFDNUYsT0FBTyxFQUFFLHdCQUF3QixFQUFFLDZCQUE2QixFQUFFLE1BQU0sMkJBQTJCLENBQUM7Ozs7QUFRcEcsTUFBTSxPQUFPLHVDQUF3QyxTQUFRLCtCQUErQjtJQUN4RixjQUFjO0lBQ2Q7UUFDSSxLQUFLLEVBQUUsQ0FBQztJQUNaLENBQUM7O29JQUpRLHVDQUF1Qzt3SEFBdkMsdUNBQXVDLHFHQ1hwRCxtZkFnQkEsby9CRFBtQixDQUFDLHdCQUF3QixFQUFFLDZCQUE2QixDQUFDOzJGQUUvRCx1Q0FBdUM7a0JBTm5ELFNBQVM7K0JBQ0ksd0NBQXdDLGlCQUVuQyxpQkFBaUIsQ0FBQyxJQUFJLGlCQUN0QixDQUFDLHdCQUF3QixFQUFFLDZCQUE2QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBCYXNlRHluYW1pY0Zvcm1HZW5lcmF0b3JDb250cm9sIH0gZnJvbSAnLi4vLi4vYmFzZS1keW5hbWljLWZvcm0tZ2VuZXJhdG9yLWNvbnRyb2wnO1xuaW1wb3J0IHsgZHluYW1pY0Zvcm1GaWVsZFByb3ZpZGVyLCBkeW5hbWljRm9ybUdyb3VwQ2hpbGRQcm92aWRlciB9IGZyb20gJy4uLy4uL3Byb3ZpZGVycy9wcm92aWRlcnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2ZkcC1keW5hbWljLWZvcm0tZ2VuZXJhdG9yLW11bHRpLWlucHV0JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZHluYW1pYy1mb3JtLWdlbmVyYXRvci1tdWx0aS1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICB2aWV3UHJvdmlkZXJzOiBbZHluYW1pY0Zvcm1GaWVsZFByb3ZpZGVyLCBkeW5hbWljRm9ybUdyb3VwQ2hpbGRQcm92aWRlcl1cbn0pXG5leHBvcnQgY2xhc3MgRHluYW1pY0Zvcm1HZW5lcmF0b3JNdWx0aUlucHV0Q29tcG9uZW50IGV4dGVuZHMgQmFzZUR5bmFtaWNGb3JtR2VuZXJhdG9yQ29udHJvbCB7XG4gICAgLyoqIEBoaWRkZW4gKi9cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgc3VwZXIoKTtcbiAgICB9XG59XG4iLCI8bmctY29udGFpbmVyIFtmb3JtR3JvdXBdPVwiZm9ybVwiPlxuICAgIDxuZy1jb250YWluZXIgW2Zvcm1Hcm91cE5hbWVdPVwiZm9ybUdyb3VwTmFtZVwiPlxuICAgICAgICA8ZmRwLW11bHRpLWlucHV0XG4gICAgICAgICAgICBbaWRdPVwiaWRcIlxuICAgICAgICAgICAgW2Zvcm1Db250cm9sTmFtZV09XCJuYW1lXCJcbiAgICAgICAgICAgIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiXG4gICAgICAgICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAgICAgICBbbmFtZV09XCJuYW1lXCJcbiAgICAgICAgICAgIFtkYXRhU291cmNlXT1cImNob2ljZXNcIlxuICAgICAgICAgICAgZGlzcGxheUtleT1cImxhYmVsXCJcbiAgICAgICAgICAgIGxvb2t1cEtleT1cImxhYmVsXCJcbiAgICAgICAgICAgIFthdXRvZm9jdXNdPVwidHJ1ZVwiXG4gICAgICAgID5cbiAgICAgICAgPC9mZHAtbXVsdGktaW5wdXQ+XG4gICAgPC9uZy1jb250YWluZXI+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==
19
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLWdlbmVyYXRvci1tdWx0aS1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3BsYXRmb3JtL3NyYy9saWIvZm9ybS9mb3JtLWdlbmVyYXRvci9jb250cm9scy9keW5hbWljLWZvcm0tZ2VuZXJhdG9yLW11bHRpLWlucHV0L2R5bmFtaWMtZm9ybS1nZW5lcmF0b3ItbXVsdGktaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9wbGF0Zm9ybS9zcmMvbGliL2Zvcm0vZm9ybS1nZW5lcmF0b3IvY29udHJvbHMvZHluYW1pYy1mb3JtLWdlbmVyYXRvci1tdWx0aS1pbnB1dC9keW5hbWljLWZvcm0tZ2VuZXJhdG9yLW11bHRpLWlucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFN0QsT0FBTyxFQUFFLCtCQUErQixFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFDNUYsT0FBTyxFQUFFLHdCQUF3QixFQUFFLDZCQUE2QixFQUFFLE1BQU0sMkJBQTJCLENBQUM7Ozs7QUFRcEcsTUFBTSxPQUFPLHVDQUF3QyxTQUFRLCtCQUErQjtJQUN4RixjQUFjO0lBQ2Q7UUFDSSxLQUFLLEVBQUUsQ0FBQztJQUNaLENBQUM7O29JQUpRLHVDQUF1Qzt3SEFBdkMsdUNBQXVDLHFHQ1hwRCxtZkFnQkEsc2dDRFBtQixDQUFDLHdCQUF3QixFQUFFLDZCQUE2QixDQUFDOzJGQUUvRCx1Q0FBdUM7a0JBTm5ELFNBQVM7K0JBQ0ksd0NBQXdDLGlCQUVuQyxpQkFBaUIsQ0FBQyxJQUFJLGlCQUN0QixDQUFDLHdCQUF3QixFQUFFLDZCQUE2QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBCYXNlRHluYW1pY0Zvcm1HZW5lcmF0b3JDb250cm9sIH0gZnJvbSAnLi4vLi4vYmFzZS1keW5hbWljLWZvcm0tZ2VuZXJhdG9yLWNvbnRyb2wnO1xuaW1wb3J0IHsgZHluYW1pY0Zvcm1GaWVsZFByb3ZpZGVyLCBkeW5hbWljRm9ybUdyb3VwQ2hpbGRQcm92aWRlciB9IGZyb20gJy4uLy4uL3Byb3ZpZGVycy9wcm92aWRlcnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2ZkcC1keW5hbWljLWZvcm0tZ2VuZXJhdG9yLW11bHRpLWlucHV0JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZHluYW1pYy1mb3JtLWdlbmVyYXRvci1tdWx0aS1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICB2aWV3UHJvdmlkZXJzOiBbZHluYW1pY0Zvcm1GaWVsZFByb3ZpZGVyLCBkeW5hbWljRm9ybUdyb3VwQ2hpbGRQcm92aWRlcl1cbn0pXG5leHBvcnQgY2xhc3MgRHluYW1pY0Zvcm1HZW5lcmF0b3JNdWx0aUlucHV0Q29tcG9uZW50IGV4dGVuZHMgQmFzZUR5bmFtaWNGb3JtR2VuZXJhdG9yQ29udHJvbCB7XG4gICAgLyoqIEBoaWRkZW4gKi9cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgc3VwZXIoKTtcbiAgICB9XG59XG4iLCI8bmctY29udGFpbmVyIFtmb3JtR3JvdXBdPVwiZm9ybVwiPlxuICAgIDxuZy1jb250YWluZXIgW2Zvcm1Hcm91cE5hbWVdPVwiZm9ybUdyb3VwTmFtZVwiPlxuICAgICAgICA8ZmRwLW11bHRpLWlucHV0XG4gICAgICAgICAgICBbaWRdPVwiaWRcIlxuICAgICAgICAgICAgW2Zvcm1Db250cm9sTmFtZV09XCJuYW1lXCJcbiAgICAgICAgICAgIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiXG4gICAgICAgICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAgICAgICBbbmFtZV09XCJuYW1lXCJcbiAgICAgICAgICAgIFtkYXRhU291cmNlXT1cImNob2ljZXNcIlxuICAgICAgICAgICAgZGlzcGxheUtleT1cImxhYmVsXCJcbiAgICAgICAgICAgIGxvb2t1cEtleT1cImxhYmVsXCJcbiAgICAgICAgICAgIFthdXRvZm9jdXNdPVwidHJ1ZVwiXG4gICAgICAgID5cbiAgICAgICAgPC9mZHAtbXVsdGktaW5wdXQ+XG4gICAgPC9uZy1jb250YWluZXI+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==
package/esm2020/form/multi-combobox/multi-combobox/multi-combobox.component.mjs CHANGED
@@ -299,7 +299,7 @@ MultiComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
299
299
  multi: true
300
300
  },
301
301
  contentDensityObserverProviders()
302
- ], viewQueries: [{ propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fdp-multi-combobox\">\n <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n <fd-popover\n *ngIf=\"!mobile\"\n additionalBodyClass=\"fd-popover-custom-list fdp-multi-combobox__list-container\"\n (isOpenChange)=\"popoverOpenChangeHandle($event)\"\n [isOpen]=\"isOpen\"\n [triggers]=\"[]\"\n [disabled]=\"disabled\"\n [fillControlMode]=\"fillControlMode\"\n >\n <fd-popover-control>\n <ng-container>\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n </ng-container>\n </fd-popover-control>\n <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n class=\"fdp-multi-combobox-input-group-custom\"\n [state]=\"state\"\n [buttonFocusable]=\"buttonFocusable\"\n [button]=\"!readonly\"\n [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n [isControl]=\"true\"\n [disabled]=\"disabled || readonly\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled || readonly\"\n [attr.aria-readonly]=\"readonly\"\n [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n (addOnButtonClicked)=\"_addOnClicked($event)\"\n (click)=\"mobile && !isOpen && onPrimaryButtonClick(false)\"\n (keydown)=\"navigateByTokens($event)\"\n >\n <fd-tokenizer\n #tokenizer\n [compactCollapse]=\"true\"\n *ngIf=\"_selectedSuggestions\"\n [tokenizerFocusable]=\"false\"\n class=\"fdp-multi-combobox-tokenizer-custom\"\n (moreClickedEvent)=\"moreClicked()\"\n >\n <fd-token\n [readOnly]=\"disabled\"\n (onCloseClick)=\"removeToken(token, $event)\"\n *ngFor=\"let token of _selectedSuggestions\"\n >\n {{ token.label }}\n </fd-token>\n\n <input\n #searchInputElement\n fdp-auto-complete\n (onComplete)=\"onCompleteTerm($event)\"\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"id\"\n [name]=\"name\"\n (keydown)=\"onInputKeydownHandler($event)\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"searchTermChanged()\"\n [placeholder]=\"placeholder\"\n (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n (blur)=\"!mobile && onBlur($event); tokenizer._hideTokens()\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"readonly\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-required]=\"required\"\n class=\"fd-tokenizer__input\"\n />\n </fd-tokenizer>\n </fd-input-group>\n\n <fd-form-message\n *ngIf=\"mobile && isOpen ? false : !!stateMessage\"\n [type]=\"state\"\n [innerHtml]=\"stateMessage\"\n ></fd-form-message>\n </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n class=\"fdp-multi-combobox-input-group-custom\"\n [state]=\"state\"\n [buttonFocusable]=\"false\"\n [isControl]=\"true\"\n [disabled]=\"disabled || readonly\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled || readonly\"\n [attr.aria-readonly]=\"readonly\"\n [glyphAriaLabel]=\"ariaLabel\"\n >\n <input\n fdp-auto-complete\n (onComplete)=\"onCompleteTerm($event)\"\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"id\"\n [name]=\"name\"\n (keydown)=\"onInputKeydownHandler($event)\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"searchTermChanged()\"\n [placeholder]=\"placeholder\"\n (focus)=\"onTouched()\"\n (blur)=\"!mobile && onBlur($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"readonly\"\n [attr.aria-readonly]=\"readonly\"\n />\n </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n <ul\n fd-list\n [hasMessage]=\"!!stateMessage\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [dropdownMode]=\"true\"\n class=\"fdp-multi-combobox__list fd-list--multi-input\"\n [id]=\"id + '-result'\"\n role=\"listbox\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [style.minWidth]=\"!mobile && minWidth + 'px'\"\n [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n [attr.aria-labelledby]=\"id + '-search'\"\n aria-multiselectable=\"true\"\n >\n <li\n *ngIf=\"stateMessage\"\n [attr.aria-label]=\"stateMessage\"\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [innerHtml]=\"stateMessage\"\n ></li>\n\n <ng-content></ng-content>\n <ng-container *ngIf=\"isGroup\">\n <ng-container *ngFor=\"let group of _suggestions\">\n <ng-container *ngIf=\"!groupItemTemplate\">\n <label fd-list-item fd-list-group-header role=\"group\">\n <span fd-list-title>{{ group.label }}</span>\n </label>\n </ng-container>\n\n <ng-container *ngIf=\"groupItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-container>\n </ng-container>\n\n <li\n *ngFor=\"let optionItem of group.children; let i = index\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (click)=\"!mobile && close()\"\n (keyDown)=\"onItemKeyDownHandler($event, i)\"\n [selected]=\"!!optionItem.selected\"\n >\n <fd-checkbox\n (click)=\"onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isGroup\">\n <li\n *ngFor=\"let optionItem of _suggestions; let i = index\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (click)=\"!mobile && onOptionClicked($event, i)\"\n (keyDown)=\"onItemKeyDownHandler($event, i)\"\n [selected]=\"!!optionItem.selected\"\n >\n <fd-checkbox\n (click)=\"onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n <ng-container\n *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n\n <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-container>\n\n <ng-container\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n <ng-container *ngIf=\"!optionItemTemplate\">\n <span\n fd-list-title\n [attr.title]=\"optionItem.label\"\n [innerHTML]=\"optionItem.label | highlight : inputText\"\n ></span>\n </ng-container>\n\n <ng-container *ngIf=\"optionItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n <ng-container *ngIf=\"showSecondaryText\">\n <ng-container *ngIf=\"!secondaryItemTemplate\">\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n ></span>\n </ng-container>\n\n <ng-container *ngIf=\"secondaryItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\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-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fdp-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}.fdp-multi-combobox-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fdp-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fdp-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i9.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: i10.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i10.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i10.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i10.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "component", type: i11.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i11.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i11.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i11.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i12.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i12.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i12.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i13.AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "pipe", type: i3.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i14.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
302
+ ], viewQueries: [{ propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fdp-multi-combobox\">\n <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n <fd-popover\n *ngIf=\"!mobile\"\n additionalBodyClass=\"fd-popover-custom-list fdp-multi-combobox__list-container\"\n (isOpenChange)=\"popoverOpenChangeHandle($event)\"\n [isOpen]=\"isOpen\"\n [triggers]=\"[]\"\n [disabled]=\"disabled\"\n [fillControlMode]=\"fillControlMode\"\n >\n <fd-popover-control>\n <ng-container>\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n </ng-container>\n </fd-popover-control>\n <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n class=\"fdp-multi-combobox-input-group-custom\"\n [state]=\"state\"\n [buttonFocusable]=\"buttonFocusable\"\n [button]=\"!readonly\"\n [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n [isControl]=\"true\"\n [disabled]=\"disabled || readonly\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled || readonly\"\n [attr.aria-readonly]=\"readonly\"\n [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n (addOnButtonClicked)=\"_addOnClicked($event)\"\n (click)=\"mobile && !isOpen && onPrimaryButtonClick(false)\"\n (keydown)=\"navigateByTokens($event)\"\n >\n <fd-tokenizer\n #tokenizer\n [compactCollapse]=\"true\"\n *ngIf=\"_selectedSuggestions\"\n [tokenizerFocusable]=\"false\"\n class=\"fdp-multi-combobox-tokenizer-custom\"\n (moreClickedEvent)=\"moreClicked()\"\n >\n <fd-token\n [readOnly]=\"disabled\"\n (onCloseClick)=\"removeToken(token, $event)\"\n *ngFor=\"let token of _selectedSuggestions\"\n >\n {{ token.label }}\n </fd-token>\n\n <input\n #searchInputElement\n fdp-auto-complete\n (onComplete)=\"onCompleteTerm($event)\"\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"id\"\n [name]=\"name\"\n (keydown)=\"onInputKeydownHandler($event)\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"searchTermChanged()\"\n [placeholder]=\"placeholder\"\n (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n (blur)=\"!mobile && onBlur($event); tokenizer._hideTokens()\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"readonly\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-required]=\"required\"\n class=\"fd-tokenizer__input\"\n />\n </fd-tokenizer>\n </fd-input-group>\n\n <fd-form-message\n *ngIf=\"mobile && isOpen ? false : !!stateMessage\"\n [type]=\"state\"\n [innerHtml]=\"stateMessage\"\n ></fd-form-message>\n </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n class=\"fdp-multi-combobox-input-group-custom\"\n [state]=\"state\"\n [buttonFocusable]=\"false\"\n [isControl]=\"true\"\n [disabled]=\"disabled || readonly\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled || readonly\"\n [attr.aria-readonly]=\"readonly\"\n [glyphAriaLabel]=\"ariaLabel\"\n >\n <input\n fdp-auto-complete\n (onComplete)=\"onCompleteTerm($event)\"\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"id\"\n [name]=\"name\"\n (keydown)=\"onInputKeydownHandler($event)\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"searchTermChanged()\"\n [placeholder]=\"placeholder\"\n (focus)=\"onTouched()\"\n (blur)=\"!mobile && onBlur($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"readonly\"\n [attr.aria-readonly]=\"readonly\"\n />\n </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n <ul\n fd-list\n [hasMessage]=\"!!stateMessage\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [dropdownMode]=\"true\"\n class=\"fdp-multi-combobox__list fd-list--multi-input\"\n [id]=\"id + '-result'\"\n role=\"listbox\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [style.minWidth]=\"!mobile && minWidth + 'px'\"\n [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n [attr.aria-labelledby]=\"id + '-search'\"\n aria-multiselectable=\"true\"\n >\n <li\n *ngIf=\"stateMessage\"\n [attr.aria-label]=\"stateMessage\"\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [innerHtml]=\"stateMessage\"\n ></li>\n\n <ng-content></ng-content>\n <ng-container *ngIf=\"isGroup\">\n <ng-container *ngFor=\"let group of _suggestions\">\n <ng-container *ngIf=\"!groupItemTemplate\">\n <label fd-list-item fd-list-group-header role=\"group\">\n <span fd-list-title>{{ group.label }}</span>\n </label>\n </ng-container>\n\n <ng-container *ngIf=\"groupItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-container>\n </ng-container>\n\n <li\n *ngFor=\"let optionItem of group.children; let i = index\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (click)=\"!mobile && close()\"\n (keyDown)=\"onItemKeyDownHandler($event, i)\"\n [selected]=\"!!optionItem.selected\"\n >\n <fd-checkbox\n (click)=\"onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isGroup\">\n <li\n *ngFor=\"let optionItem of _suggestions; let i = index\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (click)=\"!mobile && onOptionClicked($event, i)\"\n (keyDown)=\"onItemKeyDownHandler($event, i)\"\n [selected]=\"!!optionItem.selected\"\n >\n <fd-checkbox\n (click)=\"onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-container\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-container>\n </li>\n </ng-container>\n </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n <ng-container\n *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n\n <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-container>\n\n <ng-container\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n <ng-container *ngIf=\"!optionItemTemplate\">\n <span\n fd-list-title\n [attr.title]=\"optionItem.label\"\n [innerHTML]=\"optionItem.label | highlight : inputText\"\n ></span>\n </ng-container>\n\n <ng-container *ngIf=\"optionItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n <ng-container *ngIf=\"showSecondaryText\">\n <ng-container *ngIf=\"!secondaryItemTemplate\">\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n ></span>\n </ng-container>\n\n <ng-container *ngIf=\"secondaryItemTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\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-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fdp-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}.fdp-multi-combobox-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fdp-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fdp-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i9.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: i10.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i10.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i10.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i10.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "component", type: i11.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i11.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i11.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i11.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i12.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i12.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i12.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i13.AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "pipe", type: i3.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i14.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
303
303
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiComboboxComponent, decorators: [{
304
304
  type: Component,
305
305
  args: [{ selector: 'fdp-multi-combobox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [