@quadrel-enterprise-ui/framework 20.27.6-beta.242.1 → 20.27.7
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.
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
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, QueryList, 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
|
-
import { CommonModule, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
|
|
5
|
+
import { CommonModule, DOCUMENT, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
|
|
6
6
|
import { BehaviorSubject, pairwise, map as map$1, Subject, throwError, of, ReplaySubject, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, switchMap, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, firstValueFrom, combineLatest, concat, take as take$1, tap as tap$1, from, delay, first, scan, queueScheduler, filter as filter$1, concatMap as concatMap$1, exhaustMap, finalize, forkJoin, delayWhen, combineLatestWith, withLatestFrom as withLatestFrom$1, async } from 'rxjs';
|
|
7
7
|
import { map, takeUntil, take, filter, catchError, debounceTime, startWith, distinctUntilChanged, concatMap, skip, tap, auditTime, withLatestFrom, observeOn, switchMap as switchMap$1, pairwise as pairwise$1, mergeMap, delay as delay$1 } from 'rxjs/operators';
|
|
8
8
|
import { v4 } from 'uuid';
|
|
@@ -8650,6 +8650,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
8650
8650
|
}]
|
|
8651
8651
|
}] });
|
|
8652
8652
|
|
|
8653
|
+
class QdIconButtonModule {
|
|
8654
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdIconButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
8655
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: QdIconButtonModule, declarations: [QdIconButtonComponent], imports: [CommonModule], exports: [QdIconButtonComponent] });
|
|
8656
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdIconButtonModule, imports: [CommonModule] });
|
|
8657
|
+
}
|
|
8658
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdIconButtonModule, decorators: [{
|
|
8659
|
+
type: NgModule,
|
|
8660
|
+
args: [{
|
|
8661
|
+
imports: [CommonModule],
|
|
8662
|
+
declarations: [QdIconButtonComponent],
|
|
8663
|
+
exports: [QdIconButtonComponent]
|
|
8664
|
+
}]
|
|
8665
|
+
}] });
|
|
8666
|
+
|
|
8653
8667
|
class QdAutofocusService {
|
|
8654
8668
|
_isAutofocusActivated = false;
|
|
8655
8669
|
set isAutofocusActivated(hasInstance) {
|
|
@@ -9503,8 +9517,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
9503
9517
|
args: ['class.qd-form-error']
|
|
9504
9518
|
}] } });
|
|
9505
9519
|
|
|
9520
|
+
class QdKeyboardDetectionService {
|
|
9521
|
+
static KEYBOARD_ACTIVE_CLASS = 'qd-keyboard-active';
|
|
9522
|
+
document = inject(DOCUMENT);
|
|
9523
|
+
ngZone = inject(NgZone);
|
|
9524
|
+
onKeydown = () => {
|
|
9525
|
+
this.document?.documentElement?.classList.add(QdKeyboardDetectionService.KEYBOARD_ACTIVE_CLASS);
|
|
9526
|
+
};
|
|
9527
|
+
onPointerdown = () => {
|
|
9528
|
+
this.document?.documentElement?.classList.remove(QdKeyboardDetectionService.KEYBOARD_ACTIVE_CLASS);
|
|
9529
|
+
};
|
|
9530
|
+
constructor() {
|
|
9531
|
+
const root = this.document?.documentElement;
|
|
9532
|
+
if (!root)
|
|
9533
|
+
return;
|
|
9534
|
+
root.classList.add(QdKeyboardDetectionService.KEYBOARD_ACTIVE_CLASS);
|
|
9535
|
+
this.ngZone.runOutsideAngular(() => {
|
|
9536
|
+
this.document.addEventListener('keydown', this.onKeydown, true);
|
|
9537
|
+
this.document.addEventListener('pointerdown', this.onPointerdown, true);
|
|
9538
|
+
});
|
|
9539
|
+
}
|
|
9540
|
+
ngOnDestroy() {
|
|
9541
|
+
this.document?.removeEventListener('keydown', this.onKeydown, true);
|
|
9542
|
+
this.document?.removeEventListener('pointerdown', this.onPointerdown, true);
|
|
9543
|
+
}
|
|
9544
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdKeyboardDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
9545
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdKeyboardDetectionService, providedIn: 'root' });
|
|
9546
|
+
}
|
|
9547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdKeyboardDetectionService, decorators: [{
|
|
9548
|
+
type: Injectable,
|
|
9549
|
+
args: [{ providedIn: 'root' }]
|
|
9550
|
+
}], ctorParameters: () => [] });
|
|
9551
|
+
|
|
9506
9552
|
// @ts-strict-ignore
|
|
9507
9553
|
class QdCheckboxComponent {
|
|
9554
|
+
keyboardDetection = inject(QdKeyboardDetectionService);
|
|
9508
9555
|
// TODO: Refactor FormInput for better internal interface
|
|
9509
9556
|
inputData;
|
|
9510
9557
|
value;
|
|
@@ -9563,7 +9610,7 @@ class QdCheckboxComponent {
|
|
|
9563
9610
|
useExisting: QdCheckboxComponent,
|
|
9564
9611
|
multi: true
|
|
9565
9612
|
}
|
|
9566
|
-
], ngImport: i0, template: "<label\n [for]=\"inputData.value\"\n [attr.data-test-id]=\"testId + '-label'\"\n [ngClass]=\"\n 'qd-checkbox__label' +\n (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n (checked ? ' qd-checkbox__label--checked' : '')\n \"\n>\n <input\n type=\"checkbox\"\n qdVisuallyHidden\n [qdAutofocus]=\"hasAutofocus\"\n [id]=\"inputData.value\"\n [attr.data-test-id]=\"testId + '-input'\"\n [ngClass]=\"'qd-checkbox__checkbox'\"\n [name]=\"id\"\n [value]=\"inputData.value\"\n [disabled]=\"inputData.disabled || disabled\"\n (click)=\"handleClick(inputData.value, $event)\"\n [checked]=\"checked\"\n />\n\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"checked\"\n [icon]=\"'timesSquareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-checked'\"\n ></qd-icon>\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"!checked\"\n [icon]=\"'squareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n ></qd-icon>\n\n <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
9613
|
+
], ngImport: i0, template: "<label\n [for]=\"inputData.value + id\"\n [attr.data-test-id]=\"testId + '-label'\"\n [ngClass]=\"\n 'qd-checkbox__label' +\n (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n (checked ? ' qd-checkbox__label--checked' : '')\n \"\n>\n <input\n type=\"checkbox\"\n tabindex=\"0\"\n qdVisuallyHidden\n [qdAutofocus]=\"hasAutofocus\"\n [id]=\"inputData.value + id\"\n [attr.data-test-id]=\"testId + '-input'\"\n [ngClass]=\"'qd-checkbox__checkbox'\"\n [name]=\"id\"\n [value]=\"inputData.value\"\n [disabled]=\"inputData.disabled || disabled\"\n (click)=\"handleClick(inputData.value, $event)\"\n [checked]=\"checked\"\n />\n\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"checked\"\n [icon]=\"'timesSquareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-checked'\"\n ></qd-icon>\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"!checked\"\n [icon]=\"'squareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n ></qd-icon>\n\n <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{position:relative;margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}.qd-keyboard-active .qd-checkbox__checkbox:focus~.qd-checkbox__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.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: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
9567
9614
|
}
|
|
9568
9615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCheckboxComponent, decorators: [{
|
|
9569
9616
|
type: Component,
|
|
@@ -9573,7 +9620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
9573
9620
|
useExisting: QdCheckboxComponent,
|
|
9574
9621
|
multi: true
|
|
9575
9622
|
}
|
|
9576
|
-
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkbox' }, standalone: false, template: "<label\n [for]=\"inputData.value\"\n [attr.data-test-id]=\"testId + '-label'\"\n [ngClass]=\"\n 'qd-checkbox__label' +\n (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n (checked ? ' qd-checkbox__label--checked' : '')\n \"\n>\n <input\n type=\"checkbox\"\n qdVisuallyHidden\n [qdAutofocus]=\"hasAutofocus\"\n [id]=\"inputData.value\"\n [attr.data-test-id]=\"testId + '-input'\"\n [ngClass]=\"'qd-checkbox__checkbox'\"\n [name]=\"id\"\n [value]=\"inputData.value\"\n [disabled]=\"inputData.disabled || disabled\"\n (click)=\"handleClick(inputData.value, $event)\"\n [checked]=\"checked\"\n />\n\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"checked\"\n [icon]=\"'timesSquareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-checked'\"\n ></qd-icon>\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"!checked\"\n [icon]=\"'squareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n ></qd-icon>\n\n <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}\n"] }]
|
|
9623
|
+
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkbox' }, standalone: false, template: "<label\n [for]=\"inputData.value + id\"\n [attr.data-test-id]=\"testId + '-label'\"\n [ngClass]=\"\n 'qd-checkbox__label' +\n (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n (checked ? ' qd-checkbox__label--checked' : '')\n \"\n>\n <input\n type=\"checkbox\"\n tabindex=\"0\"\n qdVisuallyHidden\n [qdAutofocus]=\"hasAutofocus\"\n [id]=\"inputData.value + id\"\n [attr.data-test-id]=\"testId + '-input'\"\n [ngClass]=\"'qd-checkbox__checkbox'\"\n [name]=\"id\"\n [value]=\"inputData.value\"\n [disabled]=\"inputData.disabled || disabled\"\n (click)=\"handleClick(inputData.value, $event)\"\n [checked]=\"checked\"\n />\n\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"checked\"\n [icon]=\"'timesSquareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-checked'\"\n ></qd-icon>\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"!checked\"\n [icon]=\"'squareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n ></qd-icon>\n\n <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{position:relative;margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}.qd-keyboard-active .qd-checkbox__checkbox:focus~.qd-checkbox__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"] }]
|
|
9577
9624
|
}], ctorParameters: () => [], propDecorators: { inputData: [{
|
|
9578
9625
|
type: Input
|
|
9579
9626
|
}], value: [{
|
|
@@ -9645,14 +9692,10 @@ class QdCheckboxesService {
|
|
|
9645
9692
|
this.checkboxesListForView = this.checkboxesList;
|
|
9646
9693
|
}
|
|
9647
9694
|
updateCheckboxesListForView(value) {
|
|
9648
|
-
|
|
9649
|
-
|
|
9650
|
-
|
|
9651
|
-
|
|
9652
|
-
else {
|
|
9653
|
-
return checkbox;
|
|
9654
|
-
}
|
|
9655
|
-
});
|
|
9695
|
+
const checkbox = this.checkboxesListForView.find(option => option.value === value);
|
|
9696
|
+
if (checkbox) {
|
|
9697
|
+
checkbox.checked = !checkbox.checked;
|
|
9698
|
+
}
|
|
9656
9699
|
}
|
|
9657
9700
|
getCheckboxesListForView() {
|
|
9658
9701
|
return this.checkboxesListForView;
|
|
@@ -9895,6 +9938,9 @@ class QdCheckboxesComponent {
|
|
|
9895
9938
|
setDisabledState(disabled) {
|
|
9896
9939
|
this.disabled = disabled;
|
|
9897
9940
|
}
|
|
9941
|
+
getCheckboxId(_index, checkbox) {
|
|
9942
|
+
return checkbox.index;
|
|
9943
|
+
}
|
|
9898
9944
|
handleClick(checkbox) {
|
|
9899
9945
|
if (checkbox.disabled || this.config.disabled)
|
|
9900
9946
|
return;
|
|
@@ -9975,7 +10021,7 @@ class QdCheckboxesComponent {
|
|
|
9975
10021
|
},
|
|
9976
10022
|
QdCheckboxesService,
|
|
9977
10023
|
QdFormsActionEmitterService
|
|
9978
|
-
], viewQueries: [{ propertyName: "checkboxes", predicate: QdCheckboxComponent, descendants: true }], 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<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\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-checkboxes__checkbox-section\">\n <qd-checkbox\n *ngFor=\"let checkbox of checkboxesListForView\"\n [inputData]=\"checkbox\"\n [value]=\"checkboxesValues[checkbox.index]\"\n [disabled]=\"checkbox.disabled || disabled\"\n [hasAutofocus]=\"hasAutofocus && checkbox.index === 0\"\n (valueChange)=\"handleClick(checkbox)\"\n [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n ></qd-checkbox>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n [hint]=\"hint\"\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]=\"selectedValuesTranslated\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"selectedValuesTranslated\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\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: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled", "hasAutofocus"], outputs: ["valueChange"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
10024
|
+
], viewQueries: [{ propertyName: "checkboxes", predicate: QdCheckboxComponent, descendants: true }], 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<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\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-checkboxes__checkbox-section\">\n <qd-checkbox\n *ngFor=\"let checkbox of checkboxesListForView; trackBy: getCheckboxId\"\n [inputData]=\"checkbox\"\n [value]=\"checkboxesValues[checkbox.index]\"\n [disabled]=\"checkbox.disabled || disabled\"\n [hasAutofocus]=\"hasAutofocus && checkbox.index === 0\"\n (valueChange)=\"handleClick(checkbox)\"\n [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n ></qd-checkbox>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n [hint]=\"hint\"\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]=\"selectedValuesTranslated\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"selectedValuesTranslated\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\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: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled", "hasAutofocus"], outputs: ["valueChange"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
9979
10025
|
}
|
|
9980
10026
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCheckboxesComponent, decorators: [{
|
|
9981
10027
|
type: Component,
|
|
@@ -9987,7 +10033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
9987
10033
|
},
|
|
9988
10034
|
QdCheckboxesService,
|
|
9989
10035
|
QdFormsActionEmitterService
|
|
9990
|
-
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, 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<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\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-checkboxes__checkbox-section\">\n <qd-checkbox\n *ngFor=\"let checkbox of checkboxesListForView\"\n [inputData]=\"checkbox\"\n [value]=\"checkboxesValues[checkbox.index]\"\n [disabled]=\"checkbox.disabled || disabled\"\n [hasAutofocus]=\"hasAutofocus && checkbox.index === 0\"\n (valueChange)=\"handleClick(checkbox)\"\n [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n ></qd-checkbox>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n [hint]=\"hint\"\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]=\"selectedValuesTranslated\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"selectedValuesTranslated\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"] }]
|
|
10036
|
+
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, 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<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\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-checkboxes__checkbox-section\">\n <qd-checkbox\n *ngFor=\"let checkbox of checkboxesListForView; trackBy: getCheckboxId\"\n [inputData]=\"checkbox\"\n [value]=\"checkboxesValues[checkbox.index]\"\n [disabled]=\"checkbox.disabled || disabled\"\n [hasAutofocus]=\"hasAutofocus && checkbox.index === 0\"\n (valueChange)=\"handleClick(checkbox)\"\n [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n ></qd-checkbox>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n [hint]=\"hint\"\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]=\"selectedValuesTranslated\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"selectedValuesTranslated\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"] }]
|
|
9991
10037
|
}], ctorParameters: () => [], propDecorators: { formControlName: [{
|
|
9992
10038
|
type: Input
|
|
9993
10039
|
}], values: [{
|
|
@@ -10932,9 +10978,18 @@ class QdDropdownComponent {
|
|
|
10932
10978
|
*/
|
|
10933
10979
|
valueChange = new EventEmitter();
|
|
10934
10980
|
/**
|
|
10935
|
-
* Emits
|
|
10981
|
+
* Emits when the dropdown is opened.
|
|
10982
|
+
*
|
|
10983
|
+
* @deprecated The name no longer reflects the behavior (it fires on every open, not just on a
|
|
10984
|
+
* click). Use {@link dropdownOpened} instead. Will be removed in v22.
|
|
10936
10985
|
*/
|
|
10937
10986
|
enterClick = new EventEmitter();
|
|
10987
|
+
/**
|
|
10988
|
+
* Emits whenever the dropdown opens or closes, regardless of input modality
|
|
10989
|
+
* (mouse click or keyboard Enter/Space). The boolean payload is the open state:
|
|
10990
|
+
* `true` when opened, `false` when closed.
|
|
10991
|
+
*/
|
|
10992
|
+
dropdownOpened = new EventEmitter();
|
|
10938
10993
|
/**
|
|
10939
10994
|
* Emits event when the hint is clicked/tapped. `hintAction` must be set to `true` for this.
|
|
10940
10995
|
*/
|
|
@@ -11087,11 +11142,17 @@ class QdDropdownComponent {
|
|
|
11087
11142
|
}
|
|
11088
11143
|
onOpenDropdown() {
|
|
11089
11144
|
this.isOpen = true;
|
|
11145
|
+
// Emitted whenever the trigger opens — by mouse click or by keyboard (Enter/Space) — so the
|
|
11146
|
+
// open event fires consistently regardless of input modality. `enterClick` is kept for
|
|
11147
|
+
// backward compatibility (deprecated, removed in v22); `dropdownOpened` is the replacement.
|
|
11148
|
+
this.enterClick.emit();
|
|
11149
|
+
this.dropdownOpened.emit(true);
|
|
11090
11150
|
this.loadOptionsForCurrentConfig();
|
|
11091
11151
|
this.dropdownOptions?.onOpen();
|
|
11092
11152
|
}
|
|
11093
11153
|
onDropdownClosed() {
|
|
11094
11154
|
this.isOpen = false;
|
|
11155
|
+
this.dropdownOpened.emit(false);
|
|
11095
11156
|
if (this.control && this._value != null) {
|
|
11096
11157
|
this._onChange(this._value);
|
|
11097
11158
|
this._onTouch();
|
|
@@ -11151,7 +11212,7 @@ class QdDropdownComponent {
|
|
|
11151
11212
|
});
|
|
11152
11213
|
}
|
|
11153
11214
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11154
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDropdownComponent, isStandalone: false, selector: "qd-dropdown", inputs: { value: "value", id: "id", formControlName: "formControlName", config: "config", testId: ["data-test-id", "testId"], qdPopoverMaxHeight: "qdPopoverMaxHeight", dense: "dense" }, outputs: { valueChange: "valueChange", enterClick: "enterClick", clickHint: "clickHint", clickReadonly: "clickReadonly", clickViewonly: "clickViewonly", optionsResolved: "optionsResolved" }, host: { properties: { "class.qd-dropdown-readonly": "this.readonly", "class.qd-dropdown--readonly-action": "this.readonlyAction", "class.qd-dropdown-viewonly": "this.viewonly", "class.qd-dropdown--viewonly-action": "this.viewonlyAction", "class.qd-form-hint-action": "this.hintAction", "class.qd-dropdown--hint-action": "this.hintAction", "class.qd-form-disabled": "this.disabled", "class.qd-dropdown-disabled": "this.disabled", "class.dense": "this.dense", "class.qd-dropdown-open": "this.isOpen", "class.qd-form-error": "this.hasError", "class.qd-dropdown-error": "this.hasError", "class.qd-dropdown-selected": "this.isSelected" }, classAttribute: "qd-dropdown" }, providers: [
|
|
11215
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDropdownComponent, isStandalone: false, selector: "qd-dropdown", inputs: { value: "value", id: "id", formControlName: "formControlName", config: "config", testId: ["data-test-id", "testId"], qdPopoverMaxHeight: "qdPopoverMaxHeight", dense: "dense" }, outputs: { valueChange: "valueChange", enterClick: "enterClick", dropdownOpened: "dropdownOpened", clickHint: "clickHint", clickReadonly: "clickReadonly", clickViewonly: "clickViewonly", optionsResolved: "optionsResolved" }, host: { properties: { "class.qd-dropdown-readonly": "this.readonly", "class.qd-dropdown--readonly-action": "this.readonlyAction", "class.qd-dropdown-viewonly": "this.viewonly", "class.qd-dropdown--viewonly-action": "this.viewonlyAction", "class.qd-form-hint-action": "this.hintAction", "class.qd-dropdown--hint-action": "this.hintAction", "class.qd-form-disabled": "this.disabled", "class.qd-dropdown-disabled": "this.disabled", "class.dense": "this.dense", "class.qd-dropdown-open": "this.isOpen", "class.qd-form-error": "this.hasError", "class.qd-dropdown-error": "this.hasError", "class.qd-dropdown-selected": "this.isSelected" }, classAttribute: "qd-dropdown" }, providers: [
|
|
11155
11216
|
QdFormsActionEmitterService,
|
|
11156
11217
|
QdFormOptionsResolverRegistry,
|
|
11157
11218
|
QdFormKeyboardService,
|
|
@@ -11165,7 +11226,7 @@ class QdDropdownComponent {
|
|
|
11165
11226
|
provide: QD_FOCUSABLE_TOKEN,
|
|
11166
11227
|
useExisting: QdDropdownComponent
|
|
11167
11228
|
}
|
|
11168
|
-
], viewQueries: [{ propertyName: "dropdownOptions", first: true, predicate: QdDropdownOptionsComponent, descendants: true }, { propertyName: "dropdownDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "box", first: true, predicate: ["box"], descendants: true }], 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></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n <div\n class=\"qd-dropdown__box\"\n tabindex=\"0\"\n *ngIf=\"!readonly && !viewonly && hasOptions\"\n [qdPopoverOnClick]=\"dropdownMenu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverDisabled]=\"disabled\"\n [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverEnableKeyControl]=\"true\"\n [qdPopoverFlipIntoViewport]=\"true\"\n (opened)=\"onOpenDropdown()\"\n (closed)=\"onDropdownClosed()\"\n
|
|
11229
|
+
], viewQueries: [{ propertyName: "dropdownOptions", first: true, predicate: QdDropdownOptionsComponent, descendants: true }, { propertyName: "dropdownDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "box", first: true, predicate: ["box"], descendants: true }], 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></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n <div\n class=\"qd-dropdown__box\"\n tabindex=\"0\"\n *ngIf=\"!readonly && !viewonly && hasOptions\"\n [qdPopoverOnClick]=\"dropdownMenu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverDisabled]=\"disabled\"\n [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverEnableKeyControl]=\"true\"\n [qdPopoverFlipIntoViewport]=\"true\"\n (opened)=\"onOpenDropdown()\"\n (closed)=\"onDropdownClosed()\"\n qdPopoverPlacement=\"bottom-start\"\n >\n {{ (selectedOption?.i18n | translate) || placeholder }}\n\n <div class=\"qd-dropdown-suffix\">\n <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n </div>\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]=\"[selectedOption]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[selectedOption]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #dropdownMenu>\n <qd-dropdown-options\n [filter]=\"filter\"\n [filterText]=\"filterText\"\n [testId]=\"testId\"\n [id]=\"id\"\n (filterChange)=\"handleFilterChange($event)\"\n (optionClick)=\"handleClick($event)\"\n ></qd-dropdown-options>\n</ng-template>\n", styles: [".qd-dropdown__wrapper{position:relative;margin-bottom:.375rem}.qd-dropdown__wrapper.dense{margin-bottom:0}.qd-dropdown__wrapper .qd-dropdown__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.25rem;background:#fff;color:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-dropdown__wrapper .qd-dropdown__box.dense{margin-bottom:0}.qd-dropdown-selected .qd-dropdown__wrapper .qd-dropdown__box{color:#171717}.qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown__wrapper .qd-dropdown__box:active,.qd-dropdown__wrapper .qd-dropdown__box:hover{padding:0 .6875rem;border-width:.125rem;border-color:#171717;line-height:2.125rem;outline:0}.qd-dropdown__wrapper .qd-dropdown__box:active{color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:hover:after{border-top-color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:after{position:absolute;z-index:5;top:1rem;right:.75rem;width:0;height:0;border-top:.3125rem solid rgb(180,180,180);border-right:.3125rem solid rgba(255,255,255,0);border-left:.3125rem solid rgba(255,255,255,0);content:\"\";pointer-events:none}.qd-dropdown__wrapper .qd-dropdown__box .qd-dropdown-suffix{position:relative;z-index:8;margin-right:1rem;background:#fff}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box{background:#f5f5f5;color:#979797}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:active{padding:0 .75rem;border:.0625rem solid rgb(180,180,180);line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly{color:#069;cursor:pointer}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:hover,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:active,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:focus{color:#069;text-decoration:underline}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly{color:#069;cursor:pointer}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:hover,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:active,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:focus{color:#069;text-decoration:underline}.qd-dropdown-error .qd-dropdown__box{padding:0 .75rem;border:.0625rem solid rgb(199,0,35);line-height:2.25rem}.qd-dropdown-error .qd-dropdown__box:focus,.qd-dropdown-error .qd-dropdown__box:hover,.qd-dropdown-error .qd-dropdown__box:active{padding:0 .6875rem;border:.125rem solid rgb(199,0,35);line-height:2.125rem}.qd-dropdown-error .qd-dropdown__box .qd-error-icon{color:#c70023}.qd-dropdown{display:block;height:4.5rem;margin-bottom:.75rem}.qd-dropdown.dense{width:100%;height:auto;margin-bottom:0}.qd-dropdown.dense .qd-dropdown__wrapper,.qd-dropdown.dense .qd-dropdown__box{margin-bottom:0}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box{padding:0 .6875rem;border-width:.125rem;border-color:#069;line-height:2.125rem}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box:after{border-top:none;border-bottom:.3125rem solid rgb(23,23,23)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: QdDropdownOptionsComponent, selector: "qd-dropdown-options", inputs: ["filter", "filterText", "testId", "id"], outputs: ["filterChange", "optionClick"] }, { 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 });
|
|
11169
11230
|
}
|
|
11170
11231
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDropdownComponent, decorators: [{
|
|
11171
11232
|
type: Component,
|
|
@@ -11183,7 +11244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
11183
11244
|
provide: QD_FOCUSABLE_TOKEN,
|
|
11184
11245
|
useExisting: QdDropdownComponent
|
|
11185
11246
|
}
|
|
11186
|
-
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-dropdown' }, 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></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n <div\n class=\"qd-dropdown__box\"\n tabindex=\"0\"\n *ngIf=\"!readonly && !viewonly && hasOptions\"\n [qdPopoverOnClick]=\"dropdownMenu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverDisabled]=\"disabled\"\n [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverEnableKeyControl]=\"true\"\n [qdPopoverFlipIntoViewport]=\"true\"\n (opened)=\"onOpenDropdown()\"\n (closed)=\"onDropdownClosed()\"\n
|
|
11247
|
+
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-dropdown' }, 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></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n <div\n class=\"qd-dropdown__box\"\n tabindex=\"0\"\n *ngIf=\"!readonly && !viewonly && hasOptions\"\n [qdPopoverOnClick]=\"dropdownMenu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverDisabled]=\"disabled\"\n [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverEnableKeyControl]=\"true\"\n [qdPopoverFlipIntoViewport]=\"true\"\n (opened)=\"onOpenDropdown()\"\n (closed)=\"onDropdownClosed()\"\n qdPopoverPlacement=\"bottom-start\"\n >\n {{ (selectedOption?.i18n | translate) || placeholder }}\n\n <div class=\"qd-dropdown-suffix\">\n <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n </div>\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]=\"[selectedOption]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[selectedOption]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #dropdownMenu>\n <qd-dropdown-options\n [filter]=\"filter\"\n [filterText]=\"filterText\"\n [testId]=\"testId\"\n [id]=\"id\"\n (filterChange)=\"handleFilterChange($event)\"\n (optionClick)=\"handleClick($event)\"\n ></qd-dropdown-options>\n</ng-template>\n", styles: [".qd-dropdown__wrapper{position:relative;margin-bottom:.375rem}.qd-dropdown__wrapper.dense{margin-bottom:0}.qd-dropdown__wrapper .qd-dropdown__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.25rem;background:#fff;color:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-dropdown__wrapper .qd-dropdown__box.dense{margin-bottom:0}.qd-dropdown-selected .qd-dropdown__wrapper .qd-dropdown__box{color:#171717}.qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown__wrapper .qd-dropdown__box:active,.qd-dropdown__wrapper .qd-dropdown__box:hover{padding:0 .6875rem;border-width:.125rem;border-color:#171717;line-height:2.125rem;outline:0}.qd-dropdown__wrapper .qd-dropdown__box:active{color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:hover:after{border-top-color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:after{position:absolute;z-index:5;top:1rem;right:.75rem;width:0;height:0;border-top:.3125rem solid rgb(180,180,180);border-right:.3125rem solid rgba(255,255,255,0);border-left:.3125rem solid rgba(255,255,255,0);content:\"\";pointer-events:none}.qd-dropdown__wrapper .qd-dropdown__box .qd-dropdown-suffix{position:relative;z-index:8;margin-right:1rem;background:#fff}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box{background:#f5f5f5;color:#979797}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:active{padding:0 .75rem;border:.0625rem solid rgb(180,180,180);line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly{color:#069;cursor:pointer}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:hover,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:active,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:focus{color:#069;text-decoration:underline}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly{color:#069;cursor:pointer}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:hover,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:active,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:focus{color:#069;text-decoration:underline}.qd-dropdown-error .qd-dropdown__box{padding:0 .75rem;border:.0625rem solid rgb(199,0,35);line-height:2.25rem}.qd-dropdown-error .qd-dropdown__box:focus,.qd-dropdown-error .qd-dropdown__box:hover,.qd-dropdown-error .qd-dropdown__box:active{padding:0 .6875rem;border:.125rem solid rgb(199,0,35);line-height:2.125rem}.qd-dropdown-error .qd-dropdown__box .qd-error-icon{color:#c70023}.qd-dropdown{display:block;height:4.5rem;margin-bottom:.75rem}.qd-dropdown.dense{width:100%;height:auto;margin-bottom:0}.qd-dropdown.dense .qd-dropdown__wrapper,.qd-dropdown.dense .qd-dropdown__box{margin-bottom:0}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box{padding:0 .6875rem;border-width:.125rem;border-color:#069;line-height:2.125rem}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box:after{border-top:none;border-bottom:.3125rem solid rgb(23,23,23)}\n"] }]
|
|
11187
11248
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
11188
11249
|
type: Input
|
|
11189
11250
|
}], id: [{
|
|
@@ -11201,6 +11262,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
11201
11262
|
type: Output
|
|
11202
11263
|
}], enterClick: [{
|
|
11203
11264
|
type: Output
|
|
11265
|
+
}], dropdownOpened: [{
|
|
11266
|
+
type: Output
|
|
11204
11267
|
}], clickHint: [{
|
|
11205
11268
|
type: Output
|
|
11206
11269
|
}], clickReadonly: [{
|
|
@@ -12246,6 +12309,7 @@ class QdDatepickerComponent {
|
|
|
12246
12309
|
displayedDateTime = '';
|
|
12247
12310
|
label;
|
|
12248
12311
|
hint;
|
|
12312
|
+
hasAutofocus = false;
|
|
12249
12313
|
readonlyAction = false;
|
|
12250
12314
|
viewonlyAction = false;
|
|
12251
12315
|
language = DEFAULT_LANGUAGE;
|
|
@@ -12427,6 +12491,7 @@ class QdDatepickerComponent {
|
|
|
12427
12491
|
updateConfiguration() {
|
|
12428
12492
|
this.label = getLabel(this.config);
|
|
12429
12493
|
this.hint = getHint(this.config);
|
|
12494
|
+
this.hasAutofocus = getHasAutofocus(this.config);
|
|
12430
12495
|
this.readonly = getReadonly(this.config, this.readonly);
|
|
12431
12496
|
this.viewonly = getViewonly(this.config, this.viewonly);
|
|
12432
12497
|
this.hintAction = getHintAction(this.config);
|
|
@@ -12535,7 +12600,7 @@ class QdDatepickerComponent {
|
|
|
12535
12600
|
useValue: true
|
|
12536
12601
|
},
|
|
12537
12602
|
QdFormsActionEmitterService
|
|
12538
|
-
], viewQueries: [{ propertyName: "popover", first: true, predicate: ["qdPopoverOnClick"], descendants: true }], 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></qd-form-label>\n\n<qd-input\n *ngIf=\"!readonly && !viewonly\"\n [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n [config]=\"{
|
|
12603
|
+
], viewQueries: [{ propertyName: "popover", first: true, predicate: ["qdPopoverOnClick"], descendants: true }], 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></qd-form-label>\n\n<qd-input\n *ngIf=\"!readonly && !viewonly\"\n [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n [config]=\"{\n disabled,\n readonly,\n viewonly,\n placeholder: config?.placeholder,\n hasAutofocus\n }\"\n [isError]=\"hasError\"\n>\n <button\n type=\"button\"\n class=\"datepicker-toggle\"\n qdIconButton\n [qdPopoverOnClick]=\"disabled ? null : calendar\"\n [qdPopoverMaxWidth]=\"332\"\n qdPopoverCloseStrategy=\"onOutsideClick\"\n #qdPopoverOnClick=\"qdPopoverOnClick\"\n >\n <qd-icon [icon]=\"'calendar'\"></qd-icon>\n </button>\n</qd-input>\n\n<ng-template #calendar>\n <qd-calendar\n [selectedDate]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n [language]=\"language\"\n [disabledDates]=\"config?.disabledDates\"\n (selectedChange)=\"handleUpdatedDate($event)\"\n ></qd-calendar>\n <qd-dropdown\n class=\"timepicker-dropdown\"\n *ngIf=\"timePicker\"\n [value]=\"displayedTime\"\n (valueChange)=\"handleUpdatedTime($event)\"\n [config]=\"timePicker\"\n [qdPopoverMaxHeight]=\"300\"\n ></qd-dropdown>\n</ng-template>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n [hint]=\"hint\"\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]=\"[displayedDate]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[displayedDate]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: ["qd-datepicker{position:relative;display:block;width:100%;margin-bottom:.75rem}qd-datepicker .calendar{padding:1rem}qd-datepicker button.datepicker-toggle{width:1.75rem;height:1.75rem;justify-content:center;padding:.25rem;margin-right:.125rem}qd-datepicker button.datepicker-toggle .qd-icon{display:flex;align-items:center;justify-content:center;font-size:1.125rem;line-height:1}qd-datepicker button.datepicker-toggle:focus-visible{background:#fff0;box-shadow:inset 0 0 0 .125rem #069;outline:none}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input{height:2.25rem;margin-bottom:.375rem!important}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-label,qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-hint{display:none}qd-datepicker .qd-form-disabled .datepicker-toggle{color:#979797;cursor:default}qd-datepicker.qd-datepicker-calendar-only{margin-bottom:0}qd-datepicker.qd-datepicker-calendar-only qd-input{margin:0}qd-datepicker.qd-datepicker-calendar-only .qd-form-label,qd-datepicker.qd-datepicker-calendar-only .qd-form-hint,qd-datepicker.qd-datepicker-calendar-only .qd-input-input input{display:none}qd-datepicker.qd-datepicker-calendar-only .qd-input-input{height:initial!important;padding:0!important;border:none!important;margin:0!important}qd-datepicker.qd-datepicker-calendar-only .qd-input-suffix{margin-left:0!important}.timepicker-dropdown{margin:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { 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: "component", type: QdCalendarComponent, selector: "qd-calendar", inputs: ["selectedDate", "language", "disabledDates"], outputs: ["selectedChange"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "dropdownOpened", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { 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: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
12539
12604
|
}
|
|
12540
12605
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDatepickerComponent, decorators: [{
|
|
12541
12606
|
type: Component,
|
|
@@ -12550,7 +12615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
12550
12615
|
useValue: true
|
|
12551
12616
|
},
|
|
12552
12617
|
QdFormsActionEmitterService
|
|
12553
|
-
], 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></qd-form-label>\n\n<qd-input\n *ngIf=\"!readonly && !viewonly\"\n [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n [config]=\"{
|
|
12618
|
+
], 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></qd-form-label>\n\n<qd-input\n *ngIf=\"!readonly && !viewonly\"\n [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n [config]=\"{\n disabled,\n readonly,\n viewonly,\n placeholder: config?.placeholder,\n hasAutofocus\n }\"\n [isError]=\"hasError\"\n>\n <button\n type=\"button\"\n class=\"datepicker-toggle\"\n qdIconButton\n [qdPopoverOnClick]=\"disabled ? null : calendar\"\n [qdPopoverMaxWidth]=\"332\"\n qdPopoverCloseStrategy=\"onOutsideClick\"\n #qdPopoverOnClick=\"qdPopoverOnClick\"\n >\n <qd-icon [icon]=\"'calendar'\"></qd-icon>\n </button>\n</qd-input>\n\n<ng-template #calendar>\n <qd-calendar\n [selectedDate]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n [language]=\"language\"\n [disabledDates]=\"config?.disabledDates\"\n (selectedChange)=\"handleUpdatedDate($event)\"\n ></qd-calendar>\n <qd-dropdown\n class=\"timepicker-dropdown\"\n *ngIf=\"timePicker\"\n [value]=\"displayedTime\"\n (valueChange)=\"handleUpdatedTime($event)\"\n [config]=\"timePicker\"\n [qdPopoverMaxHeight]=\"300\"\n ></qd-dropdown>\n</ng-template>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n [hint]=\"hint\"\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]=\"[displayedDate]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[displayedDate]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: ["qd-datepicker{position:relative;display:block;width:100%;margin-bottom:.75rem}qd-datepicker .calendar{padding:1rem}qd-datepicker button.datepicker-toggle{width:1.75rem;height:1.75rem;justify-content:center;padding:.25rem;margin-right:.125rem}qd-datepicker button.datepicker-toggle .qd-icon{display:flex;align-items:center;justify-content:center;font-size:1.125rem;line-height:1}qd-datepicker button.datepicker-toggle:focus-visible{background:#fff0;box-shadow:inset 0 0 0 .125rem #069;outline:none}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input{height:2.25rem;margin-bottom:.375rem!important}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-label,qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-hint{display:none}qd-datepicker .qd-form-disabled .datepicker-toggle{color:#979797;cursor:default}qd-datepicker.qd-datepicker-calendar-only{margin-bottom:0}qd-datepicker.qd-datepicker-calendar-only qd-input{margin:0}qd-datepicker.qd-datepicker-calendar-only .qd-form-label,qd-datepicker.qd-datepicker-calendar-only .qd-form-hint,qd-datepicker.qd-datepicker-calendar-only .qd-input-input input{display:none}qd-datepicker.qd-datepicker-calendar-only .qd-input-input{height:initial!important;padding:0!important;border:none!important;margin:0!important}qd-datepicker.qd-datepicker-calendar-only .qd-input-suffix{margin-left:0!important}.timepicker-dropdown{margin:.75rem}\n"] }]
|
|
12554
12619
|
}], propDecorators: { config: [{
|
|
12555
12620
|
type: Input
|
|
12556
12621
|
}], formControlName: [{
|
|
@@ -15149,6 +15214,7 @@ class QdRadioButtonsComponent {
|
|
|
15149
15214
|
controlContainer = inject(ControlContainer, { optional: true, host: true, skipSelf: true });
|
|
15150
15215
|
ngZone = inject(NgZone);
|
|
15151
15216
|
eventBrokerService = inject(QdEventBrokerService, { optional: true });
|
|
15217
|
+
keyboardDetection = inject(QdKeyboardDetectionService);
|
|
15152
15218
|
/**
|
|
15153
15219
|
* The current form item value, if you are working with Model Binding.
|
|
15154
15220
|
*
|
|
@@ -15218,9 +15284,15 @@ class QdRadioButtonsComponent {
|
|
|
15218
15284
|
get activeOptionAsList() {
|
|
15219
15285
|
return this.options.filter(o => o.value === this.value);
|
|
15220
15286
|
}
|
|
15287
|
+
get tabStopValue() {
|
|
15288
|
+
const enabled = (this.radioButtonsListForView ?? []).filter(option => !(option.disabled || this.disabled));
|
|
15289
|
+
const selected = this.value ? enabled.find(option => option.value === this.value) : undefined;
|
|
15290
|
+
return (selected ?? enabled[0])?.value ?? null;
|
|
15291
|
+
}
|
|
15221
15292
|
label;
|
|
15222
15293
|
align;
|
|
15223
15294
|
filter = false;
|
|
15295
|
+
hasAutofocus = false;
|
|
15224
15296
|
options;
|
|
15225
15297
|
isLabelDisabled;
|
|
15226
15298
|
id;
|
|
@@ -15289,6 +15361,7 @@ class QdRadioButtonsComponent {
|
|
|
15289
15361
|
this.align = getAlign(this.config);
|
|
15290
15362
|
this.label = getLabel(this.config);
|
|
15291
15363
|
this.filter = getFilter$1(this.config);
|
|
15364
|
+
this.hasAutofocus = getHasAutofocus(this.config);
|
|
15292
15365
|
this.options = getOptions(this.config);
|
|
15293
15366
|
this.initRadioButtonList();
|
|
15294
15367
|
this.disabled = getDisabled(this.config) || !!this.control?.disabled;
|
|
@@ -15330,7 +15403,7 @@ class QdRadioButtonsComponent {
|
|
|
15330
15403
|
},
|
|
15331
15404
|
QdRadioButtonsService,
|
|
15332
15405
|
QdFormsActionEmitterService
|
|
15333
|
-
], 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; 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 [id]=\"option.value + id\"\n [ngClass]=\"'qd-radio-buttons__radio-button'\"\n [name]=\"id\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled || disabled\"\n (
|
|
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 });
|
|
15334
15407
|
}
|
|
15335
15408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdRadioButtonsComponent, decorators: [{
|
|
15336
15409
|
type: Component,
|
|
@@ -15342,7 +15415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
15342
15415
|
},
|
|
15343
15416
|
QdRadioButtonsService,
|
|
15344
15417
|
QdFormsActionEmitterService
|
|
15345
|
-
], 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; 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 [id]=\"option.value + id\"\n [ngClass]=\"'qd-radio-buttons__radio-button'\"\n [name]=\"id\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled || disabled\"\n (
|
|
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"] }]
|
|
15346
15419
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
15347
15420
|
type: Input
|
|
15348
15421
|
}], config: [{
|
|
@@ -16468,6 +16541,7 @@ class QdFormModule {
|
|
|
16468
16541
|
QdAutofocusModule,
|
|
16469
16542
|
QdChipModule,
|
|
16470
16543
|
QdCoreModule,
|
|
16544
|
+
QdIconButtonModule,
|
|
16471
16545
|
QdIconModule,
|
|
16472
16546
|
QdPopoverModule,
|
|
16473
16547
|
QdTooltipModule,
|
|
@@ -16493,6 +16567,7 @@ class QdFormModule {
|
|
|
16493
16567
|
QdAutofocusModule,
|
|
16494
16568
|
QdChipModule,
|
|
16495
16569
|
QdCoreModule,
|
|
16570
|
+
QdIconButtonModule,
|
|
16496
16571
|
QdIconModule,
|
|
16497
16572
|
QdPopoverModule,
|
|
16498
16573
|
QdTooltipModule,
|
|
@@ -16509,6 +16584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
16509
16584
|
QdAutofocusModule,
|
|
16510
16585
|
QdChipModule,
|
|
16511
16586
|
QdCoreModule,
|
|
16587
|
+
QdIconButtonModule,
|
|
16512
16588
|
QdIconModule,
|
|
16513
16589
|
QdPopoverModule,
|
|
16514
16590
|
QdTooltipModule,
|
|
@@ -17472,7 +17548,6 @@ class QdButtonModule {
|
|
|
17472
17548
|
QdButtonLinkDirective,
|
|
17473
17549
|
QdButtonStackButtonComponent,
|
|
17474
17550
|
QdButtonStackComponent,
|
|
17475
|
-
QdIconButtonComponent,
|
|
17476
17551
|
QdMenuButtonComponent,
|
|
17477
17552
|
QdButtonAdditionalInfoComponent,
|
|
17478
17553
|
QdSanitizeHtmlPipe], imports: [CommonModule,
|
|
@@ -17481,7 +17556,8 @@ class QdButtonModule {
|
|
|
17481
17556
|
QdTextSectionModule,
|
|
17482
17557
|
QdPopoverModule,
|
|
17483
17558
|
QdCoreModule,
|
|
17484
|
-
QdNotificationsModule
|
|
17559
|
+
QdNotificationsModule,
|
|
17560
|
+
QdIconButtonModule], exports: [QdButtonComponent,
|
|
17485
17561
|
QdButtonGhostDirective,
|
|
17486
17562
|
QdButtonGridComponent,
|
|
17487
17563
|
QdButtonLinkDirective,
|
|
@@ -17495,7 +17571,8 @@ class QdButtonModule {
|
|
|
17495
17571
|
QdTextSectionModule,
|
|
17496
17572
|
QdPopoverModule,
|
|
17497
17573
|
QdCoreModule,
|
|
17498
|
-
QdNotificationsModule
|
|
17574
|
+
QdNotificationsModule,
|
|
17575
|
+
QdIconButtonModule] });
|
|
17499
17576
|
}
|
|
17500
17577
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdButtonModule, decorators: [{
|
|
17501
17578
|
type: NgModule,
|
|
@@ -17507,7 +17584,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
17507
17584
|
QdTextSectionModule,
|
|
17508
17585
|
QdPopoverModule,
|
|
17509
17586
|
QdCoreModule,
|
|
17510
|
-
QdNotificationsModule
|
|
17587
|
+
QdNotificationsModule,
|
|
17588
|
+
QdIconButtonModule
|
|
17511
17589
|
],
|
|
17512
17590
|
declarations: [
|
|
17513
17591
|
QdButtonComponent,
|
|
@@ -17516,7 +17594,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
17516
17594
|
QdButtonLinkDirective,
|
|
17517
17595
|
QdButtonStackButtonComponent,
|
|
17518
17596
|
QdButtonStackComponent,
|
|
17519
|
-
QdIconButtonComponent,
|
|
17520
17597
|
QdMenuButtonComponent,
|
|
17521
17598
|
QdButtonAdditionalInfoComponent,
|
|
17522
17599
|
QdSanitizeHtmlPipe
|
|
@@ -22006,11 +22083,11 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
22006
22083
|
}));
|
|
22007
22084
|
}
|
|
22008
22085
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22009
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n [qdPopoverOnClick]=\"filterLayer\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n 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\">\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 <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-single-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n (closeEventEmitter)=\"closeLayer()\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-single-select>\n </ng-container>\n\n <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n </div>\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-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: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n tabindex=\"0\"\n role=\"button\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-label]=\"i18n | translate\"\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\">\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 <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-single-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n (closeEventEmitter)=\"closeLayer()\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-single-select>\n </ng-container>\n\n <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n </div>\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-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: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
22010
22087
|
}
|
|
22011
22088
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, decorators: [{
|
|
22012
22089
|
type: Component,
|
|
22013
|
-
args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n [qdPopoverOnClick]=\"filterLayer\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n 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\">\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 <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-single-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n (closeEventEmitter)=\"closeLayer()\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-single-select>\n </ng-container>\n\n <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n </div>\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-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"] }]
|
|
22090
|
+
args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n tabindex=\"0\"\n role=\"button\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-label]=\"i18n | translate\"\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\">\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 <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-single-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n (closeEventEmitter)=\"closeLayer()\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-single-select>\n </ng-container>\n\n <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n </div>\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-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"] }]
|
|
22014
22091
|
}], propDecorators: { filterId: [{
|
|
22015
22092
|
type: Input
|
|
22016
22093
|
}], categoryIndex: [{
|
|
@@ -23733,7 +23810,7 @@ class QdSearchComponent {
|
|
|
23733
23810
|
return this.configData.emitEmptySearch ?? !!this.configData.clearable;
|
|
23734
23811
|
}
|
|
23735
23812
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23736
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSearchComponent, isStandalone: false, selector: "qd-search", inputs: { configData: "configData" }, host: { properties: { "class.hidden": "!hasConfig" }, classAttribute: "qd-search" }, providers: [QdSearchService, QdSearchRouterConnectorService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"hasConfig\">\n <div class=\"search-field\">\n <qd-dropdown\n *ngIf=\"preSelectedEnabled\"\n class=\"preselect\"\n [(value)]=\"preSelect\"\n [config]=\"dropdownConfig\"\n ></qd-dropdown>\n\n <qd-input\n class=\"search-input\"\n [(value)]=\"search\"\n [config]=\"inputConfig\"\n (keydown.enter)=\"startSearch()\"\n (clickClear)=\"handleDelete()\"\n data-test-id=\"search-input\"\n ></qd-input>\n <button\n type=\"button\"\n qdIconButton\n qdStopPropagation\n data-test-id=\"search-button\"\n class=\"search-button\"\n (click)=\"startSearch()\"\n [attr.aria-label]=\"'i18n.qd.container.toolbar.search' | translate\"\n >\n <qd-icon [icon]=\"'magnifier'\"></qd-icon>\n </button>\n </div>\n\n <qd-icon\n *ngIf=\"hasAdditionalInfo\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"configData.additionalInfo.content\"\n ></qd-icon>\n</ng-container>\n", styles: [".qd-search{position:relative;display:flex;height:2.25rem}.qd-search.hidden{display:none}.qd-search .search-field{position:relative;display:flex;flex-wrap:nowrap}@media (max-width: 959.98px){.qd-search .search-field,.qd-search .search-field .search-input{width:100%}}.qd-search .preselect{display:flex;height:2.25rem}.qd-search .preselect .qd-dropdown__wrapper{height:2.25rem;margin-bottom:0}.qd-search .preselect .qd-dropdown__wrapper .qd-dropdown__box{background:#e5e5e5;color:#171717;font-size:.8125rem}.qd-search .search-input{display:flex;overflow:hidden;width:16.25rem;margin:0}.qd-search .search-input .qd-form-label,.qd-search .search-input .qd-form-hint{display:none;margin:0}.qd-search .search-input .qd-input-input{padding-right:1.25rem;margin:0!important}.qd-search .search-input .qd-input-input .qd-input-clearable-icon{margin-right:1.75rem!important}.qd-search .search-button{position:absolute;top:0;right:0;width:1.875rem;height:2.25rem;padding:0!important;padding-right:.375rem!important;padding-left:.375rem!important;margin:0!important;background:none}.qd-search .search-button:hover,.qd-search .search-button:focus,.qd-search .search-button:active{background:none}.qd-search .search-button .qd-icon{color:#979797!important;font-size:1.125rem!important;line-height:2.25rem;transform:translate(-.125rem,.0625rem)}.qd-search .search-button .qd-icon:hover,.qd-search .search-button .qd-icon:focus,.qd-search .search-button .qd-icon:active{color:#171717!important}.qd-search .additional-info{align-self:center;padding:0 .375rem 0 0;margin-right:-.375rem;margin-left:.5rem;color:#069;cursor:pointer;font-size:1.3125rem;line-height:2.25rem}.qd-search .additional-info:hover,.qd-search .additional-info:focus,.qd-search .additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
23813
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSearchComponent, isStandalone: false, selector: "qd-search", inputs: { configData: "configData" }, host: { properties: { "class.hidden": "!hasConfig" }, classAttribute: "qd-search" }, providers: [QdSearchService, QdSearchRouterConnectorService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"hasConfig\">\n <div class=\"search-field\">\n <qd-dropdown\n *ngIf=\"preSelectedEnabled\"\n class=\"preselect\"\n [(value)]=\"preSelect\"\n [config]=\"dropdownConfig\"\n ></qd-dropdown>\n\n <qd-input\n class=\"search-input\"\n [(value)]=\"search\"\n [config]=\"inputConfig\"\n (keydown.enter)=\"startSearch()\"\n (clickClear)=\"handleDelete()\"\n data-test-id=\"search-input\"\n ></qd-input>\n <button\n type=\"button\"\n qdIconButton\n qdStopPropagation\n data-test-id=\"search-button\"\n class=\"search-button\"\n (click)=\"startSearch()\"\n [attr.aria-label]=\"'i18n.qd.container.toolbar.search' | translate\"\n >\n <qd-icon [icon]=\"'magnifier'\"></qd-icon>\n </button>\n </div>\n\n <qd-icon\n *ngIf=\"hasAdditionalInfo\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"configData.additionalInfo.content\"\n ></qd-icon>\n</ng-container>\n", styles: [".qd-search{position:relative;display:flex;height:2.25rem}.qd-search.hidden{display:none}.qd-search .search-field{position:relative;display:flex;flex-wrap:nowrap}@media (max-width: 959.98px){.qd-search .search-field,.qd-search .search-field .search-input{width:100%}}.qd-search .preselect{display:flex;height:2.25rem}.qd-search .preselect .qd-dropdown__wrapper{height:2.25rem;margin-bottom:0}.qd-search .preselect .qd-dropdown__wrapper .qd-dropdown__box{background:#e5e5e5;color:#171717;font-size:.8125rem}.qd-search .search-input{display:flex;overflow:hidden;width:16.25rem;margin:0}.qd-search .search-input .qd-form-label,.qd-search .search-input .qd-form-hint{display:none;margin:0}.qd-search .search-input .qd-input-input{padding-right:1.25rem;margin:0!important}.qd-search .search-input .qd-input-input .qd-input-clearable-icon{margin-right:1.75rem!important}.qd-search .search-button{position:absolute;top:0;right:0;width:1.875rem;height:2.25rem;padding:0!important;padding-right:.375rem!important;padding-left:.375rem!important;margin:0!important;background:none}.qd-search .search-button:hover,.qd-search .search-button:focus,.qd-search .search-button:active{background:none}.qd-search .search-button .qd-icon{color:#979797!important;font-size:1.125rem!important;line-height:2.25rem;transform:translate(-.125rem,.0625rem)}.qd-search .search-button .qd-icon:hover,.qd-search .search-button .qd-icon:focus,.qd-search .search-button .qd-icon:active{color:#171717!important}.qd-search .additional-info{align-self:center;padding:0 .375rem 0 0;margin-right:-.375rem;margin-left:.5rem;color:#069;cursor:pointer;font-size:1.3125rem;line-height:2.25rem}.qd-search .additional-info:hover,.qd-search .additional-info:focus,.qd-search .additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "dropdownOpened", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
23737
23814
|
}
|
|
23738
23815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSearchComponent, decorators: [{
|
|
23739
23816
|
type: Component,
|
|
@@ -29190,6 +29267,9 @@ class QdPageCommitActionExecutor {
|
|
|
29190
29267
|
* - **When it ends** — the page stops adopting once the rebuild has rendered
|
|
29191
29268
|
* (`stopAdoptingFrameworkRebuild`).
|
|
29192
29269
|
* - **User edits stay unsaved** — they always happen after that window, so they are still reported.
|
|
29270
|
+
* - **New keys need no window** — a control added under a key the snapshot does not know yet is
|
|
29271
|
+
* folded in right away, as long as it is pristine. So a conditionally shown empty field never
|
|
29272
|
+
* counts as an unsaved change. Only replacements of already known controls need the window.
|
|
29193
29273
|
*
|
|
29194
29274
|
* #### Notes
|
|
29195
29275
|
* - Snapshots store only **raw values** (`getRawValue()`), never control instances — cheap to keep and compare.
|
|
@@ -32060,6 +32140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
32060
32140
|
* ### **Filling a form right after connecting it**
|
|
32061
32141
|
* - You can fill a connected form right after registration — e.g. an `effect` that adds controls or pushes `FormArray` rows. This first fill is the form's starting point, not a user change.
|
|
32062
32142
|
* - So loading data into a fresh form never triggers a false "unsaved changes" prompt. Only later edits count.
|
|
32143
|
+
* - This only covers fills that happen right after registration, in the same task. Data that arrives later — e.g. an HTTP response — counts as a user change. For async loads, render the form only once the data is there (e.g. with `@if`).
|
|
32063
32144
|
*
|
|
32064
32145
|
* ### **Page-Dialog (FullWidth) – Unsaved-Changes Close Contract**
|
|
32065
32146
|
* - When a QdPage is embedded in a full-width page dialog, the directive’s registered form groups are also used to guard dialog closing.
|
|
@@ -34058,7 +34139,7 @@ class AddCommentDialogComponent {
|
|
|
34058
34139
|
};
|
|
34059
34140
|
}
|
|
34060
34141
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AddCommentDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
34061
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: AddCommentDialogComponent, isStandalone: false, selector: "qd-comment-dialog", ngImport: i0, template: "<qd-dialog>\n <form [formGroup]=\"form\">\n <qd-input [config]=\"authorInputConfig\"></qd-input>\n <qd-dropdown\n *ngIf=\"customInputConfig\"\n [config]=\"customInputConfig\"\n [formControlName]=\"'custom'\"\n [attr.data-test-id]=\"'comment-custom'\"\n ></qd-dropdown>\n\n <qd-richtext [config]=\"richtextConfig\" #commentText [formControlName]=\"'comment'\"> </qd-richtext>\n </form>\n <qd-dialog-action>\n <button qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\" [data-test-id]=\"'button-cancel'\">\n {{ \"i18n.qd.comments.add.dialog.cancel\" | translate }}\n </button>\n <button\n [disabled]=\"!commentText.value || commentText.hasError\"\n qdButton\n (click)=\"close('Yes')\"\n [data-test-id]=\"'button-submit'\"\n >\n {{ \"i18n.qd.comments.add.dialog.submit\" | translate }}\n </button>\n </qd-dialog-action>\n</qd-dialog>\n", styles: [".validation-message{margin-top:4px;color:red;font-size:.875em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdRichtextComponent, selector: "qd-richtext", inputs: ["formControlName", "value", "config", "data-test-id"], outputs: ["valueChange", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog", inputs: ["data-test-id"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
34142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: AddCommentDialogComponent, isStandalone: false, selector: "qd-comment-dialog", ngImport: i0, template: "<qd-dialog>\n <form [formGroup]=\"form\">\n <qd-input [config]=\"authorInputConfig\"></qd-input>\n <qd-dropdown\n *ngIf=\"customInputConfig\"\n [config]=\"customInputConfig\"\n [formControlName]=\"'custom'\"\n [attr.data-test-id]=\"'comment-custom'\"\n ></qd-dropdown>\n\n <qd-richtext [config]=\"richtextConfig\" #commentText [formControlName]=\"'comment'\"> </qd-richtext>\n </form>\n <qd-dialog-action>\n <button qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\" [data-test-id]=\"'button-cancel'\">\n {{ \"i18n.qd.comments.add.dialog.cancel\" | translate }}\n </button>\n <button\n [disabled]=\"!commentText.value || commentText.hasError\"\n qdButton\n (click)=\"close('Yes')\"\n [data-test-id]=\"'button-submit'\"\n >\n {{ \"i18n.qd.comments.add.dialog.submit\" | translate }}\n </button>\n </qd-dialog-action>\n</qd-dialog>\n", styles: [".validation-message{margin-top:4px;color:red;font-size:.875em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "dropdownOpened", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdRichtextComponent, selector: "qd-richtext", inputs: ["formControlName", "value", "config", "data-test-id"], outputs: ["valueChange", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog", inputs: ["data-test-id"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
34062
34143
|
}
|
|
34063
34144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AddCommentDialogComponent, decorators: [{
|
|
34064
34145
|
type: Component,
|
|
@@ -35291,7 +35372,7 @@ class QdQuickEditComponent {
|
|
|
35291
35372
|
this.controlContainer.control.valueChanges.pipe(tap(() => this.changeDetectorRef.detectChanges())).subscribe();
|
|
35292
35373
|
}
|
|
35293
35374
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
35294
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{min-width:0;margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;min-width:0;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input{position:relative}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input .qd-input-character-counter{position:absolute;right:.25rem;bottom:.125rem;font-size:.625rem;line-height:1;pointer-events:none}.table-cell.actions,.table-cell.actions-column{min-width:auto;flex:0 0 auto}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{width:100%;min-width:0}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "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: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35375
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{min-width:0;margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;min-width:0;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input{position:relative}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input .qd-input-character-counter{position:absolute;right:.25rem;bottom:.125rem;font-size:.625rem;line-height:1;pointer-events:none}.table-cell.actions,.table-cell.actions-column{min-width:auto;flex:0 0 auto}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{width:100%;min-width:0}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "dropdownOpened", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "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: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35295
35376
|
}
|
|
35296
35377
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, decorators: [{
|
|
35297
35378
|
type: Component,
|