Untitled

<div class="ts-cell-refresh-capability">
  <mds-text size="lg" fontweight="bold" class="ts-cell-refresh-capability-header">{{
    labels.CELL_REFRESH_HEADING
  }}</mds-text>
  <mds-text size="md" class="mds-u-padding-bottom-sm ts-cell-refresh-capability-description">{{
    labels.CELL_REFRESH_DESCRIPTION
  }}</mds-text>
  <mds-form-field class="ts-cell-refresh-capability-options">
    <div class="mds-u-display-flex">
      <ng-container *ngFor="let option of options">
        <mds-card
          data-test="cell-refresh-capability-option"
          class="mds-u-flex-grow-1 mds-u-padding-bottom-md mds-u-padding-right-lg"
          [checked]="option.value === cell.cellRefresh"
          [name]="'cellCellRefresh-' + cell.order"
          [selectable]="true"
          [selectiondisabled]="isDisabled"
          [selectedlabel]="option.label"
          [unselectedlabel]="option.label"
          [value]="option.value"
          (mdsSelectionChanged)="changeCellRefresh($event.detail)">
          <div slot="card-body">
            <mds-text size="sm">{{ labels['CELL_REFRESH_OPTION_DESCRIPTION_' + option.value] }}</mds-text>
            <mds-text size="sm" class="mds-u-margin-top-sm"
              >{{ labels['CELL_REFRESH_EXAMPLE_TEXT'] }} {{ exampleDate }}</mds-text
            >
            <div class="mds-u-padding-top-sm">
              <div class="mds-u-padding-top-sm">
                <mds-label>{{ labels.BEFORE_REFRESH }}</mds-label>
                <div *ngIf="cell?.purchasingPeriod" class="purchasePeriod">
                  <span
                    class="mds-u-bg-color-surface-light mds-u-border-radius-all mds-u-padding-all-xs mds-u-margin-top-xs mds-u-font-size-text-sm mds-u-font-color-ink-primary">
                    <span class="mds-u-font-weight-bold">{{ labels.TIME_PERIODS_HEADING }}:</span>
                    <span class="mds-u-font-weight-regular">{{
                      cell | aslCellRefreshPeriod: 'before':option.value:false
                    }}</span>
                  </span>
                </div>
                <div
                  class="mds-u-bg-color-surface-light mds-u-border-radius-all mds-u-padding-all-xs mds-u-margin-top-xs purchasePeriod"
                  *ngIf="cell?.purchasingPeriod">
                  <span class="mds-u-font-size-text-sm mds-u-font-color-ink-primary mds-u-font-weight-bold"
                    >{{ labels.TIME_PERIODS_HEADING }}:
                  </span>
                  <span class="mds-u-font-size-text-sm mds-u-font-color-ink-primary mds-u-font-weight-regular">{{
                    cell | aslCellRefreshPeriod: 'before':option.value:false
                  }}</span>
                </div>
              </div>
              <div class="mds-u-padding-top-sm">
                <mds-label>{{ labels.AFTER_REFRESH }}</mds-label>
                <div
                  class="mds-u-bg-color-surface-light mds-u-border-radius-all mds-u-padding-all-xs mds-u-margin-top-xs priorPeriod"
                  *ngIf="cell?.priorPeriod">
                  <span class="mds-u-font-size-text-sm mds-u-font-color-ink-primary mds-u-font-weight-bold"
                    >{{ labels.PRIOR_PERIODS_HEADING }}:
                  </span>
                  <span class="mds-u-font-size-text-sm mds-u-font-color-ink-primary mds-u-font-weight-regular">{{
                    cell | aslCellRefreshPeriod: 'after':option.value:true
                  }}</span>
                </div>
                <div
                  class="mds-u-bg-color-surface-light mds-u-border-radius-all mds-u-padding-all-xs mds-u-margin-top-xs purchasePeriod"
                  *ngIf="cell?.purchasingPeriod">
                  <span class="mds-u-font-size-text-sm mds-u-font-color-ink-primary mds-u-font-weight-bold"
                    >{{ labels.TIME_PERIODS_HEADING }}:
                  </span>
                  <span class="mds-u-font-size-text-sm mds-u-font-color-ink-primary mds-u-font-weight-regular">{{
                    cell | aslCellRefreshPeriod: 'after':option.value:false
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </mds-card>
      </ng-container>
    </div>
  </mds-form-field>
</div>