@quadrel-enterprise-ui/framework 19.12.1 → 19.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/quadrel-enterprise-ui-framework.mjs +146 -117
- package/fesm2022/quadrel-enterprise-ui-framework.mjs.map +1 -1
- package/lib/core/core.module.d.ts +2 -1
- package/lib/core/core.module.d.ts.map +1 -1
- package/lib/core/tooltip/tooltip-icon/tooltip-icon.component.d.ts +9 -0
- package/lib/core/tooltip/tooltip-icon/tooltip-icon.component.d.ts.map +1 -0
- package/lib/core/tooltip/tooltip.module.d.ts +5 -3
- package/lib/core/tooltip/tooltip.module.d.ts.map +1 -1
- package/lib/filter/category/select/filter-category-select.component.d.ts.map +1 -1
- package/lib/forms/shared/components/form-label/form-label.component.d.ts +0 -1
- package/lib/forms/shared/components/form-label/form-label.component.d.ts.map +1 -1
- package/lib/quick-edit/quick-edit.component.d.ts +0 -2
- package/lib/quick-edit/quick-edit.component.d.ts.map +1 -1
- package/lib/table/head/table-head.component.d.ts +2 -0
- package/lib/table/head/table-head.component.d.ts.map +1 -1
- package/lib/table/model/table-config.interface.d.ts +5 -0
- package/lib/table/model/table-config.interface.d.ts.map +1 -1
- package/lib/table/row/table-row.component.d.ts +3 -0
- package/lib/table/row/table-row.component.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/assets/styles/components/_components.all.scss +0 -1
- package/src/assets/styles/components/_components.filter.scss +0 -54
|
@@ -7175,6 +7175,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
7175
7175
|
args: ['QdAuthenticationService']
|
|
7176
7176
|
}] }] });
|
|
7177
7177
|
|
|
7178
|
+
const MAX_TOOLTIP_CHARACTER = 512;
|
|
7179
|
+
const TOOLTIP_POSITIONS = [
|
|
7180
|
+
{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
|
|
7181
|
+
{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
|
|
7182
|
+
{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
|
|
7183
|
+
{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' }
|
|
7184
|
+
];
|
|
7185
|
+
class QdTooltipOnClickDirective {
|
|
7186
|
+
overlay;
|
|
7187
|
+
elementRef;
|
|
7188
|
+
translateService;
|
|
7189
|
+
qdTooltipContent;
|
|
7190
|
+
_overlayRef;
|
|
7191
|
+
onClickToggle(event) {
|
|
7192
|
+
event.stopPropagation();
|
|
7193
|
+
this._overlayRef ? this.close() : this.show();
|
|
7194
|
+
}
|
|
7195
|
+
onOutsideClickClose(target) {
|
|
7196
|
+
if (!this.elementRef.nativeElement.contains(target))
|
|
7197
|
+
this.close();
|
|
7198
|
+
}
|
|
7199
|
+
constructor(overlay, elementRef, translateService) {
|
|
7200
|
+
this.overlay = overlay;
|
|
7201
|
+
this.elementRef = elementRef;
|
|
7202
|
+
this.translateService = translateService;
|
|
7203
|
+
}
|
|
7204
|
+
ngOnDestroy() {
|
|
7205
|
+
this.close();
|
|
7206
|
+
}
|
|
7207
|
+
show() {
|
|
7208
|
+
const positionStrategy = this.overlay
|
|
7209
|
+
.position()
|
|
7210
|
+
.flexibleConnectedTo(this.elementRef)
|
|
7211
|
+
.withFlexibleDimensions(false)
|
|
7212
|
+
.withPush(false)
|
|
7213
|
+
.withPositions(TOOLTIP_POSITIONS);
|
|
7214
|
+
this._overlayRef = this.overlay.create({ positionStrategy });
|
|
7215
|
+
const tooltipRef = this._overlayRef.attach(new ComponentPortal(QdTooltipComponent));
|
|
7216
|
+
tooltipRef.instance.content = this.getContent();
|
|
7217
|
+
}
|
|
7218
|
+
close() {
|
|
7219
|
+
if (this._overlayRef) {
|
|
7220
|
+
this._overlayRef.dispose();
|
|
7221
|
+
this._overlayRef = null;
|
|
7222
|
+
}
|
|
7223
|
+
}
|
|
7224
|
+
getContent() {
|
|
7225
|
+
const content = { paragraphs: [] };
|
|
7226
|
+
let fullText = '';
|
|
7227
|
+
const headline = this.qdTooltipContent?.headline?.i18n;
|
|
7228
|
+
if (headline) {
|
|
7229
|
+
const translatedHeadline = this.translate(headline);
|
|
7230
|
+
content.headline = translatedHeadline;
|
|
7231
|
+
fullText += translatedHeadline;
|
|
7232
|
+
}
|
|
7233
|
+
const paragraphs = this.qdTooltipContent?.paragraphs || [];
|
|
7234
|
+
const translatedParagraphs = paragraphs.map(p => this.translate(p.i18n));
|
|
7235
|
+
if (translatedParagraphs.length) {
|
|
7236
|
+
content.paragraphs.push(...translatedParagraphs);
|
|
7237
|
+
fullText += translatedParagraphs.join('');
|
|
7238
|
+
}
|
|
7239
|
+
const truncatedText = this.truncateText(fullText);
|
|
7240
|
+
return {
|
|
7241
|
+
headline: content.headline,
|
|
7242
|
+
paragraphs: content.paragraphs.map(p => truncatedText.includes(p) ? p : `${p.substring(0, MAX_TOOLTIP_CHARACTER)}...`)
|
|
7243
|
+
};
|
|
7244
|
+
}
|
|
7245
|
+
truncateText(text) {
|
|
7246
|
+
if (text.length <= MAX_TOOLTIP_CHARACTER)
|
|
7247
|
+
return text.trim();
|
|
7248
|
+
console.warn(`QdUi | QdTooltip - Tooltip content exceeds ${MAX_TOOLTIP_CHARACTER} characters. It will be truncated.`);
|
|
7249
|
+
return `${text.substring(0, MAX_TOOLTIP_CHARACTER).trim()}...`;
|
|
7250
|
+
}
|
|
7251
|
+
translate(key) {
|
|
7252
|
+
return this.translateService.instant(key);
|
|
7253
|
+
}
|
|
7254
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTooltipOnClickDirective, deps: [{ token: i1$5.Overlay }, { token: i0.ElementRef }, { token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
7255
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: QdTooltipOnClickDirective, isStandalone: false, selector: "[qdTooltipOnClick]", inputs: { qdTooltipContent: "qdTooltipContent" }, host: { listeners: { "click": "onClickToggle($event)", "document:click": "onOutsideClickClose($event.target)" } }, ngImport: i0 });
|
|
7256
|
+
}
|
|
7257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTooltipOnClickDirective, decorators: [{
|
|
7258
|
+
type: Directive,
|
|
7259
|
+
args: [{
|
|
7260
|
+
selector: '[qdTooltipOnClick]',
|
|
7261
|
+
standalone: false
|
|
7262
|
+
}]
|
|
7263
|
+
}], ctorParameters: () => [{ type: i1$5.Overlay }, { type: i0.ElementRef }, { type: i1$3.TranslateService }], propDecorators: { qdTooltipContent: [{
|
|
7264
|
+
type: Input
|
|
7265
|
+
}], onClickToggle: [{
|
|
7266
|
+
type: HostListener,
|
|
7267
|
+
args: ['click', ['$event']]
|
|
7268
|
+
}], onOutsideClickClose: [{
|
|
7269
|
+
type: HostListener,
|
|
7270
|
+
args: ['document:click', ['$event.target']]
|
|
7271
|
+
}] } });
|
|
7272
|
+
|
|
7273
|
+
class QdTooltipIconComponent {
|
|
7274
|
+
tooltip;
|
|
7275
|
+
get isVisible() {
|
|
7276
|
+
return !!this.tooltip && this.tooltip.hidden !== true;
|
|
7277
|
+
}
|
|
7278
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTooltipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7279
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:400;transform:translateY(.0625rem)}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "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"] }] });
|
|
7280
|
+
}
|
|
7281
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTooltipIconComponent, decorators: [{
|
|
7282
|
+
type: Component,
|
|
7283
|
+
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:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:400;transform:translateY(.0625rem)}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"] }]
|
|
7284
|
+
}], propDecorators: { tooltip: [{
|
|
7285
|
+
type: Input
|
|
7286
|
+
}] } });
|
|
7287
|
+
|
|
7178
7288
|
const QD_SAFE_BOTTOM_OFFSET = new InjectionToken('QD_SAFE_BOTTOM_OFFSET');
|
|
7179
7289
|
|
|
7180
7290
|
const QD_POPOVER_TOP_FIRST = new InjectionToken('QD_POPOVER_TOP_FIRST');
|
|
@@ -7888,112 +7998,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
7888
7998
|
}]
|
|
7889
7999
|
}] });
|
|
7890
8000
|
|
|
7891
|
-
const MAX_TOOLTIP_CHARACTER = 512;
|
|
7892
|
-
const TOOLTIP_POSITIONS = [
|
|
7893
|
-
{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
|
|
7894
|
-
{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
|
|
7895
|
-
{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
|
|
7896
|
-
{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' }
|
|
7897
|
-
];
|
|
7898
|
-
class QdTooltipOnClickDirective {
|
|
7899
|
-
overlay;
|
|
7900
|
-
elementRef;
|
|
7901
|
-
translateService;
|
|
7902
|
-
qdTooltipContent;
|
|
7903
|
-
_overlayRef;
|
|
7904
|
-
onClickToggle(event) {
|
|
7905
|
-
event.stopPropagation();
|
|
7906
|
-
this._overlayRef ? this.close() : this.show();
|
|
7907
|
-
}
|
|
7908
|
-
onOutsideClickClose(target) {
|
|
7909
|
-
if (!this.elementRef.nativeElement.contains(target))
|
|
7910
|
-
this.close();
|
|
7911
|
-
}
|
|
7912
|
-
constructor(overlay, elementRef, translateService) {
|
|
7913
|
-
this.overlay = overlay;
|
|
7914
|
-
this.elementRef = elementRef;
|
|
7915
|
-
this.translateService = translateService;
|
|
7916
|
-
}
|
|
7917
|
-
ngOnDestroy() {
|
|
7918
|
-
this.close();
|
|
7919
|
-
}
|
|
7920
|
-
show() {
|
|
7921
|
-
const positionStrategy = this.overlay
|
|
7922
|
-
.position()
|
|
7923
|
-
.flexibleConnectedTo(this.elementRef)
|
|
7924
|
-
.withFlexibleDimensions(false)
|
|
7925
|
-
.withPush(false)
|
|
7926
|
-
.withPositions(TOOLTIP_POSITIONS);
|
|
7927
|
-
this._overlayRef = this.overlay.create({ positionStrategy });
|
|
7928
|
-
const tooltipRef = this._overlayRef.attach(new ComponentPortal(QdTooltipComponent));
|
|
7929
|
-
tooltipRef.instance.content = this.getContent();
|
|
7930
|
-
}
|
|
7931
|
-
close() {
|
|
7932
|
-
if (this._overlayRef) {
|
|
7933
|
-
this._overlayRef.dispose();
|
|
7934
|
-
this._overlayRef = null;
|
|
7935
|
-
}
|
|
7936
|
-
}
|
|
7937
|
-
getContent() {
|
|
7938
|
-
const content = { paragraphs: [] };
|
|
7939
|
-
let fullText = '';
|
|
7940
|
-
const headline = this.qdTooltipContent?.headline?.i18n;
|
|
7941
|
-
if (headline) {
|
|
7942
|
-
const translatedHeadline = this.translate(headline);
|
|
7943
|
-
content.headline = translatedHeadline;
|
|
7944
|
-
fullText += translatedHeadline;
|
|
7945
|
-
}
|
|
7946
|
-
const paragraphs = this.qdTooltipContent?.paragraphs || [];
|
|
7947
|
-
const translatedParagraphs = paragraphs.map(p => this.translate(p.i18n));
|
|
7948
|
-
if (translatedParagraphs.length) {
|
|
7949
|
-
content.paragraphs.push(...translatedParagraphs);
|
|
7950
|
-
fullText += translatedParagraphs.join('');
|
|
7951
|
-
}
|
|
7952
|
-
const truncatedText = this.truncateText(fullText);
|
|
7953
|
-
return {
|
|
7954
|
-
headline: content.headline,
|
|
7955
|
-
paragraphs: content.paragraphs.map(p => truncatedText.includes(p) ? p : `${p.substring(0, MAX_TOOLTIP_CHARACTER)}...`)
|
|
7956
|
-
};
|
|
7957
|
-
}
|
|
7958
|
-
truncateText(text) {
|
|
7959
|
-
if (text.length <= MAX_TOOLTIP_CHARACTER)
|
|
7960
|
-
return text.trim();
|
|
7961
|
-
console.warn(`QdUi | QdTooltip - Tooltip content exceeds ${MAX_TOOLTIP_CHARACTER} characters. It will be truncated.`);
|
|
7962
|
-
return `${text.substring(0, MAX_TOOLTIP_CHARACTER).trim()}...`;
|
|
7963
|
-
}
|
|
7964
|
-
translate(key) {
|
|
7965
|
-
return this.translateService.instant(key);
|
|
7966
|
-
}
|
|
7967
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTooltipOnClickDirective, deps: [{ token: i1$5.Overlay }, { token: i0.ElementRef }, { token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
7968
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: QdTooltipOnClickDirective, isStandalone: false, selector: "[qdTooltipOnClick]", inputs: { qdTooltipContent: "qdTooltipContent" }, host: { listeners: { "click": "onClickToggle($event)", "document:click": "onOutsideClickClose($event.target)" } }, ngImport: i0 });
|
|
7969
|
-
}
|
|
7970
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTooltipOnClickDirective, decorators: [{
|
|
7971
|
-
type: Directive,
|
|
7972
|
-
args: [{
|
|
7973
|
-
selector: '[qdTooltipOnClick]',
|
|
7974
|
-
standalone: false
|
|
7975
|
-
}]
|
|
7976
|
-
}], ctorParameters: () => [{ type: i1$5.Overlay }, { type: i0.ElementRef }, { type: i1$3.TranslateService }], propDecorators: { qdTooltipContent: [{
|
|
7977
|
-
type: Input
|
|
7978
|
-
}], onClickToggle: [{
|
|
7979
|
-
type: HostListener,
|
|
7980
|
-
args: ['click', ['$event']]
|
|
7981
|
-
}], onOutsideClickClose: [{
|
|
7982
|
-
type: HostListener,
|
|
7983
|
-
args: ['document:click', ['$event.target']]
|
|
7984
|
-
}] } });
|
|
7985
|
-
|
|
7986
8001
|
class QdTooltipModule {
|
|
7987
8002
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
7988
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: QdTooltipModule, declarations: [QdTooltipComponent,
|
|
7989
|
-
|
|
8003
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: QdTooltipModule, declarations: [QdTooltipComponent,
|
|
8004
|
+
QdTooltipOnClickDirective,
|
|
8005
|
+
QdTooltipAtIntersectionDirective,
|
|
8006
|
+
QdTooltipIconComponent], imports: [CommonModule, TranslateModule, QdIconModule], exports: [QdTooltipOnClickDirective, QdTooltipAtIntersectionDirective, QdTooltipIconComponent] });
|
|
8007
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTooltipModule, imports: [CommonModule, TranslateModule, QdIconModule] });
|
|
7990
8008
|
}
|
|
7991
8009
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTooltipModule, decorators: [{
|
|
7992
8010
|
type: NgModule,
|
|
7993
8011
|
args: [{
|
|
7994
|
-
imports: [CommonModule, TranslateModule],
|
|
7995
|
-
declarations: [
|
|
7996
|
-
|
|
8012
|
+
imports: [CommonModule, TranslateModule, QdIconModule],
|
|
8013
|
+
declarations: [
|
|
8014
|
+
QdTooltipComponent,
|
|
8015
|
+
QdTooltipOnClickDirective,
|
|
8016
|
+
QdTooltipAtIntersectionDirective,
|
|
8017
|
+
QdTooltipIconComponent
|
|
8018
|
+
],
|
|
8019
|
+
exports: [QdTooltipOnClickDirective, QdTooltipAtIntersectionDirective, QdTooltipIconComponent]
|
|
7997
8020
|
}]
|
|
7998
8021
|
}] });
|
|
7999
8022
|
|
|
@@ -8410,15 +8433,12 @@ class QdFormLabelComponent {
|
|
|
8410
8433
|
get isIndicatorVisible() {
|
|
8411
8434
|
return this.isRequired && !this.readonly && !this.viewonly && !!this.label;
|
|
8412
8435
|
}
|
|
8413
|
-
get isTooltipVisible() {
|
|
8414
|
-
return this.tooltip && this.tooltip?.hidden !== true;
|
|
8415
|
-
}
|
|
8416
8436
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdFormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8417
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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
|
|
8437
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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: i1$3.TranslatePipe, name: "translate" }] });
|
|
8418
8438
|
}
|
|
8419
8439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdFormLabelComponent, decorators: [{
|
|
8420
8440
|
type: Component,
|
|
8421
|
-
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
|
|
8441
|
+
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"] }]
|
|
8422
8442
|
}], propDecorators: { label: [{
|
|
8423
8443
|
type: Input
|
|
8424
8444
|
}], isDisabled: [{
|
|
@@ -21204,11 +21224,11 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
21204
21224
|
}));
|
|
21205
21225
|
}
|
|
21206
21226
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdFilterItemSelectCategoryComponent, deps: [{ token: QdFilterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
21207
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n [qdPopoverOnClick]=\"filterLayer\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n [positionStrategy]=\"positionStrategy\"\n (opened)=\"onLayerOpened()\"\n (closed)=\"onLayerClosed()\"\n [attr.data-test-id]=\"testId + '-select-button'\"\n>\n <qd-icon\n *ngIf=\"!open\"\n [icon]=\"'ctrlDown'\"\n [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n [attr.data-test-id]=\"testId + '-closed'\"\n ></qd-icon>\n <qd-icon\n *ngIf=\"open\"\n [icon]=\"'ctrlTop'\"\n [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n [attr.data-test-id]=\"testId + '-opened'\"\n ></qd-icon>\n\n <div class=\"qd-filter__category-button-caption\">\n <span>\n {{ i18n | translate }}\n </span>\n </div>\n\n <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n <div [class]=\"layerContentClassName\">\n <qd-icon\n *ngIf=\"closeButton\"\n [class]=\"'qd-filter__category-layer-close'\"\n (click)=\"closeLayer()\"\n [icon]=\"'timesLargeLight'\"\n [attr.data-test-id]=\"testId + '-layer-close'\"\n ></qd-icon>\n\n <ng-container [ngSwitch]=\"type\">\n <ng-container *ngSwitchCase=\"'multiSelect'\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n [inputFilterValue]=\"filterCategoryValue$ | async\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId\"\n ></qd-filter-form-items>\n\n <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-multi-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-multi-select>\n </ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'singleSelect'\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n [inputFilterValue]=\"filterCategoryValue$ | async\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId\"\n ></qd-filter-form-items>\n\n <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-single-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n (closeEventEmitter)=\"closeLayer()\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-single-select>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <!-- TODO: Add tooltip-->\n <qd-chip\n *ngIf=\"item.active\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"close($event)\"\n [data]=\"itemIndex\"\n [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n >{{ item.i18n | translate }}</qd-chip\n >\n </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { 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: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21227
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n [qdPopoverOnClick]=\"filterLayer\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n [positionStrategy]=\"positionStrategy\"\n (opened)=\"onLayerOpened()\"\n (closed)=\"onLayerClosed()\"\n [attr.data-test-id]=\"testId + '-select-button'\"\n>\n <qd-icon\n *ngIf=\"!open\"\n [icon]=\"'ctrlDown'\"\n [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n [attr.data-test-id]=\"testId + '-closed'\"\n ></qd-icon>\n <qd-icon\n *ngIf=\"open\"\n [icon]=\"'ctrlTop'\"\n [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n [attr.data-test-id]=\"testId + '-opened'\"\n ></qd-icon>\n\n <div class=\"qd-filter__category-button-caption\">\n <span>\n {{ i18n | translate }}\n </span>\n </div>\n\n <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n <div [class]=\"layerContentClassName\">\n <qd-icon\n *ngIf=\"closeButton\"\n [class]=\"'qd-filter__category-layer-close'\"\n (click)=\"closeLayer()\"\n [icon]=\"'timesLargeLight'\"\n [attr.data-test-id]=\"testId + '-layer-close'\"\n ></qd-icon>\n\n <ng-container [ngSwitch]=\"type\">\n <ng-container *ngSwitchCase=\"'multiSelect'\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n [inputFilterValue]=\"filterCategoryValue$ | async\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId\"\n ></qd-filter-form-items>\n\n <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-multi-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-multi-select>\n </ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'singleSelect'\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n [inputFilterValue]=\"filterCategoryValue$ | async\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId\"\n ></qd-filter-form-items>\n\n <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-single-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n (closeEventEmitter)=\"closeLayer()\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-single-select>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <!-- TODO: Add tooltip-->\n <qd-chip\n *ngIf=\"item.active\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"close($event)\"\n [data]=\"itemIndex\"\n [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n >{{ item.i18n | translate }}</qd-chip\n >\n </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:1rem 0 0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:1rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { 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: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21208
21228
|
}
|
|
21209
21229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdFilterItemSelectCategoryComponent, decorators: [{
|
|
21210
21230
|
type: Component,
|
|
21211
|
-
args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n [qdPopoverOnClick]=\"filterLayer\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n [positionStrategy]=\"positionStrategy\"\n (opened)=\"onLayerOpened()\"\n (closed)=\"onLayerClosed()\"\n [attr.data-test-id]=\"testId + '-select-button'\"\n>\n <qd-icon\n *ngIf=\"!open\"\n [icon]=\"'ctrlDown'\"\n [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n [attr.data-test-id]=\"testId + '-closed'\"\n ></qd-icon>\n <qd-icon\n *ngIf=\"open\"\n [icon]=\"'ctrlTop'\"\n [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n [attr.data-test-id]=\"testId + '-opened'\"\n ></qd-icon>\n\n <div class=\"qd-filter__category-button-caption\">\n <span>\n {{ i18n | translate }}\n </span>\n </div>\n\n <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n <div [class]=\"layerContentClassName\">\n <qd-icon\n *ngIf=\"closeButton\"\n [class]=\"'qd-filter__category-layer-close'\"\n (click)=\"closeLayer()\"\n [icon]=\"'timesLargeLight'\"\n [attr.data-test-id]=\"testId + '-layer-close'\"\n ></qd-icon>\n\n <ng-container [ngSwitch]=\"type\">\n <ng-container *ngSwitchCase=\"'multiSelect'\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n [inputFilterValue]=\"filterCategoryValue$ | async\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId\"\n ></qd-filter-form-items>\n\n <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-multi-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-multi-select>\n </ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'singleSelect'\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n [inputFilterValue]=\"filterCategoryValue$ | async\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId\"\n ></qd-filter-form-items>\n\n <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-single-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n (closeEventEmitter)=\"closeLayer()\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-single-select>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <!-- TODO: Add tooltip-->\n <qd-chip\n *ngIf=\"item.active\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"close($event)\"\n [data]=\"itemIndex\"\n [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n >{{ item.i18n | translate }}</qd-chip\n >\n </ng-container>\n</ng-template>\n" }]
|
|
21231
|
+
args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n [qdPopoverOnClick]=\"filterLayer\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n [positionStrategy]=\"positionStrategy\"\n (opened)=\"onLayerOpened()\"\n (closed)=\"onLayerClosed()\"\n [attr.data-test-id]=\"testId + '-select-button'\"\n>\n <qd-icon\n *ngIf=\"!open\"\n [icon]=\"'ctrlDown'\"\n [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n [attr.data-test-id]=\"testId + '-closed'\"\n ></qd-icon>\n <qd-icon\n *ngIf=\"open\"\n [icon]=\"'ctrlTop'\"\n [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n [attr.data-test-id]=\"testId + '-opened'\"\n ></qd-icon>\n\n <div class=\"qd-filter__category-button-caption\">\n <span>\n {{ i18n | translate }}\n </span>\n </div>\n\n <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n <div [class]=\"layerContentClassName\">\n <qd-icon\n *ngIf=\"closeButton\"\n [class]=\"'qd-filter__category-layer-close'\"\n (click)=\"closeLayer()\"\n [icon]=\"'timesLargeLight'\"\n [attr.data-test-id]=\"testId + '-layer-close'\"\n ></qd-icon>\n\n <ng-container [ngSwitch]=\"type\">\n <ng-container *ngSwitchCase=\"'multiSelect'\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n [inputFilterValue]=\"filterCategoryValue$ | async\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId\"\n ></qd-filter-form-items>\n\n <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-multi-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-multi-select>\n </ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'singleSelect'\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n [inputFilterValue]=\"filterCategoryValue$ | async\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId\"\n ></qd-filter-form-items>\n\n <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-single-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n (closeEventEmitter)=\"closeLayer()\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-single-select>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <!-- TODO: Add tooltip-->\n <qd-chip\n *ngIf=\"item.active\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"close($event)\"\n [data]=\"itemIndex\"\n [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n >{{ item.i18n | translate }}</qd-chip\n >\n </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:1rem 0 0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:1rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"] }]
|
|
21212
21232
|
}], ctorParameters: () => [{ type: QdFilterService }], propDecorators: { filterId: [{
|
|
21213
21233
|
type: Input
|
|
21214
21234
|
}], categoryIndex: [{
|
|
@@ -24353,12 +24373,18 @@ class QdTableRowComponent {
|
|
|
24353
24373
|
findColumnType(item) {
|
|
24354
24374
|
return this.config.columns.find(column => column.column === item)?.type || 'blank';
|
|
24355
24375
|
}
|
|
24376
|
+
getTooltip(item) {
|
|
24377
|
+
return this.config.columns.find(column => column.column === item)?.tooltip;
|
|
24378
|
+
}
|
|
24379
|
+
hasTooltip(tooltip) {
|
|
24380
|
+
return !!tooltip && !tooltip.hidden;
|
|
24381
|
+
}
|
|
24356
24382
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTableRowComponent, deps: [{ token: QdTableResponsiveRowService }, { token: QdDataFacetsContextService }], target: i0.ɵɵFactoryTarget.Component });
|
|
24357
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdTableRowComponent, isStandalone: false, selector: "[qd-table-row]", inputs: { config: "config", rowData: "rowData", rowIndex: "rowIndex", testId: ["data-test-id", "testId"] }, 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 [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'\"\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", "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", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
24383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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.testId" } }, 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 [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'\"\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-icon\n *ngIf=\"hasTooltip(getTooltip(item))\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"getTooltip(item)?.content\"\n ></qd-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}[qd-table-row] .additional-info{align-self:center;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:400;transform:translateY(.0625rem)}[qd-table-row] .additional-info:hover,[qd-table-row] .additional-info:focus,[qd-table-row] .additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "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: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { 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", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
24358
24384
|
}
|
|
24359
24385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTableRowComponent, decorators: [{
|
|
24360
24386
|
type: Component,
|
|
24361
|
-
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 [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'\"\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"] }]
|
|
24387
|
+
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 [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'\"\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-icon\n *ngIf=\"hasTooltip(getTooltip(item))\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"getTooltip(item)?.content\"\n ></qd-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}[qd-table-row] .additional-info{align-self:center;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:400;transform:translateY(.0625rem)}[qd-table-row] .additional-info:hover,[qd-table-row] .additional-info:focus,[qd-table-row] .additional-info:active{color:#14516f}\n"] }]
|
|
24362
24388
|
}], ctorParameters: () => [{ type: QdTableResponsiveRowService }, { type: QdDataFacetsContextService }], propDecorators: { config: [{
|
|
24363
24389
|
type: Input
|
|
24364
24390
|
}], rowData: [{
|
|
@@ -24366,6 +24392,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
24366
24392
|
}], rowIndex: [{
|
|
24367
24393
|
type: Input
|
|
24368
24394
|
}], testId: [{
|
|
24395
|
+
type: HostBinding,
|
|
24396
|
+
args: ['attr.data-test-id']
|
|
24397
|
+
}, {
|
|
24369
24398
|
type: Input,
|
|
24370
24399
|
args: ['data-test-id']
|
|
24371
24400
|
}] } });
|
|
@@ -24613,12 +24642,15 @@ class QdTableHeadComponent {
|
|
|
24613
24642
|
getSortConfig(columnName) {
|
|
24614
24643
|
return this.config.columns.find(column => column.column === columnName).sort;
|
|
24615
24644
|
}
|
|
24645
|
+
getTooltip(columnName) {
|
|
24646
|
+
return this.config.columns.find(column => column.column === columnName)?.tooltip;
|
|
24647
|
+
}
|
|
24616
24648
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTableHeadComponent, deps: [{ token: QdTableResponsiveRowService }], target: i0.ɵɵFactoryTarget.Component });
|
|
24617
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24649
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24618
24650
|
}
|
|
24619
24651
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTableHeadComponent, decorators: [{
|
|
24620
24652
|
type: Component,
|
|
24621
|
-
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"] }]
|
|
24653
|
+
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"] }]
|
|
24622
24654
|
}], ctorParameters: () => [{ type: QdTableResponsiveRowService }], propDecorators: { config: [{
|
|
24623
24655
|
type: Input
|
|
24624
24656
|
}], testId: [{
|
|
@@ -33178,9 +33210,6 @@ class QdQuickEditComponent {
|
|
|
33178
33210
|
this.data?.splice(index, 1);
|
|
33179
33211
|
}
|
|
33180
33212
|
}
|
|
33181
|
-
hasTooltip(tooltip) {
|
|
33182
|
-
return !!tooltip && !tooltip.hidden;
|
|
33183
|
-
}
|
|
33184
33213
|
initRows() {
|
|
33185
33214
|
if (this.controlContainer)
|
|
33186
33215
|
return;
|
|
@@ -33239,11 +33268,11 @@ class QdQuickEditComponent {
|
|
|
33239
33268
|
this.controlContainer.control.valueChanges.pipe(tap(() => this.changeDetectorRef.detectChanges())).subscribe();
|
|
33240
33269
|
}
|
|
33241
33270
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdQuickEditComponent, deps: [{ token: i1$4.FormBuilder }, { token: QdPageFooterService, optional: true }, { token: QdPageStoreService, optional: true }, { token: QdSectionToolbarActionService, optional: true }, { token: QdEventBrokerService, optional: true }, { token: i0.ChangeDetectorRef }, { token: i1$4.ControlContainer, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
33242
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-
|
|
33271
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-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),.table-cell:has(.qd-form-hint){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "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: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
33243
33272
|
}
|
|
33244
33273
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdQuickEditComponent, decorators: [{
|
|
33245
33274
|
type: Component,
|
|
33246
|
-
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-
|
|
33275
|
+
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),.table-cell:has(.qd-form-hint){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"] }]
|
|
33247
33276
|
}], ctorParameters: () => [{ type: i1$4.FormBuilder }, { type: QdPageFooterService, decorators: [{
|
|
33248
33277
|
type: Optional
|
|
33249
33278
|
}] }, { type: QdPageStoreService, decorators: [{
|
|
@@ -33485,5 +33514,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
33485
33514
|
* Generated bundle index. Do not edit.
|
|
33486
33515
|
*/
|
|
33487
33516
|
|
|
33488
|
-
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 };
|
|
33517
|
+
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, updateHtmlLang };
|
|
33489
33518
|
//# sourceMappingURL=quadrel-enterprise-ui-framework.mjs.map
|