@quadrel-enterprise-ui/framework 20.4.0 → 20.5.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 +35 -30
- package/fesm2022/quadrel-enterprise-ui-framework.mjs.map +1 -1
- package/index.d.ts +14 -9
- 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
|
],
|
|
@@ -32118,6 +32120,9 @@ class QdQuickEditComponent {
|
|
|
32118
32120
|
get visibleColumns() {
|
|
32119
32121
|
return this.config.columns.filter(column => !column.isHidden);
|
|
32120
32122
|
}
|
|
32123
|
+
trackByColumnName(_, column) {
|
|
32124
|
+
return column.name;
|
|
32125
|
+
}
|
|
32121
32126
|
get isFormControl() {
|
|
32122
32127
|
return this.controlContainer != null;
|
|
32123
32128
|
}
|
|
@@ -32259,11 +32264,11 @@ class QdQuickEditComponent {
|
|
|
32259
32264
|
this.controlContainer.control.valueChanges.pipe(tap(() => this.changeDetectorRef.detectChanges())).subscribe();
|
|
32260
32265
|
}
|
|
32261
32266
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32262
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}.additional-info{align-self:center;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:400;transform:translateY(.0625rem)}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32267
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}.additional-info{align-self:center;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:400;transform:translateY(.0625rem)}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32263
32268
|
}
|
|
32264
32269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, decorators: [{
|
|
32265
32270
|
type: Component,
|
|
32266
|
-
args: [{ selector: 'qd-quick-edit', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}.additional-info{align-self:center;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:400;transform:translateY(.0625rem)}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"] }]
|
|
32271
|
+
args: [{ selector: 'qd-quick-edit', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}.additional-info{align-self:center;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:400;transform:translateY(.0625rem)}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"] }]
|
|
32267
32272
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
32268
32273
|
type: Input,
|
|
32269
32274
|
args: [{ required: true }]
|