@quadrel-enterprise-ui/framework 18.31.4 → 18.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/comments/add-comment/add-comment-dialog.component.mjs +3 -4
- package/esm2022/lib/forms/checkbox-chips/checkbox-chips.component.mjs +3 -3
- package/esm2022/lib/forms/checkboxes/checkboxes.component.mjs +3 -3
- package/esm2022/lib/forms/datepicker/datepicker.component.mjs +3 -3
- package/esm2022/lib/forms/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/lib/forms/file-upload/file-upload.component.mjs +3 -3
- package/esm2022/lib/forms/input/input.component.mjs +3 -3
- package/esm2022/lib/forms/multi-input/multi-input.component.mjs +3 -3
- package/esm2022/lib/forms/pin-code/pin-code.component.mjs +3 -3
- package/esm2022/lib/forms/radio-buttons/radio-buttons.component.mjs +3 -3
- package/esm2022/lib/forms/richtext/richtext.component.mjs +3 -3
- package/esm2022/lib/forms/switches/switches.component.mjs +3 -3
- package/esm2022/lib/forms/textarea/textarea.component.mjs +3 -3
- package/esm2022/lib/page/object-header/page-object-header.component.mjs +8 -4
- package/esm2022/lib/page/page.component.mjs +8 -2
- package/esm2022/lib/page/shared/services/form-group-manager.service.mjs +59 -14
- package/esm2022/lib/page/shared/services/page-submit-action.service.mjs +4 -2
- package/esm2022/lib/quick-edit/quick-edit.component.mjs +2 -2
- package/esm2022/lib/table/store/table.reducer.mjs +1 -1
- package/fesm2022/quadrel-enterprise-ui-framework.mjs +103 -47
- package/fesm2022/quadrel-enterprise-ui-framework.mjs.map +1 -1
- package/lib/comments/add-comment/add-comment-dialog.component.d.ts +0 -4
- package/lib/comments/add-comment/add-comment-dialog.component.d.ts.map +1 -1
- package/lib/page/object-header/page-object-header.component.d.ts.map +1 -1
- package/lib/page/page.component.d.ts +1 -0
- package/lib/page/page.component.d.ts.map +1 -1
- package/lib/page/shared/services/form-group-manager.service.d.ts +10 -0
- package/lib/page/shared/services/form-group-manager.service.d.ts.map +1 -1
- package/lib/page/shared/services/page-submit-action.service.d.ts +1 -0
- package/lib/page/shared/services/page-submit-action.service.d.ts.map +1 -1
- package/package.json +1 -1
- package/esm2022/index.mjs +0 -74
- package/esm2022/lib/table/__mocks__/mock-secondary-actions.service.mjs +0 -26
- package/index.d.ts.map +0 -1
- package/lib/table/__mocks__/mock-secondary-actions.service.d.ts +0 -14
- package/lib/table/__mocks__/mock-secondary-actions.service.d.ts.map +0 -1
|
@@ -5,8 +5,8 @@ import { DialogModule } from '@angular/cdk/dialog';
|
|
|
5
5
|
import * as i1 from '@angular/common';
|
|
6
6
|
import { CommonModule, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
|
|
7
7
|
import * as i3 from 'rxjs';
|
|
8
|
-
import { BehaviorSubject, pairwise, from, switchMap, map as map$1, Subject, throwError, of, ReplaySubject, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, asyncScheduler, firstValueFrom, combineLatest, concat, take as take$1, delay, first, scan, tap as tap$1, iif, delayWhen, combineLatestWith, withLatestFrom, async, filter as filter$1 } from 'rxjs';
|
|
9
|
-
import { map, takeUntil, take, filter, catchError, debounceTime, startWith, distinctUntilChanged, concatMap, tap, observeOn, skip, delay as delay$1, mergeMap,
|
|
8
|
+
import { BehaviorSubject, pairwise, from, switchMap, map as map$1, Subject, throwError, of, ReplaySubject, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, asyncScheduler, firstValueFrom, combineLatest, concat, take as take$1, delay, first, scan, tap as tap$1, iif, delayWhen, queueScheduler, combineLatestWith, withLatestFrom, async, filter as filter$1 } from 'rxjs';
|
|
9
|
+
import { map, takeUntil, take, filter, catchError, debounceTime, startWith, distinctUntilChanged, concatMap, tap, observeOn, skip, delay as delay$1, mergeMap, switchMap as switchMap$1, pairwise as pairwise$1 } from 'rxjs/operators';
|
|
10
10
|
import { v4 } from 'uuid';
|
|
11
11
|
import * as i1$3 from '@ngx-translate/core';
|
|
12
12
|
import { TranslateService, TranslateModule } from '@ngx-translate/core';
|
|
@@ -9982,7 +9982,7 @@ class QdCheckboxChipsComponent {
|
|
|
9982
9982
|
useExisting: QdCheckboxChipsComponent,
|
|
9983
9983
|
multi: true
|
|
9984
9984
|
}
|
|
9985
|
-
], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n [control]=\"control\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly\">\n <qd-checkbox-chips-item\n *ngFor=\"let option of options; let index = index\"\n [data]=\"option\"\n [data-test-id]=\"testId + '-item-' + index\"\n (click)=\"handleClick(index)\"\n >\n </qd-checkbox-chips-item>\n</ng-container>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly\"\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]=\"selectedTranslations\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"selectedTranslations\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkbox-chips{display:block;margin-bottom:.75rem}.qd-checkbox-chips.qd-form-disabled qd-checkbox-chips-item{border-color:#d5d5d5;color:#d5d5d5;cursor:default;pointer-events:none}.qd-checkbox-chips.qd-form-disabled qd-checkbox-chips-item.active{background:#d5d5d5}.qd-checkbox-chips.qd-form-disabled qd-checkbox-chips-item .indicator.checked{color:#d5d5d5!important}\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: QdCheckboxChipsItemComponent, selector: "qd-checkbox-chips-item", inputs: ["data", "data-test-id"] }, { 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 });
|
|
9985
|
+
], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n [control]=\"control\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly\">\n <qd-checkbox-chips-item\n *ngFor=\"let option of options; let index = index\"\n [data]=\"option\"\n [data-test-id]=\"testId + '-item-' + index\"\n (click)=\"handleClick(index)\"\n >\n </qd-checkbox-chips-item>\n</ng-container>\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]=\"selectedTranslations\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"selectedTranslations\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkbox-chips{display:block;margin-bottom:.75rem}.qd-checkbox-chips.qd-form-disabled qd-checkbox-chips-item{border-color:#d5d5d5;color:#d5d5d5;cursor:default;pointer-events:none}.qd-checkbox-chips.qd-form-disabled qd-checkbox-chips-item.active{background:#d5d5d5}.qd-checkbox-chips.qd-form-disabled qd-checkbox-chips-item .indicator.checked{color:#d5d5d5!important}\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: QdCheckboxChipsItemComponent, selector: "qd-checkbox-chips-item", inputs: ["data", "data-test-id"] }, { 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 });
|
|
9986
9986
|
}
|
|
9987
9987
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdCheckboxChipsComponent, decorators: [{
|
|
9988
9988
|
type: Component,
|
|
@@ -9994,7 +9994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
9994
9994
|
useExisting: QdCheckboxChipsComponent,
|
|
9995
9995
|
multi: true
|
|
9996
9996
|
}
|
|
9997
|
-
], template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n [control]=\"control\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly\">\n <qd-checkbox-chips-item\n *ngFor=\"let option of options; let index = index\"\n [data]=\"option\"\n [data-test-id]=\"testId + '-item-' + index\"\n (click)=\"handleClick(index)\"\n >\n </qd-checkbox-chips-item>\n</ng-container>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly\"\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]=\"selectedTranslations\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"selectedTranslations\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkbox-chips{display:block;margin-bottom:.75rem}.qd-checkbox-chips.qd-form-disabled qd-checkbox-chips-item{border-color:#d5d5d5;color:#d5d5d5;cursor:default;pointer-events:none}.qd-checkbox-chips.qd-form-disabled qd-checkbox-chips-item.active{background:#d5d5d5}.qd-checkbox-chips.qd-form-disabled qd-checkbox-chips-item .indicator.checked{color:#d5d5d5!important}\n"] }]
|
|
9997
|
+
], template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n [control]=\"control\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly\">\n <qd-checkbox-chips-item\n *ngFor=\"let option of options; let index = index\"\n [data]=\"option\"\n [data-test-id]=\"testId + '-item-' + index\"\n (click)=\"handleClick(index)\"\n >\n </qd-checkbox-chips-item>\n</ng-container>\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]=\"selectedTranslations\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"selectedTranslations\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkbox-chips{display:block;margin-bottom:.75rem}.qd-checkbox-chips.qd-form-disabled qd-checkbox-chips-item{border-color:#d5d5d5;color:#d5d5d5;cursor:default;pointer-events:none}.qd-checkbox-chips.qd-form-disabled qd-checkbox-chips-item.active{background:#d5d5d5}.qd-checkbox-chips.qd-form-disabled qd-checkbox-chips-item .indicator.checked{color:#d5d5d5!important}\n"] }]
|
|
9998
9998
|
}], ctorParameters: () => [{ type: QdCheckboxChipsService, decorators: [{
|
|
9999
9999
|
type: Self
|
|
10000
10000
|
}] }, { type: QdFormsActionEmitterService, decorators: [{
|
|
@@ -10500,7 +10500,7 @@ class QdCheckboxesComponent {
|
|
|
10500
10500
|
},
|
|
10501
10501
|
QdCheckboxesService,
|
|
10502
10502
|
QdFormsActionEmitterService
|
|
10503
|
-
], 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 (click)=\"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\"\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"], 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 });
|
|
10503
|
+
], 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 (click)=\"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"], 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 });
|
|
10504
10504
|
}
|
|
10505
10505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdCheckboxesComponent, decorators: [{
|
|
10506
10506
|
type: Component,
|
|
@@ -10512,7 +10512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
10512
10512
|
},
|
|
10513
10513
|
QdCheckboxesService,
|
|
10514
10514
|
QdFormsActionEmitterService
|
|
10515
|
-
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, 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 (click)=\"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\"\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"] }]
|
|
10515
|
+
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, 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 (click)=\"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"] }]
|
|
10516
10516
|
}], ctorParameters: () => [{ type: QdCheckboxesService }, { type: QdFormsActionEmitterService }, { type: i1$4.ControlContainer, decorators: [{
|
|
10517
10517
|
type: Optional
|
|
10518
10518
|
}, {
|
|
@@ -11659,7 +11659,7 @@ class QdDropdownComponent {
|
|
|
11659
11659
|
provide: QD_FOCUSABLE_TOKEN,
|
|
11660
11660
|
useExisting: QdDropdownComponent
|
|
11661
11661
|
}
|
|
11662
|
-
], 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 (opened)=\"onOpenDropdown()\"\n (closed)=\"onDropdownClosed()\"\n (click)=\"enterClick.emit()\"\n [positionStrategy]=\"positionStrategy\"\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<
|
|
11662
|
+
], 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 (opened)=\"onOpenDropdown()\"\n (closed)=\"onDropdownClosed()\"\n (click)=\"enterClick.emit()\"\n [positionStrategy]=\"positionStrategy\"\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"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: 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: i1$3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
11663
11663
|
}
|
|
11664
11664
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdDropdownComponent, decorators: [{
|
|
11665
11665
|
type: Component,
|
|
@@ -11677,7 +11677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
11677
11677
|
provide: QD_FOCUSABLE_TOKEN,
|
|
11678
11678
|
useExisting: QdDropdownComponent
|
|
11679
11679
|
}
|
|
11680
|
-
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-dropdown' }, 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 (opened)=\"onOpenDropdown()\"\n (closed)=\"onDropdownClosed()\"\n (click)=\"enterClick.emit()\"\n [positionStrategy]=\"positionStrategy\"\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<
|
|
11680
|
+
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-dropdown' }, 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 (opened)=\"onOpenDropdown()\"\n (closed)=\"onDropdownClosed()\"\n (click)=\"enterClick.emit()\"\n [positionStrategy]=\"positionStrategy\"\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"] }]
|
|
11681
11681
|
}], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: i0.ChangeDetectorRef }, { type: QdFormsActionEmitterService }, { type: QdFormOptionsResolverRegistry }, { type: QdFormOptionsService }, { type: i0.Injector }, { type: i1$4.ControlContainer, decorators: [{
|
|
11682
11682
|
type: Optional
|
|
11683
11683
|
}, {
|
|
@@ -12653,7 +12653,7 @@ class QdInputComponent {
|
|
|
12653
12653
|
provide: QD_FOCUSABLE_TOKEN,
|
|
12654
12654
|
useExisting: QdInputComponent
|
|
12655
12655
|
}
|
|
12656
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], 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<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n <div\n class=\"qd-input-input\"\n qdInputOptions\n [qdPopoverMinWidth]=\"200\"\n [config]=\"config\"\n [value]=\"_value.value\"\n (optionSelected)=\"handleOptionSelected($event)\"\n (enterClick)=\"emitEnterClick()\"\n >\n <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</div>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"valueAsList\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"valueAsList\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n <input\n #input\n [placeholder]=\"placeholder | translate\"\n [value]=\"hasOptions ? (_value.value.toString() | translate) : _value.value\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur()\"\n [disabled]=\"disabled || readonly\"\n [type]=\"inputType\"\n [attr.inputmode]=\"inputMode\"\n [qdAutofocus]=\"hasAutofocus\"\n [attr.data-test-id]=\"testId + '-input'\"\n [step]=\"config?.step\"\n required\n />\n <div class=\"qd-input-suffix\">\n <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n <ng-content select=\"[qdIconButton]\"></ng-content>\n </div>\n <qd-input-units\n *ngIf=\"hasUnits\"\n [unit]=\"_value.unit\"\n [config]=\"config\"\n (unitChange)=\"handleUnitChange($event)\"\n (opened)=\"handleUnitsOpened()\"\n (closed)=\"handleUnitsClosed()\"\n ></qd-input-units>\n <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"], dependencies: [{ 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: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { 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: QdInputUnitsComponent, selector: "qd-input-units", inputs: ["config", "unit"], outputs: ["unitChange", "opened", "closed"] }, { kind: "directive", type: QdInputOptionsDirective, selector: "[qdInputOptions]", inputs: ["value", "config"], outputs: ["enterClick", "optionSelected"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
|
|
12656
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], 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<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n *ngIf=\"hint || hasError\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n <div\n class=\"qd-input-input\"\n qdInputOptions\n [qdPopoverMinWidth]=\"200\"\n [config]=\"config\"\n [value]=\"_value.value\"\n (optionSelected)=\"handleOptionSelected($event)\"\n (enterClick)=\"emitEnterClick()\"\n >\n <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n *ngIf=\"hint || hasError\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</div>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"valueAsList\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"valueAsList\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n <input\n #input\n [placeholder]=\"placeholder | translate\"\n [value]=\"hasOptions ? (_value.value.toString() | translate) : _value.value\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur()\"\n [disabled]=\"disabled || readonly\"\n [type]=\"inputType\"\n [attr.inputmode]=\"inputMode\"\n [qdAutofocus]=\"hasAutofocus\"\n [attr.data-test-id]=\"testId + '-input'\"\n [step]=\"config?.step\"\n required\n />\n <div class=\"qd-input-suffix\">\n <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n <ng-content select=\"[qdIconButton]\"></ng-content>\n </div>\n <qd-input-units\n *ngIf=\"hasUnits\"\n [unit]=\"_value.unit\"\n [config]=\"config\"\n (unitChange)=\"handleUnitChange($event)\"\n (opened)=\"handleUnitsOpened()\"\n (closed)=\"handleUnitsClosed()\"\n ></qd-input-units>\n <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"], dependencies: [{ 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: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { 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: QdInputUnitsComponent, selector: "qd-input-units", inputs: ["config", "unit"], outputs: ["unitChange", "opened", "closed"] }, { kind: "directive", type: QdInputOptionsDirective, selector: "[qdInputOptions]", inputs: ["value", "config"], outputs: ["enterClick", "optionSelected"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
|
|
12657
12657
|
}
|
|
12658
12658
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdInputComponent, decorators: [{
|
|
12659
12659
|
type: Component,
|
|
@@ -12671,7 +12671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
12671
12671
|
provide: QD_FOCUSABLE_TOKEN,
|
|
12672
12672
|
useExisting: QdInputComponent
|
|
12673
12673
|
}
|
|
12674
|
-
], 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<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n <div\n class=\"qd-input-input\"\n qdInputOptions\n [qdPopoverMinWidth]=\"200\"\n [config]=\"config\"\n [value]=\"_value.value\"\n (optionSelected)=\"handleOptionSelected($event)\"\n (enterClick)=\"emitEnterClick()\"\n >\n <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</div>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"valueAsList\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"valueAsList\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n <input\n #input\n [placeholder]=\"placeholder | translate\"\n [value]=\"hasOptions ? (_value.value.toString() | translate) : _value.value\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur()\"\n [disabled]=\"disabled || readonly\"\n [type]=\"inputType\"\n [attr.inputmode]=\"inputMode\"\n [qdAutofocus]=\"hasAutofocus\"\n [attr.data-test-id]=\"testId + '-input'\"\n [step]=\"config?.step\"\n required\n />\n <div class=\"qd-input-suffix\">\n <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n <ng-content select=\"[qdIconButton]\"></ng-content>\n </div>\n <qd-input-units\n *ngIf=\"hasUnits\"\n [unit]=\"_value.unit\"\n [config]=\"config\"\n (unitChange)=\"handleUnitChange($event)\"\n (opened)=\"handleUnitsOpened()\"\n (closed)=\"handleUnitsClosed()\"\n ></qd-input-units>\n <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"] }]
|
|
12674
|
+
], 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<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n *ngIf=\"hint || hasError\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n <div\n class=\"qd-input-input\"\n qdInputOptions\n [qdPopoverMinWidth]=\"200\"\n [config]=\"config\"\n [value]=\"_value.value\"\n (optionSelected)=\"handleOptionSelected($event)\"\n (enterClick)=\"emitEnterClick()\"\n >\n <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n *ngIf=\"hint || hasError\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</div>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"valueAsList\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"valueAsList\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n <input\n #input\n [placeholder]=\"placeholder | translate\"\n [value]=\"hasOptions ? (_value.value.toString() | translate) : _value.value\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur()\"\n [disabled]=\"disabled || readonly\"\n [type]=\"inputType\"\n [attr.inputmode]=\"inputMode\"\n [qdAutofocus]=\"hasAutofocus\"\n [attr.data-test-id]=\"testId + '-input'\"\n [step]=\"config?.step\"\n required\n />\n <div class=\"qd-input-suffix\">\n <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n <ng-content select=\"[qdIconButton]\"></ng-content>\n </div>\n <qd-input-units\n *ngIf=\"hasUnits\"\n [unit]=\"_value.unit\"\n [config]=\"config\"\n (unitChange)=\"handleUnitChange($event)\"\n (opened)=\"handleUnitsOpened()\"\n (closed)=\"handleUnitsClosed()\"\n ></qd-input-units>\n <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"] }]
|
|
12675
12675
|
}], ctorParameters: () => [{ type: QdFormsActionEmitterService }, { type: QdFormOptionsResolverRegistry }, { type: i1$4.ControlContainer, decorators: [{
|
|
12676
12676
|
type: Optional
|
|
12677
12677
|
}, {
|
|
@@ -13132,7 +13132,7 @@ class QdDatepickerComponent {
|
|
|
13132
13132
|
useValue: true
|
|
13133
13133
|
},
|
|
13134
13134
|
QdFormsActionEmitterService
|
|
13135
|
-
], 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]=\"{ disabled, readonly, viewonly, placeholder: config?.placeholder }\"\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<
|
|
13135
|
+
], 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]=\"{ disabled, readonly, viewonly, placeholder: config?.placeholder }\"\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 .calendar mat-calendar{display:block}qd-datepicker .datepicker-toggle{background-color:unset}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: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: 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", "clickHint", "clickReadonly", "clickViewonly"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
13136
13136
|
}
|
|
13137
13137
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdDatepickerComponent, decorators: [{
|
|
13138
13138
|
type: Component,
|
|
@@ -13147,7 +13147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
13147
13147
|
useValue: true
|
|
13148
13148
|
},
|
|
13149
13149
|
QdFormsActionEmitterService
|
|
13150
|
-
], 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]=\"{ disabled, readonly, viewonly, placeholder: config?.placeholder }\"\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<
|
|
13150
|
+
], 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]=\"{ disabled, readonly, viewonly, placeholder: config?.placeholder }\"\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 .calendar mat-calendar{display:block}qd-datepicker .datepicker-toggle{background-color:unset}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"] }]
|
|
13151
13151
|
}], ctorParameters: () => [{ type: QdFormsActionEmitterService }, { type: TimePickerService }, { type: i1$3.TranslateService, decorators: [{
|
|
13152
13152
|
type: Optional
|
|
13153
13153
|
}] }, { type: i1$4.ControlContainer, decorators: [{
|
|
@@ -13570,7 +13570,7 @@ class QdFileUploadComponent {
|
|
|
13570
13570
|
},
|
|
13571
13571
|
QdFormsActionEmitterService,
|
|
13572
13572
|
QdFileUploadService
|
|
13573
|
-
], ngImport: i0, template: "<qd-form-label\n [label]=\"config?.label?.i18n\"\n [readonly]=\"config.readonly\"\n [viewonly]=\"config.viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!isReadonly && !isViewonly\">\n <input #fileInput type=\"file\" hidden [disabled]=\"isDisabled\" (change)=\"onFileSelect($event)\" />\n\n <div class=\"upload-box\" (click)=\"fileInput.click()\">\n <div class=\"upload-content\">\n <ng-container *ngIf=\"!file\">\n <span class=\"placeholder\">\n {{ (config?.placeholder?.i18n | translate) || (\"i18n.qd.form.placeholder.selectFile\" | translate) }}\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"file\">\n <div class=\"file-row\">\n <span class=\"file-name\">{{ file.name }} </span>\n\n <ng-container *ngIf=\"isUploading\">\n <div class=\"progress-wrapper\">\n <div class=\"progress-bar\" [style.width.%]=\"uploadProgress$ | async\"></div>\n <span class=\"progress-label\">{{ uploadProgress$ | async }}%</span>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"hasError\">\n <span class=\"upload-error\">\n {{ \"i18n.qd.form.error.uploadFailed\" | translate }}\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"!isUploading\">\n <span class=\"file-size\">{{ file.size | qdFileSize }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"button-actions\">\n <button *ngIf=\"file && isUploading\" type=\"button\" (click)=\"cancelUpload()\">\n <qd-icon icon=\"timesCircleSolid\"></qd-icon>\n </button>\n\n <button *ngIf=\"(file && isUploaded) || (file && hasValidationError)\" type=\"button\" (click)=\"removeFile()\">\n <qd-icon icon=\"trash\"></qd-icon>\n </button>\n </div>\n\n <qd-form-hint\n *ngIf=\"config?.hint\"\n [hint]=\"config?.hint
|
|
13573
|
+
], ngImport: i0, template: "<qd-form-label\n [label]=\"config?.label?.i18n\"\n [readonly]=\"config.readonly\"\n [viewonly]=\"config.viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!isReadonly && !isViewonly\">\n <input #fileInput type=\"file\" hidden [disabled]=\"isDisabled\" (change)=\"onFileSelect($event)\" />\n\n <div class=\"upload-box\" (click)=\"fileInput.click()\">\n <div class=\"upload-content\">\n <ng-container *ngIf=\"!file\">\n <span class=\"placeholder\">\n {{ (config?.placeholder?.i18n | translate) || (\"i18n.qd.form.placeholder.selectFile\" | translate) }}\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"file\">\n <div class=\"file-row\">\n <span class=\"file-name\">{{ file.name }} </span>\n\n <ng-container *ngIf=\"isUploading\">\n <div class=\"progress-wrapper\">\n <div class=\"progress-bar\" [style.width.%]=\"uploadProgress$ | async\"></div>\n <span class=\"progress-label\">{{ uploadProgress$ | async }}%</span>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"hasError\">\n <span class=\"upload-error\">\n {{ \"i18n.qd.form.error.uploadFailed\" | translate }}\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"!isUploading\">\n <span class=\"file-size\">{{ file.size | qdFileSize }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"button-actions\">\n <button *ngIf=\"file && isUploading\" type=\"button\" (click)=\"cancelUpload()\">\n <qd-icon icon=\"timesCircleSolid\"></qd-icon>\n </button>\n\n <button *ngIf=\"(file && isUploaded) || (file && hasValidationError)\" type=\"button\" (click)=\"removeFile()\">\n <qd-icon icon=\"trash\"></qd-icon>\n </button>\n </div>\n\n <qd-form-hint\n *ngIf=\"config?.hint || hasValidationError\"\n [hint]=\"config?.hint?.i18n\"\n [hasError]=\"hasValidationError\"\n [control]=\"control\"\n [hintAction]=\"config.hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</ng-container>\n\n<qd-form-readonly\n *ngIf=\"isReadonly\"\n [values]=\"[file?.name]\"\n [readonlyAction]=\"config.readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"isViewonly\"\n [values]=\"[file?.name]\"\n [viewonlyAction]=\"config.viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{position:relative;display:block;width:100%;margin-bottom:.75rem}:host .upload-box{position:relative;display:block;padding:.5rem;margin-bottom:.375rem;background-color:#fff;box-shadow:inset 0 0 0 .0625rem #069;cursor:pointer;-webkit-user-select:none;user-select:none}:host .upload-box .file-name{color:#069!important}:host .upload-box .placeholder{color:#069!important}:host .upload-box .qd-icon{color:#069!important}:host .upload-box .upload-content{display:flex;flex-direction:column;padding-right:2rem;padding-left:.5rem}:host .upload-box .upload-content .placeholder{color:#171717;font-size:.875rem;font-weight:500;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .upload-box .upload-content .file-row{display:flex;flex-wrap:nowrap;align-items:center;gap:.5rem}:host .upload-box .upload-content .file-row .file-name{color:#171717;font-size:.875rem;font-weight:500;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .upload-box .upload-content .file-row .progress-wrapper{position:relative;display:flex;overflow:hidden;min-width:6.25rem;height:1.25rem;flex:1 1 auto;border-radius:.625rem}:host .upload-box .upload-content .file-row .progress-wrapper .progress-bar{height:100%;border-radius:inherit;background-color:#fee3b5}:host .upload-box .upload-content .file-row .progress-wrapper .progress-label{color:#e97e00;font-size:.875rem;font-weight:500;line-height:1.25rem;position:absolute;z-index:1000;left:.75rem}:host .upload-box .upload-content .file-row .file-size{margin-left:auto;color:#171717;font-size:.875rem;font-weight:500;line-height:1.25rem}:host .button-actions{position:absolute;top:1.625rem;right:.875rem;display:flex}:host .button-actions button{padding:0;border:none;background:none;cursor:pointer}:host .button-actions qd-icon{color:#069}:host.qd-form-disabled .upload-box{cursor:not-allowed;opacity:.6}:host.qd-form-readonly .upload-box,:host.qd-form-viewonly .upload-box{cursor:default}:host(.qd-form-error) .upload-box{box-shadow:inset 0 0 0 .0625rem #c70023!important}:host(.qd-form-error) .upload-box .file-name,:host(.qd-form-error) .upload-box .placeholder,:host(.qd-form-error) .upload-box .file-size,:host(.qd-form-error) .upload-box+.button-actions .qd-icon{color:#c70023!important}:host(.qd-form-error) .upload-box:hover{box-shadow:inset 0 0 0 .0625rem #069!important}:host(.qd-form-error) .upload-box:hover .file-name,:host(.qd-form-error) .upload-box:hover .placeholder,:host(.qd-form-error) .upload-box:hover .file-size,:host(.qd-form-error) .upload-box:hover+.button-actions .qd-icon{color:#069!important}:host(.qd-form-uploaded) .upload-box{box-shadow:inset 0 0 0 .0625rem #b4b4b4!important}:host(.qd-form-uploaded) .upload-box .file-name,:host(.qd-form-uploaded) .upload-box .placeholder,:host(.qd-form-uploaded) .upload-box .file-size{color:#171717!important;font-weight:400!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { 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: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: QdFileSizePipe$1, name: "qdFileSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13574
13574
|
}
|
|
13575
13575
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdFileUploadComponent, decorators: [{
|
|
13576
13576
|
type: Component,
|
|
@@ -13590,7 +13590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
13590
13590
|
'[class.qd-form-uploading]': 'isUploading',
|
|
13591
13591
|
'[class.qd-form-uploaded]': 'isUploaded',
|
|
13592
13592
|
'[attr.data-test-id]': 'testId'
|
|
13593
|
-
}, template: "<qd-form-label\n [label]=\"config?.label?.i18n\"\n [readonly]=\"config.readonly\"\n [viewonly]=\"config.viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!isReadonly && !isViewonly\">\n <input #fileInput type=\"file\" hidden [disabled]=\"isDisabled\" (change)=\"onFileSelect($event)\" />\n\n <div class=\"upload-box\" (click)=\"fileInput.click()\">\n <div class=\"upload-content\">\n <ng-container *ngIf=\"!file\">\n <span class=\"placeholder\">\n {{ (config?.placeholder?.i18n | translate) || (\"i18n.qd.form.placeholder.selectFile\" | translate) }}\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"file\">\n <div class=\"file-row\">\n <span class=\"file-name\">{{ file.name }} </span>\n\n <ng-container *ngIf=\"isUploading\">\n <div class=\"progress-wrapper\">\n <div class=\"progress-bar\" [style.width.%]=\"uploadProgress$ | async\"></div>\n <span class=\"progress-label\">{{ uploadProgress$ | async }}%</span>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"hasError\">\n <span class=\"upload-error\">\n {{ \"i18n.qd.form.error.uploadFailed\" | translate }}\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"!isUploading\">\n <span class=\"file-size\">{{ file.size | qdFileSize }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"button-actions\">\n <button *ngIf=\"file && isUploading\" type=\"button\" (click)=\"cancelUpload()\">\n <qd-icon icon=\"timesCircleSolid\"></qd-icon>\n </button>\n\n <button *ngIf=\"(file && isUploaded) || (file && hasValidationError)\" type=\"button\" (click)=\"removeFile()\">\n <qd-icon icon=\"trash\"></qd-icon>\n </button>\n </div>\n\n <qd-form-hint\n *ngIf=\"config?.hint\"\n [hint]=\"config?.hint
|
|
13593
|
+
}, template: "<qd-form-label\n [label]=\"config?.label?.i18n\"\n [readonly]=\"config.readonly\"\n [viewonly]=\"config.viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!isReadonly && !isViewonly\">\n <input #fileInput type=\"file\" hidden [disabled]=\"isDisabled\" (change)=\"onFileSelect($event)\" />\n\n <div class=\"upload-box\" (click)=\"fileInput.click()\">\n <div class=\"upload-content\">\n <ng-container *ngIf=\"!file\">\n <span class=\"placeholder\">\n {{ (config?.placeholder?.i18n | translate) || (\"i18n.qd.form.placeholder.selectFile\" | translate) }}\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"file\">\n <div class=\"file-row\">\n <span class=\"file-name\">{{ file.name }} </span>\n\n <ng-container *ngIf=\"isUploading\">\n <div class=\"progress-wrapper\">\n <div class=\"progress-bar\" [style.width.%]=\"uploadProgress$ | async\"></div>\n <span class=\"progress-label\">{{ uploadProgress$ | async }}%</span>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"hasError\">\n <span class=\"upload-error\">\n {{ \"i18n.qd.form.error.uploadFailed\" | translate }}\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"!isUploading\">\n <span class=\"file-size\">{{ file.size | qdFileSize }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"button-actions\">\n <button *ngIf=\"file && isUploading\" type=\"button\" (click)=\"cancelUpload()\">\n <qd-icon icon=\"timesCircleSolid\"></qd-icon>\n </button>\n\n <button *ngIf=\"(file && isUploaded) || (file && hasValidationError)\" type=\"button\" (click)=\"removeFile()\">\n <qd-icon icon=\"trash\"></qd-icon>\n </button>\n </div>\n\n <qd-form-hint\n *ngIf=\"config?.hint || hasValidationError\"\n [hint]=\"config?.hint?.i18n\"\n [hasError]=\"hasValidationError\"\n [control]=\"control\"\n [hintAction]=\"config.hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</ng-container>\n\n<qd-form-readonly\n *ngIf=\"isReadonly\"\n [values]=\"[file?.name]\"\n [readonlyAction]=\"config.readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"isViewonly\"\n [values]=\"[file?.name]\"\n [viewonlyAction]=\"config.viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{position:relative;display:block;width:100%;margin-bottom:.75rem}:host .upload-box{position:relative;display:block;padding:.5rem;margin-bottom:.375rem;background-color:#fff;box-shadow:inset 0 0 0 .0625rem #069;cursor:pointer;-webkit-user-select:none;user-select:none}:host .upload-box .file-name{color:#069!important}:host .upload-box .placeholder{color:#069!important}:host .upload-box .qd-icon{color:#069!important}:host .upload-box .upload-content{display:flex;flex-direction:column;padding-right:2rem;padding-left:.5rem}:host .upload-box .upload-content .placeholder{color:#171717;font-size:.875rem;font-weight:500;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .upload-box .upload-content .file-row{display:flex;flex-wrap:nowrap;align-items:center;gap:.5rem}:host .upload-box .upload-content .file-row .file-name{color:#171717;font-size:.875rem;font-weight:500;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .upload-box .upload-content .file-row .progress-wrapper{position:relative;display:flex;overflow:hidden;min-width:6.25rem;height:1.25rem;flex:1 1 auto;border-radius:.625rem}:host .upload-box .upload-content .file-row .progress-wrapper .progress-bar{height:100%;border-radius:inherit;background-color:#fee3b5}:host .upload-box .upload-content .file-row .progress-wrapper .progress-label{color:#e97e00;font-size:.875rem;font-weight:500;line-height:1.25rem;position:absolute;z-index:1000;left:.75rem}:host .upload-box .upload-content .file-row .file-size{margin-left:auto;color:#171717;font-size:.875rem;font-weight:500;line-height:1.25rem}:host .button-actions{position:absolute;top:1.625rem;right:.875rem;display:flex}:host .button-actions button{padding:0;border:none;background:none;cursor:pointer}:host .button-actions qd-icon{color:#069}:host.qd-form-disabled .upload-box{cursor:not-allowed;opacity:.6}:host.qd-form-readonly .upload-box,:host.qd-form-viewonly .upload-box{cursor:default}:host(.qd-form-error) .upload-box{box-shadow:inset 0 0 0 .0625rem #c70023!important}:host(.qd-form-error) .upload-box .file-name,:host(.qd-form-error) .upload-box .placeholder,:host(.qd-form-error) .upload-box .file-size,:host(.qd-form-error) .upload-box+.button-actions .qd-icon{color:#c70023!important}:host(.qd-form-error) .upload-box:hover{box-shadow:inset 0 0 0 .0625rem #069!important}:host(.qd-form-error) .upload-box:hover .file-name,:host(.qd-form-error) .upload-box:hover .placeholder,:host(.qd-form-error) .upload-box:hover .file-size,:host(.qd-form-error) .upload-box:hover+.button-actions .qd-icon{color:#069!important}:host(.qd-form-uploaded) .upload-box{box-shadow:inset 0 0 0 .0625rem #b4b4b4!important}:host(.qd-form-uploaded) .upload-box .file-name,:host(.qd-form-uploaded) .upload-box .placeholder,:host(.qd-form-uploaded) .upload-box .file-size{color:#171717!important;font-weight:400!important}\n"] }]
|
|
13594
13594
|
}], ctorParameters: () => [{ type: i1$4.ControlContainer, decorators: [{
|
|
13595
13595
|
type: Optional
|
|
13596
13596
|
}, {
|
|
@@ -14974,7 +14974,7 @@ class QdMultiInputComponent {
|
|
|
14974
14974
|
},
|
|
14975
14975
|
QdMultiInputService,
|
|
14976
14976
|
QdFormsActionEmitterService
|
|
14977
|
-
], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["input"], descendants: true }, { propertyName: "multiInputMenu", first: true, predicate: i0.forwardRef(() => QdMultiInputMenuComponent), descendants: true }, { propertyName: "popoverOnClickDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "errorTooltips", predicate: ["errorTooltips"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"formArray\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div\n *ngIf=\"!readonly && !viewonly\"\n class=\"qd-multi-input__input-chip-box\"\n (click)=\"focus()\"\n (opened)=\"open = true\"\n (closed)=\"open = false\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverDisabled]=\"options.length === 0\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverBackgroundColor]=\"'transparent'\"\n [positionStrategy]=\"[\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetX: -2\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n weight: 0.8,\n offsetX: -2\n }\n ]\"\n>\n <div [ngClass]=\"hasItems() ? 'qd-multi-input__chip-margin' : ''\">\n <qd-multi-input-chip\n *ngFor=\"let element of getIterableElements(); let index = index\"\n [close]=\"!disabled && !readonly && !viewonly\"\n [itemControl]=\"formArray ? element : undefined\"\n [value]=\"formArray ? undefined : getTranslation(element)\"\n (closeClickEmitter)=\"close(index)\"\n (click)=\"handleChipClick($event)\"\n >\n </qd-multi-input-chip>\n </div>\n\n <div class=\"qd-multi-input__wrapper\">\n <input\n #input\n type=\"text\"\n class=\"qd-multi-input__box\"\n *ngIf=\"!readonly && !viewonly\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"filterOptions\"\n (ngModelChange)=\"changeValue()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"hasFocus = true\"\n (blur)=\"handleBlur()\"\n [ngClass]=\"open ? 'qd-multi-input__box--open' : ''\"\n [attr.data-test-id]=\"testId + '-input'\"\n />\n\n <div class=\"qd-multi-input__box qd-multi-input__box--readonly\" *ngIf=\"readonly && !hasItems()\"> </div>\n\n <div class=\"qd-multi-input__box qd-multi-input__box--viewonly\" *ngIf=\"viewonly && !hasItems()\"> </div>\n\n <ng-template #menu>\n <qd-multi-input-menu\n [optionsListForView]=\"optionsListForView\"\n [id]=\"id\"\n [data-test-id]=\"testId\"\n (itemClick)=\"handleClick($event)\"\n ></qd-multi-input-menu>\n </ng-template>\n </div>\n</div>\n\n<ng-container *ngIf=\"config && !readonly && !viewonly\">\n <qd-form-hint\n [hint]=\"hasHint ? config.hint.i18n : ''\"\n [control]=\"formArray\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</ng-container>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"getValues()\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"getValues()\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;margin-bottom:.75rem}.qd-multi-input__input-chip-box{margin-bottom:.5rem;background-color:#fff;outline:solid .0625rem rgb(180,180,180)}:host.qd-multi-input-readonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-viewonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-disabled .qd-multi-input__input-chip-box{background:#f5f5f5;color:#979797;outline:.0625rem solid rgb(180,180,180)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box{outline:.125rem solid rgb(0,102,153)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-focus .qd-multi-input__input-chip-box:active{outline:.125rem solid rgb(0,102,153)}.qd-multi-input__input-chip-box:active,.qd-multi-input__input-chip-box:hover{outline:.125rem solid rgb(23,23,23)}.qd-multi-input__chip-margin{padding:0 .3125rem .3125rem 0}:host.qd-multi-input-readonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}:host.qd-multi-input-viewonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}.qd-multi-input__wrapper{position:relative}.qd-multi-input__wrapper .qd-multi-input__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(255,255,255);background:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-multi-input__wrapper .qd-multi-input__box:focus,.qd-multi-input__wrapper .qd-multi-input__box:active,.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{padding:0 .8125rem;border:none;color:#171717;line-height:2.125rem;outline:none}.qd-multi-input__wrapper .qd-multi-input__box:hover:after{border-top-color:#b4b4b4}.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{border-color:#069}:host.qd-multi-input-disabled .qd-multi-input__wrapper .qd-multi-input__box{border:none;background:#f5f5f5;color:#979797}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly{color:#069;cursor:pointer}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:hover,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:active,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly{color:#069;cursor:pointer}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:hover,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:active,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input-error .qd-multi-input__input-chip-box{outline:.0625rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box:focus,:host.qd-multi-input-error .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-error .qd-multi-input__input-chip-box:active,:host.qd-multi-input-error .qd-multi-input__input-chip-box.qd-multi-input__box--open{outline:.125rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box .qd-error-icon{color:#c70023}\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: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: 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: QdMultiInputChipComponent, selector: "qd-multi-input-chip", inputs: ["itemControl", "value", "close", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdMultiInputMenuComponent, selector: "qd-multi-input-menu", inputs: ["id", "optionsListForView", "data-test-id"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14977
|
+
], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["input"], descendants: true }, { propertyName: "multiInputMenu", first: true, predicate: i0.forwardRef(() => QdMultiInputMenuComponent), descendants: true }, { propertyName: "popoverOnClickDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "errorTooltips", predicate: ["errorTooltips"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"formArray\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div\n *ngIf=\"!readonly && !viewonly\"\n class=\"qd-multi-input__input-chip-box\"\n (click)=\"focus()\"\n (opened)=\"open = true\"\n (closed)=\"open = false\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverDisabled]=\"options.length === 0\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverBackgroundColor]=\"'transparent'\"\n [positionStrategy]=\"[\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetX: -2\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n weight: 0.8,\n offsetX: -2\n }\n ]\"\n>\n <div [ngClass]=\"hasItems() ? 'qd-multi-input__chip-margin' : ''\">\n <qd-multi-input-chip\n *ngFor=\"let element of getIterableElements(); let index = index\"\n [close]=\"!disabled && !readonly && !viewonly\"\n [itemControl]=\"formArray ? element : undefined\"\n [value]=\"formArray ? undefined : getTranslation(element)\"\n (closeClickEmitter)=\"close(index)\"\n (click)=\"handleChipClick($event)\"\n >\n </qd-multi-input-chip>\n </div>\n\n <div class=\"qd-multi-input__wrapper\">\n <input\n #input\n type=\"text\"\n class=\"qd-multi-input__box\"\n *ngIf=\"!readonly && !viewonly\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"filterOptions\"\n (ngModelChange)=\"changeValue()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"hasFocus = true\"\n (blur)=\"handleBlur()\"\n [ngClass]=\"open ? 'qd-multi-input__box--open' : ''\"\n [attr.data-test-id]=\"testId + '-input'\"\n />\n\n <div class=\"qd-multi-input__box qd-multi-input__box--readonly\" *ngIf=\"readonly && !hasItems()\"> </div>\n\n <div class=\"qd-multi-input__box qd-multi-input__box--viewonly\" *ngIf=\"viewonly && !hasItems()\"> </div>\n\n <ng-template #menu>\n <qd-multi-input-menu\n [optionsListForView]=\"optionsListForView\"\n [id]=\"id\"\n [data-test-id]=\"testId\"\n (itemClick)=\"handleClick($event)\"\n ></qd-multi-input-menu>\n </ng-template>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"config && !readonly && !viewonly && (hasHint || hasError)\"\n [hint]=\"hasHint ? config.hint.i18n : ''\"\n [control]=\"formArray\"\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]=\"getValues()\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"getValues()\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;margin-bottom:.75rem}.qd-multi-input__input-chip-box{margin-bottom:.5rem;background-color:#fff;outline:solid .0625rem rgb(180,180,180)}:host.qd-multi-input-readonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-viewonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-disabled .qd-multi-input__input-chip-box{background:#f5f5f5;color:#979797;outline:.0625rem solid rgb(180,180,180)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box{outline:.125rem solid rgb(0,102,153)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-focus .qd-multi-input__input-chip-box:active{outline:.125rem solid rgb(0,102,153)}.qd-multi-input__input-chip-box:active,.qd-multi-input__input-chip-box:hover{outline:.125rem solid rgb(23,23,23)}.qd-multi-input__chip-margin{padding:0 .3125rem .3125rem 0}:host.qd-multi-input-readonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}:host.qd-multi-input-viewonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}.qd-multi-input__wrapper{position:relative}.qd-multi-input__wrapper .qd-multi-input__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(255,255,255);background:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-multi-input__wrapper .qd-multi-input__box:focus,.qd-multi-input__wrapper .qd-multi-input__box:active,.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{padding:0 .8125rem;border:none;color:#171717;line-height:2.125rem;outline:none}.qd-multi-input__wrapper .qd-multi-input__box:hover:after{border-top-color:#b4b4b4}.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{border-color:#069}:host.qd-multi-input-disabled .qd-multi-input__wrapper .qd-multi-input__box{border:none;background:#f5f5f5;color:#979797}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly{color:#069;cursor:pointer}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:hover,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:active,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly{color:#069;cursor:pointer}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:hover,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:active,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input-error .qd-multi-input__input-chip-box{outline:.0625rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box:focus,:host.qd-multi-input-error .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-error .qd-multi-input__input-chip-box:active,:host.qd-multi-input-error .qd-multi-input__input-chip-box.qd-multi-input__box--open{outline:.125rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box .qd-error-icon{color:#c70023}\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: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: 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: QdMultiInputChipComponent, selector: "qd-multi-input-chip", inputs: ["itemControl", "value", "close", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdMultiInputMenuComponent, selector: "qd-multi-input-menu", inputs: ["id", "optionsListForView", "data-test-id"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14978
14978
|
}
|
|
14979
14979
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdMultiInputComponent, decorators: [{
|
|
14980
14980
|
type: Component,
|
|
@@ -14986,7 +14986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
14986
14986
|
},
|
|
14987
14987
|
QdMultiInputService,
|
|
14988
14988
|
QdFormsActionEmitterService
|
|
14989
|
-
], host: { class: 'qd-multi-input' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"formArray\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div\n *ngIf=\"!readonly && !viewonly\"\n class=\"qd-multi-input__input-chip-box\"\n (click)=\"focus()\"\n (opened)=\"open = true\"\n (closed)=\"open = false\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverDisabled]=\"options.length === 0\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverBackgroundColor]=\"'transparent'\"\n [positionStrategy]=\"[\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetX: -2\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n weight: 0.8,\n offsetX: -2\n }\n ]\"\n>\n <div [ngClass]=\"hasItems() ? 'qd-multi-input__chip-margin' : ''\">\n <qd-multi-input-chip\n *ngFor=\"let element of getIterableElements(); let index = index\"\n [close]=\"!disabled && !readonly && !viewonly\"\n [itemControl]=\"formArray ? element : undefined\"\n [value]=\"formArray ? undefined : getTranslation(element)\"\n (closeClickEmitter)=\"close(index)\"\n (click)=\"handleChipClick($event)\"\n >\n </qd-multi-input-chip>\n </div>\n\n <div class=\"qd-multi-input__wrapper\">\n <input\n #input\n type=\"text\"\n class=\"qd-multi-input__box\"\n *ngIf=\"!readonly && !viewonly\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"filterOptions\"\n (ngModelChange)=\"changeValue()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"hasFocus = true\"\n (blur)=\"handleBlur()\"\n [ngClass]=\"open ? 'qd-multi-input__box--open' : ''\"\n [attr.data-test-id]=\"testId + '-input'\"\n />\n\n <div class=\"qd-multi-input__box qd-multi-input__box--readonly\" *ngIf=\"readonly && !hasItems()\"> </div>\n\n <div class=\"qd-multi-input__box qd-multi-input__box--viewonly\" *ngIf=\"viewonly && !hasItems()\"> </div>\n\n <ng-template #menu>\n <qd-multi-input-menu\n [optionsListForView]=\"optionsListForView\"\n [id]=\"id\"\n [data-test-id]=\"testId\"\n (itemClick)=\"handleClick($event)\"\n ></qd-multi-input-menu>\n </ng-template>\n </div>\n</div>\n\n<
|
|
14989
|
+
], host: { class: 'qd-multi-input' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"formArray\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div\n *ngIf=\"!readonly && !viewonly\"\n class=\"qd-multi-input__input-chip-box\"\n (click)=\"focus()\"\n (opened)=\"open = true\"\n (closed)=\"open = false\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverDisabled]=\"options.length === 0\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverBackgroundColor]=\"'transparent'\"\n [positionStrategy]=\"[\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetX: -2\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n weight: 0.8,\n offsetX: -2\n }\n ]\"\n>\n <div [ngClass]=\"hasItems() ? 'qd-multi-input__chip-margin' : ''\">\n <qd-multi-input-chip\n *ngFor=\"let element of getIterableElements(); let index = index\"\n [close]=\"!disabled && !readonly && !viewonly\"\n [itemControl]=\"formArray ? element : undefined\"\n [value]=\"formArray ? undefined : getTranslation(element)\"\n (closeClickEmitter)=\"close(index)\"\n (click)=\"handleChipClick($event)\"\n >\n </qd-multi-input-chip>\n </div>\n\n <div class=\"qd-multi-input__wrapper\">\n <input\n #input\n type=\"text\"\n class=\"qd-multi-input__box\"\n *ngIf=\"!readonly && !viewonly\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"filterOptions\"\n (ngModelChange)=\"changeValue()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"hasFocus = true\"\n (blur)=\"handleBlur()\"\n [ngClass]=\"open ? 'qd-multi-input__box--open' : ''\"\n [attr.data-test-id]=\"testId + '-input'\"\n />\n\n <div class=\"qd-multi-input__box qd-multi-input__box--readonly\" *ngIf=\"readonly && !hasItems()\"> </div>\n\n <div class=\"qd-multi-input__box qd-multi-input__box--viewonly\" *ngIf=\"viewonly && !hasItems()\"> </div>\n\n <ng-template #menu>\n <qd-multi-input-menu\n [optionsListForView]=\"optionsListForView\"\n [id]=\"id\"\n [data-test-id]=\"testId\"\n (itemClick)=\"handleClick($event)\"\n ></qd-multi-input-menu>\n </ng-template>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"config && !readonly && !viewonly && (hasHint || hasError)\"\n [hint]=\"hasHint ? config.hint.i18n : ''\"\n [control]=\"formArray\"\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]=\"getValues()\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"getValues()\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;margin-bottom:.75rem}.qd-multi-input__input-chip-box{margin-bottom:.5rem;background-color:#fff;outline:solid .0625rem rgb(180,180,180)}:host.qd-multi-input-readonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-viewonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-disabled .qd-multi-input__input-chip-box{background:#f5f5f5;color:#979797;outline:.0625rem solid rgb(180,180,180)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box{outline:.125rem solid rgb(0,102,153)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-focus .qd-multi-input__input-chip-box:active{outline:.125rem solid rgb(0,102,153)}.qd-multi-input__input-chip-box:active,.qd-multi-input__input-chip-box:hover{outline:.125rem solid rgb(23,23,23)}.qd-multi-input__chip-margin{padding:0 .3125rem .3125rem 0}:host.qd-multi-input-readonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}:host.qd-multi-input-viewonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}.qd-multi-input__wrapper{position:relative}.qd-multi-input__wrapper .qd-multi-input__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(255,255,255);background:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-multi-input__wrapper .qd-multi-input__box:focus,.qd-multi-input__wrapper .qd-multi-input__box:active,.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{padding:0 .8125rem;border:none;color:#171717;line-height:2.125rem;outline:none}.qd-multi-input__wrapper .qd-multi-input__box:hover:after{border-top-color:#b4b4b4}.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{border-color:#069}:host.qd-multi-input-disabled .qd-multi-input__wrapper .qd-multi-input__box{border:none;background:#f5f5f5;color:#979797}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly{color:#069;cursor:pointer}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:hover,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:active,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly{color:#069;cursor:pointer}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:hover,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:active,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input-error .qd-multi-input__input-chip-box{outline:.0625rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box:focus,:host.qd-multi-input-error .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-error .qd-multi-input__input-chip-box:active,:host.qd-multi-input-error .qd-multi-input__input-chip-box.qd-multi-input__box--open{outline:.125rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box .qd-error-icon{color:#c70023}\n"] }]
|
|
14990
14990
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: QdMultiInputService }, { type: i0.ChangeDetectorRef }, { type: QdFormsActionEmitterService }, { type: QdFormArrayFactoryService }, { type: i1$4.ControlContainer, decorators: [{
|
|
14991
14991
|
type: Optional
|
|
14992
14992
|
}, {
|
|
@@ -15530,7 +15530,7 @@ class QdPinCodeComponent {
|
|
|
15530
15530
|
},
|
|
15531
15531
|
QdPinCodeService,
|
|
15532
15532
|
QdFormsActionEmitterService
|
|
15533
|
-
], viewQueries: [{ propertyName: "inputsList", predicate: ["input"], 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<ng-container *ngFor=\"let i of iterable(codeLength); let index = index; let last = last\">\n <input\n #input\n *ngIf=\"!readonly && !viewonly\"\n [ngClass]=\"'qd-pin-code__input qd-pin-code--input-' + index + (last ? ' qd-pin-code__input--last' : '')\"\n [attr.data-test-id]=\"testId + '-input-' + index\"\n [type]=\"codeHidden ? 'password' : 'tel'\"\n [tabindex]=\"pinCodeService.firstEmpty === index ? 0 : -1\"\n (click)=\"handleCLick($event)\"\n (keydown.backspace)=\"handleDelete($event)\"\n (keydown.delete)=\"handleDelete($event)\"\n (keydown.enter)=\"handleComplete()\"\n (keypress)=\"handleInput($event)\"\n (blur)=\"handleBlur(index)\"\n [disabled]=\"disabled\"\n />\n</ng-container>\n\n<
|
|
15533
|
+
], viewQueries: [{ propertyName: "inputsList", predicate: ["input"], 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<ng-container *ngFor=\"let i of iterable(codeLength); let index = index; let last = last\">\n <input\n #input\n *ngIf=\"!readonly && !viewonly\"\n [ngClass]=\"'qd-pin-code__input qd-pin-code--input-' + index + (last ? ' qd-pin-code__input--last' : '')\"\n [attr.data-test-id]=\"testId + '-input-' + index\"\n [type]=\"codeHidden ? 'password' : 'tel'\"\n [tabindex]=\"pinCodeService.firstEmpty === index ? 0 : -1\"\n (click)=\"handleCLick($event)\"\n (keydown.backspace)=\"handleDelete($event)\"\n (keydown.delete)=\"handleDelete($event)\"\n (keydown.enter)=\"handleComplete()\"\n (keypress)=\"handleInput($event)\"\n (blur)=\"handleBlur(index)\"\n [disabled]=\"disabled\"\n />\n</ng-container>\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]=\"[pinCodeService.joinedValues]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[pinCodeService.joinedValues]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;height:4.5rem;margin-bottom:.75rem}:host .qd-pin-code__input{width:1.875rem;height:2.25rem;border:.0625rem solid rgb(180,180,180);margin-right:.75rem;margin-bottom:.375rem;caret-color:#fff0;cursor:default;font-size:1.5rem;font-weight:500;text-align:center}:host .qd-pin-code__input--last{margin-right:0}:host .qd-pin-code__input:focus{border-width:.125rem;border-color:#069}:host .qd-pin-code__input:active{border-width:.0625rem;border-color:#b4b4b4}:host .qd-pin-code__input:focus-visible{outline:none}:host.qd-pin-code--error .qd-pin-code__input{border-color:#c70023}:host.qd-pin-code--error .qd-pin-code__input:focus{border-width:.125rem}:host.qd-pin-code--error .qd-pin-code__input:active{border-width:.0625rem}\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: "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"] }] });
|
|
15534
15534
|
}
|
|
15535
15535
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdPinCodeComponent, decorators: [{
|
|
15536
15536
|
type: Component,
|
|
@@ -15542,7 +15542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
15542
15542
|
},
|
|
15543
15543
|
QdPinCodeService,
|
|
15544
15544
|
QdFormsActionEmitterService
|
|
15545
|
-
], host: { class: 'qd-pin-code' }, 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<ng-container *ngFor=\"let i of iterable(codeLength); let index = index; let last = last\">\n <input\n #input\n *ngIf=\"!readonly && !viewonly\"\n [ngClass]=\"'qd-pin-code__input qd-pin-code--input-' + index + (last ? ' qd-pin-code__input--last' : '')\"\n [attr.data-test-id]=\"testId + '-input-' + index\"\n [type]=\"codeHidden ? 'password' : 'tel'\"\n [tabindex]=\"pinCodeService.firstEmpty === index ? 0 : -1\"\n (click)=\"handleCLick($event)\"\n (keydown.backspace)=\"handleDelete($event)\"\n (keydown.delete)=\"handleDelete($event)\"\n (keydown.enter)=\"handleComplete()\"\n (keypress)=\"handleInput($event)\"\n (blur)=\"handleBlur(index)\"\n [disabled]=\"disabled\"\n />\n</ng-container>\n\n<
|
|
15545
|
+
], host: { class: 'qd-pin-code' }, 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<ng-container *ngFor=\"let i of iterable(codeLength); let index = index; let last = last\">\n <input\n #input\n *ngIf=\"!readonly && !viewonly\"\n [ngClass]=\"'qd-pin-code__input qd-pin-code--input-' + index + (last ? ' qd-pin-code__input--last' : '')\"\n [attr.data-test-id]=\"testId + '-input-' + index\"\n [type]=\"codeHidden ? 'password' : 'tel'\"\n [tabindex]=\"pinCodeService.firstEmpty === index ? 0 : -1\"\n (click)=\"handleCLick($event)\"\n (keydown.backspace)=\"handleDelete($event)\"\n (keydown.delete)=\"handleDelete($event)\"\n (keydown.enter)=\"handleComplete()\"\n (keypress)=\"handleInput($event)\"\n (blur)=\"handleBlur(index)\"\n [disabled]=\"disabled\"\n />\n</ng-container>\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]=\"[pinCodeService.joinedValues]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[pinCodeService.joinedValues]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;height:4.5rem;margin-bottom:.75rem}:host .qd-pin-code__input{width:1.875rem;height:2.25rem;border:.0625rem solid rgb(180,180,180);margin-right:.75rem;margin-bottom:.375rem;caret-color:#fff0;cursor:default;font-size:1.5rem;font-weight:500;text-align:center}:host .qd-pin-code__input--last{margin-right:0}:host .qd-pin-code__input:focus{border-width:.125rem;border-color:#069}:host .qd-pin-code__input:active{border-width:.0625rem;border-color:#b4b4b4}:host .qd-pin-code__input:focus-visible{outline:none}:host.qd-pin-code--error .qd-pin-code__input{border-color:#c70023}:host.qd-pin-code--error .qd-pin-code__input:focus{border-width:.125rem}:host.qd-pin-code--error .qd-pin-code__input:active{border-width:.0625rem}\n"] }]
|
|
15546
15546
|
}], ctorParameters: () => [{ type: QdPinCodeService }, { type: i0.ChangeDetectorRef }, { type: QdFormsActionEmitterService }, { type: i1$4.ControlContainer, decorators: [{
|
|
15547
15547
|
type: Optional
|
|
15548
15548
|
}, {
|
|
@@ -15861,7 +15861,7 @@ class QdRadioButtonsComponent {
|
|
|
15861
15861
|
},
|
|
15862
15862
|
QdRadioButtonsService,
|
|
15863
15863
|
QdFormsActionEmitterService
|
|
15864
|
-
], 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 (click)=\"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<
|
|
15864
|
+
], 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 (click)=\"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{padding: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}}\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: QdVisuallyHiddenDirective, selector: "[qdVisuallyHidden]" }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { 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: i1$3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
15865
15865
|
}
|
|
15866
15866
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdRadioButtonsComponent, decorators: [{
|
|
15867
15867
|
type: Component,
|
|
@@ -15873,7 +15873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
15873
15873
|
},
|
|
15874
15874
|
QdRadioButtonsService,
|
|
15875
15875
|
QdFormsActionEmitterService
|
|
15876
|
-
], encapsulation: ViewEncapsulation.None, 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 (click)=\"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<
|
|
15876
|
+
], encapsulation: ViewEncapsulation.None, 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 (click)=\"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{padding: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}}\n"] }]
|
|
15877
15877
|
}], ctorParameters: () => [{ type: QdRadioButtonsService }, { type: QdFormsActionEmitterService }, { type: i1$4.ControlContainer, decorators: [{
|
|
15878
15878
|
type: Optional
|
|
15879
15879
|
}, {
|
|
@@ -16236,7 +16236,7 @@ class QdRichtextComponent {
|
|
|
16236
16236
|
multi: true
|
|
16237
16237
|
},
|
|
16238
16238
|
QdFormsActionEmitterService
|
|
16239
|
-
], ngImport: i0, template: "<div class=\"label-counter-container\">\n <qd-form-label\n *ngIf=\"config?.label\"\n [label]=\"config?.label?.i18n\"\n [readonly]=\"config?.readonly\"\n [viewonly]=\"config?.viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n ></qd-form-label>\n\n <span class=\"character-counter\" *ngIf=\"hasMaxLength\">{{ plainTextValue.length }} / {{ maxLength }}</span>\n</div>\n\n<ng-container *ngIf=\"!config?.readonly && !config?.viewonly\">\n <div class=\"wrapper\">\n <ngx-editor-menu [editor]=\"editor\" [toolbar]=\"toolbar\"> </ngx-editor-menu>\n <ngx-editor\n [editor]=\"editor\"\n [ngModel]=\"value\"\n [disabled]=\"isDisabled\"\n [placeholder]=\"(config?.placeholder?.disabled ? '' : config?.placeholder?.i18n ?? '') | translate\"\n (ngModelChange)=\"change($event)\"\n [attr.data-test-id]=\"testId + '-input'\"\n ></ngx-editor>\n </div>\n\n <qd-form-hint\n *ngIf=\"config?.hint\"\n [data-test-id]=\"testId\"\n [hintAction]=\"config?.hintAction\"\n [hint]=\"config?.hint?.i18n\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n ></qd-form-hint>\n</ng-container>\n\n<ngx-editor\n *ngIf=\"config?.readonly\"\n class=\"richtext-readonly\"\n [class.readonly-action]=\"this.config?.readonlyAction\"\n [editor]=\"editor\"\n [ngModel]=\"value\"\n [disabled]=\"true\"\n [attr.data-test-id]=\"testId + '-input-readonly'\"\n (click)=\"handleReadonly()\"\n></ngx-editor>\n\n<ngx-editor\n *ngIf=\"config?.viewonly\"\n class=\"richtext-viewonly\"\n [class.viewonly-action]=\"this.config?.viewonlyAction\"\n [editor]=\"editor\"\n [ngModel]=\"value\"\n [disabled]=\"true\"\n [attr.data-test-id]=\"testId + '-input-viewonly'\"\n (click)=\"handleViewonly()\"\n></ngx-editor>\n", styles: ["qd-richtext{display:block}qd-richtext .wrapper{border:.0625rem solid rgb(180,180,180);margin-bottom:.375rem;background-color:#fff}qd-richtext .NgxEditor{min-height:8.75rem;border-radius:0;border-right:0;border-bottom:0;border-left:0}qd-richtext.qd-form-disabled .NgxEditor__MenuBar{background-color:#f5f5f5;color:#979797}qd-richtext.qd-form-disabled .NgxEditor__MenuBar .NgxEditor__MenuItem--Active{background-color:#efefef;color:#979797}qd-richtext.qd-form-disabled .NgxEditor{background-color:#f5f5f5;color:#979797}.richtext-readonly .NgxEditor{border-top:0}.richtext-readonly.readonly-action .NgxEditor{color:#069;cursor:pointer}.richtext-readonly.readonly-action .NgxEditor:hover,.richtext-readonly.readonly-action .NgxEditor:active,.richtext-readonly.readonly-action .NgxEditor:focus{text-decoration:underline}.richtext-viewonly .NgxEditor{border-top:0}.richtext-viewonly.viewonly-action .NgxEditor{color:#069;cursor:pointer}.richtext-viewonly.viewonly-action .NgxEditor:hover,.richtext-viewonly.viewonly-action .NgxEditor:active,.richtext-viewonly.viewonly-action .NgxEditor:focus{text-decoration:underline}.character-counter{padding-left:.125rem;color:#757575;font-size:.75rem;font-weight:300;line-height:.75rem}.label-counter-container{display:flex;align-items:center;justify-content:space-between;padding:.25rem .125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i4.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { 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: "pipe", type: i1$3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
16239
|
+
], ngImport: i0, template: "<div class=\"label-counter-container\">\n <qd-form-label\n *ngIf=\"config?.label\"\n [label]=\"config?.label?.i18n\"\n [readonly]=\"config?.readonly\"\n [viewonly]=\"config?.viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n ></qd-form-label>\n\n <span class=\"character-counter\" *ngIf=\"hasMaxLength\">{{ plainTextValue.length }} / {{ maxLength }}</span>\n</div>\n\n<ng-container *ngIf=\"!config?.readonly && !config?.viewonly\">\n <div class=\"wrapper\">\n <ngx-editor-menu [editor]=\"editor\" [toolbar]=\"toolbar\"> </ngx-editor-menu>\n <ngx-editor\n [editor]=\"editor\"\n [ngModel]=\"value\"\n [disabled]=\"isDisabled\"\n [placeholder]=\"(config?.placeholder?.disabled ? '' : config?.placeholder?.i18n ?? '') | translate\"\n (ngModelChange)=\"change($event)\"\n [attr.data-test-id]=\"testId + '-input'\"\n ></ngx-editor>\n </div>\n\n <qd-form-hint\n *ngIf=\"config?.hint || hasError\"\n [data-test-id]=\"testId\"\n [hintAction]=\"config?.hintAction\"\n [hint]=\"config?.hint?.i18n\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n ></qd-form-hint>\n</ng-container>\n\n<ngx-editor\n *ngIf=\"config?.readonly\"\n class=\"richtext-readonly\"\n [class.readonly-action]=\"this.config?.readonlyAction\"\n [editor]=\"editor\"\n [ngModel]=\"value\"\n [disabled]=\"true\"\n [attr.data-test-id]=\"testId + '-input-readonly'\"\n (click)=\"handleReadonly()\"\n></ngx-editor>\n\n<ngx-editor\n *ngIf=\"config?.viewonly\"\n class=\"richtext-viewonly\"\n [class.viewonly-action]=\"this.config?.viewonlyAction\"\n [editor]=\"editor\"\n [ngModel]=\"value\"\n [disabled]=\"true\"\n [attr.data-test-id]=\"testId + '-input-viewonly'\"\n (click)=\"handleViewonly()\"\n></ngx-editor>\n", styles: ["qd-richtext{display:block}qd-richtext .wrapper{border:.0625rem solid rgb(180,180,180);margin-bottom:.375rem;background-color:#fff}qd-richtext .NgxEditor{min-height:8.75rem;border-radius:0;border-right:0;border-bottom:0;border-left:0}qd-richtext.qd-form-disabled .NgxEditor__MenuBar{background-color:#f5f5f5;color:#979797}qd-richtext.qd-form-disabled .NgxEditor__MenuBar .NgxEditor__MenuItem--Active{background-color:#efefef;color:#979797}qd-richtext.qd-form-disabled .NgxEditor{background-color:#f5f5f5;color:#979797}.richtext-readonly .NgxEditor{border-top:0}.richtext-readonly.readonly-action .NgxEditor{color:#069;cursor:pointer}.richtext-readonly.readonly-action .NgxEditor:hover,.richtext-readonly.readonly-action .NgxEditor:active,.richtext-readonly.readonly-action .NgxEditor:focus{text-decoration:underline}.richtext-viewonly .NgxEditor{border-top:0}.richtext-viewonly.viewonly-action .NgxEditor{color:#069;cursor:pointer}.richtext-viewonly.viewonly-action .NgxEditor:hover,.richtext-viewonly.viewonly-action .NgxEditor:active,.richtext-viewonly.viewonly-action .NgxEditor:focus{text-decoration:underline}.character-counter{padding-left:.125rem;color:#757575;font-size:.75rem;font-weight:300;line-height:.75rem}.label-counter-container{display:flex;align-items:center;justify-content:space-between;padding:.25rem .125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i4.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { 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: "pipe", type: i1$3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
16240
16240
|
}
|
|
16241
16241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdRichtextComponent, decorators: [{
|
|
16242
16242
|
type: Component,
|
|
@@ -16247,7 +16247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
16247
16247
|
multi: true
|
|
16248
16248
|
},
|
|
16249
16249
|
QdFormsActionEmitterService
|
|
16250
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"label-counter-container\">\n <qd-form-label\n *ngIf=\"config?.label\"\n [label]=\"config?.label?.i18n\"\n [readonly]=\"config?.readonly\"\n [viewonly]=\"config?.viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n ></qd-form-label>\n\n <span class=\"character-counter\" *ngIf=\"hasMaxLength\">{{ plainTextValue.length }} / {{ maxLength }}</span>\n</div>\n\n<ng-container *ngIf=\"!config?.readonly && !config?.viewonly\">\n <div class=\"wrapper\">\n <ngx-editor-menu [editor]=\"editor\" [toolbar]=\"toolbar\"> </ngx-editor-menu>\n <ngx-editor\n [editor]=\"editor\"\n [ngModel]=\"value\"\n [disabled]=\"isDisabled\"\n [placeholder]=\"(config?.placeholder?.disabled ? '' : config?.placeholder?.i18n ?? '') | translate\"\n (ngModelChange)=\"change($event)\"\n [attr.data-test-id]=\"testId + '-input'\"\n ></ngx-editor>\n </div>\n\n <qd-form-hint\n *ngIf=\"config?.hint\"\n [data-test-id]=\"testId\"\n [hintAction]=\"config?.hintAction\"\n [hint]=\"config?.hint?.i18n\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n ></qd-form-hint>\n</ng-container>\n\n<ngx-editor\n *ngIf=\"config?.readonly\"\n class=\"richtext-readonly\"\n [class.readonly-action]=\"this.config?.readonlyAction\"\n [editor]=\"editor\"\n [ngModel]=\"value\"\n [disabled]=\"true\"\n [attr.data-test-id]=\"testId + '-input-readonly'\"\n (click)=\"handleReadonly()\"\n></ngx-editor>\n\n<ngx-editor\n *ngIf=\"config?.viewonly\"\n class=\"richtext-viewonly\"\n [class.viewonly-action]=\"this.config?.viewonlyAction\"\n [editor]=\"editor\"\n [ngModel]=\"value\"\n [disabled]=\"true\"\n [attr.data-test-id]=\"testId + '-input-viewonly'\"\n (click)=\"handleViewonly()\"\n></ngx-editor>\n", styles: ["qd-richtext{display:block}qd-richtext .wrapper{border:.0625rem solid rgb(180,180,180);margin-bottom:.375rem;background-color:#fff}qd-richtext .NgxEditor{min-height:8.75rem;border-radius:0;border-right:0;border-bottom:0;border-left:0}qd-richtext.qd-form-disabled .NgxEditor__MenuBar{background-color:#f5f5f5;color:#979797}qd-richtext.qd-form-disabled .NgxEditor__MenuBar .NgxEditor__MenuItem--Active{background-color:#efefef;color:#979797}qd-richtext.qd-form-disabled .NgxEditor{background-color:#f5f5f5;color:#979797}.richtext-readonly .NgxEditor{border-top:0}.richtext-readonly.readonly-action .NgxEditor{color:#069;cursor:pointer}.richtext-readonly.readonly-action .NgxEditor:hover,.richtext-readonly.readonly-action .NgxEditor:active,.richtext-readonly.readonly-action .NgxEditor:focus{text-decoration:underline}.richtext-viewonly .NgxEditor{border-top:0}.richtext-viewonly.viewonly-action .NgxEditor{color:#069;cursor:pointer}.richtext-viewonly.viewonly-action .NgxEditor:hover,.richtext-viewonly.viewonly-action .NgxEditor:active,.richtext-viewonly.viewonly-action .NgxEditor:focus{text-decoration:underline}.character-counter{padding-left:.125rem;color:#757575;font-size:.75rem;font-weight:300;line-height:.75rem}.label-counter-container{display:flex;align-items:center;justify-content:space-between;padding:.25rem .125rem}\n"] }]
|
|
16250
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"label-counter-container\">\n <qd-form-label\n *ngIf=\"config?.label\"\n [label]=\"config?.label?.i18n\"\n [readonly]=\"config?.readonly\"\n [viewonly]=\"config?.viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n ></qd-form-label>\n\n <span class=\"character-counter\" *ngIf=\"hasMaxLength\">{{ plainTextValue.length }} / {{ maxLength }}</span>\n</div>\n\n<ng-container *ngIf=\"!config?.readonly && !config?.viewonly\">\n <div class=\"wrapper\">\n <ngx-editor-menu [editor]=\"editor\" [toolbar]=\"toolbar\"> </ngx-editor-menu>\n <ngx-editor\n [editor]=\"editor\"\n [ngModel]=\"value\"\n [disabled]=\"isDisabled\"\n [placeholder]=\"(config?.placeholder?.disabled ? '' : config?.placeholder?.i18n ?? '') | translate\"\n (ngModelChange)=\"change($event)\"\n [attr.data-test-id]=\"testId + '-input'\"\n ></ngx-editor>\n </div>\n\n <qd-form-hint\n *ngIf=\"config?.hint || hasError\"\n [data-test-id]=\"testId\"\n [hintAction]=\"config?.hintAction\"\n [hint]=\"config?.hint?.i18n\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n ></qd-form-hint>\n</ng-container>\n\n<ngx-editor\n *ngIf=\"config?.readonly\"\n class=\"richtext-readonly\"\n [class.readonly-action]=\"this.config?.readonlyAction\"\n [editor]=\"editor\"\n [ngModel]=\"value\"\n [disabled]=\"true\"\n [attr.data-test-id]=\"testId + '-input-readonly'\"\n (click)=\"handleReadonly()\"\n></ngx-editor>\n\n<ngx-editor\n *ngIf=\"config?.viewonly\"\n class=\"richtext-viewonly\"\n [class.viewonly-action]=\"this.config?.viewonlyAction\"\n [editor]=\"editor\"\n [ngModel]=\"value\"\n [disabled]=\"true\"\n [attr.data-test-id]=\"testId + '-input-viewonly'\"\n (click)=\"handleViewonly()\"\n></ngx-editor>\n", styles: ["qd-richtext{display:block}qd-richtext .wrapper{border:.0625rem solid rgb(180,180,180);margin-bottom:.375rem;background-color:#fff}qd-richtext .NgxEditor{min-height:8.75rem;border-radius:0;border-right:0;border-bottom:0;border-left:0}qd-richtext.qd-form-disabled .NgxEditor__MenuBar{background-color:#f5f5f5;color:#979797}qd-richtext.qd-form-disabled .NgxEditor__MenuBar .NgxEditor__MenuItem--Active{background-color:#efefef;color:#979797}qd-richtext.qd-form-disabled .NgxEditor{background-color:#f5f5f5;color:#979797}.richtext-readonly .NgxEditor{border-top:0}.richtext-readonly.readonly-action .NgxEditor{color:#069;cursor:pointer}.richtext-readonly.readonly-action .NgxEditor:hover,.richtext-readonly.readonly-action .NgxEditor:active,.richtext-readonly.readonly-action .NgxEditor:focus{text-decoration:underline}.richtext-viewonly .NgxEditor{border-top:0}.richtext-viewonly.viewonly-action .NgxEditor{color:#069;cursor:pointer}.richtext-viewonly.viewonly-action .NgxEditor:hover,.richtext-viewonly.viewonly-action .NgxEditor:active,.richtext-viewonly.viewonly-action .NgxEditor:focus{text-decoration:underline}.character-counter{padding-left:.125rem;color:#757575;font-size:.75rem;font-weight:300;line-height:.75rem}.label-counter-container{display:flex;align-items:center;justify-content:space-between;padding:.25rem .125rem}\n"] }]
|
|
16251
16251
|
}], ctorParameters: () => [{ type: i1$4.ControlContainer, decorators: [{
|
|
16252
16252
|
type: Optional
|
|
16253
16253
|
}, {
|
|
@@ -16604,7 +16604,7 @@ class QdSwitchesComponent {
|
|
|
16604
16604
|
},
|
|
16605
16605
|
QdSwitchesService,
|
|
16606
16606
|
QdFormsActionEmitterService
|
|
16607
|
-
], 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-switches__input-section\" *ngIf=\"!readonly && !viewonly\">\n <div class=\"qd-switches__switch-section\">\n <qd-switch\n *ngFor=\"let input of switchesInputs\"\n [inputData]=\"input\"\n (click)=\"handleClick(input)\"\n [data-test-id]=\"testId + '-switch-' + input.index\"\n [disabled]=\"disabled\"\n ></qd-switch>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly\"\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]=\"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-switches{display:block;flex-direction:column;margin-bottom:.75rem}.qd-switches .qd-switches__input-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-switches .qd-switches__switch-section{display:flex;flex-direction:row}.qd-switches .qd-switches__switch-section .switch-toggle-bar{margin-right:.375rem}.qd-switches .qd-switches__switch-section .switch-content{margin:0 1rem 0 0}.qd-switches qd-switch:last-child .switch-content{margin-right:0}.qd-switches.qd-switches-vertical .qd-switches__switch-section{display:flex;flex-direction:column}.qd-switches.qd-switches-vertical .qd-switches__switch-section .qd-switch:not(:last-child){margin-bottom:.5rem}.qd-switches:not(.qd-switches-vertical) .qd-switches__switch-section{align-items:center}.qd-switches:not(.qd-switches-vertical) .qd-switches__switch-section .qd-switch{display:flex;height:2.25rem}\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: 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: QdSwitchComponent, selector: "qd-switch", inputs: ["inputData", "id", "disabled", "data-test-id"], outputs: ["valueChange"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
16607
|
+
], 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-switches__input-section\" *ngIf=\"!readonly && !viewonly\">\n <div class=\"qd-switches__switch-section\">\n <qd-switch\n *ngFor=\"let input of switchesInputs\"\n [inputData]=\"input\"\n (click)=\"handleClick(input)\"\n [data-test-id]=\"testId + '-switch-' + input.index\"\n [disabled]=\"disabled\"\n ></qd-switch>\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]=\"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-switches{display:block;flex-direction:column;margin-bottom:.75rem}.qd-switches .qd-switches__input-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-switches .qd-switches__switch-section{display:flex;flex-direction:row}.qd-switches .qd-switches__switch-section .switch-toggle-bar{margin-right:.375rem}.qd-switches .qd-switches__switch-section .switch-content{margin:0 1rem 0 0}.qd-switches qd-switch:last-child .switch-content{margin-right:0}.qd-switches.qd-switches-vertical .qd-switches__switch-section{display:flex;flex-direction:column}.qd-switches.qd-switches-vertical .qd-switches__switch-section .qd-switch:not(:last-child){margin-bottom:.5rem}.qd-switches:not(.qd-switches-vertical) .qd-switches__switch-section{align-items:center}.qd-switches:not(.qd-switches-vertical) .qd-switches__switch-section .qd-switch{display:flex;height:2.25rem}\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: 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: QdSwitchComponent, selector: "qd-switch", inputs: ["inputData", "id", "disabled", "data-test-id"], outputs: ["valueChange"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
16608
16608
|
}
|
|
16609
16609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdSwitchesComponent, decorators: [{
|
|
16610
16610
|
type: Component,
|
|
@@ -16616,7 +16616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
16616
16616
|
},
|
|
16617
16617
|
QdSwitchesService,
|
|
16618
16618
|
QdFormsActionEmitterService
|
|
16619
|
-
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-switches' }, 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-switches__input-section\" *ngIf=\"!readonly && !viewonly\">\n <div class=\"qd-switches__switch-section\">\n <qd-switch\n *ngFor=\"let input of switchesInputs\"\n [inputData]=\"input\"\n (click)=\"handleClick(input)\"\n [data-test-id]=\"testId + '-switch-' + input.index\"\n [disabled]=\"disabled\"\n ></qd-switch>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly\"\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]=\"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-switches{display:block;flex-direction:column;margin-bottom:.75rem}.qd-switches .qd-switches__input-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-switches .qd-switches__switch-section{display:flex;flex-direction:row}.qd-switches .qd-switches__switch-section .switch-toggle-bar{margin-right:.375rem}.qd-switches .qd-switches__switch-section .switch-content{margin:0 1rem 0 0}.qd-switches qd-switch:last-child .switch-content{margin-right:0}.qd-switches.qd-switches-vertical .qd-switches__switch-section{display:flex;flex-direction:column}.qd-switches.qd-switches-vertical .qd-switches__switch-section .qd-switch:not(:last-child){margin-bottom:.5rem}.qd-switches:not(.qd-switches-vertical) .qd-switches__switch-section{align-items:center}.qd-switches:not(.qd-switches-vertical) .qd-switches__switch-section .qd-switch{display:flex;height:2.25rem}\n"] }]
|
|
16619
|
+
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-switches' }, 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-switches__input-section\" *ngIf=\"!readonly && !viewonly\">\n <div class=\"qd-switches__switch-section\">\n <qd-switch\n *ngFor=\"let input of switchesInputs\"\n [inputData]=\"input\"\n (click)=\"handleClick(input)\"\n [data-test-id]=\"testId + '-switch-' + input.index\"\n [disabled]=\"disabled\"\n ></qd-switch>\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]=\"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-switches{display:block;flex-direction:column;margin-bottom:.75rem}.qd-switches .qd-switches__input-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-switches .qd-switches__switch-section{display:flex;flex-direction:row}.qd-switches .qd-switches__switch-section .switch-toggle-bar{margin-right:.375rem}.qd-switches .qd-switches__switch-section .switch-content{margin:0 1rem 0 0}.qd-switches qd-switch:last-child .switch-content{margin-right:0}.qd-switches.qd-switches-vertical .qd-switches__switch-section{display:flex;flex-direction:column}.qd-switches.qd-switches-vertical .qd-switches__switch-section .qd-switch:not(:last-child){margin-bottom:.5rem}.qd-switches:not(.qd-switches-vertical) .qd-switches__switch-section{align-items:center}.qd-switches:not(.qd-switches-vertical) .qd-switches__switch-section .qd-switch{display:flex;height:2.25rem}\n"] }]
|
|
16620
16620
|
}], ctorParameters: () => [{ type: QdSwitchesService }, { type: i0.ChangeDetectorRef }, { type: QdFormsActionEmitterService }, { type: i1$4.ControlContainer, decorators: [{
|
|
16621
16621
|
type: Optional
|
|
16622
16622
|
}, {
|
|
@@ -16882,7 +16882,7 @@ class QdTextareaComponent {
|
|
|
16882
16882
|
multi: true
|
|
16883
16883
|
},
|
|
16884
16884
|
QdFormsActionEmitterService
|
|
16885
|
-
], 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<ng-container *ngIf=\"!readonly && !viewonly\">\n <div class=\"qd-textarea-input\">\n <textarea\n [placeholder]=\"placeholder | translate\"\n [value]=\"valueForView\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n [disabled]=\"disabled || readonly\"\n [attr.data-test-id]=\"testId + '-input'\"\n [rows]=\"rows\"\n ></textarea>\n <div class=\"qd-textarea-suffix\">\n <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n </div>\n\n <span class=\"qd-textarea-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</ng-container>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"[valueForView]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[valueForView]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{position:relative;display:block;overflow:hidden;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-textarea-input{display:flex;align-items:center;padding:.5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-textarea-input:hover,:host .qd-textarea-input:focus,:host .qd-textarea-input:active{padding:.4375rem;border:.125rem solid rgb(23,23,23)}:host .qd-textarea-input textarea{height:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;resize:none}:host .qd-textarea-input textarea:hover,:host .qd-textarea-input textarea:focus,:host .qd-textarea-input textarea:active{border:none;outline:none}:host .qd-textarea-input textarea::placeholder{color:#b4b4b4}:host .qd-textarea-input textarea:focus::placeholder{display:block;color:#b4b4b4}:host .qd-textarea-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-textarea-focus .qd-textarea-input{padding:.4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-textarea-readonly .qd-textarea-input-readonly{display:flex;min-height:2.25rem;align-items:center;margin-bottom:.375rem;color:#171717;font-size:.875rem}:host.qd-textarea--readonly-action .qd-textarea-input-readonly{color:#069;cursor:pointer}:host.qd-textarea--readonly-action .qd-textarea-input-readonly:hover,:host.qd-textarea--readonly-action .qd-textarea-input-readonly:active,:host.qd-textarea--readonly-action .qd-textarea-input-readonly:focus{text-decoration:underline}:host.qd-textarea-viewonly .qd-textarea-input-viewonly{display:flex;min-height:2.25rem;align-items:center;margin-bottom:.375rem;color:#171717;font-size:.875rem}:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly{color:#069;cursor:pointer}:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:hover,:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:active,:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:focus{text-decoration:underline}:host.qd-textarea-disabled .qd-textarea-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-textarea-disabled .qd-textarea-input textarea{background-color:#f5f5f5;color:#979797}:host.qd-textarea-disabled .qd-textarea-input textarea::placeholder{color:red;opacity:0}:host.qd-textarea-disabled .qd-textarea-input:hover,:host.qd-textarea-disabled .qd-textarea-input:focus,:host.qd-textarea-disabled .qd-textarea-input:active{padding:.5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-textarea-disabled.qd-textarea-focus{border-color:#ff9b00}:host.qd-textarea-error .qd-textarea-input{padding:.5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-textarea-error .qd-textarea-input .qd-error-icon{color:#c70023}:host.qd-textarea-error .qd-textarea-input:hover,:host.qd-textarea-error .qd-textarea-input:focus,:host.qd-textarea-error .qd-textarea-input:active{padding:.4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-textarea-error.qd-textarea-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { 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: i1$3.TranslatePipe, name: "translate" }] });
|
|
16885
|
+
], 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<ng-container *ngIf=\"!readonly && !viewonly\">\n <div class=\"qd-textarea-input\">\n <textarea\n [placeholder]=\"placeholder | translate\"\n [value]=\"valueForView\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n [disabled]=\"disabled || readonly\"\n [attr.data-test-id]=\"testId + '-input'\"\n [rows]=\"rows\"\n ></textarea>\n <div class=\"qd-textarea-suffix\">\n <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n </div>\n\n <span class=\"qd-textarea-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n *ngIf=\"hint || hasError\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</ng-container>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"[valueForView]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[valueForView]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{position:relative;display:block;overflow:hidden;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-textarea-input{display:flex;align-items:center;padding:.5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-textarea-input:hover,:host .qd-textarea-input:focus,:host .qd-textarea-input:active{padding:.4375rem;border:.125rem solid rgb(23,23,23)}:host .qd-textarea-input textarea{height:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;resize:none}:host .qd-textarea-input textarea:hover,:host .qd-textarea-input textarea:focus,:host .qd-textarea-input textarea:active{border:none;outline:none}:host .qd-textarea-input textarea::placeholder{color:#b4b4b4}:host .qd-textarea-input textarea:focus::placeholder{display:block;color:#b4b4b4}:host .qd-textarea-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-textarea-focus .qd-textarea-input{padding:.4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-textarea-readonly .qd-textarea-input-readonly{display:flex;min-height:2.25rem;align-items:center;margin-bottom:.375rem;color:#171717;font-size:.875rem}:host.qd-textarea--readonly-action .qd-textarea-input-readonly{color:#069;cursor:pointer}:host.qd-textarea--readonly-action .qd-textarea-input-readonly:hover,:host.qd-textarea--readonly-action .qd-textarea-input-readonly:active,:host.qd-textarea--readonly-action .qd-textarea-input-readonly:focus{text-decoration:underline}:host.qd-textarea-viewonly .qd-textarea-input-viewonly{display:flex;min-height:2.25rem;align-items:center;margin-bottom:.375rem;color:#171717;font-size:.875rem}:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly{color:#069;cursor:pointer}:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:hover,:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:active,:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:focus{text-decoration:underline}:host.qd-textarea-disabled .qd-textarea-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-textarea-disabled .qd-textarea-input textarea{background-color:#f5f5f5;color:#979797}:host.qd-textarea-disabled .qd-textarea-input textarea::placeholder{color:red;opacity:0}:host.qd-textarea-disabled .qd-textarea-input:hover,:host.qd-textarea-disabled .qd-textarea-input:focus,:host.qd-textarea-disabled .qd-textarea-input:active{padding:.5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-textarea-disabled.qd-textarea-focus{border-color:#ff9b00}:host.qd-textarea-error .qd-textarea-input{padding:.5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-textarea-error .qd-textarea-input .qd-error-icon{color:#c70023}:host.qd-textarea-error .qd-textarea-input:hover,:host.qd-textarea-error .qd-textarea-input:focus,:host.qd-textarea-error .qd-textarea-input:active{padding:.4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-textarea-error.qd-textarea-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { 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: i1$3.TranslatePipe, name: "translate" }] });
|
|
16886
16886
|
}
|
|
16887
16887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdTextareaComponent, decorators: [{
|
|
16888
16888
|
type: Component,
|
|
@@ -16893,7 +16893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
16893
16893
|
multi: true
|
|
16894
16894
|
},
|
|
16895
16895
|
QdFormsActionEmitterService
|
|
16896
|
-
], 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<ng-container *ngIf=\"!readonly && !viewonly\">\n <div class=\"qd-textarea-input\">\n <textarea\n [placeholder]=\"placeholder | translate\"\n [value]=\"valueForView\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n [disabled]=\"disabled || readonly\"\n [attr.data-test-id]=\"testId + '-input'\"\n [rows]=\"rows\"\n ></textarea>\n <div class=\"qd-textarea-suffix\">\n <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n </div>\n\n <span class=\"qd-textarea-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</ng-container>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"[valueForView]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[valueForView]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{position:relative;display:block;overflow:hidden;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-textarea-input{display:flex;align-items:center;padding:.5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-textarea-input:hover,:host .qd-textarea-input:focus,:host .qd-textarea-input:active{padding:.4375rem;border:.125rem solid rgb(23,23,23)}:host .qd-textarea-input textarea{height:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;resize:none}:host .qd-textarea-input textarea:hover,:host .qd-textarea-input textarea:focus,:host .qd-textarea-input textarea:active{border:none;outline:none}:host .qd-textarea-input textarea::placeholder{color:#b4b4b4}:host .qd-textarea-input textarea:focus::placeholder{display:block;color:#b4b4b4}:host .qd-textarea-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-textarea-focus .qd-textarea-input{padding:.4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-textarea-readonly .qd-textarea-input-readonly{display:flex;min-height:2.25rem;align-items:center;margin-bottom:.375rem;color:#171717;font-size:.875rem}:host.qd-textarea--readonly-action .qd-textarea-input-readonly{color:#069;cursor:pointer}:host.qd-textarea--readonly-action .qd-textarea-input-readonly:hover,:host.qd-textarea--readonly-action .qd-textarea-input-readonly:active,:host.qd-textarea--readonly-action .qd-textarea-input-readonly:focus{text-decoration:underline}:host.qd-textarea-viewonly .qd-textarea-input-viewonly{display:flex;min-height:2.25rem;align-items:center;margin-bottom:.375rem;color:#171717;font-size:.875rem}:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly{color:#069;cursor:pointer}:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:hover,:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:active,:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:focus{text-decoration:underline}:host.qd-textarea-disabled .qd-textarea-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-textarea-disabled .qd-textarea-input textarea{background-color:#f5f5f5;color:#979797}:host.qd-textarea-disabled .qd-textarea-input textarea::placeholder{color:red;opacity:0}:host.qd-textarea-disabled .qd-textarea-input:hover,:host.qd-textarea-disabled .qd-textarea-input:focus,:host.qd-textarea-disabled .qd-textarea-input:active{padding:.5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-textarea-disabled.qd-textarea-focus{border-color:#ff9b00}:host.qd-textarea-error .qd-textarea-input{padding:.5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-textarea-error .qd-textarea-input .qd-error-icon{color:#c70023}:host.qd-textarea-error .qd-textarea-input:hover,:host.qd-textarea-error .qd-textarea-input:focus,:host.qd-textarea-error .qd-textarea-input:active{padding:.4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-textarea-error.qd-textarea-focus{border-color:#c70023}\n"] }]
|
|
16896
|
+
], 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<ng-container *ngIf=\"!readonly && !viewonly\">\n <div class=\"qd-textarea-input\">\n <textarea\n [placeholder]=\"placeholder | translate\"\n [value]=\"valueForView\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n [disabled]=\"disabled || readonly\"\n [attr.data-test-id]=\"testId + '-input'\"\n [rows]=\"rows\"\n ></textarea>\n <div class=\"qd-textarea-suffix\">\n <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n </div>\n\n <span class=\"qd-textarea-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n *ngIf=\"hint || hasError\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n</ng-container>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"[valueForView]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[valueForView]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{position:relative;display:block;overflow:hidden;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-textarea-input{display:flex;align-items:center;padding:.5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-textarea-input:hover,:host .qd-textarea-input:focus,:host .qd-textarea-input:active{padding:.4375rem;border:.125rem solid rgb(23,23,23)}:host .qd-textarea-input textarea{height:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;resize:none}:host .qd-textarea-input textarea:hover,:host .qd-textarea-input textarea:focus,:host .qd-textarea-input textarea:active{border:none;outline:none}:host .qd-textarea-input textarea::placeholder{color:#b4b4b4}:host .qd-textarea-input textarea:focus::placeholder{display:block;color:#b4b4b4}:host .qd-textarea-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-textarea-focus .qd-textarea-input{padding:.4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-textarea-readonly .qd-textarea-input-readonly{display:flex;min-height:2.25rem;align-items:center;margin-bottom:.375rem;color:#171717;font-size:.875rem}:host.qd-textarea--readonly-action .qd-textarea-input-readonly{color:#069;cursor:pointer}:host.qd-textarea--readonly-action .qd-textarea-input-readonly:hover,:host.qd-textarea--readonly-action .qd-textarea-input-readonly:active,:host.qd-textarea--readonly-action .qd-textarea-input-readonly:focus{text-decoration:underline}:host.qd-textarea-viewonly .qd-textarea-input-viewonly{display:flex;min-height:2.25rem;align-items:center;margin-bottom:.375rem;color:#171717;font-size:.875rem}:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly{color:#069;cursor:pointer}:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:hover,:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:active,:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:focus{text-decoration:underline}:host.qd-textarea-disabled .qd-textarea-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-textarea-disabled .qd-textarea-input textarea{background-color:#f5f5f5;color:#979797}:host.qd-textarea-disabled .qd-textarea-input textarea::placeholder{color:red;opacity:0}:host.qd-textarea-disabled .qd-textarea-input:hover,:host.qd-textarea-disabled .qd-textarea-input:focus,:host.qd-textarea-disabled .qd-textarea-input:active{padding:.5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-textarea-disabled.qd-textarea-focus{border-color:#ff9b00}:host.qd-textarea-error .qd-textarea-input{padding:.5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-textarea-error .qd-textarea-input .qd-error-icon{color:#c70023}:host.qd-textarea-error .qd-textarea-input:hover,:host.qd-textarea-error .qd-textarea-input:focus,:host.qd-textarea-error .qd-textarea-input:active{padding:.4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-textarea-error.qd-textarea-focus{border-color:#c70023}\n"] }]
|
|
16897
16897
|
}], ctorParameters: () => [{ type: QdFormsActionEmitterService }, { type: i0.ChangeDetectorRef }, { type: i1$4.ControlContainer, decorators: [{
|
|
16898
16898
|
type: Optional
|
|
16899
16899
|
}, {
|
|
@@ -33312,8 +33312,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
33312
33312
|
class QdFormGroupManagerService {
|
|
33313
33313
|
_formGroups = new Map();
|
|
33314
33314
|
_formGroupsSnapshot = new Map();
|
|
33315
|
+
_formGroupsChanged$ = new BehaviorSubject(undefined);
|
|
33315
33316
|
setFormGroup(key, formGroup) {
|
|
33316
33317
|
this._formGroups.set(key, formGroup);
|
|
33318
|
+
this._formGroupsChanged$.next();
|
|
33317
33319
|
}
|
|
33318
33320
|
getFormGroup(key) {
|
|
33319
33321
|
return this._formGroups.get(key);
|
|
@@ -33323,6 +33325,7 @@ class QdFormGroupManagerService {
|
|
|
33323
33325
|
}
|
|
33324
33326
|
tryRemoveFormGroup(key) {
|
|
33325
33327
|
this._formGroups.delete(key);
|
|
33328
|
+
this._formGroupsChanged$.next();
|
|
33326
33329
|
}
|
|
33327
33330
|
hasFormGroups() {
|
|
33328
33331
|
return this._formGroups.size > 0;
|
|
@@ -33336,19 +33339,24 @@ class QdFormGroupManagerService {
|
|
|
33336
33339
|
return !this._formGroups.has(key);
|
|
33337
33340
|
}
|
|
33338
33341
|
$areFormGroupsValid() {
|
|
33339
|
-
|
|
33340
|
-
|
|
33341
|
-
|
|
33342
|
-
|
|
33342
|
+
return this._formGroupsChanged$.pipe(observeOn(queueScheduler), switchMap$1(() => {
|
|
33343
|
+
if (!this.hasFormGroups())
|
|
33344
|
+
return of(false);
|
|
33345
|
+
const obs = Array.from(this._formGroups.values()).map(fg => fg.statusChanges.pipe(startWith(fg.status), map(() => this.areFormGroupsValid(fg))));
|
|
33346
|
+
return combineLatest(obs).pipe(map(valids => valids.every(Boolean)));
|
|
33347
|
+
}));
|
|
33343
33348
|
}
|
|
33344
33349
|
$hasValuesChanged() {
|
|
33345
|
-
|
|
33346
|
-
|
|
33347
|
-
|
|
33348
|
-
const
|
|
33349
|
-
|
|
33350
|
-
|
|
33351
|
-
|
|
33350
|
+
return this._formGroupsChanged$.pipe(observeOn(queueScheduler), switchMap$1(() => {
|
|
33351
|
+
if (!this.hasFormGroups())
|
|
33352
|
+
return of(false);
|
|
33353
|
+
const obs = Array.from(this._formGroups.entries()).map(([key, fg]) => fg.valueChanges.pipe(startWith(fg.getRawValue()), map(() => {
|
|
33354
|
+
const currentValues = fg.getRawValue();
|
|
33355
|
+
const snapshot = this._formGroupsSnapshot.get(key);
|
|
33356
|
+
return snapshot ? !isEqual$1(currentValues, snapshot) : true;
|
|
33357
|
+
})));
|
|
33358
|
+
return combineLatest(obs).pipe(map(changes => changes.some(Boolean)));
|
|
33359
|
+
}));
|
|
33352
33360
|
}
|
|
33353
33361
|
takeFormGroupsSnapshot() {
|
|
33354
33362
|
this._formGroups.forEach((fg, key) => this._formGroupsSnapshot.set(key, fg.getRawValue()));
|
|
@@ -33368,6 +33376,43 @@ class QdFormGroupManagerService {
|
|
|
33368
33376
|
}
|
|
33369
33377
|
});
|
|
33370
33378
|
});
|
|
33379
|
+
this.cancelPendingAsyncValidation();
|
|
33380
|
+
}
|
|
33381
|
+
/**
|
|
33382
|
+
* Cancels any in-flight async validators on all registered form groups.
|
|
33383
|
+
*
|
|
33384
|
+
* 1. Collect all PENDING controls and their async validators
|
|
33385
|
+
* 2. Clear all async validators, then update validity (sync-only, no cascade)
|
|
33386
|
+
* 3. Re-attach async validators for future use
|
|
33387
|
+
*/
|
|
33388
|
+
cancelPendingAsyncValidation() {
|
|
33389
|
+
this._formGroups.forEach(fg => {
|
|
33390
|
+
const pendingControls = this.collectPendingControls(fg);
|
|
33391
|
+
if (pendingControls.length === 0)
|
|
33392
|
+
return;
|
|
33393
|
+
for (const { control } of pendingControls) {
|
|
33394
|
+
control.clearAsyncValidators();
|
|
33395
|
+
}
|
|
33396
|
+
for (const { control } of pendingControls) {
|
|
33397
|
+
control.updateValueAndValidity({ onlySelf: true });
|
|
33398
|
+
}
|
|
33399
|
+
for (const { control, asyncValidator } of pendingControls) {
|
|
33400
|
+
control.setAsyncValidators(asyncValidator);
|
|
33401
|
+
}
|
|
33402
|
+
});
|
|
33403
|
+
}
|
|
33404
|
+
collectPendingControls(control) {
|
|
33405
|
+
const result = [];
|
|
33406
|
+
if (control instanceof FormGroup) {
|
|
33407
|
+
Object.values(control.controls).forEach(c => result.push(...this.collectPendingControls(c)));
|
|
33408
|
+
}
|
|
33409
|
+
else if (control instanceof FormArray) {
|
|
33410
|
+
control.controls.forEach(c => result.push(...this.collectPendingControls(c)));
|
|
33411
|
+
}
|
|
33412
|
+
if (control.status === 'PENDING') {
|
|
33413
|
+
result.push({ control, asyncValidator: control.asyncValidator });
|
|
33414
|
+
}
|
|
33415
|
+
return result;
|
|
33371
33416
|
}
|
|
33372
33417
|
resetFormArrayToValues(array, newValues) {
|
|
33373
33418
|
if (!Array.isArray(newValues))
|
|
@@ -33632,14 +33677,18 @@ class QdPageObjectHeaderComponent {
|
|
|
33632
33677
|
.$hasValuesChanged()
|
|
33633
33678
|
.pipe(take(1))
|
|
33634
33679
|
.subscribe(hasChanged => {
|
|
33635
|
-
if (hasChanged)
|
|
33680
|
+
if (hasChanged) {
|
|
33636
33681
|
this.openCancelDialog();
|
|
33637
|
-
|
|
33682
|
+
}
|
|
33683
|
+
else {
|
|
33684
|
+
this.formGroupManagerService.cancelPendingAsyncValidation();
|
|
33638
33685
|
this.pageStoreService.toggleViewonly(true);
|
|
33686
|
+
}
|
|
33639
33687
|
});
|
|
33640
33688
|
}
|
|
33641
33689
|
save() {
|
|
33642
33690
|
const handleSuccess = () => {
|
|
33691
|
+
this.formGroupManagerService.cancelPendingAsyncValidation();
|
|
33643
33692
|
this.pageStoreService.toggleViewonly(true);
|
|
33644
33693
|
this.formGroupManagerService.takeFormGroupsSnapshot();
|
|
33645
33694
|
};
|
|
@@ -33668,7 +33717,7 @@ class QdPageObjectHeaderComponent {
|
|
|
33668
33717
|
setupResolverTrigger() {
|
|
33669
33718
|
this.resolverTriggerService
|
|
33670
33719
|
.shouldTriggerResolver(this.pageObjectResolver.config?.triggerOn ?? 'pathParamsChange')
|
|
33671
|
-
.pipe(takeUntil(this._destroyed$), filter(shouldTrigger => shouldTrigger), tap(() => this._isLoadingSubject.next(true)), switchMap(() => this.pageObjectResolver.resolve()), tap(objectData => this._pageObjectDataSubject.next(objectData)), tap(() => this._isLoadingSubject.next(false)))
|
|
33720
|
+
.pipe(takeUntil(this._destroyed$), filter(shouldTrigger => shouldTrigger), tap(() => this._isLoadingSubject.next(true)), switchMap(() => this.pageObjectResolver.resolve()), tap(objectData => this._pageObjectDataSubject.next(objectData)), tap(() => this._isLoadingSubject.next(false)), tap(() => this.formGroupManagerService.takeFormGroupsSnapshot()))
|
|
33672
33721
|
.subscribe();
|
|
33673
33722
|
}
|
|
33674
33723
|
initContexts() {
|
|
@@ -34707,6 +34756,7 @@ class QdPageSubmitActionService {
|
|
|
34707
34756
|
_submitHandler;
|
|
34708
34757
|
_isVisible = true;
|
|
34709
34758
|
_destroyed$ = new Subject();
|
|
34759
|
+
_cancelTrackFormValidity$ = new Subject();
|
|
34710
34760
|
constructor(footerService, formGroupManagerService) {
|
|
34711
34761
|
this.footerService = footerService;
|
|
34712
34762
|
this.formGroupManagerService = formGroupManagerService;
|
|
@@ -34734,9 +34784,10 @@ class QdPageSubmitActionService {
|
|
|
34734
34784
|
};
|
|
34735
34785
|
}
|
|
34736
34786
|
trackFormValidity() {
|
|
34787
|
+
this._cancelTrackFormValidity$.next();
|
|
34737
34788
|
this.formGroupManagerService
|
|
34738
34789
|
.$areFormGroupsValid()
|
|
34739
|
-
.pipe(takeUntil(this._destroyed$), distinctUntilChanged())
|
|
34790
|
+
.pipe(takeUntil(this._cancelTrackFormValidity$), takeUntil(this._destroyed$), distinctUntilChanged())
|
|
34740
34791
|
.subscribe(isValid => this.updateSubmitButtonState(isValid));
|
|
34741
34792
|
}
|
|
34742
34793
|
updateSubmitButtonState(isValid) {
|
|
@@ -35174,6 +35225,7 @@ class QdPageComponent {
|
|
|
35174
35225
|
projectionGuardMessage = 'QD-UI | QdPage - This content is not supported. Please use QdSectionAdapterDirective for custom content projection.';
|
|
35175
35226
|
_isInitialized = false;
|
|
35176
35227
|
_destroyed$ = new Subject();
|
|
35228
|
+
_cancelSubmitValidation$ = new Subject();
|
|
35177
35229
|
get isControlPanelVisible() {
|
|
35178
35230
|
return this.controlPanel !== undefined && this.controlPanel.config?.isHidden !== true;
|
|
35179
35231
|
}
|
|
@@ -35293,6 +35345,10 @@ class QdPageComponent {
|
|
|
35293
35345
|
]);
|
|
35294
35346
|
}
|
|
35295
35347
|
updateInspectPageOperationMode(pageTypeConfig, mode) {
|
|
35348
|
+
if (mode === 'view') {
|
|
35349
|
+
this.formGroupManagerService.cancelPendingAsyncValidation();
|
|
35350
|
+
setTimeout(() => this.formGroupManagerService.cancelPendingAsyncValidation());
|
|
35351
|
+
}
|
|
35296
35352
|
this.submitActionService.setSubmitActionForInspect(pageTypeConfig, mode === 'view');
|
|
35297
35353
|
this.footerService.updateActions([
|
|
35298
35354
|
{ actionKey: 'submit', partialAction: { isVisible: mode === 'view' && !pageTypeConfig?.submit?.isHidden } }
|
|
@@ -35319,9 +35375,10 @@ class QdPageComponent {
|
|
|
35319
35375
|
.subscribe();
|
|
35320
35376
|
}
|
|
35321
35377
|
initSubmitValidation() {
|
|
35378
|
+
this._cancelSubmitValidation$.next();
|
|
35322
35379
|
this.formGroupManagerService
|
|
35323
35380
|
.$areFormGroupsValid()
|
|
35324
|
-
.pipe(takeUntil(this._destroyed$), tap(isValid => {
|
|
35381
|
+
.pipe(takeUntil(this._cancelSubmitValidation$), takeUntil(this._destroyed$), tap(isValid => {
|
|
35325
35382
|
const submitDisabledInfoText = this.config.pageType === 'inspect' ? this.config.pageTypeConfig?.submit?.disabledInfo : undefined;
|
|
35326
35383
|
this.footerService.updateActions([
|
|
35327
35384
|
{
|
|
@@ -36824,7 +36881,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
36824
36881
|
class AddCommentDialogComponent {
|
|
36825
36882
|
dialogRef;
|
|
36826
36883
|
authenticationService;
|
|
36827
|
-
objectKeys = Object.keys;
|
|
36828
36884
|
richtextConfig;
|
|
36829
36885
|
addCommentsConfig;
|
|
36830
36886
|
authorInputConfig;
|
|
@@ -36929,11 +36985,11 @@ class AddCommentDialogComponent {
|
|
|
36929
36985
|
};
|
|
36930
36986
|
}
|
|
36931
36987
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddCommentDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: 'QdAuthenticationService', optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
36932
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AddCommentDialogComponent, 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
|
|
36988
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AddCommentDialogComponent, 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"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { 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" }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
36933
36989
|
}
|
|
36934
36990
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddCommentDialogComponent, decorators: [{
|
|
36935
36991
|
type: Component,
|
|
36936
|
-
args: [{ selector: 'qd-comment-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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
|
|
36992
|
+
args: [{ selector: 'qd-comment-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
36937
36993
|
}], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: undefined, decorators: [{
|
|
36938
36994
|
type: Optional
|
|
36939
36995
|
}, {
|
|
@@ -38264,11 +38320,11 @@ class QdQuickEditComponent {
|
|
|
38264
38320
|
.subscribe();
|
|
38265
38321
|
}
|
|
38266
38322
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdQuickEditComponent, deps: [{ token: i1$4.FormBuilder }, { token: QdPageFooterService, optional: true }, { token: QdPageStoreService, optional: true }, { token: QdSectionToolbarActionService, optional: true }, { token: QdContainerActionService, optional: true }, { token: QdEventBrokerService, optional: true }, { token: i0.ChangeDetectorRef }, { token: i1$4.ControlContainer, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
38267
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: QdQuickEditComponent, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"config?.secondaryActions?.length > 0\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"config.secondaryActions?.length > 0 || canAdd\"\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: secondaryAction.isDisabled }\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label
|
|
38323
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: QdQuickEditComponent, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"config?.secondaryActions?.length > 0\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"config.secondaryActions?.length > 0 || canAdd\"\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: secondaryAction.isDisabled }\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-form-hint .qd-form-hint{display:none}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}.additional-info{align-self:center;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:400;transform:translateY(.0625rem)}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
38268
38324
|
}
|
|
38269
38325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: QdQuickEditComponent, decorators: [{
|
|
38270
38326
|
type: Component,
|
|
38271
|
-
args: [{ selector: 'qd-quick-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"config?.secondaryActions?.length > 0\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"config.secondaryActions?.length > 0 || canAdd\"\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: secondaryAction.isDisabled }\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label
|
|
38327
|
+
args: [{ selector: 'qd-quick-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"config?.secondaryActions?.length > 0\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"config.secondaryActions?.length > 0 || canAdd\"\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: secondaryAction.isDisabled }\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-form-hint .qd-form-hint{display:none}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}.additional-info{align-self:center;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:400;transform:translateY(.0625rem)}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"] }]
|
|
38272
38328
|
}], ctorParameters: () => [{ type: i1$4.FormBuilder }, { type: QdPageFooterService, decorators: [{
|
|
38273
38329
|
type: Optional
|
|
38274
38330
|
}] }, { type: QdPageStoreService, decorators: [{
|