@egose/shadcn-theme-ng 0.0.28 → 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.
- package/README.md +130 -13
- package/accordion/README.md +2 -63
- package/accordion/fesm2022/accordion.mjs +27 -39
- package/alert/README.md +2 -63
- package/alert/fesm2022/alert.mjs +47 -47
- package/alert-dialog/fesm2022/alert-dialog.mjs +47 -47
- package/aspect-ratio/fesm2022/aspect-ratio.mjs +9 -9
- package/autocomplete/README.md +2 -63
- package/autocomplete/fesm2022/autocomplete.mjs +53 -71
- package/avatar/fesm2022/avatar.mjs +32 -32
- package/badge/README.md +2 -63
- package/badge/fesm2022/badge.mjs +57 -57
- package/basic-alert/README.md +2 -63
- package/basic-alert/fesm2022/basic-alert.mjs +6 -18
- package/breadcrumb/fesm2022/breadcrumb.mjs +33 -39
- package/button/README.md +2 -63
- package/button/fesm2022/button.mjs +126 -176
- package/button/types/button.d.ts +2 -2
- package/button-group/fesm2022/button-group.mjs +20 -20
- package/calendar/README.md +2 -63
- package/calendar/fesm2022/calendar.mjs +29 -743
- package/card/fesm2022/card.mjs +33 -33
- package/carousel/fesm2022/carousel.mjs +36 -78
- package/checkbox/README.md +2 -63
- package/checkbox/fesm2022/checkbox.mjs +20 -58
- package/checkbox/types/checkbox.d.ts +5 -4
- package/collapsible/fesm2022/collapsible.mjs +15 -15
- package/combobox/fesm2022/combobox.mjs +88 -224
- package/command/fesm2022/command.mjs +49 -109
- package/confirmation-dialog/README.md +2 -63
- package/confirmation-dialog/fesm2022/confirmation-dialog.mjs +15 -40
- package/confirmation-dialog/types/confirmation-dialog.d.ts +8 -4
- package/context-menu/fesm2022/context-menu.mjs +9 -9
- package/date-picker/README.md +2 -63
- package/date-picker/fesm2022/date-picker.mjs +63 -266
- package/date-picker/types/date-picker.d.ts +7 -3
- package/dialog/README.md +2 -63
- package/dialog/fesm2022/dialog.mjs +45 -71
- package/drawer/fesm2022/drawer.mjs +44 -54
- package/dropdown-menu/fesm2022/dropdown-menu.mjs +82 -70
- package/dropdown-menu/types/dropdown-menu.d.ts +4 -0
- package/empty/fesm2022/empty.mjs +30 -30
- package/field/fesm2022/field.mjs +56 -72
- package/form-checkbox/README.md +2 -63
- package/form-checkbox/fesm2022/form-checkbox.mjs +25 -85
- package/form-checkbox/types/form-checkbox.d.ts +7 -1
- package/form-date-picker/README.md +2 -63
- package/form-date-picker/fesm2022/form-date-picker.mjs +31 -84
- package/form-date-picker/types/form-date-picker.d.ts +7 -1
- package/form-field/README.md +2 -63
- package/form-field/fesm2022/form-field.mjs +33 -19
- package/form-field/types/form-field.d.ts +28 -20
- package/form-field-simple/README.md +2 -63
- package/form-field-simple/fesm2022/form-field-simple.mjs +4 -4
- package/form-searchable-multiselect/README.md +2 -63
- package/form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs +31 -91
- package/form-searchable-multiselect/types/form-searchable-multiselect.d.ts +7 -1
- package/form-select/README.md +2 -63
- package/form-select/fesm2022/form-select.mjs +32 -149
- package/form-select/types/form-select.d.ts +7 -1
- package/form-text-input/README.md +2 -63
- package/form-text-input/fesm2022/form-text-input.mjs +35 -149
- package/form-text-input/types/form-text-input.d.ts +9 -12
- package/form-textarea/README.md +2 -63
- package/form-textarea/fesm2022/form-textarea.mjs +34 -109
- package/form-textarea/types/form-textarea.d.ts +8 -1
- package/hover-card/fesm2022/hover-card.mjs +19 -19
- package/icon/README.md +2 -63
- package/icon/fesm2022/icon.mjs +8 -8
- package/input/README.md +2 -63
- package/input/fesm2022/input.mjs +17 -12
- package/input/types/input.d.ts +2 -1
- package/input-group/fesm2022/input-group.mjs +33 -33
- package/input-otp/fesm2022/input-otp.mjs +26 -26
- package/item/fesm2022/item.mjs +53 -53
- package/kbd/fesm2022/kbd.mjs +12 -12
- package/label/README.md +2 -63
- package/label/fesm2022/label.mjs +10 -10
- package/label/types/label.d.ts +1 -1
- package/layout-simple/README.md +2 -63
- package/layout-simple/fesm2022/layout-simple.mjs +98 -429
- package/layout-simple/types/layout-simple.d.ts +25 -11
- package/menu/README.md +3 -0
- package/menu/fesm2022/menu.mjs +455 -0
- package/menu/package.json +24 -0
- package/menu/types/menu.d.ts +137 -0
- package/menubar/fesm2022/menubar.mjs +13 -13
- package/native-select/fesm2022/native-select.mjs +19 -19
- package/navigation-menu/fesm2022/navigation-menu.mjs +35 -47
- package/package.json +183 -154
- package/pagination/fesm2022/pagination.mjs +45 -331
- package/popover/README.md +2 -63
- package/popover/fesm2022/popover.mjs +30 -30
- package/progress/fesm2022/progress.mjs +13 -13
- package/radio-group/README.md +2 -63
- package/radio-group/fesm2022/radio-group.mjs +22 -19
- package/resizable/fesm2022/resizable.mjs +18 -26
- package/scroll-area/fesm2022/scroll-area.mjs +9 -9
- package/searchable-multiselect/README.md +2 -63
- package/searchable-multiselect/fesm2022/searchable-multiselect.mjs +28 -117
- package/searchable-multiselect/types/searchable-multiselect.d.ts +8 -2
- package/select/README.md +2 -63
- package/select/fesm2022/select.mjs +71 -111
- package/select/types/select.d.ts +3 -1
- package/separator/README.md +2 -63
- package/separator/fesm2022/separator.mjs +9 -9
- package/separator/types/separator.d.ts +1 -1
- package/sheet/README.md +2 -63
- package/sheet/fesm2022/sheet.mjs +41 -53
- package/sidebar/fesm2022/sidebar.mjs +125 -227
- package/skeleton/fesm2022/skeleton.mjs +9 -9
- package/slider/fesm2022/slider.mjs +10 -80
- package/sonner/README.md +2 -63
- package/sonner/fesm2022/sonner.mjs +13 -13
- package/spinner/README.md +2 -63
- package/spinner/fesm2022/spinner.mjs +11 -11
- package/switch/README.md +2 -63
- package/switch/fesm2022/switch.mjs +13 -15
- package/table/fesm2022/table.mjs +41 -41
- package/tabs/README.md +2 -63
- package/tabs/fesm2022/tabs.mjs +35 -111
- package/textarea/fesm2022/textarea.mjs +9 -9
- package/toggle/fesm2022/toggle.mjs +13 -13
- package/toggle-group/fesm2022/toggle-group.mjs +13 -13
- package/toggle-group/types/toggle-group.d.ts +13 -7
- package/tooltip/README.md +2 -63
- package/tooltip/fesm2022/tooltip.mjs +14 -14
- package/typography/fesm2022/typography.mjs +53 -53
- package/typography/types/typography.d.ts +12 -12
- package/utils/README.md +2 -63
- package/utils/fesm2022/utils.mjs +68 -44
- package/accordion/fesm2022/accordion.mjs.map +0 -1
- package/alert/fesm2022/alert.mjs.map +0 -1
- package/alert-dialog/fesm2022/alert-dialog.mjs.map +0 -1
- package/aspect-ratio/fesm2022/aspect-ratio.mjs.map +0 -1
- package/autocomplete/fesm2022/autocomplete.mjs.map +0 -1
- package/avatar/fesm2022/avatar.mjs.map +0 -1
- package/badge/fesm2022/badge.mjs.map +0 -1
- package/basic-alert/fesm2022/basic-alert.mjs.map +0 -1
- package/breadcrumb/fesm2022/breadcrumb.mjs.map +0 -1
- package/button/fesm2022/button.mjs.map +0 -1
- package/button-group/fesm2022/button-group.mjs.map +0 -1
- package/calendar/fesm2022/calendar.mjs.map +0 -1
- package/card/fesm2022/card.mjs.map +0 -1
- package/carousel/fesm2022/carousel.mjs.map +0 -1
- package/checkbox/fesm2022/checkbox.mjs.map +0 -1
- package/collapsible/fesm2022/collapsible.mjs.map +0 -1
- package/combobox/fesm2022/combobox.mjs.map +0 -1
- package/command/fesm2022/command.mjs.map +0 -1
- package/confirmation-dialog/fesm2022/confirmation-dialog.mjs.map +0 -1
- package/context-menu/fesm2022/context-menu.mjs.map +0 -1
- package/date-picker/fesm2022/date-picker.mjs.map +0 -1
- package/dialog/fesm2022/dialog.mjs.map +0 -1
- package/drawer/fesm2022/drawer.mjs.map +0 -1
- package/dropdown-menu/fesm2022/dropdown-menu.mjs.map +0 -1
- package/empty/fesm2022/empty.mjs.map +0 -1
- package/field/fesm2022/field.mjs.map +0 -1
- package/form-checkbox/fesm2022/form-checkbox.mjs.map +0 -1
- package/form-date-picker/fesm2022/form-date-picker.mjs.map +0 -1
- package/form-field/fesm2022/form-field.mjs.map +0 -1
- package/form-field-simple/fesm2022/form-field-simple.mjs.map +0 -1
- package/form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs.map +0 -1
- package/form-select/fesm2022/form-select.mjs.map +0 -1
- package/form-text-input/fesm2022/form-text-input.mjs.map +0 -1
- package/form-textarea/fesm2022/form-textarea.mjs.map +0 -1
- package/hover-card/fesm2022/hover-card.mjs.map +0 -1
- package/icon/fesm2022/icon.mjs.map +0 -1
- package/input/fesm2022/input.mjs.map +0 -1
- package/input-group/fesm2022/input-group.mjs.map +0 -1
- package/input-otp/fesm2022/input-otp.mjs.map +0 -1
- package/item/fesm2022/item.mjs.map +0 -1
- package/kbd/fesm2022/kbd.mjs.map +0 -1
- package/label/fesm2022/label.mjs.map +0 -1
- package/layout-simple/fesm2022/layout-simple.mjs.map +0 -1
- package/menubar/fesm2022/menubar.mjs.map +0 -1
- package/native-select/fesm2022/native-select.mjs.map +0 -1
- package/navigation-menu/fesm2022/navigation-menu.mjs.map +0 -1
- package/pagination/fesm2022/pagination.mjs.map +0 -1
- package/popover/fesm2022/popover.mjs.map +0 -1
- package/progress/fesm2022/progress.mjs.map +0 -1
- package/radio-group/fesm2022/radio-group.mjs.map +0 -1
- package/resizable/fesm2022/resizable.mjs.map +0 -1
- package/scroll-area/fesm2022/scroll-area.mjs.map +0 -1
- package/searchable-multiselect/fesm2022/searchable-multiselect.mjs.map +0 -1
- package/select/fesm2022/select.mjs.map +0 -1
- package/separator/fesm2022/separator.mjs.map +0 -1
- package/sheet/fesm2022/sheet.mjs.map +0 -1
- package/sidebar/fesm2022/sidebar.mjs.map +0 -1
- package/skeleton/fesm2022/skeleton.mjs.map +0 -1
- package/slider/fesm2022/slider.mjs.map +0 -1
- package/sonner/fesm2022/sonner.mjs.map +0 -1
- package/spinner/fesm2022/spinner.mjs.map +0 -1
- package/switch/fesm2022/switch.mjs.map +0 -1
- package/table/fesm2022/table.mjs.map +0 -1
- package/tabs/fesm2022/tabs.mjs.map +0 -1
- package/textarea/fesm2022/textarea.mjs.map +0 -1
- package/toggle/fesm2022/toggle.mjs.map +0 -1
- package/toggle-group/fesm2022/toggle-group.mjs.map +0 -1
- package/tooltip/fesm2022/tooltip.mjs.map +0 -1
- package/typography/fesm2022/typography.mjs.map +0 -1
- package/utils/fesm2022/utils.mjs.map +0 -1
package/card/fesm2022/card.mjs
CHANGED
|
@@ -18,12 +18,12 @@ class HlmCard {
|
|
|
18
18
|
size = input(this._defaultConfig.size, /* @ts-ignore */
|
|
19
19
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
20
20
|
constructor() {
|
|
21
|
-
classes(() =>
|
|
21
|
+
classes(() => "ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm shadow-xs ring-1 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col");
|
|
22
22
|
}
|
|
23
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
24
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
23
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCard, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
24
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmCard, isStandalone: true, selector: "[hlmCard],hlm-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "card" }, properties: { "attr.data-size": "size()" } }, ngImport: i0 });
|
|
25
25
|
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCard, decorators: [{
|
|
27
27
|
type: Directive,
|
|
28
28
|
args: [{
|
|
29
29
|
selector: '[hlmCard],hlm-card',
|
|
@@ -36,12 +36,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
36
36
|
|
|
37
37
|
class HlmCardAction {
|
|
38
38
|
constructor() {
|
|
39
|
-
classes(() =>
|
|
39
|
+
classes(() => "col-start-2 row-span-2 row-start-1 self-start justify-self-end");
|
|
40
40
|
}
|
|
41
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
42
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
41
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
42
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmCardAction, isStandalone: true, selector: "[hlmCardAction]", host: { attributes: { "data-slot": "card-action" } }, ngImport: i0 });
|
|
43
43
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardAction, decorators: [{
|
|
45
45
|
type: Directive,
|
|
46
46
|
args: [{
|
|
47
47
|
selector: '[hlmCardAction]',
|
|
@@ -51,12 +51,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
51
51
|
|
|
52
52
|
class HlmCardContent {
|
|
53
53
|
constructor() {
|
|
54
|
-
classes(() =>
|
|
54
|
+
classes(() => "px-(--card-spacing)");
|
|
55
55
|
}
|
|
56
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
57
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
56
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
57
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmCardContent, isStandalone: true, selector: "[hlmCardContent]", host: { attributes: { "data-slot": "card-content" } }, ngImport: i0 });
|
|
58
58
|
}
|
|
59
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardContent, decorators: [{
|
|
60
60
|
type: Directive,
|
|
61
61
|
args: [{
|
|
62
62
|
selector: '[hlmCardContent]',
|
|
@@ -66,12 +66,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
66
66
|
|
|
67
67
|
class HlmCardDescription {
|
|
68
68
|
constructor() {
|
|
69
|
-
classes(() =>
|
|
69
|
+
classes(() => "text-muted-foreground text-sm");
|
|
70
70
|
}
|
|
71
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
72
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
71
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
72
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmCardDescription, isStandalone: true, selector: "[hlmCardDescription]", host: { attributes: { "data-slot": "card-description" } }, ngImport: i0 });
|
|
73
73
|
}
|
|
74
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
74
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardDescription, decorators: [{
|
|
75
75
|
type: Directive,
|
|
76
76
|
args: [{
|
|
77
77
|
selector: '[hlmCardDescription]',
|
|
@@ -81,12 +81,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
81
81
|
|
|
82
82
|
class HlmCardFooter {
|
|
83
83
|
constructor() {
|
|
84
|
-
classes(() =>
|
|
84
|
+
classes(() => "rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing) flex items-center");
|
|
85
85
|
}
|
|
86
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
87
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
86
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
87
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmCardFooter, isStandalone: true, selector: "[hlmCardFooter],hlm-card-footer", host: { attributes: { "data-slot": "card-footer" } }, ngImport: i0 });
|
|
88
88
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
89
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardFooter, decorators: [{
|
|
90
90
|
type: Directive,
|
|
91
91
|
args: [{
|
|
92
92
|
selector: '[hlmCardFooter],hlm-card-footer',
|
|
@@ -96,12 +96,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
96
96
|
|
|
97
97
|
class HlmCardHeader {
|
|
98
98
|
constructor() {
|
|
99
|
-
classes(() =>
|
|
99
|
+
classes(() => "gap-1 rounded-t-xl px-(--card-spacing) [.border-b]:pb-(--card-spacing) group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]");
|
|
100
100
|
}
|
|
101
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
102
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
101
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
102
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmCardHeader, isStandalone: true, selector: "[hlmCardHeader],hlm-card-header", host: { attributes: { "data-slot": "card-header" } }, ngImport: i0 });
|
|
103
103
|
}
|
|
104
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardHeader, decorators: [{
|
|
105
105
|
type: Directive,
|
|
106
106
|
args: [{
|
|
107
107
|
selector: '[hlmCardHeader],hlm-card-header',
|
|
@@ -111,12 +111,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
111
111
|
|
|
112
112
|
class HlmCardTitle {
|
|
113
113
|
constructor() {
|
|
114
|
-
classes(() =>
|
|
114
|
+
classes(() => "text-base leading-normal font-medium group-data-[size=sm]/card:text-sm");
|
|
115
115
|
}
|
|
116
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
117
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
116
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
117
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmCardTitle, isStandalone: true, selector: "[hlmCardTitle]", host: { attributes: { "data-slot": "card-title" } }, ngImport: i0 });
|
|
118
118
|
}
|
|
119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardTitle, decorators: [{
|
|
120
120
|
type: Directive,
|
|
121
121
|
args: [{
|
|
122
122
|
selector: '[hlmCardTitle]',
|
|
@@ -137,8 +137,8 @@ const HlmCardImports = [
|
|
|
137
137
|
HlmCardTitle,
|
|
138
138
|
];
|
|
139
139
|
class HlmCardModule {
|
|
140
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
141
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
140
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
141
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmCardModule, imports: [HlmCard,
|
|
142
142
|
HlmCardAction,
|
|
143
143
|
HlmCardContent,
|
|
144
144
|
HlmCardDescription,
|
|
@@ -151,9 +151,9 @@ class HlmCardModule {
|
|
|
151
151
|
HlmCardFooter,
|
|
152
152
|
HlmCardHeader,
|
|
153
153
|
HlmCardTitle] });
|
|
154
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
154
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardModule });
|
|
155
155
|
}
|
|
156
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCardModule, decorators: [{
|
|
157
157
|
type: NgModule,
|
|
158
158
|
args: [{
|
|
159
159
|
imports: [...HlmCardImports],
|
|
@@ -166,4 +166,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
166
166
|
*/
|
|
167
167
|
|
|
168
168
|
export { HlmCard, HlmCardAction, HlmCardContent, HlmCardDescription, HlmCardFooter, HlmCardHeader, HlmCardImports, HlmCardModule, HlmCardTitle };
|
|
169
|
-
|
|
169
|
+
|
|
@@ -39,7 +39,7 @@ class HlmCarousel {
|
|
|
39
39
|
...(ngDevMode ? [{ debugName: "_slideCount" }] : /* istanbul ignore next */ []));
|
|
40
40
|
slideCount = this._slideCount.asReadonly();
|
|
41
41
|
constructor() {
|
|
42
|
-
classes(() =>
|
|
42
|
+
classes(() => "relative");
|
|
43
43
|
}
|
|
44
44
|
onEmblaEvent(event) {
|
|
45
45
|
const emblaApi = this._emblaCarousel().emblaApi;
|
|
@@ -69,22 +69,10 @@ class HlmCarousel {
|
|
|
69
69
|
scrollNext() {
|
|
70
70
|
this._emblaCarousel().scrollNext();
|
|
71
71
|
}
|
|
72
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
73
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.
|
|
74
|
-
<div
|
|
75
|
-
emblaCarousel
|
|
76
|
-
class="overflow-hidden"
|
|
77
|
-
[plugins]="plugins()"
|
|
78
|
-
[options]="_emblaOptions()"
|
|
79
|
-
[subscribeToEvents]="['init', 'select', 'reInit']"
|
|
80
|
-
(emblaChange)="onEmblaEvent($event)"
|
|
81
|
-
>
|
|
82
|
-
<ng-content select="[hlmCarouselContent],hlm-carousel-content" />
|
|
83
|
-
</div>
|
|
84
|
-
<ng-content />
|
|
85
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: EmblaCarouselDirective, selector: "[emblaCarousel]", inputs: ["options", "plugins", "subscribeToEvents", "eventsThrottleTime"], outputs: ["emblaChange"], exportAs: ["emblaCarousel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
72
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
73
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmCarousel, isStandalone: true, selector: "hlm-carousel", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "carousel", "role": "region", "aria-roledescription": "carousel" }, listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "_emblaCarousel", first: true, predicate: EmblaCarouselDirective, descendants: true, isSignal: true }], ngImport: i0, template: "\n <div\n emblaCarousel\n class=\"overflow-hidden\"\n [plugins]=\"plugins()\"\n [options]=\"_emblaOptions()\"\n [subscribeToEvents]=\"['init', 'select', 'reInit']\"\n (emblaChange)=\"onEmblaEvent($event)\"\n >\n <ng-content select=\"[hlmCarouselContent],hlm-carousel-content\" />\n </div>\n <ng-content />\n ", isInline: true, dependencies: [{ kind: "directive", type: EmblaCarouselDirective, selector: "[emblaCarousel]", inputs: ["options", "plugins", "subscribeToEvents", "eventsThrottleTime"], outputs: ["emblaChange"], exportAs: ["emblaCarousel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
86
74
|
}
|
|
87
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarousel, decorators: [{
|
|
88
76
|
type: Component,
|
|
89
77
|
args: [{
|
|
90
78
|
selector: 'hlm-carousel',
|
|
@@ -96,31 +84,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
96
84
|
'aria-roledescription': 'carousel',
|
|
97
85
|
'(keydown)': 'onKeydown($event)',
|
|
98
86
|
},
|
|
99
|
-
template:
|
|
100
|
-
<div
|
|
101
|
-
emblaCarousel
|
|
102
|
-
class="overflow-hidden"
|
|
103
|
-
[plugins]="plugins()"
|
|
104
|
-
[options]="_emblaOptions()"
|
|
105
|
-
[subscribeToEvents]="['init', 'select', 'reInit']"
|
|
106
|
-
(emblaChange)="onEmblaEvent($event)"
|
|
107
|
-
>
|
|
108
|
-
<ng-content select="[hlmCarouselContent],hlm-carousel-content" />
|
|
109
|
-
</div>
|
|
110
|
-
<ng-content />
|
|
111
|
-
`,
|
|
87
|
+
template: "\n <div\n emblaCarousel\n class=\"overflow-hidden\"\n [plugins]=\"plugins()\"\n [options]=\"_emblaOptions()\"\n [subscribeToEvents]=\"['init', 'select', 'reInit']\"\n (emblaChange)=\"onEmblaEvent($event)\"\n >\n <ng-content select=\"[hlmCarouselContent],hlm-carousel-content\" />\n </div>\n <ng-content />\n ",
|
|
112
88
|
}]
|
|
113
89
|
}], ctorParameters: () => [], propDecorators: { _emblaCarousel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EmblaCarouselDirective), { isSignal: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }] } });
|
|
114
90
|
|
|
115
91
|
class HlmCarouselContent {
|
|
116
92
|
_orientation = inject(HlmCarousel).orientation;
|
|
117
93
|
constructor() {
|
|
118
|
-
classes(() => [
|
|
94
|
+
classes(() => ["flex", this._orientation() === 'horizontal' ? "-ml-4" : "-mt-4 flex-col"]);
|
|
119
95
|
}
|
|
120
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
121
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
96
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
97
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmCarouselContent, isStandalone: true, selector: "[hlmCarouselContent],hlm-carousel-content", host: { attributes: { "data-slot": "carousel-content" } }, ngImport: i0 });
|
|
122
98
|
}
|
|
123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
99
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselContent, decorators: [{
|
|
124
100
|
type: Directive,
|
|
125
101
|
args: [{
|
|
126
102
|
selector: '[hlmCarouselContent],hlm-carousel-content',
|
|
@@ -133,12 +109,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
133
109
|
class HlmCarouselItem {
|
|
134
110
|
_orientation = inject(HlmCarousel).orientation;
|
|
135
111
|
constructor() {
|
|
136
|
-
classes(() => [
|
|
112
|
+
classes(() => ["min-w-0 shrink-0 grow-0 basis-full", this._orientation() === 'horizontal' ? "pl-4" : "pt-4"]);
|
|
137
113
|
}
|
|
138
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
139
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
114
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
115
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmCarouselItem, isStandalone: true, selector: "[hlmCarouselItem],hlm-carousel-item", host: { attributes: { "data-slot": "carousel-item", "role": "group", "aria-roledescription": "slide" } }, ngImport: i0 });
|
|
140
116
|
}
|
|
141
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselItem, decorators: [{
|
|
142
118
|
type: Directive,
|
|
143
119
|
args: [{
|
|
144
120
|
selector: '[hlmCarouselItem],hlm-carousel-item',
|
|
@@ -153,9 +129,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
153
129
|
class HlmCarouselNext {
|
|
154
130
|
_button = inject(HlmBtn);
|
|
155
131
|
_carousel = inject(HlmCarousel);
|
|
156
|
-
_computedClass = computed(() => hlm(
|
|
157
|
-
?
|
|
158
|
-
:
|
|
132
|
+
_computedClass = computed(() => hlm("rounded-full absolute h-8 w-8", this._carousel.orientation() === 'horizontal'
|
|
133
|
+
? "-end-12 top-1/2 -translate-y-1/2"
|
|
134
|
+
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90"), /* @ts-ignore */
|
|
159
135
|
...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
|
|
160
136
|
isDisabled = () => !this._carousel.canScrollNext();
|
|
161
137
|
constructor() {
|
|
@@ -164,13 +140,10 @@ class HlmCarouselNext {
|
|
|
164
140
|
untracked(() => this._button.setClass(computedClass));
|
|
165
141
|
});
|
|
166
142
|
}
|
|
167
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
168
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
169
|
-
<ng-icon name="lucideArrowRight" class="rtl:rotate-180" />
|
|
170
|
-
<span class="sr-only">Next slide</span>
|
|
171
|
-
`, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
143
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselNext, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
144
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: HlmCarouselNext, isStandalone: true, selector: "button[hlm-carousel-next], button[hlmCarouselNext]", host: { attributes: { "data-slot": "carousel-next" }, listeners: { "click": "_carousel.scrollNext()" }, properties: { "disabled": "isDisabled()" } }, providers: [provideIcons({ lucideArrowRight }), provideBrnButtonConfig({ variant: 'outline', size: 'icon-sm' })], hostDirectives: [{ directive: i1.HlmBtn, inputs: ["variant", "variant", "size", "size"] }], ngImport: i0, template: "\n <ng-icon name=\"lucideArrowRight\" class=\"rtl:rotate-180\" />\n <span class=\"sr-only\">Next slide</span>\n ", isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
172
145
|
}
|
|
173
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselNext, decorators: [{
|
|
174
147
|
type: Component,
|
|
175
148
|
args: [{
|
|
176
149
|
selector: 'button[hlm-carousel-next], button[hlmCarouselNext]',
|
|
@@ -183,19 +156,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
183
156
|
'[disabled]': 'isDisabled()',
|
|
184
157
|
'(click)': '_carousel.scrollNext()',
|
|
185
158
|
},
|
|
186
|
-
template:
|
|
187
|
-
<ng-icon name="lucideArrowRight" class="rtl:rotate-180" />
|
|
188
|
-
<span class="sr-only">Next slide</span>
|
|
189
|
-
`,
|
|
159
|
+
template: "\n <ng-icon name=\"lucideArrowRight\" class=\"rtl:rotate-180\" />\n <span class=\"sr-only\">Next slide</span>\n ",
|
|
190
160
|
}]
|
|
191
161
|
}], ctorParameters: () => [] });
|
|
192
162
|
|
|
193
163
|
class HlmCarouselPrevious {
|
|
194
164
|
_button = inject(HlmBtn);
|
|
195
165
|
_carousel = inject(HlmCarousel);
|
|
196
|
-
_computedClass = computed(() => hlm(
|
|
197
|
-
?
|
|
198
|
-
:
|
|
166
|
+
_computedClass = computed(() => hlm("rounded-full absolute h-8 w-8", this._carousel.orientation() === 'horizontal'
|
|
167
|
+
? "-start-12 top-1/2 -translate-y-1/2"
|
|
168
|
+
: "-top-12 left-1/2 -translate-x-1/2 rotate-90"), /* @ts-ignore */
|
|
199
169
|
...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
|
|
200
170
|
isDisabled = () => !this._carousel.canScrollPrev();
|
|
201
171
|
constructor() {
|
|
@@ -204,13 +174,10 @@ class HlmCarouselPrevious {
|
|
|
204
174
|
untracked(() => this._button.setClass(computedClass));
|
|
205
175
|
});
|
|
206
176
|
}
|
|
207
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
208
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
209
|
-
<ng-icon name="lucideArrowLeft" class="rtl:rotate-180" />
|
|
210
|
-
<span class="sr-only">Previous slide</span>
|
|
211
|
-
`, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
177
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselPrevious, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
178
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: HlmCarouselPrevious, isStandalone: true, selector: "button[hlm-carousel-previous], button[hlmCarouselPrevious]", host: { attributes: { "data-slot": "carousel-previous" }, listeners: { "click": "_carousel.scrollPrev()" }, properties: { "disabled": "isDisabled()" } }, providers: [provideIcons({ lucideArrowLeft }), provideBrnButtonConfig({ variant: 'outline', size: 'icon-sm' })], hostDirectives: [{ directive: i1.HlmBtn, inputs: ["variant", "variant", "size", "size"] }], ngImport: i0, template: "\n <ng-icon name=\"lucideArrowLeft\" class=\"rtl:rotate-180\" />\n <span class=\"sr-only\">Previous slide</span>\n ", isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
212
179
|
}
|
|
213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselPrevious, decorators: [{
|
|
214
181
|
type: Component,
|
|
215
182
|
args: [{
|
|
216
183
|
selector: 'button[hlm-carousel-previous], button[hlmCarouselPrevious]',
|
|
@@ -223,10 +190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
223
190
|
'[disabled]': 'isDisabled()',
|
|
224
191
|
'(click)': '_carousel.scrollPrev()',
|
|
225
192
|
},
|
|
226
|
-
template:
|
|
227
|
-
<ng-icon name="lucideArrowLeft" class="rtl:rotate-180" />
|
|
228
|
-
<span class="sr-only">Previous slide</span>
|
|
229
|
-
`,
|
|
193
|
+
template: "\n <ng-icon name=\"lucideArrowLeft\" class=\"rtl:rotate-180\" />\n <span class=\"sr-only\">Previous slide</span>\n ",
|
|
230
194
|
}]
|
|
231
195
|
}], ctorParameters: () => [] });
|
|
232
196
|
|
|
@@ -245,13 +209,10 @@ class HlmCarouselSlideDisplay {
|
|
|
245
209
|
return `${this.label()} ${currentSlide} of ${slideCount} is displayed`;
|
|
246
210
|
}, /* @ts-ignore */
|
|
247
211
|
...(ngDevMode ? [{ debugName: "_labelContent" }] : /* istanbul ignore next */ []));
|
|
248
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
249
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
250
|
-
<span class="sr-only">{{ _labelContent() }}</span>
|
|
251
|
-
<div aria-hidden="true" [class]="slideClass()">{{ _currentSlide() }} / {{ _carousel.slideCount() }}</div>
|
|
252
|
-
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
212
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselSlideDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
213
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmCarouselSlideDisplay, isStandalone: true, selector: "hlm-carousel-slide-display", inputs: { slideClass: { classPropertyName: "slideClass", publicName: "slideClass", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "carousel-slide-display" } }, ngImport: i0, template: "\n <span class=\"sr-only\">{{ _labelContent() }}</span>\n <div aria-hidden=\"true\" [class]=\"slideClass()\">{{ _currentSlide() }} / {{ _carousel.slideCount() }}</div>\n ", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
253
214
|
}
|
|
254
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselSlideDisplay, decorators: [{
|
|
255
216
|
type: Component,
|
|
256
217
|
args: [{
|
|
257
218
|
selector: 'hlm-carousel-slide-display',
|
|
@@ -259,10 +220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
259
220
|
host: {
|
|
260
221
|
'data-slot': 'carousel-slide-display',
|
|
261
222
|
},
|
|
262
|
-
template:
|
|
263
|
-
<span class="sr-only">{{ _labelContent() }}</span>
|
|
264
|
-
<div aria-hidden="true" [class]="slideClass()">{{ _currentSlide() }} / {{ _carousel.slideCount() }}</div>
|
|
265
|
-
`,
|
|
223
|
+
template: "\n <span class=\"sr-only\">{{ _labelContent() }}</span>\n <div aria-hidden=\"true\" [class]=\"slideClass()\">{{ _currentSlide() }} / {{ _carousel.slideCount() }}</div>\n ",
|
|
266
224
|
}]
|
|
267
225
|
}], propDecorators: { slideClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideClass", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
268
226
|
|
|
@@ -278,8 +236,8 @@ const HlmCarouselImports = [
|
|
|
278
236
|
HlmCarouselSlideDisplay,
|
|
279
237
|
];
|
|
280
238
|
class HlmCarouselModule {
|
|
281
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
282
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
239
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
240
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselModule, imports: [HlmCarousel,
|
|
283
241
|
HlmCarouselContent,
|
|
284
242
|
HlmCarouselItem,
|
|
285
243
|
HlmCarouselPrevious,
|
|
@@ -290,10 +248,10 @@ class HlmCarouselModule {
|
|
|
290
248
|
HlmCarouselPrevious,
|
|
291
249
|
HlmCarouselNext,
|
|
292
250
|
HlmCarouselSlideDisplay] });
|
|
293
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
251
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselModule, imports: [HlmCarouselPrevious,
|
|
294
252
|
HlmCarouselNext] });
|
|
295
253
|
}
|
|
296
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselModule, decorators: [{
|
|
297
255
|
type: NgModule,
|
|
298
256
|
args: [{
|
|
299
257
|
imports: [...HlmCarouselImports],
|
|
@@ -306,4 +264,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
306
264
|
*/
|
|
307
265
|
|
|
308
266
|
export { HlmCarousel, HlmCarouselContent, HlmCarouselImports, HlmCarouselItem, HlmCarouselModule, HlmCarouselNext, HlmCarouselPrevious, HlmCarouselSlideDisplay };
|
|
309
|
-
|
|
267
|
+
|
package/checkbox/README.md
CHANGED
|
@@ -1,64 +1,3 @@
|
|
|
1
|
-
# Checkbox
|
|
1
|
+
# Checkbox Subpath
|
|
2
2
|
|
|
3
|
-
This project
|
|
4
|
-
|
|
5
|
-
## Code scaffolding
|
|
6
|
-
|
|
7
|
-
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
ng generate component component-name
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
ng generate --help
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Building
|
|
20
|
-
|
|
21
|
-
To build the library, run:
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
ng build checkbox
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
28
|
-
|
|
29
|
-
### Publishing the Library
|
|
30
|
-
|
|
31
|
-
Once the project is built, you can publish your library by following these steps:
|
|
32
|
-
|
|
33
|
-
1. Navigate to the `dist` directory:
|
|
34
|
-
|
|
35
|
-
```bash
|
|
36
|
-
cd dist/checkbox
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
40
|
-
```bash
|
|
41
|
-
npm publish
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Running unit tests
|
|
45
|
-
|
|
46
|
-
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
47
|
-
|
|
48
|
-
```bash
|
|
49
|
-
ng test
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## Running end-to-end tests
|
|
53
|
-
|
|
54
|
-
For end-to-end (e2e) testing, run:
|
|
55
|
-
|
|
56
|
-
```bash
|
|
57
|
-
ng e2e
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
61
|
-
|
|
62
|
-
## Additional Resources
|
|
63
|
-
|
|
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.
|
|
3
|
+
This project ships only as `@egose/shadcn-theme-ng/checkbox` or `@egose/shadcn-theme-ng-tw/checkbox`. See the [package README](../../README.md) for installation, compatibility, Tailwind variant, test, and release guidance. Do not publish this project directory independently.
|
|
@@ -14,7 +14,7 @@ const HLM_CHECKBOX_VALUE_ACCESSOR = {
|
|
|
14
14
|
};
|
|
15
15
|
class HlmCheckbox {
|
|
16
16
|
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
17
|
-
_computedClass = computed(() => hlm(
|
|
17
|
+
_computedClass = computed(() => hlm("border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer size-4 shrink-0 cursor-default rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", this.userClass(), this.disabledState() ? "cursor-not-allowed opacity-50" : ''), /* @ts-ignore */
|
|
18
18
|
...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
|
|
19
19
|
/** Used to set the id on the underlying brn element. */
|
|
20
20
|
id = input(null, /* @ts-ignore */
|
|
@@ -35,15 +35,17 @@ class HlmCheckbox {
|
|
|
35
35
|
required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
36
36
|
/** Whether the checkbox is disabled. */
|
|
37
37
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
...(ngDevMode ? [{ debugName: "
|
|
38
|
+
/** Additional visual/interaction lock that does not write to a reactive form control. */
|
|
39
|
+
wrapperDisabled = input(false, { ...(ngDevMode ? { debugName: "wrapperDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
40
|
+
formDisabled = signal(false, /* @ts-ignore */
|
|
41
|
+
...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
|
|
42
|
+
disabledState = computed(() => this.disabled() || this.wrapperDisabled() || this.formDisabled(), /* @ts-ignore */
|
|
43
|
+
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
42
44
|
changed = output();
|
|
43
45
|
_onChange;
|
|
44
46
|
_onTouched;
|
|
45
47
|
_handleChange() {
|
|
46
|
-
if (this.
|
|
48
|
+
if (this.disabledState())
|
|
47
49
|
return;
|
|
48
50
|
const previousChecked = this.checked();
|
|
49
51
|
this.checked.set(previousChecked === 'indeterminate' ? true : !previousChecked);
|
|
@@ -61,81 +63,41 @@ class HlmCheckbox {
|
|
|
61
63
|
this._onTouched = fn;
|
|
62
64
|
}
|
|
63
65
|
setDisabledState(isDisabled) {
|
|
64
|
-
this.
|
|
66
|
+
this.formDisabled.set(isDisabled);
|
|
65
67
|
}
|
|
66
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
67
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
68
|
-
<brn-checkbox
|
|
69
|
-
[id]="id()"
|
|
70
|
-
[name]="name()"
|
|
71
|
-
[class]="_computedClass()"
|
|
72
|
-
[checked]="checked()"
|
|
73
|
-
[disabled]="_state().disabled()"
|
|
74
|
-
[required]="required()"
|
|
75
|
-
[aria-label]="ariaLabel()"
|
|
76
|
-
[aria-labelledby]="ariaLabelledby()"
|
|
77
|
-
[aria-describedby]="ariaDescribedby()"
|
|
78
|
-
(changed)="_handleChange()"
|
|
79
|
-
(touched)="_onTouched?.()"
|
|
80
|
-
>
|
|
81
|
-
@if (checked()) {
|
|
82
|
-
<span class="flex items-center justify-center text-current transition-none">
|
|
83
|
-
<ng-icon hlm size="14px" name="lucideCheck" />
|
|
84
|
-
</span>
|
|
85
|
-
}
|
|
86
|
-
</brn-checkbox>
|
|
87
|
-
`, isInline: true, dependencies: [{ kind: "component", type: BrnCheckbox, selector: "brn-checkbox", inputs: ["checked", "indeterminate", "id", "name", "class", "hostStyles", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "forceInvalid"], outputs: ["checkedChange", "indeterminateChange", "touched"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], viewProviders: [provideIcons({ lucideCheck })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
68
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
69
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmCheckbox, isStandalone: true, selector: "hlm-checkbox", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrapperDisabled: { classPropertyName: "wrapperDisabled", publicName: "wrapperDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, host: { properties: { "attr.id": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.data-disabled": "disabledState() ? \"\" : null" }, classAttribute: "contents peer" }, providers: [HLM_CHECKBOX_VALUE_ACCESSOR], ngImport: i0, template: "\n <brn-checkbox\n [id]=\"id()\"\n [name]=\"name()\"\n [class]=\"_computedClass()\"\n [checked]=\"checked()\"\n [disabled]=\"disabledState()\"\n [required]=\"required()\"\n [aria-label]=\"ariaLabel()\"\n [aria-labelledby]=\"ariaLabelledby()\"\n [aria-describedby]=\"ariaDescribedby()\"\n (changed)=\"_handleChange()\"\n (touched)=\"_onTouched?.()\"\n >\n @if (checked()) {\n <span class=\"flex items-center justify-center text-current transition-none\">\n <ng-icon hlm size=\"14px\" name=\"lucideCheck\" />\n </span>\n }\n </brn-checkbox>\n ", isInline: true, dependencies: [{ kind: "component", type: BrnCheckbox, selector: "brn-checkbox", inputs: ["checked", "indeterminate", "id", "name", "class", "hostStyles", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "forceInvalid"], outputs: ["checkedChange", "indeterminateChange", "touched"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], viewProviders: [provideIcons({ lucideCheck })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
88
70
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
71
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckbox, decorators: [{
|
|
90
72
|
type: Component,
|
|
91
73
|
args: [{
|
|
92
74
|
selector: 'hlm-checkbox',
|
|
93
75
|
imports: [BrnCheckbox, NgIcon, HlmIcon],
|
|
94
|
-
template:
|
|
95
|
-
<brn-checkbox
|
|
96
|
-
[id]="id()"
|
|
97
|
-
[name]="name()"
|
|
98
|
-
[class]="_computedClass()"
|
|
99
|
-
[checked]="checked()"
|
|
100
|
-
[disabled]="_state().disabled()"
|
|
101
|
-
[required]="required()"
|
|
102
|
-
[aria-label]="ariaLabel()"
|
|
103
|
-
[aria-labelledby]="ariaLabelledby()"
|
|
104
|
-
[aria-describedby]="ariaDescribedby()"
|
|
105
|
-
(changed)="_handleChange()"
|
|
106
|
-
(touched)="_onTouched?.()"
|
|
107
|
-
>
|
|
108
|
-
@if (checked()) {
|
|
109
|
-
<span class="flex items-center justify-center text-current transition-none">
|
|
110
|
-
<ng-icon hlm size="14px" name="lucideCheck" />
|
|
111
|
-
</span>
|
|
112
|
-
}
|
|
113
|
-
</brn-checkbox>
|
|
114
|
-
`,
|
|
76
|
+
template: "\n <brn-checkbox\n [id]=\"id()\"\n [name]=\"name()\"\n [class]=\"_computedClass()\"\n [checked]=\"checked()\"\n [disabled]=\"disabledState()\"\n [required]=\"required()\"\n [aria-label]=\"ariaLabel()\"\n [aria-labelledby]=\"ariaLabelledby()\"\n [aria-describedby]=\"ariaDescribedby()\"\n (changed)=\"_handleChange()\"\n (touched)=\"_onTouched?.()\"\n >\n @if (checked()) {\n <span class=\"flex items-center justify-center text-current transition-none\">\n <ng-icon hlm size=\"14px\" name=\"lucideCheck\" />\n </span>\n }\n </brn-checkbox>\n ",
|
|
115
77
|
host: {
|
|
116
78
|
class: 'contents peer',
|
|
117
79
|
'[attr.id]': 'null',
|
|
118
80
|
'[attr.aria-label]': 'null',
|
|
119
81
|
'[attr.aria-labelledby]': 'null',
|
|
120
82
|
'[attr.aria-describedby]': 'null',
|
|
121
|
-
'[attr.data-disabled]': '
|
|
83
|
+
'[attr.data-disabled]': 'disabledState() ? "" : null',
|
|
122
84
|
},
|
|
123
85
|
providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
|
|
124
86
|
viewProviders: [provideIcons({ lucideCheck })],
|
|
125
87
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
126
88
|
}]
|
|
127
|
-
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
89
|
+
}], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], wrapperDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperDisabled", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
128
90
|
|
|
129
91
|
/*
|
|
130
92
|
* Public API Surface of checkbox
|
|
131
93
|
*/
|
|
132
94
|
const HlmCheckboxImports = [HlmCheckbox];
|
|
133
95
|
class HlmCheckboxModule {
|
|
134
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
135
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
136
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
96
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
97
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckboxModule, imports: [HlmCheckbox], exports: [HlmCheckbox] });
|
|
98
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckboxModule, imports: [HlmCheckboxImports] });
|
|
137
99
|
}
|
|
138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckboxModule, decorators: [{
|
|
139
101
|
type: NgModule,
|
|
140
102
|
args: [{
|
|
141
103
|
imports: [...HlmCheckboxImports],
|
|
@@ -148,4 +110,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
148
110
|
*/
|
|
149
111
|
|
|
150
112
|
export { HLM_CHECKBOX_VALUE_ACCESSOR, HlmCheckbox, HlmCheckboxImports, HlmCheckboxModule };
|
|
151
|
-
|
|
113
|
+
|