@quadrel-enterprise-ui/framework 19.7.2 → 19.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/quadrel-enterprise-ui-framework.mjs +28 -29
- 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/package.json +1 -1
|
@@ -8705,7 +8705,7 @@ class QdCheckboxChipsComponent {
|
|
|
8705
8705
|
useExisting: QdCheckboxChipsComponent,
|
|
8706
8706
|
multi: true
|
|
8707
8707
|
}
|
|
8708
|
-
], 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 });
|
|
8708
|
+
], 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 });
|
|
8709
8709
|
}
|
|
8710
8710
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdCheckboxChipsComponent, decorators: [{
|
|
8711
8711
|
type: Component,
|
|
@@ -8717,7 +8717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
8717
8717
|
useExisting: QdCheckboxChipsComponent,
|
|
8718
8718
|
multi: true
|
|
8719
8719
|
}
|
|
8720
|
-
], standalone: false, 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"] }]
|
|
8720
|
+
], standalone: false, 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"] }]
|
|
8721
8721
|
}], ctorParameters: () => [{ type: QdCheckboxChipsService, decorators: [{
|
|
8722
8722
|
type: Self
|
|
8723
8723
|
}] }, { type: QdFormsActionEmitterService, decorators: [{
|
|
@@ -9223,7 +9223,7 @@ class QdCheckboxesComponent {
|
|
|
9223
9223
|
},
|
|
9224
9224
|
QdCheckboxesService,
|
|
9225
9225
|
QdFormsActionEmitterService
|
|
9226
|
-
], 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 });
|
|
9226
|
+
], 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 });
|
|
9227
9227
|
}
|
|
9228
9228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdCheckboxesComponent, decorators: [{
|
|
9229
9229
|
type: Component,
|
|
@@ -9235,7 +9235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
9235
9235
|
},
|
|
9236
9236
|
QdCheckboxesService,
|
|
9237
9237
|
QdFormsActionEmitterService
|
|
9238
|
-
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId + '-filter-form'\"\n ></qd-filter-form-items>\n\n <div class=\"qd-checkboxes__checkbox-section\">\n <qd-checkbox\n *ngFor=\"let checkbox of checkboxesListForView\"\n [inputData]=\"checkbox\"\n [(value)]=\"checkboxesValues[checkbox.index]\"\n [disabled]=\"checkbox.disabled || disabled\"\n (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"] }]
|
|
9238
|
+
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId + '-filter-form'\"\n ></qd-filter-form-items>\n\n <div class=\"qd-checkboxes__checkbox-section\">\n <qd-checkbox\n *ngFor=\"let checkbox of checkboxesListForView\"\n [inputData]=\"checkbox\"\n [(value)]=\"checkboxesValues[checkbox.index]\"\n [disabled]=\"checkbox.disabled || disabled\"\n (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"] }]
|
|
9239
9239
|
}], ctorParameters: () => [{ type: QdCheckboxesService }, { type: QdFormsActionEmitterService }, { type: i1$4.ControlContainer, decorators: [{
|
|
9240
9240
|
type: Optional
|
|
9241
9241
|
}, {
|
|
@@ -10382,7 +10382,7 @@ class QdDropdownComponent {
|
|
|
10382
10382
|
provide: QD_FOCUSABLE_TOKEN,
|
|
10383
10383
|
useExisting: QdDropdownComponent
|
|
10384
10384
|
}
|
|
10385
|
-
], 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<
|
|
10385
|
+
], 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 });
|
|
10386
10386
|
}
|
|
10387
10387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdDropdownComponent, decorators: [{
|
|
10388
10388
|
type: Component,
|
|
@@ -10400,7 +10400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
10400
10400
|
provide: QD_FOCUSABLE_TOKEN,
|
|
10401
10401
|
useExisting: QdDropdownComponent
|
|
10402
10402
|
}
|
|
10403
|
-
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-dropdown' }, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n <div\n class=\"qd-dropdown__box\"\n tabindex=\"0\"\n *ngIf=\"!readonly && !viewonly && hasOptions\"\n [qdPopoverOnClick]=\"dropdownMenu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverDisabled]=\"disabled\"\n [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverEnableKeyControl]=\"true\"\n (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<
|
|
10403
|
+
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-dropdown' }, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n <div\n class=\"qd-dropdown__box\"\n tabindex=\"0\"\n *ngIf=\"!readonly && !viewonly && hasOptions\"\n [qdPopoverOnClick]=\"dropdownMenu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverDisabled]=\"disabled\"\n [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverEnableKeyControl]=\"true\"\n (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"] }]
|
|
10404
10404
|
}], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: i0.ChangeDetectorRef }, { type: QdFormsActionEmitterService }, { type: QdFormOptionsResolverRegistry }, { type: QdFormOptionsService }, { type: i0.Injector }, { type: i1$4.ControlContainer, decorators: [{
|
|
10405
10405
|
type: Optional
|
|
10406
10406
|
}, {
|
|
@@ -11377,7 +11377,7 @@ class QdInputComponent {
|
|
|
11377
11377
|
provide: QD_FOCUSABLE_TOKEN,
|
|
11378
11378
|
useExisting: QdInputComponent
|
|
11379
11379
|
}
|
|
11380
|
-
], 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" }] });
|
|
11380
|
+
], 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" }] });
|
|
11381
11381
|
}
|
|
11382
11382
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdInputComponent, decorators: [{
|
|
11383
11383
|
type: Component,
|
|
@@ -11395,7 +11395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
11395
11395
|
provide: QD_FOCUSABLE_TOKEN,
|
|
11396
11396
|
useExisting: QdInputComponent
|
|
11397
11397
|
}
|
|
11398
|
-
], standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<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"] }]
|
|
11398
|
+
], standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<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"] }]
|
|
11399
11399
|
}], ctorParameters: () => [{ type: QdFormsActionEmitterService }, { type: QdFormOptionsResolverRegistry }, { type: i1$4.ControlContainer, decorators: [{
|
|
11400
11400
|
type: Optional
|
|
11401
11401
|
}, {
|
|
@@ -11856,7 +11856,7 @@ class QdDatepickerComponent {
|
|
|
11856
11856
|
useValue: true
|
|
11857
11857
|
},
|
|
11858
11858
|
QdFormsActionEmitterService
|
|
11859
|
-
], 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<
|
|
11859
|
+
], 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 });
|
|
11860
11860
|
}
|
|
11861
11861
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdDatepickerComponent, decorators: [{
|
|
11862
11862
|
type: Component,
|
|
@@ -11871,7 +11871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
11871
11871
|
useValue: true
|
|
11872
11872
|
},
|
|
11873
11873
|
QdFormsActionEmitterService
|
|
11874
|
-
], standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<qd-input\n *ngIf=\"!readonly && !viewonly\"\n [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n [config]=\"{ 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<
|
|
11874
|
+
], standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<qd-input\n *ngIf=\"!readonly && !viewonly\"\n [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n [config]=\"{ 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"] }]
|
|
11875
11875
|
}], ctorParameters: () => [{ type: QdFormsActionEmitterService }, { type: TimePickerService }, { type: i1$3.TranslateService, decorators: [{
|
|
11876
11876
|
type: Optional
|
|
11877
11877
|
}] }, { type: i1$4.ControlContainer, decorators: [{
|
|
@@ -12294,7 +12294,7 @@ class QdFileUploadComponent {
|
|
|
12294
12294
|
},
|
|
12295
12295
|
QdFormsActionEmitterService,
|
|
12296
12296
|
QdFileUploadService
|
|
12297
|
-
], 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
|
|
12297
|
+
], 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 });
|
|
12298
12298
|
}
|
|
12299
12299
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdFileUploadComponent, decorators: [{
|
|
12300
12300
|
type: Component,
|
|
@@ -12314,7 +12314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
12314
12314
|
'[class.qd-form-uploading]': 'isUploading',
|
|
12315
12315
|
'[class.qd-form-uploaded]': 'isUploaded',
|
|
12316
12316
|
'[attr.data-test-id]': 'testId'
|
|
12317
|
-
}, standalone: false, 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
|
|
12317
|
+
}, standalone: false, 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"] }]
|
|
12318
12318
|
}], ctorParameters: () => [{ type: i1$4.ControlContainer, decorators: [{
|
|
12319
12319
|
type: Optional
|
|
12320
12320
|
}, {
|
|
@@ -13684,7 +13684,7 @@ class QdMultiInputComponent {
|
|
|
13684
13684
|
},
|
|
13685
13685
|
QdMultiInputService,
|
|
13686
13686
|
QdFormsActionEmitterService
|
|
13687
|
-
], 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 });
|
|
13687
|
+
], 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 });
|
|
13688
13688
|
}
|
|
13689
13689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdMultiInputComponent, decorators: [{
|
|
13690
13690
|
type: Component,
|
|
@@ -13696,7 +13696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
13696
13696
|
},
|
|
13697
13697
|
QdMultiInputService,
|
|
13698
13698
|
QdFormsActionEmitterService
|
|
13699
|
-
], host: { class: 'qd-multi-input' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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<
|
|
13699
|
+
], host: { class: 'qd-multi-input' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
|
|
13700
13700
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: QdMultiInputService }, { type: i0.ChangeDetectorRef }, { type: QdFormsActionEmitterService }, { type: QdFormArrayFactoryService }, { type: i1$4.ControlContainer, decorators: [{
|
|
13701
13701
|
type: Optional
|
|
13702
13702
|
}, {
|
|
@@ -14242,7 +14242,7 @@ class QdPinCodeComponent {
|
|
|
14242
14242
|
},
|
|
14243
14243
|
QdPinCodeService,
|
|
14244
14244
|
QdFormsActionEmitterService
|
|
14245
|
-
], 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' : inputType\"\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<
|
|
14245
|
+
], 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' : inputType\"\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"] }] });
|
|
14246
14246
|
}
|
|
14247
14247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdPinCodeComponent, decorators: [{
|
|
14248
14248
|
type: Component,
|
|
@@ -14254,7 +14254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
14254
14254
|
},
|
|
14255
14255
|
QdPinCodeService,
|
|
14256
14256
|
QdFormsActionEmitterService
|
|
14257
|
-
], host: { class: 'qd-pin-code' }, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<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' : inputType\"\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<
|
|
14257
|
+
], host: { class: 'qd-pin-code' }, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<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' : inputType\"\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"] }]
|
|
14258
14258
|
}], ctorParameters: () => [{ type: QdPinCodeService }, { type: i0.ChangeDetectorRef }, { type: QdFormsActionEmitterService }, { type: i1$4.ControlContainer, decorators: [{
|
|
14259
14259
|
type: Optional
|
|
14260
14260
|
}, {
|
|
@@ -14573,7 +14573,7 @@ class QdRadioButtonsComponent {
|
|
|
14573
14573
|
},
|
|
14574
14574
|
QdRadioButtonsService,
|
|
14575
14575
|
QdFormsActionEmitterService
|
|
14576
|
-
], 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<
|
|
14576
|
+
], 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 });
|
|
14577
14577
|
}
|
|
14578
14578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdRadioButtonsComponent, decorators: [{
|
|
14579
14579
|
type: Component,
|
|
@@ -14585,7 +14585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
14585
14585
|
},
|
|
14586
14586
|
QdRadioButtonsService,
|
|
14587
14587
|
QdFormsActionEmitterService
|
|
14588
|
-
], encapsulation: ViewEncapsulation.None, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<qd-filter-form-items\n *ngIf=\"filter\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId + '-filter-form'\"\n></qd-filter-form-items>\n\n<div class=\"qd-radio-buttons__button-section\" *ngIf=\"!readonly && !viewonly\">\n <label\n *ngFor=\"let option of radioButtonsListForView; trackBy: getOptionId\"\n [for]=\"option.value + id\"\n [ngClass]=\"\n 'qd-radio-buttons__label' +\n (option.disabled || disabled ? ' qd-radio-buttons__label--disabled' : '') +\n (option.value === value ? ' qd-radio-buttons__label--checked' : '')\n \"\n [attr.data-test-id]=\"testId + '-label'\"\n >\n <input\n type=\"radio\"\n qdVisuallyHidden\n [id]=\"option.value + id\"\n [ngClass]=\"'qd-radio-buttons__radio-button'\"\n [name]=\"id\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled || disabled\"\n (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<
|
|
14588
|
+
], encapsulation: ViewEncapsulation.None, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<qd-filter-form-items\n *ngIf=\"filter\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId + '-filter-form'\"\n></qd-filter-form-items>\n\n<div class=\"qd-radio-buttons__button-section\" *ngIf=\"!readonly && !viewonly\">\n <label\n *ngFor=\"let option of radioButtonsListForView; trackBy: getOptionId\"\n [for]=\"option.value + id\"\n [ngClass]=\"\n 'qd-radio-buttons__label' +\n (option.disabled || disabled ? ' qd-radio-buttons__label--disabled' : '') +\n (option.value === value ? ' qd-radio-buttons__label--checked' : '')\n \"\n [attr.data-test-id]=\"testId + '-label'\"\n >\n <input\n type=\"radio\"\n qdVisuallyHidden\n [id]=\"option.value + id\"\n [ngClass]=\"'qd-radio-buttons__radio-button'\"\n [name]=\"id\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled || disabled\"\n (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"] }]
|
|
14589
14589
|
}], ctorParameters: () => [{ type: QdRadioButtonsService }, { type: QdFormsActionEmitterService }, { type: i1$4.ControlContainer, decorators: [{
|
|
14590
14590
|
type: Optional
|
|
14591
14591
|
}, {
|
|
@@ -14948,7 +14948,7 @@ class QdRichtextComponent {
|
|
|
14948
14948
|
multi: true
|
|
14949
14949
|
},
|
|
14950
14950
|
QdFormsActionEmitterService
|
|
14951
|
-
], 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 });
|
|
14951
|
+
], 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 });
|
|
14952
14952
|
}
|
|
14953
14953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdRichtextComponent, decorators: [{
|
|
14954
14954
|
type: Component,
|
|
@@ -14959,7 +14959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
14959
14959
|
multi: true
|
|
14960
14960
|
},
|
|
14961
14961
|
QdFormsActionEmitterService
|
|
14962
|
-
], encapsulation: ViewEncapsulation.None, standalone: false, 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"] }]
|
|
14962
|
+
], encapsulation: ViewEncapsulation.None, standalone: false, 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"] }]
|
|
14963
14963
|
}], ctorParameters: () => [{ type: i1$4.ControlContainer, decorators: [{
|
|
14964
14964
|
type: Optional
|
|
14965
14965
|
}, {
|
|
@@ -15316,7 +15316,7 @@ class QdSwitchesComponent {
|
|
|
15316
15316
|
},
|
|
15317
15317
|
QdSwitchesService,
|
|
15318
15318
|
QdFormsActionEmitterService
|
|
15319
|
-
], 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 });
|
|
15319
|
+
], 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 });
|
|
15320
15320
|
}
|
|
15321
15321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdSwitchesComponent, decorators: [{
|
|
15322
15322
|
type: Component,
|
|
@@ -15328,7 +15328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
15328
15328
|
},
|
|
15329
15329
|
QdSwitchesService,
|
|
15330
15330
|
QdFormsActionEmitterService
|
|
15331
|
-
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-switches' }, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-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"] }]
|
|
15331
|
+
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-switches' }, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-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"] }]
|
|
15332
15332
|
}], ctorParameters: () => [{ type: QdSwitchesService }, { type: i0.ChangeDetectorRef }, { type: QdFormsActionEmitterService }, { type: i1$4.ControlContainer, decorators: [{
|
|
15333
15333
|
type: Optional
|
|
15334
15334
|
}, {
|
|
@@ -15594,7 +15594,7 @@ class QdTextareaComponent {
|
|
|
15594
15594
|
multi: true
|
|
15595
15595
|
},
|
|
15596
15596
|
QdFormsActionEmitterService
|
|
15597
|
-
], 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" }] });
|
|
15597
|
+
], 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" }] });
|
|
15598
15598
|
}
|
|
15599
15599
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdTextareaComponent, decorators: [{
|
|
15600
15600
|
type: Component,
|
|
@@ -15605,7 +15605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
15605
15605
|
multi: true
|
|
15606
15606
|
},
|
|
15607
15607
|
QdFormsActionEmitterService
|
|
15608
|
-
], standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<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"] }]
|
|
15608
|
+
], standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<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"] }]
|
|
15609
15609
|
}], ctorParameters: () => [{ type: QdFormsActionEmitterService }, { type: i0.ChangeDetectorRef }, { type: i1$4.ControlContainer, decorators: [{
|
|
15610
15610
|
type: Optional
|
|
15611
15611
|
}, {
|
|
@@ -31669,7 +31669,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
31669
31669
|
class AddCommentDialogComponent {
|
|
31670
31670
|
dialogRef;
|
|
31671
31671
|
authenticationService;
|
|
31672
|
-
objectKeys = Object.keys;
|
|
31673
31672
|
richtextConfig;
|
|
31674
31673
|
addCommentsConfig;
|
|
31675
31674
|
authorInputConfig;
|
|
@@ -31774,11 +31773,11 @@ class AddCommentDialogComponent {
|
|
|
31774
31773
|
};
|
|
31775
31774
|
}
|
|
31776
31775
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AddCommentDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: 'QdAuthenticationService', optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
31777
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AddCommentDialogComponent, isStandalone: false, selector: "qd-comment-dialog", ngImport: i0, template: "<qd-dialog>\n <form [formGroup]=\"form\">\n <qd-input [config]=\"authorInputConfig\"></qd-input>\n <qd-dropdown\n *ngIf=\"customInputConfig\"\n [config]=\"customInputConfig\"\n [formControlName]=\"'custom'\"\n [attr.data-test-id]=\"'comment-custom'\"\n ></qd-dropdown>\n\n <qd-richtext [config]=\"richtextConfig\" #commentText [formControlName]=\"'comment'\"> </qd-richtext>\n
|
|
31776
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AddCommentDialogComponent, isStandalone: false, selector: "qd-comment-dialog", ngImport: i0, template: "<qd-dialog>\n <form [formGroup]=\"form\">\n <qd-input [config]=\"authorInputConfig\"></qd-input>\n <qd-dropdown\n *ngIf=\"customInputConfig\"\n [config]=\"customInputConfig\"\n [formControlName]=\"'custom'\"\n [attr.data-test-id]=\"'comment-custom'\"\n ></qd-dropdown>\n\n <qd-richtext [config]=\"richtextConfig\" #commentText [formControlName]=\"'comment'\"> </qd-richtext>\n </form>\n <qd-dialog-action>\n <button qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\" [data-test-id]=\"'button-cancel'\">\n {{ \"i18n.qd.comments.add.dialog.cancel\" | translate }}\n </button>\n <button\n [disabled]=\"!commentText.value || commentText.hasError\"\n qdButton\n (click)=\"close('Yes')\"\n [data-test-id]=\"'button-submit'\"\n >\n {{ \"i18n.qd.comments.add.dialog.submit\" | translate }}\n </button>\n </qd-dialog-action>\n</qd-dialog>\n", styles: [".validation-message{margin-top:4px;color:red;font-size:.875em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { 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 });
|
|
31778
31777
|
}
|
|
31779
31778
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AddCommentDialogComponent, decorators: [{
|
|
31780
31779
|
type: Component,
|
|
31781
|
-
args: [{ selector: 'qd-comment-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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
|
|
31780
|
+
args: [{ selector: 'qd-comment-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
|
|
31782
31781
|
}], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: undefined, decorators: [{
|
|
31783
31782
|
type: Optional
|
|
31784
31783
|
}, {
|
|
@@ -33090,11 +33089,11 @@ class QdQuickEditComponent {
|
|
|
33090
33089
|
.subscribe();
|
|
33091
33090
|
}
|
|
33092
33091
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdQuickEditComponent, deps: [{ token: i1$4.FormBuilder }, { token: QdPageFooterService, optional: true }, { token: QdPageStoreService, optional: true }, { token: QdSectionToolbarActionService, optional: true }, { token: QdEventBrokerService, optional: true }, { token: i0.ChangeDetectorRef }, { token: i1$4.ControlContainer, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
33093
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: 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
|
|
33092
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: 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 });
|
|
33094
33093
|
}
|
|
33095
33094
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdQuickEditComponent, decorators: [{
|
|
33096
33095
|
type: Component,
|
|
33097
|
-
args: [{ selector: 'qd-quick-edit', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: 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
|
|
33096
|
+
args: [{ selector: 'qd-quick-edit', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: 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"] }]
|
|
33098
33097
|
}], ctorParameters: () => [{ type: i1$4.FormBuilder }, { type: QdPageFooterService, decorators: [{
|
|
33099
33098
|
type: Optional
|
|
33100
33099
|
}] }, { type: QdPageStoreService, decorators: [{
|