barsa-sap-ui 2.0.46 → 2.0.48

package/esm2022/lib/report-new-top-form/report-new-top-form.component.mjs

@@ -45,7 +45,7 @@ export class ReportNewTopFormComponent extends BaseViewItemPropsComponent {
         this.formPanelCtrlr.Clear();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ReportNewTopFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ReportNewTopFormComponent, selector: "bsu-report-new-top-form", inputs: { selectedMo: "selectedMo" }, outputs: { add: "add", save: "save" }, providers: [FormPanelService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (layout$ | async; as 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}\n<div>\n    <button\n        fd-button\n        [disabled]=\"!!selectedMo\"\n        [fdType]=\"'standard'\"\n        [label]=\"'New' | bbbTranslate\"\n        [glyph]=\"'pull-down'\"\n        (click)=\"onAdd()\"\n    ></button>\n    <button\n        fd-button\n        (click)=\"onSave()\"\n        [disabled]=\"!selectedMo\"\n        [fdType]=\"'standard'\"\n        [label]=\"'Save' | bbbTranslate\"\n        [glyph]=\"'save'\"\n    ></button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-end}button{margin:.3rem 5px .5rem;max-width:170px}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ReportNewTopFormComponent, selector: "bsu-report-new-top-form", inputs: { selectedMo: "selectedMo" }, outputs: { add: "add", save: "save" }, providers: [FormPanelService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (layout$ | async; as 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}\n<div>\n    <button\n        fd-button\n        [disabled]=\"!!selectedMo\"\n        [fdType]=\"'standard'\"\n        [label]=\"'New' | bbbTranslate\"\n        [glyph]=\"'pull-down'\"\n        (click)=\"onAdd()\"\n    ></button>\n    <button\n        fd-button\n        (click)=\"onSave()\"\n        [disabled]=\"!selectedMo\"\n        [fdType]=\"'standard'\"\n        [label]=\"'Save' | bbbTranslate\"\n        [glyph]=\"'save'\"\n    ></button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-end}button{margin:.3rem 5px .5rem;max-width:170px}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ReportNewTopFormComponent, decorators: [{
             type: Component,

package/esm2022/lib/report-search-fields-hidden-settings/report-search-fields-hidden-settings.component.mjs

@@ -23,7 +23,7 @@ export class ReportSearchFieldsHiddenSettingsComponent extends BaseComponent {
         this._dialogRef.close(this.girdColumnsComppnent.columns);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ReportSearchFieldsHiddenSettingsComponent, deps: [{ token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: ReportSearchFieldsHiddenSettingsComponent, selector: "bsu-report-search-fields-hidden-settings", viewQueries: [{ propertyName: "girdColumnsComppnent", first: true, predicate: UiGridColumnsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <ng-template fdkTemplate=\"header\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>\r\n                    <h4 fd-title [headerSize]=\"4\">\r\n                        {{ 'Fields' | bbbTranslate }}\r\n                    </h4>\r\n                </fd-bar-element>\r\n            </div>\r\n            <div fd-bar-right>\r\n                <fd-bar-element>\r\n                    <button fd-button [label]=\"'Reset' | bbbTranslate\" [fdType]=\"'transparent'\"></button>\r\n                </fd-bar-element>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body class=\"setting-wrapper\">\r\n        <bsu-ui-grid-columns [columns]=\"fields\" #columnFilter></bsu-ui-grid-columns>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-dialog-footer-button>\r\n            <button fd-button fdType=\"emphasized\" (click)=\"onOkClick()\" [label]=\"'OK' | bbbTranslate\"></button>\r\n        </fd-dialog-footer-button>\r\n        <fd-dialog-footer-button>\r\n            <button fd-button (click)=\"onCancelSettings()\" [label]=\"'Cancel' | bbbTranslate\"></button>\r\n        </fd-dialog-footer-button>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i5.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i6.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i7.UiGridColumnsComponent, selector: "bsu-ui-grid-columns", inputs: ["columns", "selectedColumns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i8.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: ReportSearchFieldsHiddenSettingsComponent, selector: "bsu-report-search-fields-hidden-settings", viewQueries: [{ propertyName: "girdColumnsComppnent", first: true, predicate: UiGridColumnsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <ng-template fdkTemplate=\"header\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>\r\n                    <h4 fd-title [headerSize]=\"4\">\r\n                        {{ 'Fields' | bbbTranslate }}\r\n                    </h4>\r\n                </fd-bar-element>\r\n            </div>\r\n            <div fd-bar-right>\r\n                <fd-bar-element>\r\n                    <button fd-button [label]=\"'Reset' | bbbTranslate\" [fdType]=\"'transparent'\"></button>\r\n                </fd-bar-element>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body class=\"setting-wrapper\">\r\n        <bsu-ui-grid-columns [columns]=\"fields\" #columnFilter></bsu-ui-grid-columns>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-dialog-footer-button>\r\n            <button fd-button fdType=\"emphasized\" (click)=\"onOkClick()\" [label]=\"'OK' | bbbTranslate\"></button>\r\n        </fd-dialog-footer-button>\r\n        <fd-dialog-footer-button>\r\n            <button fd-button (click)=\"onCancelSettings()\" [label]=\"'Cancel' | bbbTranslate\"></button>\r\n        </fd-dialog-footer-button>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i5.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i6.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i7.UiGridColumnsComponent, selector: "bsu-ui-grid-columns", inputs: ["columns", "selectedColumns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i8.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ReportSearchFieldsHiddenSettingsComponent, decorators: [{
             type: Component,

package/esm2022/lib/report-search-fields-manage/report-search-fields-manage.component.mjs

@@ -85,7 +85,7 @@ export class ReportSearchFieldsManageComponent extends BaseComponent {
         row.IsDeleted = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ReportSearchFieldsManageComponent, deps: [{ token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ReportSearchFieldsManageComponent, selector: "bsu-report-search-fields-manage", viewQueries: [{ propertyName: "radioButtonsComponent", predicate: RadioButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">\n                        {{ 'ManageSearchPanel' | bbbTranslate }}\n                    </h4>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button fd-button [label]=\"'Reset' | bbbTranslate\" [fdType]=\"'transparent'\"></button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body class=\"setting-wrapper\">\n        @if (saveing) {\n        <bsu-mask></bsu-mask>\n        }\n        <table fd-table [class.saveing-form]=\"saveing\">\n            <thead fd-table-header>\n                <tr fd-table-row>\n                    <th fd-table-cell>{{ 'View' | bbbTranslate }}</th>\n                    <th fd-table-cell>{{ 'Share' | bbbTranslate }}</th>\n                    <th fd-table-cell>{{ 'Default' | bbbTranslate }}</th>\n                    <th fd-table-cell>{{ 'ApplyAutomatically' | bbbTranslate }}</th>\n                    <th fd-table-cell></th>\n                </tr>\n            </thead>\n\n            <tbody fd-table-body [noBorderX]=\"true\">\n                @for (row of allSearchPanelSettings; track row; let i = $index) { @if (!row.IsDeleted) {\n                <tr fd-table-row>\n                    <td fd-table-cell>\n                        @if (row.IsPrimary) {\n                        <strong>{{ row.Title }}</strong>\n                        } @if (!row.IsPrimary) {\n                        <input fd-form-control [(ngModel)]=\"row.Title\" />\n                        }\n                    </td>\n                    <td fd-table-cell>\n                        {{ row.IsPublic ? ('Public' | bbbTranslate) : '' }}\n                    </td>\n                    <td fd-table-cell>\n                        <fd-radio-button\n                            [name]=\"'radio' + i\"\n                            [value]=\"row.Title\"\n                            [selectedValue]=\"row.IsDefault ? row.Title : null\"\n                            (click)=\"onDefault(row)\"\n                        >\n                        </fd-radio-button>\n                    </td>\n                    <td fd-table-cell>\n                        @if (!row.IsPrimary) {\n                        <fd-checkbox [(ngModel)]=\"row.ApplyAutomatically\"></fd-checkbox>\n                        }\n                    </td>\n                    <td fd-table-cell [fitContent]=\"true\">\n                        @if (!row.IsPrimary) {\n                        <button fd-button fdType=\"transparent\" glyph=\"decline\" (click)=\"onDelete(row)\"></button>\n                        }\n                    </td>\n                </tr>\n                } }\n            </tbody>\n        </table>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                fdType=\"emphasized\"\n                (click)=\"onOkClick()\"\n                [label]=\"'OK' | bbbTranslate\"\n                [disabled]=\"saveing\"\n            ></button>\n        </fd-dialog-footer-button>\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                (click)=\"onCancelSettings()\"\n                [label]=\"'Cancel' | bbbTranslate\"\n                [disabled]=\"saveing\"\n            ></button>\n        </fd-dialog-footer-button>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i6.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i7.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i7.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i7.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i7.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i8.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i9.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i10.RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { kind: "component", type: i11.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "noOuterBorder", "topBorder", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i11.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i11.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i11.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i11.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "component", type: i12.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i13.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ReportSearchFieldsManageComponent, selector: "bsu-report-search-fields-manage", viewQueries: [{ propertyName: "radioButtonsComponent", predicate: RadioButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">\n                        {{ 'ManageSearchPanel' | bbbTranslate }}\n                    </h4>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button fd-button [label]=\"'Reset' | bbbTranslate\" [fdType]=\"'transparent'\"></button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body class=\"setting-wrapper\">\n        @if (saveing) {\n        <bsu-mask></bsu-mask>\n        }\n        <table fd-table [class.saveing-form]=\"saveing\">\n            <thead fd-table-header>\n                <tr fd-table-row>\n                    <th fd-table-cell>{{ 'View' | bbbTranslate }}</th>\n                    <th fd-table-cell>{{ 'Share' | bbbTranslate }}</th>\n                    <th fd-table-cell>{{ 'Default' | bbbTranslate }}</th>\n                    <th fd-table-cell>{{ 'ApplyAutomatically' | bbbTranslate }}</th>\n                    <th fd-table-cell></th>\n                </tr>\n            </thead>\n\n            <tbody fd-table-body [noBorderX]=\"true\">\n                @for (row of allSearchPanelSettings; track row; let i = $index) { @if (!row.IsDeleted) {\n                <tr fd-table-row>\n                    <td fd-table-cell>\n                        @if (row.IsPrimary) {\n                        <strong>{{ row.Title }}</strong>\n                        } @if (!row.IsPrimary) {\n                        <input fd-form-control [(ngModel)]=\"row.Title\" />\n                        }\n                    </td>\n                    <td fd-table-cell>\n                        {{ row.IsPublic ? ('Public' | bbbTranslate) : '' }}\n                    </td>\n                    <td fd-table-cell>\n                        <fd-radio-button\n                            [name]=\"'radio' + i\"\n                            [value]=\"row.Title\"\n                            [selectedValue]=\"row.IsDefault ? row.Title : null\"\n                            (click)=\"onDefault(row)\"\n                        >\n                        </fd-radio-button>\n                    </td>\n                    <td fd-table-cell>\n                        @if (!row.IsPrimary) {\n                        <fd-checkbox [(ngModel)]=\"row.ApplyAutomatically\"></fd-checkbox>\n                        }\n                    </td>\n                    <td fd-table-cell [fitContent]=\"true\">\n                        @if (!row.IsPrimary) {\n                        <button fd-button fdType=\"transparent\" glyph=\"decline\" (click)=\"onDelete(row)\"></button>\n                        }\n                    </td>\n                </tr>\n                } }\n            </tbody>\n        </table>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                fdType=\"emphasized\"\n                (click)=\"onOkClick()\"\n                [label]=\"'OK' | bbbTranslate\"\n                [disabled]=\"saveing\"\n            ></button>\n        </fd-dialog-footer-button>\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                (click)=\"onCancelSettings()\"\n                [label]=\"'Cancel' | bbbTranslate\"\n                [disabled]=\"saveing\"\n            ></button>\n        </fd-dialog-footer-button>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i6.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i7.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i7.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i7.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i7.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i8.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i9.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i10.RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { kind: "component", type: i11.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "noOuterBorder", "topBorder", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i11.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY", "nonInteractive"] }, { kind: "directive", type: i11.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i11.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i11.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "component", type: i12.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i13.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ReportSearchFieldsManageComponent, decorators: [{
             type: Component,

package/esm2022/lib/report-search-panel-save/report-search-panel-save.component.mjs

@@ -79,7 +79,7 @@ export class ReportSearchPanelSaveComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ReportSearchPanelSaveComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.DialogRef }, { token: i3.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ReportSearchPanelSaveComponent, selector: "bsu-report-search-panel-save", usesInheritance: true, ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <h1 fd-title>{{ 'Save' | bbbTranslate }}</h1>\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\" [disabled]=\"saveing\"></button>\n    </fd-dialog-header>\n\n    <fd-dialog-body>\n        @if (saveing) {\n        <bsu-mask></bsu-mask>\n        }\n        <div fd-form-item [formGroup]=\"appGroupForm\" [class.saveing-form]=\"saveing\">\n            <label fd-form-label [required]=\"true\">{{ 'Title' | bbbTranslate }}</label>\n            <fd-form-input-message-group>\n                <fd-input-group\n                    class=\"form-control\"\n                    formControlName=\"title\"\n                    form-control\n                    [button]=\"true\"\n                    [(ngModel)]=\"title\"\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\n                >\n                </fd-input-group>\n                <fd-checkbox\n                    formControlName=\"setAsDefault\"\n                    [label]=\"'SetasDefault' | bbbTranslate\"\n                    [(ngModel)]=\"isDefault\"\n                ></fd-checkbox>\n                <fd-checkbox\n                    formControlName=\"publicFilter\"\n                    [label]=\"'Public' | bbbTranslate\"\n                    [(ngModel)]=\"isPublic\"\n                ></fd-checkbox>\n                <fd-checkbox\n                    formControlName=\"applyAutomatically\"\n                    [label]=\"'ApplyAutomatically' | bbbTranslate\"\n                    [(ngModel)]=\"applyAutomatically\"\n                ></fd-checkbox>\n                @if (submitted && appGroupForm.controls.title.errors) {\n                <fd-form-message type=\"error\">\n                    {{ RequiredText }}\n                </fd-form-message>\n                }\n            </fd-form-input-message-group>\n        </div>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\" [disabled]=\"saveing\">\n        </fd-button-bar>\n        <fd-button-bar\n            [disabled]=\"saveing\"\n            [label]=\"'Cancel' | bbbTranslate\"\n            fdInitialFocus\n            fdType=\"transparent\"\n            (click)=\"this.dialogRef.close()\"\n        >\n        </fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i5.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i6.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i6.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i6.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i6.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i8.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i9.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i10.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i3.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ReportSearchPanelSaveComponent, selector: "bsu-report-search-panel-save", usesInheritance: true, ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <h1 fd-title>{{ 'Save' | bbbTranslate }}</h1>\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\" [disabled]=\"saveing\"></button>\n    </fd-dialog-header>\n\n    <fd-dialog-body>\n        @if (saveing) {\n        <bsu-mask></bsu-mask>\n        }\n        <div fd-form-item [formGroup]=\"appGroupForm\" [class.saveing-form]=\"saveing\">\n            <label fd-form-label [required]=\"true\">{{ 'Title' | bbbTranslate }}</label>\n            <fd-form-input-message-group>\n                <fd-input-group\n                    class=\"form-control\"\n                    formControlName=\"title\"\n                    form-control\n                    [button]=\"true\"\n                    [(ngModel)]=\"title\"\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\n                >\n                </fd-input-group>\n                <fd-checkbox\n                    formControlName=\"setAsDefault\"\n                    [label]=\"'SetasDefault' | bbbTranslate\"\n                    [(ngModel)]=\"isDefault\"\n                ></fd-checkbox>\n                <fd-checkbox\n                    formControlName=\"publicFilter\"\n                    [label]=\"'Public' | bbbTranslate\"\n                    [(ngModel)]=\"isPublic\"\n                ></fd-checkbox>\n                <fd-checkbox\n                    formControlName=\"applyAutomatically\"\n                    [label]=\"'ApplyAutomatically' | bbbTranslate\"\n                    [(ngModel)]=\"applyAutomatically\"\n                ></fd-checkbox>\n                @if (submitted && appGroupForm.controls.title.errors) {\n                <fd-form-message type=\"error\">\n                    {{ RequiredText }}\n                </fd-form-message>\n                }\n            </fd-form-input-message-group>\n        </div>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\" [disabled]=\"saveing\">\n        </fd-button-bar>\n        <fd-button-bar\n            [disabled]=\"saveing\"\n            [label]=\"'Cancel' | bbbTranslate\"\n            fdInitialFocus\n            fdType=\"transparent\"\n            (click)=\"this.dialogRef.close()\"\n        >\n        </fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i5.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i6.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i6.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i6.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i6.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i8.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i9.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i10.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i3.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ReportSearchPanelSaveComponent, decorators: [{
             type: Component,

package/esm2022/lib/responsive-toolbar/responsive-toolbar.component.mjs

@@ -34,7 +34,7 @@ export class ResponsiveToolbarComponent extends BaseComponent {
         this.btnClick.emit(button);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ResponsiveToolbarComponent, deps: [{ token: i1.PortalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ResponsiveToolbarComponent, selector: "bsu-responsive-toolbar", inputs: { buttons: "buttons" }, outputs: { btnClick: "btnClick" }, viewQueries: [{ propertyName: "btnListRef", predicate: ["btnRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <div style=\"width: 100%; height: 0; visibility: hidden\" #containerRef>\n<ng-container\n  *ngTemplateOutlet=\"renderToolbar; context: { $implicit: buttons }\"\n></ng-container>\n</div>\n<bsu-responsive-toolbar-renderer\n  *ngIf=\"buttonsCalculated\"\n  [buttons]=\"buttonsCalculated\"\n  (btnClick)=\"onButtonClick($event)\"\n  [renderToolbar]=\"renderToolbar\"\n></bsu-responsive-toolbar-renderer>\n\n<ng-template #renderToolbar let-btnList>\n  <ng-container *ngFor=\"let btn of btnList\">\n    <ng-container *ngIf=\"btn === '-' || btn.text === '-'; else btnCommand\">\n      <span #btnRef class=\"toolbar-btn toolbar-vseperator\"></span>\n    </ng-container>\n    <ng-template #btnCommand>\n      <ui5-button\n        #btnRef\n        (click)=\"onButtonClick(btn)\"\n        [attr.disabled]=\"btn.enable === false ? true : null\"\n        [attr.disabled]=\"btn.readonly === true ? true : null\"\n        class=\"toolbar-btn\"\n        [attr.design]=\"btn.emphasized ? 'Emphasized' : 'Transparent'\"\n        [attr.icon]=\"btn.newIcon ? btn.newIcon : null\"\n        >{{ btn.text }}\n        <img *ngIf=\"!btn.newIcon && !btn.isBuiltin\" width=\"16\" [src]=\"btn.icon\"\n        /></ui5-button>\n      </ng-template>\n    </ng-container>\n  </ng-template> -->\n\n<fd-toolbar [shouldOverflow]=\"true\" [style.direction]=\"dirValue$ | async\">\n    @for (btn of btns; track btn) { @if (btn === '-' || btn.text === '-') {\n    <fd-toolbar-separator></fd-toolbar-separator>\n    } @else {\n    <button\n        fd-toolbar-item\n        fd-button\n        (click)=\"onButtonClick(btn)\"\n        [attr.disabled]=\"btn.enable === false ? true : null\"\n        [attr.disabled]=\"btn.readonly === true ? true : null\"\n        [fdType]=\"btn.emphasized ? 'emphasized' : 'transparent'\"\n        [label]=\"btn.text\"\n        [glyph]=\"btn.newIcon ? btn.newIcon : null\"\n    >\n        @if (!btn.newIcon && !btn.isBuiltin) {\n        <img width=\"16\" [src]=\"btn.icon\" />\n        }\n    </button>\n    }\n    <ng-template #btnCommand>\n        <button\n            fd-toolbar-item\n            fd-button\n            (click)=\"onButtonClick(btn)\"\n            [attr.disabled]=\"btn.enable === false ? true : null\"\n            [attr.disabled]=\"btn.readonly === true ? true : null\"\n            [fdType]=\"btn.emphasized ? 'emphasized' : 'transparent'\"\n            [label]=\"btn.text\"\n            [glyph]=\"btn.newIcon ? btn.newIcon : null\"\n        >\n            @if (!btn.newIcon && !btn.isBuiltin) {\n            <img width=\"16\" [src]=\"btn.icon\" />\n            }\n        </button>\n    </ng-template>\n    }\n</fd-toolbar>\n", styles: [":host{display:block;width:100%;position:relative}:host ::ng-deep .fd-toolbar--solid{background-color:var(--sapBackgroundColor, #f7f7f7);border:none}\n"], dependencies: [{ kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i3.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i3.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ResponsiveToolbarComponent, selector: "bsu-responsive-toolbar", inputs: { buttons: "buttons" }, outputs: { btnClick: "btnClick" }, viewQueries: [{ propertyName: "btnListRef", predicate: ["btnRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <div style=\"width: 100%; height: 0; visibility: hidden\" #containerRef>\n<ng-container\n  *ngTemplateOutlet=\"renderToolbar; context: { $implicit: buttons }\"\n></ng-container>\n</div>\n<bsu-responsive-toolbar-renderer\n  *ngIf=\"buttonsCalculated\"\n  [buttons]=\"buttonsCalculated\"\n  (btnClick)=\"onButtonClick($event)\"\n  [renderToolbar]=\"renderToolbar\"\n></bsu-responsive-toolbar-renderer>\n\n<ng-template #renderToolbar let-btnList>\n  <ng-container *ngFor=\"let btn of btnList\">\n    <ng-container *ngIf=\"btn === '-' || btn.text === '-'; else btnCommand\">\n      <span #btnRef class=\"toolbar-btn toolbar-vseperator\"></span>\n    </ng-container>\n    <ng-template #btnCommand>\n      <ui5-button\n        #btnRef\n        (click)=\"onButtonClick(btn)\"\n        [attr.disabled]=\"btn.enable === false ? true : null\"\n        [attr.disabled]=\"btn.readonly === true ? true : null\"\n        class=\"toolbar-btn\"\n        [attr.design]=\"btn.emphasized ? 'Emphasized' : 'Transparent'\"\n        [attr.icon]=\"btn.newIcon ? btn.newIcon : null\"\n        >{{ btn.text }}\n        <img *ngIf=\"!btn.newIcon && !btn.isBuiltin\" width=\"16\" [src]=\"btn.icon\"\n        /></ui5-button>\n      </ng-template>\n    </ng-container>\n  </ng-template> -->\n\n<fd-toolbar [shouldOverflow]=\"true\" [style.direction]=\"dirValue$ | async\">\n    @for (btn of btns; track btn) { @if (btn === '-' || btn.text === '-') {\n    <fd-toolbar-separator></fd-toolbar-separator>\n    } @else {\n    <button\n        fd-toolbar-item\n        fd-button\n        (click)=\"onButtonClick(btn)\"\n        [attr.disabled]=\"btn.enable === false ? true : null\"\n        [attr.disabled]=\"btn.readonly === true ? true : null\"\n        [fdType]=\"btn.emphasized ? 'emphasized' : 'transparent'\"\n        [label]=\"btn.text\"\n        [glyph]=\"btn.newIcon ? btn.newIcon : null\"\n    >\n        @if (!btn.newIcon && !btn.isBuiltin) {\n        <img width=\"16\" [src]=\"btn.icon\" />\n        }\n    </button>\n    }\n    <ng-template #btnCommand>\n        <button\n            fd-toolbar-item\n            fd-button\n            (click)=\"onButtonClick(btn)\"\n            [attr.disabled]=\"btn.enable === false ? true : null\"\n            [attr.disabled]=\"btn.readonly === true ? true : null\"\n            [fdType]=\"btn.emphasized ? 'emphasized' : 'transparent'\"\n            [label]=\"btn.text\"\n            [glyph]=\"btn.newIcon ? btn.newIcon : null\"\n        >\n            @if (!btn.newIcon && !btn.isBuiltin) {\n            <img width=\"16\" [src]=\"btn.icon\" />\n            }\n        </button>\n    </ng-template>\n    }\n</fd-toolbar>\n", styles: [":host{display:block;width:100%;position:relative}:host ::ng-deep .fd-toolbar--solid{background-color:var(--sapBackgroundColor, #f7f7f7);border:none}\n"], dependencies: [{ kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i3.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i3.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ResponsiveToolbarComponent, decorators: [{
             type: Component,

package/esm2022/lib/ui-button/ui-button.component.mjs

@@ -20,7 +20,7 @@ export class UiButtonComponent extends FieldBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiButtonComponent, selector: "bsu-ui-button", host: { properties: { "style.margin": "this.designMode" } }, usesInheritance: true, ngImport: i0, template: "<button\n    (click)=\"onClick()\"\n    [disabled]=\"(disable$ | async)!!\"\n    fd-button\n    [fdType]=\"parameters?.FdType$Caption\"\n    [glyph]=\"parameters?.Icon\"\n    [title]=\"label | bbbTranslate\"\n>\n    @if (!parameters?.Icon && context?.Setting?.FieldIcon && !JsonExtraProp?.Icon) {\n    <img [src]=\"context?.Setting.FieldIcon\" />\n    } @if (label && !JsonExtraProp?.OnlyIcon && !parameters?.OnlyIcon) {\n    <span class=\"fd-button__text\">{{ label | bbbTranslate }}</span>\n    }\n</button>\n<input fd-form-control class=\"extra-input-hidden\" />\n", styles: [":host{display:flex;height:100%;align-items:center}button{width:100%}.fd-button__text{font-size:.78rem}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiButtonComponent, selector: "bsu-ui-button", host: { properties: { "style.margin": "this.designMode" } }, usesInheritance: true, ngImport: i0, template: "<button\n    (click)=\"onClick()\"\n    [disabled]=\"(disable$ | async)!!\"\n    fd-button\n    [fdType]=\"parameters?.FdType$Caption\"\n    [glyph]=\"parameters?.Icon\"\n    [title]=\"label | bbbTranslate\"\n>\n    @if (!parameters?.Icon && context?.Setting?.FieldIcon && !JsonExtraProp?.Icon) {\n    <img [src]=\"context?.Setting.FieldIcon\" />\n    } @if (label && !JsonExtraProp?.OnlyIcon && !parameters?.OnlyIcon) {\n    <span class=\"fd-button__text\">{{ label | bbbTranslate }}</span>\n    }\n</button>\n<input fd-form-control class=\"extra-input-hidden\" />\n", styles: [":host{display:flex;height:100%;align-items:center}button{width:100%}.fd-button__text{font-size:.78rem}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiButtonComponent, decorators: [{
             type: Component,

package/esm2022/lib/ui-card-view/ui-card-view.component.mjs

@@ -50,7 +50,7 @@ export class UiCardViewComponent extends ReportViewBaseComponent {
         command();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiCardViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiCardViewComponent, selector: "bsu-ui-card-view", usesInheritance: true, ngImport: i0, template: "<fd-layout-panel>\n    <fd-layout-panel-body [bleed]=\"true\">\n        @if (isCheckList) {\n        <table fd-table>\n            <thead fd-table-header>\n                <tr fd-table-row>\n                    <th fd-table-cell>\n                        <fd-checkbox\n                            name=\"allCheckbox\"\n                            [ngModel]=\"allChecked\"\n                            (ngModelChange)=\"onAllCheckbox($event)\"\n                            >{{ 'All' | bbbTranslate }}</fd-checkbox\n                        >\n                    </th>\n                </tr>\n            </thead>\n        </table>\n        }\n    </fd-layout-panel-body>\n</fd-layout-panel>\n<bsu-card-view-content\n    [moDataList]=\"moDataList\"\n    [groupby]=\"groupby\"\n    [setting]=\"cardSetting\"\n    [openOnClick]=\"openOnClick\"\n    [inlineEditMode]=\"inlineEditMode\"\n    [allowInlineEdit]=\"allowInlineEdit\"\n    [rtl]=\"rtl\"\n    [deviceName]=\"deviceName\"\n    [deviceSize]=\"deviceSize\"\n    [allColumns]=\"allColumns\"\n    [contextMenuItems]=\"contextMenuItems\"\n    [canView]=\"canView\"\n    [formSetting]=\"formSetting\"\n    [conditionalFormats]=\"conditionalFormats\"\n    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n    [navigationArrow]=\"navigationArrow\"\n    [isCheckList]=\"isCheckList\"\n    (rowCheck)=\"onRowCheck($event)\"\n    (rowClick)=\"onRowClick($event)\"\n    (ulvCommand)=\"onUlvCommand($event)\"\n    (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n    (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n    (action)=\"onAction($event)\"\n></bsu-card-view-content>\n", styles: ["fd-layout-panel{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i3.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { kind: "component", type: i3.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i4.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "noOuterBorder", "topBorder", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i4.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i4.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i4.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "component", type: i5.CardViewContentComponent, selector: "bsu-card-view-content" }, { kind: "pipe", type: i6.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiCardViewComponent, selector: "bsu-ui-card-view", usesInheritance: true, ngImport: i0, template: "<fd-layout-panel>\n    <fd-layout-panel-body [bleed]=\"true\">\n        @if (isCheckList) {\n        <table fd-table>\n            <thead fd-table-header>\n                <tr fd-table-row>\n                    <th fd-table-cell>\n                        <fd-checkbox\n                            name=\"allCheckbox\"\n                            [ngModel]=\"allChecked\"\n                            (ngModelChange)=\"onAllCheckbox($event)\"\n                            >{{ 'All' | bbbTranslate }}</fd-checkbox\n                        >\n                    </th>\n                </tr>\n            </thead>\n        </table>\n        }\n    </fd-layout-panel-body>\n</fd-layout-panel>\n<bsu-card-view-content\n    [moDataList]=\"moDataList\"\n    [groupby]=\"groupby\"\n    [setting]=\"cardSetting\"\n    [openOnClick]=\"openOnClick\"\n    [inlineEditMode]=\"inlineEditMode\"\n    [allowInlineEdit]=\"allowInlineEdit\"\n    [rtl]=\"rtl\"\n    [deviceName]=\"deviceName\"\n    [deviceSize]=\"deviceSize\"\n    [allColumns]=\"allColumns\"\n    [contextMenuItems]=\"contextMenuItems\"\n    [canView]=\"canView\"\n    [formSetting]=\"formSetting\"\n    [conditionalFormats]=\"conditionalFormats\"\n    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n    [navigationArrow]=\"navigationArrow\"\n    [isCheckList]=\"isCheckList\"\n    (rowCheck)=\"onRowCheck($event)\"\n    (rowClick)=\"onRowClick($event)\"\n    (ulvCommand)=\"onUlvCommand($event)\"\n    (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n    (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n    (action)=\"onAction($event)\"\n></bsu-card-view-content>\n", styles: ["fd-layout-panel{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i3.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { kind: "component", type: i3.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i4.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "noOuterBorder", "topBorder", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i4.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY", "nonInteractive"] }, { kind: "directive", type: i4.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i4.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "component", type: i5.CardViewContentComponent, selector: "bsu-card-view-content" }, { kind: "pipe", type: i6.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiCardViewComponent, decorators: [{
             type: Component,

package/esm2022/lib/ui-card-view-horizontal-group/ui-card-view-horizontal-group.component.mjs

@@ -30,7 +30,7 @@ export class UiCardViewHorizontalGroupComponent extends UiCardViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiCardViewHorizontalGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiCardViewHorizontalGroupComponent, selector: "bsu-ui-card-view-horizontal-group", viewQueries: [{ propertyName: "dynamicPage", first: true, predicate: DynamicPageComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fd-dynamic-page [size]=\"deviceSize | dynamicPageSize\">\n    @if (moDataList?.length) {\n    <fd-tab-list [expandOverflowText]=\"'More' | bbbTranslate\" [stackContent]=\"true\">\n        @for ( tab of moDataList | groupBy: groupby[0].Name | reverse: isFirefox; track _trackByRow(index, tab); let\n        index = $index) {\n        <fd-tab [title]=\"tab.key | bbbTranslate\" [id]=\"'h_' + index\">\n            <fd-dynamic-page-content>\n                <h4 fd-title [id]=\"'h_' + index + '_h'\">{{ tab.key | bbbTranslate }}</h4>\n                <bsu-card-view-content\n                    [moDataList]=\"tab.value\"\n                    [groupby]=\"[]\"\n                    [title]=\"tab.key\"\n                    [setting]=\"cardSetting\"\n                    [editMode]=\"inlineEditMode\"\n                    [rtl]=\"rtl\"\n                    [deviceName]=\"deviceName\"\n                    [deviceSize]=\"deviceSize\"\n                    [allColumns]=\"allColumns\"\n                    [contextMenuItems]=\"contextMenuItems\"\n                    [canView]=\"canView\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [navigationArrow]=\"navigationArrow\"\n                    [isCheckList]=\"isCheckList\"\n                    (rowCheck)=\"onRowCheck($event)\"\n                    (rowClick)=\"onRowClick($event)\"\n                    (ulvCommand)=\"onUlvCommand($event)\"\n                    (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n                    (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n                    (action)=\"onAction($event)\"\n                ></bsu-card-view-content>\n            </fd-dynamic-page-content>\n        </fd-tab>\n        }\n    </fd-tab-list>\n    } @else {\n    <fd-dynamic-page-content>\n        <bsu-no-data [simple]=\"true\"></bsu-no-data>\n    </fd-dynamic-page-content>\n    }\n</fd-dynamic-page>\n", styles: [":host ::ng-deep .fd-container.card-list{padding:0!important}:host ::ng-deep .footer-spacer{display:none!important}\n"], dependencies: [{ kind: "component", type: i1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i2.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i3.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i3.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i4.NoDataComponent, selector: "bsu-no-data", inputs: ["simple"] }, { kind: "component", type: i5.CardViewContentComponent, selector: "bsu-card-view-content" }, { kind: "pipe", type: i6.GroupByPipe, name: "groupBy" }, { kind: "pipe", type: i6.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i6.ReversePipe, name: "reverse" }, { kind: "pipe", type: i7.DynamicPageSizePipe, name: "dynamicPageSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiCardViewHorizontalGroupComponent, selector: "bsu-ui-card-view-horizontal-group", viewQueries: [{ propertyName: "dynamicPage", first: true, predicate: DynamicPageComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fd-dynamic-page [size]=\"deviceSize | dynamicPageSize\">\n    @if (moDataList?.length) {\n    <fd-tab-list [expandOverflowText]=\"'More' | bbbTranslate\" [stackContent]=\"true\">\n        @for ( tab of moDataList | groupBy: groupby[0].Name | reverse: isFirefox; track _trackByRow(index, tab); let\n        index = $index) {\n        <fd-tab [title]=\"tab.key | bbbTranslate\" [id]=\"'h_' + index\">\n            <fd-dynamic-page-content>\n                <h4 fd-title [id]=\"'h_' + index + '_h'\">{{ tab.key | bbbTranslate }}</h4>\n                <bsu-card-view-content\n                    [moDataList]=\"tab.value\"\n                    [groupby]=\"[]\"\n                    [title]=\"tab.key\"\n                    [setting]=\"cardSetting\"\n                    [editMode]=\"inlineEditMode\"\n                    [rtl]=\"rtl\"\n                    [deviceName]=\"deviceName\"\n                    [deviceSize]=\"deviceSize\"\n                    [allColumns]=\"allColumns\"\n                    [contextMenuItems]=\"contextMenuItems\"\n                    [canView]=\"canView\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [navigationArrow]=\"navigationArrow\"\n                    [isCheckList]=\"isCheckList\"\n                    (rowCheck)=\"onRowCheck($event)\"\n                    (rowClick)=\"onRowClick($event)\"\n                    (ulvCommand)=\"onUlvCommand($event)\"\n                    (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n                    (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n                    (action)=\"onAction($event)\"\n                ></bsu-card-view-content>\n            </fd-dynamic-page-content>\n        </fd-tab>\n        }\n    </fd-tab-list>\n    } @else {\n    <fd-dynamic-page-content>\n        <bsu-no-data [simple]=\"true\"></bsu-no-data>\n    </fd-dynamic-page-content>\n    }\n</fd-dynamic-page>\n", styles: [":host ::ng-deep .fd-container.card-list{padding:0!important}:host ::ng-deep .footer-spacer{display:none!important}\n"], dependencies: [{ kind: "component", type: i1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i2.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i3.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i3.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i4.NoDataComponent, selector: "bsu-no-data", inputs: ["simple"] }, { kind: "component", type: i5.CardViewContentComponent, selector: "bsu-card-view-content" }, { kind: "pipe", type: i6.GroupByPipe, name: "groupBy" }, { kind: "pipe", type: i6.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i6.ReversePipe, name: "reverse" }, { kind: "pipe", type: i7.DynamicPageSizePipe, name: "dynamicPageSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiCardViewHorizontalGroupComponent, decorators: [{
             type: Component,

package/esm2022/lib/ui-check-box/ui-check-box.component.mjs

@@ -23,7 +23,7 @@ export class UiCheckBoxComponent extends DeviceInfoFieldBaseComponent {
         this.fireContextEvent('check', val);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiCheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: UiCheckBoxComponent, selector: "bsu-ui-check-box", inputs: { MinSize: "MinSize" }, usesInheritance: true, ngImport: i0, template: "<fd-checkbox\n    [id]=\"id\"\n    (change)=\"onValueChange()\"\n    [ngModel]=\"value\"\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\n    [label]=\"!showText ? '' : layoutInfo.Caption\"\n    [wrapLabel]=\"true\"\n>\n</fd-checkbox>\n", styles: [":host{width:100%;height:100%;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: UiCheckBoxComponent, selector: "bsu-ui-check-box", inputs: { MinSize: "MinSize" }, usesInheritance: true, ngImport: i0, template: "<fd-checkbox\n    [id]=\"id\"\n    (change)=\"onValueChange()\"\n    [ngModel]=\"value\"\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\n    [label]=\"!showText ? '' : layoutInfo.Caption\"\n    [wrapLabel]=\"true\"\n>\n</fd-checkbox>\n", styles: [":host{width:100%;height:100%;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiCheckBoxComponent, decorators: [{
             type: Component,

package/esm2022/lib/ui-color-ui/ui-color-ui.component.mjs

@@ -41,7 +41,7 @@ export class UiColorUiComponent extends FieldBaseComponent {
         this.selectedColor = $event;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiColorUiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiColorUiComponent, selector: "bsu-ui-color-ui", usesInheritance: true, ngImport: i0, template: "@if (readonly$ | async) {\n<div class=\"read-only\">\n    <div [style.background-color]=\"value ? value : null\"></div>\n    <span>{{ value }}</span>\n    <button\n        fd-button\n        [cdkCopyToClipboard]=\"value\"\n        [fdType]=\"'transparent'\"\n        [glyph]=\"'copy'\"\n        aria-label=\"copy\"\n        title=\"copy\"\n    ></button>\n</div>\n} @else {\n<fd-popover #popover>\n    <fd-popover-control style=\"margin: 0.25rem 0\">\n        <button fd-button [fdMenu]=\"true\" fdType=\"transparent\">\n            <span [style.background-color]=\"value\" style=\"width: 16px; height: 16px; border-radius: 50%\"></span>\n        </button>\n    </fd-popover-control>\n    <fd-popover-body>\n        @if (!isVisibleSwatches) {\n        <color-chrome [color]=\"value\" className=\"color-box\" (colorChange)=\"onColorChang($event)\"></color-chrome>\n        } @if (isVisibleSwatches) {\n        <color-swatches [color]=\"value\" (colorChange)=\"onColorChang($event)\"></color-swatches>\n        }\n        <fd-toolbar style=\"background-color: white\">\n            <button\n                fd-toolbar-item\n                fd-button\n                [label]=\"'Cancel' | bbbTranslate\"\n                (click)=\"onCancel(popover)\"\n                [compact]=\"true\"\n            ></button>\n            <button\n                fd-toolbar-item\n                fd-button\n                [label]=\"'Ok' | bbbTranslate\"\n                (click)=\"onApply(popover)\"\n                [compact]=\"true\"\n            ></button>\n            <fd-toolbar-spacer></fd-toolbar-spacer>\n            <button fd-toolbar-item fd-button [label]=\"switchText\" (click)=\"onSwatchClick()\" [compact]=\"true\"></button>\n        </fd-toolbar>\n    </fd-popover-body>\n</fd-popover>\n}\n", styles: [":host{display:block;margin:.25rem 0}.read-only{display:flex;justify-content:flex-start;column-gap:3px}.read-only div{width:25px;height:20px;border-radius:5px}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i3.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i3.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i3.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i4.SwatchesComponent, selector: "color-swatches", inputs: ["width", "height", "colors", "zDepth", "radius", "background"] }, { kind: "component", type: i5.ChromeComponent, selector: "color-chrome", inputs: ["disableAlpha"] }, { kind: "directive", type: i6.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiColorUiComponent, selector: "bsu-ui-color-ui", usesInheritance: true, ngImport: i0, template: "@if (readonly$ | async) {\n<div class=\"read-only\">\n    <div [style.background-color]=\"value ? value : null\"></div>\n    <span>{{ value }}</span>\n    <button\n        fd-button\n        [cdkCopyToClipboard]=\"value\"\n        [fdType]=\"'transparent'\"\n        [glyph]=\"'copy'\"\n        aria-label=\"copy\"\n        title=\"copy\"\n    ></button>\n</div>\n} @else {\n<fd-popover #popover>\n    <fd-popover-control style=\"margin: 0.25rem 0\">\n        <button fd-button [fdMenu]=\"true\" fdType=\"transparent\">\n            <span [style.background-color]=\"value\" style=\"width: 16px; height: 16px; border-radius: 50%\"></span>\n        </button>\n    </fd-popover-control>\n    <fd-popover-body>\n        @if (!isVisibleSwatches) {\n        <color-chrome [color]=\"value\" className=\"color-box\" (colorChange)=\"onColorChang($event)\"></color-chrome>\n        } @if (isVisibleSwatches) {\n        <color-swatches [color]=\"value\" (colorChange)=\"onColorChang($event)\"></color-swatches>\n        }\n        <fd-toolbar style=\"background-color: white\">\n            <button\n                fd-toolbar-item\n                fd-button\n                [label]=\"'Cancel' | bbbTranslate\"\n                (click)=\"onCancel(popover)\"\n                [compact]=\"true\"\n            ></button>\n            <button\n                fd-toolbar-item\n                fd-button\n                [label]=\"'Ok' | bbbTranslate\"\n                (click)=\"onApply(popover)\"\n                [compact]=\"true\"\n            ></button>\n            <fd-toolbar-spacer></fd-toolbar-spacer>\n            <button fd-toolbar-item fd-button [label]=\"switchText\" (click)=\"onSwatchClick()\" [compact]=\"true\"></button>\n        </fd-toolbar>\n    </fd-popover-body>\n</fd-popover>\n}\n", styles: [":host{display:block;margin:.25rem 0}.read-only{display:flex;justify-content:flex-start;column-gap:3px}.read-only div{width:25px;height:20px;border-radius:5px}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i3.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i3.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i3.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i4.SwatchesComponent, selector: "color-swatches", inputs: ["width", "height", "colors", "zDepth", "radius", "background"] }, { kind: "component", type: i5.ChromeComponent, selector: "color-chrome", inputs: ["disableAlpha"] }, { kind: "directive", type: i6.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiColorUiComponent, decorators: [{
             type: Component,

package/esm2022/lib/ui-container-with-button/ui-container-with-button.component.mjs

@@ -27,7 +27,7 @@ export class UiContainerWithButtonComponent extends FieldBaseComponent {
         btn.handler.bind(this.context)();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiContainerWithButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiContainerWithButtonComponent, selector: "bsu-ui-container-with-button", usesInheritance: true, ngImport: i0, template: "<bnrc-field-ui class=\"inner-control\" [customField]=\"context._innerControl\" [layoutInfo]=\"layoutInfo\"></bnrc-field-ui>\n@if (btnVisible && btnEnable) { @for (btn of context._buttonsConfig; track btn) {\n<button\n    fd-button\n    [label]=\"btn.text\"\n    [glyph]=\"btn.itemId === 'Recalculate' ? 'synchronize' : ''\"\n    [fdType]=\"'transparent'\"\n    (click)=\"onBtnClick(btn)\"\n    [disabled]=\"(disableOrReadonly$ | async) === true\"\n></button>\n} }\n", styles: [":host{width:100%;height:100%;display:flex;justify-content:stretch;align-items:center}.btn{max-width:80px;width:100%;height:30px}button{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: i1.FieldUiComponent, selector: "bnrc-field-ui", inputs: ["isSearchPanel", "customField", "componentUi", "layoutInfo", "inlineEdit", "focusControl", "formHeight"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiContainerWithButtonComponent, selector: "bsu-ui-container-with-button", usesInheritance: true, ngImport: i0, template: "<bnrc-field-ui class=\"inner-control\" [customField]=\"context._innerControl\" [layoutInfo]=\"layoutInfo\"></bnrc-field-ui>\n@if (btnVisible && btnEnable) { @for (btn of context._buttonsConfig; track btn) {\n<button\n    fd-button\n    [label]=\"btn.text\"\n    [glyph]=\"btn.itemId === 'Recalculate' ? 'synchronize' : ''\"\n    [fdType]=\"'transparent'\"\n    (click)=\"onBtnClick(btn)\"\n    [disabled]=\"(disableOrReadonly$ | async) === true\"\n></button>\n} }\n", styles: [":host{width:100%;height:100%;display:flex;justify-content:stretch;align-items:center}.btn{max-width:80px;width:100%;height:30px}button{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: i1.FieldUiComponent, selector: "bnrc-field-ui", inputs: ["isSearchPanel", "customField", "componentUi", "layoutInfo", "inlineEdit", "focusControl", "formHeight"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiContainerWithButtonComponent, decorators: [{
             type: Component,

package/esm2022/lib/ui-date-range-ex/ui-date-range-ex.component.mjs

@@ -170,7 +170,7 @@ export class UiDateRangeExComponent extends FieldBaseComponent {
                 useFactory: getDateService,
                 deps: [LogService]
             }
-        ], viewQueries: [{ propertyName: "dateRangePicker", first: true, predicate: ["dateRangePicker"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (value?.DateRangeType === 'SpecificRange') {\n<div class=\"input-container\">\n    <ui5-daterange-picker\n        id=\"mydaterange-picker1\"\n        (mouseover)=\"onOpenPopover()\"\n        (mouseleave)=\"popover.close()\"\n        #dateRangePicker\n        (change)=\"onDateRangeChange()\"\n        format-pattern=\"yyyy/MM/dd\"\n        [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\n        [attr.disabled]=\"(disable$ | async) === true ? true : null\"\n        [primaryCalendarType]=\"Setting.CalendarType !== 'Gregorian' ? 'Persian' : Setting.CalendarType\"\n    >\n    </ui5-daterange-picker>\n    <button\n        class=\"btn-drop-down\"\n        fd-button\n        [fdType]=\"'standard'\"\n        [glyph]=\"'slim-arrow-down'\"\n        (click)=\"popover.open()\"\n    ></button>\n</div>\n} @else {\n<!-- <input fd-form-control [(ngModel)]=\"valueStr\" [fd-inline-help]=\"valueStr\" [readOnly]=\"true\" /> -->\n<fd-input-group\n    placement=\"after\"\n    glyph=\"slim-arrow-down\"\n    glyphAriaLabel=\"Select Date Range\"\n    [button]=\"true\"\n    [ngModel]=\"valueStr\"\n    (addOnButtonClicked)=\"popover.open()\"\n>\n</fd-input-group>\n}\n<ng-template #input>\n    <!-- <input fd-form-control [(ngModel)]=\"valueStr\" [fd-inline-help]=\"valueStr\" [readOnly]=\"true\" /> -->\n\n    <fd-input-group\n        placement=\"after\"\n        glyph=\"slim-arrow-down\"\n        glyphAriaLabel=\"Select Date Range\"\n        [button]=\"true\"\n        [ngModel]=\"valueStr\"\n        (addOnButtonClicked)=\"popover.open()\"\n    >\n    </fd-input-group>\n</ng-template>\n\n<!-- <button fd-button>\n<fd-select (valueChange)=\"onDateRangeTypeChange($event)\">\n  <fd-option *ngFor=\"let option of dateRanges\" [value]=\"option\">{{ option | bbbTranslate }}</fd-option>\n</fd-select>\n</button> -->\n\n<fd-popover\n    #popover\n    style=\"display: block\"\n    [fillControlMode]=\"'at-least'\"\n    placement=\"bottom-start\"\n    [(isOpen)]=\"isOpenPopover\"\n>\n    <fd-popover-body>\n        <ul fd-list>\n            @for (option of dateRanges; track option) {\n            <li fd-list-item (click)=\"popover.close(); onDateRangeTypeChange(option)\">\n                <a fd-list-link>\n                    <span fd-list-title>{{ option | bbbTranslate }}</span>\n                </a>\n            </li>\n            }\n        </ul>\n    </fd-popover-body>\n</fd-popover>\n", styles: [":host{display:block}:host input{border-top-left-radius:0;border-left:none;border-bottom-left-radius:0}:host .input-container{width:100%;display:flex;align-items:center}:host .input-container ui5-daterange-picker{padding:3px 0;min-width:2rem;width:100%;flex-grow:1}.btn-drop-down{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i4.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i4.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i4.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i4.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "dateRangePicker", first: true, predicate: ["dateRangePicker"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (value?.DateRangeType === 'SpecificRange') {\n<div class=\"input-container\">\n    <ui5-daterange-picker\n        id=\"mydaterange-picker1\"\n        (mouseover)=\"onOpenPopover()\"\n        (mouseleave)=\"popover.close()\"\n        #dateRangePicker\n        (change)=\"onDateRangeChange()\"\n        format-pattern=\"yyyy/MM/dd\"\n        [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\n        [attr.disabled]=\"(disable$ | async) === true ? true : null\"\n        [primaryCalendarType]=\"Setting.CalendarType !== 'Gregorian' ? 'Persian' : Setting.CalendarType\"\n    >\n    </ui5-daterange-picker>\n    <button\n        class=\"btn-drop-down\"\n        fd-button\n        [fdType]=\"'standard'\"\n        [glyph]=\"'slim-arrow-down'\"\n        (click)=\"popover.open()\"\n    ></button>\n</div>\n} @else {\n<!-- <input fd-form-control [(ngModel)]=\"valueStr\" [fd-inline-help]=\"valueStr\" [readOnly]=\"true\" /> -->\n<fd-input-group\n    placement=\"after\"\n    glyph=\"slim-arrow-down\"\n    glyphAriaLabel=\"Select Date Range\"\n    [button]=\"true\"\n    [ngModel]=\"valueStr\"\n    (addOnButtonClicked)=\"popover.open()\"\n>\n</fd-input-group>\n}\n<ng-template #input>\n    <!-- <input fd-form-control [(ngModel)]=\"valueStr\" [fd-inline-help]=\"valueStr\" [readOnly]=\"true\" /> -->\n\n    <fd-input-group\n        placement=\"after\"\n        glyph=\"slim-arrow-down\"\n        glyphAriaLabel=\"Select Date Range\"\n        [button]=\"true\"\n        [ngModel]=\"valueStr\"\n        (addOnButtonClicked)=\"popover.open()\"\n    >\n    </fd-input-group>\n</ng-template>\n\n<!-- <button fd-button>\n<fd-select (valueChange)=\"onDateRangeTypeChange($event)\">\n  <fd-option *ngFor=\"let option of dateRanges\" [value]=\"option\">{{ option | bbbTranslate }}</fd-option>\n</fd-select>\n</button> -->\n\n<fd-popover\n    #popover\n    style=\"display: block\"\n    [fillControlMode]=\"'at-least'\"\n    placement=\"bottom-start\"\n    [(isOpen)]=\"isOpenPopover\"\n>\n    <fd-popover-body>\n        <ul fd-list>\n            @for (option of dateRanges; track option) {\n            <li fd-list-item (click)=\"popover.close(); onDateRangeTypeChange(option)\">\n                <a fd-list-link>\n                    <span fd-list-title>{{ option | bbbTranslate }}</span>\n                </a>\n            </li>\n            }\n        </ul>\n    </fd-popover-body>\n</fd-popover>\n", styles: [":host{display:block}:host input{border-top-left-radius:0;border-left:none;border-bottom-left-radius:0}:host .input-container{width:100%;display:flex;align-items:center}:host .input-container ui5-daterange-picker{padding:3px 0;min-width:2rem;width:100%;flex-grow:1}.btn-drop-down{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i4.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i4.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i4.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i4.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiDateRangeExComponent, decorators: [{
             type: Component,

package/esm2022/lib/ui-editable-grid/ui-editable-grid.component.mjs

@@ -96,7 +96,7 @@ export class UiEditableGridComponent extends SapUiReportBaseComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiEditableGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: UiEditableGridComponent, selector: "bsu-ui-editable-grid", providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngTemplateOutlet=\"\n        matrixTemplate;\n        context: {\n            moDataList: matrixMoList$ | async,\n            columns: horizontalRows,\n            conditionalFormats: conditionalFormats$ | async,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            title: title$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            hideToolbar: hideToolbar$ | async,\n            contentDensity: contentDensity$ | async,\n            activeCell: activeCell,\n            valueControlFieldCaption: valueControlFieldCaption,\n            valueType: valueType,\n            formSetting: context.Setting.FormTemplate,\n            matrixWidthType: matrixWidthType,\n            cellWidth: cellWidth,\n            verticalLabelWidth: verticalLabelWidth,\n            fitWidth: fitWidth,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            hasSelected: hasSelected$ | async,\n            containerWidth: containerWidth$ | async,\n            formLayout: formLayout\n        }\n    \"\n></ng-container>\n\n<ng-template\n    #matrixTemplate\n    let-moDataList=\"moDataList\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-title=\"title\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-allowInlineEdit=\"allowInlineEdit\"\n    let-hideToolbar=\"hideToolbar\"\n    let-contentDensity=\"contentDensity\"\n    let-columns=\"columns\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-activeCell=\"activeCell\"\n    let-valueControlFieldCaption=\"valueControlFieldCaption\"\n    let-valueType=\"valueType\"\n    let-formSetting=\"formSetting\"\n    let-matrixWidthType=\"matrixWidthType\"\n    let-cellWidth=\"cellWidth\"\n    let-verticalLabelWidth=\"verticalLabelWidth\"\n    let-fitWidth=\"fitWidth\"\n    let-access=\"access\"\n    let-hasSelected=\"hasSelected\"\n    let-containerWidth=\"containterWidth\"\n    let-formLayout=\"formLayout\"\n>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [title]=\"title\"\n        [hasSelected]=\"hasSelected\"\n        [access]=\"access\"\n        [contentDensity]=\"contentDensity\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [moDataListCount]=\"moDataList.length\"\n        (sortClick)=\"onSortSettings(deviceName)\"\n        (editModeClick)=\"onEditMode()\"\n    >\n        <button\n            fd-toolbar-item\n            fd-button\n            [fdType]=\"'emphasized'\"\n            [label]=\"'Save' | bbbTranslate\"\n            [glyph]=\"'save'\"\n            (click)=\"onSave()\"\n        ></button>\n        <fd-split-button\n            fd-toolbar-item\n            [mainAction]=\"{\n                keepMainAction: true,\n                mainActionTitle: splitBtnTitle\n            }\"\n        >\n            <fd-menu>\n                <li fd-menu-item>\n                    <div fd-menu-interactive (click)=\"onChangeView(true)\">\n                        <span fd-menu-title>\n                            {{ widthTypeEnum.FitWidth }}\n                        </span>\n                    </div>\n                </li>\n                <li fd-menu-item>\n                    <div fd-menu-interactive (click)=\"onChangeView(false)\">\n                        <span fd-menu-title>\n                            {{ widthTypeEnum.StaticWidth }}\n                        </span>\n                    </div>\n                </li>\n            </fd-menu>\n        </fd-split-button>\n\n        <ng-template #splitBtnTitle>\n            <span>{{ fitWidth ? widthTypeEnum.FitWidth : widthTypeEnum.StaticWidth }}</span>\n        </ng-template>\n    </bsu-ulv-toolbar>\n    <bsu-ui-matrix-view\n        [moDataList]=\"moDataList\"\n        [columns]=\"columns\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [activeCell]=\"activeCell\"\n        [valueControlFieldCaption]=\"valueControlFieldCaption\"\n        [valueType]=\"valueType\"\n        [access]=\"access\"\n        [formLayout]=\"formLayout\"\n        [matrixWidthType]=\"matrixWidthType\"\n        [cellWidth]=\"cellWidth\"\n        [cellHeight]=\"cellHeight\"\n        [verticalLabelWidth]=\"verticalLabelWidth\"\n        [fitWidth]=\"fitWidth\"\n        [minWidth]=\"minWidth\"\n        [minHeight]=\"minHeight\"\n        [rowResizer]=\"rowResizer\"\n        [enableResizing]=\"enableResizing\"\n        [containerWidth]=\"containerWidth\"\n        (selectionChange)=\"onSelectionChange($event)\"\n    ></bsu-ui-matrix-view>\n</ng-template>\n", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column}.fd-table__row th.fd-table__cell{background-color:var(--sapList_HeaderBackground, #f2f2f2);color:var(--sapList_HeaderTextColor, #32363a)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i3.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i3.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i3.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i4.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "directive", type: i5.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i6.UlvToolbarComponent, selector: "bsu-ulv-toolbar", inputs: ["allowGridColumnSort", "useLayoutItemTextForControl", "enableSearch", "hideTitle", "title", "icon", "deviceName", "deviceSize", "access", "hideToolbar", "toolbarButtons", "contentDensity", "inlineEditMode", "allowInlineEdit", "gridSetting", "viewCollection", "reportView", "inDialog", "isMultiSelect", "hasSelected", "config", "hidden", "buttons", "moDataListCount"], outputs: ["search", "groupbyClick", "sortClick", "columnClick", "editModeClick", "viewClick", "createNewInlineMo"] }, { kind: "component", type: i7.UiMatrixViewComponent, selector: "bsu-ui-matrix-view", inputs: ["deviceSize", "deviceName", "moDataList", "columns", "formLayout", "conditionalFormat", "activeCell", "valueControlFieldCaption", "formTemplate", "valueType", "cellWidth", "cellHeight", "verticalLabelWidth", "fitWidth", "minWidth", "minHeight", "rowResizer", "enableResizing"], outputs: ["selectionChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: UiEditableGridComponent, selector: "bsu-ui-editable-grid", providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngTemplateOutlet=\"\n        matrixTemplate;\n        context: {\n            moDataList: matrixMoList$ | async,\n            columns: horizontalRows,\n            conditionalFormats: conditionalFormats$ | async,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            title: title$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            hideToolbar: hideToolbar$ | async,\n            contentDensity: contentDensity$ | async,\n            activeCell: activeCell,\n            valueControlFieldCaption: valueControlFieldCaption,\n            valueType: valueType,\n            formSetting: context.Setting.FormTemplate,\n            matrixWidthType: matrixWidthType,\n            cellWidth: cellWidth,\n            verticalLabelWidth: verticalLabelWidth,\n            fitWidth: fitWidth,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            hasSelected: hasSelected$ | async,\n            containerWidth: containerWidth$ | async,\n            formLayout: formLayout\n        }\n    \"\n></ng-container>\n\n<ng-template\n    #matrixTemplate\n    let-moDataList=\"moDataList\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-title=\"title\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-allowInlineEdit=\"allowInlineEdit\"\n    let-hideToolbar=\"hideToolbar\"\n    let-contentDensity=\"contentDensity\"\n    let-columns=\"columns\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-activeCell=\"activeCell\"\n    let-valueControlFieldCaption=\"valueControlFieldCaption\"\n    let-valueType=\"valueType\"\n    let-formSetting=\"formSetting\"\n    let-matrixWidthType=\"matrixWidthType\"\n    let-cellWidth=\"cellWidth\"\n    let-verticalLabelWidth=\"verticalLabelWidth\"\n    let-fitWidth=\"fitWidth\"\n    let-access=\"access\"\n    let-hasSelected=\"hasSelected\"\n    let-containerWidth=\"containterWidth\"\n    let-formLayout=\"formLayout\"\n>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [title]=\"title\"\n        [hasSelected]=\"hasSelected\"\n        [access]=\"access\"\n        [contentDensity]=\"contentDensity\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [moDataListCount]=\"moDataList.length\"\n        (sortClick)=\"onSortSettings(deviceName)\"\n        (editModeClick)=\"onEditMode()\"\n    >\n        <button\n            fd-toolbar-item\n            fd-button\n            [fdType]=\"'emphasized'\"\n            [label]=\"'Save' | bbbTranslate\"\n            [glyph]=\"'save'\"\n            (click)=\"onSave()\"\n        ></button>\n        <fd-split-button\n            fd-toolbar-item\n            [mainAction]=\"{\n                keepMainAction: true,\n                mainActionTitle: splitBtnTitle\n            }\"\n        >\n            <fd-menu>\n                <li fd-menu-item>\n                    <div fd-menu-interactive (click)=\"onChangeView(true)\">\n                        <span fd-menu-title>\n                            {{ widthTypeEnum.FitWidth }}\n                        </span>\n                    </div>\n                </li>\n                <li fd-menu-item>\n                    <div fd-menu-interactive (click)=\"onChangeView(false)\">\n                        <span fd-menu-title>\n                            {{ widthTypeEnum.StaticWidth }}\n                        </span>\n                    </div>\n                </li>\n            </fd-menu>\n        </fd-split-button>\n\n        <ng-template #splitBtnTitle>\n            <span>{{ fitWidth ? widthTypeEnum.FitWidth : widthTypeEnum.StaticWidth }}</span>\n        </ng-template>\n    </bsu-ulv-toolbar>\n    <bsu-ui-matrix-view\n        [moDataList]=\"moDataList\"\n        [columns]=\"columns\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [activeCell]=\"activeCell\"\n        [valueControlFieldCaption]=\"valueControlFieldCaption\"\n        [valueType]=\"valueType\"\n        [access]=\"access\"\n        [formLayout]=\"formLayout\"\n        [matrixWidthType]=\"matrixWidthType\"\n        [cellWidth]=\"cellWidth\"\n        [cellHeight]=\"cellHeight\"\n        [verticalLabelWidth]=\"verticalLabelWidth\"\n        [fitWidth]=\"fitWidth\"\n        [minWidth]=\"minWidth\"\n        [minHeight]=\"minHeight\"\n        [rowResizer]=\"rowResizer\"\n        [enableResizing]=\"enableResizing\"\n        [containerWidth]=\"containerWidth\"\n        (selectionChange)=\"onSelectionChange($event)\"\n    ></bsu-ui-matrix-view>\n</ng-template>\n", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column}.fd-table__row th.fd-table__cell{background-color:var(--sapList_HeaderBackground, #f2f2f2);color:var(--sapList_HeaderTextColor, #32363a)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i3.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i3.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i3.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i4.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "directive", type: i5.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i6.UlvToolbarComponent, selector: "bsu-ulv-toolbar", inputs: ["allowGridColumnSort", "useLayoutItemTextForControl", "enableSearch", "hideTitle", "title", "icon", "deviceName", "deviceSize", "access", "hideToolbar", "toolbarButtons", "contentDensity", "inlineEditMode", "allowInlineEdit", "gridSetting", "viewCollection", "reportView", "inDialog", "isMultiSelect", "hasSelected", "config", "hidden", "buttons", "moDataListCount"], outputs: ["search", "groupbyClick", "sortClick", "columnClick", "editModeClick", "viewClick", "createNewInlineMo"] }, { kind: "component", type: i7.UiMatrixViewComponent, selector: "bsu-ui-matrix-view", inputs: ["deviceSize", "deviceName", "moDataList", "columns", "formLayout", "conditionalFormat", "activeCell", "valueControlFieldCaption", "formTemplate", "valueType", "cellWidth", "cellHeight", "verticalLabelWidth", "fitWidth", "minWidth", "minHeight", "rowResizer", "enableResizing"], outputs: ["selectionChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiEditableGridComponent, decorators: [{
             type: Component,

package/esm2022/lib/ui-exception-form/ui-exception-form.component.mjs

@@ -41,7 +41,7 @@ export class UiExceptionFormComponent extends BaseComponent {
         BarsaApi.Bw.Logout();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiExceptionFormComponent, deps: [{ token: i1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: UiExceptionFormComponent, selector: "bsu-ui-exception-form", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #templateRef>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-title>\n                {{ dialogConfig.text }}\n            </h1>\n\n            <button fd-dialog-close-button (click)=\"onClose(dialog, dialogConfig)\"></button>\n        </fd-dialog-header>\n\n        <fd-dialog-body style=\"padding: 15px\">\n            <div style=\"min-height: 125px\">\n                <label fd-label [innerHtml]=\"dialogConfig.detail\"> </label>\n            </div>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-dialog-footer-button>\n                <button\n                    fd-button\n                    fd-dialog-decisive-button\n                    [fdType]=\"'emphasized'\"\n                    [label]=\"'Continue' | bbbTranslate\"\n                    (click)=\"onContinue(dialog, dialogConfig)\"\n                ></button>\n            </fd-dialog-footer-button>\n            <fd-dialog-footer-button>\n                <button\n                    fd-button\n                    fd-dialog-decisive-button\n                    [fdType]=\"'standard'\"\n                    [label]=\"'Copy' | bbbTranslate\"\n                    [copy]=\"dialogConfig.detail\"\n                ></button>\n            </fd-dialog-footer-button>\n            <fd-dialog-footer-button>\n                <button\n                    fd-button\n                    fd-dialog-decisive-button\n                    [fdType]=\"'negative'\"\n                    [label]=\"'Logout' | bbbTranslate\"\n                    (click)=\"onLogout(dialog, dialogConfig)\"\n                ></button>\n            </fd-dialog-footer-button>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.CopyDirective, selector: "[copy]", inputs: ["copy"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i4.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: UiExceptionFormComponent, selector: "bsu-ui-exception-form", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #templateRef>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-title>\n                {{ dialogConfig.text }}\n            </h1>\n\n            <button fd-dialog-close-button (click)=\"onClose(dialog, dialogConfig)\"></button>\n        </fd-dialog-header>\n\n        <fd-dialog-body style=\"padding: 15px\">\n            <div style=\"min-height: 125px\">\n                <label fd-label [innerHtml]=\"dialogConfig.detail\"> </label>\n            </div>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-dialog-footer-button>\n                <button\n                    fd-button\n                    fd-dialog-decisive-button\n                    [fdType]=\"'emphasized'\"\n                    [label]=\"'Continue' | bbbTranslate\"\n                    (click)=\"onContinue(dialog, dialogConfig)\"\n                ></button>\n            </fd-dialog-footer-button>\n            <fd-dialog-footer-button>\n                <button\n                    fd-button\n                    fd-dialog-decisive-button\n                    [fdType]=\"'standard'\"\n                    [label]=\"'Copy' | bbbTranslate\"\n                    [copy]=\"dialogConfig.detail\"\n                ></button>\n            </fd-dialog-footer-button>\n            <fd-dialog-footer-button>\n                <button\n                    fd-button\n                    fd-dialog-decisive-button\n                    [fdType]=\"'negative'\"\n                    [label]=\"'Logout' | bbbTranslate\"\n                    (click)=\"onLogout(dialog, dialogConfig)\"\n                ></button>\n            </fd-dialog-footer-button>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.CopyDirective, selector: "[copy]", inputs: ["copy"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i4.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiExceptionFormComponent, decorators: [{
             type: Component,

package/esm2022/lib/ui-file-linear-list-box/ui-file-linear-list-box.component.mjs

@@ -107,7 +107,7 @@ export class UiFileLinearListBoxComponent extends DeviceInfoFieldBaseComponent {
         this._fileCountSource.next(value.filter((c) => !c.IsDeleted).length);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiFileLinearListBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiFileLinearListBoxComponent, selector: "bsu-ui-file-linear-list-box", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "fileUploadComponent", first: true, predicate: FileUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (value) {\n<div class=\"token-container\">\n    <div class=\"token-wrapper\">\n        @for (file of value; track trackById($index, file)) { @if (!file.IsDeleted) {\n        <fd-popover>\n            <fd-popover-control>\n                <fd-token (onCloseClick)=\"onFileDeleted(file.Id)\" [readOnly]=\"(disableOrReadonly$ | async)!!\"\n                    >{{ file.FileName }}\n                    @if (file.IsNew) { @if (valueExtra$ | async; as valueExtra) { @if (valueExtra[file.Id].UploadState\n                    !== 'Complete') {\n                    <span\n                        fd-object-status\n                        [status]=\"file.Id | uploadFileStatus: valueExtra\"\n                        [label]=\"valueExtra[file.Id]?.UploadState || ''\"\n                        [title]=\"valueExtra[file.Id]?.UploadState\"\n                        [aria-label]=\"'File Upload Status Is ' + valueExtra[file.Id]?.UploadState\"\n                    ></span>\n                    } @if (valueExtra[file.Id].Progress) {\n                    <fd-object-number\n                        [number]=\"valueExtra[file.Id].Progress || 0\"\n                        unit=\"%\"\n                        status=\"informative\"\n                    ></fd-object-number>\n                    } @if (valueExtra[file.Id].UploadState === 'Uploading') {\n                    <fd-busy-indicator [loading]=\"true\" [size]=\"'s'\"></fd-busy-indicator>\n                    } } }\n                </fd-token>\n            </fd-popover-control>\n            <fd-popover-body>\n                @if (valueExtra$ | async; as valueExtra) { @if ( valueExtra[file.Id].UploadState !== 'Error' ||\n                valueExtra[file.Id].UploadState === 'Complete' ) {\n                <ul fd-list>\n                    <li fd-list-item>\n                        <a fd-list-link (click)=\"onDownloadFile(file)\">\n                            <i fd-list-icon glyph=\"download\"></i>\n                            <span fd-list-title>\n                                {{ 'Download' | bbbTranslate }}\n                            </span>\n                            <fd-busy-indicator [loading]=\"fileDownloading\" [size]=\"'s'\"></fd-busy-indicator>\n                        </a>\n                    </li>\n                </ul>\n                } }\n            </fd-popover-body>\n        </fd-popover>\n        } }\n        <div style=\"display: flex\">\n            @if (loading) {\n            <div style=\"position: relative; width: 3rem\">\n                <bsu-mask [size]=\"'s'\" style=\"background: transparent\"></bsu-mask>\n            </div>\n            } @if (value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!) {\n            <fd-file-uploader\n                class=\"file-linear-upload\"\n                fd-toolbar-item\n                [id]=\"id\"\n                [name]=\"'linear_' + id\"\n                [placeholder]=\"'AttachFile' | bbbTranslate\"\n                [buttonLabel]=\"'AttachFile' | bbbTranslate\"\n                [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\n                [accept]=\"validExtension\"\n                [multiple]=\"maxFileCount > 1 || Setting.IsMultiSelect\"\n                (selectedFilesChanged)=\"onFileSelection($event)\"\n                [contentDensity]=\"(contentDensity$ | async)!!\"\n            ></fd-file-uploader>\n            }\n        </div>\n    </div>\n</div>\n}\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .fd-file-uploader input{display:none}:host.isMobile ::ng-deep fd-token>span{-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-wrap;height:auto;text-align:right}:host.isMobile ::ng-deep body[dir=ltr] fd-token>span{text-align:left}.token-container{background:transparent;padding:3px;display:flex}.token-wrapper{align-items:center;flex-grow:1;display:flex;flex-wrap:wrap}.token-wrapper fd-token,.token-wrapper .file-linear-upload{padding:4px}\n"], dependencies: [{ kind: "component", type: i1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i2.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: "component", type: i3.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i3.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i3.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i3.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role"] }, { kind: "directive", type: i3.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i4.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i5.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "glyphFont", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "component", type: i6.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i7.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i8.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i9.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i10.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.CanUploadFilePipe, name: "canUploadFile" }, { kind: "pipe", type: i11.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i12.UploadFileStatusPipe, name: "uploadFileStatus" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiFileLinearListBoxComponent, selector: "bsu-ui-file-linear-list-box", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "fileUploadComponent", first: true, predicate: FileUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (value) {\n<div class=\"token-container\">\n    <div class=\"token-wrapper\">\n        @for (file of value; track trackById($index, file)) { @if (!file.IsDeleted) {\n        <fd-popover>\n            <fd-popover-control>\n                <fd-token (onCloseClick)=\"onFileDeleted(file.Id)\" [readOnly]=\"(disableOrReadonly$ | async)!!\"\n                    >{{ file.FileName }}\n                    @if (file.IsNew) { @if (valueExtra$ | async; as valueExtra) { @if (valueExtra[file.Id].UploadState\n                    !== 'Complete') {\n                    <span\n                        fd-object-status\n                        [status]=\"file.Id | uploadFileStatus: valueExtra\"\n                        [label]=\"valueExtra[file.Id]?.UploadState || ''\"\n                        [title]=\"valueExtra[file.Id]?.UploadState\"\n                        [aria-label]=\"'File Upload Status Is ' + valueExtra[file.Id]?.UploadState\"\n                    ></span>\n                    } @if (valueExtra[file.Id].Progress) {\n                    <fd-object-number\n                        [number]=\"valueExtra[file.Id].Progress || 0\"\n                        unit=\"%\"\n                        status=\"informative\"\n                    ></fd-object-number>\n                    } @if (valueExtra[file.Id].UploadState === 'Uploading') {\n                    <fd-busy-indicator [loading]=\"true\" [size]=\"'s'\"></fd-busy-indicator>\n                    } } }\n                </fd-token>\n            </fd-popover-control>\n            <fd-popover-body>\n                @if (valueExtra$ | async; as valueExtra) { @if ( valueExtra[file.Id].UploadState !== 'Error' ||\n                valueExtra[file.Id].UploadState === 'Complete' ) {\n                <ul fd-list>\n                    <li fd-list-item>\n                        <a fd-list-link (click)=\"onDownloadFile(file)\">\n                            <i fd-list-icon glyph=\"download\"></i>\n                            <span fd-list-title>\n                                {{ 'Download' | bbbTranslate }}\n                            </span>\n                            <fd-busy-indicator [loading]=\"fileDownloading\" [size]=\"'s'\"></fd-busy-indicator>\n                        </a>\n                    </li>\n                </ul>\n                } }\n            </fd-popover-body>\n        </fd-popover>\n        } }\n        <div style=\"display: flex\">\n            @if (loading) {\n            <div style=\"position: relative; width: 3rem\">\n                <bsu-mask [size]=\"'s'\" style=\"background: transparent\"></bsu-mask>\n            </div>\n            } @if (value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!) {\n            <fd-file-uploader\n                class=\"file-linear-upload\"\n                fd-toolbar-item\n                [id]=\"id\"\n                [name]=\"'linear_' + id\"\n                [placeholder]=\"'AttachFile' | bbbTranslate\"\n                [buttonLabel]=\"'AttachFile' | bbbTranslate\"\n                [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\n                [accept]=\"validExtension\"\n                [multiple]=\"maxFileCount > 1 || Setting.IsMultiSelect\"\n                (selectedFilesChanged)=\"onFileSelection($event)\"\n                [contentDensity]=\"(contentDensity$ | async)!!\"\n            ></fd-file-uploader>\n            }\n        </div>\n    </div>\n</div>\n}\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .fd-file-uploader input{display:none}:host.isMobile ::ng-deep fd-token>span{-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-wrap;height:auto;text-align:right}:host.isMobile ::ng-deep body[dir=ltr] fd-token>span{text-align:left}.token-container{background:transparent;padding:3px;display:flex}.token-wrapper{align-items:center;flex-grow:1;display:flex;flex-wrap:wrap}.token-wrapper fd-token,.token-wrapper .file-linear-upload{padding:4px}\n"], dependencies: [{ kind: "component", type: i1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i2.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: "component", type: i3.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i3.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i3.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i3.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "directive", type: i3.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i4.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i5.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "glyphFont", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "component", type: i6.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i7.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i8.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i9.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i10.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.CanUploadFilePipe, name: "canUploadFile" }, { kind: "pipe", type: i11.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i12.UploadFileStatusPipe, name: "uploadFileStatus" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiFileLinearListBoxComponent, decorators: [{
             type: Component,

package/esm2022/lib/ui-grid-columns/ui-grid-columns.component.mjs

@@ -28,7 +28,7 @@ export class UiGridColumnsComponent extends BaseComponent {
         return column.Name;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiGridColumnsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiGridColumnsComponent, selector: "bsu-ui-grid-columns", inputs: { columns: "columns", selectedColumns: "selectedColumns" }, outputs: { columnsChange: "columnsChange" }, usesInheritance: true, ngImport: i0, template: "<h3>{{ 'Select All (' + selectedColumns + '/' + columns.length + ')' }}</h3>\n<ul\n  fd-list\n  [selection]=\"true\"\n  cdkDropList\n  cdkDropListOrientation=\"vertical\"\n  (cdkDropListDropped)=\"onDropColumn(columns, $event)\"\n  >\n  @for (column of columns; track trackByMethod($index, column)) {\n    <li\n      cdkDrag\n      fd-list-item\n      [selected]=\"!column.Hidden\"\n      (click)=\"onChangeColumnHidden(column)\"\n      >\n      <fd-checkbox [ngModel]=\"!column.Hidden\"></fd-checkbox>\n      <span fd-list-title>\n        {{ column.Caption }}\n        @if (column.IsMandatory) {\n          <strong>*</strong>\n        }\n      </span>\n    </li>\n  }\n</ul>\n", styles: [":host{display:flex;flex-direction:column;width:100%}.inputIcon{background:#fafafa;color:#0a6ed1;cursor:pointer;max-width:400px;min-width:200px}.inputIcon:hover{background:#e0e0e080}strong{color:#ce3b3b}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i4.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i4.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i4.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiGridColumnsComponent, selector: "bsu-ui-grid-columns", inputs: { columns: "columns", selectedColumns: "selectedColumns" }, outputs: { columnsChange: "columnsChange" }, usesInheritance: true, ngImport: i0, template: "<h3>{{ 'Select All (' + selectedColumns + '/' + columns.length + ')' }}</h3>\n<ul\n  fd-list\n  [selection]=\"true\"\n  cdkDropList\n  cdkDropListOrientation=\"vertical\"\n  (cdkDropListDropped)=\"onDropColumn(columns, $event)\"\n  >\n  @for (column of columns; track trackByMethod($index, column)) {\n    <li\n      cdkDrag\n      fd-list-item\n      [selected]=\"!column.Hidden\"\n      (click)=\"onChangeColumnHidden(column)\"\n      >\n      <fd-checkbox [ngModel]=\"!column.Hidden\"></fd-checkbox>\n      <span fd-list-title>\n        {{ column.Caption }}\n        @if (column.IsMandatory) {\n          <strong>*</strong>\n        }\n      </span>\n    </li>\n  }\n</ul>\n", styles: [":host{display:flex;flex-direction:column;width:100%}.inputIcon{background:#fafafa;color:#0a6ed1;cursor:pointer;max-width:400px;min-width:200px}.inputIcon:hover{background:#e0e0e080}strong{color:#ce3b3b}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i4.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i4.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i4.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiGridColumnsComponent, decorators: [{
             type: Component,

package/esm2022/lib/ui-grid-filter-item/ui-grid-filter-item.component.mjs

@@ -42,7 +42,7 @@ export class UiGridFilterItemComponent extends BaseComponent {
         this.selectedColumn = this.columns.find((c) => c.Name === this.selectedColumnName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiGridFilterItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiGridFilterItemComponent, selector: "bsu-ui-grid-filter-item", inputs: { formPanelCtrlr: "formPanelCtrlr", columns: "columns", selectedColumnName: "selectedColumnName", selectedColumn: "selectedColumn" }, outputs: { add: "add", remove: "remove" }, viewQueries: [{ propertyName: "formComponent", first: true, predicate: FormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sort-select\">\n  <fd-select (valueChange)=\"onColumnChange($event)\" [value]=\"selectedColumn?.Name\">\n    @for (column of columns; track column) {\n      <fd-option [value]=\"column.Name\">{{ column.Caption }}</fd-option>\n    }\n  </fd-select>\n  <div class=\"spacer\"></div>\n  <fd-select (valueChange)=\"onConditionChange()\">\n    @for (item of allConditions; track item) {\n      <fd-option [value]=\"item\">{{ item }}</fd-option>\n    }\n  </fd-select>\n  <button fd-button glyph=\"decline\" fdType=\"transparent\" style=\"visibility: hidden\"></button>\n</div>\n<div class=\"sort-buttons\">\n  <bnrc-form [formPanelCtrl]=\"formPanelCtrlr\"></bnrc-form>\n  <button fd-button glyph=\"decline\" fdType=\"transparent\" (click)=\"this.remove.emit()\"></button>\n</div>\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin-bottom:15px}:host ::ng-deep bnrc-form bsu-layout-control,:host ::ng-deep bnrc-form bnrc-field-ui{max-width:100%!important;width:100%!important;padding:0!important}:host ::ng-deep .sort-select fd-select,:host ::ng-deep .sort-select fd-select fd-popover{width:100%}.sort-select{display:flex;flex-grow:1}.spacer{flex-shrink:0;width:10px}.sort-buttons{display:flex;align-items:center}.sort-buttons input{flex:1}button{margin:0 5px}\n"], dependencies: [{ kind: "component", type: i1.FormComponent, selector: "bnrc-form", inputs: ["params", "customFormPanelUi", "formPanelCtrl", "UlvMainCtrlr", "formPanelCtrlId", "saveOnChange", "inlineEditInReport"], outputs: ["titleChanged", "moChanged", "formClose", "uiComponent", "formRendered", "bruleAction", "beforeTransition", "afterTransition"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i3.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiGridFilterItemComponent, selector: "bsu-ui-grid-filter-item", inputs: { formPanelCtrlr: "formPanelCtrlr", columns: "columns", selectedColumnName: "selectedColumnName", selectedColumn: "selectedColumn" }, outputs: { add: "add", remove: "remove" }, viewQueries: [{ propertyName: "formComponent", first: true, predicate: FormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sort-select\">\n  <fd-select (valueChange)=\"onColumnChange($event)\" [value]=\"selectedColumn?.Name\">\n    @for (column of columns; track column) {\n      <fd-option [value]=\"column.Name\">{{ column.Caption }}</fd-option>\n    }\n  </fd-select>\n  <div class=\"spacer\"></div>\n  <fd-select (valueChange)=\"onConditionChange()\">\n    @for (item of allConditions; track item) {\n      <fd-option [value]=\"item\">{{ item }}</fd-option>\n    }\n  </fd-select>\n  <button fd-button glyph=\"decline\" fdType=\"transparent\" style=\"visibility: hidden\"></button>\n</div>\n<div class=\"sort-buttons\">\n  <bnrc-form [formPanelCtrl]=\"formPanelCtrlr\"></bnrc-form>\n  <button fd-button glyph=\"decline\" fdType=\"transparent\" (click)=\"this.remove.emit()\"></button>\n</div>\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin-bottom:15px}:host ::ng-deep bnrc-form bsu-layout-control,:host ::ng-deep bnrc-form bnrc-field-ui{max-width:100%!important;width:100%!important;padding:0!important}:host ::ng-deep .sort-select fd-select,:host ::ng-deep .sort-select fd-select fd-popover{width:100%}.sort-select{display:flex;flex-grow:1}.spacer{flex-shrink:0;width:10px}.sort-buttons{display:flex;align-items:center}.sort-buttons input{flex:1}button{margin:0 5px}\n"], dependencies: [{ kind: "component", type: i1.FormComponent, selector: "bnrc-form", inputs: ["params", "customFormPanelUi", "formPanelCtrl", "UlvMainCtrlr", "formPanelCtrlId", "saveOnChange", "inlineEditInReport"], outputs: ["titleChanged", "moChanged", "formClose", "uiComponent", "formRendered", "bruleAction", "beforeTransition", "afterTransition"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i3.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiGridFilterItemComponent, decorators: [{
             type: Component,