barsa-sap-ui 2.0.132 → 2.0.134
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.
|
@@ -8934,11 +8934,11 @@ class FundamentalDynamicFormComponent extends BaseComponent {
|
|
|
8934
8934
|
this.layout2 = GetFormLayoutGrid(false, this.colXl, this.colLg, this.colMd);
|
|
8935
8935
|
}
|
|
8936
8936
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FundamentalDynamicFormComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8937
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: FundamentalDynamicFormComponent, selector: "bsu-fundamental-dynamic-form", inputs: { breadCrumbs: "breadCrumbs", toolbarVisible: "toolbarVisible", toolbarItems: "toolbarItems", layoutActions: "layoutActions", layout94: "layout94", parameters: "parameters", workflowPanelUi: "workflowPanelUi", context: "context", title: "title", subtitle: "subtitle", description: "description", facetList: "facetList", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", circleAvatar: "circleAvatar", rtl: "rtl", hideFooter: "hideFooter", hideTitle: "hideTitle", hideClose: "hideClose", hidePin: "hidePin", fullscreen: "fullscreen", mask: "mask", canSend: "canSend", contentIsPage: "contentIsPage", contentDensity: "contentDensity", deviceSize: "deviceSize", dirValue: "dirValue", landscape: "landscape", standalone: "standalone", modernTabs: "modernTabs", formVisibilityStatus: "formVisibilityStatus", layoutGridCol: "layoutGridCol", colLg: "colLg", colXl: "colXl", colMd: "colMd", footerDesign: "footerDesign", formContentMaxWidth: "formContentMaxWidth", workflowButtons: "workflowButtons" }, outputs: { toolbarClick: "toolbarClick", workflowChoiceClick: "workflowChoiceClick", close: "close", fullscreenRequest: "fullscreenRequest" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true, static: true }, { propertyName: "_tabListComponent", first: true, predicate: TabListComponent, descendants: true }, { propertyName: "_toolbarComponent", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }, { propertyName: "closeFormTemplate", first: true, predicate: ["closeForm"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (mask) {\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\n <bsu-mask size=\"m\"></bsu-mask>\n</div>\n}\n\n<fd-dynamic-page\n [size]=\"isMobile ? 'small' : 'large'\"\n [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\n [class.header-border]=\"!removeHeaderBorder\"\n [attr.isMobile]=\"isMobile\"\n [attr.contentIsPage]=\"contentIsPage\"\n mobile\n formClose\n [isMobile]=\"isMobile\"\n>\n <fd-dynamic-page-header\n [class.simple-title]=\"!description\"\n [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\n [subtitle]=\"subtitle | bbbTranslate\"\n [class.p-b0]=\"removeContentPadding\"\n [class.hide-title]=\"hideTitle === true && hideClose === true\"\n #titleRef\n >\n <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\n <fd-breadcrumb>\n @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\n breadCrumb.url; let i = $index; let last = $last) {\n <fd-breadcrumb-item>\n <bsu-breadcrumb\n [index]=\"i\"\n [isLast]=\"last\"\n [breadCrumb]=\"breadCrumb\"\n [allBreadCrumb]=\"breadCrumbs\"\n ></bsu-breadcrumb>\n </fd-breadcrumb-item>\n } }\n </fd-breadcrumb>\n </fd-dynamic-page-breadcrumb>\n <fd-dynamic-page-global-actions>\n <!-- global actions -->\n\n <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n <!-- added this because in mobile landscape toolbar disapper -->\n @if (toolbarVisible) {\n <bsu-form-toolbar\n [deviceSize]=\"deviceSize\"\n [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\n [dirValue]=\"dirValue\"\n [isFirefox]=\"isFirefox\"\n (toolbarClick)=\"toolbarClick.emit($event)\"\n #formToolbar\n ></bsu-form-toolbar>\n }\n </fd-dynamic-page-global-actions>\n <fd-dynamic-page-layout-actions>\n <!-- layout actions -->\n <!-- <div [formActions]=\"this.toolbar\"></div> -->\n @if (!hideClose) {\n <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n @if (deviceSize !== 's') {\n <fd-toolbar-separator></fd-toolbar-separator>\n }\n <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\n <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\n </fd-toolbar>\n }\n </fd-dynamic-page-layout-actions>\n </fd-dynamic-page-header>\n @if (description || facetList.length > 0 || workflowInfoText || avatar) {\n <fd-dynamic-page-subheader\n [class.header-no-description]=\"!(description || workflowInfoText)\"\n [class.no-pin]=\"hidePin\"\n [collapsible]=\"!!workflowInfoText || (facetList && facetList.length > 0)\"\n [pinnable]=\"true\"\n [collapsed]=\"(!facetList || facetList.length === 0) && !workflowInfoText\"\n >\n @if (workflowInfoText) {\n <fd-message-strip [type]=\"'warning'\" [dismissible]=\"false\">\n {{ workflowInfoText | bbbTranslate }}\n </fd-message-strip>\n }\n <fd-facet-group ariaLabel=\"Facet Group\">\n @if (avatar) {\n <fd-facet type=\"image\">\n <fd-avatar\n title=\"avatar\"\n [glyph]=\"avatar\"\n [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\n [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\n [transparent]=\"true\"\n [circle]=\"circleAvatar\"\n ></fd-avatar>\n <!-- <div\n class=\"fd-avatar fd-avatar--circle\"\n [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\n >\n <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\n </div> -->\n </fd-facet>\n } @for (facet of facetList; track facet) {\n <fd-facet\n [type]=\"facet.type\"\n [facetTitle]=\"facet.mo.Title | bbbTranslate\"\n [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\n >\n @for (item of facet.mo.ItemList?.MoDataList; track item) {\n <fd-facet-content>\n <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title }}</label>\n <fd-text [text]=\"item.Value | facetValue\" id=\"form-value-10\"></fd-text>\n </fd-facet-content>\n } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\n <span\n fd-object-status\n [status]=\"facet.mo.Status | facetValue\"\n [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue)\"\n [large]=\"facet.mo.IsLarge\"\n [title]=\"facet.mo.Text | facetValue\"\n [aria-label]=\"facet.mo.Text | facetValue\"\n [glyph]=\"facet.mo.Icon\"\n >\n </span>\n } @else {\n <bnrc-dynamic-component\n [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\n [class.fd-object-status--large]=\"facet.mo.IsLarge\"\n [component]=\"facet.mo.Component\"\n [value]=\"facet.mo.Text\"\n ></bnrc-dynamic-component>\n } @if (facet.mo.IsNumber && facet.type === 'key-value') {\n <fd-object-number\n [number]=\"facet.mo.Text | facetValue\"\n [large]=\"facet.mo.IsLarge\"\n [unit]=\"facet.mo.Unit | facetValue\"\n [status]=\"facet.mo.Status | facetValue\"\n [decimal]=\"facet.mo.DecimalValue | facetValue\"\n ></fd-object-number>\n } @if (facet.type === 'plain-text') {\n <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\n <fd-text [text]=\"facet.mo.Text | facetValue\" hyphenation=\"auto\"></fd-text>\n </div>\n } @if (facet.type === 'rating-indicator') {\n <fd-facet-content>\n <fd-rating-indicator\n style=\"pointer-events: none\"\n size=\"md\"\n [dynamicTextIndicator]=\"facet.mo.Footer\"\n [displayMode]=\"true\"\n [value]=\"facet.mo | facetValue: facet.type\"\n ></fd-rating-indicator>\n </fd-facet-content>\n } @if (facet.type === 'progress') {\n <div [style.width]=\"'10rem'\">\n <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\n <fd-progress-indicator\n style=\"width: 10r em\"\n [state]=\"facet.mo.State\"\n [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647'\"\n [valueNow]=\"facet.mo | facetValue: facet.type\"\n [valueMax]=\"10\"\n [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\n ></fd-progress-indicator>\n <!-- <ui5-progress-indicator\n style=\"width: 10rem\"\n [valueState]=\"facet.mo.State\"\n [value]=\"getNumber(facet.mo.Value)\"\n ></ui5-progress-indicator> -->\n </div>\n } @if (facet.type === 'microcharts') {\n <div>\n <label wrap>in progress ...</label>\n </div>\n }\n </fd-facet>\n }\n </fd-facet-group>\n @if (description) {\n <span>{{ description }}</span>\n }\n </fd-dynamic-page-subheader>\n } @if (!contentIsPage && modernTabs && modernTabs.length > 0 && !parameters?.LayoutComponent) {\n <fd-tab-list\n (selectedTabChange)=\"onTabChanged($event)\"\n [collapseOverflow]=\"true\"\n [stackContent]=\"false\"\n maxContentHeight=\"auto\"\n [expandOverflowText]=\"'More' | bbbTranslate\"\n #tablist\n >\n @for (tab of modernTabs; track tab.Title; let i = $index) {\n <fd-tab [title]=\"tab.Title!! | bbbTranslate\" [class.is-expanded]=\"selectedTab === tab.Title\">\n <fd-dynamic-page-content [id]=\"tab.id\" [class.limit-content-width]=\"formContentMaxWidth > 0\">\n <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\">\n <div fdLayoutGridRow>\n <div\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout1.colMd\"\n [colLg]=\"layout1.colLg\"\n [colXl]=\"layout1.colXl\"\n ></div>\n <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\n <bsu-ly-tab-page [config]=\"tab\" [tablist]=\"tablist\"></bsu-ly-tab-page>\n </div>\n <div\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout2.colMd\"\n [colLg]=\"layout2.colLg\"\n [colXl]=\"layout2.colXl\"\n ></div>\n </div>\n </fd-layout-grid>\n </fd-dynamic-page-content>\n </fd-tab>\n }\n </fd-tab-list>\n } @else { @if (!contentIsPage) {\n <fd-tab-list\n [collapseOverflow]=\"true\"\n [stackContent]=\"false\"\n maxContentHeight=\"auto\"\n #tablist\n class=\"extra-hide-tabs show-boundary\"\n >\n <fd-tab title=\"\">\n <fd-dynamic-page-content [class.limit-content-width]=\"formContentMaxWidth > 0\">\n <fd-layout-grid style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\n <div fdLayoutGridRow>\n <div\n style=\"padding: 0\"\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout1.colMd\"\n [colLg]=\"layout1.colLg\"\n [colXl]=\"layout1.colXl\"\n ></div>\n <div\n style=\"min-height: 100%\"\n [fdLayoutGridCol]=\"12\"\n [colMd]=\"colMd\"\n [colLg]=\"colLg\"\n [colXl]=\"colXl\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\n context: {\n $implicit: parameters?.LayoutComponent,\n layout94: layout94\n }\n \"\n ></ng-container>\n </div>\n <div\n style=\"padding: 0\"\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout2.colMd\"\n [colLg]=\"layout2.colLg\"\n [colXl]=\"layout2.colXl\"\n ></div>\n </div>\n </fd-layout-grid>\n </fd-dynamic-page-content>\n </fd-tab>\n </fd-tab-list>\n } } @if(!hideFooter){\n <fd-dynamic-page-footer>\n <bsu-layout-actions\n [canSend]=\"canSend\"\n [buttons]=\"layoutActions\"\n [isMobile]=\"isMobile\"\n [landscape]=\"landscape\"\n [standalone]=\"standalone\"\n [footerDesign]=\"footerDesign\"\n [workflowButtons]=\"workflowButtons\"\n [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n (toolClick)=\"toolbarClick.emit($event)\"\n (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\n >\n </bsu-layout-actions>\n </fd-dynamic-page-footer>\n }\n</fd-dynamic-page>\n@if (contentIsPage) {\n<ng-container\n *ngTemplateOutlet=\"\n renderLayoutComponent;\n context: {\n $implicit: parameters?.LayoutComponent,\n layout94: layout94\n }\n \"\n></ng-container>\n}\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\n <bsu-ly-layout-container-of-root\n [config]=\"layout94\"\n [isPanel]=\"false\"\n [isRoot]=\"true\"\n ></bsu-ly-layout-container-of-root>\n</ng-template>\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\n <bnrc-dynamic-form-component\n [component]=\"component\"\n [removeContentPadding]=\"removeContentPadding\"\n [breadCrumbs]=\"breadCrumbs\"\n [description]=\"description\"\n [title]=\"title\"\n [subtitle]=\"subtitle\"\n [toolbarItems]=\"toolbarItems\"\n [layoutActions]=\"layoutActions\"\n [footerDesign]=\"footerDesign\"\n [facetList]=\"facetList\"\n [settings]=\"component.Settings\"\n [workflowButtons]=\"workflowButtons\"\n [workflowPanelUi]=\"workflowPanelUi\"\n [isMobile]=\"isMobile\"\n [mo]=\"mo\"\n [layout94]=\"layout94\"\n [context]=\"context\"\n [rtl]=\"rtl\"\n [fieldDict]=\"fieldDict\"\n [mask]=\"mask\"\n [dirValue]=\"dirValue\"\n [deviceSize]=\"deviceSize\"\n [contentDensity]=\"contentDensity\"\n [modernTabs]=\"modernTabs\"\n [avatar]=\"avatar\"\n (events)=\"onDynamicComponentEvents($event)\"\n ></bnrc-dynamic-form-component>\n</ng-template>\n<ng-template #closeForm>\n <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\n </button>\n</ng-template>\n<ng-template #fullscreenForm>\n @if (canFullscreen) {\n <button\n fd-button\n fdType=\"transparent\"\n [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\n (click)=\"fullscreenRequest.emit()\"\n [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\n [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\n ></button>\n }\n</ng-template>\n", styles: [":host{display:block;height:auto;width:100%}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .fd-progress-indicator__container,:host ::ng-deep .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormComponent, selector: "bnrc-dynamic-form-component", inputs: ["breadCrumbs", "toolbarVisible", "toolbarItems", "layoutActions", "workflowButtons", "layout94", "footerDesign", "settings", "workflowPanelUi", "title", "subtitle", "description", "facetList", "removeHeaderBorder", "removeContentPadding", "isMobile", "avatar", "rtl", "mask", "mo", "contentDensity", "deviceSize", "dirValue", "fieldDict", "modernTabs"] }, { kind: "component", type: i2.BaseDynamicComponent, selector: "bnrc-dynamic-component", inputs: ["component", "value"], outputs: ["events"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i5$4.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$4.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i9$1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i9$1.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i9$1.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i9$1.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i9$1.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i9$1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i9$1.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i9$1.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i7$7.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "headingLevel", "id", "alignEnd"] }, { kind: "component", type: i7$7.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i7$7.FacetContentComponent, selector: "fd-facet-content" }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i4$3.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$3.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$3.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i9.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i4$5.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "glyphFont", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "component", type: i13$1.RatingIndicatorComponent, selector: "fd-rating-indicator", inputs: ["class", "name", "ariaLabel", "ariaLabelledBy", "disabled", "displayMode", "nonInteractive", "indicatorCapacity", "allowHalves", "value", "totalRatings", "ratingAverage", "ratings", "displayAllRatings", "ratedIcon", "unratedIcon", "size", "dynamicTextIndicator"], outputs: ["ratingChanged"] }, { kind: "component", type: i1$6.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i1$6.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i5$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i8.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i12$1.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: ["renderItems", "tablist"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple", "footerDesign"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "component", type: FormToolbarComponent, selector: "bsu-form-toolbar", outputs: ["toolbarClick"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.HeaderFacetValuePipe, name: "facetValue" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterWorkflowInMobilePipe, name: "filterWorkflowInMobile" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8937
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: FundamentalDynamicFormComponent, selector: "bsu-fundamental-dynamic-form", inputs: { breadCrumbs: "breadCrumbs", toolbarVisible: "toolbarVisible", toolbarItems: "toolbarItems", layoutActions: "layoutActions", layout94: "layout94", parameters: "parameters", workflowPanelUi: "workflowPanelUi", context: "context", title: "title", subtitle: "subtitle", description: "description", facetList: "facetList", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", circleAvatar: "circleAvatar", rtl: "rtl", hideFooter: "hideFooter", hideTitle: "hideTitle", hideClose: "hideClose", hidePin: "hidePin", fullscreen: "fullscreen", mask: "mask", canSend: "canSend", contentIsPage: "contentIsPage", contentDensity: "contentDensity", deviceSize: "deviceSize", dirValue: "dirValue", landscape: "landscape", standalone: "standalone", modernTabs: "modernTabs", formVisibilityStatus: "formVisibilityStatus", layoutGridCol: "layoutGridCol", colLg: "colLg", colXl: "colXl", colMd: "colMd", footerDesign: "footerDesign", formContentMaxWidth: "formContentMaxWidth", workflowButtons: "workflowButtons" }, outputs: { toolbarClick: "toolbarClick", workflowChoiceClick: "workflowChoiceClick", close: "close", fullscreenRequest: "fullscreenRequest" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true, static: true }, { propertyName: "_tabListComponent", first: true, predicate: TabListComponent, descendants: true }, { propertyName: "_toolbarComponent", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }, { propertyName: "closeFormTemplate", first: true, predicate: ["closeForm"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (mask) {\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\n <bsu-mask size=\"m\"></bsu-mask>\n</div>\n}\n\n<fd-dynamic-page\n [size]=\"isMobile ? 'small' : 'large'\"\n [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\n [class.header-border]=\"!removeHeaderBorder\"\n [attr.isMobile]=\"isMobile\"\n [attr.contentIsPage]=\"contentIsPage\"\n mobile\n formClose\n [isMobile]=\"isMobile\"\n>\n <fd-dynamic-page-header\n [class.simple-title]=\"!description\"\n [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\n [subtitle]=\"subtitle | bbbTranslate\"\n [class.p-b0]=\"removeContentPadding\"\n [class.hide-title]=\"hideTitle === true && hideClose === true\"\n [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\n #titleRef\n >\n <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\n <fd-breadcrumb>\n @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\n breadCrumb.url; let i = $index; let last = $last) {\n <fd-breadcrumb-item>\n <bsu-breadcrumb\n [index]=\"i\"\n [isLast]=\"last\"\n [breadCrumb]=\"breadCrumb\"\n [allBreadCrumb]=\"breadCrumbs\"\n ></bsu-breadcrumb>\n </fd-breadcrumb-item>\n } }\n </fd-breadcrumb>\n </fd-dynamic-page-breadcrumb>\n <fd-dynamic-page-global-actions>\n <!-- global actions -->\n\n <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n <!-- added this because in mobile landscape toolbar disapper -->\n @if (toolbarVisible) {\n <bsu-form-toolbar\n [deviceSize]=\"deviceSize\"\n [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\n [dirValue]=\"dirValue\"\n [isFirefox]=\"isFirefox\"\n (toolbarClick)=\"toolbarClick.emit($event)\"\n #formToolbar\n ></bsu-form-toolbar>\n }\n </fd-dynamic-page-global-actions>\n <fd-dynamic-page-layout-actions>\n <!-- layout actions -->\n <!-- <div [formActions]=\"this.toolbar\"></div> -->\n @if (!hideClose) {\n <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n @if (deviceSize !== 's') {\n <fd-toolbar-separator></fd-toolbar-separator>\n }\n <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\n <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\n </fd-toolbar>\n }\n </fd-dynamic-page-layout-actions>\n </fd-dynamic-page-header>\n @if (description || facetList.length > 0 || workflowInfoText || avatar) {\n <fd-dynamic-page-subheader\n [class.header-no-description]=\"!(description || workflowInfoText)\"\n [class.no-pin]=\"hidePin\"\n [collapsible]=\"!!workflowInfoText || (facetList && facetList.length > 0)\"\n [pinnable]=\"true\"\n [collapsed]=\"(!facetList || facetList.length === 0) && !workflowInfoText\"\n >\n @if (workflowInfoText) {\n <fd-message-strip [type]=\"'warning'\" [dismissible]=\"false\">\n {{ workflowInfoText | bbbTranslate }}\n </fd-message-strip>\n }\n <fd-facet-group ariaLabel=\"Facet Group\">\n @if (avatar) {\n <fd-facet type=\"image\">\n <fd-avatar\n title=\"avatar\"\n [glyph]=\"avatar\"\n [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\n [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\n [transparent]=\"true\"\n [circle]=\"circleAvatar\"\n ></fd-avatar>\n <!-- <div\n class=\"fd-avatar fd-avatar--circle\"\n [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\n >\n <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\n </div> -->\n </fd-facet>\n } @for (facet of facetList; track facet) {\n <fd-facet\n [type]=\"facet.type\"\n [facetTitle]=\"facet.mo.Title | bbbTranslate\"\n [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\n >\n @for (item of facet.mo.ItemList?.MoDataList; track item) {\n <fd-facet-content>\n <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title }}</label>\n <fd-text [text]=\"item.Value | facetValue\" id=\"form-value-10\"></fd-text>\n </fd-facet-content>\n } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\n <span\n fd-object-status\n [status]=\"facet.mo.Status | facetValue\"\n [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue)\"\n [large]=\"facet.mo.IsLarge\"\n [title]=\"facet.mo.Text | facetValue\"\n [aria-label]=\"facet.mo.Text | facetValue\"\n [glyph]=\"facet.mo.Icon\"\n >\n </span>\n } @else {\n <bnrc-dynamic-component\n [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\n [class.fd-object-status--large]=\"facet.mo.IsLarge\"\n [component]=\"facet.mo.Component\"\n [value]=\"facet.mo.Text\"\n ></bnrc-dynamic-component>\n } @if (facet.mo.IsNumber && facet.type === 'key-value') {\n <fd-object-number\n [number]=\"facet.mo.Text | facetValue\"\n [large]=\"facet.mo.IsLarge\"\n [unit]=\"facet.mo.Unit | facetValue\"\n [status]=\"facet.mo.Status | facetValue\"\n [decimal]=\"facet.mo.DecimalValue | facetValue\"\n ></fd-object-number>\n } @if (facet.type === 'plain-text') {\n <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\n <fd-text [text]=\"facet.mo.Text | facetValue\" hyphenation=\"auto\"></fd-text>\n </div>\n } @if (facet.type === 'rating-indicator') {\n <fd-facet-content>\n <fd-rating-indicator\n style=\"pointer-events: none\"\n size=\"md\"\n [dynamicTextIndicator]=\"facet.mo.Footer\"\n [displayMode]=\"true\"\n [value]=\"facet.mo | facetValue: facet.type\"\n ></fd-rating-indicator>\n </fd-facet-content>\n } @if (facet.type === 'progress') {\n <div [style.width]=\"'10rem'\">\n <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\n <fd-progress-indicator\n style=\"width: 10r em\"\n [state]=\"facet.mo.State\"\n [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647'\"\n [valueNow]=\"facet.mo | facetValue: facet.type\"\n [valueMax]=\"10\"\n [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\n ></fd-progress-indicator>\n <!-- <ui5-progress-indicator\n style=\"width: 10rem\"\n [valueState]=\"facet.mo.State\"\n [value]=\"getNumber(facet.mo.Value)\"\n ></ui5-progress-indicator> -->\n </div>\n } @if (facet.type === 'microcharts') {\n <div>\n <label wrap>in progress ...</label>\n </div>\n }\n </fd-facet>\n }\n </fd-facet-group>\n @if (description) {\n <span>{{ description }}</span>\n }\n </fd-dynamic-page-subheader>\n } @if (!contentIsPage && modernTabs && modernTabs.length > 0 && !parameters?.LayoutComponent) {\n <fd-tab-list\n (selectedTabChange)=\"onTabChanged($event)\"\n [collapseOverflow]=\"true\"\n [stackContent]=\"false\"\n maxContentHeight=\"auto\"\n [expandOverflowText]=\"'More' | bbbTranslate\"\n #tablist\n >\n @for (tab of modernTabs; track tab.Title; let i = $index) {\n <fd-tab [title]=\"tab.Title!! | bbbTranslate\" [class.is-expanded]=\"selectedTab === tab.Title\">\n <fd-dynamic-page-content [id]=\"tab.id\" [class.limit-content-width]=\"formContentMaxWidth > 0\">\n <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\">\n <div fdLayoutGridRow>\n <div\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout1.colMd\"\n [colLg]=\"layout1.colLg\"\n [colXl]=\"layout1.colXl\"\n ></div>\n <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\n <bsu-ly-tab-page [config]=\"tab\" [tablist]=\"tablist\"></bsu-ly-tab-page>\n </div>\n <div\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout2.colMd\"\n [colLg]=\"layout2.colLg\"\n [colXl]=\"layout2.colXl\"\n ></div>\n </div>\n </fd-layout-grid>\n </fd-dynamic-page-content>\n </fd-tab>\n }\n </fd-tab-list>\n } @else { @if (!contentIsPage) {\n <fd-tab-list\n [collapseOverflow]=\"true\"\n [stackContent]=\"false\"\n maxContentHeight=\"auto\"\n #tablist\n class=\"extra-hide-tabs show-boundary\"\n >\n <fd-tab title=\"\">\n <fd-dynamic-page-content [class.limit-content-width]=\"formContentMaxWidth > 0\">\n <fd-layout-grid style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\n <div fdLayoutGridRow>\n <div\n style=\"padding: 0\"\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout1.colMd\"\n [colLg]=\"layout1.colLg\"\n [colXl]=\"layout1.colXl\"\n ></div>\n <div\n style=\"min-height: 100%\"\n [fdLayoutGridCol]=\"12\"\n [colMd]=\"colMd\"\n [colLg]=\"colLg\"\n [colXl]=\"colXl\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\n context: {\n $implicit: parameters?.LayoutComponent,\n layout94: layout94\n }\n \"\n ></ng-container>\n </div>\n <div\n style=\"padding: 0\"\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout2.colMd\"\n [colLg]=\"layout2.colLg\"\n [colXl]=\"layout2.colXl\"\n ></div>\n </div>\n </fd-layout-grid>\n </fd-dynamic-page-content>\n </fd-tab>\n </fd-tab-list>\n } } @if(!hideFooter){\n <fd-dynamic-page-footer>\n <bsu-layout-actions\n [canSend]=\"canSend\"\n [buttons]=\"layoutActions\"\n [isMobile]=\"isMobile\"\n [landscape]=\"landscape\"\n [standalone]=\"standalone\"\n [footerDesign]=\"footerDesign\"\n [workflowButtons]=\"workflowButtons\"\n [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n (toolClick)=\"toolbarClick.emit($event)\"\n (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\n >\n </bsu-layout-actions>\n </fd-dynamic-page-footer>\n }\n</fd-dynamic-page>\n@if (contentIsPage) {\n<ng-container\n *ngTemplateOutlet=\"\n renderLayoutComponent;\n context: {\n $implicit: parameters?.LayoutComponent,\n layout94: layout94\n }\n \"\n></ng-container>\n}\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\n <bsu-ly-layout-container-of-root\n [config]=\"layout94\"\n [isPanel]=\"false\"\n [isRoot]=\"true\"\n ></bsu-ly-layout-container-of-root>\n</ng-template>\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\n <bnrc-dynamic-form-component\n [component]=\"component\"\n [removeContentPadding]=\"removeContentPadding\"\n [breadCrumbs]=\"breadCrumbs\"\n [description]=\"description\"\n [title]=\"title\"\n [subtitle]=\"subtitle\"\n [toolbarItems]=\"toolbarItems\"\n [layoutActions]=\"layoutActions\"\n [footerDesign]=\"footerDesign\"\n [facetList]=\"facetList\"\n [settings]=\"component.Settings\"\n [workflowButtons]=\"workflowButtons\"\n [workflowPanelUi]=\"workflowPanelUi\"\n [isMobile]=\"isMobile\"\n [mo]=\"mo\"\n [layout94]=\"layout94\"\n [context]=\"context\"\n [rtl]=\"rtl\"\n [fieldDict]=\"fieldDict\"\n [mask]=\"mask\"\n [dirValue]=\"dirValue\"\n [deviceSize]=\"deviceSize\"\n [contentDensity]=\"contentDensity\"\n [modernTabs]=\"modernTabs\"\n [avatar]=\"avatar\"\n (events)=\"onDynamicComponentEvents($event)\"\n ></bnrc-dynamic-form-component>\n</ng-template>\n<ng-template #closeForm>\n <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\n </button>\n</ng-template>\n<ng-template #fullscreenForm>\n @if (canFullscreen) {\n <button\n fd-button\n fdType=\"transparent\"\n [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\n (click)=\"fullscreenRequest.emit()\"\n [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\n [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\n ></button>\n }\n</ng-template>\n", styles: [":host{display:block;height:auto;width:100%}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .fd-progress-indicator__container,:host ::ng-deep .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.no-toolbar-items ::ng-deep .fd-dynamic-page__toolbar-container{width:auto}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormComponent, selector: "bnrc-dynamic-form-component", inputs: ["breadCrumbs", "toolbarVisible", "toolbarItems", "layoutActions", "workflowButtons", "layout94", "footerDesign", "settings", "workflowPanelUi", "title", "subtitle", "description", "facetList", "removeHeaderBorder", "removeContentPadding", "isMobile", "avatar", "rtl", "mask", "mo", "contentDensity", "deviceSize", "dirValue", "fieldDict", "modernTabs"] }, { kind: "component", type: i2.BaseDynamicComponent, selector: "bnrc-dynamic-component", inputs: ["component", "value"], outputs: ["events"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i5$4.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$4.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i9$1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i9$1.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i9$1.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i9$1.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i9$1.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i9$1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i9$1.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i9$1.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i7$7.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "headingLevel", "id", "alignEnd"] }, { kind: "component", type: i7$7.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i7$7.FacetContentComponent, selector: "fd-facet-content" }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i4$3.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$3.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$3.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i9.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i4$5.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "glyphFont", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "component", type: i13$1.RatingIndicatorComponent, selector: "fd-rating-indicator", inputs: ["class", "name", "ariaLabel", "ariaLabelledBy", "disabled", "displayMode", "nonInteractive", "indicatorCapacity", "allowHalves", "value", "totalRatings", "ratingAverage", "ratings", "displayAllRatings", "ratedIcon", "unratedIcon", "size", "dynamicTextIndicator"], outputs: ["ratingChanged"] }, { kind: "component", type: i1$6.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i1$6.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i5$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i8.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i12$1.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: ["renderItems", "tablist"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple", "footerDesign"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "component", type: FormToolbarComponent, selector: "bsu-form-toolbar", outputs: ["toolbarClick"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.HeaderFacetValuePipe, name: "facetValue" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterWorkflowInMobilePipe, name: "filterWorkflowInMobile" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8938
8938
|
}
|
|
8939
8939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FundamentalDynamicFormComponent, decorators: [{
|
|
8940
8940
|
type: Component,
|
|
8941
|
-
args: [{ selector: 'bsu-fundamental-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (mask) {\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\n <bsu-mask size=\"m\"></bsu-mask>\n</div>\n}\n\n<fd-dynamic-page\n [size]=\"isMobile ? 'small' : 'large'\"\n [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\n [class.header-border]=\"!removeHeaderBorder\"\n [attr.isMobile]=\"isMobile\"\n [attr.contentIsPage]=\"contentIsPage\"\n mobile\n formClose\n [isMobile]=\"isMobile\"\n>\n <fd-dynamic-page-header\n [class.simple-title]=\"!description\"\n [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\n [subtitle]=\"subtitle | bbbTranslate\"\n [class.p-b0]=\"removeContentPadding\"\n [class.hide-title]=\"hideTitle === true && hideClose === true\"\n #titleRef\n >\n <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\n <fd-breadcrumb>\n @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\n breadCrumb.url; let i = $index; let last = $last) {\n <fd-breadcrumb-item>\n <bsu-breadcrumb\n [index]=\"i\"\n [isLast]=\"last\"\n [breadCrumb]=\"breadCrumb\"\n [allBreadCrumb]=\"breadCrumbs\"\n ></bsu-breadcrumb>\n </fd-breadcrumb-item>\n } }\n </fd-breadcrumb>\n </fd-dynamic-page-breadcrumb>\n <fd-dynamic-page-global-actions>\n <!-- global actions -->\n\n <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n <!-- added this because in mobile landscape toolbar disapper -->\n @if (toolbarVisible) {\n <bsu-form-toolbar\n [deviceSize]=\"deviceSize\"\n [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\n [dirValue]=\"dirValue\"\n [isFirefox]=\"isFirefox\"\n (toolbarClick)=\"toolbarClick.emit($event)\"\n #formToolbar\n ></bsu-form-toolbar>\n }\n </fd-dynamic-page-global-actions>\n <fd-dynamic-page-layout-actions>\n <!-- layout actions -->\n <!-- <div [formActions]=\"this.toolbar\"></div> -->\n @if (!hideClose) {\n <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n @if (deviceSize !== 's') {\n <fd-toolbar-separator></fd-toolbar-separator>\n }\n <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\n <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\n </fd-toolbar>\n }\n </fd-dynamic-page-layout-actions>\n </fd-dynamic-page-header>\n @if (description || facetList.length > 0 || workflowInfoText || avatar) {\n <fd-dynamic-page-subheader\n [class.header-no-description]=\"!(description || workflowInfoText)\"\n [class.no-pin]=\"hidePin\"\n [collapsible]=\"!!workflowInfoText || (facetList && facetList.length > 0)\"\n [pinnable]=\"true\"\n [collapsed]=\"(!facetList || facetList.length === 0) && !workflowInfoText\"\n >\n @if (workflowInfoText) {\n <fd-message-strip [type]=\"'warning'\" [dismissible]=\"false\">\n {{ workflowInfoText | bbbTranslate }}\n </fd-message-strip>\n }\n <fd-facet-group ariaLabel=\"Facet Group\">\n @if (avatar) {\n <fd-facet type=\"image\">\n <fd-avatar\n title=\"avatar\"\n [glyph]=\"avatar\"\n [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\n [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\n [transparent]=\"true\"\n [circle]=\"circleAvatar\"\n ></fd-avatar>\n <!-- <div\n class=\"fd-avatar fd-avatar--circle\"\n [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\n >\n <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\n </div> -->\n </fd-facet>\n } @for (facet of facetList; track facet) {\n <fd-facet\n [type]=\"facet.type\"\n [facetTitle]=\"facet.mo.Title | bbbTranslate\"\n [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\n >\n @for (item of facet.mo.ItemList?.MoDataList; track item) {\n <fd-facet-content>\n <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title }}</label>\n <fd-text [text]=\"item.Value | facetValue\" id=\"form-value-10\"></fd-text>\n </fd-facet-content>\n } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\n <span\n fd-object-status\n [status]=\"facet.mo.Status | facetValue\"\n [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue)\"\n [large]=\"facet.mo.IsLarge\"\n [title]=\"facet.mo.Text | facetValue\"\n [aria-label]=\"facet.mo.Text | facetValue\"\n [glyph]=\"facet.mo.Icon\"\n >\n </span>\n } @else {\n <bnrc-dynamic-component\n [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\n [class.fd-object-status--large]=\"facet.mo.IsLarge\"\n [component]=\"facet.mo.Component\"\n [value]=\"facet.mo.Text\"\n ></bnrc-dynamic-component>\n } @if (facet.mo.IsNumber && facet.type === 'key-value') {\n <fd-object-number\n [number]=\"facet.mo.Text | facetValue\"\n [large]=\"facet.mo.IsLarge\"\n [unit]=\"facet.mo.Unit | facetValue\"\n [status]=\"facet.mo.Status | facetValue\"\n [decimal]=\"facet.mo.DecimalValue | facetValue\"\n ></fd-object-number>\n } @if (facet.type === 'plain-text') {\n <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\n <fd-text [text]=\"facet.mo.Text | facetValue\" hyphenation=\"auto\"></fd-text>\n </div>\n } @if (facet.type === 'rating-indicator') {\n <fd-facet-content>\n <fd-rating-indicator\n style=\"pointer-events: none\"\n size=\"md\"\n [dynamicTextIndicator]=\"facet.mo.Footer\"\n [displayMode]=\"true\"\n [value]=\"facet.mo | facetValue: facet.type\"\n ></fd-rating-indicator>\n </fd-facet-content>\n } @if (facet.type === 'progress') {\n <div [style.width]=\"'10rem'\">\n <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\n <fd-progress-indicator\n style=\"width: 10r em\"\n [state]=\"facet.mo.State\"\n [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647'\"\n [valueNow]=\"facet.mo | facetValue: facet.type\"\n [valueMax]=\"10\"\n [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\n ></fd-progress-indicator>\n <!-- <ui5-progress-indicator\n style=\"width: 10rem\"\n [valueState]=\"facet.mo.State\"\n [value]=\"getNumber(facet.mo.Value)\"\n ></ui5-progress-indicator> -->\n </div>\n } @if (facet.type === 'microcharts') {\n <div>\n <label wrap>in progress ...</label>\n </div>\n }\n </fd-facet>\n }\n </fd-facet-group>\n @if (description) {\n <span>{{ description }}</span>\n }\n </fd-dynamic-page-subheader>\n } @if (!contentIsPage && modernTabs && modernTabs.length > 0 && !parameters?.LayoutComponent) {\n <fd-tab-list\n (selectedTabChange)=\"onTabChanged($event)\"\n [collapseOverflow]=\"true\"\n [stackContent]=\"false\"\n maxContentHeight=\"auto\"\n [expandOverflowText]=\"'More' | bbbTranslate\"\n #tablist\n >\n @for (tab of modernTabs; track tab.Title; let i = $index) {\n <fd-tab [title]=\"tab.Title!! | bbbTranslate\" [class.is-expanded]=\"selectedTab === tab.Title\">\n <fd-dynamic-page-content [id]=\"tab.id\" [class.limit-content-width]=\"formContentMaxWidth > 0\">\n <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\">\n <div fdLayoutGridRow>\n <div\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout1.colMd\"\n [colLg]=\"layout1.colLg\"\n [colXl]=\"layout1.colXl\"\n ></div>\n <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\n <bsu-ly-tab-page [config]=\"tab\" [tablist]=\"tablist\"></bsu-ly-tab-page>\n </div>\n <div\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout2.colMd\"\n [colLg]=\"layout2.colLg\"\n [colXl]=\"layout2.colXl\"\n ></div>\n </div>\n </fd-layout-grid>\n </fd-dynamic-page-content>\n </fd-tab>\n }\n </fd-tab-list>\n } @else { @if (!contentIsPage) {\n <fd-tab-list\n [collapseOverflow]=\"true\"\n [stackContent]=\"false\"\n maxContentHeight=\"auto\"\n #tablist\n class=\"extra-hide-tabs show-boundary\"\n >\n <fd-tab title=\"\">\n <fd-dynamic-page-content [class.limit-content-width]=\"formContentMaxWidth > 0\">\n <fd-layout-grid style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\n <div fdLayoutGridRow>\n <div\n style=\"padding: 0\"\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout1.colMd\"\n [colLg]=\"layout1.colLg\"\n [colXl]=\"layout1.colXl\"\n ></div>\n <div\n style=\"min-height: 100%\"\n [fdLayoutGridCol]=\"12\"\n [colMd]=\"colMd\"\n [colLg]=\"colLg\"\n [colXl]=\"colXl\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\n context: {\n $implicit: parameters?.LayoutComponent,\n layout94: layout94\n }\n \"\n ></ng-container>\n </div>\n <div\n style=\"padding: 0\"\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout2.colMd\"\n [colLg]=\"layout2.colLg\"\n [colXl]=\"layout2.colXl\"\n ></div>\n </div>\n </fd-layout-grid>\n </fd-dynamic-page-content>\n </fd-tab>\n </fd-tab-list>\n } } @if(!hideFooter){\n <fd-dynamic-page-footer>\n <bsu-layout-actions\n [canSend]=\"canSend\"\n [buttons]=\"layoutActions\"\n [isMobile]=\"isMobile\"\n [landscape]=\"landscape\"\n [standalone]=\"standalone\"\n [footerDesign]=\"footerDesign\"\n [workflowButtons]=\"workflowButtons\"\n [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n (toolClick)=\"toolbarClick.emit($event)\"\n (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\n >\n </bsu-layout-actions>\n </fd-dynamic-page-footer>\n }\n</fd-dynamic-page>\n@if (contentIsPage) {\n<ng-container\n *ngTemplateOutlet=\"\n renderLayoutComponent;\n context: {\n $implicit: parameters?.LayoutComponent,\n layout94: layout94\n }\n \"\n></ng-container>\n}\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\n <bsu-ly-layout-container-of-root\n [config]=\"layout94\"\n [isPanel]=\"false\"\n [isRoot]=\"true\"\n ></bsu-ly-layout-container-of-root>\n</ng-template>\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\n <bnrc-dynamic-form-component\n [component]=\"component\"\n [removeContentPadding]=\"removeContentPadding\"\n [breadCrumbs]=\"breadCrumbs\"\n [description]=\"description\"\n [title]=\"title\"\n [subtitle]=\"subtitle\"\n [toolbarItems]=\"toolbarItems\"\n [layoutActions]=\"layoutActions\"\n [footerDesign]=\"footerDesign\"\n [facetList]=\"facetList\"\n [settings]=\"component.Settings\"\n [workflowButtons]=\"workflowButtons\"\n [workflowPanelUi]=\"workflowPanelUi\"\n [isMobile]=\"isMobile\"\n [mo]=\"mo\"\n [layout94]=\"layout94\"\n [context]=\"context\"\n [rtl]=\"rtl\"\n [fieldDict]=\"fieldDict\"\n [mask]=\"mask\"\n [dirValue]=\"dirValue\"\n [deviceSize]=\"deviceSize\"\n [contentDensity]=\"contentDensity\"\n [modernTabs]=\"modernTabs\"\n [avatar]=\"avatar\"\n (events)=\"onDynamicComponentEvents($event)\"\n ></bnrc-dynamic-form-component>\n</ng-template>\n<ng-template #closeForm>\n <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\n </button>\n</ng-template>\n<ng-template #fullscreenForm>\n @if (canFullscreen) {\n <button\n fd-button\n fdType=\"transparent\"\n [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\n (click)=\"fullscreenRequest.emit()\"\n [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\n [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\n ></button>\n }\n</ng-template>\n", styles: [":host{display:block;height:auto;width:100%}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .fd-progress-indicator__container,:host ::ng-deep .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"] }]
|
|
8941
|
+
args: [{ selector: 'bsu-fundamental-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (mask) {\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\n <bsu-mask size=\"m\"></bsu-mask>\n</div>\n}\n\n<fd-dynamic-page\n [size]=\"isMobile ? 'small' : 'large'\"\n [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\n [class.header-border]=\"!removeHeaderBorder\"\n [attr.isMobile]=\"isMobile\"\n [attr.contentIsPage]=\"contentIsPage\"\n mobile\n formClose\n [isMobile]=\"isMobile\"\n>\n <fd-dynamic-page-header\n [class.simple-title]=\"!description\"\n [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\n [subtitle]=\"subtitle | bbbTranslate\"\n [class.p-b0]=\"removeContentPadding\"\n [class.hide-title]=\"hideTitle === true && hideClose === true\"\n [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\n #titleRef\n >\n <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\n <fd-breadcrumb>\n @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\n breadCrumb.url; let i = $index; let last = $last) {\n <fd-breadcrumb-item>\n <bsu-breadcrumb\n [index]=\"i\"\n [isLast]=\"last\"\n [breadCrumb]=\"breadCrumb\"\n [allBreadCrumb]=\"breadCrumbs\"\n ></bsu-breadcrumb>\n </fd-breadcrumb-item>\n } }\n </fd-breadcrumb>\n </fd-dynamic-page-breadcrumb>\n <fd-dynamic-page-global-actions>\n <!-- global actions -->\n\n <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n <!-- added this because in mobile landscape toolbar disapper -->\n @if (toolbarVisible) {\n <bsu-form-toolbar\n [deviceSize]=\"deviceSize\"\n [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\n [dirValue]=\"dirValue\"\n [isFirefox]=\"isFirefox\"\n (toolbarClick)=\"toolbarClick.emit($event)\"\n #formToolbar\n ></bsu-form-toolbar>\n }\n </fd-dynamic-page-global-actions>\n <fd-dynamic-page-layout-actions>\n <!-- layout actions -->\n <!-- <div [formActions]=\"this.toolbar\"></div> -->\n @if (!hideClose) {\n <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n @if (deviceSize !== 's') {\n <fd-toolbar-separator></fd-toolbar-separator>\n }\n <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\n <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\n </fd-toolbar>\n }\n </fd-dynamic-page-layout-actions>\n </fd-dynamic-page-header>\n @if (description || facetList.length > 0 || workflowInfoText || avatar) {\n <fd-dynamic-page-subheader\n [class.header-no-description]=\"!(description || workflowInfoText)\"\n [class.no-pin]=\"hidePin\"\n [collapsible]=\"!!workflowInfoText || (facetList && facetList.length > 0)\"\n [pinnable]=\"true\"\n [collapsed]=\"(!facetList || facetList.length === 0) && !workflowInfoText\"\n >\n @if (workflowInfoText) {\n <fd-message-strip [type]=\"'warning'\" [dismissible]=\"false\">\n {{ workflowInfoText | bbbTranslate }}\n </fd-message-strip>\n }\n <fd-facet-group ariaLabel=\"Facet Group\">\n @if (avatar) {\n <fd-facet type=\"image\">\n <fd-avatar\n title=\"avatar\"\n [glyph]=\"avatar\"\n [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\n [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\n [transparent]=\"true\"\n [circle]=\"circleAvatar\"\n ></fd-avatar>\n <!-- <div\n class=\"fd-avatar fd-avatar--circle\"\n [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\n >\n <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\n </div> -->\n </fd-facet>\n } @for (facet of facetList; track facet) {\n <fd-facet\n [type]=\"facet.type\"\n [facetTitle]=\"facet.mo.Title | bbbTranslate\"\n [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\n >\n @for (item of facet.mo.ItemList?.MoDataList; track item) {\n <fd-facet-content>\n <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title }}</label>\n <fd-text [text]=\"item.Value | facetValue\" id=\"form-value-10\"></fd-text>\n </fd-facet-content>\n } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\n <span\n fd-object-status\n [status]=\"facet.mo.Status | facetValue\"\n [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue)\"\n [large]=\"facet.mo.IsLarge\"\n [title]=\"facet.mo.Text | facetValue\"\n [aria-label]=\"facet.mo.Text | facetValue\"\n [glyph]=\"facet.mo.Icon\"\n >\n </span>\n } @else {\n <bnrc-dynamic-component\n [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\n [class.fd-object-status--large]=\"facet.mo.IsLarge\"\n [component]=\"facet.mo.Component\"\n [value]=\"facet.mo.Text\"\n ></bnrc-dynamic-component>\n } @if (facet.mo.IsNumber && facet.type === 'key-value') {\n <fd-object-number\n [number]=\"facet.mo.Text | facetValue\"\n [large]=\"facet.mo.IsLarge\"\n [unit]=\"facet.mo.Unit | facetValue\"\n [status]=\"facet.mo.Status | facetValue\"\n [decimal]=\"facet.mo.DecimalValue | facetValue\"\n ></fd-object-number>\n } @if (facet.type === 'plain-text') {\n <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\n <fd-text [text]=\"facet.mo.Text | facetValue\" hyphenation=\"auto\"></fd-text>\n </div>\n } @if (facet.type === 'rating-indicator') {\n <fd-facet-content>\n <fd-rating-indicator\n style=\"pointer-events: none\"\n size=\"md\"\n [dynamicTextIndicator]=\"facet.mo.Footer\"\n [displayMode]=\"true\"\n [value]=\"facet.mo | facetValue: facet.type\"\n ></fd-rating-indicator>\n </fd-facet-content>\n } @if (facet.type === 'progress') {\n <div [style.width]=\"'10rem'\">\n <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\n <fd-progress-indicator\n style=\"width: 10r em\"\n [state]=\"facet.mo.State\"\n [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647'\"\n [valueNow]=\"facet.mo | facetValue: facet.type\"\n [valueMax]=\"10\"\n [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\n ></fd-progress-indicator>\n <!-- <ui5-progress-indicator\n style=\"width: 10rem\"\n [valueState]=\"facet.mo.State\"\n [value]=\"getNumber(facet.mo.Value)\"\n ></ui5-progress-indicator> -->\n </div>\n } @if (facet.type === 'microcharts') {\n <div>\n <label wrap>in progress ...</label>\n </div>\n }\n </fd-facet>\n }\n </fd-facet-group>\n @if (description) {\n <span>{{ description }}</span>\n }\n </fd-dynamic-page-subheader>\n } @if (!contentIsPage && modernTabs && modernTabs.length > 0 && !parameters?.LayoutComponent) {\n <fd-tab-list\n (selectedTabChange)=\"onTabChanged($event)\"\n [collapseOverflow]=\"true\"\n [stackContent]=\"false\"\n maxContentHeight=\"auto\"\n [expandOverflowText]=\"'More' | bbbTranslate\"\n #tablist\n >\n @for (tab of modernTabs; track tab.Title; let i = $index) {\n <fd-tab [title]=\"tab.Title!! | bbbTranslate\" [class.is-expanded]=\"selectedTab === tab.Title\">\n <fd-dynamic-page-content [id]=\"tab.id\" [class.limit-content-width]=\"formContentMaxWidth > 0\">\n <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\">\n <div fdLayoutGridRow>\n <div\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout1.colMd\"\n [colLg]=\"layout1.colLg\"\n [colXl]=\"layout1.colXl\"\n ></div>\n <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\n <bsu-ly-tab-page [config]=\"tab\" [tablist]=\"tablist\"></bsu-ly-tab-page>\n </div>\n <div\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout2.colMd\"\n [colLg]=\"layout2.colLg\"\n [colXl]=\"layout2.colXl\"\n ></div>\n </div>\n </fd-layout-grid>\n </fd-dynamic-page-content>\n </fd-tab>\n }\n </fd-tab-list>\n } @else { @if (!contentIsPage) {\n <fd-tab-list\n [collapseOverflow]=\"true\"\n [stackContent]=\"false\"\n maxContentHeight=\"auto\"\n #tablist\n class=\"extra-hide-tabs show-boundary\"\n >\n <fd-tab title=\"\">\n <fd-dynamic-page-content [class.limit-content-width]=\"formContentMaxWidth > 0\">\n <fd-layout-grid style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\n <div fdLayoutGridRow>\n <div\n style=\"padding: 0\"\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout1.colMd\"\n [colLg]=\"layout1.colLg\"\n [colXl]=\"layout1.colXl\"\n ></div>\n <div\n style=\"min-height: 100%\"\n [fdLayoutGridCol]=\"12\"\n [colMd]=\"colMd\"\n [colLg]=\"colLg\"\n [colXl]=\"colXl\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\n context: {\n $implicit: parameters?.LayoutComponent,\n layout94: layout94\n }\n \"\n ></ng-container>\n </div>\n <div\n style=\"padding: 0\"\n [fdLayoutGridCol]=\"0\"\n [colMd]=\"layout2.colMd\"\n [colLg]=\"layout2.colLg\"\n [colXl]=\"layout2.colXl\"\n ></div>\n </div>\n </fd-layout-grid>\n </fd-dynamic-page-content>\n </fd-tab>\n </fd-tab-list>\n } } @if(!hideFooter){\n <fd-dynamic-page-footer>\n <bsu-layout-actions\n [canSend]=\"canSend\"\n [buttons]=\"layoutActions\"\n [isMobile]=\"isMobile\"\n [landscape]=\"landscape\"\n [standalone]=\"standalone\"\n [footerDesign]=\"footerDesign\"\n [workflowButtons]=\"workflowButtons\"\n [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n (toolClick)=\"toolbarClick.emit($event)\"\n (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\n >\n </bsu-layout-actions>\n </fd-dynamic-page-footer>\n }\n</fd-dynamic-page>\n@if (contentIsPage) {\n<ng-container\n *ngTemplateOutlet=\"\n renderLayoutComponent;\n context: {\n $implicit: parameters?.LayoutComponent,\n layout94: layout94\n }\n \"\n></ng-container>\n}\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\n <bsu-ly-layout-container-of-root\n [config]=\"layout94\"\n [isPanel]=\"false\"\n [isRoot]=\"true\"\n ></bsu-ly-layout-container-of-root>\n</ng-template>\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\n <bnrc-dynamic-form-component\n [component]=\"component\"\n [removeContentPadding]=\"removeContentPadding\"\n [breadCrumbs]=\"breadCrumbs\"\n [description]=\"description\"\n [title]=\"title\"\n [subtitle]=\"subtitle\"\n [toolbarItems]=\"toolbarItems\"\n [layoutActions]=\"layoutActions\"\n [footerDesign]=\"footerDesign\"\n [facetList]=\"facetList\"\n [settings]=\"component.Settings\"\n [workflowButtons]=\"workflowButtons\"\n [workflowPanelUi]=\"workflowPanelUi\"\n [isMobile]=\"isMobile\"\n [mo]=\"mo\"\n [layout94]=\"layout94\"\n [context]=\"context\"\n [rtl]=\"rtl\"\n [fieldDict]=\"fieldDict\"\n [mask]=\"mask\"\n [dirValue]=\"dirValue\"\n [deviceSize]=\"deviceSize\"\n [contentDensity]=\"contentDensity\"\n [modernTabs]=\"modernTabs\"\n [avatar]=\"avatar\"\n (events)=\"onDynamicComponentEvents($event)\"\n ></bnrc-dynamic-form-component>\n</ng-template>\n<ng-template #closeForm>\n <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\n </button>\n</ng-template>\n<ng-template #fullscreenForm>\n @if (canFullscreen) {\n <button\n fd-button\n fdType=\"transparent\"\n [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\n (click)=\"fullscreenRequest.emit()\"\n [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\n [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\n ></button>\n }\n</ng-template>\n", styles: [":host{display:block;height:auto;width:100%}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .fd-progress-indicator__container,:host ::ng-deep .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.no-toolbar-items ::ng-deep .fd-dynamic-page__toolbar-container{width:auto}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"] }]
|
|
8942
8942
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { _dynamicPageComponent: [{
|
|
8943
8943
|
type: ViewChild,
|
|
8944
8944
|
args: [DynamicPageComponent, { static: true }]
|
|
@@ -10273,11 +10273,11 @@ class UiPicturesInfoComponent extends DeviceInfoFieldBaseComponent {
|
|
|
10273
10273
|
this.value = value;
|
|
10274
10274
|
}
|
|
10275
10275
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiPicturesInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
10276
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiPicturesInfoComponent, selector: "bsu-ui-pictures-info", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<fd-file-uploader\n #uploader\n [style.display]=\"'none'\"\n [id]=\"id\"\n [name]=\"'pictures_' + id\"\n [placeholder]=\"'AttachPicture' | bbbTranslate\"\n [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif\"\n [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\n [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\n (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\" let-gallery=\"gallery\">\n <fd-layout-grid>\n @if (mediaData$ | async; as mediaData) {\n <div fdLayoutGridRow>\n @for (media of mediaData; track media; let i = $index) {\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\" (click)=\"onMedaiClick(gallery, media, i)\">\n <ng-container\n *ngTemplateOutlet=\"\n cardTpl;\n context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\n \"\n ></ng-container>\n </div>\n } @if (!inDialog && (disableOrReadonly$ | async) === true ? false : true) {\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\">\n <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\n </div>\n }\n </div>\n }\n </fd-layout-grid>\n</ng-template>\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\n <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\n <fd-card-content style=\"text-align: center; height: 120px\">\n <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" #img />\n </fd-card-content>\n @if (!inDialog) {\n <fd-card-footer>\n <button\n glyph=\"message-information\"\n *fdCardFooterActionItem\n fd-button\n fdType=\"transparent\"\n [fd-inline-help]=\"media.title\"\n [triggers]=\"['click']\"\n [closeOnOutsideClick]=\"true\"\n ></button>\n <button *fdCardFooterActionItem fd-button glyph=\"rotate\" (click)=\"onRotate(img, media, index)\"></button>\n\n <button\n glyph=\"full-screen\"\n *fdCardFooterActionItem\n fd-button\n fdType=\"transparent\"\n (click)=\"onFullscreen(media, mediaData)\"\n ></button>\n @if ((disableOrReadonly$ | async) === true ? false : true) {\n <button\n glyph=\"delete\"\n *fdCardFooterActionItem\n fd-button\n fdType=\"transparent\"\n (click)=\"onDelete(index)\"\n ></button>\n }\n </fd-card-footer>\n }\n </fd-card>\n</ng-template>\n<ng-template #newFile>\n <div style=\"position: relative; height: 100%\">\n <fd-card>\n <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\n <button\n fd-button\n glyph=\"add-photo\"\n fdType=\"transparent\"\n [label]=\"'AttachFile' | bbbTranslate\"\n (click)=\"uploader.open()\"\n ></button>\n </fd-card-content>\n\n <fd-card-footer style=\"border-top: 1px solid #ccc\">\n <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\n <fd-menu #menu>\n <li fd-menu-item (click)=\"onScan()\">\n <a fd-menu-interactive>\n <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\n </a>\n </li>\n <li fd-menu-item (click)=\"onAdvanceScan()\">\n <a fd-menu-interactive>\n <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\n </a>\n </li>\n </fd-menu>\n </fd-card-footer>\n </fd-card>\n @if ((uploadingState$ | async)?.uploading === true) {\n <bsu-mask></bsu-mask>\n }\n </div>\n</ng-template>\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\n <fd-dialog-header>\n <ng-template fdkTemplate=\"header\">\n <div fd-bar-left>\n <fd-bar-element>\n <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\n </fd-bar-element>\n </div>\n <div fd-bar-right>\n @if (!dialogConfig.fullscreen) {\n <fd-button-bar\n ariaLabel=\"Fit image size\"\n [glyph]=\"'resize'\"\n [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n (click)=\"fillWidth = !fillWidth\"\n ></fd-button-bar>\n }\n <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\n </div>\n </ng-template>\n </fd-dialog-header>\n <fd-dialog-body #fdbody>\n <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\n @for (media of dialog.data.mediaData; track media.FileId; let i = $index) {\n <div\n class=\"column big-imgs-box\"\n [class.fill-width]=\"fillWidth\"\n [class.fill-all]=\"fillAll\"\n [class.fill-original]=\"fillOriginal\"\n [ngClass]=\"selectedZoom\"\n >\n <fd-toolbar fdType=\"solid\" fdType=\"transparent\" [clearBorder]=\"true\">\n <fd-toolbar-spacer></fd-toolbar-spacer>\n <button fd-toolbar-item fd-button glyph=\"rotate\" (click)=\"onRotate(img, media, i)\"></button>\n <fd-toolbar-spacer></fd-toolbar-spacer>\n </fd-toolbar>\n <div class=\"pics\" [id]=\"i\">\n <bsu-mask></bsu-mask>\n <img #img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n </div>\n </div>\n }\n </div>\n @if ((deviceSize$ | async) !== 's') {\n <div class=\"thumbnail\" style=\"flex-shrink: 1\">\n <ng-cotainer\n *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true, gallery: this.gallery }\"\n ></ng-cotainer>\n </div>\n }\n </fd-dialog-body>\n </fd-dialog>\n</ng-template>\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}.big-imgs-box{position:relative}.big-imgs-box>fd-toolbar{position:absolute;z-index:5;opacity:.5}.big-imgs-box>fd-toolbar:hover{opacity:1}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:#555454;border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i3$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i5$2.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i5$2.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i5$2.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i2$8.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "directive", type: i4.InlineHelpDirective, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help"] }, { kind: "component", type: i4$3.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$3.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$3.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i6$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i6$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i6$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i6$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i6$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i4$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4$2.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i6$1.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i7$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i8.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i8.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10276
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiPicturesInfoComponent, selector: "bsu-ui-pictures-info", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<fd-file-uploader\n #uploader\n [style.display]=\"'none'\"\n [id]=\"id\"\n [name]=\"'pictures_' + id\"\n [placeholder]=\"'AttachPicture' | bbbTranslate\"\n [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif,.pdf\"\n [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\n [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\n (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\" let-gallery=\"gallery\">\n <fd-layout-grid>\n @if (mediaData$ | async; as mediaData) {\n <div fdLayoutGridRow>\n @for (media of mediaData; track media; let i = $index) {\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\" (click)=\"onMedaiClick(gallery, media, i)\">\n <ng-container\n *ngTemplateOutlet=\"\n cardTpl;\n context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\n \"\n ></ng-container>\n </div>\n } @if (!inDialog && (disableOrReadonly$ | async) === true ? false : true) {\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\">\n <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\n </div>\n }\n </div>\n }\n </fd-layout-grid>\n</ng-template>\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\n <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\n <fd-card-content style=\"text-align: center; height: 120px\">\n <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" #img />\n </fd-card-content>\n @if (!inDialog) {\n <fd-card-footer>\n <button\n glyph=\"message-information\"\n *fdCardFooterActionItem\n fd-button\n fdType=\"transparent\"\n [fd-inline-help]=\"media.title\"\n [triggers]=\"['click']\"\n [closeOnOutsideClick]=\"true\"\n ></button>\n <button *fdCardFooterActionItem fd-button glyph=\"rotate\" (click)=\"onRotate(img, media, index)\"></button>\n\n <button\n glyph=\"full-screen\"\n *fdCardFooterActionItem\n fd-button\n fdType=\"transparent\"\n (click)=\"onFullscreen(media, mediaData)\"\n ></button>\n @if ((disableOrReadonly$ | async) === true ? false : true) {\n <button\n glyph=\"delete\"\n *fdCardFooterActionItem\n fd-button\n fdType=\"transparent\"\n (click)=\"onDelete(index)\"\n ></button>\n }\n </fd-card-footer>\n }\n </fd-card>\n</ng-template>\n<ng-template #newFile>\n <div style=\"position: relative; height: 100%\">\n <fd-card>\n <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\n <button\n fd-button\n glyph=\"add-photo\"\n fdType=\"transparent\"\n [label]=\"'AttachFile' | bbbTranslate\"\n (click)=\"uploader.open()\"\n ></button>\n </fd-card-content>\n\n <fd-card-footer style=\"border-top: 1px solid #ccc\">\n <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\n <fd-menu #menu>\n <li fd-menu-item (click)=\"onScan()\">\n <a fd-menu-interactive>\n <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\n </a>\n </li>\n <li fd-menu-item (click)=\"onAdvanceScan()\">\n <a fd-menu-interactive>\n <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\n </a>\n </li>\n </fd-menu>\n </fd-card-footer>\n </fd-card>\n @if ((uploadingState$ | async)?.uploading === true) {\n <bsu-mask></bsu-mask>\n }\n </div>\n</ng-template>\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\n <fd-dialog-header>\n <ng-template fdkTemplate=\"header\">\n <div fd-bar-left>\n <fd-bar-element>\n <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\n </fd-bar-element>\n </div>\n <div fd-bar-right>\n @if (!dialogConfig.fullscreen) {\n <fd-button-bar\n ariaLabel=\"Fit image size\"\n [glyph]=\"'resize'\"\n [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n (click)=\"fillWidth = !fillWidth\"\n ></fd-button-bar>\n }\n <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\n </div>\n </ng-template>\n </fd-dialog-header>\n <fd-dialog-body #fdbody>\n <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\n @for (media of dialog.data.mediaData; track media.FileId; let i = $index) {\n <div\n class=\"column big-imgs-box\"\n [class.fill-width]=\"fillWidth\"\n [class.fill-all]=\"fillAll\"\n [class.fill-original]=\"fillOriginal\"\n [ngClass]=\"selectedZoom\"\n >\n <fd-toolbar fdType=\"solid\" fdType=\"transparent\" [clearBorder]=\"true\">\n <fd-toolbar-spacer></fd-toolbar-spacer>\n <button fd-toolbar-item fd-button glyph=\"rotate\" (click)=\"onRotate(img, media, i)\"></button>\n <fd-toolbar-spacer></fd-toolbar-spacer>\n </fd-toolbar>\n <div class=\"pics\" [id]=\"i\">\n <bsu-mask></bsu-mask>\n <img #img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n </div>\n </div>\n }\n </div>\n @if ((deviceSize$ | async) !== 's') {\n <div class=\"thumbnail\" style=\"flex-shrink: 1\">\n <ng-cotainer\n *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true, gallery: this.gallery }\"\n ></ng-cotainer>\n </div>\n }\n </fd-dialog-body>\n </fd-dialog>\n</ng-template>\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}.big-imgs-box{position:relative}.big-imgs-box>fd-toolbar{position:absolute;z-index:5;opacity:.5}.big-imgs-box>fd-toolbar:hover{opacity:1}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:#555454;border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i3$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i5$2.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i5$2.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i5$2.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i2$8.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "directive", type: i4.InlineHelpDirective, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help"] }, { kind: "component", type: i4$3.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$3.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$3.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i6$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i6$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i6$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i6$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i6$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i4$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4$2.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i6$1.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i7$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i8.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i8.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10277
10277
|
}
|
|
10278
10278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiPicturesInfoComponent, decorators: [{
|
|
10279
10279
|
type: Component,
|
|
10280
|
-
args: [{ selector: 'bsu-ui-pictures-info', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-file-uploader\n #uploader\n [style.display]=\"'none'\"\n [id]=\"id\"\n [name]=\"'pictures_' + id\"\n [placeholder]=\"'AttachPicture' | bbbTranslate\"\n [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif\"\n [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\n [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\n (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\" let-gallery=\"gallery\">\n <fd-layout-grid>\n @if (mediaData$ | async; as mediaData) {\n <div fdLayoutGridRow>\n @for (media of mediaData; track media; let i = $index) {\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\" (click)=\"onMedaiClick(gallery, media, i)\">\n <ng-container\n *ngTemplateOutlet=\"\n cardTpl;\n context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\n \"\n ></ng-container>\n </div>\n } @if (!inDialog && (disableOrReadonly$ | async) === true ? false : true) {\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\">\n <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\n </div>\n }\n </div>\n }\n </fd-layout-grid>\n</ng-template>\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\n <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\n <fd-card-content style=\"text-align: center; height: 120px\">\n <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" #img />\n </fd-card-content>\n @if (!inDialog) {\n <fd-card-footer>\n <button\n glyph=\"message-information\"\n *fdCardFooterActionItem\n fd-button\n fdType=\"transparent\"\n [fd-inline-help]=\"media.title\"\n [triggers]=\"['click']\"\n [closeOnOutsideClick]=\"true\"\n ></button>\n <button *fdCardFooterActionItem fd-button glyph=\"rotate\" (click)=\"onRotate(img, media, index)\"></button>\n\n <button\n glyph=\"full-screen\"\n *fdCardFooterActionItem\n fd-button\n fdType=\"transparent\"\n (click)=\"onFullscreen(media, mediaData)\"\n ></button>\n @if ((disableOrReadonly$ | async) === true ? false : true) {\n <button\n glyph=\"delete\"\n *fdCardFooterActionItem\n fd-button\n fdType=\"transparent\"\n (click)=\"onDelete(index)\"\n ></button>\n }\n </fd-card-footer>\n }\n </fd-card>\n</ng-template>\n<ng-template #newFile>\n <div style=\"position: relative; height: 100%\">\n <fd-card>\n <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\n <button\n fd-button\n glyph=\"add-photo\"\n fdType=\"transparent\"\n [label]=\"'AttachFile' | bbbTranslate\"\n (click)=\"uploader.open()\"\n ></button>\n </fd-card-content>\n\n <fd-card-footer style=\"border-top: 1px solid #ccc\">\n <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\n <fd-menu #menu>\n <li fd-menu-item (click)=\"onScan()\">\n <a fd-menu-interactive>\n <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\n </a>\n </li>\n <li fd-menu-item (click)=\"onAdvanceScan()\">\n <a fd-menu-interactive>\n <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\n </a>\n </li>\n </fd-menu>\n </fd-card-footer>\n </fd-card>\n @if ((uploadingState$ | async)?.uploading === true) {\n <bsu-mask></bsu-mask>\n }\n </div>\n</ng-template>\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\n <fd-dialog-header>\n <ng-template fdkTemplate=\"header\">\n <div fd-bar-left>\n <fd-bar-element>\n <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\n </fd-bar-element>\n </div>\n <div fd-bar-right>\n @if (!dialogConfig.fullscreen) {\n <fd-button-bar\n ariaLabel=\"Fit image size\"\n [glyph]=\"'resize'\"\n [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n (click)=\"fillWidth = !fillWidth\"\n ></fd-button-bar>\n }\n <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\n </div>\n </ng-template>\n </fd-dialog-header>\n <fd-dialog-body #fdbody>\n <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\n @for (media of dialog.data.mediaData; track media.FileId; let i = $index) {\n <div\n class=\"column big-imgs-box\"\n [class.fill-width]=\"fillWidth\"\n [class.fill-all]=\"fillAll\"\n [class.fill-original]=\"fillOriginal\"\n [ngClass]=\"selectedZoom\"\n >\n <fd-toolbar fdType=\"solid\" fdType=\"transparent\" [clearBorder]=\"true\">\n <fd-toolbar-spacer></fd-toolbar-spacer>\n <button fd-toolbar-item fd-button glyph=\"rotate\" (click)=\"onRotate(img, media, i)\"></button>\n <fd-toolbar-spacer></fd-toolbar-spacer>\n </fd-toolbar>\n <div class=\"pics\" [id]=\"i\">\n <bsu-mask></bsu-mask>\n <img #img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n </div>\n </div>\n }\n </div>\n @if ((deviceSize$ | async) !== 's') {\n <div class=\"thumbnail\" style=\"flex-shrink: 1\">\n <ng-cotainer\n *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true, gallery: this.gallery }\"\n ></ng-cotainer>\n </div>\n }\n </fd-dialog-body>\n </fd-dialog>\n</ng-template>\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}.big-imgs-box{position:relative}.big-imgs-box>fd-toolbar{position:absolute;z-index:5;opacity:.5}.big-imgs-box>fd-toolbar:hover{opacity:1}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:#555454;border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"] }]
|
|
10280
|
+
args: [{ selector: 'bsu-ui-pictures-info', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-file-uploader\n #uploader\n [style.display]=\"'none'\"\n [id]=\"id\"\n [name]=\"'pictures_' + id\"\n [placeholder]=\"'AttachPicture' | bbbTranslate\"\n [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif,.pdf\"\n [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\n [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\n (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\" let-gallery=\"gallery\">\n <fd-layout-grid>\n @if (mediaData$ | async; as mediaData) {\n <div fdLayoutGridRow>\n @for (media of mediaData; track media; let i = $index) {\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\" (click)=\"onMedaiClick(gallery, media, i)\">\n <ng-container\n *ngTemplateOutlet=\"\n cardTpl;\n context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\n \"\n ></ng-container>\n </div>\n } @if (!inDialog && (disableOrReadonly$ | async) === true ? false : true) {\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\">\n <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\n </div>\n }\n </div>\n }\n </fd-layout-grid>\n</ng-template>\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\n <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\n <fd-card-content style=\"text-align: center; height: 120px\">\n <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" #img />\n </fd-card-content>\n @if (!inDialog) {\n <fd-card-footer>\n <button\n glyph=\"message-information\"\n *fdCardFooterActionItem\n fd-button\n fdType=\"transparent\"\n [fd-inline-help]=\"media.title\"\n [triggers]=\"['click']\"\n [closeOnOutsideClick]=\"true\"\n ></button>\n <button *fdCardFooterActionItem fd-button glyph=\"rotate\" (click)=\"onRotate(img, media, index)\"></button>\n\n <button\n glyph=\"full-screen\"\n *fdCardFooterActionItem\n fd-button\n fdType=\"transparent\"\n (click)=\"onFullscreen(media, mediaData)\"\n ></button>\n @if ((disableOrReadonly$ | async) === true ? false : true) {\n <button\n glyph=\"delete\"\n *fdCardFooterActionItem\n fd-button\n fdType=\"transparent\"\n (click)=\"onDelete(index)\"\n ></button>\n }\n </fd-card-footer>\n }\n </fd-card>\n</ng-template>\n<ng-template #newFile>\n <div style=\"position: relative; height: 100%\">\n <fd-card>\n <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\n <button\n fd-button\n glyph=\"add-photo\"\n fdType=\"transparent\"\n [label]=\"'AttachFile' | bbbTranslate\"\n (click)=\"uploader.open()\"\n ></button>\n </fd-card-content>\n\n <fd-card-footer style=\"border-top: 1px solid #ccc\">\n <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\n <fd-menu #menu>\n <li fd-menu-item (click)=\"onScan()\">\n <a fd-menu-interactive>\n <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\n </a>\n </li>\n <li fd-menu-item (click)=\"onAdvanceScan()\">\n <a fd-menu-interactive>\n <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\n </a>\n </li>\n </fd-menu>\n </fd-card-footer>\n </fd-card>\n @if ((uploadingState$ | async)?.uploading === true) {\n <bsu-mask></bsu-mask>\n }\n </div>\n</ng-template>\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\n <fd-dialog-header>\n <ng-template fdkTemplate=\"header\">\n <div fd-bar-left>\n <fd-bar-element>\n <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\n </fd-bar-element>\n </div>\n <div fd-bar-right>\n @if (!dialogConfig.fullscreen) {\n <fd-button-bar\n ariaLabel=\"Fit image size\"\n [glyph]=\"'resize'\"\n [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n (click)=\"fillWidth = !fillWidth\"\n ></fd-button-bar>\n }\n <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\n </div>\n </ng-template>\n </fd-dialog-header>\n <fd-dialog-body #fdbody>\n <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\n @for (media of dialog.data.mediaData; track media.FileId; let i = $index) {\n <div\n class=\"column big-imgs-box\"\n [class.fill-width]=\"fillWidth\"\n [class.fill-all]=\"fillAll\"\n [class.fill-original]=\"fillOriginal\"\n [ngClass]=\"selectedZoom\"\n >\n <fd-toolbar fdType=\"solid\" fdType=\"transparent\" [clearBorder]=\"true\">\n <fd-toolbar-spacer></fd-toolbar-spacer>\n <button fd-toolbar-item fd-button glyph=\"rotate\" (click)=\"onRotate(img, media, i)\"></button>\n <fd-toolbar-spacer></fd-toolbar-spacer>\n </fd-toolbar>\n <div class=\"pics\" [id]=\"i\">\n <bsu-mask></bsu-mask>\n <img #img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n </div>\n </div>\n }\n </div>\n @if ((deviceSize$ | async) !== 's') {\n <div class=\"thumbnail\" style=\"flex-shrink: 1\">\n <ng-cotainer\n *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true, gallery: this.gallery }\"\n ></ng-cotainer>\n </div>\n }\n </fd-dialog-body>\n </fd-dialog>\n</ng-template>\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}.big-imgs-box{position:relative}.big-imgs-box>fd-toolbar{position:absolute;z-index:5;opacity:.5}.big-imgs-box>fd-toolbar:hover{opacity:1}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:#555454;border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"] }]
|
|
10281
10281
|
}], propDecorators: { value: [{
|
|
10282
10282
|
type: Input
|
|
10283
10283
|
}], gallery: [{
|