@quadrel-enterprise-ui/framework 20.28.1 → 20.30.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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, ViewEncapsulation, Component, Injectable, Injector, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Renderer2, Pipe, ViewContainerRef, NO_ERRORS_SCHEMA, DestroyRef, SecurityContext, NgZone, ViewChildren, forwardRef, ContentChildren, ContentChild, afterNextRender, isDevMode,
|
|
2
|
+
import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, ViewEncapsulation, Component, Injectable, Injector, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Renderer2, Pipe, ViewContainerRef, NO_ERRORS_SCHEMA, DestroyRef, SecurityContext, NgZone, ViewChildren, forwardRef, QueryList, ContentChildren, ContentChild, afterNextRender, isDevMode, TemplateRef, CUSTOM_ELEMENTS_SCHEMA, provideAppInitializer } from '@angular/core';
|
|
3
3
|
import { Dialog, DialogRef, DIALOG_DATA, DialogModule } from '@angular/cdk/dialog';
|
|
4
4
|
import * as i1 from '@angular/common';
|
|
5
5
|
import { CommonModule, DOCUMENT, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
|
|
@@ -6142,11 +6142,11 @@ class QdDataFacetsChipComponent {
|
|
|
6142
6142
|
}));
|
|
6143
6143
|
}
|
|
6144
6144
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDataFacetsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDataFacetsChipComponent, isStandalone: false, selector: "qd-data-facets-chip", inputs: { config: "config", data: "data", i18n: "i18n", testId: "testId" }, host: { properties: { "attr.data-test-id": "testId" }, classAttribute: "qd-data-facets" }, usesOnChanges: true, ngImport: i0, template: "<qd-chip *ngFor=\"let chip of chips$ | async\" [state]=\"chip.level\">\n {{ config?.isTranslated ? (i18n + \".\" + chip.label | translate) : chip.label }}\n</qd-chip>\n\n<ng-container *ngIf=\"truncatedChips$ | async as truncatedChips\">\n <qd-data-facets-chip-truncated-indicator\n *ngIf=\"truncatedChips.length > 0\"\n [truncatedChips]=\"truncatedChips\"\n ></qd-data-facets-chip-truncated-indicator>\n</ng-container>\n", styles: [":host{line-height:normal}qd-chip{margin-right:.5625rem;margin-bottom:.125rem}qd-truncated-chips-indicator,qd-chip:last-child{margin-right:0;margin-bottom:.5625rem}span:host{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5625rem}span:host qd-truncated-chips-indicator,span:host qd-chip{margin:0}span:host qd-truncated-chips-indicator:last-child,span:host qd-chip:last-child{margin-bottom:.5625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdDataFacetsChipTruncatedIndicatorComponent, selector: "qd-data-facets-chip-truncated-indicator", inputs: ["truncatedChips", "i18n", "columnOptions"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6145
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDataFacetsChipComponent, isStandalone: false, selector: "qd-data-facets-chip", inputs: { config: "config", data: "data", i18n: "i18n", testId: "testId" }, host: { properties: { "attr.data-test-id": "testId" }, classAttribute: "qd-data-facets" }, usesOnChanges: true, ngImport: i0, template: "<qd-chip *ngFor=\"let chip of chips$ | async\" [state]=\"chip.level\">\n {{ config?.isTranslated ? (i18n + \".\" + chip.label | translate) : chip.label }}\n</qd-chip>\n\n<ng-container *ngIf=\"truncatedChips$ | async as truncatedChips\">\n <qd-data-facets-chip-truncated-indicator\n *ngIf=\"truncatedChips.length > 0\"\n [truncatedChips]=\"truncatedChips\"\n [i18n]=\"i18n\"\n [columnOptions]=\"config\"\n ></qd-data-facets-chip-truncated-indicator>\n</ng-container>\n", styles: [":host{line-height:normal}qd-chip{margin-right:.5625rem;margin-bottom:.125rem}qd-truncated-chips-indicator,qd-chip:last-child{margin-right:0;margin-bottom:.5625rem}span:host{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5625rem}span:host qd-truncated-chips-indicator,span:host qd-chip{margin:0}span:host qd-truncated-chips-indicator:last-child,span:host qd-chip:last-child{margin-bottom:.5625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdDataFacetsChipTruncatedIndicatorComponent, selector: "qd-data-facets-chip-truncated-indicator", inputs: ["truncatedChips", "i18n", "columnOptions"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6146
6146
|
}
|
|
6147
6147
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDataFacetsChipComponent, decorators: [{
|
|
6148
6148
|
type: Component,
|
|
6149
|
-
args: [{ selector: 'qd-data-facets-chip', host: { class: 'qd-data-facets', '[attr.data-test-id]': 'testId' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<qd-chip *ngFor=\"let chip of chips$ | async\" [state]=\"chip.level\">\n {{ config?.isTranslated ? (i18n + \".\" + chip.label | translate) : chip.label }}\n</qd-chip>\n\n<ng-container *ngIf=\"truncatedChips$ | async as truncatedChips\">\n <qd-data-facets-chip-truncated-indicator\n *ngIf=\"truncatedChips.length > 0\"\n [truncatedChips]=\"truncatedChips\"\n ></qd-data-facets-chip-truncated-indicator>\n</ng-container>\n", styles: [":host{line-height:normal}qd-chip{margin-right:.5625rem;margin-bottom:.125rem}qd-truncated-chips-indicator,qd-chip:last-child{margin-right:0;margin-bottom:.5625rem}span:host{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5625rem}span:host qd-truncated-chips-indicator,span:host qd-chip{margin:0}span:host qd-truncated-chips-indicator:last-child,span:host qd-chip:last-child{margin-bottom:.5625rem}\n"] }]
|
|
6149
|
+
args: [{ selector: 'qd-data-facets-chip', host: { class: 'qd-data-facets', '[attr.data-test-id]': 'testId' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<qd-chip *ngFor=\"let chip of chips$ | async\" [state]=\"chip.level\">\n {{ config?.isTranslated ? (i18n + \".\" + chip.label | translate) : chip.label }}\n</qd-chip>\n\n<ng-container *ngIf=\"truncatedChips$ | async as truncatedChips\">\n <qd-data-facets-chip-truncated-indicator\n *ngIf=\"truncatedChips.length > 0\"\n [truncatedChips]=\"truncatedChips\"\n [i18n]=\"i18n\"\n [columnOptions]=\"config\"\n ></qd-data-facets-chip-truncated-indicator>\n</ng-container>\n", styles: [":host{line-height:normal}qd-chip{margin-right:.5625rem;margin-bottom:.125rem}qd-truncated-chips-indicator,qd-chip:last-child{margin-right:0;margin-bottom:.5625rem}span:host{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5625rem}span:host qd-truncated-chips-indicator,span:host qd-chip{margin:0}span:host qd-truncated-chips-indicator:last-child,span:host qd-chip:last-child{margin-bottom:.5625rem}\n"] }]
|
|
6150
6150
|
}], propDecorators: { config: [{
|
|
6151
6151
|
type: Input
|
|
6152
6152
|
}], data: [{
|
|
@@ -15247,6 +15247,7 @@ class QdRadioButtonsComponent {
|
|
|
15247
15247
|
* The value for the HTML attribute [data-test-id].
|
|
15248
15248
|
*/
|
|
15249
15249
|
testId = 'radio-buttons';
|
|
15250
|
+
presentational = false;
|
|
15250
15251
|
/**
|
|
15251
15252
|
* Emits event when the value has changed. Return value matches the current value.
|
|
15252
15253
|
*/
|
|
@@ -15395,7 +15396,7 @@ class QdRadioButtonsComponent {
|
|
|
15395
15396
|
});
|
|
15396
15397
|
}
|
|
15397
15398
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdRadioButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15398
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdRadioButtonsComponent, isStandalone: false, selector: "qd-radio-buttons", inputs: { value: "value", config: "config", formControlName: "formControlName", testId: ["data-test-id", "testId"] }, outputs: { valueChange: "valueChange", clickHint: "clickHint", clickReadonly: "clickReadonly", clickViewonly: "clickViewonly" }, host: { properties: { "class.qd-radio-buttons--readonly": "this.readonly", "class.qd-radio-buttons--viewonly": "this.viewonly", "class.qd-form-hint-action": "this.hintAction", "class.qd-radio-buttons--hint-action": "this.hintAction", "class.qd-form-readonly-action": "this.readonlyAction", "class.qd-radio-buttons--readonly-action": "this.readonlyAction", "class.qd-form-viewonly-action": "this.viewonlyAction", "class.qd-radio-buttons--viewonly-action": "this.viewonlyAction", "class.qd-form-disabled": "this.disabled", "class.qd-radio-buttons--disabled": "this.disabled", "class.qd-radio-buttons": "this.qdRadioButtons", "class.qd-radio-align--vertical": "this.alignIsVertical", "class.qd-radio-align--horizontal": "this.alignIsHorizontal", "class.qd-form-error": "this.hasError", "class.qd-radio-buttons-error": "this.hasError" } }, providers: [
|
|
15399
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdRadioButtonsComponent, isStandalone: false, selector: "qd-radio-buttons", inputs: { value: "value", config: "config", formControlName: "formControlName", testId: ["data-test-id", "testId"], presentational: "presentational" }, outputs: { valueChange: "valueChange", clickHint: "clickHint", clickReadonly: "clickReadonly", clickViewonly: "clickViewonly" }, host: { properties: { "class.qd-radio-buttons--readonly": "this.readonly", "class.qd-radio-buttons--viewonly": "this.viewonly", "class.qd-form-hint-action": "this.hintAction", "class.qd-radio-buttons--hint-action": "this.hintAction", "class.qd-form-readonly-action": "this.readonlyAction", "class.qd-radio-buttons--readonly-action": "this.readonlyAction", "class.qd-form-viewonly-action": "this.viewonlyAction", "class.qd-radio-buttons--viewonly-action": "this.viewonlyAction", "class.qd-form-disabled": "this.disabled", "class.qd-radio-buttons--disabled": "this.disabled", "class.qd-radio-buttons": "this.qdRadioButtons", "class.qd-radio-align--vertical": "this.alignIsVertical", "class.qd-radio-align--horizontal": "this.alignIsHorizontal", "class.qd-form-error": "this.hasError", "class.qd-radio-buttons-error": "this.hasError" } }, providers: [
|
|
15399
15400
|
{
|
|
15400
15401
|
provide: NG_VALUE_ACCESSOR,
|
|
15401
15402
|
useExisting: QdRadioButtonsComponent,
|
|
@@ -15403,7 +15404,7 @@ class QdRadioButtonsComponent {
|
|
|
15403
15404
|
},
|
|
15404
15405
|
QdRadioButtonsService,
|
|
15405
15406
|
QdFormsActionEmitterService
|
|
15406
|
-
], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<qd-filter-form-items\n *ngIf=\"filter\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId + '-filter-form'\"\n></qd-filter-form-items>\n\n<div class=\"qd-radio-buttons__button-section\" *ngIf=\"!readonly && !viewonly\">\n <label\n *ngFor=\"let option of radioButtonsListForView; let i = index; trackBy: getOptionId\"\n [for]=\"option.value + id\"\n [ngClass]=\"\n 'qd-radio-buttons__label' +\n (option.disabled || disabled ? ' qd-radio-buttons__label--disabled' : '') +\n (option.value === value ? ' qd-radio-buttons__label--checked' : '')\n \"\n [attr.data-test-id]=\"testId + '-label'\"\n >\n <input\n type=\"radio\"\n qdVisuallyHidden\n [qdAutofocus]=\"hasAutofocus && i === 0\"\n [id]=\"option.value + id\"\n [ngClass]=\"'qd-radio-buttons__radio-button'\"\n [attr.tabindex]=\"option.value === tabStopValue ? 0 : -1\"\n [name]=\"id\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled || disabled\"\n (change)=\"handleClick(option.value)\"\n [checked]=\"option.value === value\"\n [attr.data-test-id]=\"testId + '-input-' + option.i18n\"\n />\n\n <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value === value\" [icon]=\"'circleRadio'\"></qd-icon>\n <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value !== value\" [icon]=\"'circleSolid'\"></qd-icon>\n\n <span [ngClass]=\"'qd-radio-buttons__caption qd-intersection-target'\">{{ option.i18n | translate }}</span>\n </label>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n [hint]=\"hasHint ? config.hint.i18n : ''\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"activeOptionAsList\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"activeOptionAsList\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-radio-buttons{display:block;flex-direction:column;margin-bottom:.75rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__button-section{display:flex;min-height:2.25rem;flex-wrap:wrap;align-items:center;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__label:not(:last-child) .qd-radio-buttons__caption{padding-right:1rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section .qd-radio-buttons__caption{flex:auto}.qd-radio-buttons .qd-radio-buttons__label{display:flex;max-width:100%;padding:.625rem 0;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1rem}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__indicator{position:relative;margin:0 .375rem 0 0;color:#b4b4b4;font-size:1.25rem}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus{color:#171717}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover .qd-radio-buttons__indicator,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus .qd-radio-buttons__indicator{color:#757575}.qd-radio-buttons .qd-radio-buttons__label--checked{color:#171717}.qd-radio-buttons .qd-radio-buttons__label--checked .qd-radio-buttons__indicator{color:#069}.qd-radio-buttons .qd-radio-buttons__label--disabled{color:#d5d5d5;cursor:default}.qd-radio-buttons .qd-radio-buttons__label--disabled .qd-radio-buttons__indicator{color:#d5d5d5}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__caption{padding:0}.qd-radio-buttons__input-section{margin-bottom:.375rem}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__button-section{flex-direction:column}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label{width:100%;padding-top:.0625rem;padding-bottom:.0625rem;padding-left:.75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.75rem;background:#fff}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding-right:.75rem!important;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding:.375rem .375rem .375rem 0!important;line-height:1.25rem}}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label:last-child{margin-bottom:0}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__indicator{display:flex;align-items:center}}.qd-keyboard-active .qd-radio-buttons__radio-button:focus~.qd-radio-buttons__indicator:after{position:absolute;top:50%;left:50%;width:1.25rem;height:1.25rem;content:\"\";outline:.125rem solid rgb(23,23,23);outline-offset:0;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "directive", type: QdVisuallyHiddenDirective, selector: "[qdVisuallyHidden]" }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
15407
|
+
], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<qd-filter-form-items\n *ngIf=\"filter\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId + '-filter-form'\"\n></qd-filter-form-items>\n\n<div class=\"qd-radio-buttons__button-section\" *ngIf=\"!readonly && !viewonly\">\n <label\n *ngFor=\"let option of radioButtonsListForView; let i = index; trackBy: getOptionId\"\n [for]=\"option.value + id\"\n [ngClass]=\"\n 'qd-radio-buttons__label' +\n (option.disabled || disabled ? ' qd-radio-buttons__label--disabled' : '') +\n (option.value === value ? ' qd-radio-buttons__label--checked' : '')\n \"\n [attr.data-test-id]=\"testId + '-label'\"\n >\n <input\n type=\"radio\"\n qdVisuallyHidden\n [qdAutofocus]=\"hasAutofocus && i === 0\"\n [id]=\"option.value + id\"\n [ngClass]=\"'qd-radio-buttons__radio-button'\"\n [attr.tabindex]=\"presentational ? -1 : option.value === tabStopValue ? 0 : -1\"\n [attr.aria-hidden]=\"presentational ? true : null\"\n [name]=\"id\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled || disabled\"\n (change)=\"handleClick(option.value)\"\n [checked]=\"option.value === value\"\n [attr.data-test-id]=\"testId + '-input-' + option.i18n\"\n />\n\n <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value === value\" [icon]=\"'circleRadio'\"></qd-icon>\n <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value !== value\" [icon]=\"'circleSolid'\"></qd-icon>\n\n <span [ngClass]=\"'qd-radio-buttons__caption qd-intersection-target'\">{{ option.i18n | translate }}</span>\n </label>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n [hint]=\"hasHint ? config.hint.i18n : ''\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"activeOptionAsList\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"activeOptionAsList\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-radio-buttons{display:block;flex-direction:column;margin-bottom:.75rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__button-section{display:flex;min-height:2.25rem;flex-wrap:wrap;align-items:center;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__label:not(:last-child) .qd-radio-buttons__caption{padding-right:1rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section .qd-radio-buttons__caption{flex:auto}.qd-radio-buttons .qd-radio-buttons__label{display:flex;max-width:100%;padding:.625rem 0;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1rem}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__indicator{position:relative;margin:0 .375rem 0 0;color:#b4b4b4;font-size:1.25rem}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus{color:#171717}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover .qd-radio-buttons__indicator,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus .qd-radio-buttons__indicator{color:#757575}.qd-radio-buttons .qd-radio-buttons__label--checked{color:#171717}.qd-radio-buttons .qd-radio-buttons__label--checked .qd-radio-buttons__indicator{color:#069}.qd-radio-buttons .qd-radio-buttons__label--disabled{color:#d5d5d5;cursor:default}.qd-radio-buttons .qd-radio-buttons__label--disabled .qd-radio-buttons__indicator{color:#d5d5d5}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__caption{padding:0}.qd-radio-buttons__input-section{margin-bottom:.375rem}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__button-section{flex-direction:column}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label{width:100%;padding-top:.0625rem;padding-bottom:.0625rem;padding-left:.75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.75rem;background:#fff}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding-right:.75rem!important;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding:.375rem .375rem .375rem 0!important;line-height:1.25rem}}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label:last-child{margin-bottom:0}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__indicator{display:flex;align-items:center}}.qd-keyboard-active .qd-radio-buttons__radio-button:focus~.qd-radio-buttons__indicator:after{position:absolute;top:50%;left:50%;width:1.25rem;height:1.25rem;content:\"\";outline:.125rem solid rgb(23,23,23);outline-offset:0;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "directive", type: QdVisuallyHiddenDirective, selector: "[qdVisuallyHidden]" }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
15407
15408
|
}
|
|
15408
15409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdRadioButtonsComponent, decorators: [{
|
|
15409
15410
|
type: Component,
|
|
@@ -15415,7 +15416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
15415
15416
|
},
|
|
15416
15417
|
QdRadioButtonsService,
|
|
15417
15418
|
QdFormsActionEmitterService
|
|
15418
|
-
], encapsulation: ViewEncapsulation.None, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<qd-filter-form-items\n *ngIf=\"filter\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId + '-filter-form'\"\n></qd-filter-form-items>\n\n<div class=\"qd-radio-buttons__button-section\" *ngIf=\"!readonly && !viewonly\">\n <label\n *ngFor=\"let option of radioButtonsListForView; let i = index; trackBy: getOptionId\"\n [for]=\"option.value + id\"\n [ngClass]=\"\n 'qd-radio-buttons__label' +\n (option.disabled || disabled ? ' qd-radio-buttons__label--disabled' : '') +\n (option.value === value ? ' qd-radio-buttons__label--checked' : '')\n \"\n [attr.data-test-id]=\"testId + '-label'\"\n >\n <input\n type=\"radio\"\n qdVisuallyHidden\n [qdAutofocus]=\"hasAutofocus && i === 0\"\n [id]=\"option.value + id\"\n [ngClass]=\"'qd-radio-buttons__radio-button'\"\n [attr.tabindex]=\"option.value === tabStopValue ? 0 : -1\"\n [name]=\"id\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled || disabled\"\n (change)=\"handleClick(option.value)\"\n [checked]=\"option.value === value\"\n [attr.data-test-id]=\"testId + '-input-' + option.i18n\"\n />\n\n <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value === value\" [icon]=\"'circleRadio'\"></qd-icon>\n <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value !== value\" [icon]=\"'circleSolid'\"></qd-icon>\n\n <span [ngClass]=\"'qd-radio-buttons__caption qd-intersection-target'\">{{ option.i18n | translate }}</span>\n </label>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n [hint]=\"hasHint ? config.hint.i18n : ''\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"activeOptionAsList\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"activeOptionAsList\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-radio-buttons{display:block;flex-direction:column;margin-bottom:.75rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__button-section{display:flex;min-height:2.25rem;flex-wrap:wrap;align-items:center;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__label:not(:last-child) .qd-radio-buttons__caption{padding-right:1rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section .qd-radio-buttons__caption{flex:auto}.qd-radio-buttons .qd-radio-buttons__label{display:flex;max-width:100%;padding:.625rem 0;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1rem}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__indicator{position:relative;margin:0 .375rem 0 0;color:#b4b4b4;font-size:1.25rem}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus{color:#171717}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover .qd-radio-buttons__indicator,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus .qd-radio-buttons__indicator{color:#757575}.qd-radio-buttons .qd-radio-buttons__label--checked{color:#171717}.qd-radio-buttons .qd-radio-buttons__label--checked .qd-radio-buttons__indicator{color:#069}.qd-radio-buttons .qd-radio-buttons__label--disabled{color:#d5d5d5;cursor:default}.qd-radio-buttons .qd-radio-buttons__label--disabled .qd-radio-buttons__indicator{color:#d5d5d5}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__caption{padding:0}.qd-radio-buttons__input-section{margin-bottom:.375rem}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__button-section{flex-direction:column}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label{width:100%;padding-top:.0625rem;padding-bottom:.0625rem;padding-left:.75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.75rem;background:#fff}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding-right:.75rem!important;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding:.375rem .375rem .375rem 0!important;line-height:1.25rem}}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label:last-child{margin-bottom:0}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__indicator{display:flex;align-items:center}}.qd-keyboard-active .qd-radio-buttons__radio-button:focus~.qd-radio-buttons__indicator:after{position:absolute;top:50%;left:50%;width:1.25rem;height:1.25rem;content:\"\";outline:.125rem solid rgb(23,23,23);outline-offset:0;transform:translate(-50%,-50%)}\n"] }]
|
|
15419
|
+
], encapsulation: ViewEncapsulation.None, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<qd-filter-form-items\n *ngIf=\"filter\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId + '-filter-form'\"\n></qd-filter-form-items>\n\n<div class=\"qd-radio-buttons__button-section\" *ngIf=\"!readonly && !viewonly\">\n <label\n *ngFor=\"let option of radioButtonsListForView; let i = index; trackBy: getOptionId\"\n [for]=\"option.value + id\"\n [ngClass]=\"\n 'qd-radio-buttons__label' +\n (option.disabled || disabled ? ' qd-radio-buttons__label--disabled' : '') +\n (option.value === value ? ' qd-radio-buttons__label--checked' : '')\n \"\n [attr.data-test-id]=\"testId + '-label'\"\n >\n <input\n type=\"radio\"\n qdVisuallyHidden\n [qdAutofocus]=\"hasAutofocus && i === 0\"\n [id]=\"option.value + id\"\n [ngClass]=\"'qd-radio-buttons__radio-button'\"\n [attr.tabindex]=\"presentational ? -1 : option.value === tabStopValue ? 0 : -1\"\n [attr.aria-hidden]=\"presentational ? true : null\"\n [name]=\"id\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled || disabled\"\n (change)=\"handleClick(option.value)\"\n [checked]=\"option.value === value\"\n [attr.data-test-id]=\"testId + '-input-' + option.i18n\"\n />\n\n <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value === value\" [icon]=\"'circleRadio'\"></qd-icon>\n <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value !== value\" [icon]=\"'circleSolid'\"></qd-icon>\n\n <span [ngClass]=\"'qd-radio-buttons__caption qd-intersection-target'\">{{ option.i18n | translate }}</span>\n </label>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n [hint]=\"hasHint ? config.hint.i18n : ''\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"activeOptionAsList\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"activeOptionAsList\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-radio-buttons{display:block;flex-direction:column;margin-bottom:.75rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__button-section{display:flex;min-height:2.25rem;flex-wrap:wrap;align-items:center;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__label:not(:last-child) .qd-radio-buttons__caption{padding-right:1rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section .qd-radio-buttons__caption{flex:auto}.qd-radio-buttons .qd-radio-buttons__label{display:flex;max-width:100%;padding:.625rem 0;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1rem}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__indicator{position:relative;margin:0 .375rem 0 0;color:#b4b4b4;font-size:1.25rem}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus{color:#171717}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover .qd-radio-buttons__indicator,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus .qd-radio-buttons__indicator{color:#757575}.qd-radio-buttons .qd-radio-buttons__label--checked{color:#171717}.qd-radio-buttons .qd-radio-buttons__label--checked .qd-radio-buttons__indicator{color:#069}.qd-radio-buttons .qd-radio-buttons__label--disabled{color:#d5d5d5;cursor:default}.qd-radio-buttons .qd-radio-buttons__label--disabled .qd-radio-buttons__indicator{color:#d5d5d5}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__caption{padding:0}.qd-radio-buttons__input-section{margin-bottom:.375rem}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__button-section{flex-direction:column}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label{width:100%;padding-top:.0625rem;padding-bottom:.0625rem;padding-left:.75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.75rem;background:#fff}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding-right:.75rem!important;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding:.375rem .375rem .375rem 0!important;line-height:1.25rem}}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label:last-child{margin-bottom:0}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__indicator{display:flex;align-items:center}}.qd-keyboard-active .qd-radio-buttons__radio-button:focus~.qd-radio-buttons__indicator:after{position:absolute;top:50%;left:50%;width:1.25rem;height:1.25rem;content:\"\";outline:.125rem solid rgb(23,23,23);outline-offset:0;transform:translate(-50%,-50%)}\n"] }]
|
|
15419
15420
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
15420
15421
|
type: Input
|
|
15421
15422
|
}], config: [{
|
|
@@ -15425,6 +15426,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
15425
15426
|
}], testId: [{
|
|
15426
15427
|
type: Input,
|
|
15427
15428
|
args: ['data-test-id']
|
|
15429
|
+
}], presentational: [{
|
|
15430
|
+
type: Input
|
|
15428
15431
|
}], valueChange: [{
|
|
15429
15432
|
type: Output
|
|
15430
15433
|
}], clickHint: [{
|
|
@@ -21824,6 +21827,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
21824
21827
|
type: Input
|
|
21825
21828
|
}] } });
|
|
21826
21829
|
|
|
21830
|
+
const QD_FILTER_LISTBOX_HOST = new InjectionToken('QD_FILTER_LISTBOX_HOST');
|
|
21831
|
+
|
|
21827
21832
|
// @ts-strict-ignore
|
|
21828
21833
|
class QdFilterItemMultiSelectComponent {
|
|
21829
21834
|
filterService = inject(QdFilterService);
|
|
@@ -21878,14 +21883,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
21878
21883
|
// @ts-strict-ignore
|
|
21879
21884
|
class QdFilterItemSingleSelectComponent {
|
|
21880
21885
|
filterService = inject(QdFilterService);
|
|
21886
|
+
translateService = inject(TranslateService);
|
|
21887
|
+
elementRef = inject(ElementRef);
|
|
21888
|
+
category = inject(QD_FILTER_LISTBOX_HOST, { optional: true });
|
|
21881
21889
|
filterId;
|
|
21882
21890
|
categoryIndex;
|
|
21883
21891
|
itemIndex;
|
|
21892
|
+
optionElementId;
|
|
21884
21893
|
testId;
|
|
21885
21894
|
closeEventEmitter = new EventEmitter();
|
|
21886
21895
|
item;
|
|
21887
21896
|
i18n;
|
|
21888
21897
|
active;
|
|
21898
|
+
isActive = false;
|
|
21899
|
+
role = 'option';
|
|
21900
|
+
get idAttr() {
|
|
21901
|
+
return this.optionElementId;
|
|
21902
|
+
}
|
|
21903
|
+
get ariaSelected() {
|
|
21904
|
+
return !!this.active;
|
|
21905
|
+
}
|
|
21906
|
+
get activeClass() {
|
|
21907
|
+
return this.isActive;
|
|
21908
|
+
}
|
|
21889
21909
|
get dataTestId() {
|
|
21890
21910
|
return this.testId;
|
|
21891
21911
|
}
|
|
@@ -21899,11 +21919,25 @@ class QdFilterItemSingleSelectComponent {
|
|
|
21899
21919
|
this.i18n = item.i18n;
|
|
21900
21920
|
this.active = item.active;
|
|
21901
21921
|
});
|
|
21922
|
+
this.category?.registerOption(this);
|
|
21902
21923
|
}
|
|
21903
21924
|
ngOnDestroy() {
|
|
21925
|
+
this.category?.unregisterOption(this);
|
|
21904
21926
|
this._destroyed$.next();
|
|
21905
21927
|
this._destroyed$.complete();
|
|
21906
21928
|
}
|
|
21929
|
+
setActiveStyles() {
|
|
21930
|
+
this.isActive = true;
|
|
21931
|
+
}
|
|
21932
|
+
setInactiveStyles() {
|
|
21933
|
+
this.isActive = false;
|
|
21934
|
+
}
|
|
21935
|
+
getLabel() {
|
|
21936
|
+
return this.i18n ? this.translateService.instant(this.i18n) : '';
|
|
21937
|
+
}
|
|
21938
|
+
scrollIntoView() {
|
|
21939
|
+
this.elementRef.nativeElement.scrollIntoView({ block: 'nearest' });
|
|
21940
|
+
}
|
|
21907
21941
|
handleActive() {
|
|
21908
21942
|
this.setItems();
|
|
21909
21943
|
this.close();
|
|
@@ -21915,27 +21949,42 @@ class QdFilterItemSingleSelectComponent {
|
|
|
21915
21949
|
this.closeEventEmitter.emit();
|
|
21916
21950
|
}
|
|
21917
21951
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21918
|
-
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:
|
|
21952
|
+
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", optionElementId: "optionElementId", testId: ["data-test-id", "testId"] }, outputs: { closeEventEmitter: "closeEventEmitter" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.idAttr", "attr.aria-selected": "this.ariaSelected", "class.qd-filter__category-option--active": "this.activeClass", "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 [presentational]=\"true\"\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:clip;overflow-clip-margin:4px;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", "presentational"], outputs: ["valueChange", "clickHint", "clickReadonly", "clickViewonly"] }] });
|
|
21919
21953
|
}
|
|
21920
21954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSingleSelectComponent, decorators: [{
|
|
21921
21955
|
type: Component,
|
|
21922
|
-
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:
|
|
21956
|
+
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 [presentational]=\"true\"\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:clip;overflow-clip-margin:4px;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"] }]
|
|
21923
21957
|
}], propDecorators: { filterId: [{
|
|
21924
21958
|
type: Input
|
|
21925
21959
|
}], categoryIndex: [{
|
|
21926
21960
|
type: Input
|
|
21927
21961
|
}], itemIndex: [{
|
|
21928
21962
|
type: Input
|
|
21963
|
+
}], optionElementId: [{
|
|
21964
|
+
type: Input
|
|
21929
21965
|
}], testId: [{
|
|
21930
21966
|
type: Input,
|
|
21931
21967
|
args: ['data-test-id']
|
|
21932
21968
|
}], closeEventEmitter: [{
|
|
21933
21969
|
type: Output
|
|
21970
|
+
}], role: [{
|
|
21971
|
+
type: HostBinding,
|
|
21972
|
+
args: ['attr.role']
|
|
21973
|
+
}], idAttr: [{
|
|
21974
|
+
type: HostBinding,
|
|
21975
|
+
args: ['attr.id']
|
|
21976
|
+
}], ariaSelected: [{
|
|
21977
|
+
type: HostBinding,
|
|
21978
|
+
args: ['attr.aria-selected']
|
|
21979
|
+
}], activeClass: [{
|
|
21980
|
+
type: HostBinding,
|
|
21981
|
+
args: ['class.qd-filter__category-option--active']
|
|
21934
21982
|
}], dataTestId: [{
|
|
21935
21983
|
type: HostBinding,
|
|
21936
21984
|
args: ['attr.data-test-id']
|
|
21937
21985
|
}] } });
|
|
21938
21986
|
|
|
21987
|
+
const NAVIGATION_KEYS = new Set(['ArrowDown', 'ArrowUp', 'Home', 'End']);
|
|
21939
21988
|
class QdFilterItemSelectCategoryComponent {
|
|
21940
21989
|
filterService = inject(QdFilterService);
|
|
21941
21990
|
breakpointService = inject(QdBreakpointService);
|
|
@@ -21944,6 +21993,7 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
21944
21993
|
categoryIndex;
|
|
21945
21994
|
testId;
|
|
21946
21995
|
popoverDirective;
|
|
21996
|
+
triggerRef;
|
|
21947
21997
|
open = false;
|
|
21948
21998
|
type;
|
|
21949
21999
|
i18n;
|
|
@@ -21956,6 +22006,9 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
21956
22006
|
_destroyRef = inject(DestroyRef);
|
|
21957
22007
|
frozenSelectedKeys = [];
|
|
21958
22008
|
frozenUnselectedKeys = [];
|
|
22009
|
+
keyManager;
|
|
22010
|
+
options = new QueryList();
|
|
22011
|
+
registeredOptions = [];
|
|
21959
22012
|
get closeButton() {
|
|
21960
22013
|
return this.type === 'multiSelect';
|
|
21961
22014
|
}
|
|
@@ -21989,22 +22042,121 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
21989
22042
|
get filterCategoryValue$() {
|
|
21990
22043
|
return this.filterService.getFilterCategoryValue$(this.filterId, this.categoryIndex);
|
|
21991
22044
|
}
|
|
22045
|
+
get listboxId() {
|
|
22046
|
+
return `${this.testId}-listbox`;
|
|
22047
|
+
}
|
|
22048
|
+
get activeOptionId() {
|
|
22049
|
+
if (!this.open || this.type !== 'singleSelect')
|
|
22050
|
+
return null;
|
|
22051
|
+
return this.keyManager?.activeItem?.optionElementId ?? null;
|
|
22052
|
+
}
|
|
22053
|
+
get triggerAriaControls() {
|
|
22054
|
+
return this.open && this.type === 'singleSelect' ? this.listboxId : null;
|
|
22055
|
+
}
|
|
22056
|
+
optionId(index) {
|
|
22057
|
+
return `${this.testId}-option-${index}`;
|
|
22058
|
+
}
|
|
21992
22059
|
ngOnInit() {
|
|
21993
22060
|
this.initCategorySubscription();
|
|
21994
22061
|
this.initItemsSubscription();
|
|
21995
22062
|
this.initShowSelectButton();
|
|
21996
22063
|
this.itemsLoading$ = this.filterService.getItemsLoading$(this.filterId, this.categoryIndex);
|
|
21997
22064
|
}
|
|
22065
|
+
ngAfterViewInit() {
|
|
22066
|
+
this.keyManager = new ActiveDescendantKeyManager(this.options)
|
|
22067
|
+
.withWrap()
|
|
22068
|
+
.withHomeAndEnd()
|
|
22069
|
+
.withTypeAhead();
|
|
22070
|
+
this._destroyRef.onDestroy(() => this.options.destroy());
|
|
22071
|
+
}
|
|
22072
|
+
registerOption(option) {
|
|
22073
|
+
if (this.registeredOptions.includes(option))
|
|
22074
|
+
return;
|
|
22075
|
+
this.registeredOptions.push(option);
|
|
22076
|
+
this.registeredOptions.sort((a, b) => a.itemIndex - b.itemIndex);
|
|
22077
|
+
this.publishOptions();
|
|
22078
|
+
}
|
|
22079
|
+
unregisterOption(option) {
|
|
22080
|
+
const index = this.registeredOptions.indexOf(option);
|
|
22081
|
+
if (index < 0)
|
|
22082
|
+
return;
|
|
22083
|
+
this.registeredOptions.splice(index, 1);
|
|
22084
|
+
if (this.keyManager?.activeItem === option)
|
|
22085
|
+
this.keyManager.setActiveItem(-1);
|
|
22086
|
+
this.publishOptions();
|
|
22087
|
+
}
|
|
22088
|
+
publishOptions() {
|
|
22089
|
+
this.options.reset(this.registeredOptions);
|
|
22090
|
+
this.options.notifyOnChanges();
|
|
22091
|
+
}
|
|
21998
22092
|
onLayerOpened() {
|
|
21999
22093
|
this.open = true;
|
|
22000
22094
|
this.freezeDropdownOrder();
|
|
22001
22095
|
}
|
|
22002
22096
|
onLayerClosed() {
|
|
22003
22097
|
this.open = false;
|
|
22098
|
+
this.keyManager?.setActiveItem(-1);
|
|
22004
22099
|
}
|
|
22005
22100
|
closeLayer() {
|
|
22006
22101
|
this.popoverDirective?.close();
|
|
22007
22102
|
}
|
|
22103
|
+
onListboxKeydown(event) {
|
|
22104
|
+
if (this.type !== 'singleSelect' || !this.open)
|
|
22105
|
+
return;
|
|
22106
|
+
if (event.key === 'Escape') {
|
|
22107
|
+
event.preventDefault();
|
|
22108
|
+
this.closeAndRefocus();
|
|
22109
|
+
return;
|
|
22110
|
+
}
|
|
22111
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
22112
|
+
event.preventDefault();
|
|
22113
|
+
this.selectActiveOption();
|
|
22114
|
+
return;
|
|
22115
|
+
}
|
|
22116
|
+
if (NAVIGATION_KEYS.has(event.key) || (event.key.length === 1 && event.key !== ' ')) {
|
|
22117
|
+
if (NAVIGATION_KEYS.has(event.key))
|
|
22118
|
+
event.preventDefault();
|
|
22119
|
+
this.ensureActiveOption();
|
|
22120
|
+
this.keyManager?.onKeydown(event);
|
|
22121
|
+
this.keyManager?.activeItem?.scrollIntoView();
|
|
22122
|
+
}
|
|
22123
|
+
}
|
|
22124
|
+
onListboxFocus() {
|
|
22125
|
+
if (this.type !== 'singleSelect' || !this.open)
|
|
22126
|
+
return;
|
|
22127
|
+
this.ensureActiveOption();
|
|
22128
|
+
}
|
|
22129
|
+
onListboxBlur() {
|
|
22130
|
+
this.keyManager?.setActiveItem(-1);
|
|
22131
|
+
}
|
|
22132
|
+
onFlyoutFocusout(event) {
|
|
22133
|
+
if (!this.open || this.type !== 'singleSelect')
|
|
22134
|
+
return;
|
|
22135
|
+
const container = event.currentTarget;
|
|
22136
|
+
const next = event.relatedTarget;
|
|
22137
|
+
if (next && container.contains(next))
|
|
22138
|
+
return;
|
|
22139
|
+
this.closeLayer();
|
|
22140
|
+
}
|
|
22141
|
+
ensureActiveOption() {
|
|
22142
|
+
if (this.keyManager?.activeItem || !this.options.length)
|
|
22143
|
+
return;
|
|
22144
|
+
this.keyManager.setActiveItem(this.initialActiveOption());
|
|
22145
|
+
}
|
|
22146
|
+
initialActiveOption() {
|
|
22147
|
+
return this.options.find(option => option.active) ?? this.options.first;
|
|
22148
|
+
}
|
|
22149
|
+
selectActiveOption() {
|
|
22150
|
+
const active = this.keyManager?.activeItem;
|
|
22151
|
+
if (!active)
|
|
22152
|
+
return;
|
|
22153
|
+
this.filterService.setItemsStateSingleSelect(this.filterId, this.categoryIndex, active.itemIndex);
|
|
22154
|
+
this.closeAndRefocus();
|
|
22155
|
+
}
|
|
22156
|
+
closeAndRefocus() {
|
|
22157
|
+
this.closeLayer();
|
|
22158
|
+
this.triggerRef?.nativeElement.focus();
|
|
22159
|
+
}
|
|
22008
22160
|
close(itemIndex) {
|
|
22009
22161
|
this.filterService.setItemIsActive(this.filterId, this.categoryIndex, itemIndex, false);
|
|
22010
22162
|
this.filterService.resetCategoryFilter(this.filterId, this.categoryIndex);
|
|
@@ -22083,11 +22235,21 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
22083
22235
|
}));
|
|
22084
22236
|
}
|
|
22085
22237
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22086
|
-
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" },
|
|
22238
|
+
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" }, providers: [
|
|
22239
|
+
{
|
|
22240
|
+
provide: QD_FILTER_LISTBOX_HOST,
|
|
22241
|
+
useExisting: forwardRef(() => QdFilterItemSelectCategoryComponent)
|
|
22242
|
+
}
|
|
22243
|
+
], viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }], ngImport: i0, template: "<div\n #triggerRef\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-haspopup]=\"type === 'singleSelect' ? 'listbox' : 'dialog'\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-label]=\"i18n | translate\"\n [attr.aria-controls]=\"triggerAriaControls\"\n [qdPopoverOnClick]=\"filterLayer\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverEnableKeyControl]=\"true\"\n [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n qdPopoverPlacement=\"bottom-start\"\n [qdPopoverOffsetY]=\"-1\"\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 *ngIf=\"(isMobile$ | async) && type === 'multiSelect'; else desktopChips\">\n <qd-chip\n *ngIf=\"activeItemCount > 0\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"clearAll()\"\n [data-test-id]=\"testId + '-selected-chip-count'\"\n >{{ activeItemCount }}</qd-chip\n >\n </ng-container>\n <ng-template #desktopChips>\n <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n </ng-template>\n</div>\n\n<ng-template #filterLayer>\n <div [class]=\"layerContentClassName\" (focusout)=\"onFlyoutFocusout($event)\">\n <qd-icon\n *ngIf=\"closeButton\"\n [class]=\"'qd-filter__category-layer-close'\"\n (click)=\"closeLayer()\"\n [icon]=\"'ctrlTop'\"\n [attr.data-test-id]=\"testId + '-layer-close'\"\n ></qd-icon>\n\n <ng-container *ngIf=\"itemsLoading$ | async; else categoryContent\" [ngTemplateOutlet]=\"loadingState\"></ng-container>\n\n <ng-template #categoryContent>\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\n *ngFor=\"let entry of selectedDropdownEntries; trackBy: trackByItem\"\n [ngTemplateOutlet]=\"multiSelectItem\"\n [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n ></ng-container>\n\n <div\n *ngIf=\"showSelectedSeparator\"\n class=\"qd-filter__category-layer-separator\"\n [attr.data-test-id]=\"testId + '-selected-separator'\"\n ></div>\n\n <ng-container\n *ngFor=\"let entry of unselectedDropdownEntries; trackBy: trackByItem\"\n [ngTemplateOutlet]=\"multiSelectItem\"\n [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n ></ng-container>\n\n <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></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 <ul\n class=\"qd-filter__category-layer-items qd-filter__category-listbox\"\n role=\"listbox\"\n [id]=\"listboxId\"\n tabindex=\"0\"\n [qdAutofocus]=\"!filter\"\n [attr.aria-label]=\"i18n | translate\"\n [attr.aria-activedescendant]=\"activeOptionId\"\n (keydown)=\"onListboxKeydown($event)\"\n (focus)=\"onListboxFocus()\"\n (blur)=\"onListboxBlur()\"\n >\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 [optionElementId]=\"optionId(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\n <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n </ul>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #emptyState>\n <p class=\"qd-filter__category-layer-empty\" [attr.data-test-id]=\"testId + '-no-results'\">\n {{ \"i18n.qd.filter.noResults\" | translate }}\n </p>\n</ng-template>\n\n<ng-template #loadingState>\n <p class=\"qd-filter__category-layer-loading\" [attr.data-test-id]=\"testId + '-items-loading'\">\n {{ \"i18n.qd.filter.loading\" | translate }}\n </p>\n</ng-template>\n\n<ng-template #multiSelectItem let-item=\"item\" let-itemIndex=\"itemIndex\">\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 ></qd-filter-item-multi-select>\n</ng-template>\n\n<ng-template #SelectedChip>\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <!-- TODO: Add tooltip-->\n <qd-chip\n *ngIf=\"item.active\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"close($event)\"\n [data]=\"itemIndex\"\n [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n >{{ item.i18n | translate }}</qd-chip\n >\n </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{position:relative;display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-listbox{padding:0;margin:0;list-style:none}::ng-deep .qd-filter__category-listbox:focus,::ng-deep .qd-filter__category-listbox:focus-visible{outline:none}::ng-deep .qd-keyboard-active .qd-filter__category-option--active .qd-radio-buttons__indicator:after{position:absolute;top:50%;left:50%;width:1.25rem;height:1.25rem;content:\"\";outline:.125rem solid rgb(0,102,153);outline-offset:0;transform:translate(-50%,-50%)}::ng-deep .qd-filter__category-layer-separator{height:.0625rem;flex-shrink:0;background:#d5d5d5}::ng-deep .qd-filter__category-layer-empty,::ng-deep .qd-filter__category-layer-loading{padding:0 .9375rem;margin:0;color:#757575;font-size:.875rem;line-height:2.5rem}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:.5rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { 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", "optionElementId", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
22087
22244
|
}
|
|
22088
22245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, decorators: [{
|
|
22089
22246
|
type: Component,
|
|
22090
|
-
args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
22247
|
+
args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
22248
|
+
{
|
|
22249
|
+
provide: QD_FILTER_LISTBOX_HOST,
|
|
22250
|
+
useExisting: forwardRef(() => QdFilterItemSelectCategoryComponent)
|
|
22251
|
+
}
|
|
22252
|
+
], standalone: false, template: "<div\n #triggerRef\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-haspopup]=\"type === 'singleSelect' ? 'listbox' : 'dialog'\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-label]=\"i18n | translate\"\n [attr.aria-controls]=\"triggerAriaControls\"\n [qdPopoverOnClick]=\"filterLayer\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverEnableKeyControl]=\"true\"\n [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n qdPopoverPlacement=\"bottom-start\"\n [qdPopoverOffsetY]=\"-1\"\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 *ngIf=\"(isMobile$ | async) && type === 'multiSelect'; else desktopChips\">\n <qd-chip\n *ngIf=\"activeItemCount > 0\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"clearAll()\"\n [data-test-id]=\"testId + '-selected-chip-count'\"\n >{{ activeItemCount }}</qd-chip\n >\n </ng-container>\n <ng-template #desktopChips>\n <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n </ng-template>\n</div>\n\n<ng-template #filterLayer>\n <div [class]=\"layerContentClassName\" (focusout)=\"onFlyoutFocusout($event)\">\n <qd-icon\n *ngIf=\"closeButton\"\n [class]=\"'qd-filter__category-layer-close'\"\n (click)=\"closeLayer()\"\n [icon]=\"'ctrlTop'\"\n [attr.data-test-id]=\"testId + '-layer-close'\"\n ></qd-icon>\n\n <ng-container *ngIf=\"itemsLoading$ | async; else categoryContent\" [ngTemplateOutlet]=\"loadingState\"></ng-container>\n\n <ng-template #categoryContent>\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\n *ngFor=\"let entry of selectedDropdownEntries; trackBy: trackByItem\"\n [ngTemplateOutlet]=\"multiSelectItem\"\n [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n ></ng-container>\n\n <div\n *ngIf=\"showSelectedSeparator\"\n class=\"qd-filter__category-layer-separator\"\n [attr.data-test-id]=\"testId + '-selected-separator'\"\n ></div>\n\n <ng-container\n *ngFor=\"let entry of unselectedDropdownEntries; trackBy: trackByItem\"\n [ngTemplateOutlet]=\"multiSelectItem\"\n [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n ></ng-container>\n\n <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></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 <ul\n class=\"qd-filter__category-layer-items qd-filter__category-listbox\"\n role=\"listbox\"\n [id]=\"listboxId\"\n tabindex=\"0\"\n [qdAutofocus]=\"!filter\"\n [attr.aria-label]=\"i18n | translate\"\n [attr.aria-activedescendant]=\"activeOptionId\"\n (keydown)=\"onListboxKeydown($event)\"\n (focus)=\"onListboxFocus()\"\n (blur)=\"onListboxBlur()\"\n >\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 [optionElementId]=\"optionId(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\n <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n </ul>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #emptyState>\n <p class=\"qd-filter__category-layer-empty\" [attr.data-test-id]=\"testId + '-no-results'\">\n {{ \"i18n.qd.filter.noResults\" | translate }}\n </p>\n</ng-template>\n\n<ng-template #loadingState>\n <p class=\"qd-filter__category-layer-loading\" [attr.data-test-id]=\"testId + '-items-loading'\">\n {{ \"i18n.qd.filter.loading\" | translate }}\n </p>\n</ng-template>\n\n<ng-template #multiSelectItem let-item=\"item\" let-itemIndex=\"itemIndex\">\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 ></qd-filter-item-multi-select>\n</ng-template>\n\n<ng-template #SelectedChip>\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <!-- TODO: Add tooltip-->\n <qd-chip\n *ngIf=\"item.active\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"close($event)\"\n [data]=\"itemIndex\"\n [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n >{{ item.i18n | translate }}</qd-chip\n >\n </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{position:relative;display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-listbox{padding:0;margin:0;list-style:none}::ng-deep .qd-filter__category-listbox:focus,::ng-deep .qd-filter__category-listbox:focus-visible{outline:none}::ng-deep .qd-keyboard-active .qd-filter__category-option--active .qd-radio-buttons__indicator:after{position:absolute;top:50%;left:50%;width:1.25rem;height:1.25rem;content:\"\";outline:.125rem solid rgb(0,102,153);outline-offset:0;transform:translate(-50%,-50%)}::ng-deep .qd-filter__category-layer-separator{height:.0625rem;flex-shrink:0;background:#d5d5d5}::ng-deep .qd-filter__category-layer-empty,::ng-deep .qd-filter__category-layer-loading{padding:0 .9375rem;margin:0;color:#757575;font-size:.875rem;line-height:2.5rem}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:.5rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"] }]
|
|
22091
22253
|
}], propDecorators: { filterId: [{
|
|
22092
22254
|
type: Input
|
|
22093
22255
|
}], categoryIndex: [{
|
|
@@ -22098,6 +22260,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
22098
22260
|
}], popoverDirective: [{
|
|
22099
22261
|
type: ViewChild,
|
|
22100
22262
|
args: [QdPopoverOnClickDirective]
|
|
22263
|
+
}], triggerRef: [{
|
|
22264
|
+
type: ViewChild,
|
|
22265
|
+
args: ['triggerRef']
|
|
22101
22266
|
}] } });
|
|
22102
22267
|
|
|
22103
22268
|
// @ts-strict-ignore
|
|
@@ -22163,11 +22328,11 @@ class QdFilterCategoryComponent {
|
|
|
22163
22328
|
}
|
|
22164
22329
|
}
|
|
22165
22330
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22166
|
-
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"] }] });
|
|
22331
|
+
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:focus{outline:none}:host ::ng-deep .qd-filter__category-button:focus-visible{box-shadow:inset 0 0 0 .125rem #069}: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"] }] });
|
|
22167
22332
|
}
|
|
22168
22333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterCategoryComponent, decorators: [{
|
|
22169
22334
|
type: Component,
|
|
22170
|
-
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"] }]
|
|
22335
|
+
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:focus{outline:none}:host ::ng-deep .qd-filter__category-button:focus-visible{box-shadow:inset 0 0 0 .125rem #069}: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"] }]
|
|
22171
22336
|
}], propDecorators: { filterId: [{
|
|
22172
22337
|
type: Input
|
|
22173
22338
|
}], isInstantFiltering: [{
|
|
@@ -22814,7 +22979,8 @@ class QdFilterModule {
|
|
|
22814
22979
|
QdFormModule,
|
|
22815
22980
|
QdIconModule,
|
|
22816
22981
|
QdPopoverModule,
|
|
22817
|
-
QdTooltipModule,
|
|
22982
|
+
QdTooltipModule,
|
|
22983
|
+
QdAutofocusModule, i1$1.StoreFeatureModule], exports: [QdFilterComponent] });
|
|
22818
22984
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterModule, imports: [CommonModule,
|
|
22819
22985
|
FormsModule,
|
|
22820
22986
|
TranslateModule,
|
|
@@ -22825,6 +22991,7 @@ class QdFilterModule {
|
|
|
22825
22991
|
QdIconModule,
|
|
22826
22992
|
QdPopoverModule,
|
|
22827
22993
|
QdTooltipModule,
|
|
22994
|
+
QdAutofocusModule,
|
|
22828
22995
|
StoreModule.forFeature('qdUiFilter', filterReducer)] });
|
|
22829
22996
|
}
|
|
22830
22997
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterModule, decorators: [{
|
|
@@ -22841,6 +23008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
22841
23008
|
QdIconModule,
|
|
22842
23009
|
QdPopoverModule,
|
|
22843
23010
|
QdTooltipModule,
|
|
23011
|
+
QdAutofocusModule,
|
|
22844
23012
|
StoreModule.forFeature('qdUiFilter', filterReducer)
|
|
22845
23013
|
],
|
|
22846
23014
|
declarations: [
|