skyux/libs/components/pages/src/lib/modules/needs-attention/needs-attention.component.html at 4d792effb77d9602d8d5d1f961e91153fa336c8e · blackbaud/skyux · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<div
  class="sky-needs-attention-container sky-box"
  [skyThemeClass]="{
    'sky-padding-even-large sky-shadow': 'default',
    'sky-elevation-1-bordered sky-padding-even-xl': 'modern'
  }"
>
  <h2 class="sky-font-heading-2">
    {{ 'sky_action_hub_needs_attention' | skyLibResources }}
  </h2>
  <sky-fluid-grid [gutterSize]="gutterSize" [disableMargin]="true">
    <sky-row>
      <sky-column *ngIf="items?.length === 0" [screenXSmall]="12">
        {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}
      </sky-column>
      <sky-column
        *ngFor="let item of items; let isLast = last"
        [screenSmall]="items.length > 6 ? 6 : 12"
        [screenXSmall]="12"
      >
        <ng-template #link>
          <sky-icon
            *skyThemeIf="'default'"
            class="sky-needs-attention-item-icon"
            icon="chevron-right"
          ></sky-icon>
          <sky-icon
            *skyThemeIf="'modern'"
            class="sky-needs-attention-item-icon"
            icon="chevron-right"
            iconType="skyux"
          ></sky-icon>
          <span skyTrim class="sky-needs-attention-item-key-info"
            >{{ item.title }} {{ item.message }}</span
          >
        </ng-template>
        <a
          *ngIf="item | linkAs: 'skyAppLink'"
          [skyAppLink]="item.permalink.route.commands"
          [queryParams]="item.permalink.route.extras?.queryParams"
          [queryParamsHandling]="
            item.permalink.route.extras?.queryParamsHandling
          "
          [fragment]="item.permalink.route.extras?.fragment"
          [preserveFragment]="item.permalink.route.extras?.preserveFragment"
          [skipLocationChange]="item.permalink.route.extras?.skipLocationChange"
          [replaceUrl]="item.permalink.route.extras?.replaceUrl"
          [state]="item.permalink.route.extras?.state"
          class="sky-needs-attention-item sky-padding-vertical-lg"
          [ngClass]="{
            'sky-border-bottom-row': !isLast
          }"
        >
          <ng-container *ngTemplateOutlet="link"></ng-container>
        </a>
        <a
          *ngIf="item | linkAs: 'skyHref'"
          [skyHref]="item.permalink.url"
          class="sky-needs-attention-item sky-padding-vertical-lg"
          [ngClass]="{
            'sky-border-bottom-row': !isLast
          }"
        >
          <ng-container *ngTemplateOutlet="link"></ng-container>
        </a>
        <a
          *ngIf="item | linkAs: 'href'"
          [href]="item.permalink.url"
          class="sky-needs-attention-item sky-padding-vertical-lg"
          [ngClass]="{
            'sky-border-bottom-row': !isLast
          }"
        >
          <ng-container *ngTemplateOutlet="link"></ng-container>
        </a>
        <button
          *ngIf="item | linkAs: 'button'"
          class="sky-needs-attention-item sky-padding-vertical-lg sky-btn sky-btn-link-inline"
          [ngClass]="{
            'sky-border-bottom-row': !isLast
          }"
          type="button"
          (click)="item.click({item})"
        >
          <ng-container *ngTemplateOutlet="link"></ng-container>
        </button>
      </sky-column>
    </sky-row>
  </sky-fluid-grid>
</div>