ngx-com 0.0.21 → 0.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 (114) hide show
  1. package/README.md +137 -33
  2. package/fesm2022/ngx-com-components-alert.mjs +21 -11
  3. package/fesm2022/ngx-com-components-alert.mjs.map +1 -1
  4. package/fesm2022/ngx-com-components-avatar.mjs +9 -7
  5. package/fesm2022/ngx-com-components-avatar.mjs.map +1 -1
  6. package/fesm2022/ngx-com-components-button.mjs +1 -1
  7. package/fesm2022/ngx-com-components-button.mjs.map +1 -1
  8. package/fesm2022/ngx-com-components-calendar.mjs +27 -3112
  9. package/fesm2022/ngx-com-components-calendar.mjs.map +1 -1
  10. package/fesm2022/ngx-com-components-card.mjs +8 -8
  11. package/fesm2022/ngx-com-components-card.mjs.map +1 -1
  12. package/fesm2022/ngx-com-components-carousel.mjs +16 -4
  13. package/fesm2022/ngx-com-components-carousel.mjs.map +1 -1
  14. package/fesm2022/ngx-com-components-checkbox.mjs +1 -1
  15. package/fesm2022/ngx-com-components-checkbox.mjs.map +1 -1
  16. package/fesm2022/ngx-com-components-code-block.mjs +9 -9
  17. package/fesm2022/ngx-com-components-code-block.mjs.map +1 -1
  18. package/fesm2022/ngx-com-components-collapsible.mjs +15 -13
  19. package/fesm2022/ngx-com-components-collapsible.mjs.map +1 -1
  20. package/fesm2022/ngx-com-components-confirm.mjs +4 -4
  21. package/fesm2022/ngx-com-components-confirm.mjs.map +1 -1
  22. package/fesm2022/ngx-com-components-datepicker.mjs +2334 -0
  23. package/fesm2022/ngx-com-components-datepicker.mjs.map +1 -0
  24. package/fesm2022/ngx-com-components-dialog.mjs +47 -45
  25. package/fesm2022/ngx-com-components-dialog.mjs.map +1 -1
  26. package/fesm2022/ngx-com-components-dropdown.mjs +446 -340
  27. package/fesm2022/ngx-com-components-dropdown.mjs.map +1 -1
  28. package/fesm2022/ngx-com-components-empty-state.mjs +5 -3
  29. package/fesm2022/ngx-com-components-empty-state.mjs.map +1 -1
  30. package/fesm2022/ngx-com-components-form-field.mjs +11 -6
  31. package/fesm2022/ngx-com-components-form-field.mjs.map +1 -1
  32. package/fesm2022/ngx-com-components-icon-lucide.mjs +41 -0
  33. package/fesm2022/ngx-com-components-icon-lucide.mjs.map +1 -0
  34. package/fesm2022/ngx-com-components-icon.mjs +89 -61
  35. package/fesm2022/ngx-com-components-icon.mjs.map +1 -1
  36. package/fesm2022/ngx-com-components-item.mjs +14 -4
  37. package/fesm2022/ngx-com-components-item.mjs.map +1 -1
  38. package/fesm2022/ngx-com-components-menu.mjs +61 -69
  39. package/fesm2022/ngx-com-components-menu.mjs.map +1 -1
  40. package/fesm2022/ngx-com-components-native-control.mjs +170 -0
  41. package/fesm2022/ngx-com-components-native-control.mjs.map +1 -0
  42. package/fesm2022/ngx-com-components-paginator.mjs +11 -3
  43. package/fesm2022/ngx-com-components-paginator.mjs.map +1 -1
  44. package/fesm2022/ngx-com-components-popover.mjs +58 -33
  45. package/fesm2022/ngx-com-components-popover.mjs.map +1 -1
  46. package/fesm2022/ngx-com-components-radio.mjs +4 -4
  47. package/fesm2022/ngx-com-components-radio.mjs.map +1 -1
  48. package/fesm2022/ngx-com-components-segmented-control.mjs +6 -4
  49. package/fesm2022/ngx-com-components-segmented-control.mjs.map +1 -1
  50. package/fesm2022/ngx-com-components-sort.mjs +63 -57
  51. package/fesm2022/ngx-com-components-sort.mjs.map +1 -1
  52. package/fesm2022/ngx-com-components-spinner.mjs +6 -6
  53. package/fesm2022/ngx-com-components-spinner.mjs.map +1 -1
  54. package/fesm2022/ngx-com-components-switch.mjs +18 -9
  55. package/fesm2022/ngx-com-components-switch.mjs.map +1 -1
  56. package/fesm2022/ngx-com-components-table.mjs +23 -9
  57. package/fesm2022/ngx-com-components-table.mjs.map +1 -1
  58. package/fesm2022/ngx-com-components-tabs.mjs +81 -58
  59. package/fesm2022/ngx-com-components-tabs.mjs.map +1 -1
  60. package/fesm2022/ngx-com-components-timepicker.mjs +1048 -0
  61. package/fesm2022/ngx-com-components-timepicker.mjs.map +1 -0
  62. package/fesm2022/ngx-com-components-toast.mjs +18 -14
  63. package/fesm2022/ngx-com-components-toast.mjs.map +1 -1
  64. package/fesm2022/ngx-com-components-tooltip.mjs +5 -5
  65. package/fesm2022/ngx-com-components-tooltip.mjs.map +1 -1
  66. package/fesm2022/ngx-com-components.mjs +0 -13
  67. package/fesm2022/ngx-com-components.mjs.map +1 -1
  68. package/fesm2022/ngx-com-tokens.mjs +0 -8
  69. package/fesm2022/ngx-com-tokens.mjs.map +1 -1
  70. package/fesm2022/ngx-com-utils.mjs +13 -1
  71. package/fesm2022/ngx-com-utils.mjs.map +1 -1
  72. package/fesm2022/ngx-com.mjs +1 -1
  73. package/fesm2022/ngx-com.mjs.map +1 -1
  74. package/package.json +51 -8
  75. package/styles/animations.css +38 -0
  76. package/styles/candy.css +121 -0
  77. package/styles/dark.css +159 -0
  78. package/styles/forest.css +117 -0
  79. package/styles/ocean.css +117 -0
  80. package/styles/themes.css +7 -0
  81. package/styles/tokens.css +277 -0
  82. package/styles/utilities.css +16 -0
  83. package/types/ngx-com-components-alert.d.ts +14 -4
  84. package/types/ngx-com-components-avatar.d.ts +2 -0
  85. package/types/ngx-com-components-calendar.d.ts +3 -747
  86. package/types/ngx-com-components-card.d.ts +2 -2
  87. package/types/ngx-com-components-carousel.d.ts +11 -1
  88. package/types/ngx-com-components-code-block.d.ts +4 -4
  89. package/types/ngx-com-components-collapsible.d.ts +10 -2
  90. package/types/ngx-com-components-confirm.d.ts +2 -2
  91. package/types/ngx-com-components-datepicker.d.ts +623 -0
  92. package/types/ngx-com-components-dialog.d.ts +5 -2
  93. package/types/ngx-com-components-dropdown.d.ts +22 -4
  94. package/types/ngx-com-components-empty-state.d.ts +2 -0
  95. package/types/ngx-com-components-form-field.d.ts +4 -1
  96. package/types/ngx-com-components-icon-lucide.d.ts +32 -0
  97. package/types/ngx-com-components-icon.d.ts +49 -35
  98. package/types/ngx-com-components-item.d.ts +12 -2
  99. package/types/ngx-com-components-menu.d.ts +38 -38
  100. package/types/ngx-com-components-native-control.d.ts +99 -0
  101. package/types/ngx-com-components-paginator.d.ts +2 -0
  102. package/types/ngx-com-components-popover.d.ts +19 -12
  103. package/types/ngx-com-components-segmented-control.d.ts +3 -1
  104. package/types/ngx-com-components-sort.d.ts +13 -10
  105. package/types/ngx-com-components-switch.d.ts +7 -2
  106. package/types/ngx-com-components-table.d.ts +16 -2
  107. package/types/ngx-com-components-tabs.d.ts +46 -34
  108. package/types/ngx-com-components-timepicker.d.ts +273 -0
  109. package/types/ngx-com-components-toast.d.ts +4 -2
  110. package/types/ngx-com-components-tooltip.d.ts +1 -1
  111. package/types/ngx-com-components.d.ts +6 -7
  112. package/types/ngx-com-tokens.d.ts +5 -3
  113. package/types/ngx-com-utils.d.ts +11 -1
  114. package/types/ngx-com.d.ts +1 -1
