@quadrel-enterprise-ui/framework 20.17.1 → 20.17.2
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.
|
@@ -28935,11 +28935,11 @@ class QdPageObjectHeaderComponent {
|
|
|
28935
28935
|
});
|
|
28936
28936
|
}
|
|
28937
28937
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageObjectHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
28938
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageObjectHeaderComponent, isStandalone: false, selector: "qd-page-object-header", inputs: { config: "config", hasNavigation: "hasNavigation", testId: ["data-test-id", "testId"] }, host: { listeners: { "click": "toggleFacets()" }, properties: { "style.borderBottom": "borderBottomStyle", "class.in-dialog": "this.isInDialog" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n <div class=\"object-header-toolbar\">\n <button class=\"button-icon\" data-test-id=\"archive-button\">\n <qd-icon\n *ngIf=\"showArchive$ | async\"\n (click)=\"archiveButton?.handler()\"\n class=\"header-action-icon\"\n [icon]=\"'resultNew'\"\n ></qd-icon>\n </button>\n\n <button class=\"button-icon\" data-test-id=\"delete-button\">\n <qd-icon\n class=\"header-action-icon\"\n *ngIf=\"showDelete$ | async\"\n (click)=\"deleteButton?.handler()\"\n [icon]=\"'trash'\"\n ></qd-icon>\n </button>\n\n <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n </button>\n\n <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n </button>\n\n <button\n *ngIf=\"showSave$ | async\"\n qdButton\n (click)=\"save()\"\n data-test-id=\"save-button\"\n [disabled]=\"($canSave | async) === false\"\n >\n {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n </button>\n\n <ng-container *ngIf=\"customActions$ | async as customActions\">\n <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n <button\n [qdMenuButton]=\"customActions\"\n [autoSize]=\"false\"\n [data-test-id]=\"'page-'\"\n *ngIf=\"customActions.actions.length > 1; else singleButton\"\n data-test-id=\"custom-button\"\n >\n {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n </button>\n\n <ng-template #singleButton>\n <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n <button\n qdButton\n *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n data-test-id=\"custom-button\"\n >\n {{ singleAction.label?.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #adaptive>\n <button\n *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n type=\"button\"\n class=\"adaptive-menu-button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"160\"\n >\n <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let action of customActions.actions; let i = index\"\n class=\"adaptive-menu-entry\"\n type=\"button\"\n [disabled]=\"action.isDisabled\"\n (click)=\"action.handler()\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n <ng-container *ngIf=\"pageObjectData$ | async as data\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n >\n <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"\n let context of contexts\n | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts?.length);\n let index = index;\n let first = first\n \"\n [ngClass]=\"{ hasDivider: headerFacets && first, adaptiveFirst: headerFacets && adaptiveMode && first }\"\n >\n <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n }}</span>\n\n <span *ngIf=\"context.value.length !== 0\">\n <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n <ng-container *ngFor=\"let val of context.value; let last = last\">\n {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n </ng-container>\n </qd-chip>\n </span>\n\n <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n <button\n qdButton\n qdButtonLink\n type=\"button\"\n (click)=\"changeContext(context.context, context.selection, $event)\"\n [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n >\n {{\n context.value.length !== 0\n ? (\"i18n.qd.page.context.button.change\" | translate)\n : (\"i18n.qd.page.context.button.select\" | translate)\n }}\n </button>\n </span>\n </div>\n </ng-container>\n\n <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length + (contexts$ | async).length > 2\">\n <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + (contexts$ | async).length - 2 }}</span>\n <button qdIconButton [data-test-id]=\"'toggle-button'\">\n <qd-icon [icon]=\"facetsCollapsed ? 'ctrlDown' : 'ctrlTop'\"></qd-icon>\n </button>\n </span>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-bottom:.125rem solid rgb(213,213,213);background:#fff;gap:1.25rem}@media (max-width: 599.98px){:host{padding:1.25rem .9375rem}}:host .object-header-top{display:flex;align-items:flex-start;justify-content:space-between}:host .object-header-top .object-header-title{padding:2px;color:#171717;font-size:1.3125rem;font-weight:500}:host .object-header-top .object-header-toolbar{display:flex;align-items:center;column-gap:.5rem}:host .object-header-top .object-header-toolbar .button-icon{background:none}:host .object-header-top .object-header-toolbar .button-icon+.button-icon{margin-left:-.5rem}:host .object-header-top .object-header-toolbar .header-action-icon{color:#14516f;cursor:pointer;font-size:1.5rem}:host.in-dialog .object-header-toolbar{padding-right:2.5rem}:host .object-header-facets{position:relative;display:flex;flex-wrap:wrap;font-size:1.125rem;gap:1.25rem}:host .object-header-facets .object-header-facet{display:flex;min-width:3.75rem;flex-direction:column}:host .object-header-facets .object-header-facet.hasDivider{padding-left:1.25rem;border-left:.0625rem solid rgb(117,117,117)}:host .object-header-facets .object-header-facet.adaptiveFirst{padding-top:1.25rem}:host .object-header-facets .object-header-facet .facet-label{display:block;margin-bottom:0;color:#757575;font-size:.875rem;padding-bottom:.375rem;font-weight:500}:host .object-header-facets .facets-toggler{position:absolute;top:0;right:0;display:flex;align-items:center;padding-right:.3125rem;font-size:.625rem;line-height:.625rem}:host .object-header-facets.amongThemselves{display:grid}:host .object-header-facets.amongThemselves .object-header-facet.hasDivider{padding-left:0;border-top:.0625rem solid rgb(117,117,117);border-left:none}.loading-overlay{position:absolute;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}.no-selected-context{height:1.625rem;color:#979797;font-size:.875rem;line-height:1.625rem}.select-button{margin-top:.25rem}.adaptive-menu-button{display:flex;background:unset;color:#454545;font-size:2rem}.adaptive-menu-button:hover,.adaptive-menu-button:focus{color:#000}.adaptive-menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ 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: 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: QdButtonLinkDirective, selector: "button[qdButtonLink], a[qdButtonLink], button[qd-button-link]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdMenuButtonComponent, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: ["qdMenuButton", "data-test-id", "autoSize"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDynamicFacetComponent, selector: "qd-dynamic-facet", inputs: ["facet", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
28938
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageObjectHeaderComponent, isStandalone: false, selector: "qd-page-object-header", inputs: { config: "config", hasNavigation: "hasNavigation", testId: ["data-test-id", "testId"] }, host: { listeners: { "click": "toggleFacets()" }, properties: { "style.borderBottom": "borderBottomStyle", "class.in-dialog": "this.isInDialog" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n <div class=\"object-header-toolbar\">\n <button class=\"button-icon\" data-test-id=\"archive-button\">\n <qd-icon\n *ngIf=\"showArchive$ | async\"\n (click)=\"archiveButton?.handler()\"\n class=\"header-action-icon\"\n [icon]=\"'resultNew'\"\n ></qd-icon>\n </button>\n\n <button class=\"button-icon\" data-test-id=\"delete-button\">\n <qd-icon\n class=\"header-action-icon\"\n *ngIf=\"showDelete$ | async\"\n (click)=\"deleteButton?.handler()\"\n [icon]=\"'trash'\"\n ></qd-icon>\n </button>\n\n <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n </button>\n\n <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n </button>\n\n <button\n *ngIf=\"showSave$ | async\"\n qdButton\n (click)=\"save()\"\n data-test-id=\"save-button\"\n [disabled]=\"($canSave | async) === false\"\n >\n {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n </button>\n\n <ng-container *ngIf=\"customActions$ | async as customActions\">\n <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n <button\n [qdMenuButton]=\"customActions\"\n [autoSize]=\"false\"\n [data-test-id]=\"'page-'\"\n *ngIf=\"customActions.actions.length > 1; else singleButton\"\n data-test-id=\"custom-button\"\n >\n {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n </button>\n\n <ng-template #singleButton>\n <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n <button\n qdButton\n *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n data-test-id=\"custom-button\"\n >\n {{ singleAction.label?.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #adaptive>\n <button\n *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n type=\"button\"\n class=\"adaptive-menu-button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"160\"\n >\n <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let action of customActions.actions; let i = index\"\n class=\"adaptive-menu-entry\"\n type=\"button\"\n [disabled]=\"action.isDisabled\"\n (click)=\"action.handler()\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n <ng-container *ngIf=\"pageObjectData$ | async as data\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n >\n <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"\n let context of contexts\n | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts?.length);\n let index = index;\n let first = first\n \"\n [ngClass]=\"{ hasDivider: headerFacets && first, adaptiveFirst: headerFacets && adaptiveMode && first }\"\n >\n <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n }}</span>\n\n <span *ngIf=\"context.value.length !== 0\">\n <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n <ng-container *ngFor=\"let val of context.value; let last = last\">\n {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n </ng-container>\n </qd-chip>\n </span>\n\n <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n <button\n qdButton\n qdButtonLink\n type=\"button\"\n (click)=\"changeContext(context.context, context.selection, $event)\"\n [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n >\n {{\n context.value.length !== 0\n ? (\"i18n.qd.page.context.button.change\" | translate)\n : (\"i18n.qd.page.context.button.select\" | translate)\n }}\n </button>\n </span>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"contexts$ | async as togglerContexts\">\n <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length + togglerContexts.length > 2\">\n <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + togglerContexts.length - 2 }}</span>\n <button qdIconButton [data-test-id]=\"'toggle-button'\">\n <qd-icon [icon]=\"facetsCollapsed ? 'ctrlDown' : 'ctrlTop'\"></qd-icon>\n </button>\n </span>\n </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-bottom:.125rem solid rgb(213,213,213);background:#fff;gap:1.25rem}@media (max-width: 599.98px){:host{padding:1.25rem .9375rem}}:host .object-header-top{display:flex;align-items:flex-start;justify-content:space-between}:host .object-header-top .object-header-title{padding:2px;color:#171717;font-size:1.3125rem;font-weight:500}:host .object-header-top .object-header-toolbar{display:flex;align-items:center;column-gap:.5rem}:host .object-header-top .object-header-toolbar .button-icon{background:none}:host .object-header-top .object-header-toolbar .button-icon+.button-icon{margin-left:-.5rem}:host .object-header-top .object-header-toolbar .header-action-icon{color:#14516f;cursor:pointer;font-size:1.5rem}:host.in-dialog .object-header-toolbar{padding-right:2.5rem}:host .object-header-facets{position:relative;display:flex;flex-wrap:wrap;font-size:1.125rem;gap:1.25rem}:host .object-header-facets .object-header-facet{display:flex;min-width:3.75rem;flex-direction:column}:host .object-header-facets .object-header-facet.hasDivider{padding-left:1.25rem;border-left:.0625rem solid rgb(117,117,117)}:host .object-header-facets .object-header-facet.adaptiveFirst{padding-top:1.25rem}:host .object-header-facets .object-header-facet .facet-label{display:block;margin-bottom:0;color:#757575;font-size:.875rem;padding-bottom:.375rem;font-weight:500}:host .object-header-facets .facets-toggler{position:absolute;top:0;right:0;display:flex;align-items:center;padding-right:.3125rem;font-size:.625rem;line-height:.625rem}:host .object-header-facets.amongThemselves{display:grid}:host .object-header-facets.amongThemselves .object-header-facet.hasDivider{padding-left:0;border-top:.0625rem solid rgb(117,117,117);border-left:none}.loading-overlay{position:absolute;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}.no-selected-context{height:1.625rem;color:#979797;font-size:.875rem;line-height:1.625rem}.select-button{margin-top:.25rem}.adaptive-menu-button{display:flex;background:unset;color:#454545;font-size:2rem}.adaptive-menu-button:hover,.adaptive-menu-button:focus{color:#000}.adaptive-menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ 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: 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: QdButtonLinkDirective, selector: "button[qdButtonLink], a[qdButtonLink], button[qd-button-link]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdMenuButtonComponent, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: ["qdMenuButton", "data-test-id", "autoSize"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDynamicFacetComponent, selector: "qd-dynamic-facet", inputs: ["facet", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
28939
28939
|
}
|
|
28940
28940
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageObjectHeaderComponent, decorators: [{
|
|
28941
28941
|
type: Component,
|
|
28942
|
-
args: [{ selector: 'qd-page-object-header', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.borderBottom]': 'borderBottomStyle' }, standalone: false, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n <div class=\"object-header-toolbar\">\n <button class=\"button-icon\" data-test-id=\"archive-button\">\n <qd-icon\n *ngIf=\"showArchive$ | async\"\n (click)=\"archiveButton?.handler()\"\n class=\"header-action-icon\"\n [icon]=\"'resultNew'\"\n ></qd-icon>\n </button>\n\n <button class=\"button-icon\" data-test-id=\"delete-button\">\n <qd-icon\n class=\"header-action-icon\"\n *ngIf=\"showDelete$ | async\"\n (click)=\"deleteButton?.handler()\"\n [icon]=\"'trash'\"\n ></qd-icon>\n </button>\n\n <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n </button>\n\n <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n </button>\n\n <button\n *ngIf=\"showSave$ | async\"\n qdButton\n (click)=\"save()\"\n data-test-id=\"save-button\"\n [disabled]=\"($canSave | async) === false\"\n >\n {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n </button>\n\n <ng-container *ngIf=\"customActions$ | async as customActions\">\n <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n <button\n [qdMenuButton]=\"customActions\"\n [autoSize]=\"false\"\n [data-test-id]=\"'page-'\"\n *ngIf=\"customActions.actions.length > 1; else singleButton\"\n data-test-id=\"custom-button\"\n >\n {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n </button>\n\n <ng-template #singleButton>\n <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n <button\n qdButton\n *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n data-test-id=\"custom-button\"\n >\n {{ singleAction.label?.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #adaptive>\n <button\n *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n type=\"button\"\n class=\"adaptive-menu-button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"160\"\n >\n <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let action of customActions.actions; let i = index\"\n class=\"adaptive-menu-entry\"\n type=\"button\"\n [disabled]=\"action.isDisabled\"\n (click)=\"action.handler()\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n <ng-container *ngIf=\"pageObjectData$ | async as data\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n >\n <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"\n let context of contexts\n | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts?.length);\n let index = index;\n let first = first\n \"\n [ngClass]=\"{ hasDivider: headerFacets && first, adaptiveFirst: headerFacets && adaptiveMode && first }\"\n >\n <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n }}</span>\n\n <span *ngIf=\"context.value.length !== 0\">\n <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n <ng-container *ngFor=\"let val of context.value; let last = last\">\n {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n </ng-container>\n </qd-chip>\n </span>\n\n <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n <button\n qdButton\n qdButtonLink\n type=\"button\"\n (click)=\"changeContext(context.context, context.selection, $event)\"\n [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n >\n {{\n context.value.length !== 0\n ? (\"i18n.qd.page.context.button.change\" | translate)\n : (\"i18n.qd.page.context.button.select\" | translate)\n }}\n </button>\n </span>\n </div>\n </ng-container>\n\n <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length +
|
|
28942
|
+
args: [{ selector: 'qd-page-object-header', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.borderBottom]': 'borderBottomStyle' }, standalone: false, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n <div class=\"object-header-toolbar\">\n <button class=\"button-icon\" data-test-id=\"archive-button\">\n <qd-icon\n *ngIf=\"showArchive$ | async\"\n (click)=\"archiveButton?.handler()\"\n class=\"header-action-icon\"\n [icon]=\"'resultNew'\"\n ></qd-icon>\n </button>\n\n <button class=\"button-icon\" data-test-id=\"delete-button\">\n <qd-icon\n class=\"header-action-icon\"\n *ngIf=\"showDelete$ | async\"\n (click)=\"deleteButton?.handler()\"\n [icon]=\"'trash'\"\n ></qd-icon>\n </button>\n\n <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n </button>\n\n <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n </button>\n\n <button\n *ngIf=\"showSave$ | async\"\n qdButton\n (click)=\"save()\"\n data-test-id=\"save-button\"\n [disabled]=\"($canSave | async) === false\"\n >\n {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n </button>\n\n <ng-container *ngIf=\"customActions$ | async as customActions\">\n <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n <button\n [qdMenuButton]=\"customActions\"\n [autoSize]=\"false\"\n [data-test-id]=\"'page-'\"\n *ngIf=\"customActions.actions.length > 1; else singleButton\"\n data-test-id=\"custom-button\"\n >\n {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n </button>\n\n <ng-template #singleButton>\n <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n <button\n qdButton\n *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n data-test-id=\"custom-button\"\n >\n {{ singleAction.label?.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #adaptive>\n <button\n *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n type=\"button\"\n class=\"adaptive-menu-button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"160\"\n >\n <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let action of customActions.actions; let i = index\"\n class=\"adaptive-menu-entry\"\n type=\"button\"\n [disabled]=\"action.isDisabled\"\n (click)=\"action.handler()\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n <ng-container *ngIf=\"pageObjectData$ | async as data\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n >\n <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"\n let context of contexts\n | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts?.length);\n let index = index;\n let first = first\n \"\n [ngClass]=\"{ hasDivider: headerFacets && first, adaptiveFirst: headerFacets && adaptiveMode && first }\"\n >\n <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n }}</span>\n\n <span *ngIf=\"context.value.length !== 0\">\n <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n <ng-container *ngFor=\"let val of context.value; let last = last\">\n {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n </ng-container>\n </qd-chip>\n </span>\n\n <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n <button\n qdButton\n qdButtonLink\n type=\"button\"\n (click)=\"changeContext(context.context, context.selection, $event)\"\n [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n >\n {{\n context.value.length !== 0\n ? (\"i18n.qd.page.context.button.change\" | translate)\n : (\"i18n.qd.page.context.button.select\" | translate)\n }}\n </button>\n </span>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"contexts$ | async as togglerContexts\">\n <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length + togglerContexts.length > 2\">\n <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + togglerContexts.length - 2 }}</span>\n <button qdIconButton [data-test-id]=\"'toggle-button'\">\n <qd-icon [icon]=\"facetsCollapsed ? 'ctrlDown' : 'ctrlTop'\"></qd-icon>\n </button>\n </span>\n </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-bottom:.125rem solid rgb(213,213,213);background:#fff;gap:1.25rem}@media (max-width: 599.98px){:host{padding:1.25rem .9375rem}}:host .object-header-top{display:flex;align-items:flex-start;justify-content:space-between}:host .object-header-top .object-header-title{padding:2px;color:#171717;font-size:1.3125rem;font-weight:500}:host .object-header-top .object-header-toolbar{display:flex;align-items:center;column-gap:.5rem}:host .object-header-top .object-header-toolbar .button-icon{background:none}:host .object-header-top .object-header-toolbar .button-icon+.button-icon{margin-left:-.5rem}:host .object-header-top .object-header-toolbar .header-action-icon{color:#14516f;cursor:pointer;font-size:1.5rem}:host.in-dialog .object-header-toolbar{padding-right:2.5rem}:host .object-header-facets{position:relative;display:flex;flex-wrap:wrap;font-size:1.125rem;gap:1.25rem}:host .object-header-facets .object-header-facet{display:flex;min-width:3.75rem;flex-direction:column}:host .object-header-facets .object-header-facet.hasDivider{padding-left:1.25rem;border-left:.0625rem solid rgb(117,117,117)}:host .object-header-facets .object-header-facet.adaptiveFirst{padding-top:1.25rem}:host .object-header-facets .object-header-facet .facet-label{display:block;margin-bottom:0;color:#757575;font-size:.875rem;padding-bottom:.375rem;font-weight:500}:host .object-header-facets .facets-toggler{position:absolute;top:0;right:0;display:flex;align-items:center;padding-right:.3125rem;font-size:.625rem;line-height:.625rem}:host .object-header-facets.amongThemselves{display:grid}:host .object-header-facets.amongThemselves .object-header-facet.hasDivider{padding-left:0;border-top:.0625rem solid rgb(117,117,117);border-left:none}.loading-overlay{position:absolute;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}.no-selected-context{height:1.625rem;color:#979797;font-size:.875rem;line-height:1.625rem}.select-button{margin-top:.25rem}.adaptive-menu-button{display:flex;background:unset;color:#454545;font-size:2rem}.adaptive-menu-button:hover,.adaptive-menu-button:focus{color:#000}.adaptive-menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
28943
28943
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
28944
28944
|
type: Input,
|
|
28945
28945
|
args: [{ required: true }]
|
|
@@ -34095,11 +34095,11 @@ class QdQuickEditComponent {
|
|
|
34095
34095
|
this.controlContainer.control.valueChanges.pipe(tap(() => this.changeDetectorRef.detectChanges())).subscribe();
|
|
34096
34096
|
}
|
|
34097
34097
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
34098
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", 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-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-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 [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\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{
|
|
34098
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", 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-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-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 [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\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{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{min-width:0;margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;min-width:0;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input{position:relative}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input .qd-input-character-counter{position:absolute;right:.25rem;bottom:.125rem;font-size:.625rem;line-height:1;pointer-events:none}.table-cell.actions,.table-cell.actions-column{min-width:auto;flex:0 0 auto}.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{width:100%;min-width:0}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { 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: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
34099
34099
|
}
|
|
34100
34100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, decorators: [{
|
|
34101
34101
|
type: Component,
|
|
34102
|
-
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-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-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 [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\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{
|
|
34102
|
+
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-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-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 [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\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{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{min-width:0;margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;min-width:0;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input{position:relative}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input .qd-input-character-counter{position:absolute;right:.25rem;bottom:.125rem;font-size:.625rem;line-height:1;pointer-events:none}.table-cell.actions,.table-cell.actions-column{min-width:auto;flex:0 0 auto}.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{width:100%;min-width:0}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"] }]
|
|
34103
34103
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
34104
34104
|
type: Input,
|
|
34105
34105
|
args: [{ required: true }]
|