@alfresco/adf-core 9.2.0-31115841521 → 9.2.0-31151847596
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/app.config.schema.json +4 -0
- package/fesm2022/adf-core.mjs +64 -14
- package/fesm2022/adf-core.mjs.map +1 -1
- package/index.d.ts +14 -6
- package/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss +27 -0
- package/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss +37 -0
- package/package.json +3 -3
package/app.config.schema.json
CHANGED
|
@@ -1471,6 +1471,10 @@
|
|
|
1471
1471
|
"description": "Copy property to the clipboard on double click",
|
|
1472
1472
|
"type": "boolean"
|
|
1473
1473
|
},
|
|
1474
|
+
"display-copy-to-clipboard-icon": {
|
|
1475
|
+
"description": "Displays the copy to clipboard icon",
|
|
1476
|
+
"type": "boolean"
|
|
1477
|
+
},
|
|
1474
1478
|
"selectFilterLimit": {
|
|
1475
1479
|
"description": "Shows a filter if list options exceed a specified number. Default value 5",
|
|
1476
1480
|
"type": "number"
|
package/fesm2022/adf-core.mjs
CHANGED
|
@@ -17835,6 +17835,7 @@ class CardViewTextItemComponent extends BaseCardView {
|
|
|
17835
17835
|
this.cd = inject(ChangeDetectorRef);
|
|
17836
17836
|
this.displayEmpty = true;
|
|
17837
17837
|
this.copyToClipboardAction = true;
|
|
17838
|
+
this.displayCopyToClipboardIcon = true;
|
|
17838
17839
|
this.useChipsForMultiValueProperty = true;
|
|
17839
17840
|
this.multiValueSeparator = DEFAULT_SEPARATOR;
|
|
17840
17841
|
this.textInput = new UntypedFormControl();
|
|
@@ -17963,11 +17964,12 @@ class CardViewTextItemComponent extends BaseCardView {
|
|
|
17963
17964
|
this.textInput.setValue('');
|
|
17964
17965
|
this.update();
|
|
17965
17966
|
}
|
|
17966
|
-
copyToClipboard(valueToCopy) {
|
|
17967
|
-
if (this.copyToClipboardAction) {
|
|
17967
|
+
copyToClipboard(valueToCopy, event) {
|
|
17968
|
+
if (this.copyToClipboardAction || this.displayCopyToClipboardIcon) {
|
|
17968
17969
|
const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
|
|
17969
17970
|
this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
|
|
17970
17971
|
}
|
|
17972
|
+
event?.currentTarget?.blur();
|
|
17971
17973
|
}
|
|
17972
17974
|
undoText(event) {
|
|
17973
17975
|
if ((event.ctrlKey || event.metaKey) && event.code === 'KeyZ' && this.textInput.value) {
|
|
@@ -17996,7 +17998,7 @@ class CardViewTextItemComponent extends BaseCardView {
|
|
|
17996
17998
|
return String(Math.trunc(Number(value)));
|
|
17997
17999
|
}
|
|
17998
18000
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardViewTextItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
17999
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: CardViewTextItemComponent, isStandalone: true, selector: "adf-card-view-textitem", inputs: { displayEmpty: "displayEmpty", copyToClipboardAction: "copyToClipboardAction", useChipsForMultiValueProperty: "useChipsForMultiValueProperty", multiValueSeparator: "multiValueSeparator" }, host: { classAttribute: "adf-card-view-textitem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (showProperty || isEditable) {\n <div class=\"adf-card-textitem-field-container\" [ngSwitch]=\"templateType\">\n <div *ngSwitchDefault>\n <mat-form-field\n class=\"adf-property-field adf-card-textitem-field\"\n [ngClass]=\"{\n 'adf-property-read-only': isReadonlyProperty\n }\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n [attr.data-automation-id]=\"'card-textitem-field-' + property.key\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n <mat-label\n [attr.data-automation-id]=\"'card-textitem-label-' + property.key\"\n class=\"adf-property-label\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable\n }\"\n >\n {{ property.label | translate }}\n </mat-label>\n\n <input\n matInput\n *ngIf=\"!property.multiline\"\n class=\"adf-property-value\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable,\n 'adf-property-value-has-error': isEditable && hasErrors,\n 'adf-property-value-not-editable': !editable\n }\"\n title=\"{{ property.label | translate }}\"\n [placeholder]=\"property.default\"\n [attr.aria-label]=\"property.label | translate\"\n [formControl]=\"textInput\"\n [attr.data-automation-id]=\"'card-textitem-value-' + property.key\"\n (keydown)=\"undoText($event)\"\n (blur)=\"update()\"\n [aria-describedby]=\"'adf-card-textitem-error-' + property.key\"\n />\n <textarea\n matInput\n *ngIf=\"property.multiline\"\n title=\"{{ property.label | translate }}\"\n [cdkTextareaAutosize]=\"true\"\n [cdkAutosizeMinRows]=\"1\"\n [cdkAutosizeMaxRows]=\"5\"\n class=\"adf-property-value\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable,\n }\"\n [placeholder]=\"property.default\"\n [attr.aria-label]=\"property.label | translate\"\n [formControl]=\"textInput\"\n [attr.data-automation-id]=\"'card-textitem-value-' + property.key\"\n >\n </textarea>\n </mat-form-field>\n </div>\n\n <div\n *ngSwitchCase=\"'chipsTemplate'\"\n class=\"adf-property-field adf-textitem-chip-list-container\"\n [ngClass]=\"{ 'adf-property-read-only': isReadonlyProperty }\"\n >\n <mat-form-field\n class=\"adf-property-field adf-textitem-chip-list-input\"\n [ngClass]=\"{ 'adf-property-read-only': isReadonlyProperty }\"\n >\n <mat-label\n [attr.data-automation-id]=\"'card-textitem-label-' + property.key\"\n class=\"adf-property-label\"\n [ngClass]=\"{ 'adf-property-value-editable': editable }\"\n >\n {{ property.label | translate }}\n </mat-label>\n <mat-chip-grid #chipElement class=\"adf-textitem-chip-list\" [disabled]=\"isReadonlyProperty || !editable\">\n <mat-chip-row *ngFor=\"let propertyValue of editedValue; let idx = index\" [removable]=\"isEditable\" (removed)=\"removeValueFromList(idx)\">\n {{ propertyValue }}\n <mat-icon *ngIf=\"isEditable\" matChipRemove adf-icon=\"cancel\" />\n </mat-chip-row>\n </mat-chip-grid>\n <input\n matInput\n class=\"adf-property-value\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable\n }\"\n title=\"{{ property.label | translate }}\"\n [placeholder]=\"editedValue ? '' : (property.default | translate)\"\n [attr.aria-label]=\"property.label | translate\"\n [matChipInputFor]=\"chipElement\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addValueToList($event)\"\n [disabled]=\"isReadonlyProperty || !editable\"\n [attr.data-automation-id]=\"'card-textitem-editchipinput-' + property.key\"\n />\n </mat-form-field>\n </div>\n <button\n type=\"button\"\n *ngSwitchCase=\"'clickableTemplate'\"\n class=\"adf-textitem-clickable\"\n [ngClass]=\"{ 'adf-property-read-only': isReadonlyProperty }\"\n [attr.data-automation-id]=\"'card-textitem-toggle-' + property.key\"\n (click)=\"clicked($event)\"\n >\n <mat-form-field class=\"adf-property-field adf-card-textitem-field\">\n <mat-label\n [attr.data-automation-id]=\"'card-textitem-label-' + property.key\"\n class=\"adf-property-label\"\n [ngClass]=\"{ 'adf-property-value-editable': editable }\"\n >\n {{ property.label | translate }}\n </mat-label>\n <input\n matInput\n [type]=\"property.inputType\"\n class=\"adf-property-value\"\n title=\"{{ property.label | translate }}\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-textitem-clickable-value': isClickable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable,\n 'adf-property-value-has-error': isEditable && hasErrors,\n 'adf-property-value-has-icon-suffix': showClickableIcon\n }\"\n [placeholder]=\"property.default\"\n aria-hidden=\"true\"\n [attr.aria-label]=\"property.label | translate\"\n [(ngModel)]=\"editedValue\"\n (blur)=\"update()\"\n (keydown.enter)=\"update()\"\n [disabled]=\"isReadonlyProperty || !editable\"\n tabindex=\"-1\"\n [attr.data-automation-id]=\"'card-textitem-value-' + property.key\"\n [aria-describedby]=\"'adf-card-textitem-error-' + property.key\"\n />\n <button\n mat-icon-button\n matSuffix\n *ngIf=\"showClickableIcon\"\n class=\"adf-textitem-action\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.EDIT' | translate\"\n [attr.data-automation-id]=\"'card-textitem-clickable-icon-' + property.key\"\n >\n <mat-icon class=\"adf-textitem-icon\" [adf-icon]=\"property?.icon\" />\n </button>\n </mat-form-field>\n </button>\n\n <mat-error\n *ngIf=\"isEditable && hasErrors\"\n class=\"adf-textitem-error\"\n [attr.data-automation-id]=\"'card-textitem-error-' + property.key\"\n [id]=\"'adf-card-textitem-error-' + property.key\"\n role=\"alert\"\n aria-live=\"polite\">\n <ul>\n <li *ngFor=\"let error of errors\">{{ error.message | translate : error }}</li>\n </ul>\n </mat-error>\n</div>\n}\n", styles: [".adf-card-view-textitem .adf-textitem-error:before{display:none}.adf-card-view-textitem .adf-textitem-error ul{margin:0;padding:0;list-style-type:none}.adf-card-view-textitem .adf-textitem-error ul li{margin:0;padding:0}.adf-card-view-textitem .adf-textitem-action{width:30px;height:30px;padding:0;line-height:20px}.adf-card-view-textitem .adf-textitem-action .mat-mdc-button-touch-target{width:30px;height:30px}.adf-card-view-textitem .mat-mdc-form-field-icon-suffix{position:absolute;right:1px;bottom:7px}.adf-card-view-textitem .adf-textitem-chip-list-container .adf-property-value{margin-left:0}.adf-card-view-textitem .adf-textitem-clickable{background:none;border:none;margin:0;cursor:pointer;width:100%;padding:3px 0 0}.adf-card-view-textitem input.adf-property-value:disabled,.adf-card-view-textitem textarea.adf-property-value:disabled{color:var(--mat-sys-on-surface);-webkit-user-select:none;user-select:none;pointer-events:none}.adf-card-view-textitem .adf-property-value-has-icon-suffix{padding-right:34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adf-card-textitem-field-container{padding-top:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: IconDirective, selector: "mat-icon[adf-icon]", inputs: ["adf-icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
18001
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: CardViewTextItemComponent, isStandalone: true, selector: "adf-card-view-textitem", inputs: { displayEmpty: "displayEmpty", copyToClipboardAction: "copyToClipboardAction", displayCopyToClipboardIcon: "displayCopyToClipboardIcon", useChipsForMultiValueProperty: "useChipsForMultiValueProperty", multiValueSeparator: "multiValueSeparator" }, host: { classAttribute: "adf-card-view-textitem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (showProperty || isEditable) {\n <div class=\"adf-card-textitem-field-container\" [ngSwitch]=\"templateType\">\n <div *ngSwitchDefault>\n <mat-form-field\n class=\"adf-property-field adf-card-textitem-field\"\n [ngClass]=\"{\n 'adf-property-read-only': isReadonlyProperty\n }\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n [attr.data-automation-id]=\"'card-textitem-field-' + property.key\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n <mat-label\n [attr.data-automation-id]=\"'card-textitem-label-' + property.key\"\n class=\"adf-property-label\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable\n }\"\n >\n {{ property.label | translate }}\n </mat-label>\n\n <input\n matInput\n *ngIf=\"!property.multiline\"\n class=\"adf-property-value\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable,\n 'adf-property-value-has-error': isEditable && hasErrors,\n 'adf-property-value-not-editable': !editable,\n 'adf-property-value-has-icon-suffix': displayCopyToClipboardIcon && !isEditable\n }\"\n title=\"{{ property.label | translate }}\"\n [placeholder]=\"property.default\"\n [attr.aria-label]=\"property.label | translate\"\n [formControl]=\"textInput\"\n [attr.data-automation-id]=\"'card-textitem-value-' + property.key\"\n (keydown)=\"undoText($event)\"\n (blur)=\"update()\"\n [aria-describedby]=\"'adf-card-textitem-error-' + property.key\"\n />\n <textarea\n matInput\n *ngIf=\"property.multiline\"\n title=\"{{ property.label | translate }}\"\n [cdkTextareaAutosize]=\"true\"\n [cdkAutosizeMinRows]=\"1\"\n [cdkAutosizeMaxRows]=\"5\"\n class=\"adf-property-value\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable,\n }\"\n [placeholder]=\"property.default\"\n [attr.aria-label]=\"property.label | translate\"\n [formControl]=\"textInput\"\n [attr.data-automation-id]=\"'card-textitem-value-' + property.key\"\n >\n </textarea>\n @if (displayCopyToClipboardIcon && !isEditable) {\n <button\n matSuffix\n type=\"button\"\n class=\"adf-textitem-action adf-copy-to-clipboard-button\"\n (click)=\"copyToClipboard(property.displayValue, $event)\"\n [attr.aria-label]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n [attr.data-automation-id]=\"'card-textitem-copy-to-clipboard-' + property.key\"\n >\n <mat-icon\n adf-icon=\"content_copy\"\n class=\"adf-copy-to-clipboard-icon\"\n aria-hidden=\"true\"\n />\n </button>\n }\n </mat-form-field>\n </div>\n\n <div\n *ngSwitchCase=\"'chipsTemplate'\"\n class=\"adf-property-field adf-textitem-chip-list-container\"\n [ngClass]=\"{ 'adf-property-read-only': isReadonlyProperty }\"\n >\n <mat-form-field\n class=\"adf-property-field adf-textitem-chip-list-input\"\n [ngClass]=\"{ 'adf-property-read-only': isReadonlyProperty }\"\n >\n <mat-label\n [attr.data-automation-id]=\"'card-textitem-label-' + property.key\"\n class=\"adf-property-label\"\n [ngClass]=\"{ 'adf-property-value-editable': editable }\"\n >\n {{ property.label | translate }}\n </mat-label>\n <mat-chip-grid #chipElement class=\"adf-textitem-chip-list\" [disabled]=\"isReadonlyProperty || !editable\">\n <mat-chip-row *ngFor=\"let propertyValue of editedValue; let idx = index\" [removable]=\"isEditable\" (removed)=\"removeValueFromList(idx)\">\n {{ propertyValue }}\n <mat-icon *ngIf=\"isEditable\" matChipRemove adf-icon=\"cancel\" />\n </mat-chip-row>\n </mat-chip-grid>\n <input\n matInput\n class=\"adf-property-value\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable\n }\"\n title=\"{{ property.label | translate }}\"\n [placeholder]=\"editedValue ? '' : (property.default | translate)\"\n [attr.aria-label]=\"property.label | translate\"\n [matChipInputFor]=\"chipElement\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addValueToList($event)\"\n [disabled]=\"isReadonlyProperty || !editable\"\n [attr.data-automation-id]=\"'card-textitem-editchipinput-' + property.key\"\n />\n </mat-form-field>\n </div>\n <button\n type=\"button\"\n *ngSwitchCase=\"'clickableTemplate'\"\n class=\"adf-textitem-clickable\"\n [ngClass]=\"{ 'adf-property-read-only': isReadonlyProperty }\"\n [attr.data-automation-id]=\"'card-textitem-toggle-' + property.key\"\n (click)=\"clicked($event)\"\n >\n <mat-form-field class=\"adf-property-field adf-card-textitem-field\">\n <mat-label\n [attr.data-automation-id]=\"'card-textitem-label-' + property.key\"\n class=\"adf-property-label\"\n [ngClass]=\"{ 'adf-property-value-editable': editable }\"\n >\n {{ property.label | translate }}\n </mat-label>\n <input\n matInput\n [type]=\"property.inputType\"\n class=\"adf-property-value\"\n title=\"{{ property.label | translate }}\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-textitem-clickable-value': isClickable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable,\n 'adf-property-value-has-error': isEditable && hasErrors,\n 'adf-property-value-has-icon-suffix': showClickableIcon\n }\"\n [placeholder]=\"property.default\"\n aria-hidden=\"true\"\n [attr.aria-label]=\"property.label | translate\"\n [(ngModel)]=\"editedValue\"\n (blur)=\"update()\"\n (keydown.enter)=\"update()\"\n [disabled]=\"isReadonlyProperty || !editable\"\n tabindex=\"-1\"\n [attr.data-automation-id]=\"'card-textitem-value-' + property.key\"\n [aria-describedby]=\"'adf-card-textitem-error-' + property.key\"\n />\n <button\n mat-icon-button\n matSuffix\n *ngIf=\"showClickableIcon\"\n class=\"adf-textitem-action\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.EDIT' | translate\"\n [attr.data-automation-id]=\"'card-textitem-clickable-icon-' + property.key\"\n >\n <mat-icon class=\"adf-textitem-icon\" [adf-icon]=\"property?.icon\" />\n </button>\n </mat-form-field>\n </button>\n\n <mat-error\n *ngIf=\"isEditable && hasErrors\"\n class=\"adf-textitem-error\"\n [attr.data-automation-id]=\"'card-textitem-error-' + property.key\"\n [id]=\"'adf-card-textitem-error-' + property.key\"\n role=\"alert\"\n aria-live=\"polite\">\n <ul>\n <li *ngFor=\"let error of errors\">{{ error.message | translate : error }}</li>\n </ul>\n </mat-error>\n</div>\n}\n", styles: [".adf-card-view-textitem .adf-textitem-error:before{display:none}.adf-card-view-textitem .adf-textitem-error ul{margin:0;padding:0;list-style-type:none}.adf-card-view-textitem .adf-textitem-error ul li{margin:0;padding:0}.adf-card-view-textitem .adf-textitem-action{width:30px;height:30px;padding:0;line-height:20px}.adf-card-view-textitem .adf-textitem-action .mat-mdc-button-touch-target{width:30px;height:30px}.adf-card-view-textitem .mat-mdc-form-field-icon-suffix{position:absolute;right:1px;bottom:7px}.adf-card-view-textitem .adf-textitem-chip-list-container .adf-property-value{margin-left:0}.adf-card-view-textitem .adf-textitem-clickable{background:none;border:none;margin:0;cursor:pointer;width:100%;padding:3px 0 0}.adf-card-view-textitem input.adf-property-value:disabled,.adf-card-view-textitem textarea.adf-property-value:disabled{color:var(--mat-sys-on-surface);-webkit-user-select:none;user-select:none;pointer-events:none}.adf-card-view-textitem .adf-property-value-has-icon-suffix{box-sizing:border-box;padding-right:34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adf-card-textitem-field-container{padding-top:5px}.adf-card-textitem-field-container .adf-card-textitem-field .adf-copy-to-clipboard-button{border:none;background:none;cursor:pointer;opacity:0;display:flex;align-items:center;justify-content:center}.adf-card-textitem-field-container .adf-card-textitem-field .adf-copy-to-clipboard-button .adf-copy-to-clipboard-icon{width:30px;height:20px;position:relative;right:5px;bottom:6px;font-size:20px;line-height:20px;display:flex;align-items:center;justify-content:center}.adf-card-textitem-field-container:hover .adf-card-textitem-field .adf-copy-to-clipboard-button,.adf-card-textitem-field-container:focus-within .adf-card-textitem-field .adf-copy-to-clipboard-button{opacity:1}@media(hover:none){.adf-card-textitem-field-container .adf-card-textitem-field .adf-copy-to-clipboard-button{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: IconDirective, selector: "mat-icon[adf-icon]", inputs: ["adf-icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
18000
18002
|
}
|
|
18001
18003
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardViewTextItemComponent, decorators: [{
|
|
18002
18004
|
type: Component,
|
|
@@ -18011,11 +18013,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
|
|
|
18011
18013
|
FormsModule,
|
|
18012
18014
|
MatButtonModule,
|
|
18013
18015
|
MatSnackBarModule
|
|
18014
|
-
], encapsulation: ViewEncapsulation.None, host: { class: 'adf-card-view-textitem' }, template: "@if (showProperty || isEditable) {\n <div class=\"adf-card-textitem-field-container\" [ngSwitch]=\"templateType\">\n <div *ngSwitchDefault>\n <mat-form-field\n class=\"adf-property-field adf-card-textitem-field\"\n [ngClass]=\"{\n 'adf-property-read-only': isReadonlyProperty\n }\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n [attr.data-automation-id]=\"'card-textitem-field-' + property.key\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n <mat-label\n [attr.data-automation-id]=\"'card-textitem-label-' + property.key\"\n class=\"adf-property-label\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable\n }\"\n >\n {{ property.label | translate }}\n </mat-label>\n\n <input\n matInput\n *ngIf=\"!property.multiline\"\n class=\"adf-property-value\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable,\n 'adf-property-value-has-error': isEditable && hasErrors,\n 'adf-property-value-not-editable': !editable\n }\"\n title=\"{{ property.label | translate }}\"\n [placeholder]=\"property.default\"\n [attr.aria-label]=\"property.label | translate\"\n [formControl]=\"textInput\"\n [attr.data-automation-id]=\"'card-textitem-value-' + property.key\"\n (keydown)=\"undoText($event)\"\n (blur)=\"update()\"\n [aria-describedby]=\"'adf-card-textitem-error-' + property.key\"\n />\n <textarea\n matInput\n *ngIf=\"property.multiline\"\n title=\"{{ property.label | translate }}\"\n [cdkTextareaAutosize]=\"true\"\n [cdkAutosizeMinRows]=\"1\"\n [cdkAutosizeMaxRows]=\"5\"\n class=\"adf-property-value\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable,\n }\"\n [placeholder]=\"property.default\"\n [attr.aria-label]=\"property.label | translate\"\n [formControl]=\"textInput\"\n [attr.data-automation-id]=\"'card-textitem-value-' + property.key\"\n >\n </textarea>\n </mat-form-field>\n </div>\n\n <div\n *ngSwitchCase=\"'chipsTemplate'\"\n class=\"adf-property-field adf-textitem-chip-list-container\"\n [ngClass]=\"{ 'adf-property-read-only': isReadonlyProperty }\"\n >\n <mat-form-field\n class=\"adf-property-field adf-textitem-chip-list-input\"\n [ngClass]=\"{ 'adf-property-read-only': isReadonlyProperty }\"\n >\n <mat-label\n [attr.data-automation-id]=\"'card-textitem-label-' + property.key\"\n class=\"adf-property-label\"\n [ngClass]=\"{ 'adf-property-value-editable': editable }\"\n >\n {{ property.label | translate }}\n </mat-label>\n <mat-chip-grid #chipElement class=\"adf-textitem-chip-list\" [disabled]=\"isReadonlyProperty || !editable\">\n <mat-chip-row *ngFor=\"let propertyValue of editedValue; let idx = index\" [removable]=\"isEditable\" (removed)=\"removeValueFromList(idx)\">\n {{ propertyValue }}\n <mat-icon *ngIf=\"isEditable\" matChipRemove adf-icon=\"cancel\" />\n </mat-chip-row>\n </mat-chip-grid>\n <input\n matInput\n class=\"adf-property-value\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable\n }\"\n title=\"{{ property.label | translate }}\"\n [placeholder]=\"editedValue ? '' : (property.default | translate)\"\n [attr.aria-label]=\"property.label | translate\"\n [matChipInputFor]=\"chipElement\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addValueToList($event)\"\n [disabled]=\"isReadonlyProperty || !editable\"\n [attr.data-automation-id]=\"'card-textitem-editchipinput-' + property.key\"\n />\n </mat-form-field>\n </div>\n <button\n type=\"button\"\n *ngSwitchCase=\"'clickableTemplate'\"\n class=\"adf-textitem-clickable\"\n [ngClass]=\"{ 'adf-property-read-only': isReadonlyProperty }\"\n [attr.data-automation-id]=\"'card-textitem-toggle-' + property.key\"\n (click)=\"clicked($event)\"\n >\n <mat-form-field class=\"adf-property-field adf-card-textitem-field\">\n <mat-label\n [attr.data-automation-id]=\"'card-textitem-label-' + property.key\"\n class=\"adf-property-label\"\n [ngClass]=\"{ 'adf-property-value-editable': editable }\"\n >\n {{ property.label | translate }}\n </mat-label>\n <input\n matInput\n [type]=\"property.inputType\"\n class=\"adf-property-value\"\n title=\"{{ property.label | translate }}\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-textitem-clickable-value': isClickable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable,\n 'adf-property-value-has-error': isEditable && hasErrors,\n 'adf-property-value-has-icon-suffix': showClickableIcon\n }\"\n [placeholder]=\"property.default\"\n aria-hidden=\"true\"\n [attr.aria-label]=\"property.label | translate\"\n [(ngModel)]=\"editedValue\"\n (blur)=\"update()\"\n (keydown.enter)=\"update()\"\n [disabled]=\"isReadonlyProperty || !editable\"\n tabindex=\"-1\"\n [attr.data-automation-id]=\"'card-textitem-value-' + property.key\"\n [aria-describedby]=\"'adf-card-textitem-error-' + property.key\"\n />\n <button\n mat-icon-button\n matSuffix\n *ngIf=\"showClickableIcon\"\n class=\"adf-textitem-action\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.EDIT' | translate\"\n [attr.data-automation-id]=\"'card-textitem-clickable-icon-' + property.key\"\n >\n <mat-icon class=\"adf-textitem-icon\" [adf-icon]=\"property?.icon\" />\n </button>\n </mat-form-field>\n </button>\n\n <mat-error\n *ngIf=\"isEditable && hasErrors\"\n class=\"adf-textitem-error\"\n [attr.data-automation-id]=\"'card-textitem-error-' + property.key\"\n [id]=\"'adf-card-textitem-error-' + property.key\"\n role=\"alert\"\n aria-live=\"polite\">\n <ul>\n <li *ngFor=\"let error of errors\">{{ error.message | translate : error }}</li>\n </ul>\n </mat-error>\n</div>\n}\n", styles: [".adf-card-view-textitem .adf-textitem-error:before{display:none}.adf-card-view-textitem .adf-textitem-error ul{margin:0;padding:0;list-style-type:none}.adf-card-view-textitem .adf-textitem-error ul li{margin:0;padding:0}.adf-card-view-textitem .adf-textitem-action{width:30px;height:30px;padding:0;line-height:20px}.adf-card-view-textitem .adf-textitem-action .mat-mdc-button-touch-target{width:30px;height:30px}.adf-card-view-textitem .mat-mdc-form-field-icon-suffix{position:absolute;right:1px;bottom:7px}.adf-card-view-textitem .adf-textitem-chip-list-container .adf-property-value{margin-left:0}.adf-card-view-textitem .adf-textitem-clickable{background:none;border:none;margin:0;cursor:pointer;width:100%;padding:3px 0 0}.adf-card-view-textitem input.adf-property-value:disabled,.adf-card-view-textitem textarea.adf-property-value:disabled{color:var(--mat-sys-on-surface);-webkit-user-select:none;user-select:none;pointer-events:none}.adf-card-view-textitem .adf-property-value-has-icon-suffix{padding-right:34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adf-card-textitem-field-container{padding-top:5px}\n"] }]
|
|
18016
|
+
], encapsulation: ViewEncapsulation.None, host: { class: 'adf-card-view-textitem' }, template: "@if (showProperty || isEditable) {\n <div class=\"adf-card-textitem-field-container\" [ngSwitch]=\"templateType\">\n <div *ngSwitchDefault>\n <mat-form-field\n class=\"adf-property-field adf-card-textitem-field\"\n [ngClass]=\"{\n 'adf-property-read-only': isReadonlyProperty\n }\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n [attr.data-automation-id]=\"'card-textitem-field-' + property.key\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n <mat-label\n [attr.data-automation-id]=\"'card-textitem-label-' + property.key\"\n class=\"adf-property-label\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable\n }\"\n >\n {{ property.label | translate }}\n </mat-label>\n\n <input\n matInput\n *ngIf=\"!property.multiline\"\n class=\"adf-property-value\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable,\n 'adf-property-value-has-error': isEditable && hasErrors,\n 'adf-property-value-not-editable': !editable,\n 'adf-property-value-has-icon-suffix': displayCopyToClipboardIcon && !isEditable\n }\"\n title=\"{{ property.label | translate }}\"\n [placeholder]=\"property.default\"\n [attr.aria-label]=\"property.label | translate\"\n [formControl]=\"textInput\"\n [attr.data-automation-id]=\"'card-textitem-value-' + property.key\"\n (keydown)=\"undoText($event)\"\n (blur)=\"update()\"\n [aria-describedby]=\"'adf-card-textitem-error-' + property.key\"\n />\n <textarea\n matInput\n *ngIf=\"property.multiline\"\n title=\"{{ property.label | translate }}\"\n [cdkTextareaAutosize]=\"true\"\n [cdkAutosizeMinRows]=\"1\"\n [cdkAutosizeMaxRows]=\"5\"\n class=\"adf-property-value\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable,\n }\"\n [placeholder]=\"property.default\"\n [attr.aria-label]=\"property.label | translate\"\n [formControl]=\"textInput\"\n [attr.data-automation-id]=\"'card-textitem-value-' + property.key\"\n >\n </textarea>\n @if (displayCopyToClipboardIcon && !isEditable) {\n <button\n matSuffix\n type=\"button\"\n class=\"adf-textitem-action adf-copy-to-clipboard-button\"\n (click)=\"copyToClipboard(property.displayValue, $event)\"\n [attr.aria-label]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n [attr.data-automation-id]=\"'card-textitem-copy-to-clipboard-' + property.key\"\n >\n <mat-icon\n adf-icon=\"content_copy\"\n class=\"adf-copy-to-clipboard-icon\"\n aria-hidden=\"true\"\n />\n </button>\n }\n </mat-form-field>\n </div>\n\n <div\n *ngSwitchCase=\"'chipsTemplate'\"\n class=\"adf-property-field adf-textitem-chip-list-container\"\n [ngClass]=\"{ 'adf-property-read-only': isReadonlyProperty }\"\n >\n <mat-form-field\n class=\"adf-property-field adf-textitem-chip-list-input\"\n [ngClass]=\"{ 'adf-property-read-only': isReadonlyProperty }\"\n >\n <mat-label\n [attr.data-automation-id]=\"'card-textitem-label-' + property.key\"\n class=\"adf-property-label\"\n [ngClass]=\"{ 'adf-property-value-editable': editable }\"\n >\n {{ property.label | translate }}\n </mat-label>\n <mat-chip-grid #chipElement class=\"adf-textitem-chip-list\" [disabled]=\"isReadonlyProperty || !editable\">\n <mat-chip-row *ngFor=\"let propertyValue of editedValue; let idx = index\" [removable]=\"isEditable\" (removed)=\"removeValueFromList(idx)\">\n {{ propertyValue }}\n <mat-icon *ngIf=\"isEditable\" matChipRemove adf-icon=\"cancel\" />\n </mat-chip-row>\n </mat-chip-grid>\n <input\n matInput\n class=\"adf-property-value\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable\n }\"\n title=\"{{ property.label | translate }}\"\n [placeholder]=\"editedValue ? '' : (property.default | translate)\"\n [attr.aria-label]=\"property.label | translate\"\n [matChipInputFor]=\"chipElement\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addValueToList($event)\"\n [disabled]=\"isReadonlyProperty || !editable\"\n [attr.data-automation-id]=\"'card-textitem-editchipinput-' + property.key\"\n />\n </mat-form-field>\n </div>\n <button\n type=\"button\"\n *ngSwitchCase=\"'clickableTemplate'\"\n class=\"adf-textitem-clickable\"\n [ngClass]=\"{ 'adf-property-read-only': isReadonlyProperty }\"\n [attr.data-automation-id]=\"'card-textitem-toggle-' + property.key\"\n (click)=\"clicked($event)\"\n >\n <mat-form-field class=\"adf-property-field adf-card-textitem-field\">\n <mat-label\n [attr.data-automation-id]=\"'card-textitem-label-' + property.key\"\n class=\"adf-property-label\"\n [ngClass]=\"{ 'adf-property-value-editable': editable }\"\n >\n {{ property.label | translate }}\n </mat-label>\n <input\n matInput\n [type]=\"property.inputType\"\n class=\"adf-property-value\"\n title=\"{{ property.label | translate }}\"\n [ngClass]=\"{\n 'adf-property-value-editable': editable,\n 'adf-textitem-clickable-value': isClickable,\n 'adf-property-readonly-value': isReadonlyProperty || !editable,\n 'adf-property-value-has-error': isEditable && hasErrors,\n 'adf-property-value-has-icon-suffix': showClickableIcon\n }\"\n [placeholder]=\"property.default\"\n aria-hidden=\"true\"\n [attr.aria-label]=\"property.label | translate\"\n [(ngModel)]=\"editedValue\"\n (blur)=\"update()\"\n (keydown.enter)=\"update()\"\n [disabled]=\"isReadonlyProperty || !editable\"\n tabindex=\"-1\"\n [attr.data-automation-id]=\"'card-textitem-value-' + property.key\"\n [aria-describedby]=\"'adf-card-textitem-error-' + property.key\"\n />\n <button\n mat-icon-button\n matSuffix\n *ngIf=\"showClickableIcon\"\n class=\"adf-textitem-action\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.EDIT' | translate\"\n [attr.data-automation-id]=\"'card-textitem-clickable-icon-' + property.key\"\n >\n <mat-icon class=\"adf-textitem-icon\" [adf-icon]=\"property?.icon\" />\n </button>\n </mat-form-field>\n </button>\n\n <mat-error\n *ngIf=\"isEditable && hasErrors\"\n class=\"adf-textitem-error\"\n [attr.data-automation-id]=\"'card-textitem-error-' + property.key\"\n [id]=\"'adf-card-textitem-error-' + property.key\"\n role=\"alert\"\n aria-live=\"polite\">\n <ul>\n <li *ngFor=\"let error of errors\">{{ error.message | translate : error }}</li>\n </ul>\n </mat-error>\n</div>\n}\n", styles: [".adf-card-view-textitem .adf-textitem-error:before{display:none}.adf-card-view-textitem .adf-textitem-error ul{margin:0;padding:0;list-style-type:none}.adf-card-view-textitem .adf-textitem-error ul li{margin:0;padding:0}.adf-card-view-textitem .adf-textitem-action{width:30px;height:30px;padding:0;line-height:20px}.adf-card-view-textitem .adf-textitem-action .mat-mdc-button-touch-target{width:30px;height:30px}.adf-card-view-textitem .mat-mdc-form-field-icon-suffix{position:absolute;right:1px;bottom:7px}.adf-card-view-textitem .adf-textitem-chip-list-container .adf-property-value{margin-left:0}.adf-card-view-textitem .adf-textitem-clickable{background:none;border:none;margin:0;cursor:pointer;width:100%;padding:3px 0 0}.adf-card-view-textitem input.adf-property-value:disabled,.adf-card-view-textitem textarea.adf-property-value:disabled{color:var(--mat-sys-on-surface);-webkit-user-select:none;user-select:none;pointer-events:none}.adf-card-view-textitem .adf-property-value-has-icon-suffix{box-sizing:border-box;padding-right:34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adf-card-textitem-field-container{padding-top:5px}.adf-card-textitem-field-container .adf-card-textitem-field .adf-copy-to-clipboard-button{border:none;background:none;cursor:pointer;opacity:0;display:flex;align-items:center;justify-content:center}.adf-card-textitem-field-container .adf-card-textitem-field .adf-copy-to-clipboard-button .adf-copy-to-clipboard-icon{width:30px;height:20px;position:relative;right:5px;bottom:6px;font-size:20px;line-height:20px;display:flex;align-items:center;justify-content:center}.adf-card-textitem-field-container:hover .adf-card-textitem-field .adf-copy-to-clipboard-button,.adf-card-textitem-field-container:focus-within .adf-card-textitem-field .adf-copy-to-clipboard-button{opacity:1}@media(hover:none){.adf-card-textitem-field-container .adf-card-textitem-field .adf-copy-to-clipboard-button{opacity:1}}\n"] }]
|
|
18015
18017
|
}], propDecorators: { displayEmpty: [{
|
|
18016
18018
|
type: Input
|
|
18017
18019
|
}], copyToClipboardAction: [{
|
|
18018
18020
|
type: Input
|
|
18021
|
+
}], displayCopyToClipboardIcon: [{
|
|
18022
|
+
type: Input
|
|
18019
18023
|
}], useChipsForMultiValueProperty: [{
|
|
18020
18024
|
type: Input
|
|
18021
18025
|
}], multiValueSeparator: [{
|
|
@@ -18050,6 +18054,8 @@ class CardViewDateItemComponent extends BaseCardView {
|
|
|
18050
18054
|
this.destroyRef = inject(DestroyRef);
|
|
18051
18055
|
this.displayEmpty = true;
|
|
18052
18056
|
this.displayClearAction = true;
|
|
18057
|
+
this.copyToClipboardAction = true;
|
|
18058
|
+
this.displayCopyToClipboardIcon = true;
|
|
18053
18059
|
this.cardViewDateTimeControl = new FormControl(null);
|
|
18054
18060
|
this.property$ = new BehaviorSubject(undefined);
|
|
18055
18061
|
// Use effect to react to locale signal changes (must be in injection context)
|
|
@@ -18142,11 +18148,12 @@ class CardViewDateItemComponent extends BaseCardView {
|
|
|
18142
18148
|
this.property.value = null;
|
|
18143
18149
|
this.property.default = null;
|
|
18144
18150
|
}
|
|
18145
|
-
copyToClipboard(valueToCopy) {
|
|
18146
|
-
if (typeof valueToCopy === 'string') {
|
|
18151
|
+
copyToClipboard(valueToCopy, event) {
|
|
18152
|
+
if (typeof valueToCopy === 'string' && (this.copyToClipboardAction || this.displayCopyToClipboardIcon)) {
|
|
18147
18153
|
const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
|
|
18148
18154
|
this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
|
|
18149
18155
|
}
|
|
18156
|
+
event?.currentTarget?.blur();
|
|
18150
18157
|
}
|
|
18151
18158
|
addDateToList(event) {
|
|
18152
18159
|
if (event.value) {
|
|
@@ -18208,12 +18215,12 @@ class CardViewDateItemComponent extends BaseCardView {
|
|
|
18208
18215
|
}
|
|
18209
18216
|
}
|
|
18210
18217
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardViewDateItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18211
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: CardViewDateItemComponent, isStandalone: true, selector: "adf-card-view-dateitem", inputs: { displayEmpty: "displayEmpty", displayClearAction: "displayClearAction" }, host: { classAttribute: "adf-card-view-dateitem" }, providers: [
|
|
18218
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: CardViewDateItemComponent, isStandalone: true, selector: "adf-card-view-dateitem", inputs: { displayEmpty: "displayEmpty", displayClearAction: "displayClearAction", copyToClipboardAction: "copyToClipboardAction", displayCopyToClipboardIcon: "displayCopyToClipboardIcon" }, host: { classAttribute: "adf-card-view-dateitem" }, providers: [
|
|
18212
18219
|
{ provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS },
|
|
18213
18220
|
{ provide: MAT_DATETIME_FORMATS, useValue: ADF_DATETIME_FORMATS },
|
|
18214
18221
|
{ provide: DateAdapter, useClass: AdfDateFnsAdapter },
|
|
18215
18222
|
{ provide: DatetimeAdapter, useClass: AdfDateTimeFnsAdapter }
|
|
18216
|
-
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datetimePicker"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"adf-property-value\" [ngClass]=\"{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty || !editable }\">\n @if (!property.multivalued) {\n <mat-form-field class=\"adf-property-field adf-dateitem-editable\" [floatLabel]=\"property.default ? 'always' : null\">\n <mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty || !editable, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n {{ property.label | translate }}\n </mat-label>\n @if (property.allowManualInput) {\n <input\n matInput\n [matDatetimepicker]=\"datetimePicker\"\n [formControl]=\"cardViewDateTimeControl\"\n (dateChange)=\"onDateChanged($event)\"\n [attr.id]=\"'card-view-dateitem-' + property.key\"\n [attr.data-automation-id]=\"'datepicker-manual-input-' + property.key\"\n [placeholder]=\"property.default ? (property.default | translate) : ''\"\n />\n } @else {\n <div class=\"adf-dateitem-editable-controls\">\n <span\n class=\"adf-datepicker-span-button\"\n [attr.data-automation-id]=\"'datepicker-label-toggle-' + property.key\"\n (click)=\"showDatePicker()\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n >\n <span [attr.data-automation-id]=\"'card-' + property.type + '-value-' + property.key\">\n @if (showProperty) {\n {{ property.displayValue }}\n } @else {\n {{ property.default | translate }}\n }\n\n </span>\n </span>\n </div>\n <input\n matInput\n [disabled]=\"isReadonlyProperty || !editable\"\n class=\"adf-invisible-date-input\"\n [attr.tabIndex]=\"-1\"\n [matDatetimepicker]=\"datetimePicker\"\n [value]=\"valueDate\"\n (dateChange)=\"onDateChanged($event)\"\n [attr.id]=\"'card-view-dateitem-' + property.key\"\n />\n }\n @if (showClearAction) {\n <mat-icon\n matIconSuffix\n class=\"adf-date-reset-icon\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n (click)=\"onDateClear()\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.CLEAR' | translate\"\n [attr.data-automation-id]=\"'datepicker-date-clear-' + property.key\"\n adf-icon=\"clear\"\n />\n }\n <mat-datetimepicker-toggle\n matIconSuffix\n [attr.tabindex]=\"-1\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.EDIT' | translate\"\n [attr.data-automation-id]=\"'datepickertoggle-' + property.key\"\n [for]=\"datetimePicker\"\n class=\"adf-dateitem-picker-toggle\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n\n <mat-datetimepicker\n #datetimePicker\n [type]=\"$any(property).type\"\n [timeInterval]=\"5\"\n [disabled]=\"isReadonlyProperty || !editable\"\n [attr.data-automation-id]=\"'datepicker-' + property.key\"\n [startAt]=\"valueDate\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n @if (cardViewDateTimeControl.hasError('matDatepickerParse')) {\n <mat-error>\n <span class=\"adf-error-text\">{{ 'FORM.FIELD.VALIDATOR.INVALID_DATE_FORMAT' | translate }}</span>\n </mat-error>\n }\n </mat-form-field>\n } @else {\n <mat-form-field class=\"adf-property-field adf-dateitem-editable\" [floatLabel]=\"property.default ? 'always' : null\">\n <mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty || !editable, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n {{ property.label | translate }}\n </mat-label>\n <mat-chip-listbox #chipList class=\"adf-textitem-chip-list\" [disabled]=\"isReadonlyProperty || !editable\">\n <mat-chip-option\n *ngFor=\"let propertyValue of property.displayValue; let idx = index\"\n [removable]=\"isEditable\"\n (removed)=\"removeValueFromList(idx)\"\n >\n {{ propertyValue }}\n @if (isEditable) {\n <mat-icon matChipRemove adf-icon=\"cancel\" />\n }\n </mat-chip-option>\n </mat-chip-listbox>\n <div class=\"adf-dateitem-editable-controls\">\n <span\n class=\"adf-datepicker-span-button\"\n [attr.data-automation-id]=\"'datepicker-label-toggle-' + property.key\"\n (click)=\"showDatePicker()\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n ></span>\n </div>\n <input\n matInput\n [disabled]=\"isReadonlyProperty || !editable\"\n class=\"adf-invisible-date-input\"\n [attr.tabIndex]=\"-1\"\n [matDatetimepicker]=\"datetimePicker\"\n (dateChange)=\"addDateToList($event)\"\n [attr.id]=\"'card-view-dateitem-' + property.key\"\n />\n <mat-datetimepicker-toggle\n [attr.tabindex]=\"-1\"\n matSuffix\n [attr.title]=\"'CORE.METADATA.ACTIONS.EDIT' | translate\"\n [attr.data-automation-id]=\"'datepickertoggle-' + property.key\"\n [for]=\"datetimePicker\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n <mat-datetimepicker\n #datetimePicker\n [type]=\"$any(property).type\"\n [timeInterval]=\"5\"\n [attr.data-automation-id]=\"'datepicker-' + property.key\"\n [startAt]=\"valueDate\"\n [disabled]=\"isReadonlyProperty || !editable\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n </mat-form-field>\n }\n</div>\n", styles: [".adf-card-view-dateitem{display:flow-root}.adf-card-view-dateitem .adf-dateitem-editable{width:100%}.adf-card-view-dateitem .adf-dateitem-editable .adf-date-reset-icon{padding:0}.adf-card-view-dateitem .adf-dateitem-editable-controls{display:flex;align-items:center;justify-content:space-between;position:relative}.adf-card-view-dateitem .adf-dateitem-editable-controls .mat-icon{opacity:.5}.adf-card-view-dateitem .adf-dateitem-editable-controls .mat-icon:hover{opacity:1}.adf-card-view-dateitem .adf-dateitem-editable-controls mat-datetimepicker-toggle{transform:scale(.8)}.adf-card-view-dateitem .adf-dateitem-editable-controls .adf-datepicker-span-button{flex:1 0 auto;font-size:14px;position:relative}.adf-card-view-dateitem .adf-property-value{line-height:20px}.adf-card-view-dateitem .adf-property-value.adf-property-value-editable{display:flex;align-items:center;border-radius:6px;border-bottom:inherit;padding-left:0}.adf-card-view-dateitem .adf-invisible-date-input{height:2px;width:0;overflow:hidden;opacity:0;border:none;margin:0;padding:0;float:right}.adf-card-view-dateitem .adf-dateitem-chip-list-container.adf-property-field{margin-bottom:-7px;border-bottom:0;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: IconDirective, selector: "mat-icon[adf-icon]", inputs: ["adf-icon"] }, { kind: "ngmodule", type: MatDatetimepickerModule }, { kind: "component", type: i4$1.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "component", type: i4$1.MatDatetimepickerToggleComponent, selector: "mat-datetimepicker-toggle", inputs: ["for", "disabled"], exportAs: ["matDatetimepickerToggle"] }, { kind: "directive", type: i4$1.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i6.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
18223
|
+
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datetimePicker"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"adf-property-value\" [ngClass]=\"{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty || !editable }\">\n @if (!property.multivalued) {\n <mat-form-field class=\"adf-property-field adf-dateitem-editable\" [floatLabel]=\"property.default ? 'always' : null\">\n <mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty || !editable, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n {{ property.label | translate }}\n </mat-label>\n @if (property.allowManualInput) {\n <input\n matInput\n [matDatetimepicker]=\"datetimePicker\"\n [formControl]=\"cardViewDateTimeControl\"\n (dateChange)=\"onDateChanged($event)\"\n [attr.id]=\"'card-view-dateitem-' + property.key\"\n [attr.data-automation-id]=\"'datepicker-manual-input-' + property.key\"\n [placeholder]=\"property.default ? (property.default | translate) : ''\"\n />\n } @else {\n <div class=\"adf-dateitem-editable-controls\">\n <span\n class=\"adf-datepicker-span-button\"\n [attr.data-automation-id]=\"'datepicker-label-toggle-' + property.key\"\n (click)=\"showDatePicker()\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n >\n <span [attr.data-automation-id]=\"'card-' + property.type + '-value-' + property.key\">\n @if (showProperty) {\n {{ property.displayValue }}\n } @else {\n {{ property.default | translate }}\n }\n\n </span>\n </span>\n </div>\n <input\n matInput\n [disabled]=\"isReadonlyProperty || !editable\"\n class=\"adf-invisible-date-input\"\n [attr.tabIndex]=\"-1\"\n [matDatetimepicker]=\"datetimePicker\"\n [value]=\"valueDate\"\n (dateChange)=\"onDateChanged($event)\"\n [attr.id]=\"'card-view-dateitem-' + property.key\"\n />\n }\n @if (showClearAction) {\n <mat-icon\n matIconSuffix\n class=\"adf-date-reset-icon\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n (click)=\"onDateClear()\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.CLEAR' | translate\"\n [attr.data-automation-id]=\"'datepicker-date-clear-' + property.key\"\n adf-icon=\"clear\"\n />\n }\n <mat-datetimepicker-toggle\n matIconSuffix\n [attr.tabindex]=\"-1\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.EDIT' | translate\"\n [attr.data-automation-id]=\"'datepickertoggle-' + property.key\"\n [for]=\"datetimePicker\"\n class=\"adf-dateitem-picker-toggle\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n\n <mat-datetimepicker\n #datetimePicker\n [type]=\"$any(property).type\"\n [timeInterval]=\"5\"\n [disabled]=\"isReadonlyProperty || !editable\"\n [attr.data-automation-id]=\"'datepicker-' + property.key\"\n [startAt]=\"valueDate\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n @if (cardViewDateTimeControl.hasError('matDatepickerParse')) {\n <mat-error>\n <span class=\"adf-error-text\">{{ 'FORM.FIELD.VALIDATOR.INVALID_DATE_FORMAT' | translate }}</span>\n </mat-error>\n }\n @if (displayCopyToClipboardIcon && !isEditable) {\n <button\n matSuffix\n type=\"button\"\n class=\"adf-copy-to-clipboard-button\"\n (click)=\"copyToClipboard(property.displayValue, $event)\"\n [attr.aria-label]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n [attr.data-automation-id]=\"'card-dateitem-copy-to-clipboard-' + property.key\"\n >\n <mat-icon\n adf-icon=\"content_copy\"\n class=\"adf-copy-to-clipboard-icon\"\n aria-hidden=\"true\"\n />\n </button>\n }\n </mat-form-field>\n } @else {\n <mat-form-field class=\"adf-property-field adf-dateitem-editable\" [floatLabel]=\"property.default ? 'always' : null\">\n <mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty || !editable, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n {{ property.label | translate }}\n </mat-label>\n <mat-chip-listbox #chipList class=\"adf-textitem-chip-list\" [disabled]=\"isReadonlyProperty || !editable\">\n <mat-chip-option\n *ngFor=\"let propertyValue of property.displayValue; let idx = index\"\n [removable]=\"isEditable\"\n (removed)=\"removeValueFromList(idx)\"\n >\n {{ propertyValue }}\n @if (isEditable) {\n <mat-icon matChipRemove adf-icon=\"cancel\" />\n }\n </mat-chip-option>\n </mat-chip-listbox>\n <div class=\"adf-dateitem-editable-controls\">\n <span\n class=\"adf-datepicker-span-button\"\n [attr.data-automation-id]=\"'datepicker-label-toggle-' + property.key\"\n (click)=\"showDatePicker()\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n ></span>\n </div>\n <input\n matInput\n [disabled]=\"isReadonlyProperty || !editable\"\n class=\"adf-invisible-date-input\"\n [attr.tabIndex]=\"-1\"\n [matDatetimepicker]=\"datetimePicker\"\n (dateChange)=\"addDateToList($event)\"\n [attr.id]=\"'card-view-dateitem-' + property.key\"\n />\n <mat-datetimepicker-toggle\n [attr.tabindex]=\"-1\"\n matSuffix\n [attr.title]=\"'CORE.METADATA.ACTIONS.EDIT' | translate\"\n [attr.data-automation-id]=\"'datepickertoggle-' + property.key\"\n [for]=\"datetimePicker\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n <mat-datetimepicker\n #datetimePicker\n [type]=\"$any(property).type\"\n [timeInterval]=\"5\"\n [attr.data-automation-id]=\"'datepicker-' + property.key\"\n [startAt]=\"valueDate\"\n [disabled]=\"isReadonlyProperty || !editable\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n </mat-form-field>\n }\n</div>\n", styles: [".adf-card-view-dateitem{display:flow-root}.adf-card-view-dateitem .adf-dateitem-editable{width:100%}.adf-card-view-dateitem .adf-dateitem-editable .adf-date-reset-icon{padding:0}.adf-card-view-dateitem .adf-dateitem-editable-controls{display:flex;align-items:center;justify-content:space-between;position:relative}.adf-card-view-dateitem .adf-dateitem-editable-controls .mat-icon{opacity:.5}.adf-card-view-dateitem .adf-dateitem-editable-controls .mat-icon:hover{opacity:1}.adf-card-view-dateitem .adf-dateitem-editable-controls mat-datetimepicker-toggle{transform:scale(.8)}.adf-card-view-dateitem .adf-dateitem-editable-controls .adf-datepicker-span-button{flex:1 0 auto;font-size:14px;position:relative}.adf-card-view-dateitem .adf-property-value{line-height:20px}.adf-card-view-dateitem .adf-property-value.adf-property-value-editable{display:flex;align-items:center;border-radius:6px;border-bottom:inherit;padding-left:0}.adf-card-view-dateitem .adf-invisible-date-input{height:2px;width:0;overflow:hidden;opacity:0;border:none;margin:0;padding:0;float:right}.adf-card-view-dateitem .adf-dateitem-chip-list-container.adf-property-field{margin-bottom:-7px;border-bottom:0;cursor:pointer}.adf-card-view-dateitem .adf-copy-to-clipboard-button{border:none;background:none;cursor:pointer;opacity:0}.adf-card-view-dateitem .adf-copy-to-clipboard-button .adf-copy-to-clipboard-icon{width:30px;height:20px;font-size:20px;line-height:20px}.adf-card-view-dateitem:hover .adf-copy-to-clipboard-button,.adf-card-view-dateitem:focus-within .adf-copy-to-clipboard-button{opacity:1}@media(hover:none){.adf-card-view-dateitem .adf-copy-to-clipboard-button{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: IconDirective, selector: "mat-icon[adf-icon]", inputs: ["adf-icon"] }, { kind: "ngmodule", type: MatDatetimepickerModule }, { kind: "component", type: i4$1.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "component", type: i4$1.MatDatetimepickerToggleComponent, selector: "mat-datetimepicker-toggle", inputs: ["for", "disabled"], exportAs: ["matDatetimepickerToggle"] }, { kind: "directive", type: i4$1.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i6.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
18217
18224
|
}
|
|
18218
18225
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardViewDateItemComponent, decorators: [{
|
|
18219
18226
|
type: Component,
|
|
@@ -18233,11 +18240,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
|
|
|
18233
18240
|
MatDatepickerModule,
|
|
18234
18241
|
MatSnackBarModule,
|
|
18235
18242
|
ReactiveFormsModule
|
|
18236
|
-
], encapsulation: ViewEncapsulation.None, host: { class: 'adf-card-view-dateitem' }, template: "<div class=\"adf-property-value\" [ngClass]=\"{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty || !editable }\">\n @if (!property.multivalued) {\n <mat-form-field class=\"adf-property-field adf-dateitem-editable\" [floatLabel]=\"property.default ? 'always' : null\">\n <mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty || !editable, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n {{ property.label | translate }}\n </mat-label>\n @if (property.allowManualInput) {\n <input\n matInput\n [matDatetimepicker]=\"datetimePicker\"\n [formControl]=\"cardViewDateTimeControl\"\n (dateChange)=\"onDateChanged($event)\"\n [attr.id]=\"'card-view-dateitem-' + property.key\"\n [attr.data-automation-id]=\"'datepicker-manual-input-' + property.key\"\n [placeholder]=\"property.default ? (property.default | translate) : ''\"\n />\n } @else {\n <div class=\"adf-dateitem-editable-controls\">\n <span\n class=\"adf-datepicker-span-button\"\n [attr.data-automation-id]=\"'datepicker-label-toggle-' + property.key\"\n (click)=\"showDatePicker()\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n >\n <span [attr.data-automation-id]=\"'card-' + property.type + '-value-' + property.key\">\n @if (showProperty) {\n {{ property.displayValue }}\n } @else {\n {{ property.default | translate }}\n }\n\n </span>\n </span>\n </div>\n <input\n matInput\n [disabled]=\"isReadonlyProperty || !editable\"\n class=\"adf-invisible-date-input\"\n [attr.tabIndex]=\"-1\"\n [matDatetimepicker]=\"datetimePicker\"\n [value]=\"valueDate\"\n (dateChange)=\"onDateChanged($event)\"\n [attr.id]=\"'card-view-dateitem-' + property.key\"\n />\n }\n @if (showClearAction) {\n <mat-icon\n matIconSuffix\n class=\"adf-date-reset-icon\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n (click)=\"onDateClear()\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.CLEAR' | translate\"\n [attr.data-automation-id]=\"'datepicker-date-clear-' + property.key\"\n adf-icon=\"clear\"\n />\n }\n <mat-datetimepicker-toggle\n matIconSuffix\n [attr.tabindex]=\"-1\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.EDIT' | translate\"\n [attr.data-automation-id]=\"'datepickertoggle-' + property.key\"\n [for]=\"datetimePicker\"\n class=\"adf-dateitem-picker-toggle\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n\n <mat-datetimepicker\n #datetimePicker\n [type]=\"$any(property).type\"\n [timeInterval]=\"5\"\n [disabled]=\"isReadonlyProperty || !editable\"\n [attr.data-automation-id]=\"'datepicker-' + property.key\"\n [startAt]=\"valueDate\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n @if (cardViewDateTimeControl.hasError('matDatepickerParse')) {\n <mat-error>\n <span class=\"adf-error-text\">{{ 'FORM.FIELD.VALIDATOR.INVALID_DATE_FORMAT' | translate }}</span>\n </mat-error>\n }\n </mat-form-field>\n } @else {\n <mat-form-field class=\"adf-property-field adf-dateitem-editable\" [floatLabel]=\"property.default ? 'always' : null\">\n <mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty || !editable, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n {{ property.label | translate }}\n </mat-label>\n <mat-chip-listbox #chipList class=\"adf-textitem-chip-list\" [disabled]=\"isReadonlyProperty || !editable\">\n <mat-chip-option\n *ngFor=\"let propertyValue of property.displayValue; let idx = index\"\n [removable]=\"isEditable\"\n (removed)=\"removeValueFromList(idx)\"\n >\n {{ propertyValue }}\n @if (isEditable) {\n <mat-icon matChipRemove adf-icon=\"cancel\" />\n }\n </mat-chip-option>\n </mat-chip-listbox>\n <div class=\"adf-dateitem-editable-controls\">\n <span\n class=\"adf-datepicker-span-button\"\n [attr.data-automation-id]=\"'datepicker-label-toggle-' + property.key\"\n (click)=\"showDatePicker()\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n ></span>\n </div>\n <input\n matInput\n [disabled]=\"isReadonlyProperty || !editable\"\n class=\"adf-invisible-date-input\"\n [attr.tabIndex]=\"-1\"\n [matDatetimepicker]=\"datetimePicker\"\n (dateChange)=\"addDateToList($event)\"\n [attr.id]=\"'card-view-dateitem-' + property.key\"\n />\n <mat-datetimepicker-toggle\n [attr.tabindex]=\"-1\"\n matSuffix\n [attr.title]=\"'CORE.METADATA.ACTIONS.EDIT' | translate\"\n [attr.data-automation-id]=\"'datepickertoggle-' + property.key\"\n [for]=\"datetimePicker\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n <mat-datetimepicker\n #datetimePicker\n [type]=\"$any(property).type\"\n [timeInterval]=\"5\"\n [attr.data-automation-id]=\"'datepicker-' + property.key\"\n [startAt]=\"valueDate\"\n [disabled]=\"isReadonlyProperty || !editable\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n </mat-form-field>\n }\n</div>\n", styles: [".adf-card-view-dateitem{display:flow-root}.adf-card-view-dateitem .adf-dateitem-editable{width:100%}.adf-card-view-dateitem .adf-dateitem-editable .adf-date-reset-icon{padding:0}.adf-card-view-dateitem .adf-dateitem-editable-controls{display:flex;align-items:center;justify-content:space-between;position:relative}.adf-card-view-dateitem .adf-dateitem-editable-controls .mat-icon{opacity:.5}.adf-card-view-dateitem .adf-dateitem-editable-controls .mat-icon:hover{opacity:1}.adf-card-view-dateitem .adf-dateitem-editable-controls mat-datetimepicker-toggle{transform:scale(.8)}.adf-card-view-dateitem .adf-dateitem-editable-controls .adf-datepicker-span-button{flex:1 0 auto;font-size:14px;position:relative}.adf-card-view-dateitem .adf-property-value{line-height:20px}.adf-card-view-dateitem .adf-property-value.adf-property-value-editable{display:flex;align-items:center;border-radius:6px;border-bottom:inherit;padding-left:0}.adf-card-view-dateitem .adf-invisible-date-input{height:2px;width:0;overflow:hidden;opacity:0;border:none;margin:0;padding:0;float:right}.adf-card-view-dateitem .adf-dateitem-chip-list-container.adf-property-field{margin-bottom:-7px;border-bottom:0;cursor:pointer}\n"] }]
|
|
18243
|
+
], encapsulation: ViewEncapsulation.None, host: { class: 'adf-card-view-dateitem' }, template: "<div class=\"adf-property-value\" [ngClass]=\"{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty || !editable }\">\n @if (!property.multivalued) {\n <mat-form-field class=\"adf-property-field adf-dateitem-editable\" [floatLabel]=\"property.default ? 'always' : null\">\n <mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty || !editable, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n {{ property.label | translate }}\n </mat-label>\n @if (property.allowManualInput) {\n <input\n matInput\n [matDatetimepicker]=\"datetimePicker\"\n [formControl]=\"cardViewDateTimeControl\"\n (dateChange)=\"onDateChanged($event)\"\n [attr.id]=\"'card-view-dateitem-' + property.key\"\n [attr.data-automation-id]=\"'datepicker-manual-input-' + property.key\"\n [placeholder]=\"property.default ? (property.default | translate) : ''\"\n />\n } @else {\n <div class=\"adf-dateitem-editable-controls\">\n <span\n class=\"adf-datepicker-span-button\"\n [attr.data-automation-id]=\"'datepicker-label-toggle-' + property.key\"\n (click)=\"showDatePicker()\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n >\n <span [attr.data-automation-id]=\"'card-' + property.type + '-value-' + property.key\">\n @if (showProperty) {\n {{ property.displayValue }}\n } @else {\n {{ property.default | translate }}\n }\n\n </span>\n </span>\n </div>\n <input\n matInput\n [disabled]=\"isReadonlyProperty || !editable\"\n class=\"adf-invisible-date-input\"\n [attr.tabIndex]=\"-1\"\n [matDatetimepicker]=\"datetimePicker\"\n [value]=\"valueDate\"\n (dateChange)=\"onDateChanged($event)\"\n [attr.id]=\"'card-view-dateitem-' + property.key\"\n />\n }\n @if (showClearAction) {\n <mat-icon\n matIconSuffix\n class=\"adf-date-reset-icon\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n (click)=\"onDateClear()\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.CLEAR' | translate\"\n [attr.data-automation-id]=\"'datepicker-date-clear-' + property.key\"\n adf-icon=\"clear\"\n />\n }\n <mat-datetimepicker-toggle\n matIconSuffix\n [attr.tabindex]=\"-1\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.EDIT' | translate\"\n [attr.data-automation-id]=\"'datepickertoggle-' + property.key\"\n [for]=\"datetimePicker\"\n class=\"adf-dateitem-picker-toggle\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n\n <mat-datetimepicker\n #datetimePicker\n [type]=\"$any(property).type\"\n [timeInterval]=\"5\"\n [disabled]=\"isReadonlyProperty || !editable\"\n [attr.data-automation-id]=\"'datepicker-' + property.key\"\n [startAt]=\"valueDate\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n @if (cardViewDateTimeControl.hasError('matDatepickerParse')) {\n <mat-error>\n <span class=\"adf-error-text\">{{ 'FORM.FIELD.VALIDATOR.INVALID_DATE_FORMAT' | translate }}</span>\n </mat-error>\n }\n @if (displayCopyToClipboardIcon && !isEditable) {\n <button\n matSuffix\n type=\"button\"\n class=\"adf-copy-to-clipboard-button\"\n (click)=\"copyToClipboard(property.displayValue, $event)\"\n [attr.aria-label]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n [attr.data-automation-id]=\"'card-dateitem-copy-to-clipboard-' + property.key\"\n >\n <mat-icon\n adf-icon=\"content_copy\"\n class=\"adf-copy-to-clipboard-icon\"\n aria-hidden=\"true\"\n />\n </button>\n }\n </mat-form-field>\n } @else {\n <mat-form-field class=\"adf-property-field adf-dateitem-editable\" [floatLabel]=\"property.default ? 'always' : null\">\n <mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty || !editable, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n {{ property.label | translate }}\n </mat-label>\n <mat-chip-listbox #chipList class=\"adf-textitem-chip-list\" [disabled]=\"isReadonlyProperty || !editable\">\n <mat-chip-option\n *ngFor=\"let propertyValue of property.displayValue; let idx = index\"\n [removable]=\"isEditable\"\n (removed)=\"removeValueFromList(idx)\"\n >\n {{ propertyValue }}\n @if (isEditable) {\n <mat-icon matChipRemove adf-icon=\"cancel\" />\n }\n </mat-chip-option>\n </mat-chip-listbox>\n <div class=\"adf-dateitem-editable-controls\">\n <span\n class=\"adf-datepicker-span-button\"\n [attr.data-automation-id]=\"'datepicker-label-toggle-' + property.key\"\n (click)=\"showDatePicker()\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n ></span>\n </div>\n <input\n matInput\n [disabled]=\"isReadonlyProperty || !editable\"\n class=\"adf-invisible-date-input\"\n [attr.tabIndex]=\"-1\"\n [matDatetimepicker]=\"datetimePicker\"\n (dateChange)=\"addDateToList($event)\"\n [attr.id]=\"'card-view-dateitem-' + property.key\"\n />\n <mat-datetimepicker-toggle\n [attr.tabindex]=\"-1\"\n matSuffix\n [attr.title]=\"'CORE.METADATA.ACTIONS.EDIT' | translate\"\n [attr.data-automation-id]=\"'datepickertoggle-' + property.key\"\n [for]=\"datetimePicker\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n <mat-datetimepicker\n #datetimePicker\n [type]=\"$any(property).type\"\n [timeInterval]=\"5\"\n [attr.data-automation-id]=\"'datepicker-' + property.key\"\n [startAt]=\"valueDate\"\n [disabled]=\"isReadonlyProperty || !editable\"\n [ngClass]=\"{ 'cdk-visually-hidden': !editable || isReadonlyProperty}\"\n />\n </mat-form-field>\n }\n</div>\n", styles: [".adf-card-view-dateitem{display:flow-root}.adf-card-view-dateitem .adf-dateitem-editable{width:100%}.adf-card-view-dateitem .adf-dateitem-editable .adf-date-reset-icon{padding:0}.adf-card-view-dateitem .adf-dateitem-editable-controls{display:flex;align-items:center;justify-content:space-between;position:relative}.adf-card-view-dateitem .adf-dateitem-editable-controls .mat-icon{opacity:.5}.adf-card-view-dateitem .adf-dateitem-editable-controls .mat-icon:hover{opacity:1}.adf-card-view-dateitem .adf-dateitem-editable-controls mat-datetimepicker-toggle{transform:scale(.8)}.adf-card-view-dateitem .adf-dateitem-editable-controls .adf-datepicker-span-button{flex:1 0 auto;font-size:14px;position:relative}.adf-card-view-dateitem .adf-property-value{line-height:20px}.adf-card-view-dateitem .adf-property-value.adf-property-value-editable{display:flex;align-items:center;border-radius:6px;border-bottom:inherit;padding-left:0}.adf-card-view-dateitem .adf-invisible-date-input{height:2px;width:0;overflow:hidden;opacity:0;border:none;margin:0;padding:0;float:right}.adf-card-view-dateitem .adf-dateitem-chip-list-container.adf-property-field{margin-bottom:-7px;border-bottom:0;cursor:pointer}.adf-card-view-dateitem .adf-copy-to-clipboard-button{border:none;background:none;cursor:pointer;opacity:0}.adf-card-view-dateitem .adf-copy-to-clipboard-button .adf-copy-to-clipboard-icon{width:30px;height:20px;font-size:20px;line-height:20px}.adf-card-view-dateitem:hover .adf-copy-to-clipboard-button,.adf-card-view-dateitem:focus-within .adf-copy-to-clipboard-button{opacity:1}@media(hover:none){.adf-card-view-dateitem .adf-copy-to-clipboard-button{opacity:1}}\n"] }]
|
|
18237
18244
|
}], ctorParameters: () => [], propDecorators: { displayEmpty: [{
|
|
18238
18245
|
type: Input
|
|
18239
18246
|
}], displayClearAction: [{
|
|
18240
18247
|
type: Input
|
|
18248
|
+
}], copyToClipboardAction: [{
|
|
18249
|
+
type: Input
|
|
18250
|
+
}], displayCopyToClipboardIcon: [{
|
|
18251
|
+
type: Input
|
|
18241
18252
|
}], datepicker: [{
|
|
18242
18253
|
type: ViewChild,
|
|
18243
18254
|
args: ['datetimePicker']
|
|
@@ -18794,6 +18805,7 @@ class CardViewItemDispatcherComponent {
|
|
|
18794
18805
|
this.displayNoneOption = true;
|
|
18795
18806
|
this.displayClearAction = true;
|
|
18796
18807
|
this.copyToClipboardAction = true;
|
|
18808
|
+
this.displayCopyToClipboardIcon = true;
|
|
18797
18809
|
this.useChipsForMultiValueProperty = true;
|
|
18798
18810
|
this.multiValueSeparator = DEFAULT_SEPARATOR;
|
|
18799
18811
|
this.loaded = false;
|
|
@@ -18830,6 +18842,7 @@ class CardViewItemDispatcherComponent {
|
|
|
18830
18842
|
this.componentReference.instance.displayNoneOption = this.displayNoneOption;
|
|
18831
18843
|
this.componentReference.instance.displayClearAction = this.displayClearAction;
|
|
18832
18844
|
this.componentReference.instance.copyToClipboardAction = this.copyToClipboardAction;
|
|
18845
|
+
this.componentReference.instance.displayCopyToClipboardIcon = this.displayCopyToClipboardIcon;
|
|
18833
18846
|
this.componentReference.instance.useChipsForMultiValueProperty = this.useChipsForMultiValueProperty;
|
|
18834
18847
|
this.componentReference.instance.multiValueSeparator = this.multiValueSeparator;
|
|
18835
18848
|
}
|
|
@@ -18839,7 +18852,7 @@ class CardViewItemDispatcherComponent {
|
|
|
18839
18852
|
}
|
|
18840
18853
|
}
|
|
18841
18854
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardViewItemDispatcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18842
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CardViewItemDispatcherComponent, isStandalone: true, selector: "adf-card-view-item-dispatcher", inputs: { property: "property", editable: "editable", displayEmpty: "displayEmpty", displayNoneOption: "displayNoneOption", displayClearAction: "displayClearAction", copyToClipboardAction: "copyToClipboardAction", useChipsForMultiValueProperty: "useChipsForMultiValueProperty", multiValueSeparator: "multiValueSeparator" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: '<ng-template #content />', isInline: true }); }
|
|
18855
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CardViewItemDispatcherComponent, isStandalone: true, selector: "adf-card-view-item-dispatcher", inputs: { property: "property", editable: "editable", displayEmpty: "displayEmpty", displayNoneOption: "displayNoneOption", displayClearAction: "displayClearAction", copyToClipboardAction: "copyToClipboardAction", displayCopyToClipboardIcon: "displayCopyToClipboardIcon", useChipsForMultiValueProperty: "useChipsForMultiValueProperty", multiValueSeparator: "multiValueSeparator" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: '<ng-template #content />', isInline: true }); }
|
|
18843
18856
|
}
|
|
18844
18857
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardViewItemDispatcherComponent, decorators: [{
|
|
18845
18858
|
type: Component,
|
|
@@ -18859,6 +18872,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
|
|
|
18859
18872
|
type: Input
|
|
18860
18873
|
}], copyToClipboardAction: [{
|
|
18861
18874
|
type: Input
|
|
18875
|
+
}], displayCopyToClipboardIcon: [{
|
|
18876
|
+
type: Input
|
|
18862
18877
|
}], useChipsForMultiValueProperty: [{
|
|
18863
18878
|
type: Input
|
|
18864
18879
|
}], multiValueSeparator: [{
|
|
@@ -18894,17 +18909,19 @@ class CardViewComponent {
|
|
|
18894
18909
|
this.displayClearAction = true;
|
|
18895
18910
|
/** Toggles whether or not to enable copy to clipboard action. */
|
|
18896
18911
|
this.copyToClipboardAction = true;
|
|
18912
|
+
/** Toggles whether or not to display the copy to clipboard icon. */
|
|
18913
|
+
this.displayCopyToClipboardIcon = true;
|
|
18897
18914
|
/** Toggles whether or not to enable chips for multivalued properties. */
|
|
18898
18915
|
this.useChipsForMultiValueProperty = true;
|
|
18899
18916
|
/** String separator between multi-value property items. */
|
|
18900
18917
|
this.multiValueSeparator = DEFAULT_SEPARATOR;
|
|
18901
18918
|
}
|
|
18902
18919
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18903
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CardViewComponent, isStandalone: true, selector: "adf-card-view", inputs: { properties: "properties", editable: "editable", displayEmpty: "displayEmpty", displayNoneOption: "displayNoneOption", displayClearAction: "displayClearAction", copyToClipboardAction: "copyToClipboardAction", useChipsForMultiValueProperty: "useChipsForMultiValueProperty", multiValueSeparator: "multiValueSeparator" }, ngImport: i0, template: "<div class=\"adf-property-list\">\n <div *ngFor=\"let property of properties\" class=\"adf-property-container\">\n <div [attr.data-automation-id]=\"'header-'+property.key\" class=\"adf-property\">\n <adf-card-view-item-dispatcher\n [property]=\"property\"\n [editable]=\"editable\"\n [displayEmpty]=\"displayEmpty\"\n [displayNoneOption]=\"property['displayNoneOption'] !== undefined ? property['displayNoneOption'] : displayNoneOption\"\n [displayClearAction]=\"displayClearAction\"\n [copyToClipboardAction]=\"copyToClipboardAction\"\n [useChipsForMultiValueProperty]=\"useChipsForMultiValueProperty\"\n [multiValueSeparator]=\"multiValueSeparator\" />\n </div>\n </div>\n</div>\n", styles: [".adf-property-list{border:unset;border-color:var(--mat-sys-outline);border-radius:0}.adf-property-list .adf-property-label{display:flex;line-height:20px;margin-bottom:4px}.adf-property-list .adf-property-container{margin-bottom:12px}.adf-property-list .adf-property .adf-property-field{width:100%}.adf-property-list .adf-property .adf-property-field .mat-mdc-input-element{text-overflow:ellipsis;line-height:20px}.adf-property-list .adf-property .adf-property-field .adf-card-view__key-value-pairs__row .mat-mdc-input-element{margin-top:0;padding-left:12px}.adf-property-list .adf-property .adf-card-view-textitem .adf-property-field{padding-top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CardViewItemDispatcherComponent, selector: "adf-card-view-item-dispatcher", inputs: ["property", "editable", "displayEmpty", "displayNoneOption", "displayClearAction", "copyToClipboardAction", "useChipsForMultiValueProperty", "multiValueSeparator"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
18920
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CardViewComponent, isStandalone: true, selector: "adf-card-view", inputs: { properties: "properties", editable: "editable", displayEmpty: "displayEmpty", displayNoneOption: "displayNoneOption", displayClearAction: "displayClearAction", copyToClipboardAction: "copyToClipboardAction", displayCopyToClipboardIcon: "displayCopyToClipboardIcon", useChipsForMultiValueProperty: "useChipsForMultiValueProperty", multiValueSeparator: "multiValueSeparator" }, ngImport: i0, template: "<div class=\"adf-property-list\">\n <div *ngFor=\"let property of properties\" class=\"adf-property-container\">\n <div [attr.data-automation-id]=\"'header-'+property.key\" class=\"adf-property\">\n <adf-card-view-item-dispatcher\n [property]=\"property\"\n [editable]=\"editable\"\n [displayEmpty]=\"displayEmpty\"\n [displayNoneOption]=\"property['displayNoneOption'] !== undefined ? property['displayNoneOption'] : displayNoneOption\"\n [displayClearAction]=\"displayClearAction\"\n [copyToClipboardAction]=\"copyToClipboardAction\"\n [displayCopyToClipboardIcon]=\"displayCopyToClipboardIcon\"\n [useChipsForMultiValueProperty]=\"useChipsForMultiValueProperty\"\n [multiValueSeparator]=\"multiValueSeparator\" />\n </div>\n </div>\n</div>\n", styles: [".adf-property-list{border:unset;border-color:var(--mat-sys-outline);border-radius:0}.adf-property-list .adf-property-label{display:flex;line-height:20px;margin-bottom:4px}.adf-property-list .adf-property-container{margin-bottom:12px}.adf-property-list .adf-property .adf-property-field{width:100%}.adf-property-list .adf-property .adf-property-field .mat-mdc-input-element{text-overflow:ellipsis;line-height:20px}.adf-property-list .adf-property .adf-property-field .adf-card-view__key-value-pairs__row .mat-mdc-input-element{margin-top:0;padding-left:12px}.adf-property-list .adf-property .adf-card-view-textitem .adf-property-field{padding-top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CardViewItemDispatcherComponent, selector: "adf-card-view-item-dispatcher", inputs: ["property", "editable", "displayEmpty", "displayNoneOption", "displayClearAction", "copyToClipboardAction", "displayCopyToClipboardIcon", "useChipsForMultiValueProperty", "multiValueSeparator"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
18904
18921
|
}
|
|
18905
18922
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardViewComponent, decorators: [{
|
|
18906
18923
|
type: Component,
|
|
18907
|
-
args: [{ selector: 'adf-card-view', imports: [CommonModule, CardViewItemDispatcherComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"adf-property-list\">\n <div *ngFor=\"let property of properties\" class=\"adf-property-container\">\n <div [attr.data-automation-id]=\"'header-'+property.key\" class=\"adf-property\">\n <adf-card-view-item-dispatcher\n [property]=\"property\"\n [editable]=\"editable\"\n [displayEmpty]=\"displayEmpty\"\n [displayNoneOption]=\"property['displayNoneOption'] !== undefined ? property['displayNoneOption'] : displayNoneOption\"\n [displayClearAction]=\"displayClearAction\"\n [copyToClipboardAction]=\"copyToClipboardAction\"\n [useChipsForMultiValueProperty]=\"useChipsForMultiValueProperty\"\n [multiValueSeparator]=\"multiValueSeparator\" />\n </div>\n </div>\n</div>\n", styles: [".adf-property-list{border:unset;border-color:var(--mat-sys-outline);border-radius:0}.adf-property-list .adf-property-label{display:flex;line-height:20px;margin-bottom:4px}.adf-property-list .adf-property-container{margin-bottom:12px}.adf-property-list .adf-property .adf-property-field{width:100%}.adf-property-list .adf-property .adf-property-field .mat-mdc-input-element{text-overflow:ellipsis;line-height:20px}.adf-property-list .adf-property .adf-property-field .adf-card-view__key-value-pairs__row .mat-mdc-input-element{margin-top:0;padding-left:12px}.adf-property-list .adf-property .adf-card-view-textitem .adf-property-field{padding-top:0}\n"] }]
|
|
18924
|
+
args: [{ selector: 'adf-card-view', imports: [CommonModule, CardViewItemDispatcherComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"adf-property-list\">\n <div *ngFor=\"let property of properties\" class=\"adf-property-container\">\n <div [attr.data-automation-id]=\"'header-'+property.key\" class=\"adf-property\">\n <adf-card-view-item-dispatcher\n [property]=\"property\"\n [editable]=\"editable\"\n [displayEmpty]=\"displayEmpty\"\n [displayNoneOption]=\"property['displayNoneOption'] !== undefined ? property['displayNoneOption'] : displayNoneOption\"\n [displayClearAction]=\"displayClearAction\"\n [copyToClipboardAction]=\"copyToClipboardAction\"\n [displayCopyToClipboardIcon]=\"displayCopyToClipboardIcon\"\n [useChipsForMultiValueProperty]=\"useChipsForMultiValueProperty\"\n [multiValueSeparator]=\"multiValueSeparator\" />\n </div>\n </div>\n</div>\n", styles: [".adf-property-list{border:unset;border-color:var(--mat-sys-outline);border-radius:0}.adf-property-list .adf-property-label{display:flex;line-height:20px;margin-bottom:4px}.adf-property-list .adf-property-container{margin-bottom:12px}.adf-property-list .adf-property .adf-property-field{width:100%}.adf-property-list .adf-property .adf-property-field .mat-mdc-input-element{text-overflow:ellipsis;line-height:20px}.adf-property-list .adf-property .adf-property-field .adf-card-view__key-value-pairs__row .mat-mdc-input-element{margin-top:0;padding-left:12px}.adf-property-list .adf-property .adf-card-view-textitem .adf-property-field{padding-top:0}\n"] }]
|
|
18908
18925
|
}], propDecorators: { properties: [{
|
|
18909
18926
|
type: Input,
|
|
18910
18927
|
args: [{ required: true }]
|
|
@@ -18918,6 +18935,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
|
|
|
18918
18935
|
type: Input
|
|
18919
18936
|
}], copyToClipboardAction: [{
|
|
18920
18937
|
type: Input
|
|
18938
|
+
}], displayCopyToClipboardIcon: [{
|
|
18939
|
+
type: Input
|
|
18921
18940
|
}], useChipsForMultiValueProperty: [{
|
|
18922
18941
|
type: Input
|
|
18923
18942
|
}], multiValueSeparator: [{
|
|
@@ -21124,9 +21143,26 @@ class FormFieldModel extends FormWidgetModel {
|
|
|
21124
21143
|
if (!this.shouldAddRow()) {
|
|
21125
21144
|
return;
|
|
21126
21145
|
}
|
|
21127
|
-
this.
|
|
21146
|
+
const row = this.createRow(fields, form, this.rows.length);
|
|
21147
|
+
this.copyParentVisibilityValidationState(this.columns, row.columns);
|
|
21148
|
+
this.rows.push(row);
|
|
21128
21149
|
this.form.onRepeatableSectionRowCountChanged(this);
|
|
21129
21150
|
}
|
|
21151
|
+
copyParentVisibilityValidationState(sourceColumns, targetColumns) {
|
|
21152
|
+
const sourceFields = sourceColumns.flatMap((column) => column.fields);
|
|
21153
|
+
for (const targetColumn of targetColumns) {
|
|
21154
|
+
for (const targetField of targetColumn.fields) {
|
|
21155
|
+
const sourceField = sourceFields.find((field) => field.json.id === targetField.json.id);
|
|
21156
|
+
if (!sourceField) {
|
|
21157
|
+
continue;
|
|
21158
|
+
}
|
|
21159
|
+
targetField.checkParentVisibilityForValidation = sourceField.checkParentVisibilityForValidation;
|
|
21160
|
+
if (targetField.type === FormFieldTypes.SECTION) {
|
|
21161
|
+
this.copyParentVisibilityValidationState(sourceField.columns, targetField.columns);
|
|
21162
|
+
}
|
|
21163
|
+
}
|
|
21164
|
+
}
|
|
21165
|
+
}
|
|
21130
21166
|
shouldAddRow() {
|
|
21131
21167
|
return !this.params.maxNumberOfRows || this.rows.length < this.params.maxNumberOfRows;
|
|
21132
21168
|
}
|
|
@@ -22245,13 +22281,27 @@ class FormModel {
|
|
|
22245
22281
|
}
|
|
22246
22282
|
getColumnsFromElement(element) {
|
|
22247
22283
|
if (element instanceof ContainerModel) {
|
|
22248
|
-
return element.field?.
|
|
22284
|
+
return FormFieldTypes.isRepeatableSectionType(element.field?.type)
|
|
22285
|
+
? this.getColumnsFromAllRows(element.field)
|
|
22286
|
+
: element.field?.columns || null;
|
|
22249
22287
|
}
|
|
22250
22288
|
else if (element instanceof FormFieldModel && element.type === FormFieldTypes.SECTION) {
|
|
22251
22289
|
return element.columns || null;
|
|
22252
22290
|
}
|
|
22253
22291
|
return null;
|
|
22254
22292
|
}
|
|
22293
|
+
getColumnsFromAllRows(field) {
|
|
22294
|
+
if (!field.rows?.length) {
|
|
22295
|
+
return field.columns || null;
|
|
22296
|
+
}
|
|
22297
|
+
const columns = [];
|
|
22298
|
+
for (const row of field.rows) {
|
|
22299
|
+
if (row?.columns?.length) {
|
|
22300
|
+
columns.push(...row.columns);
|
|
22301
|
+
}
|
|
22302
|
+
}
|
|
22303
|
+
return columns.length > 0 ? columns : null;
|
|
22304
|
+
}
|
|
22255
22305
|
searchFieldsInColumns(columns, parentElement, targetField) {
|
|
22256
22306
|
for (const column of columns) {
|
|
22257
22307
|
if (!column?.fields || column.fields.length === 0) {
|