@flusys/ng-ui 8.0.2 → 8.1.0

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.
Files changed (4) hide show
  1. package/fesm2022/flusys-ng-ui.mjs +30 -26
  2. package/fesm2022/flusys-ng-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/flusys-ng-ui.d.ts +2 -0
package/fesm2022/flusys-ng-ui.mjs CHANGED
@@ -1472,9 +1472,8 @@ class ConfirmDialog {
1472
1472
  <p
1473
1473
  [id]="descId"
1474
1474
  class="text-sm text-(--f-text-muted-color) mt-1 leading-relaxed"
1475
- >
1476
- {{ c.message }}
1477
- </p>
1475
+ [innerHTML]="c.message"
1476
+ ></p>
1478
1477
  }
1479
1478
  </div>
1480
1479
  </div>
@@ -1564,9 +1563,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
1564
1563
  <p
1565
1564
  [id]="descId"
1566
1565
  class="text-sm text-(--f-text-muted-color) mt-1 leading-relaxed"
1567
- >
1568
- {{ c.message }}
1569
- </p>
1566
+ [innerHTML]="c.message"
1567
+ ></p>
1570
1568
  }
1571
1569
  </div>
1572
1570
  </div>
@@ -1748,10 +1746,10 @@ class ToastComponent {
1748
1746
  <ui-icon [name]="iconName(msg.severity)" class="mt-0.5 shrink-0 text-base" [style.color]="severityColor(msg.severity)"></ui-icon>
1749
1747
  <div class="flex-1 min-w-0">
1750
1748
  @if (msg.summary) {
1751
- <div class="font-semibold text-sm leading-snug">{{ msg.summary }}</div>
1749
+ <div class="font-semibold text-sm leading-snug" [innerHTML]="msg.summary"></div>
1752
1750
  }
1753
1751
  @if (msg.detail) {
1754
- <div class="text-xs opacity-75 mt-1 leading-snug">{{ msg.detail }}</div>
1752
+ <div class="text-xs opacity-75 mt-1 leading-snug" [innerHTML]="msg.detail"></div>
1755
1753
  }
1756
1754
  </div>
1757
1755
  <button
@@ -1791,10 +1789,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
1791
1789
  <ui-icon [name]="iconName(msg.severity)" class="mt-0.5 shrink-0 text-base" [style.color]="severityColor(msg.severity)"></ui-icon>
1792
1790
  <div class="flex-1 min-w-0">
1793
1791
  @if (msg.summary) {
1794
- <div class="font-semibold text-sm leading-snug">{{ msg.summary }}</div>
1792
+ <div class="font-semibold text-sm leading-snug" [innerHTML]="msg.summary"></div>
1795
1793
  }
1796
1794
  @if (msg.detail) {
1797
- <div class="text-xs opacity-75 mt-1 leading-snug">{{ msg.detail }}</div>
1795
+ <div class="text-xs opacity-75 mt-1 leading-snug" [innerHTML]="msg.detail"></div>
1798
1796
  }
1799
1797
  </div>
1800
1798
  <button
@@ -2565,7 +2563,7 @@ class MessageComponent {
2565
2563
  <div [class]="classes()" role="alert">
2566
2564
  <ui-icon [name]="iconName()" [class]="'mt-0.5 shrink-0 ' + iconColor()"></ui-icon>
2567
2565
  <div class="flex-1 min-w-0">
2568
- @if (text()) { <span class="text-sm leading-snug">{{ text() }}</span> }
2566
+ @if (text()) { <span class="text-sm leading-snug" [innerHTML]="text()"></span> }
2569
2567
  <ng-content />
2570
2568
  </div>
2571
2569
  @if (closable()) {
@@ -2594,7 +2592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
2594
2592
  <div [class]="classes()" role="alert">
2595
2593
  <ui-icon [name]="iconName()" [class]="'mt-0.5 shrink-0 ' + iconColor()"></ui-icon>
2596
2594
  <div class="flex-1 min-w-0">
2597
- @if (text()) { <span class="text-sm leading-snug">{{ text() }}</span> }
2595
+ @if (text()) { <span class="text-sm leading-snug" [innerHTML]="text()"></span> }
2598
2596
  <ng-content />
2599
2597
  </div>
2600
2598
  @if (closable()) {
@@ -7599,6 +7597,20 @@ class DatePickerComponent {
7599
7597
  }
7600
7598
  return `${base} rounded-md hover:bg-(--f-content-hover-background) ${day.otherMonth ? 'text-(--f-text-muted-color)' : ''}`;
7601
7599
  }
7600
+ monthClass(index) {
7601
+ const base = 'text-sm py-2.5 rounded-md transition-colors cursor-pointer focus:outline-none focus-visible:ring-focus';
7602
+ if (index === this.viewMonth()) {
7603
+ return `${base} bg-primary text-primary-contrast`;
7604
+ }
7605
+ return `${base} hover:bg-(--f-content-hover-background)`;
7606
+ }
7607
+ yearClass(year) {
7608
+ const base = 'text-sm py-2.5 rounded-md transition-colors cursor-pointer focus:outline-none focus-visible:ring-focus';
7609
+ if (year === this.viewYear()) {
7610
+ return `${base} bg-primary text-primary-contrast`;
7611
+ }
7612
+ return `${base} hover:bg-(--f-content-hover-background)`;
7613
+ }
7602
7614
  formatDate(date, format) {
7603
7615
  const yyyy = String(date.getFullYear());
7604
7616
  const yy = yyyy.slice(-2);
@@ -8147,9 +8159,7 @@ class DatePickerComponent {
8147
8159
  type="button"
8148
8160
  role="gridcell"
8149
8161
  [attr.aria-selected]="i === viewMonth()"
8150
- class="text-sm py-2.5 rounded-md transition-colors cursor-pointer focus:outline-none focus-visible:ring-focus hover:bg-(--f-content-hover-background)"
8151
- [class.bg-primary]="i === viewMonth()"
8152
- [class.text-primary-contrast]="i === viewMonth()"
8162
+ [class]="monthClass(i)"
8153
8163
  (click)="selectMonth(i)"
8154
8164
  >
8155
8165
  {{ m }}
@@ -8189,9 +8199,7 @@ class DatePickerComponent {
8189
8199
  type="button"
8190
8200
  role="gridcell"
8191
8201
  [attr.aria-selected]="y === viewYear()"
8192
- class="text-sm py-2.5 rounded-md transition-colors cursor-pointer focus:outline-none focus-visible:ring-focus hover:bg-(--f-content-hover-background)"
8193
- [class.bg-primary]="y === viewYear()"
8194
- [class.text-primary-contrast]="y === viewYear()"
8202
+ [class]="yearClass(y)"
8195
8203
  (click)="selectYear(y)"
8196
8204
  >
8197
8205
  {{ y }}
@@ -8542,9 +8550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
8542
8550
  type="button"
8543
8551
  role="gridcell"
8544
8552
  [attr.aria-selected]="i === viewMonth()"
8545
- class="text-sm py-2.5 rounded-md transition-colors cursor-pointer focus:outline-none focus-visible:ring-focus hover:bg-(--f-content-hover-background)"
8546
- [class.bg-primary]="i === viewMonth()"
8547
- [class.text-primary-contrast]="i === viewMonth()"
8553
+ [class]="monthClass(i)"
8548
8554
  (click)="selectMonth(i)"
8549
8555
  >
8550
8556
  {{ m }}
@@ -8584,9 +8590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
8584
8590
  type="button"
8585
8591
  role="gridcell"
8586
8592
  [attr.aria-selected]="y === viewYear()"
8587
- class="text-sm py-2.5 rounded-md transition-colors cursor-pointer focus:outline-none focus-visible:ring-focus hover:bg-(--f-content-hover-background)"
8588
- [class.bg-primary]="y === viewYear()"
8589
- [class.text-primary-contrast]="y === viewYear()"
8593
+ [class]="yearClass(y)"
8590
8594
  (click)="selectYear(y)"
8591
8595
  >
8592
8596
  {{ y }}
@@ -22731,7 +22735,7 @@ class ConfirmPopupComponent {
22731
22735
  }
22732
22736
  <div class="flex-1 min-w-0">
22733
22737
  @if (c.header) { <div [id]="headerId" class="text-sm font-semibold text-(--f-text-color)">{{ c.header }}</div> }
22734
- @if (c.message) { <p [id]="descId" class="text-sm text-(--f-text-muted-color) mt-1">{{ c.message }}</p> }
22738
+ @if (c.message) { <p [id]="descId" class="text-sm text-(--f-text-muted-color) mt-1" [innerHTML]="c.message"></p> }
22735
22739
  </div>
22736
22740
  </div>
22737
22741
  <div class="flex justify-end gap-2 mt-3">
@@ -22792,7 +22796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
22792
22796
  }
22793
22797
  <div class="flex-1 min-w-0">
22794
22798
  @if (c.header) { <div [id]="headerId" class="text-sm font-semibold text-(--f-text-color)">{{ c.header }}</div> }
22795
- @if (c.message) { <p [id]="descId" class="text-sm text-(--f-text-muted-color) mt-1">{{ c.message }}</p> }
22799
+ @if (c.message) { <p [id]="descId" class="text-sm text-(--f-text-muted-color) mt-1" [innerHTML]="c.message"></p> }
22796
22800
  </div>
22797
22801
  </div>
22798
22802
  <div class="flex justify-end gap-2 mt-3">