@egose/shadcn-theme-ng 0.0.12 → 0.0.14

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 (44) hide show
  1. package/accordion/fesm2022/accordion.mjs +10 -10
  2. package/alert/fesm2022/alert.mjs +30 -30
  3. package/autocomplete/fesm2022/autocomplete.mjs +34 -15
  4. package/autocomplete/fesm2022/autocomplete.mjs.map +1 -1
  5. package/autocomplete/index.d.ts +5 -1
  6. package/badge/fesm2022/badge.mjs +70 -79
  7. package/badge/fesm2022/badge.mjs.map +1 -1
  8. package/badge/index.d.ts +9 -9
  9. package/basic-alert/fesm2022/basic-alert.mjs +15 -23
  10. package/basic-alert/fesm2022/basic-alert.mjs.map +1 -1
  11. package/basic-alert/index.d.ts +7 -7
  12. package/button/fesm2022/button.mjs +148 -168
  13. package/button/fesm2022/button.mjs.map +1 -1
  14. package/button/index.d.ts +19 -19
  15. package/calendar/fesm2022/calendar.mjs +78 -78
  16. package/confirmation-dialog/fesm2022/confirmation-dialog.mjs +10 -10
  17. package/date-picker/fesm2022/date-picker.mjs +11 -11
  18. package/dialog/fesm2022/dialog.mjs +9 -9
  19. package/exports.json +1 -1
  20. package/form-date-picker/fesm2022/form-date-picker.mjs +9 -9
  21. package/form-field/fesm2022/form-field.mjs +3 -3
  22. package/form-searchable-multiselect/README.md +64 -0
  23. package/form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs +124 -0
  24. package/form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs.map +1 -0
  25. package/form-searchable-multiselect/index.d.ts +28 -0
  26. package/form-select/fesm2022/form-select.mjs +9 -9
  27. package/form-text-input/fesm2022/form-text-input.mjs +9 -9
  28. package/form-textarea/fesm2022/form-textarea.mjs +9 -9
  29. package/input/fesm2022/input.mjs +3 -3
  30. package/label/fesm2022/label.mjs +1 -1
  31. package/package.json +9 -1
  32. package/popover/fesm2022/popover.mjs +2 -2
  33. package/radio-group/fesm2022/radio-group.mjs +5 -5
  34. package/searchable-multiselect/README.md +64 -0
  35. package/searchable-multiselect/fesm2022/searchable-multiselect.mjs +221 -0
  36. package/searchable-multiselect/fesm2022/searchable-multiselect.mjs.map +1 -0
  37. package/searchable-multiselect/index.d.ts +50 -0
  38. package/select/fesm2022/select.mjs +18 -18
  39. package/separator/fesm2022/separator.mjs +1 -1
  40. package/sonner/fesm2022/sonner.mjs +4 -4
  41. package/spinner/fesm2022/spinner.mjs +6 -6
  42. package/switch/fesm2022/switch.mjs +2 -2
  43. package/tabs/fesm2022/tabs.mjs +12 -12
  44. package/tooltip/fesm2022/tooltip.mjs +5 -5
package/calendar/fesm2022/calendar.mjs CHANGED
@@ -10,7 +10,7 @@ import { hlm } from '@egose/shadcn-theme-ng/utils';
10
10
 
