@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
|
@@ -4,12 +4,12 @@ import { classes } from '@egose/shadcn-theme-ng/utils';
|
|
|
4
4
|
|
|
5
5
|
class HlmSkeleton {
|
|
6
6
|
constructor() {
|
|
7
|
-
classes(() =>
|
|
7
|
+
classes(() => "bg-muted rounded-md block motion-safe:animate-pulse");
|
|
8
8
|
}
|
|
9
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
10
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
9
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
10
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmSkeleton, isStandalone: true, selector: "[hlmSkeleton],hlm-skeleton", host: { attributes: { "data-slot": "skeleton" } }, ngImport: i0 });
|
|
11
11
|
}
|
|
12
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
12
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSkeleton, decorators: [{
|
|
13
13
|
type: Directive,
|
|
14
14
|
args: [{
|
|
15
15
|
selector: '[hlmSkeleton],hlm-skeleton',
|
|
@@ -24,11 +24,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
24
24
|
*/
|
|
25
25
|
const HlmSkeletonImports = [HlmSkeleton];
|
|
26
26
|
class HlmSkeletonModule {
|
|
27
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
28
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
29
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
27
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
28
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmSkeletonModule, imports: [HlmSkeleton], exports: [HlmSkeleton] });
|
|
29
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSkeletonModule });
|
|
30
30
|
}
|
|
31
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSkeletonModule, decorators: [{
|
|
32
32
|
type: NgModule,
|
|
33
33
|
args: [{
|
|
34
34
|
imports: [...HlmSkeletonImports],
|
|
@@ -41,4 +41,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
41
41
|
*/
|
|
42
42
|
|
|
43
43
|
export { HlmSkeleton, HlmSkeletonImports, HlmSkeletonModule };
|
|
44
|
-
|
|
44
|
+
|
|
@@ -8,48 +8,13 @@ class HlmSlider {
|
|
|
8
8
|
_slider = injectBrnSlider();
|
|
9
9
|
constructor() {
|
|
10
10
|
classes(() => [
|
|
11
|
-
|
|
11
|
+
"group flex w-full touch-none flex-col select-none data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-row data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
12
12
|
]);
|
|
13
13
|
}
|
|
14
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
15
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
16
|
-
<div class="relative flex w-full items-center group-data-vertical:w-auto group-data-vertical:flex-col">
|
|
17
|
-
<div
|
|
18
|
-
brnSliderTrack
|
|
19
|
-
class="bg-muted rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5 relative grow overflow-hidden"
|
|
20
|
-
>
|
|
21
|
-
<div
|
|
22
|
-
class="bg-primary absolute select-none data-draggable-range:cursor-move data-horizontal:h-full data-vertical:w-full"
|
|
23
|
-
brnSliderRange
|
|
24
|
-
></div>
|
|
25
|
-
</div>
|
|
26
|
-
|
|
27
|
-
@for (i of _slider.thumbIndexes(); track i) {
|
|
28
|
-
<span
|
|
29
|
-
class="border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden absolute block shrink-0 select-none after:absolute after:-inset-2"
|
|
30
|
-
brnSliderThumb
|
|
31
|
-
></span>
|
|
32
|
-
}
|
|
33
|
-
</div>
|
|
34
|
-
|
|
35
|
-
@if (_slider.showTicks()) {
|
|
36
|
-
<div
|
|
37
|
-
class="px-2 group-data-vertical:px-0 group-data-vertical:py-2 text-muted-foreground mt-3 flex w-full items-start justify-between gap-1 text-xs font-medium group-data-horizontal:group-data-inverted:flex-row-reverse group-data-vertical:ms-3 group-data-vertical:mt-0 group-data-vertical:w-auto group-data-vertical:flex-col-reverse group-data-vertical:group-data-inverted:flex-col"
|
|
38
|
-
>
|
|
39
|
-
<div
|
|
40
|
-
*brnSliderTick="let tick; let formattedTick = formattedTick"
|
|
41
|
-
class="group flex w-0 flex-col items-center justify-center gap-2 group-data-vertical:h-0 group-data-vertical:w-auto group-data-vertical:flex-row"
|
|
42
|
-
>
|
|
43
|
-
<div
|
|
44
|
-
class="bg-muted-foreground/70 h-1 w-px group-data-vertical:h-px group-data-vertical:w-1 group-data-horizontal:group-data-[skip]:h-0.5 group-data-vertical:group-data-[skip]:w-0.5"
|
|
45
|
-
></div>
|
|
46
|
-
<div class="text-center group-data-[skip]:opacity-0">{{ formattedTick }}</div>
|
|
47
|
-
</div>
|
|
48
|
-
</div>
|
|
49
|
-
}
|
|
50
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: i1.BrnSliderTrack, selector: "[brnSliderTrack]" }, { kind: "directive", type: i1.BrnSliderThumb, selector: "[brnSliderThumb]" }, { kind: "directive", type: i1.BrnSliderRange, selector: "[brnSliderRange]" }, { kind: "directive", type: i1.BrnSliderTick, selector: "[brnSliderTick]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmSlider, isStandalone: true, selector: "hlm-slider, brn-slider [hlm]", hostDirectives: [{ directive: i1.BrnSlider, inputs: ["id", "id", "value", "value", "disabled", "disabled", "min", "min", "max", "max", "step", "step", "minStepsBetweenThumbs", "minStepsBetweenThumbs", "inverted", "inverted", "orientation", "orientation", "showTicks", "showTicks", "maxTicks", "maxTicks", "tickLabelInterval", "tickLabelInterval", "formatTick", "formatTick", "draggableRange", "draggableRange", "draggableRangeOnly", "draggableRangeOnly", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange"] }], ngImport: i0, template: "\n <div class=\"relative flex w-full items-center group-data-vertical:w-auto group-data-vertical:flex-col\">\n <div\n brnSliderTrack\n class=\"bg-muted rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5 relative grow overflow-hidden\"\n >\n <div\n class=\"bg-primary absolute select-none data-draggable-range:cursor-move data-horizontal:h-full data-vertical:w-full\"\n brnSliderRange\n ></div>\n </div>\n\n @for (i of _slider.thumbIndexes(); track i) {\n <span\n class=\"border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden absolute block shrink-0 select-none after:absolute after:-inset-2\"\n brnSliderThumb\n ></span>\n }\n </div>\n\n @if (_slider.showTicks()) {\n <div\n class=\"px-2 group-data-vertical:px-0 group-data-vertical:py-2 text-muted-foreground mt-3 flex w-full items-start justify-between gap-1 text-xs font-medium group-data-horizontal:group-data-inverted:flex-row-reverse group-data-vertical:ms-3 group-data-vertical:mt-0 group-data-vertical:w-auto group-data-vertical:flex-col-reverse group-data-vertical:group-data-inverted:flex-col\"\n >\n <div\n *brnSliderTick=\"let tick; let formattedTick = formattedTick\"\n class=\"group flex w-0 flex-col items-center justify-center gap-2 group-data-vertical:h-0 group-data-vertical:w-auto group-data-vertical:flex-row\"\n >\n <div\n class=\"bg-muted-foreground/70 h-1 w-px group-data-vertical:h-px group-data-vertical:w-1 group-data-horizontal:group-data-[skip]:h-0.5 group-data-vertical:group-data-[skip]:w-0.5\"\n ></div>\n <div class=\"text-center group-data-[skip]:opacity-0\">{{ formattedTick }}</div>\n </div>\n </div>\n }\n ", isInline: true, dependencies: [{ kind: "directive", type: i1.BrnSliderTrack, selector: "[brnSliderTrack]" }, { kind: "directive", type: i1.BrnSliderThumb, selector: "[brnSliderThumb]" }, { kind: "directive", type: i1.BrnSliderRange, selector: "[brnSliderRange]" }, { kind: "directive", type: i1.BrnSliderTick, selector: "[brnSliderTick]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
51
16
|
}
|
|
52
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSlider, decorators: [{
|
|
53
18
|
type: Component,
|
|
54
19
|
args: [{
|
|
55
20
|
selector: 'hlm-slider, brn-slider [hlm]',
|
|
@@ -80,42 +45,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
80
45
|
outputs: ['valueChange'],
|
|
81
46
|
},
|
|
82
47
|
],
|
|
83
|
-
template:
|
|
84
|
-
<div class="relative flex w-full items-center group-data-vertical:w-auto group-data-vertical:flex-col">
|
|
85
|
-
<div
|
|
86
|
-
brnSliderTrack
|
|
87
|
-
class="bg-muted rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5 relative grow overflow-hidden"
|
|
88
|
-
>
|
|
89
|
-
<div
|
|
90
|
-
class="bg-primary absolute select-none data-draggable-range:cursor-move data-horizontal:h-full data-vertical:w-full"
|
|
91
|
-
brnSliderRange
|
|
92
|
-
></div>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
@for (i of _slider.thumbIndexes(); track i) {
|
|
96
|
-
<span
|
|
97
|
-
class="border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden absolute block shrink-0 select-none after:absolute after:-inset-2"
|
|
98
|
-
brnSliderThumb
|
|
99
|
-
></span>
|
|
100
|
-
}
|
|
101
|
-
</div>
|
|
102
|
-
|
|
103
|
-
@if (_slider.showTicks()) {
|
|
104
|
-
<div
|
|
105
|
-
class="px-2 group-data-vertical:px-0 group-data-vertical:py-2 text-muted-foreground mt-3 flex w-full items-start justify-between gap-1 text-xs font-medium group-data-horizontal:group-data-inverted:flex-row-reverse group-data-vertical:ms-3 group-data-vertical:mt-0 group-data-vertical:w-auto group-data-vertical:flex-col-reverse group-data-vertical:group-data-inverted:flex-col"
|
|
106
|
-
>
|
|
107
|
-
<div
|
|
108
|
-
*brnSliderTick="let tick; let formattedTick = formattedTick"
|
|
109
|
-
class="group flex w-0 flex-col items-center justify-center gap-2 group-data-vertical:h-0 group-data-vertical:w-auto group-data-vertical:flex-row"
|
|
110
|
-
>
|
|
111
|
-
<div
|
|
112
|
-
class="bg-muted-foreground/70 h-1 w-px group-data-vertical:h-px group-data-vertical:w-1 group-data-horizontal:group-data-[skip]:h-0.5 group-data-vertical:group-data-[skip]:w-0.5"
|
|
113
|
-
></div>
|
|
114
|
-
<div class="text-center group-data-[skip]:opacity-0">{{ formattedTick }}</div>
|
|
115
|
-
</div>
|
|
116
|
-
</div>
|
|
117
|
-
}
|
|
118
|
-
`,
|
|
48
|
+
template: "\n <div class=\"relative flex w-full items-center group-data-vertical:w-auto group-data-vertical:flex-col\">\n <div\n brnSliderTrack\n class=\"bg-muted rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5 relative grow overflow-hidden\"\n >\n <div\n class=\"bg-primary absolute select-none data-draggable-range:cursor-move data-horizontal:h-full data-vertical:w-full\"\n brnSliderRange\n ></div>\n </div>\n\n @for (i of _slider.thumbIndexes(); track i) {\n <span\n class=\"border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden absolute block shrink-0 select-none after:absolute after:-inset-2\"\n brnSliderThumb\n ></span>\n }\n </div>\n\n @if (_slider.showTicks()) {\n <div\n class=\"px-2 group-data-vertical:px-0 group-data-vertical:py-2 text-muted-foreground mt-3 flex w-full items-start justify-between gap-1 text-xs font-medium group-data-horizontal:group-data-inverted:flex-row-reverse group-data-vertical:ms-3 group-data-vertical:mt-0 group-data-vertical:w-auto group-data-vertical:flex-col-reverse group-data-vertical:group-data-inverted:flex-col\"\n >\n <div\n *brnSliderTick=\"let tick; let formattedTick = formattedTick\"\n class=\"group flex w-0 flex-col items-center justify-center gap-2 group-data-vertical:h-0 group-data-vertical:w-auto group-data-vertical:flex-row\"\n >\n <div\n class=\"bg-muted-foreground/70 h-1 w-px group-data-vertical:h-px group-data-vertical:w-1 group-data-horizontal:group-data-[skip]:h-0.5 group-data-vertical:group-data-[skip]:w-0.5\"\n ></div>\n <div class=\"text-center group-data-[skip]:opacity-0\">{{ formattedTick }}</div>\n </div>\n </div>\n }\n ",
|
|
119
49
|
}]
|
|
120
50
|
}], ctorParameters: () => [] });
|
|
121
51
|
|
|
@@ -124,11 +54,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
124
54
|
*/
|
|
125
55
|
const HlmSliderImports = [HlmSlider];
|
|
126
56
|
class HlmSliderModule {
|
|
127
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
128
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
129
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
57
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
58
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmSliderModule, imports: [HlmSlider], exports: [HlmSlider] });
|
|
59
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSliderModule });
|
|
130
60
|
}
|
|
131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSliderModule, decorators: [{
|
|
132
62
|
type: NgModule,
|
|
133
63
|
args: [{
|
|
134
64
|
imports: [...HlmSliderImports],
|
|
@@ -141,4 +71,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
141
71
|
*/
|
|
142
72
|
|
|
143
73
|
export { HlmSlider, HlmSliderImports, HlmSliderModule };
|
|
144
|
-
|
|
74
|
+
|
package/sonner/README.md
CHANGED
|
@@ -1,64 +1,3 @@
|
|
|
1
|
-
# Sonner
|
|
1
|
+
# Sonner 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 sonner
|
|
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/sonner
|
|
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/sonner` or `@egose/shadcn-theme-ng-tw/sonner`. See the [package README](../../README.md) for installation, compatibility, Tailwind variant, test, and release guidance. Do not publish this project directory independently.
|
|
@@ -18,10 +18,10 @@ class HlmToaster {
|
|
|
18
18
|
closeButton = input(false, { ...(ngDevMode ? { debugName: "closeButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
19
19
|
toastOptions = input({
|
|
20
20
|
classes: {
|
|
21
|
-
toast:
|
|
22
|
-
description:
|
|
23
|
-
actionButton:
|
|
24
|
-
cancelButton:
|
|
21
|
+
toast: "group tw:toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
|
22
|
+
description: "group-[.toast]:text-muted-foreground",
|
|
23
|
+
actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
|
24
|
+
cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
|
25
25
|
},
|
|
26
26
|
}, /* @ts-ignore */
|
|
27
27
|
...(ngDevMode ? [{ debugName: "toastOptions" }] : /* istanbul ignore next */ []));
|
|
@@ -31,10 +31,10 @@ class HlmToaster {
|
|
|
31
31
|
...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
|
|
32
32
|
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
33
33
|
userStyle = input({}, { ...(ngDevMode ? { debugName: "userStyle" } : /* istanbul ignore next */ {}), alias: 'style' });
|
|
34
|
-
_computedClass = computed(() => hlm(
|
|
34
|
+
_computedClass = computed(() => hlm("toaster group", this.userClass()), /* @ts-ignore */
|
|
35
35
|
...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
|
|
36
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
37
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
36
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmToaster, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
37
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmToaster, isStandalone: true, selector: "hlm-toaster", inputs: { invert: { classPropertyName: "invert", publicName: "invert", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, hotKey: { classPropertyName: "hotKey", publicName: "hotKey", isSignal: true, isRequired: false, transformFunction: null }, richColors: { classPropertyName: "richColors", publicName: "richColors", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, visibleToasts: { classPropertyName: "visibleToasts", publicName: "visibleToasts", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, toastOptions: { classPropertyName: "toastOptions", publicName: "toastOptions", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, userStyle: { classPropertyName: "userStyle", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
38
38
|
<ngx-sonner-toaster
|
|
39
39
|
[class]="_computedClass()"
|
|
40
40
|
[invert]="invert()"
|
|
@@ -53,7 +53,7 @@ class HlmToaster {
|
|
|
53
53
|
/>
|
|
54
54
|
`, isInline: true, dependencies: [{ kind: "component", type: NgxSonnerToaster, selector: "ngx-sonner-toaster", inputs: ["invert", "theme", "position", "hotKey", "richColors", "expand", "duration", "visibleToasts", "closeButton", "toastOptions", "offset", "dir", "class", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
55
55
|
}
|
|
56
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
56
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmToaster, decorators: [{
|
|
57
57
|
type: Component,
|
|
58
58
|
args: [{
|
|
59
59
|
selector: 'hlm-toaster',
|
|
@@ -85,11 +85,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
85
85
|
*/
|
|
86
86
|
const HlmToasterImports = [HlmToaster];
|
|
87
87
|
class HlmToasterModule {
|
|
88
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
89
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
90
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
88
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmToasterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
89
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmToasterModule, imports: [HlmToaster], exports: [HlmToaster] });
|
|
90
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmToasterModule, imports: [HlmToasterImports] });
|
|
91
91
|
}
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
92
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmToasterModule, decorators: [{
|
|
93
93
|
type: NgModule,
|
|
94
94
|
args: [{
|
|
95
95
|
imports: [...HlmToasterImports],
|
|
@@ -102,4 +102,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
102
102
|
*/
|
|
103
103
|
|
|
104
104
|
export { HlmToaster, HlmToasterImports, HlmToasterModule };
|
|
105
|
-
|
|
105
|
+
|
package/spinner/README.md
CHANGED
|
@@ -1,64 +1,3 @@
|
|
|
1
|
-
# Spinner
|
|
1
|
+
# Spinner 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 spinner
|
|
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/spinner
|
|
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/spinner` or `@egose/shadcn-theme-ng-tw/spinner`. See the [package README](../../README.md) for installation, compatibility, Tailwind variant, test, and release guidance. Do not publish this project directory independently.
|
|
@@ -15,17 +15,17 @@ class HlmSpinner {
|
|
|
15
15
|
wrapperClass = input('', { ...(ngDevMode ? { debugName: "wrapperClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
16
16
|
spinnerClass = input('', { ...(ngDevMode ? { debugName: "spinnerClass" } : /* istanbul ignore next */ {}), alias: 'spinnerClass' });
|
|
17
17
|
// Outer container class (visibility + layout)
|
|
18
|
-
_containerClass = computed(() => hlm(
|
|
19
|
-
this.show() ?
|
|
18
|
+
_containerClass = computed(() => hlm("flex-col items-center justify-center", // base container styles
|
|
19
|
+
this.show() ? "flex" : "hidden", this.wrapperClass()), /* @ts-ignore */
|
|
20
20
|
...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
|
|
21
21
|
// SVG spinner class (size + animation + color)
|
|
22
|
-
_iconClass = computed(() => hlm(
|
|
22
|
+
_iconClass = computed(() => hlm("[&>svg]:animate-spin [&>svg]:text-primary [&>svg]:w-[inherit]! [&>svg]:h-[inherit]!", // base svg styles
|
|
23
23
|
this.spinnerClass()), /* @ts-ignore */
|
|
24
24
|
...(ngDevMode ? [{ debugName: "_iconClass" }] : /* istanbul ignore next */ []));
|
|
25
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
26
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
25
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmSpinner, isStandalone: true, selector: "hlm-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, spinnerClass: { classPropertyName: "spinnerClass", publicName: "spinnerClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class": "_containerClass()" } }, ngImport: i0, template: `<ng-icon [svg]="icon" [size]="size()" [class]="_iconClass()" />`, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
27
27
|
}
|
|
28
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
28
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSpinner, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
30
|
args: [{
|
|
31
31
|
selector: 'hlm-spinner',
|
|
@@ -45,11 +45,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
45
45
|
*/
|
|
46
46
|
const HlmSpinnerImports = [HlmSpinner];
|
|
47
47
|
class HlmSpinnerModule {
|
|
48
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
49
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
50
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
48
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
49
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmSpinnerModule, imports: [HlmSpinner], exports: [HlmSpinner] });
|
|
50
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSpinnerModule, imports: [HlmSpinnerImports] });
|
|
51
51
|
}
|
|
52
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
52
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSpinnerModule, decorators: [{
|
|
53
53
|
type: NgModule,
|
|
54
54
|
args: [{
|
|
55
55
|
imports: [...HlmSpinnerImports],
|
|
@@ -62,4 +62,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
62
62
|
*/
|
|
63
63
|
|
|
64
64
|
export { HlmSpinner, HlmSpinnerImports, HlmSpinnerModule };
|
|
65
|
-
|
|
65
|
+
|
package/switch/README.md
CHANGED
|
@@ -1,64 +1,3 @@
|
|
|
1
|
-
# Switch
|
|
1
|
+
# Switch 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 switch
|
|
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/switch
|
|
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/switch` or `@egose/shadcn-theme-ng-tw/switch`. See the [package README](../../README.md) for installation, compatibility, Tailwind variant, test, and release guidance. Do not publish this project directory independently.
|
|
@@ -6,12 +6,12 @@ import { hlm } from '@egose/shadcn-theme-ng/utils';
|
|
|
6
6
|
|
|
7
7
|
class HlmSwitchThumb {
|
|
8
8
|
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
9
|
-
_computedClass = computed(() => hlm(
|
|
9
|
+
_computedClass = computed(() => hlm("bg-background dark:group-data-[state=unchecked]:bg-foreground dark:group-data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=unchecked]:translate-x-0 group-data-[state=checked]:translate-x-[calc(100%-2px)]", this.userClass()), /* @ts-ignore */
|
|
10
10
|
...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
|
|
11
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
12
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
11
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSwitchThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
12
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmSwitchThumb, isStandalone: true, selector: "brn-switch-thumb[hlm],[hlmSwitchThumb]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
|
|
13
13
|
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSwitchThumb, decorators: [{
|
|
15
15
|
type: Directive,
|
|
16
16
|
args: [{
|
|
17
17
|
selector: 'brn-switch-thumb[hlm],[hlmSwitchThumb]',
|
|
@@ -28,7 +28,7 @@ const EG_SWITCH_VALUE_ACCESSOR = {
|
|
|
28
28
|
};
|
|
29
29
|
class HlmSwitch {
|
|
30
30
|
userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
|
|
31
|
-
_computedClass = computed(() => hlm(
|
|
31
|
+
_computedClass = computed(() => hlm("data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs group inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50", this.userClass()), /* @ts-ignore */
|
|
32
32
|
...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
|
|
33
33
|
/** The checked state of the switch. */
|
|
34
34
|
checked = model(false, /* @ts-ignore */
|
|
@@ -69,12 +69,11 @@ class HlmSwitch {
|
|
|
69
69
|
setDisabledState(isDisabled) {
|
|
70
70
|
this._disabled.set(isDisabled);
|
|
71
71
|
}
|
|
72
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
73
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
72
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
73
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmSwitch, isStandalone: true, selector: "hlm-switch", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 } }, outputs: { checked: "checkedChange", changed: "changed" }, host: { properties: { "attr.id": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" }, classAttribute: "contents" }, providers: [EG_SWITCH_VALUE_ACCESSOR], ngImport: i0, template: `
|
|
74
74
|
<brn-switch
|
|
75
75
|
[class]="_computedClass()"
|
|
76
76
|
[checked]="checked()"
|
|
77
|
-
@ts-ignore
|
|
78
77
|
(changed)="handleChange($event)"
|
|
79
78
|
(touched)="_onTouched?.()"
|
|
80
79
|
[disabled]="_disabled()"
|
|
@@ -87,7 +86,7 @@ class HlmSwitch {
|
|
|
87
86
|
</brn-switch>
|
|
88
87
|
`, isInline: true, dependencies: [{ kind: "component", type: BrnSwitchThumb, selector: "brn-switch-thumb" }, { kind: "component", type: BrnSwitch, selector: "brn-switch", inputs: ["checked", "id", "name", "class", "hostStyles", "size", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "tabIndex"], outputs: ["checkedChange", "touched"] }, { kind: "directive", type: HlmSwitchThumb, selector: "brn-switch-thumb[hlm],[hlmSwitchThumb]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
89
88
|
}
|
|
90
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
89
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSwitch, decorators: [{
|
|
91
90
|
type: Component,
|
|
92
91
|
args: [{
|
|
93
92
|
selector: 'hlm-switch',
|
|
@@ -104,7 +103,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
104
103
|
<brn-switch
|
|
105
104
|
[class]="_computedClass()"
|
|
106
105
|
[checked]="checked()"
|
|
107
|
-
@ts-ignore
|
|
108
106
|
(changed)="handleChange($event)"
|
|
109
107
|
(touched)="_onTouched?.()"
|
|
110
108
|
[disabled]="_disabled()"
|
|
@@ -126,11 +124,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
126
124
|
*/
|
|
127
125
|
const HlmSwitchImports = [HlmSwitch, HlmSwitchThumb];
|
|
128
126
|
class HlmSwitchModule {
|
|
129
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
130
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
131
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
127
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
128
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmSwitchModule, imports: [HlmSwitch, HlmSwitchThumb], exports: [HlmSwitch, HlmSwitchThumb] });
|
|
129
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSwitchModule, imports: [HlmSwitch] });
|
|
132
130
|
}
|
|
133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSwitchModule, decorators: [{
|
|
134
132
|
type: NgModule,
|
|
135
133
|
args: [{
|
|
136
134
|
imports: [...HlmSwitchImports],
|
|
@@ -143,4 +141,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
143
141
|
*/
|
|
144
142
|
|
|
145
143
|
export { EG_SWITCH_VALUE_ACCESSOR, HlmSwitch, HlmSwitchImports, HlmSwitchModule, HlmSwitchThumb };
|
|
146
|
-
|
|
144
|
+
|