@quadrel-enterprise-ui/framework 20.17.0 → 20.17.1
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.
|
@@ -16962,11 +16962,11 @@ class QdMenuButtonComponent {
|
|
|
16962
16962
|
return this.config?.actions?.some(action => !action.isHidden) ?? false;
|
|
16963
16963
|
}
|
|
16964
16964
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16965
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMenuButtonComponent, isStandalone: false, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: { config: ["qdMenuButton", "config"], dataTestId: ["data-test-id", "dataTestId"], autoSize: "autoSize" }, host: { properties: { "attr.class": "classes" } }, ngImport: i0, template: "<ng-container *ngIf=\"qdButtonGhost\">\n <button\n qdButton\n qdButtonGhost\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n (opened)=\"isOpen = true\"\n (closed)=\"isOpen = false\"\n [class.open]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n </button>\n</ng-container>\n\n<ng-container *ngIf=\"!qdButtonGhost\">\n <button\n qdButton\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: autoSize }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n (opened)=\"isOpen = true\"\n (closed)=\"isOpen = false\"\n [class.open]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n </button>\n</ng-container>\n\n<ng-template #menu>\n <ng-container *ngFor=\"let action of config?.actions\">\n <button\n class=\"entry\"\n *ngIf=\"!action.isHidden\"\n (click)=\"action.handler()\"\n [disabled]=\"action.isDisabled\"\n [attr.data-test-id]=\"dataTestId + 'menu-action'\"\n qdTruncatedText\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-container>\n</ng-template>\n\n<ng-template #buttonContent>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <qd-icon class=\"open-indicator\" [icon]=\"'ctrlDown'\"></qd-icon>\n</ng-template>\n", styles: [":host{padding:0}@media (max-width: 959.98px){:host.only-icon-on-small-viewport button{padding:.875rem}:host.only-icon-on-small-viewport .qd-icon{margin:0;font-size:1.125rem}:host.only-icon-on-small-viewport .content{display:none}}button[qd-button].open{background-color:#14516f}button.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;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.entry:hover{background-color:#f2f7fa}button.entry:hover[disabled]{background:#fff0;cursor:default}button.entry[disabled]{color:#b4b4b4;cursor:default}button.entry[disabled]:hover{background-color:#fff0}.open-indicator{margin-left:.5rem}qd-icon{font-size:.875rem}.content{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
16965
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMenuButtonComponent, isStandalone: false, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: { config: ["qdMenuButton", "config"], dataTestId: ["data-test-id", "dataTestId"], autoSize: "autoSize" }, host: { properties: { "attr.class": "classes" } }, ngImport: i0, template: "<ng-container *ngIf=\"qdButtonGhost\">\n <button\n qdButton\n qdButtonGhost\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n (opened)=\"isOpen = true\"\n (closed)=\"isOpen = false\"\n [class.open]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n </button>\n</ng-container>\n\n<ng-container *ngIf=\"!qdButtonGhost\">\n <button\n qdButton\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: autoSize }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n (opened)=\"isOpen = true\"\n (closed)=\"isOpen = false\"\n [class.open]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n </button>\n</ng-container>\n\n<ng-template #menu>\n <ng-container *ngFor=\"let action of config?.actions\">\n <button\n class=\"entry\"\n *ngIf=\"!action.isHidden\"\n (click)=\"action.handler()\"\n [disabled]=\"action.isDisabled\"\n [attr.data-test-id]=\"dataTestId + 'menu-action'\"\n qdTruncatedText\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-container>\n</ng-template>\n\n<ng-template #buttonContent>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <qd-icon class=\"open-indicator\" [icon]=\"'ctrlDown'\"></qd-icon>\n</ng-template>\n", styles: [":host{padding:0}@media (max-width: 959.98px){:host.only-icon-on-small-viewport button{padding:.875rem}:host.only-icon-on-small-viewport .qd-icon{margin:0;font-size:1.125rem;transform:translateY(.125rem)}:host.only-icon-on-small-viewport .content{display:none}}button[qd-button].open{background-color:#14516f}button.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;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.entry:hover{background-color:#f2f7fa}button.entry:hover[disabled]{background:#fff0;cursor:default}button.entry[disabled]{color:#b4b4b4;cursor:default}button.entry[disabled]:hover{background-color:#fff0}.open-indicator{margin-left:.5rem;transform:translateY(.0625rem)}qd-icon{font-size:.875rem}.content{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
16966
16966
|
}
|
|
16967
16967
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMenuButtonComponent, decorators: [{
|
|
16968
16968
|
type: Component,
|
|
16969
|
-
args: [{ selector: 'button[qdMenuButton], a[qdMenuButton]', host: { '[attr.class]': 'classes' }, standalone: false, template: "<ng-container *ngIf=\"qdButtonGhost\">\n <button\n qdButton\n qdButtonGhost\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n (opened)=\"isOpen = true\"\n (closed)=\"isOpen = false\"\n [class.open]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n </button>\n</ng-container>\n\n<ng-container *ngIf=\"!qdButtonGhost\">\n <button\n qdButton\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: autoSize }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n (opened)=\"isOpen = true\"\n (closed)=\"isOpen = false\"\n [class.open]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n </button>\n</ng-container>\n\n<ng-template #menu>\n <ng-container *ngFor=\"let action of config?.actions\">\n <button\n class=\"entry\"\n *ngIf=\"!action.isHidden\"\n (click)=\"action.handler()\"\n [disabled]=\"action.isDisabled\"\n [attr.data-test-id]=\"dataTestId + 'menu-action'\"\n qdTruncatedText\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-container>\n</ng-template>\n\n<ng-template #buttonContent>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <qd-icon class=\"open-indicator\" [icon]=\"'ctrlDown'\"></qd-icon>\n</ng-template>\n", styles: [":host{padding:0}@media (max-width: 959.98px){:host.only-icon-on-small-viewport button{padding:.875rem}:host.only-icon-on-small-viewport .qd-icon{margin:0;font-size:1.125rem}:host.only-icon-on-small-viewport .content{display:none}}button[qd-button].open{background-color:#14516f}button.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;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.entry:hover{background-color:#f2f7fa}button.entry:hover[disabled]{background:#fff0;cursor:default}button.entry[disabled]{color:#b4b4b4;cursor:default}button.entry[disabled]:hover{background-color:#fff0}.open-indicator{margin-left:.5rem}qd-icon{font-size:.875rem}.content{display:inline-block}\n"] }]
|
|
16969
|
+
args: [{ selector: 'button[qdMenuButton], a[qdMenuButton]', host: { '[attr.class]': 'classes' }, standalone: false, template: "<ng-container *ngIf=\"qdButtonGhost\">\n <button\n qdButton\n qdButtonGhost\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n (opened)=\"isOpen = true\"\n (closed)=\"isOpen = false\"\n [class.open]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n </button>\n</ng-container>\n\n<ng-container *ngIf=\"!qdButtonGhost\">\n <button\n qdButton\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: autoSize }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n (opened)=\"isOpen = true\"\n (closed)=\"isOpen = false\"\n [class.open]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n </button>\n</ng-container>\n\n<ng-template #menu>\n <ng-container *ngFor=\"let action of config?.actions\">\n <button\n class=\"entry\"\n *ngIf=\"!action.isHidden\"\n (click)=\"action.handler()\"\n [disabled]=\"action.isDisabled\"\n [attr.data-test-id]=\"dataTestId + 'menu-action'\"\n qdTruncatedText\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-container>\n</ng-template>\n\n<ng-template #buttonContent>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <qd-icon class=\"open-indicator\" [icon]=\"'ctrlDown'\"></qd-icon>\n</ng-template>\n", styles: [":host{padding:0}@media (max-width: 959.98px){:host.only-icon-on-small-viewport button{padding:.875rem}:host.only-icon-on-small-viewport .qd-icon{margin:0;font-size:1.125rem;transform:translateY(.125rem)}:host.only-icon-on-small-viewport .content{display:none}}button[qd-button].open{background-color:#14516f}button.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;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.entry:hover{background-color:#f2f7fa}button.entry:hover[disabled]{background:#fff0;cursor:default}button.entry[disabled]{color:#b4b4b4;cursor:default}button.entry[disabled]:hover{background-color:#fff0}.open-indicator{margin-left:.5rem;transform:translateY(.0625rem)}qd-icon{font-size:.875rem}.content{display:inline-block}\n"] }]
|
|
16970
16970
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
16971
16971
|
type: Input,
|
|
16972
16972
|
args: ['qdMenuButton']
|
|
@@ -25954,6 +25954,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
25954
25954
|
}]
|
|
25955
25955
|
}] });
|
|
25956
25956
|
|
|
25957
|
+
/**
|
|
25958
|
+
* Renders the configured section actions in the toolbar.
|
|
25959
|
+
*
|
|
25960
|
+
* The presentation is viewport-adaptive, expressed through three streams:
|
|
25961
|
+
* - Below `md` (mobile): one action is shown directly (`singleAction$`); if an
|
|
25962
|
+
* `addNew` action is paired with exactly one other action, that one remaining
|
|
25963
|
+
* action is shown directly as well (`remainingSingleAction$`); any larger set
|
|
25964
|
+
* collapses into a dropdown (`groupedActionsMenu$`).
|
|
25965
|
+
* - At or above `md` (desktop): every action is shown directly, and the dropdown
|
|
25966
|
+
* (`groupedActionsMenu$`) appears only when more than one action exists.
|
|
25967
|
+
*/
|
|
25957
25968
|
class QdSectionToolbarActionComponent {
|
|
25958
25969
|
actionService = inject(QdSectionToolbarActionService);
|
|
25959
25970
|
changeDetectorRef = inject(ChangeDetectorRef);
|
|
@@ -25965,7 +25976,8 @@ class QdSectionToolbarActionComponent {
|
|
|
25965
25976
|
this.initActionStreams();
|
|
25966
25977
|
}
|
|
25967
25978
|
singleAction$;
|
|
25968
|
-
|
|
25979
|
+
remainingSingleAction$;
|
|
25980
|
+
groupedActionsMenu$;
|
|
25969
25981
|
_config = {};
|
|
25970
25982
|
_viewonly$ = new BehaviorSubject(false);
|
|
25971
25983
|
_destroy$ = new Subject();
|
|
@@ -25974,7 +25986,8 @@ class QdSectionToolbarActionComponent {
|
|
|
25974
25986
|
// TODO: Remove in v19
|
|
25975
25987
|
if (this._config.action) {
|
|
25976
25988
|
this.singleAction$ = new BehaviorSubject(this.mapLegacyAction(this._config.action));
|
|
25977
|
-
this.
|
|
25989
|
+
this.remainingSingleAction$ = new BehaviorSubject(null);
|
|
25990
|
+
this.groupedActionsMenu$ = new BehaviorSubject(null);
|
|
25978
25991
|
return;
|
|
25979
25992
|
}
|
|
25980
25993
|
this.initActionStreams();
|
|
@@ -25995,7 +26008,8 @@ class QdSectionToolbarActionComponent {
|
|
|
25995
26008
|
initActionStreams() {
|
|
25996
26009
|
const visibleActions$ = this.createVisibleActionsStream();
|
|
25997
26010
|
this.singleAction$ = this.createSingleActionStream(visibleActions$);
|
|
25998
|
-
this.
|
|
26011
|
+
this.remainingSingleAction$ = this.createRemainingSingleActionStream(visibleActions$);
|
|
26012
|
+
this.groupedActionsMenu$ = this.createGroupedActionsMenuStream(visibleActions$);
|
|
25999
26013
|
}
|
|
26000
26014
|
createVisibleActionsStream() {
|
|
26001
26015
|
const actions$ = new BehaviorSubject(this._config.actions ?? []);
|
|
@@ -26008,14 +26022,15 @@ class QdSectionToolbarActionComponent {
|
|
|
26008
26022
|
createSingleActionStream(visibleActions$) {
|
|
26009
26023
|
return combineLatest([visibleActions$, this.breakpointService.isViewportBelow('md')]).pipe(map(([actions, isVpBelowMd]) => {
|
|
26010
26024
|
if (isVpBelowMd) {
|
|
26011
|
-
const
|
|
26012
|
-
if (!
|
|
26025
|
+
const singleAction = actions.find(action => action.type === 'addNew') ?? (actions.length === 1 ? actions[0] : undefined);
|
|
26026
|
+
if (!singleAction)
|
|
26013
26027
|
return null;
|
|
26028
|
+
const isAddNew = singleAction.type === 'addNew';
|
|
26014
26029
|
return {
|
|
26015
|
-
label: this.getLabel(
|
|
26016
|
-
handler: () => this.executeAction(
|
|
26017
|
-
icon: 'plus',
|
|
26018
|
-
isDisabled: this._config.areActionsDisabled ??
|
|
26030
|
+
label: this.getLabel(singleAction, isAddNew),
|
|
26031
|
+
handler: () => this.executeAction(singleAction),
|
|
26032
|
+
icon: singleAction.icon || (isAddNew ? 'plus' : undefined),
|
|
26033
|
+
isDisabled: this._config.areActionsDisabled ?? singleAction.isDisabled ?? false,
|
|
26019
26034
|
isHidden: false
|
|
26020
26035
|
};
|
|
26021
26036
|
}
|
|
@@ -26032,11 +26047,29 @@ class QdSectionToolbarActionComponent {
|
|
|
26032
26047
|
};
|
|
26033
26048
|
}));
|
|
26034
26049
|
}
|
|
26035
|
-
|
|
26050
|
+
createRemainingSingleActionStream(visibleActions$) {
|
|
26036
26051
|
return combineLatest([visibleActions$, this.breakpointService.isViewportBelow('md')]).pipe(map(([actions, isVpBelowMd]) => {
|
|
26037
|
-
if (
|
|
26052
|
+
if (!isVpBelowMd)
|
|
26053
|
+
return null;
|
|
26054
|
+
const hasAddNew = actions.some(action => action.type === 'addNew');
|
|
26055
|
+
const companions = actions.filter(action => action.type !== 'addNew');
|
|
26056
|
+
if (!hasAddNew || companions.length !== 1)
|
|
26038
26057
|
return null;
|
|
26058
|
+
const companion = companions[0];
|
|
26059
|
+
return {
|
|
26060
|
+
label: this.getLabel(companion, false),
|
|
26061
|
+
handler: () => this.executeAction(companion),
|
|
26062
|
+
icon: companion.icon,
|
|
26063
|
+
isDisabled: this._config.areActionsDisabled ?? companion.isDisabled ?? false,
|
|
26064
|
+
isHidden: false
|
|
26065
|
+
};
|
|
26066
|
+
}));
|
|
26067
|
+
}
|
|
26068
|
+
createGroupedActionsMenuStream(visibleActions$) {
|
|
26069
|
+
return combineLatest([visibleActions$, this.breakpointService.isViewportBelow('md')]).pipe(map(([actions, isVpBelowMd]) => {
|
|
26039
26070
|
const filteredActions = isVpBelowMd ? actions.filter(action => action.type !== 'addNew') : actions;
|
|
26071
|
+
if (filteredActions.length <= 1)
|
|
26072
|
+
return null;
|
|
26040
26073
|
return {
|
|
26041
26074
|
isDisabled: this._config.areActionsDisabled ?? false,
|
|
26042
26075
|
actions: filteredActions.map(action => {
|
|
@@ -26080,11 +26113,11 @@ class QdSectionToolbarActionComponent {
|
|
|
26080
26113
|
};
|
|
26081
26114
|
}
|
|
26082
26115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSectionToolbarActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26083
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSectionToolbarActionComponent, isStandalone: false, selector: "qd-section-toolbar-action", inputs: { config: "config" }, ngImport: i0, template: "<button\n *ngIf=\"singleAction$ | async as singleAction\"\n qdStopPropagation\n qdButton\n qdButtonGhost\n color=\"primary\"\n [icon]=\"singleAction.icon\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n>\n {{ singleAction.label.i18n | translate }}\n</button>\n\n<button *ngIf=\"
|
|
26116
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSectionToolbarActionComponent, isStandalone: false, selector: "qd-section-toolbar-action", inputs: { config: "config" }, ngImport: i0, template: "<button\n *ngIf=\"singleAction$ | async as singleAction\"\n qdStopPropagation\n qdButton\n qdButtonGhost\n color=\"primary\"\n [icon]=\"singleAction.icon\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n>\n {{ singleAction.label.i18n | translate }}\n</button>\n\n<button\n *ngIf=\"remainingSingleAction$ | async as remainingSingleAction\"\n qdStopPropagation\n qdButton\n qdButtonGhost\n color=\"primary\"\n [icon]=\"remainingSingleAction.icon\"\n [disabled]=\"remainingSingleAction.isDisabled\"\n (click)=\"remainingSingleAction.handler()\"\n>\n {{ remainingSingleAction.label.i18n | translate }}\n</button>\n\n<button *ngIf=\"groupedActionsMenu$ | async as groupedActionsMenu\" qdButtonGhost [qdMenuButton]=\"groupedActionsMenu\">\n {{ \"i18n.qd.section.actions.menuButton.label\" | translate }}\n</button>\n", styles: [":host{margin-left:.75rem}:host:not(:has(button)){margin-left:0}\n"], dependencies: [{ 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: "component", type: QdMenuButtonComponent, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: ["qdMenuButton", "data-test-id", "autoSize"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
26084
26117
|
}
|
|
26085
26118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSectionToolbarActionComponent, decorators: [{
|
|
26086
26119
|
type: Component,
|
|
26087
|
-
args: [{ selector: 'qd-section-toolbar-action', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\n *ngIf=\"singleAction$ | async as singleAction\"\n qdStopPropagation\n qdButton\n qdButtonGhost\n color=\"primary\"\n [icon]=\"singleAction.icon\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n>\n {{ singleAction.label.i18n | translate }}\n</button>\n\n<button *ngIf=\"
|
|
26120
|
+
args: [{ selector: 'qd-section-toolbar-action', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\n *ngIf=\"singleAction$ | async as singleAction\"\n qdStopPropagation\n qdButton\n qdButtonGhost\n color=\"primary\"\n [icon]=\"singleAction.icon\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n>\n {{ singleAction.label.i18n | translate }}\n</button>\n\n<button\n *ngIf=\"remainingSingleAction$ | async as remainingSingleAction\"\n qdStopPropagation\n qdButton\n qdButtonGhost\n color=\"primary\"\n [icon]=\"remainingSingleAction.icon\"\n [disabled]=\"remainingSingleAction.isDisabled\"\n (click)=\"remainingSingleAction.handler()\"\n>\n {{ remainingSingleAction.label.i18n | translate }}\n</button>\n\n<button *ngIf=\"groupedActionsMenu$ | async as groupedActionsMenu\" qdButtonGhost [qdMenuButton]=\"groupedActionsMenu\">\n {{ \"i18n.qd.section.actions.menuButton.label\" | translate }}\n</button>\n", styles: [":host{margin-left:.75rem}:host:not(:has(button)){margin-left:0}\n"] }]
|
|
26088
26121
|
}], propDecorators: { config: [{
|
|
26089
26122
|
type: Input
|
|
26090
26123
|
}] } });
|
|
@@ -26128,11 +26161,11 @@ class QdSectionToolbarComponent {
|
|
|
26128
26161
|
this.isCollapsed = !this.isCollapsed;
|
|
26129
26162
|
}
|
|
26130
26163
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSectionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26131
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSectionToolbarComponent, isStandalone: false, selector: "qd-section-toolbar", inputs: { config: "config" }, viewQueries: [{ propertyName: "toolbarComponents", predicate: ["filter, search"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ toolbarHeader: true, collapsible: config.collapse?.isEnabled }\" (click)=\"toggleCollapse()\">\n <qd-icon class=\"collapseIcon\" *ngIf=\"config.collapse?.isEnabled\" [icon]=\"isCollapsed ? 'ctrlRight' : 'ctrlDown'\">\n </qd-icon>\n\n <span class=\"toolbarTitle\" *ngIf=\"config.title\">{{ config.title.i18n | translate }}</span>\n <qd-icon\n *ngIf=\"isTooltipVisible\"\n class=\"additionalInfo\"\n icon=\"circleInfo\"\n qdTooltipOnClick\n [qdTooltipContent]=\"tooltipContent\"\n ></qd-icon>\n</div>\n\n<ng-container *ngIf=\"!isCollapsed\">\n <div class=\"toolbarRight\">\n <qd-search #search [configData]=\"searchConfigData\"></qd-search>\n <qd-section-toolbar-action qdViewportAdaptive class=\"toolbarAction\" [config]=\"config\"></qd-section-toolbar-action>\n </div>\n\n <qd-filter class=\"toolbarFilter\" #filter [filterData]=\"filterData\"></qd-filter>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap;margin-bottom:.625rem}:host .toolbarHeader{color:#333;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.625rem}@media (max-width: 599.98px){:host .toolbarHeader{margin-bottom:.3125rem}}:host .collapsible{cursor:pointer}:host .collapsible .toolbarTitle{margin-left:1.5rem}:host .collapseIcon{position:absolute;top:-.09375rem;font-size:1.375rem;font-weight:500}:host .additionalInfo{position:absolute;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:500}:host .additionalInfo:hover,:host .additionalInfo:focus,:host .additionalInfo:active{color:#14516f}:host .toolbarRight{display:inline-flex;margin-bottom:.625rem;margin-left:auto}@media (max-width: 959.98px){:host .toolbarRight{display:flex;width:100%;flex-basis:100%;margin-left:auto}:host .toolbarRight qd-search{min-width:0;flex-basis:0;flex-grow:1;flex-shrink:1}:host .toolbarRight qd-section-toolbar-action{flex-basis:auto;flex-grow:0;flex-shrink:0}}:host .toolbarAction{display:flex;align-items:center}@media (max-width: 959.98px){:host .toolbarAction{gap:.75rem}}:host .toolbarFilter{flex-basis:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFilterComponent, selector: "qd-filter", inputs: ["filterData", "data-test-id"], outputs: ["queryStringOutput", "postBodyOutput", "valueChange"] }, { kind: "component", type: QdSearchComponent, selector: "qd-search", inputs: ["configData"] }, { kind: "directive", type: QdViewportAdaptiveDirective, selector: "[qdViewportAdaptive]" }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "component", type: QdSectionToolbarActionComponent, selector: "qd-section-toolbar-action", inputs: ["config"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
26164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSectionToolbarComponent, isStandalone: false, selector: "qd-section-toolbar", inputs: { config: "config" }, viewQueries: [{ propertyName: "toolbarComponents", predicate: ["filter, search"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ toolbarHeader: true, collapsible: config.collapse?.isEnabled }\" (click)=\"toggleCollapse()\">\n <qd-icon class=\"collapseIcon\" *ngIf=\"config.collapse?.isEnabled\" [icon]=\"isCollapsed ? 'ctrlRight' : 'ctrlDown'\">\n </qd-icon>\n\n <span class=\"toolbarTitle\" *ngIf=\"config.title\">{{ config.title.i18n | translate }}</span>\n <qd-icon\n *ngIf=\"isTooltipVisible\"\n class=\"additionalInfo\"\n icon=\"circleInfo\"\n qdTooltipOnClick\n [qdTooltipContent]=\"tooltipContent\"\n ></qd-icon>\n</div>\n\n<ng-container *ngIf=\"!isCollapsed\">\n <div class=\"toolbarRight\">\n <qd-search #search [configData]=\"searchConfigData\"></qd-search>\n <qd-section-toolbar-action qdViewportAdaptive class=\"toolbarAction\" [config]=\"config\"></qd-section-toolbar-action>\n </div>\n\n <qd-filter class=\"toolbarFilter\" #filter [filterData]=\"filterData\"></qd-filter>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap;margin-bottom:.625rem}:host .toolbarHeader{color:#333;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.625rem}@media (max-width: 599.98px){:host .toolbarHeader{margin-bottom:.3125rem}}:host .collapsible{cursor:pointer}:host .collapsible .toolbarTitle{margin-left:1.5rem}:host .collapseIcon{position:absolute;top:-.09375rem;font-size:1.375rem;font-weight:500}:host .additionalInfo{position:absolute;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:500}:host .additionalInfo:hover,:host .additionalInfo:focus,:host .additionalInfo:active{color:#14516f}:host .toolbarRight{display:inline-flex;margin-bottom:.625rem;margin-left:auto}@media (max-width: 959.98px){:host .toolbarRight{display:flex;width:100%;flex-basis:100%;margin-left:auto}:host .toolbarRight qd-search{min-width:0;flex-basis:0;flex-grow:1;flex-shrink:1}:host .toolbarRight qd-section-toolbar-action{flex-basis:auto;flex-grow:0;flex-shrink:0}:host .toolbarRight qd-search.hidden+qd-section-toolbar-action{margin-left:0}}:host .toolbarAction{display:flex;align-items:center}@media (max-width: 959.98px){:host .toolbarAction{gap:.75rem}}:host .toolbarFilter{flex-basis:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFilterComponent, selector: "qd-filter", inputs: ["filterData", "data-test-id"], outputs: ["queryStringOutput", "postBodyOutput", "valueChange"] }, { kind: "component", type: QdSearchComponent, selector: "qd-search", inputs: ["configData"] }, { kind: "directive", type: QdViewportAdaptiveDirective, selector: "[qdViewportAdaptive]" }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "component", type: QdSectionToolbarActionComponent, selector: "qd-section-toolbar-action", inputs: ["config"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
26132
26165
|
}
|
|
26133
26166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSectionToolbarComponent, decorators: [{
|
|
26134
26167
|
type: Component,
|
|
26135
|
-
args: [{ selector: 'qd-section-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div [ngClass]=\"{ toolbarHeader: true, collapsible: config.collapse?.isEnabled }\" (click)=\"toggleCollapse()\">\n <qd-icon class=\"collapseIcon\" *ngIf=\"config.collapse?.isEnabled\" [icon]=\"isCollapsed ? 'ctrlRight' : 'ctrlDown'\">\n </qd-icon>\n\n <span class=\"toolbarTitle\" *ngIf=\"config.title\">{{ config.title.i18n | translate }}</span>\n <qd-icon\n *ngIf=\"isTooltipVisible\"\n class=\"additionalInfo\"\n icon=\"circleInfo\"\n qdTooltipOnClick\n [qdTooltipContent]=\"tooltipContent\"\n ></qd-icon>\n</div>\n\n<ng-container *ngIf=\"!isCollapsed\">\n <div class=\"toolbarRight\">\n <qd-search #search [configData]=\"searchConfigData\"></qd-search>\n <qd-section-toolbar-action qdViewportAdaptive class=\"toolbarAction\" [config]=\"config\"></qd-section-toolbar-action>\n </div>\n\n <qd-filter class=\"toolbarFilter\" #filter [filterData]=\"filterData\"></qd-filter>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap;margin-bottom:.625rem}:host .toolbarHeader{color:#333;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.625rem}@media (max-width: 599.98px){:host .toolbarHeader{margin-bottom:.3125rem}}:host .collapsible{cursor:pointer}:host .collapsible .toolbarTitle{margin-left:1.5rem}:host .collapseIcon{position:absolute;top:-.09375rem;font-size:1.375rem;font-weight:500}:host .additionalInfo{position:absolute;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:500}:host .additionalInfo:hover,:host .additionalInfo:focus,:host .additionalInfo:active{color:#14516f}:host .toolbarRight{display:inline-flex;margin-bottom:.625rem;margin-left:auto}@media (max-width: 959.98px){:host .toolbarRight{display:flex;width:100%;flex-basis:100%;margin-left:auto}:host .toolbarRight qd-search{min-width:0;flex-basis:0;flex-grow:1;flex-shrink:1}:host .toolbarRight qd-section-toolbar-action{flex-basis:auto;flex-grow:0;flex-shrink:0}}:host .toolbarAction{display:flex;align-items:center}@media (max-width: 959.98px){:host .toolbarAction{gap:.75rem}}:host .toolbarFilter{flex-basis:100%}\n"] }]
|
|
26168
|
+
args: [{ selector: 'qd-section-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div [ngClass]=\"{ toolbarHeader: true, collapsible: config.collapse?.isEnabled }\" (click)=\"toggleCollapse()\">\n <qd-icon class=\"collapseIcon\" *ngIf=\"config.collapse?.isEnabled\" [icon]=\"isCollapsed ? 'ctrlRight' : 'ctrlDown'\">\n </qd-icon>\n\n <span class=\"toolbarTitle\" *ngIf=\"config.title\">{{ config.title.i18n | translate }}</span>\n <qd-icon\n *ngIf=\"isTooltipVisible\"\n class=\"additionalInfo\"\n icon=\"circleInfo\"\n qdTooltipOnClick\n [qdTooltipContent]=\"tooltipContent\"\n ></qd-icon>\n</div>\n\n<ng-container *ngIf=\"!isCollapsed\">\n <div class=\"toolbarRight\">\n <qd-search #search [configData]=\"searchConfigData\"></qd-search>\n <qd-section-toolbar-action qdViewportAdaptive class=\"toolbarAction\" [config]=\"config\"></qd-section-toolbar-action>\n </div>\n\n <qd-filter class=\"toolbarFilter\" #filter [filterData]=\"filterData\"></qd-filter>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap;margin-bottom:.625rem}:host .toolbarHeader{color:#333;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.625rem}@media (max-width: 599.98px){:host .toolbarHeader{margin-bottom:.3125rem}}:host .collapsible{cursor:pointer}:host .collapsible .toolbarTitle{margin-left:1.5rem}:host .collapseIcon{position:absolute;top:-.09375rem;font-size:1.375rem;font-weight:500}:host .additionalInfo{position:absolute;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:500}:host .additionalInfo:hover,:host .additionalInfo:focus,:host .additionalInfo:active{color:#14516f}:host .toolbarRight{display:inline-flex;margin-bottom:.625rem;margin-left:auto}@media (max-width: 959.98px){:host .toolbarRight{display:flex;width:100%;flex-basis:100%;margin-left:auto}:host .toolbarRight qd-search{min-width:0;flex-basis:0;flex-grow:1;flex-shrink:1}:host .toolbarRight qd-section-toolbar-action{flex-basis:auto;flex-grow:0;flex-shrink:0}:host .toolbarRight qd-search.hidden+qd-section-toolbar-action{margin-left:0}}:host .toolbarAction{display:flex;align-items:center}@media (max-width: 959.98px){:host .toolbarAction{gap:.75rem}}:host .toolbarFilter{flex-basis:100%}\n"] }]
|
|
26136
26169
|
}], propDecorators: { config: [{
|
|
26137
26170
|
type: Input
|
|
26138
26171
|
}], toolbarComponents: [{
|