package/README.md CHANGED
@@ -1,64 +1,168 @@
1
- # Com
1
+ # ngx-com
2
2
 
3
- This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.
3
+ An Angular component library built with signals, Tailwind CSS v4, and semantic
4
+ design tokens. Requires Angular 21+.
4
5
 
5
- ## Code scaffolding
6
-
7
- Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
6
+ ## Installation
8
7
 
9
8
  ```bash
10
- ng generate component component-name
9
+ npm install ngx-com
11
10
  ```
12
11
 
13
- For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
12
+ ### Peer dependencies
13
+
14
+ **Required:**
15
+
16
+ | Package | Version |
17
+ | --- | --- |
18
+ | `@angular/common` | `^21.0.0` |
19
+ | `@angular/core` | `^21.0.0` |
20
+ | `@angular/cdk` | `^21.0.0` |
21
+ | `@angular/forms` | `^21.0.0` |
22
+ | `rxjs` | `^7.8.0` |
14
23
 
15
24
  ```bash
16
- ng generate --help
25
+ npm install @angular/cdk @angular/forms rxjs
17
26
  ```
18
27
 
19
- ## Building
28
+ > `@angular/common` and `@angular/core` are already present in every Angular project.
20
29
 
21
- To build the library, run:
30
+ **Optional:**
31
+
32
+ | Package | Version | When needed |
33
+ | --- | --- | --- |
34
+ | `@angular/router` | `^21.0.0` | Only if using routed tab navigation (`comTabNavBar`) |
35
+ | `lucide-angular` | `>=0.575.0 <1.0.0` | Only if using the Lucide icon adapter |
22
36
 
23
37
  ```bash
24
- ng build com
38
+ # Install optional peer dependencies as needed
39
+ npm install @angular/router # for routed tabs
40
+ npm install lucide-angular # for Lucide icon adapter
25
41
  ```
26
42
 
27
- This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
43
+ ## Setup
28
44
 
29
- ### Publishing the Library
45
+ ### 1. Import the theme styles
30
46
 
31
- Once the project is built, you can publish your library by following these steps:
47
+ Add the library theme CSS to your application's stylesheet. This provides
48
+ design tokens (colors, shadows, durations) and theme variants.
32
49
 
33
- 1. Navigate to the `dist` directory:
50
+ ```css
51
+ /* styles.css */
52
+ @import 'ngx-com/styles/themes.css';
53
+ ```
34
54
 
35
- ```bash
36
- cd dist/com
37
- ```
55
+ Or import individual files for finer control:
38
56
 
39
- 2. Run the `npm publish` command to publish your library to the npm registry:
40
- ```bash
41
- npm publish
42
- ```
57
+ | File | Contents |
58
+ | ------------------ | --------------------------------------------- |
59
+ | `tokens.css` | Base semantic tokens (light theme) |
60
+ | `dark.css` | Dark theme override (`[data-theme='dark']`) |
61
+ | `forest.css` | Forest theme (`[data-theme='forest']`) |
62
+ | `ocean.css` | Ocean theme (`[data-theme='ocean']`) |
63
+ | `candy.css` | Candy theme (`[data-theme='candy']`) |
64
+ | `animations.css` | Keyframe animations used by components |
65
+ | `utilities.css` | Utility classes |
43
66
 
44
- ## Running unit tests
67
+ Switch themes at runtime by setting `data-theme` on the `<html>` element:
45
68
 
46
- To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
69
+ ```html
70
+ <html data-theme="dark">
71
+ ```
47
72
 
