Chris Rodriguez f27b94017a [ACA-2474] adding instructions to the calendar for use (#5387)
* chore: adding instructions to the calendar for use

* chore: updating lockfile

* chore: fixing package

* chore: updated html for test

* chore: adding instructions to the calendar for use

* chore: updating lockfile

* chore: fixing package

* Wchore: updated html for test

* chore: removed unnused random string gen

* chore: synced lockfile; removed unnused prop
2020-01-25 15:04:23 +01:00

50 lines
2.4 KiB
HTML

<div class="adf-sr-only" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">{{'CORE.METADATA.ACCESSIBILITY.DATEPICKER' | translate}}</div>
<div [attr.data-automation-id]="'card-dateitem-label-' + property.key" class="adf-property-label" *ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div>
<div class="adf-property-value">
<span *ngIf="!isEditable()" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
<span [attr.data-automation-id]="'card-dateitem-' + property.key">
<span *ngIf="showProperty()">{{ property.displayValue }}</span>
</span>
</span>
<div *ngIf="isEditable()" class="adf-dateitem-editable">
<div class="adf-dateitem-editable-controls">
<span
class="adf-datepicker-toggle"
[attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
(click)="showDatePicker()">
<span [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key" *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
</span>
<mat-icon *ngIf="showClearAction()"
class="adf-date-reset-icon"
(click)="onDateClear()"
[attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
[attr.data-automation-id]="'datepicker-date-clear-' + property.key">
clear
</mat-icon>
<mat-datetimepicker-toggle
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'datepickertoggle-' + property.key"
[for]="datetimePicker">
</mat-datetimepicker-toggle>
</div>
<input class="adf-invisible-date-input"
[matDatetimepicker]="datetimePicker"
[value]="valueDate"
(dateChange)="onDateChanged($event)"
[attr.aria-describedby]="'card-' + property.type + '-value-' + property.key">
<mat-datetimepicker #datetimePicker
[type]="property.type"
timeInterval="5"
[attr.data-automation-id]="'datepicker-' + property.key"
[startAt]="valueDate">
</mat-datetimepicker>
</div>
<ng-template #elseEmptyValueBlock>
{{ property.default | translate }}
</ng-template>
</div>