11
11
  class HlmCalendar {
12
12
  calendarClass = input('', ...(ngDevMode ? [{ debugName: "calendarClass" }] : []));
13
- _computedCalenderClass = computed(() => hlm('tw:rounded-md tw:border tw:p-3', this.calendarClass()), ...(ngDevMode ? [{ debugName: "_computedCalenderClass" }] : []));
13
+ _computedCalenderClass = computed(() => hlm('rounded-md border p-3', this.calendarClass()), ...(ngDevMode ? [{ debugName: "_computedCalenderClass" }] : []));
14
14
  /** Access the calendar i18n */
15
15
  _i18n = injectBrnCalendarI18n();
16
16
  /** Access the date time adapter */
@@ -39,7 +39,7 @@ class HlmCalendar {
39
39
  _heading = computed(() => this._i18n
40
40
  .config()
41
41
  .formatHeader(this._dateAdapter.getMonth(this._calendar().focusedDate()), this._dateAdapter.getYear(this._calendar().focusedDate())), ...(ngDevMode ? [{ debugName: "_heading" }] : []));
42
- _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'tw:size-8 tw:p-0 tw:font-normal tw:aria-selected:opacity-100', 'tw:data-[outside]:text-muted-foreground tw:data-[outside]:aria-selected:bg-secondary/50 tw:data-[outside]:aria-selected:text-muted-foreground tw:data-[outside]:opacity-50 tw:data-[outside]:aria-selected:opacity-30', 'tw:data-[today]:bg-secondary tw:data-[today]:text-secondary-foreground', 'tw:data-[selected]:bg-primary tw:data-[selected]:text-primary-foreground tw:data-[selected]:hover:bg-primary tw:data-[selected]:focus:bg-primary tw:data-[selected]:focus:text-primary-foreground', 'tw:data-[disabled]:text-muted-foreground tw:data-[disabled]:opacity-50');
42
+ _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'size-8 p-0 font-normal aria-selected:opacity-100', 'data-[outside]:text-muted-foreground data-[outside]:aria-selected:bg-secondary/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:opacity-30', 'data-[today]:bg-secondary data-[today]:text-secondary-foreground', 'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground', 'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50');
43
43
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
44
44
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HlmCalendar, isStandalone: true, selector: "hlm-calendar", inputs: { calendarClass: { classPropertyName: "calendarClass", publicName: "calendarClass", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: BrnCalendar, descendants: true, isSignal: true }], ngImport: i0, template: `
45
45
  <div
@@ -53,25 +53,25 @@ class HlmCalendar {
53
53
  [defaultFocusedDate]="defaultFocusedDate()"
54
54
  [class]="_computedCalenderClass()"
55
55
  >
56
- <div class="tw:inline-flex tw:flex-col tw:space-y-4">
56
+ <div class="inline-flex flex-col space-y-4">
57
57
  <!-- Header -->
58
- <div class="tw:space-y-4">
59
- <div class="tw:relative tw:flex tw:items-center tw:justify-center tw:pt-1">
60
- <div brnCalendarHeader class="tw:text-sm tw:font-medium">
58
+ <div class="space-y-4">
59
+ <div class="relative flex items-center justify-center pt-1">
60
+ <div brnCalendarHeader class="text-sm font-medium">
61
61
  {{ _heading() }}
62
62
  </div>
63
63
 
64
- <div class="tw:flex tw:items-center tw:space-x-1">
64
+ <div class="flex items-center space-x-1">
65
65
  <button
66
66
  brnCalendarPreviousButton
67
- class="tw:focus-visible:ring-ring tw:hover:bg-secondary tw:hover:text-secondary-foreground tw:text-popover-foreground tw:absolute tw:left-1 tw:inline-flex tw:size-8 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
67
+ class="focus-visible:ring-ring hover:bg-secondary hover:text-secondary-foreground text-popover-foreground absolute left-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
68
68
  >
69
69
  <ng-icon hlm name="lucideChevronLeft" size="sm" />
70
70
  </button>
71
71
 
72
72
  <button
73
73
  brnCalendarNextButton
74
- class="tw:focus-visible:ring-ring tw:hover:bg-secondary tw:hover:text-secondary-foreground tw:text-popover-foreground tw:absolute tw:right-1 tw:inline-flex tw:size-8 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
74
+ class="focus-visible:ring-ring hover:bg-secondary hover:text-secondary-foreground text-popover-foreground absolute right-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
75
75
  >
76
76
  <ng-icon hlm name="lucideChevronRight" size="sm" />
77
77
  </button>
@@ -79,13 +79,13 @@ class HlmCalendar {
79
79
  </div>
80
80
  </div>
81
81
 
82
- <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
82
+ <table class="w-full border-collapse space-y-1" brnCalendarGrid>
83
83
  <thead>
84
- <tr class="tw:flex">
84
+ <tr class="flex">
85
85
  <th
86
86
  *brnCalendarWeekday="let weekday"
87
87
  scope="col"
88
- class="tw:text-muted-foreground tw:w-8 tw:rounded-md tw:text-[0.8rem] tw:font-normal"
88
+ class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
89
89
  [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
90
90
  >
91
91
  {{ _i18n.config().formatWeekdayName(weekday) }}
@@ -94,11 +94,11 @@ class HlmCalendar {
94
94
  </thead>
95
95
 
96
96
  <tbody role="rowgroup">
97
- <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex tw:w-full">
97
+ <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
98
98
  @for (date of week; track _dateAdapter.getTime(date)) {
99
99
  <td
100
100
  brnCalendarCell
101
- class="tw:data-[selected]:data-[outside]:bg-secondary/50 tw:data-[selected]:bg-secondary tw:relative tw:size-8 tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:first:data-[selected]:rounded-l-md tw:last:data-[selected]:rounded-r-md tw:[&:has([aria-selected].day-range-end)]:rounded-r-md"
101
+ class="data-[selected]:data-[outside]:bg-secondary/50 data-[selected]:bg-secondary relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
102
102
  >
103
103
  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
104
104
  {{ _dateAdapter.getDate(date) }}
@@ -142,25 +142,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
142
142
  [defaultFocusedDate]="defaultFocusedDate()"
143
143
  [class]="_computedCalenderClass()"
144
144
  >
145
- <div class="tw:inline-flex tw:flex-col tw:space-y-4">
145
+ <div class="inline-flex flex-col space-y-4">
146
146
  <!-- Header -->
147
- <div class="tw:space-y-4">
148
- <div class="tw:relative tw:flex tw:items-center tw:justify-center tw:pt-1">
149
- <div brnCalendarHeader class="tw:text-sm tw:font-medium">
147
+ <div class="space-y-4">
148
+ <div class="relative flex items-center justify-center pt-1">
149
+ <div brnCalendarHeader class="text-sm font-medium">
150
150
  {{ _heading() }}
151
151
  </div>
152
152
 
153
- <div class="tw:flex tw:items-center tw:space-x-1">
153
+ <div class="flex items-center space-x-1">
154
154
  <button
155
155
  brnCalendarPreviousButton
156
- class="tw:focus-visible:ring-ring tw:hover:bg-secondary tw:hover:text-secondary-foreground tw:text-popover-foreground tw:absolute tw:left-1 tw:inline-flex tw:size-8 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
156
+ class="focus-visible:ring-ring hover:bg-secondary hover:text-secondary-foreground text-popover-foreground absolute left-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
157
157
  >
158
158
  <ng-icon hlm name="lucideChevronLeft" size="sm" />
159
159
  </button>
160
160
 
161
161
  <button
162
162
  brnCalendarNextButton
163
- class="tw:focus-visible:ring-ring tw:hover:bg-secondary tw:hover:text-secondary-foreground tw:text-popover-foreground tw:absolute tw:right-1 tw:inline-flex tw:size-8 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
163
+ class="focus-visible:ring-ring hover:bg-secondary hover:text-secondary-foreground text-popover-foreground absolute right-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
164
164
  >
165
165
  <ng-icon hlm name="lucideChevronRight" size="sm" />
166
166
  </button>
@@ -168,13 +168,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
168
168
  </div>
169
169
  </div>
170
170
 
171
- <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
171
+ <table class="w-full border-collapse space-y-1" brnCalendarGrid>
172
172
  <thead>
173
- <tr class="tw:flex">
173
+ <tr class="flex">
174
174
  <th
175
175
  *brnCalendarWeekday="let weekday"
176
176
  scope="col"
177
- class="tw:text-muted-foreground tw:w-8 tw:rounded-md tw:text-[0.8rem] tw:font-normal"
177
+ class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
178
178
  [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
179
179
  >
180
180
  {{ _i18n.config().formatWeekdayName(weekday) }}
@@ -183,11 +183,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
183
183
  </thead>
184
184
 
185
185
  <tbody role="rowgroup">
186
- <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex tw:w-full">
186
+ <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
187
187
  @for (date of week; track _dateAdapter.getTime(date)) {
188
188
  <td
189
189
  brnCalendarCell
190
- class="tw:data-[selected]:data-[outside]:bg-secondary/50 tw:data-[selected]:bg-secondary tw:relative tw:size-8 tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:first:data-[selected]:rounded-l-md tw:last:data-[selected]:rounded-r-md tw:[&:has([aria-selected].day-range-end)]:rounded-r-md"
190
+ class="data-[selected]:data-[outside]:bg-secondary/50 data-[selected]:bg-secondary relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
191
191
  >
192
192
  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
193
193
  {{ _dateAdapter.getDate(date) }}
@@ -206,7 +206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
206
206
 
207
207
  class HlmCalendarMulti {
208
208
  calendarClass = input('', ...(ngDevMode ? [{ debugName: "calendarClass" }] : []));
209
- _computedCalenderClass = computed(() => hlm('tw:rounded-md tw:border p-3', this.calendarClass()), ...(ngDevMode ? [{ debugName: "_computedCalenderClass" }] : []));
209
+ _computedCalenderClass = computed(() => hlm('rounded-md border p-3', this.calendarClass()), ...(ngDevMode ? [{ debugName: "_computedCalenderClass" }] : []));
210
210
  /** Access the calendar i18n */
211
211
  _i18n = injectBrnCalendarI18n();
212
212
  /** Access the date time adapter */
@@ -243,7 +243,7 @@ class HlmCalendarMulti {
243
243
  _heading = computed(() => this._i18n
244
244
  .config()
245
245
  .formatHeader(this._dateAdapter.getMonth(this._calendar().focusedDate()), this._dateAdapter.getYear(this._calendar().focusedDate())), ...(ngDevMode ? [{ debugName: "_heading" }] : []));
246
- _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'tw:size-8 tw:p-0 tw:font-normal tw:aria-selected:opacity-100', 'tw:data-[outside]:text-muted-foreground tw:data-[outside]:aria-selected:bg-accent/50 tw:data-[outside]:aria-selected:text-muted-foreground tw:data-[outside]:opacity-50 tw:data-[outside]:aria-selected:opacity-30', 'tw:data-[today]:bg-accent tw:data-[today]:text-accent-foreground', 'tw:data-[selected]:bg-primary tw:data-[selected]:text-primary-foreground tw:data-[selected]:hover:bg-primary tw:data-[selected]:hover:text-primary-foreground tw:data-[selected]:focus:bg-primary tw:data-[selected]:focus:text-primary-foreground', 'tw:data-[disabled]:text-muted-foreground tw:data-[disabled]:opacity-50');
246
+ _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'size-8 p-0 font-normal aria-selected:opacity-100', 'data-[outside]:text-muted-foreground data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:opacity-30', 'data-[today]:bg-accent data-[today]:text-accent-foreground', 'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground', 'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50');
247
247
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmCalendarMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
248
248
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HlmCalendarMulti, isStandalone: true, selector: "hlm-calendar-multi", inputs: { calendarClass: { classPropertyName: "calendarClass", publicName: "calendarClass", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minSelection: { classPropertyName: "minSelection", publicName: "minSelection", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: BrnCalendarMulti, descendants: true, isSignal: true }], ngImport: i0, template: `
249
249
  <div
