@quadrel-enterprise-ui/framework 20.10.1 → 20.11.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.
- package/fesm2022/quadrel-enterprise-ui-framework.mjs +366 -170
- package/fesm2022/quadrel-enterprise-ui-framework.mjs.map +1 -1
- package/index.d.ts +205 -45
- package/package.json +1 -1
- package/src/assets/i18n/de.json +2 -0
- package/src/assets/i18n/en.json +2 -0
- package/src/assets/i18n/fr.json +2 -0
- package/src/assets/i18n/it.json +2 -0
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, ViewEncapsulation, Component, Injectable, Injector, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Renderer2, Pipe, ViewContainerRef, NO_ERRORS_SCHEMA, SecurityContext, NgZone, ViewChildren, forwardRef, DestroyRef, ContentChildren, ContentChild, QueryList, CUSTOM_ELEMENTS_SCHEMA, provideAppInitializer, TemplateRef } from '@angular/core';
|
|
2
|
+
import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, ViewEncapsulation, Component, Injectable, Injector, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Renderer2, Pipe, ViewContainerRef, NO_ERRORS_SCHEMA, SecurityContext, NgZone, ViewChildren, forwardRef, DestroyRef, ContentChildren, ContentChild, isDevMode, QueryList, CUSTOM_ELEMENTS_SCHEMA, provideAppInitializer, TemplateRef } from '@angular/core';
|
|
3
3
|
import { Dialog, DialogRef, DialogModule } from '@angular/cdk/dialog';
|
|
4
4
|
import * as i1 from '@angular/common';
|
|
5
5
|
import { CommonModule, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
|
|
6
6
|
import { BehaviorSubject, pairwise, from, switchMap, map as map$1, Subject, throwError, of, ReplaySubject, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, firstValueFrom, combineLatest, concat, take as take$1, delay, tap as tap$1, first, scan, queueScheduler, filter as filter$1, concatMap as concatMap$1, exhaustMap, finalize, combineLatestWith, forkJoin, delayWhen, withLatestFrom, async } from 'rxjs';
|
|
7
|
-
import { map, takeUntil, take, filter, catchError, debounceTime, startWith, distinctUntilChanged, concatMap, tap, skip, observeOn, switchMap as switchMap$1, pairwise as pairwise$1, mergeMap, delay as delay$1 } from 'rxjs/operators';
|
|
7
|
+
import { map, takeUntil, take, filter, catchError, debounceTime, startWith, distinctUntilChanged, concatMap, tap, skip, auditTime, observeOn, switchMap as switchMap$1, pairwise as pairwise$1, mergeMap, delay as delay$1 } from 'rxjs/operators';
|
|
8
8
|
import { v4 } from 'uuid';
|
|
9
9
|
import * as i3 from '@ngx-translate/core';
|
|
10
10
|
import { TranslateService, TranslateModule } from '@ngx-translate/core';
|
|
@@ -7115,6 +7115,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
7115
7115
|
}]
|
|
7116
7116
|
}] });
|
|
7117
7117
|
|
|
7118
|
+
const MAX_TOOLTIP_CHARACTER = 512;
|
|
7119
|
+
const TOOLTIP_POSITIONS = [
|
|
7120
|
+
{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
|
|
7121
|
+
{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
|
|
7122
|
+
{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
|
|
7123
|
+
{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' }
|
|
7124
|
+
];
|
|
7125
|
+
class QdTooltipOnClickDirective {
|
|
7126
|
+
overlay = inject(Overlay);
|
|
7127
|
+
elementRef = inject(ElementRef);
|
|
7128
|
+
translateService = inject(TranslateService);
|
|
7129
|
+
qdTooltipContent;
|
|
7130
|
+
_overlayRef;
|
|
7131
|
+
onClickToggle(event) {
|
|
7132
|
+
event.stopPropagation();
|
|
7133
|
+
this._overlayRef ? this.close() : this.show();
|
|
7134
|
+
}
|
|
7135
|
+
onOutsideClickClose(target) {
|
|
7136
|
+
if (!this.elementRef.nativeElement.contains(target))
|
|
7137
|
+
this.close();
|
|
7138
|
+
}
|
|
7139
|
+
ngOnDestroy() {
|
|
7140
|
+
this.close();
|
|
7141
|
+
}
|
|
7142
|
+
show() {
|
|
7143
|
+
const positionStrategy = this.overlay
|
|
7144
|
+
.position()
|
|
7145
|
+
.flexibleConnectedTo(this.elementRef)
|
|
7146
|
+
.withFlexibleDimensions(false)
|
|
7147
|
+
.withPush(false)
|
|
7148
|
+
.withPositions(TOOLTIP_POSITIONS);
|
|
7149
|
+
this._overlayRef = this.overlay.create({ positionStrategy });
|
|
7150
|
+
const tooltipRef = this._overlayRef.attach(new ComponentPortal(QdTooltipComponent));
|
|
7151
|
+
tooltipRef.instance.content = this.getContent();
|
|
7152
|
+
}
|
|
7153
|
+
close() {
|
|
7154
|
+
if (this._overlayRef) {
|
|
7155
|
+
this._overlayRef.dispose();
|
|
7156
|
+
this._overlayRef = null;
|
|
7157
|
+
}
|
|
7158
|
+
}
|
|
7159
|
+
getContent() {
|
|
7160
|
+
const content = { paragraphs: [] };
|
|
7161
|
+
let fullText = '';
|
|
7162
|
+
const headline = this.qdTooltipContent?.headline?.i18n;
|
|
7163
|
+
if (headline) {
|
|
7164
|
+
const translatedHeadline = this.translate(headline);
|
|
7165
|
+
content.headline = translatedHeadline;
|
|
7166
|
+
fullText += translatedHeadline;
|
|
7167
|
+
}
|
|
7168
|
+
const paragraphs = this.qdTooltipContent?.paragraphs || [];
|
|
7169
|
+
const translatedParagraphs = paragraphs.map(p => this.translate(p.i18n));
|
|
7170
|
+
if (translatedParagraphs.length) {
|
|
7171
|
+
content.paragraphs.push(...translatedParagraphs);
|
|
7172
|
+
fullText += translatedParagraphs.join('');
|
|
7173
|
+
}
|
|
7174
|
+
const truncatedText = this.truncateText(fullText);
|
|
7175
|
+
return {
|
|
7176
|
+
headline: content.headline,
|
|
7177
|
+
paragraphs: content.paragraphs.map(p => truncatedText.includes(p) ? p : `${p.substring(0, MAX_TOOLTIP_CHARACTER)}...`)
|
|
7178
|
+
};
|
|
7179
|
+
}
|
|
7180
|
+
truncateText(text) {
|
|
7181
|
+
if (text.length <= MAX_TOOLTIP_CHARACTER)
|
|
7182
|
+
return text.trim();
|
|
7183
|
+
console.warn(`QdUi | QdTooltip - Tooltip content exceeds ${MAX_TOOLTIP_CHARACTER} characters. It will be truncated.`);
|
|
7184
|
+
return `${text.substring(0, MAX_TOOLTIP_CHARACTER).trim()}...`;
|
|
7185
|
+
}
|
|
7186
|
+
translate(key) {
|
|
7187
|
+
return this.translateService.instant(key);
|
|
7188
|
+
}
|
|
7189
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipOnClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
7190
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdTooltipOnClickDirective, isStandalone: false, selector: "[qdTooltipOnClick]", inputs: { qdTooltipContent: "qdTooltipContent" }, host: { listeners: { "click": "onClickToggle($event)", "document:click": "onOutsideClickClose($event.target)" } }, ngImport: i0 });
|
|
7191
|
+
}
|
|
7192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipOnClickDirective, decorators: [{
|
|
7193
|
+
type: Directive,
|
|
7194
|
+
args: [{
|
|
7195
|
+
selector: '[qdTooltipOnClick]',
|
|
7196
|
+
standalone: false
|
|
7197
|
+
}]
|
|
7198
|
+
}], propDecorators: { qdTooltipContent: [{
|
|
7199
|
+
type: Input
|
|
7200
|
+
}], onClickToggle: [{
|
|
7201
|
+
type: HostListener,
|
|
7202
|
+
args: ['click', ['$event']]
|
|
7203
|
+
}], onOutsideClickClose: [{
|
|
7204
|
+
type: HostListener,
|
|
7205
|
+
args: ['document:click', ['$event.target']]
|
|
7206
|
+
}] } });
|
|
7207
|
+
|
|
7208
|
+
class QdTooltipIconComponent {
|
|
7209
|
+
tooltip;
|
|
7210
|
+
get isVisible() {
|
|
7211
|
+
return !!this.tooltip && this.tooltip.hidden !== true;
|
|
7212
|
+
}
|
|
7213
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7214
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTooltipIconComponent, isStandalone: false, selector: "qd-tooltip-icon", inputs: { tooltip: "tooltip" }, ngImport: i0, template: "<qd-icon\n *ngIf=\"isVisible\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"tooltip?.content\"\n></qd-icon>\n", styles: [".additional-info{align-self:center;margin-left:to-rem(4);color:#069;cursor:pointer;font-size:to-rem(16);font-weight:400;transform:translateY(to-rem(1))}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }] });
|
|
7215
|
+
}
|
|
7216
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipIconComponent, decorators: [{
|
|
7217
|
+
type: Component,
|
|
7218
|
+
args: [{ selector: 'qd-tooltip-icon', standalone: false, template: "<qd-icon\n *ngIf=\"isVisible\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"tooltip?.content\"\n></qd-icon>\n", styles: [".additional-info{align-self:center;margin-left:to-rem(4);color:#069;cursor:pointer;font-size:to-rem(16);font-weight:400;transform:translateY(to-rem(1))}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"] }]
|
|
7219
|
+
}], propDecorators: { tooltip: [{
|
|
7220
|
+
type: Input
|
|
7221
|
+
}] } });
|
|
7222
|
+
|
|
7118
7223
|
const QD_SAFE_BOTTOM_OFFSET = new InjectionToken('QD_SAFE_BOTTOM_OFFSET');
|
|
7119
7224
|
|
|
7120
7225
|
const QD_POPOVER_TOP_FIRST = new InjectionToken('QD_POPOVER_TOP_FIRST');
|
|
@@ -7807,107 +7912,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
7807
7912
|
}]
|
|
7808
7913
|
}] });
|
|
7809
7914
|
|
|
7810
|
-
const MAX_TOOLTIP_CHARACTER = 512;
|
|
7811
|
-
const TOOLTIP_POSITIONS = [
|
|
7812
|
-
{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
|
|
7813
|
-
{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
|
|
7814
|
-
{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
|
|
7815
|
-
{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' }
|
|
7816
|
-
];
|
|
7817
|
-
class QdTooltipOnClickDirective {
|
|
7818
|
-
overlay = inject(Overlay);
|
|
7819
|
-
elementRef = inject(ElementRef);
|
|
7820
|
-
translateService = inject(TranslateService);
|
|
7821
|
-
qdTooltipContent;
|
|
7822
|
-
_overlayRef;
|
|
7823
|
-
onClickToggle(event) {
|
|
7824
|
-
event.stopPropagation();
|
|
7825
|
-
this._overlayRef ? this.close() : this.show();
|
|
7826
|
-
}
|
|
7827
|
-
onOutsideClickClose(target) {
|
|
7828
|
-
if (!this.elementRef.nativeElement.contains(target))
|
|
7829
|
-
this.close();
|
|
7830
|
-
}
|
|
7831
|
-
ngOnDestroy() {
|
|
7832
|
-
this.close();
|
|
7833
|
-
}
|
|
7834
|
-
show() {
|
|
7835
|
-
const positionStrategy = this.overlay
|
|
7836
|
-
.position()
|
|
7837
|
-
.flexibleConnectedTo(this.elementRef)
|
|
7838
|
-
.withFlexibleDimensions(false)
|
|
7839
|
-
.withPush(false)
|
|
7840
|
-
.withPositions(TOOLTIP_POSITIONS);
|
|
7841
|
-
this._overlayRef = this.overlay.create({ positionStrategy });
|
|
7842
|
-
const tooltipRef = this._overlayRef.attach(new ComponentPortal(QdTooltipComponent));
|
|
7843
|
-
tooltipRef.instance.content = this.getContent();
|
|
7844
|
-
}
|
|
7845
|
-
close() {
|
|
7846
|
-
if (this._overlayRef) {
|
|
7847
|
-
this._overlayRef.dispose();
|
|
7848
|
-
this._overlayRef = null;
|
|
7849
|
-
}
|
|
7850
|
-
}
|
|
7851
|
-
getContent() {
|
|
7852
|
-
const content = { paragraphs: [] };
|
|
7853
|
-
let fullText = '';
|
|
7854
|
-
const headline = this.qdTooltipContent?.headline?.i18n;
|
|
7855
|
-
if (headline) {
|
|
7856
|
-
const translatedHeadline = this.translate(headline);
|
|
7857
|
-
content.headline = translatedHeadline;
|
|
7858
|
-
fullText += translatedHeadline;
|
|
7859
|
-
}
|
|
7860
|
-
const paragraphs = this.qdTooltipContent?.paragraphs || [];
|
|
7861
|
-
const translatedParagraphs = paragraphs.map(p => this.translate(p.i18n));
|
|
7862
|
-
if (translatedParagraphs.length) {
|
|
7863
|
-
content.paragraphs.push(...translatedParagraphs);
|
|
7864
|
-
fullText += translatedParagraphs.join('');
|
|
7865
|
-
}
|
|
7866
|
-
const truncatedText = this.truncateText(fullText);
|
|
7867
|
-
return {
|
|
7868
|
-
headline: content.headline,
|
|
7869
|
-
paragraphs: content.paragraphs.map(p => truncatedText.includes(p) ? p : `${p.substring(0, MAX_TOOLTIP_CHARACTER)}...`)
|
|
7870
|
-
};
|
|
7871
|
-
}
|
|
7872
|
-
truncateText(text) {
|
|
7873
|
-
if (text.length <= MAX_TOOLTIP_CHARACTER)
|
|
7874
|
-
return text.trim();
|
|
7875
|
-
console.warn(`QdUi | QdTooltip - Tooltip content exceeds ${MAX_TOOLTIP_CHARACTER} characters. It will be truncated.`);
|
|
7876
|
-
return `${text.substring(0, MAX_TOOLTIP_CHARACTER).trim()}...`;
|
|
7877
|
-
}
|
|
7878
|
-
translate(key) {
|
|
7879
|
-
return this.translateService.instant(key);
|
|
7880
|
-
}
|
|
7881
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipOnClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
7882
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdTooltipOnClickDirective, isStandalone: false, selector: "[qdTooltipOnClick]", inputs: { qdTooltipContent: "qdTooltipContent" }, host: { listeners: { "click": "onClickToggle($event)", "document:click": "onOutsideClickClose($event.target)" } }, ngImport: i0 });
|
|
7883
|
-
}
|
|
7884
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipOnClickDirective, decorators: [{
|
|
7885
|
-
type: Directive,
|
|
7886
|
-
args: [{
|
|
7887
|
-
selector: '[qdTooltipOnClick]',
|
|
7888
|
-
standalone: false
|
|
7889
|
-
}]
|
|
7890
|
-
}], propDecorators: { qdTooltipContent: [{
|
|
7891
|
-
type: Input
|
|
7892
|
-
}], onClickToggle: [{
|
|
7893
|
-
type: HostListener,
|
|
7894
|
-
args: ['click', ['$event']]
|
|
7895
|
-
}], onOutsideClickClose: [{
|
|
7896
|
-
type: HostListener,
|
|
7897
|
-
args: ['document:click', ['$event.target']]
|
|
7898
|
-
}] } });
|
|
7899
|
-
|
|
7900
7915
|
class QdTooltipModule {
|
|
7901
7916
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
7902
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipModule, declarations: [QdTooltipComponent,
|
|
7903
|
-
|
|
7917
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipModule, declarations: [QdTooltipComponent,
|
|
7918
|
+
QdTooltipOnClickDirective,
|
|
7919
|
+
QdTooltipAtIntersectionDirective,
|
|
7920
|
+
QdTooltipIconComponent], imports: [CommonModule, TranslateModule, QdIconModule], exports: [QdTooltipOnClickDirective, QdTooltipAtIntersectionDirective, QdTooltipIconComponent] });
|
|
7921
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipModule, imports: [CommonModule, TranslateModule, QdIconModule] });
|
|
7904
7922
|
}
|
|
7905
7923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipModule, decorators: [{
|
|
7906
7924
|
type: NgModule,
|
|
7907
7925
|
args: [{
|
|
7908
|
-
imports: [CommonModule, TranslateModule],
|
|
7909
|
-
declarations: [
|
|
7910
|
-
|
|
7926
|
+
imports: [CommonModule, TranslateModule, QdIconModule],
|
|
7927
|
+
declarations: [
|
|
7928
|
+
QdTooltipComponent,
|
|
7929
|
+
QdTooltipOnClickDirective,
|
|
7930
|
+
QdTooltipAtIntersectionDirective,
|
|
7931
|
+
QdTooltipIconComponent
|
|
7932
|
+
],
|
|
7933
|
+
exports: [QdTooltipOnClickDirective, QdTooltipAtIntersectionDirective, QdTooltipIconComponent]
|
|
7911
7934
|
}]
|
|
7912
7935
|
}] });
|
|
7913
7936
|
|
|
@@ -8321,15 +8344,12 @@ class QdFormLabelComponent {
|
|
|
8321
8344
|
get isIndicatorVisible() {
|
|
8322
8345
|
return this.isRequired && !this.readonly && !this.viewonly && !!this.label;
|
|
8323
8346
|
}
|
|
8324
|
-
get isTooltipVisible() {
|
|
8325
|
-
return this.tooltip && this.tooltip?.hidden !== true;
|
|
8326
|
-
}
|
|
8327
8347
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8328
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFormLabelComponent, isStandalone: false, selector: "qd-form-label", inputs: { label: "label", isDisabled: "isDisabled", readonly: "readonly", viewonly: "viewonly", control: "control", tooltip: "tooltip", testId: ["data-test-id", "testId"] }, host: { properties: { "class.disabled": "this.isDisabled", "class.viewonly": "this.viewonly", "attr.data-test-id": "this.testId" }, classAttribute: "qd-form-label" }, ngImport: i0, template: "<span class=\"label-text\">{{ label | translate }}</span>\n<span class=\"qd-form-label__required-indicator\" *ngIf=\"isIndicatorVisible\">*</span>\n<qd-icon
|
|
8348
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFormLabelComponent, isStandalone: false, selector: "qd-form-label", inputs: { label: "label", isDisabled: "isDisabled", readonly: "readonly", viewonly: "viewonly", control: "control", tooltip: "tooltip", testId: ["data-test-id", "testId"] }, host: { properties: { "class.disabled": "this.isDisabled", "class.viewonly": "this.viewonly", "attr.data-test-id": "this.testId" }, classAttribute: "qd-form-label" }, ngImport: i0, template: "<span class=\"label-text\">{{ label | translate }}</span>\n<span class=\"qd-form-label__required-indicator\" *ngIf=\"isIndicatorVisible\">*</span>\n<qd-tooltip-icon [tooltip]=\"tooltip\"></qd-tooltip-icon>\n", styles: [":host{display:flex;height:.875rem;align-items:center;margin-bottom:.25rem;color:#171717;font-size:.75rem;font-weight:500;line-height:.875rem}@media (max-width: 959.98px){:host.disabled{display:none}}.qd-form-error :host{color:#c70023}.qd-form-disabled :host{color:#979797}:host.viewonly{color:#757575;font-size:.875rem;font-weight:500;line-height:1.3125rem;display:block;height:unset;margin-bottom:.25rem;line-height:1.25rem}:host .label-text{transform:translateY(.0625rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
8329
8349
|
}
|
|
8330
8350
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFormLabelComponent, decorators: [{
|
|
8331
8351
|
type: Component,
|
|
8332
|
-
args: [{ selector: 'qd-form-label', host: { class: 'qd-form-label' }, standalone: false, template: "<span class=\"label-text\">{{ label | translate }}</span>\n<span class=\"qd-form-label__required-indicator\" *ngIf=\"isIndicatorVisible\">*</span>\n<qd-icon
|
|
8352
|
+
args: [{ selector: 'qd-form-label', host: { class: 'qd-form-label' }, standalone: false, template: "<span class=\"label-text\">{{ label | translate }}</span>\n<span class=\"qd-form-label__required-indicator\" *ngIf=\"isIndicatorVisible\">*</span>\n<qd-tooltip-icon [tooltip]=\"tooltip\"></qd-tooltip-icon>\n", styles: [":host{display:flex;height:.875rem;align-items:center;margin-bottom:.25rem;color:#171717;font-size:.75rem;font-weight:500;line-height:.875rem}@media (max-width: 959.98px){:host.disabled{display:none}}.qd-form-error :host{color:#c70023}.qd-form-disabled :host{color:#979797}:host.viewonly{color:#757575;font-size:.875rem;font-weight:500;line-height:1.3125rem;display:block;height:unset;margin-bottom:.25rem;line-height:1.25rem}:host .label-text{transform:translateY(.0625rem)}\n"] }]
|
|
8333
8353
|
}], propDecorators: { label: [{
|
|
8334
8354
|
type: Input
|
|
8335
8355
|
}], isDisabled: [{
|
|
@@ -22527,9 +22547,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
22527
22547
|
const initTableState = createAction('[QdUi Table] Init Table', props());
|
|
22528
22548
|
const initTableStateSelectedRows = createAction('[QdUi Table] Init Selected Rows', props());
|
|
22529
22549
|
const updateTableStateData$1 = createAction('[QdUi Table] Update Table', props());
|
|
22530
|
-
const
|
|
22531
|
-
const
|
|
22532
|
-
const
|
|
22550
|
+
const selectRow$1 = createAction('[QdUi Table] Select Row', props());
|
|
22551
|
+
const selectSingleRow$1 = createAction('[QdUi Table] Select Single Row', props());
|
|
22552
|
+
const unselectRow$1 = createAction('[QdUi Table] Unselect Row', props());
|
|
22553
|
+
const clearAllSelectedRows$1 = createAction('[QdUi Table] Clear All Selected Rows', props());
|
|
22554
|
+
const refreshSelectedRowsData$1 = createAction('[QdUi Table] Refresh Selected Rows Data', props());
|
|
22533
22555
|
const updateTableStateRecentSecondaryAction$1 = createAction('[QdUi Table] Update Recent Secondary Action', props());
|
|
22534
22556
|
const setupPagination$1 = createAction('[QdUi Table] Init Pagination', props());
|
|
22535
22557
|
const setPage$1 = createAction('[QdUi Table] Set Page', props());
|
|
@@ -22548,9 +22570,11 @@ const QdTableActions = {
|
|
|
22548
22570
|
initTableState,
|
|
22549
22571
|
initTableStateSelectedRows,
|
|
22550
22572
|
updateTableStateData: updateTableStateData$1,
|
|
22551
|
-
|
|
22552
|
-
|
|
22553
|
-
|
|
22573
|
+
selectRow: selectRow$1,
|
|
22574
|
+
selectSingleRow: selectSingleRow$1,
|
|
22575
|
+
unselectRow: unselectRow$1,
|
|
22576
|
+
clearAllSelectedRows: clearAllSelectedRows$1,
|
|
22577
|
+
refreshSelectedRowsData: refreshSelectedRowsData$1,
|
|
22554
22578
|
updateTableStateRecentSecondaryAction: updateTableStateRecentSecondaryAction$1,
|
|
22555
22579
|
setupPagination: setupPagination$1,
|
|
22556
22580
|
setPage: setPage$1,
|
|
@@ -22600,6 +22624,8 @@ function resolveRowIdentifier(row, rowIndex, trackRowBy) {
|
|
|
22600
22624
|
return row.uid ?? rowIndex;
|
|
22601
22625
|
}
|
|
22602
22626
|
|
|
22627
|
+
const EMPTY_SELECTED_ROWS = Object.freeze([]);
|
|
22628
|
+
const EMPTY_SELECTED_ROWS_DATA = Object.freeze({});
|
|
22603
22629
|
class QdTableStoreSelectorService {
|
|
22604
22630
|
_tableId;
|
|
22605
22631
|
set tableId(tableId) {
|
|
@@ -22627,7 +22653,10 @@ class QdTableStoreSelectorService {
|
|
|
22627
22653
|
return createSelector(this.selectTables, tables => this.getTable(tables)?.data[rowIndex]);
|
|
22628
22654
|
}
|
|
22629
22655
|
selectedRows() {
|
|
22630
|
-
return createSelector(this.selectTables, tables => this.getTable(tables)?.selectedRows ??
|
|
22656
|
+
return createSelector(this.selectTables, tables => this.getTable(tables)?.selectedRows ?? EMPTY_SELECTED_ROWS);
|
|
22657
|
+
}
|
|
22658
|
+
selectedRowsData() {
|
|
22659
|
+
return createSelector(this.selectTables, tables => this.getTable(tables)?.selectedRowsData ?? EMPTY_SELECTED_ROWS_DATA);
|
|
22631
22660
|
}
|
|
22632
22661
|
isTableRowSelected(rowIndex, trackRowBy) {
|
|
22633
22662
|
return createSelector(this.selectTables, tables => {
|
|
@@ -22769,14 +22798,20 @@ class QdTableStoreService {
|
|
|
22769
22798
|
updateTableStateData(data) {
|
|
22770
22799
|
this.store.dispatch(QdTableActions.updateTableStateData({ tableId: this.tableId, data }));
|
|
22771
22800
|
}
|
|
22772
|
-
|
|
22773
|
-
this.store.dispatch(QdTableActions.
|
|
22801
|
+
selectRow(rowIdentifier, rowData) {
|
|
22802
|
+
this.store.dispatch(QdTableActions.selectRow({ tableId: this.tableId, rowIdentifier, rowData }));
|
|
22803
|
+
}
|
|
22804
|
+
selectSingleRow(rowIdentifier, rowData) {
|
|
22805
|
+
this.store.dispatch(QdTableActions.selectSingleRow({ tableId: this.tableId, rowIdentifier, rowData }));
|
|
22806
|
+
}
|
|
22807
|
+
unselectRow(rowIdentifier) {
|
|
22808
|
+
this.store.dispatch(QdTableActions.unselectRow({ tableId: this.tableId, rowIdentifier }));
|
|
22774
22809
|
}
|
|
22775
|
-
|
|
22776
|
-
this.store.dispatch(QdTableActions.
|
|
22810
|
+
clearAllSelectedRows() {
|
|
22811
|
+
this.store.dispatch(QdTableActions.clearAllSelectedRows({ tableId: this.tableId }));
|
|
22777
22812
|
}
|
|
22778
|
-
|
|
22779
|
-
this.store.dispatch(QdTableActions.
|
|
22813
|
+
refreshSelectedRowsData(visibleRowsData) {
|
|
22814
|
+
this.store.dispatch(QdTableActions.refreshSelectedRowsData({ tableId: this.tableId, visibleRowsData }));
|
|
22780
22815
|
}
|
|
22781
22816
|
updateTableStateRecentSecondaryAction(action) {
|
|
22782
22817
|
this.store.dispatch(QdTableActions.updateTableStateRecentSecondaryAction({ tableId: this.tableId, recentSecondaryAction: action }));
|
|
@@ -22834,6 +22869,9 @@ class QdTableStoreService {
|
|
|
22834
22869
|
.select(this.tableStoreSelectorService.selectedRows())
|
|
22835
22870
|
.pipe(filter(selectedRows => selectedRows !== undefined));
|
|
22836
22871
|
}
|
|
22872
|
+
selectedRowsData$() {
|
|
22873
|
+
return this.store.select(this.tableStoreSelectorService.selectedRowsData());
|
|
22874
|
+
}
|
|
22837
22875
|
isTableRowSelected$(rowIndex, trackRowBy) {
|
|
22838
22876
|
return this.store.select(this.tableStoreSelectorService.isTableRowSelected(rowIndex, trackRowBy));
|
|
22839
22877
|
}
|
|
@@ -23253,10 +23291,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
23253
23291
|
class QdTableRowSelectionService {
|
|
23254
23292
|
tableStoreService = inject(QdTableStoreService);
|
|
23255
23293
|
_config;
|
|
23256
|
-
|
|
23294
|
+
_visibleRowsSubscription;
|
|
23257
23295
|
set config(config) {
|
|
23258
23296
|
this._config = config;
|
|
23259
23297
|
this.tableStoreService.initTableStateSelectedRows(config.selection?.selectedRows || []);
|
|
23298
|
+
this._visibleRowsSubscription?.unsubscribe();
|
|
23299
|
+
this._visibleRowsSubscription = this.tableStoreService
|
|
23300
|
+
.tableDataEntries$()
|
|
23301
|
+
.subscribe(rows => this.refreshCacheForVisibleRows(rows));
|
|
23302
|
+
}
|
|
23303
|
+
ngOnDestroy() {
|
|
23304
|
+
this._visibleRowsSubscription?.unsubscribe();
|
|
23260
23305
|
}
|
|
23261
23306
|
get tableId() {
|
|
23262
23307
|
return this.tableStoreService.tableId;
|
|
@@ -23265,36 +23310,39 @@ class QdTableRowSelectionService {
|
|
|
23265
23310
|
return this._config.selection.type;
|
|
23266
23311
|
}
|
|
23267
23312
|
get selectedRows$() {
|
|
23268
|
-
|
|
23269
|
-
|
|
23270
|
-
|
|
23271
|
-
this.tableStoreService.selectedRows$().pipe(tap(selectedRows => {
|
|
23272
|
-
this._selectedRows = selectedRows;
|
|
23273
|
-
}))
|
|
23274
|
-
]).pipe(skip(this._config.selection?.emitOutputInitially ? 0 : 1), map(([tableData]) => (tableData || []).map(this.getIndexedRows).filter(isRowSelected)));
|
|
23275
|
-
}
|
|
23276
|
-
isRowSelected(row, index) {
|
|
23277
|
-
const identifier = resolveRowIdentifier(row, index, this._config.trackRowBy);
|
|
23278
|
-
return this._selectedRows.includes(identifier);
|
|
23279
|
-
}
|
|
23280
|
-
getIndexedRows(row, index) {
|
|
23281
|
-
return { ...row, index };
|
|
23313
|
+
return combineLatest([this.tableStoreService.selectedRows$(), this.tableStoreService.selectedRowsData$()]).pipe(auditTime(0), skip(this._config.selection?.emitOutputInitially ? 0 : 1), map(([ids, cache]) => ids
|
|
23314
|
+
.map(id => cache[id])
|
|
23315
|
+
.filter((row) => row !== undefined)));
|
|
23282
23316
|
}
|
|
23283
23317
|
isRowSelected$(rowIndex) {
|
|
23284
23318
|
return this.tableStoreService.isTableRowSelected$(rowIndex, this._config.trackRowBy);
|
|
23285
23319
|
}
|
|
23286
23320
|
setRowSelected(rowIndex, rowData) {
|
|
23287
23321
|
const identifier = resolveRowIdentifier(rowData, rowIndex, this._config.trackRowBy);
|
|
23322
|
+
const selectedRow = { ...rowData, index: rowIndex };
|
|
23288
23323
|
if (this._config.selection.type === 'singleSelect') {
|
|
23289
|
-
this.tableStoreService.
|
|
23324
|
+
this.tableStoreService.selectSingleRow(identifier, selectedRow);
|
|
23290
23325
|
}
|
|
23291
23326
|
else {
|
|
23292
|
-
this.tableStoreService.
|
|
23327
|
+
this.tableStoreService.selectRow(identifier, selectedRow);
|
|
23293
23328
|
}
|
|
23294
23329
|
}
|
|
23295
23330
|
setRowUnselected(rowIndex, rowData) {
|
|
23296
23331
|
const identifier = resolveRowIdentifier(rowData, rowIndex, this._config.trackRowBy);
|
|
23297
|
-
this.tableStoreService.
|
|
23332
|
+
this.tableStoreService.unselectRow(identifier);
|
|
23333
|
+
}
|
|
23334
|
+
clearAll() {
|
|
23335
|
+
this.tableStoreService.clearAllSelectedRows();
|
|
23336
|
+
}
|
|
23337
|
+
refreshCacheForVisibleRows(rows) {
|
|
23338
|
+
if (!rows?.length)
|
|
23339
|
+
return;
|
|
23340
|
+
const visibleRowsData = rows.reduce((acc, row, index) => {
|
|
23341
|
+
const id = resolveRowIdentifier(row, index, this._config.trackRowBy);
|
|
23342
|
+
acc[id] = { ...row, index };
|
|
23343
|
+
return acc;
|
|
23344
|
+
}, {});
|
|
23345
|
+
this.tableStoreService.refreshSelectedRowsData(visibleRowsData);
|
|
23298
23346
|
}
|
|
23299
23347
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
23300
23348
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowSelectionService });
|
|
@@ -23570,6 +23618,7 @@ class QdTablePaginatorComponent {
|
|
|
23570
23618
|
currentPage$;
|
|
23571
23619
|
pageSize$;
|
|
23572
23620
|
totalCount$;
|
|
23621
|
+
selectedRowsCount$;
|
|
23573
23622
|
pageNav = QdPaginatorDirection;
|
|
23574
23623
|
_destroyed$ = new Subject();
|
|
23575
23624
|
get pageSizes() {
|
|
@@ -23587,6 +23636,7 @@ class QdTablePaginatorComponent {
|
|
|
23587
23636
|
this.currentPage$ = this.tableStoreService.pageInfo$();
|
|
23588
23637
|
this.pageSize$ = this.tableStoreService.pageSize$();
|
|
23589
23638
|
this.totalCount$ = this.tableStoreService.totalCount$();
|
|
23639
|
+
this.selectedRowsCount$ = this.tableStoreService.selectedRows$().pipe(map(ids => ids?.length ?? 0));
|
|
23590
23640
|
if (this.isConfigValid())
|
|
23591
23641
|
this.initPagination();
|
|
23592
23642
|
}
|
|
@@ -23641,11 +23691,11 @@ class QdTablePaginatorComponent {
|
|
|
23641
23691
|
}
|
|
23642
23692
|
}
|
|
23643
23693
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTablePaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23644
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTablePaginatorComponent, isStandalone: false, selector: "qd-table-paginator", inputs: { config: "config", testId: ["data-test-id", "testId"] }, viewQueries: [{ propertyName: "paginatorButtons", first: true, predicate: ["paginatorButtons"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"hasData$ | async\">\n <qd-table-paginator-page-size [pageSizes]=\"pageSizes\" *ngIf=\"pageSizes.length > 0\"></qd-table-paginator-page-size>\n <span class=\"paginator-current-page\" *ngIf=\"currentPage$ | async as page\">\n {{ page.start }}\u2014{{ page.end }}\n {{ \"i18n.qd.table.pagination.of\" | translate }}\n {{ page.totalCount }}\n {{\n page.totalCount === 1\n ? (\"i18n.qd.table.pagination.entry\" | translate)\n : (\"i18n.qd.table.pagination.entries\" | translate)\n }}\n </span>\n <span class=\"paginator-buttons\" data-test=\"paginator-buttons\" #paginatorButtons qdScrollToPagination>\n <button\n *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n class=\"paginator-button\"\n [attr.data-test-id]=\"testId + '-paginator-first-page'\"\n (click)=\"navigateToPage(pageNav.FirstPage)\"\n [disabled]=\"(canPageBackward$ | async) === false\"\n >\n <qd-icon [icon]=\"'pageFirst1'\"></qd-icon>\n </button>\n <button\n class=\"paginator-button\"\n [attr.data-test-id]=\"testId + '-paginator-backward'\"\n (click)=\"navigateToPage(pageNav.PreviousPage)\"\n [disabled]=\"(canPageBackward$ | async) === false\"\n >\n <qd-icon [icon]=\"'triangleLeftSolid'\"></qd-icon>\n </button>\n <button\n class=\"paginator-button forward\"\n [attr.data-test-id]=\"testId + '-paginator-forward'\"\n (click)=\"navigateToPage(pageNav.NextPage)\"\n [disabled]=\"(canPageForward$ | async) === false\"\n >\n <qd-icon [icon]=\"'triangleRightSolid'\"></qd-icon>\n </button>\n <button\n *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n class=\"paginator-button\"\n [attr.data-test-id]=\"testId + '-paginator-last-page'\"\n (click)=\"navigateToPage(pageNav.LastPage)\"\n [disabled]=\"(canPageForward$ | async) === false\"\n >\n <qd-icon [icon]=\"'pageLast'\"></qd-icon>\n </button>\n </span>\n</ng-container>\n", styles: [":host{color:#454545;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:#fff}.paginator-current-page{margin-left:1rem}.paginator-buttons{margin-left:auto;text-align:right;white-space:nowrap}button.paginator-button{width:2.75rem;height:2.75rem;border-left:.0625rem solid rgb(229,229,229);background-color:unset;color:#454545;font-size:1.5rem}button.paginator-button:disabled{color:#b4b4b4;cursor:default}button.paginator-button:not(:disabled):hover{background-color:#e5e5e5;color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdScrollToPaginationDirective, selector: "[qdScrollToPagination]" }, { kind: "component", type: QdTablePaginatorPageSizeComponent, selector: "qd-table-paginator-page-size", inputs: ["pageSizes"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
23694
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTablePaginatorComponent, isStandalone: false, selector: "qd-table-paginator", inputs: { config: "config", testId: ["data-test-id", "testId"] }, viewQueries: [{ propertyName: "paginatorButtons", first: true, predicate: ["paginatorButtons"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"hasData$ | async\">\n <qd-table-paginator-page-size [pageSizes]=\"pageSizes\" *ngIf=\"pageSizes.length > 0\"></qd-table-paginator-page-size>\n <span class=\"paginator-current-page\" *ngIf=\"currentPage$ | async as page\">\n {{ page.start }}\u2014{{ page.end }}\n {{ \"i18n.qd.table.pagination.of\" | translate }}\n {{ page.totalCount }}\n {{\n page.totalCount === 1\n ? (\"i18n.qd.table.pagination.entry\" | translate)\n : (\"i18n.qd.table.pagination.entries\" | translate)\n }}\n </span>\n <span\n *ngIf=\"{ count: (selectedRowsCount$ | async) ?? 0 } as ctx\"\n [hidden]=\"ctx.count === 0 || config?.selection?.type !== 'multiSelect'\"\n class=\"paginator-selection-count\"\n [attr.data-test-id]=\"testId + '-paginator-selection-count'\"\n >\n {{\n ctx.count === 1\n ? (\"i18n.qd.table.pagination.selectedSingular\" | translate)\n : (\"i18n.qd.table.pagination.selectedPlural\" | translate : { count: ctx.count })\n }}\n </span>\n <span class=\"paginator-buttons\" data-test=\"paginator-buttons\" #paginatorButtons qdScrollToPagination>\n <button\n *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n class=\"paginator-button\"\n [attr.data-test-id]=\"testId + '-paginator-first-page'\"\n (click)=\"navigateToPage(pageNav.FirstPage)\"\n [disabled]=\"(canPageBackward$ | async) === false\"\n >\n <qd-icon [icon]=\"'pageFirst1'\"></qd-icon>\n </button>\n <button\n class=\"paginator-button\"\n [attr.data-test-id]=\"testId + '-paginator-backward'\"\n (click)=\"navigateToPage(pageNav.PreviousPage)\"\n [disabled]=\"(canPageBackward$ | async) === false\"\n >\n <qd-icon [icon]=\"'triangleLeftSolid'\"></qd-icon>\n </button>\n <button\n class=\"paginator-button forward\"\n [attr.data-test-id]=\"testId + '-paginator-forward'\"\n (click)=\"navigateToPage(pageNav.NextPage)\"\n [disabled]=\"(canPageForward$ | async) === false\"\n >\n <qd-icon [icon]=\"'triangleRightSolid'\"></qd-icon>\n </button>\n <button\n *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n class=\"paginator-button\"\n [attr.data-test-id]=\"testId + '-paginator-last-page'\"\n (click)=\"navigateToPage(pageNav.LastPage)\"\n [disabled]=\"(canPageForward$ | async) === false\"\n >\n <qd-icon [icon]=\"'pageLast'\"></qd-icon>\n </button>\n </span>\n</ng-container>\n", styles: [":host{color:#454545;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:#fff}.paginator-current-page{margin-left:1rem}.paginator-selection-count{margin-right:1rem;margin-left:1rem}.paginator-buttons{margin-left:auto;text-align:right;white-space:nowrap}button.paginator-button{width:2.75rem;height:2.75rem;border-left:.0625rem solid rgb(229,229,229);background-color:unset;color:#454545;font-size:1.5rem}button.paginator-button:disabled{color:#b4b4b4;cursor:default}button.paginator-button:not(:disabled):hover{background-color:#e5e5e5;color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdScrollToPaginationDirective, selector: "[qdScrollToPagination]" }, { kind: "component", type: QdTablePaginatorPageSizeComponent, selector: "qd-table-paginator-page-size", inputs: ["pageSizes"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
23645
23695
|
}
|
|
23646
23696
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTablePaginatorComponent, decorators: [{
|
|
23647
23697
|
type: Component,
|
|
23648
|
-
args: [{ selector: 'qd-table-paginator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"hasData$ | async\">\n <qd-table-paginator-page-size [pageSizes]=\"pageSizes\" *ngIf=\"pageSizes.length > 0\"></qd-table-paginator-page-size>\n <span class=\"paginator-current-page\" *ngIf=\"currentPage$ | async as page\">\n {{ page.start }}\u2014{{ page.end }}\n {{ \"i18n.qd.table.pagination.of\" | translate }}\n {{ page.totalCount }}\n {{\n page.totalCount === 1\n ? (\"i18n.qd.table.pagination.entry\" | translate)\n : (\"i18n.qd.table.pagination.entries\" | translate)\n }}\n </span>\n <span class=\"paginator-buttons\" data-test=\"paginator-buttons\" #paginatorButtons qdScrollToPagination>\n <button\n *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n class=\"paginator-button\"\n [attr.data-test-id]=\"testId + '-paginator-first-page'\"\n (click)=\"navigateToPage(pageNav.FirstPage)\"\n [disabled]=\"(canPageBackward$ | async) === false\"\n >\n <qd-icon [icon]=\"'pageFirst1'\"></qd-icon>\n </button>\n <button\n class=\"paginator-button\"\n [attr.data-test-id]=\"testId + '-paginator-backward'\"\n (click)=\"navigateToPage(pageNav.PreviousPage)\"\n [disabled]=\"(canPageBackward$ | async) === false\"\n >\n <qd-icon [icon]=\"'triangleLeftSolid'\"></qd-icon>\n </button>\n <button\n class=\"paginator-button forward\"\n [attr.data-test-id]=\"testId + '-paginator-forward'\"\n (click)=\"navigateToPage(pageNav.NextPage)\"\n [disabled]=\"(canPageForward$ | async) === false\"\n >\n <qd-icon [icon]=\"'triangleRightSolid'\"></qd-icon>\n </button>\n <button\n *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n class=\"paginator-button\"\n [attr.data-test-id]=\"testId + '-paginator-last-page'\"\n (click)=\"navigateToPage(pageNav.LastPage)\"\n [disabled]=\"(canPageForward$ | async) === false\"\n >\n <qd-icon [icon]=\"'pageLast'\"></qd-icon>\n </button>\n </span>\n</ng-container>\n", styles: [":host{color:#454545;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:#fff}.paginator-current-page{margin-left:1rem}.paginator-buttons{margin-left:auto;text-align:right;white-space:nowrap}button.paginator-button{width:2.75rem;height:2.75rem;border-left:.0625rem solid rgb(229,229,229);background-color:unset;color:#454545;font-size:1.5rem}button.paginator-button:disabled{color:#b4b4b4;cursor:default}button.paginator-button:not(:disabled):hover{background-color:#e5e5e5;color:#171717}\n"] }]
|
|
23698
|
+
args: [{ selector: 'qd-table-paginator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"hasData$ | async\">\n <qd-table-paginator-page-size [pageSizes]=\"pageSizes\" *ngIf=\"pageSizes.length > 0\"></qd-table-paginator-page-size>\n <span class=\"paginator-current-page\" *ngIf=\"currentPage$ | async as page\">\n {{ page.start }}\u2014{{ page.end }}\n {{ \"i18n.qd.table.pagination.of\" | translate }}\n {{ page.totalCount }}\n {{\n page.totalCount === 1\n ? (\"i18n.qd.table.pagination.entry\" | translate)\n : (\"i18n.qd.table.pagination.entries\" | translate)\n }}\n </span>\n <span\n *ngIf=\"{ count: (selectedRowsCount$ | async) ?? 0 } as ctx\"\n [hidden]=\"ctx.count === 0 || config?.selection?.type !== 'multiSelect'\"\n class=\"paginator-selection-count\"\n [attr.data-test-id]=\"testId + '-paginator-selection-count'\"\n >\n {{\n ctx.count === 1\n ? (\"i18n.qd.table.pagination.selectedSingular\" | translate)\n : (\"i18n.qd.table.pagination.selectedPlural\" | translate : { count: ctx.count })\n }}\n </span>\n <span class=\"paginator-buttons\" data-test=\"paginator-buttons\" #paginatorButtons qdScrollToPagination>\n <button\n *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n class=\"paginator-button\"\n [attr.data-test-id]=\"testId + '-paginator-first-page'\"\n (click)=\"navigateToPage(pageNav.FirstPage)\"\n [disabled]=\"(canPageBackward$ | async) === false\"\n >\n <qd-icon [icon]=\"'pageFirst1'\"></qd-icon>\n </button>\n <button\n class=\"paginator-button\"\n [attr.data-test-id]=\"testId + '-paginator-backward'\"\n (click)=\"navigateToPage(pageNav.PreviousPage)\"\n [disabled]=\"(canPageBackward$ | async) === false\"\n >\n <qd-icon [icon]=\"'triangleLeftSolid'\"></qd-icon>\n </button>\n <button\n class=\"paginator-button forward\"\n [attr.data-test-id]=\"testId + '-paginator-forward'\"\n (click)=\"navigateToPage(pageNav.NextPage)\"\n [disabled]=\"(canPageForward$ | async) === false\"\n >\n <qd-icon [icon]=\"'triangleRightSolid'\"></qd-icon>\n </button>\n <button\n *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n class=\"paginator-button\"\n [attr.data-test-id]=\"testId + '-paginator-last-page'\"\n (click)=\"navigateToPage(pageNav.LastPage)\"\n [disabled]=\"(canPageForward$ | async) === false\"\n >\n <qd-icon [icon]=\"'pageLast'\"></qd-icon>\n </button>\n </span>\n</ng-container>\n", styles: [":host{color:#454545;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:#fff}.paginator-current-page{margin-left:1rem}.paginator-selection-count{margin-right:1rem;margin-left:1rem}.paginator-buttons{margin-left:auto;text-align:right;white-space:nowrap}button.paginator-button{width:2.75rem;height:2.75rem;border-left:.0625rem solid rgb(229,229,229);background-color:unset;color:#454545;font-size:1.5rem}button.paginator-button:disabled{color:#b4b4b4;cursor:default}button.paginator-button:not(:disabled):hover{background-color:#e5e5e5;color:#171717}\n"] }]
|
|
23649
23699
|
}], propDecorators: { config: [{
|
|
23650
23700
|
type: Input
|
|
23651
23701
|
}], testId: [{
|
|
@@ -23849,12 +23899,15 @@ class QdTableRowComponent {
|
|
|
23849
23899
|
findColumnType(item) {
|
|
23850
23900
|
return this.config.columns.find(column => column.column === item)?.type || 'blank';
|
|
23851
23901
|
}
|
|
23902
|
+
getTooltip(item) {
|
|
23903
|
+
return this.config.columns.find(column => column.column === item)?.tooltip;
|
|
23904
|
+
}
|
|
23852
23905
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23853
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowComponent, isStandalone: false, selector: "[qd-table-row]", inputs: { config: "config", rowData: "rowData", rowIndex: "rowIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.hostTestId" } }, providers: [QdDataFacetsContextService], ngImport: i0, template: "<td\n qd-table-row-selection\n *ngIf=\"config.selection\"\n class=\"qd-table__body-cell--selection\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n <td\n *ngIf=\"hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-merged'\"\n >\n <div *ngFor=\"let item of item; let first = first\">\n <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n <span class=\"qd-table__body-cell\">\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </span>\n </div>\n </td>\n\n <td\n *ngIf=\"!hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-' + item\"\n >\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </td>\n</ng-container>\n\n<td\n *ngIf=\"config.secondaryActions?.length > 0\"\n qd-table-row-actions-secondary-menu\n class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [i18ns]=\"config.i18ns\"\n [testId]=\"testId + '-secondary-actions'\"\n [viewonly]=\"config.viewonly\"\n [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n <span class=\"qd-table__body-cell--merged-headings\">\n {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n </span>\n </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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: QdTableRowActionsSecondaryMenuComponent, selector: "[qd-table-row-actions-secondary-menu]", inputs: ["rowIndex", "rowData", "i18ns", "testId", "viewonly"] }, { kind: "component", type: QdTableRowSelectionComponent, selector: "[qd-table-row-selection]", inputs: ["rowIndex", "rowData", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
23906
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowComponent, isStandalone: false, selector: "[qd-table-row]", inputs: { config: "config", rowData: "rowData", rowIndex: "rowIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.hostTestId" } }, providers: [QdDataFacetsContextService], ngImport: i0, template: "<td\n qd-table-row-selection\n *ngIf=\"config.selection\"\n class=\"qd-table__body-cell--selection\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n <td\n *ngIf=\"hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-merged'\"\n >\n <div *ngFor=\"let item of item; let first = first\">\n <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n <span class=\"qd-table__body-cell\">\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </span>\n </div>\n </td>\n\n <td\n *ngIf=\"!hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-' + item\"\n >\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </td>\n</ng-container>\n\n<td\n *ngIf=\"config.secondaryActions?.length > 0\"\n qd-table-row-actions-secondary-menu\n class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [i18ns]=\"config.i18ns\"\n [testId]=\"testId + '-secondary-actions'\"\n [viewonly]=\"config.viewonly\"\n [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n <span class=\"qd-table__body-cell--merged-headings\">\n {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n <qd-tooltip-icon [tooltip]=\"getTooltip(item)\"></qd-tooltip-icon>\n </span>\n </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "component", type: QdTableRowActionsSecondaryMenuComponent, selector: "[qd-table-row-actions-secondary-menu]", inputs: ["rowIndex", "rowData", "i18ns", "testId", "viewonly"] }, { kind: "component", type: QdTableRowSelectionComponent, selector: "[qd-table-row-selection]", inputs: ["rowIndex", "rowData", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
23854
23907
|
}
|
|
23855
23908
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowComponent, decorators: [{
|
|
23856
23909
|
type: Component,
|
|
23857
|
-
args: [{ selector: '[qd-table-row]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [QdDataFacetsContextService], standalone: false, template: "<td\n qd-table-row-selection\n *ngIf=\"config.selection\"\n class=\"qd-table__body-cell--selection\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n <td\n *ngIf=\"hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-merged'\"\n >\n <div *ngFor=\"let item of item; let first = first\">\n <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n <span class=\"qd-table__body-cell\">\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </span>\n </div>\n </td>\n\n <td\n *ngIf=\"!hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-' + item\"\n >\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </td>\n</ng-container>\n\n<td\n *ngIf=\"config.secondaryActions?.length > 0\"\n qd-table-row-actions-secondary-menu\n class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [i18ns]=\"config.i18ns\"\n [testId]=\"testId + '-secondary-actions'\"\n [viewonly]=\"config.viewonly\"\n [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n <span class=\"qd-table__body-cell--merged-headings\">\n {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n </span>\n </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"] }]
|
|
23910
|
+
args: [{ selector: '[qd-table-row]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [QdDataFacetsContextService], standalone: false, template: "<td\n qd-table-row-selection\n *ngIf=\"config.selection\"\n class=\"qd-table__body-cell--selection\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n <td\n *ngIf=\"hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-merged'\"\n >\n <div *ngFor=\"let item of item; let first = first\">\n <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n <span class=\"qd-table__body-cell\">\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </span>\n </div>\n </td>\n\n <td\n *ngIf=\"!hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-' + item\"\n >\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </td>\n</ng-container>\n\n<td\n *ngIf=\"config.secondaryActions?.length > 0\"\n qd-table-row-actions-secondary-menu\n class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [i18ns]=\"config.i18ns\"\n [testId]=\"testId + '-secondary-actions'\"\n [viewonly]=\"config.viewonly\"\n [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n <span class=\"qd-table__body-cell--merged-headings\">\n {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n <qd-tooltip-icon [tooltip]=\"getTooltip(item)\"></qd-tooltip-icon>\n </span>\n </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"] }]
|
|
23858
23911
|
}], propDecorators: { config: [{
|
|
23859
23912
|
type: Input
|
|
23860
23913
|
}], rowData: [{
|
|
@@ -23862,6 +23915,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
23862
23915
|
}], rowIndex: [{
|
|
23863
23916
|
type: Input
|
|
23864
23917
|
}], testId: [{
|
|
23918
|
+
type: HostBinding,
|
|
23919
|
+
args: ['attr.data-test-id']
|
|
23920
|
+
}, {
|
|
23865
23921
|
type: Input,
|
|
23866
23922
|
args: ['data-test-id']
|
|
23867
23923
|
}], hostTestId: [{
|
|
@@ -23878,6 +23934,7 @@ class QdTableBodyComponent {
|
|
|
23878
23934
|
testId;
|
|
23879
23935
|
isLoading$;
|
|
23880
23936
|
highlightedRowIdentifier;
|
|
23937
|
+
trackByRowIdentifier = (rowIndex, rowData) => resolveRowIdentifier(rowData, rowIndex, this.config.trackRowBy);
|
|
23881
23938
|
_primaryActionRefreshSubscription;
|
|
23882
23939
|
constructor() {
|
|
23883
23940
|
this.isLoading$ = this.tableStoreService.selectIsLoading$().pipe(debounceTime$1(400));
|
|
@@ -23925,11 +23982,11 @@ class QdTableBodyComponent {
|
|
|
23925
23982
|
this.resolverService.refresh(pageIndex !== undefined ? { pageIndex } : undefined);
|
|
23926
23983
|
}
|
|
23927
23984
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23928
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableBodyComponent, isStandalone: false, selector: "[qd-table-body]", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-table__body qd-table__body--plain" }, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex\">\n <tr\n qd-table-row\n [rowData]=\"rowData\"\n [rowIndex]=\"rowIndex\"\n [config]=\"config\"\n [class]=\"'qd-table__body-row'\"\n [data-test-id]=\"testId + '-row-' + rowIndex\"\n (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n [class.hasAction]=\"config.primaryAction\"\n [class.qd-table__body-row--last-visited]=\"isLastVisitedRow(rowData, rowIndex)\"\n ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.qd-table__body--plain tr.qd-table__body-row--last-visited{animation:last-visited-fade 1.5s linear forwards}@keyframes last-visited-fade{0%,33%{background-color:#c3e8cd}to{background-color:transparent}}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\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: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "component", type: QdTableRowComponent, selector: "[qd-table-row]", inputs: ["config", "rowData", "rowIndex", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
23985
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableBodyComponent, isStandalone: false, selector: "[qd-table-body]", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-table__body qd-table__body--plain" }, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex; trackBy: trackByRowIdentifier\">\n <tr\n qd-table-row\n [rowData]=\"rowData\"\n [rowIndex]=\"rowIndex\"\n [config]=\"config\"\n [class]=\"'qd-table__body-row'\"\n [data-test-id]=\"testId + '-row-' + rowIndex\"\n (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n [class.hasAction]=\"config.primaryAction\"\n [class.qd-table__body-row--last-visited]=\"isLastVisitedRow(rowData, rowIndex)\"\n ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.qd-table__body--plain tr.qd-table__body-row--last-visited{animation:last-visited-fade 1.5s linear forwards}@keyframes last-visited-fade{0%,33%{background-color:#c3e8cd}to{background-color:transparent}}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\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: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "component", type: QdTableRowComponent, selector: "[qd-table-row]", inputs: ["config", "rowData", "rowIndex", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
23929
23986
|
}
|
|
23930
23987
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableBodyComponent, decorators: [{
|
|
23931
23988
|
type: Component,
|
|
23932
|
-
args: [{ selector: '[qd-table-body]', host: { class: 'qd-table__body qd-table__body--plain' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex\">\n <tr\n qd-table-row\n [rowData]=\"rowData\"\n [rowIndex]=\"rowIndex\"\n [config]=\"config\"\n [class]=\"'qd-table__body-row'\"\n [data-test-id]=\"testId + '-row-' + rowIndex\"\n (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n [class.hasAction]=\"config.primaryAction\"\n [class.qd-table__body-row--last-visited]=\"isLastVisitedRow(rowData, rowIndex)\"\n ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.qd-table__body--plain tr.qd-table__body-row--last-visited{animation:last-visited-fade 1.5s linear forwards}@keyframes last-visited-fade{0%,33%{background-color:#c3e8cd}to{background-color:transparent}}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"] }]
|
|
23989
|
+
args: [{ selector: '[qd-table-body]', host: { class: 'qd-table__body qd-table__body--plain' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex; trackBy: trackByRowIdentifier\">\n <tr\n qd-table-row\n [rowData]=\"rowData\"\n [rowIndex]=\"rowIndex\"\n [config]=\"config\"\n [class]=\"'qd-table__body-row'\"\n [data-test-id]=\"testId + '-row-' + rowIndex\"\n (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n [class.hasAction]=\"config.primaryAction\"\n [class.qd-table__body-row--last-visited]=\"isLastVisitedRow(rowData, rowIndex)\"\n ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.qd-table__body--plain tr.qd-table__body-row--last-visited{animation:last-visited-fade 1.5s linear forwards}@keyframes last-visited-fade{0%,33%{background-color:#c3e8cd}to{background-color:transparent}}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"] }]
|
|
23933
23990
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
23934
23991
|
type: Input
|
|
23935
23992
|
}], data: [{
|
|
@@ -24126,12 +24183,15 @@ class QdTableHeadComponent {
|
|
|
24126
24183
|
getSortConfig(columnName) {
|
|
24127
24184
|
return this.config.columns.find(column => column.column === columnName).sort;
|
|
24128
24185
|
}
|
|
24186
|
+
getTooltip(columnName) {
|
|
24187
|
+
return this.config.columns.find(column => column.column === columnName)?.tooltip;
|
|
24188
|
+
}
|
|
24129
24189
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24130
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableHeadComponent, isStandalone: false, selector: "[qd-table-head]", inputs: { config: "config", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" }, classAttribute: "qd-table__head" }, ngImport: i0, template: "<th\n *ngIf=\"this.config.selection\"\n class=\"qd-table__head-cell qd-table__head-cell--selection\"\n scope=\"col\"\n [attr.data-test-id]=\"testId + '-header-selection'\"\n></th>\n\n<ng-container *ngFor=\"let head of headData; let i = index; let l = last\">\n <th\n *ngIf=\"isHeadRendered$(i) | async\"\n [ngClass]=\"{\n 'qd-table__head-cell': true,\n 'main-column': isMainColumn(head),\n 'last-column': isLastColumn(head)\n }\"\n scope=\"col\"\n [attr.data-test-id]=\"testId + '-header-' + head\"\n >\n <qd-table-sort\n [isSortable]=\"getSortableByColumn(head)\"\n [config]=\"getSortConfig(head)\"\n [column]=\"head\"\n [data-test-id]=\"testId + '-sort'\"\n >\n <ng-container *ngIf=\"translations\">\n {{ getI18n(head) | translate }}\n </ng-container>\n\n <ng-container *ngIf=\"!translations\">\n {{ capitalize(head) }}\n </ng-container>\n </qd-table-sort>\n </th>\n</ng-container>\n\n<th\n *ngIf=\"config.secondaryActions?.length > 0\"\n class=\"qd-table__head-cell qd-table__head-cell--secondaryActions\"\n scope=\"col\"\n [attr.data-test-id]=\"testId + '-header-secondary-actions'\"\n></th>\n", styles: [":host .qd-table__head-cell{white-space:nowrap}:host .qd-table__head-cell--filling-width{width:100%}\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: QdTableSortComponent, selector: "qd-table-sort", inputs: ["isSortable", "config", "column", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24190
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableHeadComponent, isStandalone: false, selector: "[qd-table-head]", inputs: { config: "config", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" }, classAttribute: "qd-table__head" }, ngImport: i0, template: "<th\n *ngIf=\"this.config.selection\"\n class=\"qd-table__head-cell qd-table__head-cell--selection\"\n scope=\"col\"\n [attr.data-test-id]=\"testId + '-header-selection'\"\n></th>\n\n<ng-container *ngFor=\"let head of headData; let i = index; let l = last\">\n <th\n *ngIf=\"isHeadRendered$(i) | async\"\n [ngClass]=\"{\n 'qd-table__head-cell': true,\n 'main-column': isMainColumn(head),\n 'last-column': isLastColumn(head)\n }\"\n scope=\"col\"\n [attr.data-test-id]=\"testId + '-header-' + head\"\n >\n <qd-table-sort\n [isSortable]=\"getSortableByColumn(head)\"\n [config]=\"getSortConfig(head)\"\n [column]=\"head\"\n [data-test-id]=\"testId + '-sort'\"\n >\n <ng-container *ngIf=\"translations\">\n {{ getI18n(head) | translate }}\n </ng-container>\n\n <ng-container *ngIf=\"!translations\">\n {{ capitalize(head) }}\n </ng-container>\n\n <qd-tooltip-icon [tooltip]=\"getTooltip(head)\"></qd-tooltip-icon>\n </qd-table-sort>\n </th>\n</ng-container>\n\n<th\n *ngIf=\"config.secondaryActions?.length > 0\"\n class=\"qd-table__head-cell qd-table__head-cell--secondaryActions\"\n scope=\"col\"\n [attr.data-test-id]=\"testId + '-header-secondary-actions'\"\n></th>\n", styles: [":host .qd-table__head-cell{white-space:nowrap}:host .qd-table__head-cell--filling-width{width:100%}\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: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "component", type: QdTableSortComponent, selector: "qd-table-sort", inputs: ["isSortable", "config", "column", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24131
24191
|
}
|
|
24132
24192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableHeadComponent, decorators: [{
|
|
24133
24193
|
type: Component,
|
|
24134
|
-
args: [{ selector: '[qd-table-head]', host: { class: 'qd-table__head' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<th\n *ngIf=\"this.config.selection\"\n class=\"qd-table__head-cell qd-table__head-cell--selection\"\n scope=\"col\"\n [attr.data-test-id]=\"testId + '-header-selection'\"\n></th>\n\n<ng-container *ngFor=\"let head of headData; let i = index; let l = last\">\n <th\n *ngIf=\"isHeadRendered$(i) | async\"\n [ngClass]=\"{\n 'qd-table__head-cell': true,\n 'main-column': isMainColumn(head),\n 'last-column': isLastColumn(head)\n }\"\n scope=\"col\"\n [attr.data-test-id]=\"testId + '-header-' + head\"\n >\n <qd-table-sort\n [isSortable]=\"getSortableByColumn(head)\"\n [config]=\"getSortConfig(head)\"\n [column]=\"head\"\n [data-test-id]=\"testId + '-sort'\"\n >\n <ng-container *ngIf=\"translations\">\n {{ getI18n(head) | translate }}\n </ng-container>\n\n <ng-container *ngIf=\"!translations\">\n {{ capitalize(head) }}\n </ng-container>\n </qd-table-sort>\n </th>\n</ng-container>\n\n<th\n *ngIf=\"config.secondaryActions?.length > 0\"\n class=\"qd-table__head-cell qd-table__head-cell--secondaryActions\"\n scope=\"col\"\n [attr.data-test-id]=\"testId + '-header-secondary-actions'\"\n></th>\n", styles: [":host .qd-table__head-cell{white-space:nowrap}:host .qd-table__head-cell--filling-width{width:100%}\n"] }]
|
|
24194
|
+
args: [{ selector: '[qd-table-head]', host: { class: 'qd-table__head' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<th\n *ngIf=\"this.config.selection\"\n class=\"qd-table__head-cell qd-table__head-cell--selection\"\n scope=\"col\"\n [attr.data-test-id]=\"testId + '-header-selection'\"\n></th>\n\n<ng-container *ngFor=\"let head of headData; let i = index; let l = last\">\n <th\n *ngIf=\"isHeadRendered$(i) | async\"\n [ngClass]=\"{\n 'qd-table__head-cell': true,\n 'main-column': isMainColumn(head),\n 'last-column': isLastColumn(head)\n }\"\n scope=\"col\"\n [attr.data-test-id]=\"testId + '-header-' + head\"\n >\n <qd-table-sort\n [isSortable]=\"getSortableByColumn(head)\"\n [config]=\"getSortConfig(head)\"\n [column]=\"head\"\n [data-test-id]=\"testId + '-sort'\"\n >\n <ng-container *ngIf=\"translations\">\n {{ getI18n(head) | translate }}\n </ng-container>\n\n <ng-container *ngIf=\"!translations\">\n {{ capitalize(head) }}\n </ng-container>\n\n <qd-tooltip-icon [tooltip]=\"getTooltip(head)\"></qd-tooltip-icon>\n </qd-table-sort>\n </th>\n</ng-container>\n\n<th\n *ngIf=\"config.secondaryActions?.length > 0\"\n class=\"qd-table__head-cell qd-table__head-cell--secondaryActions\"\n scope=\"col\"\n [attr.data-test-id]=\"testId + '-header-secondary-actions'\"\n></th>\n", styles: [":host .qd-table__head-cell{white-space:nowrap}:host .qd-table__head-cell--filling-width{width:100%}\n"] }]
|
|
24135
24195
|
}], propDecorators: { config: [{
|
|
24136
24196
|
type: Input
|
|
24137
24197
|
}], testId: [{
|
|
@@ -24349,6 +24409,7 @@ class QdTableComponent {
|
|
|
24349
24409
|
_breakpointSubscription;
|
|
24350
24410
|
_pushEventsSubscription;
|
|
24351
24411
|
_refreshSubscription;
|
|
24412
|
+
_deselectAllSubscription;
|
|
24352
24413
|
_connectors = [];
|
|
24353
24414
|
get whichColumnFillsWidth() {
|
|
24354
24415
|
return this.fillingWidthService.whichColumnFillsWidth;
|
|
@@ -24360,6 +24421,8 @@ class QdTableComponent {
|
|
|
24360
24421
|
return this.config.hasPagination || !!this.config.pagination;
|
|
24361
24422
|
}
|
|
24362
24423
|
ngOnInit() {
|
|
24424
|
+
this.mapColumnFillsWidth();
|
|
24425
|
+
this.validateConfig();
|
|
24363
24426
|
this.tableStoreService.tableId = this.config.uid || v4();
|
|
24364
24427
|
this.tableStoreService.init();
|
|
24365
24428
|
this.tableStoreService.initTableState(this._data, this.hasResolver, this._connectors, this.hasPagination);
|
|
@@ -24367,8 +24430,6 @@ class QdTableComponent {
|
|
|
24367
24430
|
this.tableStoreService.setupSort(this.config.columns);
|
|
24368
24431
|
this.resolverService.init(this.config.refreshOnLanguageChange, this.hasPagination);
|
|
24369
24432
|
this.data$ = this.tableStoreService.tableDataEntries$();
|
|
24370
|
-
this.mapColumnFillsWidth();
|
|
24371
|
-
this.validateConfig();
|
|
24372
24433
|
this.initializeResponsiveRowService();
|
|
24373
24434
|
this.initializeFillingWidthService();
|
|
24374
24435
|
this.initializeEmptyStateService();
|
|
@@ -24406,6 +24467,7 @@ class QdTableComponent {
|
|
|
24406
24467
|
this._breakpointSubscription?.unsubscribe();
|
|
24407
24468
|
this._pushEventsSubscription?.unsubscribe();
|
|
24408
24469
|
this._refreshSubscription?.unsubscribe();
|
|
24470
|
+
this._deselectAllSubscription?.unsubscribe();
|
|
24409
24471
|
if (!this.config.uid || this.config.refreshOnPushEvent)
|
|
24410
24472
|
this.tableStoreService.deleteTableState();
|
|
24411
24473
|
}
|
|
@@ -24448,6 +24510,7 @@ class QdTableComponent {
|
|
|
24448
24510
|
this.selectedRowsOutput.emit(selectedRows);
|
|
24449
24511
|
this.config.selection?.handler?.(selectedRows);
|
|
24450
24512
|
});
|
|
24513
|
+
this._deselectAllSubscription = this.config.selection?.deselectAll$?.subscribe(() => this.rowSelectionService.clearAll());
|
|
24451
24514
|
}
|
|
24452
24515
|
initializeSecondaryActionsService() {
|
|
24453
24516
|
this.secondaryActionsService.configs = this.config.secondaryActions ?? [];
|
|
@@ -24532,6 +24595,11 @@ class QdTableComponent {
|
|
|
24532
24595
|
console.warn('QD-UI | QdTable - A uid has to be defined when highlightOnRevisit is enabled. ' +
|
|
24533
24596
|
'Without a uid, the table state does not persist across navigation.');
|
|
24534
24597
|
}
|
|
24598
|
+
if (this.config.selection?.type === 'multiSelect' && this.hasPagination && !this.config.trackRowBy) {
|
|
24599
|
+
throw new Error('QD-UI | QdTable - "trackRowBy" is required when combining "selection: multiSelect" with pagination. ' +
|
|
24600
|
+
'Provide a trackRowBy function (e.g. `trackRowBy: row => row.uid`) that returns a unique identifier ' +
|
|
24601
|
+
'per row, otherwise selections cannot be persisted across pages, page-size or sort changes.');
|
|
24602
|
+
}
|
|
24535
24603
|
}
|
|
24536
24604
|
hasHighlightOnRevisit() {
|
|
24537
24605
|
return (!!this.config.primaryAction?.highlightOnRevisit || !!this.config.secondaryActions?.some(a => a.highlightOnRevisit));
|
|
@@ -25428,6 +25496,59 @@ const updateStateWithNewTable = (state, tableId, newTable) => ({
|
|
|
25428
25496
|
});
|
|
25429
25497
|
const updateTableStateData = (state, tableId, data) => updateStateWithNewTable(state, tableId, { ...state[tableId], data });
|
|
25430
25498
|
const updateTableStateSelectedRows = (state, tableId, selectedRows) => updateStateWithNewTable(state, tableId, { ...state[tableId], selectedRows });
|
|
25499
|
+
const selectRow = (state, tableId, rowIdentifier, rowData) => updateStateWithNewTable(state, tableId, {
|
|
25500
|
+
...state[tableId],
|
|
25501
|
+
selectedRows: [...(state[tableId]?.selectedRows ?? []), rowIdentifier],
|
|
25502
|
+
selectedRowsData: {
|
|
25503
|
+
...(state[tableId]?.selectedRowsData ?? {}),
|
|
25504
|
+
[rowIdentifier]: rowData
|
|
25505
|
+
}
|
|
25506
|
+
});
|
|
25507
|
+
const selectSingleRow = (state, tableId, rowIdentifier, rowData) => updateStateWithNewTable(state, tableId, {
|
|
25508
|
+
...state[tableId],
|
|
25509
|
+
selectedRows: [rowIdentifier],
|
|
25510
|
+
selectedRowsData: { [rowIdentifier]: rowData }
|
|
25511
|
+
});
|
|
25512
|
+
const unselectRow = (state, tableId, rowIdentifier) => {
|
|
25513
|
+
const tableState = state[tableId];
|
|
25514
|
+
if (!tableState)
|
|
25515
|
+
return state;
|
|
25516
|
+
return updateStateWithNewTable(state, tableId, {
|
|
25517
|
+
...tableState,
|
|
25518
|
+
selectedRows: (tableState.selectedRows ?? []).filter(id => id !== rowIdentifier),
|
|
25519
|
+
selectedRowsData: omit(tableState.selectedRowsData ?? {}, String(rowIdentifier))
|
|
25520
|
+
});
|
|
25521
|
+
};
|
|
25522
|
+
const clearAllSelectedRows = (state, tableId) => updateStateWithNewTable(state, tableId, {
|
|
25523
|
+
...state[tableId],
|
|
25524
|
+
selectedRows: [],
|
|
25525
|
+
selectedRowsData: {}
|
|
25526
|
+
});
|
|
25527
|
+
const refreshSelectedRowsData = (state, tableId, visibleRowsData) => {
|
|
25528
|
+
const tableState = state[tableId];
|
|
25529
|
+
if (!tableState)
|
|
25530
|
+
return state;
|
|
25531
|
+
const selectedRows = tableState.selectedRows ?? [];
|
|
25532
|
+
const existing = tableState.selectedRowsData ?? {};
|
|
25533
|
+
const merged = { ...existing };
|
|
25534
|
+
let changed = false;
|
|
25535
|
+
for (const id of selectedRows) {
|
|
25536
|
+
const fresh = visibleRowsData[id];
|
|
25537
|
+
if (!fresh)
|
|
25538
|
+
continue;
|
|
25539
|
+
const cached = existing[id];
|
|
25540
|
+
if (!cached || JSON.stringify(cached) !== JSON.stringify(fresh)) {
|
|
25541
|
+
merged[id] = fresh;
|
|
25542
|
+
changed = true;
|
|
25543
|
+
}
|
|
25544
|
+
}
|
|
25545
|
+
if (!changed)
|
|
25546
|
+
return state;
|
|
25547
|
+
return updateStateWithNewTable(state, tableId, {
|
|
25548
|
+
...tableState,
|
|
25549
|
+
selectedRowsData: merged
|
|
25550
|
+
});
|
|
25551
|
+
};
|
|
25431
25552
|
const updateTableStateRecentSecondaryAction = (state, tableId, action) => updateStateWithNewTable(state, tableId, { ...state[tableId], recentSecondaryAction: action });
|
|
25432
25553
|
const setupPagination = (state, tableId, pageSize = PAGE_SIZE_DEFAULT) => {
|
|
25433
25554
|
return updateStateWithNewTable(state, tableId, {
|
|
@@ -25521,7 +25642,7 @@ const _tableReducer = createReducer(initialState, on(QdTableActions.initTableSta
|
|
|
25521
25642
|
return updateTableStateSelectedRows(state, tableId, selectedRows);
|
|
25522
25643
|
}),
|
|
25523
25644
|
// TODO: Remove QdTreeData references from table — Tree has been extracted into its own component
|
|
25524
|
-
on(QdTableActions.updateTableStateData, (state, { tableId, data }) => updateTableStateData(state, tableId, data)), on(QdTableActions.
|
|
25645
|
+
on(QdTableActions.updateTableStateData, (state, { tableId, data }) => updateTableStateData(state, tableId, data)), on(QdTableActions.selectRow, (state, { tableId, rowIdentifier, rowData }) => selectRow(state, tableId, rowIdentifier, rowData)), on(QdTableActions.selectSingleRow, (state, { tableId, rowIdentifier, rowData }) => selectSingleRow(state, tableId, rowIdentifier, rowData)), on(QdTableActions.unselectRow, (state, { tableId, rowIdentifier }) => unselectRow(state, tableId, rowIdentifier)), on(QdTableActions.clearAllSelectedRows, (state, { tableId }) => clearAllSelectedRows(state, tableId)), on(QdTableActions.refreshSelectedRowsData, (state, { tableId, visibleRowsData }) => refreshSelectedRowsData(state, tableId, visibleRowsData)), on(QdTableActions.updateTableStateRecentSecondaryAction, (state, { tableId, recentSecondaryAction: recentSecondaryAction }) => updateTableStateRecentSecondaryAction(state, tableId, recentSecondaryAction)), on(QdTableActions.setupPagination, (state, { tableId, pageSize }) => setupPagination(state, tableId, pageSize)), on(QdTableActions.setPage, (state, { tableId, pageIndex, pageSize, totalCount, data }) => setPage(state, tableId, pageIndex, pageSize, totalCount, data)), on(QdTableActions.setPageSize, (state, { tableId, pageSize }) => setPageSize(state, tableId, pageSize)), on(QdTableActions.setPageParams, (state, { tableId, pageIndex, pageSize, totalCount }) => setPageParams(state, tableId, pageIndex, pageSize, totalCount)), on(QdTableActions.setupSort, (state, { tableId, columns }) => setupSort(state, tableId, columns)), on(QdTableActions.setSort, (state, { tableId, column, direction }) => setSort(state, tableId, column, direction)), on(QdTableActions.updateSort, (state, { tableId, column, direction }) => updateSort(state, tableId, column, direction)), on(QdTableActions.setRequestState, (state, { tableId, requestState }) => setRequestState(state, tableId, requestState)), on(QdTableActions.connect, (state, { tableId, connectorName, connectorCriteria, connectorState }) => connect(state, tableId, connectorCriteria, connectorName, connectorState)), on(QdTableActions.resetConnectorStates, (state, { tableId }) => resetConnectorStates(state, tableId)), on(QdTableActions.setLastVisitedRow, (state, { tableId, rowIdentifier }) => setLastVisitedRow(state, tableId, rowIdentifier)), on(QdTableActions.clearLastVisitedRow, (state, { tableId }) => clearLastVisitedRow(state, tableId)), on(QdTableActions.deleteTableState, (state, { tableId }) => omit({ ...state }, tableId)));
|
|
25525
25646
|
function tableReducer(state, action) {
|
|
25526
25647
|
return _tableReducer(state, action);
|
|
25527
25648
|
}
|
|
@@ -26735,6 +26856,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
26735
26856
|
args: ['attr.class']
|
|
26736
26857
|
}] } });
|
|
26737
26858
|
|
|
26859
|
+
/**
|
|
26860
|
+
* @description Creates a replay-backed stream for pushing partial header-facet
|
|
26861
|
+
* updates into `QdPageConfig.metadata$`.
|
|
26862
|
+
*
|
|
26863
|
+
* The returned `ReplaySubject<Partial<T>>(1)` buffers the most recent emission
|
|
26864
|
+
* so late subscribers still receive the latest value. The page-header component
|
|
26865
|
+
* subscribes to `metadata$` inside its own `ngOnInit`, which runs AFTER the
|
|
26866
|
+
* consuming page component's `ngOnInit`. Consumers that emit synchronously
|
|
26867
|
+
* during their `ngOnInit` (e.g. from a `combineLatest` over already-populated
|
|
26868
|
+
* store selectors) would otherwise lose that first emission if `metadata$` were
|
|
26869
|
+
* a plain `Subject`.
|
|
26870
|
+
*
|
|
26871
|
+
* @example
|
|
26872
|
+
* ```ts
|
|
26873
|
+
* class MyPageComponent {
|
|
26874
|
+
* private metadataUpdates$ = createMetadataStream<MyObject>();
|
|
26875
|
+
*
|
|
26876
|
+
* pageConfig: QdPageConfig<MyObject> = {
|
|
26877
|
+
* // ...
|
|
26878
|
+
* metadata$: this.metadataUpdates$
|
|
26879
|
+
* };
|
|
26880
|
+
*
|
|
26881
|
+
* ngOnInit(): void {
|
|
26882
|
+
* combineLatest([this.state$, this.data$])
|
|
26883
|
+
* .pipe(map(([state, data]) => this.mapHeader(state, data)))
|
|
26884
|
+
* .subscribe(header => this.metadataUpdates$.next(header));
|
|
26885
|
+
* }
|
|
26886
|
+
* }
|
|
26887
|
+
* ```
|
|
26888
|
+
*/
|
|
26889
|
+
function createMetadataStream() {
|
|
26890
|
+
return new ReplaySubject(1);
|
|
26891
|
+
}
|
|
26892
|
+
|
|
26738
26893
|
/**
|
|
26739
26894
|
* Token for resolving page object data
|
|
26740
26895
|
*/
|
|
@@ -27564,6 +27719,9 @@ class QdPageObjectHeaderComponent {
|
|
|
27564
27719
|
_isLoadingSubject = new BehaviorSubject(false);
|
|
27565
27720
|
_customActionsSubject = new BehaviorSubject({ actions: [] });
|
|
27566
27721
|
_customActionsSub;
|
|
27722
|
+
_metadataSub;
|
|
27723
|
+
_pendingMetadata = {};
|
|
27724
|
+
_metadataStreamTypeWarned = false;
|
|
27567
27725
|
_destroyed$ = new Subject();
|
|
27568
27726
|
_availableContexts = 0;
|
|
27569
27727
|
pageObjectData$ = this._pageObjectDataSubject.asObservable();
|
|
@@ -27654,19 +27812,21 @@ class QdPageObjectHeaderComponent {
|
|
|
27654
27812
|
if (originalUpdateMetadata)
|
|
27655
27813
|
originalUpdateMetadata(props);
|
|
27656
27814
|
};
|
|
27657
|
-
this.setupResolverTrigger();
|
|
27658
27815
|
}
|
|
27659
27816
|
}
|
|
27660
27817
|
ngOnInit() {
|
|
27661
27818
|
if (this.pageObjectResolver)
|
|
27662
27819
|
this.setupResolverTrigger();
|
|
27663
27820
|
this.updateCustomActions();
|
|
27821
|
+
this.subscribeToMetadataStream();
|
|
27664
27822
|
this.formGroupManagerService.takeFormGroupsSnapshot();
|
|
27665
27823
|
this.initContexts();
|
|
27666
27824
|
}
|
|
27667
27825
|
ngOnChanges(changes) {
|
|
27668
|
-
if (changes['config'] && !changes['config'].firstChange)
|
|
27826
|
+
if (changes['config'] && !changes['config'].firstChange) {
|
|
27669
27827
|
this.updateCustomActions();
|
|
27828
|
+
this.subscribeToMetadataStream();
|
|
27829
|
+
}
|
|
27670
27830
|
}
|
|
27671
27831
|
ngOnDestroy() {
|
|
27672
27832
|
this.pageStoreService.toggleViewonly(false);
|
|
@@ -27674,8 +27834,8 @@ class QdPageObjectHeaderComponent {
|
|
|
27674
27834
|
this._destroyed$.complete();
|
|
27675
27835
|
}
|
|
27676
27836
|
updateMetadata(metadata) {
|
|
27677
|
-
|
|
27678
|
-
this._pageObjectDataSubject.next(
|
|
27837
|
+
this._pendingMetadata = { ...this._pendingMetadata, ...metadata };
|
|
27838
|
+
this._pageObjectDataSubject.next({ ...this._pageObjectDataSubject.value, ...metadata });
|
|
27679
27839
|
}
|
|
27680
27840
|
handleAction(facet) {
|
|
27681
27841
|
facet?.action?.handler();
|
|
@@ -27739,7 +27899,10 @@ class QdPageObjectHeaderComponent {
|
|
|
27739
27899
|
setupResolverTrigger() {
|
|
27740
27900
|
this.resolverTriggerService
|
|
27741
27901
|
.shouldTriggerResolver(this.pageObjectResolver.config?.triggerOn ?? 'pathParamsChange')
|
|
27742
|
-
.pipe(takeUntil(this._destroyed$), filter(shouldTrigger => shouldTrigger), tap(() => this._isLoadingSubject.next(true)), switchMap(() => this.pageObjectResolver.resolve()), tap(objectData =>
|
|
27902
|
+
.pipe(takeUntil(this._destroyed$), filter(shouldTrigger => shouldTrigger), tap(() => this._isLoadingSubject.next(true)), switchMap(() => this.pageObjectResolver.resolve()), tap(objectData => {
|
|
27903
|
+
this._pageObjectDataSubject.next({ ...objectData, ...this._pendingMetadata });
|
|
27904
|
+
this._pendingMetadata = {};
|
|
27905
|
+
}), tap(() => this._isLoadingSubject.next(false)), tap(() => this.formGroupManagerService.takeFormGroupsSnapshot()))
|
|
27743
27906
|
.subscribe();
|
|
27744
27907
|
}
|
|
27745
27908
|
initContexts() {
|
|
@@ -27771,6 +27934,26 @@ class QdPageObjectHeaderComponent {
|
|
|
27771
27934
|
}
|
|
27772
27935
|
this.subscribeToViewOnlyMode();
|
|
27773
27936
|
}
|
|
27937
|
+
subscribeToMetadataStream() {
|
|
27938
|
+
this._metadataSub?.unsubscribe();
|
|
27939
|
+
const metadata$ = this.config.metadata$;
|
|
27940
|
+
if (!metadata$)
|
|
27941
|
+
return;
|
|
27942
|
+
this.warnOnNonReplayMetadataStream(metadata$);
|
|
27943
|
+
this._metadataSub = metadata$.pipe(takeUntil(this._destroyed$)).subscribe(partial => this.updateMetadata(partial));
|
|
27944
|
+
}
|
|
27945
|
+
warnOnNonReplayMetadataStream(metadata$) {
|
|
27946
|
+
if (!isDevMode() || this._metadataStreamTypeWarned)
|
|
27947
|
+
return;
|
|
27948
|
+
if (metadata$ instanceof Subject &&
|
|
27949
|
+
!(metadata$ instanceof ReplaySubject) &&
|
|
27950
|
+
!(metadata$ instanceof BehaviorSubject)) {
|
|
27951
|
+
this._metadataStreamTypeWarned = true;
|
|
27952
|
+
console.warn('QdUi | QdPageObjectHeaderComponent - metadata$ is a plain Subject. Emissions fired before the ' +
|
|
27953
|
+
"header subscribes (e.g. during the consuming component's ngOnInit) will be lost. " +
|
|
27954
|
+
'Use createMetadataStream() or pass a ReplaySubject(1)/BehaviorSubject instead.');
|
|
27955
|
+
}
|
|
27956
|
+
}
|
|
27774
27957
|
subscribeToViewOnlyMode() {
|
|
27775
27958
|
this._customActionsSub?.unsubscribe();
|
|
27776
27959
|
this._customActionsSub = this.pageStoreService.isViewonly$
|
|
@@ -28993,19 +29176,44 @@ const SAFE_BOTTOM_OFFSET_PX = 64;
|
|
|
28993
29176
|
*
|
|
28994
29177
|
* #### **Updating Facets**
|
|
28995
29178
|
*
|
|
28996
|
-
* Typically, the values of the facets on a create or inspect page are set to read-only.
|
|
29179
|
+
* Typically, the values of the facets on a create or inspect page are set to read-only. If a facet value needs to change at runtime — for instance after a status update from a dialog — push the partial update through `QdPageConfig.metadata$`. The header subscribes to this observable and shallow-merges every emission into the current object data.
|
|
29180
|
+
*
|
|
29181
|
+
* Create the stream with `createMetadataStream<T>()`. The factory returns a `ReplaySubject<Partial<T>>(1)` that buffers the latest emission, so a value pushed during your component's `ngOnInit` still reaches the header, which subscribes a lifecycle step later. Plain `Subject` silently drops that first emission; dev mode warns when it detects one.
|
|
28997
29182
|
*
|
|
28998
29183
|
* **Please note: These values should not be modified directly within a QdPage.**
|
|
28999
29184
|
*
|
|
29000
29185
|
* ```ts
|
|
29001
|
-
* @
|
|
29002
|
-
*
|
|
29003
|
-
*
|
|
29004
|
-
*
|
|
29186
|
+
* @Component({
|
|
29187
|
+
* // ...
|
|
29188
|
+
* providers: [
|
|
29189
|
+
* {
|
|
29190
|
+
* provide: QD_PAGE_OBJECT_RESOLVER_TOKEN,
|
|
29191
|
+
* useClass: MyObjectModelResolver
|
|
29192
|
+
* }
|
|
29193
|
+
* ]
|
|
29194
|
+
* })
|
|
29195
|
+
* class MyPageComponent {
|
|
29196
|
+
* private metadataUpdates$ = createMetadataStream<MyObjectModel>();
|
|
29197
|
+
*
|
|
29198
|
+
* pageConfig: QdPageConfig<MyObjectModel> = {
|
|
29199
|
+
* title: { i18n: 'i18n.page.title' },
|
|
29200
|
+
* pageType: 'inspect',
|
|
29201
|
+
* headerFacets: [ /* ... *\/ ],
|
|
29202
|
+
* metadata$: this.metadataUpdates$,
|
|
29203
|
+
* pageTypeConfig: { /* ... *\/ }
|
|
29204
|
+
* };
|
|
29205
|
+
*
|
|
29206
|
+
* updateStatus() {
|
|
29207
|
+
* this.metadataUpdates$.next({ state: 'Updated' });
|
|
29005
29208
|
* }
|
|
29209
|
+
* }
|
|
29210
|
+
* ```
|
|
29006
29211
|
*
|
|
29007
|
-
*
|
|
29212
|
+
* Legacy approach (`@deprecated`): the resolver-level `updateMetadata` method is still wired up for backward compatibility, but prefer `metadata$` on the config for new code.
|
|
29008
29213
|
*
|
|
29214
|
+
* ```ts
|
|
29215
|
+
* @Injectable()
|
|
29216
|
+
* class MyObjectModelResolver implements QdPageObjectResolver<MyObjectModel> {
|
|
29009
29217
|
* resolve(): Observable<MyObjectModel> {
|
|
29010
29218
|
* // your implementation here
|
|
29011
29219
|
* }
|
|
@@ -29015,15 +29223,6 @@ const SAFE_BOTTOM_OFFSET_PX = 64;
|
|
|
29015
29223
|
* }
|
|
29016
29224
|
* }
|
|
29017
29225
|
*
|
|
29018
|
-
* @Component({
|
|
29019
|
-
* // ...
|
|
29020
|
-
* providers: [
|
|
29021
|
-
* {
|
|
29022
|
-
* provide: QD_PAGE_OBJECT_RESOLVER_TOKEN,
|
|
29023
|
-
* useClass: MyObjectModelResolver
|
|
29024
|
-
* }
|
|
29025
|
-
* ]
|
|
29026
|
-
* })
|
|
29027
29226
|
* class MyPageComponent {
|
|
29028
29227
|
* constructor(@Inject(QD_PAGE_OBJECT_RESOLVER_TOKEN) private objectResolver: MyObjectModelResolver) {}
|
|
29029
29228
|
*
|
|
@@ -32792,9 +32991,6 @@ class QdQuickEditComponent {
|
|
|
32792
32991
|
this.data?.splice(index, 1);
|
|
32793
32992
|
}
|
|
32794
32993
|
}
|
|
32795
|
-
hasTooltip(tooltip) {
|
|
32796
|
-
return !!tooltip && !tooltip.hidden;
|
|
32797
|
-
}
|
|
32798
32994
|
initRows() {
|
|
32799
32995
|
if (this.controlContainer)
|
|
32800
32996
|
return;
|
|
@@ -32853,11 +33049,11 @@ class QdQuickEditComponent {
|
|
|
32853
33049
|
this.controlContainer.control.valueChanges.pipe(tap(() => this.changeDetectorRef.detectChanges())).subscribe();
|
|
32854
33050
|
}
|
|
32855
33051
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32856
|
-
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-
|
|
33052
|
+
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 >\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{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\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"] }, { 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 });
|
|
32857
33053
|
}
|
|
32858
33054
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, decorators: [{
|
|
32859
33055
|
type: Component,
|
|
32860
|
-
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-
|
|
33056
|
+
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 >\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{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"] }]
|
|
32861
33057
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
32862
33058
|
type: Input,
|
|
32863
33059
|
args: [{ required: true }]
|
|
@@ -33087,5 +33283,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
33087
33283
|
* Generated bundle index. Do not edit.
|
|
33088
33284
|
*/
|
|
33089
33285
|
|
|
33090
|
-
export { APP_ENVIRONMENT, AVAILABLE_ICONS, BACKEND_ERROR_CODES, MockLocaleDatePipe, NavigationTileComponent, NavigationTilesComponent, QD_DIALOG_CONFIRMATION_RESOLVER_TOKEN, QD_FILE_MANAGER_TOKEN, QD_FILE_UPLOAD_MANAGER_TOKEN, QD_FORM_OPTIONS_RESOLVER, QD_PAGE_OBJECT_RESOLVER_TOKEN, QD_PAGE_STEP_RESOLVER_TOKEN, QD_POPOVER_TOP_FIRST, QD_SAFE_BOTTOM_OFFSET, QD_TABLE_DATA_RESOLVER_TOKEN, QD_UPLOAD_HTTP_OPTIONS, QdButtonComponent, QdButtonGhostDirective, QdButtonGridComponent, QdButtonLinkDirective, QdButtonModule, QdButtonStackButtonComponent, QdButtonStackComponent, QdCheckboxChipsComponent, QdCheckboxComponent, QdCheckboxesComponent, QdChipComponent, QdChipModule, QdColumnAutoFillDirective, QdColumnBreakBeforeDirective, QdColumnDirective, QdColumnDisableResponsiveColspansDirective, QdColumnFullGridWidthDirective, QdColumnNextInSameRowDirective, QdColumnsDirective, QdColumnsDisableAutoFillDirective, QdColumnsDisableResponsiveColspansDirective, QdColumnsMaxDirective, QdCommentsComponent, QdCommentsModule, QdConnectFormStateToPageDirective, QdConnectorTableContextDirective, QdConnectorTableFilterDirective, QdConnectorTableSearchDirective, QdContactCardComponent, QdContactCardModule, QdContainerPairsCaptionComponent, QdContainerPairsContainerComponent, QdContainerPairsHeaderComponent, QdContainerPairsItemComponent, QdContainerPairsValueComponent, QdContextService, QdCoreModule, QdDatepickerComponent, QdDialogActionComponent, QdDialogAuthSessionEndComponent, QdDialogAuthSessionEndService, QdDialogComponent, QdDialogConfirmationComponent, QdDialogConfirmationErrorDirective, QdDialogConfirmationInfoDirective, QdDialogConfirmationSuccessDirective, QdDialogModule, QdDialogRecordStepperComponent, QdDialogService, QdDialogSize, QdDisabledDirective, QdDropdownComponent, QdFileCollectorComponent, QdFileCollectorModule, QdFileSizePipe$1 as QdFileSizePipe, QdFileUploadComponent, QdFileUploadService, QdFilterComponent, QdFilterFormItemsComponent, QdFilterModule, QdFilterRestParamBuilder, QdFilterService, QdFormArray, QdFormBuilder, QdFormControl, QdFormGroup, QdFormModule, QdGridComponent, QdGridModule, QdHorizontalPairsCaptionComponent, QdHorizontalPairsComponent, QdHorizontalPairsItemComponent, QdHorizontalPairsValueComponent, QdIconButtonComponent, QdIconComponent, QdIconModule, QdImageComponent, QdImageModule, QdIndeterminateProgressBarComponent, QdInputComponent, QdListModule, QdMenuButtonComponent, QdMockBreakpointService, QdMockButtonComponent, QdMockButtonGhostDirective, QdMockButtonGridComponent, QdMockButtonLinkDirective, QdMockButtonModule, QdMockButtonStackButtonComponent, QdMockButtonStackComponent, QdMockCalendarComponent, QdMockCheckboxChipsComponent, QdMockCheckboxComponent, QdMockCheckboxesComponent, QdMockChipComponent, QdMockChipModule, QdMockColumnDirective, QdMockColumnsDirective, QdMockContactCardComponent, QdMockContactCardModule, QdMockContainerPairsCaptionComponent, QdMockContainerPairsContainerComponent, QdMockContainerPairsHeaderComponent, QdMockContainerPairsItemComponent, QdMockContainerPairsValueComponent, QdMockCoreModule, QdMockCounterBadgeComponent, QdMockDatepickerComponent, QdMockDisabledDirective, QdMockDropdownComponent, QdMockFileCollectorComponent, QdMockFileCollectorModule, QdMockFilterCategoryBooleanComponent, QdMockFilterCategoryComponent, QdMockFilterCategoryDateComponent, QdMockFilterCategoryDateRangeComponent, QdMockFilterCategoryFreeTextComponent, QdMockFilterCategorySelectComponent, QdMockFilterComponent, QdMockFilterFormItemsComponent, QdMockFilterItemBooleanComponent, QdMockFilterItemDateComponent, QdMockFilterItemDateRangeComponent, QdMockFilterItemFreeTextComponent, QdMockFilterItemMultiSelectComponent, QdMockFilterItemSingleSelectComponent, QdMockFilterModule, QdMockFilterService, QdMockFormErrorComponent, QdMockFormGroupErrorComponent, QdMockFormHintComponent, QdMockFormLabelComponent, QdMockFormReadonlyComponent, QdMockFormViewonlyComponent, QdMockFormsModule, QdMockGridModule, QdMockIconButtonComponent, QdMockIconComponent, QdMockIconModule, QdMockImageComponent, QdMockImageModule, QdMockIndeterminateProgressBarComponent, QdMockInputComponent, QdMockListModule, QdMockNavigationTileComponent, QdMockNavigationTilesComponent, QdMockNavigationTilesModule, QdMockNotificationComponent, QdMockNotificationContentComponent, QdMockNotificationsComponent, QdMockNotificationsModule, QdMockNotificationsService, QdMockPageComponent, QdMockPageModule, QdMockPercentageProgressBarComponent, QdMockPinCodeComponent, QdMockPlaceHolderModule, QdMockPopoverOnClickDirective, QdMockProgressBarModule, QdMockQdPlaceHolderComponent, QdMockRadioButtonsComponent, QdMockRwdDisabledDirective, QdMockSearchComponent, QdMockSearchModule, QdMockSectionComponent, QdMockSectionModule, QdMockShellComponent, QdMockShellFooterComponent, QdMockShellHeaderBannerComponent, QdMockShellHeaderComponent, QdMockShellHeaderSearchComponent, QdMockShellHeaderWidgetComponent, QdMockShellModule, QdMockShellToolbarComponent, QdMockShellToolbarItemComponent, QdMockStatusIndicatorCaptionComponent, QdMockStatusIndicatorComponent, QdMockStatusIndicatorItemComponent, QdMockStatusIndicatorModule, QdMockStatusPairsCaptionComponent, QdMockStatusPairsComponent, QdMockStatusPairsErrorComponent, QdMockStatusPairsItemComponent, QdMockStatusPairsValueComponent, QdMockSwitchComponent, QdMockSwitchesComponent, QdMockTableComponent, QdMockTableModule, QdMockTextSectionComponent, QdMockTextSectionHeadlineComponent, QdMockTextSectionModule, QdMockTextSectionParagraphComponent, QdMockTextareaComponent, QdMockTileButtonListComponent, QdMockTileComponent, QdMockTileTextListComponent, QdMockTileTextListItemComponent, QdMockTileTitleComponent, QdMockTilesContainerComponent, QdMockTilesContainerTitleComponent, QdMockTilesModule, QdMockTranslatePipe, QdMockVisuallyHiddenDirective, QdMultiInputComponent, QdNavigationTilesModule, QdNotificationComponent, QdNotificationContentComponent, QdNotificationsComponent, QdNotificationsHttpInterceptorService, QdNotificationsModule, QdNotificationsService, QdNotificationsSnackbarListenerDirective, QdPageComponent, QdPageControlPanelComponent, QdPageFooterComponent, QdPageFooterCustomContentDirective, QdPageInfoBannerComponent, QdPageModule, QdPageStepComponent, QdPageStepperAdapterDirective, QdPageStepperComponent, QdPageStepperModule, QdPageStoreService, QdPageTabComponent, QdPageTabsAdapterDirective, QdPageTabsComponent, QdPageTabsModule, QdPanelSectionActionsComponent, QdPanelSectionComponent, QdPanelSectionModule, QdPanelSectionStatusComponent, QdPanelSectionTextParagraphComponent, QdPendingChangesGuardDirective, QdPercentageProgressBarComponent, QdPinCodeComponent, QdPlaceHolderComponent, QdPlaceHolderModule, QdPlaceholderPipe, QdProgressBarModule, QdProjectionGuardComponent, QdPushEventsService, QdQuickEditComponent, QdQuickEditModule, QdRadioButtonsComponent, QdRichtextComponent, QdRwdDisabledDirective, QdSearchComponent, QdSearchModule, QdSectionAdapterDirective, QdSectionComponent, QdSectionModule, QdSectionToolbarComponent, QdShellComponent, QdShellModule, QdSortDirection, QdSpinnerComponent, QdSpinnerModule, QdStatusIndicatorComponent, QdStatusIndicatorModule, QdStatusPairsCaptionComponent, QdStatusPairsComponent, QdStatusPairsErrorComponent, QdStatusPairsItemComponent, QdStatusPairsValueComponent, QdSubgridComponent, QdSwitchComponent, QdSwitchesComponent, QdTableComponent, QdTableModule, QdTableSpringTools, QdTextSectionComponent, QdTextSectionHeadlineComponent, QdTextSectionModule, QdTextSectionParagraphComponent, QdTextareaComponent, QdTileButtonListComponent, QdTileComponent, QdTileTextListComponent, QdTileTextListItemComponent, QdTileTitleComponent, QdTilesComponent, QdTilesModule, QdTilesTitleComponent, QdTooltipAtIntersectionDirective, QdTreeComponent, QdTreeModule, QdTreeRowExpanderService, QdUiMockModule, QdUiModule, QdUploadErrorType, QdValidators, QdViewportAdaptiveDirective, QdVisuallyHiddenDirective, chipColorDefault, updateHtmlLang };
|
|
33286
|
+
export { APP_ENVIRONMENT, AVAILABLE_ICONS, BACKEND_ERROR_CODES, MockLocaleDatePipe, NavigationTileComponent, NavigationTilesComponent, QD_DIALOG_CONFIRMATION_RESOLVER_TOKEN, QD_FILE_MANAGER_TOKEN, QD_FILE_UPLOAD_MANAGER_TOKEN, QD_FORM_OPTIONS_RESOLVER, QD_PAGE_OBJECT_RESOLVER_TOKEN, QD_PAGE_STEP_RESOLVER_TOKEN, QD_POPOVER_TOP_FIRST, QD_SAFE_BOTTOM_OFFSET, QD_TABLE_DATA_RESOLVER_TOKEN, QD_UPLOAD_HTTP_OPTIONS, QdButtonComponent, QdButtonGhostDirective, QdButtonGridComponent, QdButtonLinkDirective, QdButtonModule, QdButtonStackButtonComponent, QdButtonStackComponent, QdCheckboxChipsComponent, QdCheckboxComponent, QdCheckboxesComponent, QdChipComponent, QdChipModule, QdColumnAutoFillDirective, QdColumnBreakBeforeDirective, QdColumnDirective, QdColumnDisableResponsiveColspansDirective, QdColumnFullGridWidthDirective, QdColumnNextInSameRowDirective, QdColumnsDirective, QdColumnsDisableAutoFillDirective, QdColumnsDisableResponsiveColspansDirective, QdColumnsMaxDirective, QdCommentsComponent, QdCommentsModule, QdConnectFormStateToPageDirective, QdConnectorTableContextDirective, QdConnectorTableFilterDirective, QdConnectorTableSearchDirective, QdContactCardComponent, QdContactCardModule, QdContainerPairsCaptionComponent, QdContainerPairsContainerComponent, QdContainerPairsHeaderComponent, QdContainerPairsItemComponent, QdContainerPairsValueComponent, QdContextService, QdCoreModule, QdDatepickerComponent, QdDialogActionComponent, QdDialogAuthSessionEndComponent, QdDialogAuthSessionEndService, QdDialogComponent, QdDialogConfirmationComponent, QdDialogConfirmationErrorDirective, QdDialogConfirmationInfoDirective, QdDialogConfirmationSuccessDirective, QdDialogModule, QdDialogRecordStepperComponent, QdDialogService, QdDialogSize, QdDisabledDirective, QdDropdownComponent, QdFileCollectorComponent, QdFileCollectorModule, QdFileSizePipe$1 as QdFileSizePipe, QdFileUploadComponent, QdFileUploadService, QdFilterComponent, QdFilterFormItemsComponent, QdFilterModule, QdFilterRestParamBuilder, QdFilterService, QdFormArray, QdFormBuilder, QdFormControl, QdFormGroup, QdFormModule, QdGridComponent, QdGridModule, QdHorizontalPairsCaptionComponent, QdHorizontalPairsComponent, QdHorizontalPairsItemComponent, QdHorizontalPairsValueComponent, QdIconButtonComponent, QdIconComponent, QdIconModule, QdImageComponent, QdImageModule, QdIndeterminateProgressBarComponent, QdInputComponent, QdListModule, QdMenuButtonComponent, QdMockBreakpointService, QdMockButtonComponent, QdMockButtonGhostDirective, QdMockButtonGridComponent, QdMockButtonLinkDirective, QdMockButtonModule, QdMockButtonStackButtonComponent, QdMockButtonStackComponent, QdMockCalendarComponent, QdMockCheckboxChipsComponent, QdMockCheckboxComponent, QdMockCheckboxesComponent, QdMockChipComponent, QdMockChipModule, QdMockColumnDirective, QdMockColumnsDirective, QdMockContactCardComponent, QdMockContactCardModule, QdMockContainerPairsCaptionComponent, QdMockContainerPairsContainerComponent, QdMockContainerPairsHeaderComponent, QdMockContainerPairsItemComponent, QdMockContainerPairsValueComponent, QdMockCoreModule, QdMockCounterBadgeComponent, QdMockDatepickerComponent, QdMockDisabledDirective, QdMockDropdownComponent, QdMockFileCollectorComponent, QdMockFileCollectorModule, QdMockFilterCategoryBooleanComponent, QdMockFilterCategoryComponent, QdMockFilterCategoryDateComponent, QdMockFilterCategoryDateRangeComponent, QdMockFilterCategoryFreeTextComponent, QdMockFilterCategorySelectComponent, QdMockFilterComponent, QdMockFilterFormItemsComponent, QdMockFilterItemBooleanComponent, QdMockFilterItemDateComponent, QdMockFilterItemDateRangeComponent, QdMockFilterItemFreeTextComponent, QdMockFilterItemMultiSelectComponent, QdMockFilterItemSingleSelectComponent, QdMockFilterModule, QdMockFilterService, QdMockFormErrorComponent, QdMockFormGroupErrorComponent, QdMockFormHintComponent, QdMockFormLabelComponent, QdMockFormReadonlyComponent, QdMockFormViewonlyComponent, QdMockFormsModule, QdMockGridModule, QdMockIconButtonComponent, QdMockIconComponent, QdMockIconModule, QdMockImageComponent, QdMockImageModule, QdMockIndeterminateProgressBarComponent, QdMockInputComponent, QdMockListModule, QdMockNavigationTileComponent, QdMockNavigationTilesComponent, QdMockNavigationTilesModule, QdMockNotificationComponent, QdMockNotificationContentComponent, QdMockNotificationsComponent, QdMockNotificationsModule, QdMockNotificationsService, QdMockPageComponent, QdMockPageModule, QdMockPercentageProgressBarComponent, QdMockPinCodeComponent, QdMockPlaceHolderModule, QdMockPopoverOnClickDirective, QdMockProgressBarModule, QdMockQdPlaceHolderComponent, QdMockRadioButtonsComponent, QdMockRwdDisabledDirective, QdMockSearchComponent, QdMockSearchModule, QdMockSectionComponent, QdMockSectionModule, QdMockShellComponent, QdMockShellFooterComponent, QdMockShellHeaderBannerComponent, QdMockShellHeaderComponent, QdMockShellHeaderSearchComponent, QdMockShellHeaderWidgetComponent, QdMockShellModule, QdMockShellToolbarComponent, QdMockShellToolbarItemComponent, QdMockStatusIndicatorCaptionComponent, QdMockStatusIndicatorComponent, QdMockStatusIndicatorItemComponent, QdMockStatusIndicatorModule, QdMockStatusPairsCaptionComponent, QdMockStatusPairsComponent, QdMockStatusPairsErrorComponent, QdMockStatusPairsItemComponent, QdMockStatusPairsValueComponent, QdMockSwitchComponent, QdMockSwitchesComponent, QdMockTableComponent, QdMockTableModule, QdMockTextSectionComponent, QdMockTextSectionHeadlineComponent, QdMockTextSectionModule, QdMockTextSectionParagraphComponent, QdMockTextareaComponent, QdMockTileButtonListComponent, QdMockTileComponent, QdMockTileTextListComponent, QdMockTileTextListItemComponent, QdMockTileTitleComponent, QdMockTilesContainerComponent, QdMockTilesContainerTitleComponent, QdMockTilesModule, QdMockTranslatePipe, QdMockVisuallyHiddenDirective, QdMultiInputComponent, QdNavigationTilesModule, QdNotificationComponent, QdNotificationContentComponent, QdNotificationsComponent, QdNotificationsHttpInterceptorService, QdNotificationsModule, QdNotificationsService, QdNotificationsSnackbarListenerDirective, QdPageComponent, QdPageControlPanelComponent, QdPageFooterComponent, QdPageFooterCustomContentDirective, QdPageInfoBannerComponent, QdPageModule, QdPageStepComponent, QdPageStepperAdapterDirective, QdPageStepperComponent, QdPageStepperModule, QdPageStoreService, QdPageTabComponent, QdPageTabsAdapterDirective, QdPageTabsComponent, QdPageTabsModule, QdPanelSectionActionsComponent, QdPanelSectionComponent, QdPanelSectionModule, QdPanelSectionStatusComponent, QdPanelSectionTextParagraphComponent, QdPendingChangesGuardDirective, QdPercentageProgressBarComponent, QdPinCodeComponent, QdPlaceHolderComponent, QdPlaceHolderModule, QdPlaceholderPipe, QdProgressBarModule, QdProjectionGuardComponent, QdPushEventsService, QdQuickEditComponent, QdQuickEditModule, QdRadioButtonsComponent, QdRichtextComponent, QdRwdDisabledDirective, QdSearchComponent, QdSearchModule, QdSectionAdapterDirective, QdSectionComponent, QdSectionModule, QdSectionToolbarComponent, QdShellComponent, QdShellModule, QdSortDirection, QdSpinnerComponent, QdSpinnerModule, QdStatusIndicatorComponent, QdStatusIndicatorModule, QdStatusPairsCaptionComponent, QdStatusPairsComponent, QdStatusPairsErrorComponent, QdStatusPairsItemComponent, QdStatusPairsValueComponent, QdSubgridComponent, QdSwitchComponent, QdSwitchesComponent, QdTableComponent, QdTableModule, QdTableSpringTools, QdTextSectionComponent, QdTextSectionHeadlineComponent, QdTextSectionModule, QdTextSectionParagraphComponent, QdTextareaComponent, QdTileButtonListComponent, QdTileComponent, QdTileTextListComponent, QdTileTextListItemComponent, QdTileTitleComponent, QdTilesComponent, QdTilesModule, QdTilesTitleComponent, QdTooltipAtIntersectionDirective, QdTooltipIconComponent, QdTreeComponent, QdTreeModule, QdTreeRowExpanderService, QdUiMockModule, QdUiModule, QdUploadErrorType, QdValidators, QdViewportAdaptiveDirective, QdVisuallyHiddenDirective, chipColorDefault, createMetadataStream, updateHtmlLang };
|
|
33091
33287
|
//# sourceMappingURL=quadrel-enterprise-ui-framework.mjs.map
|