@ojiepermana/angular 21.3.4 → 22.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -6
- package/component/accordion/README.md +195 -0
- package/component/alert/README.md +182 -0
- package/component/alert-dialog/README.md +239 -0
- package/component/aspect-ratio/README.md +112 -0
- package/component/avatar/README.md +176 -0
- package/component/badge/README.md +133 -0
- package/component/breadcrumb/README.md +216 -0
- package/component/button/README.md +139 -0
- package/component/button-group/README.md +208 -0
- package/component/calendar/README.md +132 -0
- package/component/card/README.md +220 -0
- package/component/carousel/README.md +276 -0
- package/component/checkbox/README.md +149 -0
- package/component/collapsible/README.md +195 -0
- package/component/combobox/README.md +198 -0
- package/component/command/README.md +275 -0
- package/component/composer/README.md +235 -0
- package/component/composer/package.json +4 -0
- package/component/context-menu/README.md +267 -0
- package/component/date-picker/README.md +177 -0
- package/component/dialog/README.md +237 -0
- package/component/drawer/README.md +145 -0
- package/component/dropdown-menu/README.md +311 -0
- package/component/editor/README.md +136 -0
- package/component/editor/package.json +4 -0
- package/component/empty/README.md +183 -0
- package/component/empty/package.json +4 -0
- package/component/form/README.md +210 -0
- package/component/hover-card/README.md +146 -0
- package/component/hover-card/package.json +4 -0
- package/component/input/README.md +159 -0
- package/component/input-group/README.md +239 -0
- package/component/input-otp/README.md +278 -0
- package/component/input-otp/package.json +4 -0
- package/component/item/README.md +247 -0
- package/component/kanban/README.md +81 -0
- package/component/kanban/package.json +4 -0
- package/component/kbd/README.md +139 -0
- package/component/kbd/package.json +4 -0
- package/component/label/README.md +136 -0
- package/component/menubar/README.md +269 -0
- package/component/menubar/package.json +4 -0
- package/component/native-select/README.md +176 -0
- package/component/native-select/package.json +4 -0
- package/component/navigation-menu/README.md +160 -0
- package/component/navigation-menu/package.json +4 -0
- package/component/pagination/README.md +144 -0
- package/component/pillbox/README.md +67 -0
- package/component/pillbox/package.json +4 -0
- package/component/popover/README.md +43 -0
- package/component/progress/README.md +160 -0
- package/component/radio/README.md +209 -0
- package/component/resizable/README.md +168 -0
- package/component/resizable/package.json +4 -0
- package/component/scroll-area/README.md +143 -0
- package/component/select/README.md +174 -0
- package/component/separator/README.md +170 -0
- package/component/sheet/README.md +183 -0
- package/component/skeleton/README.md +158 -0
- package/component/slider/README.md +207 -0
- package/component/spinner/README.md +160 -0
- package/component/spinner/package.json +4 -0
- package/component/switch/README.md +166 -0
- package/component/table/README.md +291 -0
- package/component/tabs/README.md +219 -0
- package/component/textarea/README.md +154 -0
- package/component/timeline/README.md +94 -0
- package/component/timeline/package.json +4 -0
- package/component/toast/README.md +321 -0
- package/component/toggle/README.md +131 -0
- package/component/toggle/package.json +4 -0
- package/component/toggle-group/README.md +206 -0
- package/component/toggle-group/package.json +4 -0
- package/component/tooltip/README.md +211 -0
- package/fesm2022/ojiepermana-angular-component-accordion.mjs +45 -30
- package/fesm2022/ojiepermana-angular-component-accordion.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs +95 -61
- package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-alert.mjs +30 -21
- package/fesm2022/ojiepermana-angular-component-alert.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-aspect-ratio.mjs +11 -7
- package/fesm2022/ojiepermana-angular-component-aspect-ratio.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-avatar.mjs +50 -34
- package/fesm2022/ojiepermana-angular-component-avatar.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-badge.mjs +9 -6
- package/fesm2022/ojiepermana-angular-component-badge.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-breadcrumb.mjs +49 -35
- package/fesm2022/ojiepermana-angular-component-breadcrumb.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-button-group.mjs +25 -17
- package/fesm2022/ojiepermana-angular-component-button-group.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-button.mjs +11 -7
- package/fesm2022/ojiepermana-angular-component-button.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-calendar.mjs +23 -13
- package/fesm2022/ojiepermana-angular-component-calendar.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-card.mjs +51 -36
- package/fesm2022/ojiepermana-angular-component-card.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-carousel.mjs +66 -42
- package/fesm2022/ojiepermana-angular-component-carousel.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-chart.mjs +494 -283
- package/fesm2022/ojiepermana-angular-component-chart.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-checkbox.mjs +23 -13
- package/fesm2022/ojiepermana-angular-component-checkbox.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-collapsible.mjs +28 -20
- package/fesm2022/ojiepermana-angular-component-collapsible.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-combobox.mjs +27 -18
- package/fesm2022/ojiepermana-angular-component-combobox.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-command.mjs +77 -52
- package/fesm2022/ojiepermana-angular-component-command.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-composer.mjs +352 -0
- package/fesm2022/ojiepermana-angular-component-composer.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-context-menu.mjs +9 -6
- package/fesm2022/ojiepermana-angular-component-context-menu.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-date-picker.mjs +34 -19
- package/fesm2022/ojiepermana-angular-component-date-picker.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-dialog.mjs +55 -38
- package/fesm2022/ojiepermana-angular-component-dialog.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-drawer.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs +108 -74
- package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-editor.mjs +717 -0
- package/fesm2022/ojiepermana-angular-component-editor.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-empty.mjs +145 -0
- package/fesm2022/ojiepermana-angular-component-empty.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-form.mjs +200 -42
- package/fesm2022/ojiepermana-angular-component-form.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-hover-card.mjs +297 -0
- package/fesm2022/ojiepermana-angular-component-hover-card.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-input-group.mjs +48 -33
- package/fesm2022/ojiepermana-angular-component-input-group.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-input-otp.mjs +514 -0
- package/fesm2022/ojiepermana-angular-component-input-otp.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-input.mjs +7 -5
- package/fesm2022/ojiepermana-angular-component-input.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-item.mjs +76 -53
- package/fesm2022/ojiepermana-angular-component-item.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-kanban.mjs +314 -0
- package/fesm2022/ojiepermana-angular-component-kanban.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-kbd.mjs +55 -0
- package/fesm2022/ojiepermana-angular-component-kbd.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-label.mjs +9 -6
- package/fesm2022/ojiepermana-angular-component-label.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-menubar.mjs +308 -0
- package/fesm2022/ojiepermana-angular-component-menubar.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-native-select.mjs +67 -0
- package/fesm2022/ojiepermana-angular-component-native-select.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-navigation-menu.mjs +413 -0
- package/fesm2022/ojiepermana-angular-component-navigation-menu.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-pagination.mjs +65 -31
- package/fesm2022/ojiepermana-angular-component-pagination.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-pillbox.mjs +812 -0
- package/fesm2022/ojiepermana-angular-component-pillbox.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-popover.mjs +18 -12
- package/fesm2022/ojiepermana-angular-component-popover.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-progress.mjs +17 -10
- package/fesm2022/ojiepermana-angular-component-progress.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-radio.mjs +47 -17
- package/fesm2022/ojiepermana-angular-component-radio.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-resizable.mjs +481 -0
- package/fesm2022/ojiepermana-angular-component-resizable.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-scroll-area.mjs +15 -9
- package/fesm2022/ojiepermana-angular-component-scroll-area.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-select.mjs +71 -26
- package/fesm2022/ojiepermana-angular-component-select.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-separator.mjs +11 -7
- package/fesm2022/ojiepermana-angular-component-separator.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-sheet.mjs +91 -42
- package/fesm2022/ojiepermana-angular-component-sheet.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-skeleton.mjs +7 -5
- package/fesm2022/ojiepermana-angular-component-skeleton.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-slider.mjs +401 -7
- package/fesm2022/ojiepermana-angular-component-slider.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-spinner.mjs +60 -0
- package/fesm2022/ojiepermana-angular-component-spinner.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-switch.mjs +47 -15
- package/fesm2022/ojiepermana-angular-component-switch.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-table.mjs +56 -40
- package/fesm2022/ojiepermana-angular-component-table.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-tabs.mjs +58 -38
- package/fesm2022/ojiepermana-angular-component-tabs.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-textarea.mjs +8 -6
- package/fesm2022/ojiepermana-angular-component-textarea.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-timeline.mjs +237 -0
- package/fesm2022/ojiepermana-angular-component-timeline.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-toast.mjs +28 -4
- package/fesm2022/ojiepermana-angular-component-toast.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-toggle-group.mjs +289 -0
- package/fesm2022/ojiepermana-angular-component-toggle-group.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-toggle.mjs +82 -0
- package/fesm2022/ojiepermana-angular-component-toggle.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-tooltip.mjs +304 -6
- package/fesm2022/ojiepermana-angular-component-tooltip.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-component-utils.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-layout-component.mjs +45 -24
- package/fesm2022/ojiepermana-angular-layout-component.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-layout-provider.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-layout-services.mjs +7 -5
- package/fesm2022/ojiepermana-angular-layout-services.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-layout-shell.mjs +3 -3
- package/fesm2022/ojiepermana-angular-layout-shell.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-layout-token-directive.mjs +9 -6
- package/fesm2022/ojiepermana-angular-layout-token-directive.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-layout-token.mjs.map +1 -1
- package/fesm2022/{ojiepermana-angular-layout-empty.mjs → ojiepermana-angular-layout-type-empty.mjs} +4 -4
- package/fesm2022/ojiepermana-angular-layout-type-empty.mjs.map +1 -0
- package/fesm2022/{ojiepermana-angular-layout-horizontal.mjs → ojiepermana-angular-layout-type-horizontal.mjs} +26 -17
- package/fesm2022/ojiepermana-angular-layout-type-horizontal.mjs.map +1 -0
- package/fesm2022/{ojiepermana-angular-layout-vertical.mjs → ojiepermana-angular-layout-type-vertical.mjs} +28 -18
- package/fesm2022/ojiepermana-angular-layout-type-vertical.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-layout.mjs +74 -50
- package/fesm2022/ojiepermana-angular-layout.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-navigation-demo-data.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-navigation-icon.mjs +11 -7
- package/fesm2022/ojiepermana-angular-navigation-icon.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-navigation-item.mjs +27 -16
- package/fesm2022/ojiepermana-angular-navigation-item.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-navigation-service.mjs +29 -20
- package/fesm2022/ojiepermana-angular-navigation-service.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-navigation-sidebar.mjs +71 -43
- package/fesm2022/ojiepermana-angular-navigation-sidebar.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-navigation-topbar.mjs +261 -24
- package/fesm2022/ojiepermana-angular-navigation-topbar.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-theme-provider.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-theme-services.mjs +19 -11
- package/fesm2022/ojiepermana-angular-theme-services.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-theme-token.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-theme.mjs +19 -11
- package/fesm2022/ojiepermana-angular-theme.mjs.map +1 -1
- package/generator/api/bin/src/emit/client.js +4 -2
- package/generator/api/bin/src/writer/index.js +2 -2
- package/generator/guide/bin/schematics/build/index.js +3 -2
- package/generator/guide/bin/src/engine/component.js +2 -2
- package/generator/guide/bin/src/engine/index.js +3 -3
- package/generator/guide/bin/src/engine/render.js +10 -5
- package/layout/type/empty/package.json +4 -0
- package/layout/type/horizontal/package.json +4 -0
- package/layout/type/vertical/package.json +4 -0
- package/navigation/topbar/README.md +196 -0
- package/package.json +89 -25
- package/theme/README.md +110 -3
- package/theme/styles/integrations/material/autocomplete.css +178 -0
- package/theme/styles/integrations/material/button.css +468 -0
- package/theme/styles/integrations/material/dialog.css +152 -0
- package/theme/styles/integrations/material/select.css +175 -0
- package/theme/styles/integrations/material/slide-toggle.css +234 -0
- package/theme/styles/integrations/material/slider.css +194 -0
- package/theme/styles/integrations/material/tabs.css +229 -0
- package/theme/styles/integrations/material.css +70 -60
- package/types/ojiepermana-angular-component-combobox.d.ts +1 -2
- package/types/ojiepermana-angular-component-composer.d.ts +90 -0
- package/types/ojiepermana-angular-component-dropdown-menu.d.ts +2 -0
- package/types/ojiepermana-angular-component-editor.d.ts +123 -0
- package/types/ojiepermana-angular-component-empty.d.ts +50 -0
- package/types/ojiepermana-angular-component-form.d.ts +52 -3
- package/types/ojiepermana-angular-component-hover-card.d.ts +74 -0
- package/types/ojiepermana-angular-component-input-otp.d.ts +136 -0
- package/types/ojiepermana-angular-component-kanban.d.ts +70 -0
- package/types/ojiepermana-angular-component-kbd.d.ts +16 -0
- package/types/ojiepermana-angular-component-menubar.d.ts +67 -0
- package/types/ojiepermana-angular-component-native-select.d.ts +26 -0
- package/types/ojiepermana-angular-component-navigation-menu.d.ts +96 -0
- package/types/ojiepermana-angular-component-pagination.d.ts +10 -4
- package/types/ojiepermana-angular-component-pillbox.d.ts +157 -0
- package/types/ojiepermana-angular-component-radio.d.ts +7 -1
- package/types/ojiepermana-angular-component-resizable.d.ts +99 -0
- package/types/ojiepermana-angular-component-select.d.ts +17 -5
- package/types/ojiepermana-angular-component-sheet.d.ts +3 -1
- package/types/ojiepermana-angular-component-slider.d.ts +59 -1
- package/types/ojiepermana-angular-component-spinner.d.ts +13 -0
- package/types/ojiepermana-angular-component-switch.d.ts +13 -3
- package/types/ojiepermana-angular-component-timeline.d.ts +63 -0
- package/types/ojiepermana-angular-component-toast.d.ts +12 -3
- package/types/ojiepermana-angular-component-toggle-group.d.ts +89 -0
- package/types/ojiepermana-angular-component-toggle.d.ts +25 -0
- package/types/ojiepermana-angular-component-tooltip.d.ts +72 -5
- package/types/{ojiepermana-angular-layout-horizontal.d.ts → ojiepermana-angular-layout-type-horizontal.d.ts} +3 -3
- package/types/{ojiepermana-angular-layout-vertical.d.ts → ojiepermana-angular-layout-type-vertical.d.ts} +3 -3
- package/types/ojiepermana-angular-layout.d.ts +5 -5
- package/types/ojiepermana-angular-navigation-item.d.ts +1 -1
- package/types/ojiepermana-angular-navigation-service.d.ts +7 -7
- package/types/ojiepermana-angular-navigation-sidebar.d.ts +8 -8
- package/types/ojiepermana-angular-navigation-topbar.d.ts +24 -4
- package/types/ojiepermana-angular-navigation-types.d.ts +14 -8
- package/fesm2022/ojiepermana-angular-layout-empty.mjs.map +0 -1
- package/fesm2022/ojiepermana-angular-layout-horizontal.mjs.map +0 -1
- package/fesm2022/ojiepermana-angular-layout-vertical.mjs.map +0 -1
- package/layout/empty/package.json +0 -4
- package/layout/horizontal/package.json +0 -4
- package/layout/vertical/package.json +0 -4
- /package/types/{ojiepermana-angular-layout-empty.d.ts → ojiepermana-angular-layout-type-empty.d.ts} +0 -0
|
@@ -8,26 +8,30 @@ let nextTabsId = 0;
|
|
|
8
8
|
* themselves so the group can drive roving-tabindex keyboard navigation.
|
|
9
9
|
*/
|
|
10
10
|
class TabsContextBase {
|
|
11
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
12
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
11
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TabsContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
12
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: TabsContextBase, isStandalone: true, ngImport: i0 });
|
|
13
13
|
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TabsContextBase, decorators: [{
|
|
15
15
|
type: Directive
|
|
16
16
|
}] });
|
|
17
17
|
class TabsListContextBase {
|
|
18
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
19
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
18
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TabsListContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
19
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: TabsListContextBase, isStandalone: true, ngImport: i0 });
|
|
20
20
|
}
|
|
21
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
21
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TabsListContextBase, decorators: [{
|
|
22
22
|
type: Directive
|
|
23
23
|
}] });
|
|
24
24
|
class TabsComponent extends TabsContextBase {
|
|
25
|
-
value = model(null,
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
value = model(null, /* @ts-ignore */
|
|
26
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
27
|
+
orientation = input('horizontal', /* @ts-ignore */
|
|
28
|
+
...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
29
|
+
class = input('', /* @ts-ignore */
|
|
30
|
+
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
28
31
|
idPrefix = `ui-tabs-${nextTabsId++}`;
|
|
29
32
|
triggers = new Map();
|
|
30
|
-
classes = computed(() => cn(this.orientation() === 'vertical' ? 'flex items-start gap-4' : 'block', this.class()),
|
|
33
|
+
classes = computed(() => cn(this.orientation() === 'vertical' ? 'flex items-start gap-4' : 'block', this.class()), /* @ts-ignore */
|
|
34
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
31
35
|
register(element, value, disabled) {
|
|
32
36
|
this.triggers.set(element, { element, value, disabled });
|
|
33
37
|
if (this.value() == null && !disabled()) {
|
|
@@ -84,10 +88,10 @@ class TabsComponent extends TabsContextBase {
|
|
|
84
88
|
.replace(/^-+|-+$/g, '');
|
|
85
89
|
return normalized || 'tab';
|
|
86
90
|
}
|
|
87
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
88
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
91
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
92
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: TabsComponent, isStandalone: true, selector: "ui-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-orientation": "orientation()" } }, providers: [{ provide: TabsContextBase, useExisting: forwardRef(() => TabsComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
89
93
|
}
|
|
90
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
94
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TabsComponent, decorators: [{
|
|
91
95
|
type: Component,
|
|
92
96
|
args: [{
|
|
93
97
|
selector: 'ui-tabs',
|
|
@@ -102,9 +106,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
102
106
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
103
107
|
class TabsListComponent extends TabsListContextBase {
|
|
104
108
|
ctx = inject(TabsComponent);
|
|
105
|
-
variant = input('default',
|
|
106
|
-
|
|
107
|
-
|
|
109
|
+
variant = input('default', /* @ts-ignore */
|
|
110
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
111
|
+
class = input('', /* @ts-ignore */
|
|
112
|
+
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
113
|
+
classes = computed(() => cn(this.variantClasses(), this.class()), /* @ts-ignore */
|
|
114
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
108
115
|
listVariant() {
|
|
109
116
|
return this.variant();
|
|
110
117
|
}
|
|
@@ -118,10 +125,10 @@ class TabsListComponent extends TabsListContextBase {
|
|
|
118
125
|
? 'inline-flex flex-col items-stretch justify-start rounded-md bg-muted p-1 text-muted-foreground'
|
|
119
126
|
: 'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground';
|
|
120
127
|
}
|
|
121
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
122
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
128
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TabsListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
129
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: TabsListComponent, isStandalone: true, selector: "ui-tabs-list", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"tablist\"", "attr.aria-orientation": "ctx.orientation()", "attr.data-variant": "variant()" } }, providers: [{ provide: TabsListContextBase, useExisting: forwardRef(() => TabsListComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
123
130
|
}
|
|
124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TabsListComponent, decorators: [{
|
|
125
132
|
type: Component,
|
|
126
133
|
args: [{
|
|
127
134
|
selector: 'ui-tabs-list',
|
|
@@ -140,13 +147,20 @@ class TabsTriggerComponent {
|
|
|
140
147
|
ctx = inject(TabsComponent);
|
|
141
148
|
list = inject(TabsListContextBase, { optional: true });
|
|
142
149
|
el = inject(ElementRef);
|
|
143
|
-
value = input.required(
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
+
value = input.required(/* @ts-ignore */
|
|
151
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
152
|
+
disabled = input(false, /* @ts-ignore */
|
|
153
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
154
|
+
class = input('', /* @ts-ignore */
|
|
155
|
+
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
156
|
+
selected = computed(() => this.ctx.value() === this.value(), /* @ts-ignore */
|
|
157
|
+
...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
158
|
+
triggerId = computed(() => this.ctx.triggerId(this.value()), /* @ts-ignore */
|
|
159
|
+
...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
|
|
160
|
+
contentId = computed(() => this.ctx.contentId(this.value()), /* @ts-ignore */
|
|
161
|
+
...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
|
|
162
|
+
classes = computed(() => cn('inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium', 'ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', this.variantClasses(), this.class()), /* @ts-ignore */
|
|
163
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
150
164
|
ngOnInit() {
|
|
151
165
|
this.ctx.register(this.el.nativeElement, this.value, this.disabled);
|
|
152
166
|
}
|
|
@@ -181,10 +195,10 @@ class TabsTriggerComponent {
|
|
|
181
195
|
}
|
|
182
196
|
return cn('rounded-sm px-3 py-1.5 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm', this.ctx.orientation() === 'vertical' && 'w-full justify-start');
|
|
183
197
|
}
|
|
184
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
185
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
198
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TabsTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
199
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: TabsTriggerComponent, isStandalone: true, selector: "button[ui-tabs-trigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()", "keydown.arrowRight": "onArrow($any($event), 1, \"horizontal\")", "keydown.arrowLeft": "onArrow($any($event), -1, \"horizontal\")", "keydown.arrowDown": "onArrow($any($event), 1, \"vertical\")", "keydown.arrowUp": "onArrow($any($event), -1, \"vertical\")", "keydown.home": "onHome($any($event))", "keydown.end": "onEnd($any($event))" }, properties: { "class": "classes()", "id": "triggerId()", "attr.role": "\"tab\"", "attr.aria-selected": "selected()", "attr.aria-controls": "contentId()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "selected() ? 0 : -1", "attr.data-state": "selected() ? \"active\" : \"inactive\"", "disabled": "disabled() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
186
200
|
}
|
|
187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
201
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TabsTriggerComponent, decorators: [{
|
|
188
202
|
type: Component,
|
|
189
203
|
args: [{
|
|
190
204
|
selector: 'button[ui-tabs-trigger]',
|
|
@@ -213,18 +227,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
213
227
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
214
228
|
class TabsContentComponent {
|
|
215
229
|
ctx = inject(TabsComponent);
|
|
216
|
-
value = input.required(
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
230
|
+
value = input.required(/* @ts-ignore */
|
|
231
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
232
|
+
class = input('', /* @ts-ignore */
|
|
233
|
+
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
234
|
+
active = computed(() => this.ctx.value() === this.value(), /* @ts-ignore */
|
|
235
|
+
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
236
|
+
triggerId = computed(() => this.ctx.triggerId(this.value()), /* @ts-ignore */
|
|
237
|
+
...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
|
|
238
|
+
contentId = computed(() => this.ctx.contentId(this.value()), /* @ts-ignore */
|
|
239
|
+
...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
|
|
240
|
+
classes = computed(() => cn('mt-2 block ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.class()), /* @ts-ignore */
|
|
241
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
242
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TabsContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
243
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: TabsContentComponent, isStandalone: true, selector: "ui-tabs-content", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, properties: { "class": "classes()", "id": "contentId()", "attr.role": "\"tabpanel\"", "attr.aria-labelledby": "triggerId()", "attr.data-state": "active() ? \"active\" : \"inactive\"", "hidden": "!active()" } }, ngImport: i0, template: `@if (active()) {
|
|
224
244
|
<ng-content />
|
|
225
245
|
}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
226
246
|
}
|
|
227
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TabsContentComponent, decorators: [{
|
|
228
248
|
type: Component,
|
|
229
249
|
args: [{
|
|
230
250
|
selector: 'ui-tabs-content',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ojiepermana-angular-component-tabs.mjs","sources":["../../../projects/angular/component/tabs/src/lib/tabs.component.ts","../../../projects/angular/component/tabs/ojiepermana-angular-component-tabs.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Directive,\n ElementRef,\n computed,\n forwardRef,\n inject,\n input,\n model,\n} from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\nexport type TabsListVariant = 'default' | 'line';\n\ninterface TabsTriggerRegistration {\n readonly element: HTMLElement;\n readonly value: () => string;\n readonly disabled: () => boolean;\n}\n\nlet nextTabsId = 0;\n\n/**\n * Shared state for a tabs group. Children read the active value and register\n * themselves so the group can drive roving-tabindex keyboard navigation.\n */\n@Directive()\nexport abstract class TabsContextBase {\n abstract value: ReturnType<typeof model<string | null>>;\n abstract register(element: HTMLElement, value: () => string, disabled: () => boolean): void;\n abstract unregister(element: HTMLElement): void;\n abstract activate(value: string, focus?: boolean): void;\n abstract focusNext(from: HTMLElement, offset: number): void;\n abstract focusFirst(): void;\n abstract focusLast(): void;\n abstract triggerId(value: string): string;\n abstract contentId(value: string): string;\n}\n\n@Directive()\nexport abstract class TabsListContextBase {\n abstract listVariant(): TabsListVariant;\n}\n\n@Component({\n selector: 'ui-tabs',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: TabsContextBase, useExisting: forwardRef(() => TabsComponent) }],\n host: {\n '[class]': 'classes()',\n '[attr.data-orientation]': 'orientation()',\n },\n template: `<ng-content />`,\n})\nexport class TabsComponent extends TabsContextBase {\n readonly value = model<string | null>(null);\n readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n readonly class = input<string>('');\n\n private readonly idPrefix = `ui-tabs-${nextTabsId++}`;\n private readonly triggers = new Map<HTMLElement, TabsTriggerRegistration>();\n\n protected readonly classes = computed(() =>\n cn(this.orientation() === 'vertical' ? 'flex items-start gap-4' : 'block', this.class()),\n );\n\n override register(element: HTMLElement, value: () => string, disabled: () => boolean): void {\n this.triggers.set(element, { element, value, disabled });\n\n if (this.value() == null && !disabled()) {\n this.value.set(value());\n }\n }\n\n override unregister(element: HTMLElement): void {\n this.triggers.delete(element);\n }\n\n override activate(value: string, focus = false): void {\n const trigger = this.triggerForValue(value);\n if (!trigger || trigger.disabled()) return;\n\n this.value.set(value);\n if (focus) {\n trigger.element.focus();\n }\n }\n\n override focusNext(from: HTMLElement, offset: number): void {\n const enabledTriggers = this.enabledTriggers();\n const currentIndex = enabledTriggers.findIndex((trigger) => trigger.element === from);\n if (currentIndex < 0 || enabledTriggers.length === 0) return;\n\n const nextTrigger = enabledTriggers[(currentIndex + offset + enabledTriggers.length) % enabledTriggers.length];\n this.activate(nextTrigger.value(), true);\n }\n\n override focusFirst(): void {\n const firstTrigger = this.enabledTriggers()[0];\n if (firstTrigger) this.activate(firstTrigger.value(), true);\n }\n\n override focusLast(): void {\n const enabledTriggers = this.enabledTriggers();\n const lastTrigger = enabledTriggers[enabledTriggers.length - 1];\n if (lastTrigger) this.activate(lastTrigger.value(), true);\n }\n\n override triggerId(value: string): string {\n return `${this.idPrefix}-trigger-${this.normalizeValue(value)}`;\n }\n\n override contentId(value: string): string {\n return `${this.idPrefix}-content-${this.normalizeValue(value)}`;\n }\n\n private enabledTriggers(): TabsTriggerRegistration[] {\n return [...this.triggers.values()].filter((trigger) => !trigger.disabled());\n }\n\n private triggerForValue(value: string): TabsTriggerRegistration | undefined {\n return [...this.triggers.values()].find((trigger) => trigger.value() === value);\n }\n\n private normalizeValue(value: string): string {\n const normalized = value\n .toLowerCase()\n .replace(/[^a-z0-9_-]+/g, '-')\n .replace(/^-+|-+$/g, '');\n\n return normalized || 'tab';\n }\n}\n\n@Component({\n selector: 'ui-tabs-list',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: TabsListContextBase, useExisting: forwardRef(() => TabsListComponent) }],\n host: {\n '[class]': 'classes()',\n '[attr.role]': '\"tablist\"',\n '[attr.aria-orientation]': 'ctx.orientation()',\n '[attr.data-variant]': 'variant()',\n },\n template: `<ng-content />`,\n})\nexport class TabsListComponent extends TabsListContextBase {\n protected readonly ctx = inject(TabsComponent);\n readonly variant = input<TabsListVariant>('default');\n readonly class = input<string>('');\n\n protected readonly classes = computed(() => cn(this.variantClasses(), this.class()));\n\n override listVariant(): TabsListVariant {\n return this.variant();\n }\n\n private variantClasses(): string {\n if (this.variant() === 'line') {\n return this.ctx.orientation() === 'vertical'\n ? 'inline-flex flex-col items-stretch justify-start gap-1 border-e border-border bg-transparent p-0 pe-3 text-muted-foreground'\n : 'inline-flex h-9 items-center justify-start gap-4 border-b border-border bg-transparent p-0 text-muted-foreground';\n }\n\n return this.ctx.orientation() === 'vertical'\n ? 'inline-flex flex-col items-stretch justify-start rounded-md bg-muted p-1 text-muted-foreground'\n : 'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground';\n }\n}\n\n@Component({\n selector: 'button[ui-tabs-trigger]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'classes()',\n '[id]': 'triggerId()',\n type: 'button',\n '[attr.role]': '\"tab\"',\n '[attr.aria-selected]': 'selected()',\n '[attr.aria-controls]': 'contentId()',\n '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n '[attr.tabindex]': 'selected() ? 0 : -1',\n '[attr.data-state]': 'selected() ? \"active\" : \"inactive\"',\n '[disabled]': 'disabled() || null',\n '(click)': 'onClick()',\n '(keydown.arrowRight)': 'onArrow($any($event), 1, \"horizontal\")',\n '(keydown.arrowLeft)': 'onArrow($any($event), -1, \"horizontal\")',\n '(keydown.arrowDown)': 'onArrow($any($event), 1, \"vertical\")',\n '(keydown.arrowUp)': 'onArrow($any($event), -1, \"vertical\")',\n '(keydown.home)': 'onHome($any($event))',\n '(keydown.end)': 'onEnd($any($event))',\n },\n template: `<ng-content />`,\n})\nexport class TabsTriggerComponent {\n protected readonly ctx = inject(TabsComponent);\n private readonly list = inject(TabsListContextBase, { optional: true });\n private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n\n readonly value = input.required<string>();\n readonly disabled = input<boolean>(false);\n readonly class = input<string>('');\n\n protected readonly selected = computed(() => this.ctx.value() === this.value());\n protected readonly triggerId = computed(() => this.ctx.triggerId(this.value()));\n protected readonly contentId = computed(() => this.ctx.contentId(this.value()));\n\n protected readonly classes = computed(() =>\n cn(\n 'inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium',\n 'ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n 'disabled:pointer-events-none disabled:opacity-50',\n this.variantClasses(),\n this.class(),\n ),\n );\n\n ngOnInit(): void {\n this.ctx.register(this.el.nativeElement, this.value, this.disabled);\n }\n\n ngOnDestroy(): void {\n this.ctx.unregister(this.el.nativeElement);\n }\n\n protected onClick(): void {\n if (this.disabled()) return;\n this.ctx.activate(this.value());\n }\n\n protected onArrow(e: KeyboardEvent, delta: number, axis: 'horizontal' | 'vertical'): void {\n if (this.ctx.orientation() !== axis) return;\n e.preventDefault();\n this.ctx.focusNext(this.el.nativeElement, delta);\n }\n\n protected onHome(e: KeyboardEvent): void {\n e.preventDefault();\n this.ctx.focusFirst();\n }\n\n protected onEnd(e: KeyboardEvent): void {\n e.preventDefault();\n this.ctx.focusLast();\n }\n\n private variantClasses(): string {\n const variant = this.list?.listVariant() ?? 'default';\n\n if (variant === 'line') {\n return this.ctx.orientation() === 'vertical'\n ? 'w-full justify-start rounded-none border-e-2 border-transparent px-3 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none'\n : 'rounded-none border-b-2 border-transparent px-2 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none';\n }\n\n return cn(\n 'rounded-sm px-3 py-1.5 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n this.ctx.orientation() === 'vertical' && 'w-full justify-start',\n );\n }\n}\n\n@Component({\n selector: 'ui-tabs-content',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'classes()',\n '[id]': 'contentId()',\n '[attr.role]': '\"tabpanel\"',\n '[attr.aria-labelledby]': 'triggerId()',\n '[attr.data-state]': 'active() ? \"active\" : \"inactive\"',\n '[hidden]': '!active()',\n tabindex: '0',\n },\n template: `@if (active()) {\n <ng-content />\n }`,\n})\nexport class TabsContentComponent {\n private readonly ctx = inject(TabsComponent);\n readonly value = input.required<string>();\n readonly class = input<string>('');\n protected readonly active = computed(() => this.ctx.value() === this.value());\n protected readonly triggerId = computed(() => this.ctx.triggerId(this.value()));\n protected readonly contentId = computed(() => this.ctx.contentId(this.value()));\n protected readonly classes = computed(() =>\n cn(\n 'mt-2 block ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n this.class(),\n ),\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ojiepermana-angular-component-tabs.mjs","sources":["../../../projects/angular/component/tabs/tabs.component.ts","../../../projects/angular/component/tabs/ojiepermana-angular-component-tabs.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Directive,\n ElementRef,\n computed,\n forwardRef,\n inject,\n input,\n model,\n} from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\nexport type TabsListVariant = 'default' | 'line';\n\ninterface TabsTriggerRegistration {\n readonly element: HTMLElement;\n readonly value: () => string;\n readonly disabled: () => boolean;\n}\n\nlet nextTabsId = 0;\n\n/**\n * Shared state for a tabs group. Children read the active value and register\n * themselves so the group can drive roving-tabindex keyboard navigation.\n */\n@Directive()\nexport abstract class TabsContextBase {\n abstract value: ReturnType<typeof model<string | null>>;\n abstract register(element: HTMLElement, value: () => string, disabled: () => boolean): void;\n abstract unregister(element: HTMLElement): void;\n abstract activate(value: string, focus?: boolean): void;\n abstract focusNext(from: HTMLElement, offset: number): void;\n abstract focusFirst(): void;\n abstract focusLast(): void;\n abstract triggerId(value: string): string;\n abstract contentId(value: string): string;\n}\n\n@Directive()\nexport abstract class TabsListContextBase {\n abstract listVariant(): TabsListVariant;\n}\n\n@Component({\n selector: 'ui-tabs',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: TabsContextBase, useExisting: forwardRef(() => TabsComponent) }],\n host: {\n '[class]': 'classes()',\n '[attr.data-orientation]': 'orientation()',\n },\n template: `<ng-content />`,\n})\nexport class TabsComponent extends TabsContextBase {\n readonly value = model<string | null>(null);\n readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n readonly class = input<string>('');\n\n private readonly idPrefix = `ui-tabs-${nextTabsId++}`;\n private readonly triggers = new Map<HTMLElement, TabsTriggerRegistration>();\n\n protected readonly classes = computed(() =>\n cn(this.orientation() === 'vertical' ? 'flex items-start gap-4' : 'block', this.class()),\n );\n\n override register(element: HTMLElement, value: () => string, disabled: () => boolean): void {\n this.triggers.set(element, { element, value, disabled });\n\n if (this.value() == null && !disabled()) {\n this.value.set(value());\n }\n }\n\n override unregister(element: HTMLElement): void {\n this.triggers.delete(element);\n }\n\n override activate(value: string, focus = false): void {\n const trigger = this.triggerForValue(value);\n if (!trigger || trigger.disabled()) return;\n\n this.value.set(value);\n if (focus) {\n trigger.element.focus();\n }\n }\n\n override focusNext(from: HTMLElement, offset: number): void {\n const enabledTriggers = this.enabledTriggers();\n const currentIndex = enabledTriggers.findIndex((trigger) => trigger.element === from);\n if (currentIndex < 0 || enabledTriggers.length === 0) return;\n\n const nextTrigger = enabledTriggers[(currentIndex + offset + enabledTriggers.length) % enabledTriggers.length];\n this.activate(nextTrigger.value(), true);\n }\n\n override focusFirst(): void {\n const firstTrigger = this.enabledTriggers()[0];\n if (firstTrigger) this.activate(firstTrigger.value(), true);\n }\n\n override focusLast(): void {\n const enabledTriggers = this.enabledTriggers();\n const lastTrigger = enabledTriggers[enabledTriggers.length - 1];\n if (lastTrigger) this.activate(lastTrigger.value(), true);\n }\n\n override triggerId(value: string): string {\n return `${this.idPrefix}-trigger-${this.normalizeValue(value)}`;\n }\n\n override contentId(value: string): string {\n return `${this.idPrefix}-content-${this.normalizeValue(value)}`;\n }\n\n private enabledTriggers(): TabsTriggerRegistration[] {\n return [...this.triggers.values()].filter((trigger) => !trigger.disabled());\n }\n\n private triggerForValue(value: string): TabsTriggerRegistration | undefined {\n return [...this.triggers.values()].find((trigger) => trigger.value() === value);\n }\n\n private normalizeValue(value: string): string {\n const normalized = value\n .toLowerCase()\n .replace(/[^a-z0-9_-]+/g, '-')\n .replace(/^-+|-+$/g, '');\n\n return normalized || 'tab';\n }\n}\n\n@Component({\n selector: 'ui-tabs-list',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: TabsListContextBase, useExisting: forwardRef(() => TabsListComponent) }],\n host: {\n '[class]': 'classes()',\n '[attr.role]': '\"tablist\"',\n '[attr.aria-orientation]': 'ctx.orientation()',\n '[attr.data-variant]': 'variant()',\n },\n template: `<ng-content />`,\n})\nexport class TabsListComponent extends TabsListContextBase {\n protected readonly ctx = inject(TabsComponent);\n readonly variant = input<TabsListVariant>('default');\n readonly class = input<string>('');\n\n protected readonly classes = computed(() => cn(this.variantClasses(), this.class()));\n\n override listVariant(): TabsListVariant {\n return this.variant();\n }\n\n private variantClasses(): string {\n if (this.variant() === 'line') {\n return this.ctx.orientation() === 'vertical'\n ? 'inline-flex flex-col items-stretch justify-start gap-1 border-e border-border bg-transparent p-0 pe-3 text-muted-foreground'\n : 'inline-flex h-9 items-center justify-start gap-4 border-b border-border bg-transparent p-0 text-muted-foreground';\n }\n\n return this.ctx.orientation() === 'vertical'\n ? 'inline-flex flex-col items-stretch justify-start rounded-md bg-muted p-1 text-muted-foreground'\n : 'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground';\n }\n}\n\n@Component({\n selector: 'button[ui-tabs-trigger]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'classes()',\n '[id]': 'triggerId()',\n type: 'button',\n '[attr.role]': '\"tab\"',\n '[attr.aria-selected]': 'selected()',\n '[attr.aria-controls]': 'contentId()',\n '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n '[attr.tabindex]': 'selected() ? 0 : -1',\n '[attr.data-state]': 'selected() ? \"active\" : \"inactive\"',\n '[disabled]': 'disabled() || null',\n '(click)': 'onClick()',\n '(keydown.arrowRight)': 'onArrow($any($event), 1, \"horizontal\")',\n '(keydown.arrowLeft)': 'onArrow($any($event), -1, \"horizontal\")',\n '(keydown.arrowDown)': 'onArrow($any($event), 1, \"vertical\")',\n '(keydown.arrowUp)': 'onArrow($any($event), -1, \"vertical\")',\n '(keydown.home)': 'onHome($any($event))',\n '(keydown.end)': 'onEnd($any($event))',\n },\n template: `<ng-content />`,\n})\nexport class TabsTriggerComponent {\n protected readonly ctx = inject(TabsComponent);\n private readonly list = inject(TabsListContextBase, { optional: true });\n private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n\n readonly value = input.required<string>();\n readonly disabled = input<boolean>(false);\n readonly class = input<string>('');\n\n protected readonly selected = computed(() => this.ctx.value() === this.value());\n protected readonly triggerId = computed(() => this.ctx.triggerId(this.value()));\n protected readonly contentId = computed(() => this.ctx.contentId(this.value()));\n\n protected readonly classes = computed(() =>\n cn(\n 'inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium',\n 'ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n 'disabled:pointer-events-none disabled:opacity-50',\n this.variantClasses(),\n this.class(),\n ),\n );\n\n ngOnInit(): void {\n this.ctx.register(this.el.nativeElement, this.value, this.disabled);\n }\n\n ngOnDestroy(): void {\n this.ctx.unregister(this.el.nativeElement);\n }\n\n protected onClick(): void {\n if (this.disabled()) return;\n this.ctx.activate(this.value());\n }\n\n protected onArrow(e: KeyboardEvent, delta: number, axis: 'horizontal' | 'vertical'): void {\n if (this.ctx.orientation() !== axis) return;\n e.preventDefault();\n this.ctx.focusNext(this.el.nativeElement, delta);\n }\n\n protected onHome(e: KeyboardEvent): void {\n e.preventDefault();\n this.ctx.focusFirst();\n }\n\n protected onEnd(e: KeyboardEvent): void {\n e.preventDefault();\n this.ctx.focusLast();\n }\n\n private variantClasses(): string {\n const variant = this.list?.listVariant() ?? 'default';\n\n if (variant === 'line') {\n return this.ctx.orientation() === 'vertical'\n ? 'w-full justify-start rounded-none border-e-2 border-transparent px-3 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none'\n : 'rounded-none border-b-2 border-transparent px-2 py-2 data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none';\n }\n\n return cn(\n 'rounded-sm px-3 py-1.5 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n this.ctx.orientation() === 'vertical' && 'w-full justify-start',\n );\n }\n}\n\n@Component({\n selector: 'ui-tabs-content',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'classes()',\n '[id]': 'contentId()',\n '[attr.role]': '\"tabpanel\"',\n '[attr.aria-labelledby]': 'triggerId()',\n '[attr.data-state]': 'active() ? \"active\" : \"inactive\"',\n '[hidden]': '!active()',\n tabindex: '0',\n },\n template: `@if (active()) {\n <ng-content />\n }`,\n})\nexport class TabsContentComponent {\n private readonly ctx = inject(TabsComponent);\n readonly value = input.required<string>();\n readonly class = input<string>('');\n protected readonly active = computed(() => this.ctx.value() === this.value());\n protected readonly triggerId = computed(() => this.ctx.triggerId(this.value()));\n protected readonly contentId = computed(() => this.ctx.contentId(this.value()));\n protected readonly classes = computed(() =>\n cn(\n 'mt-2 block ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n this.class(),\n ),\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -4,22 +4,24 @@ import { cn } from '@ojiepermana/angular/component/utils';
|
|
|
4
4
|
|
|
5
5
|
class TextareaComponent {
|
|
6
6
|
el = inject(ElementRef);
|
|
7
|
-
class = input('',
|
|
7
|
+
class = input('', /* @ts-ignore */
|
|
8
|
+
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
8
9
|
classes = computed(() => cn([
|
|
9
|
-
'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2',
|
|
10
|
+
'flex min-h-[60px] w-full resize-y rounded-md border border-input bg-transparent px-3 py-2',
|
|
10
11
|
'text-sm shadow-sm transition-colors',
|
|
11
12
|
'placeholder:text-muted-foreground',
|
|
12
13
|
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
|
|
13
14
|
'disabled:cursor-not-allowed disabled:opacity-50',
|
|
14
15
|
'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive',
|
|
15
|
-
].join(' '), this.class()),
|
|
16
|
+
].join(' '), this.class()), /* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
16
18
|
focus() {
|
|
17
19
|
this.el.nativeElement.focus();
|
|
18
20
|
}
|
|
19
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
20
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
21
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: TextareaComponent, isStandalone: true, selector: "textarea[ui-textarea]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21
23
|
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
24
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
23
25
|
type: Component,
|
|
24
26
|
args: [{
|
|
25
27
|
selector: 'textarea[ui-textarea]',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ojiepermana-angular-component-textarea.mjs","sources":["../../../projects/angular/component/textarea/
|
|
1
|
+
{"version":3,"file":"ojiepermana-angular-component-textarea.mjs","sources":["../../../projects/angular/component/textarea/textarea.component.ts","../../../projects/angular/component/textarea/ojiepermana-angular-component-textarea.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, computed, inject, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n@Component({\n selector: 'textarea[ui-textarea]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: '',\n})\nexport class TextareaComponent {\n private readonly el = inject<ElementRef<HTMLTextAreaElement>>(ElementRef);\n readonly class = input<string>('');\n\n protected readonly classes = computed(() =>\n cn(\n [\n 'flex min-h-[60px] w-full resize-y rounded-md border border-input bg-transparent px-3 py-2',\n 'text-sm shadow-sm transition-colors',\n 'placeholder:text-muted-foreground',\n 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive',\n ].join(' '),\n this.class(),\n ),\n );\n\n focus(): void {\n this.el.nativeElement.focus();\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,iBAAiB,CAAA;AACX,IAAA,EAAE,GAAG,MAAM,CAAkC,UAAU,CAAC;IAChE,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CACA;QACE,2FAA2F;QAC3F,qCAAqC;QACrC,mCAAmC;QACnC,yEAAyE;QACzE,iDAAiD;QACjD,2FAA2F;KAC5F,CAAC,IAAI,CAAC,GAAG,CAAC,EACX,IAAI,CAAC,KAAK,EAAE,CACb;gFACF;IAED,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE;IAC/B;uGApBW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,qQAFlB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAED,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uBAAuB;oBACjC,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE;AAChC,oBAAA,QAAQ,EAAE,EAAE;AACb,iBAAA;;;ACRD;;AAEG;;;;"}
|
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, booleanAttribute, computed, ChangeDetectionStrategy, Component, inject } from '@angular/core';
|
|
3
|
+
import { cn } from '@ojiepermana/angular/component/utils';
|
|
4
|
+
|
|
5
|
+
const TIMELINE_BASE = [
|
|
6
|
+
'w-full min-w-0 text-sm text-foreground',
|
|
7
|
+
'[--timeline-content-gap:0.75rem] [--timeline-indicator-size:1.5rem] [--timeline-item-gap:1.5rem]',
|
|
8
|
+
].join(' ');
|
|
9
|
+
const timelineSizeClasses = {
|
|
10
|
+
default: '[--timeline-indicator-size:1.5rem]',
|
|
11
|
+
lg: '[--timeline-indicator-size:2.5rem] [--timeline-content-gap:1rem]',
|
|
12
|
+
};
|
|
13
|
+
const timelineAlignClasses = {
|
|
14
|
+
start: 'items-start',
|
|
15
|
+
baseline: 'items-baseline',
|
|
16
|
+
center: 'items-center',
|
|
17
|
+
end: 'items-end',
|
|
18
|
+
};
|
|
19
|
+
const timelineItemStatusClasses = {
|
|
20
|
+
complete: 'before:bg-primary after:bg-primary',
|
|
21
|
+
current: 'before:bg-border after:bg-border',
|
|
22
|
+
incomplete: 'before:bg-border/70 after:bg-border/70',
|
|
23
|
+
};
|
|
24
|
+
const timelineIndicatorStatusClasses = {
|
|
25
|
+
complete: 'border-primary bg-primary text-primary-foreground',
|
|
26
|
+
current: 'border-ring bg-background text-foreground ring-2 ring-ring ring-offset-2 ring-offset-background',
|
|
27
|
+
incomplete: 'border-border bg-background text-muted-foreground',
|
|
28
|
+
};
|
|
29
|
+
const timelineIndicatorColorClasses = {
|
|
30
|
+
red: 'border-red-500 bg-red-500 text-white',
|
|
31
|
+
orange: 'border-orange-500 bg-orange-500 text-white',
|
|
32
|
+
amber: 'border-amber-500 bg-amber-500 text-white',
|
|
33
|
+
yellow: 'border-yellow-400 bg-yellow-400 text-black',
|
|
34
|
+
lime: 'border-lime-500 bg-lime-500 text-black',
|
|
35
|
+
green: 'border-green-600 bg-green-600 text-white',
|
|
36
|
+
emerald: 'border-emerald-600 bg-emerald-600 text-white',
|
|
37
|
+
teal: 'border-teal-600 bg-teal-600 text-white',
|
|
38
|
+
cyan: 'border-cyan-600 bg-cyan-600 text-white',
|
|
39
|
+
sky: 'border-sky-600 bg-sky-600 text-white',
|
|
40
|
+
blue: 'border-blue-600 bg-blue-600 text-white',
|
|
41
|
+
indigo: 'border-indigo-600 bg-indigo-600 text-white',
|
|
42
|
+
violet: 'border-violet-600 bg-violet-600 text-white',
|
|
43
|
+
purple: 'border-purple-600 bg-purple-600 text-white',
|
|
44
|
+
fuchsia: 'border-fuchsia-600 bg-fuchsia-600 text-white',
|
|
45
|
+
pink: 'border-pink-600 bg-pink-600 text-white',
|
|
46
|
+
rose: 'border-rose-600 bg-rose-600 text-white',
|
|
47
|
+
};
|
|
48
|
+
class TimelineComponent {
|
|
49
|
+
horizontal = input(false, { ...(ngDevMode ? { debugName: "horizontal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
50
|
+
align = input('center', /* @ts-ignore */
|
|
51
|
+
...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
52
|
+
size = input('default', /* @ts-ignore */
|
|
53
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
54
|
+
class = input('', /* @ts-ignore */
|
|
55
|
+
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
56
|
+
classes = computed(() => cn(TIMELINE_BASE, timelineSizeClasses[this.size()], this.horizontal() ? 'flex min-w-0 items-start gap-[var(--timeline-item-gap)] overflow-x-auto pb-1' : 'grid', this.class()), /* @ts-ignore */
|
|
57
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
58
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
59
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: TimelineComponent, isStandalone: true, selector: "ui-timeline", inputs: { horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline\"", "attr.data-orientation": "horizontal() ? \"horizontal\" : \"vertical\"", "attr.data-align": "align()", "attr.data-size": "size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
60
|
+
}
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TimelineComponent, decorators: [{
|
|
62
|
+
type: Component,
|
|
63
|
+
args: [{
|
|
64
|
+
selector: 'ui-timeline',
|
|
65
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
66
|
+
host: {
|
|
67
|
+
'[class]': 'classes()',
|
|
68
|
+
'[attr.data-slot]': '"timeline"',
|
|
69
|
+
'[attr.data-orientation]': 'horizontal() ? "horizontal" : "vertical"',
|
|
70
|
+
'[attr.data-align]': 'align()',
|
|
71
|
+
'[attr.data-size]': 'size()',
|
|
72
|
+
},
|
|
73
|
+
template: `<ng-content />`,
|
|
74
|
+
}]
|
|
75
|
+
}], propDecorators: { horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
76
|
+
class TimelineItemComponent {
|
|
77
|
+
timeline = inject(TimelineComponent, { optional: true });
|
|
78
|
+
status = input(null, /* @ts-ignore */
|
|
79
|
+
...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
|
|
80
|
+
align = input(null, /* @ts-ignore */
|
|
81
|
+
...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
82
|
+
size = input(null, /* @ts-ignore */
|
|
83
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
84
|
+
class = input('', /* @ts-ignore */
|
|
85
|
+
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
86
|
+
orientation = computed(() => (this.timeline?.horizontal() ? 'horizontal' : 'vertical'), /* @ts-ignore */
|
|
87
|
+
...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
88
|
+
resolvedAlign = computed(() => this.align() ?? this.timeline?.align() ?? 'center', /* @ts-ignore */
|
|
89
|
+
...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
|
|
90
|
+
resolvedSize = computed(() => this.size() ?? this.timeline?.size() ?? 'default', /* @ts-ignore */
|
|
91
|
+
...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
|
|
92
|
+
classes = computed(() => {
|
|
93
|
+
const status = this.status();
|
|
94
|
+
const orientation = this.orientation();
|
|
95
|
+
return cn('relative min-w-0', timelineSizeClasses[this.resolvedSize()], orientation === 'horizontal'
|
|
96
|
+
? [
|
|
97
|
+
"before:content-['']",
|
|
98
|
+
'grid min-w-32 flex-1 justify-items-center gap-y-2 text-center',
|
|
99
|
+
'before:absolute before:left-0 before:right-0 before:top-[calc(var(--timeline-indicator-size)/2)] before:h-px before:bg-border',
|
|
100
|
+
'first:before:left-1/2 last:before:right-1/2',
|
|
101
|
+
].join(' ')
|
|
102
|
+
: [
|
|
103
|
+
"after:content-['']",
|
|
104
|
+
'grid grid-cols-[var(--timeline-indicator-size)_minmax(0,1fr)] gap-x-[var(--timeline-content-gap)] pb-[var(--timeline-item-gap)] last:pb-0',
|
|
105
|
+
'after:absolute after:bottom-0 after:left-[calc(var(--timeline-indicator-size)/2)] after:top-[calc(var(--timeline-indicator-size)+0.25rem)] after:w-px after:-translate-x-1/2 after:bg-border last:after:hidden',
|
|
106
|
+
timelineAlignClasses[this.resolvedAlign()],
|
|
107
|
+
].join(' '), status ? timelineItemStatusClasses[status] : 'before:bg-border after:bg-border', this.class());
|
|
108
|
+
}, /* @ts-ignore */
|
|
109
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
110
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
111
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: TimelineItemComponent, isStandalone: true, selector: "ui-timeline-item", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-item\"", "attr.data-orientation": "orientation()", "attr.data-align": "resolvedAlign()", "attr.data-size": "resolvedSize()", "attr.data-status": "status() ?? null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
112
|
+
}
|
|
113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TimelineItemComponent, decorators: [{
|
|
114
|
+
type: Component,
|
|
115
|
+
args: [{
|
|
116
|
+
selector: 'ui-timeline-item',
|
|
117
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
118
|
+
host: {
|
|
119
|
+
'[class]': 'classes()',
|
|
120
|
+
'[attr.data-slot]': '"timeline-item"',
|
|
121
|
+
'[attr.data-orientation]': 'orientation()',
|
|
122
|
+
'[attr.data-align]': 'resolvedAlign()',
|
|
123
|
+
'[attr.data-size]': 'resolvedSize()',
|
|
124
|
+
'[attr.data-status]': 'status() ?? null',
|
|
125
|
+
},
|
|
126
|
+
template: `<ng-content />`,
|
|
127
|
+
}]
|
|
128
|
+
}], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
129
|
+
class TimelineIndicatorComponent {
|
|
130
|
+
item = inject(TimelineItemComponent, { optional: true });
|
|
131
|
+
variant = input('default', /* @ts-ignore */
|
|
132
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
133
|
+
status = input(null, /* @ts-ignore */
|
|
134
|
+
...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
|
|
135
|
+
color = input(null, /* @ts-ignore */
|
|
136
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
137
|
+
class = input('', /* @ts-ignore */
|
|
138
|
+
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
139
|
+
resolvedStatus = computed(() => this.status() ?? this.item?.status() ?? 'incomplete', /* @ts-ignore */
|
|
140
|
+
...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
|
|
141
|
+
classes = computed(() => {
|
|
142
|
+
const color = this.color();
|
|
143
|
+
return cn('relative z-10 col-start-1 row-start-1 inline-flex shrink-0 items-center justify-center justify-self-center', this.item?.orientation() === 'horizontal' ? 'row-start-1' : '', this.variant() === 'bare'
|
|
144
|
+
? 'bg-background text-muted-foreground'
|
|
145
|
+
: [
|
|
146
|
+
'size-[var(--timeline-indicator-size)] rounded-full border text-xs font-medium shadow-sm',
|
|
147
|
+
color ? timelineIndicatorColorClasses[color] : timelineIndicatorStatusClasses[this.resolvedStatus()],
|
|
148
|
+
].join(' '), this.class());
|
|
149
|
+
}, /* @ts-ignore */
|
|
150
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
151
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TimelineIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
152
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: TimelineIndicatorComponent, isStandalone: true, selector: "ui-timeline-indicator", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-indicator\"", "attr.data-variant": "variant()", "attr.data-status": "resolvedStatus()", "attr.data-color": "color() ?? null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
153
|
+
}
|
|
154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TimelineIndicatorComponent, decorators: [{
|
|
155
|
+
type: Component,
|
|
156
|
+
args: [{
|
|
157
|
+
selector: 'ui-timeline-indicator',
|
|
158
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
159
|
+
host: {
|
|
160
|
+
'[class]': 'classes()',
|
|
161
|
+
'[attr.data-slot]': '"timeline-indicator"',
|
|
162
|
+
'[attr.data-variant]': 'variant()',
|
|
163
|
+
'[attr.data-status]': 'resolvedStatus()',
|
|
164
|
+
'[attr.data-color]': 'color() ?? null',
|
|
165
|
+
},
|
|
166
|
+
template: `<ng-content />`,
|
|
167
|
+
}]
|
|
168
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
169
|
+
class TimelineContentComponent {
|
|
170
|
+
item = inject(TimelineItemComponent, { optional: true });
|
|
171
|
+
class = input('', /* @ts-ignore */
|
|
172
|
+
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
173
|
+
classes = computed(() => cn('min-w-0 text-sm leading-6 text-foreground', this.item?.orientation() === 'horizontal' ? 'row-start-2 max-w-40 text-center' : 'col-start-2 row-start-1', this.class()), /* @ts-ignore */
|
|
174
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
175
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TimelineContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
176
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: TimelineContentComponent, isStandalone: true, selector: "ui-timeline-content", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-content\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
177
|
+
}
|
|
178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TimelineContentComponent, decorators: [{
|
|
179
|
+
type: Component,
|
|
180
|
+
args: [{
|
|
181
|
+
selector: 'ui-timeline-content',
|
|
182
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
183
|
+
host: {
|
|
184
|
+
'[class]': 'classes()',
|
|
185
|
+
'[attr.data-slot]': '"timeline-content"',
|
|
186
|
+
},
|
|
187
|
+
template: `<ng-content />`,
|
|
188
|
+
}]
|
|
189
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
190
|
+
class TimelineBlockComponent {
|
|
191
|
+
item = inject(TimelineItemComponent, { optional: true });
|
|
192
|
+
class = input('', /* @ts-ignore */
|
|
193
|
+
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
194
|
+
classes = computed(() => cn('min-w-0', this.item?.orientation() === 'horizontal' ? 'row-start-2 w-full' : 'col-span-full', this.class()), /* @ts-ignore */
|
|
195
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
196
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TimelineBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
197
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: TimelineBlockComponent, isStandalone: true, selector: "ui-timeline-block", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-block\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
198
|
+
}
|
|
199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TimelineBlockComponent, decorators: [{
|
|
200
|
+
type: Component,
|
|
201
|
+
args: [{
|
|
202
|
+
selector: 'ui-timeline-block',
|
|
203
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
204
|
+
host: {
|
|
205
|
+
'[class]': 'classes()',
|
|
206
|
+
'[attr.data-slot]': '"timeline-block"',
|
|
207
|
+
},
|
|
208
|
+
template: `<ng-content />`,
|
|
209
|
+
}]
|
|
210
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
211
|
+
class TimelineSubgridComponent {
|
|
212
|
+
class = input('', /* @ts-ignore */
|
|
213
|
+
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
214
|
+
classes = computed(() => cn('grid min-w-0 grid-cols-[var(--timeline-indicator-size)_minmax(0,1fr)] gap-x-[var(--timeline-content-gap)]', this.class()), /* @ts-ignore */
|
|
215
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
216
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TimelineSubgridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
217
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: TimelineSubgridComponent, isStandalone: true, selector: "ui-timeline-subgrid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-subgrid\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
218
|
+
}
|
|
219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TimelineSubgridComponent, decorators: [{
|
|
220
|
+
type: Component,
|
|
221
|
+
args: [{
|
|
222
|
+
selector: 'ui-timeline-subgrid',
|
|
223
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
224
|
+
host: {
|
|
225
|
+
'[class]': 'classes()',
|
|
226
|
+
'[attr.data-slot]': '"timeline-subgrid"',
|
|
227
|
+
},
|
|
228
|
+
template: `<ng-content />`,
|
|
229
|
+
}]
|
|
230
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
231
|
+
|
|
232
|
+
/**
|
|
233
|
+
* Generated bundle index. Do not edit.
|
|
234
|
+
*/
|
|
235
|
+
|
|
236
|
+
export { TimelineBlockComponent, TimelineComponent, TimelineContentComponent, TimelineIndicatorComponent, TimelineItemComponent, TimelineSubgridComponent };
|
|
237
|
+
//# sourceMappingURL=ojiepermana-angular-component-timeline.mjs.map
|