@foxeltech/angular-ui 0.3.0 → 0.3.1

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 (14) hide show
  1. package/fesm2022/foxeltech-angular-ui.mjs +205 -205
  2. package/fesm2022/foxeltech-angular-ui.mjs.map +1 -1
  3. package/package.json +12 -11
  4. package/src/lib/ui/components/datetime-picker/datetime-picker.component.html +8 -4
  5. package/src/lib/ui/components/drawer/drawer.component.html +75 -61
  6. package/src/lib/ui/components/loading-panel/loading-panel.component.html +53 -53
  7. package/src/lib/ui/components/radio-button/radio-button.component.html +24 -24
  8. package/src/lib/ui/components/search-bar/search-bar.component.html +11 -10
  9. package/src/lib/ui/components/select/select.component.html +8 -6
  10. package/src/lib/ui/components/slider/slider.component.html +17 -15
  11. package/src/lib/ui/components/tab-group/tab-group.component.html +35 -32
  12. package/src/lib/ui/components/toast/toast.component.html +36 -34
  13. package/src/lib/ui/components/tree-diagram/tree-diagram.component.html +21 -19
  14. /package/{index.d.ts → types/foxeltech-angular-ui.d.ts} +0 -0
package/src/lib/ui/components/tab-group/tab-group.component.html CHANGED
@@ -9,7 +9,7 @@
9
9
  [style.pointerEvents]="canScrollLeft ? 'auto' : 'none'"
10
10
  [attr.tabindex]="canScrollLeft ? null : -1"
11
11
  [attr.aria-hidden]="!canScrollLeft"
12
- >
12
+ >
13
13
  <svg
14
14
  aria-hidden="true"
15
15
  xmlns="http://www.w3.org/2000/svg"
@@ -17,7 +17,7 @@
17
17
  fill="none"
18
18
  viewBox="0 0 24 24"
19
19
  stroke="currentColor"
20
- >
20
+ >
21
21
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
22
22
  </svg>
23
23
  </button>
@@ -27,38 +27,39 @@
27
27
  role="tablist"
28
28
  class="relative flex overflow-x-auto no-scrollbar scroll-smooth"
29
29
  (scroll)="onScroll()"
30
- >
31
- <button
32
- *ngFor="let tab of tabs.toArray(); let i = index"
33
- type="button"
34
- role="tab"
35
- [attr.aria-selected]="i === activeIndex"
36
- [tabindex]="i === activeIndex ? 0 : -1"
37
- (click)="selectTab(i)"
38
- (keydown)="onTabKeydown($event, i)"
39
- class="tab-btn tab-bar-btn"
40
30
  >
41
- <div class="flex flex-row items-center justify-center">
42
- @if (tab.icon) {
43
- <fx-ui-hero-icon
44
- [icon]="tab.icon"
45
- [size]="20"
46
- class="flex mr-[2px]"
31
+ @for (tab of tabs.toArray(); track tab; let i = $index) {
32
+ <button
33
+ type="button"
34
+ role="tab"
35
+ [attr.aria-selected]="i === activeIndex"
36
+ [tabindex]="i === activeIndex ? 0 : -1"
37
+ (click)="selectTab(i)"
38
+ (keydown)="onTabKeydown($event, i)"
39
+ class="tab-btn tab-bar-btn"
40
+ >
41
+ <div class="flex flex-row items-center justify-center">
42
+ @if (tab.icon) {
43
+ <fx-ui-hero-icon
44
+ [icon]="tab.icon"
45
+ [size]="20"
46
+ class="flex mr-[2px]"
47
47
  [ngClass]="{
48
48
  'text-gradient-primary-start mb-small': i === activeIndex,
49
49
  'text-text-placeholder': i !== activeIndex,
50
50
  }"
51
- ></fx-ui-hero-icon>
52
- }
53
- <div
51
+ ></fx-ui-hero-icon>
52
+ }
53
+ <div
54
54
  [ngClass]="
55
55
  i === activeIndex ? 'txt-field-label text-gradient-primary-start' : 'txt-placeholder'
56
56
  "
57
- >
58
- {{ tab.label }}
57
+ >
58
+ {{ tab.label }}
59
+ </div>
59
60
  </div>
60
- </div>
61
- </button>
61
+ </button>
62
+ }
62
63
 
63
64
  <span #underline class="underline" style="width: 0; transform: translateX(0)"></span>
64
65
  </div>
@@ -72,7 +73,7 @@
72
73
  [style.pointerEvents]="canScrollRight ? 'auto' : 'none'"
73
74
  [attr.tabindex]="canScrollRight ? null : -1"
74
75
  [attr.aria-hidden]="!canScrollRight"
75
- >
76
+ >
76
77
  <svg
77
78
  aria-hidden="true"
78
79
  xmlns="http://www.w3.org/2000/svg"
@@ -80,7 +81,7 @@
80
81
  fill="none"
81
82
  viewBox="0 0 24 24"
82
83
  stroke="currentColor"
83
- >
84
+ >
84
85
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
85
86
  </svg>
86
87
  </button>
@@ -88,9 +89,11 @@
88
89
 
89
90
  <!-- Tab content -->
90
91
  <div class="transition-all duration-300 ease-in-out mt-4">