@@ -259,25 +259,25 @@ class HlmCalendarMulti {
259
259
  [defaultFocusedDate]="defaultFocusedDate()"
260
260
  [class]="_computedCalenderClass()"
261
261
  >
262
- <div class="tw:inline-flex tw:flex-col space-y-4">
262
+ <div class="inline-flex flex-col space-y-4">
263
263
  <!-- Header -->
264
- <div class="tw:space-y-4">
265
- <div class="tw:relative tw:flex tw:items-center tw:justify-center pt-1">
266
- <div brnCalendarHeader class="tw:text-sm tw:font-medium">
264
+ <div class="space-y-4">
265
+ <div class="relative flex items-center justify-center pt-1">
266
+ <div brnCalendarHeader class="text-sm font-medium">
267
267
  {{ _heading() }}
268
268
  </div>
269
269
 
270
- <div class="tw:flex items-center tw:space-x-1">
270
+ <div class="flex items-center space-x-1">
271
271
  <button
272
272
  brnCalendarPreviousButton
273
- class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:left-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
273
+ class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
274
274
  >
275
275
  <ng-icon hlm name="lucideChevronLeft" size="sm" />
276
276
  </button>
277
277
 
278
278
  <button
279
279
  brnCalendarNextButton
280
- class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:right-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
280
+ class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
281
281
  >
282
282
  <ng-icon hlm name="lucideChevronRight" size="sm" />
283
283
  </button>
@@ -285,13 +285,13 @@ class HlmCalendarMulti {
285
285
  </div>
286
286
  </div>
287
287
 
288
- <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
288
+ <table class="w-full border-collapse space-y-1" brnCalendarGrid>
289
289
  <thead>
290
- <tr class="tw:flex">
290
+ <tr class="flex">
291
291
  <th
292
292
  *brnCalendarWeekday="let weekday"
293
293
  scope="col"
294
- class="tw:text-muted-foreground tw:w-8 tw:rounded-md tw:text-[0.8rem] tw:font-normal"
294
+ class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
295
295
  [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
296
296
  >
297
297
  {{ _i18n.config().formatWeekdayName(weekday) }}
@@ -300,11 +300,11 @@ class HlmCalendarMulti {
300
300
  </thead>
301
301
 
302
302
  <tbody role="rowgroup">
303
- <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex w-full">
303
+ <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
304
304
  @for (date of week; track _dateAdapter.getTime(date)) {
305
305
  <td
306
306
  brnCalendarCell
307
- class="tw:data-[selected]:data-[outside]:bg-accent/50 tw:data-[selected]:bg-accent tw:relative tw:h-8 tw:w-8 tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:first:data-[selected]:rounded-l-md tw:last:data-[selected]:rounded-r-md tw:[&:has([aria-selected].day-range-end)]:rounded-r-md"
307
+ class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
308
308
  >
309
309
  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
310
310
  {{ _dateAdapter.getDate(date) }}
@@ -350,25 +350,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
350
350
  [defaultFocusedDate]="defaultFocusedDate()"
351
351
  [class]="_computedCalenderClass()"
352
352
  >
353
- <div class="tw:inline-flex tw:flex-col space-y-4">
353
+ <div class="inline-flex flex-col space-y-4">
354
354
  <!-- Header -->
355
- <div class="tw:space-y-4">
356
- <div class="tw:relative tw:flex tw:items-center tw:justify-center pt-1">
357
- <div brnCalendarHeader class="tw:text-sm tw:font-medium">
355
+ <div class="space-y-4">
356
+ <div class="relative flex items-center justify-center pt-1">
357
+ <div brnCalendarHeader class="text-sm font-medium">
358
358
  {{ _heading() }}
359
359
  </div>
360
360
 
361
- <div class="tw:flex items-center tw:space-x-1">
361
+ <div class="flex items-center space-x-1">
362
362
  <button
363
363
  brnCalendarPreviousButton
364
- class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:left-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
364
+ class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
365
365
  >
366
366
  <ng-icon hlm name="lucideChevronLeft" size="sm" />
367
367
  </button>
368
368
 
369
369
  <button
370
370
  brnCalendarNextButton
371
- class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:right-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
371
+ class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
372
372
  >
373
373
  <ng-icon hlm name="lucideChevronRight" size="sm" />
374
374
  </button>
@@ -376,13 +376,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
376
376
  </div>
377
377
  </div>
378
378
 
379
- <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
379
+ <table class="w-full border-collapse space-y-1" brnCalendarGrid>
380
380
  <thead>
381
- <tr class="tw:flex">
381
+ <tr class="flex">
382
382
  <th
383
383
  *brnCalendarWeekday="let weekday"
384
384
  scope="col"
385
- class="tw:text-muted-foreground tw:w-8 tw:rounded-md tw:text-[0.8rem] tw:font-normal"
385
+ class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
386
386
  [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
387
387
  >
388
388
  {{ _i18n.config().formatWeekdayName(weekday) }}
@@ -391,11 +391,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
391
391
  </thead>
392
392
 
393
393
  <tbody role="rowgroup">
394
- <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex w-full">
394
+ <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
395
395
  @for (date of week; track _dateAdapter.getTime(date)) {
396
396
  <td
397
397
  brnCalendarCell
398
- class="tw:data-[selected]:data-[outside]:bg-accent/50 tw:data-[selected]:bg-accent tw:relative tw:h-8 tw:w-8 tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:first:data-[selected]:rounded-l-md tw:last:data-[selected]:rounded-r-md tw:[&:has([aria-selected].day-range-end)]:rounded-r-md"
398
+ class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
399
399
  >
400
400
  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
401
401
  {{ _dateAdapter.getDate(date) }}
@@ -414,7 +414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
414
414
 
415
415
  class HlmCalendarRange {
416
416
  calendarClass = input('', ...(ngDevMode ? [{ debugName: "calendarClass" }] : []));
417
- _computedCalenderClass = computed(() => hlm('tw:rounded-md tw:border p-3', this.calendarClass()), ...(ngDevMode ? [{ debugName: "_computedCalenderClass" }] : []));
417
+ _computedCalenderClass = computed(() => hlm('rounded-md border p-3', this.calendarClass()), ...(ngDevMode ? [{ debugName: "_computedCalenderClass" }] : []));
418
418
  /** Access the calendar i18n */
419
419
  _i18n = injectBrnCalendarI18n();
420
420
  /** Access the date time adapter */
@@ -445,7 +445,7 @@ class HlmCalendarRange {
445
445
  _heading = computed(() => this._i18n
446
446
  .config()
447
447
  .formatHeader(this._dateAdapter.getMonth(this._calendar().focusedDate()), this._dateAdapter.getYear(this._calendar().focusedDate())), ...(ngDevMode ? [{ debugName: "_heading" }] : []));
448
- _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'tw:size-8 tw:p-0 tw:font-normal tw:aria-selected:opacity-100', 'tw:data-[outside]:text-muted-foreground tw:data-[outside]:aria-selected:text-muted-foreground', 'tw:data-[today]:bg-accent tw:data-[today]:text-accent-foreground', 'tw:data-[selected]:bg-primary tw:data-[selected]:text-primary-foreground tw:data-[selected]:focus:bg-primary tw:data-[selected]:focus:text-primary-foreground', 'tw:data-[disabled]:text-muted-foreground tw:data-[disabled]:opacity-50', 'tw:data-[range-start]:rounded-l-md', 'tw:data-[range-end]:rounded-r-md', 'tw:data-[range-between]:bg-accent tw:data-[range-between]:text-accent-foreground tw:data-[range-between]:rounded-none');
448
+ _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'size-8 p-0 font-normal aria-selected:opacity-100', 'data-[outside]:text-muted-foreground data-[outside]:aria-selected:text-muted-foreground', 'data-[today]:bg-accent data-[today]:text-accent-foreground', 'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground', 'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50', 'data-[range-start]:rounded-l-md', 'data-[range-end]:rounded-r-md', 'data-[range-between]:bg-accent data-[range-between]:text-accent-foreground data-[range-between]:rounded-none');
449
449
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmCalendarRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
450
450
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HlmCalendarRange, isStandalone: true, selector: "hlm-calendar-range", inputs: { calendarClass: { classPropertyName: "calendarClass", publicName: "calendarClass", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: BrnCalendarRange, descendants: true, isSignal: true }], ngImport: i0, template: `
451
451
  <div
@@ -460,25 +460,25 @@ class HlmCalendarRange {
460
460
  [defaultFocusedDate]="defaultFocusedDate()"
461
461
  [class]="_computedCalenderClass()"
462
462
  >
463
- <div class="tw:inline-flex tw:flex-col tw:space-y-4">
463
+ <div class="inline-flex flex-col space-y-4">
464
464
  <!-- Header -->
465
- <div class="tw:space-y-4">
466
- <div class="tw:relative tw:flex tw:items-center tw:justify-center tw:pt-1">
467
- <div brnCalendarHeader class="tw:text-sm tw:font-medium">
465
+ <div class="space-y-4">
466
+ <div class="relative flex items-center justify-center pt-1">
467
+ <div brnCalendarHeader class="text-sm font-medium">
468
468
  {{ _heading() }}
469
469
  </div>
470
470
 
471
- <div class="tw:flex tw:items-center tw:space-x-1">
471
+ <div class="flex items-center space-x-1">
472
472
  <button
473
473
  brnCalendarPreviousButton
474
- class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:left-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
474
+ class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
475
475
  >
476
476
  <ng-icon hlm name="lucideChevronLeft" size="sm" />
477
477
  </button>
478
478
 
479
479
  <button
480
480
  brnCalendarNextButton
481
- class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:right-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
481
+ class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
482
482
  >
483
483
  <ng-icon hlm name="lucideChevronRight" size="sm" />
484
484
  </button>
@@ -486,13 +486,13 @@ class HlmCalendarRange {
486
486
  </div>
487
487
  </div>
488
488
 
489
- <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
489
+ <table class="w-full border-collapse space-y-1" brnCalendarGrid>
490
490
  <thead>
491
- <tr class="tw:flex">
491
+ <tr class="flex">
492
492
  <th
493
493
  *brnCalendarWeekday="let weekday"
494
494
  scope="col"
495
- class="tw:text-muted-foreground tw:w-8 tw:rounded-md tw:text-[0.8rem] tw:font-normal"
495
+ class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
496
496
  [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
497
497
  >
498
498
  {{ _i18n.config().formatWeekdayName(weekday) }}
@@ -501,11 +501,11 @@ class HlmCalendarRange {
501
501
  </thead>
502
502
 
503
503
  <tbody role="rowgroup">
504
- <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex w-full">
504
+ <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
505
505
  @for (date of week; track _dateAdapter.getTime(date)) {
506
506
  <td
507
507
  brnCalendarCell
508
- class="tw:data-[selected]:data-[outside]:bg-accent/50 tw:data-[selected]:bg-accent tw:relative tw:h-8 tw:w-8 tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:first:data-[selected]:rounded-l-md tw:last:data-[selected]:rounded-r-md tw:[&:has([aria-selected].day-range-end)]:rounded-r-md"
508
+ class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
509
509
  >
510
510
  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
511
511
  {{ _dateAdapter.getDate(date) }}
@@ -550,25 +550,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
550
550
  [defaultFocusedDate]="defaultFocusedDate()"
551
551
  [class]="_computedCalenderClass()"
552
552
  >
553
- <div class="tw:inline-flex tw:flex-col tw:space-y-4">
553
+ <div class="inline-flex flex-col space-y-4">
554
554
  <!-- Header -->
555
- <div class="tw:space-y-4">
556
- <div class="tw:relative tw:flex tw:items-center tw:justify-center tw:pt-1">
557
- <div brnCalendarHeader class="tw:text-sm tw:font-medium">
555
+ <div class="space-y-4">
556
+ <div class="relative flex items-center justify-center pt-1">
557
+ <div brnCalendarHeader class="text-sm font-medium">
558
558
  {{ _heading() }}
559
559
  </div>
560
560
 
561
- <div class="tw:flex tw:items-center tw:space-x-1">
561
+ <div class="flex items-center space-x-1">
562
562
  <button
563
563
  brnCalendarPreviousButton
564
- class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:left-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
564
+ class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
565
565
  >
566
566
  <ng-icon hlm name="lucideChevronLeft" size="sm" />
567
567
  </button>
568
568
 
569
569
  <button
570
570
  brnCalendarNextButton
571
- class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:right-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
571
+ class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
572
572
  >
573
573
  <ng-icon hlm name="lucideChevronRight" size="sm" />
574
574
  </button>
@@ -576,13 +576,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
576
576
  </div>
577
577
  </div>
578
578
 
579
- <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
579
+ <table class="w-full border-collapse space-y-1" brnCalendarGrid>
580
580
  <thead>
581
- <tr class="tw:flex">
581
+ <tr class="flex">
582
582
  <th
583
583
  *brnCalendarWeekday="let weekday"
584
584
  scope="col"
585
- class="tw:text-muted-foreground tw:w-8 tw:rounded-md tw:text-[0.8rem] tw:font-normal"
585
+ class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
586
586
  [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
587
587
  >
588
588
  {{ _i18n.config().formatWeekdayName(weekday) }}
@@ -591,11 +591,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
591
591
  </thead>
592
592
 
593
593
  <tbody role="rowgroup">
594
- <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex w-full">
594
+ <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
595
595
  @for (date of week; track _dateAdapter.getTime(date)) {
596
596
  <td
597
597
  brnCalendarCell
598
- class="tw:data-[selected]:data-[outside]:bg-accent/50 tw:data-[selected]:bg-accent tw:relative tw:h-8 tw:w-8 tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:first:data-[selected]:rounded-l-md tw:last:data-[selected]:rounded-r-md tw:[&:has([aria-selected].day-range-end)]:rounded-r-md"
598
+ class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
599
599
  >
600
600
  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
601
601
  {{ _dateAdapter.getDate(date) }}
package/confirmation-dialog/fesm2022/confirmation-dialog.mjs CHANGED
@@ -17,16 +17,16 @@ class EgConfirmationDiaglog {
17
17
  this._dialogRef.close(confirm);
18
18
  }
19
19
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgConfirmationDiaglog, deps: [], target: i0.ɵɵFactoryTarget.Component });
20
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: EgConfirmationDiaglog, isStandalone: true, selector: "ng-component", host: { classAttribute: "tw:w-full tw:p-1" }, providers: [provideIcons({ lucideTriangleAlert })], ngImport: i0, template: `
20
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: EgConfirmationDiaglog, isStandalone: true, selector: "ng-component", host: { classAttribute: "w-full p-1" }, providers: [provideIcons({ lucideTriangleAlert })], ngImport: i0, template: `
21
21
  <hlm-dialog-header>
22
- <div class="tw:flex tw:items-center tw:gap-1">
22
+ <div class="flex items-center gap-1">
23
23
  <ng-icon hlm hlmAlertIcon name="lucideTriangleAlert" size="base" />
24
- <h3 hlmDialogTitle class="tw:text-xl">{{ _title }}</h3>
24
+ <h3 hlmDialogTitle class="text-xl">{{ _title }}</h3>
25
25
  </div>
26
- <p hlmDialogDescription class="tw:text-base tw:text-gray-700">{{ _description }}</p>
26
+ <p hlmDialogDescription class="text-base text-gray-700">{{ _description }}</p>
27
27
  </hlm-dialog-header>
28
28
 
29
- <hlm-dialog-footer class="tw:mt-4">
29
+ <hlm-dialog-footer class="mt-4">
30
30
  <button hlmButton variant="secondary" appearance="outline" (click)="close(false)">Cancel</button>
31
31
  <button hlmButton variant="danger" (click)="close(true)">Confirm</button>
32
32
  </hlm-dialog-footer>
@@ -40,20 +40,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
40
40
  providers: [provideIcons({ lucideTriangleAlert })],
41
41
  template: `
42
42
  <hlm-dialog-header>
43
- <div class="tw:flex tw:items-center tw:gap-1">
43
+ <div class="flex items-center gap-1">
44
44
  <ng-icon hlm hlmAlertIcon name="lucideTriangleAlert" size="base" />
45
- <h3 hlmDialogTitle class="tw:text-xl">{{ _title }}</h3>
45
+ <h3 hlmDialogTitle class="text-xl">{{ _title }}</h3>
46
46
  </div>
47
- <p hlmDialogDescription class="tw:text-base tw:text-gray-700">{{ _description }}</p>
47
+ <p hlmDialogDescription class="text-base text-gray-700">{{ _description }}</p>
48
48
  </hlm-dialog-header>
49
49
 
50
- <hlm-dialog-footer class="tw:mt-4">
50
+ <hlm-dialog-footer class="mt-4">
51
51
  <button hlmButton variant="secondary" appearance="outline" (click)="close(false)">Cancel</button>
52
52
  <button hlmButton variant="danger" (click)="close(true)">Confirm</button>
53
53
  </hlm-dialog-footer>
54
54
  `,
55
55
  host: {
56
- class: 'tw:w-full tw:p-1',
56
+ class: 'w-full p-1',
57
57
  },
58
58
  }]
59
59
  }] });
package/date-picker/fesm2022/date-picker.mjs CHANGED
@@ -35,7 +35,7 @@ let nextId$2 = 0;
35
35
  class HlmDatePicker extends BrnFormFieldControl {
36
36
  _config = injectHlmDatePickerConfig();
37
37
  userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
38
- _computedClass = computed(() => hlm('tw:ring-offset-background tw:border-input tw:bg-background tw:hover:bg-input/50 tw:dark:bg-input/10 tw:dark:hover:bg-input/50 tw:inline-flex tw:h-9 tw:w-full tw:cursor-default tw:items-center tw:justify-between tw:gap-2 tw:whitespace-nowrap tw:rounded-md tw:border tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:font-normal tw:transition-all tw:disabled:pointer-events-none tw:disabled:opacity-50', 'tw:focus-visible:ring-ring tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2', 'tw:disabled:pointer-events-none tw:disabled:opacity-50', 'tw:[&_ng-icon]:pointer-events-none tw:[&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
38
+ _computedClass = computed(() => hlm('ring-offset-background border-input bg-background hover:bg-input/50 dark:bg-input/10 dark:hover:bg-input/50 inline-flex h-9 w-full cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50', 'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', '[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
39
39
  /** The id of the button that opens the date picker. */
40
40
  buttonId = input(`hlm-date-picker-${nextId$2++}`, ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
41
41
  /** The minimum date that can be selected.*/
@@ -124,9 +124,9 @@ class HlmDatePicker extends BrnFormFieldControl {
124
124
  <ng-icon hlm size="sm" name="lucideChevronDown" />
125
125
  </button>
126
126
 
127
- <div hlmPopoverContent class="tw:w-auto tw:p-0" *brnPopoverContent="let ctx">
127
+ <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
128
128
  <hlm-calendar
129
- calendarClass="tw:border-0 tw:rounded-none"
129
+ calendarClass="border-0 rounded-none"
130
130
  [date]="_mutableDate()"
131
131
  [min]="min()"
132
132
  [max]="max()"
@@ -170,9 +170,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
170
170
  <ng-icon hlm size="sm" name="lucideChevronDown" />
171
171
  </button>
172
172
 
173
- <div hlmPopoverContent class="tw:w-auto tw:p-0" *brnPopoverContent="let ctx">
173
+ <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
174
174
  <hlm-calendar
175
- calendarClass="tw:border-0 tw:rounded-none"
175
+ calendarClass="border-0 rounded-none"
176
176
  [date]="_mutableDate()"
177
177
  [min]="min()"
178
178
  [max]="max()"
@@ -214,7 +214,7 @@ let nextId$1 = 0;
214
214
  class HlmDatePickerMulti {
215
215
  _config = injectHlmDatePickerMultiConfig();
216
216
  userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
217
- _computedClass = computed(() => hlm('tw:ring-offset-background tw:border-input tw:bg-background tw:hover:bg-accent tw:dark:bg-input/30 tw:dark:hover:bg-input/50 tw:inline-flex tw:h-9 tw:w-[280px] tw:cursor-default tw:items-center tw:justify-between tw:gap-2 tw:whitespace-nowrap tw:rounded-md tw:border tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:font-normal tw:transition-all tw:disabled:pointer-events-none tw:disabled:opacity-50', 'tw:focus-visible:ring-ring tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2', 'tw:disabled:pointer-events-none tw:disabled:opacity-50', 'tw:[&_ng-icon]:pointer-events-none tw:[&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
217
+ _computedClass = computed(() => hlm('ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50', 'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', '[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
218
218
  /** The id of the button that opens the date picker. */
219
219
  buttonId = input(`hlm-date-picker-multi-${nextId$1++}`, ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
220
220
  /** The minimum date that can be selected.*/
@@ -396,7 +396,7 @@ let nextId = 0;
396
396
  class HlmDateRangePicker {
397
397
  _config = injectHlmDateRangePickerConfig();
398
398
  userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
399
- _computedClass = computed(() => hlm('tw:ring-offset-background tw:border-input tw:bg-background tw:hover:bg-accent tw:dark:bg-input/30 tw:dark:hover:bg-input/50 tw:inline-flex tw:h-9 tw:w-[280px] tw:cursor-default tw:items-center tw:justify-between tw:gap-2 tw:whitespace-nowrap tw:rounded-md tw:border tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:font-normal tw:transition-all tw:disabled:pointer-events-none tw:disabled:opacity-50', 'tw:focus-visible:ring-ring tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2', 'tw:disabled:pointer-events-none tw:disabled:opacity-50', 'tw:[&_ng-icon]:pointer-events-none tw:[&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
399
+ _computedClass = computed(() => hlm('ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50', 'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', '[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
400
400
  /** The id of the button that opens the date picker. */
401
401
  buttonId = input(`hlm-date-picker-range-${nextId++}`, ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
402
402
  /** The minimum date that can be selected.*/
@@ -507,9 +507,9 @@ class HlmDateRangePicker {
507
507
  <ng-icon hlm size="sm" name="lucideChevronDown" />
508
508
  </button>
509
509
 
510
- <div hlmPopoverContent class="tw:w-auto tw:p-0" *brnPopoverContent="let ctx">
510
+ <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
511
511
  <hlm-calendar-range
512
- calendarClass="tw:border-0 tw:rounded-none"
512
+ calendarClass="border-0 rounded-none"
513
513
  [startDate]="_start()"
514
514
  [endDate]="_end()"
515
515
  [min]="min()"
@@ -553,9 +553,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
553
553
  <ng-icon hlm size="sm" name="lucideChevronDown" />
554
554
  </button>
555
555
 
556
- <div hlmPopoverContent class="tw:w-auto tw:p-0" *brnPopoverContent="let ctx">
556
+ <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
557
557
  <hlm-calendar-range
558
- calendarClass="tw:border-0 tw:rounded-none"
558
+ calendarClass="border-0 rounded-none"
559
559
  [startDate]="_start()"
560
560
  [endDate]="_end()"
561
561
  [min]="min()"