@quadrel-enterprise-ui/framework 20.4.1 → 20.6.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 +132 -59
- package/fesm2022/quadrel-enterprise-ui-framework.mjs.map +1 -1
- package/index.d.ts +61 -12
- package/package.json +1 -1
- package/src/assets/styles/components/_components.all.scss +1 -0
- package/src/assets/styles/components/_components.filter.scss +52 -0
|
@@ -5699,11 +5699,11 @@ class QdChipComponent {
|
|
|
5699
5699
|
return this.label?.nativeElement?.innerHTML?.replace(/\s*/g, '') === '';
|
|
5700
5700
|
}
|
|
5701
5701
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5702
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdChipComponent, isStandalone: false, selector: "qd-chip", inputs: { state: "state", close: "close", data: "data", testId: ["data-test-id", "testId"] }, outputs: { closeClickEmitter: "closeClickEmitter" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span #label [class]=\"'qd-chip__label'\" [attr.data-test-id]=\"testId + '-caption'\"><ng-content></ng-content></span>\n<qd-icon
|
|
5702
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdChipComponent, isStandalone: false, selector: "qd-chip", inputs: { state: "state", close: "close", data: "data", testId: ["data-test-id", "testId"] }, outputs: { closeClickEmitter: "closeClickEmitter" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span #label [class]=\"'qd-chip__label'\" [attr.data-test-id]=\"testId + '-caption'\"><ng-content></ng-content></span>\n<qd-icon\n *ngIf=\"close\"\n [icon]=\"'times'\"\n (click)=\"$event.stopPropagation(); clickClose()\"\n [attr.data-test-id]=\"testId + '-close'\"\n></qd-icon>\n", styles: [".qd-chip{display:inline-flex;padding:0 .5rem;border-width:.0625rem;border-style:solid;border-radius:1rem;cursor:default;font-size:.8125rem;font-weight:400;line-height:1.5rem;white-space:nowrap}.qd-chip .qd-icon{display:flex;cursor:pointer;font-size:1.25rem}.qd-chip.inProcess{border-color:#069;color:#069}.qd-chip.ready,.qd-chip.success{border-color:#00813a;color:#00813a}.qd-chip.warning{border-color:#ff9b00;color:#ff9b00}.qd-chip.error{border-color:#c70023;color:#c70023}.qd-chip.archive{border-color:#979797;background:#d5d5d5;color:#979797}.qd-chip.filter{border-color:#757575;background:#757575;color:#fff;font-size:.75rem}.qd-chip.filter:hover,.qd-chip.filter:focus{background:#333}.qd-chip.none{border-color:#757575;color:#171717}qd-layout-page-process-header .qd-chip{padding:0 1rem;border-radius:1rem;line-height:1.75rem}.panel-type-control .qd-chip{padding:0 .5rem;border:.0625rem solid;border-radius:1rem;background:none;line-height:1.5rem}.panel-type-control .qd-chip:before{display:inline-block;width:.625rem;height:.625rem;border-radius:50%;margin-right:.625rem;background:red;content:\"\"}.qd-chip.empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
5703
5703
|
}
|
|
5704
5704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdChipComponent, decorators: [{
|
|
5705
5705
|
type: Component,
|
|
5706
|
-
args: [{ selector: 'qd-chip', encapsulation: ViewEncapsulation.None, standalone: false, template: "<span #label [class]=\"'qd-chip__label'\" [attr.data-test-id]=\"testId + '-caption'\"><ng-content></ng-content></span>\n<qd-icon
|
|
5706
|
+
args: [{ selector: 'qd-chip', encapsulation: ViewEncapsulation.None, standalone: false, template: "<span #label [class]=\"'qd-chip__label'\" [attr.data-test-id]=\"testId + '-caption'\"><ng-content></ng-content></span>\n<qd-icon\n *ngIf=\"close\"\n [icon]=\"'times'\"\n (click)=\"$event.stopPropagation(); clickClose()\"\n [attr.data-test-id]=\"testId + '-close'\"\n></qd-icon>\n", styles: [".qd-chip{display:inline-flex;padding:0 .5rem;border-width:.0625rem;border-style:solid;border-radius:1rem;cursor:default;font-size:.8125rem;font-weight:400;line-height:1.5rem;white-space:nowrap}.qd-chip .qd-icon{display:flex;cursor:pointer;font-size:1.25rem}.qd-chip.inProcess{border-color:#069;color:#069}.qd-chip.ready,.qd-chip.success{border-color:#00813a;color:#00813a}.qd-chip.warning{border-color:#ff9b00;color:#ff9b00}.qd-chip.error{border-color:#c70023;color:#c70023}.qd-chip.archive{border-color:#979797;background:#d5d5d5;color:#979797}.qd-chip.filter{border-color:#757575;background:#757575;color:#fff;font-size:.75rem}.qd-chip.filter:hover,.qd-chip.filter:focus{background:#333}.qd-chip.none{border-color:#757575;color:#171717}qd-layout-page-process-header .qd-chip{padding:0 1rem;border-radius:1rem;line-height:1.75rem}.panel-type-control .qd-chip{padding:0 .5rem;border:.0625rem solid;border-radius:1rem;background:none;line-height:1.5rem}.panel-type-control .qd-chip:before{display:inline-block;width:.625rem;height:.625rem;border-radius:50%;margin-right:.625rem;background:red;content:\"\"}.qd-chip.empty{display:none}\n"] }]
|
|
5707
5707
|
}], propDecorators: { state: [{
|
|
5708
5708
|
type: Input
|
|
5709
5709
|
}], close: [{
|
|
@@ -20515,11 +20515,11 @@ class QdFilterItemSingleSelectComponent {
|
|
|
20515
20515
|
this.closeEventEmitter.emit();
|
|
20516
20516
|
}
|
|
20517
20517
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20518
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSingleSelectComponent, isStandalone: false, selector: "qd-filter-item-single-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", testId: ["data-test-id", "testId"] }, outputs: { closeEventEmitter: "closeEventEmitter" }, host: { properties: { "attr.data-test-id": "this.dataTestId" }, classAttribute: "qd-filter__item-single-select" }, ngImport: i0, template: "<qd-radio-buttons\n [config]=\"{ options: [{ value: item, i18n: i18n }], viewonly: false }\"\n [value]=\"active ? item : null\"\n (valueChange)=\"handleActive()\"\n [data-test-id]=\"testId\"\n qdRwdDisabled\n>\n</qd-radio-buttons>\n", styles: [":host{position:relative;display:flex;padding:0
|
|
20518
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSingleSelectComponent, isStandalone: false, selector: "qd-filter-item-single-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", testId: ["data-test-id", "testId"] }, outputs: { closeEventEmitter: "closeEventEmitter" }, host: { properties: { "attr.data-test-id": "this.dataTestId" }, classAttribute: "qd-filter__item-single-select" }, ngImport: i0, template: "<qd-radio-buttons\n [config]=\"{ options: [{ value: item, i18n: i18n }], viewonly: false }\"\n [value]=\"active ? item : null\"\n (valueChange)=\"handleActive()\"\n [data-test-id]=\"testId\"\n qdRwdDisabled\n>\n</qd-radio-buttons>\n", styles: [":host{position:relative;display:flex;padding:0 .5rem;line-height:2.5rem}:host:hover,:host:focus,:host:active{background:#f5f5f5}:host ::ng-deep .qd-form-label,:host ::ng-deep qd-form-hint{display:none}:host ::ng-deep .qd-radio-buttons{overflow:hidden;flex:1;margin-bottom:0}:host ::ng-deep .qd-radio-buttons__button-section{height:1.6875rem!important;flex:auto;margin-bottom:0!important}:host ::ng-deep .qd-radio-buttons__label-section,:host ::ng-deep .qd-radio-buttons__hint-section{display:none}:host ::ng-deep .qd-radio-buttons__caption{display:block;flex:1;cursor:pointer!important;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: QdRwdDisabledDirective, selector: "[qdRwdDisabled]" }, { kind: "component", type: QdRadioButtonsComponent, selector: "qd-radio-buttons", inputs: ["value", "config", "formControlName", "data-test-id"], outputs: ["valueChange", "clickHint", "clickReadonly", "clickViewonly"] }] });
|
|
20519
20519
|
}
|
|
20520
20520
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSingleSelectComponent, decorators: [{
|
|
20521
20521
|
type: Component,
|
|
20522
|
-
args: [{ selector: 'qd-filter-item-single-select', host: { class: 'qd-filter__item-single-select' }, standalone: false, template: "<qd-radio-buttons\n [config]=\"{ options: [{ value: item, i18n: i18n }], viewonly: false }\"\n [value]=\"active ? item : null\"\n (valueChange)=\"handleActive()\"\n [data-test-id]=\"testId\"\n qdRwdDisabled\n>\n</qd-radio-buttons>\n", styles: [":host{position:relative;display:flex;padding:0
|
|
20522
|
+
args: [{ selector: 'qd-filter-item-single-select', host: { class: 'qd-filter__item-single-select' }, standalone: false, template: "<qd-radio-buttons\n [config]=\"{ options: [{ value: item, i18n: i18n }], viewonly: false }\"\n [value]=\"active ? item : null\"\n (valueChange)=\"handleActive()\"\n [data-test-id]=\"testId\"\n qdRwdDisabled\n>\n</qd-radio-buttons>\n", styles: [":host{position:relative;display:flex;padding:0 .5rem;line-height:2.5rem}:host:hover,:host:focus,:host:active{background:#f5f5f5}:host ::ng-deep .qd-form-label,:host ::ng-deep qd-form-hint{display:none}:host ::ng-deep .qd-radio-buttons{overflow:hidden;flex:1;margin-bottom:0}:host ::ng-deep .qd-radio-buttons__button-section{height:1.6875rem!important;flex:auto;margin-bottom:0!important}:host ::ng-deep .qd-radio-buttons__label-section,:host ::ng-deep .qd-radio-buttons__hint-section{display:none}:host ::ng-deep .qd-radio-buttons__caption{display:block;flex:1;cursor:pointer!important;white-space:nowrap}\n"] }]
|
|
20523
20523
|
}], propDecorators: { filterId: [{
|
|
20524
20524
|
type: Input
|
|
20525
20525
|
}], categoryIndex: [{
|
|
@@ -20541,6 +20541,7 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
20541
20541
|
filterId;
|
|
20542
20542
|
categoryIndex;
|
|
20543
20543
|
testId;
|
|
20544
|
+
popoverDirective;
|
|
20544
20545
|
open = false;
|
|
20545
20546
|
type;
|
|
20546
20547
|
i18n;
|
|
@@ -20548,20 +20549,12 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
20548
20549
|
items;
|
|
20549
20550
|
dependsOn = [];
|
|
20550
20551
|
showSelectButton$;
|
|
20552
|
+
positionStrategy = [
|
|
20553
|
+
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: -1 },
|
|
20554
|
+
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', weight: 0.8, offsetY: 1 }
|
|
20555
|
+
];
|
|
20556
|
+
maxFlyoutHeight = 378;
|
|
20551
20557
|
_destroyRef = inject(DestroyRef);
|
|
20552
|
-
handleClickClose($event) {
|
|
20553
|
-
if (!this.open)
|
|
20554
|
-
return;
|
|
20555
|
-
const target = $event.target;
|
|
20556
|
-
if (!target)
|
|
20557
|
-
return;
|
|
20558
|
-
const categoryElement = target.closest(`.qd-filter__category--index-${this.categoryIndex}`);
|
|
20559
|
-
const multiSelectItemElement = target.closest('qd-checkbox');
|
|
20560
|
-
const dataIndex = categoryElement?.getAttribute('data-category-index');
|
|
20561
|
-
const indexValue = dataIndex ? JSON.parse(dataIndex) : null;
|
|
20562
|
-
if (!multiSelectItemElement && (!categoryElement || indexValue !== this.categoryIndex))
|
|
20563
|
-
this.open = false;
|
|
20564
|
-
}
|
|
20565
20558
|
get closeButton() {
|
|
20566
20559
|
return this.type === 'multiSelect';
|
|
20567
20560
|
}
|
|
@@ -20573,8 +20566,8 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
20573
20566
|
${this.open ? 'qd-filter__category-button--open' : 'qd-filter__category-button--closed'}
|
|
20574
20567
|
`;
|
|
20575
20568
|
}
|
|
20576
|
-
get
|
|
20577
|
-
return `qd-filter__category-layer qd-filter__category-layer--${this.type}`;
|
|
20569
|
+
get layerContentClassName() {
|
|
20570
|
+
return `qd-filter__category-layer qd-filter__category-layer--${this.type}${this.filter ? ' qd-filter__category-layer--has-search' : ''}`;
|
|
20578
20571
|
}
|
|
20579
20572
|
get filterCategoryValue$() {
|
|
20580
20573
|
return this.filterService.getFilterCategoryValue$(this.filterId, this.categoryIndex);
|
|
@@ -20584,8 +20577,14 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
20584
20577
|
this.initItemsSubscription();
|
|
20585
20578
|
this.initShowSelectButton();
|
|
20586
20579
|
}
|
|
20587
|
-
|
|
20588
|
-
this.open =
|
|
20580
|
+
onLayerOpened() {
|
|
20581
|
+
this.open = true;
|
|
20582
|
+
}
|
|
20583
|
+
onLayerClosed() {
|
|
20584
|
+
this.open = false;
|
|
20585
|
+
}
|
|
20586
|
+
closeLayer() {
|
|
20587
|
+
this.popoverDirective?.close();
|
|
20589
20588
|
}
|
|
20590
20589
|
close(itemIndex) {
|
|
20591
20590
|
this.filterService.setItemIsActive(this.filterId, this.categoryIndex, itemIndex, false);
|
|
@@ -20632,11 +20631,11 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
20632
20631
|
}));
|
|
20633
20632
|
}
|
|
20634
20633
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20635
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: {
|
|
20634
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", 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: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
20636
20635
|
}
|
|
20637
20636
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, decorators: [{
|
|
20638
20637
|
type: Component,
|
|
20639
|
-
args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n *ngIf=\"showSelectButton$ | async\"\n (
|
|
20638
|
+
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" }]
|
|
20640
20639
|
}], propDecorators: { filterId: [{
|
|
20641
20640
|
type: Input
|
|
20642
20641
|
}], categoryIndex: [{
|
|
@@ -20644,9 +20643,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
20644
20643
|
}], testId: [{
|
|
20645
20644
|
type: Input,
|
|
20646
20645
|
args: ['data-test-id']
|
|
20647
|
-
}],
|
|
20648
|
-
type:
|
|
20649
|
-
args: [
|
|
20646
|
+
}], popoverDirective: [{
|
|
20647
|
+
type: ViewChild,
|
|
20648
|
+
args: [QdPopoverOnClickDirective]
|
|
20650
20649
|
}] } });
|
|
20651
20650
|
|
|
20652
20651
|
// @ts-strict-ignore
|
|
@@ -20712,11 +20711,11 @@ class QdFilterCategoryComponent {
|
|
|
20712
20711
|
}
|
|
20713
20712
|
}
|
|
20714
20713
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20715
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterCategoryComponent, isStandalone: false, selector: "qd-filter-category", inputs: { filterId: "filterId", isInstantFiltering: "isInstantFiltering", categoryIndex: "categoryIndex", lastCategory: "lastCategory", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-category-index": "this.categoryIndexAttribute", "attr.class": "this.categoryNumberClassName", "attr.data-test-id": "this.dataTestId" } }, viewQueries: [{ propertyName: "itemFreeTextCategory", predicate: i0.forwardRef(() => QdFilterItemFreeTextCategoryComponent), descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isBoolean\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-boolean\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-boolean'\"\n >\n </qd-filter-category-boolean>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDate\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date'\"\n ></qd-filter-category-date>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDateTime\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date'\"\n [timePickerConfig]=\"timePickerConfig\"\n ></qd-filter-category-date>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDateRange\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date-range\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date-range-'\"\n ></qd-filter-category-date-range>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDateTimeRange\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date-range\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date-range-'\"\n [timePickerConfig]=\"timePickerConfig\"\n ></qd-filter-category-date-range>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isFreeText\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-free-text\n [filterId]=\"filterId\"\n [isInstantFiltering]=\"isInstantFiltering\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-item'\"\n ></qd-filter-category-free-text>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isSelect\">\n <qd-filter-category-select\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId\"\n ></qd-filter-category-select>\n</ng-container>\n", styles: [":host{position:relative}:host ::ng-deep .qd-filter__category-button{position:relative;display:flex;align-items:center;justify-content:center;padding:0 .75rem 0 2rem;border:.0625rem solid rgb(213,213,213);margin:0 .75rem .75rem 0;background-color:#fff;color:#757575;cursor:pointer;font-size:.875rem;font-weight:400}:host ::ng-deep .qd-filter__category-button-caption{position:relative;display:flex;max-width:40ch;line-height:2.125rem}:host ::ng-deep .qd-filter__category-button-caption span{overflow:inherit;text-overflow:inherit;white-space:nowrap}:host ::ng-deep .qd-filter__category-button--type-boolean{padding:0}:host ::ng-deep .qd-filter__category-button--type-date,:host ::ng-deep .qd-filter__category-button--type-dateRange,:host ::ng-deep .qd-filter__category-button--type-freeText{display:flex;flex-direction:row;align-items:center;padding-right:0;padding-left:0}:host ::ng-deep .qd-filter__category-button--type-date qd-chip,:host ::ng-deep .qd-filter__category-button--type-dateRange qd-chip,:host ::ng-deep .qd-filter__category-button--type-freeText qd-chip{height:1.5rem}:host ::ng-deep .qd-filter__category-button--open,:host ::ng-deep .qd-filter__category-button:hover,:host ::ng-deep .qd-filter__category-button:focus{border-color:#979797!important;color:#171717}:host ::ng-deep .qd-filter__category-button .qd-filter__category-icon{position:absolute;left:0;display:inline-flex;padding:0 .4375rem 0 .3125rem;font-size:1.25rem;line-height:2.125rem;pointer-events:none}:host ::ng-deep .qd-filter__category-button .qd-chip.filter{display:inline-flex;margin-left:.5rem}:host ::ng-deep .qd-filter__category-button .qd-chip.filter ::ng-deep .qd-chip__label{overflow:hidden;max-width:10ch;text-overflow:ellipsis}:host ::ng-deep .qd-filter__category-button .qd-filter__item-date+.qd-chip.filter ::ng-deep .qd-chip__label,:host ::ng-deep .qd-filter__category-button .qd-filter__item-date-range+.qd-chip.filter ::ng-deep .qd-chip__label{max-width:20ch}:host ::ng-deep .qd-filter__category-button--open{z-index:20}:host ::ng-deep .qd-filter__category
|
|
20714
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterCategoryComponent, isStandalone: false, selector: "qd-filter-category", inputs: { filterId: "filterId", isInstantFiltering: "isInstantFiltering", categoryIndex: "categoryIndex", lastCategory: "lastCategory", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-category-index": "this.categoryIndexAttribute", "attr.class": "this.categoryNumberClassName", "attr.data-test-id": "this.dataTestId" } }, viewQueries: [{ propertyName: "itemFreeTextCategory", predicate: i0.forwardRef(() => QdFilterItemFreeTextCategoryComponent), descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isBoolean\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-boolean\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-boolean'\"\n >\n </qd-filter-category-boolean>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDate\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date'\"\n ></qd-filter-category-date>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDateTime\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date'\"\n [timePickerConfig]=\"timePickerConfig\"\n ></qd-filter-category-date>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDateRange\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date-range\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date-range-'\"\n ></qd-filter-category-date-range>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDateTimeRange\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date-range\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date-range-'\"\n [timePickerConfig]=\"timePickerConfig\"\n ></qd-filter-category-date-range>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isFreeText\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-free-text\n [filterId]=\"filterId\"\n [isInstantFiltering]=\"isInstantFiltering\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-item'\"\n ></qd-filter-category-free-text>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isSelect\">\n <qd-filter-category-select\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId\"\n ></qd-filter-category-select>\n</ng-container>\n", styles: [":host{position:relative}:host ::ng-deep .qd-filter__category-button{position:relative;display:flex;align-items:center;justify-content:center;padding:0 .75rem 0 2rem;border:.0625rem solid rgb(213,213,213);margin:0 .75rem .75rem 0;background-color:#fff;color:#757575;cursor:pointer;font-size:.875rem;font-weight:400}:host ::ng-deep .qd-filter__category-button-caption{position:relative;display:flex;max-width:40ch;line-height:2.125rem}:host ::ng-deep .qd-filter__category-button-caption span{overflow:inherit;text-overflow:inherit;white-space:nowrap}:host ::ng-deep .qd-filter__category-button--type-boolean{padding:0}:host ::ng-deep .qd-filter__category-button--type-date,:host ::ng-deep .qd-filter__category-button--type-dateRange,:host ::ng-deep .qd-filter__category-button--type-freeText{display:flex;flex-direction:row;align-items:center;padding-right:0;padding-left:0}:host ::ng-deep .qd-filter__category-button--type-date qd-chip,:host ::ng-deep .qd-filter__category-button--type-dateRange qd-chip,:host ::ng-deep .qd-filter__category-button--type-freeText qd-chip{height:1.5rem}:host ::ng-deep .qd-filter__category-button--open,:host ::ng-deep .qd-filter__category-button:hover,:host ::ng-deep .qd-filter__category-button:focus{border-color:#979797!important;color:#171717}:host ::ng-deep .qd-filter__category-button .qd-filter__category-icon{position:absolute;left:0;display:inline-flex;padding:0 .4375rem 0 .3125rem;font-size:1.25rem;line-height:2.125rem;pointer-events:none}:host ::ng-deep .qd-filter__category-button .qd-chip.filter{display:inline-flex;margin-left:.5rem}:host ::ng-deep .qd-filter__category-button .qd-chip.filter ::ng-deep .qd-chip__label{overflow:hidden;max-width:10ch;text-overflow:ellipsis}:host ::ng-deep .qd-filter__category-button .qd-filter__item-date+.qd-chip.filter ::ng-deep .qd-chip__label,:host ::ng-deep .qd-filter__category-button .qd-filter__item-date-range+.qd-chip.filter ::ng-deep .qd-chip__label{max-width:20ch}:host ::ng-deep .qd-filter__category-button--open{z-index:20}:host ::ng-deep .qd-filter__category--last{margin-right:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdFilterCategoryBooleanComponent, selector: "qd-filter-category-boolean", inputs: ["filterId", "categoryIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemDateCategoryComponent, selector: "qd-filter-category-date", inputs: ["filterId", "categoryIndex", "timePickerConfig", "data-test-id"] }, { kind: "component", type: QdFilterItemDateRangeCategoryComponent, selector: "qd-filter-category-date-range", inputs: ["filterId", "categoryIndex", "data-test-id", "timePickerConfig"] }, { kind: "component", type: QdFilterItemFreeTextCategoryComponent, selector: "qd-filter-category-free-text", inputs: ["filterId", "isInstantFiltering", "categoryIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSelectCategoryComponent, selector: "qd-filter-category-select", inputs: ["filterId", "categoryIndex", "data-test-id"] }] });
|
|
20716
20715
|
}
|
|
20717
20716
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterCategoryComponent, decorators: [{
|
|
20718
20717
|
type: Component,
|
|
20719
|
-
args: [{ selector: 'qd-filter-category', standalone: false, template: "<ng-container *ngIf=\"isBoolean\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-boolean\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-boolean'\"\n >\n </qd-filter-category-boolean>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDate\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date'\"\n ></qd-filter-category-date>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDateTime\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date'\"\n [timePickerConfig]=\"timePickerConfig\"\n ></qd-filter-category-date>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDateRange\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date-range\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date-range-'\"\n ></qd-filter-category-date-range>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDateTimeRange\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date-range\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date-range-'\"\n [timePickerConfig]=\"timePickerConfig\"\n ></qd-filter-category-date-range>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isFreeText\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-free-text\n [filterId]=\"filterId\"\n [isInstantFiltering]=\"isInstantFiltering\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-item'\"\n ></qd-filter-category-free-text>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isSelect\">\n <qd-filter-category-select\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId\"\n ></qd-filter-category-select>\n</ng-container>\n", styles: [":host{position:relative}:host ::ng-deep .qd-filter__category-button{position:relative;display:flex;align-items:center;justify-content:center;padding:0 .75rem 0 2rem;border:.0625rem solid rgb(213,213,213);margin:0 .75rem .75rem 0;background-color:#fff;color:#757575;cursor:pointer;font-size:.875rem;font-weight:400}:host ::ng-deep .qd-filter__category-button-caption{position:relative;display:flex;max-width:40ch;line-height:2.125rem}:host ::ng-deep .qd-filter__category-button-caption span{overflow:inherit;text-overflow:inherit;white-space:nowrap}:host ::ng-deep .qd-filter__category-button--type-boolean{padding:0}:host ::ng-deep .qd-filter__category-button--type-date,:host ::ng-deep .qd-filter__category-button--type-dateRange,:host ::ng-deep .qd-filter__category-button--type-freeText{display:flex;flex-direction:row;align-items:center;padding-right:0;padding-left:0}:host ::ng-deep .qd-filter__category-button--type-date qd-chip,:host ::ng-deep .qd-filter__category-button--type-dateRange qd-chip,:host ::ng-deep .qd-filter__category-button--type-freeText qd-chip{height:1.5rem}:host ::ng-deep .qd-filter__category-button--open,:host ::ng-deep .qd-filter__category-button:hover,:host ::ng-deep .qd-filter__category-button:focus{border-color:#979797!important;color:#171717}:host ::ng-deep .qd-filter__category-button .qd-filter__category-icon{position:absolute;left:0;display:inline-flex;padding:0 .4375rem 0 .3125rem;font-size:1.25rem;line-height:2.125rem;pointer-events:none}:host ::ng-deep .qd-filter__category-button .qd-chip.filter{display:inline-flex;margin-left:.5rem}:host ::ng-deep .qd-filter__category-button .qd-chip.filter ::ng-deep .qd-chip__label{overflow:hidden;max-width:10ch;text-overflow:ellipsis}:host ::ng-deep .qd-filter__category-button .qd-filter__item-date+.qd-chip.filter ::ng-deep .qd-chip__label,:host ::ng-deep .qd-filter__category-button .qd-filter__item-date-range+.qd-chip.filter ::ng-deep .qd-chip__label{max-width:20ch}:host ::ng-deep .qd-filter__category-button--open{z-index:20}:host ::ng-deep .qd-filter__category
|
|
20718
|
+
args: [{ selector: 'qd-filter-category', standalone: false, template: "<ng-container *ngIf=\"isBoolean\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-boolean\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-boolean'\"\n >\n </qd-filter-category-boolean>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDate\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date'\"\n ></qd-filter-category-date>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDateTime\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date'\"\n [timePickerConfig]=\"timePickerConfig\"\n ></qd-filter-category-date>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDateRange\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date-range\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date-range-'\"\n ></qd-filter-category-date-range>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isDateTimeRange\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-date-range\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-date-range-'\"\n [timePickerConfig]=\"timePickerConfig\"\n ></qd-filter-category-date-range>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isFreeText\">\n <div [class]=\"buttonClassName\">\n <qd-filter-category-free-text\n [filterId]=\"filterId\"\n [isInstantFiltering]=\"isInstantFiltering\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId + '-item'\"\n ></qd-filter-category-free-text>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isSelect\">\n <qd-filter-category-select\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [data-test-id]=\"testId\"\n ></qd-filter-category-select>\n</ng-container>\n", styles: [":host{position:relative}:host ::ng-deep .qd-filter__category-button{position:relative;display:flex;align-items:center;justify-content:center;padding:0 .75rem 0 2rem;border:.0625rem solid rgb(213,213,213);margin:0 .75rem .75rem 0;background-color:#fff;color:#757575;cursor:pointer;font-size:.875rem;font-weight:400}:host ::ng-deep .qd-filter__category-button-caption{position:relative;display:flex;max-width:40ch;line-height:2.125rem}:host ::ng-deep .qd-filter__category-button-caption span{overflow:inherit;text-overflow:inherit;white-space:nowrap}:host ::ng-deep .qd-filter__category-button--type-boolean{padding:0}:host ::ng-deep .qd-filter__category-button--type-date,:host ::ng-deep .qd-filter__category-button--type-dateRange,:host ::ng-deep .qd-filter__category-button--type-freeText{display:flex;flex-direction:row;align-items:center;padding-right:0;padding-left:0}:host ::ng-deep .qd-filter__category-button--type-date qd-chip,:host ::ng-deep .qd-filter__category-button--type-dateRange qd-chip,:host ::ng-deep .qd-filter__category-button--type-freeText qd-chip{height:1.5rem}:host ::ng-deep .qd-filter__category-button--open,:host ::ng-deep .qd-filter__category-button:hover,:host ::ng-deep .qd-filter__category-button:focus{border-color:#979797!important;color:#171717}:host ::ng-deep .qd-filter__category-button .qd-filter__category-icon{position:absolute;left:0;display:inline-flex;padding:0 .4375rem 0 .3125rem;font-size:1.25rem;line-height:2.125rem;pointer-events:none}:host ::ng-deep .qd-filter__category-button .qd-chip.filter{display:inline-flex;margin-left:.5rem}:host ::ng-deep .qd-filter__category-button .qd-chip.filter ::ng-deep .qd-chip__label{overflow:hidden;max-width:10ch;text-overflow:ellipsis}:host ::ng-deep .qd-filter__category-button .qd-filter__item-date+.qd-chip.filter ::ng-deep .qd-chip__label,:host ::ng-deep .qd-filter__category-button .qd-filter__item-date-range+.qd-chip.filter ::ng-deep .qd-chip__label{max-width:20ch}:host ::ng-deep .qd-filter__category-button--open{z-index:20}:host ::ng-deep .qd-filter__category--last{margin-right:1rem}\n"] }]
|
|
20720
20719
|
}], propDecorators: { filterId: [{
|
|
20721
20720
|
type: Input
|
|
20722
20721
|
}], isInstantFiltering: [{
|
|
@@ -21246,6 +21245,7 @@ class QdFilterModule {
|
|
|
21246
21245
|
QdCoreModule,
|
|
21247
21246
|
QdFormModule,
|
|
21248
21247
|
QdIconModule,
|
|
21248
|
+
QdPopoverModule,
|
|
21249
21249
|
QdTooltipModule, i1$1.StoreFeatureModule], exports: [QdFilterComponent] });
|
|
21250
21250
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterModule, imports: [CommonModule,
|
|
21251
21251
|
FormsModule,
|
|
@@ -21255,6 +21255,7 @@ class QdFilterModule {
|
|
|
21255
21255
|
QdCoreModule,
|
|
21256
21256
|
QdFormModule,
|
|
21257
21257
|
QdIconModule,
|
|
21258
|
+
QdPopoverModule,
|
|
21258
21259
|
QdTooltipModule,
|
|
21259
21260
|
StoreModule.forFeature('qdUiFilter', filterReducer)] });
|
|
21260
21261
|
}
|
|
@@ -21270,6 +21271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
21270
21271
|
QdCoreModule,
|
|
21271
21272
|
QdFormModule,
|
|
21272
21273
|
QdIconModule,
|
|
21274
|
+
QdPopoverModule,
|
|
21273
21275
|
QdTooltipModule,
|
|
21274
21276
|
StoreModule.forFeature('qdUiFilter', filterReducer)
|
|
21275
21277
|
],
|
|
@@ -22399,6 +22401,8 @@ const updateSort$1 = createAction('[QdUi Table] Update Sort', props());
|
|
|
22399
22401
|
const setRequestState$1 = createAction('[QdUi Table] Set Loading State', props());
|
|
22400
22402
|
const connect$1 = createAction('[QdUi Table]', props());
|
|
22401
22403
|
const resetConnectorStates$1 = createAction('[QdUi Table] Reset Connector States', props());
|
|
22404
|
+
const setLastVisitedRow$1 = createAction('[QdUi Table] Set Last Visited Row', props());
|
|
22405
|
+
const clearLastVisitedRow$1 = createAction('[QdUi Table] Clear Last Visited Row', props());
|
|
22402
22406
|
const deleteTableState = createAction('[QdUi Table] Delete Table State', props());
|
|
22403
22407
|
const QdTableActions = {
|
|
22404
22408
|
initTableState,
|
|
@@ -22418,6 +22422,8 @@ const QdTableActions = {
|
|
|
22418
22422
|
setRequestState: setRequestState$1,
|
|
22419
22423
|
connect: connect$1,
|
|
22420
22424
|
resetConnectorStates: resetConnectorStates$1,
|
|
22425
|
+
setLastVisitedRow: setLastVisitedRow$1,
|
|
22426
|
+
clearLastVisitedRow: clearLastVisitedRow$1,
|
|
22421
22427
|
deleteTableState
|
|
22422
22428
|
};
|
|
22423
22429
|
|
|
@@ -22445,6 +22451,15 @@ var QdTableRequestState;
|
|
|
22445
22451
|
QdTableRequestState[QdTableRequestState["SUCCESS"] = 1] = "SUCCESS";
|
|
22446
22452
|
})(QdTableRequestState || (QdTableRequestState = {}));
|
|
22447
22453
|
|
|
22454
|
+
function resolveRowIdentifier(row, rowIndex, trackRowBy) {
|
|
22455
|
+
if (trackRowBy) {
|
|
22456
|
+
const value = trackRowBy(row);
|
|
22457
|
+
if (value !== undefined && value !== null && (typeof value === 'string' || typeof value === 'number'))
|
|
22458
|
+
return value;
|
|
22459
|
+
}
|
|
22460
|
+
return row.uid ?? rowIndex;
|
|
22461
|
+
}
|
|
22462
|
+
|
|
22448
22463
|
class QdTableStoreSelectorService {
|
|
22449
22464
|
_tableId;
|
|
22450
22465
|
set tableId(tableId) {
|
|
@@ -22474,13 +22489,16 @@ class QdTableStoreSelectorService {
|
|
|
22474
22489
|
selectedRows() {
|
|
22475
22490
|
return createSelector(this.selectTables, tables => this.getTable(tables)?.selectedRows ?? []);
|
|
22476
22491
|
}
|
|
22477
|
-
isTableRowSelected(rowIndex) {
|
|
22492
|
+
isTableRowSelected(rowIndex, trackRowBy) {
|
|
22478
22493
|
return createSelector(this.selectTables, tables => {
|
|
22479
22494
|
const table = this.getTable(tables);
|
|
22480
22495
|
if (!table)
|
|
22481
22496
|
return false;
|
|
22482
|
-
const
|
|
22483
|
-
|
|
22497
|
+
const row = table.data[rowIndex];
|
|
22498
|
+
if (!row)
|
|
22499
|
+
return false;
|
|
22500
|
+
const identifier = resolveRowIdentifier(row, rowIndex, trackRowBy);
|
|
22501
|
+
return table.selectedRows?.includes(identifier) || false;
|
|
22484
22502
|
});
|
|
22485
22503
|
}
|
|
22486
22504
|
recentSecondaryAction() {
|
|
@@ -22570,6 +22588,9 @@ class QdTableStoreSelectorService {
|
|
|
22570
22588
|
};
|
|
22571
22589
|
});
|
|
22572
22590
|
}
|
|
22591
|
+
lastVisitedRowIdentifier() {
|
|
22592
|
+
return createSelector(this.selectTables, tables => this.getTable(tables)?.lastVisitedRowIdentifier);
|
|
22593
|
+
}
|
|
22573
22594
|
selectTables(state) {
|
|
22574
22595
|
return state.qdUiTable;
|
|
22575
22596
|
}
|
|
@@ -22608,14 +22629,14 @@ class QdTableStoreService {
|
|
|
22608
22629
|
updateTableStateData(data) {
|
|
22609
22630
|
this.store.dispatch(QdTableActions.updateTableStateData({ tableId: this.tableId, data }));
|
|
22610
22631
|
}
|
|
22611
|
-
updateTableStateRowToSelected(
|
|
22612
|
-
this.store.dispatch(QdTableActions.updateTableStateRowToSelected({ tableId: this.tableId,
|
|
22632
|
+
updateTableStateRowToSelected(rowIdentifier) {
|
|
22633
|
+
this.store.dispatch(QdTableActions.updateTableStateRowToSelected({ tableId: this.tableId, rowIdentifier }));
|
|
22613
22634
|
}
|
|
22614
|
-
updateTableStateSingleRowToSelected(
|
|
22615
|
-
this.store.dispatch(QdTableActions.updateTableStateSingleRowToSelected({ tableId: this.tableId,
|
|
22635
|
+
updateTableStateSingleRowToSelected(rowIdentifier) {
|
|
22636
|
+
this.store.dispatch(QdTableActions.updateTableStateSingleRowToSelected({ tableId: this.tableId, rowIdentifier }));
|
|
22616
22637
|
}
|
|
22617
|
-
updateTableStateRowToUnselected(
|
|
22618
|
-
this.store.dispatch(QdTableActions.updateTableStateRowToUnselected({ tableId: this.tableId,
|
|
22638
|
+
updateTableStateRowToUnselected(rowIdentifier) {
|
|
22639
|
+
this.store.dispatch(QdTableActions.updateTableStateRowToUnselected({ tableId: this.tableId, rowIdentifier }));
|
|
22619
22640
|
}
|
|
22620
22641
|
updateTableStateRecentSecondaryAction(action) {
|
|
22621
22642
|
this.store.dispatch(QdTableActions.updateTableStateRecentSecondaryAction({ tableId: this.tableId, recentSecondaryAction: action }));
|
|
@@ -22647,6 +22668,12 @@ class QdTableStoreService {
|
|
|
22647
22668
|
connect(connectorName, connectorState, connectorCriteria) {
|
|
22648
22669
|
this.store.dispatch(QdTableActions.connect({ tableId: this.tableId, connectorCriteria, connectorName, connectorState }));
|
|
22649
22670
|
}
|
|
22671
|
+
setLastVisitedRow(rowIdentifier) {
|
|
22672
|
+
this.store.dispatch(QdTableActions.setLastVisitedRow({ tableId: this.tableId, rowIdentifier }));
|
|
22673
|
+
}
|
|
22674
|
+
clearLastVisitedRow() {
|
|
22675
|
+
this.store.dispatch(QdTableActions.clearLastVisitedRow({ tableId: this.tableId }));
|
|
22676
|
+
}
|
|
22650
22677
|
resetConnectorStates() {
|
|
22651
22678
|
this.store.dispatch(QdTableActions.resetConnectorStates({ tableId: this.tableId }));
|
|
22652
22679
|
}
|
|
@@ -22667,8 +22694,8 @@ class QdTableStoreService {
|
|
|
22667
22694
|
.select(this.tableStoreSelectorService.selectedRows())
|
|
22668
22695
|
.pipe(filter(selectedRows => selectedRows !== undefined));
|
|
22669
22696
|
}
|
|
22670
|
-
isTableRowSelected$(rowIndex) {
|
|
22671
|
-
return this.store.select(this.tableStoreSelectorService.isTableRowSelected(rowIndex));
|
|
22697
|
+
isTableRowSelected$(rowIndex, trackRowBy) {
|
|
22698
|
+
return this.store.select(this.tableStoreSelectorService.isTableRowSelected(rowIndex, trackRowBy));
|
|
22672
22699
|
}
|
|
22673
22700
|
recentSecondaryAction$() {
|
|
22674
22701
|
return this.store
|
|
@@ -22705,6 +22732,9 @@ class QdTableStoreService {
|
|
|
22705
22732
|
selectDataResolutionCriteria$() {
|
|
22706
22733
|
return this.store.select(this.tableStoreSelectorService.selectDataResolutionCriteria());
|
|
22707
22734
|
}
|
|
22735
|
+
lastVisitedRowIdentifier$() {
|
|
22736
|
+
return this.store.select(this.tableStoreSelectorService.lastVisitedRowIdentifier());
|
|
22737
|
+
}
|
|
22708
22738
|
selectConnectorState$(connectorName) {
|
|
22709
22739
|
return this.store.select(this.tableStoreSelectorService.selectConnectorState(connectorName));
|
|
22710
22740
|
}
|
|
@@ -23104,24 +23134,27 @@ class QdTableRowSelectionService {
|
|
|
23104
23134
|
]).pipe(skip(this._config.selection?.emitOutputInitially ? 0 : 1), map(([tableData]) => (tableData || []).map(this.getIndexedRows).filter(isRowSelected)));
|
|
23105
23135
|
}
|
|
23106
23136
|
isRowSelected(row, index) {
|
|
23107
|
-
|
|
23137
|
+
const identifier = resolveRowIdentifier(row, index, this._config.trackRowBy);
|
|
23138
|
+
return this._selectedRows.includes(identifier);
|
|
23108
23139
|
}
|
|
23109
23140
|
getIndexedRows(row, index) {
|
|
23110
23141
|
return { ...row, index };
|
|
23111
23142
|
}
|
|
23112
23143
|
isRowSelected$(rowIndex) {
|
|
23113
|
-
return this.tableStoreService.isTableRowSelected$(rowIndex);
|
|
23144
|
+
return this.tableStoreService.isTableRowSelected$(rowIndex, this._config.trackRowBy);
|
|
23114
23145
|
}
|
|
23115
|
-
setRowSelected(rowIndex) {
|
|
23146
|
+
setRowSelected(rowIndex, rowData) {
|
|
23147
|
+
const identifier = resolveRowIdentifier(rowData, rowIndex, this._config.trackRowBy);
|
|
23116
23148
|
if (this._config.selection.type === 'singleSelect') {
|
|
23117
|
-
this.tableStoreService.updateTableStateSingleRowToSelected(
|
|
23149
|
+
this.tableStoreService.updateTableStateSingleRowToSelected(identifier);
|
|
23118
23150
|
}
|
|
23119
23151
|
else {
|
|
23120
|
-
this.tableStoreService.updateTableStateRowToSelected(
|
|
23152
|
+
this.tableStoreService.updateTableStateRowToSelected(identifier);
|
|
23121
23153
|
}
|
|
23122
23154
|
}
|
|
23123
|
-
setRowUnselected(rowIndex) {
|
|
23124
|
-
this.
|
|
23155
|
+
setRowUnselected(rowIndex, rowData) {
|
|
23156
|
+
const identifier = resolveRowIdentifier(rowData, rowIndex, this._config.trackRowBy);
|
|
23157
|
+
this.tableStoreService.updateTableStateRowToUnselected(identifier);
|
|
23125
23158
|
}
|
|
23126
23159
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
23127
23160
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowSelectionService });
|
|
@@ -23560,6 +23593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
23560
23593
|
class QdTableRowSelectionComponent {
|
|
23561
23594
|
rowSelectionService = inject(QdTableRowSelectionService);
|
|
23562
23595
|
rowIndex;
|
|
23596
|
+
rowData;
|
|
23563
23597
|
testId;
|
|
23564
23598
|
get dataTestId() {
|
|
23565
23599
|
return this.testId;
|
|
@@ -23578,20 +23612,22 @@ class QdTableRowSelectionComponent {
|
|
|
23578
23612
|
}
|
|
23579
23613
|
handleChange(event) {
|
|
23580
23614
|
if (event.target.checked) {
|
|
23581
|
-
this.rowSelectionService.setRowSelected(this.rowIndex);
|
|
23615
|
+
this.rowSelectionService.setRowSelected(this.rowIndex, this.rowData);
|
|
23582
23616
|
}
|
|
23583
23617
|
else {
|
|
23584
|
-
this.rowSelectionService.setRowUnselected(this.rowIndex);
|
|
23618
|
+
this.rowSelectionService.setRowUnselected(this.rowIndex, this.rowData);
|
|
23585
23619
|
}
|
|
23586
23620
|
}
|
|
23587
23621
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23588
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowSelectionComponent, isStandalone: false, selector: "[qd-table-row-selection]", inputs: { rowIndex: "rowIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"selectionType\">\n <ng-container *ngSwitchCase=\"'singleSelect'\">\n <input\n type=\"radio\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (click)=\"stopPropagation($event)\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-radio'\"\n />\n </ng-container>\n <ng-container *ngSwitchCase=\"'multiSelect'\">\n <input\n type=\"checkbox\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (click)=\"stopPropagation($event)\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-checkbox'\"\n />\n </ng-container>\n</ng-container>\n", styles: ["input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
23622
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowSelectionComponent, isStandalone: false, selector: "[qd-table-row-selection]", inputs: { rowIndex: "rowIndex", rowData: "rowData", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"selectionType\">\n <ng-container *ngSwitchCase=\"'singleSelect'\">\n <input\n type=\"radio\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (click)=\"stopPropagation($event)\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-radio'\"\n />\n </ng-container>\n <ng-container *ngSwitchCase=\"'multiSelect'\">\n <input\n type=\"checkbox\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (click)=\"stopPropagation($event)\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-checkbox'\"\n />\n </ng-container>\n</ng-container>\n", styles: ["input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
23589
23623
|
}
|
|
23590
23624
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowSelectionComponent, decorators: [{
|
|
23591
23625
|
type: Component,
|
|
23592
23626
|
args: [{ selector: '[qd-table-row-selection]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container [ngSwitch]=\"selectionType\">\n <ng-container *ngSwitchCase=\"'singleSelect'\">\n <input\n type=\"radio\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (click)=\"stopPropagation($event)\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-radio'\"\n />\n </ng-container>\n <ng-container *ngSwitchCase=\"'multiSelect'\">\n <input\n type=\"checkbox\"\n [name]=\"'qd-table-selection__' + tableId\"\n [checked]=\"isRowSelected$() | async\"\n (click)=\"stopPropagation($event)\"\n (change)=\"handleChange($event)\"\n [attr.data-test-id]=\"testId + '-checkbox'\"\n />\n </ng-container>\n</ng-container>\n", styles: ["input{cursor:pointer}\n"] }]
|
|
23593
23627
|
}], propDecorators: { rowIndex: [{
|
|
23594
23628
|
type: Input
|
|
23629
|
+
}], rowData: [{
|
|
23630
|
+
type: Input
|
|
23595
23631
|
}], testId: [{
|
|
23596
23632
|
type: Input,
|
|
23597
23633
|
args: ['data-test-id']
|
|
@@ -23674,11 +23710,11 @@ class QdTableRowComponent {
|
|
|
23674
23710
|
return this.config.columns.find(column => column.column === item)?.type || 'blank';
|
|
23675
23711
|
}
|
|
23676
23712
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23677
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowComponent, isStandalone: false, selector: "[qd-table-row]", inputs: { config: "config", rowData: "rowData", rowIndex: "rowIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.hostTestId" } }, providers: [QdDataFacetsContextService], ngImport: i0, template: "<td\n qd-table-row-selection\n *ngIf=\"config.selection\"\n class=\"qd-table__body-cell--selection\"\n [rowIndex]=\"rowIndex\"\n [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n <td\n *ngIf=\"hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-merged'\"\n >\n <div *ngFor=\"let item of item; let first = first\">\n <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n <span class=\"qd-table__body-cell\">\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </span>\n </div>\n </td>\n\n <td\n *ngIf=\"!hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-' + item\"\n >\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </td>\n</ng-container>\n\n<td\n *ngIf=\"config.secondaryActions?.length > 0\"\n qd-table-row-actions-secondary-menu\n class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [i18ns]=\"config.i18ns\"\n [testId]=\"testId + '-secondary-actions'\"\n [viewonly]=\"config.viewonly\"\n [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n <span class=\"qd-table__body-cell--merged-headings\">\n {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n </span>\n </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdTableRowActionsSecondaryMenuComponent, selector: "[qd-table-row-actions-secondary-menu]", inputs: ["rowIndex", "rowData", "i18ns", "testId", "viewonly"] }, { kind: "component", type: QdTableRowSelectionComponent, selector: "[qd-table-row-selection]", inputs: ["rowIndex", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
23713
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowComponent, isStandalone: false, selector: "[qd-table-row]", inputs: { config: "config", rowData: "rowData", rowIndex: "rowIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.hostTestId" } }, providers: [QdDataFacetsContextService], ngImport: i0, template: "<td\n qd-table-row-selection\n *ngIf=\"config.selection\"\n class=\"qd-table__body-cell--selection\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n <td\n *ngIf=\"hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-merged'\"\n >\n <div *ngFor=\"let item of item; let first = first\">\n <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n <span class=\"qd-table__body-cell\">\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </span>\n </div>\n </td>\n\n <td\n *ngIf=\"!hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-' + item\"\n >\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </td>\n</ng-container>\n\n<td\n *ngIf=\"config.secondaryActions?.length > 0\"\n qd-table-row-actions-secondary-menu\n class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [i18ns]=\"config.i18ns\"\n [testId]=\"testId + '-secondary-actions'\"\n [viewonly]=\"config.viewonly\"\n [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n <span class=\"qd-table__body-cell--merged-headings\">\n {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n </span>\n </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdTableRowActionsSecondaryMenuComponent, selector: "[qd-table-row-actions-secondary-menu]", inputs: ["rowIndex", "rowData", "i18ns", "testId", "viewonly"] }, { kind: "component", type: QdTableRowSelectionComponent, selector: "[qd-table-row-selection]", inputs: ["rowIndex", "rowData", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
23678
23714
|
}
|
|
23679
23715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowComponent, decorators: [{
|
|
23680
23716
|
type: Component,
|
|
23681
|
-
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-' + item\"\n >\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </td>\n</ng-container>\n\n<td\n *ngIf=\"config.secondaryActions?.length > 0\"\n qd-table-row-actions-secondary-menu\n class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [i18ns]=\"config.i18ns\"\n [testId]=\"testId + '-secondary-actions'\"\n [viewonly]=\"config.viewonly\"\n [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n <span class=\"qd-table__body-cell--merged-headings\">\n {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n </span>\n </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"] }]
|
|
23717
|
+
args: [{ selector: '[qd-table-row]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [QdDataFacetsContextService], standalone: false, template: "<td\n qd-table-row-selection\n *ngIf=\"config.selection\"\n class=\"qd-table__body-cell--selection\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n <td\n *ngIf=\"hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-merged'\"\n >\n <div *ngFor=\"let item of item; let first = first\">\n <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n <span class=\"qd-table__body-cell\">\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </span>\n </div>\n </td>\n\n <td\n *ngIf=\"!hasMergedColumns(item)\"\n [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n [attr.data-test-id]=\"testId + '-cell-' + item\"\n >\n <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n </td>\n</ng-container>\n\n<td\n *ngIf=\"config.secondaryActions?.length > 0\"\n qd-table-row-actions-secondary-menu\n class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n [rowIndex]=\"rowIndex\"\n [rowData]=\"rowData\"\n [i18ns]=\"config.i18ns\"\n [testId]=\"testId + '-secondary-actions'\"\n [viewonly]=\"config.viewonly\"\n [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n <span class=\"qd-table__body-cell--merged-headings\">\n {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n </span>\n </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"] }]
|
|
23682
23718
|
}], propDecorators: { config: [{
|
|
23683
23719
|
type: Input
|
|
23684
23720
|
}], rowData: [{
|
|
@@ -23696,20 +23732,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
23696
23732
|
class QdTableBodyComponent {
|
|
23697
23733
|
tableStoreService = inject(QdTableStoreService);
|
|
23698
23734
|
resolverService = inject(QdTableResolverService);
|
|
23735
|
+
cdr = inject(ChangeDetectorRef);
|
|
23699
23736
|
config;
|
|
23700
23737
|
data;
|
|
23701
23738
|
testId;
|
|
23702
23739
|
isLoading$;
|
|
23740
|
+
highlightedRowIdentifier;
|
|
23703
23741
|
_primaryActionRefreshSubscription;
|
|
23704
23742
|
constructor() {
|
|
23705
23743
|
this.isLoading$ = this.tableStoreService.selectIsLoading$().pipe(debounceTime$1(400));
|
|
23706
23744
|
}
|
|
23745
|
+
ngOnInit() {
|
|
23746
|
+
this.initHighlight();
|
|
23747
|
+
}
|
|
23707
23748
|
ngOnDestroy() {
|
|
23708
23749
|
this._primaryActionRefreshSubscription?.unsubscribe();
|
|
23709
23750
|
}
|
|
23751
|
+
isLastVisitedRow(rowData, rowIndex) {
|
|
23752
|
+
if (this.highlightedRowIdentifier === undefined)
|
|
23753
|
+
return false;
|
|
23754
|
+
return resolveRowIdentifier(rowData, rowIndex, this.config.trackRowBy) === this.highlightedRowIdentifier;
|
|
23755
|
+
}
|
|
23710
23756
|
primaryAction(rowData, index) {
|
|
23711
23757
|
if (!this.config.primaryAction?.handler)
|
|
23712
23758
|
return console.warn('QD-UI | QdTable - No handler defined for primary action.');
|
|
23759
|
+
if (this.config.primaryAction?.highlightOnRevisit) {
|
|
23760
|
+
this.tableStoreService.setLastVisitedRow(resolveRowIdentifier(rowData, index, this.config.trackRowBy));
|
|
23761
|
+
}
|
|
23713
23762
|
const result = this.config.primaryAction?.handler({ rowData, index });
|
|
23714
23763
|
if (!this.config.primaryAction?.refresh?.isEnabled)
|
|
23715
23764
|
return;
|
|
@@ -23719,16 +23768,28 @@ class QdTableBodyComponent {
|
|
|
23719
23768
|
}
|
|
23720
23769
|
this.triggerRefresh();
|
|
23721
23770
|
}
|
|
23771
|
+
initHighlight() {
|
|
23772
|
+
this.tableStoreService
|
|
23773
|
+
.lastVisitedRowIdentifier$()
|
|
23774
|
+
.pipe(take(1))
|
|
23775
|
+
.subscribe(id => {
|
|
23776
|
+
if (id === undefined)
|
|
23777
|
+
return;
|
|
23778
|
+
this.highlightedRowIdentifier = id;
|
|
23779
|
+
this.tableStoreService.clearLastVisitedRow();
|
|
23780
|
+
this.cdr.markForCheck();
|
|
23781
|
+
});
|
|
23782
|
+
}
|
|
23722
23783
|
triggerRefresh() {
|
|
23723
23784
|
const pageIndex = this.config.primaryAction?.refresh?.page;
|
|
23724
23785
|
this.resolverService.refresh(pageIndex !== undefined ? { pageIndex } : undefined);
|
|
23725
23786
|
}
|
|
23726
23787
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23727
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableBodyComponent, isStandalone: false, selector: "[qd-table-body]", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-table__body qd-table__body--plain" }, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex\">\n <tr\n qd-table-row\n [rowData]=\"rowData\"\n [rowIndex]=\"rowIndex\"\n [config]=\"config\"\n [class]=\"'qd-table__body-row'\"\n [data-test-id]=\"testId + '-row-' + rowIndex\"\n (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n [class.hasAction]=\"config.primaryAction\"\n ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "component", type: QdTableRowComponent, selector: "[qd-table-row]", inputs: ["config", "rowData", "rowIndex", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
23788
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableBodyComponent, isStandalone: false, selector: "[qd-table-body]", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-table__body qd-table__body--plain" }, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex\">\n <tr\n qd-table-row\n [rowData]=\"rowData\"\n [rowIndex]=\"rowIndex\"\n [config]=\"config\"\n [class]=\"'qd-table__body-row'\"\n [data-test-id]=\"testId + '-row-' + rowIndex\"\n (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n [class.hasAction]=\"config.primaryAction\"\n [class.qd-table__body-row--last-visited]=\"isLastVisitedRow(rowData, rowIndex)\"\n ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.qd-table__body--plain tr.qd-table__body-row--last-visited{animation:last-visited-fade 1.5s linear forwards}@keyframes last-visited-fade{0%,33%{background-color:#c3e8cd}to{background-color:transparent}}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "component", type: QdTableRowComponent, selector: "[qd-table-row]", inputs: ["config", "rowData", "rowIndex", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
23728
23789
|
}
|
|
23729
23790
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableBodyComponent, decorators: [{
|
|
23730
23791
|
type: Component,
|
|
23731
|
-
args: [{ selector: '[qd-table-body]', host: { class: 'qd-table__body qd-table__body--plain' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex\">\n <tr\n qd-table-row\n [rowData]=\"rowData\"\n [rowIndex]=\"rowIndex\"\n [config]=\"config\"\n [class]=\"'qd-table__body-row'\"\n [data-test-id]=\"testId + '-row-' + rowIndex\"\n (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n [class.hasAction]=\"config.primaryAction\"\n ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"] }]
|
|
23792
|
+
args: [{ selector: '[qd-table-body]', host: { class: 'qd-table__body qd-table__body--plain' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex\">\n <tr\n qd-table-row\n [rowData]=\"rowData\"\n [rowIndex]=\"rowIndex\"\n [config]=\"config\"\n [class]=\"'qd-table__body-row'\"\n [data-test-id]=\"testId + '-row-' + rowIndex\"\n (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n [class.hasAction]=\"config.primaryAction\"\n [class.qd-table__body-row--last-visited]=\"isLastVisitedRow(rowData, rowIndex)\"\n ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.qd-table__body--plain tr.qd-table__body-row--last-visited{animation:last-visited-fade 1.5s linear forwards}@keyframes last-visited-fade{0%,33%{background-color:#c3e8cd}to{background-color:transparent}}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"] }]
|
|
23732
23793
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
23733
23794
|
type: Input
|
|
23734
23795
|
}], data: [{
|
|
@@ -24258,6 +24319,9 @@ class QdTableComponent {
|
|
|
24258
24319
|
const action = this.config.secondaryActions?.find(a => a.type === recentAction.type);
|
|
24259
24320
|
if (!action?.handler)
|
|
24260
24321
|
return console.warn('QD-UI | QdTable - No handler defined for secondary action:', recentAction.type);
|
|
24322
|
+
if (action.highlightOnRevisit) {
|
|
24323
|
+
this.tableStoreService.setLastVisitedRow(resolveRowIdentifier(recentAction.rowData, recentAction.index, this.config.trackRowBy));
|
|
24324
|
+
}
|
|
24261
24325
|
const result = action.handler(recentAction);
|
|
24262
24326
|
if (action.refresh?.isEnabled)
|
|
24263
24327
|
this.processSecondaryActionRefresh(result, action.refresh);
|
|
@@ -24271,13 +24335,14 @@ class QdTableComponent {
|
|
|
24271
24335
|
'The table uid has to match the path of the server side event.');
|
|
24272
24336
|
return;
|
|
24273
24337
|
}
|
|
24274
|
-
if (!this.pushEventsService.isConnectedOrConnecting()) {
|
|
24338
|
+
if (!this.pushEventsService || !this.pushEventsService.isConnectedOrConnecting()) {
|
|
24275
24339
|
console.error('QD-UI | QdTable - You have to connect the QdPushEventsService on your own ' +
|
|
24276
24340
|
'if you enable the refreshOnPushEvent flag in the table.');
|
|
24277
24341
|
return;
|
|
24278
24342
|
}
|
|
24343
|
+
const pushEventsService = this.pushEventsService;
|
|
24279
24344
|
const events = [...(this.config?.refreshingEvents || []), 'RESOURCE_UPDATED'];
|
|
24280
|
-
const combinedEvents$ = merge(...events.map(eventName =>
|
|
24345
|
+
const combinedEvents$ = merge(...events.map(eventName => pushEventsService.observe(eventName)));
|
|
24281
24346
|
this._pushEventsSubscription = combinedEvents$
|
|
24282
24347
|
.pipe(filter(messageEvent => {
|
|
24283
24348
|
try {
|
|
@@ -24311,6 +24376,13 @@ class QdTableComponent {
|
|
|
24311
24376
|
if (!this.config.i18ns) {
|
|
24312
24377
|
console.warn('QD-UI | QdTable - No translations available for the secondaryActions.');
|
|
24313
24378
|
}
|
|
24379
|
+
if (this.hasHighlightOnRevisit() && !this.config.uid) {
|
|
24380
|
+
console.warn('QD-UI | QdTable - A uid has to be defined when highlightOnRevisit is enabled. ' +
|
|
24381
|
+
'Without a uid, the table state does not persist across navigation.');
|
|
24382
|
+
}
|
|
24383
|
+
}
|
|
24384
|
+
hasHighlightOnRevisit() {
|
|
24385
|
+
return (!!this.config.primaryAction?.highlightOnRevisit || !!this.config.secondaryActions?.some(a => a.highlightOnRevisit));
|
|
24314
24386
|
}
|
|
24315
24387
|
/**
|
|
24316
24388
|
* @description Can be deleted when the property "mainColumnNotFillingWidth" is dropped.
|
|
@@ -25266,6 +25338,8 @@ const connect = (state, tableId, newConnectorCriteria, connectorName, connectorS
|
|
|
25266
25338
|
connectors: updatedConnectors
|
|
25267
25339
|
});
|
|
25268
25340
|
};
|
|
25341
|
+
const setLastVisitedRow = (state, tableId, rowIdentifier) => updateStateWithNewTable(state, tableId, { ...state[tableId], lastVisitedRowIdentifier: rowIdentifier });
|
|
25342
|
+
const clearLastVisitedRow = (state, tableId) => updateStateWithNewTable(state, tableId, { ...state[tableId], lastVisitedRowIdentifier: undefined });
|
|
25269
25343
|
const resetConnectorStates = (state, tableId) => {
|
|
25270
25344
|
const { connectors } = state[tableId];
|
|
25271
25345
|
return updateStateWithNewTable(state, tableId, {
|
|
@@ -25293,10 +25367,9 @@ const _tableReducer = createReducer(initialState, on(QdTableActions.initTableSta
|
|
|
25293
25367
|
if (state[tableId].selectedRows)
|
|
25294
25368
|
return state;
|
|
25295
25369
|
return updateTableStateSelectedRows(state, tableId, selectedRows);
|
|
25296
|
-
}),
|
|
25297
|
-
|
|
25298
|
-
|
|
25299
|
-
])), on(QdTableActions.updateTableStateSingleRowToSelected, (state, { tableId, rowIndex }) => updateTableStateSelectedRows(state, tableId, [state[tableId].data[rowIndex].uid || rowIndex])), on(QdTableActions.updateTableStateRowToUnselected, (state, { tableId, rowIndex }) => updateTableStateSelectedRows(state, tableId, (state[tableId].selectedRows ?? []).filter(rowIdentifier => rowIdentifier !== rowIndex && rowIdentifier !== state[tableId].data[rowIndex].uid))), on(QdTableActions.updateTableStateRecentSecondaryAction, (state, { tableId, recentSecondaryAction: recentSecondaryAction }) => updateTableStateRecentSecondaryAction(state, tableId, recentSecondaryAction)), on(QdTableActions.setupPagination, (state, { tableId, pageSize }) => setupPagination(state, tableId, pageSize)), on(QdTableActions.setPage, (state, { tableId, pageIndex, pageSize, totalCount, data }) => setPage(state, tableId, pageIndex, pageSize, totalCount, data)), on(QdTableActions.setPageSize, (state, { tableId, pageSize }) => setPageSize(state, tableId, pageSize)), on(QdTableActions.setPageParams, (state, { tableId, pageIndex, pageSize, totalCount }) => setPageParams(state, tableId, pageIndex, pageSize, totalCount)), on(QdTableActions.setupSort, (state, { tableId, columns }) => setupSort(state, tableId, columns)), on(QdTableActions.setSort, (state, { tableId, column, direction }) => setSort(state, tableId, column, direction)), on(QdTableActions.updateSort, (state, { tableId, column, direction }) => updateSort(state, tableId, column, direction)), on(QdTableActions.setRequestState, (state, { tableId, requestState }) => setRequestState(state, tableId, requestState)), on(QdTableActions.connect, (state, { tableId, connectorName, connectorCriteria, connectorState }) => connect(state, tableId, connectorCriteria, connectorName, connectorState)), on(QdTableActions.resetConnectorStates, (state, { tableId }) => resetConnectorStates(state, tableId)), on(QdTableActions.deleteTableState, (state, { tableId }) => omit({ ...state }, tableId)));
|
|
25370
|
+
}),
|
|
25371
|
+
// TODO: Remove QdTreeData references from table — Tree has been extracted into its own component
|
|
25372
|
+
on(QdTableActions.updateTableStateData, (state, { tableId, data }) => updateTableStateData(state, tableId, data)), on(QdTableActions.updateTableStateRowToSelected, (state, { tableId, rowIdentifier }) => updateTableStateSelectedRows(state, tableId, [...(state[tableId].selectedRows ?? []), rowIdentifier])), on(QdTableActions.updateTableStateSingleRowToSelected, (state, { tableId, rowIdentifier }) => updateTableStateSelectedRows(state, tableId, [rowIdentifier])), on(QdTableActions.updateTableStateRowToUnselected, (state, { tableId, rowIdentifier }) => updateTableStateSelectedRows(state, tableId, (state[tableId].selectedRows ?? []).filter(id => id !== rowIdentifier))), on(QdTableActions.updateTableStateRecentSecondaryAction, (state, { tableId, recentSecondaryAction: recentSecondaryAction }) => updateTableStateRecentSecondaryAction(state, tableId, recentSecondaryAction)), on(QdTableActions.setupPagination, (state, { tableId, pageSize }) => setupPagination(state, tableId, pageSize)), on(QdTableActions.setPage, (state, { tableId, pageIndex, pageSize, totalCount, data }) => setPage(state, tableId, pageIndex, pageSize, totalCount, data)), on(QdTableActions.setPageSize, (state, { tableId, pageSize }) => setPageSize(state, tableId, pageSize)), on(QdTableActions.setPageParams, (state, { tableId, pageIndex, pageSize, totalCount }) => setPageParams(state, tableId, pageIndex, pageSize, totalCount)), on(QdTableActions.setupSort, (state, { tableId, columns }) => setupSort(state, tableId, columns)), on(QdTableActions.setSort, (state, { tableId, column, direction }) => setSort(state, tableId, column, direction)), on(QdTableActions.updateSort, (state, { tableId, column, direction }) => updateSort(state, tableId, column, direction)), on(QdTableActions.setRequestState, (state, { tableId, requestState }) => setRequestState(state, tableId, requestState)), on(QdTableActions.connect, (state, { tableId, connectorName, connectorCriteria, connectorState }) => connect(state, tableId, connectorCriteria, connectorName, connectorState)), on(QdTableActions.resetConnectorStates, (state, { tableId }) => resetConnectorStates(state, tableId)), on(QdTableActions.setLastVisitedRow, (state, { tableId, rowIdentifier }) => setLastVisitedRow(state, tableId, rowIdentifier)), on(QdTableActions.clearLastVisitedRow, (state, { tableId }) => clearLastVisitedRow(state, tableId)), on(QdTableActions.deleteTableState, (state, { tableId }) => omit({ ...state }, tableId)));
|
|
25300
25373
|
function tableReducer(state, action) {
|
|
25301
25374
|
return _tableReducer(state, action);
|
|
25302
25375
|
}
|