@alfresco/adf-core 9.1.0-17001743261 → 9.1.0-17001752560
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/adf-core.mjs
CHANGED
|
@@ -18459,7 +18459,7 @@ class CardViewDateItemComponent extends BaseCardView {
|
|
|
18459
18459
|
{ provide: MAT_DATETIME_FORMATS, useValue: ADF_DATETIME_FORMATS },
|
|
18460
18460
|
{ provide: DateAdapter, useClass: AdfDateFnsAdapter },
|
|
18461
18461
|
{ provide: DatetimeAdapter, useClass: AdfDateTimeFnsAdapter }
|
|
18462
|
-
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datetimePicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n *ngIf=\"showProperty && !isEditable\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n>\n {{ property.label | translate }}\n</mat-label>\n\n<div class=\"adf-property-value\" [ngClass]=\"{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }\">\n <span *ngIf=\"!isEditable && !property.multivalued\" [attr.data-automation-id]=\"'card-' + property.type + '-value-' + property.key\">\n <span\n *ngIf=\"showProperty\"\n [attr.data-automation-id]=\"'card-dateitem-' + property.key\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >{{ property.displayValue }}</span\n >\n </span>\n <mat-form-field *ngIf=\"isEditable && !property.multivalued\" class=\"adf-dateitem-editable hxp-input\">\n <mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n *ngIf=\"isEditable\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n {{ property.label | translate }}\n </mat-label>\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 tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n >\n <span *ngIf=\"showProperty; else elseEmptyValueBlock\" [attr.data-automation-id]=\"'card-' + property.type + '-value-' + property.key\">\n {{ property.displayValue }}</span\n >\n </span>\n </div>\n <input\n matInput\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 <mat-icon\n matIconSuffix\n *ngIf=\"showClearAction\"\n class=\"adf-date-reset-icon\"\n (click)=\"onDateClear()\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.CLEAR' | translate\"\n [attr.data-automation-id]=\"'datepicker-date-clear-' + property.key\"\n >\n clear\n </mat-icon>\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 />\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 />\n </mat-form-field>\n <ng-template #elseEmptyValueBlock>\n {{ property.default | translate }}\n </ng-template>\n\n <div *ngIf=\"property.multivalued\" class=\"adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable\">\n <mat-chip-listbox #chipList class=\"adf-textitem-chip-list\">\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 <mat-icon *ngIf=\"isEditable\" matChipRemove>cancel</mat-icon>\n </mat-chip-option>\n </mat-chip-listbox>\n\n <div\n *ngIf=\"isEditable\"\n class=\"adf-property-field adf-dateitem-editable-controls\"\n (click)=\"showDatePicker()\"\n tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n >\n <input\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 />\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 />\n </div>\n </div>\n</div>\n", styles: [".adf-card-view-dateitem .adf-property-value{padding-top:6px;padding-bottom:6px;line-height:20px;color:var(--adf-metadata-property-panel-title-color);margin-top:10px}.adf-card-view-dateitem .adf-property-value.adf-property-value-editable{display:flex;align-items:center;border-radius:6px;border-bottom:inherit;margin-bottom:18px}.adf-card-view-dateitem .adf-property-value.adf-property-readonly-value{padding:0 0 0 12px}.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-dateitem-editable{cursor:pointer;width:100%}.adf-card-view-dateitem .adf-dateitem-editable-controls{display:flex;align-items:center;justify-content:space-between}.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}.adf-card-view-dateitem .adf-dateitem-editable-controls .adf-date-reset-icon{position:relative}\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: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDatetimepickerModule }, { kind: "component", type: i7$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: i7$1.MatDatetimepickerToggleComponent, selector: "mat-datetimepicker-toggle", inputs: ["for", "disabled"], exportAs: ["matDatetimepickerToggle"] }, { kind: "directive", type: i7$1.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: ReactiveFormsModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
18462
|
+
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datetimePicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n *ngIf=\"showProperty && !isEditable\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n>\n {{ property.label | translate }}\n</mat-label>\n\n<div class=\"adf-property-value\" [ngClass]=\"{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }\">\n <span *ngIf=\"!isEditable && !property.multivalued\" [attr.data-automation-id]=\"'card-' + property.type + '-value-' + property.key\">\n <span\n *ngIf=\"showProperty\"\n [attr.data-automation-id]=\"'card-dateitem-' + property.key\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >{{ property.displayValue }}</span\n >\n </span>\n <mat-form-field *ngIf=\"isEditable && !property.multivalued\" class=\"adf-dateitem-editable hxp-input\" [floatLabel]=\"property.default ? 'always' : null\">\n <mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n *ngIf=\"isEditable\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n {{ property.label | translate }}\n </mat-label>\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 tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n >\n <span *ngIf=\"showProperty; else elseEmptyValueBlock\" [attr.data-automation-id]=\"'card-' + property.type + '-value-' + property.key\">\n {{ property.displayValue }}</span\n >\n </span>\n </div>\n <input\n matInput\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 <mat-icon\n matIconSuffix\n *ngIf=\"showClearAction\"\n class=\"adf-date-reset-icon\"\n (click)=\"onDateClear()\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.CLEAR' | translate\"\n [attr.data-automation-id]=\"'datepicker-date-clear-' + property.key\"\n >\n clear\n </mat-icon>\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 />\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 />\n </mat-form-field>\n <ng-template #elseEmptyValueBlock>\n {{ property.default | translate }}\n </ng-template>\n\n <div *ngIf=\"property.multivalued\" class=\"adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable\">\n <mat-chip-listbox #chipList class=\"adf-textitem-chip-list\">\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 <mat-icon *ngIf=\"isEditable\" matChipRemove>cancel</mat-icon>\n </mat-chip-option>\n </mat-chip-listbox>\n\n <div\n *ngIf=\"isEditable\"\n class=\"adf-property-field adf-dateitem-editable-controls\"\n (click)=\"showDatePicker()\"\n tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n >\n <input\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 />\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 />\n </div>\n </div>\n</div>\n", styles: [".adf-card-view-dateitem .adf-property-value{padding-top:6px;padding-bottom:6px;line-height:20px;color:var(--adf-metadata-property-panel-title-color);margin-top:10px}.adf-card-view-dateitem .adf-property-value.adf-property-value-editable{display:flex;align-items:center;border-radius:6px;border-bottom:inherit;margin-bottom:18px}.adf-card-view-dateitem .adf-property-value.adf-property-readonly-value{padding:0 0 0 12px}.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-dateitem-editable{cursor:pointer;width:100%}.adf-card-view-dateitem .adf-dateitem-editable-controls{display:flex;align-items:center;justify-content:space-between}.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}.adf-card-view-dateitem .adf-dateitem-editable-controls .adf-date-reset-icon{position:relative}\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: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDatetimepickerModule }, { kind: "component", type: i7$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: i7$1.MatDatetimepickerToggleComponent, selector: "mat-datetimepicker-toggle", inputs: ["for", "disabled"], exportAs: ["matDatetimepickerToggle"] }, { kind: "directive", type: i7$1.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: ReactiveFormsModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
18463
18463
|
}
|
|
18464
18464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CardViewDateItemComponent, decorators: [{
|
|
18465
18465
|
type: Component,
|
|
@@ -18479,7 +18479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
18479
18479
|
MatDatepickerModule,
|
|
18480
18480
|
MatSnackBarModule,
|
|
18481
18481
|
ReactiveFormsModule
|
|
18482
|
-
], encapsulation: ViewEncapsulation.None, host: { class: 'adf-card-view-dateitem' }, template: "<mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n *ngIf=\"showProperty && !isEditable\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n>\n {{ property.label | translate }}\n</mat-label>\n\n<div class=\"adf-property-value\" [ngClass]=\"{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }\">\n <span *ngIf=\"!isEditable && !property.multivalued\" [attr.data-automation-id]=\"'card-' + property.type + '-value-' + property.key\">\n <span\n *ngIf=\"showProperty\"\n [attr.data-automation-id]=\"'card-dateitem-' + property.key\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >{{ property.displayValue }}</span\n >\n </span>\n <mat-form-field *ngIf=\"isEditable && !property.multivalued\" class=\"adf-dateitem-editable hxp-input\">\n <mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n *ngIf=\"isEditable\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n {{ property.label | translate }}\n </mat-label>\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 tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n >\n <span *ngIf=\"showProperty; else elseEmptyValueBlock\" [attr.data-automation-id]=\"'card-' + property.type + '-value-' + property.key\">\n {{ property.displayValue }}</span\n >\n </span>\n </div>\n <input\n matInput\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 <mat-icon\n matIconSuffix\n *ngIf=\"showClearAction\"\n class=\"adf-date-reset-icon\"\n (click)=\"onDateClear()\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.CLEAR' | translate\"\n [attr.data-automation-id]=\"'datepicker-date-clear-' + property.key\"\n >\n clear\n </mat-icon>\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 />\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 />\n </mat-form-field>\n <ng-template #elseEmptyValueBlock>\n {{ property.default | translate }}\n </ng-template>\n\n <div *ngIf=\"property.multivalued\" class=\"adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable\">\n <mat-chip-listbox #chipList class=\"adf-textitem-chip-list\">\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 <mat-icon *ngIf=\"isEditable\" matChipRemove>cancel</mat-icon>\n </mat-chip-option>\n </mat-chip-listbox>\n\n <div\n *ngIf=\"isEditable\"\n class=\"adf-property-field adf-dateitem-editable-controls\"\n (click)=\"showDatePicker()\"\n tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n >\n <input\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 />\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 />\n </div>\n </div>\n</div>\n", styles: [".adf-card-view-dateitem .adf-property-value{padding-top:6px;padding-bottom:6px;line-height:20px;color:var(--adf-metadata-property-panel-title-color);margin-top:10px}.adf-card-view-dateitem .adf-property-value.adf-property-value-editable{display:flex;align-items:center;border-radius:6px;border-bottom:inherit;margin-bottom:18px}.adf-card-view-dateitem .adf-property-value.adf-property-readonly-value{padding:0 0 0 12px}.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-dateitem-editable{cursor:pointer;width:100%}.adf-card-view-dateitem .adf-dateitem-editable-controls{display:flex;align-items:center;justify-content:space-between}.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}.adf-card-view-dateitem .adf-dateitem-editable-controls .adf-date-reset-icon{position:relative}\n"] }]
|
|
18482
|
+
], encapsulation: ViewEncapsulation.None, host: { class: 'adf-card-view-dateitem' }, template: "<mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n *ngIf=\"showProperty && !isEditable\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n>\n {{ property.label | translate }}\n</mat-label>\n\n<div class=\"adf-property-value\" [ngClass]=\"{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }\">\n <span *ngIf=\"!isEditable && !property.multivalued\" [attr.data-automation-id]=\"'card-' + property.type + '-value-' + property.key\">\n <span\n *ngIf=\"showProperty\"\n [attr.data-automation-id]=\"'card-dateitem-' + property.key\"\n (dblclick)=\"copyToClipboard(property.displayValue)\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >{{ property.displayValue }}</span\n >\n </span>\n <mat-form-field *ngIf=\"isEditable && !property.multivalued\" class=\"adf-dateitem-editable hxp-input\" [floatLabel]=\"property.default ? 'always' : null\">\n <mat-label\n class=\"adf-property-label\"\n [attr.data-automation-id]=\"'card-dateitem-label-' + property.key\"\n *ngIf=\"isEditable\"\n [attr.for]=\"'card-view-dateitem-' + property.key\"\n [ngClass]=\"{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }\"\n [title]=\"'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate\"\n >\n {{ property.label | translate }}\n </mat-label>\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 tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n >\n <span *ngIf=\"showProperty; else elseEmptyValueBlock\" [attr.data-automation-id]=\"'card-' + property.type + '-value-' + property.key\">\n {{ property.displayValue }}</span\n >\n </span>\n </div>\n <input\n matInput\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 <mat-icon\n matIconSuffix\n *ngIf=\"showClearAction\"\n class=\"adf-date-reset-icon\"\n (click)=\"onDateClear()\"\n [attr.title]=\"'CORE.METADATA.ACTIONS.CLEAR' | translate\"\n [attr.data-automation-id]=\"'datepicker-date-clear-' + property.key\"\n >\n clear\n </mat-icon>\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 />\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 />\n </mat-form-field>\n <ng-template #elseEmptyValueBlock>\n {{ property.default | translate }}\n </ng-template>\n\n <div *ngIf=\"property.multivalued\" class=\"adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable\">\n <mat-chip-listbox #chipList class=\"adf-textitem-chip-list\">\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 <mat-icon *ngIf=\"isEditable\" matChipRemove>cancel</mat-icon>\n </mat-chip-option>\n </mat-chip-listbox>\n\n <div\n *ngIf=\"isEditable\"\n class=\"adf-property-field adf-dateitem-editable-controls\"\n (click)=\"showDatePicker()\"\n tabindex=\"0\"\n role=\"button\"\n (keyup.enter)=\"showDatePicker()\"\n >\n <input\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 />\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 />\n </div>\n </div>\n</div>\n", styles: [".adf-card-view-dateitem .adf-property-value{padding-top:6px;padding-bottom:6px;line-height:20px;color:var(--adf-metadata-property-panel-title-color);margin-top:10px}.adf-card-view-dateitem .adf-property-value.adf-property-value-editable{display:flex;align-items:center;border-radius:6px;border-bottom:inherit;margin-bottom:18px}.adf-card-view-dateitem .adf-property-value.adf-property-readonly-value{padding:0 0 0 12px}.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-dateitem-editable{cursor:pointer;width:100%}.adf-card-view-dateitem .adf-dateitem-editable-controls{display:flex;align-items:center;justify-content:space-between}.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}.adf-card-view-dateitem .adf-dateitem-editable-controls .adf-date-reset-icon{position:relative}\n"] }]
|
|
18483
18483
|
}], ctorParameters: () => [{ type: i1$2.DateAdapter }, { type: UserPreferencesService }, { type: ClipboardService }, { type: TranslationService }], propDecorators: { displayEmpty: [{
|
|
18484
18484
|
type: Input
|
|
18485
18485
|
}], displayClearAction: [{
|