@quadrel-enterprise-ui/framework 19.4.0 → 19.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/fesm2022/quadrel-enterprise-ui-framework.mjs +12 -8
- package/fesm2022/quadrel-enterprise-ui-framework.mjs.map +1 -1
- package/lib/file-collector/file-collector.component.d.ts.map +1 -1
- package/lib/quick-edit/quick-edit.component.d.ts +1 -0
- package/lib/quick-edit/quick-edit.component.d.ts.map +1 -1
- package/lib/table/row/selection/table-row-selection.component.d.ts +1 -0
- package/lib/table/row/selection/table-row-selection.component.d.ts.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
## [19.5.0](https://github.com/BAZG-Quadrel/quadrel-framework/compare/v19.4.0...v19.5.0) (2025-12-17)
|
|
2
|
+
|
|
3
|
+
### Features
|
|
4
|
+
|
|
5
|
+
* DAZUIC-4114-SecondaryActions Quickedit Fix ([#15](https://github.com/BAZG-Quadrel/quadrel-framework/issues/15)) ([a61da26](https://github.com/BAZG-Quadrel/quadrel-framework/commit/a61da268a6d6febce36ff207efeb73de59788c12))
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
* table should not propagate click event for selection ([3d65d95](https://github.com/BAZG-Quadrel/quadrel-framework/commit/3d65d95fe8b25085bd55374d6401bb47c42ca31d))
|
|
1
10
|
## [19.4.0](https://github.com/BAZG-Quadrel/quadrel-framework/compare/v19.3.9...v19.4.0) (2025-12-16)
|
|
2
11
|
|
|
3
12
|
### Features
|
|
@@ -19514,8 +19514,6 @@ class QdFileCollectorComponent {
|
|
|
19514
19514
|
}
|
|
19515
19515
|
ngOnInit() {
|
|
19516
19516
|
this.initializeConfig(this.config);
|
|
19517
|
-
this.fileCollectorService.initialize(this.config);
|
|
19518
|
-
this.fileCollectorValidationService.initialize(this.config);
|
|
19519
19517
|
this.initViewMode();
|
|
19520
19518
|
if (this.sectionActionService) {
|
|
19521
19519
|
this._subscriptions.add(this.sectionActionService.action$.pipe(filter(type => type === 'addNew')).subscribe(() => this.clickFileInput()));
|
|
@@ -19523,8 +19521,7 @@ class QdFileCollectorComponent {
|
|
|
19523
19521
|
}
|
|
19524
19522
|
ngOnChanges(changes) {
|
|
19525
19523
|
if (changes['config'] && !changes['config'].firstChange) {
|
|
19526
|
-
this.
|
|
19527
|
-
this.fileCollectorValidationService.initialize(this.config);
|
|
19524
|
+
this.initializeConfig(this.config);
|
|
19528
19525
|
}
|
|
19529
19526
|
}
|
|
19530
19527
|
ngOnDestroy() {
|
|
@@ -19561,6 +19558,8 @@ class QdFileCollectorComponent {
|
|
|
19561
19558
|
config.allowedMimeTypes = this.fileTypeService.getMimeTypes(config.allowedFileTypes);
|
|
19562
19559
|
config.allowedFileNamePattern = this.fileTypeService.getFileNamePattern(config.allowedFileTypes);
|
|
19563
19560
|
}
|
|
19561
|
+
this.fileCollectorService.initialize(this.config);
|
|
19562
|
+
this.fileCollectorValidationService.initialize(this.config);
|
|
19564
19563
|
}
|
|
19565
19564
|
validateConfig(config) {
|
|
19566
19565
|
if (!config)
|
|
@@ -24103,6 +24102,9 @@ class QdTableRowSelectionComponent {
|
|
|
24103
24102
|
isRowSelected$() {
|
|
24104
24103
|
return this.rowSelectionService.isRowSelected$(this.rowIndex);
|
|
24105
24104
|
}
|
|
24105
|
+
stopPropagation(event) {
|
|
24106
|
+
event.stopPropagation();
|
|
24107
|
+
}
|
|
24106
24108
|
handleChange(event) {
|
|
24107
24109
|
if (event.target.checked) {
|
|
24108
24110
|
this.rowSelectionService.setRowSelected(this.rowIndex);
|
|
@@ -24112,11 +24114,11 @@ class QdTableRowSelectionComponent {
|
|
|
24112
24114
|
}
|
|
24113
24115
|
}
|
|
24114
24116
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTableRowSelectionComponent, deps: [{ token: QdTableRowSelectionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
24115
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdTableRowSelectionComponent, isStandalone: false, selector: "[qd-table-row-selection]", inputs: { rowIndex: "rowIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"selectionType\">\n <ng-container *ngSwitchCase=\"'singleSelect'\">\n <input\n type=\"radio\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-radio'\"\n />\n </ng-container>\n <ng-container *ngSwitchCase=\"'multiSelect'\">\n <input\n type=\"checkbox\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-checkbox'\"\n />\n </ng-container>\n</ng-container>\n", styles: ["input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24117
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdTableRowSelectionComponent, isStandalone: false, selector: "[qd-table-row-selection]", inputs: { rowIndex: "rowIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"selectionType\">\n <ng-container *ngSwitchCase=\"'singleSelect'\">\n <input\n type=\"radio\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (click)=\"stopPropagation($event)\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-radio'\"\n />\n </ng-container>\n <ng-container *ngSwitchCase=\"'multiSelect'\">\n <input\n type=\"checkbox\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (click)=\"stopPropagation($event)\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-checkbox'\"\n />\n </ng-container>\n</ng-container>\n", styles: ["input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24116
24118
|
}
|
|
24117
24119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTableRowSelectionComponent, decorators: [{
|
|
24118
24120
|
type: Component,
|
|
24119
|
-
args: [{ selector: '[qd-table-row-selection]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container [ngSwitch]=\"selectionType\">\n <ng-container *ngSwitchCase=\"'singleSelect'\">\n <input\n type=\"radio\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-radio'\"\n />\n </ng-container>\n <ng-container *ngSwitchCase=\"'multiSelect'\">\n <input\n type=\"checkbox\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-checkbox'\"\n />\n </ng-container>\n</ng-container>\n", styles: ["input{cursor:pointer}\n"] }]
|
|
24121
|
+
args: [{ selector: '[qd-table-row-selection]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container [ngSwitch]=\"selectionType\">\n <ng-container *ngSwitchCase=\"'singleSelect'\">\n <input\n type=\"radio\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (click)=\"stopPropagation($event)\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-radio'\"\n />\n </ng-container>\n <ng-container *ngSwitchCase=\"'multiSelect'\">\n <input\n type=\"checkbox\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (click)=\"stopPropagation($event)\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-checkbox'\"\n />\n </ng-container>\n</ng-container>\n", styles: ["input{cursor:pointer}\n"] }]
|
|
24120
24122
|
}], ctorParameters: () => [{ type: QdTableRowSelectionService }], propDecorators: { rowIndex: [{
|
|
24121
24123
|
type: Input
|
|
24122
24124
|
}], testId: [{
|
|
@@ -32754,6 +32756,7 @@ class QdQuickEditComponent {
|
|
|
32754
32756
|
quickEditFormGroup;
|
|
32755
32757
|
viewonly$ = of(false);
|
|
32756
32758
|
actions$;
|
|
32759
|
+
hasVisibleActions$;
|
|
32757
32760
|
_destroyed$ = new Subject();
|
|
32758
32761
|
get control() {
|
|
32759
32762
|
return (this.controlContainer?.control ?? this.quickEditFormGroup.get('rows'));
|
|
@@ -32901,6 +32904,7 @@ class QdQuickEditComponent {
|
|
|
32901
32904
|
}
|
|
32902
32905
|
initActionsStream() {
|
|
32903
32906
|
this.actions$ = combineLatest([of(this.config.secondaryActions ?? []), this.viewonly$]).pipe(map(([actions, isViewonly]) => this.filterActionsByMode(actions, isViewonly)));
|
|
32907
|
+
this.hasVisibleActions$ = combineLatest([this.actions$, this.viewonly$]).pipe(map(([actions, isViewonly]) => actions.length > 0 || (this.canAdd && !isViewonly)));
|
|
32904
32908
|
}
|
|
32905
32909
|
filterActionsByMode(actions, isViewonly) {
|
|
32906
32910
|
const currentMode = isViewonly ? 'view' : 'edit';
|
|
@@ -32914,11 +32918,11 @@ class QdQuickEditComponent {
|
|
|
32914
32918
|
.subscribe();
|
|
32915
32919
|
}
|
|
32916
32920
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdQuickEditComponent, deps: [{ token: i1$4.FormBuilder }, { token: QdPageFooterService, optional: true }, { token: QdPageStoreService, optional: true }, { token: QdSectionToolbarActionService, optional: true }, { token: QdEventBrokerService, optional: true }, { token: i0.ChangeDetectorRef }, { token: i1$4.ControlContainer, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
32917
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"
|
|
32921
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: secondaryAction.isDisabled }\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label,.table-row ::ng-deep qd-form-hint{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}.additional-info{align-self:center;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:400;transform:translateY(.0625rem)}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32918
32922
|
}
|
|
32919
32923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdQuickEditComponent, decorators: [{
|
|
32920
32924
|
type: Component,
|
|
32921
|
-
args: [{ selector: 'qd-quick-edit', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"
|
|
32925
|
+
args: [{ selector: 'qd-quick-edit', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: secondaryAction.isDisabled }\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label,.table-row ::ng-deep qd-form-hint{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}.additional-info{align-self:center;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:400;transform:translateY(.0625rem)}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"] }]
|
|
32922
32926
|
}], ctorParameters: () => [{ type: i1$4.FormBuilder }, { type: QdPageFooterService, decorators: [{
|
|
32923
32927
|
type: Optional
|
|
32924
32928
|
}] }, { type: QdPageStoreService, decorators: [{
|