@quadrel-enterprise-ui/framework 20.20.1 → 20.21.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.
|
@@ -21354,11 +21354,11 @@ class QdFilterItemDateRangeCategoryComponent {
|
|
|
21354
21354
|
this[targetMember] = this.filterService.getItemById$(this.filterId, this.categoryIndex, index);
|
|
21355
21355
|
}
|
|
21356
21356
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemDateRangeCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21357
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemDateRangeCategoryComponent, isStandalone: false, selector: "qd-filter-category-date-range", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"], timePickerConfig: "timePickerConfig" }, host: { classAttribute: "qd-filter__category-date-range" }, ngImport: i0, template: "{{ this.i18n$ | async | translate }}\n\n<span class=\"qd-filter__item-date-range__label\">{{ \"i18n.qd.filter.dateRange.from\" | translate }}</span>\n\n<qd-filter-item-date-range\n
|
|
21357
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemDateRangeCategoryComponent, isStandalone: false, selector: "qd-filter-category-date-range", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"], timePickerConfig: "timePickerConfig" }, host: { classAttribute: "qd-filter__category-date-range" }, ngImport: i0, template: "{{ this.i18n$ | async | translate }}\n\n<span class=\"qd-filter__date-range__group\">\n <span class=\"qd-filter__item-date-range__label\">{{ \"i18n.qd.filter.dateRange.from\" | translate }}</span>\n\n <qd-filter-item-date-range\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"fromItemIndex\"\n [data-test-id]=\"testId + '-item-date-from'\"\n [timePickerConfig]=\"fromItemTimePickerConfig\"\n (clickTimePlaceholder)=\"handleFromTimePlaceholderClicked($event)\"\n ></qd-filter-item-date-range>\n\n <qd-chip\n *ngIf=\"(fromItem$ | async)?.active && (fromItem$ | async)?.item\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"removeItem($event)\"\n [data]=\"fromItemIndex\"\n [data-test-id]=\"testId + '-selected-chip-' + (fromItem$ | async).item\"\n >\n {{ (fromItem$ | async).item | localeDate : !!timePickerConfig : fromItemTimePlaceholderClicked | async }}\n </qd-chip>\n</span>\n\n<span class=\"qd-filter__date-range__group\">\n <span class=\"qd-filter__item-date-range__label\">{{ \"i18n.qd.filter.dateRange.until\" | translate }}</span>\n\n <qd-filter-item-date-range\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"untilItemIndex\"\n [data-test-id]=\"testId + '-item-date-until'\"\n [timePickerConfig]=\"untilItemTimePickerConfig\"\n (clickTimePlaceholder)=\"handleUntilTimePlaceholderClicked($event)\"\n ></qd-filter-item-date-range>\n\n <qd-chip\n *ngIf=\"(untilItem$ | async)?.active && (untilItem$ | async)?.item\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"removeItem($event)\"\n [data]=\"untilItemIndex\"\n [data-test-id]=\"testId + '-selected-chip-' + (untilItem$ | async).item\"\n >\n {{ (untilItem$ | async).item | localeDate : !!timePickerConfig : untilItemTimePlaceholderClicked | async }}\n </qd-chip>\n</span>\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;padding-left:.75rem;color:#757575;line-height:2.125rem}:host .qd-filter__item-date-range__label{margin-left:.25rem}:host .qd-filter__date-range__group{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterItemDateRangeComponent, selector: "qd-filter-item-date-range", inputs: ["filterId", "categoryIndex", "itemIndex", "timePickerConfig", "data-test-id"], outputs: ["clickTimePlaceholder"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }] });
|
|
21358
21358
|
}
|
|
21359
21359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemDateRangeCategoryComponent, decorators: [{
|
|
21360
21360
|
type: Component,
|
|
21361
|
-
args: [{ selector: 'qd-filter-category-date-range', host: { class: 'qd-filter__category-date-range' }, standalone: false, template: "{{ this.i18n$ | async | translate }}\n\n<span class=\"qd-filter__item-date-range__label\">{{ \"i18n.qd.filter.dateRange.from\" | translate }}</span>\n\n<qd-filter-item-date-range\n
|
|
21361
|
+
args: [{ selector: 'qd-filter-category-date-range', host: { class: 'qd-filter__category-date-range' }, standalone: false, template: "{{ this.i18n$ | async | translate }}\n\n<span class=\"qd-filter__date-range__group\">\n <span class=\"qd-filter__item-date-range__label\">{{ \"i18n.qd.filter.dateRange.from\" | translate }}</span>\n\n <qd-filter-item-date-range\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"fromItemIndex\"\n [data-test-id]=\"testId + '-item-date-from'\"\n [timePickerConfig]=\"fromItemTimePickerConfig\"\n (clickTimePlaceholder)=\"handleFromTimePlaceholderClicked($event)\"\n ></qd-filter-item-date-range>\n\n <qd-chip\n *ngIf=\"(fromItem$ | async)?.active && (fromItem$ | async)?.item\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"removeItem($event)\"\n [data]=\"fromItemIndex\"\n [data-test-id]=\"testId + '-selected-chip-' + (fromItem$ | async).item\"\n >\n {{ (fromItem$ | async).item | localeDate : !!timePickerConfig : fromItemTimePlaceholderClicked | async }}\n </qd-chip>\n</span>\n\n<span class=\"qd-filter__date-range__group\">\n <span class=\"qd-filter__item-date-range__label\">{{ \"i18n.qd.filter.dateRange.until\" | translate }}</span>\n\n <qd-filter-item-date-range\n [filterId]=\"filterId\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"untilItemIndex\"\n [data-test-id]=\"testId + '-item-date-until'\"\n [timePickerConfig]=\"untilItemTimePickerConfig\"\n (clickTimePlaceholder)=\"handleUntilTimePlaceholderClicked($event)\"\n ></qd-filter-item-date-range>\n\n <qd-chip\n *ngIf=\"(untilItem$ | async)?.active && (untilItem$ | async)?.item\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"removeItem($event)\"\n [data]=\"untilItemIndex\"\n [data-test-id]=\"testId + '-selected-chip-' + (untilItem$ | async).item\"\n >\n {{ (untilItem$ | async).item | localeDate : !!timePickerConfig : untilItemTimePlaceholderClicked | async }}\n </qd-chip>\n</span>\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;padding-left:.75rem;color:#757575;line-height:2.125rem}:host .qd-filter__item-date-range__label{margin-left:.25rem}:host .qd-filter__date-range__group{display:flex;align-items:center}\n"] }]
|
|
21362
21362
|
}], propDecorators: { filterId: [{
|
|
21363
21363
|
type: Input
|
|
21364
21364
|
}], categoryIndex: [{
|
|
@@ -21657,11 +21657,11 @@ class QdFilterCategoryComponent {
|
|
|
21657
21657
|
}
|
|
21658
21658
|
}
|
|
21659
21659
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21660
|
-
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"] }] });
|
|
21660
|
+
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}@media (max-width: 599.98px){:host ::ng-deep .qd-filter__category-button--type-dateRange{width:100%;height:auto;flex-wrap:wrap;align-items:flex-start;line-height:2.125rem}}: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"] }] });
|
|
21661
21661
|
}
|
|
21662
21662
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterCategoryComponent, decorators: [{
|
|
21663
21663
|
type: Component,
|
|
21664
|
-
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"] }]
|
|
21664
|
+
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}@media (max-width: 599.98px){:host ::ng-deep .qd-filter__category-button--type-dateRange{width:100%;height:auto;flex-wrap:wrap;align-items:flex-start;line-height:2.125rem}}: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"] }]
|
|
21665
21665
|
}], propDecorators: { filterId: [{
|
|
21666
21666
|
type: Input
|
|
21667
21667
|
}], isInstantFiltering: [{
|