91
- <ng-container *ngFor="let tab of tabs.toArray(); let i = index">
92
- <div *ngIf="i === activeIndex" role="tabpanel" class="animate-fadeIn">
93
- <ng-container *ngTemplateOutlet="tab.content"></ng-container>
94
- </div>
95
- </ng-container>
92
+ @for (tab of tabs.toArray(); track tab; let i = $index) {
93
+ @if (i === activeIndex) {
94
+ <div role="tabpanel" class="animate-fadeIn">
95
+ <ng-container *ngTemplateOutlet="tab.content"></ng-container>
96
+ </div>
97
+ }
98
+ }
96
99
  </div>
package/src/lib/ui/components/toast/toast.component.html CHANGED
@@ -9,41 +9,43 @@
9
9
  'border-warning': type === 'warning',
10
10
  'border-information': type === 'info'
11
11
  }"
12
- >
12
+ >
13
13
  <div class="" aria-hidden="true">
14
14
  @switch (type) { @case('success') {
15
- <fx-ui-hero-icon
16
- icon="check-circle"
17
- [solid]="true"
18
- [size]="30"
19
- class="text-success"
20
- ></fx-ui-hero-icon>
21
- } @case('error') {
22
- <fx-ui-hero-icon
23
- icon="exclamation-circle"
24
- [solid]="true"
25
- [size]="30"
26
- class="text-critical"
27
- ></fx-ui-hero-icon>
28
- } @case('warning') {
29
- <fx-ui-hero-icon
30
- icon="exclamation-triangle"
31
- [solid]="true"
32
- [size]="30"
33
- class="text-warning"
34
- ></fx-ui-hero-icon>
35
- } @default {
36
- <fx-ui-hero-icon
37
- icon="information-circle"
38
- [solid]="true"
39
- [size]="30"
40
- class="text-information"
41
- ></fx-ui-hero-icon>
42
- } }
43
- </div>
15
+ <fx-ui-hero-icon
16
+ icon="check-circle"
17
+ [solid]="true"
18
+ [size]="30"
19
+ class="text-success"
20
+ ></fx-ui-hero-icon>
21
+ } @case('error') {
22
+ <fx-ui-hero-icon
23
+ icon="exclamation-circle"
24
+ [solid]="true"
25
+ [size]="30"
26
+ class="text-critical"
27
+ ></fx-ui-hero-icon>
28
+ } @case('warning') {
29
+ <fx-ui-hero-icon
30
+ icon="exclamation-triangle"
31
+ [solid]="true"
32
+ [size]="30"
33
+ class="text-warning"
34
+ ></fx-ui-hero-icon>
35
+ } @default {
36
+ <fx-ui-hero-icon
37
+ icon="information-circle"
38
+ [solid]="true"
39
+ [size]="30"
40
+ class="text-information"
41
+ ></fx-ui-hero-icon>
42
+ } }
43
+ </div>
44
44
 
45
- <div class="flex flex-col">
46
- <strong *ngIf="title" class="txt-field-label">{{ title }}</strong>
47
- <p class="txt-default">{{ message }}</p>
45
+ <div class="flex flex-col">
46
+ @if (title) {
47
+ <strong class="txt-field-label">{{ title }}</strong>
48
+ }
49
+ <p class="txt-default">{{ message }}</p>
50
+ </div>
48
51
  </div>
49
- </div>
package/src/lib/ui/components/tree-diagram/tree-diagram.component.html CHANGED
@@ -4,20 +4,21 @@
4
4
  <div
5
5
  #root
6
6
  class="mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center"
7
- >
7
+ >
8
8
  {{ data.label }}
9
9
  </div>
10
10
 
11
11
  <!-- CHILDREN -->
12
12
  <div class="mt-16 flex justify-center gap-16">
13
- <div
14
- *ngFor="let child of data.children"
15
- #child
16
- class="w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center"
17
- >
18
- <div class="font-semibold text-lg">{{ child.label }}</div>
19
- <div class="mt-1 text-sm opacity-90">{{ child.status }}</div>
20
- </div>
13
+ @for (child of data.children; track child) {
14
+ <div
15
+ #child
16
+ class="w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center"
17
+ >
18
+ <div class="font-semibold text-lg">{{ child.label }}</div>
19
+ <div class="mt-1 text-sm opacity-90">{{ child.status }}</div>
20
+ </div>
21
+ }
21
22
  </div>
22
23
 
23
24
  <!-- SVG CONNECTORS -->
@@ -25,16 +26,17 @@
25
26
  class="absolute inset-0 pointer-events-none"
26
27
  [attr.width]="svgWidth"
27
28
  [attr.height]="svgHeight"
28
- >
29
- <line
30
- *ngFor="let line of lines"
31
- [attr.x1]="line.x1"
32
- [attr.y1]="line.y1"
33
- [attr.x2]="line.x2"
34
- [attr.y2]="line.y2"
35
- stroke="#1f2937"
36
- stroke-width="2"
37
- />
29
+ >
30
+ @for (line of lines; track line) {
31
+ <line
32
+ [attr.x1]="line.x1"
33
+ [attr.y1]="line.y1"
34
+ [attr.x2]="line.x2"
35
+ [attr.y2]="line.y2"
36
+ stroke="#1f2937"
37
+ stroke-width="2"
38
+ />
39
+ }
38
40
  </svg>
39
41
 
40
42
  </div>
/package/{index.d.ts → types/foxeltech-angular-ui.d.ts} RENAMED
File without changes