48
- ```bash
49
- ng test
73
+ ### 2. Import CDK overlay styles
74
+
75
+ Components that use overlays (dropdown, dialog, popover, tooltip, confirm,
76
+ menu, toast) require the CDK overlay stylesheet:
77
+
78
+ ```css
79
+ @import '@angular/cdk/overlay-prebuilt.css';
50
80
  ```
51
81
 
52
- ## Running end-to-end tests
82
+ ### 3. Register icons (optional)
53
83
 
54
- For end-to-end (e2e) testing, run:
84
+ If using the `<com-icon>` component with Lucide icons:
55
85
 
56
- ```bash
57
- ng e2e
86
+ ```typescript
87
+ import { provideComLucideIcons } from 'ngx-com/components/icon/lucide';
88
+ import { Check, ChevronDown, X } from 'lucide-angular/icons/';
89
+
90
+ export const appConfig: ApplicationConfig = {
91
+ providers: [
92
+ provideComLucideIcons({ Check, ChevronDown, X }),
93
+ ],
94
+ };
95
+ ```
96
+
97
+ Icons can also be registered at the route or component level. For custom
98
+ (non-Lucide) SVG icons, use `provideComIcons` from `ngx-com/components/icon`.
99
+
100
+ ## Usage
101
+
102
+ Every component is a standalone import from its own entry point:
103
+
104
+ ```typescript
105
+ import { ComButton } from 'ngx-com/components/button';
106
+ import { ComDropdown, ComDropdownOption } from 'ngx-com/components/dropdown';
58
107
  ```
59
108
 
60
- Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
109
+ ```html
110
+ <button comButton color="primary">Save</button>
61
111
 
62
- ## Additional Resources
112
+ <com-dropdown [(value)]="selected" [options]="items" />
113
+ ```
63
114
 
64
- For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
115
+ ## Components
116
+
117
+ | Component | Import path | Description |
118
+ | ------------------ | ---------------------------------------- | ------------------------------------ |
119
+ | Alert | `ngx-com/components/alert` | Contextual feedback messages |
120
+ | Avatar | `ngx-com/components/avatar` | User or entity avatar |
121
+ | Badge | `ngx-com/components/badge` | Small status indicator |
122
+ | Button | `ngx-com/components/button` | Standard button directive |
123
+ | Calendar | `ngx-com/components/calendar` | Date calendar grid |
124
+ | Card | `ngx-com/components/card` | Content container with sections |
125
+ | Carousel | `ngx-com/components/carousel` | Slideshow component |
126
+ | Checkbox | `ngx-com/components/checkbox` | Checkbox input control |
127
+ | Code Block | `ngx-com/components/code-block` | Syntax-highlighted code display |
128
+ | Collapsible | `ngx-com/components/collapsible` | Expandable content section |
129
+ | Confirm | `ngx-com/components/confirm` | Confirmation popover |
130
+ | Datepicker | `ngx-com/components/datepicker` | Date input with calendar popup |
131
+ | Dialog | `ngx-com/components/dialog` | Modal dialog service |
132
+ | Dropdown | `ngx-com/components/dropdown` | Select / multi-select control |
133
+ | Empty State | `ngx-com/components/empty-state` | Placeholder for empty content |
134
+ | Form Field | `ngx-com/components/form-field` | Input wrapper with label and errors |
135
+ | Icon | `ngx-com/components/icon` | SVG icon renderer |
136
+ | Item | `ngx-com/components/item` | List item layout |
137
+ | Menu | `ngx-com/components/menu` | Dropdown menu with keyboard nav |
138
+ | Native Control | `ngx-com/components/native-control` | Styled native input/textarea |
139
+ | Paginator | `ngx-com/components/paginator` | Pagination control |
140
+ | Popover | `ngx-com/components/popover` | Floating content panel |
141
+ | Radio | `ngx-com/components/radio` | Radio button group |
142
+ | Segmented Control | `ngx-com/components/segmented-control` | Toggle between options |
143
+ | Separator | `ngx-com/components/separator` | Horizontal/vertical divider |
144
+ | Sort | `ngx-com/components/sort` | Column sort header for tables |
145
+ | Spinner | `ngx-com/components/spinner` | Loading indicator |
146
+ | Switch | `ngx-com/components/switch` | Toggle switch control |
147
+ | Table | `ngx-com/components/table` | Data table with sorting |
148
+ | Tabs | `ngx-com/components/tabs` | Tabbed navigation |
149
+ | Timepicker | `ngx-com/components/timepicker` | Time input control |
150
+ | Toast | `ngx-com/components/toast` | Toast notification service |
151
+ | Tooltip | `ngx-com/components/tooltip` | Hover/focus tooltip |
152
+
153
+ ## Utilities
154
+
155
+ General-purpose utilities are available from `ngx-com/utils`.
156
+
157
+ ## Requirements
158
+
159
+ - Angular `^21.0.0` (`@angular/common`, `@angular/core`, `@angular/forms`)
160
+ - `@angular/cdk` `^21.0.0`
161
+ - RxJS `^7.8.0`
162
+ - Tailwind CSS v4 (in the consuming application)
163
+ - `@angular/router` `^21.0.0` (optional — for routed tab navigation)
164
+ - `lucide-angular` `>=0.575.0 <1.0.0` (optional — for Lucide icon adapter)
165
+
166
+ ## License
167
+
168
+ MIT
package/fesm2022/ngx-com-components-alert.mjs CHANGED
@@ -7,9 +7,9 @@ import { mergeClasses } from 'ngx-com/utils';
7
7
  /**
8
8
  * CVA variants for the alert container.
9
9
  *
10
- * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`,
11
- * `--color-success-subtle`, `--color-success-subtle-foreground`,
12
- * `--color-warn-subtle`, `--color-warn-subtle-foreground`,
10
+ * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`, `--color-primary-border-subtle`,
11
+ * `--color-success-subtle`, `--color-success-subtle-foreground`, `--color-success-border-subtle`,
12
+ * `--color-warn-subtle`, `--color-warn-subtle-foreground`, `--color-warn-border-subtle`,
13
13
  * `--color-warn`, `--color-warn-foreground`,
14
14
  * `--radius-card`
15
15
  */
