@quadrel-enterprise-ui/framework 19.10.0 → 19.11.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.
|
@@ -8363,11 +8363,11 @@ class QdFormHintComponent {
|
|
|
8363
8363
|
this.actionEmitterService.hintEventEmitterSubject.next(null);
|
|
8364
8364
|
}
|
|
8365
8365
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdFormHintComponent, deps: [{ token: QdFormsActionEmitterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8366
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdFormHintComponent, isStandalone: false, selector: "qd-form-hint", inputs: { hint: "hint", control: "control", hasError: "hasError", hintAction: "hintAction", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-form-hint" }, ngImport: i0, template: "<div class=\"qd-form-hint\" [attr.data-test-id]=\"testId + '-hint'\">\n <ng-container *ngIf=\"!hasError && !hintAction\">\n {{ hint | translate }}\n </ng-container>\n <ng-container *ngIf=\"!hasError && hintAction\">\n <div class=\"qd-form-hint--hint-action\" (click)=\"handleClick()\">\n {{ hint | translate }}\n </div>\n </ng-container>\n</div>\n\n<div class=\"qd-form-hint--error\" [attr.data-test-id]=\"testId + '-error'\">\n <ng-container *ngIf=\"hasError\">\n <qd-form-error [control]=\"control\"></qd-form-error>\n </ng-container>\n</div>\n", styles: [":host{display:block;height:.75rem;color:#757575;font-size:.75rem;font-weight:300;line-height:.75rem}:host .qd-form-hint--error{color:#c70023}.qd-form-disabled :host{color:#979797}:host .qd-form-hint--hint-action{color:#069;cursor:pointer}:host .qd-form-hint--hint-action:hover,:host .qd-form-hint--hint-action:active,:host .qd-form-hint--hint-action:focus{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdFormErrorComponent, selector: "qd-form-error", inputs: ["control"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
|
|
8366
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdFormHintComponent, isStandalone: false, selector: "qd-form-hint", inputs: { hint: "hint", control: "control", hasError: "hasError", hintAction: "hintAction", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-form-hint" }, ngImport: i0, template: "<div class=\"qd-form-hint\" [attr.data-test-id]=\"testId + '-hint'\">\n <ng-container *ngIf=\"!hasError && !hintAction\">\n {{ hint | translate }}\n </ng-container>\n <ng-container *ngIf=\"!hasError && hintAction\">\n <div class=\"qd-form-hint--hint-action\" (click)=\"handleClick()\">\n {{ hint | translate }}\n </div>\n </ng-container>\n</div>\n\n<div class=\"qd-form-hint--error\" [attr.data-test-id]=\"testId + '-error'\">\n <ng-container *ngIf=\"hasError\">\n <qd-form-error [control]=\"control\"></qd-form-error>\n </ng-container>\n</div>\n", styles: [":host{display:block;min-height:.75rem;color:#757575;font-size:.75rem;font-weight:300;line-height:.75rem}:host .qd-form-hint--error{color:#c70023}.qd-form-disabled :host{color:#979797}:host .qd-form-hint--hint-action{color:#069;cursor:pointer}:host .qd-form-hint--hint-action:hover,:host .qd-form-hint--hint-action:active,:host .qd-form-hint--hint-action:focus{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdFormErrorComponent, selector: "qd-form-error", inputs: ["control"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
|
|
8367
8367
|
}
|
|
8368
8368
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdFormHintComponent, decorators: [{
|
|
8369
8369
|
type: Component,
|
|
8370
|
-
args: [{ selector: 'qd-form-hint', host: { class: 'qd-form-hint' }, standalone: false, template: "<div class=\"qd-form-hint\" [attr.data-test-id]=\"testId + '-hint'\">\n <ng-container *ngIf=\"!hasError && !hintAction\">\n {{ hint | translate }}\n </ng-container>\n <ng-container *ngIf=\"!hasError && hintAction\">\n <div class=\"qd-form-hint--hint-action\" (click)=\"handleClick()\">\n {{ hint | translate }}\n </div>\n </ng-container>\n</div>\n\n<div class=\"qd-form-hint--error\" [attr.data-test-id]=\"testId + '-error'\">\n <ng-container *ngIf=\"hasError\">\n <qd-form-error [control]=\"control\"></qd-form-error>\n </ng-container>\n</div>\n", styles: [":host{display:block;height:.75rem;color:#757575;font-size:.75rem;font-weight:300;line-height:.75rem}:host .qd-form-hint--error{color:#c70023}.qd-form-disabled :host{color:#979797}:host .qd-form-hint--hint-action{color:#069;cursor:pointer}:host .qd-form-hint--hint-action:hover,:host .qd-form-hint--hint-action:active,:host .qd-form-hint--hint-action:focus{text-decoration:underline}\n"] }]
|
|
8370
|
+
args: [{ selector: 'qd-form-hint', host: { class: 'qd-form-hint' }, standalone: false, template: "<div class=\"qd-form-hint\" [attr.data-test-id]=\"testId + '-hint'\">\n <ng-container *ngIf=\"!hasError && !hintAction\">\n {{ hint | translate }}\n </ng-container>\n <ng-container *ngIf=\"!hasError && hintAction\">\n <div class=\"qd-form-hint--hint-action\" (click)=\"handleClick()\">\n {{ hint | translate }}\n </div>\n </ng-container>\n</div>\n\n<div class=\"qd-form-hint--error\" [attr.data-test-id]=\"testId + '-error'\">\n <ng-container *ngIf=\"hasError\">\n <qd-form-error [control]=\"control\"></qd-form-error>\n </ng-container>\n</div>\n", styles: [":host{display:block;min-height:.75rem;color:#757575;font-size:.75rem;font-weight:300;line-height:.75rem}:host .qd-form-hint--error{color:#c70023}.qd-form-disabled :host{color:#979797}:host .qd-form-hint--hint-action{color:#069;cursor:pointer}:host .qd-form-hint--hint-action:hover,:host .qd-form-hint--hint-action:active,:host .qd-form-hint--hint-action:focus{text-decoration:underline}\n"] }]
|
|
8371
8371
|
}], ctorParameters: () => [{ type: QdFormsActionEmitterService }], propDecorators: { hint: [{
|
|
8372
8372
|
type: Input
|
|
8373
8373
|
}], control: [{
|
|
@@ -33066,7 +33066,7 @@ class QdQuickEditComponent {
|
|
|
33066
33066
|
return (this.controlContainer?.control ?? this.quickEditFormGroup.get('rows'));
|
|
33067
33067
|
}
|
|
33068
33068
|
get showStandaloneCreate() {
|
|
33069
|
-
return !this.sectionActionService && this.config.canAdd;
|
|
33069
|
+
return !this.sectionActionService && !!this.config.canAdd;
|
|
33070
33070
|
}
|
|
33071
33071
|
get canAdd() {
|
|
33072
33072
|
return this.config.canAdd ?? this.sectionActionService != null;
|
|
@@ -33113,6 +33113,11 @@ class QdQuickEditComponent {
|
|
|
33113
33113
|
this._destroyed$.next();
|
|
33114
33114
|
this._destroyed$.complete();
|
|
33115
33115
|
}
|
|
33116
|
+
isActionDisabled(action, row) {
|
|
33117
|
+
if (typeof action.isDisabled === 'function')
|
|
33118
|
+
return action.isDisabled(row);
|
|
33119
|
+
return !!action.isDisabled;
|
|
33120
|
+
}
|
|
33116
33121
|
handleSecondaryAction(action, rowIndex) {
|
|
33117
33122
|
if (!action)
|
|
33118
33123
|
return;
|
|
@@ -33220,11 +33225,11 @@ class QdQuickEditComponent {
|
|
|
33220
33225
|
this.controlContainer.control.valueChanges.pipe(tap(() => this.changeDetectorRef.detectChanges())).subscribe();
|
|
33221
33226
|
}
|
|
33222
33227
|
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 });
|
|
33223
|
-
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
|
|
33228
|
+
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: isActionDisabled(secondaryAction, row) }\"\n [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\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{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:has(.qd-input-error),.table-cell:has(.qd-dropdown-error),.table-cell:has(.qd-form-hint){height:auto;align-items:flex-start}.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$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
33224
33229
|
}
|
|
33225
33230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdQuickEditComponent, decorators: [{
|
|
33226
33231
|
type: Component,
|
|
33227
|
-
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
|
|
33232
|
+
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: isActionDisabled(secondaryAction, row) }\"\n [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\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{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:has(.qd-input-error),.table-cell:has(.qd-dropdown-error),.table-cell:has(.qd-form-hint){height:auto;align-items:flex-start}.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"] }]
|
|
33228
33233
|
}], ctorParameters: () => [{ type: i1$4.FormBuilder }, { type: QdPageFooterService, decorators: [{
|
|
33229
33234
|
type: Optional
|
|
33230
33235
|
}] }, { type: QdPageStoreService, decorators: [{
|