@@ -26,9 +26,9 @@ const alertVariants = cva([
26
26
  ], {
27
27
  variants: {
28
28
  variant: {
29
- info: 'bg-primary-subtle text-primary-subtle-foreground border-primary/20',
30
- success: 'bg-success-subtle text-success-subtle-foreground border-success/20',
31
- warning: 'bg-warn-subtle text-warn-subtle-foreground border-warn/20',
29
+ info: 'bg-primary-subtle text-primary-subtle-foreground border-primary-border-subtle',
30
+ success: 'bg-success-subtle text-success-subtle-foreground border-success-border-subtle',
31
+ warning: 'bg-warn-subtle text-warn-subtle-foreground border-warn-border-subtle',
32
32
  destructive: 'bg-warn text-warn-foreground border-warn',
33
33
  },
34
34
  },
@@ -39,7 +39,11 @@ const alertVariants = cva([
39
39
  /**
40
40
  * CVA variants for the alert close button.
41
41
  *
42
- * @tokens `--color-ring`, `--radius-card`
42
+ * @tokens `--color-ring`, `--radius-card`,
43
+ * `--color-primary-subtle-foreground-muted`, `--color-primary-subtle-hover`,
44
+ * `--color-success-subtle-foreground-muted`, `--color-success-subtle-hover`,
45
+ * `--color-warn-subtle-foreground-muted`, `--color-warn-subtle-hover`,
46
+ * `--color-warn-foreground-muted`, `--color-warn-foreground-wash`
43
47
  */
44
48
  const alertCloseButtonVariants = cva([
45
49
  'inline-flex',
@@ -56,10 +60,10 @@ const alertCloseButtonVariants = cva([
56
60
  ], {
57
61
  variants: {
58
62
  variant: {
59
- info: 'text-primary-subtle-foreground/60 hover:text-primary-subtle-foreground hover:bg-primary-subtle-foreground/10',
60
- success: 'text-success-subtle-foreground/60 hover:text-success-subtle-foreground hover:bg-success-subtle-foreground/10',
61
- warning: 'text-warn-subtle-foreground/60 hover:text-warn-subtle-foreground hover:bg-warn-subtle-foreground/10',
62
- destructive: 'text-warn-foreground/60 hover:text-warn-foreground hover:bg-warn-foreground/10',
63
+ info: 'text-primary-subtle-foreground-muted hover:text-primary-subtle-foreground hover:bg-primary-subtle-hover',
64
+ success: 'text-success-subtle-foreground-muted hover:text-success-subtle-foreground hover:bg-success-subtle-hover',
65
+ warning: 'text-warn-subtle-foreground-muted hover:text-warn-subtle-foreground hover:bg-warn-subtle-hover',
66
+ destructive: 'text-warn-foreground-muted hover:text-warn-foreground hover:bg-warn-foreground-wash',
63
67
  },
64
68
  },
65
69
  defaultVariants: {
@@ -81,6 +85,8 @@ const DEFAULT_ALERT_ICONS = {
81
85
  * When present, the alert suppresses the default auto-mapped icon
82
86
  * and renders this projected content instead.
83
87
  *
88
+ * @tokens none
89
+ *
84
90
  * @example
85
91
  * ```html
86
92
  * <com-alert variant="success">
@@ -284,6 +290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
284
290
  *
285
291
  * Inherits text color from the parent alert variant.
286
292
  *
293
+ * @tokens none
294
+ *
287
295
  * @example
288
296
  * ```html
289
297
  * <com-alert>
@@ -310,6 +318,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
310
318
  *
311
319
  * Container for action buttons. Place buttons inside.
312
320
  *
321
+ * @tokens none
322
+ *
313
323
  * @example
314
324
  * ```html
315
325
  * <com-alert variant="destructive">
package/fesm2022/ngx-com-components-alert.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ngx-com-components-alert.mjs","sources":["../../../projects/com/components/alert/alert.variants.ts","../../../projects/com/components/alert/alert.utils.ts","../../../projects/com/components/alert/alert-icon.directive.ts","../../../projects/com/components/alert/alert.component.ts","../../../projects/com/components/alert/alert-title.directive.ts","../../../projects/com/components/alert/alert-description.directive.ts","../../../projects/com/components/alert/alert-actions.directive.ts","../../../projects/com/components/alert/index.ts","../../../projects/com/components/alert/ngx-com-components-alert.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'destructive';\n\n/**\n * CVA variants for the alert container.\n *\n * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`,\n * `--color-success-subtle`, `--color-success-subtle-foreground`,\n * `--color-warn-subtle`, `--color-warn-subtle-foreground`,\n * `--color-warn`, `--color-warn-foreground`,\n * `--radius-card`\n */\nexport const alertVariants: (props?: {\n variant?: AlertVariant;\n}) => string = cva(\n [\n 'relative',\n 'flex',\n 'w-full',\n 'items-start',\n 'gap-3',\n 'rounded-card',\n 'border',\n 'p-4',\n 'text-sm',\n ],\n {\n variants: {\n variant: {\n info: 'bg-primary-subtle text-primary-subtle-foreground border-primary/20',\n success: 'bg-success-subtle text-success-subtle-foreground border-success/20',\n warning: 'bg-warn-subtle text-warn-subtle-foreground border-warn/20',\n destructive: 'bg-warn text-warn-foreground border-warn',\n },\n },\n defaultVariants: {\n variant: 'info',\n },\n },\n);\n\n/**\n * CVA variants for the alert close button.\n *\n * @tokens `--color-ring`, `--radius-card`\n */\nexport const alertCloseButtonVariants: (props?: {\n variant?: AlertVariant;\n}) => string = cva(\n [\n 'inline-flex',\n 'items-center',\n 'justify-center',\n 'shrink-0',\n 'rounded-card',\n 'p-0.5',\n 'transition-colors',\n 'outline-none',\n 'focus-visible:outline-2',\n 'focus-visible:outline-offset-2',\n 'focus-visible:outline-[--color-ring]',\n ],\n {\n variants: {\n variant: {\n info: 'text-primary-subtle-foreground/60 hover:text-primary-subtle-foreground hover:bg-primary-subtle-foreground/10',\n success: 'text-success-subtle-foreground/60 hover:text-success-subtle-foreground hover:bg-success-subtle-foreground/10',\n warning: 'text-warn-subtle-foreground/60 hover:text-warn-subtle-foreground hover:bg-warn-subtle-foreground/10',\n destructive: 'text-warn-foreground/60 hover:text-warn-foreground hover:bg-warn-foreground/10',\n },\n },\n defaultVariants: {\n variant: 'info',\n },\n },\n);\n\nexport type AlertVariants = VariantProps<typeof alertVariants>;\n","export { mergeClasses } from 'ngx-com/utils';\n\nimport type { AlertVariant } from './alert.variants';\n\n/** Default Lucide icon names per alert variant. */\nexport const DEFAULT_ALERT_ICONS: Record<AlertVariant, string> = {\n info: 'info',\n success: 'circle-check',\n warning: 'triangle-alert',\n destructive: 'circle-x',\n};\n","import { Directive } from '@angular/core';\n\n/**\n * Custom icon slot for `com-alert`.\n *\n * When present, the alert suppresses the default auto-mapped icon\n * and renders this projected content instead.\n *\n * @example\n * ```html\n * <com-alert variant=\"success\">\n * <com-icon comAlertIcon name=\"party-popper\" size=\"md\" aria-hidden=\"true\" />\n * <h4 comAlertTitle>Congratulations!</h4>\n * </com-alert>\n * ```\n */\n@Directive({\n selector: '[comAlertIcon]',\n host: {\n class: 'shrink-0 mt-0.5',\n },\n})\nexport class ComAlertIcon {}\n","import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n input,\n output,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport type {\n InputSignal,\n InputSignalWithTransform,\n OutputEmitterRef,\n Signal,\n WritableSignal,\n} from '@angular/core';\nimport { ComIcon } from 'ngx-com/components/icon';\nimport { alertVariants, alertCloseButtonVariants } from './alert.variants';\nimport type { AlertVariant } from './alert.variants';\nimport { mergeClasses, DEFAULT_ALERT_ICONS } from './alert.utils';\nimport { ComAlertIcon } from './alert-icon.directive';\n\n/**\n * Inline alert component for displaying contextual messages.\n *\n * Unlike toasts (ephemeral overlays), alerts are embedded in the page flow\n * and persist until dismissed or the condition changes.\n *\n * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`,\n * `--color-success-subtle`, `--color-success-subtle-foreground`,\n * `--color-warn-subtle`, `--color-warn-subtle-foreground`,\n * `--color-warn`, `--color-warn-foreground`,\n * `--radius-card`, `--color-ring`\n *\n * @example Info alert with title and description\n * ```html\n * <com-alert>\n * <h4 comAlertTitle>Heads up</h4>\n * <p comAlertDescription>You can add components using the CLI.</p>\n * </com-alert>\n * ```\n *\n * @example Dismissible warning\n * ```html\n * <com-alert variant=\"warning\" dismissible (dismissed)=\"onDismissed()\">\n * <h4 comAlertTitle>Storage almost full</h4>\n * <p comAlertDescription>You have used 90% of your storage quota.</p>\n * </com-alert>\n * ```\n */\n@Component({\n selector: 'com-alert',\n exportAs: 'comAlert',\n template: `\n @if (visible()) {\n <div\n [class]=\"alertClasses()\"\n [attr.role]=\"ariaRole()\"\n [attr.aria-live]=\"ariaLive()\"\n [attr.data-state]=\"animatingOut() ? 'closed' : 'open'\"\n (animationend)=\"onAnimationEnd()\"\n >\n @if (customIcon()) {\n <ng-content select=\"[comAlertIcon]\" />\n } @else {\n <com-icon\n [name]=\"defaultIconName()\"\n size=\"md\"\n class=\"mt-0.5 shrink-0\"\n aria-hidden=\"true\"\n />\n }\n <div class=\"flex-1 min-w-0\">\n <ng-content />\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n [class]=\"closeButtonClasses()\"\n aria-label=\"Dismiss\"\n (click)=\"dismiss()\"\n >\n <com-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\n </button>\n }\n </div>\n }\n `,\n styles: `\n :host {\n display: block;\n }\n\n [data-state='open'] {\n --tw-enter-opacity: 0;\n --tw-enter-translate-y: 0;\n }\n\n [data-state='closed'] {\n --tw-exit-opacity: 0;\n --tw-exit-translate-y: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-state='open'],\n [data-state='closed'] {\n animation: none;\n }\n }\n `,\n imports: [ComIcon],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class ComAlertComponent {\n /** Semantic color variant. */\n readonly variant: InputSignal<AlertVariant> = input<AlertVariant>('info');\n\n /** Shows a dismiss button when true. */\n readonly dismissible: InputSignalWithTransform<boolean, unknown> = input(false, {\n transform: booleanAttribute,\n });\n\n /** Consumer CSS classes — merged with variant classes. */\n readonly userClass: InputSignal<string> = input<string>('', { alias: 'class' });\n\n /** Emitted when the dismiss button is clicked. */\n readonly dismissed: OutputEmitterRef<void> = output<void>();\n\n /** @internal Detects whether a custom icon directive is projected. */\n protected readonly customIcon: Signal<ComAlertIcon | undefined> =\n contentChild<ComAlertIcon>(ComAlertIcon);\n\n /** @internal Controls visibility for dismiss animation. */\n protected readonly visible: WritableSignal<boolean> = signal(true);\n\n /** @internal Tracks exit animation state. */\n protected readonly animatingOut: WritableSignal<boolean> = signal(false);\n\n /** Default icon name auto-mapped from variant. */\n protected readonly defaultIconName: Signal<string> = computed(\n () => DEFAULT_ALERT_ICONS[this.variant()],\n );\n\n /** ARIA role based on variant. */\n protected readonly ariaRole: Signal<string> = computed(() => {\n const v = this.variant();\n return v === 'warning' || v === 'destructive' ? 'alert' : 'status';\n });\n\n /** ARIA live region politeness. */\n protected readonly ariaLive: Signal<string> = computed(() => {\n const v = this.variant();\n return v === 'warning' || v === 'destructive' ? 'assertive' : 'polite';\n });\n\n /** Computed alert container classes. */\n protected readonly alertClasses: Signal<string> = computed(() =>\n mergeClasses(\n alertVariants({ variant: this.variant() }),\n this.animatingOut()\n ? 'animate-out fade-out-0'\n : 'animate-in fade-in-0',\n this.userClass(),\n ),\n );\n\n /** Computed close button classes. */\n protected readonly closeButtonClasses: Signal<string> = computed(() =>\n mergeClasses(alertCloseButtonVariants({ variant: this.variant() })),\n );\n\n /** @internal Triggers dismiss animation, then removes from DOM. */\n protected dismiss(): void {\n this.animatingOut.set(true);\n this.dismissed.emit();\n }\n\n /** @internal Removes element after exit animation completes. */\n protected onAnimationEnd(): void {\n if (this.animatingOut()) {\n this.visible.set(false);\n }\n }\n}\n","import { Directive } from '@angular/core';\n\n/**\n * Title slot for `com-alert`.\n *\n * Apply to any heading element. Consumer picks the semantic level (h3, h4, etc.).\n *\n * @example\n * ```html\n * <com-alert>\n * <h4 comAlertTitle>Heads up</h4>\n * </com-alert>\n * ```\n *\n * @tokens `--color-foreground`\n */\n@Directive({\n selector: '[comAlertTitle]',\n host: {\n class: 'text-sm font-semibold leading-tight',\n },\n})\nexport class ComAlertTitle {}\n","import { Directive } from '@angular/core';\n\n/**\n * Description slot for `com-alert`.\n *\n * Inherits text color from the parent alert variant.\n *\n * @example\n * ```html\n * <com-alert>\n * <p comAlertDescription>Your session will expire in 5 minutes.</p>\n * </com-alert>\n * ```\n */\n@Directive({\n selector: '[comAlertDescription]',\n host: {\n class: 'text-sm',\n },\n})\nexport class ComAlertDescription {}\n","import { Directive } from '@angular/core';\n\n/**\n * Actions slot for `com-alert`.\n *\n * Container for action buttons. Place buttons inside.\n *\n * @example\n * ```html\n * <com-alert variant=\"destructive\">\n * <h4 comAlertTitle>Account suspended</h4>\n * <p comAlertDescription>Contact support to restore access.</p>\n * <div comAlertActions>\n * <button comButton variant=\"outline\" size=\"sm\">Contact Support</button>\n * </div>\n * </com-alert>\n * ```\n */\n@Directive({\n selector: '[comAlertActions]',\n host: {\n class: 'mt-3 flex items-center gap-2',\n },\n})\nexport class ComAlertActions {}\n","// Public API for the alert component\n\n// Main component\nexport { ComAlertComponent } from './alert.component';\n\n// Content projection directives\nexport { ComAlertIcon } from './alert-icon.directive';\nexport { ComAlertTitle } from './alert-title.directive';\nexport { ComAlertDescription } from './alert-description.directive';\nexport { ComAlertActions } from './alert-actions.directive';\n\n// Variants (for advanced customization)\nexport { alertVariants, alertCloseButtonVariants } from './alert.variants';\n\nexport type {\n AlertVariant,\n AlertVariants,\n} from './alert.variants';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ngx-com-components-alert.mjs","sources":["../../../projects/com/components/alert/alert.variants.ts","../../../projects/com/components/alert/alert.utils.ts","../../../projects/com/components/alert/alert-icon.directive.ts","../../../projects/com/components/alert/alert.component.ts","../../../projects/com/components/alert/alert-title.directive.ts","../../../projects/com/components/alert/alert-description.directive.ts","../../../projects/com/components/alert/alert-actions.directive.ts","../../../projects/com/components/alert/index.ts","../../../projects/com/components/alert/ngx-com-components-alert.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'destructive';\n\n/**\n * CVA variants for the alert container.\n *\n * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`, `--color-primary-border-subtle`,\n * `--color-success-subtle`, `--color-success-subtle-foreground`, `--color-success-border-subtle`,\n * `--color-warn-subtle`, `--color-warn-subtle-foreground`, `--color-warn-border-subtle`,\n * `--color-warn`, `--color-warn-foreground`,\n * `--radius-card`\n */\nexport const alertVariants: (props?: {\n variant?: AlertVariant;\n}) => string = cva(\n [\n 'relative',\n 'flex',\n 'w-full',\n 'items-start',\n 'gap-3',\n 'rounded-card',\n 'border',\n 'p-4',\n 'text-sm',\n ],\n {\n variants: {\n variant: {\n info: 'bg-primary-subtle text-primary-subtle-foreground border-primary-border-subtle',\n success: 'bg-success-subtle text-success-subtle-foreground border-success-border-subtle',\n warning: 'bg-warn-subtle text-warn-subtle-foreground border-warn-border-subtle',\n destructive: 'bg-warn text-warn-foreground border-warn',\n },\n },\n defaultVariants: {\n variant: 'info',\n },\n },\n);\n\n/**\n * CVA variants for the alert close button.\n *\n * @tokens `--color-ring`, `--radius-card`,\n * `--color-primary-subtle-foreground-muted`, `--color-primary-subtle-hover`,\n * `--color-success-subtle-foreground-muted`, `--color-success-subtle-hover`,\n * `--color-warn-subtle-foreground-muted`, `--color-warn-subtle-hover`,\n * `--color-warn-foreground-muted`, `--color-warn-foreground-wash`\n */\nexport const alertCloseButtonVariants: (props?: {\n variant?: AlertVariant;\n}) => string = cva(\n [\n 'inline-flex',\n 'items-center',\n 'justify-center',\n 'shrink-0',\n 'rounded-card',\n 'p-0.5',\n 'transition-colors',\n 'outline-none',\n 'focus-visible:outline-2',\n 'focus-visible:outline-offset-2',\n 'focus-visible:outline-[--color-ring]',\n ],\n {\n variants: {\n variant: {\n info: 'text-primary-subtle-foreground-muted hover:text-primary-subtle-foreground hover:bg-primary-subtle-hover',\n success: 'text-success-subtle-foreground-muted hover:text-success-subtle-foreground hover:bg-success-subtle-hover',\n warning: 'text-warn-subtle-foreground-muted hover:text-warn-subtle-foreground hover:bg-warn-subtle-hover',\n destructive: 'text-warn-foreground-muted hover:text-warn-foreground hover:bg-warn-foreground-wash',\n },\n },\n defaultVariants: {\n variant: 'info',\n },\n },\n);\n\nexport type AlertVariants = VariantProps<typeof alertVariants>;\n","export { mergeClasses } from 'ngx-com/utils';\n\nimport type { AlertVariant } from './alert.variants';\n\n/** Default Lucide icon names per alert variant. */\nexport const DEFAULT_ALERT_ICONS: Record<AlertVariant, string> = {\n info: 'info',\n success: 'circle-check',\n warning: 'triangle-alert',\n destructive: 'circle-x',\n};\n","import { Directive } from '@angular/core';\n\n/**\n * Custom icon slot for `com-alert`.\n *\n * When present, the alert suppresses the default auto-mapped icon\n * and renders this projected content instead.\n *\n * @tokens none\n *\n * @example\n * ```html\n * <com-alert variant=\"success\">\n * <com-icon comAlertIcon name=\"party-popper\" size=\"md\" aria-hidden=\"true\" />\n * <h4 comAlertTitle>Congratulations!</h4>\n * </com-alert>\n * ```\n */\n@Directive({\n selector: '[comAlertIcon]',\n host: {\n class: 'shrink-0 mt-0.5',\n },\n})\nexport class ComAlertIcon {}\n","import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n input,\n output,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport type {\n InputSignal,\n InputSignalWithTransform,\n OutputEmitterRef,\n Signal,\n WritableSignal,\n} from '@angular/core';\nimport { ComIcon } from 'ngx-com/components/icon';\nimport { alertVariants, alertCloseButtonVariants } from './alert.variants';\nimport type { AlertVariant } from './alert.variants';\nimport { mergeClasses, DEFAULT_ALERT_ICONS } from './alert.utils';\nimport { ComAlertIcon } from './alert-icon.directive';\n\n/**\n * Inline alert component for displaying contextual messages.\n *\n * Unlike toasts (ephemeral overlays), alerts are embedded in the page flow\n * and persist until dismissed or the condition changes.\n *\n * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`,\n * `--color-success-subtle`, `--color-success-subtle-foreground`,\n * `--color-warn-subtle`, `--color-warn-subtle-foreground`,\n * `--color-warn`, `--color-warn-foreground`,\n * `--radius-card`, `--color-ring`\n *\n * @example Info alert with title and description\n * ```html\n * <com-alert>\n * <h4 comAlertTitle>Heads up</h4>\n * <p comAlertDescription>You can add components using the CLI.</p>\n * </com-alert>\n * ```\n *\n * @example Dismissible warning\n * ```html\n * <com-alert variant=\"warning\" dismissible (dismissed)=\"onDismissed()\">\n * <h4 comAlertTitle>Storage almost full</h4>\n * <p comAlertDescription>You have used 90% of your storage quota.</p>\n * </com-alert>\n * ```\n */\n@Component({\n selector: 'com-alert',\n exportAs: 'comAlert',\n template: `\n @if (visible()) {\n <div\n [class]=\"alertClasses()\"\n [attr.role]=\"ariaRole()\"\n [attr.aria-live]=\"ariaLive()\"\n [attr.data-state]=\"animatingOut() ? 'closed' : 'open'\"\n (animationend)=\"onAnimationEnd()\"\n >\n @if (customIcon()) {\n <ng-content select=\"[comAlertIcon]\" />\n } @else {\n <com-icon\n [name]=\"defaultIconName()\"\n size=\"md\"\n class=\"mt-0.5 shrink-0\"\n aria-hidden=\"true\"\n />\n }\n <div class=\"flex-1 min-w-0\">\n <ng-content />\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n [class]=\"closeButtonClasses()\"\n aria-label=\"Dismiss\"\n (click)=\"dismiss()\"\n >\n <com-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\n </button>\n }\n </div>\n }\n `,\n styles: `\n :host {\n display: block;\n }\n\n [data-state='open'] {\n --tw-enter-opacity: 0;\n --tw-enter-translate-y: 0;\n }\n\n [data-state='closed'] {\n --tw-exit-opacity: 0;\n --tw-exit-translate-y: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-state='open'],\n [data-state='closed'] {\n animation: none;\n }\n }\n `,\n imports: [ComIcon],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class ComAlertComponent {\n /** Semantic color variant. */\n readonly variant: InputSignal<AlertVariant> = input<AlertVariant>('info');\n\n /** Shows a dismiss button when true. */\n readonly dismissible: InputSignalWithTransform<boolean, unknown> = input(false, {\n transform: booleanAttribute,\n });\n\n /** Consumer CSS classes — merged with variant classes. */\n readonly userClass: InputSignal<string> = input<string>('', { alias: 'class' });\n\n /** Emitted when the dismiss button is clicked. */\n readonly dismissed: OutputEmitterRef<void> = output<void>();\n\n /** @internal Detects whether a custom icon directive is projected. */\n protected readonly customIcon: Signal<ComAlertIcon | undefined> =\n contentChild<ComAlertIcon>(ComAlertIcon);\n\n /** @internal Controls visibility for dismiss animation. */\n protected readonly visible: WritableSignal<boolean> = signal(true);\n\n /** @internal Tracks exit animation state. */\n protected readonly animatingOut: WritableSignal<boolean> = signal(false);\n\n /** Default icon name auto-mapped from variant. */\n protected readonly defaultIconName: Signal<string> = computed(\n () => DEFAULT_ALERT_ICONS[this.variant()],\n );\n\n /** ARIA role based on variant. */\n protected readonly ariaRole: Signal<string> = computed(() => {\n const v = this.variant();\n return v === 'warning' || v === 'destructive' ? 'alert' : 'status';\n });\n\n /** ARIA live region politeness. */\n protected readonly ariaLive: Signal<string> = computed(() => {\n const v = this.variant();\n return v === 'warning' || v === 'destructive' ? 'assertive' : 'polite';\n });\n\n /** Computed alert container classes. */\n protected readonly alertClasses: Signal<string> = computed(() =>\n mergeClasses(\n alertVariants({ variant: this.variant() }),\n this.animatingOut()\n ? 'animate-out fade-out-0'\n : 'animate-in fade-in-0',\n this.userClass(),\n ),\n );\n\n /** Computed close button classes. */\n protected readonly closeButtonClasses: Signal<string> = computed(() =>\n mergeClasses(alertCloseButtonVariants({ variant: this.variant() })),\n );\n\n /** @internal Triggers dismiss animation, then removes from DOM. */\n protected dismiss(): void {\n this.animatingOut.set(true);\n this.dismissed.emit();\n }\n\n /** @internal Removes element after exit animation completes. */\n protected onAnimationEnd(): void {\n if (this.animatingOut()) {\n this.visible.set(false);\n }\n }\n}\n","import { Directive } from '@angular/core';\n\n/**\n * Title slot for `com-alert`.\n *\n * Apply to any heading element. Consumer picks the semantic level (h3, h4, etc.).\n *\n * @example\n * ```html\n * <com-alert>\n * <h4 comAlertTitle>Heads up</h4>\n * </com-alert>\n * ```\n *\n * @tokens `--color-foreground`\n */\n@Directive({\n selector: '[comAlertTitle]',\n host: {\n class: 'text-sm font-semibold leading-tight',\n },\n})\nexport class ComAlertTitle {}\n","import { Directive } from '@angular/core';\n\n/**\n * Description slot for `com-alert`.\n *\n * Inherits text color from the parent alert variant.\n *\n * @tokens none\n *\n * @example\n * ```html\n * <com-alert>\n * <p comAlertDescription>Your session will expire in 5 minutes.</p>\n * </com-alert>\n * ```\n */\n@Directive({\n selector: '[comAlertDescription]',\n host: {\n class: 'text-sm',\n },\n})\nexport class ComAlertDescription {}\n","import { Directive } from '@angular/core';\n\n/**\n * Actions slot for `com-alert`.\n *\n * Container for action buttons. Place buttons inside.\n *\n * @tokens none\n *\n * @example\n * ```html\n * <com-alert variant=\"destructive\">\n * <h4 comAlertTitle>Account suspended</h4>\n * <p comAlertDescription>Contact support to restore access.</p>\n * <div comAlertActions>\n * <button comButton variant=\"outline\" size=\"sm\">Contact Support</button>\n * </div>\n * </com-alert>\n * ```\n */\n@Directive({\n selector: '[comAlertActions]',\n host: {\n class: 'mt-3 flex items-center gap-2',\n },\n})\nexport class ComAlertActions {}\n","// Public API for the alert component\n\n// Main component\nexport { ComAlertComponent } from './alert.component';\n\n// Content projection directives\nexport { ComAlertIcon } from './alert-icon.directive';\nexport { ComAlertTitle } from './alert-title.directive';\nexport { ComAlertDescription } from './alert-description.directive';\nexport { ComAlertActions } from './alert-actions.directive';\n\n// Variants (for advanced customization)\nexport { alertVariants, alertCloseButtonVariants } from './alert.variants';\n\nexport type {\n AlertVariant,\n AlertVariants,\n} from './alert.variants';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/ngx-com-components-avatar.mjs CHANGED
@@ -11,6 +11,8 @@ import { cva } from 'class-variance-authority';
11
11
  * default icon fallback — the template has full control over the content.
12
12
  * Use this for company logos, emoji avatars, or custom graphics.
13
13
  *
14
+ * @tokens none
15
+ *
14
16
  * @example Company logo
15
17
  * ```html
16
18
  * <com-avatar name="Acme Corp" size="lg" color="primary">
@@ -143,23 +145,23 @@ const avatarVariants = cva([
143
145
  '2xl': 'size-24',
144
146
  },
145
147
  shape: {
146
- circle: 'rounded-full',
147
- rounded: 'rounded-lg',
148
+ circle: 'rounded-pill',
149
+ rounded: 'rounded-card',
148
150
  },
149
151
  interactive: {
150
152
  true: [
151
153
  'cursor-pointer',
152
154
  'hover:ring-2 hover:ring-ring',
153
155
  'active:scale-95',
154
- 'transition-all duration-150',
156
+ 'transition-all duration-normal',
155
157
  ],
156
158
  false: 'cursor-default',
157
159
  },
158
160
  },
159
161
  compoundVariants: [
160
162
  // Smaller rounded corners for xs/sm sizes
161
- { shape: 'rounded', size: 'xs', class: 'rounded-md' },
162
- { shape: 'rounded', size: 'sm', class: 'rounded-md' },
163
+ { shape: 'rounded', size: 'xs', class: 'rounded-interactive-sm' },
164
+ { shape: 'rounded', size: 'sm', class: 'rounded-interactive-sm' },
163
165
  ],
164
166
  defaultVariants: {
165
167
  size: 'md',
@@ -463,7 +465,7 @@ class ComAvatar {
463
465
  <img
464
466
  [src]="src()"
465
467
  [alt]="alt() || name() || 'Avatar'"
466
- class="absolute inset-0 size-full object-cover transition-opacity duration-200"
468
+ class="absolute inset-0 size-full object-cover transition-opacity duration-slow"
467
469
  [class.opacity-0]="imageState() !== 'loaded'"
468
470
  [class.opacity-100]="imageState() === 'loaded'"
469
471
  [style.border-radius]="'inherit'"
@@ -505,7 +507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
505
507
  <img
506
508
  [src]="src()"
507
509
  [alt]="alt() || name() || 'Avatar'"
508
- class="absolute inset-0 size-full object-cover transition-opacity duration-200"
510
+ class="absolute inset-0 size-full object-cover transition-opacity duration-slow"
509
511
  [class.opacity-0]="imageState() !== 'loaded'"
510
512
  [class.opacity-100]="imageState() === 'loaded'"
511
513
  [style.border-radius]="'inherit'"